/* theme.css — the one shared stylesheet: fonts, colour tokens, the wordmark
 * and the footer. Both pages (index.html, 404.html) load it; everything that is
 * specific to one page stays inline in that page.
 *
 * THE IDENTITY IS A POCKET CONSOLE. The page is the plastic shell (pistachio by
 * day, smoked by night) and the board is the screen set into it, which is why
 * the board's own field stays dark in BOTH themes: render.js's INK is the
 * screen, measured for contrast in test/ink-contrast.test.cjs, and it does not
 * change with the room's lighting any more than a handheld's LCD does.
 * The shell colours are read back out of these tokens by page.js, so the canvas
 * around the board and the CSS around the canvas are one colour by construction.
 *
 * Fonts are self-hosted (SIL OFL 1.1, licences in /fonts/): Bungee for the
 * wordmark and the score, Space Grotesk for everything a player reads.
 */
@font-face {
  font-family: 'Bungee';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/bungee-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/fonts/space-grotesk-latin-ext-wght.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/fonts/space-grotesk-latin-wght.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---- tokens. Light is the shell in daylight; dark is the same console smoked. */
:root {
  color-scheme: light;
  --shell: #e3e9d2;        /* the plastic */
  --shell-2: #d5dcc0;      /* a moulded recess: chips, code, the card's rim */
  --panel: #f4f7ea;        /* the death card, the 404 sheet */
  --ink: #17201a;
  --muted: #4c5a4f;        /* 5.9:1 on --shell */
  --faint: #66735f;        /* footer; 4.5:1 on --shell */
  --line: #b9c2a4;
  --go: #0b6e44;           /* the snake's green, darkened to read on the shell */
  --hot: #c81e62;          /* the one button colour — the console's A button */
  --hot-ink: #ffffff;
  --screen: #0b0d10;       /* the board's field, identical in both themes */
  --edge: #17201a;         /* outlines of the chunky, toy-like pieces */
  --drop: #17201a;         /* their hard offset shadow */
  --shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -18px rgba(23,32,26,.45);
  --ui: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Bungee', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --shell: #151a16;
    --shell-2: #1f2620;
    --panel: #111612;
    --ink: #e4ecdf;
    --muted: #9eab9f;
    --faint: #7d8a7e;
    --line: #2d372f;
    --go: #7dffbe;
    --hot: #ff4f93;
    --hot-ink: #1a0610;
    --edge: #3b4a3f;
    --drop: #030504;
    --shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -20px rgba(0,0,0,.8);
  }
}

/* ---- the wordmark: DANK in ink, SNAKE in the snake's own green, led by a
   little pixel snake turning toward its next pellet. */
.brand {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--display); font-weight: 400; letter-spacing: .02em;
  color: var(--ink); text-decoration: none; line-height: 1; white-space: nowrap;
}
.brand b { font-weight: 400; color: var(--go); }
.brand svg { width: 1.9em; height: .95em; flex: none; }
.brand .px-body { fill: var(--go); }
.brand .px-pellet { fill: #e0a800; }
@media (prefers-color-scheme: dark) { .brand .px-pellet { fill: #ffd23f; } }

/* ---- links and focus: a thick ring in the button colour, never removed */
a { color: var(--go); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--hot); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}