@font-face{font-family:Arcade;src:url(assets/ui-bold.woff)}*{box-sizing:border-box;touch-action:none;-webkit-user-select:none;user-select:none}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#091526;color:#fff;font-family:Arcade,Arial,sans-serif}button{font:inherit;color:inherit;cursor:pointer;border:2px solid #729aae;background:#18354c;border-radius:5px;min-height:38px}button:active{transform:translateY(2px)}#app{height:100dvh;position:relative;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:flex;flex-direction:column}header{height:40px;flex-shrink:0;display:flex;align-items:center;gap:7px;padding:3px 10px;background:#0d2337;border-bottom:2px solid #3b6570;font-size:12px}header b{color:#ffe08b;margin-right:auto}header button{min-height:30px;min-width:34px}#boards{display:flex;flex:1;min-height:0;gap:4px;padding:4px}#music{width:42%;position:relative;display:flex;flex-direction:column;min-height:0;background:#0b162e;border:2px solid #45728b}#notes{width:100%;flex:1;min-height:0;image-rendering:pixelated}#keys{display:flex;gap:5px;padding:7px;height:68px;flex-shrink:0;background:#0b162e}#keys button{width:25%;border:3px solid var(--color);background:color-mix(in srgb,var(--color) 45%,#07101d);box-shadow:0 4px 0 #020910;font-size:19px}#keys button.down{background:var(--color);color:#091326;box-shadow:0 0 18px var(--color);transform:translateY(3px)}.stats{height:30px;display:flex;justify-content:space-around;align-items:center;font-size:14px;color:#ffe8a1}#race{flex:1;min-width:0;position:relative;overflow:hidden;background:#456c59}#world{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}#racehud{position:absolute;bottom:8px;left:8px;right:8px;background:#0b203ce6;border:2px solid #75b3ac;padding:8px;font-size:11px;text-align:center}#feedback{position:absolute;top:14%;left:0;width:100%;text-align:center;color:#ffea9c;font-size:20px;pointer-events:none;text-shadow:2px 2px #000}#overlay{position:absolute;inset:40px 0 0;background:#061322c9;display:flex;align-items:center;justify-content:center;padding:12px;backdrop-filter:blur(3px);overflow:auto}#overlay[hidden]{display:none}.dialog{background:#10283bf5;border:3px solid #eeb966;box-shadow:7px 7px #030c18;max-width:600px;width:100%;padding:16px;text-align:center}h1{font-size:clamp(24px,5vw,45px);line-height:1.03;margin:7px 0;color:#ffe194;text-shadow:3px 4px #b14b40;letter-spacing:2px}#eyebrow{font-size:11px;letter-spacing:2px;color:#8cdbce}#portrait{width:100%;height:115px;object-fit:contain;image-rendering:pixelated}p{font:15px/1.5 Arcade,Arial,sans-serif;margin:8px auto;max-width:510px}#detail{font-size:12px;color:#a3c8db}#action{padding:11px 30px;background:#ca6543;border-color:#ffd590;margin:6px}#settings{font-size:10px;color:#a3c8db;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px}input{max-width:100px;touch-action:pan-x}.stacked #boards{flex-direction:column}.stacked #music{width:100%;height:58%;flex-shrink:0}.stacked #race{min-height:0}.stacked #keys{height:58px}.stacked #world{object-fit:fill}.stacked #portrait{height:105px}.stacked .dialog{padding:12px}.stacked p{font-size:13px}@media(max-height:480px){#portrait{height:70px}.dialog{padding:8px}h1{font-size:25px}p{font-size:12px;margin:4px}#overlay{padding:4px}#settings{margin:2px}}
@keyframes reveal{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}#overlay:not([hidden]) .dialog{animation:reveal .35s ease-out}@keyframes pulse{50%{filter:brightness(1.35)}}#action{animation:pulse 2s infinite}
#music{border-color:#405477;border-radius:10px;overflow:hidden;background:#080e23;box-shadow:inset 0 0 24px #768cff15}.stats{height:38px;background:linear-gradient(90deg,#172338,#262440,#172338);border-bottom:1px solid #555a83;color:#d4e6ff;font-size:13px}#combo{font-size:23px;color:#ffe09a}#accuracy{color:#7de5d4}#keys{height:72px;gap:7px;background:#111a30;border-top:1px solid #7887ae}#keys button{border-radius:10px 10px 5px 5px;background:radial-gradient(ellipse at top,color-mix(in srgb,var(--color) 65%,#111a30),#14203b);box-shadow:inset 0 3px #ffffff44,0 5px #030711;text-shadow:1px 2px #15233b}#keys button.down{filter:brightness(1.35);box-shadow:0 0 25px var(--color),inset 0 0 12px white}#feedback{top:12%;font-size:clamp(18px,3vw,30px);text-shadow:0 3px 0 #090c1b,0 0 16px currentColor}#cinema{position:absolute;inset:40px 0 0;z-index:5;background:#080f22;display:flex;align-items:center;justify-content:center;overflow:hidden}#cinema[hidden]{display:none}#cutscene{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}#skip{position:absolute;right:16px;bottom:14px;padding:8px 20px;background:#17283be6;border-color:#a5c9d2;font-size:12px}#intro-loading{position:absolute;left:16px;bottom:20px;color:#ffe29d;font-size:12px}.dialog{background:linear-gradient(145deg,#192c48f7,#0b152bf7);border-color:#8dd6dd;border-radius:12px}#action{background:linear-gradient(#e98f50,#ac493d);box-shadow:0 4px #492a35;border-radius:8px}#portrait{height:150px}.stacked #music{height:60%}.stacked #keys{height:61px}.stacked .stats{height:31px}@media(max-height:480px){#portrait{height:70px}#keys{height:56px}.stats{height:28px}}

#settings{flex-wrap:wrap}#settings[hidden]{display:none}#calibrate{font-size:11px;min-height:32px;padding:5px 10px;border-color:#8dd6dd}

#cal-keys{display:flex;justify-content:center;gap:10px;margin:18px 0}#cal-keys[hidden]{display:none}#cal-keys button{width:22%;min-height:64px;background:var(--color);border-color:#fff8;color:#10172b;font-size:24px}
#selection,#records{position:absolute;inset:40px 0 0;z-index:6;overflow:auto;touch-action:pan-y;background:radial-gradient(ellipse at 50% 0,#344167,#0b1328 65%);padding:18px}#selection[hidden],#records[hidden],#wipe[hidden]{display:none}.selection-head{text-align:center;margin-bottom:16px}.selection-head small{letter-spacing:4px;color:#8de3da}.selection-head h1{font-size:clamp(23px,4vw,39px)}#choose-hint{font-size:12px}#series-score{font-size:13px;color:#ffdf8d}#rivals{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1100px;margin:auto}.tier{min-width:0;padding:10px;border:2px solid #566381;border-top:5px solid #63dc92;border-radius:8px;background:#101b33}.tier:nth-child(2){border-top-color:#6fb9ff}.tier:nth-child(3){border-top-color:#ffd066}.tier:nth-child(4){border-top-color:#ed709c}.tier h2{text-align:center;font-size:15px;color:#dce9f7;margin:4px 0 13px}.rival{width:100%;display:grid;grid-template-columns:70px 1fr;text-align:left;align-items:center;padding:5px;margin:7px 0;min-height:82px;border:2px solid #425475;background:#1a2945;position:relative;transition:background .15s,transform .15s;touch-action:pan-y}.rival canvas{width:70px;height:67px;grid-row:span 2;image-rendering:pixelated}.rival strong{font-size:13px}.rival small{font-size:10px;color:#9bdad7}.rival.selected,.rival:hover:not(:disabled){border-color:#ffe394;background:#3b3651;box-shadow:0 0 18px #e8b56833;transform:translateY(-2px)}.rival:disabled{opacity:.45;filter:grayscale(.9)}.rival.coming{min-height:45px;display:flex;justify-content:center;color:#637590;font-size:10px;border-style:dashed;background:#0c172d}#records{display:flex;justify-content:center;align-items:flex-start}#records .dialog{max-width:550px}#letters{display:flex;gap:12px;justify-content:center;margin:12px}.letter{display:flex;flex-direction:column;border:2px solid transparent}.letter.selected{border-color:#ffda7b;box-shadow:0 0 18px #ffd98c33}.letter button{width:60px;border:0;background:#223953}.letter button:nth-child(2){font-size:32px;color:#ffe394}#record-hint,#record-status{font-size:12px}#record-status{color:#94ded5;min-height:36px}#save-record,#again{padding:8px 20px;background:#9b4b49;border-color:#e8ac77}button:disabled{cursor:default;opacity:.45}#record-board{text-align:left;max-width:300px;margin:10px auto 20px;font:14px/1.8 monospace;color:#d4e3fb}#record-board div:nth-child(odd){background:#ffffff07}#wipe{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;pointer-events:all;overflow:hidden}#wipe i{flex:1;width:100%;background:#63dc92;animation:curtain .75s cubic-bezier(.76,0,.24,1) both}#wipe i:nth-child(2){background:#f06b79;animation-delay:.025s}#wipe i:nth-child(3){background:#73bbff;animation-delay:.05s}#wipe i:nth-child(4){background:#f7d760;animation-delay:.075s}@keyframes curtain{0%{transform:translateX(-105%)}42%,55%{transform:translateX(0)}100%{transform:translateX(105%)}}@media(max-width:720px){#rivals{grid-template-columns:repeat(2,1fr);gap:8px}#selection{padding:10px}.tier{padding:5px}.rival strong{font-size:11px}.rival{grid-template-columns:55px 1fr}.rival canvas{width:55px}.selection-head{margin-bottom:10px}}@media(max-height:500px){.selection-head h1{font-size:24px}.selection-head p{font-size:11px}.rival{min-height:66px}.rival canvas{height:55px}}
/* Larger pads without shrinking the running scene on portrait displays. */
#keys{height:87px;padding:7px 5px;gap:6px}#keys button{font-size:24px;border-width:4px}.stacked #keys{height:76px}.stacked #music{height:58%}header #exit{font-size:11px;padding:4px 9px;white-space:nowrap;border-color:#d3988d}#rush-panel{flex-shrink:0;padding:4px 10px 5px;background:#121c32;font-size:10px;color:#afd6e4;height:31px;text-align:center}#rush-track{height:5px;margin-top:4px;background:#37405c;border-radius:4px;overflow:hidden}#rush-fill{display:block;height:100%;width:0;background:#68d6dc;transition:width .12s}#rush-panel.active{color:#ffe48c;background:#372a45}#rush-panel.active #rush-fill{background:linear-gradient(90deg,#ff9675,#ffe892);box-shadow:0 0 10px #ffe892}#combo{font-size:13px}.stats{gap:6px;padding:3px 6px;font-size:11px}#accuracy{font-size:10px;white-space:nowrap}#race{display:flex;flex-direction:column;background:#172f37}#world{display:block;flex:1;min-height:0;height:auto;width:100%;object-fit:fill}#racehud{position:static;margin:0;border:0;border-top:1px solid #759e95;font-size:10px;padding:6px;flex-shrink:0}#race-metrics{display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;gap:4px;background:#102638;padding:7px 10px 6px;flex-shrink:0;border-bottom:2px solid #537e82;text-align:center}#race-metrics small{display:block;font-size:9px;color:#acccd6;letter-spacing:1px}#race-metrics strong{display:block;font-size:24px;line-height:1.2;color:#ffe29b}#race-current{color:#ffab99!important}#race-metrics.ahead #race-current{color:#91ebcb!important}#race-status{font-size:11px;color:#b8d7df}#race-meter{grid-column:1/-1;height:6px;position:relative;margin:3px 1px;background:#3d4d61;border-radius:4px}#race-meter i{display:block;width:var(--current,0%);height:100%;background:#ec9b82;transition:width .18s}#race-metrics.ahead #race-meter i{background:#79d7bb}#race-meter b{position:absolute;left:var(--target,58%);top:-3px;width:3px;height:12px;background:#ffe49c;box-shadow:0 0 4px #131b28}#quit-dialog{position:absolute;inset:40px 0 0;z-index:12;background:#071225ed;display:flex;align-items:center;justify-content:center;padding:16px}#quit-dialog[hidden]{display:none}#quit-dialog button{margin:10px 5px;padding:10px 20px}#quit-dialog button.selected{outline:3px solid #ffe29b;outline-offset:3px}#abandon{border-color:#e49b89;background:#713f48}#keep-playing{background:#205348}#back-title{padding:8px 20px;margin:8px}#arcade,#arcade-record{display:block;margin:12px;color:#a6ddd5;font-size:12px}#arcade[hidden],#mechanics[hidden]{display:none}#mechanics{font-size:11px;color:#ffe2a7;max-width:490px;line-height:1.45}.stacked #race-metrics strong{font-size:21px}.stacked #race-metrics{padding:4px 8px}.stacked #racehud{padding:4px;font-size:9px}@media(max-height:480px){#keys{height:70px}#rush-panel{height:26px;padding:2px 8px}.stats{height:29px}#race-metrics strong{font-size:20px}#race-metrics{padding:3px 7px}header b{font-size:10px}#level{max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@media(max-width:420px){header{gap:4px;padding:3px 5px}header b{font-size:9px}header #level{max-width:100px;overflow:hidden;white-space:nowrap;font-size:9px}header button{min-width:29px}#race-status{font-size:9px}#combo{font-size:10px}}

#challenge-panel{flex-shrink:0;background:#1b2740;border-bottom:2px solid #8c8fcb;padding:7px 10px;color:#ffe6ab;text-align:center}#challenge-panel[hidden]{display:none}#challenge-title{display:block;font-size:12px}#challenge-detail{display:block;font-size:10px;color:#b6d5e0;margin:3px 0}#challenge-panel>div{height:4px;background:#38435e}#challenge-fill{display:block;height:100%;background:#b8a0f7;transition:width .12s}#challenge-panel.won{background:#234b45;border-color:#a7ecd0}#challenge-panel.won #challenge-fill{background:#9de8b7}.stacked #challenge-panel{padding:3px 8px}.stacked #challenge-title{font-size:10px}.stacked #challenge-detail{font-size:9px;margin:2px}.rival small{line-height:1.4}@media(max-height:480px){#challenge-panel{padding:3px 8px}#challenge-title{font-size:10px}#challenge-detail{font-size:9px;margin:2px}}

/* Match backing pixels to the allocated viewport: no CSS stretching. */
#world{flex:1 1 0;height:0;min-height:0;width:100%;object-fit:contain}#race{min-height:0;overflow:hidden}#race-metrics{padding:4px 8px}#challenge-panel{padding:3px 8px}#challenge-detail{margin:2px}#challenge-title{font-size:10px}
#wipe{transform:skewY(-7deg);inset:-15% 0;justify-content:center}#wipe i{flex:1;background:repeating-conic-gradient(#f1e5bf 0% 25%,#173342 0% 50%) 0 0/70px 70px!important;border-bottom:10px solid #e6a857;animation:raceFlag 1.05s cubic-bezier(.76,0,.24,1) both!important}#wipe i:nth-child(2){animation-delay:.025s!important}#wipe i:nth-child(3){animation-delay:.05s!important}#wipe i:nth-child(4){animation-delay:.075s!important}@keyframes raceFlag{0%{transform:translateX(-110%)}35%,58%{transform:translateX(0)}100%{transform:translateX(110%)}}

#wipe{transform:none;inset:0;display:block}#wipe i{display:none}#wipe canvas{width:100%;height:100%;display:block;image-rendering:pixelated}.stacked #world{object-fit:contain}

/* Landscape gives the rhythm controls the larger share of the viewport. */
body:not(.stacked) #boards{padding:2px;gap:2px}
body:not(.stacked) #music{width:54%;flex:0 0 54%;min-width:0}
body:not(.stacked) #keys{height:clamp(78px,16dvh,104px);padding:5px;gap:7px}
body:not(.stacked) #keys button{flex:1 1 0;width:0;min-width:0;font-size:clamp(24px,4dvh,32px)}
body:not(.stacked) .stats{flex-shrink:0}
body:not(.stacked) #overlay{align-items:safe center}

/* Scrollable menus and edge-to-edge surfaces; the four rhythm pads retain touch-action:none. */
html,body,#app{touch-action:pan-y}
#app{height:100%;padding:0}
header{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
#keys{padding-bottom:max(5px,env(safe-area-inset-bottom))}
#overlay,#overlay *,#selection,#selection *,#records,#records *{touch-action:pan-y}
#overlay{align-items:flex-start;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#overlay .dialog{margin:auto 0;flex-shrink:0}
#overlay #offset{touch-action:pan-x}
@media(orientation:landscape) and (max-height:500px){
 #overlay .dialog{display:grid;grid-template-columns:140px minmax(0,1fr);gap:4px 12px;max-width:880px;padding:8px}
 #eyebrow{grid-column:1;grid-row:1;font-size:8px}
 #heading{grid-column:1;grid-row:2;font-size:20px;margin:0}
 #portrait{grid-column:1;grid-row:3/5;height:60px}
 #message{grid-column:2;grid-row:1/3;font-size:12px;margin:0;align-self:center}
 #detail{grid-column:2;grid-row:3;font-size:10px;margin:0}
 #action{grid-column:2;grid-row:4;margin:0;min-height:44px;padding:8px 12px}
 #mechanics,#arcade,#settings{grid-column:1/-1;margin:3px auto}
 #cal-keys{grid-column:2}
}