@font-face {
  font-family: "PE Digital 7";
  src: url("fonts/Digital-7.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PE Digital 7 Mono";
  src: url("fonts/Digital-7Mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PE Eurostile";
  src: url("fonts/Eurostile-Normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PE Eurostile";
  src: url("fonts/EurostileBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

:root {
  --black: #050706;
  --panel: #111412;
  --panel-hi: #1a1d1b;
  --panel-lo: #090b0a;
  --edge: #343a36;
  --edge-soft: #222724;
  --text: #e8e6df;
  --muted: #8d948e;
  --vfd: #9bd8a7;
  --vfd-bright: #c8ffd0;
  --green: #68ef84;
  --green-dim: #244e2d;
  --amber: #ff9f3f;
  --amber-soft: #d77c2a;
  --amber-dim: #633817;

  /* FEATURED ARTIST TICKER SPEED
     Higher number = faster. Lower number = slower.
     34 px/sec is the current default. */
  --ticker-pixels-per-second: 34;

  --red: #8e1b23;
  --gold: #8a7138;
  --shadow: rgba(0,0,0,.58);
}

html, body { margin:0; min-height:100%; background-color:#05070c; color:var(--text); }

body {
  min-height:100vh;
  padding:28px 18px 48px;
  font-family: Arial, Helvetica, sans-serif;
  position:relative;
  overflow-x:hidden;
}

/* Viewport-level artwork: intentionally independent of the page's scroll height. */
body::before {
  content:"";
  position:fixed;
  inset:-16px;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(3,5,10,.18), rgba(3,5,10,.28)),
    url('assets/alchemist_lab.jpg') center center / cover no-repeat;
  filter:blur(3px);
}

/* The original markup remains harmless while the viewport pseudo-element
   owns the ambient artwork. */
.ambient-backdrop {
  display:none;
}
button, input { font:inherit; }

.station-shell {
  width:min(1380px,100%);
  margin:0 auto;
  padding:18px;
  border:1px solid #303632;
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 10%),
    linear-gradient(135deg, #121512, #090b0a 54%, #111411);
  box-shadow:
    0 28px 90px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.8);
}

.receiver-header {
  min-height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:17px 20px;
  border:1px solid var(--edge);
  border-radius:7px;
  background:
    linear-gradient(180deg, #242824 0%, #151815 47%, #0d0f0e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -8px 22px rgba(0,0,0,.28);
}

.brand-lockup { min-width:0; }
.engraved-label,
.component-subtitle,
.module-caption {
  margin:0;
  color:#808780;
  font-size:.63rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}

h1 {
  margin:4px 0 5px;
  font-size:clamp(1.8rem,3.7vw,3rem);
  line-height:.95;
  letter-spacing:.01em;
  font-weight:700;
}

.header-instruments { display:flex; align-items:center; gap:18px; }

.signal-meter {
  height:30px;
  display:flex;
  align-items:flex-end;
  gap:3px;
  padding:5px 8px;
  border:1px solid #263029;
  background:#070a08;
  border-radius:3px;
  box-shadow:inset 0 0 16px #000;
}
.signal-meter span {
  width:4px;
  height:7px;
  border-radius:1px;
  background:#31523a;
  box-shadow:0 0 4px rgba(104,239,132,.08);
  transition:height .2s ease, background .2s ease, box-shadow .2s ease;
}
.station-shell.is-live .signal-meter span {
  background:var(--vfd);
  box-shadow:0 0 5px rgba(155,216,167,.44);
  animation:eqPulse 1.1s ease-in-out infinite alternate;
}
.station-shell.is-live .signal-meter span:nth-last-child(-n+2) {
  background:var(--amber);
  box-shadow:0 0 5px rgba(255,159,63,.48);
}
.station-shell.is-live .signal-meter span:nth-child(2) { animation-duration:.75s; }
.station-shell.is-live .signal-meter span:nth-child(3) { animation-duration:1.4s; }
.station-shell.is-live .signal-meter span:nth-child(4) { animation-duration:.9s; }
.station-shell.is-live .signal-meter span:nth-child(5) { animation-duration:1.25s; }
.station-shell.is-live .signal-meter span:nth-child(6) { animation-duration:.7s; }
.station-shell.is-live .signal-meter span:nth-child(7) { animation-duration:1.05s; }
.station-shell.is-live .signal-meter span:nth-child(8) { animation-duration:.82s; }
@keyframes eqPulse { from { height:6px; opacity:.48; } to { height:20px; opacity:1; } }

.on-air-module {
  min-width:118px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:10px 13px;
  border:1px solid #343a36;
  border-radius:5px;
  background:linear-gradient(#0b0e0c,#060806);
  box-shadow:inset 0 0 16px rgba(0,0,0,.85);
  color:#a4aaa5;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.15em;
}
.on-air-led {
  width:10px; height:10px; border-radius:50%;
  background:#3b403d;
  border:1px solid #626863;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.15);
}
.on-air-module.live { color:var(--vfd-bright); border-color:#35533c; }
.on-air-module.live .on-air-led {
  background:var(--green);
  border-color:#aaffb8;
  box-shadow:0 0 5px #79ff93, 0 0 14px rgba(82,255,116,.72), 0 0 28px rgba(82,255,116,.25);
}

.console-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 292px;
  gap:16px;
  margin-top:16px;
}
.main-stack { min-width:0; display:grid; gap:11px; }

.monitor-component,
.ticker-component,
.receiver-deck,
.host-component {
  border:1px solid var(--edge);
  border-radius:7px;
  background:linear-gradient(145deg, #161a17, #0b0e0c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 7px 22px rgba(0,0,0,.25);
}

.monitor-component { padding:10px 12px 11px; }
.monitor-topline,
.monitor-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:#727a73;
  font-size:.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.monitor-topline { padding:1px 3px 8px; }
.monitor-topline #visualCounter {
  color:var(--amber);
  text-shadow:0 0 5px rgba(255,159,63,.18);
}
.monitor-footer {
  justify-content:flex-start;
  padding:9px 4px 0;
}
.monitor-footer span + span { margin-left:14px; }
.monitor-led {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--amber-soft);
  box-shadow:0 0 5px rgba(255,159,63,.38);
}

.crt-bezel {
  padding:14px;
  border-radius:16px;
  background:linear-gradient(145deg,#292d29,#111411 62%,#070907);
  border:1px solid #3b403b;
  box-shadow:inset 0 0 0 2px #0a0c0b, inset 0 1px 3px rgba(255,255,255,.08), 0 9px 26px rgba(0,0,0,.46);
}
.crt-screen {
  position:relative;
  overflow:hidden;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:9px;
  border:2px solid #030403;
  box-shadow:inset 0 0 34px rgba(0,0,0,.8);
}
#visualPlayer {
  position:relative;
  z-index:1;
  width:100%; height:100%; display:block;
  object-fit:contain;
  background:#000;
}
.screen-overlay { position:absolute; inset:0; z-index:5; pointer-events:none; }
.glass-sheen {
  position:absolute; inset:0; z-index:8; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.035), transparent 24%, transparent 76%, rgba(255,255,255,.018));
  box-shadow:inset 0 0 46px rgba(0,0,0,.22);
}

.station-id {
  position:absolute;
  right:9px; bottom:8px;
  z-index:6;
  opacity:0;
  max-width:min(70%,520px);
  padding:5px 7px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.45);
  color:rgba(255,255,255,.86);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.14em;
  text-shadow:0 1px 4px #000;
  transition:opacity .25s ease;
}
.station-id.active { opacity:1; }
.station-id.fallback { opacity:.56; border-color:rgba(255,255,255,.07); background:rgba(0,0,0,.2); }
.station-id.scheduled { opacity:1; background:rgba(0,0,0,.58); }
.station-id[data-position="bottom-right"] { right:9px; bottom:8px; left:auto; top:auto; }
.station-id[data-position="bottom-left"] { left:9px; bottom:8px; right:auto; top:auto; }
.station-id[data-position="top-right"] { right:9px; top:8px; left:auto; bottom:auto; }
.station-id[data-position="top-left"] { left:9px; top:8px; right:auto; bottom:auto; }

.station-id-graphic {
  border:0;
  outline:0;
  background:transparent;
  position:absolute; inset:0; z-index:7;
  width:100%; height:100%; display:block; object-fit:contain;
  opacity:0; pointer-events:none; transition: opacity .55s ease;
}
.station-id-graphic.active { opacity:1; }

.ticker-component {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:9px 11px;
}
.ticker-label {
  padding:0 10px 0 2px;
  border-right:1px solid #2e3831;
  color:#b57b44;
  font-size:.58rem;
  letter-spacing:.13em;
  white-space:nowrap;
}
.ticker-window {
  overflow:hidden;
  min-width:0;
  padding:7px 0 6px;
  border:1px solid #172019;
  background:#030704;
  box-shadow:inset 0 0 14px #000;
}
.ticker-track {
  width:max-content;
  display:flex;
  white-space:nowrap;
  will-change:transform;
  animation:tickerScroll var(--ticker-duration, 70s) linear infinite;
  font-family:"PE Digital 7","Lucida Console","Courier New",monospace;
  font-size:.74rem;
  letter-spacing:.08em;
  color:var(--vfd);
  text-shadow:0 0 5px rgba(155,216,167,.52);
}
.ticker-track span { padding-right:0; }
@keyframes tickerScroll { to { transform:translateX(-50%); } }

.receiver-deck {
  display:grid;
  grid-template-columns:118px minmax(0,1fr) 276px;
  gap:15px;
  align-items:stretch;
  padding:14px;
}
.album-module { display:flex; flex-direction:column; gap:7px; }
.album-frame {
  padding:5px;
  border:1px solid #353b36;
  background:#090b09;
  box-shadow:inset 0 0 10px #000;
}
.album-cover {
  display:block;
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
}
.module-caption { text-align:center; font-size:.53rem; }

.track-display {
  min-width:0;
  padding:12px 15px;
  border:1px solid #1c291f;
  background:linear-gradient(180deg,#071009,#020603);
  box-shadow:inset 0 0 22px #000;
}
.track-display-header {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  color:#66806d;
  font-family:"Lucida Console","DejaVu Sans Mono","Courier New",monospace;
  font-size:.58rem;
  letter-spacing:.1em;
}
#trackCounter {
  color:var(--amber);
  text-shadow:0 0 5px rgba(255,159,63,.22);
}
.track-display h2 {
  margin:0 0 5px;
  color:#f0eee7;
  font-family:"PE Eurostile","Arial Narrow",Arial,Helvetica,sans-serif;
  font-size:clamp(1.08rem,2vw,1.45rem);
  font-weight:700;
  letter-spacing:.025em;
  text-shadow:0 1px 2px rgba(0,0,0,.85);
  overflow-wrap:anywhere;
}
.track-display p {
  margin:0;
  color:#b8bbb4;
  font-family:"PE Eurostile","Arial Narrow",Arial,Helvetica,sans-serif;
  font-size:.9rem;
  font-weight:400;
  letter-spacing:.015em;
  overflow-wrap:anywhere;
}

.control-bank { display:grid; gap:9px; align-content:center; }
.control-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hardware-button {
  appearance:none;
  border:1px solid #414740;
  border-radius:3px;
  padding:9px 10px;
  color:#d0d3cd;
  background:linear-gradient(#262a26,#131613 60%,#0c0e0c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 2px 2px rgba(0,0,0,.55);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.07em;
  cursor:pointer;
  text-transform:uppercase;
}
.hardware-button:hover:not(:disabled) { border-color:#596259; color:#fff; background:linear-gradient(#2b302b,#181c18 60%,#0f120f); }
.hardware-button:active:not(:disabled) { transform:translateY(1px); box-shadow:inset 0 1px 4px rgba(0,0,0,.55); }
.hardware-button:disabled { opacity:.4; cursor:default; }
.enter-button { display:flex; justify-content:center; align-items:baseline; gap:6px; border-color:#4b554c; }
.enter-button small {
  color:#b2773f;
  font-size:.54rem;
  letter-spacing:.11em;
}
.station-shell.is-live .enter-button small {
  color:var(--amber);
  text-shadow:0 0 4px rgba(255,159,63,.22);
}
.station-shell.is-live .enter-button { color:var(--vfd-bright); border-color:#35533c; }

.volume-control {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 10px;
  align-items:center;
  color:#838b84;
  font-size:.55rem;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.volume-control input { width:100%; accent-color:#8ebd97; }
.scale-marks { grid-column:2; color:#4d554f; font-size:.48rem; letter-spacing:.03em; text-align:justify; }

.host-component {
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.host-image {
  min-height:0;
  flex:0 0 auto;
  width:100%;
  /* Match the active 2577 × 1450 WebP so `object-fit: cover` does not
     introduce a second, tiny crop before browser interpolation. */
  aspect-ratio:2577 / 1450;
  position:relative;
  overflow:hidden;
  background:#0b0718;
  box-shadow:inset 0 0 30px rgba(0,0,0,.28);
}
.host-image::after {
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:1px;
  background:var(--edge);
  pointer-events:none;
}
.host-booth-day,
.host-booth-night,
.host-booth-character {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}
.host-booth-night { opacity:var(--booth-night-opacity, 1); transition:opacity 8s ease-in-out; }
.host-booth-character {
  filter:brightness(var(--booth-character-brightness, 1));
  transition:filter 8s ease-in-out;
}
.host-graveyard {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  image-rendering:auto;
}
:root:not(.presentation-ready) .host-booth-night { transition:none; }
:root:not(.presentation-ready) .host-booth-character { transition:none; }
.ambient-backdrop::after {
  background:
    radial-gradient(circle at 50% 20%, rgba(97,51,135,.12), transparent 46%),
    linear-gradient(115deg, rgba(171,191,227,var(--backdrop-daylight, 0)), rgba(255,162,95,var(--backdrop-warmth, 0)));
}
@media (prefers-reduced-motion:reduce) {
  .host-booth-night, .host-booth-character { transition:none; }
}
.host-nameplate { padding:14px 14px 12px; border-bottom:1px solid #252a26; }
.host-nameplate strong { display:block; margin:5px 0 3px; font-size:1.05rem; letter-spacing:.04em; }
.host-nameplate > span:last-child { color:#858d86; font-size:.6rem; letter-spacing:.12em; }
.host-details {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 10px;
  padding:12px 14px 15px;
  font-size:.5rem;
  letter-spacing:.09em;
  color:#666e68;
}
.host-details strong { color:#8a928b; font-size:.53rem; font-weight:600; }

.station-footer {
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-top:12px;
  padding:9px 4px 0;
  color:#656d66;
  font-size:.59rem;
  letter-spacing:.07em;
  line-height:1.5;
}
.footer-model { white-space:nowrap; }

@media (prefers-reduced-motion: reduce) {
  /* Keep the informational Featured Artists ticker moving even when the
     OS requests reduced motion; only decorative meter animation is stopped. */
  .station-shell.is-live .signal-meter span { animation:none; }
}

@media (max-width:1050px) {
  .console-grid { grid-template-columns:minmax(0,1fr) 240px; }
  .host-image { min-height:450px; }
  .receiver-deck { grid-template-columns:102px minmax(0,1fr); }
  .control-bank { grid-column:1/-1; grid-template-columns:1.1fr 1fr 1.4fr; align-items:center; }
  .control-row { display:contents; }
  .volume-control { min-width:0; }
}

@media (max-width:790px) {
  body { padding:14px 9px 30px; }
  .station-shell { padding:10px; border-radius:8px; }
  .receiver-header { align-items:flex-start; padding:13px; }
  .signal-meter { display:none; }
  .on-air-module { min-width:auto; padding:8px 10px; }
  .console-grid { grid-template-columns:1fr; }
  .host-component { display:grid; grid-template-columns:160px 1fr; min-height:0; }
  .host-image { min-height:190px; grid-row:1/3; }
  .host-nameplate { align-self:end; }
  .host-details { align-self:start; }
  .receiver-deck { grid-template-columns:82px minmax(0,1fr); }
  .album-module { min-width:0; }
  .control-bank { grid-template-columns:1fr 1fr; }
  .volume-control { grid-column:1/-1; }
  .ticker-component { grid-template-columns:1fr; gap:6px; }
  .ticker-label { border-right:0; padding-left:0; }
  .station-footer { flex-direction:column; gap:5px; }
  .footer-model { white-space:normal; }
}

@media (max-width:520px) {
  .receiver-header { flex-direction:column; gap:12px; }
  .header-instruments { width:100%; justify-content:flex-end; }
  .crt-bezel { padding:8px; border-radius:10px; }
  .monitor-component { padding:8px; }
  .monitor-topline { font-size:.52rem; }
  .receiver-deck { grid-template-columns:68px minmax(0,1fr); gap:10px; padding:10px; }
  .track-display { padding:10px; }
  .track-display-header { flex-direction:column; gap:4px; }
  .control-bank { grid-template-columns:1fr; }
  .control-row { display:grid; grid-template-columns:1fr 1fr; }
  .host-component { grid-template-columns:125px 1fr; }
  .host-image { min-height:170px; }
  .host-details { display:none; }
  .ticker-track { font-size:.66rem; }
}


/* Smooth Station ID crossfades */
.station-id,
.station-id-graphic {
  transition: opacity .55s ease;
  will-change: opacity;
}

.station-id-graphic {
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}


/* Now Playing typography */
#artist,
#title {
  text-transform: uppercase;
}

#artist {
  font-family:"PE Eurostile","Arial Narrow",Arial,Helvetica,sans-serif;
  font-weight:700;
}

#title {
  font-family:"PE Eurostile","Arial Narrow",Arial,Helvetica,sans-serif;
  font-weight:400;
}

.ticker-track {
  font-family:"PE Digital 7","Lucida Console","Courier New",monospace;
}


/* Defensive spacing rules for converted Eurostile webfonts.
   These prevent malformed kerning/ligature data from creating odd gaps. */
#artist,
#title {
  white-space: normal;
  word-spacing: normal;
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "kern" 0, "liga" 0, "clig" 0;
}


/* iOS uses device/system volume rather than reliable per-media web volume. */
.volume-hint {
  grid-column:2;
  color:var(--amber);
  font-size:.52rem;
  letter-spacing:.08em;
}

html.ios-media-volume .volume-control input,
html.ios-media-volume .volume-control .scale-marks {
  display:none;
}

html.ios-media-volume .volume-hint {
  display:block !important;
}

html.ios-media-volume .volume-control {
  grid-template-columns:auto 1fr;
  min-height:34px;
}


/* =========================================================
   HI-FI POLISH v2 — late-80s / early-90s premium component
   ========================================================= */

:root {
  --faceplate:#171a18;
  --faceplate-hi:#252925;
  --faceplate-lo:#0b0d0c;
  --print:#7c847d;
  --silver:#a7ada7;
  --smoked:#020604;
}

body {
  background-color:#05070c;
}

.station-shell {
  position:relative;
  z-index:1;
  padding:20px;
  border-radius:4px;
  border-color:#3b413c;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
    linear-gradient(180deg,#171a18,#0c0f0d 58%,#090b0a);
  box-shadow:
    0 34px 100px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -2px 0 rgba(0,0,0,.75);
}

.station-shell::before,
.station-shell::after {
  content:"";
  position:absolute;
  top:12px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#777,#222 38%,#090a09 70%);
  box-shadow:0 calc(100vh - 70px) 0 rgba(0,0,0,0);
  opacity:.8;
}
.station-shell::before { left:9px; }
.station-shell::after { right:9px; }

.receiver-header,
.monitor-component,
.ticker-component,
.receiver-deck,
.host-component {
  border-radius:3px;
  border-color:#3c423d;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.009) 0 1px, transparent 1px 3px),
    linear-gradient(180deg,#202420,#111411 55%,#0b0d0c);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.9),
    0 5px 18px rgba(0,0,0,.3);
}

.receiver-header {
  min-height:108px;
  padding:15px 18px 14px;
  border-top-color:#525953;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,#292d29 0%,#171a17 48%,#0f1110 100%);
}

.brand-lockup { flex:1 1 auto; }
.brand-badge {
  width:min(570px,100%);
  min-height:48px;
  display:flex;
  align-items:center;
  margin:5px 0 6px;
  padding:5px 10px 4px;
  border:1px solid #353a36;
  background:linear-gradient(180deg,#101311,#090b0a);
  box-shadow:inset 0 0 14px #000, inset 0 1px 0 rgba(255,255,255,.03);
}

.station-logo {
  display:block;
  max-width:min(520px,100%);
  max-height:58px;
  object-fit:contain;
  object-position:left center;
}

.station-name-fallback {
  margin:0;
  color:#d9ddd8;
  font-family:"PE Eurostile",Arial,Helvetica,sans-serif;
  font-size:clamp(1.45rem,3.2vw,2.45rem);
  line-height:1;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.13em;
  text-shadow:0 1px #000;
}
.station-name-fallback.has-logo { display:none; }

.brand-spec-strip {
  display:flex;
  flex-wrap:wrap;
  gap:7px 18px;
  color:#6e766f;
  font-size:.52rem;
  letter-spacing:.13em;
}
.brand-spec-strip span:first-child {
  color:var(--amber-soft);
}

.component-subtitle { display:none; }

.header-instruments {
  align-self:stretch;
  align-items:flex-start;
  gap:13px;
}
.meter-module,
.air-stack {
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:5px;
}
.instrument-label {
  min-height:1em;
  color:#656d66;
  font-size:.48rem;
  line-height:1;
  letter-spacing:.14em;
  text-align:center;
}
.meter-scale {
  display:flex;
  justify-content:space-between;
  color:#515852;
  font-size:.42rem;
  letter-spacing:0;
  padding:0 3px;
}
.signal-meter {
  height:34px;
  min-width:116px;
  padding:6px 8px;
  border-radius:1px;
  border-color:#202b23;
  background:linear-gradient(180deg,#020503,#060b07);
}
.signal-meter span {
  width:6px;
  background:#28422f;
}
.on-air-module {
  min-width:120px;
  min-height:34px;
  border-radius:2px;
  background:linear-gradient(180deg,#050906,#010302);
}

.console-grid {
  grid-template-columns:minmax(0,1fr) 292px;
  grid-template-areas:
    "monitor host"
    "ticker host"
    "receiver host";
  gap:11px 15px;
  align-items:stretch;
}
.monitor-component { grid-area:monitor; }
.ticker-component { grid-area:ticker; }
.receiver-deck { grid-area:receiver; }
.host-component { grid-area:host; }

.monitor-component {
  position:relative;
  padding:11px 13px 12px;
}
.monitor-component::before,
.monitor-component::after,
.receiver-deck::before,
.receiver-deck::after {
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#929892,#343834 38%,#101210 72%);
  opacity:.7;
}
.monitor-component::before,
.receiver-deck::before { left:7px; top:7px; }
.monitor-component::after,
.receiver-deck::after { right:7px; top:7px; }

.monitor-topline,
.monitor-footer {
  color:#757d76;
  font-size:.54rem;
}

.crt-bezel {
  padding:16px 18px 17px;
  border-radius:9px;
  border-color:#3f4540;
  background:
    linear-gradient(145deg,#303530,#151915 57%,#070907);
  box-shadow:
    inset 0 0 0 2px #0a0c0b,
    inset 0 1px 3px rgba(255,255,255,.08),
    0 8px 18px rgba(0,0,0,.48),
    0 0 22px rgba(255,154,77,var(--crt-glow, .03));
}
.crt-screen {
  border-radius:13px / 8px;
  border-width:3px;
  box-shadow:
    inset 0 0 48px rgba(0,0,0,.74),
    0 0 0 1px #444a45;
}
.glass-sheen {
  background:
    linear-gradient(112deg,rgba(255,255,255,.045),transparent 18%,transparent 72%,rgba(255,255,255,.016)),
    radial-gradient(ellipse at center,transparent 66%,rgba(0,0,0,.18) 100%);
}

.ticker-component {
  min-height:49px;
  padding:8px 12px;
  border-top-color:#464d47;
}
.ticker-label {
  color:#bd7d3e;
  font-size:.53rem;
}
.ticker-window {
  padding:7px 0 5px;
  border-color:#1c2a20;
  background:#020704;
  box-shadow:inset 0 0 18px #000, 0 0 0 1px rgba(80,130,91,.06);
}
.ticker-track {
  color:#8fdaa1;
  text-shadow:0 0 5px rgba(117,231,143,.45);
}

.receiver-deck {
  position:relative;
  grid-template-columns:118px minmax(0,1fr) 286px;
  grid-template-rows:auto 1fr;
  gap:6px 15px;
  padding:13px 14px 15px;
  border-top-color:#4a504b;
}
.deck-legend {
  color:#5d655e;
  font-size:.46rem;
  letter-spacing:.15em;
  text-align:center;
  padding-bottom:2px;
}
.deck-legend-left { grid-column:1; }
.deck-legend-center { grid-column:2; }
.deck-legend-right { grid-column:3; }
.album-module { grid-column:1; grid-row:2; }
.track-display { grid-column:2; grid-row:2; }
.control-bank { grid-column:3; grid-row:2; }

.album-frame {
  padding:6px;
  border-color:#3b413c;
  background:linear-gradient(145deg,#171a18,#070807);
  box-shadow:inset 0 0 12px #000, 0 1px 0 rgba(255,255,255,.04);
}

.track-display {
  min-height:118px;
  padding:11px 14px 9px;
  border-radius:1px;
  border-color:#213128;
  background:
    linear-gradient(rgba(41,84,51,.035),rgba(0,0,0,0)),
    #020603;
  box-shadow:inset 0 0 28px #000;
}
.track-display-header {
  border-bottom:1px solid #102016;
  padding-bottom:6px;
  margin-bottom:9px;
}
.track-display h2 {
  color:#f0eee8;
  font-size:clamp(1.08rem,2.05vw,1.5rem);
}
.track-display p {
  color:#b9bcb7;
  font-size:.91rem;
}
.program-flags {
  display:flex;
  flex-wrap:wrap;
  gap:6px 15px;
  margin-top:11px;
  padding-top:7px;
  border-top:1px solid #0e1c13;
  color:#4f6957;
  font-family:"Lucida Console","Courier New",monospace;
  font-size:.47rem;
  letter-spacing:.08em;
}
.program-flags span { display:flex; align-items:center; gap:5px; }
.flag-led {
  width:4px;
  height:4px;
  border-radius:50%;
  display:inline-block;
}
.flag-led.green { background:var(--green); box-shadow:0 0 5px rgba(104,239,132,.58); }
.flag-led.amber { background:var(--amber); box-shadow:0 0 5px rgba(255,159,63,.48); }

.control-bank {
  position:relative;
  padding:8px 9px 9px;
  border-left:1px solid #303631;
  border-right:1px solid #121512;
  background:linear-gradient(90deg,rgba(0,0,0,.12),transparent 8%,transparent 92%,rgba(255,255,255,.018));
}
.control-bank-head {
  display:flex;
  justify-content:space-between;
  color:#565e57;
  font-size:.44rem;
  letter-spacing:.13em;
  margin-bottom:1px;
}
.hardware-button {
  min-height:34px;
  border-radius:2px;
  border-color:#4a504a;
  background:
    linear-gradient(180deg,#30342f 0%,#222622 12%,#151815 62%,#0d0f0d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.5),
    0 2px 2px rgba(0,0,0,.58);
}
.hardware-button:hover:not(:disabled) {
  background:linear-gradient(180deg,#363b36,#242824 14%,#181b18 64%,#101210);
}
.hardware-button:active:not(:disabled) {
  transform:translateY(1px);
  background:linear-gradient(180deg,#171a17,#252925);
}
.enter-button {
  border-left:3px solid #6d774f;
}

.volume-control {
  margin-top:2px;
  padding:5px 7px 4px;
  border:1px solid #272d28;
  background:#0b0d0c;
}
.volume-control input[type="range"] {
  height:18px;
  accent-color:var(--amber-soft);
}
.volume-control input[type="range"]::-webkit-slider-runnable-track {
  height:3px;
  background:linear-gradient(90deg,#294c31 0 65%,#6d401d 65% 100%);
  border:1px solid #101510;
}
.volume-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:10px;
  height:18px;
  margin-top:-8px;
  border-radius:1px;
  border:1px solid #6a706b;
  background:linear-gradient(90deg,#424842,#9ca29c 48%,#343934 52%);
  box-shadow:0 1px 2px #000;
}

.host-component {
  border-top-color:#4a504b;
}
.host-topline {
  display:flex;
  justify-content:space-between;
  padding:8px 10px 7px;
  border-bottom:1px solid #2a302b;
  color:#666e67;
  font-size:.48rem;
  letter-spacing:.14em;
}
.host-image {
  min-height:480px;
  background-position:76% center;
  filter:saturate(.92) contrast(1.02);
}
.host-nameplate {
  background:linear-gradient(180deg,#181c18,#101310);
}
.host-nameplate strong {
  color:#dadeda;
  font-family:"PE Eurostile",Arial,sans-serif;
  text-transform:uppercase;
}
.host-details {
  background:#0b0e0c;
}

.station-footer {
  margin-top:8px;
  padding:8px 8px 0;
  border-top:1px solid rgba(255,255,255,.035);
  color:#5b625c;
  font-size:.53rem;
}
.footer-model { letter-spacing:.1em; }

/* Mobile order: monitor -> ticker -> host -> receiver */
@media (max-width:790px) {
  .console-grid {
    grid-template-columns:1fr;
    grid-template-areas:
      "monitor"
      "ticker"
      "host"
      "receiver";
  }

  .host-component {
    display:grid;
    grid-template-columns:150px minmax(0,1fr);
    grid-template-rows:auto 1fr auto;
  }
  .host-topline { grid-column:1/-1; }
  .host-image {
    grid-column:1;
    grid-row:2/4;
    min-height:190px;
  }
  .host-nameplate { grid-column:2; grid-row:2; }
  .host-details { grid-column:2; grid-row:3; }

  .receiver-deck {
    grid-template-columns:82px minmax(0,1fr);
    grid-template-rows:auto auto auto;
  }
  .deck-legend-left { grid-column:1; grid-row:1; }
  .deck-legend-center { grid-column:2; grid-row:1; }
  .deck-legend-right { display:none; }
  .album-module { grid-column:1; grid-row:2; }
  .track-display { grid-column:2; grid-row:2; }
  .control-bank {
    grid-column:1/-1;
    grid-row:3;
    border-left:0;
    border-right:0;
    border-top:1px solid #2b312c;
    margin-top:3px;
    padding-top:10px;
  }
}

@media (max-width:520px) {
  .station-shell { padding:9px; }
  .receiver-header { padding:11px; }
  .brand-badge { min-height:42px; padding:5px 8px; }
  .station-name-fallback { font-size:1.27rem; letter-spacing:.09em; }
  .brand-spec-strip { gap:4px 10px; font-size:.43rem; }
  .meter-module { display:none; }
  .air-stack { width:100%; }
  .instrument-label { text-align:right; }
  .on-air-module { align-self:flex-end; }

  .host-component {
    grid-template-columns:116px minmax(0,1fr);
  }
  .host-image { min-height:150px; }
  .host-nameplate { padding:10px; }
  .host-nameplate strong { font-size:.9rem; }

  .receiver-deck {
    grid-template-columns:68px minmax(0,1fr);
    padding:9px;
  }
  .deck-legend { font-size:.4rem; }
  .program-flags { display:none; }
}

/* Logo faceplate spacing / centering */
.brand-badge {
  justify-content:center;
  margin:8px auto 9px;
  padding:14px 26px;
  box-sizing:border-box;
}

.station-logo {
  width:auto;
  max-width:min(100%, 520px);
  max-height:64px;
  margin:0 auto;
  object-position:center center;
}

.station-name-fallback {
  width:100%;
  text-align:center;
}

@media (max-width:520px) {
  .brand-badge {
    margin:6px auto 7px;
    padding:10px 14px;
  }

  .station-logo {
    max-height:52px;
  }
}


/* Align the small branding text to the centered logo faceplate edges */
.engraved-label,
.brand-spec-strip {
  width:min(570px, 100%);
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

.engraved-label {
  text-align:left;
}

.brand-spec-strip {
  justify-content:flex-start;
}
.brand-badge,
.engraved-label,
.brand-spec-strip {
  margin-left: 0;
  margin-right: 0;
}

.brand-badge {
  justify-content: center;
}

.station-logo {
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   LISTENER ENTRY + MASTER LEVEL POLISH v4.3
   ========================================================= */

/* Six real scale labels can now span the full slider width. */
.scale-marks {
  grid-column:2;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#4d554f;
  font-size:.48rem;
  letter-spacing:.03em;
  line-height:1;
  text-align:center;
}
.scale-marks span {
  display:block;
  flex:0 0 auto;
}

/* A quiet receiver-style prompt that explains the required first click. */
.start-prompt {
  display:block;
  margin-top:-2px;
  color:#728578;
  font-size:.46rem;
  font-weight:700;
  letter-spacing:.14em;
  line-height:1.25;
  text-align:center;
  text-transform:uppercase;
  transition:color .25s ease, text-shadow .25s ease;
}

/* Ready to join: soft green breathing illumination, only after the clock loads. */
.station-shell:not(.is-live) .enter-button:not(:disabled) {
  color:#d7f3dc;
  border-color:#41614a;
  text-shadow:0 0 5px rgba(104,239,132,.20);
  animation:enterBroadcastStandbyPulse 2.8s ease-in-out infinite;
}
.station-shell:not(.is-live) .enter-button:not(:disabled) small {
  color:#8fd99e;
  text-shadow:0 0 4px rgba(104,239,132,.16);
}
.station-shell:not(.is-live) .enter-button:not(:disabled):hover {
  color:var(--vfd-bright);
  border-color:#5c8b67;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.5),
    0 0 7px rgba(104,239,132,.50),
    0 0 20px rgba(104,239,132,.18),
    0 2px 2px rgba(0,0,0,.58);
}

@keyframes enterBroadcastStandbyPulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -2px 0 rgba(0,0,0,.5),
      0 0 4px rgba(104,239,132,.16),
      0 0 10px rgba(104,239,132,.07),
      0 2px 2px rgba(0,0,0,.58);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -2px 0 rgba(0,0,0,.5),
      0 0 7px rgba(104,239,132,.48),
      0 0 19px rgba(104,239,132,.17),
      0 2px 2px rgba(0,0,0,.58);
  }
}

/* Live: stop pulsing and hold the same family of green glow as ON AIR. */
.station-shell.is-live .enter-button,
.station-shell.is-live .enter-button:disabled {
  opacity:1;
  color:var(--vfd-bright);
  border-color:#4d8159;
  cursor:default;
  animation:none;
  text-shadow:0 0 5px rgba(104,239,132,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -2px 0 rgba(0,0,0,.48),
    0 0 6px rgba(82,255,116,.48),
    0 0 16px rgba(82,255,116,.20),
    0 2px 2px rgba(0,0,0,.58);
}
.station-shell.is-live .start-prompt,
.start-prompt.live {
  color:var(--green);
  text-shadow:0 0 5px rgba(82,255,116,.34);
}

@media (prefers-reduced-motion: reduce) {
  .station-shell:not(.is-live) .enter-button:not(:disabled) {
    animation:none;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -2px 0 rgba(0,0,0,.5),
      0 0 6px rgba(104,239,132,.30),
      0 2px 2px rgba(0,0,0,.58);
  }
}


/* =========================================================
   MID-WIDTH RECEIVER LAYOUT + VIDEO STABILITY UI v4.5
   Prevent the Now Playing display from collapsing into a
   narrow text column before the mobile breakpoint takes over.
   ========================================================= */

@media (min-width:791px) and (max-width:1180px) {
  .receiver-deck {
    grid-template-columns:108px minmax(300px,1fr);
    grid-template-rows:auto auto auto;
  }

  .deck-legend-left { grid-column:1; grid-row:1; }
  .deck-legend-center { grid-column:2; grid-row:1; }
  .deck-legend-right { display:none; }

  .album-module { grid-column:1; grid-row:2; }
  .track-display {
    grid-column:2;
    grid-row:2;
    min-width:300px;
  }

  .control-bank {
    grid-column:1 / -1;
    grid-row:3;
    margin-top:4px;
    border-left:0;
    border-right:0;
    border-top:1px solid #2b312c;
    padding-top:10px;
  }
}

/* Once the whole console becomes single-column, let the display scale normally
   without ever forcing individual words into a tall vertical stack. */
@media (max-width:790px) {
  .track-display {
    min-width:0;
  }

  .track-display h2,
  .track-display p {
    overflow-wrap:break-word;
    word-break:normal;
  }
}


/* =========================================================
   LISTEN NOW CRT CALL TO ACTION
   ========================================================= */

/* Give the picture tube a restrained live-electronics bloom. */
.crt-screen {
  transition: box-shadow .45s ease, border-color .45s ease;
}

.station-shell:not(.is-live) .crt-screen {
  border-color:#102417;
  box-shadow:
    inset 0 0 34px rgba(0,0,0,.82),
    0 0 8px rgba(104,239,132,.08),
    0 0 22px rgba(104,239,132,.035);
}

.station-shell.is-live .crt-screen {
  /* Once listening begins, return the picture tube to its normal dark
     receiver bezel. The green bloom is only a pre-play call to action. */
  border-color:#030403;
  box-shadow:inset 0 0 34px rgba(0,0,0,.8);
}

.screen-start-overlay {
  appearance:none;
  position:absolute;
  inset:0;
  z-index:12;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin:0;
  padding:20px;
  border:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at 50% 48%, rgba(17,44,24,.18), transparent 34%),
    rgba(0,5,2,.68);
  color:var(--vfd-bright);
  cursor:pointer;
  opacity:1;
  visibility:visible;
  transition:opacity .4s ease, visibility .4s ease, background .25s ease;
  backdrop-filter:blur(1.2px);
  -webkit-backdrop-filter:blur(1.2px);
}

.screen-start-overlay:disabled {
  cursor:default;
}

/* While the station clock is still loading, keep the CTA subdued. */
.screen-start-overlay:disabled:not([aria-hidden="true"]) {
  opacity:.55;
}

.screen-start-play {
  position:relative;
  width:58px;
  height:58px;
  border:1px solid rgba(172,255,190,.72);
  border-radius:50%;
  background:rgba(8,27,13,.78);
  box-shadow:
    inset 0 0 14px rgba(104,239,132,.10),
    0 0 8px rgba(104,239,132,.42),
    0 0 24px rgba(82,255,116,.18);
  animation:screenListenPulse 2.8s ease-in-out infinite;
}

.screen-start-play::before {
  content:"";
  position:absolute;
  left:23px;
  top:17px;
  width:0;
  height:0;
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  border-left:17px solid var(--vfd-bright);
  filter:drop-shadow(0 0 5px rgba(104,239,132,.7));
}

.screen-start-copy {
  font-family:"PE Eurostile","Arial Narrow",Arial,Helvetica,sans-serif;
  font-size:clamp(.9rem,2vw,1.2rem);
  font-weight:700;
  letter-spacing:.16em;
  text-indent:.16em;
  text-shadow:0 0 7px rgba(104,239,132,.55);
}

.screen-start-overlay small {
  color:#84aa8d;
  font-size:.52rem;
  font-weight:700;
  letter-spacing:.15em;
  text-indent:.15em;
  text-transform:uppercase;
}

.screen-start-overlay:not(:disabled):hover {
  background:
    radial-gradient(circle at 50% 48%, rgba(28,70,39,.24), transparent 37%),
    rgba(0,5,2,.62);
}

.screen-start-overlay:not(:disabled):hover .screen-start-play {
  border-color:#c8ffd0;
  box-shadow:
    inset 0 0 16px rgba(104,239,132,.14),
    0 0 10px rgba(104,239,132,.64),
    0 0 32px rgba(82,255,116,.24);
}

.station-shell.is-live .screen-start-overlay,
.screen-start-overlay[aria-hidden="true"] {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* =========================================================
   FULL SCREEN PLAYER + NOW PLAYING TRANSITIONS
   ========================================================= */

.monitor-fullscreen-button,
.fullscreen-exit-button {
  appearance:none;
  border:1px solid #4b554c;
  border-radius:3px;
  color:#b9c1ba;
  background:linear-gradient(#262a26,#131613 60%,#0c0e0c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 2px 2px rgba(0,0,0,.55);
  font:700 .53rem/1 "PE Eurostile","Arial Narrow",Arial,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
}
.monitor-fullscreen-button { margin-left:auto; padding:7px 9px; }
.monitor-fullscreen-button:hover:not(:disabled),
.fullscreen-exit-button:hover { color:#fff; border-color:#819080; }
.monitor-fullscreen-button:disabled { opacity:.4; cursor:default; }

.fullscreen-now-playing,
.fullscreen-exit-button { display:none; }

#albumCover,
#artist,
#title,
#fullscreenAlbumCover,
#fullscreenArtist,
#fullscreenTitle {
  transition:opacity .42s ease;
}

#albumCover.metadata-fading,
#artist.metadata-fading,
#title.metadata-fading,
#fullscreenAlbumCover.metadata-fading,
#fullscreenArtist.metadata-fading,
#fullscreenTitle.metadata-fading { opacity:0; }

#fullscreenStage:fullscreen,
#fullscreenStage:-webkit-full-screen,
#fullscreenStage.pseudo-fullscreen {
  width:100%;
  height:100%;
  aspect-ratio:auto;
  border:0;
  border-radius:0;
  background:#000;
  box-shadow:none;
}

#fullscreenStage.pseudo-fullscreen {
  position:fixed;
  z-index:1000;
  inset:0;
  width:100vw;
  width:100dvw;
  height:100vh;
  height:100dvh;
}

body.fullscreen-player-active { overflow:hidden; }

#fullscreenStage:fullscreen #visualPlayer,
#fullscreenStage:-webkit-full-screen #visualPlayer,
#fullscreenStage.pseudo-fullscreen #visualPlayer { object-fit:contain; }

#fullscreenStage:fullscreen .fullscreen-now-playing,
#fullscreenStage:-webkit-full-screen .fullscreen-now-playing,
#fullscreenStage.pseudo-fullscreen .fullscreen-now-playing {
  position:absolute;
  z-index:10;
  left:clamp(11px,2vw,32px);
  bottom:clamp(11px,2vw,32px);
  display:flex;
  align-items:flex-end;
  gap:clamp(12px,1.8vw,28px);
  max-width:min(72vw,940px);
  padding:clamp(10px,1.2vw,18px);
  background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.43) 73%,transparent);
  border-left:2px solid rgba(170,255,187,.66);
  box-shadow:0 7px 24px rgba(0,0,0,.35);
}

.fullscreen-album-frame {
  position:relative;
  flex:0 0 auto;
  width:clamp(61px,8vw,138px);
  aspect-ratio:1;
  isolation:isolate;
}
.fullscreen-album-cover {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.fullscreen-track-copy {
  min-width:0;
  padding-bottom:2px;
  color:#f0eee7;
  font-family:"PE Eurostile","Arial Narrow",Arial,sans-serif;
  text-shadow:0 2px 5px #000;
  text-transform:uppercase;
}
.fullscreen-track-copy > span {
  display:block;
  margin-bottom:7px;
  color:#9ab6a0;
  font:700 clamp(.52rem,.75vw,.76rem)/1 "Lucida Console","Courier New",monospace;
  letter-spacing:.16em;
}
.fullscreen-track-copy strong,
.fullscreen-track-copy p {
  display:block;
  margin:0;
  overflow-wrap:anywhere;
  /* The converted Eurostile font has unreliable pair-kerning in a few
     glyph combinations. Match the receiver display's defensive settings so
     full-screen song titles cannot stack letters on top of each other. */
  white-space:normal;
  word-spacing:normal;
  font-kerning:none;
  font-variant-ligatures:none;
  font-feature-settings:"kern" 0, "liga" 0, "clig" 0;
}
.fullscreen-track-copy strong { font-size:clamp(.88rem,1.92vw,2.16rem); letter-spacing:.035em; }
.fullscreen-track-copy p {
  margin-top:4px;
  color:#d1d4cd;
  font-family:"PE Eurostile","Arial Narrow",Arial,Helvetica,sans-serif;
  font-size:clamp(14px,1.24vw,21px);
  font-weight:400;
  letter-spacing:.015em;
  line-height:normal;
  /* Match the receiver title's clean rasterization. The larger shared
     fullscreen shadow softened thin horizontal strokes on this font. */
  text-shadow:none;
}

#fullscreenStage:fullscreen .fullscreen-exit-button,
#fullscreenStage:-webkit-full-screen .fullscreen-exit-button,
#fullscreenStage.pseudo-fullscreen .fullscreen-exit-button {
  position:absolute;
  z-index:14;
  top:clamp(14px,2vw,28px);
  right:clamp(14px,2vw,28px);
  display:block;
  padding:9px 11px;
  border-color:rgba(220,224,218,.42);
  background:rgba(0,0,0,.5);
  font-size:.58rem;
}

@media (max-width:520px) {
  .monitor-footer { flex-wrap:wrap; }
  .monitor-fullscreen-button { width:100%; margin:3px 0 0; }
  #fullscreenStage:fullscreen .fullscreen-now-playing,
  #fullscreenStage:-webkit-full-screen .fullscreen-now-playing,
  #fullscreenStage.pseudo-fullscreen .fullscreen-now-playing {
    right:7px;
    left:7px;
    bottom:7px;
    gap:11px;
    padding:10px;
    max-width:none;
  }
  .fullscreen-track-copy > span { margin-bottom:5px; }
}

@media (prefers-reduced-motion:reduce) {
  #albumCover,
  #artist,
  #title,
  #fullscreenAlbumCover,
  #fullscreenArtist,
  #fullscreenTitle { transition-duration:.01ms; }
}

/* The receiver button now uses the same plain-language CTA. */
.enter-button {
  align-items:center;
}

@keyframes screenListenPulse {
  0%,100% {
    transform:scale(1);
    box-shadow:
      inset 0 0 14px rgba(104,239,132,.10),
      0 0 7px rgba(104,239,132,.34),
      0 0 19px rgba(82,255,116,.13);
  }
  50% {
    transform:scale(1.025);
    box-shadow:
      inset 0 0 16px rgba(104,239,132,.14),
      0 0 10px rgba(104,239,132,.58),
      0 0 30px rgba(82,255,116,.22);
  }
}

@media (max-width:520px) {
  .screen-start-overlay { gap:7px; padding:12px; }
  .screen-start-play { width:48px; height:48px; }
  .screen-start-play::before {
    left:19px;
    top:14px;
    border-top-width:9px;
    border-bottom-width:9px;
    border-left-width:14px;
  }
  .screen-start-copy { font-size:.86rem; }
  .screen-start-overlay small { font-size:.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .screen-start-play { animation:none; }
}


/* =========================================================
   RESPONSIVE MASTER CONTROL BANK v4.7
   Keep the controls intentionally arranged instead of allowing
   CSS grid auto-placement to scramble them at narrower widths.
   ========================================================= */

@media (min-width:791px) and (max-width:1180px) {
  .control-bank {
    display:grid;
    grid-template-columns:minmax(155px,.9fr) minmax(110px,.62fr) minmax(240px,1.4fr);
    grid-template-rows:auto auto auto;
    grid-template-areas:
      "controlhead controlhead controlhead"
      "listen mute volume"
      "prompt . volume";
    column-gap:10px;
    row-gap:6px;
    align-items:center;
  }

  .control-bank-head { grid-area:controlhead; }
  .enter-button { grid-area:listen; width:100%; }
  .start-prompt { grid-area:prompt; margin:0; }
  #muteButton { grid-area:mute; width:100%; }
  .volume-control {
    grid-area:volume;
    width:100%;
    margin:0;
    align-self:stretch;
  }
}

@media (max-width:790px) {
  .control-bank {
    display:grid;
    grid-template-columns:minmax(140px,.8fr) minmax(190px,1.2fr);
    grid-template-rows:auto auto auto auto;
    grid-template-areas:
      "controlhead controlhead"
      "listen volume"
      "prompt volume"
      "mute volume";
    column-gap:10px;
    row-gap:6px;
    align-items:center;
  }

  .control-bank-head { grid-area:controlhead; }
  .enter-button { grid-area:listen; width:100%; }
  .start-prompt { grid-area:prompt; margin:0; }
  #muteButton { grid-area:mute; width:100%; }
  .volume-control { grid-area:volume; width:100%; margin:0; }
}

@media (max-width:520px) {
  .control-bank {
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto auto;
    grid-template-areas:
      "controlhead"
      "listen"
      "prompt"
      "mute"
      "volume";
  }
}

/* =========================================================
   INTERMEDIATE CONTROL BANK CONTAINMENT v4.8
   At widths where the host is still beside the receiver, do
   not force three controls across the narrower receiver deck.
   ========================================================= */
@media (min-width:791px) and (max-width:1180px) {
  .control-bank {
    min-width:0;
    width:100%;
    max-width:100%;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto auto auto;
    grid-template-areas:
      "controlhead controlhead"
      "listen mute"
      "prompt ."
      "volume volume";
    column-gap:10px;
    row-gap:6px;
    align-items:center;
  }

  .control-bank-head { grid-area:controlhead; min-width:0; }
  .enter-button { grid-area:listen; width:100%; min-width:0; }
  #muteButton { grid-area:mute; width:100%; min-width:0; }
  .start-prompt { grid-area:prompt; margin:0; min-width:0; }

  .volume-control {
    grid-area:volume;
    width:100%;
    min-width:0;
    max-width:100%;
    margin:0;
  }

  .volume-control input[type="range"] {
    min-width:0;
    width:100%;
  }

  .track-display,
  .track-display-header,
  .track-display h2,
  .track-display p {
    min-width:0;
  }

  .track-display-header {
    flex-wrap:wrap;
  }

  #trackCounter {
    white-space:nowrap;
  }
}

/* =========================================================
   EARLIER CONSOLE STACK + CONTROL-FIRST ORDER v4.9
   Once the two-column console begins squeezing the receiver,
   stack the host below the complete receiver instead.
   ========================================================= */
@media (max-width:1120px) {
  .console-grid {
    grid-template-columns:1fr;
    grid-template-areas:
      "monitor"
      "ticker"
      "receiver"
      "host";
  }

  /* Keep the host compact once it moves below the controls rather than
     turning it into another full-height right-hand column. */
  .host-component {
    display:grid;
    grid-template-columns:minmax(190px,28%) minmax(0,1fr);
    grid-template-rows:auto 1fr auto;
    min-height:0;
  }

  .host-topline {
    grid-column:1 / -1;
    grid-row:1;
  }

  .host-image {
    grid-column:1;
    grid-row:2 / 4;
    min-height:250px;
    background-position:76% center;
  }

  .host-nameplate {
    grid-column:2;
    grid-row:2;
    align-self:stretch;
  }

  .host-details {
    grid-column:2;
    grid-row:3;
  }
}

/* Preserve the smaller host proportions at phone/tablet widths while
   retaining the control-first order introduced above. */
@media (max-width:790px) {
  .console-grid {
    grid-template-areas:
      "monitor"
      "ticker"
      "receiver"
      "host";
  }

  .host-component {
    grid-template-columns:150px minmax(0,1fr);
  }

  .host-image {
    min-height:190px;
  }
}

@media (max-width:520px) {
  .host-component {
    grid-template-columns:116px minmax(0,1fr);
  }

  .host-image {
    min-height:150px;
  }
}

/* =========================================================
   RESPONSIVE POLISH v5.0
   Earlier control stacking, persistent host details, and a
   compact-but-visible program meter at narrow widths.
   ========================================================= */

/* Once the receiver is roughly tablet-width, prioritize the two primary
   buttons and put MASTER LEVEL on its own full-width row before anything
   gets cramped. */
@media (max-width:900px) {
  .control-bank {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto auto auto;
    grid-template-areas:
      "controlhead controlhead"
      "listen mute"
      "prompt ."
      "volume volume";
    column-gap:10px;
    row-gap:6px;
    align-items:center;
  }

  .control-bank-head { grid-area:controlhead; min-width:0; }
  .enter-button { grid-area:listen; width:100%; min-width:0; }
  #muteButton { grid-area:mute; width:100%; min-width:0; }
  .start-prompt { grid-area:prompt; margin:0; min-width:0; }
  .volume-control {
    grid-area:volume;
    width:100%;
    min-width:0;
    max-width:100%;
    margin:0;
  }
}

/* The program meter is useful station feedback, so keep it visible instead
   of dropping it at the tablet breakpoint. */
@media (max-width:790px) {
  .meter-module { display:flex; }
  .signal-meter {
    display:flex;
    min-width:102px;
    height:32px;
    padding:6px 7px;
  }
  .signal-meter span { width:5px; }
}

/* On phones the header already becomes two rows, leaving enough room for a
   compact meter and transmission lamp side-by-side. Keep the host metadata
   too; it is useful content and can wrap rather than disappearing. */
@media (max-width:520px) {
  .meter-module { display:flex; }
  .header-instruments {
    width:100%;
    justify-content:flex-end;
    align-items:flex-start;
    gap:10px;
  }
  .signal-meter {
    display:flex;
    min-width:94px;
    height:30px;
    padding:5px 6px;
  }
  .signal-meter span { width:4px; }
  .meter-scale { font-size:.38rem; }
  .instrument-label { text-align:center; }

  .host-details {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:5px 8px;
    padding:9px 10px 11px;
    font-size:.45rem;
  }
  .host-details strong {
    min-width:0;
    overflow-wrap:break-word;
    font-size:.48rem;
  }
}

/* =========================================================
   RESPONSIVE HEADER POLISH v9
   Keep PROGRAM LEVEL and TRANSMISSION together as one compact
   instrument cluster on the narrowest layout.
   ========================================================= */
@media (max-width:520px) {
  .header-instruments {
    width:100%;
    justify-content:flex-start;
    align-items:flex-start;
    gap:22px;
  }

  .meter-module,
  .air-stack {
    width:auto;
    flex:0 0 auto;
    align-items:center;
  }

  .air-stack {
    justify-content:flex-start;
  }

  .on-air-module {
    align-self:auto;
    min-width:150px;
  }

  .instrument-label {
    width:100%;
    text-align:center;
  }
}


/* =========================================================
   NARROW MONITOR + TICKER POLISH v10
   Preserve the monitor identity at phone widths and keep the
   informational Featured Artists ticker active even on systems
   with reduced-motion enabled.
   ========================================================= */
@media (max-width:520px) {
  .monitor-topline {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
  }

  .monitor-topline span:first-child {
    display:inline !important;
    min-width:0;
    white-space:nowrap;
  }

  .monitor-topline #visualCounter {
    min-width:0;
    text-align:right;
    white-space:nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    animation-name:tickerScroll !important;
    animation-duration:var(--ticker-duration, 70s) !important;
    animation-timing-function:linear !important;
    animation-iteration-count:infinite !important;
  }
}


/* Music credits / licensing footer link */
.station-footer .footer-link {
  color:#7f8981;
  text-decoration:none;
  border-bottom:1px solid rgba(155,216,167,.18);
  transition:color .16s ease, border-color .16s ease;
}

.station-footer .footer-link:hover,
.station-footer .footer-link:focus-visible {
  color:var(--vfd);
  border-color:rgba(155,216,167,.55);
}

/* The desktop receiver shares a row with chat. Give the program display the
   room to keep its running-time readout together, while centering the three
   lower modules in the newly taller row. */
@media (min-width:1121px) {
  .receiver-deck {
    grid-template-columns:118px minmax(0,1fr) 230px;
    gap:14px;
    align-self:start;
  }
  .album-module { justify-content:center; }
  .track-display { display:flex; flex-direction:column; justify-content:center; }
  .track-display-header { align-items:center; flex-wrap:nowrap; }
  #trackCounter { flex:0 0 auto; white-space:nowrap; }
  .control-bank { width:100%; max-width:230px; justify-self:end; align-content:center; }
}

/* The 16:9 DJ booth shares the top row with the CRT instead of occupying a
   narrow full-height sidebar. Keep its entire frame visible at every width. */
.host-component {
  display:flex;
  flex-direction:column;
  min-height:0;
}
.host-image {
  width:100%;
  min-height:0;
  flex:0 0 auto;
  aspect-ratio:2577 / 1450;
  filter:none;
}
@media (min-width:1121px) {
  .console-grid {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "monitor host"
      "ticker ticker"
      "receiver receiver";
    align-items:start;
  }
}

/* Viewer-local clock, independent of the shared broadcast schedule. */
.header-instruments {
  display:grid;
  grid-template-columns:auto auto;
  row-gap:8px;
  align-content:start;
}
.local-clock {
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:6px 9px;
  border:1px solid #263029;
  border-radius:3px;
  background:#070a08;
  box-shadow:inset 0 0 16px #000;
}
.local-clock .instrument-label { width:auto; }
.local-clock-display {
  display:inline-grid;
  grid-template-columns:repeat(8, .55em);
  text-align:center;
  flex:0 0 auto;
  color:var(--vfd);
  font-family:"PE Digital 7 Mono","Lucida Console","Courier New",monospace;
  font-size:1.25rem;
  line-height:1;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  text-shadow:0 0 5px rgba(155,216,167,.25);
}
.local-time-format {
  min-width:34px;
  min-height:24px;
  padding:3px 5px;
  border:1px solid #39443c;
  border-radius:2px;
  background:linear-gradient(180deg,#202720,#101510);
  color:#9cbba1;
  font-family:"PE Eurostile",Arial,sans-serif;
  font-size:.52rem;
  font-weight:700;
  letter-spacing:.06em;
  cursor:pointer;
}
.local-time-format:hover,
.local-time-format:focus-visible { border-color:#769d7c; color:var(--vfd-bright); outline:0; }
.local-time-meridiem {
  display:inline-block;
  flex:0 0 2ch;
  width:2ch;
  color:#96bf9d;
  font-family:"PE Eurostile",Arial,sans-serif;
  font-size:.56rem;
  font-weight:700;
  letter-spacing:.08em;
}
@media (max-width:360px) {
  .header-instruments { column-gap:10px; }
  .header-instruments .on-air-module { min-width:118px; }
}

/* Listener Relay — deliberately a separate receiver module so the future
   animated booth can occupy the top-right panel without chat competing with it. */
.listener-chat {
  grid-area:chat;
  min-width:0;
  height:440px;
  min-height:0;
  max-height:440px;
  align-self:start;
  display:grid;
  grid-template-rows:auto auto minmax(120px, 1fr) auto;
  border:1px solid var(--edge);
  border-radius:7px;
  overflow:hidden;
  background:linear-gradient(145deg, #161a17, #080b09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 7px 22px rgba(0,0,0,.25);
}
.listener-chat-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 11px 8px;
  border-bottom:1px solid #29302b;
  background:linear-gradient(180deg,#1b201c,#101411);
}
.listener-chat-kicker {
  display:block;
  color:#747d75;
  font-size:.43rem;
  letter-spacing:.18em;
}
.listener-chat h2 {
  margin:2px 0 0;
  color:#d8ddd8;
  font-family:"PE Eurostile",Arial,sans-serif;
  font-size:.72rem;
  letter-spacing:.14em;
}
.listener-chat-status {
  color:var(--amber);
  font-family:"Lucida Console","Courier New",monospace;
  font-size:.46rem;
  letter-spacing:.1em;
  white-space:nowrap;
}
.listener-chat-status.online { color:var(--vfd); text-shadow:0 0 5px rgba(155,216,167,.3); }
.listener-chat-status.error { color:#d67b70; }
.chat-pinned {
  display:flex;
  align-items:baseline;
  gap:7px;
  padding:6px 10px;
  border-bottom:1px solid #48583a;
  background:linear-gradient(90deg,rgba(133,106,36,.22),rgba(20,29,21,.95));
  color:#e1ded0;
  font-size:.7rem;
  line-height:1.3;
}
.chat-pinned[hidden] { display:none; }
.chat-pinned-label {
  flex:0 0 auto;
  color:var(--amber);
  font-family:"PE Eurostile",Arial,sans-serif;
  font-size:.49rem;
  font-weight:700;
  letter-spacing:.1em;
}
.chat-pinned-text { overflow-wrap:anywhere; }
.chat-messages {
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:8px 10px;
  background:
    repeating-linear-gradient(0deg,rgba(104,239,132,.018) 0 1px,transparent 1px 4px),
    #030604;
  scrollbar-color:#536459 #0a0d0a;
}
.chat-message { padding:5px 0 6px; border-bottom:1px solid rgba(75,106,80,.2); }
.chat-message-admin { padding-left:5px; border-left:2px solid #d93434; background:linear-gradient(90deg,rgba(190,28,35,.16),transparent 58%); }
.chat-message:last-child { border-bottom:0; }
.chat-message-meta { display:flex; align-items:baseline; gap:8px; margin-bottom:2px; }
.chat-message-name { color:var(--vfd); font-family:"PE Eurostile",Arial,sans-serif; font-size:.65rem; letter-spacing:.08em; overflow-wrap:anywhere; }
.chat-mod-badge { padding:1px 4px; border:1px solid #a97232; border-radius:2px; color:#ffd38a; background:#36200c; font:700 .43rem "PE Eurostile",Arial,sans-serif; letter-spacing:.09em; }
.chat-message-time { color:#58645b; font: .48rem "Lucida Console","Courier New",monospace; }
.chat-message-body { color:#d5d9d4; font-size:.76rem; line-height:1.32; overflow-wrap:anywhere; white-space:pre-wrap; }
.chat-empty { margin:10px 0; color:#69736b; font-size:.7rem; text-align:center; }
.chat-form {
  position:relative;
  display:grid;
  grid-template-columns:92px minmax(0,1fr) 34px 52px;
  gap:6px;
  padding:8px 9px 7px;
  border-top:1px solid #263028;
  background:linear-gradient(180deg,#111611,#0a0d0b);
}
.chat-form label {
  min-width:0;
  display:grid;
  grid-template-rows:auto 29px;
  align-self:end;
}
.chat-form label > span { display:block; margin:0 0 3px 2px; color:#687169; font-size:.42rem; letter-spacing:.12em; }
.chat-form input {
  width:100%;
  min-width:0;
  height:29px;
  padding:5px 7px;
  border:1px solid #324036;
  border-radius:2px;
  outline:0;
  background:#030704;
  color:#e8ece8;
  font-size:.7rem;
}
.chat-form input::placeholder { color:#566058; opacity:1; }
.chat-form input:focus { border-color:#739b78; box-shadow:0 0 0 1px rgba(155,216,167,.15); }
.chat-send,
.chat-emoji-toggle {
  align-self:end;
  height:29px;
  min-height:29px;
  margin:0;
  padding:4px 3px;
  color:#d9ddd7;
  font-size:.57rem;
  letter-spacing:.08em;
}
.chat-emoji-toggle { font-size:.9rem; line-height:1; letter-spacing:0; }
.chat-emoji-picker {
  position:absolute;
  z-index:5;
  right:58px;
  bottom:58px;
  display:grid;
  grid-template-columns:repeat(8, 31px);
  gap:4px;
  padding:6px;
  border:1px solid #465448;
  border-radius:3px;
  background:#101612;
  box-shadow:0 8px 20px rgba(0,0,0,.7), inset 0 1px rgba(255,255,255,.06);
}
.chat-emoji-picker[hidden] { display:none; }
.chat-emoji-picker button {
  width:31px;
  height:29px;
  padding:0;
  border:1px solid #303b32;
  border-radius:2px;
  background:#070b08;
  font-size:1rem;
  line-height:1;
  cursor:pointer;
}
.chat-emoji-picker button:hover,
.chat-emoji-picker button:focus-visible { border-color:#739b78; background:#17221a; outline:0; }
.chat-notice { grid-column:1 / -1; margin:0; color:#687169; font-size:.49rem; line-height:1.25; }
.chat-honeypot { position:absolute !important; left:-10000px; width:1px !important; height:1px !important; opacity:0; pointer-events:none; }

@media (min-width:1121px) {
  .console-grid {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "monitor host"
      "ticker ticker"
      "receiver chat";
    align-items:stretch;
  }
}

@media (max-width:1120px) {
  .console-grid {
    grid-template-areas:
      "monitor"
      "ticker"
      "receiver"
      "host"
      "chat";
  }
  .listener-chat { height:400px; max-height:400px; }
}

@media (max-width:520px) {
  .listener-chat { height:370px; max-height:370px; }
  .chat-form { grid-template-columns:78px minmax(0,1fr) 31px 45px; gap:5px; padding:7px; }
  .chat-emoji-picker { right:51px; bottom:55px; grid-template-columns:repeat(6, 31px); }
  .chat-form input { font-size:.66rem; padding:5px; }
  .chat-message-body { font-size:.72rem; }
}

/* Below this width the equal player/chat columns leave too little room for
   track metadata. Stack before either side becomes cramped. */
@media (min-width:1121px) and (max-width:1320px) {
  .console-grid {
    grid-template-columns:1fr;
    grid-template-areas:
      "monitor"
      "ticker"
      "receiver"
      "host"
      "chat";
  }
  .host-component {
    display:grid;
    grid-template-columns:minmax(190px,28%) minmax(0,1fr);
    grid-template-rows:auto 1fr auto;
  }
  .host-topline { grid-column:1 / -1; grid-row:1; }
  .host-image { grid-column:1; grid-row:2 / 4; min-height:250px; aspect-ratio:auto; }
  .host-nameplate { grid-column:2; grid-row:2; align-self:stretch; }
  .host-details { grid-column:2; grid-row:3; }
}

@media (min-width:1321px) {
  .receiver-deck { grid-template-columns:118px minmax(0,1fr) 200px; }
  .control-bank { max-width:200px; }
  .track-display h2 { font-size:clamp(1.05rem,1.45vw,1.28rem); }
}