:root{--bg: #0B0B12;--bg2: #171129;--spot: rgba(255, 201, 77, .14);--accent: #FFC94D;--ivory: #F5F0E6;--ivory-down: #E4D9BF;--ebony: #1A1722;--ebony-down: #2E2840;--note-w: #6EE7F0;--note-b: #C08BFF;--text: #EDE9E0;--muted: #8E8AA0;--card: #16131F;--danger: #FF6B6B}[data-theme=neon]{--bg: #06060A;--bg2: #12081C;--spot: rgba(255, 45, 149, .13);--accent: #FF2D95;--note-w: #39FF88;--note-b: #00D1FF;--card: #120D1A}[data-theme=ocean]{--bg: #04121C;--bg2: #073048;--spot: rgba(94, 234, 212, .12);--accent: #5EEAD4;--note-w: #7DD3FC;--note-b: #FCA5A5;--card: #0A1D2A}[data-theme=galaxy]{--bg: #0A0618;--bg2: #221244;--spot: rgba(196, 181, 253, .15);--accent: #C4B5FD;--note-w: #F0ABFC;--note-b: #67E8F9;--card: #150E2A}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;overflow:hidden;overscroll-behavior:none}body{background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 55%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;user-select:none;-webkit-user-select:none;touch-action:manipulation}#app,.screen{position:fixed;top:0;right:0;bottom:0;left:0}.screen{display:none;flex-direction:column}.screen.active{display:flex}.spotlight{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse 55% 70% at 50% -10%,var(--spot),transparent 70%)}#screen-home{align-items:center;justify-content:center;gap:14px}.app-title{font-family:ui-rounded,-apple-system,sans-serif;font-weight:800;font-size:clamp(34px,9vh,56px);line-height:1.02;text-align:center;letter-spacing:-.02em;text-shadow:0 0 40px var(--spot)}.tagline{color:var(--muted);font-size:14px;min-height:18px}.home-buttons{display:flex;gap:12px;margin-top:8px}.btn{font-family:ui-rounded,-apple-system,sans-serif;font-size:17px;font-weight:700;color:var(--text);background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px 22px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}.btn:active{transform:scale(.96)}.btn-primary{background:var(--accent);color:#1a1408;border:none;box-shadow:0 0 24px var(--spot)}.btn-sub{font-size:12px;font-weight:500;opacity:.75}.btn-quiet{background:transparent;border:none;color:var(--muted)}.btn-back{flex-direction:row;padding:8px 14px;font-size:15px;background:transparent;border:none;color:var(--muted)}.bar{display:flex;align-items:center;gap:10px;padding:calc(6px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 6px calc(10px + env(safe-area-inset-left));min-height:46px;z-index:2}.bar h2{font-family:ui-rounded,-apple-system,sans-serif;font-size:18px;font-weight:800}.bar-spacer{flex:1}.song-list{flex:1;display:flex;gap:12px;overflow-x:auto;align-items:center;padding:6px calc(18px + env(safe-area-inset-right)) 18px calc(18px + env(safe-area-inset-left));scroll-snap-type:x proximity}.song-card{scroll-snap-align:start;flex:0 0 150px;height:min(180px,55vh);background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:14px;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between}.song-card:active{transform:scale(.97)}.song-card .num{color:var(--muted);font-size:12px;font-weight:700}.song-card .name{font-family:ui-rounded,-apple-system,sans-serif;font-weight:800;font-size:17px;line-height:1.15}.song-card .sub{color:var(--muted);font-size:12px;margin-top:4px}.song-card .stars{font-size:18px;letter-spacing:2px;color:var(--accent)}.song-card .stars .off{color:#ffffff26}.song-card.locked{opacity:.45}.song-card.locked .name:after{content:" 🔒";font-size:13px}.theme-list{flex:1;display:flex;gap:14px;align-items:center;justify-content:center;padding:0 18px}.theme-card{width:150px;height:min(170px,52vh);border-radius:18px;cursor:pointer;border:2px solid rgba(255,255,255,.08);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:12px;font-family:ui-rounded,-apple-system,sans-serif;font-weight:800;font-size:16px}.theme-card.selected{border-color:var(--accent);box-shadow:0 0 20px var(--spot)}.theme-card .swatch{position:absolute;top:12px;right:12px;display:flex;gap:5px}.theme-card .swatch i{width:14px;height:14px;border-radius:50%}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#000000a6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center}.overlay.hidden{display:none}.panel{background:var(--card);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:20px 24px;min-width:300px;max-width:82vw;display:flex;flex-direction:column;gap:10px;text-align:center;max-height:88vh;overflow-y:auto}.panel h3{font-family:ui-rounded,-apple-system,sans-serif;font-size:20px}.panel p{color:var(--muted);font-size:14px}.result-stars{font-size:44px;letter-spacing:6px;color:var(--accent);min-height:54px}.result-stars .off{color:#ffffff26}.result-stars span{display:inline-block}.result-stars .pop{animation:starpop .5s cubic-bezier(.2,2.2,.4,1) both}@keyframes starpop{0%{transform:scale(0)}to{transform:scale(1)}}#screen-game{background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 60%)}.bar-game{position:relative;z-index:3}.game-info{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}#game-title{font-family:ui-rounded,-apple-system,sans-serif;font-weight:800;font-size:15px;white-space:nowrap}.chip{font-size:11px;font-weight:700;color:var(--accent);border:1px solid var(--accent);border-radius:20px;padding:2px 8px}.game-acc{font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace;font-size:14px;color:var(--muted);padding-right:env(safe-area-inset-right)}#lane-wrap{position:relative;flex:1;min-height:0}#lane{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}#progress{position:absolute;top:0;left:0;right:0;height:3px;background:#ffffff12}#progress-fill{height:100%;width:0%;background:var(--accent);border-radius:2px}#keyboard,#keyboard-free{position:relative;height:34%;min-height:110px;padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:flex;background:#000}#keyboard-free{height:46%}.key-w{flex:1;position:relative;margin:0 1.5px;background:linear-gradient(180deg,#FFFDF7 0%,var(--ivory) 70%,var(--ivory-down) 100%);border-radius:0 0 8px 8px;border:1px solid rgba(0,0,0,.5);border-top:none;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px}.key-w span{font-family:ui-rounded,-apple-system,sans-serif;font-size:13px;font-weight:700;color:#a79b7e;pointer-events:none}.key-w.down{background:linear-gradient(180deg,var(--ivory-down),var(--ivory));box-shadow:inset 0 4px 10px #00000040}.key-b{position:absolute;top:0;height:60%;z-index:2;background:linear-gradient(180deg,#34303F 0%,var(--ebony) 25%,#000 100%);border-radius:0 0 6px 6px;border:1px solid #000}.key-b.down{background:var(--ebony-down)}.key-w.guide,.key-b.guide{box-shadow:inset 0 0 0 3px var(--accent),0 0 18px var(--spot)}.key-w.wrong,.key-b.wrong{box-shadow:inset 0 0 0 3px var(--danger)}#free-stage{flex:1;position:relative}.free-note{flex:1;text-align:right;font-family:ui-rounded,-apple-system,sans-serif;font-size:26px;font-weight:800;color:var(--accent);padding-right:calc(12px + env(safe-area-inset-right))}#rotate-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:var(--bg);display:none;align-items:center;justify-content:center;text-align:center}.rotate-phone{font-size:54px;animation:rot 1.6s ease-in-out infinite alternate}@keyframes rot{0%{transform:rotate(0)}to{transform:rotate(90deg)}}.rotate-inner p{margin-top:14px;color:var(--muted);font-size:16px}@media(orientation:portrait){#rotate-overlay{display:flex}}@media(prefers-reduced-motion:reduce){.rotate-phone,.result-stars .pop{animation:none}}