:root{--bg: #05030c;--panel: rgba(16, 12, 34, .72);--panel-border: rgba(255, 255, 255, .09);--text: #f2eeff;--text-dim: rgba(242, 238, 255, .55);--accent: #00ffd5;--accent-2: #ff2fb9;--accent-3: #7b5cff;--radius: 16px;--font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}#app{height:100dvh;position:relative}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}input{font-family:inherit}.landing{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(60% 50% at 20% 15%,rgba(123,92,255,.22),transparent 60%),radial-gradient(50% 45% at 85% 80%,rgba(255,47,185,.16),transparent 60%),radial-gradient(45% 40% at 70% 20%,rgba(0,255,213,.1),transparent 55%),var(--bg);overflow-y:auto;padding:24px}.landing-card{width:min(430px,100%);display:flex;flex-direction:column;gap:22px;animation:rise .5s cubic-bezier(.2,.9,.3,1)}@keyframes rise{0%{opacity:0;transform:translateY(18px)}}.logo{font-size:clamp(2.6rem,7vw,3.4rem);font-weight:800;letter-spacing:-.03em;line-height:1;text-align:center}.logo .ball{display:inline-block;animation:spin 6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.logo-gradient{background:linear-gradient(92deg,var(--accent),var(--accent-3) 55%,var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.tagline{text-align:center;color:var(--text-dim);font-size:1.02rem;line-height:1.5}.glass{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.landing-form{padding:26px;display:flex;flex-direction:column;gap:16px}.field label{display:block;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:7px}.field input{width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--panel-border);background:#00000059;color:var(--text);font-size:1rem;outline:none;transition:border-color .15s,box-shadow .15s}.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #00ffd526}.field input.code{text-transform:uppercase;letter-spacing:.35em;font-weight:700;text-align:center}.swatches{display:flex;gap:10px;flex-wrap:wrap}.swatch{width:34px;height:34px;border-radius:50%;border:2px solid transparent;transition:transform .12s,border-color .12s,box-shadow .12s}.swatch:hover{transform:scale(1.12)}.swatch.active{border-color:#fff;box-shadow:0 0 14px currentColor;transform:scale(1.12)}.btn{padding:14px 18px;border-radius:12px;font-size:1rem;font-weight:700;letter-spacing:.01em;transition:transform .12s,box-shadow .15s,opacity .15s}.btn:active{transform:scale(.97)}.btn-primary{background:linear-gradient(92deg,var(--accent),var(--accent-3));color:#04020a;box-shadow:0 4px 26px #00ffd559}.btn-primary:hover{box-shadow:0 4px 34px #00ffd58c}.btn-ghost{border:1px solid var(--panel-border);color:var(--text);background:#ffffff0a}.btn-ghost:hover{background:#ffffff17}.divider{display:flex;align-items:center;gap:12px;color:var(--text-dim);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--panel-border)}.landing-foot{text-align:center;font-size:.82rem;color:var(--text-dim);line-height:1.6}.room{position:absolute;inset:0}.room canvas.stage{position:absolute;inset:0;width:100%;height:100%;display:block}.hud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom))}.hud>*{pointer-events:auto}.hud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none}.hud-top>*{pointer-events:auto}.room-pill{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:999px;font-weight:700;font-size:.95rem;letter-spacing:.12em;transition:box-shadow .15s}.room-pill:hover{box-shadow:0 0 18px #00ffd540}.room-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse 2s infinite}@keyframes pulse{50%{opacity:.4}}.room-pill small{color:var(--text-dim);font-weight:500;letter-spacing:0}.leaderboard{min-width:190px;padding:12px 14px;font-size:.86rem}.leaderboard h3{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:8px}.leaderboard ol{list-style:none;display:flex;flex-direction:column;gap:5px}.leaderboard li{display:flex;align-items:center;gap:8px}.leaderboard .who{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}.leaderboard .pts{font-variant-numeric:tabular-nums;color:var(--text-dim)}.leaderboard .medal{width:18px;text-align:center}.hud-bottom{display:flex;flex-direction:column;gap:12px;align-items:center;pointer-events:none}.hud-bottom>*{pointer-events:auto}.now-playing{display:flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;font-size:.9rem;max-width:min(480px,90vw)}.now-playing .eq{display:flex;gap:2.5px;align-items:flex-end;height:14px}.now-playing .eq i{width:3px;background:var(--accent);border-radius:2px;animation:eq .9s ease-in-out infinite}.now-playing .eq i:nth-child(2){animation-delay:.22s;background:var(--accent-3)}.now-playing .eq i:nth-child(3){animation-delay:.45s;background:var(--accent-2)}@keyframes eq{0%,to{height:4px}50%{height:14px}}.now-playing.paused .eq i{animation-play-state:paused;height:4px}.now-playing .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.energy-wrap{display:flex;align-items:center;gap:10px}.energy{width:min(300px,55vw);height:10px;border-radius:999px;background:#ffffff14;overflow:hidden;border:1px solid var(--panel-border)}.energy .fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-3),var(--accent-2));transition:width .12s linear}.combo{font-weight:800;font-size:1rem;min-width:42px;text-align:center;color:var(--accent);text-shadow:0 0 12px var(--accent);transition:transform .15s}.combo.hot{color:var(--accent-2);text-shadow:0 0 14px var(--accent-2);transform:scale(1.15)}.controls-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}.react-btn{font-size:1.35rem;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;transition:transform .12s,background .15s}.react-btn:hover{transform:scale(1.18) translateY(-3px);background:#ffffff1f}.react-btn:active{transform:scale(.95)}.ctl-btn{height:46px;padding:0 18px;border-radius:999px;font-weight:700;font-size:.92rem;display:flex;align-items:center;gap:8px;transition:transform .12s,background .15s,box-shadow .15s}.ctl-btn:hover{background:#ffffff1a}.ctl-btn.primary{background:linear-gradient(92deg,var(--accent),var(--accent-3));color:#04020a;box-shadow:0 2px 18px #00ffd559}.ctl-btn.danger{color:#ff7a7a}.deck{width:min(560px,calc(100vw - 24px));padding:16px;display:flex;flex-direction:column;gap:12px}.deck-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.deck-head h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}.dropzone{border:2px dashed rgba(255,255,255,.18);border-radius:12px;padding:18px;text-align:center;color:var(--text-dim);font-size:.9rem;transition:border-color .15s,background .15s;cursor:pointer}.dropzone:hover,.dropzone.over{border-color:var(--accent);background:#00ffd50f;color:var(--text)}.playlist{list-style:none;max-height:130px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.playlist li{padding:8px 12px;border-radius:9px;font-size:.88rem;display:flex;gap:10px;align-items:center;cursor:pointer;transition:background .12s}.playlist li:hover{background:#ffffff12}.playlist li.current{background:#00ffd51f;color:var(--accent);font-weight:600}.playlist .dur{margin-left:auto;color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:.8rem}.transport{display:flex;align-items:center;gap:12px}.transport .t-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:1.15rem;background:#ffffff12;transition:background .15s,transform .12s}.transport .t-btn:hover{background:#ffffff24}.transport .t-btn.play{background:linear-gradient(92deg,var(--accent),var(--accent-3));color:#04020a;width:52px;height:52px;font-size:1.3rem}.seek{flex:1;display:flex;flex-direction:column;gap:4px}.seek input[type=range],.vol input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}.seek .times{display:flex;justify-content:space-between;font-size:.72rem;color:var(--text-dim);font-variant-numeric:tabular-nums}.vol{display:flex;align-items:center;gap:8px;width:110px;color:var(--text-dim)}.selfview{position:absolute;right:14px;bottom:190px;width:150px;border-radius:14px;overflow:hidden;border:1px solid var(--panel-border);background:#000;transition:opacity .2s}.selfview video{width:100%;display:block;transform:scaleX(-1)}.selfview .cam-label{position:absolute;left:8px;bottom:6px;font-size:.68rem;color:#fffc;text-shadow:0 1px 3px #000}.toast-zone{position:absolute;top:74px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;z-index:30}.toast{padding:10px 18px;border-radius:999px;font-size:.9rem;animation:toast-in .25s cubic-bezier(.2,.9,.3,1)}@keyframes toast-in{0%{opacity:0;transform:translateY(-10px)}}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#05030cd1;backdrop-filter:blur(8px);z-index:40}.overlay-card{width:min(420px,calc(100vw - 40px));padding:30px;text-align:center;display:flex;flex-direction:column;gap:16px;animation:rise .4s cubic-bezier(.2,.9,.3,1)}.overlay-card h2{font-size:1.5rem;letter-spacing:-.01em}.overlay-card p{color:var(--text-dim);line-height:1.55;font-size:.95rem}.hidden{display:none!important}@media(max-width:640px){.leaderboard{display:none}.selfview{width:104px;bottom:230px}.deck{padding:12px}}