/* ============================================================================
   Face-Off — game-specific design layer.

   LOAD ORDER CONTRACT (Phase 2.0, 2026-07-11): every Face-Off page links
   /css/readflexes.css (the site-wide Arcade Neon system) IMMEDIATELY BEFORE
   this file. That file owns the canonical tokens — --bg / --panel / --panel-2 /
   --text / --muted / --line, the neon accents (--neon-cyan/purple/gold/fire),
   the Kahoot tile colors (--tile-red/blue/orange/green), glows, and the font
   stack (--font-arcade / --font-heading / --font-body) — plus the shared
   components (.rf-btn, .rf-chip, .rf-scanline, confetti, streak flame).

   This file only ADDS Face-Off's aliases and scales on top. Do not redefine a
   token the site system already owns; Face-Off's palette was the SOURCE of
   those tokens, so overriding them here would fork the identity again.
   ========================================================================== */

:root {
  /* ── Aliases onto the site system ─────────────────────────────────────── */
  --pri: var(--neon-cyan);
  --ring: rgba(77, 240, 255, 0.12);
  --font-sans: var(--font-body);

  /* ── Kahoot shape badges (player + host answer tiles, A–D) ────────────── */
  --shape-A: '▲';
  --shape-B: '◆';
  --shape-C: '●';
  --shape-D: '■';

  /* ── Spacing scale (4px baseline) ─────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* ── Radius scale ─────────────────────────────────────────────────────── */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

  /* ── Fluid type scale ─────────────────────────────────────────────────── */
  --fs-xs:   clamp(11px, 1.4vw, 12px);
  --fs-sm:   clamp(12px, 1.6vw, 14px);
  --fs-base: clamp(14px, 1.9vw, 16px);
  --fs-md:   clamp(16px, 2.4vw, 20px);
  --fs-lg:   clamp(20px, 3.0vw, 26px);
  --fs-xl:   clamp(26px, 4.0vw, 36px);
  --fs-2xl:  clamp(32px, 5.0vw, 48px);

  /* ── Surface depths ───────────────────────────────────────────────────── */
  --surface-base:    var(--panel);
  --surface-raised:  rgba(255,255,255,0.04);
  --surface-overlay: rgba(255,255,255,0.08);
  --surface-border:  var(--line);

  /* ── Motion tokens ────────────────────────────────────────────────────── */
  --motion-fast: 120ms ease;
  --motion-base: 200ms ease;
  --motion-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

:root.light-mode {
  /* Site light-mode (readflexes.css) supplies --bg/--panel/--text/--muted/
     --line and dials glows down. Face-Off only overrides its own aliases:
     neon cyan on white fails AA, so the light primary is a saturated cyan-700. */
  --pri: #0e7490;
  --ring: rgba(14, 116, 148, 0.15);

  --surface-raised:  rgba(15, 23, 42, 0.04);
  --surface-overlay: rgba(15, 23, 42, 0.08);
}

/* ============================================================================
   Shared Face-Off components (Phase 2a) — the pieces both host.html and
   join.html duplicated inline; consolidated here so they cannot drift.
   ========================================================================== */

/* ── Arcade kicker labels (Press Start 2P accents — labels, never prose) ── */
.fo-kicker {
  font-family: var(--font-arcade);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--neon-cyan);
  text-shadow: 0 0 8px rgba(77, 240, 255, 0.6);
  text-transform: uppercase;
}
:root.light-mode .fo-kicker { color: var(--pri); text-shadow: none; }

/* ── Kahoot answer tiles: shape badge + text (shapes NEVER replace text —
     Readflexes is a reading product) ──────────────────────────────────────── */
.fo-tile-shape {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7em; height: 1.7em; flex-shrink: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 0.8em;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ============================================================================
   LIGHT THEME (Phase 2c) — projector-friendly for bright rooms.
   The site system flips --bg/--panel/--text/--muted/--line; these overrides
   fix the components whose inline page CSS hardcodes white-on-dark rgba
   surfaces. `:root.light-mode` prefixed selectors out-specify the inline base
   rules, so this layer wins even though it loads first.
   Answer tiles keep their saturated Kahoot fills + white text in both themes.
   ========================================================================== */

/* White-rgba "raised" surfaces → dark-rgba equivalents */
:root.light-mode .fo-round-topbar,
:root.light-mode .fo-progress-card,
:root.light-mode .fo-host-status-chip,
:root.light-mode .fo-status-chip,
:root.light-mode .fo-results-summary .fo-stat-card,
:root.light-mode .fo-results-panel,
:root.light-mode .fo-results-stat,
:root.light-mode .fo-results-answer-row,
:root.light-mode .fo-results-lb-row,
:root.light-mode .fo-starter-card,
:root.light-mode .fo-response-tracker,
:root.light-mode .fo-response-dropdown--open,
:root.light-mode .fo-nudge-row {
  background: rgba(13, 13, 43, 0.04);
  border-color: rgba(13, 13, 43, 0.14);
}
:root.light-mode .fo-nudge-btn,
:root.light-mode .fo-code-prefix,
:root.light-mode .fo-host-answer-chip {
  background: rgba(13, 13, 43, 0.05);
  border-color: rgba(13, 13, 43, 0.16);
  color: var(--text);
}
:root.light-mode .fo-end-lb-row {
  background: rgba(13, 13, 43, 0.04);
  border-color: rgba(13, 13, 43, 0.12);
}

/* Track/bar backgrounds that were invisible white-on-white */
:root.light-mode .fo-timer-bar-wrap,
:root.light-mode .fo-progress-track { background: rgba(13, 13, 43, 0.12); }

/* Leaderboard rows during a live game */
:root.light-mode body.fo-host-game-active .fo-lb-row {
  background: rgba(13, 13, 43, 0.04);
  border-color: rgba(13, 13, 43, 0.12);
}
:root.light-mode .fo-host-lb-name { color: var(--text); }
:root.light-mode .fo-host-lb-footer { color: var(--muted); }

/* Neon glows read as smears on white — flatten the text treatments */
:root.light-mode .fo-question-text { text-shadow: none; }
:root.light-mode .fo-room-code-display { text-shadow: none; }
:root.light-mode .fo-sk-clock,
:root.light-mode .fo-skp-clock { text-shadow: none; }

/* Gold arcade labels fail contrast on white → deep gold, no glow */
:root.light-mode .fo-roster-header h3,
:root.light-mode .fo-sk-feed-wrap h3 {
  color: #8a6a00; text-shadow: none;
}

/* Toggle/tab active states: --pri is a dark cyan in light mode, so the dark
   label text used on neon-cyan becomes unreadable — flip to white. */
:root.light-mode .fo-toggle-btn.active { color: #fff; box-shadow: none; }

/* Sketch feed rows */
:root.light-mode .fo-sk-feed li { background: rgba(13, 13, 43, 0.05); }
:root.light-mode .fo-skp-wordbar { background: rgba(14, 116, 148, 0.08); border-color: rgba(14, 116, 148, 0.3); }

/* Waiting/warning banners keep their tint but on light surfaces */
:root.light-mode .fo-host-waiting-banner,
:root.light-mode .fo-waiting-banner {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.3);
  color: #b91c1c;
}
:root.light-mode .fo-host-waiting-banner small,
:root.light-mode .fo-waiting-banner small { color: var(--muted); }