@keyframes pop-in{0%{transform:scale(.82);opacity:0}to{transform:scale(1);opacity:1}}@keyframes note-hit{0%{transform:scale(1)}50%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes note-hit-mobile{0%,to{filter:brightness(1)}50%{filter:brightness(1.22)}}@keyframes restart-push{0%{transform:translateY(0)}42%{transform:translateY(4px)}to{transform:translateY(0)}}html,body{background:#050506;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}body{overscroll-behavior-y:none}.play-page{min-height:100svh;min-height:100dvh;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:#000001;color:#14110c;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.play-shell{display:grid;grid-template-columns:1fr;width:min(480px,100%);margin:0 auto}.play-shell>*{min-width:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.game-card{width:100%;min-width:0;overflow:hidden;display:grid;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;border:1px solid oklch(87% .006 80);border-radius:9px;background:#9f9b93;box-shadow:0 18px 42px #0000008f,0 0 0 1px #050608c7}.device-header{background:#646360;border-bottom:1px solid oklch(27% .006 80);opacity:.42}.top-tabs{display:grid;grid-template-columns:.9fr .9fr .7fr .7fr .8fr .9fr;min-height:30px;font-family:Avenir Next,Avenir,system-ui,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.02em;text-align:center;text-transform:uppercase}.top-tabs span{display:grid;place-items:center;border-right:1px solid oklch(38% .005 82);background:#5f5d5a;color:#13110f}.top-tabs span:nth-child(3),.top-tabs span:nth-child(4){background:#0a0b0d;color:#5a5854}.top-tabs span:last-child{border-right:0}.top-tabs .is-hot{background:#714233;color:#a9a49e}.screen-panel{display:grid;gap:10px;padding:14px 14px 12px;background:linear-gradient(180deg,#090b0ff5,#010203fa);color:#dae2eb;box-shadow:inset 0 12px 24px #0000005c}.screen-topline{display:grid;grid-template-columns:auto minmax(58px,1fr) auto;align-items:center;gap:12px}.back-link{color:#c9c3ba;font-size:.76rem;font-weight:800;letter-spacing:.02em;text-decoration:none;text-transform:uppercase}.back-link:hover{color:#ede7de}.screen-meters{display:flex;align-items:end;gap:3px;height:24px}.screen-meters span{width:5px;background:#e63b25;box-shadow:0 0 10px #e63b2580}.screen-meters span:nth-child(1){height:8px}.screen-meters span:nth-child(2){height:14px;background:#21bde4}.screen-meters span:nth-child(3){height:20px}.screen-meters span:nth-child(4){height:12px;background:#ecbd4a}.current-readout{display:grid;justify-items:end;gap:2px;min-width:96px}.current-readout strong{color:#c7daee;font-family:DIN Alternate,Avenir Next,system-ui,sans-serif;font-size:1.1rem;font-weight:900;line-height:1;text-align:right;text-shadow:0 0 12px oklch(76% .08 245 / .44)}.current-readout span{color:#e93f29;font-size:.62rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.screen-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(112px,.48fr);gap:8px}.song-picker,.instrument-picker{display:grid;min-width:0}.song-picker select,.instrument-picker select{width:100%;min-width:0;min-height:34px;border:1px solid oklch(37% .008 260);border-radius:3px;background:#d3d1cd;color:#101215;padding:0 10px;font-size:.78rem;font-weight:800;cursor:pointer}.song-picker select:hover,.instrument-picker select:hover{background:#e6e4e0}.beat-progress{display:flex;align-items:center;gap:4px;min-height:10px}.beat-progress-step{flex:1 1 8px;min-width:6px;height:7px;border:1px solid oklch(28% .007 260);border-radius:2px;background:#08090c}.beat-progress-step.is-complete{border-color:oklch(48% .09 222);background:oklch(45% .12 222)}.beat-progress-step.is-current{border-color:#ebaa2d;background:oklch(70% .16 76);box-shadow:0 0 10px oklch(70% .16 76 / .34)}.melody-board{--melody-cell-height: 48px;--melody-edge-spacer: calc(50% - (var(--melody-cell-size) / 2));--melody-cell-size: 42px;--melody-label-size: 18px;display:flex;min-width:0;max-width:100%;box-sizing:border-box;align-items:stretch;gap:9px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;min-height:86px;padding:10px;border:1px solid oklch(22% .006 260);border-radius:4px;background:#010102;scroll-padding-inline:10px;scrollbar-color:oklch(58% .16 35) oklch(7% .006 260);scrollbar-width:thin}.melody-board:before,.melody-board:after{content:"";align-self:stretch;flex:0 0 max(0px,var(--melody-edge-spacer))}.melody-beat{display:flex;position:relative;align-items:center;box-sizing:border-box;flex:none;flex-wrap:nowrap;gap:5px;width:max-content;min-width:max-content;padding:7px;border:1px solid oklch(20% .006 260);border-radius:4px;background:#030305;scroll-margin-inline:10px;transition:background .1s ease,border-color .1s ease}.melody-beat.is-current{border-color:#c64e31;background:#0e0806}.melody-beat.is-complete{border-color:oklch(36% .09 222);background:#00070b}.beat-label{display:grid;align-self:stretch;box-sizing:border-box;flex:0 0 var(--melody-label-size);place-items:center;width:var(--melody-label-size);min-width:var(--melody-label-size);max-width:var(--melody-label-size);padding-right:5px;border-right:1px solid oklch(28% .007 260);color:#595e64;font-family:DIN Alternate,Avenir Next,sans-serif;font-size:.68rem;font-weight:900;font-variant-numeric:tabular-nums}.melody-beat.is-current .beat-label{border-right-color:#9f4833;color:#dd9812}.melody-cell{display:grid;place-items:center;flex:0 0 var(--melody-cell-size);width:var(--melody-cell-size);min-width:var(--melody-cell-size);max-width:var(--melody-cell-size);min-height:var(--melody-cell-height);box-sizing:border-box;border:1px solid oklch(29% .006 260);border-radius:3px;background:#0a0b0e;color:#aeb9c2;font-family:DIN Alternate,Avenir Next,sans-serif;font-size:1.72rem;font-weight:900;transition:background .1s ease,border-color .1s ease,box-shadow .1s ease,transform .1s ease}.melody-cell.is-current{border-color:#ebaa2d;background:oklch(68% .18 76);color:#0e0803;animation:pop-in .14s ease both;box-shadow:0 0 0 2px #f5d29cd1,0 0 14px oklch(70% .16 76 / .42)}.melody-cell.is-complete{border-color:#1ea8cd;background:oklch(30% .07 222);color:#c3dde5}.melody-cell.is-last-hit{animation:note-hit .16s ease both}.control-deck{display:grid;gap:14px;padding:14px;background:linear-gradient(135deg,#adaaa5,#85837e)}.sound-hint{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin:-2px 0 -4px;border:1px solid oklch(49% .14 38);border-radius:5px;background:#e9cab6;color:#2b170f;font-size:.76rem;font-weight:900;line-height:1.25;padding:8px 10px}.sound-hint button{min-height:28px;border:1px solid oklch(38% .05 42);border-radius:4px;background:#eee2d7;color:#2b170f;cursor:pointer;font:inherit;font-size:.68rem;font-weight:900;padding:0 8px;text-transform:uppercase}.sound-hint button:hover{background:#fbf0e6}.sustain-control{display:grid;grid-template-columns:auto minmax(0,1fr) 46px auto;align-items:center;gap:8px;min-height:42px;color:#101215;font-size:.75rem}.sustain-control label,.sustain-control output{font-weight:900;text-transform:uppercase}.sustain-control input{width:100%;min-width:0;accent-color:oklch(61% .2 34);cursor:pointer}.sustain-control output{font-variant-numeric:tabular-nums;text-align:right}.sustain-control button,.reset-button{min-height:34px;border:1px solid oklch(18% .006 260);border-radius:5px;background:#d3d1cd;color:#0c0d10;box-shadow:0 3px #44423f;cursor:pointer;font:inherit;font-weight:900;padding:0 10px;text-transform:uppercase;transition:background 90ms ease,box-shadow 90ms ease,transform 90ms ease}.sustain-control button:hover,.reset-button:hover{background:#e3e1dd}.numpad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 12px;-webkit-touch-callout:none;-webkit-user-select:none;touch-action:none;user-select:none}.numpad,.numpad *{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none!important;-webkit-user-drag:none;-webkit-user-select:none!important;-ms-user-select:none!important;touch-action:none;user-select:none!important}.number-key{display:grid;min-width:0;gap:0;min-height:68px;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-user-select:none;-ms-user-select:none;touch-action:none;user-select:none;border:1px solid oklch(7% .005 260);border-radius:6px;background:linear-gradient(180deg,#101214,#020203);color:#d8d4cc;cursor:pointer;box-shadow:inset 0 1px #36383b,0 6px #000,0 10px 12px #0101016b;transition:background 80ms ease,transform 80ms ease,box-shadow 80ms ease}.number-key span{align-self:center;font-family:DIN Alternate,Avenir Next,sans-serif;font-size:1.72rem;font-weight:500;line-height:1}.number-key small{align-self:start;margin-top:-10px;color:#7d7a75;font-size:.72rem;font-weight:900}.number-key span,.number-key small{-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-user-select:none;-ms-user-select:none;pointer-events:none;user-select:none}.number-key:hover{background:linear-gradient(180deg,#17181b,#040406)}.number-key.is-target{border-color:#ebaa2d;background:linear-gradient(180deg,#692a06,#270900);color:#faf0e5;box-shadow:inset 0 1px #9e6033,0 6px oklch(14% .055 38),0 0 0 3px #ebaa2d5c,0 12px 14px #01010161}.number-key.is-target small{color:#efba64}.number-key:active,.number-key.is-pressed{transform:translateY(5px);box-shadow:inset 0 1px #2a2b2e,0 1px #000,0 3px 6px #01010157}.zero-key{grid-column:2}.number-key:focus-visible,.song-picker select:focus-visible,.instrument-picker select:focus-visible,.sustain-control input:focus-visible,.sustain-control button:focus-visible,.reset-button:focus-visible{outline:3px solid oklch(69% .2 35);outline-offset:3px}.game-footer{display:flex;align-items:center;justify-content:space-between;gap:14px}.game-footer p{display:none}.reset-button{background:oklch(58% .21 34);color:#faf0e5;box-shadow:0 4px oklch(25% .09 35),0 0 12px #cb412252}.reset-button:hover{background:#f04922}.reset-button:active{transform:translateY(3px);box-shadow:0 1px oklch(25% .09 35),0 0 8px #cb412242}.reset-button.is-pushing{animation:restart-push .17s cubic-bezier(.25,1,.5,1)}@media(max-width:520px){.melody-board{--melody-cell-height: 38px;--melody-cell-size: 32px;--melody-label-size: 14px;flex-wrap:nowrap;gap:7px;overflow-x:auto;overflow-y:hidden;min-height:78px;padding:8px;-webkit-overflow-scrolling:touch;touch-action:pan-x}.melody-beat{gap:4px;padding:5px}.beat-label{min-width:14px;padding-right:3px;font-size:.62rem}.melody-cell{font-size:1.36rem}.melody-cell.is-last-hit{animation-name:note-hit-mobile}}@media(max-width:380px){.melody-board{--melody-cell-height: 36px;--melody-cell-size: 30px;gap:6px;min-height:76px}.melody-cell{font-size:1.26rem}.numpad{gap:10px}.number-key{min-height:62px}}@media(min-width:860px){.play-page{padding:32px}.play-shell{width:min(520px,100%)}.screen-panel{padding:16px}.control-deck{padding:18px}.number-key{min-height:74px}.game-footer p{display:block;margin:0;max-width:34ch;color:#1d1f23;font-size:.78rem;font-weight:800;line-height:1.25;text-align:right}}@media(prefers-reduced-motion:reduce){.melody-beat,.melody-cell,.number-key,.reset-button{transition:none}.melody-cell.is-current,.melody-cell.is-last-hit,.number-key:active,.number-key.is-pressed,.reset-button:active{transform:none;animation:none}.reset-button.is-pushing{animation:none}}