/* HSR Live Quiz: shared tokens for the teacher screen and the student phone. */
:root {
  --bg: #0b1020;
  --stage: #121a33;
  --stage2: #1a2446;
  --line: #26325c;
  --text: #f1f4fb;
  --muted: #93a0c4;
  --gold: #f5b83d;
  --a: #e5484d;
  --b: #3b82f6;
  --c: #e0a400;
  --d: #22a06b;
  --ok: #22c08a;
  --bad: #f0545a;
  --f-display: "Sora", "Noto Sans Sinhala", system-ui, sans-serif;
  --f-body: "Noto Sans Sinhala", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--f-body); }
button { font-family: inherit; }
.btn { font: 700 15px var(--f-body); border: 0; border-radius: 10px; padding: 10px 18px; cursor: pointer; background: var(--gold); color: #1b1300; }
.btn.ghost { background: var(--stage2); color: var(--text); }
.btn.danger { background: transparent; color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.btn:disabled { opacity: .4; cursor: default; }
.btn:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
input, select, textarea { font: 600 16px var(--f-body); background: var(--stage2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; }
.a { --k: var(--a); } .b { --k: var(--b); } .c { --k: var(--c); } .d { --k: var(--d); }
.name { background: var(--stage2); padding: 6px 13px; border-radius: 999px; font-weight: 600; font-size: 15px; animation: pop .35s cubic-bezier(.2,1.6,.4,1); display: inline-flex; gap: 6px; align-items: center; }
.name.off { opacity: .45; }
.name.done { background: #2a3a6e; }
.name.ok { background: color-mix(in srgb, var(--ok) 30%, var(--stage2)); }
.name.no { background: color-mix(in srgb, var(--bad) 28%, var(--stage2)); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }