*{box-sizing:border-box}
:root{font-family:"Inter",system-ui,sans-serif;color:#f7f5ef;background:#10141c;color-scheme:dark;--muted:#aeb7c6;--accent:#e1ff88;--line:#343d4a;--surface:#1a202b}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 10% 0%,#28362c 0%,#10141c 55%)}
header{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100% - 1100px)/2))}
.brand{font-size:24px;font-weight:850;color:inherit;text-decoration:none}.brand span{color:var(--accent);font-size:17px}
main{max-width:1144px;margin:auto;padding:50px 22px}
h1,h2,p{margin:0} h1{font-size:clamp(32px,6vw,64px);line-height:1;letter-spacing:-.045em;margin-bottom:18px} h2{font-size:20px;margin-bottom:14px}
p,.muted{color:var(--muted);line-height:1.55}
a{color:var(--accent)} #connection{font-size:14px;color:var(--muted)} #error{color:#ffb8ab;margin-top:16px}
.hero{max-width:650px;padding:clamp(24px,7vw,65px);margin:40px auto 0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px}
.hero p{margin-bottom:24px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;margin-top:30px;align-items:start}
.stack{display:grid;gap:18px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
button,input,select{font:inherit} button,.button{border:0;border-radius:10px;padding:12px 16px;font-weight:750;background:var(--accent);color:#17200d;cursor:pointer;min-height:46px}
button.secondary{background:#2b3442;color:#f7f5ef;border:1px solid var(--line)}
button:disabled{opacity:.52;cursor:default} button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a6c4ff;outline-offset:3px}
input,select{width:100%;min-width:0;background:#121720;color:inherit;border:1px solid var(--line);padding:11px;border-radius:9px} label{display:grid;gap:7px;font-size:14px;color:var(--muted)}
.score{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;text-align:center}
.score strong{font-size:clamp(30px,6vw,52px);color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.score span,.players li{overflow-wrap:anywhere}.players{padding-left:20px;line-height:1.8;margin-bottom:0}
.round-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px}
.timer{font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent)}
progress{width:100%;height:7px;accent-color:var(--accent);margin-bottom:20px;display:block}
.question{font-size:clamp(23px,4vw,38px);letter-spacing:-.025em;overflow-wrap:anywhere}
.options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.option{text-align:left;border:1px solid var(--line);background:#242d3a;color:#f7f5ef;overflow-wrap:anywhere}
.option:disabled{opacity:.82}.option.correct{background:#283a24;border-color:#94be73}.option.wrong{background:#412c31;border-color:#a86c68}
.attempts{padding-left:20px;color:var(--muted);overflow-wrap:anywhere}.result{font-size:22px;color:var(--accent);font-weight:800;overflow-wrap:anywhere}
@media(max-width:780px){.layout{grid-template-columns:1fr}main{padding-top:30px}}
@media(max-width:470px){.options{grid-template-columns:1fr}.card{padding:16px}}