:root{color-scheme:dark;--ink:#151e27;--muted:#8a9ca8;--mint:#cdfa80;--sand:#eee8db;--orange:#e77754;--white:#fcfaf3}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--white);font-family:Inter,"Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;overscroll-behavior:none}button{font:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:3px solid var(--mint);outline-offset:4px}button:disabled{opacity:.45;cursor:wait}header{max-width:1440px;margin:auto;padding:22px 34px 18px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center}.brand-mark{display:flex;align-items:center;justify-content:center;background:var(--mint);color:var(--ink);height:45px;width:48px;transform:skew(-7deg);font-size:26px;font-weight:950;letter-spacing:-3px;padding-right:5px}.brand b{font-size:18px;letter-spacing:.04em}.brand small{display:block;font-size:9px;font-weight:700;color:var(--muted);letter-spacing:.2em;margin-top:5px}.header-actions{display:flex;gap:10px}.quiet{background:transparent;border:1px solid #384550;color:#c5d0d5;padding:9px 13px;border-radius:6px;font-size:12px}.quiet:hover{background:#25313b}main{max-width:1372px;margin:0 auto;padding:0 24px}.game-shell{border:1px solid #45525b;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px #0003}.hud{height:82px;background:#e9e6dd;color:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:12px 30px;position:relative;z-index:3}.hud small{font-size:9px;font-weight:800;letter-spacing:.16em;display:block}.hud strong{font-size:34px;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-1.5px}.hud strong span{font-size:13px;margin-left:6px;letter-spacing:0}.race-name{text-align:center}.race-name>span{font-size:21px;letter-spacing:.08em;font-weight:950;font-style:italic}.race-name small{font-size:10px;letter-spacing:.05em;color:#6a746e;margin-top:5px}.rank{text-align:right}#stage{height:clamp(330px,47vh,570px);position:relative;background:#b9c5bc;isolation:isolate;overflow:hidden}#stage>canvas{display:block;position:absolute;width:100%;height:100%;inset:0}#fallback{display:none}#masks,#runner-labels{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}.runner-label{position:absolute;white-space:nowrap;color:#fff;font:800 10px system-ui;text-shadow:0 1px 3px #0009;border-radius:4px;background:#26323ccc;padding:3px 6px;transform:translate(-50%,-100%)}.runner-label.you{color:#1b2822;background:var(--mint);font-size:11px}#countdown{position:absolute;left:0;right:0;top:16px;text-align:center;font-size:clamp(28px,4vw,44px);line-height:1;font-weight:950;font-style:italic;color:var(--mint);text-shadow:0 5px 0 #142027,0 0 40px #0004;z-index:5;pointer-events:none}#loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--ink);z-index:20;font-size:15px;color:var(--mint)}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;padding:24px 36px;background:linear-gradient(90deg,#13212ae8 0%,#13212ac9 33%,#13212a10 78%);z-index:4}.card{width:330px;max-width:100%}.eyebrow{color:var(--mint);font-weight:700;font-size:11px;letter-spacing:.08em}h1{font-size:clamp(36px,4.3vw,58px);font-weight:950;line-height:1.12;letter-spacing:-.05em;margin:14px 0}h2{font-size:32px;font-weight:900;letter-spacing:-.05em;margin:12px 0}.card p{font-size:12px;line-height:1.9;color:#c1ced2;margin:0 0 16px}.distance-picker{display:flex;gap:8px;margin-bottom:13px}.distance-picker button{background:#eef1e610;color:#b9c4c7;border:1px solid #60716c;font-size:19px;font-weight:900;border-radius:5px;padding:6px 15px}.distance-picker button span{font-size:10px;margin-left:3px}.distance-picker button.selected{background:var(--mint);color:var(--ink);border-color:var(--mint)}.primary{background:var(--mint);color:var(--ink);width:100%;border-radius:6px;padding:13px 17px;display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:850}.primary:hover{background:#e0ffad}.text-button{display:block;margin:8px auto 0;background:transparent;color:#d4e0dd;font-size:11px;padding:6px}.micro{display:block;text-align:center;color:#839b9e;font-size:9px;margin-top:8px}.hidden{display:none!important}.race-map{display:flex;height:28px;background:#1e2a33;align-items:center;padding:0 15px;gap:14px}.map-label{color:#92a1a7;font-size:8px;font-weight:800;letter-spacing:.08em}#map-runners{position:relative;flex:1;height:2px;background:#55656b}.map-dot{position:absolute;top:-3px;width:7px;height:7px;border-radius:100%;background:#e9b9a0;transform:translateX(-50%)}.map-dot.you{background:var(--mint);width:10px;height:10px;top:-4px;z-index:1;box-shadow:0 0 0 3px #cdfa8033}.controls{max-width:790px;margin:19px auto 0}.rhythm-row{display:flex;align-items:center;min-height:17px;margin:0 3px 9px}.rhythm-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#feedback{font-size:13px;font-weight:800;display:block}#feedback[data-kind="bad"]{color:#ff9b7c}#feedback[data-kind="good"]{color:var(--mint)}#combo{display:block;font-size:9px;color:var(--muted);margin-top:4px}.beat{height:17px;flex:1 1 100%;min-width:0;background:#26363d;border-radius:4px;position:relative;overflow:hidden}#beat-fill{position:absolute;inset:0 auto 0 0;width:0;background:#799765}.hit-zone{position:absolute;top:0;bottom:0;left:52%;width:27%;background:#cdfa8035;border-left:1px solid #cdfa8080;border-right:1px solid #cdfa8080}.beat-line{position:absolute;top:0;bottom:0;left:66%;width:2px;background:var(--mint)}.feet{display:flex;gap:14px}.foot{flex:1;display:flex;align-items:center;position:relative;gap:16px;background:#25343d;color:#d6e0dd;border:1px solid #495d64;border-radius:12px;padding:14px 23px;text-align:left;user-select:none;touch-action:none;transition:background .08s,transform .07s,border-color .08s}.foot .foot-icon{font-size:36px;line-height:1;font-weight:950;font-style:italic;color:#80978b}.foot>span:nth-child(2){font-size:16px;font-weight:850}.foot small{font-size:10px;color:#8fa2aa;display:block;margin-top:4px;letter-spacing:.1em}.foot i{font-size:9px;font-style:normal;letter-spacing:.15em;position:absolute;right:16px;color:var(--mint);font-weight:800}.foot.next{border-color:var(--mint);box-shadow:inset 0 0 0 1px #cdfa8030}.foot.next .foot-icon{color:var(--mint)}.foot:active,.foot.pressed{background:#3d553e;transform:translateY(2px)}.help{display:flex;justify-content:space-between;margin:10px 3px 0;font-size:9px;color:#81959f}.help>span:last-child{font-weight:750;letter-spacing:.04em}footer{max-width:1372px;margin:26px auto 0;padding:0 27px 18px;display:flex;justify-content:space-between;font-size:9px;color:#6b808b}.result-time{font-size:65px;font-weight:950;letter-spacing:-3px;color:var(--mint);line-height:1.2}.result-time small{font-size:22px;margin-left:7px;letter-spacing:0}.result-details{font-size:12px;line-height:2;color:#dce5e1;margin:10px 0}.best{color:var(--mint)!important;font-weight:800}.demo-banner{color:#edcc78!important}
@media(max-width:650px){header{padding:14px 15px 13px}.brand-mark{height:36px;width:38px;font-size:21px}.brand b{font-size:14px}.brand small{font-size:7px;letter-spacing:.15em}.header-actions{gap:5px}.quiet{font-size:10px;padding:8px}.brand{gap:9px}main{padding:0 10px}.game-shell{border-radius:12px}.hud{height:66px;padding:10px 15px}.hud strong{font-size:27px}.hud small{font-size:8px}.race-name>span{font-size:16px}.race-name small{font-size:8px}#stage{height:45vh;min-height:350px;max-height:470px}.overlay{padding:21px;background:linear-gradient(90deg,#13212ae5,#13212abb 45%,#13212a15)}.card{width:255px}h1{font-size:41px;margin:11px 0}.card p{font-size:10px;margin-bottom:12px}.eyebrow{font-size:9px}.primary{font-size:12px;padding:11px 13px}.distance-picker{margin-bottom:11px}.distance-picker button{font-size:17px;padding:5px 13px}.micro{font-size:8px}.controls{margin:14px 7px 0}.rhythm-row{min-height:17px;margin-bottom:9px}#feedback{font-size:11px}#combo{font-size:8px}.feet{gap:10px}.foot{padding:13px 17px;gap:12px;border-radius:9px}.foot .foot-icon{font-size:32px}.foot>span:nth-child(2){font-size:14px}.foot i{right:10px;font-size:7px}.foot small{font-size:9px}.help{font-size:8px;line-height:1.6;gap:10px}.help>span:first-child{max-width:65%}footer{padding:0 19px 15px;margin:20px 0 0;font-size:8px;gap:20px}footer span:last-child{text-align:right;max-width:46%}.result-time{font-size:54px}h2{font-size:28px}}
@media(max-height:650px) and (min-width:651px){header{padding-top:10px;padding-bottom:10px}#stage{height:330px}.hud{height:60px}.controls{margin-top:12px}h1{font-size:36px;margin:7px 0}.card p{font-size:11px;margin-bottom:8px}.overlay{padding:15px 30px}.micro{display:none}.foot{padding:9px 20px}footer{margin-top:15px}}

/* Finish results sit below the front-facing lineup, never over its mosaics. */
.overlay.finish-overlay{inset:auto 0 0;min-height:105px;padding:10px 18px;background:#15242bea;align-items:center;justify-content:center}.finish-overlay .card{width:100%;display:grid;grid-template-columns:1fr auto auto;gap:5px 18px;align-items:center}.finish-overlay .eyebrow{grid-column:1}.finish-overlay h2{font-size:18px;margin:0;grid-column:1}.finish-overlay .result-time{grid-column:2;grid-row:1/3;font-size:36px}.finish-overlay .result-details{grid-column:1/3;font-size:10px;line-height:1.4;margin:0}.finish-overlay .best{grid-column:1/3;margin:0;font-size:9px;line-height:1.3}.finish-overlay .primary{grid-column:3;grid-row:1/3;font-size:12px;width:165px}.finish-overlay .text-button{grid-column:3;grid-row:3/5;margin:0}.finish-overlay .result-time small{font-size:15px}@media(max-width:650px){.overlay.finish-overlay{padding:8px 10px;min-height:105px}.finish-overlay .card{gap:4px 7px}.finish-overlay h2{font-size:14px}.finish-overlay .result-time{font-size:29px}.finish-overlay .result-details{font-size:8px}.finish-overlay .primary{width:104px;font-size:10px;padding:9px}.finish-overlay .best{font-size:8px}.finish-overlay .text-button{font-size:9px}}

#cinematic-label{position:absolute;left:18px;top:18px;z-index:3;padding:7px 11px;background:#15242bdb;color:var(--mint);border-radius:5px;font-size:13px;font-weight:800;pointer-events:none}#skip-cinematic{position:absolute;right:15px;bottom:15px;z-index:6;background:#15242bea;color:#f5f5e9;border-color:#b6ccab;font-size:11px;cursor:pointer}@media(max-width:650px){#cinematic-label{font-size:10px;left:10px;top:10px}#skip-cinematic{font-size:10px;right:10px;bottom:10px}}

.runner-label.winner{background:#fff1a4;color:#17334c;font-size:clamp(13px,1.6vw,20px);padding:5px 10px;border:2px solid #fff;box-shadow:0 2px 8px #0005;}

/* Explicit, muted-first Adobe audio control. Touch target stays at least 44px. */
#sound{min-height:44px;min-width:68px;font-size:12px;white-space:nowrap}#sound[aria-pressed="true"]{border-color:var(--mint);color:var(--mint)}#sound[aria-busy="true"]{border-style:dashed}.sound-status{max-width:1372px;margin:-8px auto 10px;padding:0 27px;color:#a6b7c2;text-align:right;font-size:10px;line-height:1.5}@media(max-width:650px){.sound-status{padding:0 15px;margin:-5px auto 9px;font-size:10px}#sound{min-width:66px;padding:8px 7px}.header-actions{align-items:center}}
@media(max-width:380px){header{flex-wrap:wrap;gap:8px}.header-actions{margin-left:auto}.sound-status{text-align:left}}

/* Brief accepted-input cue, confined to the existing timing line and zone.
   Native foot sparkles are separate depth-tested world geometry. */
.beat.step-success .beat-line{background:#fff8d5;box-shadow:0 0 5px 1px #ffd66e}
.beat.step-success .hit-zone{background:#ffe6a54d;border-color:#ffe6a5}
.beat.step-perfect .beat-line{background:#fffef0;box-shadow:0 0 7px 1px #ffe6a0}

.digest-controls{position:absolute;z-index:30;left:8px;right:8px;bottom:10px;display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;padding:8px;background:#172a31e8;border-radius:10px;color:#f6ffe9;font-size:12px}.digest-controls button{padding:7px 10px;font-size:12px}.digest-controls.hidden{display:none}#watch-digest{margin-bottom:8px}#digest-note{display:block;margin:0 0 10px;font-size:11px;line-height:1.4}
/* Keep the existing 105px result-safe composition: stack the two actions in
   the already reserved right column instead of creating overlapping grid cells. */
.finish-overlay #watch-digest{grid-column:3;grid-row:1;margin:0;padding:6px 9px;font-size:11px;min-height:28px}.finish-overlay #retry{grid-column:3;grid-row:2;padding:6px 9px;min-height:28px}.finish-overlay #digest-note{display:none}.finish-overlay #back{grid-column:3;grid-row:3/5}.digest-controls button{min-height:44px}.digest-controls #digest-status{font-variant-numeric:tabular-nums}@media(max-width:650px){.finish-overlay #watch-digest{font-size:9px;padding:5px}.digest-controls{gap:4px;padding:6px;bottom:6px}.digest-controls #digest-status{flex-basis:100%;text-align:center;font-size:10px}.digest-controls button{font-size:10px;padding:6px 8px}}

/* V20: compact title presentation; race controls and audio behavior unchanged. */
.header-logo{display:block;width:180px;height:auto}.title-logo{margin:0 0 30px;line-height:1}.title-logo img{display:block;width:100%;height:auto}.title-screen #overlay{justify-content:center;text-align:center;background:linear-gradient(180deg,#12232b66,#12232bbb)}#ready-card{width:min(680px,100%)}#ready-card .primary{width:min(290px,100%);min-height:54px;margin:auto;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800}.title-screen .hud,.title-screen .race-map,.title-screen .controls,.title-screen #pause{display:none}.title-screen #stage{height:calc(100svh - 105px);min-height:300px;max-height:740px}.title-screen .header-logo{visibility:hidden}footer[hidden],.sound-status[hidden],[hidden]{display:none!important}@media(max-width:650px){.header-logo{width:145px}.title-logo{margin-bottom:30px}#ready-card .primary{font-size:15px;min-height:52px;width:230px}.title-screen .overlay{padding:18px}.title-screen #stage{height:calc(100svh - 88px);min-height:260px;max-height:800px}}@media(max-height:450px) and (orientation:landscape){.title-screen #stage{height:calc(100svh - 79px);min-height:200px}.title-screen .title-logo{max-width:450px;margin:0 auto 15px}.title-screen .overlay{padding:10px}}

/* V21: no camera shot/debug badges; keep controls, names and race numbers. */
#cinematic-label{display:none!important}.help{justify-content:flex-end}
#digest-video-status:empty{display:none}#digest-video-status{font-size:11px;line-height:1.35}#digest-video-link{color:#c8ff7c;font-size:12px}.finish-overlay #save-digest-result{grid-column:3;grid-row:3;min-height:32px;padding:5px 8px;font-size:11px}.finish-overlay #back{grid-row:4/6}.finish-overlay #digest-video-link,.finish-overlay #digest-video-status{grid-column:1/4}.digest-controls #cancel-digest-save.hidden{display:none}

#ready-card .distance-picker{display:flex;justify-content:center;gap:12px;margin:20px auto 4px}#ready-card .distance-picker button{min-width:132px;border:1px solid #78917d;border-radius:12px;background:#192a32;color:#e9eee7;padding:12px 20px;font-size:26px;font-weight:900;cursor:pointer}#ready-card .distance-picker button small{display:block;margin-top:5px;font-size:10px;font-weight:600;color:#b9c9c1}#ready-card .distance-picker button.selected{color:#14242b;background:#cdfa80;border-color:#cdfa80}#ready-card .distance-picker button.selected small{color:#39552d}#ready-card .distance-picker button:focus-visible{outline:3px solid white;outline-offset:3px}



/* Keep the pause menu sized to its two short actions. */
#overlay:has(#pause-card:not(.hidden)){justify-content:center}
#pause-card{width:160px;text-align:center}
#pause-card .primary{justify-content:center;min-height:52px;font-size:20px}
#pause-card .text-button{min-height:44px}

/* Result: centered time, digest as the primary action, compact supporting text. */
.finish-overlay .card{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto;gap:4px 18px}
.finish-overlay #result-kicker{display:none}
.finish-overlay #result-title{grid-column:1;grid-row:1;margin:0}
.finish-overlay #result-details{grid-column:1;grid-row:2;margin:0;white-space:normal!important}
.finish-overlay #best-result{grid-column:1;grid-row:3;margin:0}
.finish-overlay #result-time{grid-column:2;grid-row:1/4;justify-self:center;text-align:center;font-size:clamp(32px,4.8vw,64px);white-space:nowrap;letter-spacing:-.05em}
.finish-overlay #watch-digest{grid-column:3;grid-row:1;width:100%;min-height:44px;justify-content:center;font-size:clamp(20px,2.4vw,30px);padding:8px 12px}
.finish-overlay #retry{grid-column:3;grid-row:2;width:100%;min-height:32px;justify-content:center;font-size:15px;padding:5px 12px}
.finish-overlay .result-links{grid-column:3;grid-row:3;display:flex;justify-content:space-between;align-items:stretch;gap:8px}
.finish-overlay .result-links .text-button{flex:1 1 auto;margin:0;padding:8px 10px;min-height:36px;border:1px solid #718995;border-radius:6px;background:#30444f;color:#f0f6f4;font-size:10px;font-weight:700;white-space:nowrap}.finish-overlay .result-links .text-button:hover{background:#405965}.finish-overlay .result-links .text-button:active{background:#243943}
@media(max-width:650px){.finish-overlay .card{gap:4px 7px}.finish-overlay #result-time{font-size:clamp(26px,7.5vw,44px)}.finish-overlay #watch-digest{font-size:clamp(12px,4vw,17px);padding:7px 4px}.finish-overlay #retry{font-size:12px}.finish-overlay .result-links{flex-wrap:wrap;gap:4px 6px;justify-content:center}.finish-overlay .result-links .text-button{flex-basis:100%;font-size:9px;min-height:32px;padding:6px}.finish-overlay #result-details{font-size:8px}}

@media(max-width:650px){.finish-overlay #result-title{font-size:clamp(10px,3.2vw,14px);white-space:nowrap}}

/* Fixed player cadence: clear foot prompts, local rewards, no camera shake. */
.rhythm-guide{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:62px;padding:10px 16px;margin:0 0 10px;border:1px solid #4d6558;border-radius:12px;background:#1b302c;color:#d9e8dc}.rhythm-guide strong{display:block;font-size:27px;line-height:1.12;font-weight:900;letter-spacing:.01em}.rhythm-guide small{display:block;margin-top:5px;font-size:11px;color:#a5bdaf}.rhythm-guide.cue-now{background:#cdfa80;border-color:#cdfa80;color:#152820}.rhythm-guide.cue-now small{color:#3a5a2e}.rhythm-guide.cue-pending strong{font-size:24px;color:#cdfa80}.rhythm-boost{width:140px;flex-shrink:0;text-align:right}.rhythm-boost b{font-size:15px;letter-spacing:.02em}.rhythm-boost>span{display:block;height:9px;background:#0a171b80;border-radius:20px;margin-top:7px;overflow:hidden}.rhythm-boost i{display:block;width:0;height:100%;background:#e9bd57;border-radius:20px;transition:width .14s ease-out}.rhythm-guide.boost-full .rhythm-boost b{color:#ffd66e}.rhythm-guide.cue-now.boost-full .rhythm-boost b{color:#724000}.rhythm-guide.rhythm-hot:not(.cue-now){border-color:#dfb65e}.foot.rhythm-now{background:#cdfa80;color:#182a24;border-color:#e6ffbe;box-shadow:0 0 0 3px #cdfa8028}.foot.rhythm-now .foot-icon,.foot.rhythm-now i{color:#263e26}.foot.rhythm-wait{border-color:#86a966}.foot.rhythm-hit{background:#f0d57d;color:#172923;transform:translateY(2px)}.foot.rhythm-now i,.foot.rhythm-wait i{font-size:17px;letter-spacing:.02em}.rhythm-perfect{color:#ffe187!important;text-shadow:0 0 14px #ecc86755}.rhythm-pop .rhythm-boost b{animation:rhythm-reward .18s ease-out}@keyframes rhythm-reward{from{transform:scale(1.13)}to{transform:scale(1)}}
@media(max-width:650px){.rhythm-guide{min-height:58px;padding:9px 12px;gap:9px}.rhythm-guide strong{font-size:23px}.rhythm-guide small{font-size:10px;letter-spacing:-.025em}.rhythm-boost{width:91px}.rhythm-boost b{font-size:12px}.foot.rhythm-now i,.foot.rhythm-wait i{font-size:13px}#feedback.rhythm-perfect{font-size:20px}}
@media(prefers-reduced-motion:reduce){.rhythm-pop .rhythm-boost b{animation:none}.rhythm-boost i{transition:none}.foot.rhythm-hit{transform:none}}

body.rhythm-playing .rhythm-row{gap:18px;min-height:44px;margin-bottom:9px}
body.rhythm-playing .rhythm-status{position:static;width:auto;height:auto;clip:auto;padding:0;margin:0;overflow:visible;white-space:normal;min-width:190px}
body.rhythm-playing #feedback{font-size:24px;line-height:1.05;font-style:italic;font-weight:900}
body.rhythm-playing #combo{font-size:12px;line-height:1.2;margin-top:4px;color:#b2c5b7}
body.rhythm-playing .beat{height:17px;flex:1;min-width:50px}
body.rhythm-playing .rhythm-guide{line-height:1.2}
@media(max-width:650px){body.rhythm-playing .rhythm-row{gap:10px;min-height:39px}body.rhythm-playing .rhythm-status{min-width:133px}body.rhythm-playing #feedback{font-size:21px}body.rhythm-playing #combo{font-size:10px}}

/* Keep the timing area visual: the beat and foot highlights carry the cue. */
body.rhythm-playing .rhythm-status{position:absolute;width:1px;height:1px;min-width:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
body.rhythm-playing .rhythm-guide{display:none}
body.rhythm-playing .rhythm-row{min-height:17px;gap:0}
body.rhythm-playing .beat{flex:1 1 100%;min-width:0}
.foot i{display:none}

/* Readiness colors use the same accepted window as the input judge. */
body.rhythm-playing .beat.rhythm-waiting{background:#423a29}
body.rhythm-playing .beat.rhythm-waiting #beat-fill{background:#ae8c43}
body.rhythm-playing .beat.rhythm-open{background:#426b35;box-shadow:0 0 0 2px #cdfa80}
body.rhythm-playing .beat.rhythm-open #beat-fill{background:#a4d75e}
body.rhythm-playing .beat.rhythm-open .hit-zone{background:#cdfa8059}
body.rhythm-playing .beat.rhythm-open .beat-line{background:#fffde8}
body.rhythm-playing .beat.rhythm-queued{background:#62502d;box-shadow:0 0 0 2px #f0d57d}
body.rhythm-playing .beat.rhythm-queued #beat-fill{background:#d6b657}
body.rhythm-playing .foot.rhythm-wait{border-color:#c6a657}
body.rhythm-playing .foot.rhythm-queued{background:#f0d57d;color:#172923;border-color:#fff0b4}
body.rhythm-playing .foot.rhythm-queued .foot-icon{color:#5b4820}

/* Bounded success bursts; no text, camera shake, or full-screen flash. */
.foot.rhythm-hit{overflow:hidden;--burst-color:#f0ffd8;background:#b7e96f;box-shadow:inset 0 0 18px #e4ffb877,0 0 12px #cdfa8059;z-index:1}
.foot.rhythm-perfect-hit{--burst-color:#fffdf0;background:#f0bc48;box-shadow:inset 0 0 24px #fff3bbaa,0 0 18px #ffd76f88;border-color:#fff4c9}
.foot.rhythm-hit::before,.foot.rhythm-hit::after{content:"";position:absolute;left:48px;top:50%;pointer-events:none;color:var(--burst-color);opacity:0;transform:translate(-50%,-50%);z-index:2}
.foot.rhythm-hit::before{width:100px;height:100px;background:repeating-conic-gradient(from 8deg,currentColor 0deg 5deg,transparent 5deg 30deg);mask:radial-gradient(circle,transparent 0 24%,#000 26% 44%,transparent 46%);animation:step-rays .24s ease-out both}
.foot.rhythm-hit::after{width:58px;height:58px;border:3px solid currentColor;border-radius:50%;animation:step-ring .24s ease-out both}
.foot.rhythm-perfect-hit::before{width:116px;height:116px;animation-duration:.32s;filter:drop-shadow(0 1px 1px #8c6411)}
.foot.rhythm-perfect-hit::after{border-width:4px;box-shadow:0 0 3px #8c641177;animation-duration:.32s}
@keyframes step-rays{0%{opacity:1;transform:translate(-50%,-50%) scale(.35) rotate(-12deg)}65%{opacity:.85}100%{opacity:0;transform:translate(-50%,-50%) scale(1) rotate(9deg)}}
@keyframes step-ring{0%{opacity:1;transform:translate(-50%,-50%) scale(.25)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.55)}}
@media(prefers-reduced-motion:reduce){.foot.rhythm-hit::before,.foot.rhythm-hit::after{animation:none;display:none}.foot.rhythm-hit{transform:none}}

/* Reserve the controls before the intro; never resize the view on SET. */
body:not(.title-screen) #stage{height:min(clamp(330px,47vh,570px),calc(100svh - 335px));min-height:100px}
@media(max-width:650px){body:not(.title-screen) #stage{height:min(clamp(350px,45vh,470px),calc(100svh - 300px))}}
@media(max-height:650px) and (min-width:651px){body:not(.title-screen) #stage{height:min(330px,calc(100svh - 280px))}}

#spectate-unfinished{position:absolute;z-index:6;left:50%;bottom:15px;transform:translateX(-50%);max-width:calc(100% - 24px);min-height:44px;padding:10px 18px;background:var(--mint);color:var(--ink);border:1px solid var(--mint);font-size:14px;font-weight:800;white-space:nowrap;cursor:pointer}
#spectate-unfinished:disabled{cursor:default;opacity:.65}
@media(max-width:650px){#spectate-unfinished{bottom:10px;font-size:12px;padding:9px 12px}}