/* ============================================================
   RALLY — design tokens & base styles
   Game Show 2.0: deep indigo-black stage, bold state-driven
   color, Bebas Neue display, Inter body, DM Mono numerals.
   ============================================================ */

:root {
  /* ─── Type ───
     Display: Bebas Neue (condensed bold, all-caps)
     Body:    Inter (clean geometric sans)
     Mono:    DM Mono (scores, codes, numerals) */
  --font-display: 'Bebas Neue', 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ─── Stage palette ───
     Deep navy; richer blue hue than indigo-black, layered depth. */
  --stage-deep:   #080E1C;   /* outermost backdrop */
  --stage:        #0C1628;   /* main canvas */
  --stage-soft:   #112038;   /* lifted panel */
  --stage-card:   #182D4E;   /* card surface */
  --stage-hi:     #1E3860;   /* hover/active state */

  /* ─── Ink ─── */
  --ink:          #EEF2FF;   /* primary text — slightly cool white */
  --ink-soft:     #8BA0C8;   /* secondary — 5.4:1 on stage-card */
  --ink-dim:      #7896B8;   /* tertiary — 4.7:1 on stage-card, passes AA */
  --chrome:       #EEF2FF;
  --hairline:     rgba(255, 255, 255, 0.09);
  --hairline-2:   rgba(255, 255, 255, 0.16);

  /* ─── Brand accent ───
     Overridable by brand.js at runtime with hex from room settings.
     --magenta / --magenta-hot / --accent / --accent-fg / --glow-magenta
     must keep these exact names. */
  --magenta:      #E8256A;   /* default: refined crimson-pink */
  --magenta-hot:  #F05590;
  --accent:       var(--magenta);
  --accent-fg:    #FFFFFF;
  --glow-magenta: 0 0 12px rgba(232, 37, 106, 0.55), 0 0 28px rgba(232, 37, 106, 0.3);

  /* ─── Gold ─── round-active, scores, leaderboard, timer */
  --gold:         #F5B700;
  --gold-hot:     #FAC82A;
  --glow-gold:    0 0 8px rgba(245, 183, 0, 0.45);

  /* ─── State colors ─── (not brand-overridable) */
  --correct:      #16A34A;
  --wrong:        #DC2626;

  /* ─── Answer gels ───
     Game Show 2.0: amber / cobalt blue / vivid red / vivid green.
     Each passes WCAG AA with its fg. */
  --answer-a-bg: #F5B700;  --answer-a-fg: #2A1600;   /* amber gold   + dark brown */
  --answer-b-bg: #2563EB;  --answer-b-fg: #FFFFFF;   /* cobalt blue  + white      */
  --answer-c-bg: #DC2626;  --answer-c-fg: #FFFFFF;   /* vivid red    + white      */
  --answer-d-bg: #16A34A;  --answer-d-fg: #FFFFFF;   /* vivid green  + white      */

  /* ─── Shape ─── */
  --radius-sm:   3px;
  --radius:      8px;
  --radius-lg:   14px;
  --radius-pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--stage-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

.hidden { display: none !important; }
[hidden]  { display: none !important; }

/* ───── Type primitives ───── */

.serif,
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

.label,
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.eyebrow strong { color: var(--gold); font-weight: 700; }

.divider {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 0;
}

/* Tabular numbers wherever scores appear */
.num, .mono { font-variant-numeric: tabular-nums; }

/* ───── Primary button ───── */

button { font: inherit; cursor: pointer; }

button.primary {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  background: var(--magenta);
  color: var(--accent-fg, #fff);
  border: none;
  border-radius: var(--radius);
  padding: 16px 32px;
  cursor: pointer;
  position: relative;
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
  box-shadow:
    0 4px 0 color-mix(in srgb, var(--magenta) 55%, #000),
    0 8px 24px color-mix(in srgb, var(--magenta) 28%, transparent);
}
button.primary::after {
  content: '→';
  margin-left: 10px;
  display: inline-block;
  transition: transform 0.15s ease;
}
button.primary:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    0 6px 0 color-mix(in srgb, var(--magenta) 55%, #000),
    0 12px 28px color-mix(in srgb, var(--magenta) 35%, transparent);
}
button.primary:hover:not(:disabled)::after { transform: translateX(3px); }
button.primary:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--magenta) 55%, #000),
    0 2px 8px color-mix(in srgb, var(--magenta) 20%, transparent);
}
button.primary:disabled {
  background: var(--stage-hi);
  color: var(--ink-dim);
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
}
button.primary:disabled::after { content: '·'; opacity: 0.4; }

/* ───── Focus ───── */

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ───── Selection ───── */

::selection {
  background: var(--magenta);
  color: #fff;
}

/* ───── Marquee bulbs ─────
   Dots in the lobby player list. Active = gold; pulsing = magenta. */

.bulbs {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.bulb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.bulb.lit {
  background: var(--gold);
  border-color: var(--gold-hot);
  box-shadow: var(--glow-gold);
}
.bulb.live {
  background: var(--magenta);
  border-color: var(--magenta-hot);
  box-shadow: var(--glow-magenta);
  animation: bulb-throb 1.4s ease-in-out infinite;
}
@keyframes bulb-throb {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.2); opacity: 0.85; }
}

/* ───── Live pulse dot ───── */

.live-dot {
  width: 8px; height: 8px;
  background: var(--magenta);
  border-radius: 50%;
  display: inline-block;
  animation: live-pulse 1.6s ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--magenta) 70%, transparent); }
  100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--magenta) 0%, transparent); }
}

/* ───── Reduced motion ───── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}