/* Song browsing scales with CSS viewport space, independently of gameplay. */
@media(min-width:760px) and (min-height:500px){
 body.song-browsing{--browse-unit:clamp(1px,.0651vw,2.5px)}
 body.song-browsing .layout{grid-template-columns:minmax(0,1fr) clamp(280px,21vw,800px);gap:clamp(16px,1.4vw,48px)}
 body.song-browsing .settings{padding:clamp(12px,1vw,36px);font-size:calc(13 * var(--browse-unit))}
 body.song-browsing .settings :is(button,input){font-size:calc(12 * var(--browse-unit))}
 body.song-browsing .settings .eyebrow{font-size:calc(10 * var(--browse-unit))}
 body.song-browsing .song-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(10 * var(--browse-unit))}
 body.song-browsing .song-card{min-width:0}
 body.song-browsing .song-cover{width:100%;height:auto;aspect-ratio:1}
 body.song-browsing .song-cover img{width:100%;height:100%;object-fit:cover}
 body.song-browsing .song-info{padding:calc(8 * var(--browse-unit))}
 body.song-browsing .song-name{font-size:calc(12 * var(--browse-unit));line-height:1.35}
 body.song-browsing .song-meta{font-size:calc(10 * var(--browse-unit))}
 body.song-browsing .song-diffs{gap:calc(3 * var(--browse-unit));flex-wrap:wrap}
 body.song-browsing .song-diffs .diff-btn{font-size:calc(10 * var(--browse-unit));padding:calc(4 * var(--browse-unit))}
 body.song-browsing .song-diffs small{font-size:calc(9 * var(--browse-unit))}
 body.song-browsing.picking #cover{align-items:flex-start;padding:clamp(20px,3vh,64px) clamp(16px,3vw,100px);overflow-y:auto;touch-action:pan-y}
 body.song-browsing.picking #cover .cover-content{width:100%;max-width:1400px;margin:0 auto}
 body.song-browsing #songPicker{padding:0;width:100%}
 body.song-browsing #songPicker .cd-row{grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:clamp(20px,2.4vw,80px);align-items:center}
 body.song-browsing #songPicker .cd-wrap{width:min(100%,clamp(180px,18vw,600px));justify-self:center}
 body.song-browsing #songPicker .cd-meta{gap:calc(10 * var(--browse-unit))}
 body.song-browsing #songPicker .cd-title{font-size:clamp(26px,2.1vw,76px);line-height:1.2;margin:0}
 body.song-browsing #songPicker .cd-meta p{font-size:calc(13 * var(--browse-unit));line-height:1.5;margin:calc(4 * var(--browse-unit)) 0}
 body.song-browsing #songPicker .picker-launch-layout{margin:calc(24 * var(--browse-unit)) auto;grid-template-columns:minmax(0,max-content) minmax(150px,24%);gap:calc(18 * var(--browse-unit))}
 body.song-browsing #songPicker .picker-diff{font-size:calc(15 * var(--browse-unit));min-height:calc(60 * var(--browse-unit));padding:calc(9 * var(--browse-unit)) calc(14 * var(--browse-unit))}
 body.song-browsing #songPicker .picker-diff small{font-size:calc(11 * var(--browse-unit))}
 body.song-browsing #songPicker .picker-start{font-size:calc(22 * var(--browse-unit))}
 body.song-browsing #songPicker .lane-items{flex-wrap:wrap;gap:calc(6 * var(--browse-unit))}
 body.song-browsing #songPicker .lane-items :is(button,label){font-size:calc(12 * var(--browse-unit))}
 body.song-browsing #songPicker .lane-items small{font-size:calc(10 * var(--browse-unit))}
 body.song-browsing #songPicker .cd-rank{max-width:none;width:100%;margin-top:calc(24 * var(--browse-unit))}
 body.song-browsing #songPicker .picker-rank-title{font-size:calc(13 * var(--browse-unit))}
 body.song-browsing #songPicker .picker-board{max-height:30vh}
 body.song-browsing #songPicker .picker-board li{font-size:calc(13 * var(--browse-unit));padding:calc(9 * var(--browse-unit))}
 body.song-browsing #songPicker .rank-judgments{font-size:calc(11 * var(--browse-unit))}
}
@media(min-width:760px) and (max-width:1100px){
 body.song-browsing #songPicker .picker-launch-layout{display:flex;flex-direction:column;align-items:stretch}
 body.song-browsing #songPicker .picker-options{display:block}
 body.song-browsing #songPicker .picker-start{min-height:52px;flex:auto}
 body.song-browsing #songPicker .cd-row{grid-template-columns:minmax(0,35%) minmax(0,1fr);gap:16px}
}
@media(max-width:759px){
 body.song-browsing #songPicker .cd-wrap{width:100%;max-width:240px}
 body.song-browsing #songPicker .cd-row{gap:16px}
 body.song-browsing #songPicker .cd-title{font-size:clamp(20px,5vw,30px)}
 body.song-browsing.picking #cover{overflow-y:auto;touch-action:pan-y;align-items:flex-start;padding:16px 8px}
}

/* Browsing header/actions share the same scale as the preview and song cards. */
body.song-browsing{--browse-unit:clamp(1px,.0651vw,2.5px)}
body.song-browsing .songbar{padding:calc(12 * var(--browse-unit)) calc(18 * var(--browse-unit));gap:calc(10 * var(--browse-unit))}
body.song-browsing .songbar h1{font-size:calc(20 * var(--browse-unit));line-height:1.3;margin:0;overflow-wrap:anywhere}
body.song-browsing .songbar>div:first-child{flex:1 1 45%;min-width:0}
body.song-browsing .songbar #speedQuick{gap:calc(7 * var(--browse-unit));flex:0 0 auto;max-width:100%}
body.song-browsing .songbar #speedQuick .speed-quick-label{font-size:calc(16 * var(--browse-unit))}
body.song-browsing .songbar #speedQuick .sq-val{font-size:calc(15 * var(--browse-unit));min-width:calc(44 * var(--browse-unit))}
body.song-browsing .songbar #speedQuick .sq-btn{width:calc(34 * var(--browse-unit));min-height:calc(34 * var(--browse-unit));font-size:calc(22 * var(--browse-unit))}
body.song-browsing .settings .section-heading{display:flex;flex-wrap:wrap;align-items:center;gap:calc(10 * var(--browse-unit))}
body.song-browsing .settings .section-heading .head-actions{min-width:0;max-width:100%;margin-left:auto;gap:calc(8 * var(--browse-unit));flex-wrap:wrap}
body.song-browsing .settings :is(.login-info,.gear-button){font-size:calc(13 * var(--browse-unit));padding:calc(9 * var(--browse-unit)) calc(12 * var(--browse-unit));min-height:calc(36 * var(--browse-unit));line-height:1.3;border-radius:calc(7 * var(--browse-unit))}
body.song-browsing .settings .login-info{max-width:100%;overflow:hidden;text-overflow:ellipsis}
body.song-browsing .settings .eyebrow{font-size:calc(11 * var(--browse-unit));line-height:1.5}
body.song-browsing .settings .mode-tabs{margin-top:calc(14 * var(--browse-unit));gap:calc(6 * var(--browse-unit));padding:calc(4 * var(--browse-unit))}
body.song-browsing .settings .mode-tab{font-size:calc(14 * var(--browse-unit));padding:calc(10 * var(--browse-unit)) 0;min-height:calc(40 * var(--browse-unit))}
body.song-browsing .settings .library-actions{gap:calc(8 * var(--browse-unit));margin-top:calc(12 * var(--browse-unit))}
body.song-browsing .settings .library-actions :is(#openPowerRank,#favFilter,#openBattle){font-size:calc(14 * var(--browse-unit));min-height:calc(40 * var(--browse-unit));padding:calc(8 * var(--browse-unit)) calc(4 * var(--browse-unit));border-radius:calc(7 * var(--browse-unit))}
body.song-browsing .settings .song-search input{font-size:calc(13 * var(--browse-unit));min-height:calc(42 * var(--browse-unit));padding:calc(10 * var(--browse-unit)) calc(12 * var(--browse-unit))}

/* Home shares the browsing scale; no change to the in-game avatar. */
body.song-browsing #cover.avatar-ready{overflow-y:auto;touch-action:pan-y;padding:clamp(20px,3vh,64px) clamp(12px,2vw,60px)}
body.song-browsing #cover.avatar-ready .cover-content{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);width:94%;max-width:calc(900 * var(--browse-unit));gap:calc(16 * var(--browse-unit)) calc(32 * var(--browse-unit));margin:auto}
body.song-browsing #cover.avatar-ready #coverTitle{font-size:calc(30 * var(--browse-unit));white-space:normal;line-height:1.25;margin:0}
body.song-browsing #cover.avatar-ready #readyAccountAvatar{height:clamp(160px,30vh,640px);margin:0 auto calc(36 * var(--browse-unit));min-width:0}
body.song-browsing #readyAvatarBalance{font-size:calc(14 * var(--browse-unit));line-height:1.5;margin-top:calc(4 * var(--browse-unit))}
body.song-browsing #readyAvatarBalance a{margin-left:calc(10 * var(--browse-unit))}
body.song-browsing #cover.avatar-ready #start{font-size:calc(16 * var(--browse-unit));min-height:calc(52 * var(--browse-unit));padding:calc(14 * var(--browse-unit));line-height:1.4}
body.song-browsing #cover.avatar-ready #homeRecent{border:0;box-shadow:none;padding:calc(16 * var(--browse-unit));border-radius:calc(10 * var(--browse-unit))}
body.song-browsing #homeRecent h3{font-size:calc(18 * var(--browse-unit));margin:0 0 calc(16 * var(--browse-unit))}
body.song-browsing #homeRecent #recentScores{height:clamp(240px,38vh,800px)}
body.song-browsing #homeRecent .recent-scores-track li{height:calc(64 * var(--browse-unit));font-size:calc(14 * var(--browse-unit));padding:calc(8 * var(--browse-unit)) calc(4 * var(--browse-unit));gap:calc(6 * var(--browse-unit)) calc(10 * var(--browse-unit));line-height:1.3}
body.song-browsing #homeRecent .recent-scores-track li em{font-size:calc(14 * var(--browse-unit))}
body.song-browsing #homeRecent .recent-scores-track li small{font-size:calc(12 * var(--browse-unit))}
@media(max-width:850px){
 body.song-browsing #cover.avatar-ready .cover-content{grid-template-columns:minmax(0,1fr);gap:20px;width:100%}
 body.song-browsing #cover.avatar-ready #homeRecent{grid-column:1;grid-row:4}
 body.song-browsing #cover.avatar-ready #readyAccountAvatar{height:clamp(150px,28vh,260px)}
 body.song-browsing #homeRecent #recentScores{height:240px}
}

/* A single scroll container for song details and the complete leaderboard. */
body.song-browsing.picking #cover{overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#8796aa66 transparent}
body.song-browsing.picking #songPicker .picker-board{max-height:none;overflow:visible}
body.song-browsing.picking #cover::-webkit-scrollbar{width:6px}
body.song-browsing.picking #cover::-webkit-scrollbar-track{background:transparent}
body.song-browsing.picking #cover::-webkit-scrollbar-thumb{background:#8796aa66;border-radius:999px}
body.song-browsing.picking #cover::-webkit-scrollbar-thumb:hover{background:#a8b8ccaa}
body.song-browsing.picking #cover::-webkit-scrollbar-button{display:none;width:0;height:0}

/* Keep library controls outside the song list scroll container. */
@media(min-width:760px), (max-height:480px) and (orientation:landscape){
 body.song-browsing .settings{display:flex;flex-direction:column;min-height:0;overflow:hidden}
 body.song-browsing .library-fixed-header{flex:0 0 auto;min-width:0;padding-bottom:10px}
 body.song-browsing .library-scroll-area{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#8fa9ca80 transparent;padding-right:5px;-webkit-overflow-scrolling:touch}
 body.song-browsing .library-scroll-area::-webkit-scrollbar{width:6px}
 body.song-browsing .library-scroll-area::-webkit-scrollbar-thumb{background:#8fa9ca80;border-radius:6px}
 body.song-browsing .library-scroll-area::-webkit-scrollbar-track{background:transparent}
}
/* Equal card content slots; difficulty selection lives in the song preview. */
#songList .song-card{min-width:0;align-self:stretch}
#songList .song-cover{flex:none;width:100%;height:auto;aspect-ratio:1}
#songList .song-info{min-width:0;flex:none}
#songList .song-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.35;height:2.7em;min-height:2.7em;max-height:2.7em;overflow:hidden;overflow-wrap:anywhere}
#songList .song-meta{height:1.4em;line-height:1.4;flex:none}

/* Keep image scale centered while cropping 15px from the top and bottom. */

#songList .song-cover{position:relative;height:0;min-height:0;padding-top:calc(100% - 30px);aspect-ratio:auto}
#songList .song-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}