/* London Calling Radio — circular pop-out player */
:root {
  --bg: #121110;
  --cream: #F4EFE6;
  --cream-dim: rgba(244, 239, 230, 0.72);
  --crimson-hot: #E32E1C;
  --font-sans: "Instrument Sans", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #121110;
  color: var(--cream);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 1px solid var(--cream); outline-offset: 3px; }
::selection { background: var(--crimson-hot); color: var(--cream); }

.stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.disc {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.planet {
  filter: drop-shadow(0 0 16px rgba(227, 46, 28, 0.32));
}

.earth-spin { transform: translateX(0); }
.is-playing .earth-spin {
  animation: earth-rotate 48s linear infinite;
}
@keyframes earth-rotate {
  to { transform: translateX(-400px); }
}

.legend {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  fill: var(--cream);
  pointer-events: none;
}
.legend-top { font-size: 12.5px; letter-spacing: 0.22em; }
.legend-top .init{fill:#E32E1C}
.legend-bot { font-family: var(--font-sans); font-size: 8.75px; font-weight: 500; letter-spacing: 0.025em; fill: var(--cream-dim); }
.legend-bot .live-kicker { fill: #E32E1C; letter-spacing: 0.14em; }
.legend-bot tspan#oa-now-show { fill: var(--cream); }
.legend-bot textPath { /* "ON AIR NOW" stays crimson via a class if present */ }

.vol { cursor: pointer; }
.vol:focus { outline: none; }
.vol:focus-visible #vol-thumb {
  outline: 1px solid var(--cream);
  outline-offset: 3px;
}
#vol-thumb {
  filter: drop-shadow(0 0 4px rgba(244, 239, 230, 0.45));
}

/* play — centred on the globe, not the taller viewBox */
.play {
  position: absolute;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  border: 1px solid rgba(244, 239, 230, 0.28);
  background: rgba(10, 9, 8, 0.72);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 8px 22px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--crimson-hot);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.play:hover {
  background: rgba(10, 9, 8, 0.78);
  transform: translate(-50%, -50%) scale(1.05);
}
.play:focus-visible {
  outline: 1px solid var(--cream);
  outline-offset: 3px;
}
.play.is-playing {
  box-shadow:
    0 0 0 1px rgba(227, 46, 28, 0.28),
    0 0 18px rgba(227, 46, 28, 0.45),
    0 8px 22px rgba(0, 0, 0, 0.35);
}
.play-icon {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 16px;
  border-color: transparent transparent transparent var(--crimson-hot);
  margin-left: 3px;
}
.play.is-playing .play-icon {
  width: 16px;
  height: 18px;
  border: 0;
  margin: 0;
  background:
    linear-gradient(var(--crimson-hot), var(--crimson-hot)) 0 0 / 5px 100% no-repeat,
    linear-gradient(var(--crimson-hot), var(--crimson-hot)) 11px 0 / 5px 100% no-repeat;
}

.halo {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 67.37%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}
.halo::before,
.halo::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(227, 46, 28, 0.55);
  border-radius: 50%;
  opacity: 0;
}
.is-playing .halo::before { animation: signal 3.2s ease-out infinite; }
.is-playing .halo::after  { animation: signal 3.2s ease-out 1.6s infinite; }
@keyframes signal {
  0%   { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.48); opacity: 0; }
}

.play { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .earth-spin, .halo::before, .halo::after { animation: none !important; }
}
/* current song revolving round the planet */
.song-ring { opacity: 0; transition: opacity .6s; transform-box: view-box; transform-origin: 190px 188px; animation: song-orbit 45s linear infinite; }
.has-song .song-ring { opacity: 1; }
.legend-song { font-family: var(--font-sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; fill: var(--cream); }
.legend-song .song-note { fill: #E32E1C; }
@keyframes song-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .song-ring { animation: none; } }
/* London marker */
.london-dot .ld-core { animation: ld-blink 1.4s ease-in-out infinite; }
.london-dot .ld-pulse { transform-box: fill-box; transform-origin: center; animation: ld-ring 1.4s ease-out infinite; }
@keyframes ld-blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ld-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .london-dot .ld-core, .london-dot .ld-pulse { animation: none; } }