:root{--c-bg: #04060c;--c-panel: rgba(8, 14, 26, .72);--c-line: rgba(60, 220, 255, .22);--c-cyan: #2fe6ff;--c-magenta: #ff3fa4;--c-gold: #ffc94d;--c-text: #d7f4ff;--c-text-dim: rgba(215, 244, 255, .55);--font-display: "Orbitron", "Segoe UI", sans-serif;--font-ui: "Rajdhani", "Segoe UI", sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:var(--c-bg);font-family:var(--font-ui);color:var(--c-text);-webkit-user-select:none;user-select:none;touch-action:none}#app{position:fixed;inset:0}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;cursor:crosshair}#ui-root,#overlay-root{position:absolute;inset:0;pointer-events:none}#boot-screen{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 40%,#0a1428,#04060c 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;z-index:100;transition:opacity .6s ease}#boot-screen.hidden{opacity:0;pointer-events:none}.boot-logo{font-family:var(--font-display);font-weight:900;font-size:clamp(22px,4.5vw,44px);letter-spacing:.22em;color:#fff;text-shadow:0 0 24px rgba(47,230,255,.8)}.boot-logo span{color:var(--c-cyan)}.boot-bar{width:min(320px,60vw);height:3px;background:#2fe6ff26;border-radius:2px;overflow:hidden}.boot-bar-fill{width:30%;height:100%;background:var(--c-cyan);box-shadow:0 0 12px var(--c-cyan);border-radius:2px;animation:boot-slide 1.2s ease-in-out infinite}@keyframes boot-slide{0%{transform:translate(-110%)}to{transform:translate(360%)}}.boot-status{font-size:14px;letter-spacing:.28em;text-transform:uppercase;color:var(--c-text-dim)}.menu{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:auto;background:radial-gradient(ellipse at 50% 55%,#04081240,#04060cc7 90%)}.menu-title{font-family:var(--font-display);font-weight:900;font-size:clamp(26px,6vw,72px);letter-spacing:.18em;text-align:center;padding:0 16px;color:#fff;text-shadow:0 0 18px rgba(47,230,255,.9),0 0 60px rgba(47,230,255,.4)}.menu-title .accent{color:var(--c-cyan)}.menu-subtitle{font-size:clamp(13px,1.8vw,18px);letter-spacing:.5em;text-transform:uppercase;color:var(--c-text-dim);margin-bottom:42px}.menu-button{pointer-events:auto;font-family:var(--font-display);font-weight:700;font-size:clamp(15px,2vw,20px);letter-spacing:.3em;text-transform:uppercase;color:var(--c-text);background:#2fe6ff0f;border:1px solid rgba(47,230,255,.45);border-radius:4px;padding:16px 52px 14px;cursor:pointer;transition:all .25s ease;box-shadow:0 0 #2fe6ff00}.menu-button:hover{background:#2fe6ff29;box-shadow:0 0 32px #2fe6ff59,inset 0 0 18px #2fe6ff1f;transform:translateY(-2px)}.menu-hint{margin-top:34px;font-size:13px;letter-spacing:.18em;color:var(--c-text-dim);text-transform:uppercase}.menu-button.ghost{border-color:#d7f4ff47;color:var(--c-text-dim)}.menu-button.ghost:hover{background:#d7f4ff14;box-shadow:none;color:var(--c-text)}.menu-buttons{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}.online-panel{position:absolute;z-index:30;top:50%;left:50%;transform:translate(-50%,-50%);width:min(400px,92vw);max-height:90vh;overflow-y:auto;background:var(--c-panel);border:1px solid var(--c-line);border-radius:16px;padding:22px 24px 20px;backdrop-filter:blur(16px);pointer-events:auto}.op-header{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.3em;color:#fff;margin-bottom:12px}.op-close{background:none;border:none;color:var(--c-text-dim);font-size:15px;cursor:pointer}.op-close:hover{color:#fff}.op-intro{font-size:13px;line-height:1.5;color:var(--c-text-dim);margin-bottom:16px}.online-panel label{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-cyan);margin:12px 0 5px}.online-panel input[type=text]{width:100%;background:#ffffff0d;border:1px solid var(--c-line);border-radius:7px;color:var(--c-text);font-family:var(--font-ui);font-size:15px;padding:9px 12px;outline:none}.online-panel input[type=text]:focus{border-color:#2fe6ff99;box-shadow:0 0 12px #2fe6ff26}.op-room{text-transform:uppercase;letter-spacing:.14em;font-weight:700}.op-room-row{display:flex;gap:8px}.op-dice{flex:0 0 auto;background:#2fe6ff14;border:1px solid var(--c-line);border-radius:7px;font-size:18px;width:46px;cursor:pointer}.op-dice:hover{background:#2fe6ff2e}.op-advanced{margin-top:12px}.op-advanced summary{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-text-dim);cursor:pointer}.op-advanced input{margin-top:8px;font-size:12px!important}.op-actions{margin-top:18px;display:flex;justify-content:center}.op-actions .menu-button{padding:13px 40px 11px}.op-status{margin-top:14px;text-align:center;font-size:13px;letter-spacing:.06em;color:var(--c-text-dim);min-height:18px}.summary{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:auto;background:radial-gradient(ellipse at 50% 45%,#0408128c,#04060ce6 90%);backdrop-filter:blur(4px);padding:20px}.summary-card{width:min(560px,94vw);max-height:92vh;overflow-y:auto;text-align:center;background:var(--c-panel);border:1px solid var(--c-line);border-radius:18px;padding:34px clamp(20px,5vw,46px) 30px;backdrop-filter:blur(16px)}.summary-title{font-family:var(--font-display);font-weight:900;font-size:clamp(38px,8vw,68px);letter-spacing:.2em;line-height:1}.summary-score{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,5vw,40px);margin-top:12px;display:flex;gap:16px;justify-content:center;align-items:baseline}.summary-score .p1{color:var(--c-cyan)}.summary-score .p2{color:var(--c-magenta)}.summary-score .dash{color:var(--c-text-dim)}.summary-headline{margin-top:16px;font-size:clamp(14px,2.4vw,18px);letter-spacing:.04em;color:var(--c-text-dim)}.summary-headline b{color:var(--c-text);font-weight:700}.summary-grid{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.summary-tile{background:#ffffff0a;border:1px solid var(--c-line);border-radius:10px;padding:14px 10px}.summary-tile .st-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-text-dim);margin-bottom:6px}.summary-tile .st-value{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,3.4vw,26px);color:#fff}.summary-tile .st-value small{font-size:11px;font-weight:400;color:var(--c-text-dim);letter-spacing:.04em}.summary-actions{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.summary-actions .menu-button{padding:14px 34px 12px;font-size:clamp(13px,1.8vw,16px)}@media (max-width: 460px){.summary-grid{grid-template-columns:repeat(2,1fr)}}.hud{position:absolute;inset:0}.hud-score{position:absolute;top:max(18px,env(safe-area-inset-top));left:50%;transform:translate(-50%);display:flex;align-items:baseline;gap:22px;font-family:var(--font-display)}.hud-score .score{font-size:clamp(30px,5vw,52px);font-weight:900;line-height:1;min-width:1.2em;text-align:center}.hud-score .score.p1{color:var(--c-cyan);text-shadow:0 0 22px rgba(47,230,255,.75)}.hud-score .score.p2{color:var(--c-magenta);text-shadow:0 0 22px rgba(255,63,164,.75)}.hud-score .divider{font-size:clamp(16px,2.4vw,24px);color:var(--c-text-dim);font-weight:500}.hud-heart{position:absolute;left:max(20px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));background:var(--c-panel);border:1px solid var(--c-line);border-radius:10px;padding:12px 18px;backdrop-filter:blur(10px);min-width:168px}.hud-heart .bpm-row{display:flex;align-items:baseline;gap:8px}.hud-heart .heart-icon{display:inline-block;color:var(--c-cyan);font-size:18px;transform-origin:center}.hud-heart .bpm-value{font-family:var(--font-display);font-size:30px;font-weight:700;color:#fff;line-height:1}.hud-heart .bpm-label{font-size:12px;letter-spacing:.2em;color:var(--c-text-dim)}.hud-heart .heart-state{margin-top:5px;font-size:13px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;transition:color .6s ease}.hud-heart.opponent{left:auto;bottom:auto;top:max(72px,calc(env(safe-area-inset-top) + 56px));right:max(20px,env(safe-area-inset-right));border-color:#ff3fa44d;text-align:right}.hud-heart.opponent .bpm-row{justify-content:flex-end}.hud-heart .sync-status{margin-top:4px;font-size:11px;letter-spacing:.12em;color:var(--c-text-dim);display:flex;align-items:center;gap:6px}.sync-dot{width:6px;height:6px;border-radius:50%;background:var(--c-cyan);box-shadow:0 0 8px var(--c-cyan);animation:sync-pulse 1.4s ease-in-out infinite}@keyframes sync-pulse{0%,to{opacity:.3}50%{opacity:1}}.hud-overdrive{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);width:min(300px,44vw);text-align:center}.hud-overdrive .od-label{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.42em;color:var(--c-text-dim);margin-bottom:7px;transition:color .4s ease,text-shadow .4s ease}.hud-overdrive.ready .od-label{color:var(--c-gold);text-shadow:0 0 14px rgba(255,201,77,.9)}.od-track{height:5px;border-radius:3px;background:#ffffff14;overflow:hidden}.od-fill{height:100%;width:0%;border-radius:3px;background:linear-gradient(90deg,var(--c-cyan),var(--c-gold));box-shadow:0 0 10px #ffc94d99;transition:width .25s ease}.hud-overdrive.ready .od-fill{animation:od-glow .9s ease-in-out infinite}@keyframes od-glow{0%,to{box-shadow:0 0 8px #ffc94d80}50%{box-shadow:0 0 22px #ffc94d}}.banner{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:clamp(38px,8vw,96px);font-weight:900;letter-spacing:.24em;color:#fff;opacity:0;pointer-events:none;white-space:nowrap}.demo-panel{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));background:var(--c-panel);border:1px solid var(--c-line);border-radius:10px;padding:10px 14px;backdrop-filter:blur(10px);pointer-events:auto;width:196px}.demo-panel .demo-title{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--c-text-dim);margin-bottom:8px;display:flex;justify-content:space-between;cursor:pointer}.demo-panel .demo-body.collapsed{display:none}.demo-panel label{font-size:12px;color:var(--c-text-dim);display:block;margin-bottom:2px}.demo-panel input[type=range]{width:100%;accent-color:var(--c-cyan);cursor:pointer}.demo-panel .demo-row{display:flex;justify-content:space-between;font-size:12px;margin-top:6px}.demo-panel .demo-check{display:flex;align-items:center;gap:6px;font-size:12px;margin-top:6px;color:var(--c-text-dim)}.settings-gear{position:absolute;top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));z-index:20;width:42px;height:42px;border-radius:10px;background:var(--c-panel);border:1px solid var(--c-line);color:var(--c-text-dim);font-size:20px;cursor:pointer;pointer-events:auto;backdrop-filter:blur(10px);transition:all .25s ease}.settings-gear:hover{color:var(--c-cyan);box-shadow:0 0 18px #2fe6ff40;transform:rotate(30deg)}.settings-panel{position:absolute;top:max(68px,calc(env(safe-area-inset-top) + 52px));left:max(16px,env(safe-area-inset-left));z-index:21;width:min(300px,calc(100vw - 32px));max-height:calc(100vh - 120px);overflow-y:auto;background:var(--c-panel);border:1px solid var(--c-line);border-radius:12px;padding:14px 16px 16px;backdrop-filter:blur(14px);pointer-events:auto}.sp-header{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.36em;color:var(--c-text);margin-bottom:10px}.sp-close{background:none;border:none;color:var(--c-text-dim);font-size:14px;cursor:pointer;padding:4px}.sp-close:hover{color:#fff}.sp-section{margin-top:12px}.sp-section-title{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--c-cyan);margin-bottom:8px}.settings-panel label{display:block;font-size:12px;color:var(--c-text-dim);margin:8px 0 3px}.settings-panel input[type=text],.settings-panel input[type=password]{width:100%;background:#ffffff0d;border:1px solid var(--c-line);border-radius:6px;color:var(--c-text);font-family:var(--font-ui);font-size:14px;padding:7px 10px;outline:none}.settings-panel input[type=text]:focus,.settings-panel input[type=password]:focus{border-color:#2fe6ff99;box-shadow:0 0 12px #2fe6ff26}.settings-panel input[type=range]{width:100%;accent-color:var(--c-cyan);cursor:pointer}.sp-row{display:flex;align-items:center;gap:10px;margin-top:10px}.sp-connect{font-family:var(--font-ui);font-weight:600;font-size:13px;letter-spacing:.08em;color:var(--c-text);background:#2fe6ff1a;border:1px solid rgba(47,230,255,.45);border-radius:6px;padding:7px 16px;cursor:pointer;transition:all .2s ease}.sp-connect:hover{background:#2fe6ff38}.sp-status{font-size:12px;color:var(--c-text-dim);flex:1}.sp-hint{font-size:11px;color:var(--c-text-dim);margin:6px 0 0;line-height:1.45}.sp-glow-val{color:var(--c-text);float:right}.sp-difficulty{display:flex;gap:6px}.sp-diff{flex:1;font-family:var(--font-ui);font-weight:600;font-size:13px;color:var(--c-text-dim);background:#ffffff0a;border:1px solid var(--c-line);border-radius:6px;padding:7px 0;cursor:pointer;transition:all .2s ease}.sp-diff.active{color:#04121a;background:var(--c-cyan);border-color:var(--c-cyan);box-shadow:0 0 14px #2fe6ff66}.spectator{position:absolute;top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));display:flex;flex-direction:column;gap:10px;width:210px}.widget{background:var(--c-panel);border:1px solid var(--c-line);border-radius:10px;padding:10px 14px;backdrop-filter:blur(10px)}.widget .w-label{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--c-text-dim);margin-bottom:3px}.widget .w-value{font-family:var(--font-display);font-size:22px;font-weight:700;color:#fff}.widget .w-value small{font-size:12px;color:var(--c-text-dim);font-weight:400}.widget .w-sub{font-size:11px;color:var(--c-text-dim);margin-top:2px}.widget .w-bar{margin-top:6px;height:4px;border-radius:2px;background:#ffffff14;overflow:hidden}.widget .w-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--c-cyan),var(--c-gold));transition:width .3s ease}body.obs-mode{background:transparent}body.obs-mode #game-canvas,body.obs-mode #ui-root,body.obs-mode #boot-screen{display:none}@media (max-width: 640px){.demo-panel{display:none}.spectator{width:160px}.hud-heart{min-width:140px;padding:9px 13px}.hud-heart .bpm-value{font-size:24px}}