:root {
  --bg: #120b26;
  --panel: rgba(255, 255, 255, 0.08);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.7);
  --spotlight: #ffd23f;
  --correct: #3ddc97;
  --incorrect: #ff5c5e;
  --a: #4fa3ff;
  --b: #ff8a3d;
  --c: #ff5fa2;
  --d: #2ec4b6;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(circle at 50% 0%, #3a1f7a 0%, var(--bg) 70%) fixed;
  color: var(--text);
  font: 600 18px/1.4 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
main { min-height: 100%; display: flex; flex-direction: column; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
.screen { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; text-align: center; }
.screen[hidden] { display: none; }
h1 { font-size: 2.2rem; font-weight: 900; margin: 0; }
.hint { color: var(--muted); margin: 0; }
.you { color: var(--team, var(--spotlight)); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem; margin: 0; }
form { display: flex; flex-direction: column; gap: 10px; text-align: left; max-width: 420px; width: 100%; margin: 12px auto 0; }
label { color: var(--muted); font-size: 0.9rem; }
input {
  font: inherit; font-size: 1.4rem; padding: 14px 16px; border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.2); background: var(--panel); color: var(--text); user-select: text;
}
#code { text-transform: uppercase; letter-spacing: 0.4em; text-align: center; font-weight: 900; }
input:focus { outline: none; border-color: var(--spotlight); }
button { font: inherit; border: 0; cursor: pointer; }
.primary { margin-top: 10px; padding: 16px; border-radius: 999px; background: var(--spotlight); color: #120b26; font-size: 1.3rem; font-weight: 900; }
.primary:disabled { opacity: 0.5; }
.error { color: var(--incorrect); min-height: 1.4em; margin: 0; }
.choices { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-height: 60vh; }
.choice {
  border-radius: 24px; color: #120b26; font-size: 4rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center; transition: transform 0.08s, opacity 0.2s;
}
.choice:active { transform: scale(0.96); }
.choice[data-letter="A"] { background: var(--a); }
.choice[data-letter="B"] { background: var(--b); }
.choice[data-letter="C"] { background: var(--c); }
.choice[data-letter="D"] { background: var(--d); }
.choices.locked .choice { opacity: 0.25; }
.choices.locked .choice.picked { opacity: 1; outline: 6px solid #fff; }
.timer { height: 10px; border-radius: 99px; background: var(--panel); overflow: hidden; }
.timer > div { height: 100%; width: 100%; background: var(--spotlight); transform-origin: left; }
.mark { font-size: 5rem; line-height: 1; }
.mark.correct { color: var(--correct); }
.mark.incorrect { color: var(--incorrect); }
.status { position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); margin: 0; padding: 12px 16px; border-radius: 14px; background: rgba(0, 0, 0, 0.6); color: var(--muted); text-align: center; font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) { .choice { transition: none; } }

/* Teams: the team's color (matches the TV) on the name line and a band across the top. */
body[data-team="blue"] { --team: var(--a); }
body[data-team="orange"] { --team: var(--b); }
body[data-team="pink"] { --team: var(--c); }
body[data-team="teal"] { --team: var(--d); }
body[data-team] main { border-top: 8px solid var(--team); }
body[data-team] #waiting-title { color: var(--team); }

/* Final Wager: one big button per bet. */
.bets { display: grid; gap: 12px; }
.bet {
  display: flex; justify-content: space-between; align-items: baseline; padding: 18px 22px; border-radius: 18px;
  background: var(--panel); color: var(--text); font-size: 1.3rem; font-weight: 900; border: 2px solid rgba(255, 255, 255, 0.15);
}
.bet span { color: var(--team, var(--spotlight)); font-size: 1.5rem; }
.bet:active { transform: scale(0.98); }