:root{--green:#2bff5a;--yellow:#fff23a;--cyan:#2ff7ff;--red:#ff3b3b;--text:#e9fff0;--muted:#7fa58a;--panel:#000a048c;color:var(--text);font-family:Orbitron,system-ui,sans-serif}*{box-sizing:border-box}html,body{-webkit-user-select:none;user-select:none;touch-action:none;background:#000;height:100%;margin:0;overflow:hidden}#scene{width:100%;height:100%;display:block;position:fixed;inset:0}[hidden]{display:none!important}.screen{text-align:center;background:radial-gradient(#00000026,#000000b3);flex-direction:column;justify-content:safe center;align-items:center;gap:clamp(.6rem,2.6vh,1.4rem);padding:16px;display:flex;position:fixed;inset:0;overflow-y:auto}.logo{letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 12px var(--cyan), 0 0 40px #2ff7ff99;filter:brightness(calc(1 + var(--pulse,0) * .5));margin:0;font-size:clamp(2.2rem,min(11vw,13vh),6.5rem);font-weight:800}.logo span{color:var(--green);text-shadow:0 0 12px var(--green), 0 0 40px #2bff5a99}h2{letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);text-shadow:0 0 14px var(--yellow);margin:0;font-size:clamp(1.8rem,7vw,3.2rem)}.buttons{flex-direction:column;gap:.8rem;min-width:min(280px,100%);display:flex}button,label.small{font:inherit;letter-spacing:.12em;text-transform:uppercase;color:var(--green);background:var(--panel);border:2px solid var(--green);cursor:pointer;border-radius:4px;padding:.75rem 1.6rem;font-size:1.05rem;transition:transform 80ms,box-shadow .15s,color .15s,border-color .15s;box-shadow:0 0 10px #2bff5a59,inset 0 0 10px #2bff5a26}button:hover,button:focus,label.small:focus,label.small:hover{color:var(--cyan);border-color:var(--cyan);outline:none;box-shadow:0 0 18px #2ff7ff99,inset 0 0 14px #2ff7ff40}button:active{transform:scale(.97)}button.primary{font-size:1.3rem}@media (max-height:620px){button,label.small{padding:.5rem 1.2rem}button.primary{font-size:1.1rem}.buttons{gap:.5rem}}button.small,label.small{padding:.45rem .9rem;font-size:.7rem}.music{color:var(--muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem;font-size:.75rem;display:flex}.music-label{text-overflow:ellipsis;white-space:nowrap;max-width:90vw;overflow:hidden}.hint-touch{display:none}@media (pointer:coarse){.hint-keys{display:none}.hint-touch{display:block}}.hint{color:var(--muted);font-size:.72rem;line-height:2}kbd{font:inherit;border:1px solid;border-radius:3px;padding:.05em .45em;font-size:.85em}.muted{color:var(--muted);font-size:.8rem}.scores{counter-reset:rank;min-width:min(340px,100%);margin:0;padding:0;list-style:none}.scores li{font-variant-numeric:tabular-nums;border-bottom:1px solid #2bff5a33;justify-content:space-between;gap:1.5rem;padding:.35rem .2rem;display:flex}.scores li:before{counter-increment:rank;content:counter(rank) ".";color:var(--muted);text-align:left;width:2.2em}.scores li .value{text-align:right;color:var(--green);flex:1}.scores li .date{color:var(--muted);align-self:center;font-size:.75rem}.scores li.fresh .value{color:var(--yellow);text-shadow:0 0 8px var(--yellow)}.scores .empty{color:var(--muted);justify-content:center}.scores .empty:before{content:none}.final-score{color:var(--green);text-shadow:0 0 18px var(--green);font-variant-numeric:tabular-nums;font-size:clamp(2.4rem,10vw,5rem);font-weight:800}.song-list{flex-direction:column;gap:.5rem;width:min(560px,100%);margin:0;padding:0;list-style:none;display:flex}.song-list button{text-transform:none;letter-spacing:.04em;text-align:left;justify-content:space-between;align-items:center;gap:1rem;width:100%;font-size:.9rem;display:flex}.song-list .song-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.song-list .song-info{color:var(--muted);font-variant-numeric:tabular-nums;flex-shrink:0;font-size:.7rem}.song-list .song-best{color:var(--muted);font-variant-numeric:tabular-nums;flex-shrink:0;font-size:.75rem}.song-list button[aria-current=true]{color:var(--cyan);border-color:var(--cyan)}.buttons.row{flex-direction:row;justify-content:center;align-items:center}.settings-grid{flex-wrap:wrap;justify-content:center;align-items:stretch;gap:1rem;width:100%;display:flex}.segmented{gap:0;display:flex}.segmented button{color:var(--muted);box-shadow:none;border-color:#2bff5a59;border-radius:0;flex:1;padding:.5rem .4rem;font-size:.75rem}.segmented button:first-child{border-radius:4px 0 0 4px}.segmented button:last-child{border-radius:0 4px 4px 0}.segmented button+button{border-left-width:0}.segmented button[aria-checked=true]{color:#001a07;background:var(--green);border-color:var(--green);box-shadow:0 0 14px #2bff5a99}.run-stats{background:#000000a6;border:1px solid #2bff5a40;border-radius:4px;flex-wrap:wrap;justify-content:center;gap:.4rem 1.6rem;margin:0;padding:.6rem 1.2rem;font-size:.8rem;display:flex}.run-stats div{flex-direction:column;align-items:center;gap:.15rem;display:flex}.run-stats dt{color:#b9d6c1;letter-spacing:.08em;text-transform:uppercase;font-size:.7rem}.run-stats dd{color:var(--cyan);font-variant-numeric:tabular-nums;margin:0;font-weight:800}.countdown{color:var(--yellow);text-shadow:0 0 20px var(--yellow);font-size:clamp(3rem,14vw,7rem);font-weight:800}.settings{background:var(--panel);text-align:left;border:1px solid #2bff5a59;border-radius:4px;flex-direction:column;gap:.9rem;width:min(360px,100%);padding:1.2rem 1.4rem;display:flex}.setting{letter-spacing:.08em;text-transform:uppercase;justify-content:space-between;align-items:center;gap:1rem;font-size:.85rem;display:flex}.setting-value{color:var(--cyan);font-variant-numeric:tabular-nums}.setting.toggle{cursor:pointer;justify-content:flex-start}input[type=range]{width:100%;accent-color:var(--green);cursor:pointer}input[type=checkbox]{width:1.1rem;height:1.1rem;accent-color:var(--green);cursor:pointer;flex-shrink:0}.fps{color:var(--muted);font-variant-numeric:tabular-nums;pointer-events:none;z-index:10;font-size:.7rem;position:fixed;top:8px;left:50%;transform:translate(-50%)}.rotate-hint{display:none}@media (orientation:portrait) and (pointer:coarse){.rotate-hint{z-index:100;text-align:center;color:var(--text);background:#000;flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:16px;display:flex;position:fixed;inset:0}.rotate-icon{font-size:4rem;animation:2s ease-in-out infinite rotate-phone}}@keyframes rotate-phone{0%,30%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}.touch-controls{z-index:5;pointer-events:none;justify-content:space-between;padding:0 16px;display:flex;position:fixed;bottom:28px;left:0;right:0}.touch-group{gap:12px;display:flex}.touch-controls button{pointer-events:auto;opacity:.55;touch-action:none;border-radius:50%;width:64px;height:64px;padding:0;font-size:1.4rem}.touch-controls button:active{opacity:.9}.touch-only{display:none}@media (pointer:coarse){.touch-only{display:flex}}#hud{pointer-events:none;position:fixed;inset:0}.charge{background:#0006;border:1px solid #ffffff40;border-radius:2px;width:min(38vw,420px);height:14px;position:absolute;top:12px;left:12px}.charge-fill{background:var(--green);width:100%;height:100%;color:var(--green);transform-origin:0;box-shadow:0 0 12px}.score{color:var(--cyan);text-shadow:0 0 12px var(--cyan);font-variant-numeric:tabular-nums;font-size:clamp(1.4rem,5vw,2.4rem);font-weight:800;position:absolute;top:8px;right:16px}.multiplier{color:var(--yellow);text-shadow:0 0 10px var(--yellow);font-variant-numeric:tabular-nums;font-size:clamp(.9rem,3vw,1.3rem);font-weight:800;transition:opacity .2s;position:absolute;top:calc(8px + 1.3*clamp(1.4rem,5vw,2.4rem));right:16px}.practice-badge{letter-spacing:.15em;text-transform:uppercase;color:var(--cyan);border:1px solid var(--cyan);border-radius:3px;padding:.1rem .4rem;font-size:.7rem;position:absolute;top:34px;left:12px}.multiplier:empty{opacity:0}.popup{letter-spacing:.15em;color:var(--yellow);text-shadow:0 0 12px var(--yellow);white-space:nowrap;opacity:0;font-size:clamp(1rem,3.5vw,1.6rem);font-weight:800;position:absolute;top:60%;left:50%;transform:translate(-50%)}.popup.show{animation:.6s ease-out popup}.popup.miss{color:var(--muted);text-shadow:none}@keyframes popup{0%{opacity:0;transform:translate(-50%,8px)scale(.9)}15%{opacity:1;transform:translate(-50%)scale(1.08)}70%{opacity:1}to{opacity:0;transform:translate(-50%,-14px)scale(1)}}.beat{width:180px;height:18px;position:absolute;bottom:44px;left:50%;transform:translate(-50%)}.beat-mark,.beat-center{border-radius:2px;width:4px;height:100%;position:absolute;top:0}.beat-mark{background:var(--yellow);box-shadow:0 0 6px var(--yellow);left:50%}.beat-center{background:#ffffff59;left:calc(50% - 2px)}.beat-center.hit{background:var(--yellow);box-shadow:0 0 12px var(--yellow)}.tutorial{text-align:center;letter-spacing:.08em;max-width:calc(100% - 32px);color:var(--text);text-shadow:0 0 8px #000,0 0 16px #000;font-size:clamp(.9rem,3vw,1.3rem);transition:opacity .4s;position:absolute;top:22%;left:50%;transform:translate(-50%)}.tutorial:empty{opacity:0}.track{color:var(--muted);white-space:nowrap;justify-content:space-between;gap:1rem;font-size:.7rem;display:flex;position:absolute;bottom:22px;left:16px;right:16px}#hud-track{text-overflow:ellipsis;overflow:hidden}.song-time{font-variant-numeric:tabular-nums}.progress{height:16px;position:absolute;bottom:0;left:0;right:0}.progress-profile{opacity:.6;width:100%;height:100%;position:absolute;inset:0}.progress-fill{background:var(--cyan);width:100%;height:3px;box-shadow:0 0 8px var(--cyan);transform-origin:0;position:absolute;bottom:0;left:0;transform:scaleX(0)}#final-rank{color:var(--text);text-shadow:0 0 6px #000,0 0 12px #000;font-size:.95rem}.muted:empty{display:none}@media (prefers-reduced-motion:reduce){.rotate-icon{animation:none}.popup.show{animation-duration:.9s;animation-timing-function:linear}}
