:root{color-scheme:dark;--bg:#0d0d16;--panel:#171720;--line:#36323f;--ink:#faf7fc;--muted:#b4acbe;--pink:#f5a8cd;--cyan:#8be6dc;font:16px/1.5 Inter,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg)}button,input,select{font:inherit}button,a,input,select,summary{outline-offset:4px}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--cyan)}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}[hidden]{display:none!important}.skip{position:fixed;top:-80px;left:12px;background:var(--pink);color:#21121b;z-index:2000;padding:12px}.skip:focus{top:12px}.arcade-header{display:flex;align-items:center;gap:40px;min-height:80px;padding:16px 4vw;border-bottom:1px solid var(--line)}.brand{font-size:30px;font-weight:850;letter-spacing:-1.5px;white-space:nowrap}.brand span{font-size:13px;color:var(--pink);letter-spacing:2px;margin-left:15px;font-weight:600}.arcade-header nav{display:flex;gap:25px;font-size:14px;color:var(--muted)}.header-note{margin-left:auto;font-size:12px;color:#aaa0b6;letter-spacing:.08em}.arcade-layout{max-width:1480px;padding:30px 4vw 40px;margin:auto;display:grid;grid-template-columns:280px minmax(0,1fr);gap:38px}.setup{min-width:0}.eyebrow{font-size:12px;font-weight:650;letter-spacing:.14em;color:var(--pink);margin:0 0 7px}h1{font-size:28px;letter-spacing:-.04em;margin:0 0 24px;line-height:1.2}h2{font-size:32px;letter-spacing:-.045em;margin:0;line-height:1.2}.field-label,legend{font-size:14px;font-weight:600;color:#d3cbdc;display:block;margin-bottom:8px}select{width:100%;max-width:100%;min-height:50px;padding:10px 32px 10px 13px;background:#1c1924;border:1px solid #504459;color:var(--ink);border-radius:11px;font-size:16px}.song-card{display:flex;align-items:center;gap:12px;margin:16px 0 26px}.song-card img{width:52px;height:52px;border-radius:8px;object-fit:cover}.song-card>div{flex:1;min-width:0}.song-card strong{font-size:15px;line-height:1.2;display:block}.song-card span{font-size:12px;display:block;color:var(--muted);margin-top:5px}.small-button{background:transparent;border:1px solid #5c435b;color:var(--pink);min-height:44px;border-radius:8px;padding:8px 11px;font-size:14px}.mode-list{display:grid;gap:10px}.mode-card{position:relative;width:100%;display:flex;gap:15px;align-items:center;text-align:left;background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:13px;padding:15px 17px;min-height:83px}.mode-card:hover{border-color:#99788f}.mode-card[aria-pressed=true]{background:#332332;border-color:var(--pink);box-shadow:inset 4px 0 var(--pink)}.mode-icon{font-size:33px;line-height:1;color:var(--pink);width:32px;text-align:center}.mode-card strong{display:block;font-size:16px}.mode-card small{display:block;font-size:13px;color:#bcb0c8;margin-top:4px}.round-summary{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0 8px;font-size:12px;color:var(--cyan)}.round-summary span{padding:5px 8px;border:1px solid #354747;border-radius:5px;background:#172627}.settings{border-top:1px solid var(--line);margin-top:18px;padding-top:8px;font-size:14px}.settings summary{padding:12px 0;min-height:48px;cursor:pointer;color:#ded2e7}.settings-content{padding:10px 0 8px}.settings fieldset{padding:0;border:0;margin:0 0 18px;min-width:0}.segments{display:flex;padding:4px;border:1px solid #463d50;border-radius:9px;background:#18151e;gap:3px}.segments button{flex:1;min-height:44px;padding:8px 4px;color:var(--muted);background:none;border:0;border-radius:5px;font-size:14px;font-weight:600}.segments button[aria-pressed=true]{background:#f1e6f0;color:#241e2e}.settings label:not(.field-label){display:flex;justify-content:space-between;gap:8px;margin-top:18px}.settings input[type=range]{width:100%;min-height:34px;accent-color:var(--pink)}.settings p{font-size:13px;color:var(--muted);margin:4px 0}.settings .check{justify-content:start!important;align-items:center;min-height:44px}.check input{width:18px;height:18px;accent-color:var(--pink)}.session-note{font-size:13px;color:#a59caf;margin:18px 0 0}.play-column{min-width:0}.game-heading{display:flex;align-items:center;gap:13px;margin-bottom:20px}.active-song-art{width:44px;height:44px;border-radius:10px;object-fit:cover;display:none}.heading-actions{display:flex;gap:18px;align-items:center;margin-left:auto}.visit-best{text-align:right}.visit-best span{display:block;font-size:11px;letter-spacing:.1em;color:var(--muted)}.visit-best strong{font:600 24px/1.5 monospace;color:var(--cyan)}.scoreboard{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.25fr;gap:16px;background:#191620;border:1px solid #49394e;border-bottom:0;border-radius:14px 14px 0 0;padding:16px 20px}.scoreboard>div{min-width:0}.scoreboard span{font-size:11px;color:#b5a7c0;letter-spacing:.1em;display:block;margin-bottom:4px}.scoreboard strong{font:600 27px/1.2 monospace;white-space:nowrap}.scoreboard b{font-weight:inherit}.scoreboard small{font:500 14px monospace;color:var(--pink);margin-left:10px}.progress-stat{text-align:right;align-self:center}.track-progress{height:5px;background:#3d3144;border-radius:3px;overflow:hidden;margin-top:12px}#round-progress{height:100%;display:block;background:var(--pink);width:0}.arena{height:clamp(330px,40vw,490px);background:#0b0a17;border:1px solid #5b4362;position:relative;overflow:hidden;isolation:isolate;border-radius:0 0 14px 14px;outline-offset:3px}.arena:focus{outline:none}.arena:focus-visible{outline:2px solid var(--cyan)}#game-canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none}.arena-top{position:absolute;top:14px;left:18px;right:18px;display:flex;justify-content:space-between;gap:12px;font:12px/1.4 monospace;color:#d0bedb;pointer-events:none}.arena-top span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:78%}.game-overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(90deg,#0c0b19c7,#1c11288c,#0c0b19c7);padding:22px;text-align:center;z-index:4;overflow:auto}.overlay-inner{width:min(100%,390px);margin:auto}.overlay-kicker{font-size:12px;letter-spacing:.16em;font-weight:650;color:var(--cyan)}.game-overlay h3{font-size:clamp(30px,3.5vw,47px);line-height:1.07;letter-spacing:-.04em;margin:16px 0}.game-overlay p{font-size:16px;color:#d5c5de;line-height:1.5;margin:0 0 22px}.start-button{min-height:52px;border-radius:11px;border:1px solid #ffd2e6;background:var(--pink);color:#241522;font-size:16px;font-weight:750;padding:13px 27px;box-shadow:0 6px 25px #e370af25}.start-button:hover{background:#ffc1de}.secondary-button{min-height:44px;border:1px solid #5c4b65;background:#251d2e;color:#f3e8fa;border-radius:9px;font-size:14px;padding:9px 14px;white-space:nowrap}.secondary-button:hover{background:#392c44}.quiet-button{border:0;background:none;color:#dbc9e6;font-size:14px;padding:12px;min-height:44px;text-decoration:underline;text-underline-offset:4px}.game-overlay .overlay-hint{font-size:13px;color:#ac99bd;margin:16px 0 0}.countdown{position:absolute;inset:0;display:grid;place-items:center;font:750 90px/1 Arial;color:var(--pink);background:#0c081950;z-index:5;pointer-events:none}.touch-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}.touch-controls button{min-height:64px;border:1px solid var(--lane);border-bottom:4px solid var(--lane);border-radius:11px;background:#21192e;color:#fff0fc;font-size:24px;font-weight:650;touch-action:none;user-select:none}.touch-controls button small{display:block;font-size:11px;color:#c4b4d0;letter-spacing:.08em;font-weight:500}.touch-controls button.is-lit,.touch-controls button:active{background:var(--lane);color:#211225}.touch-controls button.is-lit small,.touch-controls button:active small{color:#352035}.touch-controls button.is-cue{box-shadow:inset 0 0 0 3px #fff5,0 0 18px #d8c5ff28}.touch-controls button[aria-pressed=true]{background:#59435d}.touch-controls[data-mode=run]{grid-template-columns:repeat(3,minmax(0,1fr))}.touch-controls[data-mode=orbit]{grid-template-columns:1fr}.touch-controls[data-mode=orbit] button{font-size:20px;letter-spacing:.15em}.below-arena{display:flex;gap:12px;align-items:center;margin-top:12px}.below-arena p{flex:1;font-size:13px;color:#baacc6;margin:0;text-align:center}.below-arena button{flex:none}.status{font-size:14px;color:#dbc4e6;min-height:22px;margin:10px 0}.status:empty{display:none}.challenge-strip{display:flex;gap:15px;align-items:center;justify-content:space-between;padding:20px 0;margin-top:22px;border-block:1px solid var(--line)}.challenge-strip>div{display:flex;gap:14px;align-items:center}.challenge-icon{color:var(--pink);font-size:32px}.challenge-strip strong{font-size:15px}.challenge-strip p{font-size:14px;color:var(--muted);margin:4px 0 0}.challenge-strip>span{font-size:12px;color:var(--muted);text-align:right}.download-link{font-size:14px;display:inline-block;min-height:44px;padding:14px 0;color:#d7b9d1;text-decoration:underline;text-underline-offset:4px}.judgment{position:absolute;inset:31% 0 auto;text-align:center;font-size:28px;font-weight:800;letter-spacing:.07em;color:var(--cyan);text-shadow:0 3px 20px #000;pointer-events:none;opacity:0;z-index:2}.judgment.show{opacity:1}.judgment small{display:block;font-size:14px;color:#e5c6df;margin-top:4px}.judgment[data-type=miss],.judgment[data-type=crash],.judgment[data-type=offbeat]{color:#ffb5c7}.fever{position:absolute;bottom:7px;left:0;right:0;text-align:center;font-size:14px;letter-spacing:.15em;font-weight:750;color:var(--pink);pointer-events:none}.fever span{display:block;font-size:10px;letter-spacing:.1em;color:#d1b0cf}.game-results{position:absolute;inset:0;background:#17101ff7;z-index:7;padding:24px 32px;overflow:auto;outline:0}.result-top{display:flex;gap:10px;justify-content:space-between;align-items:center}.result-top .eyebrow{margin:0}.result-top #new-best{font-size:12px;color:var(--cyan);letter-spacing:.06em}.result-main{display:flex;gap:25px;align-items:center;margin:24px 0}.grade{font:800 100px/.9 Arial;width:88px;text-align:center;color:var(--pink);text-shadow:3px 3px #743b62}.result-main h3{font-size:27px;line-height:1.2;letter-spacing:-.035em;margin:0 0 6px}.result-main p{font-size:14px;color:var(--muted);margin:0 0 10px}.result-main #result-score{font:600 28px monospace}.result-score-label{display:block;font-size:11px;letter-spacing:.15em;color:#c0a9c7}.result-stats{display:flex;gap:35px;border-block:1px solid #4b3654;padding:15px 0}.result-stats strong{display:block;font:600 25px monospace}.result-stats span{font-size:13px;color:var(--muted)}#result-detail{font-size:14px;color:#d4bbdf;margin:14px 0}.result-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}footer{max-width:1480px;margin:auto;padding:23px 4vw;display:flex;flex-wrap:wrap;align-items:center;gap:25px;font-size:13px;color:#ac9eb9;border-top:1px solid var(--line)}footer>span{margin-right:auto;letter-spacing:.1em}.aicreation-production-credit{font-size:12px!important;margin:0!important;color:#a396b1}.noscript{padding:25px}
/* Focus view keeps every active control inside the usable screen, including safe areas. */
body[data-focus=true]{overflow:hidden}body[data-focus=true] .play-column{position:fixed;inset:0;z-index:1000;background:var(--bg);height:100vh;height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto auto;gap:8px;padding:calc(12px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow:hidden}body[data-focus=true] .game-heading{margin:0;min-height:42px}body[data-focus=true] .active-song-art{display:block}body[data-focus=true] .game-heading .eyebrow{display:none}body[data-focus=true] h2{font-size:24px}body[data-focus=true] .visit-best{display:none}body[data-focus=true] .scoreboard{padding:9px 16px;border:1px solid #49394e;border-radius:10px}body[data-focus=true] .arena{height:100%;min-height:0;border-radius:12px}body[data-focus=true] .touch-controls,body[data-focus=true] .below-arena{margin:0}body[data-focus=true] .status{margin:0;font-size:12px;min-height:0;text-align:center}body[data-focus=true] .challenge-strip,body[data-focus=true] .download-link{display:none}body[data-state=finished] .touch-controls{display:none}body[data-state=finished] .below-arena p{visibility:hidden}
@media(min-width:1400px){body[data-focus=true] .play-column{padding-inline:max(30px,calc((100vw - 1240px)/2))}}@media(max-width:1050px){.arcade-layout{grid-template-columns:240px minmax(0,1fr);gap:24px;padding-inline:24px}.arcade-header{padding-inline:24px;gap:30px}.header-note{display:none}.mode-card{padding:13px;gap:11px}.mode-card strong{font-size:15px}.mode-card small{font-size:12px}.scoreboard{gap:10px;padding:13px}.scoreboard strong{font-size:23px}.heading-actions{gap:10px}.visit-best{display:none}.challenge-strip>span{display:none}.game-results{padding:22px}.result-main h3{font-size:24px}.result-stats{gap:22px}}
@media(max-width:760px){.arcade-header{padding:12px 16px;min-height:64px;gap:15px;justify-content:space-between}.brand{font-size:26px}.brand span{font-size:12px;margin-left:10px;letter-spacing:1.5px}.arcade-header nav{font-size:14px}.arcade-header nav a:last-child{display:none}.arcade-layout{display:block;padding:18px 16px 26px}.setup-title,.song-card{display:none}.field-label{font-size:14px;margin-bottom:7px}select{min-height:48px}.mode-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}.mode-card{display:block;text-align:center;min-height:82px;padding:10px 4px;border-radius:11px}.mode-card[aria-pressed=true]{box-shadow:inset 0 -3px var(--pink)}.mode-icon{display:block;width:auto;font-size:27px;margin:0 0 7px}.mode-card strong{font-size:13px}.mode-card small{display:none}.round-summary{margin:12px 0 0;gap:6px}.round-summary span{font-size:12px;padding:4px 7px}.settings{margin:8px 0 0;padding:0;border:0}.settings summary{font-size:14px;padding:9px 0;min-height:40px}.settings-content{padding:14px 0 18px}.session-note{display:none}.game-heading{margin:14px 0 13px}.game-heading .eyebrow{display:none}h2{font-size:27px}.heading-actions .secondary-button{font-size:13px;padding:9px 11px}.scoreboard{gap:7px;padding:11px 12px;grid-template-columns:1.05fr .75fr .9fr 1.15fr}.scoreboard span{font-size:10px;letter-spacing:.03em}.scoreboard strong{font-size:21px}.scoreboard small{font-size:12px;margin-left:5px}.arena{height:330px}.arena-top{font-size:11px;left:12px;right:12px}.game-overlay{padding:18px}.game-overlay h3{font-size:33px;margin:12px 0}.game-overlay p{font-size:15px;margin-bottom:18px}.overlay-kicker{font-size:11px}.game-overlay .overlay-hint{font-size:12px;margin-top:13px}.touch-controls{gap:7px;margin-top:10px}.touch-controls button{min-height:64px;font-size:24px}.touch-controls button small{font-size:10px}.below-arena{gap:8px}.below-arena p{font-size:12px;line-height:1.35}.below-arena .secondary-button{font-size:13px;padding:9px 11px}.challenge-strip{margin-top:14px;padding:16px 0}.challenge-strip strong{font-size:14px}.challenge-strip p{font-size:13px}.game-results{padding:20px 18px}.result-main{gap:17px;margin:18px 0}.grade{font-size:80px;width:63px}.result-main h3{font-size:23px}.result-main p{font-size:12px}.result-main #result-score{font-size:24px}.result-stats{gap:22px;padding:12px 0}.result-stats strong{font-size:22px}.result-stats span{font-size:12px}.result-top .eyebrow,.result-top #new-best{font-size:11px}#result-detail{font-size:12px}.result-actions{gap:7px}.result-actions .start-button{min-height:46px;padding:10px 16px;font-size:14px}.result-actions .secondary-button{font-size:13px;padding:9px 11px}.result-actions .quiet-button{font-size:13px;padding:9px}body[data-focus=true] .game-heading{gap:10px}body[data-focus=true] h2{font-size:22px}body[data-focus=true] .active-song-art{width:36px;height:36px}body[data-focus=true] .scoreboard{padding:9px 10px}body[data-focus=true] .touch-controls button{min-height:68px}body[data-focus=true] .play-column{gap:8px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}}
@media(max-height:520px) and (orientation:landscape){body[data-focus=true] .play-column{grid-template-columns:minmax(0,1fr) 170px;grid-template-rows:auto minmax(0,1fr) auto;gap:7px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}body[data-focus=true] .game-heading{grid-column:1;grid-row:1;min-height:35px}body[data-focus=true] h2{font-size:19px}body[data-focus=true] .active-song-art{width:30px;height:30px}body[data-focus=true] .game-heading button{min-height:36px;font-size:12px;padding:7px 10px}body[data-focus=true] .scoreboard{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr 1fr;align-content:start;padding:10px;gap:14px 8px}body[data-focus=true] .scoreboard strong{font-size:19px}body[data-focus=true] .scoreboard .progress-stat{grid-column:1/-1;text-align:left}body[data-focus=true] .arena{grid-column:1;grid-row:2}body[data-focus=true] .touch-controls{grid-column:1;grid-row:3}body[data-focus=true] .touch-controls button{min-height:51px}body[data-focus=true] .below-arena{grid-column:2;grid-row:3;gap:5px}body[data-focus=true] .below-arena p{display:none}body[data-focus=true] .below-arena button{padding:8px;font-size:12px;min-height:46px;flex:1}body[data-focus=true] .status{grid-column:2;grid-row:1;align-self:center;font-size:11px}body[data-focus=true] .game-overlay{padding:14px}body[data-focus=true] .game-overlay h3{font-size:24px;margin:6px 0}body[data-focus=true] .game-overlay p{font-size:13px;line-height:1.3;margin-bottom:10px}body[data-focus=true] .overlay-kicker,body[data-focus=true] .overlay-hint{display:none}body[data-focus=true] .start-button,body[data-focus=true] .quiet-button{min-height:40px;padding:8px 12px;font-size:13px}body[data-focus=true] .game-results{padding:14px 18px}body[data-focus=true] .result-main{margin:10px 0}body[data-focus=true] .grade{font-size:57px;width:47px}body[data-focus=true] .result-main h3{font-size:21px}body[data-focus=true] .result-stats{padding:9px 0}.arena-top{font-size:10px}.fever{font-size:11px}.fever span{display:none}}
@media(max-width:350px){.arcade-layout{padding-inline:12px}.brand span{font-size:10px;margin-left:7px}.arcade-header nav{font-size:12px}.mode-card strong{font-size:12px}.round-summary{gap:4px}.round-summary span{font-size:11px}.scoreboard strong{font-size:19px}.scoreboard span{font-size:9px}.game-heading h2{font-size:24px}.heading-actions .secondary-button{font-size:12px}.below-arena p{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}@media(forced-colors:active){button,select,.arena,.mode-card{border:1px solid ButtonText}.mode-card[aria-pressed=true]{outline:2px solid Highlight}}

/* One-thumb flight controls and a compact four-game selector. */
.flight-icon{width:38px;height:38px;flex-shrink:0;background:url(/assets/charlie-flight.webp) 0 0 / 200% 100% no-repeat}.touch-controls[data-mode=flight]{grid-template-columns:1fr}.touch-controls[data-mode=flight] button{font-size:19px;letter-spacing:.08em;background:#3e2640}.touch-controls[data-mode=flight] button.is-lit{background:var(--pink);color:#241522}body[data-mode=flight] .judgment{inset:12% 0 auto;font-size:20px}body[data-mode=flight] .game-overlay{background:linear-gradient(90deg,#170d24e6,#24102cbf,#170d24e6)}
@media(max-width:760px){.mode-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.mode-card strong{font-size:12px}.flight-icon{width:36px;height:27px;background-size:200% auto;margin-inline:auto}.scoreboard #accuracy-label{font-size:8px;letter-spacing:0}}

.quick-start{display:none}@media(max-width:760px) and (max-height:700px){body[data-state=ready]:not([data-focus=true]) .quick-start{display:block;position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:16px;right:16px;width:calc(100% - 32px);z-index:20;box-shadow:0 0 0 8px #0d0d16,0 -12px 30px #0d0d16}body[data-state=ready]:not([data-focus=true]){padding-bottom:80px}}

/* Completed results grow with the public scoreboard; active games retain focus view. */
body[data-state=finished]:not([data-focus=true]) .arena{height:auto;min-height:380px}
body[data-state=finished]:not([data-focus=true]) #game-canvas{position:absolute;inset:0}
body[data-state=finished]:not([data-focus=true]) .game-results{position:relative;inset:auto;min-height:380px}
.game-results .cam-leaderboard{margin:20px 0}