*{box-sizing:border-box}html,body,#app{margin:0;padding:0;width:100vw;height:100vh;background:#0a0a12;color:#cfd8ff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden}#app{display:grid;grid-template-rows:auto 1fr auto;height:100vh}.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 32px;font-size:18px;letter-spacing:3px;color:#8a92b8;border-bottom:1px solid rgba(255,255,255,.05)}.topbar .brand{color:#cfd8ff;font-weight:700}.topbar .right{display:flex;gap:32px;align-items:center}.audio-hint{font-size:12px;letter-spacing:2px;color:#cfd8ff8c}.audio-hint.muted{color:#ffd84a}.timer-bar{position:relative;width:220px;height:8px;background:#ffffff14;border-radius:4px;overflow:hidden}.timer-bar .fill{position:absolute;inset:0;background:linear-gradient(90deg,#58ff58,#ffd84a 60%,#ff5050 95%);transform-origin:left center;transition:transform .1s linear}.body{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:32px;min-height:0}.lobby{display:grid;grid-template-columns:auto 1fr;gap:64px;max-width:1700px;width:100%;align-items:center}.lobby.lobby-empty{grid-template-columns:1fr;justify-items:center}.lobby.lobby-empty .players{display:none}.lobby .qr-card{background:#cfd8ff0a;border:2px solid rgba(207,216,255,.18);border-radius:20px;padding:32px;text-align:center;width:min(760px,42vw);position:relative;animation:qr-card-pulse 2.4s ease-in-out infinite}.lobby.lobby-empty .qr-card{width:min(86vh,92vw,1400px);padding:16px;border-radius:12px}.lobby.lobby-empty .qr-card .label{font-size:clamp(24px,3vh,44px);letter-spacing:8px;margin-top:10px}.lobby.lobby-empty .qr-card .sub{font-size:clamp(18px,2vh,28px);letter-spacing:4px;margin-top:4px}@keyframes qr-card-pulse{0%,to{border-color:#58ff5859;box-shadow:0 0 18px #58ff582e}50%{border-color:#58ff58bf;box-shadow:0 0 38px #58ff586b}}.lobby .qr-card:before{content:"";position:absolute;inset:-8px;border-radius:22px;border:2px solid rgba(88,255,88,.4);opacity:0;pointer-events:none;animation:qr-card-ping 2.4s ease-out infinite}@keyframes qr-card-ping{0%{transform:scale(1);opacity:.55}to{transform:scale(1.16);opacity:0}}.lobby .qr-card img{width:100%;height:auto;image-rendering:pixelated;border-radius:6px;background:#fff}.lobby .qr-card .qr-placeholder{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#cfd8ff14;border:2px dashed rgba(207,216,255,.25);border-radius:6px;color:#8a92b8;font-size:20px;letter-spacing:3px}.lobby .qr-card .label{margin-top:22px;font-size:34px;letter-spacing:5px;color:#58ff58;text-shadow:0 0 14px rgba(88,255,88,.5);font-weight:700}.lobby .qr-card .sub{margin-top:10px;font-size:24px;letter-spacing:3px;color:#cfd8ff}.lobby .players h2{margin:0 0 18px;font-size:22px;letter-spacing:4px;color:#8a92b8;display:flex;align-items:baseline;flex-wrap:wrap;gap:10px}.lobby .players h2.ready{color:#58ff58;text-shadow:0 0 12px rgba(88,255,88,.5)}.lobby .players h2 .big{font-size:28px;letter-spacing:4px}.lobby .players h2 .sep{opacity:.45}.lobby .players h2 .sub-h2{font-size:16px;letter-spacing:3px;color:#cfd8ff}.lobby .players .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.lobby .players .slot{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:10px;border:1px solid rgba(207,216,255,.12);background:#ffffff05;font-size:20px;color:#8a92b8}.lobby .players .slot .swatch{width:18px;height:18px;border-radius:50%;background:#ffffff14;border:2px solid rgba(255,255,255,.18)}.lobby .players .slot.paired{color:#cfd8ff;background:#ffffff0a}.lobby .players .slot.paired .swatch{border-color:var(--colour);background:var(--colour);box-shadow:0 0 14px var(--colour)}.lobby .players .slot.next-up{color:#cfd8ff;border-color:#cfd8ff8c;background:#cfd8ff0f;animation:slot-next-pulse 1.4s ease-in-out infinite}.lobby .players .slot.next-up .swatch{border-color:#cfd8ff;background:#cfd8ff66;box-shadow:0 0 12px #cfd8ff8c}@keyframes slot-next-pulse{0%,to{box-shadow:0 0 #cfd8ff00}50%{box-shadow:0 0 0 6px #cfd8ff1f}}.lobby .hint{margin-top:18px;color:#8a92b8;font-size:14px;letter-spacing:1px}.question{display:flex;flex-direction:column;width:min(1500px,96vw);align-items:center;gap:32px}.question .qtext{font-size:clamp(28px,4vw,60px);line-height:1.18;text-align:center;color:#cfd8ff;font-weight:600;text-shadow:0 0 24px rgba(207,216,255,.1);letter-spacing:.5px;max-width:1400px}.question .qmeta{color:#8a92b8;font-size:14px;letter-spacing:4px}.question .options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:100%;max-width:1200px}.option{display:grid;grid-template-columns:88px 1fr;align-items:center;gap:16px;padding:22px 28px;border:3px solid var(--colour, rgba(255,255,255,.18));border-radius:14px;background:#0a0a1299;font-size:clamp(20px,2vw,32px);color:#cfd8ff;position:relative;overflow:hidden;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease;animation:option-enter .32s cubic-bezier(.2,.8,.2,1) backwards}.option:nth-child(1){animation-delay:0ms}.option:nth-child(2){animation-delay:60ms}.option:nth-child(3){animation-delay:.12s}.option:nth-child(4){animation-delay:.18s}@keyframes option-enter{0%{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.option.has-pick{animation:option-pick-pulse .36s cubic-bezier(.2,.8,.2,1)}@keyframes option-pick-pulse{0%{transform:scale(1)}50%{transform:scale(1.04);box-shadow:0 0 28px color-mix(in oklab,var(--colour) 60%,transparent)}to{transform:scale(1)}}.option .glyph{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:#ffffff0a;border:2px solid var(--colour, rgba(255,255,255,.2));color:var(--colour, #cfd8ff);font-weight:700;font-size:32px;text-shadow:0 0 12px var(--colour)}.option .text{line-height:1.25}.option .answers-strip{position:absolute;right:14px;top:14px;display:flex;gap:4px}.option .answers-strip .pip{width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.5)}.option.correct{background:color-mix(in oklab,var(--colour) 22%,transparent);box-shadow:0 0 32px color-mix(in oklab,var(--colour) 45%,transparent);animation:option-correct .52s cubic-bezier(.2,.8,.2,1);transform-origin:center}@keyframes option-correct{0%{transform:scale(1);box-shadow:0 0 0 transparent}35%{transform:scale(1.06) translateY(-6px);box-shadow:0 0 48px color-mix(in oklab,var(--colour) 80%,transparent)}70%{transform:scale(1.02) translateY(-2px)}to{transform:scale(1)}}.option.incorrect{opacity:.45;animation:option-incorrect .32s cubic-bezier(.36,.07,.19,.97)}@keyframes option-incorrect{0%{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}to{transform:translate(0)}}.scoreboard{display:flex;justify-content:center;gap:12px;padding:16px 24px;border-top:1px solid rgba(255,255,255,.05);overflow-x:auto}.scoreboard .row{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:10px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);min-width:140px}.scoreboard .row .dot{width:14px;height:14px;border-radius:50%;background:var(--colour, rgba(255,255,255,.3));box-shadow:0 0 10px var(--colour)}.scoreboard .row .name{color:#cfd8ff;font-size:16px;letter-spacing:1px}.scoreboard .row .pts{margin-left:auto;color:#cfd8ff;font-weight:700}.scoreboard .row.locked{background:color-mix(in oklab,var(--colour) 20%,rgba(0,0,0,.7))}.scoreboard .row.locked .name:after{content:" ✓"}.scoreboard .row.bot{opacity:.8}.scoreboard .row.bot .name{color:#8a92b8}.lobby .players .slot.bot{background:#ffffff05}.lobby .players .slot.bot .swatch{opacity:.55}.final{display:flex;flex-direction:column;align-items:center;gap:28px;position:relative}.final h1{font-size:clamp(48px,7vw,110px);margin:0;color:var(--colour, #cfd8ff);text-shadow:0 0 36px var(--colour);letter-spacing:6px;animation:final-headline .72s cubic-bezier(.18,.9,.2,1.1) backwards}@keyframes final-headline{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}.final .podium{display:grid;grid-template-columns:repeat(3,minmax(160px,220px));gap:18px;align-items:end}.final .podium .step{background:#ffffff0a;border-top:4px solid var(--colour);text-align:center;padding:18px 12px;border-radius:6px 6px 0 0;animation:podium-rise .64s cubic-bezier(.18,.9,.2,1.05) backwards}.final .podium .second .step{animation-delay:.22s}.final .podium .first .step{animation-delay:.38s}.final .podium .third .step{animation-delay:.54s}@keyframes podium-rise{0%{opacity:0;transform:translateY(40px) scaleY(.7);transform-origin:bottom}to{opacity:1;transform:translateY(0) scaleY(1);transform-origin:bottom}}.final .podium .step .place{font-size:24px;color:#8a92b8;letter-spacing:2px}.final .podium .step .name{font-size:26px;color:var(--colour);margin:8px 0 4px}.final .podium .step .pts{font-size:20px;color:#cfd8ff}.final .podium .first .step{height:220px}.final .podium .second .step{height:170px}.final .podium .third .step{height:130px}.final .restart-hint{color:#8a92b8;font-size:14px;letter-spacing:2px;animation:fade-in 1s ease 1.2s backwards}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.final:before,.final:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(2px 4px at 10% 10%,#58ff58 60%,transparent),radial-gradient(2px 4px at 25% 18%,#ff8a3a 60%,transparent),radial-gradient(2px 4px at 40% 8%,#b48cff 60%,transparent),radial-gradient(2px 4px at 55% 22%,#ffd84a 60%,transparent),radial-gradient(2px 4px at 70% 12%,#ff5fa5 60%,transparent),radial-gradient(2px 4px at 85% 16%,#5fdbff 60%,transparent);background-size:100% 200%;background-repeat:repeat-y;animation:confetti-fall 3.4s linear infinite;opacity:.7;z-index:-1}.final:after{animation-delay:1.7s;animation-duration:4.2s;opacity:.5}@keyframes confetti-fall{0%{background-position-y:-100%}to{background-position-y:100%}}