:root{--night:#141a33;--paper:#f2e6c9;--muted:#9aa3c7;--gold:#f5c84c;color:var(--paper);background:var(--night);font-family:Hiragino Maru Gothic ProN,BIZ UDPGothic,Yu Gothic,system-ui,sans-serif}body{place-items:center;min-height:100vh;margin:0;display:grid}#app{width:min(960px,100% - 32px)}.hud{color:var(--muted);justify-content:space-between;align-items:baseline;padding:0 4px 12px;font-size:1rem;display:flex}.hud p{margin:0}.hud b{color:var(--paper);font-variant-numeric:tabular-nums;margin-left:.35em;font-size:1.75rem;font-weight:700}.stage svg{border-radius:6px;width:100%;height:auto;max-height:calc(100vh - 150px);display:block}.select{text-align:center}.demo{margin-top:8px}.demo svg{width:100%;height:auto;display:block}.select h1{letter-spacing:.06em;color:var(--paper);margin:0 0 32px;font-size:clamp(2rem,6vw,3.5rem);font-weight:800}.stage-list{--gap:clamp(6px, 2vw, 20px);--crate:min(80px, (100vw - 32px - (var(--columns) - 1) * var(--gap)) / var(--columns));grid-template-columns:repeat(var(--columns), var(--crate));justify-content:center;gap:10px var(--gap);margin:0;padding:0;list-style:none;display:grid}.stage-item{flex-direction:column;align-items:center;gap:6px;display:flex}.stage-crate{width:var(--crate);aspect-ratio:1;box-sizing:border-box;border:calc(var(--crate) / 16) solid #6e4219;box-shadow:inset 0 0 0 calc(var(--crate) * .075) #c98a3d, inset 0 0 0 calc(var(--crate) * .125) #8a5a24;font-size:calc(var(--crate) * .42);color:#3a2410;background:#c98a3d;border-radius:6px;place-items:center;font-weight:800;transition:transform .12s;display:grid;position:relative}.stage-item.is-selected .stage-crate{outline:4px solid var(--gold);outline-offset:6px;transform:translateY(-8px)}.stage-badge{top:calc(var(--crate) * -.15);right:calc(var(--crate) * -.15);width:calc(var(--crate) * .4);height:calc(var(--crate) * .4);background:var(--gold);font-size:calc(var(--crate) * .2);color:#6e4219;border:2px solid #6e4219;border-radius:50%;place-items:center;font-weight:800;display:grid;position:absolute}.stage-badge[data-rating=A]{background:#9fd0ff}.stage-badge[data-rating=B]{background:#3fb8b0}.stage-badge[data-rating=C]{background:#9aa3c7}.stage-item.is-locked .stage-crate{filter:grayscale(.7)brightness(.45)}.stage-lock{top:calc(var(--crate) * -.15);right:calc(var(--crate) * -.15);width:calc(var(--crate) * .4);height:calc(var(--crate) * .4);border:2px solid var(--muted);background:var(--night);color:var(--muted);border-radius:50%;place-items:center;display:grid;position:absolute}.stage-crate.is-shaking{animation:.3s shake}@keyframes shake{0%,to{transform:translateY(-8px)}25%{transform:translate(-6px,-8px)}50%{transform:translate(6px,-8px)}75%{transform:translate(-3px,-8px)}}.stage-mark{min-height:1.4em;max-width:var(--crate);font-size:clamp(9px, var(--crate) * .25, .875rem);word-break:keep-all;color:var(--gold);line-height:1.4}.hint{color:var(--muted);margin:24px 0 0}.is-touch .stage-item.is-selected .stage-crate{outline:none;transform:none}.is-touch .stage-crate.is-shaking{animation-name:shake-flat}@keyframes shake-flat{0%,to{transform:translate(0)}25%{transform:translate(-6px)}50%{transform:translate(6px)}75%{transform:translate(-3px)}}@media (prefers-reduced-motion:reduce){.stage-crate{transition:none}.stage-crate.is-shaking{animation:none}}.board{position:relative}.overlay{pointer-events:none;position:absolute;inset:0}.fireworks-layer,.fireworks{width:100%;height:100%;position:absolute;inset:0}.clear-banner{text-align:center;place-content:center;display:grid;position:absolute;inset:0}.clear-title{color:var(--gold);text-shadow:0 4px #6e4219,0 0 24px #141a33cc;margin:0;font-size:clamp(2.5rem,8vw,5rem);font-weight:800}.clear-rating{color:var(--paper);text-shadow:0 0 12px #141a33e6;margin:4px 0 0;font-size:1.5rem}.clear-rating b{color:var(--gold);text-shadow:0 3px #6e4219,0 0 18px #141a33cc;margin-left:.2em;font-size:3rem}.clear-hint{color:var(--paper);text-shadow:0 0 12px #141a33e6;margin:12px 0 0;font-size:1.125rem}.keys{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:8px 24px;padding-top:16px;font-size:.875rem;display:flex}.keys kbd{text-align:center;min-width:1.6em;color:var(--paper);background:#1f2747;border:1px solid #3a4470;border-bottom-width:3px;border-radius:5px;margin-right:3px;padding:1px 6px;font-family:inherit;font-size:.8125rem;display:inline-block}.is-touch{touch-action:manipulation;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.is-touch .hud{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:6px 10px;padding:0 0 10px;font-size:.75rem}.is-touch .hud b{font-size:1.25rem}.touch-system,.touch-pad,.touch-main{touch-action:none}.is-touch{--pad-key:clamp(44px, 14vw, 58px);--big-key:clamp(60px, 19vw, 76px)}.is-touch .play-main{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"board board board""pad.main";align-items:center;gap:16px 12px;display:grid}.is-touch .board{grid-area:board}.is-touch .stage svg{max-height:calc(100svh - 290px)}.touch-pad{grid-area:pad;grid-template-columns:repeat(3, var(--pad-key));grid-template-rows:repeat(3, var(--pad-key));justify-self:start;gap:4px;display:grid}.touch-pad [data-action=up]{grid-area:1/2}.touch-pad [data-action=left]{grid-area:2/1}.touch-pad [data-action=right]{grid-area:2/3}.touch-pad [data-action=down]{grid-area:3/2}.touch-main{grid-area:main;justify-self:end;align-items:center;gap:12px;display:flex}@media (orientation:landscape){.is-touch .play-main{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"pad board main"}.is-touch .stage svg{max-height:calc(100svh - 70px)}.touch-main{flex-direction:column-reverse}}.touch-button{font:inherit;color:var(--paper);cursor:pointer;background:#1f2747;border:1px solid #3a4470;border-bottom-width:4px;border-radius:10px;place-items:center;padding:0;font-weight:700;display:grid}.touch-button.is-pressed{background:#2c3763;border-bottom-width:1px;transform:translateY(3px)}.touch-pad .touch-button{font-size:1.5rem}.touch-main .touch-button{width:var(--big-key);height:var(--big-key);border-radius:50%;font-size:.9375rem}.touch-main [data-action=jump]{border-color:var(--gold);color:var(--gold)}.touch-main [data-action=magic]{color:#9fd0ff;border-color:#9fd0ff}.touch-system{gap:4px;margin-left:auto;display:flex}.touch-system .touch-button{border-bottom-width:3px;border-radius:7px;padding:6px clamp(4px,1.6vw,8px);font-size:clamp(.6875rem,3.1vw,.8125rem)}.touch-system .touch-button.is-pressed{border-bottom-width:1px;transform:translateY(2px)}