/* ============================================================================
   FuryChef — shared design tokens

   One source of truth for the palette + fonts every page used to redeclare in its
   own :root. Linked before each page's inline <style>; a page can still override a
   token afterwards (e.g. splat.html uses a darker --bg).
   Superset of all tokens used across the games (extras are harmless where unused).
   ========================================================================== */
:root {
  --bg: #141110;          /* board / page background */
  --panel: #1e1916;       /* raised surface */
  --steel: #2c2622;       /* button / chip background */
  --line: #3a322c;        /* borders */
  --flame: #ff6a1a;       /* primary accent (orange) */
  --flame2: #ff2d2d;      /* hot accent (red) */
  --gold: #ffd23f;        /* highlight / score */
  --bone: #f3e9df;        /* primary text */
  --dim: #9c8c7e;         /* muted text */
  --ok: #7be0a0;          /* success green */
  --bad: #ff3b2d;         /* danger red */
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --bold: "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
}

/* ============================================================================
   Reusable components — one canonical copy of the chrome every game page shares
   (tagline, nav pills, toggle chips, start button, start/over overlay, the
   bordered canvas stage). Tokens above drive every value. Pages may still add
   game-specific styles in their own <style>; splat keeps a bespoke fullscreen
   splash (.splash/.tile/.db/.sub) that is intentionally NOT covered here.
   ========================================================================== */
.tag{color:var(--dim);letter-spacing:.14em;text-transform:uppercase;font-size:12px;margin-top:6px;text-align:center}
nav{display:flex;gap:7px;justify-content:center;margin-top:12px;flex-wrap:wrap;font-family:var(--mono);font-size:12px}
nav a{padding:6px 12px;border-radius:8px;text-decoration:none;background:var(--steel);color:var(--dim);border:1px solid var(--line)}
nav a.on{background:linear-gradient(180deg,var(--gold),var(--flame));color:#1a0d06;font-weight:800;border:none}
.tog{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;background:var(--steel);color:var(--gold);border:1px solid var(--line);border-radius:8px;padding:6px 13px}
.tog.off{color:#6a5a50}
.btn{font-family:var(--bold);font-size:18px;text-transform:uppercase;cursor:pointer;border:none;color:#1a0d06;padding:13px 28px;border-radius:12px;background:linear-gradient(180deg,var(--gold),var(--flame));box-shadow:0 6px 0 #a83a08}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #a83a08}
.over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
.over.hide{display:none}
.over h2{font-family:var(--bold);font-size:26px;text-transform:uppercase;background:linear-gradient(180deg,#ffe23f,#ff3d1a);-webkit-background-clip:text;background-clip:text;color:transparent}
.over p{color:var(--dim);font-size:13px;max-width:36ch;line-height:1.6}
.stage{position:relative;margin-top:14px;width:min(560px,96vw)}
.stage canvas{width:100%;display:block;border:2px solid var(--line);border-radius:14px;background:#100b09;box-shadow:0 0 40px rgba(255,80,20,.13),inset 0 0 50px rgba(0,0,0,.5);touch-action:manipulation;cursor:pointer}