: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:24px;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:32px 28px;max-width:420px;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}.tagline{color:var(--dim);margin-bottom:28px;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:18px}.btn{font:inherit;border:none;cursor:pointer;border-radius:12px;padding:12px 18px;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}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-big{width:100%;padding:15px;font-size:17px;margin-top:14px}.btn-accent{background:linear-gradient(90deg,var(--accent),#d31d63);border:none;color:#fff}.btn-small{padding:7px 12px;font-size:13px;margin-top:10px}.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}.status{color:var(--dim);font-size:14px;margin-bottom:16px}.status.ok{color:var(--ok)}.room-code-wrap{margin-bottom:14px}.room-code{font-size:40px;font-weight:800;letter-spacing:14px;text-indent:14px;color:var(--accent-3);font-family:Courier New,monospace}#pc-qr{width:180px;height:180px;margin:10px auto;background:#fff;border-radius:10px;padding:8px}.hint{color:var(--dim);font-size:13px;margin:10px 0;line-height:1.6}.devices{margin-top:6px;text-align:left}.devices-title{color:var(--dim);font-size:13px;margin-bottom:8px}.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}.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:60px}.mobile-empty{color:var(--dim);font-size:14px;padding:20px 0}.or-row{color:var(--dim);font-size:13px;margin:16px 0 12px;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)}.calib-state{color:var(--dim);font-size:14px;margin:10px 0;min-height:20px}.calib-state.ready{color:var(--ok)}.diff-row{display:flex;gap:8px;justify-content:center;margin:6px 0 14px}.diff-btn{margin-top:0;min-width:64px}.diff-btn.active{border-color:var(--accent);color:var(--accent-3);box-shadow:0 0 10px #ff2d7859}.calib2-dir{font-size:44px;font-weight:800;letter-spacing:8px;color:var(--accent-3);margin:18px 0 16px;text-shadow:0 0 20px rgba(255,209,102,.4)}.calib2-bar{height:8px;border-radius:4px;background:var(--panel-2);overflow:hidden;margin:10px 0}.calib2-bar #calib2-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .1s linear}.calib2-step{color:var(--dim);font-size:13px;margin:4px 0}#calib2-canvas{width:100%;height:200px;border-radius:12px;background:radial-gradient(ellipse at 50% 80%,#4de3ff1a,#0a0a1466);display:block;margin:4px 0 10px}.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);box-shadow:0 0 10px #b06dff66}.calib-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;padding-top:6vh;background:linear-gradient(to bottom,#0a0a16b3,#0a0a1640 45%,#0a0a1600);z-index:20;pointer-events:auto}.calib-overlay .calib-card{max-width:460px;width:calc(100% - 32px)}.remote-hud{background:transparent;border:none;box-shadow:none;padding:0}.remote-status{color:var(--ok);font-size:15px;font-weight:600}.remote-ping{color:var(--dim);font-size:13px;margin-top:4px}.calib-bar{margin-top:24px;display:flex;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-top{display:flex;align-items:flex-start;justify-content:space-between}.hud-score{font-size:30px;font-weight:800;color:var(--text);text-shadow:0 0 12px rgba(255,255,255,.4)}.hud-label{font-size:13px;color:var(--dim);margin-left:4px}.hud-combo{font-size:26px;font-weight:800;color:var(--accent-2);text-shadow:0 0 14px var(--accent-2);transition:transform .1s}.hud-combo.pop{transform:scale(1.4)}.hud-lives{font-size:20px;letter-spacing:4px;color:var(--bad);text-shadow:0 0 8px var(--bad)}.hud-acc{position:fixed;top:20px;left:50%;transform:translate(-50%);color:var(--dim);font-size:13px}.hud-exit{position:fixed;top:14px;right:14px;margin:0;pointer-events:auto;background:#ffffff0f;border-color:#ffffff26;color:var(--dim)}.hud-pop{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);font-size:44px;font-weight:800;letter-spacing:6px;text-shadow:0 0 24px currentColor;transition:opacity .35s ease,transform .35s ease;pointer-events:none}.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.4)}.hud-pop.hidden{display:none}.debugcam-badge{position:fixed;left:14px;bottom:14px;z-index:20;padding:6px 10px;font-size:12px;letter-spacing:1px;color:#ffd166;background:#0000008c;border:1px solid rgba(255,209,102,.4);border-radius:6px;pointer-events:none;font-family:monospace}.debugcam-badge.hidden{display:none}.debugcam-btn{position:fixed;right:14px;bottom:14px;z-index:21;margin:0;background:#ffd1661f;border-color:#ffd16680;color:#ffd166;pointer-events:auto}.debugcam-btn.on{background:#ffd16659;border-color:#ffd166}.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:#05050abf;backdrop-filter:blur(3px)}.overlay.hidden{display:none}.end-score{font-size:52px;font-weight:800;color:var(--accent-3);margin:6px 0 16px}.end-stats{color:var(--dim);font-size:14px;line-height:1.8;margin-bottom:8px}@media (max-width: 480px){.role-card,.pc-room,.mobile-connect,.calib-card,.end-card{padding:24px 18px;border-radius:16px}.logo{font-size:34px}.room-code{font-size:32px;letter-spacing:8px;text-indent:8px}}