:root{--a:#2dd4bf;--b:#fb8a7a;--gold:#fde68a;--bg:#0a111d;--card:#111b2b;--line:rgba(255,255,255,.1);--text:#e6eef3;--muted:#a9b8c5}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"SF Pro Display",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
body{background:radial-gradient(900px 500px at 0% -10%,rgba(45,212,191,.14),transparent 60%),radial-gradient(900px 500px at 100% 0%,rgba(251,138,122,.12),transparent 60%),var(--bg);min-height:100vh}
button,input{font:inherit}
.top{display:flex;align-items:center;gap:18px;padding:14px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}.brand img{width:30px;height:30px}
.wordmark{font-weight:900;letter-spacing:.24em;font-size:15px;color:#fff}.wordmark em{font-style:normal;background:linear-gradient(90deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent}
.banner{margin:0 0 0 auto;padding:7px 14px;border-radius:99px;background:rgba(253,230,138,.12);box-shadow:inset 0 0 0 1px rgba(253,230,138,.45);color:#fff;font-size:14px}
.banner b{color:var(--gold)}
.codex-link{padding:7px 14px;border-radius:99px;color:#fff;font-size:14px;font-weight:800;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(45,212,191,.55);background:rgba(45,212,191,.1)}
.codex-link:hover{background:rgba(45,212,191,.2)}
.codex-link:focus-visible{outline:3px solid #fff;outline-offset:2px}
main{max-width:1440px;margin:0 auto;padding:18px 24px 40px}
.intro h1{margin:6px 0 6px;font-size:clamp(24px,3vw,34px);letter-spacing:-.01em}
.intro p{margin:0 0 16px;color:var(--muted);max-width:820px;line-height:1.5}
.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.btn{border:0;border-radius:12px;padding:0 20px;min-height:48px;font-weight:900;font-size:16px;cursor:pointer;color:#06121c}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-start{background:linear-gradient(135deg,#5eead4,var(--a))}
.btn-lock{background:linear-gradient(135deg,#fde68a,#fbbf24)}
.btn-vote{background:#fff}
.btn-watch{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.hint-progress{float:right;color:var(--gold);font-weight:800;letter-spacing:0;text-transform:none}
.btn-hint{background:rgba(253,230,138,.16);color:var(--gold);box-shadow:inset 0 0 0 1px rgba(253,230,138,.5)}
.status{display:flex;align-items:center;gap:14px;margin-left:auto;font-weight:800}
.status strong{font-size:28px;font-variant-numeric:tabular-nums;color:#fff}
.pill{padding:5px 11px;border-radius:99px;font-size:12px;font-weight:900;letter-spacing:.1em;background:rgba(255,255,255,.08)}
.pill[data-state=active]{background:rgba(239,68,68,.16);color:#fecaca}
.pill[data-state=won]{background:linear-gradient(90deg,#5eead4,#fdba9f);color:#0b1520}
.pill[data-state=timed-out]{background:#8a5a26;color:#fff}
.pill[data-state=unscored]{background:#fbbf24;color:#1b2531}
.stage{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.side{min-width:0}
.screen{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#000}
.side-a .screen{box-shadow:0 0 0 2px rgba(45,212,191,.4)}.side-b .screen{box-shadow:0 0 0 2px rgba(251,138,122,.4)}
.scene{position:absolute;inset:0;background:linear-gradient(180deg,#1d3a63 0%,#3f5f8f 38%,#d98b5f 62%,#2a2238 63%,#191526 100%)}
.scene::before{content:"";position:absolute;left:0;right:0;bottom:30%;height:30%;background:#3b2f4f;clip-path:polygon(0 100%,0 55%,12% 30%,24% 52%,38% 18%,52% 50%,66% 22%,80% 46%,92% 28%,100% 40%,100% 100%)}
.scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:#211a30;clip-path:polygon(0 100%,0 40%,18% 22%,34% 46%,50% 30%,68% 52%,84% 26%,100% 44%,100% 100%)}
.screen iframe{position:absolute;left:0;top:0;width:1920px;height:1080px;border:0;transform-origin:0 0;background:transparent}
.chat{margin-top:10px;padding:12px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.side-a .chat{border-top:3px solid var(--a)}.side-b .chat{border-top:3px solid var(--b)}
.chat label{display:block;font-weight:900;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.side-a .chat label{color:var(--a)}.side-b .chat label{color:var(--b)}
.chat label span{color:var(--muted);font-weight:700;letter-spacing:0;text-transform:none;margin-left:6px}
.row{display:flex;gap:8px}
.row input{flex:1;min-width:0;padding:0 12px;min-height:48px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.25);color:#fff}
.fine{color:var(--muted);font-size:14px;margin-top:16px;line-height:1.5}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);margin:0;padding:10px 16px;border-radius:12px;background:#1d2a40;border:1px solid var(--line);color:#fff;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.toast:empty{display:none}
@media(max-width:900px){.stage{grid-template-columns:1fr}.status{margin-left:0}.banner{margin-left:0}}