* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Project palette — names preserved for back-compat across all
       feature files. Hex values updated per design language v2. */
    --pink: #ED1E79;          /* primary bright magenta */
    --hot: #C81862;           /* deep accent (was project's --hot) */
    --soft: #FFC4D9;          /* soft pink fill */
    --cream: #FFF6E1;         /* email body, soft content surfaces */
    --blue: #7dd3fc;          /* unchanged — used in non-doc places */
    --dark: #1B1216;          /* primary text */
    --lime: #a8e063;          /* unchanged */

    /* New tokens from design language v2 — additive, no aliasing. */
    --ink:          var(--dark);     /* alias for doc-style CSS */
    --pink-deep:    #C81862;         /* deep accent for titles */
    --pink-soft:    #FFC4D9;         /* wallpaper, soft backgrounds */
    --pink-pale:    #FFE8F0;         /* faint hovers, ghost-button bg */
    --teal:         #1FA8AD;         /* primary buttons, badges */
    --teal-deep:    #0E7C7F;         /* pressed state, deep emphasis */
    --teal-soft:    #C8EEEE;         /* teal hover, lighter accents */
    --green:        #4CC865;         /* success, "you replied" */
    --green-soft:   #D8F3DD;         /* success backgrounds */
    --cream-deep:   #FAE6BC;         /* portrait backgrounds, banners */
    --cream-paper:  #FBEFD5;         /* dossier paper feel */
    --yellow:       #FFE19A;         /* portrait card backgrounds (warm) */
    --mid:          #6B5560;         /* secondary text */
    --faint:        #B89BA5;         /* tertiary, hints */

    --shadow-card: 5px 7px 0 var(--dark);
    --shadow-btn: 3px 4px 0 var(--dark);
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, .3);

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Doc-language radius tokens (additive). */
    --r-window: 18px;
    --r-card:   14px;
    --r-button: 999px;
    --r-pill:   8px;
    --r-input:  12px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    --font-display: 'Press Start 2P', monospace;
    --font-body: 'Nunito', sans-serif;
    --font-fredoka: 'Fredoka', sans-serif;
    --font-dmsans:  'DM Sans', sans-serif;
    --font-dmmono:  'DM Mono', monospace;
    --font-serif:   'Fraunces', serif;
    --fs-xs: 10px;
    --fs-sm: 12px;
    --fs-md: 14px;
    --fs-lg: 18px;
    --fs-xl: 24px;
    --fs-xxl: 32px;

    --border-thin: 2.5px solid var(--dark);
    --border-thick: 4px solid var(--dark);
}

body {
    overflow: hidden;
    font-family: 'Nunito', sans-serif;
    background: #0d0008;
}

/* ─────────────────────────────────────────────────────────────
   Adaptive scaling — windows + games are designed at a small
   reference size; we scale up uniformly on bigger viewports so
   nothing feels cramped. zoom is layout-aware (text reflows,
   click targets stay correct) and is the same mechanism
   initResizable already uses for per-window resizing.

   --desk-zoom mirrors the active zoom so other rules (max-width
   constraints, dicons height clamps) can divide vw/vh by it to
   keep elements inside the visible viewport.
   ─────────────────────────────────────────────────────────── */
body { --desk-zoom: 1; }
@media (min-width: 1280px) { body { --desk-zoom: 1.05; zoom: 1.05; } }
@media (min-width: 1440px) { body { --desk-zoom: 1.13; zoom: 1.13; } }
@media (min-width: 1680px) { body { --desk-zoom: 1.22; zoom: 1.22; } }
@media (min-width: 1920px) { body { --desk-zoom: 1.30; zoom: 1.30; } }
@media (min-width: 2400px) { body { --desk-zoom: 1.45; zoom: 1.45; } }

/* Canvas: when zoom upscales the bitmap, prefer smooth bilinear
   over nearest-neighbour blockiness. Browser default is auto;
   we set it explicitly for clarity. */
.mg-canvas { image-rendering: auto; }

/* Safety net: even with adaptive zoom, never let a window grow
   bigger than the visible desktop. vw/vh are the un-zoomed
   viewport, so divide by --desk-zoom to get the layout-pixel
   space the window itself lives in. Taskbar visual height is
   52px × zoom, hence the zoom-aware subtraction. */
.win {
    max-width:  calc((100vw  - 16px) / var(--desk-zoom));
    max-height: calc((100vh - 52px * var(--desk-zoom) - 16px) / var(--desk-zoom));
}

/* Same for the desktop icon columns so the bottom icons don't
   get clipped on shorter viewports. The taskbar's visual height
   is 52px × zoom, plus the column has its own 12px top inset and
   we leave a 16px breathing margin — that's where 64×zoom + 16
   comes from. Divided by zoom because max-height is in layout
   pixels (un-zoomed). */
.dicons-l, .dicons-r {
    max-height: calc((100vh - 64px * var(--desk-zoom) - 16px) / var(--desk-zoom));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}
.dicons-l::-webkit-scrollbar,
.dicons-r::-webkit-scrollbar { display: none; }