/* ═══════ Trivia Rumble — shared design tokens (single source of truth) ═══════ */
:root {
  --bg:        oklch(0.23 0.03 40);
  --bg-raise:  oklch(0.28 0.035 40);
  --bg-sink:   oklch(0.19 0.025 40);
  --ink:       oklch(0.96 0.02 85);
  --ink-dim:   oklch(0.72 0.03 60);
  --line:      oklch(0.36 0.03 45);

  --gold:      oklch(0.80 0.16 85);
  --gold-edge: oklch(0.62 0.14 80);
  --gold-ink:  oklch(0.25 0.05 60);

  --coral:     oklch(0.62 0.19 25);   --coral-edge: oklch(0.48 0.17 25);
  --amber:     oklch(0.75 0.15 75);   --amber-edge: oklch(0.58 0.14 75);
  --teal:      oklch(0.65 0.12 185);  --teal-edge:  oklch(0.50 0.11 185);
  --blue:      oklch(0.58 0.14 255);  --blue-edge:  oklch(0.45 0.13 255);

  --good:      oklch(0.70 0.17 150);
  --bad:       oklch(0.60 0.20 25);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --r-ctl: 16px;
  --r-panel: 24px;
}

/* The hidden attribute means hidden, everywhere.
   The browser's own rule for it is [hidden] { display: none }, which any class
   setting a display loses to. That has now cost this project twice: the mobile
   menu sat off screen with every link still in the tab order, and the search
   panel on /categories stayed on top of the page it was supposed to replace.
   Both scripts were correct and both stylesheets quietly overruled them.
   Loaded by every page, so the rule holds wherever .hidden is set. */
[hidden] { display: none !important; }