:root{--bg-color: #07000e;--panel-bg: rgba(15, 4, 30, .75);--panel-border: rgba(0, 240, 255, .2);--neon-cyan: #00f0ff;--neon-pink: #ff007f;--neon-green: #39ff14;--neon-yellow: #ffff00;--text-primary: #ffffff;--text-muted: #8c82a2;--font-hud: "Share Tech Mono", monospace;--font-title: "Orbitron", sans-serif;--font-ui: "Rajdhani", "Segoe UI", sans-serif;--glow-cyan: 0 0 10px rgba(0, 240, 255, .5), 0 0 20px rgba(0, 240, 255, .2);--glow-pink: 0 0 10px rgba(255, 0, 127, .5), 0 0 20px rgba(255, 0, 127, .2);--glow-green: 0 0 10px rgba(57, 255, 20, .5), 0 0 20px rgba(57, 255, 20, .2);--scanline-display: block;--radius-lg: 16px;--radius-md: 10px;--radius-sm: 7px;--surface-1: rgba(255, 255, 255, .035);--surface-2: rgba(255, 255, 255, .07);--line-soft: rgba(255, 255, 255, .08)}body.theme-amber{--bg-color: #0a0600;--panel-bg: rgba(24, 14, 0, .8);--panel-border: rgba(255, 176, 0, .3);--neon-cyan: #ffb000;--neon-pink: #ff7a00;--neon-green: #ffd000;--neon-yellow: #ffe000;--text-primary: #ffe9c2;--text-muted: #9c7b3a;--font-hud: "VT323", monospace;--font-title: "VT323", monospace;--font-ui: "VT323", monospace;--glow-cyan: 0 0 10px rgba(255, 176, 0, .5), 0 0 20px rgba(255, 176, 0, .2);--glow-pink: 0 0 10px rgba(255, 122, 0, .5), 0 0 20px rgba(255, 122, 0, .2);--scanline-display: block;--ddr-color-0: #ffd000;--ddr-color-1: #ff7a00;--ddr-color-2: #ffb000;--ddr-color-3: #ffe000;--piu-color-0: #ffb000;--piu-color-1: #ffb000;--piu-color-2: #ffe000;--piu-color-3: #ffb000;--piu-color-4: #ffb000}body.theme-bubblegum{--bg-color: #1a0820;--panel-bg: rgba(40, 10, 46, .75);--panel-border: rgba(255, 120, 200, .3);--neon-cyan: #00e0ff;--neon-pink: #ff5fb0;--neon-green: #7fffd4;--neon-yellow: #fff07f;--text-primary: #ffe6f5;--text-muted: #b98aa8;--font-title: "Chakra Petch", sans-serif;--glow-cyan: 0 0 10px rgba(0, 224, 255, .5), 0 0 20px rgba(0, 224, 255, .2);--glow-pink: 0 0 10px rgba(255, 95, 176, .5), 0 0 20px rgba(255, 95, 176, .2);--scanline-display: none;--ddr-color-0: #ff5fb0;--ddr-color-1: #ff9ad5;--ddr-color-2: #00e0ff;--ddr-color-3: #fff07f;--piu-color-0: #00e0ff;--piu-color-1: #00e0ff;--piu-color-2: #fff07f;--piu-color-3: #ff5fb0;--piu-color-4: #ff5fb0}body.theme-sunset{--bg-color: #12001c;--panel-bg: rgba(30, 2, 45, .75);--panel-border: rgba(255, 0, 127, .2);--neon-cyan: #ff007f;--neon-pink: #ffaa00;--neon-green: #ff00ff;--neon-yellow: #ffee00;--text-primary: #ffe6f5;--text-muted: #a67296;--glow-cyan: 0 0 10px rgba(255, 0, 127, .5), 0 0 20px rgba(255, 0, 127, .2);--glow-pink: 0 0 10px rgba(255, 170, 0, .5), 0 0 20px rgba(255, 170, 0, .2);--scanline-display: block;--ddr-color-0: #ff00ff;--ddr-color-1: #ff5500;--ddr-color-2: #ffaa00;--ddr-color-3: #ffff00;--piu-color-0: #ff007f;--piu-color-1: #ff007f;--piu-color-2: #ffaa00;--piu-color-3: #ff007f;--piu-color-4: #ff007f}body.theme-frost{--bg-color: #030a16;--panel-bg: rgba(5, 18, 38, .75);--panel-border: rgba(0, 220, 255, .25);--neon-cyan: #00e5ff;--neon-pink: #7f00ff;--neon-green: #00ffff;--neon-yellow: #aaffff;--text-primary: #e6faff;--text-muted: #6e8d9c;--font-title: "Rajdhani", sans-serif;--glow-cyan: 0 0 10px rgba(0, 229, 255, .5), 0 0 20px rgba(0, 229, 255, .2);--glow-pink: 0 0 10px rgba(127, 0, 255, .5), 0 0 20px rgba(127, 0, 255, .2);--scanline-display: none;--ddr-color-0: #00ffff;--ddr-color-1: #7f00ff;--ddr-color-2: #0088ff;--ddr-color-3: #aaffff;--piu-color-0: #0088ff;--piu-color-1: #0088ff;--piu-color-2: #aaffff;--piu-color-3: #0088ff;--piu-color-4: #0088ff}body.theme-ghost{--bg-color: #0a0a0c;--panel-bg: rgba(20, 20, 24, .8);--panel-border: rgba(200, 210, 220, .25);--neon-cyan: #e6f0ff;--neon-pink: #9fb3c8;--neon-green: #c8d6e5;--neon-yellow: #ffffff;--text-primary: #f0f4f8;--text-muted: #7a828c;--font-hud: "Rajdhani", sans-serif;--font-title: "Rajdhani", sans-serif;--glow-cyan: 0 0 10px rgba(230, 240, 255, .4), 0 0 20px rgba(230, 240, 255, .15);--glow-pink: 0 0 10px rgba(159, 179, 200, .4), 0 0 20px rgba(159, 179, 200, .15);--scanline-display: none;--ddr-color-0: #9fb3c8;--ddr-color-1: #e6f0ff;--ddr-color-2: #c8d6e5;--ddr-color-3: #ffffff;--piu-color-0: #c8d6e5;--piu-color-1: #c8d6e5;--piu-color-2: #ffffff;--piu-color-3: #c8d6e5;--piu-color-4: #c8d6e5}body.theme-matrix{--bg-color: #010802;--panel-bg: rgba(2, 20, 5, .75);--panel-border: rgba(57, 255, 20, .2);--neon-cyan: #39ff14;--neon-pink: #00ff7f;--neon-green: #00ffaa;--neon-yellow: #dfff00;--text-primary: #d5ffd8;--text-muted: #4e8055;--font-hud: "VT323", monospace;--font-title: "VT323", monospace;--font-ui: "VT323", monospace;--glow-cyan: 0 0 10px rgba(57, 255, 20, .5), 0 0 20px rgba(57, 255, 20, .2);--glow-pink: 0 0 10px rgba(0, 255, 127, .5), 0 0 20px rgba(0, 255, 127, .2);--scanline-display: block;--ddr-color-0: #00ffaa;--ddr-color-1: #39ff14;--ddr-color-2: #00ff7f;--ddr-color-3: #dfff00;--piu-color-0: #00ff7f;--piu-color-1: #00ff7f;--piu-color-2: #dfff00;--piu-color-3: #00ff7f;--piu-color-4: #00ff7f}body.theme-sakura{--bg-color: #1a0610;--panel-bg: rgba(40, 8, 24, .75);--panel-border: rgba(255, 150, 180, .3);--neon-cyan: #ff8fb0;--neon-pink: #ff4f7f;--neon-green: #ffd0dd;--neon-yellow: #ffe0c0;--text-primary: #fff0f4;--text-muted: #c08a98;--font-title: "Rajdhani", sans-serif;--glow-cyan: 0 0 10px rgba(255, 143, 176, .5), 0 0 20px rgba(255, 143, 176, .2);--glow-pink: 0 0 10px rgba(255, 79, 127, .5), 0 0 20px rgba(255, 79, 127, .2);--scanline-display: none;--ddr-color-0: #ff4f7f;--ddr-color-1: #ff8fb0;--ddr-color-2: #ffb0c8;--ddr-color-3: #ffe0c0;--piu-color-0: #ff8fb0;--piu-color-1: #ff8fb0;--piu-color-2: #ffe0c0;--piu-color-3: #ff4f7f;--piu-color-4: #ff4f7f}body.theme-solar{--bg-color: #120500;--panel-bg: rgba(30, 8, 2, .75);--panel-border: rgba(255, 120, 0, .25);--neon-cyan: #ff7700;--neon-pink: #ff3300;--neon-green: #ffaa00;--neon-yellow: #ffea00;--text-primary: #fffae6;--text-muted: #ab7a60;--glow-cyan: 0 0 10px rgba(255, 119, 0, .5), 0 0 20px rgba(255, 119, 0, .2);--glow-pink: 0 0 10px rgba(255, 51, 0, .5), 0 0 20px rgba(255, 51, 0, .2);--scanline-display: block;--ddr-color-0: #ffaa00;--ddr-color-1: #ff3300;--ddr-color-2: #ff7700;--ddr-color-3: #ffea00;--piu-color-0: #ff7700;--piu-color-1: #ff7700;--piu-color-2: #ffea00;--piu-color-3: #ff7700;--piu-color-4: #ff7700}body.theme-synthwave{--bg-color: #14002e;--panel-bg: rgba(30, 5, 55, .78);--panel-border: rgba(180, 0, 255, .3);--neon-cyan: #00eaff;--neon-pink: #ff2bd6;--neon-green: #b14bff;--neon-yellow: #ffd000;--text-primary: #f3e6ff;--text-muted: #9a7bbd;--font-title: "Audiowide", sans-serif;--glow-cyan: 0 0 10px rgba(0, 234, 255, .5), 0 0 20px rgba(0, 234, 255, .2);--glow-pink: 0 0 10px rgba(255, 43, 214, .5), 0 0 20px rgba(255, 43, 214, .2);--scanline-display: block;--ddr-color-0: #b14bff;--ddr-color-1: #ff2bd6;--ddr-color-2: #00eaff;--ddr-color-3: #ffd000;--piu-color-0: #00eaff;--piu-color-1: #00eaff;--piu-color-2: #ffd000;--piu-color-3: #ff2bd6;--piu-color-4: #ff2bd6}body.theme-vaporwave{--bg-color: #1a0826;--panel-bg: rgba(35, 12, 50, .72);--panel-border: rgba(120, 230, 230, .3);--neon-cyan: #2bf0e0;--neon-pink: #ff6ad5;--neon-green: #94d0ff;--neon-yellow: #fff6a0;--text-primary: #eafff9;--text-muted: #9fb8c8;--font-title: "Audiowide", sans-serif;--glow-cyan: 0 0 10px rgba(43, 240, 224, .5), 0 0 20px rgba(43, 240, 224, .2);--glow-pink: 0 0 10px rgba(255, 106, 213, .5), 0 0 20px rgba(255, 106, 213, .2);--scanline-display: block;--ddr-color-0: #ff6ad5;--ddr-color-1: #2bf0e0;--ddr-color-2: #94d0ff;--ddr-color-3: #fff6a0;--piu-color-0: #2bf0e0;--piu-color-1: #2bf0e0;--piu-color-2: #fff6a0;--piu-color-3: #ff6ad5;--piu-color-4: #ff6ad5}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;overflow:hidden;background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-ui);font-size:16px;user-select:none;-webkit-user-select:none;touch-action:none}body:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(1000px 600px at 15% -10%,rgba(0,240,255,.07),transparent 60%),radial-gradient(900px 600px at 90% 110%,rgba(255,0,127,.06),transparent 60%),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);background-size:100% 100%,100% 100%,48px 48px,48px 48px;z-index:-2}.scanlines{display:var(--scanline-display, block);position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(#12101000 50%,#00000024 50%);background-size:100% 4px;z-index:100;pointer-events:none}.glitch-overlay{display:none}#app{position:relative;width:100vw;height:100vh}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;z-index:1}.screen.active{opacity:1;visibility:visible;z-index:2}.glitch-text{position:relative;font-family:var(--font-title);font-weight:900;letter-spacing:2px;color:var(--neon-cyan);background:linear-gradient(120deg,var(--neon-cyan) 20%,var(--neon-pink) 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 14px rgba(0,240,255,.25))}.subtitle{font-family:var(--font-ui);font-weight:600;font-size:.72rem;letter-spacing:4px;color:var(--text-muted);text-transform:uppercase}.section-title{font-family:var(--font-ui);font-weight:700;font-size:.72rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:.6rem}.accent-cyan{color:var(--neon-cyan)}.accent-pink{color:var(--neon-pink)}.key-badge{display:inline-block;font-family:var(--font-hud);font-size:.68rem;color:var(--text-primary);background:var(--surface-2);border:1px solid var(--line-soft);border-bottom-width:2px;border-radius:5px;padding:1px 7px;vertical-align:middle}.cyber-btn{font-family:var(--font-ui);font-weight:700;font-size:.82rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-primary);background:var(--surface-1);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:.55rem 1.1rem;cursor:pointer;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .1s ease}.cyber-btn:hover{background:var(--surface-2);border-color:#fff3}.cyber-btn:active{transform:scale(.97)}.cyber-btn:disabled{opacity:.45;cursor:default}.cyber-btn.glow-cyan{color:var(--neon-cyan);border-color:var(--neon-cyan);background:#00f0ff14}.cyber-btn.glow-cyan:hover,.cyber-btn.glow-cyan:active{background:#00f0ff29;box-shadow:var(--glow-cyan)}.cyber-btn.glow-pink,.cyber-btn.glow-magenta{color:var(--neon-pink);border-color:var(--neon-pink);background:#ff007f14}.cyber-btn.glow-pink:hover,.cyber-btn.glow-pink:active,.cyber-btn.glow-magenta:hover,.cyber-btn.glow-magenta:active{background:#ff007f29;box-shadow:var(--glow-pink)}.cyber-btn.glow-muted{color:var(--text-muted);border-color:var(--line-soft);background:var(--surface-1);box-shadow:none}.cyber-btn.danger-btn{color:#f44;border-color:#f44;background:#ff444414}.toggle-buttons{display:flex;flex-wrap:wrap;gap:6px}.toggle-btn{font-family:var(--font-ui);font-weight:700;font-size:.78rem;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);background:var(--surface-1);border:1px solid transparent;border-radius:var(--radius-sm);padding:.42rem .8rem;cursor:pointer;transition:color .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease}.toggle-btn:hover{color:var(--text-primary);background:var(--surface-2)}.toggle-btn.active{color:var(--neon-cyan);background:#00f0ff1f;border-color:var(--neon-cyan);box-shadow:0 0 12px #00f0ff2e,inset 0 0 8px #00f0ff0f}input[type=text]{font-family:var(--font-ui);font-weight:600;font-size:.9rem;color:var(--text-primary);background:#00000059;border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:.6rem .8rem;outline:none;transition:border-color .15s ease,box-shadow .15s ease}input[type=text]::placeholder{color:var(--text-muted);font-weight:500}input[type=text]:focus{border-color:var(--neon-cyan);box-shadow:0 0 0 2px #00f0ff1f}input[type=range]{width:100%;height:4px;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:var(--surface-2);border-radius:2px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--neon-cyan);box-shadow:0 0 8px #00f0ff80;border:none}input[type=range].range-pink::-webkit-slider-thumb{background:var(--neon-pink);box-shadow:0 0 8px #ff007f80}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--neon-cyan);border:none}input[type=range].range-pink::-moz-range-thumb{background:var(--neon-pink)}select.cyber-select{width:100%;background:#00000059;border:1px solid var(--line-soft);padding:.6rem;color:var(--text-primary);font-family:var(--font-ui);font-weight:600;font-size:.88rem;border-radius:var(--radius-sm);outline:none;transition:border-color .15s,box-shadow .15s;cursor:pointer}select.cyber-select:focus{border-color:var(--neon-cyan);box-shadow:0 0 0 2px #00f0ff1f}select.cyber-select option{background:#0f041e;color:#fff;padding:6px}.nav-focus,button:focus-visible,input:focus-visible,select:focus-visible,.track-item:focus-visible{outline:2px solid var(--neon-cyan)!important;outline-offset:2px;box-shadow:0 0 14px #00f0ff59;z-index:1}.track-item.nav-focus,.track-item:focus-visible{transform:translate(6px);background:var(--surface-2)}#menu-screen{padding:.9rem 1.4rem .6rem;gap:.9rem}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-shrink:0}.brand{display:flex;align-items:baseline;gap:12px}.brand h1{font-size:1.7rem;line-height:1}.header-actions{display:flex;align-items:center;gap:12px}.header-mp-btn{font-size:.78rem;padding:.45rem 1rem}.auth-widget{display:flex;align-items:center;gap:8px;font-family:var(--font-ui);font-weight:600;font-size:.8rem;letter-spacing:1px}.auth-username{color:var(--neon-cyan);font-size:.8rem}.auth-guest-tag{color:var(--text-muted);font-size:.72rem}.auth-login-btn{padding:5px 14px;font-size:.75rem}.auth-login-btn-small,.auth-logout-btn{padding:4px 10px;font-size:.7rem}.menu-container{display:flex;gap:1rem;flex:1;min-height:0}.control-panel{width:380px;flex-shrink:0;display:flex;flex-direction:column;gap:.8rem;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding-right:2px}.setup-card{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:.9rem 1rem;flex-shrink:0;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.card-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.card-title-row .section-title{margin-bottom:.4rem}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.mode-grid .toggle-btn{text-align:center;padding:.55rem .2rem}.source-toggle .toggle-btn{font-size:.68rem;padding:.28rem .6rem}.cyber-input-group{display:flex;flex-direction:column;gap:8px;margin-top:.2rem}.cyber-input-wrapper{position:relative;width:100%;display:flex}.cyber-input-wrapper input{width:100%;padding-right:34px}.input-clear-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);font-size:.8rem;padding:6px 8px;cursor:pointer}.input-clear-btn:hover{color:var(--neon-pink);background:none}.cyber-input-buttons{display:flex;gap:8px}.cyber-input-buttons .cyber-btn{flex:1;padding:.5rem .6rem;font-size:.78rem}.discovery-filters{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}.discovery-filters:empty{display:none}.setup-card-grow{flex-grow:0}.config-row{display:flex;flex-direction:column;gap:.8rem}.config-group{display:flex;flex-direction:column;gap:6px}.config-group label{font-family:var(--font-ui);font-weight:700;font-size:.68rem;letter-spacing:2px;color:var(--text-muted);text-transform:uppercase}.static-badge{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:1px;color:var(--neon-pink);border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:4px 10px}.track-panel{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:.7rem .9rem .9rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.playlist-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line-soft);margin-bottom:.6rem;flex-shrink:0}.tab-btn{flex:1;font-family:var(--font-ui);font-weight:700;font-size:.8rem;letter-spacing:2px;color:var(--text-muted);background:none;border:none;border-bottom:2px solid transparent;padding:.55rem .2rem;cursor:pointer;transition:color .12s ease,border-color .12s ease,background .12s ease;border-radius:var(--radius-sm) var(--radius-sm) 0 0}.tab-btn:hover{color:var(--text-primary);background:var(--surface-1)}.tab-btn.active{color:var(--neon-cyan);border-bottom-color:var(--neon-cyan)}.playlist-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:.5rem;flex-shrink:0}.playlist-controls .section-title{margin-bottom:0}.sort-btn{padding:4px 12px;font-size:.68rem;min-width:110px;color:var(--neon-cyan);border-color:var(--panel-border);background:none}.track-list{flex:1;min-height:0;display:flex;flex-direction:column;gap:5px;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding-right:4px;scroll-behavior:smooth}.track-item{display:flex;align-items:center;gap:12px;padding:.55rem .7rem;background:var(--surface-1);border:1px solid transparent;border-left:3px solid transparent;border-radius:var(--radius-md);cursor:pointer;flex-shrink:0;transition:background .12s ease,border-color .12s ease,transform .12s ease}.track-item:hover,.track-item.active{background:var(--surface-2);border-left-color:var(--neon-cyan);transform:translate(4px)}.track-thumb{width:52px;height:52px;flex-shrink:0;border-radius:var(--radius-sm);background-color:#0006;background-size:cover;background-position:center}.track-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;overflow:hidden}.track-title{font-family:var(--font-ui);font-weight:700;font-size:.95rem;color:var(--text-primary);white-space:nowrap;display:inline-block;max-width:100%;overflow:hidden}.track-title.marquee-scroll{overflow:visible}.track-item:hover .track-title.marquee-scroll,.track-item.active .track-title.marquee-scroll,.track-item.nav-focus .track-title.marquee-scroll{animation:marquee-scroll-anim 8s linear infinite}@keyframes marquee-scroll-anim{0%,15%{transform:translate(0)}85%,to{transform:translate(var(--scroll-dist, -100px))}}.track-artist{font-size:.78rem;font-weight:600;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-duration{font-family:var(--font-hud);font-size:.75rem;color:var(--neon-cyan);min-width:32px;text-align:right}.star-btn{background:none;border:none;font-size:1.15rem;line-height:1;color:#ffffff2e;cursor:pointer;padding:4px;transition:color .12s ease,transform .12s ease,text-shadow .12s ease}.star-btn:hover{color:#ff09;transform:scale(1.15)}.star-btn.active{color:var(--neon-yellow);text-shadow:0 0 8px rgba(255,255,0,.5)}.track-list::-webkit-scrollbar,.help-settings-panel::-webkit-scrollbar,.control-panel::-webkit-scrollbar{width:6px}.track-list::-webkit-scrollbar-track,.help-settings-panel::-webkit-scrollbar-track,.control-panel::-webkit-scrollbar-track{background:transparent}.track-list::-webkit-scrollbar-thumb,.help-settings-panel::-webkit-scrollbar-thumb,.control-panel::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:3px}.track-list::-webkit-scrollbar-thumb:hover,.help-settings-panel::-webkit-scrollbar-thumb:hover,.control-panel::-webkit-scrollbar-thumb:hover{background:#ffffff2e}.input-legend{display:flex;align-items:center;justify-content:center;gap:1.6rem;flex-wrap:wrap;flex-shrink:0;padding:.35rem 0;font-family:var(--font-ui);font-weight:600;font-size:.68rem;letter-spacing:2px;color:var(--text-muted)}.legend-item{display:inline-flex;align-items:center;gap:6px}.legend-key{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;font-family:var(--font-hud);font-size:.66rem;color:var(--text-primary);background:var(--surface-1);border:1px solid var(--line-soft);border-radius:5px}.legend-key-a{color:var(--neon-green);border-color:#39ff1459}.legend-key-b{color:var(--neon-pink);border-color:#ff007f59}.help-settings-panel{flex:1;min-height:0;flex-direction:column;gap:4px;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding-right:4px}.help-settings-panel .section-title{margin:.7rem 0 .4rem}.help-settings-panel .section-title:first-child{margin-top:0}.setting-group{background:#00000040;border:1px solid var(--line-soft);border-radius:var(--radius-md);padding:.8rem .9rem;display:flex;flex-direction:column;gap:10px;flex-shrink:0}.slider-container{display:flex;flex-direction:column;gap:6px}.slider-label{display:flex;justify-content:space-between;font-size:.8rem;font-weight:700;letter-spacing:1px}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:10px}.setting-name{font-size:.8rem;font-weight:700;letter-spacing:1px;color:var(--neon-cyan)}.setting-hint{font-size:.74rem;font-weight:500;color:var(--text-muted);line-height:1.4}.btn-row{display:flex;gap:10px}.btn-grow{flex:1;padding:6px 10px;font-size:.74rem}.cache-status{font-size:.8rem;color:var(--text-muted)}.cache-btn-ddr{border-color:#c040ff80;color:#c040ff}.cache-btn-piu{border-color:#ffc80080;color:#ffd000}.cache-btn-bs{border-color:#ff007f80;color:var(--neon-pink)}.cache-counts{display:flex;justify-content:space-between;font-size:.72rem}.cache-count-ddr{color:#c040ff}.cache-count-piu{color:#ffd000}.cache-count-bs{color:var(--neon-pink)}.bindings-list{display:flex;flex-direction:column;gap:8px}.diag-panel{font-family:var(--font-hud);font-size:.74rem;color:var(--neon-cyan);line-height:1.45}.help-section{font-size:.82rem;font-weight:500;line-height:1.45}.help-list{list-style:none;display:flex;flex-direction:column;gap:12px}#loading-screen{align-items:center;justify-content:center}.loader-content{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:2.4rem 3rem;min-width:min(440px,90vw);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.cyber-spinner{position:relative;width:84px;height:84px}.spinner-ring{position:absolute;border-radius:50%;border:3px solid transparent}.ring-1{top:0;right:0;bottom:0;left:0;border-top-color:var(--neon-cyan);animation:spin 1.5s linear infinite}.ring-2{top:10px;right:10px;bottom:10px;left:10px;border-top-color:var(--neon-pink);animation:spin-reverse 2s linear infinite}.ring-3{top:20px;right:20px;bottom:20px;left:20px;border-top-color:var(--neon-green);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes spin-reverse{to{transform:rotate(-360deg)}}#loading-screen h2{font-family:var(--font-title);font-size:1.1rem;font-weight:700;letter-spacing:3px;color:var(--text-primary)}.status-code{font-family:var(--font-hud);font-size:.8rem;color:var(--text-muted);letter-spacing:1px;animation:pulse 1s infinite alternate}@keyframes pulse{0%{opacity:.55}to{opacity:1}}.progress-bar-container{width:100%;height:6px;background:var(--surface-1);border-radius:3px;overflow:hidden}.progress-bar-fill{height:100%;width:0%;border-radius:3px;background:linear-gradient(90deg,var(--neon-cyan),var(--neon-pink));box-shadow:0 0 10px #00f0ff66;transition:width .3s ease}.percentage-label{font-family:var(--font-hud);font-size:.85rem;color:var(--neon-cyan);letter-spacing:2px}#game-screen{background:#000}#gameCanvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1}#bg-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}.game-hud{position:absolute;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:flex-start;padding:1rem 1.4rem;z-index:10;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent)}.hud-left,.hud-right{display:flex;flex-direction:column;gap:2px;min-width:120px}.hud-left{align-items:flex-start;max-width:30vw}.hud-right{align-items:flex-end;text-align:right}.hud-label{font-family:var(--font-ui);font-weight:700;font-size:.62rem;letter-spacing:3px;color:var(--text-muted)}.hud-value{font-family:var(--font-hud);font-size:1.05rem;color:var(--text-primary);letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.hud-sub-value{font-family:var(--font-hud);font-size:.8rem;color:var(--neon-cyan)}.combo-container{display:flex;flex-direction:column;align-items:center}.combo-num{font-family:var(--font-title);font-size:2.6rem;font-weight:900;line-height:1;color:var(--text-primary);text-shadow:0 0 18px rgba(0,240,255,.45);animation:scale-up .15s ease-out}.combo-label{font-family:var(--font-ui);font-weight:700;font-size:.66rem;letter-spacing:4px;color:var(--text-muted)}@keyframes scale-up{0%{transform:scale(.8)}50%{transform:scale(1.1)}to{transform:scale(1)}}.touch-zones{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:600px;height:100%;display:flex;z-index:5;pointer-events:auto}.touch-zone{flex:1;position:relative;border-left:1px dashed rgba(255,255,255,.05);border-right:1px dashed rgba(255,255,255,.05);display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px}.zone-glow{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to top,rgba(0,240,255,.25),transparent);opacity:0;transition:opacity .05s ease;pointer-events:none}.touch-zone.active .zone-glow{opacity:1}#touch-zones-container.scroll-up .touch-zone{align-items:flex-start;padding-bottom:0;padding-top:10px}.key-hint{color:#fff3;font-size:1.2rem;font-weight:700;pointer-events:none;font-family:var(--font-title)}#touch-zones-container.dancemat-mode{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:14px;pointer-events:none}.dance-mat{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:5px;padding:10px;width:min(68vmin,300px);height:min(68vmin,300px);background:linear-gradient(160deg,#1208208c,#0804128c);border:3px solid rgba(180,120,255,.35);border-radius:14px;box-shadow:0 0 32px #8200ff2e,inset 0 1px #ffffff0a;pointer-events:auto;opacity:.72;transition:opacity .15s ease}.dance-mat:has(.mat-panel.active){opacity:.9}@media (orientation: landscape){#touch-zones-container.dancemat-mode{padding-bottom:8px}}.mat-panel{position:relative;border-radius:9px;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:none;background:#ffffff08;border:2px solid rgba(255,255,255,.1);box-shadow:inset 0 2px 4px #0000004d,inset 0 -1px #ffffff0a;transition:background .06s ease,box-shadow .06s ease,border-color .06s ease;overflow:hidden}.mat-panel:before{content:"";position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(to bottom,rgba(255,255,255,.07),transparent);border-radius:7px 7px 0 0;pointer-events:none}.mat-panel.empty{background:#0000001a;border:1px solid rgba(255,255,255,.03);pointer-events:none;border-radius:5px}.mat-panel.empty:before{display:none}.mat-arrow{font-size:clamp(1.5rem,6vmin,2.6rem);font-weight:900;pointer-events:none;line-height:1;transition:filter .06s ease,color .06s ease}.mat-panel[data-dir=left]{border-color:#b43cff80}.mat-panel[data-dir=down]{border-color:#ff283c80}.mat-panel[data-dir=up]{border-color:#1e8cff80}.mat-panel[data-dir=right]{border-color:#ffc80080}.mat-panel[data-dir=left] .mat-arrow{color:#be50ffbf}.mat-panel[data-dir=down] .mat-arrow{color:#ff3c3cbf}.mat-panel[data-dir=up] .mat-arrow{color:#3ca0ffbf}.mat-panel[data-dir=right] .mat-arrow{color:#ffd21ebf}.mat-panel[data-dir=ul],.mat-panel[data-dir=ur],.mat-panel[data-dir=dl],.mat-panel[data-dir=dr]{border-color:#1e8cff80}.mat-panel[data-dir=center]{border-color:#ffc80080}.mat-panel[data-dir=ul] .mat-arrow,.mat-panel[data-dir=ur] .mat-arrow,.mat-panel[data-dir=dl] .mat-arrow,.mat-panel[data-dir=dr] .mat-arrow{color:#3ca0ffbf}.mat-panel[data-dir=center].mat-arrow{color:#ffd21ebf}.mat-panel[data-dir=left].active{background:#a028ff47;border-color:#b030ff;box-shadow:0 0 20px #a028ff8c,inset 0 0 10px #a028ff33}.mat-panel[data-dir=down].active{background:#ff283247;border-color:#ff2828;box-shadow:0 0 20px #ff28328c,inset 0 0 10px #ff283233}.mat-panel[data-dir=up].active{background:#1478ff47;border-color:#1e90ff;box-shadow:0 0 20px #1478ff8c,inset 0 0 10px #1478ff33}.mat-panel[data-dir=right].active{background:#ffbe0047;border-color:#ffc800;box-shadow:0 0 20px #ffbe008c,inset 0 0 10px #ffbe0033}.mat-panel[data-dir=ul].active,.mat-panel[data-dir=ur].active,.mat-panel[data-dir=dl].active,.mat-panel[data-dir=dr].active{background:#1478ff47;border-color:#1e90ff;box-shadow:0 0 20px #1478ff8c,inset 0 0 10px #1478ff33}.mat-panel[data-dir=center].active{background:#ffbe0047;border-color:#ffc800;box-shadow:0 0 20px #ffbe008c,inset 0 0 10px #ffbe0033}.mat-panel[data-dir=left].active .mat-arrow{color:#c040ff;filter:drop-shadow(0 0 8px #c040ff)}.mat-panel[data-dir=down].active .mat-arrow{color:#ff3030;filter:drop-shadow(0 0 8px #ff3030)}.mat-panel[data-dir=up].active .mat-arrow{color:#3aabff;filter:drop-shadow(0 0 8px #3aabff)}.mat-panel[data-dir=right].active .mat-arrow{color:#ffd000;filter:drop-shadow(0 0 8px #ffd000)}.mat-panel[data-dir=ul].active .mat-arrow,.mat-panel[data-dir=ur].active .mat-arrow,.mat-panel[data-dir=dl].active .mat-arrow,.mat-panel[data-dir=dr].active .mat-arrow{color:#3aabff;filter:drop-shadow(0 0 8px #3aabff)}.mat-panel[data-dir=center].active .mat-arrow{color:#ffd000;filter:drop-shadow(0 0 8px #ffd000)}.pause-btn{position:absolute;bottom:14px;right:14px;z-index:20;width:42px;height:42px;border-radius:50%;background:#00000073;border:1px solid var(--line-soft);color:var(--text-muted);font-family:var(--font-hud);font-size:.9rem;cursor:pointer;transition:color .12s ease,border-color .12s ease}.pause-btn:hover,.pause-btn:active{color:var(--neon-cyan);border-color:var(--neon-cyan)}.pause-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#000000b8;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s}.pause-overlay.active{opacity:1;visibility:visible}.pause-overlay h2{font-family:var(--font-title);font-size:1.6rem;letter-spacing:6px;color:var(--text-primary);margin-bottom:.8rem}.pause-overlay .cyber-btn{width:min(280px,70vw);padding:.8rem;font-size:.9rem}#result-screen{align-items:center;justify-content:center;padding:1.5rem;gap:1.2rem}.result-header{text-align:center;display:flex;flex-direction:column;gap:6px;flex-shrink:0}.result-header h1{font-size:2.2rem}.result-container{display:flex;gap:1.2rem;align-items:stretch;width:min(760px,100%)}.grade-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:1.6rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.grade-circle{width:130px;height:130px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid var(--neon-cyan);box-shadow:var(--glow-cyan),inset 0 0 24px #00f0ff1f}.grade-circle span{font-family:var(--font-title);font-size:4.2rem;font-weight:900;line-height:1}.result-score{font-family:var(--font-hud);font-size:1.7rem;letter-spacing:3px;color:var(--text-primary)}.result-acc{font-family:var(--font-hud);font-size:1rem;color:var(--text-muted)}.stats-panel{flex:1.2;display:flex;flex-direction:column;justify-content:center;gap:.55rem;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:1.4rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.stats-row{display:flex;justify-content:space-between;align-items:center;gap:10px}.stat-label{font-family:var(--font-ui);font-weight:700;font-size:.78rem;letter-spacing:2px;color:var(--text-muted);border-left:3px solid;padding-left:10px}.stat-value{font-family:var(--font-hud);font-size:1.2rem;letter-spacing:1px}.text-cyan{color:var(--neon-cyan);text-shadow:0 0 5px rgba(0,240,255,.5)}.text-green{color:var(--neon-green);text-shadow:0 0 5px rgba(57,255,20,.5)}.text-red{color:var(--neon-pink);text-shadow:0 0 5px rgba(255,0,127,.5)}.text-pink{color:#ff0;text-shadow:0 0 5px rgba(255,255,0,.5)}.border-cyan{border-color:var(--neon-cyan)}.border-green{border-color:var(--neon-green)}.border-red{border-color:var(--neon-pink)}.border-pink{border-color:#ff0}.result-actions{display:flex;gap:10px;margin-top:.8rem;flex-wrap:wrap}.result-actions .cyber-btn{flex:1;min-width:120px;padding:.7rem .6rem;font-size:.8rem;white-space:nowrap}.lb-panel{width:min(760px,100%);background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:.9rem 1.1rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);flex-shrink:0;max-height:34vh;display:flex;flex-direction:column}.lb-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;flex-shrink:0}.lb-tabs{display:flex;gap:6px}.lb-tab{font-family:var(--font-ui);font-weight:700;font-size:.72rem;letter-spacing:1.5px;color:var(--text-muted);background:var(--surface-1);border:1px solid transparent;border-radius:var(--radius-sm);padding:.3rem .9rem;cursor:pointer;transition:color .12s ease,background .12s ease,border-color .12s ease}.lb-tab:hover{color:var(--text-primary)}.lb-tab.active{color:var(--neon-cyan);border-color:var(--neon-cyan);background:#00f0ff1a}.lb-rank-badge{font-family:var(--font-ui);font-weight:700;font-size:.74rem;letter-spacing:1px;color:var(--neon-yellow)}.lb-rows{overflow-y:auto;min-height:0}.lb-row{display:grid;grid-template-columns:34px 1fr 90px 64px 34px;gap:8px;align-items:center;padding:5px 8px;font-family:var(--font-hud);font-size:.8rem;border-bottom:1px solid rgba(255,255,255,.05);border-radius:var(--radius-sm)}.lb-row:last-child{border-bottom:none}.lb-row-me{background:#00f0ff14;border:1px solid rgba(0,240,255,.25)}.lb-rank{color:var(--text-muted);font-size:.72rem}.lb-name{color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-ui);font-weight:600}.lb-score{color:var(--neon-cyan);text-align:right}.lb-acc{color:var(--text-muted);text-align:right;font-size:.72rem}.lb-grade{text-align:center;font-family:var(--font-title);font-size:.78rem;font-weight:700}.lb-grade-S{color:var(--neon-cyan);text-shadow:var(--glow-cyan)}.lb-grade-A{color:var(--neon-green);text-shadow:var(--glow-green)}.lb-grade-B{color:#7eb8ff}.lb-grade-C{color:var(--neon-yellow)}.lb-grade-F{color:var(--neon-pink)}.lb-loading,.lb-empty{text-align:center;padding:1rem;color:var(--text-muted);font-size:.8rem;letter-spacing:1px}.lb-login-nudge{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:.5rem;padding:.5rem .7rem;background:var(--surface-1);border-radius:var(--radius-sm);font-size:.78rem;color:var(--text-muted);flex-shrink:0}.lb-nudge-btn{padding:4px 14px;font-size:.7rem;flex-shrink:0}.auth-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:500;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s}.auth-modal-overlay.active{opacity:1;visibility:visible}.auth-modal{position:relative;width:min(400px,92vw);background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:1.6rem;display:flex;flex-direction:column;gap:14px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 60px #00000080}.auth-modal-close{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--text-muted);font-size:1rem;cursor:pointer;padding:4px;transition:color .12s ease}.auth-modal-close:hover{color:var(--neon-pink)}.auth-modal-title{font-size:1.3rem;text-align:center;width:100%;display:block}.auth-tabs{display:flex;gap:6px}.auth-tab-btn{flex:1;font-family:var(--font-ui);font-weight:700;font-size:.76rem;letter-spacing:1.5px;color:var(--text-muted);background:var(--surface-1);border:1px solid transparent;border-radius:var(--radius-sm);padding:.5rem .3rem;cursor:pointer;transition:color .12s ease,background .12s ease,border-color .12s ease}.auth-tab-btn:hover{color:var(--text-primary);background:var(--surface-2)}.auth-tab-btn.active{color:var(--neon-cyan);border-color:var(--neon-cyan);background:#00f0ff1a}.auth-modal-body{display:flex;flex-direction:column;gap:12px}.auth-field{display:flex;flex-direction:column;gap:5px}.auth-label{font-family:var(--font-ui);font-weight:700;font-size:.68rem;letter-spacing:2px;color:var(--text-muted);text-transform:uppercase}.auth-input{font-family:var(--font-ui);font-weight:600;font-size:.9rem;color:var(--text-primary);background:#00000059;border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:.6rem .8rem;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.auth-input:focus{border-color:var(--neon-cyan);box-shadow:0 0 0 2px #00f0ff1f}.auth-muted{font-size:.76rem;color:var(--text-muted);line-height:1.4}.auth-forgot-link{font-size:.76rem;color:var(--text-muted);background:none;border:none;cursor:pointer;text-decoration:underline;align-self:flex-start;padding:0}.auth-forgot-link:hover{color:var(--neon-cyan)}.auth-modal-error{font-size:.78rem;color:#f56;background:#ff3c5014;border:1px solid rgba(255,60,80,.3);border-radius:var(--radius-sm);padding:.5rem .7rem;line-height:1.35}.auth-modal-submit{padding:.7rem;font-size:.85rem}.auth-2fa-info{font-size:.76rem;color:var(--text-muted);line-height:1.4}.auth-section-label{font-family:var(--font-ui);font-weight:700;font-size:.68rem;letter-spacing:2px;color:var(--neon-cyan);text-transform:uppercase}.auth-email-code-btn{padding:6px 12px;font-size:.72rem;align-self:flex-start}.auth-success-msg{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:.8rem 0;font-size:.85rem;color:var(--text-primary)}.auth-success-icon{font-size:2rem;color:var(--neon-green)}#lobby-screen{padding:1.2rem 1.6rem;align-items:center;overflow-y:auto}.lobby-header{width:min(700px,100%);display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem;flex-shrink:0}.lobby-back-btn{font-size:.74rem;padding:.45rem .9rem;flex-shrink:0}.lobby-header h2{font-size:1.6rem}.lobby-entry{display:flex;align-items:stretch;gap:1.2rem;width:min(700px,100%);margin:auto 0}.lobby-entry-panel{flex:1;display:flex;flex-direction:column;justify-content:center;gap:12px;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:1.6rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.lobby-entry-btn{padding:.8rem;font-size:.88rem}.lobby-entry-divider{display:flex;align-items:center;font-family:var(--font-ui);font-weight:700;font-size:.8rem;letter-spacing:2px;color:var(--text-muted)}.lobby-join-row{display:flex;gap:8px}.lobby-code-input{flex:1;min-width:0;text-transform:uppercase;text-align:center;font-family:var(--font-hud);font-size:1.1rem;letter-spacing:6px}.lobby-room{margin:auto 0;width:min(560px,100%);display:flex;flex-direction:column;align-items:center;gap:1rem;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:1.6rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.lobby-code-display{font-family:var(--font-ui);font-weight:700;font-size:.8rem;letter-spacing:2px;color:var(--text-muted)}.lobby-code-value{font-family:var(--font-hud);font-size:1.5rem;letter-spacing:8px;color:var(--neon-cyan);text-shadow:var(--glow-cyan);margin-left:8px}.lobby-players{display:flex;align-items:center;gap:1rem;width:100%}.lobby-player-slot{flex:1;min-height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:var(--surface-1);border:1px solid var(--line-soft);border-radius:var(--radius-md);padding:.7rem}.lobby-vs{font-family:var(--font-title);font-size:1.1rem;font-weight:900;color:var(--neon-pink);flex-shrink:0}.lobby-player-empty{color:var(--text-muted);font-size:.78rem;letter-spacing:1px}.lobby-player-name{font-family:var(--font-ui);font-weight:700;font-size:.95rem;letter-spacing:1px;color:var(--text-primary)}.lobby-guest-tag{font-size:.68rem;color:var(--text-muted)}.lobby-player-ready{font-size:.7rem;font-weight:700;letter-spacing:1.5px;color:var(--text-muted)}.lobby-player-ready.ready{color:var(--neon-green);text-shadow:var(--glow-green)}.lobby-song-section{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.lobby-song-display{width:100%;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:40px;justify-content:center}.lobby-song-title{font-family:var(--font-ui);font-weight:700;font-size:1rem;color:var(--neon-cyan)}.lobby-song-meta{font-size:.76rem;color:var(--text-muted)}.lobby-song-empty{font-size:.8rem;color:var(--text-muted);letter-spacing:1px}.lobby-difficulty-section{display:flex;flex-direction:column;gap:6px;align-items:center;width:100%}.lobby-diff-title{margin-bottom:0;font-size:.66rem}.lobby-diff-toggle{justify-content:center;width:100%}.lobby-ready-btn{width:min(300px,100%);padding:.8rem;font-size:.95rem;letter-spacing:3px}.lobby-leave-btn{font-size:.72rem;padding:.4rem 1rem;opacity:.7}.lobby-leave-btn:hover{opacity:1}.lobby-countdown-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:400;display:flex;align-items:center;justify-content:center;background:#000c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.lobby-countdown-num{font-family:var(--font-title);font-size:7rem;font-weight:900;color:var(--neon-cyan);text-shadow:var(--glow-cyan);animation:countdown-pulse .9s ease-out}@keyframes countdown-pulse{0%{transform:scale(1.6);opacity:0}30%{transform:scale(1);opacity:1}to{transform:scale(.94);opacity:.9}}.mp-opponent-hud{position:absolute;top:74px;right:14px;z-index:10;display:flex;flex-direction:column;align-items:flex-end;gap:2px;background:#00000080;border:1px solid var(--line-soft);border-radius:var(--radius-md);padding:8px 12px;pointer-events:none}.mp-opp-name{font-family:var(--font-ui);font-weight:700;font-size:.66rem;letter-spacing:2px;color:var(--neon-pink)}.mp-opp-score{font-family:var(--font-hud);font-size:1rem;color:var(--text-primary);letter-spacing:1px}.mp-opp-sub{display:flex;gap:10px;font-family:var(--font-hud);font-size:.72rem;color:var(--text-muted)}.mp-result-banner{font-family:var(--font-title);font-size:1.1rem;font-weight:900;letter-spacing:4px;text-align:center;padding:.6rem;border-radius:var(--radius-md);margin-top:.6rem}.mp-win{color:var(--neon-cyan);background:#00f0ff1a;border:1px solid var(--neon-cyan);text-shadow:var(--glow-cyan)}.mp-loss{color:var(--neon-pink);background:#ff007f1a;border:1px solid var(--neon-pink)}.mp-tie{color:var(--neon-yellow);background:#ffff0014;border:1px solid var(--neon-yellow)}.mp-opponent-result{display:flex;align-items:center;gap:12px;padding:.55rem .8rem;background:var(--surface-1);border:1px solid var(--line-soft);border-radius:var(--radius-md);margin-top:.5rem}.mp-res-name{font-family:var(--font-ui);font-weight:700;font-size:.78rem;letter-spacing:1px;flex:1}.mp-res-score{font-family:var(--font-hud);font-size:.9rem;color:var(--neon-cyan);letter-spacing:2px}.mp-res-acc{font-family:var(--font-hud);font-size:.74rem;color:var(--text-muted)}.mp-res-grade{font-family:var(--font-title);font-size:1.05rem;font-weight:900}.mp-grade-S{color:var(--neon-cyan);text-shadow:var(--glow-cyan)}.mp-grade-A{color:var(--neon-green);text-shadow:var(--glow-green)}.mp-grade-B{color:#7eb8ff}.mp-grade-C{color:var(--neon-yellow)}.mp-grade-F{color:var(--neon-pink)}.mp-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:600;background:#000000d9;border:1px solid var(--neon-cyan);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-ui);font-weight:600;font-size:.85rem;letter-spacing:1px;padding:.7rem 1.3rem;box-shadow:var(--glow-cyan)}.mp-toast.mp-toast-err{border-color:var(--neon-pink);box-shadow:var(--glow-pink)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999}.modal-overlay.hidden{display:none!important}.modal-content{background:var(--panel-bg);border:1px solid var(--neon-cyan);box-shadow:var(--glow-cyan);padding:30px;border-radius:var(--radius-md);width:90%;max-width:400px;pointer-events:auto}@media (max-width: 1000px){.control-panel{width:320px}}@media (orientation: portrait){#menu-screen{padding:.8rem 1rem .5rem;overflow-y:auto;touch-action:pan-y}.topbar{flex-direction:column;align-items:center;gap:.6rem}.menu-container{flex-direction:column;height:auto;flex:none;min-height:0}.control-panel{width:100%;overflow:visible;flex:none}.track-panel{width:100%;flex:none;min-height:320px}.track-list,.help-settings-panel{max-height:420px}.playlist-tabs{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;scrollbar-width:none}.playlist-tabs::-webkit-scrollbar{display:none}.playlist-tabs .tab-btn{flex:0 0 auto;padding:.5rem .4rem;font-size:.72rem;letter-spacing:1px}.input-legend .legend-kbd{display:none}.game-hud{padding:.8rem 1rem}.hud-left{max-width:120px}.hud-right{min-width:100px}.combo-num{font-size:2rem}#result-screen{padding:1.2rem;overflow-y:auto;justify-content:flex-start}.result-container{flex-direction:column;gap:1rem;width:100%}.grade-panel,.stats-panel{width:100%;flex:none}.result-actions{flex-direction:column;width:100%}.lobby-entry{flex-direction:column;margin-top:2vh}.lobby-entry-divider{justify-content:center}}@media (max-height: 480px){#menu-screen{padding:.5rem .9rem .3rem;gap:.5rem}.brand h1{font-size:1.25rem}.subtitle{font-size:.6rem;letter-spacing:2px}.setup-card{padding:.6rem .7rem}.section-title{margin-bottom:.4rem}.toggle-btn{padding:.3rem .6rem;font-size:.72rem}input[type=text]{padding:.45rem .7rem;font-size:.8rem}.cyber-btn{padding:.45rem .8rem;font-size:.74rem}.playlist-tabs{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;scrollbar-width:none}.playlist-tabs::-webkit-scrollbar{display:none}.playlist-tabs .tab-btn{flex:0 0 auto;padding:.35rem .4rem;font-size:.7rem}.track-item{padding:.35rem .5rem}.track-thumb{width:38px;height:38px}.input-legend{display:none}#result-screen{padding:.8rem;gap:.6rem}.result-header h1{font-size:1.4rem}.grade-panel{padding:.8rem}.grade-circle{width:84px;height:84px}.grade-circle span{font-size:2.6rem}.result-score{font-size:1.3rem}.stats-panel{padding:.8rem;gap:.4rem}.stat-value{font-size:.95rem}.result-actions{margin-top:.4rem}.lb-panel{max-height:30vh}}.virtual-keyboard-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;display:flex;align-items:flex-end;justify-content:center;z-index:10000;opacity:0;pointer-events:none;transition:opacity .2s ease}.virtual-keyboard-overlay.active{opacity:1;pointer-events:auto}.keyboard-container{width:100%;max-width:640px;background:#080214f5;border-top:2.5px solid var(--neon-cyan);border-left:1px solid rgba(0,240,255,.2);border-right:1px solid rgba(0,240,255,.2);border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg);padding:1.2rem;box-shadow:0 -10px 30px #00f0ff33;display:flex;flex-direction:column;gap:.9rem;transform:translateY(100%);transition:transform .25s cubic-bezier(.1,.9,.2,1);margin-bottom:0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.virtual-keyboard-overlay.active .keyboard-container{transform:translateY(0)}.keyboard-preview-row{display:flex;align-items:center;gap:10px;background:var(--surface-1);border:1px solid var(--line-soft);border-radius:var(--radius-md);padding:.65rem .95rem}.keyboard-target-label{font-family:var(--font-title);font-weight:700;font-size:.65rem;color:var(--neon-cyan);letter-spacing:1.5px;text-shadow:var(--glow-cyan);white-space:nowrap}.keyboard-preview-input{flex:1;background:none;border:none;color:var(--text-primary);font-family:var(--font-ui);font-size:1rem;outline:none}.keyboard-grid{display:flex;flex-direction:column;gap:.4rem}.keyboard-row{display:flex;justify-content:center;gap:.35rem}.keyboard-key{font-family:var(--font-ui);font-weight:600;font-size:.95rem;color:var(--text-primary);background:var(--surface-1);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:.55rem 0;flex:1;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,border-color .15s,transform .1s}.keyboard-key:hover,.keyboard-key.nav-focus{background:var(--surface-2);border-color:var(--neon-cyan);outline:none;box-shadow:0 0 10px #00f0ff40}.keyboard-key:active{transform:scale(.95)}.keyboard-key-wide{flex:1.5;background:#ffffff0d}.keyboard-key-extra-wide{flex:3}.keyboard-key-accent{border-color:#ff007f66;color:var(--neon-pink)}.keyboard-key-accent:hover,.keyboard-key-accent.nav-focus{border-color:var(--neon-pink);box-shadow:0 0 10px #ff007f40}.keyboard-key-shift-active{background:#00f0ff26!important;border-color:var(--neon-cyan)!important;box-shadow:0 0 10px #00f0ff33}.keyboard-key-caps-active{background:#ff007f26!important;border-color:var(--neon-pink)!important;box-shadow:0 0 10px #ff007f33}