/* Fixed player for the portal views. These are the home player rules from site.css and
   public-layout.css, scoped to .portal-body (with :where() so specificity matches the home), so inner
   pages show the same component. Extracted once from those files; the home keeps using site.css. */
:where(.portal-body .sticky-player) .icon{width:24px;height:24px;flex:none;vertical-align:middle}
:where(.portal-body .sticky-player) .play-button{display:grid;place-items:center;width:65px;height:65px;flex:none;border-radius:50%;border:1px solid #f0baff;background:var(--accent,#dc82ff);color:#22103a;box-shadow:0 4px 0 #603478,0 0 22px #dc82ff23}
:where(.portal-body .sticky-player) .play-button .icon{height:34px;width:34px}
:where(.portal-body .sticky-player) .play-button:hover{transform:scale(1.06);box-shadow:0 4px 0 #603478,0 0 30px #dc82ff50}
:where(.portal-body .sticky-player) .equalizer{height:54px;display:flex;align-items:end;gap:3px;min-width:0;flex:1;overflow:hidden}
:where(.portal-body .sticky-player) .equalizer i{display:block;width:6px;flex:1;max-width:8px;min-width:2px;height:var(--h);background:repeating-linear-gradient(to top,var(--equalizer,#c7a2ff) 0 3px,transparent 3px 5px);transform-origin:center bottom;animation:equalize var(--speed) ease-in-out infinite alternate;animation-delay:calc(var(--i)*-93ms);filter:drop-shadow(0 0 2px #c7a2ff22)}
:where(.portal-body .sticky-player) .mute-button{padding:0;border:0;background:none;display:flex;align-items:center;justify-content:center;flex:none}
:where(.portal-body .sticky-player) .mute-button .icon{height:20px;width:20px}
:where(.portal-body .sticky-player) .volume-slider{width:100%;min-width:0;height:7px;margin:0;appearance:none;-webkit-appearance:none;border-radius:6px;background:linear-gradient(to right,var(--volume-color,#b18cff) 0 var(--volume,65%),#453760 var(--volume,65%) 100%);cursor:pointer}
:where(.portal-body .sticky-player) .volume-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:15px;height:15px;background:var(--volume-color,#b18cff);border-radius:50%;border:0}
:where(.portal-body .sticky-player) .volume-slider::-moz-range-thumb{width:15px;height:15px;background:var(--volume-color,#b18cff);border-radius:50%;border:0}
:where(.portal-body .sticky-player) .like-button{display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid #725b88;border-radius:8px;background:#13142e;color:var(--cream,#fff4ff);padding:8px 9px;white-space:nowrap;min-width:70px;font-weight:700;font-size:14px}
:where(.portal-body .sticky-player) .filled-heart{stroke:var(--accent,#dc82ff);fill:var(--accent,#dc82ff);height:26px;width:26px}
:where(.portal-body .sticky-player) .like-button:hover,:where(.portal-body .sticky-player) .like-button[aria-pressed=true]{border-color:var(--accent,#dc82ff);background:#3b224b}
:where(.portal-body .sticky-player) .like-button.pop .filled-heart{animation:heart-pop .4s ease-out}
:where(.portal-body) .sticky-player{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;gap:24px;align-items:center;background:#060a24f7;border-top:1px solid #45365f;min-height:99px;padding:12px 40px;box-shadow:0 -8px 32px #04031b33;backdrop-filter:blur(6px)}
:where(.portal-body) .sticky-host{display:flex;gap:15px;align-items:center;min-width:315px}
:where(.portal-body) .sticky-avatar{width:59px;height:73px;background:var(--accent,#dc82ff);border-radius:6px;overflow:hidden;flex:none;display:flex;justify-content:center}
:where(.portal-body) .sticky-avatar img{width:64px;height:110px;image-rendering:pixelated;flex:none;transform:translateY(-6px)}
:where(.portal-body) .sticky-host strong{font-size:23px;font-weight:1000;letter-spacing:-.5px}
:where(.portal-body) .sticky-host p{font-size:15px;margin:0;color:#e0d1f2}
:where(.portal-body) .sticky-listeners{display:flex;align-items:center;gap:7px;font-size:15px;white-space:nowrap}
:where(.portal-body) .sticky-listeners .icon{fill:var(--cream,#fff4ff);stroke-width:1.4}
:where(.portal-body) .sticky-player .play-button{width:62px;height:62px}
:where(.portal-body) .sticky-player .equalizer{height:57px;max-width:320px}
:where(.portal-body) .sticky-volume{display:flex;align-items:center;gap:15px;flex:1;min-width:120px;max-width:260px}
:where(.portal-body) .sticky-volume .icon{width:26px;height:26px}
:where(.portal-body) .footer-like{padding:10px;border:0;background:none;font-size:16px;gap:13px;margin-left:auto}
:where(.portal-body) .footer-like .icon{width:31px;height:31px}
:where(.portal-body) .collapse-player{background:none;border:0;padding:10px;display:grid;place-items:center}
:where(.portal-body) .collapse-player .icon{width:25px;height:25px;transition:transform .2s}
:where(.portal-body) .sticky-player.collapsed{min-height:62px;padding-top:6px;padding-bottom:6px}
:where(.portal-body) .sticky-player.collapsed .sticky-avatar{height:47px}
:where(.portal-body) .sticky-player.collapsed .sticky-listeners,:where(.portal-body) .sticky-player.collapsed .equalizer,:where(.portal-body) .sticky-player.collapsed .sticky-volume{display:none}
:where(.portal-body) .sticky-player.collapsed .play-button{width:43px;height:43px}
:where(.portal-body) .sticky-player.collapsed .collapse-player .icon{transform:rotate(180deg)}
:where(.portal-body) .sticky-player.collapsed .sticky-host strong{font-size:18px}
:where(.portal-body) .sticky-player.collapsed .sticky-host p{font-size:12px}
@media(max-width:1400px){:where(.portal-body .sticky-player) .play-button{width:57px;height:57px}:where(.portal-body .sticky-player) .like-button{min-width:62px;padding:7px}:where(.portal-body) .sticky-player{gap:19px;padding:12px 30px}:where(.portal-body) .sticky-host{min-width:280px}:where(.portal-body) .sticky-host strong{font-size:20px}:where(.portal-body) .sticky-listeners{display:none}:where(.portal-body) .sticky-volume{max-width:200px}}
@media(max-width:1100px){:where(.portal-body) .sticky-host{min-width:255px}:where(.portal-body) .sticky-host strong{font-size:18px}:where(.portal-body) .sticky-player .equalizer{max-width:210px}:where(.portal-body) .sticky-volume{max-width:180px;min-width:110px}:where(.portal-body) .sticky-player{gap:15px}}
@media(max-width:800px){:where(.portal-body .sticky-player) .play-button{width:54px;height:54px}:where(.portal-body .sticky-player) .equalizer{gap:2px;height:45px}:where(.portal-body .sticky-player) .equalizer i{min-width:2px}:where(.portal-body .sticky-player) .equalizer i:nth-child(n+30){display:none}:where(.portal-body .sticky-player) .like-button{min-width:74px}:where(.portal-body) .sticky-player{min-height:76px;padding:10px 16px;gap:12px}:where(.portal-body) .sticky-host{min-width:0;flex:1;gap:10px}:where(.portal-body) .sticky-avatar{width:44px;height:56px}:where(.portal-body) .sticky-avatar img{width:55px;height:auto;transform:translateY(-5px)}:where(.portal-body) .sticky-host strong{font-size:15px;letter-spacing:-.2px}:where(.portal-body) .sticky-host p{font-size:12px}:where(.portal-body) .sticky-player .play-button{width:45px;height:45px}:where(.portal-body) .sticky-player .play-button .icon{width:25px;height:25px}:where(.portal-body) .sticky-player .equalizer,:where(.portal-body) .sticky-volume,:where(.portal-body) .sticky-listeners,:where(.portal-body) .footer-like{display:none}:where(.portal-body) .collapse-player{padding:3px}:where(.portal-body) .collapse-player .icon{width:20px}:where(.portal-body) .sticky-player.collapsed .sticky-host strong{font-size:14px}}
@media(max-width:420px){:where(.portal-body .sticky-player) .equalizer{gap:1px}:where(.portal-body .sticky-player) .equalizer i:nth-child(n+24){display:none}}
:where(.portal-body .sticky-player) .play-button{background:#df8aff;color:#250e39}
@media(max-width:800px){:where(.portal-body) .sticky-host strong{font-size:14px}}
@media(max-width:420px){:where(.portal-body) .sticky-host strong{font-size:13px}}
:where(.portal-body) .sticky-player .sticky-avatar{width:64px;height:76px;align-items:center;justify-content:center}
:where(.portal-body) .sticky-player .sticky-avatar img{width:108px;height:124px;padding:0;max-width:none;object-fit:contain;object-position:center;transform:none;image-rendering:pixelated}
@media(max-width:850px){:where(.portal-body) .sticky-player .sticky-avatar{width:44px;height:56px}:where(.portal-body) .sticky-player .sticky-avatar img{width:54px;height:62px}}
:where(.portal-body) .sticky-player.collapsed{min-height:61px}
:where(.portal-body) .sticky-player.collapsed .sticky-avatar{width:44px;height:48px}
:where(.portal-body) .sticky-player.collapsed .sticky-avatar img{width:54px;height:62px}
:where(.portal-body) .sticky-player .sticky-avatar{flex:none;width:64px;height:76px;display:flex;align-items:center;justify-content:center;overflow:hidden}
:where(.portal-body) .sticky-player .sticky-avatar img{flex:none;width:108px;height:124px;max-width:none;padding:0;transform:none;image-rendering:pixelated}
:where(.portal-body) .sticky-player.collapsed .sticky-avatar{width:44px;height:48px}
:where(.portal-body) .sticky-player.collapsed .sticky-avatar img{width:54px;height:62px}
@media(max-width:850px){:where(.portal-body) .sticky-player{min-height:96px}:where(.portal-body) .sticky-player.collapsed{min-height:61px}}
:where(.portal-body) .sticky-player .sticky-avatar img{width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center bottom;image-rendering:auto}
.portal-body .sticky-player{min-height:80px;gap:16px;padding:10px max(24px,calc((100vw - 1232px)/2));padding-bottom:max(10px,env(safe-area-inset-bottom));align-items:center}
.portal-body .sticky-player .sticky-avatar{width:48px;height:58px;flex:none;border-radius:8px}
.portal-body .sticky-player .sticky-avatar img{width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center bottom;image-rendering:auto}
.portal-body .sticky-player .sticky-host{flex:1;min-width:0;gap:12px;order:1}
.portal-body .sticky-player .sticky-host>div:last-child{min-width:0}
.portal-body .sticky-player .sticky-host strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.portal-body .sticky-player .sticky-host p{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.portal-body .sticky-player .toggle-play{order:0;width:48px;height:48px;flex:none}
.portal-body .sticky-player .equalizer{display:none}
.portal-body .sticky-player .sticky-listeners{order:2;font-size:11px;white-space:nowrap}
.portal-body .sticky-player [data-channel-open]{order:3}
.portal-body .sticky-player .sticky-volume{order:4;display:flex;flex:0 0 150px;gap:8px;min-width:0}
.portal-body .sticky-player .footer-like{order:5;min-height:44px}
.portal-body .sticky-player .collapse-player{order:6;min-height:44px;min-width:36px}
@media(max-width:800px){.portal-body .sticky-player .sticky-listeners,.portal-body .sticky-player .footer-like,.portal-body .sticky-player .collapse-player{display:none}.portal-body .sticky-player .sticky-volume{flex:0 0 80px}.portal-body .sticky-player .sticky-volume .mute-button{display:none}}
@media(max-width:600px){.portal-body .sticky-player{min-height:76px;padding:8px 12px;padding-bottom:max(8px,env(safe-area-inset-bottom));gap:8px}.portal-body .sticky-player .sticky-avatar{width:36px;height:54px}.portal-body .sticky-player .sticky-host{gap:8px}.portal-body .sticky-player .sticky-host strong{font-size:12px}.portal-body .sticky-player .sticky-host p{font-size:10px}.portal-body .sticky-player .sticky-volume{flex:0 0 54px}.portal-body .sticky-player .toggle-play{height:44px;width:44px}.portal-body .sticky-player [data-channel-open]{padding:8px;min-width:44px;min-height:44px}}
/* Theme tints the home applies through .page-shell[data-home-theme]; portal views read body[data-site-theme]. */
body[data-site-theme="election-2026"].portal-body .sticky-player .play-button{background:#f6d365;color:#172b27}
body[data-site-theme="election-2026"].portal-body .sticky-player{background:#091726f5;border-color:#536d62}
body[data-site-theme="election-2026"].portal-body :is(.header,.sticky-player){background:#091e19f5}
body[data-site-theme="election-2026"].portal-body .sticky-player :is(.avatar-login,.live-pill,.visit-room,.like-button,.room-badge){background:#102b23;border-color:#52765e;box-shadow:inset 0 0 0 2px #071b1633}
body[data-site-theme="election-2026"].portal-body .sticky-player :is(.avatar-login,.visit-room,.like-button):hover{background:#24503b}
body[data-site-theme="election-2026"].portal-body .sticky-player :is(.login-button,.music-request,.play-button):hover{background:#ffe493}
body[data-site-theme="election-2026"].portal-body .sticky-player .play-button{border-color:#fff0b2;box-shadow:0 4px 0 #897021,0 0 25px #f6d36523}
body[data-site-theme="election-2026"].portal-body .sticky-player .play-button:hover{box-shadow:0 6px 0 #897021,0 0 35px #f6d36533}
body[data-site-theme="election-2026"].portal-body .sticky-player .equalizer{filter:drop-shadow(0 0 8px #72deac22)}
body[data-site-theme="election-2026"].portal-body .sticky-player .volume-slider{background:linear-gradient(to right,var(--volume-color,#b18cff) 0 var(--volume,65%),#385b48 var(--volume,65%) 100%)}
body[data-site-theme="election-2026"].portal-body .sticky-player :is(.recado-line,.sticky-host p,.program-host,.preview-caption,.station-note,.site-presence,.autoplay-note){color:#bad2cd}
body[data-site-theme="under-construction"].portal-body :is(.header,.sticky-player){background:#13191ef5;border-color:#47545b}
body[data-site-theme="under-construction"].portal-body .sticky-player :is(.login-button,.music-request,.play-button){background:#ffbd59;color:#1b242b;border-color:#ffe0aa;box-shadow:0 3px 0 #956128}
body[data-site-theme="under-construction"].portal-body .sticky-player :is(.login-button,.music-request,.play-button):hover{background:#ffd188}
body[data-site-theme="under-construction"].portal-body .sticky-player :is(.avatar-login,.live-pill,.visit-room,.like-button,.room-badge){background:#1b252bf0;border-color:#627075;box-shadow:none}
body:is([data-site-theme="halloween-construction-2026"],[data-site-theme="election-runoff-2026"]).portal-body .sticky-player :is(.login-button,.music-request,.play-button){background:var(--brand);color:#161725;border-color:color-mix(in srgb,var(--brand),white 30%);box-shadow:0 3px 0 color-mix(in srgb,var(--brand),black 45%)}
body:is([data-site-theme="halloween-construction-2026"],[data-site-theme="election-runoff-2026"]).portal-body .sticky-player :is(.like-button,.visit-room,.room-badge){background:var(--surface);border-color:var(--stroke);box-shadow:none}
body.portal-body[data-playing=false] .sticky-player .equalizer i{animation-play-state:paused}
/* The fixed player is the same component on every public page; long names end in an ellipsis instead of running under the next control. */
.sticky-player .sticky-host>div:last-child{min-width:0}
.sticky-player .sticky-host :is(strong,p){display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Phones hide the listener column; the live audience moves under the host name instead of the song. */
.sticky-player .sticky-audience{display:none}
@media(max-width:800px){.sticky-player .sticky-audience:not([hidden]){display:block;font-size:11px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--lavender,#c7a2ff)}.sticky-player .sticky-host:has(.sticky-audience:not([hidden])) p{display:none}}