:root{--bg: #0a0a14;--panel: #13131f;--panel-2: #1b1b2c;--accent: #ff2d78;--accent-2: #4de3ff;--accent-3: #ffd166;--text: #ececf4;--dim: #8a8aa0;--ok: #3ddc84;--bad: #ff5c5c}*{box-sizing:border-box;margin:0;padding:0}.hidden{display:none!important}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,PingFang SC,Microsoft YaHei,sans-serif;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}#app{height:100%}#bg{position:fixed;inset:0;background:radial-gradient(1200px 600px at 20% -10%,rgba(255,45,120,.14),transparent 60%),radial-gradient(1000px 600px at 90% 110%,rgba(77,227,255,.12),transparent 60%),var(--bg);z-index:-1}.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}.screen.hidden{display:none}.role-card,.pc-room,.mobile-connect,.calib-card,.remote-hud,.end-card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:28px 24px;max-width:440px;width:100%;box-shadow:0 24px 60px #00000080;text-align:center}.logo{font-size:44px;letter-spacing:6px;font-weight:800;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px}.remote-logo{font-size:30px;margin-bottom:10px}.tagline{color:var(--dim);margin-bottom:24px;font-size:14px}.version-badge{display:inline-block;padding:3px 10px;border:1px solid var(--line, #2a2a3f);border-radius:999px;color:var(--dim, #8b8ba3);font-size:12px;font-family:ui-monospace,monospace;margin-bottom:18px}.section-title{font-size:20px;margin-bottom:14px}.btn{font:inherit;border:none;cursor:pointer;border-radius:12px;padding:11px 16px;font-size:15px;color:var(--text);background:var(--panel-2);border:1px solid rgba(255,255,255,.1);transition:transform .08s ease,background .15s ease,opacity .15s ease,border-color .15s ease}.btn:hover:not(:disabled){border-color:#ffffff47}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-big{width:100%;padding:14px;font-size:16px;margin-top:12px}.btn-accent{background:linear-gradient(90deg,var(--accent),#d31d63);border:none;color:#fff;font-weight:600}.btn-solo{width:100%;margin-top:8px;border-color:#4de3ff66;color:var(--accent-2);background:#4de3ff14}.btn-small{padding:7px 12px;font-size:13px;margin-top:8px}.btn-ghost{background:transparent;border-color:transparent;color:var(--dim)}.role-btns{display:flex;flex-direction:column;gap:12px}.role-btns .btn{margin-top:0}.join-link{display:block;text-align:center;text-decoration:none;margin-top:14px}.status{color:var(--dim);font-size:14px;margin-bottom:12px}.status.ok{color:var(--ok)}.room-code-wrap{margin-bottom:10px}.room-code{font-size:38px;font-weight:800;letter-spacing:12px;text-indent:12px;color:var(--accent-3);font-family:Courier New,monospace}#pc-qr{width:164px;height:164px;margin:6px auto;background:#fff;border-radius:10px;padding:8px}.hint{color:var(--dim);font-size:13px;margin:8px 0;line-height:1.5}.devices{margin-top:6px;text-align:left}.devices-title{color:var(--dim);font-size:12px;margin-bottom:6px}.device-item{display:flex;justify-content:space-between;align-items:center;background:var(--panel-2);border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:13px;cursor:pointer}.device-item .dot{width:8px;height:8px;border-radius:50%;background:var(--dim)}.device-item .dot.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}.device-list{min-height:54px}.mobile-empty{color:var(--dim);font-size:14px;padding:16px 0}.or-row{color:var(--dim);font-size:13px;margin:14px 0 10px;position:relative}.manual-join{display:flex;gap:10px;align-items:stretch}.code-input{flex:1;min-width:0;background:var(--panel-2);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;color:var(--text);font-size:20px;letter-spacing:6px;text-align:center;text-transform:uppercase;font-family:Courier New,monospace}.manual-join .btn{flex-shrink:0;white-space:nowrap}.code-input:focus{outline:none;border-color:var(--accent)}.diff-row{display:flex;gap:8px;justify-content:center;margin:8px 0;flex-wrap:wrap}.diff-btn,.room-diff-btn{margin-top:0;min-width:60px}.diff-btn.active,.room-diff-btn.active{border-color:var(--accent-2);color:var(--accent-2);background:#4de3ff1f;box-shadow:0 0 10px #4de3ff4d}.mode-row{display:flex;justify-content:center;margin:6px 0 4px}.song-row{margin:8px 0 4px}.song-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.song-btn{min-width:96px;margin-top:0}.song-btn.active{border-color:var(--accent);color:var(--accent-3);background:#ff2d7824;box-shadow:0 0 10px #ff2d7859}.calib-song{margin:4px 0 8px;font-weight:700;color:var(--accent-3)}.flip-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0}.flip-row .btn{margin-top:0}.flip-btn.on{border-color:var(--accent-2);color:var(--accent-2);background:#4de3ff24;box-shadow:0 0 10px #4de3ff59}.calib-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;padding-top:5vh;background:linear-gradient(to bottom,#0a0a16c7,#0a0a164d 50%,#0a0a1600);z-index:20;pointer-events:auto}.calib-overlay .calib-card{max-width:460px;width:calc(100% - 32px)}.remote-status{color:var(--ok);font-size:15px;font-weight:600}.remote-ping{color:var(--dim);font-size:12px;margin-top:4px;font-family:monospace}.remote-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 12px}.remote-stat-box{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 6px;display:flex;flex-direction:column;gap:4px}.remote-stat-label{font-size:11px;color:var(--dim)}.remote-stat-box b{font-size:18px;color:var(--accent-3);font-family:monospace}.calib-bar{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.calib-bar .btn{margin-top:0}#game-canvas{position:fixed;inset:0;width:100%;height:100%;display:block}.hud{position:fixed;inset:0;pointer-events:none;padding:20px;font-family:Courier New,monospace}.hud-progress{position:fixed;top:0;left:0;right:0;height:4px;background:#ffffff14;z-index:22}.hud-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent-2),var(--accent),var(--accent-3));transition:width .12s linear}.hud-top{display:flex;align-items:flex-start;justify-content:space-between}.hud-left{display:flex;flex-direction:column;gap:6px}.hud-score{font-size:30px;font-weight:800;color:var(--text);text-shadow:0 0 12px rgba(255,255,255,.4);display:flex;align-items:baseline;gap:6px}.hud-label{font-size:13px;color:var(--dim)}.hud-mult{font-size:15px;padding:2px 8px;border-radius:999px;background:#4de3ff26;border:1px solid rgba(77,227,255,.4);color:var(--accent-2)}.hud-mult.active,.hud-mult.fever{background:#ffd1663d;border-color:var(--accent-3);color:var(--accent-3);box-shadow:0 0 14px #ffd16680}.hud-fever-wrap{display:flex;align-items:center;gap:6px}.hud-fever-label{font-size:11px;color:var(--accent-3);font-weight:700;letter-spacing:1px}.hud-fever-bar{width:110px;height:6px;background:#ffffff1a;border-radius:999px;overflow:hidden}.hud-fever-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent-2),var(--accent-3));transition:width .12s ease}.hud-fever-fill.active{background:linear-gradient(90deg,var(--accent),var(--accent-3));box-shadow:0 0 10px var(--accent-3)}.hud-combo{font-size:28px;font-weight:800;color:var(--accent-2);text-shadow:0 0 14px var(--accent-2);transition:transform .1s}.hud-combo.pop{transform:scale(1.35)}.hud-right-group{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-right:190px}.hud-lives{font-size:20px;letter-spacing:3px;color:var(--bad);text-shadow:0 0 8px var(--bad)}.hud-song{font-size:12px;color:var(--dim)}.hud-acc{position:fixed;top:52px;left:50%;transform:translate(-50%);color:var(--dim);font-size:13px}.hud-actions{position:fixed;top:14px;right:14px;display:flex;gap:6px;z-index:25;pointer-events:auto}.hud-btn,.hud-exit{margin:0;pointer-events:auto;background:#ffffff0f;border-color:#ffffff29;color:var(--dim)}.hud-pop{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);font-size:40px;font-weight:800;letter-spacing:4px;text-shadow:0 0 24px currentColor;transition:opacity .32s ease,transform .32s ease;pointer-events:none;white-space:nowrap}.hud-pop.perfect{color:var(--accent-3)}.hud-pop.good{color:var(--accent-2)}.hud-pop.miss{color:var(--bad)}.hud-pop.pop{opacity:1;transform:translate(-50%,-50%) scale(1)}.hud-pop.fade{opacity:0;transform:translate(-50%,-80%) scale(1.35)}.hud-pop.hidden{display:none}.pc-dir{position:fixed;right:14px;top:52px;z-index:21;padding:5px 9px;font-size:12px;font-family:monospace;color:#9fe8ff;background:#0000008c;border:1px solid rgba(159,232,255,.35);border-radius:6px;pointer-events:none}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#05050ac7;backdrop-filter:blur(4px);z-index:30}.overlay.hidden{display:none}.end-rank{display:inline-block;margin-top:4px;padding:4px 14px;border-radius:999px;font-size:16px;font-weight:800;letter-spacing:2px;color:var(--accent-2);border:1px solid var(--accent-2);background:#4de3ff1f}.end-rank.rank-sss,.end-rank.rank-s{color:var(--accent-3);border-color:var(--accent-3);background:#ffd16629;box-shadow:0 0 18px #ffd16659}.end-score{font-size:52px;font-weight:800;color:var(--accent-3);margin:8px 0 12px}.end-stats{color:var(--dim);font-size:14px;line-height:1.7;margin-bottom:10px}@media (max-width: 600px){.role-card,.pc-room,.mobile-connect,.calib-card,.remote-hud,.end-card{padding:22px 16px;border-radius:16px}.logo{font-size:34px}.room-code{font-size:30px;letter-spacing:8px;text-indent:8px}.hud-right-group{margin-right:0;margin-top:32px}}