.cover.results-view #speedQuick,.cover.results-view #start,.cover.results-view #restart,.cover.results-view #songPicker{display:none!important}
.cover.results-view{align-items:flex-start;padding-top:24px}
.cover.results-view .cover-content{max-width:560px}
.cover.results-view h2{font-size:26px;margin:8px 0 16px}
.results-view .results{gap:12px}
.result-ranking{width:100%;margin-top:8px;padding-top:16px;border-top:1px solid var(--line);text-align:left}
.result-ranking .result-song{margin:0 0 10px;font-size:13px;color:#e8edf6;line-height:1.5;overflow-wrap:anywhere}
.result-position{display:block;font-size:22px;color:var(--accent);font-weight:700;line-height:1.5}
.result-ranking .result-rank-status{margin:6px 0 20px;color:var(--muted);font-size:12px;line-height:1.6}
.result-ranking h3{font-size:12px;letter-spacing:1px;font-weight:600;margin:0 0 10px;color:#d4d9e1}
.result-board{list-style:none;margin:0;padding:0}
.result-board li{display:flex;gap:12px;align-items:center;min-height:38px;padding:8px;border-bottom:1px solid #ffffff12;font-size:13px}
.result-board .is-me{background:#ffffff0b;border-radius:7px;box-shadow:inset 0 0 0 1px var(--accent)}
.result-no{width:25px;flex:none;color:var(--muted);font-family:Consolas,monospace}
.result-board li:nth-child(-n+3) .result-no{color:var(--accent)}
.result-player{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e8edf6}
.result-points{font-family:Consolas,monospace;font-weight:600;color:#f5f6fa}
.result-combo{font-family:Consolas,monospace;color:#9fb0cc;white-space:nowrap}
.result-acc{font-family:Consolas,monospace;font-weight:600;color:#7cb8ff;white-space:nowrap}
.result-empty{color:var(--muted)}
@media(max-width:500px){.cover.results-view{padding:16px 12px}.result-position{font-size:19px}.results-view .res-row{gap:20px}}

.cover.results-view{background:rgba(10,14,22,.94)}body.theme-7key .cover.results-view{background:rgba(18,18,18,.94)}

.results-view #coverTitle .result-position{font-size:clamp(20px,3vw,26px);text-align:center}

.song-picker #speedQuick{margin:2px 0 0;flex-shrink:0}
.picker-rank-title{font-size:12px;letter-spacing:1px;font-weight:600;margin:0 0 10px;color:#d4d9e1}
.picker-board{max-height:240px;overflow-y:auto}

/* Song information bar: speed controls replace the inactive pause button while selecting. */
.songbar{gap:12px}
.songbar>div:first-child{min-width:0}
.songbar #speedQuick{margin:0;gap:7px;flex:0 0 auto;flex-wrap:nowrap}
.songbar #speedQuick .sq-btn{width:34px;min-height:34px;font-size:18px}
.songbar #speedQuick .sq-val{min-width:42px;font-size:14px}
.songbar #speedQuick .speed-quick-label{font-size:11px;white-space:nowrap}
@media(max-width:600px){.songbar{flex-wrap:wrap}.songbar #speedQuick{margin-left:auto}.songbar #speedQuick .speed-quick-label{display:none}}

/* Compact selection header: avoid stacking row gap and progress margin. */
body:not(.playing) .songbar{row-gap:4px;padding-bottom:6px}
body:not(.playing) .songbar>.progress{margin-top:2px}


/* Keep speed text readable against bright song backgrounds. */
.songbar #speedQuick{ text-shadow:0 1px 2px rgba(0,0,0,.95),0 2px 6px rgba(0,0,0,.8); }
.songbar #speedQuick .sq-btn{ text-shadow:0 1px 2px rgba(0,0,0,.95),0 2px 6px rgba(0,0,0,.8); }

/* Speed label follows the song title's responsive font size. */
.songbar #speedQuick .speed-quick-label{display:inline;font-size:18px}
@media(max-width:759px){.songbar #speedQuick .speed-quick-label{font-size:16px}}
@media(max-height:480px) and (orientation:landscape){.songbar #speedQuick .speed-quick-label{font-size:14px}}

.songbar #speedQuick .speed-quick-label{color:#fff}


/* Place the selected-song panel 5px below the playfield top. */
.cover:has(#songPicker:not([hidden])){padding-top:5px;align-items:flex-start}


/* Selected-song layer uses the full playfield width. */
.cover:has(#songPicker:not([hidden])){padding-left:0;padding-right:0}
.cover:has(#songPicker:not([hidden])) .cover-content{width:90%;max-width:none}
#songPicker{width:100%;padding:0 12px}
#songPicker .cd-meta{flex:1;max-width:none}
#songPicker .cd-rank,#songPicker .cd-diffs{max-width:none}


/* Reserve text width so matching the CD to its height never causes resize feedback. */
#songPicker .cd-row{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);align-items:center}
#songPicker .cd-wrap{width:min(100%,var(--cd-diameter,180px));justify-self:end;aspect-ratio:1;}
#songPicker .cd-meta{width:100%}

/* Center the song-selection leaderboard, capped at 600px. */
#songPicker .cd-rank{width:100%;max-width:600px;margin-left:auto;margin-right:auto}

/* Selecting a song: drop the "click to enable sound" footer and pin the info panel to the bottom. */
body.picking #cover{align-items:flex-end;padding-bottom:0}
body.picking .game-footer{display:none}


/* Counts belong to the displayed best-score play. */
.picker-board li{flex-wrap:wrap;gap:6px 12px}
.picker-board .rank-judgments{flex:0 0 100%;display:flex;flex-wrap:wrap;gap:5px 14px;padding-left:37px;font-size:11px;font-family:Consolas,monospace;line-height:1.6}
.rank-judgments span{white-space:nowrap}
.rank-judge-ap{color:#ffd166}.rank-judge-perfect{color:#8edcff}.rank-judge-good{color:#91deac}.rank-judge-bad{color:#e6b5f0}.rank-judge-miss{color:#ff9292}
@media(max-width:500px){.picker-board li{gap:5px 7px}.picker-board .rank-judgments{padding-left:32px;gap:4px 10px}}

.record-play{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:30px;min-height:30px;border:1px solid #4698d9;border-radius:6px;color:#78c7ff;background:#142b43;text-decoration:none;font-size:13px;line-height:1}.record-play:hover{background:#246cba;color:#fff}.record-play:focus-visible{outline:2px solid #9bd8ff;outline-offset:3px}