:root{--font-display:"Syne", system-ui, sans-serif;--font-body:"Sora", system-ui, sans-serif;--bg:#07090d;--bg-elev:#0e1219;--surface:#141a24;--surface-2:#1b2330;--text:#f2f4f8;--muted:#8b95a8;--line:#f2f4f814;--brand:#ff3b5c;--brand-deep:#c41f3d;--accent:#d6ff3f;--accent-dim:#d6ff3f26;--warn:#ffb020;--danger:#ff5c5c;--good:#3dff9a;--shadow:0 24px 80px #0000008c;--radius:18px;--hit:#d6ff3f}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%}body{font-family:var(--font-body);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}.app{min-height:100dvh;position:relative;overflow-x:hidden}.pulse-bg{pointer-events:none;z-index:0;background:radial-gradient(80% 50% at 50% -10%,#ff3b5c38,#0000 55%),radial-gradient(60% 40% at 80% 100%,#d6ff3f14,#0000 50%),linear-gradient(#07090d 0%,#0a0e14 100%);position:fixed;inset:0}.grid-fade{opacity:.35;background-image:linear-gradient(#ffffff08 1px,#0000 1px),linear-gradient(90deg,#ffffff08 1px,#0000 1px);background-size:48px 48px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(#000 20%,#0000 75%);mask-image:radial-gradient(#000 20%,#0000 75%)}.pulse-ring{aspect-ratio:1;border:1px solid #ff3b5c2e;border-radius:50%;width:min(90vw,720px);animation:2.4s ease-out infinite ringPulse;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)}.pulse-ring.r2{border-color:#d6ff3f1f;animation-delay:.8s}.pulse-ring.r3{border-color:#ff3b5c1a;animation-delay:1.6s}@keyframes ringPulse{0%{opacity:.7;transform:translate(-50%,-50%)scale(.35)}to{opacity:0;transform:translate(-50%,-50%)scale(1.15)}}.topbar-actions{align-items:center;gap:.5rem;display:flex}.icon-btn.on{color:var(--accent);border-color:#d6ff3f73}.invite-qr{width:fit-content;box-shadow:var(--shadow);background:#fff;border-radius:16px;margin:1rem auto;padding:.75rem}.invite-qr img{border-radius:8px;display:block}.host-note{color:var(--muted);margin:.5rem 0 0;font-size:.8rem}.tv-wait{text-align:center;color:var(--accent);letter-spacing:.02em;margin:.25rem 0 .75rem;font-weight:600}body.tv-mode{overflow:auto}body.tv-mode .app,.app.tv-mode{width:100%;max-width:none;min-height:100dvh}body.tv-mode .shell,.app.tv-mode .shell,.app.is-fullscreen .shell{width:min(100%,1100px);max-width:none;padding:.75rem 2rem 2.5rem}.app.is-fullscreen{padding:0}.tv-mode .code-block strong{letter-spacing:.35em;font-size:clamp(3.2rem,12vw,5.5rem)}.tv-mode .invite-qr img{width:280px;height:280px}.tv-mode .prompt,.tv-mode .tv-prompt{text-align:center;font-size:clamp(1.8rem,5vw,2.8rem)}.tv-mode .score-rail li{padding:.55rem .5rem;font-size:1.15rem}.tv-mode .lane-stage.tv-lanes{height:min(58vh,520px)}.tv-mode .lane-stage.tv-lanes .lane-pad{display:none}.tv-mode .lobby-waiting-hint{color:var(--muted);font-size:1.25rem}.tv-micro{justify-items:center;gap:.85rem;display:grid}.btn:disabled{opacity:.45;cursor:not-allowed}.tv-arena{width:100%}.room-banner{z-index:40;font-family:var(--font-display);letter-spacing:-.02em;pointer-events:none;text-align:center;border-radius:999px;max-width:90vw;padding:.75rem 1.4rem;font-size:clamp(1rem,3.5vw,1.35rem);font-weight:800;animation:.35s both bannerIn;position:fixed;top:4.5rem;left:50%;transform:translate(-50%)}.room-banner.sync,.room-banner.info{color:#0a0c10;background:#d6ff3feb}.room-banner.sabotage,.room-banner.drama{color:#fff;background:#ff3b5cf2}.room-banner.finale{color:#fff;background:linear-gradient(135deg,#ff3b5c,#ffb020);box-shadow:0 0 40px #ff3b5c73}@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,-12px)scale(.92)}to{opacity:1;transform:translate(-50%)scale(1)}}.pulse-tutorial{text-align:center;margin:.25rem 0 .75rem}.countdown-num{font-family:var(--font-display);color:var(--accent);text-shadow:0 0 40px #d6ff3f66;font-size:clamp(3rem,14vw,5rem);font-weight:800;line-height:1;display:block}.countdown-num.go{color:var(--brand)}.mult-stack{text-align:right}.streak-meter{color:var(--muted);margin-top:.35rem;font-size:.85rem}.streak-meter strong{color:var(--accent);font-size:1.1rem}.pts-pop{color:var(--accent);margin-top:.15rem;font-size:.55em;display:block}.crowd-board{flex-wrap:wrap;justify-content:center;gap:.45rem;margin-bottom:.5rem;display:flex}.crowd-chip{background:var(--surface);border:1px solid var(--line);text-align:center;border-radius:12px;gap:.1rem;min-width:4.5rem;padding:.4rem .65rem;display:grid}.crowd-chip strong{font-size:.78rem}.crowd-chip span{font-family:var(--font-display);letter-spacing:.04em;color:var(--muted);font-size:.72rem}.crowd-chip.perfect span{color:var(--accent)}.crowd-chip.good span{color:var(--warn)}.crowd-chip.miss span,.crowd-chip.early span,.crowd-chip.late span{color:var(--brand)}.crowd-chip em{color:var(--muted);font-size:.68rem;font-style:normal}.lane-stage.flash-almost{box-shadow:inset 0 0 0 2px #ffb02059}.lane-stage.flash-early,.lane-stage.flash-late{box-shadow:inset 0 0 0 2px #ff5c5c59}.grade-pop.almost{color:var(--warn)}.grade-pop.early,.grade-pop.late{color:#ff8a9c}.stole-banner{color:var(--accent);text-align:center;background:#d6ff3f1f;border:1px solid #d6ff3f59;border-radius:12px;margin:0;padding:.65rem 1rem;font-weight:700}.stole-banner.soft{color:#ff8a9c;background:#ff3b5c1f;border-color:#ff3b5c4d}.reveal-scores li.out{opacity:0;transform:translateY(8px)}.reveal-scores li.in{opacity:1;transition:opacity .25s,transform .25s;transform:none}.ready-count{text-align:center;font-size:.9rem}.topbar{z-index:1;justify-content:space-between;align-items:center;max-width:760px;margin:0 auto;padding:1rem 1.25rem;display:flex;position:relative}.brand-btn{background:0 0;border:0;align-items:center;gap:.65rem;padding:0;display:flex}.brand-mark{background:linear-gradient(145deg, var(--brand), var(--brand-deep));width:2.25rem;height:2.25rem;font-family:var(--font-display);letter-spacing:-.04em;border-radius:.65rem;place-items:center;font-size:.85rem;font-weight:800;display:grid;box-shadow:0 0 24px #ff3b5c59}.brand-name{font-family:var(--font-display);letter-spacing:-.03em;font-size:1.15rem;font-weight:800}.icon-btn{border:1px solid var(--line);color:var(--muted);background:#141a24b3;border-radius:999px;padding:.4rem .85rem;font-size:.8rem}.shell{z-index:1;max-width:560px;margin:0 auto;padding:.5rem 1.25rem 3rem;position:relative}.hero{padding:1.5rem 0 2rem;animation:.55s both rise}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--accent);margin:0 0 .75rem;font-size:.72rem;font-weight:600}h1,h2{font-family:var(--font-display);letter-spacing:-.04em;margin:0;font-weight:800;line-height:1.05}h1{font-size:clamp(2.4rem,9vw,3.5rem)}h2{font-size:clamp(1.6rem,5vw,2.1rem)}.accent-text{color:var(--brand);text-shadow:0 0 40px #ff3b5c59}.lede{color:var(--muted);max-width:34ch;margin:1rem 0 1.75rem;font-size:1.05rem;line-height:1.55}.cta-row,.actions,.lang-row,.sab-row{flex-wrap:wrap;gap:.75rem;display:flex}.feature-strip{flex-wrap:wrap;gap:.5rem;margin:2rem 0 0;padding:0;list-style:none;display:flex}.feature-strip li{border:1px solid var(--line);color:var(--muted);background:#141a24a6;border-radius:999px;padding:.35rem .75rem;font-size:.78rem}.panel{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#141a24d1;gap:.9rem;padding:1.35rem;animation:.4s both rise;display:grid}.field{gap:.35rem;display:grid}.field span{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}.field input,textarea{border:1px solid var(--line);background:var(--bg-elev);border-radius:12px;outline:none;width:100%;padding:.85rem 1rem}.field input:focus,textarea:focus{border-color:#ff3b5c8c;box-shadow:0 0 0 3px #ff3b5c26}textarea{resize:vertical;min-height:5rem}.btn{letter-spacing:-.01em;border:0;border-radius:999px;padding:.9rem 1.35rem;font-weight:700;transition:transform .12s,box-shadow .12s,background .12s}.btn:active{transform:scale(.97)}.btn.primary{background:linear-gradient(135deg, var(--brand), #ff6a4a);color:#fff;box-shadow:0 10px 30px #ff3b5c59}.btn.ghost{border:1px solid var(--line);color:var(--text);background:0 0}.btn.danger{color:#ffb4b4;background:#ff5c5c26;border:1px solid #ff5c5c59}.btn.sm{padding:.45rem .8rem;font-size:.8rem}.pulse-btn{animation:1.8s ease-in-out infinite ctaPulse}@keyframes ctaPulse{0%,to{box-shadow:0 10px 30px #ff3b5c59}50%{box-shadow:0 10px 42px #ff3b5c8c,0 0 0 6px #ff3b5c14}}.chip{border:1px solid var(--line);color:var(--muted);background:0 0;border-radius:999px;padding:.4rem .85rem}.chip.on{background:var(--accent-dim);color:var(--accent);border-color:#d6ff3f73}.linkish{color:var(--muted);text-align:left;background:0 0;border:0;width:fit-content;padding:0}.error{color:var(--danger);margin:0;font-size:.9rem}.muted{color:var(--muted)}.small{font-size:.88rem}.play{gap:1rem;animation:.35s both rise;display:grid}.lobby-hero{text-align:center;padding:.5rem 0 .25rem}.code-block{background:var(--surface);border:1px solid var(--line);border-radius:16px;gap:.25rem;margin:.75rem 0;padding:1rem 1.5rem;display:inline-grid}.code-block span{text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-size:.7rem}.code-block strong{font-family:var(--font-display);letter-spacing:.28em;padding-left:.28em;font-size:2.6rem}.join-link{color:var(--accent);word-break:break-all;font-size:.85rem}.score-rail{border:1px solid var(--line);background:#141a24bf;border-radius:14px;padding:.75rem .9rem}.meta-pills{flex-wrap:wrap;gap:.4rem;margin-bottom:.55rem;display:flex}.pill{background:var(--surface-2);color:var(--muted);border-radius:999px;align-items:center;padding:.2rem .55rem;font-size:.72rem;font-weight:600;display:inline-flex}.pill.heat{color:#ff8a9c;background:#ff3b5c26}.pill.danger{color:#ffb0b0;background:#ff5c5c2e}.pill.inline{width:fit-content}.score-rail ol,.reveal-scores{gap:.35rem;margin:0;padding:0;list-style:none;display:grid}.score-rail li,.reveal-scores li{border-radius:8px;grid-template-columns:1.4rem 1fr auto;align-items:center;gap:.5rem;padding:.35rem .4rem;display:grid}.score-rail li.you,.reveal-scores li.you{background:#d6ff3f14}.score-rail .rank{color:var(--muted);font-size:.8rem}.score-rail .sc{font-variant-numeric:tabular-nums;font-weight:700}.pulse-header{justify-content:space-between;align-items:end;display:flex}.pulse-header .unit{color:var(--muted);font-size:1rem;font-weight:600}.mult{text-align:right;font-family:var(--font-display);color:var(--accent);font-size:1.8rem;font-weight:800;line-height:1}.mult span{color:var(--muted);font-size:.7rem;font-family:var(--font-body);letter-spacing:.1em;text-transform:uppercase;font-weight:600;display:block}.lane-stage{background:linear-gradient(180deg, #d6ff3f0a, transparent 30%), var(--surface);border:1px solid var(--line);touch-action:manipulation;border-radius:20px;grid-template-columns:repeat(3,1fr);gap:.55rem;height:min(52vh,420px);padding:.5rem;display:grid;position:relative;overflow:hidden}.lane-stage.flash-perfect{box-shadow:inset 0 0 0 2px #d6ff3f8c,0 0 40px #d6ff3f33}.lane-stage.flash-good{box-shadow:inset 0 0 0 2px #ffb02066}.lane-stage.flash-miss{animation:.25s shake;box-shadow:inset 0 0 0 2px #ff3b5c73}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.hit-line{background:var(--hit);z-index:2;pointer-events:none;border-radius:999px;height:3px;position:absolute;top:50%;left:.5rem;right:.5rem;box-shadow:0 0 18px #d6ff3fa6,0 0 40px #d6ff3f40}.lane{background:#07090d73;border:1px solid #ffffff0a;border-radius:14px;position:relative}.note{aspect-ratio:1;background:radial-gradient(circle at 30% 30%, #fff, var(--brand) 55%, var(--brand-deep));z-index:1;pointer-events:none;border-radius:50%;width:70%;position:absolute;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 16px #ff3b5c73}.note.sync{background:radial-gradient(circle at 30% 30%, #fff, var(--accent) 50%, #9ccc20);border-radius:28%;box-shadow:0 0 20px #d6ff3f8c}.note.perfect,.note.good,.note.miss{opacity:.15;transform:translate(-50%,-50%)scale(.7)}.lane-pad{height:3.4rem;font-family:var(--font-display);color:var(--muted);z-index:3;background:#ffffff0a;border:1px solid #ffffff14;border-radius:12px;font-size:1.1rem;font-weight:800;position:absolute;bottom:.35rem;left:.35rem;right:.35rem}.lane-pad:active{color:var(--accent);background:#d6ff3f29;border-color:#d6ff3f59}.grade-pop{font-family:var(--font-display);letter-spacing:-.04em;pointer-events:none;z-index:20;font-size:clamp(2rem,8vw,3rem);font-weight:800;animation:.55s forwards popGrade;position:fixed;top:38%;left:50%;transform:translate(-50%,-50%)}.grade-pop.perfect{color:var(--accent);text-shadow:0 0 30px #d6ff3f8c}.grade-pop.good{color:var(--warn)}.grade-pop.miss{color:var(--brand)}@keyframes popGrade{0%{opacity:0;transform:translate(-50%,-40%)scale(.7)}30%{opacity:1;transform:translate(-50%,-50%)scale(1.08)}to{opacity:0;transform:translate(-50%,-70%)scale(1)}}.timer-bar{background:#ffffff0f;border-radius:999px;height:6px;overflow:hidden}.timer-bar>div{background:linear-gradient(90deg, var(--brand), var(--accent));height:100%;transition:width 50ms linear}.prompt{font-size:clamp(1.35rem,4.5vw,1.75rem)}.option-grid{gap:.65rem;display:grid}.option{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:1rem 1.1rem;font-weight:600}.option.picked,.sms-card.picked{background:var(--accent-dim);border-color:#d6ff3f80}.option:disabled{opacity:.7}.sms-card{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:14px;gap:.35rem;padding:.9rem 1rem;display:grid}.sms-card span,.echo-card span{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:.72rem}.sms-card p,.echo-card p{margin:0;line-height:1.4}.vote-list{gap:.65rem;display:grid}.locked{color:var(--accent);font-weight:600}.reveal-scores{border:1px solid var(--line);background:#141a24bf;border-radius:14px;padding:.75rem}.reveal-scores li{grid-template-columns:1fr auto}.reveal-scores .up{color:var(--good);font-weight:700}.echo-card{background:#ff3b5c14;border:1px solid #ff3b5c33;border-radius:14px;margin:0;padding:1rem}.echo-card cite{color:var(--muted);font-size:.85rem;font-style:normal}.echo-list{color:var(--muted);gap:.25rem;margin:0;padding-left:1.1rem;display:grid}.winner h2{font-size:clamp(2rem,7vw,2.8rem)}.draw-wrap{gap:.75rem;display:grid}.draw-pad{aspect-ratio:1;border:1px solid var(--line);touch-action:none;background:#0a0e14;border-radius:16px;width:100%;max-width:360px}.draw-wrap.orb .draw-pad{border-color:#ff3b5c80;animation:.35s infinite shake}.doodle-vote{grid-template-columns:repeat(2,1fr);gap:.65rem;display:grid}.doodle-card{border:1px solid var(--line);background:var(--surface);border-radius:14px;justify-items:center;gap:.4rem;padding:.65rem;display:grid}.doodle-card.picked{background:var(--accent-dim);border-color:#d6ff3f80}.mini-doodle{background:#0a0e14;border-radius:12px;width:88px;height:88px}.emoji-big{text-align:center;font-size:clamp(2.5rem,12vw,4rem)}.arena-stage{border:1px solid var(--line);background:linear-gradient(180deg, transparent 70%, #ff3b5c1f), var(--surface);border-radius:16px;height:220px;position:relative;overflow:hidden}.fighter{justify-items:center;gap:.25rem;width:96px;display:grid;position:absolute;bottom:12px;transform:translate(-50%)}.fighter .hp{background:#ffffff14;border-radius:999px;width:72px;height:6px;overflow:hidden}.fighter .hp>div{background:linear-gradient(90deg, var(--brand), var(--accent));height:100%}.fighter span{color:var(--muted);font-size:.72rem}.punch-btn{padding:1.1rem 1.5rem;font-size:1.2rem}.labb-grid{grid-template-columns:1fr 1fr;gap:.65rem;display:grid}.star-row{flex-wrap:wrap;gap:.35rem;display:flex}input{border:1px solid var(--line);background:var(--bg-elev);border-radius:12px;outline:none;width:100%;padding:.85rem 1rem}@media (width>=720px){.shell{max-width:640px}.lane-stage{height:460px}}