/* ==========================================================================
   FERLITE.COM - plain old personal homepage. No panels, no heavy chrome -
   just text and images sitting directly on the page, the way actual
   late-90s/2000s personal sites looked. Strictly black/white/grey - no
   colour accents anywhere; hierarchy comes from weight, size and fill
   instead (eg. the primary buy button is solid ink, not a colour). Flipped
   to a dark theme: --paper/--ink are inverted from the original light
   values (dark page, light ink) and every rule below still just reads those
   two variables, so nothing but their definitions had to change. The three
   hand-drawn PNGs (mascot/clouds/moon) are pixel-inverted on disk to match -
   see the git history/PIL invert step - since they're opaque black-on-white
   art, not transparent linework. Still wired to the same Moonbase storefront
   underneath (see js/site.js) - this file only reskins it.
   ========================================================================== */

:root {
    --paper: #111111;
    --ink: #f2f2f2;
    --ink-muted: #a0a0a0;
    --hairline: #444444;
    color-scheme: dark; /* hints native controls (the <audio> player, form fields) to render dark-themed where the browser supports it */
}

/* Inverts every rendered pixel of the page - palette, SVG strokes, and
   raster images/GIFs alike - in one pass, rather than hand-flipping every
   hex value and re-inverting each PNG on disk (which couldn't reach the
   animated landing.gif or the Music covers desktop.js discovers at runtime
   anyway). Safe as a blanket filter specifically because the whole site is
   strictly black/white/grey (see the file banner above) - inverting a pure
   grey just flips its lightness with no hue shift, so this can't introduce
   colour casts the way it would on a site with actual colour accents. */
html {
    filter: invert(1);
}

body {
    margin: 0;
    padding: 20px 12px 60px;
    background-color: var(--paper);
    color: #cfcfcf;
    font-family: "Times New Roman", Times, serif;
    font-size: 17px;
    line-height: 1.5;
}

body.is-desktop {
    padding: 0;
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--ink); }
a:visited { color: var(--ink-muted); }
a:hover { color: #ffffff; }

/* ---- buttons: dark classic grey by default, solid ink for the primary/buy action - */

.retro-btn {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    padding: 5px 13px;
    color: var(--ink);
    background: #2b2b2b;
    border: 2px outset #565656;
    cursor: pointer;
    text-decoration: none;
}

.retro-btn:hover { background: #363636; }
.retro-btn:active { border-style: inset; background: #1c1c1c; }
.retro-btn[disabled] { opacity: 0.5; cursor: default; }
.retro-btn--big { font-size: 15px; padding: 7px 18px; }

.retro-btn--buy {
    font-weight: bold;
    color: var(--paper);
    background: var(--ink);
    border-color: #b5b5b5;
}

.retro-btn--buy:hover { background: #ffffff; }
.retro-btn--buy:active { background: #ffffff; border-color: #ffffff; }

h1, h2, h3 {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--ink);
    letter-spacing: 0.2px;
}

h1 { font-size: 22px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }

/* ---- product ------------------------------------------------------------------- */

.product-card { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.product-card__art { flex: 0 0 150px; padding: 6px; }
.product-card__art img { width: 100%; display: block; }
.product-card__info { flex: 1 1 260px; }

.price-tag {
    display: inline-block;
    font-size: 26px;
    font-weight: bold;
    color: var(--ink);
    border: 2px solid var(--ink);
    padding: 1px 12px;
}

.strike { text-decoration: line-through; color: #999; font-size: 15px; margin-right: 6px; }

.new-badge {
    display: inline-block;
    color: var(--paper);
    background: var(--ink);
    font-weight: bold;
    font-size: 12px;
    padding: 1px 6px;
}

/* ---- toast --------------------------------------------------------------------------- */

#toast {
    position: fixed;
    bottom: 16px;
    right: 16px;
    max-width: 260px;
    z-index: 999;
    display: none;
    background: #1c1c1c;
    border: 1px solid var(--hairline);
    border-left: 4px solid var(--ink);
    padding: 8px 12px;
    font-size: 14px;
    color: #cfcfcf;
}

#toast.is-visible { display: block; }
#toast-title { color: var(--ink); font-weight: bold; display: block; margin-bottom: 4px; }

/* ---- landing screen: scribbles/ascii everywhere + the logo (index.html - a
   real link straight through to desktop.html, not a JS overlay) --------- */

#landing {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: var(--paper);
    overflow: hidden;
}

.landing-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.15s ease;
}

.landing-logo:hover { transform: translate(-50%, -50%) scale(1.05); }
.landing-logo:active { transform: translate(-50%, -50%) scale(0.97); }
.landing-logo img { width: 100%; height: auto; display: block; }

.landing-hint {
    position: absolute;
    top: calc(50% + 130px);
    left: 50%;
    transform: translate(-50%, 0);
    font-family: "Courier New", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--ink-muted);
    z-index: 2;
    white-space: nowrap;
}

/* ---- scattered scribble doodles + free-floating ascii art (see js/scribble.js) --------- */

.scribble-doodle {
    position: absolute;
    width: 120px;
    height: 120px;
    pointer-events: none;
    opacity: 1;
    z-index: 0;
}

.scribble-doodle svg { width: 100%; height: 100%; overflow: visible; }

.ascii-float {
    position: absolute;
    margin: 0;
    font-family: "Courier New", monospace;
    font-size: 15px;
    line-height: 1.15;
    color: var(--ink);
    white-space: pre;
    text-align: center;
    pointer-events: none;
    z-index: 0;
}

/* ---- scribble boxes: squiggly hand-drawn rectangles around content --------------------- */

.scribble-box-wrap { position: relative; }
.scribble-box-wrap--padded { padding: 12px 16px; }

.scribble-box {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* Every scribbled line on the page - the free-floating doodles and these
   boxes alike - shares this exact stroke width. vector-effect keeps it a
   constant screen-pixel thickness no matter how big/small the SVG's own
   box is scaled to (without it, a doodle stretched to a bigger container
   renders a visibly thicker line even though stroke-width is the same
   number, because the container's scale multiplies the stroke along with
   everything else). */
.scribble-doodle path,
.scribble-box path {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* ---- mouse paint trail (see js/trail.js) ------------------------------------------------ */

#scribble-trail {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
}

/* ---- helpers ------------------------------------------------------------------------- */

.muted { color: var(--ink-muted); }
.center { text-align: center; }
.mt { margin-top: 12px; }
[hidden] { display: none !important; }

/* ==========================================================================
   desktop.html - a fake OS desktop: double-click icons open draggable,
   closable windows (see js/desktop.js). Kept visually separate from the
   personal-homepage rules above (own titlebar/window chrome, no scribble
   boxes) but reuses the same --paper/--ink palette and .retro-btn/.price-tag/
   .product-card pieces inside window bodies.
   ========================================================================== */

#desktop {
    position: relative;
    flex: 1 1 auto;
    min-height: 0; /* let this shrink below its content's natural height instead of pushing the taskbar off-screen */
    width: 100%;
    background: var(--paper);
    overflow: hidden;
}

/* ---- wallpaper: scattered scribble blobs + hand-drawn art behind the icons/windows -----
   Same .scribble-doodle markup/animation as the landing screen (see
   js/scribble.js's generateDesktopWallpaper() + shared attachScribbleAnimation()),
   plus randomly-placed drawings from assets/drawings/ at a single shared
   scale (never scaled independently, so their original size relationships
   stay intact - see buildWallpaperDrawingPool()). */
#desktop-wallpaper {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.wallpaper-drawing {
    position: absolute;
    display: block;
    pointer-events: none;
}

.desktop-icons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 22px;
    z-index: 1;
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 84px;
    background: none;
    border: 1px dashed transparent;
    padding: 8px 4px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: var(--ink);
}

.desktop-icon__glyph { width: 40px; height: 40px; color: var(--ink); }
.desktop-icon__glyph svg, .desktop-icon__glyph img { width: 100%; height: 100%; display: block; object-fit: contain; }
.desktop-icon__label { text-align: center; line-height: 1.25; word-break: break-word; }

.desktop-icon.is-selected {
    background: rgba(242, 242, 242, 0.14);
    border-color: var(--hairline);
}

/* ---- taskbar (see js/desktop.js) ------------------------------------------------------ */

#taskbar {
    flex: 0 0 auto;
    height: 46px; /* keep in sync with TASKBAR_HEIGHT in js/desktop.js */
    display: flex;
    align-items: stretch;
    background: var(--paper);
    border-top: 1px dashed var(--hairline);
    z-index: 3;
}

.taskbar-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    border-right: 1px dashed var(--hairline);
    padding: 0 16px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: var(--ink);
}

.taskbar-icon:hover { background: rgba(242, 242, 242, 0.1); }
.taskbar-icon__glyph { width: 22px; height: 22px; color: var(--ink); }
.taskbar-icon__glyph svg { width: 100%; height: 100%; display: block; }

/* ---- OS windows (see js/desktop.js) --------------------------------------------------- */

#windows-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none; /* only real windows (below) intercept clicks, so icons stay reachable around them */
}

/* No CSS border here - the .scribble-box SVG desktop.js appends as this
   element's last child (see setupScribbleBox() in js/scribble.js) draws a
   hand-drawn, boiling rectangle around the whole title+body box instead, so
   the window reads as sketched rather than a crisp OS rectangle. That's
   also why the titlebar below is just a dashed hairline instead of a solid
   colour block - a solid var(--ink) bar would make the scribble stroke
   (also var(--ink)) invisible wherever it crosses it. */
.os-window {
    position: absolute;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    background: var(--paper);
    pointer-events: auto;
}

.os-window.is-flash { animation: os-window-flash 0.2s ease; }
@keyframes os-window-flash {
    0%, 100% { filter: none; }
    50% { filter: brightness(1.6); }
}

.os-window__titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding: 9px 10px 7px 12px;
    border-bottom: 1px dashed var(--hairline);
    cursor: default;
    user-select: none;
}

.os-window__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.os-window__close {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    line-height: 15px;
    margin-left: 10px;
    text-align: center;
    background: none;
    color: var(--ink);
    border: 1px solid var(--ink-muted);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    cursor: pointer;
}

.os-window__close:hover { background: rgba(242, 242, 242, 0.15); }

.os-window > svg.scribble-box { z-index: 1; }

.os-window__body {
    padding: 14px;
    overflow: auto;
    font-size: 15px;
}

/* ---- file lists inside folder windows -------------------------------------------------- */

.file-list { display: flex; flex-direction: column; gap: 2px; }

.file-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: 1px dashed transparent;
    padding: 6px 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.file-entry:hover { background: rgba(242, 242, 242, 0.1); }
.file-entry.is-selected { border-color: var(--hairline); }
.file-entry__icon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--ink); }
.file-entry__icon svg { width: 100%; height: 100%; display: block; }
.file-entry__icon img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* ---- info.txt viewer -------------------------------------------------------------------- */

.txt-view {
    margin: 0;
    font-family: "Courier New", monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--ink);
}

/* ---- music player ------------------------------------------------------------------------ */

.player { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.player__cover { width: 160px; height: 160px; object-fit: cover; border: 1px solid var(--hairline); }
.player__title { font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-align: center; }
.player__audio { display: none; } /* playback engine only - player__controls below is the real UI */

.player__controls { display: flex; align-items: center; gap: 8px; width: 100%; }

.player__playbtn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: #2b2b2b;
    border: 2px outset #565656;
    color: var(--ink);
    cursor: pointer;
}

.player__playbtn:active { border-style: inset; background: #1c1c1c; }
.player__playbtn svg { width: 13px; height: 13px; display: block; }

.player__time {
    flex: 0 0 auto;
    width: 32px;
    font-family: "Courier New", monospace;
    font-size: 12px;
    color: var(--ink-muted);
    text-align: center;
}

.player__timeline {
    position: relative;
    flex: 1 1 auto;
    height: 10px;
    border: 1px solid var(--ink);
    cursor: pointer;
}

.player__timeline-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0%;
    background: var(--ink);
    pointer-events: none;
}