/* GENERATED by scripts/seo-assets.mjs. Edit tokens.css, then run npm run seo. */
/* Playcade design tokens — THE one file a reskin edits (docs/THEMING.md).
   IDENTITY: "Critter Club" (mocks/v7) — the players ARE the brand; every
   player color is a googly-eyed critter species and the UI is just the stage
   they perform on. DARK-ONLY for v0 ("movie-night sleepover"): warm-graphite
   field, lifted-graphite cards, campfire-cream ink, and the critters are the
   light sources. (To restore light: bring back v7's butter-daylight values as
   :root and re-add these as html[data-theme="dark"], plus a toggle in
   lib/theme.js.)

   THE FIELD IS NEUTRAL ON PURPOSE (2026-08 palette pass). It used to be
   midnight plum (#2b1e38 → #56406e): one violet at five lightnesses, so no
   surface separated from its neighbour without a shadow, and — the real cost —
   two of the twelve player colors (grape #9a5bff, berry #c2009b) WERE the
   field's own hue, so those two seats sank into the background they were
   supposed to sit on. Warm graphite has no hue to lend or to compete: all
   twelve identities read at full strength, and the only colors in the room are
   the ones that belong to a player. Any future skin should keep that property.
   Every component paints from these tokens — no hardcoded surface/ink hexes.
   Imported FIRST by styles.css so tokens exist before any rule reads them.
   ── TOKEN BLOCK (FROZEN — see docs/THEME-CONTRACT.md) ────────────────── */
:root {
  --bg: #1a1917; /* warm graphite */
  --bg-deep: #131211; /* deeper vignette / recessed field */
  --surface: #262421; /* lifted card */
  --surface-hi: #302d29; /* raised card / focus */
  --ink: #f6efe3; /* campfire cream */
  --ink-soft: #a89f92; /* warm grey */
  --line: #3b3733; /* outline in the dark */
  --shadow-c: rgba(6, 4, 2, 0.55);
  --arena: #201e1b; /* play mat / well */
  --arena-hi: #2a2724;
  /* legacy aliases (migrate away; kept so the app renders during the sweep) */
  --panel: var(--surface);
  --panel-2: var(--surface-hi);
  --ink-dim: var(--ink-soft);
  --accent: #ffc233;
  --danger: #ff6b7a;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 14px 30px var(--shadow-c);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 7px 16px rgba(10, 0, 25, 0.42);
  /* Critter Club speaks in soft rounded type, not monospace. --font-hud keeps
     its name (every component references it) but now resolves to the rounded
     stack; --font-num is for score columns that want even digit widths. */
  --font-hud: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
    "Arial Rounded MT Bold", "Varela Round", "Comfortaa", "Quicksand",
    system-ui, sans-serif;
  --font-num: ui-rounded, "SF Pro Rounded", "Varela Round", system-ui,
    sans-serif;
}
/* ── END TOKEN BLOCK ──────────────────────────────────────────────────── */

/* ── Shell tokens — additions, NOT part of the frozen block.
   Critter Club has NO hard black outlines: depth comes from soft shadows and
   a chunky bottom edge on cards (toy-brick), so --edge is a deep graphite
   edge rather than ink. --on-bright/--on-hot are text inks for colored fills. */
:root {
  --edge: #100f0e; /* card bottom edge (toy-brick depth) */
  --on-bright: #2a231e; /* fixed dark text on player-color / sun fills */
  --on-hot: #fff3e2;
  --accent-ink: color-mix(in srgb, var(--accent) 72%, var(--ink));
  --danger-ink: color-mix(in srgb, var(--danger) 78%, var(--ink));
  --scrim: rgba(12, 10, 8, 0.86);
  --shadow-lg: 0 3px 6px rgba(0, 0, 0, 0.34), 0 20px 44px var(--shadow-c);
  --pip-ok: #2fd6a3;
  --pip-warn: #ffc233;
  --pip-hot: #ff9633;
  --qr-paper: #ffffff; /* QR stays dark-on-white — scannability */
  --qr-ink: #1a1917;
  /* Join-panel states drawn ON the QR paper (TV join-panel fix) — dark-on-white
     in both themes, for the same reason the QR is. Faint derives from --qr-ink
     so it tracks the theme's paper-ink; danger is tuned for AA on white (the
     dark-field --danger would fail there). */
  --qr-ink-faint: color-mix(in srgb, var(--qr-ink) 18%, transparent);
  --qr-danger: #8a1020;
  /* In the dark the critters glow like campfire light (v7 rule 6).
     GPU BUDGET (docs/THEME-CONTRACT.md): these are the COLOR of a painted
     radial-gradient, not a drop-shadow. They used to be `0 0 22px rgba(…)`
     shadow values fed to `filter: drop-shadow()` — which is what took a real TV
     to 8fps, because a filter re-rasterises its whole layer while a gradient is
     painted straight into the one that already exists.
     The gradient is sized by the critter's own box (styles.css `.cr`), so the
     campfire still scales itself to what it lights and these four steps only
     have to say how BRIGHT it burns: ambient wash → chip rim → card → champion. */
  --critter-glow: rgba(255, 210, 150, 0.26);
  --critter-glow-sm: rgba(255, 220, 160, 0.3);
  --critter-glow-lg: rgba(255, 220, 160, 0.4);
  --critter-glow-hero: rgba(255, 216, 150, 0.58);
  /* Movie-night sky (v7 rule 6): twinkling stars + drifting fireflies over the
     graphite field. Warm, never blue — this is a sleepover, not space. */
  --star: #ffe9b8;
  --firefly: #ffd76e;
  --firefly-halo: rgba(255, 215, 110, 0.5);
  --radius: 1.1rem; /* soft rounded corners everywhere (no square arcade) */
}

/* page-rules:start */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.55;
  font-family:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",system-ui,sans-serif}
a{color:var(--accent)}
.wrap{max-width:44rem;margin:0 auto;padding:1.25rem 1.25rem 3rem}
.top{display:flex;align-items:center;gap:.5rem;font-weight:800;letter-spacing:.13em;font-size:.85rem;
  color:var(--ink);text-decoration:none}
.top img{width:1.6rem;height:1.6rem;display:block}
h1{font-size:clamp(1.9rem,6vw,2.7rem);line-height:1.12;margin:1.6rem 0 .6rem}
h2{font-size:1.25rem;margin:2rem 0 .5rem}
.lead{font-size:1.1rem;color:var(--ink-dim)}
.facts{display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:1rem 0 0;list-style:none}
.facts li{background:var(--surface);border-radius:999px;padding:.2rem .75rem;font-size:.85rem}
.cta{margin:1.5rem 0;padding:1rem 1.1rem;background:var(--surface);border-radius:1rem}
.btn{display:inline-block;background:var(--accent);color:var(--bg);font-weight:800;text-decoration:none;
  padding:.7rem 1.2rem;border-radius:.8rem}
.note{color:var(--ink-dim);font-size:.95rem;margin:.6rem 0 0}
.only-phone{display:none}
@media (pointer:coarse) and (max-width:40rem){.only-phone{display:block}.only-big{display:none}}
.games{display:grid;gap:.6rem;padding:0;list-style:none}
.games a{display:block;background:var(--surface);border-radius:.8rem;padding:.7rem 1rem;text-decoration:none;color:var(--ink)}
.games b{display:block}
.games span{color:var(--ink-dim);font-size:.92rem}
footer{margin-top:2.5rem;color:var(--ink-dim);font-size:.9rem}
footer a{margin-right:.9rem;display:inline-block}