/* Wasteland Riot Radio — homepage finishing layer. Keep logic and text in HTML/JS. */
:root{--rust-edge:#544237;--rust-accent:#a97035;--crt-glow:#7ddd70}
.station-shell{width:100%;max-width:1740px;overflow:hidden}
.station-nav{background-image:linear-gradient(90deg,#17130fda,#11100de8),url('/static/assets/ui/panels/nav-bar-panel.webp');background-size:cover;background-position:center;border-bottom-color:#534235}
.radio-dashboard{padding-inline:clamp(7px,1vw,17px)}
/* The canonical banner already contains the station logo. Do not overlay a duplicate. */
.hero{display:block;position:relative;min-height:clamp(265px,19.6vw,348px);background-image:linear-gradient(180deg,#08070614,#08070608),url('/static/assets/backgrounds/hero/wrr-hero-canon.webp');background-size:cover;background-position:center;isolation:isolate}
.hero-brand,.hero-scenery{display:none!important}
.hero-console{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(370px,34vw,565px);min-height:150px;margin:0;padding:12px 20px;gap:clamp(12px,1.2vw,24px);background:linear-gradient(#110f0cc7,#0b0b09d7),url('/static/assets/ui/panels/metal-panel.webp') center/100% 100% no-repeat;z-index:2}
.hero-console .play{width:clamp(84px,8vw,112px);height:clamp(84px,8vw,112px);flex-basis:clamp(84px,8vw,112px)}
.hero-console .volume-knob{width:clamp(65px,6vw,87px);height:clamp(65px,6vw,87px)}
.scope-panel{position:relative;isolation:isolate;border-color:#493a2c;overflow:hidden;background:linear-gradient(0deg,#081208c9,#080e09c9),url('/static/assets/ui/monitors/crt-monitor.webp') center/100% 100% no-repeat}
.scope-panel canvas{border-color:#273c26;box-shadow:inset 0 0 15px #0008;background:rgba(3,15,7,.56)}
.dashboard-bottom{grid-template-columns:minmax(0,1.47fr) minmax(0,.81fr) minmax(0,1fr) minmax(0,1.07fr);gap:7px;align-items:stretch}
.dashboard-bottom>.panel{min-width:0;background-color:#11100eea;background-image:linear-gradient(130deg,#14120edb,#0d0e0cee),url('/static/assets/ui/panels/base-metal-panel.webp');background-size:100% 100%;border-color:#47382b;min-height:310px}
.panel-head h2{font-size:clamp(12px,1.05vw,18px);letter-spacing:.105em;overflow-wrap:anywhere}
.track-details{min-width:0}.metadata{min-width:0}.metadata dd{min-width:0}
.chat-messages{scrollbar-color:#6a685b #151711;scrollbar-width:thin}
.hosts-cards{min-width:0}.host-card{min-width:0}.host-card span{font-size:clamp(8px,.7vw,11px)}
.station-footer{border-top:1px solid #3c3228;background:linear-gradient(90deg,#15100d,#11100f);min-height:29px}
@media(max-width:1250px){.dashboard-bottom{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-console{left:51%;width:clamp(330px,42vw,510px)}}
@media(max-width:760px){.station-nav{overflow-x:auto;scrollbar-width:none}.station-nav::-webkit-scrollbar{display:none}.station-nav>*{padding-inline:10px}.radio-dashboard{padding-inline:7px}.hero{min-height:260px;background-size:auto 100%;background-position:52% center}.hero-console{position:absolute;left:50%;top:auto;bottom:8px;transform:translateX(-50%);margin:0;width:min(96%,430px);min-height:110px;padding:9px;gap:12px}.hero-console .play{width:72px;height:72px;flex-basis:72px}.hero-console .volume-knob{width:58px;height:58px}.hero-logo{display:none}.scope-meta{display:none}.scope-header{flex-wrap:wrap}.dashboard-bottom{grid-template-columns:1fr}.dashboard-bottom>.panel{min-height:230px}.scope-panel canvas{height:145px}}
@media(max-width:420px){.hero{min-height:235px}.hero-console{width:calc(100% - 12px);gap:6px}.hero-console .play{width:62px;height:62px;flex-basis:62px}.hero-console .volume-knob{width:50px;height:50px}.console-controls{font-size:10px}.status-text{font-size:9px}.scope-panel{padding-inline:6px}.scope-footer{font-size:8px}}
@media(prefers-reduced-motion:reduce){.hero-console .play,.volume-knob{transition:none!important}}


/* v20: independent slices prevent logo/two suns from being clipped by background-size:cover. */
.hero{display:grid!important;grid-template-columns:minmax(0,29fr) minmax(0,36fr) minmax(0,35fr)!important;position:relative;min-height:0!important;aspect-ratio:1929/405;background:#100e0b!important;overflow:hidden;isolation:isolate}
.hero::after{z-index:3;pointer-events:none}
.hero-brand,.hero-scenery{display:block!important;min-width:0;min-height:0;position:relative;z-index:0;padding:0!important;border:0!important}
.hero-brand{background:url('/static/assets/backgrounds/hero/hero-brand.webp') center/100% 100% no-repeat!important}
.hero-brand>*{display:none!important}
.hero-scenery{background:url('/static/assets/backgrounds/hero/hero-wasteland.webp') center/100% 100% no-repeat!important}
.hero-scenery>*{display:none!important}
.hero::before{content:'';position:absolute;inset:0 35% 0 29%;background:url('/static/assets/backgrounds/hero/hero-center.webp') center/100% 100% no-repeat;z-index:0;pointer-events:none}
.hero-console{position:relative!important;grid-column:2;grid-row:1;left:auto!important;top:auto!important;bottom:auto!important;transform:none!important;align-self:center;justify-self:center;box-sizing:border-box;width:calc(100% - 12px)!important;min-width:0;max-width:565px;min-height:0;margin:0!important;padding:clamp(7px,.8vw,14px) clamp(7px,1vw,18px)!important;gap:clamp(6px,1vw,17px)!important;z-index:2}
.hero-console .play{width:clamp(62px,7.3vw,112px);height:clamp(62px,7.3vw,112px);flex-basis:clamp(62px,7.3vw,112px)}
.hero-console .volume-knob{width:clamp(55px,5.5vw,87px);height:clamp(55px,5.5vw,87px)}
.hero-console .status-text{font-size:clamp(8px,.8vw,12px)}
.hero-console .codec{display:flex;flex-wrap:wrap;justify-content:center}
/* Tablet retains the desktop composition; no rearrangement into a different design. */
@media(min-width:768px) and (max-width:1250px){.hero{grid-template-columns:minmax(0,29fr) minmax(0,36fr) minmax(0,35fr)!important;aspect-ratio:1929/405}.hero-console{left:auto!important;width:calc(100% - 8px)!important}.dashboard-bottom{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:768px) and (max-width:980px){.hero-console .status-text{font-size:8px}.hero-console .play{width:58px;height:58px;flex-basis:58px}.hero-console .volume-knob{width:51px;height:51px}.hero-console{padding:5px!important;gap:4px!important}}
/* Until the Go legacy-mobile route is wired, retain a safe fallback rather than redirecting to an invented URL. */
@media(max-width:767px){.hero{display:block!important;aspect-ratio:auto;min-height:235px!important;background:linear-gradient(#08070655,#08070688),url('/static/assets/backgrounds/hero/wrr-hero-canon.webp') center/cover no-repeat!important}.hero::before{display:none}.hero-brand,.hero-scenery{display:none!important}.hero-console{position:absolute!important;left:50%!important;bottom:10px!important;top:auto!important;transform:translateX(-50%)!important;width:calc(100% - 16px)!important;max-width:430px;margin:0!important}.dashboard-bottom{grid-template-columns:1fr}}

/* v21 shared linked navigation */
.station-nav .nav-item{display:flex;align-items:center;text-decoration:none;color:#a59b89;padding:0 13px;border-right:1px solid #38332b}.station-nav .nav-item:hover,.station-nav .nav-item:focus-visible{color:#ffc66d;background:#272119}.station-nav .nav-item.nav-active{color:#ffd085;background:#282219;box-shadow:inset 0 -2px #cd8c36}@media(max-width:1200px){.station-nav .nav-item{padding:0 7px;font-size:10px}.station-nav .nav-location{display:none}}

/* v28 shared shell: one identical nav on every route, and a persistent player
   element that client-side navigation never removes. */
.station-nav{position:relative;z-index:40}
.station-nav .on-air{font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;text-align:inherit}
.radio-audio-host{position:fixed;width:1px;height:1px;left:-10000px;top:0;overflow:hidden;pointer-events:none}