:root{--bg:#0e0f22;--bg-elevated:#1b1e3d;--bg-elevated-2:#242853;--text:#f5f6ff;--text-dim:#a8adc7;--primary:#6c5ce7;--primary-light:#9b8cf2;--primary-dark:#5344c9;--accent:#2dd4bf;--danger:#e74c3c;--success:#2ecc71;--a0:#e74c3c;--a1:#2980b9;--a2:#f1c40f;--a3:#27ae60;--border:#a8adc724;--border-strong:#a8adc73d;--radius-sm:10px;--radius:14px;--radius-lg:22px;--shadow-sm:0 2px 10px #00000040;--shadow-md:0 10px 30px #00000059;--shadow-lg:0 20px 60px #00000073;--container:1120px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(circle at 12% -8%, #6c5ce759, transparent 42%), radial-gradient(circle at 108% 8%, #2dd4bf33, transparent 40%), radial-gradient(circle at 50% 115%, #6c5ce72e, transparent 55%), var(--bg);color:var(--text);background-attachment:fixed;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.page{width:100%;max-width:var(--container);flex-direction:column;gap:18px;min-height:100vh;margin:0 auto;padding:28px 24px 36px;display:flex}.page.center{text-align:center;justify-content:center;align-items:center}.title{letter-spacing:-.01em;margin:0;font-size:clamp(1.8rem,5vw,3rem);font-weight:800}.title-brand{background:linear-gradient(135deg, #fff 20%, var(--primary-light) 65%, var(--accent) 100%);color:#0000;-webkit-background-clip:text;background-clip:text}.subtitle{color:var(--text-dim);margin:0;font-size:clamp(1rem,2.5vw,1.3rem)}.hint{color:var(--text-dim);font-size:.95rem}.hint.center{text-align:center}.stack{flex-direction:column;gap:12px;width:100%;max-width:360px;display:flex}.btn{border-radius:var(--radius);cursor:pointer;box-shadow:var(--shadow-sm);border:none;font-weight:700;transition:transform .12s,background .15s,box-shadow .15s}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.btn-lg{padding:16px 24px;font-size:1.1rem}.btn-primary{background:linear-gradient(135deg, var(--primary-light), var(--primary) 55%, var(--primary-dark));color:#fff;box-shadow:0 6px 20px #6c5ce773}.btn-primary:not(:disabled):hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 8px 26px #6c5ce78c}.btn-secondary{background:var(--bg-elevated);color:var(--text);border:1px solid var(--border-strong)}.btn-secondary:not(:disabled):hover{background:var(--bg-elevated-2);border-color:var(--primary-light)}.input-lg{border-radius:var(--radius);border:2px solid var(--border-strong);background:var(--bg-elevated);color:var(--text);text-align:center;padding:16px;font-size:1.2rem;transition:border-color .15s,box-shadow .15s}.input-lg::placeholder{color:var(--text-dim)}.input-lg:focus{border-color:var(--primary-light);outline:none;box-shadow:0 0 0 4px #6c5ce733}.banner{border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:12px 16px;font-weight:600}.banner-error{color:#ff8a7a;border:1px solid var(--danger);background:#e74c3c26}.panel{background:linear-gradient(180deg, var(--bg-elevated-2), var(--bg-elevated));border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:24px}.lobby-hero{flex-wrap:wrap;justify-content:center;align-items:center;gap:36px;margin:4px 0 8px;display:flex}.lobby-hero-char{flex:0 240px;justify-content:center;display:flex}.lobby-hero-char .host-char-hero{width:min(240px,40vw)}.lobby-hero-char .host-char-hero .speech-bubble{max-width:300px;font-size:1.1rem}.join-panel,.settings-panel,.players-panel{padding:24px}.lobby-hero .join-panel{flex:320px;max-width:440px}.join-panel{text-align:left;flex-direction:row;align-items:center;gap:20px;display:flex}.join-panel-info{flex-direction:column;gap:2px;display:flex}.qr-frame{border-radius:var(--radius);box-shadow:var(--shadow-sm);background:#fff;padding:14px;line-height:0}.room-code{letter-spacing:.14em;background:linear-gradient(135deg, #fff, var(--primary-light));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:2.4rem;font-weight:800}.join-panel-info .subtitle{font-size:.95rem}.join-url{color:var(--text-dim);overflow-wrap:anywhere;font-size:.8rem}.panel-heading{justify-content:space-between;align-items:center;margin:0 0 16px;display:flex}.panel-heading h2{margin:0;font-size:1.1rem}.lobby-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.lobby-header .title{text-align:left;margin:0}.icon-btn{background:var(--bg-elevated);border:1px solid var(--border-strong);color:var(--text);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.1rem;transition:background .15s,border-color .15s,transform .1s;display:flex}.icon-btn:hover{background:var(--bg-elevated-2);border-color:var(--primary-light)}.icon-btn:active{transform:scale(.94)}.lobby-actions{gap:12px;display:flex}.lobby-actions .btn-primary{flex:1}.settings-panel label,.modal-panel label{color:var(--text-dim);flex-direction:column;gap:6px;margin-bottom:16px;font-size:.9rem;display:flex}.settings-panel select,.settings-panel input,.modal-panel select,.modal-panel input{border:1px solid var(--border-strong);background:var(--bg);color:var(--text);border-radius:8px;padding:10px;font-size:1rem}.player-grid{flex-wrap:wrap;gap:10px;display:flex}.player-chip{background:var(--bg);border:1px solid var(--border);border-radius:999px;align-items:center;gap:10px;padding:8px 16px 8px 8px;font-weight:600;transition:transform .1s;display:flex}.player-chip.disconnected{opacity:.4;text-decoration:line-through}.player-avatar{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:.75rem;font-weight:800;display:flex}.modal-backdrop{z-index:100;background:#0009;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-panel{background:linear-gradient(180deg, var(--bg-elevated-2), var(--bg-elevated));border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);flex-direction:column;gap:12px;width:100%;max-width:640px;max-height:85vh;padding:28px;display:flex;overflow-y:auto}.modal-header{justify-content:space-between;align-items:center;display:flex}.modal-header h2{margin:0}.modal-close{color:var(--text-dim);cursor:pointer;background:0 0;border:none;font-size:1.3rem;line-height:1}.modal-close:hover{color:var(--text)}.chip{background:var(--bg-elevated);border:1px solid var(--border-strong);color:var(--text-dim);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:6px 14px;font-size:.85rem;font-weight:700;display:inline-flex}.question-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.timer-bar{background:var(--bg-elevated);border:1px solid var(--border);border-radius:999px;height:12px;overflow:hidden}.timer-fill{background:linear-gradient(90deg, var(--accent), var(--primary));height:100%;transition:width .1s linear,background .3s}.timer-fill.timer-low{background:linear-gradient(90deg, #ff9a6b, var(--danger))}.question-text{text-align:center;margin:20px 0;font-size:clamp(1.4rem,4vw,2.4rem)}.answer-grid{flex:1;grid-template-columns:1fr 1fr;gap:16px;display:grid}.answer-card,.answer-btn{border-radius:var(--radius);text-align:center;color:#fff;box-shadow:var(--shadow-sm), inset 0 1px 0 #ffffff2e;border:none;justify-content:center;align-items:center;padding:24px;font-size:clamp(1rem,2.5vw,1.5rem);font-weight:700;display:flex}.answer-btn{cursor:pointer;transition:transform 80ms,opacity .15s,box-shadow .15s}.answer-btn:not(:disabled):hover{box-shadow:var(--shadow-md), inset 0 1px 0 #ffffff2e;transform:translateY(-2px)}.answer-btn:active:not(:disabled){transform:scale(.96)}.answer-btn:disabled:not(.selected){opacity:.4}.answer-btn.selected{outline:4px solid #fff}.answer-0{background:linear-gradient(160deg, #ff6b5b, var(--a0))}.answer-1{background:linear-gradient(160deg, #4aa3e0, var(--a1))}.answer-2{background:linear-gradient(160deg, #ffd75e, var(--a2));color:#2b2400}.answer-3{background:linear-gradient(160deg, #3bd47a, var(--a3))}.answer-grid-player{min-height:50vh}.leaderboard{flex-direction:column;gap:10px;width:100%;max-width:500px;margin:0;padding:0;list-style:none;display:flex}.leaderboard li{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);justify-content:space-between;align-items:center;gap:14px;padding:12px 18px;font-weight:600;display:flex}.leaderboard-name{align-items:center;gap:12px;min-width:0;display:flex}.leaderboard-name>span:last-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.leaderboard-rank{text-align:center;width:24px;color:var(--text-dim);flex-shrink:0;font-weight:800}.leaderboard li.correct{border-left:4px solid var(--success)}.leaderboard li.incorrect{border-left:4px solid var(--danger);opacity:.7}.leaderboard-final li:first-child{background:linear-gradient(135deg, var(--primary-light), var(--primary-dark));border-color:#0000;font-size:1.2rem;box-shadow:0 10px 30px #6c5ce780}.leaderboard-final li:nth-child(2){border-left:4px solid #c7cbe0}.leaderboard-final li:nth-child(3){border-left:4px solid #d69a5c}@media (width<=560px){.join-panel{text-align:center;flex-direction:column}.join-panel-info{align-items:center}}@media (width<=600px){.answer-grid{grid-template-columns:1fr}}.center-text{text-align:center}.landing-badge{border:1px solid var(--border-strong);color:var(--primary-light);letter-spacing:.06em;background:#6c5ce726;border-radius:999px;align-items:center;gap:6px;margin-bottom:4px;padding:6px 16px;font-size:.8rem;font-weight:700;display:inline-flex}.landing-title{font-size:clamp(2.4rem,9vw,4.5rem)}.landing-card{width:100%;max-width:400px}.feature-row{flex-wrap:wrap;justify-content:center;gap:10px;max-width:480px;display:flex}.feature-chip{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-dim);border-radius:999px;padding:8px 16px;font-size:.85rem;font-weight:600}.brand-mark{color:var(--text-dim);letter-spacing:.04em;font-size:.95rem;font-weight:700}.auth-card{flex-direction:column;align-items:center;gap:16px;width:100%;max-width:380px;display:flex}.auth-card .title{font-size:clamp(1.6rem,6vw,2.2rem)}@media (width<=560px){.page{padding:22px 16px 28px}}.host-char{pointer-events:none;flex-direction:column;align-items:center;display:flex}.host-char-stage{justify-content:center;align-items:center;width:100%;display:flex;position:relative}.host-char-svg{z-index:1;width:100%;position:relative;overflow:visible}.host-glow{filter:blur(6px);z-index:0;background:radial-gradient(circle,#2dd4bf59 0%,#0ea5e900 70%);width:150%;height:150%;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)}.host-shadow{z-index:0;background:radial-gradient(#0000008c 0%,#0000 75%);width:46%;height:20px;position:absolute;bottom:-6px;left:50%;transform:translate(-50%)}.host-char-corner{z-index:50;width:190px;animation:.4s ease-out heroPopIn;position:fixed;bottom:0;right:20px}.host-char-corner .host-glow{opacity:.5}.host-char-corner .host-shadow{display:none}.host-char-hero{z-index:5;width:min(360px,55vw);margin:0 auto;animation:.5s cubic-bezier(.34,1.56,.64,1) heroPopIn;position:relative}.host-char-hero .speech-bubble{max-width:380px;margin-bottom:12px;padding:14px 24px;font-size:1.3rem}@keyframes heroPopIn{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.speech-bubble{color:#14162b;text-align:center;background:#fff;border-radius:14px;max-width:200px;margin-bottom:6px;padding:8px 14px;font-size:.85rem;font-weight:700;position:relative;box-shadow:0 4px 14px #0000004d}.speech-bubble:after{content:"";border:8px solid #0000;border-top-color:#fff;border-bottom-width:0;position:absolute;bottom:-8px;left:50%;transform:translate(-50%)}.eye{transform-box:fill-box;transform-origin:50%;transition:transform .1s}.antenna-ball{transform-box:fill-box;transform-origin:50%}.eye.blink{transform:scaleY(.1)}.arm{transform-box:fill-box;transform-origin:top}.host-char-idle .host-char-svg{animation:3.2s ease-in-out infinite hostIdleFloat}.host-char-idle .arm-left{animation:2.6s ease-in-out infinite armSwayLeft}.host-char-idle .arm-right{animation:2.6s ease-in-out infinite armSwayRight}.host-char-thinking .host-char-svg{animation:1.8s ease-in-out infinite hostTilt}.host-char-presenting .host-char-svg{animation:1.6s ease-in-out infinite hostBob}.host-char-presenting .arm-right{animation:1.6s ease-in-out infinite armPoint;transform:rotate(-45deg)}.host-char-urgent .host-char-svg{animation:.25s linear infinite hostShake}.host-char-urgent .antenna-ball{animation:.5s ease-in-out infinite pulseRed}.host-char-excited .host-char-svg{animation:.45s ease-in-out infinite hostBounceBig}.host-char-excited .arm-left{animation:.45s ease-in-out infinite armUpLeft}.host-char-excited .arm-right{animation:.45s ease-in-out infinite armUpRight}.host-char-excited .antenna-ball{animation:.35s ease-in-out infinite antennaPop}.host-char-celebrate .host-char-svg,.host-char-final .host-char-svg{animation:.9s ease-in-out infinite hostBounceBig}.host-char-celebrate .arm-left,.host-char-final .arm-left{animation:.9s ease-in-out infinite armUpLeft}.host-char-celebrate .arm-right,.host-char-final .arm-right{animation:.9s ease-in-out infinite armUpRight}.host-char-sad .host-char-svg{animation:2s ease-in-out infinite hostDroop}.host-char-sad .arm-left,.host-char-sad .arm-right{transform:rotate(12deg)translateY(6px)}@keyframes hostBob{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes hostIdleFloat{0%,to{transform:translateY(0)rotate(-1deg)}50%{transform:translateY(-10px)rotate(1deg)}}@keyframes antennaPop{0%,to{transform:scale(1)}50%{transform:scale(1.35)}}@keyframes hostBounceBig{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-22px)scale(1.04)}}@keyframes hostTilt{0%,to{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}@keyframes hostShake{0%,to{transform:translate(0)rotate(0)}25%{transform:translate(-3px)rotate(-2deg)}75%{transform:translate(3px)rotate(2deg)}}@keyframes hostDroop{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(4px)rotate(-2deg)}}@keyframes armSwayLeft{0%,to{transform:rotate(6deg)}50%{transform:rotate(-6deg)}}@keyframes armSwayRight{0%,to{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}@keyframes armPoint{0%,to{transform:rotate(-45deg)}50%{transform:rotate(-55deg)}}@keyframes armUpLeft{0%,to{transform:rotate(-150deg)}50%{transform:rotate(-165deg)}}@keyframes armUpRight{0%,to{transform:rotate(150deg)}50%{transform:rotate(165deg)}}@keyframes pulseRed{0%,to{opacity:1}50%{opacity:.3}}.confetti{pointer-events:none;z-index:1;position:fixed;inset:0;overflow:hidden}.confetti-piece{width:10px;height:16px;animation:linear infinite confettiFall;position:absolute;top:-20px}@keyframes confettiFall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:.8;transform:translateY(110vh)rotate(360deg)}}@media (width<=700px){.host-char-corner{width:120px;right:12px}.host-char-hero{width:min(220px,70vw)}}.round-badge{background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:999px;align-items:center;gap:6px;padding:4px 12px;font-size:.85rem;font-weight:700;display:inline-flex}.round-intro-card{background:linear-gradient(180deg, var(--bg-elevated-2), var(--bg-elevated));border:1px solid var(--border-strong);border-radius:var(--radius-lg);max-width:480px;box-shadow:var(--shadow-md);flex-direction:column;align-items:center;gap:10px;padding:32px 28px;animation:.5s cubic-bezier(.34,1.56,.64,1) roundIntroPopIn;display:flex}.round-intro-icon{font-size:clamp(2.4rem,8vw,3.6rem);line-height:1}.round-intro-desc{color:var(--text-dim);text-align:center;margin:0;font-size:clamp(1rem,2.5vw,1.2rem)}@keyframes roundIntroPopIn{0%{opacity:0;transform:scale(.85)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.round-type-list{flex-direction:column;gap:8px;display:flex}.round-type-list .round-type-chip{background:var(--bg);border:1px solid var(--border-strong);cursor:pointer;color:var(--text);text-align:left;border-radius:10px;flex-direction:row;align-items:center;gap:10px;margin-bottom:0;padding:10px 12px;font-size:.9rem;display:flex}.round-type-list .round-type-chip.active{border-color:var(--primary);background:#6c5ce726}.round-type-list .round-type-chip input{accent-color:var(--primary);flex-shrink:0;width:18px;height:18px}.round-type-name{font-weight:700}.round-type-desc{color:var(--text-dim);font-size:.8rem}.answer-hidden{opacity:.4;font-size:2rem}.leap-text{min-height:3em}.buzz-btn{color:#fff;cursor:pointer;background:linear-gradient(#ff6b6b,#e74c3c);border:none;border-radius:999px;justify-content:center;align-items:center;width:220px;height:220px;margin:24px auto;font-size:clamp(1.4rem,6vw,2.2rem);font-weight:800;transition:transform 60ms,box-shadow 60ms;display:flex;box-shadow:0 8px #a82f22,0 12px 24px #0006}.buzz-btn:active:not(:disabled){transform:translateY(6px);box-shadow:0 2px #a82f22,0 6px 14px #0006}.buzz-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}.banner-info{border:1px solid var(--primary);color:var(--text);background:#6c5ce726}.stealer-reveal{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;padding:40px 20px;display:flex}.stealer-prompt{color:var(--text-dim);font-size:clamp(1.1rem,3vw,1.6rem);font-weight:600}.stealer-answer{text-align:center;background:var(--bg-elevated);border:2px solid var(--primary);border-radius:var(--radius);padding:24px 40px;font-size:clamp(2rem,7vw,3.5rem);font-weight:800;animation:.25s ease-out stealerPop}@keyframes stealerPop{0%{opacity:.4;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.steal-target-list{flex-direction:column;gap:12px;width:100%;max-width:360px;margin:20px auto 0;display:flex}.steal-target-btn{border-radius:var(--radius);border:2px solid var(--primary);background:var(--bg-elevated);color:var(--text);cursor:pointer;box-shadow:var(--shadow-sm);align-items:center;gap:12px;padding:14px 18px;font-size:1.1rem;font-weight:700;display:flex}.steal-target-btn:active{transform:scale(.97)}.bomb-holder-banner{text-align:center;margin-bottom:8px;font-size:clamp(1.2rem,4vw,1.8rem);font-weight:800}.bomb-view{flex-direction:column;align-items:center;gap:16px;display:flex}.bomb-icon{font-size:5rem;animation:.6s ease-in-out infinite bombPulse}@keyframes bombPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.bomb-you-banner{color:#fff;border-radius:var(--radius);text-align:center;background:linear-gradient(#ff6b6b,#e74c3c);padding:14px 20px;font-size:1.3rem;font-weight:800;animation:.5s ease-in-out infinite bombPulse}.bomb-spectator-banner{background:var(--bg-elevated);border:1px solid var(--border-strong);color:var(--text-dim);border-radius:var(--radius);text-align:center;padding:12px 18px;font-weight:600}.answer-grid-locked{position:relative}.answer-grid-locked:after{content:"";border-radius:var(--radius);background:#14162b8c;position:absolute;inset:0}.disqualified-banner{color:var(--text-dim);text-align:center;font-weight:600}