:root{
  --bg:#050914;
  --panel:rgba(7,15,28,.78);
  --panel-strong:rgba(5,11,20,.92);
  --line:rgba(255,255,255,.11);
  --text:#f8f9fc;
  --muted:#94a5bc;
  --gold:#ffd46f;
  --cyan:#69ddff;
  --good:#72efb0;
  --danger:#ff6b7a;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
body{overflow-x:hidden}
button{font:inherit}
button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.ambient{position:fixed;inset:auto;pointer-events:none;filter:blur(70px);opacity:.35;z-index:-6;border-radius:50%}
.ambient-a{width:42vw;height:42vw;right:-10vw;top:-14vw;background:#1b8cff}
.ambient-b{width:34vw;height:34vw;left:-13vw;top:18vh;background:#b347ff}
.mountains{position:fixed;left:-4vw;right:-4vw;bottom:-3vh;height:37vh;z-index:-7;background:linear-gradient(180deg,#11233a,#040811);clip-path:polygon(0 100%,0 68%,9% 51%,17% 66%,28% 31%,39% 68%,50% 43%,59% 70%,71% 23%,82% 64%,91% 42%,100% 66%,100% 100%)}
.mountains:after{content:"";position:absolute;inset:22% 0 0;background:#070f1a;opacity:.88;clip-path:polygon(0 100%,0 80%,13% 63%,27% 81%,43% 56%,59% 82%,75% 50%,88% 79%,100% 61%,100% 100%)}
.game-shell{width:min(100%,980px);margin:auto;padding:18px max(12px,env(safe-area-inset-right)) 28px max(12px,env(safe-area-inset-left))}
.game-header{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:12px}
.eyebrow{margin:0 0 6px;font-size:10px;letter-spacing:.22em;font-weight:900;color:#aac0df}
h1{margin:0;font-size:clamp(46px,9vw,78px);line-height:.82;letter-spacing:-.08em;font-weight:1000}
.song-name{margin:10px 0 0;color:var(--muted);font-size:12px}
.score-stack{text-align:right;min-width:210px}
.score-stack>span,.score-stack small{display:block;font-size:9px;letter-spacing:.16em;color:var(--muted)}
.score-stack>strong{display:block;font-variant-numeric:tabular-nums;font-size:clamp(26px,5vw,42px);letter-spacing:.02em;line-height:1.1}
.score-stack small b{color:#fff}
.music-deck,.message-row,.stat-card,.controls .button{border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(16px)}
.music-deck{border-radius:18px;padding:11px 13px;margin-bottom:10px;box-shadow:0 18px 50px rgba(0,0,0,.2)}
.music-meta{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--muted);margin-bottom:8px}.music-meta span:first-child{font-weight:800;color:#dce6f5}
.song-progress{height:6px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden}.song-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#65d9ff,#fff0ae);box-shadow:0 0 14px rgba(101,217,255,.45)}
.stage-track{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-top:9px}
.stage-pip{height:24px;border:1px solid rgba(255,255,255,.06);border-radius:8px;display:grid;place-items:center;font-size:8px;font-weight:950;color:#697990;background:rgba(255,255,255,.025);transition:.25s}
.stage-pip.done{color:#9ff3ca;background:rgba(67,214,145,.14);border-color:rgba(67,214,145,.25)}
.stage-pip.current{color:#07111d;background:var(--gold);border-color:var(--gold);box-shadow:0 0 17px rgba(255,212,111,.35)}
.playfield{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:10px;align-items:stretch}
.board-wrap{position:relative;border:1px solid rgba(255,255,255,.12);background:rgba(3,8,16,.76);border-radius:23px;padding:8px;box-shadow:0 30px 80px rgba(0,0,0,.38);backdrop-filter:blur(14px)}
.board{position:relative;width:100%;aspect-ratio:1;border-radius:16px;overflow:hidden;background:linear-gradient(to right,rgba(255,255,255,.048) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.048) 1px,transparent 1px),radial-gradient(circle at 50% 44%,rgba(54,133,215,.11),transparent 58%),#0f1928;background-size:calc(100%/9) calc(100%/9),calc(100%/9) calc(100%/9),auto,auto;transition:filter .1s,box-shadow .1s}
.board.beat{box-shadow:inset 0 0 30px rgba(105,221,255,.13);filter:brightness(1.025)}
.piece{position:absolute;z-index:5;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:top .17s cubic-bezier(.18,.84,.2,1),left .17s cubic-bezier(.18,.84,.2,1),opacity .15s,transform .17s,filter .15s}
.piece:hover{filter:brightness(1.08)}
.piece:active{transform:scale(.965)}
.piece.enter{animation:piece-in .38s cubic-bezier(.2,.82,.2,1) both}
@keyframes piece-in{from{opacity:0;transform:var(--enter) scale(.78);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.piece.blocked{animation:piece-shake .2s linear}
@keyframes piece-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.piece svg{display:block;width:100%;height:100%;overflow:visible}
.fx{position:absolute;inset:8px;z-index:20;pointer-events:none;overflow:hidden;border-radius:16px}
.echo-ring{position:absolute;width:18px;height:18px;border:2px solid var(--fx-color,#fff);border-radius:50%;transform:translate(-50%,-50%) scale(.2);animation:echo-ring .82s ease-out forwards}
.echo-ring.r2{animation-delay:.07s;opacity:.65}.echo-ring.r3{animation-delay:.14s;opacity:.35}
@keyframes echo-ring{0%{transform:translate(-50%,-50%) scale(.2);opacity:.9}100%{transform:translate(-50%,-50%) scale(14);opacity:0}}
.echo-word{position:absolute;transform:translate(-50%,-50%);font-size:clamp(15px,4.7vw,28px);font-weight:1000;letter-spacing:.11em;color:#fff;text-shadow:0 3px 18px #000,0 0 16px var(--fx-color,#fff);animation:echo-word .82s ease-out forwards}
@keyframes echo-word{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-105%) scale(1.13)}}
.beat-meter{position:absolute;right:18px;bottom:18px;width:74px;height:74px;display:grid;place-items:center;pointer-events:none;z-index:18}
.beat-rings,.beat-rings i{position:absolute;inset:0;border-radius:50%}.beat-rings i{border:1px solid rgba(255,255,255,.13);transform:scale(.54)}
.beat-meter span{font-size:9px;letter-spacing:.16em;font-weight:950;color:#9fb1c8}
.beat-meter.pulse .beat-rings i:nth-child(1){animation:beat-out .55s ease-out}.beat-meter.pulse .beat-rings i:nth-child(2){animation:beat-out .55s .06s ease-out}.beat-meter.pulse .beat-rings i:nth-child(3){animation:beat-out .55s .12s ease-out}
.beat-meter.pulse span{color:#fff;text-shadow:0 0 12px var(--cyan)}
.beat-meter.strong span{color:var(--gold);font-size:10px}
@keyframes beat-out{0%{transform:scale(.45);border-color:rgba(255,255,255,.9);opacity:1}100%{transform:scale(1.05);border-color:rgba(105,221,255,.12);opacity:0}}
.judgement{position:absolute;left:50%;top:11%;transform:translateX(-50%);z-index:25;pointer-events:none;font-weight:1000;font-size:clamp(18px,5vw,34px);letter-spacing:.08em;text-align:center;opacity:0;text-shadow:0 4px 18px #000}
.judgement.show{animation:judge .55s ease-out}.judgement small{display:block;font-size:10px;letter-spacing:.12em;margin-top:2px}
.judgement.perfect{color:#fff2ae}.judgement.great{color:#92e8ff}.judgement.good{color:#9af1c4}.judgement.off{color:#bec6d2}.judgement.penalty{color:#ff8290}
@keyframes judge{0%{opacity:0;transform:translate(-50%,6px) scale(.88)}20%{opacity:1;transform:translate(-50%,0) scale(1.03)}100%{opacity:0;transform:translate(-50%,-18px) scale(1)}}
.stage-banner{position:absolute;inset:8px;display:grid;place-items:center;text-align:center;z-index:24;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(29,86,128,.18),transparent 60%)}
.stage-banner.show{animation:stage-pop .48s ease}.stage-banner small{display:block;font-size:9px;letter-spacing:.18em;color:#c1d0e2}.stage-banner strong{display:block;font-size:clamp(28px,7vw,52px);letter-spacing:-.04em;text-shadow:0 5px 25px #000}
@keyframes stage-pop{0%{opacity:0;transform:scale(.94)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.03)}}
.live-stats{display:grid;grid-template-rows:repeat(4,1fr);gap:7px}
.stat-card{border-radius:14px;padding:10px;text-align:right;display:flex;flex-direction:column;justify-content:center;min-height:0}
.stat-card span{font-size:8px;letter-spacing:.14em;color:var(--muted)}.stat-card strong{font-size:16px;line-height:1.1;margin-top:3px}.stage-card strong{font-size:12px}
.message-row{margin-top:9px;border-radius:14px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.message-row p{margin:0;font-size:11px;font-weight:750;line-height:1.45}.message-row span{font-size:8px;letter-spacing:.13em;color:#8bd5b1;white-space:nowrap}
.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:7px}
.button{border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;border-radius:13px;padding:11px 9px;font-weight:900;font-size:10px;cursor:pointer;backdrop-filter:blur(12px)}
.button.primary{background:#f5f7fb;color:#07101d;border-color:#fff}.button small{opacity:.62}.button:disabled{opacity:.32;cursor:default}.button:active:not(:disabled){transform:translateY(1px)}
.overlay{position:absolute;inset:8px;z-index:50;border-radius:16px;background:rgba(3,8,16,.92);backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}
.overlay[hidden]{display:none}
.overlay-card{max-width:570px}
.overlay-kicker{margin:0 0 8px;font-size:9px;letter-spacing:.2em;color:#9fb4d0;font-weight:900}
.overlay h2{margin:0 0 10px;font-size:clamp(29px,6vw,50px);line-height:.98;letter-spacing:-.045em}
.overlay p{font-size:12px;line-height:1.75;color:#bdc9da}
.rule-chips{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:12px 0}.rule-chips span{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);border-radius:999px;padding:6px 8px;font-size:9px;color:#b8c6d8}
.character-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin:13px auto;max-width:520px}
.character-chip{aspect-ratio:1;border-radius:10px;overflow:hidden;position:relative;border:2px solid var(--c);box-shadow:0 0 10px color-mix(in srgb,var(--c) 32%,transparent)}
.character-chip img{width:100%;height:100%;object-fit:cover;display:block}.character-chip span{position:absolute;left:0;right:0;bottom:0;font-size:6px;font-weight:950;padding:3px 1px;background:linear-gradient(transparent,rgba(0,0,0,.8));text-shadow:0 1px 3px #000}
.overlay-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:14px}.overlay-actions .button{min-width:150px}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:14px 0;text-align:left}
.result-item{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);border-radius:12px;padding:9px}.result-item span{display:block;font-size:8px;color:var(--muted);letter-spacing:.1em}.result-item b{display:block;font-size:17px;margin-top:3px}
footer{display:flex;justify-content:space-between;gap:12px;margin-top:10px;color:#71839c;font-size:8px;line-height:1.45}
@media(max-width:720px){
  .game-shell{padding-top:12px}.game-header{align-items:flex-start}.score-stack{min-width:150px}
  .playfield{grid-template-columns:1fr}.live-stats{grid-template-columns:repeat(4,1fr);grid-template-rows:none}.stat-card{min-height:55px}
  .character-strip{grid-template-columns:repeat(4,1fr);max-width:320px}.controls{grid-template-columns:1fr 1fr}.controls #newRun{grid-column:1/-1}
}
@media(max-width:470px){
  .eyebrow{font-size:7px}.song-name{font-size:10px}.score-stack{min-width:128px}.score-stack>strong{font-size:25px}
  .board-wrap{padding:5px;border-radius:18px}.fx,.overlay,.stage-banner{inset:5px}.beat-meter{width:60px;height:60px;right:12px;bottom:12px}
  .music-deck{padding:9px}.stage-pip{height:20px}.message-row{align-items:flex-start}.message-row span{display:none}
  .result-grid{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
.audio-picker{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin:12px auto 3px}
.file-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(105,221,255,.35);background:rgba(105,221,255,.08);color:#dff7ff;border-radius:12px;padding:9px 12px;font-size:10px;font-weight:900;cursor:pointer}
.file-button input{display:none}
#audioStatus{font-size:9px;color:#93a6bf}
#audioStatus.ready{color:#81ebba}
#audioStatus.warn{color:#ffd283}