/* Login: arena photograph with the real, transparent program wordmark. */
.loginHero{display:grid;place-items:center;isolation:isolate;position:relative;height:210px;margin:-32px -32px 24px;border-radius:22px 22px 0 0;overflow:hidden;background:#17191c url('../img/arenabooster-login-banner.webp') center 63%/cover no-repeat;border-bottom:1px solid #58616b}
.loginHero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0002,#0004 40%,#0004 60%,#0002)}
.loginHero .boosterBrandLogin{width:90%;max-width:660px;height:auto;margin:0;filter:drop-shadow(0 3px 7px #000)}
.loginOverlay{overflow-y:auto;align-items:start;padding:18px 0}
.loginOverlay .setupCard,#loginPanel{margin:12px auto 24px}
/* Product and release sit together; manufacturer stays in the login only. */
.programBrand{display:flex;align-items:center;gap:9px;min-width:0}
.playerBody .programBrand .boosterBrandHeader{display:block;width:160px;max-width:100%;height:auto}
.playerBody .programBrand .headerVersion{flex:0 0 auto;background:#343a42;color:#fff;border-color:#737d88;padding:4px 7px;font-size:.66rem}
.playerBody .topbarInner{grid-template-columns:220px 80px minmax(150px,225px) 108px minmax(190px,1fr) 106px;gap:12px}
/* Keep complete letter shapes and names; the layout function fits their height. */
.playerBody .playerGrid .soundCard{gap:3px}
.playerBody .playerGrid .soundCard .playerPhoto{flex:0 0 auto;max-height:none;max-width:60%;margin-bottom:0}
.playerBody .playerGrid .soundCard .number{line-height:1.12}
.playerBody .playerGrid .soundCard .title{display:block;flex:0 0 auto;max-width:100%;line-height:1.24;padding:0 .05em .16em;margin:0;overflow:visible;overflow-wrap:anywhere;white-space:normal;-webkit-line-clamp:unset}
/* A light selected segment plus check mark makes view selection unambiguous. */
.playerBody .viewSwitch button{background:#343a42;color:#fff;border:2px solid #87929e;border-radius:7px;min-height:34px;line-height:1.2}
.playerBody .viewSwitch button.active{background:#fff;color:#17191c;border-color:#fff;box-shadow:0 0 0 2px #17191c inset;font-weight:850}
.playerBody .viewSwitch button.active::after{content:" ✓";font-weight:900}
.playerBody .trackButton .trackNumber{background:#f4f5f7;color:#17191c;font-weight:850;font-variant-numeric:tabular-nums;line-height:1.15;flex-shrink:0}
.playerBody .trackButton.active .trackNumber{background:#fff;color:#17191c}
.playerBody .playlistTimes{gap:7px}
.playerBody .playlistTimes div{background:#f4f5f7;color:#17191c;padding:9px 6px;border:1px solid #c2c9d1}
.playerBody .playlistTimes span{display:block;color:#414b57;font-size:.73rem;line-height:1.3}
.playerBody .playlistTimes strong{color:#111820;font-size:clamp(1.05rem,1.6vw,1.6rem);font-weight:850;line-height:1.3;font-variant-numeric:tabular-nums}
/* Inactive filters retain the category outline; the selected filter is filled. */
.playerBody .generalGroups button{border:3px solid var(--group-color,var(--orange));background:#343a42;color:#fff}
.playerBody .generalGroups button.active{border-color:var(--group-color,var(--orange));background:var(--group-color,var(--orange));color:var(--group-text,#17191c);box-shadow:0 0 0 2px #fff inset}
@media(max-height:760px) and (min-width:721px){
 .loginHero{height:170px}
 .loginOverlay{padding:10px 0}
 .loginOverlay .setupCard{margin:10px auto}
}
@media(max-width:1100px){
 .playerBody .topbarInner{grid-template-columns:190px 64px minmax(130px,185px) 90px minmax(155px,1fr) 92px;gap:7px}
 .playerBody .programBrand .boosterBrandHeader{width:135px}
}
@media(max-width:720px){
 .loginOverlay .setupCard,#loginPanel{padding:22px}
 .loginHero{height:165px;margin:-22px -22px 20px}
 .playerBody .topbar{height:188px;min-height:188px}
 .playerBody .topbarInner{grid-template-columns:64px minmax(90px,1fr) 60px;grid-template-rows:30px 64px 60px;gap:5px}
 .playerBody .programBrand{grid-column:1/4;grid-row:1}
 .playerBody .programBrand .boosterBrandHeader{width:155px;max-height:30px}
 .playerBody .clubLogoBox{grid-column:1;grid-row:2}
 .playerBody .teamPicker{grid-column:2;grid-row:2}
 .playerBody .headerActions{grid-column:3;grid-row:2}
 .playerBody .statusBadge{grid-column:1;grid-row:3}
 .playerBody .volumeBox{grid-column:2/4;grid-row:3}
 .playerBody main{height:calc(100dvh - 236px)}
 .playerBody .playlistTimes{grid-template-columns:1fr;gap:4px}
 .playerBody .playlistTimes div{display:flex;justify-content:space-between;align-items:center;gap:5px;padding:5px}
 .playerBody .playlistTimes span{font-size:.63rem}
 .playerBody .playlistTimes strong{font-size:1.05rem}
 .playerBody .nowPlaying{overflow-y:auto}
 .playerBody .playlistStopActions{flex-wrap:wrap}
 .playerBody .playlistStopActions button{flex:1 1 90px;min-width:0;max-width:100%;white-space:normal}
}
/* ArenaBooster artwork includes its stadium background and complete wordmark. */
.loginHero{background:#070a0e;height:auto;aspect-ratio:3/1}
.loginHero::before{display:none}
.boosterLoginArtwork{display:block;width:100%;height:100%;object-fit:contain}
.playerBody .programBrand .boosterBrandHeader{width:180px;max-height:45px;object-fit:contain}
.playerBody .topbarInner{grid-template-columns:240px 80px minmax(150px,225px) 108px minmax(190px,1fr) 106px}
@media(max-height:760px) and (min-width:721px){.loginHero{height:190px;aspect-ratio:auto}}
@media(max-width:1100px){
 .playerBody .topbarInner{grid-template-columns:205px 64px minmax(130px,185px) 90px minmax(155px,1fr) 92px}
 .playerBody .programBrand .boosterBrandHeader{width:150px}
}
@media(max-width:720px){
 .loginHero{height:auto;aspect-ratio:3/1}
 .playerBody .topbarInner{grid-template-columns:64px minmax(90px,1fr) 60px}
 .playerBody .programBrand .boosterBrandHeader{width:185px;max-height:30px}
}