/* Bhaashi Arcade. Palette tokens are the shared Bhaashi design system (platform/packages/ui/bhaashi.css, decision D012);
   the rest is the game show: a big screen read from across a room, and a phone held in one hand. */
:root {
  --bg: #FFFFFF; --panel: #FFFFFF; --soft: #F4F4F4; --input: #F4F4F4; --line: #E2E3E5;
  --text: #171A20; --muted: #5C5E62;
  --primary: #3E6AE1; --primary-hover: #3457C7; --on-primary: #FFFFFF; --accent-text: #3E6AE1;
  --secondary-bg: #F4F4F4; --secondary-bg-hover: #EAEAEA; --secondary-border: transparent; --secondary-text: #393C41;
  --ring: rgba(62, 106, 225, 0.45); --ok: #1F7A4D; --warn: #9A6200; --bad: #B42318;
  --title-gradient: linear-gradient(100deg, #3E6AE1 0%, #6D5BF5 50%, #9333EA 100%);
  --glow-1: rgba(62, 106, 225, 0.12); --glow-2: rgba(147, 51, 234, 0.10);
  --font-ui: "Avenir Next", "Segoe UI Variable Text", Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: ui-rounded, "Avenir Next", "SF Pro Rounded", "Segoe UI Variable Display", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg: #06040D; --panel: #14102A; --soft: #1E1838; --input: #1A1633; --line: rgba(255, 255, 255, 0.10);
    --text: #F5F3FF; --muted: #B9B3CC; --primary: #9333EA; --primary-hover: #7E22CE; --on-primary: #FFFFFF; --accent-text: #D8B4FE;
    --secondary-bg: rgba(255, 255, 255, 0.05); --secondary-bg-hover: rgba(255, 255, 255, 0.10); --secondary-border: rgba(255, 255, 255, 0.16); --secondary-text: #F5F3FF;
    --ring: rgba(216, 180, 254, 0.55); --ok: #6EE7A8; --warn: #FCD34D; --bad: #FCA5A5;
    --title-gradient: linear-gradient(100deg, #C4B5FD 0%, #D8B4FE 50%, #F0ABFC 100%);
    --glow-1: rgba(99, 102, 241, 0.22); --glow-2: rgba(192, 38, 211, 0.16); color-scheme: dark;
  }
}
:root.dark {
  --bg: #06040D; --panel: #14102A; --soft: #1E1838; --input: #1A1633; --line: rgba(255, 255, 255, 0.10);
  --text: #F5F3FF; --muted: #B9B3CC; --primary: #9333EA; --primary-hover: #7E22CE; --accent-text: #D8B4FE;
  --secondary-bg: rgba(255, 255, 255, 0.05); --secondary-bg-hover: rgba(255, 255, 255, 0.10); --secondary-border: rgba(255, 255, 255, 0.16); --secondary-text: #F5F3FF;
  --ring: rgba(216, 180, 254, 0.55); --ok: #6EE7A8; --warn: #FCD34D; --bad: #FCA5A5;
  --title-gradient: linear-gradient(100deg, #C4B5FD 0%, #D8B4FE 50%, #F0ABFC 100%);
  --glow-1: rgba(99, 102, 241, 0.22); --glow-2: rgba(192, 38, 211, 0.16); color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font: 17px/1.5 var(--font-ui); -webkit-text-size-adjust: 100%; }
body { background: radial-gradient(1100px 700px at 15% 0%, var(--glow-1), transparent 60%), radial-gradient(900px 600px at 95% 20%, var(--glow-2), transparent 60%), var(--bg); background-attachment: fixed; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--accent-text); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.title { background: var(--title-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.wrap { width: min(1100px, 100% - 32px); margin: 0 auto; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 20px var(--font-display); color: var(--text); text-decoration: none; }
.brand img { width: 30px; height: 30px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.button { appearance: none; border: 1px solid var(--secondary-border); background: var(--secondary-bg); color: var(--secondary-text); border-radius: 12px; padding: 11px 18px; font-weight: 650; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; }
.button:hover { background: var(--secondary-bg-hover); }
.button.primary { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.button.primary:hover { background: var(--primary-hover); }
.button:disabled { opacity: .5; cursor: not-allowed; }
.theme { min-width: 44px; padding: 8px 12px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .08); }
label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
input[type=text], select { width: 100%; background: var(--input); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-height: 48px; }
.error { color: var(--bad); font-weight: 600; min-height: 1.5em; margin: 6px 0 0; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--soft); color: var(--muted); border: 1px solid var(--line); }
.chip.on { color: var(--ok); }

/* Landing */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: start; padding: 28px 0 60px; }
.hero h1 { font: 800 clamp(40px, 6vw, 68px)/1.02 var(--font-display); margin: 0 0 14px; letter-spacing: -.02em; }
.hero p.lede { font-size: 19px; color: var(--muted); max-width: 34em; }
.games { display: grid; gap: 14px; margin-top: 24px; }
.game { display: flex; gap: 14px; align-items: center; }
.game .badge { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; background: var(--soft); }
.stack { display: grid; gap: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; } }

/* Big screen */
.screen { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.screen .top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 28px; }
.segment { font: 700 22px var(--font-display); }
.timer { --p: 1; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font: 800 26px var(--font-display);
  background: conic-gradient(var(--primary) calc(var(--p) * 360deg), var(--soft) 0); position: relative; }
.timer::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--panel); }
.timer span { position: relative; }
.stage { display: grid; place-items: center; padding: 10px 28px; text-align: center; }
.stage .question { font: 800 clamp(30px, 4.6vw, 64px)/1.15 var(--font-display); max-width: 22em; margin: 0; letter-spacing: -.01em; }
.stage .status { font: 650 clamp(20px, 2.4vw, 30px) var(--font-display); color: var(--muted); margin-top: 22px; min-height: 1.4em; }
.stage .answer { font: 800 clamp(26px, 3.4vw, 44px) var(--font-display); margin-top: 18px; }
.verdict { display: inline-flex; gap: 12px; align-items: center; margin-top: 18px; padding: 10px 20px; border-radius: 999px; font: 700 clamp(18px, 2vw, 26px) var(--font-display); background: var(--soft); }
.verdict.right { color: var(--ok); } .verdict.wrong { color: var(--bad); }
.code-card { text-align: center; }
.code-card .code { font: 900 clamp(64px, 11vw, 150px)/1 var(--font-display); letter-spacing: .12em; margin: 8px 0; }
.scoreboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; padding: 18px 28px 22px; }
.team { border-radius: 18px; padding: 14px 16px; background: var(--panel); border: 2px solid var(--line); position: relative; transition: transform .2s ease, opacity .3s ease; }
.team .swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: -1px; }
.team .name { font: 700 18px var(--font-display); }
.team .score { font: 900 40px/1.1 var(--font-display); margin-top: 4px; }
.team .people { font-size: 13px; color: var(--muted); min-height: 1.2em; }
.team.buzzed { transform: scale(1.06); border-color: currentColor; box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 22%, transparent); }
.team.out { opacity: .4; }
.team .tick { position: absolute; top: 10px; right: 12px; font-size: 20px; color: var(--ok); }
.controls { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 0 0 16px; }
.controls .button { min-height: 38px; padding: 7px 14px; font-size: 14px; }
.lobby-teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; width: 100%; margin-top: 18px; }

/* Phone */
.phone { width: min(480px, 100% - 32px); margin: 0 auto; padding-bottom: 32px; }
.buzzer { width: min(78vw, 300px); aspect-ratio: 1; border-radius: 50%; border: 0; display: grid; place-items: center; margin: 26px auto; cursor: pointer;
  font: 900 44px var(--font-display); color: #fff; background: var(--team, var(--primary)); box-shadow: 0 14px 0 color-mix(in srgb, var(--team, var(--primary)) 60%, #000), 0 24px 50px rgba(0,0,0,.25); transition: transform .06s ease, box-shadow .06s ease; touch-action: manipulation; }
.buzzer:active { transform: translateY(10px); box-shadow: 0 4px 0 color-mix(in srgb, var(--team, var(--primary)) 60%, #000); }
.buzzer:disabled { filter: grayscale(.85); opacity: .45; cursor: default; }
.me { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: 16px; background: var(--panel); border: 2px solid var(--team, var(--line)); }
.big-q { font: 750 22px/1.3 var(--font-display); margin: 18px 0 6px; }
.notice { text-align: center; font: 650 20px var(--font-display); color: var(--muted); margin: 18px 0; }

/* Confetti */
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate3d(var(--dx), 110vh, 0) rotate(var(--rot)); } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } .team, .buzzer { transition: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.flush { margin: 0; }
.lead-in { font-size: 22px; margin: 0; }
.row.center { justify-content: center; margin-top: 22px; }
.top-gap { margin-top: 12px; }
[hidden] { display: none !important; }
.team .score { color: var(--text); }