/* ============================================================================
   TOKENS — black shell, four-tone screen

   The site is one dark room with a lit screen in it. Surfaces stay neutral
   near-black at every palette; only the four screen tones move. That is what
   lets the palette switcher work without wrecking legibility.

   One accent, and it is the screen's brightest tone. The old maroon is gone —
   two accents fighting on black just looked like two accents fighting.
   ========================================================================= */
@font-face{font-family:'PressStart';src:url('../assets/fonts/press-start-2p-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Silkscreen';src:url('../assets/fonts/silkscreen-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Silkscreen';src:url('../assets/fonts/silkscreen-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  /* ---- the four screen tones: darkest to brightest ---- */
  --gb0:#0f380f;
  --gb1:#306230;
  --gb2:#8bac0f;
  --gb3:#9bbc0f;

  /* ---- shell: never pure #000, and tinted toward the accent so the greys
         and the greens read as one family rather than two ---- */
  --bg:#080a08;      /* page */
  --panel:#0e110e;   /* panel */
  --raise:#151915;   /* raised panel */
  --hover:#1d221d;   /* hover / pressed */
  --line:#242b24;    /* hairlines */
  --line-hi:#39433a; /* emphasised edge */

  --ink:#e9efe6;
  --ink-soft:#93a091;
  --ink-dim:#7d8a7b;   /* AA on --bg; it carries nav links, not just decoration */

  --cur-point:url('../assets/cursors/point-dmg.png');

  --accent:var(--gb3);
  --accent-2:var(--gb2);
  --accent-ink:#07120a;              /* text that sits ON the accent */
  --glow:155,188,15;                 /* accent as rgb, for tinted shadows */

  /* 4px pixel grid — every space is a multiple, no exceptions */
  --u:4px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px;
  --s8:32px; --s12:48px; --s16:64px; --s24:96px; --s32:128px;

  --font-display:'PressStart',ui-monospace,monospace;
  --font-ui:'Silkscreen',ui-monospace,monospace;
  --font-body:ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --maxw:1200px;

  /* One z-scale. No stray 9999s. */
  --z-fx:1; --z-head:60; --z-toast:120; --z-lightbox:150; --z-boot:200;
}

/* ---- palette variants -----------------------------------------------------
   Four real handhelds' screens. Surfaces never change; only the tones do. */
:root[data-pal="pocket"]{
  --gb0:#1b1b1b; --gb1:#4a4a4a; --gb2:#9d9d9d; --gb3:#e6e6e6;
  --accent-ink:#0d0d0d; --glow:230,230,230;
  --cur-point:url('../assets/cursors/point-pocket.png');
}
:root[data-pal="berry"]{
  --gb0:#2a0f33; --gb1:#5e2a70; --gb2:#b061c9; --gb3:#e2a8f0;
  --accent-ink:#1b0722; --glow:226,168,240;
  --cur-point:url('../assets/cursors/point-berry.png');
}
:root[data-pal="amber"]{
  --gb0:#2b1400; --gb1:#6b3a05; --gb2:#d18b2c; --gb3:#f3bd6b;
  --accent-ink:#1d0d00; --glow:243,189,107;
  --cur-point:url('../assets/cursors/point-amber.png');
}

*,*::before,*::after{box-sizing:border-box}
/* overflow-x belongs on html: putting it on body makes the body its own
   scroll container, which silently breaks window scroll, sticky headers and
   anything reading scrollY. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* Grain. Flat black is a void; a little noise gives it a surface.
   Fixed and non-interactive so it never costs a repaint on scroll. */
body::before{
  content:"";position:fixed;inset:0;z-index:var(--z-fx);pointer-events:none;
  opacity:.035;
  background-image:
    radial-gradient(circle at 1px 1px,#fff 1px,transparent 0),
    radial-gradient(circle at 3px 3px,#fff 1px,transparent 0);
  background-size:4px 4px,7px 7px;
}

/* ---- pixel cursors -------------------------------------------------------
   Real cursor images, so the compositor draws them and they never trail the
   pointer. 32x32 is the largest size browsers reliably honour. Every rule ends
   in a real keyword fallback, so if an image fails to load the correct native
   cursor still appears. The hand takes the current palette's brightest tone. */
html{cursor:url('../assets/cursors/arrow.png') 0 0,auto}
a,button,summary,label,select,[role="button"],input[type="range"],input[type="checkbox"]{
  cursor:var(--cur-point) 10 0,pointer;
}
input:not([type="range"]):not([type="checkbox"]),textarea{
  cursor:url('../assets/cursors/text.png') 11 15,text;
}
button:disabled,.btn:disabled{cursor:url('../assets/cursors/arrow.png') 0 0,not-allowed}

img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-ink)}

/* pixel art must never be smoothed */
.px{image-rendering:pixelated;image-rendering:crisp-edges}

/* Scores and counters must not jitter as digits change. */
.num{font-variant-numeric:tabular-nums}

/* ---- type ---- */
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:400;line-height:1.35;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.display{font-family:var(--font-display);font-weight:400;line-height:1.35}
.label{
  font-family:var(--font-ui);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}

/* Keyboard users get a way past the nav. */
.skip{
  position:absolute;left:var(--s4);top:-100px;z-index:calc(var(--z-boot) + 1);
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--font-display);font-size:11px;padding:var(--s3) var(--s4);
  transition:top .15s;
}
.skip:focus{top:var(--s4)}