:root{
  --navy:#0F2537;--navy-2:#173450;--blue:#1E96FC;--sky:#E8F3FF;--muted:#5B6B7C;--soft:#F3F6FA;
  --red:#E5484D;--green:#18A058;--amber:#F5A524;
  --c0:#E5484D;--c1:#1E96FC;--c2:#F5A524;--c3:#18A058;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;background:var(--navy);color:#fff;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
.hide{display:none!important}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.14em;font-size:15px}
.brand img{height:22px}

/* ---------- player (phone) ---------- */
.play{min-height:100dvh;display:flex;flex-direction:column;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
.play header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.play header .who{font-size:14px;color:#B9C8D8;font-weight:600;text-align:right}
.play main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px}
.play h1{font-size:30px;line-height:1.1;font-weight:900;letter-spacing:-.02em}
.play p{color:#B9C8D8;font-size:17px;line-height:1.45}
.field{width:100%;border:0;border-radius:18px;padding:18px 18px;font-size:22px;font-weight:700;background:#fff;color:var(--navy);outline:none}
.field::placeholder{color:#9AA8B6;font-weight:600}
.field.pin{letter-spacing:.3em;text-align:center;font-size:30px}
.go{width:100%;border:0;border-radius:18px;padding:18px;font-size:20px;font-weight:800;background:var(--blue);color:#fff}
.go:disabled{opacity:.5}
.err{color:#FFB4B6;font-weight:600;min-height:1.4em}
.qnum{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#8FA6BD;font-weight:800}
.qtext{font-size:21px;font-weight:700;line-height:1.35}
.answers{display:grid;gap:12px}
.ans{display:flex;align-items:center;gap:14px;border:0;border-radius:20px;padding:18px 16px;color:#fff;font-size:18px;font-weight:700;text-align:left;min-height:68px}
.ans .k{flex:none;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.22);display:grid;place-items:center;font-weight:900}
.ans:disabled{opacity:.35}
.ans.picked{opacity:1;outline:4px solid #fff}
.a0{background:var(--c0)}.a1{background:var(--c1)}.a2{background:var(--c2)}.a3{background:var(--c3)}
.bigmsg{text-align:center}
.bigmsg .em{font-size:64px;line-height:1}
.bigmsg h1{margin-top:12px}
.score{display:inline-block;margin-top:10px;background:var(--navy-2);border-radius:999px;padding:8px 16px;font-weight:800}
.bar{height:8px;border-radius:999px;background:var(--navy-2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--blue);border-radius:999px;transition:width .25s linear}

/* ---------- host (projector) ---------- */
.host{min-height:100vh;display:flex;flex-direction:column;padding:3vh 4vw}
.host header{display:flex;justify-content:space-between;align-items:center;font-size:1.6vw}
.host header .meta{color:#8FA6BD;font-weight:700;font-size:1.3vw}
.host main{flex:1;display:flex;flex-direction:column;justify-content:center}
.lobby{display:grid;grid-template-columns:1fr 32vw;gap:4vw;align-items:center}
.lobby h1{font-size:5.4vw;line-height:1.02;font-weight:900;letter-spacing:-.03em}
.lobby .join{font-size:2.2vw;margin-top:3vh;line-height:1.5;color:#B9C8D8}
.lobby .join b{color:#fff}
.pinbox{display:inline-block;margin-top:2vh;background:#fff;color:var(--navy);border-radius:2vw;padding:1.2vw 2.4vw}
.pinbox small{display:block;font-size:1.1vw;font-weight:800;letter-spacing:.14em;color:var(--muted)}
.pinbox span{font-size:6vw;font-weight:900;letter-spacing:.12em;line-height:1}
.qrbox{background:#fff;border-radius:2.4vw;padding:2vw;text-align:center;color:var(--navy)}
.qrbox img{width:100%;display:block}
.qrbox div{font-size:2vw;font-weight:900;margin-top:1vh}
.names{display:flex;flex-wrap:wrap;gap:.8vw;margin-top:3vh;min-height:6vh}
.names span{background:var(--navy-2);border-radius:999px;padding:.6vw 1.2vw;font-size:1.3vw;font-weight:700;animation:pop .3s}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.count{font-size:1.6vw;color:#B9C8D8;margin-top:2vh}
.hq{font-size:3.4vw;line-height:1.18;font-weight:850;letter-spacing:-.02em;max-width:85vw}
.hrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:3vh}
.clock{width:9vw;height:9vw;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-size:3.6vw;font-weight:900}
.hans{display:grid;grid-template-columns:1fr 1fr;gap:1.6vw;margin-top:4vh}
.hans .ans{font-size:2vw;min-height:11vh;border-radius:1.6vw;padding:1.6vw}
.hans .ans .k{width:3.4vw;height:3.4vw;border-radius:1vw;font-size:1.6vw}
.hans .ans .n{margin-left:auto;font-size:2.2vw;font-weight:900}
.hans .ans.dim{opacity:.28}
.hans .ans.win{outline:.4vw solid #fff}
.why{margin-top:3vh;background:var(--navy-2);border-radius:1.6vw;padding:1.6vw 2vw;font-size:1.9vw;line-height:1.4}
.why b{color:var(--blue)}
.board h2{font-size:3.4vw;font-weight:900;margin-bottom:3vh}
.row{display:flex;align-items:center;gap:2vw;background:var(--navy-2);border-radius:1.4vw;padding:1.4vw 2vw;margin-bottom:1.2vh;font-size:2.2vw;font-weight:800}
.row .r{width:3vw;color:#8FA6BD}
.row .s{margin-left:auto;color:var(--blue)}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:2vw;margin-top:2vh}
.podium .p{width:20vw;text-align:center}
.podium .blk{border-radius:1.6vw 1.6vw 0 0;background:var(--navy-2);display:grid;place-items:center;font-size:5vw;font-weight:900;color:var(--blue)}
.podium .nm{font-size:2.2vw;font-weight:900;margin-bottom:1vh}
.podium .sc{font-size:1.5vw;color:#B9C8D8;margin-bottom:1vh}
.ctl{position:fixed;right:1.4vw;bottom:1.4vw;display:flex;gap:.8vw}
.ctl button{border:0;border-radius:1vw;padding:.9vw 1.6vw;font-size:1.2vw;font-weight:800;background:var(--blue);color:#fff;cursor:pointer}
.ctl button.ghost{background:var(--navy-2);color:#B9C8D8}
.keybox{max-width:420px;margin:20vh auto 0;display:flex;flex-direction:column;gap:14px}