:root{
font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:#f5f7fb;
background:#10131a;
line-height:1.4}
*{
box-sizing:border-box}
body{
margin:0;
min-height:100vh;
background:radial-gradient(circle at 20% 0,#242a3d 0,#10131a 45%)}
.shell{
width:min(760px,92vw);
margin:8vh auto}
.shell.wide{
width:min(1100px,94vw)}
.card{
background:#191e28;
border:1px solid #303747;
border-radius:20px;
padding:28px;
box-shadow:0 20px 60px #0004;
margin-bottom:20px}
.hero{
padding:48px 36px}
h1{
font-size:clamp(2rem,7vw,4rem);
line-height:1.02;
margin:.2em 0 .35em}
h2{
margin-top:0}
.eyebrow{
font-size:.75rem;
letter-spacing:.14em;
font-weight:800;
color:#9aa6bf}
.muted{
color:#9aa6bf}
.actions{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:28px}
.button{
display:inline-flex;
justify-content:center;
align-items:center;
min-height:48px;
padding:0 20px;
border:1px solid #414b60;
border-radius:12px;
background:#252c3a;
color:#fff;
text-decoration:none;
font-weight:800;
cursor:pointer;
font-size:1rem}
.button.primary{
background:#6c5ce7;
border-color:#7b6df0}
.button:disabled{
opacity:.45;
cursor:not-allowed}
form{
display:grid;
gap:18px}
label{
display:grid;
gap:8px;
font-weight:700}
input[type=file],input[type=text],input[type=number],input:not([type]){
width:100%;
padding:13px;
border-radius:10px;
border:1px solid #414b60;
background:#0f131b;
color:#fff;
font:inherit}
code{
display:block;
overflow:auto;
padding:14px;
background:#0f131b;
border-radius:10px;
color:#d8def0}
.error{
color:#ff7b8b;
min-height:1.4em}
.hidden{
display:none}
.topbar{
display:flex;
justify-content:space-between;
gap:20px;
align-items:end;
margin-bottom:20px}
.pin{
font-size:clamp(2.5rem,8vw,5rem);
font-weight:900;
letter-spacing:.08em}
.lobby{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px}
.qr{
background:#fff;
border-radius:16px;
padding:14px;
max-width:360px;
width:100%}
.center{
text-align:center}
.players{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:10px}
.player{
background:#222938;
padding:12px;
border-radius:10px}
.question{
font-size:clamp(1.5rem,4vw,3rem);
font-weight:850;
margin:20px 0 26px}
.options{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px}
.option{
min-height:110px;
padding:20px;
border:1px solid #414b60;
border-radius:16px;
background:#222938;
color:#fff;
text-align:left;
font-size:1.2rem;
font-weight:800;
cursor:pointer}
.option.correct{
outline:3px solid #51d88a}
.option.wrong{
opacity:.5}
.host-grid{
display:grid;
grid-template-columns:2fr 1fr;
gap:20px}
.timer{
font-size:3rem;
font-weight:900}
.bars{
display:grid;
gap:10px}
.barrow{
display:grid;
grid-template-columns:28px 1fr 50px;
align-items:center;
gap:10px}
.bar{
height:18px;
background:#303849;
border-radius:99px;
overflow:hidden}
.fill{
height:100%;
background:#6c5ce7}
.leaderboard{
width:100%;
border-collapse:collapse}
.leaderboard td{
padding:12px;
border-bottom:1px solid #303747}
.leaderboard td:last-child{
text-align:right;
font-weight:800}
.big-answer{
font-size:2rem;
font-weight:900}
.hint{
padding:12px 14px;
background:#202737;
border-radius:10px;
color:#bfc8dc;
margin:12px 0}
.status{
text-align:center;
font-size:1.2rem;
padding:28px}
.result-card{
text-align:center}
.answer-button{
width:100%;
min-height:90px;
margin:8px 0;
font-size:1.2rem;
font-weight:900;
border-radius:14px;
border:1px solid #414b60;
background:#252c3a;
color:#fff}
.answer-button.selected{
outline:4px solid #fff}
.podium{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
align-items:end}
.podium>div{
background:#252c3a;
padding:20px;
border-radius:14px;
text-align:center}
.podium .first{
padding-top:45px}
.podium .second{
padding-top:30px}
.podium .third{
padding-top:20px}
@media(max-width:700px){
.lobby,.host-grid,.options{
grid-template-columns:1fr}
.topbar{
align-items:start;
flex-direction:column}
.shell{
margin:3vh auto}
.card{
padding:20px}
.hero{
padding:32px 24px}
.pin{
font-size:3rem}
}