/* Share the existing gameplay scenery beneath all screens. */
#home.pack-select{background:transparent;min-height:100dvh;padding-bottom:20px;overflow:auto}
#home.pack-select>.home-ambient,#home.pack-select>.home-portrait-stage{display:none}
#home.pack-select .album-home{position:relative;inset:auto;margin:0;padding:76px 0 20px 3%;width:68%;display:grid;grid-template-columns:44fr 56fr;gap:28px;min-height:100dvh}
.pack-list{display:flex;flex-direction:column;gap:14px;padding:8px 0;min-width:0}
.pack-list h2{font:24px/1.4 STSong,serif;color:#ead3a4;margin:0 0 10px}
.pack-row{display:flex;align-items:center;gap:12px;min-height:96px;border:1px solid #c7b59044;background:#16151dab;padding:12px;border-radius:6px}
.pack-row[aria-current=true]{border:2px solid #e8c784;background:linear-gradient(110deg,#b1934f44,#191821cc);box-shadow:0 0 18px #e9c88822}
.pack-row>span:first-child{font:24px Georgia;color:#e8ddc8}.pack-row strong{display:block;font:24px/1.4 STSong,serif}.pack-row small{display:block;font:12px/1.6 sans-serif;color:#d0c3b0;margin-top:6px}
.pack-thumb{flex:none;width:58px;height:64px;background:center/cover;border:1px solid #e5ca9244}.pack-thumb.moon{background-image:url('assets/cover-clair-de-lune.png')}.pack-thumb.turkish{background-image:url('assets/song-select-approved-V1.png');background-size:400%;background-position:8% 15%}
.pack-list-note{font:13px/1.6 sans-serif;color:#c3b5a1;text-align:center;margin-top:20px}
.pack-detail{display:flex;flex-direction:column;gap:10px;min-width:0;padding:0 12px 16px;background:linear-gradient(90deg,#0a0a1155,#0a0a1188,#0a0a1133)}
#home.pack-select .album-selection,#home.pack-select .album-info{display:contents}
#home.pack-select .album-art{width:min(100%,29vh);height:auto;aspect-ratio:1;align-self:center;margin:0}
#home.pack-select .album-art svg{display:block}#home.pack-select .album-art:has(img:not([hidden])) svg{display:none}
#home.pack-select .album-title{text-align:center}#home.pack-select .album-title h2{font:38px/1.15 STSong,serif;letter-spacing:.08em;white-space:normal;margin:0}
#home.pack-select .album-title>span{display:block;font:italic 15px/1.4 Georgia;white-space:normal;color:#d4af73;margin-top:5px}
#home.pack-select .album-meta{white-space:pre-line;font:12px/1.6 sans-serif;color:#d6c9b6}
#home.pack-select #preview{align-self:flex-end;min-height:38px;font-size:14px;border:1px solid #d4b77a;padding:4px 14px;border-radius:5px}
#home.pack-select #preview:before{width:25px;height:25px;font-size:10px}
#home.pack-select .difficulty{display:flex;gap:6px}#home.pack-select .difficulty button{min-height:58px;padding:6px 3px;font-size:20px;gap:5px}#home.pack-select .difficulty span{font-size:11px;white-space:nowrap}
#home.pack-select .best-performance{min-height:52px;gap:10px;background:none;border-bottom:0}#home.pack-select .best-label{font-size:15px}#home.pack-select #bestGrade{width:42px;height:42px;font-size:28px}#home.pack-select .best-score{padding-left:10px}#home.pack-select .best-score strong{font-size:26px}#home.pack-select .best-combo{display:none}#home.pack-select #bestEmpty{position:static;font-size:12px}
#home.pack-select .album-actions{gap:6px}#home.pack-select .start-actions{width:100%;display:flex;flex-direction:column;gap:6px}#home.pack-select #enter{width:100%;height:50px;min-height:50px;font:24px STSong,serif;background:linear-gradient(110deg,#b18c52,#f6df9a,#b5965f);border:1px solid #f5dda4;border-radius:7px}
#home.pack-select #quickEntry{align-self:center;min-height:32px;font-size:12px;background:#16151d99}#home.pack-select #staminaStatus{font-size:11px}
#home.pack-select .home-rules{position:fixed;bottom:12px;left:3%;font-size:12px}
@media(max-width:1000px){#home.pack-select .album-home{width:74%;gap:12px}.pack-row{gap:6px;padding:8px}.pack-thumb{width:40px;height:48px}.pack-row strong{font-size:18px}}
@media(orientation:portrait){#home.pack-select .album-home{width:100%;padding:76px 16px 70px;grid-template-columns:1fr;gap:12px}.pack-list{display:grid;grid-template-columns:1fr 1fr}.pack-list h2{grid-column:1/-1}.pack-list-note{display:none}.pack-detail{background:#101018dd}.pack-row{min-height:80px}#home.pack-select .album-art{width:180px}#home.pack-select .difficulty{flex-direction:row}#home.pack-select .home-rules{position:absolute}#home.pack-select{background-position:right center}}

#home.pack-select .album-home{grid-template-rows:auto;align-items:start}
@media(min-width:851px) and (min-height:561px){#home.pack-select .album-art{width:min(100%,25vh)}#home.pack-select .pack-detail{gap:8px}#home.pack-select .album-home{padding-top:70px;padding-bottom:8px}#home.pack-select{padding-bottom:0}}

@media(max-width:480px){.pack-row strong{font-size:16px}.pack-row small{font-size:10px}.pack-thumb{width:32px;height:40px}.pack-row>span:first-child{font-size:18px}}

/* Selection detail spacing V2: align the cover with the selection column and use the open lower area. */
@media (min-width:851px) and (min-height:561px){
  #home.pack-select .pack-detail{gap:20px;padding-top:0;padding-bottom:28px;justify-content:flex-start}
  #home.pack-select .album-art{align-self:flex-start;margin-top:0}
  #home.pack-select .album-title{padding-top:2px}
  #home.pack-select .album-meta{margin-top:2px}
  #home.pack-select #preview{margin-top:4px}
  #home.pack-select .difficulty{margin-top:4px}
  #home.pack-select .best-performance{margin-top:2px}
  #home.pack-select .album-actions{margin-top:4px}
}
@media (max-width:1000px) and (min-height:561px){
  #home.pack-select .pack-detail{gap:16px;padding-bottom:24px}
}

/* Selection detail composition V3: cover aligns with the first song row; controls follow the requested hierarchy. */
@media (min-width:851px) and (min-height:561px){
  #home.pack-select .pack-detail{gap:20px;align-items:stretch;justify-content:flex-start}
  #home.pack-select .album-art{align-self:center;margin-top:66px}
  #home.pack-select #preview{order:4;align-self:flex-start;margin:4px 0 0 16px}
  #home.pack-select .difficulty{order:5}
  #home.pack-select #best{order:6;width:100%;justify-content:center;margin-top:2px}
  #home.pack-select .album-actions{order:7;width:100%;justify-content:flex-start;gap:8px;align-items:center}
  #home.pack-select .album-actions .start-actions{order:1;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:8px;width:100%;height:auto}
  #home.pack-select .album-actions .start-actions #enter{flex:1;width:auto;min-width:0}
  #home.pack-select .album-actions .start-actions #quickEntry{order:2;flex:0 0 104px;width:104px;height:32px;min-height:32px;align-self:center}
  #home.pack-select #staminaStatus{order:2;margin:0;text-align:center}
}

/* Apply the same hierarchy to the narrow landscape layout used by the in-app preview. */
@media (max-width:1000px) and (min-height:561px) and (orientation:landscape){
  #home.pack-select .pack-detail{gap:16px;align-items:stretch;justify-content:flex-start}
  #home.pack-select .album-art{align-self:center;margin-top:66px}
  #home.pack-select #preview{order:4;align-self:flex-start;margin:4px 0 0 8px}
  #home.pack-select .difficulty{order:5}
  #home.pack-select #best{order:6;width:100%;justify-content:center;margin-top:2px}
  #home.pack-select .album-actions{order:7;width:100%;justify-content:flex-start;gap:4px;align-items:center}
  #home.pack-select .album-actions .start-actions{order:1;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:8px;width:100%;height:auto}
  #home.pack-select .album-actions .start-actions #enter{flex:1;width:auto;min-width:0;height:50px}
  #home.pack-select .album-actions .start-actions #quickEntry{order:2;flex:0 0 104px;width:104px;height:32px;min-height:32px;align-self:center}
  #home.pack-select #staminaStatus{order:2;margin:0;text-align:center}
}

/* Selection detail composition V6: lower the detail mask, stack quick play, and give the cover more air. */
@media (min-width:851px) and (min-height:561px){
  #home.pack-select .pack-detail{margin-top:66px}
  #home.pack-select .album-art{width:min(100%,23vh);margin-top:20px}
  #home.pack-select #best{margin-top:5px}
  #home.pack-select .album-actions .start-actions{flex-direction:column;flex-wrap:nowrap;align-items:center;gap:6px;height:auto}
  #home.pack-select .album-actions .start-actions #enter{flex:none;width:100%;height:50px;min-height:50px}
  #home.pack-select .album-actions .start-actions #quickEntry{order:2;flex:none;width:104px;height:32px;min-height:32px;align-self:center}
}

@media (max-width:1000px) and (min-height:561px) and (orientation:landscape){
  #home.pack-select .pack-detail{margin-top:66px}
  #home.pack-select .album-art{width:min(100%,23vh);margin-top:20px}
  #home.pack-select #best{margin-top:5px}
  #home.pack-select .album-actions .start-actions{flex-direction:column;flex-wrap:nowrap;align-items:center;gap:6px;height:auto}
  #home.pack-select .album-actions .start-actions #enter{flex:none;width:100%;height:50px;min-height:50px}
  #home.pack-select .album-actions .start-actions #quickEntry{order:2;flex:none;width:104px;height:32px;min-height:32px;align-self:center}
}

/* V7: the record area spans the separator-to-play-button interval, so its
   contents stay vertically centered for both empty and recorded scores. */
#home.pack-select .pack-footer{order:6;display:flex;flex-direction:column;gap:0;width:100%;min-width:0;margin-top:5px}
#home.pack-select .pack-footer #best{order:0;margin:0;width:100%;min-height:76px;justify-content:center;align-items:center;padding:0}
#home.pack-select .pack-footer .album-actions{order:1;margin:0;width:100%;justify-content:flex-start}
#home.pack-select .pack-footer .start-actions{order:1}
#home.pack-select .pack-footer #staminaStatus{order:2}