/* =====================================
   VINYLO RADIO PAGE
   Self-contained, single-viewport (no scroll) hero page.
   Relies on site.css for shared primitives: .navbar, .navbar-icon-btn,
   .vinyl-grooves / .label-ring / .record-label / .record-hole,
   .vinyl-light, and the vinylSpin keyframes.

   Visibility convention: anything shown/hidden by JS uses the .is-hidden
   class below, never the [hidden] attribute — mixing the two is what let
   a previous version's lyrics card stay visible while "hidden" (its own
   `display: flex` rule and `[hidden]`'s `display: none` carry equal
   specificity, so whichever is declared later in the file silently wins,
   regardless of which attribute is actually set on the element). One
   rule, with !important, removes that whole class of bug for good.
====================================== */

.is-hidden {
  display: none !important;
}

html, body.radio-page {
  height: 100%;
  overflow: hidden;
}

body.radio-page {
  position: relative;
  background: #050505;
}

/* =====================================
   BACKGROUND — same treatment as the index hero's rotating backdrop:
   no blur, just saturation/brightness plus a slow drift animation.
====================================== */

.radio-page-bg {
  position: fixed;
  inset: -30px;
  z-index: 0;

  background-size: cover;
  background-position: center;
  filter: saturate(.7) brightness(.8);

  opacity: 0;
  transition: opacity 1s ease;
  animation: radioPageBgDrift 32s ease-in-out infinite;
}

.radio-page-bg.is-active {
  opacity: 1;
}

@keyframes radioPageBgDrift {
  0%   { transform: scale(1.08) translate(0,0) rotate(0deg); }
  20%  { transform: scale(1.15) translate(-3%,2%) rotate(.3deg); }
  45%  { transform: scale(1.22) translate(2.5%,-2.5%) rotate(-.2deg); }
  70%  { transform: scale(1.13) translate(-2%,-3%) rotate(.2deg); }
  100% { transform: scale(1.08) translate(0,0) rotate(0deg); }
}

.radio-page-scrim {
  position: fixed;
  inset: 0;
  z-index: 2;

  background: linear-gradient(180deg, rgba(4,5,5,.55) 0%, rgba(4,5,5,.4) 38%, rgba(4,5,5,.5) 68%, rgba(4,5,5,.85) 100%);
}

.radio-page-scrim::after {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(ellipse at center, transparent 10%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.85) 118%);
}

/* =====================================
   BACKGROUND FLOATING PLAIN BLACK VINYL (GLIDES RIGHT CONTINUOUSLY)
====================================== */

.radio-page-score-track {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.radio-score-floating-vinyl {
  position: absolute;
  top: 50%;
  left: 0;
  width: clamp(520px, 72vw, 980px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(calc(-100% - 80px), -50%, 0);
  will-change: transform, opacity;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,.95));
}

.radio-score-floating-vinyl.is-gliding {
  animation: radioGlideAcross 6s linear forwards;
}

@keyframes radioGlideAcross {
  0% {
    transform: translate3d(calc(-100% - 80px), -50%, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(calc(100vw + 80px), -50%, 0);
    opacity: 1;
  }
}

.radio-score-vinyl-disc {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;

  background:
    conic-gradient(from 20deg,
      transparent 0deg, rgba(255,255,255,.05) 35deg, transparent 75deg,
      rgba(255,255,255,.22) 110deg, transparent 145deg, rgba(255,255,255,.07) 220deg,
      transparent 265deg, rgba(255,255,255,.16) 300deg, transparent 350deg),
    repeating-radial-gradient(circle at center,
      #050505 0px, #050505 2px, #181818 3px, #070707 5px, #121212 7px, #030303 9px);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.16),
    0 0 0 10px rgba(0,0,0,.7),
    inset 0 0 70px rgba(0,0,0,.6);

  -webkit-mask-image: radial-gradient(circle at center, transparent 0 3.8%, black 4.4% 100%);
  mask-image: radial-gradient(circle at center, transparent 0 3.8%, black 4.4% 100%);

  animation: radioFloatingVinylSpin 12s linear infinite;
  will-change: transform;
}

@keyframes radioFloatingVinylSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(720deg); }
}

.radio-score-bg-label {
  background-color: #0d0f0c;
  box-shadow: 0 0 0 2px rgba(255,255,255,.12), 0 0 0 8px rgba(0,0,0,.85), inset 0 0 30px rgba(0,0,0,.95) !important;
}

@media (prefers-reduced-motion: reduce) {
  .radio-score-floating-vinyl.is-gliding {
    animation: none;
    opacity: 0;
  }
}

/* =====================================
   COMMUNITY SCORE BADGE (TOP RIGHT CORNER)
====================================== */

.radio-page-score-badge {
  position: fixed;
  z-index: 3;
  top: clamp(74px, 10.5vh, 88px);
  right: clamp(16px, 3.5vw, 36px);
  --score-accent: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 9px 18px;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(25, 28, 25, 0.94), rgba(7, 8, 7, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, border-color .3s ease;
}

.radio-page-score-badge::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--score-accent);
  box-shadow: 0 0 14px var(--score-accent);
}

.radio-score-badge-icon {
  color: var(--accent);
  font-size: 13px;
  line-height: 1;
}

.radio-score-badge-val {
  font-family: Orbitron, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
}

.radio-score-badge-label {
  font-family: Orbitron, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.radio-page-score-badge.tier-diamond {
  --score-accent: #bfe3f7;
  border-color: rgba(191, 227, 247, 0.6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(191, 227, 247, 0.25);
}
.radio-page-score-badge.tier-diamond .radio-score-badge-icon,
.radio-page-score-badge.tier-diamond .radio-score-badge-val {
  color: #bfe3f7;
}

.radio-page-score-badge.tier-gold {
  --score-accent: #f0cc63;
  border-color: rgba(214, 168, 47, 0.65);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(214, 168, 47, 0.25);
}
.radio-page-score-badge.tier-gold .radio-score-badge-icon,
.radio-page-score-badge.tier-gold .radio-score-badge-val {
  color: #f0cc63;
}

.radio-page-score-badge.tier-blacksplatter {
  --score-accent: #d8dde6;
  border-color: rgba(200, 205, 215, 0.5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.radio-page-score-badge.tier-blacksplatter .radio-score-badge-icon,
.radio-page-score-badge.tier-blacksplatter .radio-score-badge-val {
  color: #d8dde6;
}

.radio-page-score-badge.tier-rusty {
  --score-accent: #d67540;
  border-color: rgba(184, 91, 36, 0.6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(184, 91, 36, 0.2);
}
.radio-page-score-badge.tier-rusty .radio-score-badge-icon,
.radio-page-score-badge.tier-rusty .radio-score-badge-val {
  color: #d67540;
}

@media (max-width: 600px) {
  .radio-page-score-badge {
    top: 68px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    padding: 5px 12px;
    gap: 6px;
  }
  .radio-score-badge-val {
    font-size: 11px;
  }
  .radio-score-badge-label {
    font-size: 8px;
  }
}

/* =====================================
   LAYOUT
====================================== */

.radio-page-content {
  position: relative;
  z-index: 3;

  height: 100vh;
  height: 100dvh;

  display: flex;
  flex-direction: column;
}

.radio-top-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.radio-page-navbar .navbar-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: rgba(7,9,8,.72);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.radio-page-navbar .navbar-icon-btn:hover,
.radio-page-navbar .navbar-icon-btn:focus-visible {
  background: rgba(233,255,71,.12);
  border-color: rgba(233,255,71,.6);
  box-shadow: 0 0 0 3px rgba(233,255,71,.08), 0 10px 28px rgba(0,0,0,.22);
}
.radio-top-controls .radio-popup-panel { top: calc(100% + 10px); bottom: auto; right: 0; left: auto; }
.radio-top-controls .radio-page-sleep-label { position: absolute; top: calc(100% + 5px); right: 0; white-space: nowrap; }

.radio-page-genres {
  position: fixed;
  z-index: 10;
  bottom: clamp(16px, 3vh, 26px);
  left: clamp(16px, 3vw, 32px);
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: min(88vw, 700px);
  pointer-events: none;
}

.radio-page-genre {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px 8px 22px;
  background: #050505;
  color: #fff;
  font-family: Orbitron, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
  filter: drop-shadow(3px 3px 0 rgba(255,255,255,.85));
}

.radio-page-navbar {
  flex: none;
}

.radio-page-hero {
  flex: 1;
  min-height: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 56px);

  padding: 16px 5% clamp(20px, 4vh, 40px);
}

.radio-page-main {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

/* =====================================
   VINYL DISC
====================================== */

.radio-page-vinyl-wrap {
  position: relative;
  width: min(clamp(160px, 26vh, 280px), 46vw);
  flex-shrink: 0;
}

.radio-page-play-toggle {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(48px, 7vw, 64px);
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(20, 21, 15, .72);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background .2s ease, transform .2s ease;
}

.radio-page-play-toggle:hover {
  background: rgba(20, 21, 15, .9);
  transform: translate(-50%, -50%) scale(1.06);
}

.radio-page-play-toggle svg {
  width: 42%;
  height: 42%;
}

.radio-page-play-toggle .radio-page-play-icon {
  margin-left: 4%;
}

/* --- Track-change animation: the disc drops out the bottom, the new
   track's art/title/artist swap in off-screen, then it drops back in
   from the top into its resting position. --- */

.radio-page-vinyl-wrap.is-track-out {
  animation: radioDiscDropOut .45s cubic-bezier(.55,0,.85,.35) forwards;
}

.radio-page-vinyl-wrap.is-track-in {
  animation: radioDiscDropIn .55s cubic-bezier(.2,.9,.3,1.1) forwards;
}

@keyframes radioDiscDropOut {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(120%) scale(.85); opacity: 0; }
}

@keyframes radioDiscDropIn {
  0%   { transform: translateY(-120%) scale(.85); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .radio-page-vinyl-wrap.is-track-out,
  .radio-page-vinyl-wrap.is-track-in {
    animation: none;
  }
}

.radio-page-vinyl {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;

  background:
    conic-gradient(from 20deg,
      transparent 0deg, rgba(255,255,255,.05) 35deg, transparent 75deg,
      rgba(255,255,255,.22) 110deg, transparent 145deg, rgba(255,255,255,.07) 220deg,
      transparent 265deg, rgba(255,255,255,.16) 300deg, transparent 350deg),
    repeating-radial-gradient(circle at center,
      #050505 0px, #050505 2px, #181818 3px, #070707 5px, #121212 7px, #030303 9px);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.16),
    0 0 0 10px rgba(0,0,0,.55),
    0 50px 110px rgba(0,0,0,.7),
    inset 0 0 60px rgba(0,0,0,.4);

  -webkit-mask-image: radial-gradient(circle at center, transparent 0 3.8%, black 4.4% 100%);
  mask-image: radial-gradient(circle at center, transparent 0 3.8%, black 4.4% 100%);

  animation: vinylSpin 2.8s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.radio-page-vinyl .label-ring {
  box-shadow: 0 0 0 8px rgba(0,0,0,.75), inset 0 0 33px rgba(0,0,0,.6);
}

.radio-page-vinyl .record-label {
  box-shadow:
    0 0 0 2px rgba(255,255,255,.25), 0 0 0 6px rgba(0,0,0,.85),
    inset 8px 8px 25px rgba(255,255,255,.12), inset -16px -16px 37px rgba(0,0,0,.6);
}

/* =====================================
   GLASS CARD — shared base look for the "now playing" card and the
   lyrics card, so both stay visually consistent from one declaration.
====================================== */

.radio-glass-card {
  border-radius: 22px;
  background: rgba(20,21,15,.4);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}

/* =====================================
   NOW PLAYING CARD
====================================== */

.radio-page-card {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;

  width: min(360px, 70vw);
  padding: clamp(22px, 3vw, 32px);
  text-align: left;
}

.radio-page-ai-marker {
  position: absolute;
  top: 14px;
  right: 16px;
  color: rgba(255,255,255,.7);
  font-family: Orbitron, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-shadow: 0 1px 10px rgba(255,255,255,.45);
  opacity: .8;
}

.radio-page-card.is-featured {
  border-color: rgba(231,190,76,.72);
  background: linear-gradient(145deg, rgba(94,67,22,.54), rgba(20,21,15,.62));
  box-shadow: 0 24px 70px rgba(0,0,0,.48), 0 0 34px rgba(231,190,76,.2), inset 0 1px rgba(255,235,157,.28);
}

.radio-page-featured-badge {
  padding: 5px 9px;
  border: 1px solid rgba(231,190,76,.55);
  border-radius: 999px;
  background: rgba(231,190,76,.16);
  color: #f0cc63;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.radio-page-card.is-ad {
  border-color: rgba(76,174,231,.72);
  background: linear-gradient(145deg, rgba(18,72,105,.56), rgba(20,21,15,.62));
  box-shadow: 0 24px 70px rgba(0,0,0,.48), 0 0 34px rgba(76,174,231,.2), inset 0 1px rgba(180,230,255,.28);
}

.radio-page-ad-badge {
  padding: 5px 9px;
  border: 1px solid rgba(76,174,231,.58);
  border-radius: 999px;
  background: rgba(76,174,231,.16);
  color: #7fc8ed;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.radio-page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: rgba(255,255,255,.5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.radio-page-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff4d4d;
  box-shadow: 0 0 10px rgba(255,77,77,.9);
  animation: radioPagePulse 1.6s ease-in-out infinite;
}

@keyframes radioPagePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.7); }
}

.radio-page-title {
  font-family: Georgia, serif;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.15;
}

.radio-page-artist {
  color: var(--muted);
  font-size: 14px;
  letter-spacing: .02em;
}

.radio-page-remaining {
  color: rgba(233,255,71,.78);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* A divider that separates one card section from the next below it —
   reused by both .radio-page-next and .radio-page-controls so the card
   reads as one connected list of sections rather than two bolted-on
   blocks with their own, possibly-inconsistent spacing. */
.radio-card-section {
  width: 100%;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.1);
}

.radio-page-next {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.radio-page-next-label {
  color: rgba(255,255,255,.32);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 10px;
  font-weight: 700;
}

.radio-page-next-track {
  color: rgba(255,255,255,.7);
  font-size: 13px;
}

/* =====================================
   CONTROLS ROW (sleep timer / volume / lyrics toggle)
====================================== */

.radio-page-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.radio-circle-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;
  border-radius: 3px;

  background: transparent;
  border: 1px solid transparent;
  color: rgba(255,255,255,.7);
  cursor: pointer;

  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.radio-circle-btn svg {
  width: 16px;
  height: 16px;
}

.radio-volume-icon { display: block; }
.radio-volume-icon.is-hidden { display: none; }

.radio-circle-btn:hover,
.radio-circle-btn:focus-visible,
.radio-circle-btn.is-active {
  background: rgba(233,255,71,.1);
  border-color: rgba(233,255,71,.35);
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}

.radio-circle-btn:disabled {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: rgba(255,255,255,.25);
  cursor: not-allowed;
}

/* --- Popup: shared by the sleep-timer menu and the volume slider. One
   element (.radio-popup) owns the trigger + panel positioning; open
   state is a single .is-open class toggled by JS. --- */

.radio-popup {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.radio-popup-panel {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 10;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,9,9,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;

  transition: opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}

.radio-popup.is-open .radio-popup-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#radio-page-volume.is-open {
  z-index: 100;
}

#radio-page-volume .radio-popup-panel {
  z-index: 101;
}

.radio-page-sleep-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .02em;
}

.radio-page-sleep-label:empty {
  display: none;
}

.radio-sleep-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.radio-sleep-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.radio-sleep-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3,4,4,.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.radio-sleep-dialog {
  position: relative;
  width: min(390px, 100%);
  padding: 28px 26px 22px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(35,38,35,.96), rgba(10,12,12,.97));
  box-shadow: 0 30px 90px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.08);
  transform: translateY(12px) scale(.97);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}

.radio-sleep-modal.is-open .radio-sleep-dialog { transform: translateY(0) scale(1); }

.radio-sleep-close {
  position: absolute;
  top: 15px;
  right: 17px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.radio-sleep-dialog h2 {
  max-width: 260px;
  margin: 16px 0 5px;
  color: #fff;
  font-family: Georgia, serif;
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 400;
  line-height: 1.05;
}

.radio-sleep-hint {
  margin: 0;
  color: rgba(255,255,255,.48);
  font-size: 12px;
}

.radio-sleep-wheel {
  position: relative;
  display: grid;
  min-height: 172px;
  margin: 20px 0 18px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: radial-gradient(circle, rgba(233,255,71,.1), transparent 62%), rgba(255,255,255,.035);
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}

.radio-sleep-wheel::before,
.radio-sleep-wheel::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  height: 1px;
  background: rgba(233,255,71,.32);
}

.radio-sleep-wheel::before { top: 47px; }
.radio-sleep-wheel::after { bottom: 47px; }

.radio-sleep-wheel-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(233,255,71,.08);
  filter: blur(22px);
}

.radio-sleep-wheel-value {
  position: relative;
  color: #f2ff91;
  font-size: clamp(42px, 12vw, 66px);
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: 0 0 24px rgba(233,255,71,.2);
}

.radio-sleep-wheel-value small {
  margin-left: 6px;
  color: rgba(255,255,255,.58);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
}

.radio-sleep-actions { display: flex; gap: 10px; }
.radio-sleep-actions button {
  flex: 1;
  min-height: 44px;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}
.radio-sleep-cancel { border: 1px solid rgba(255,255,255,.14); background: transparent; color: rgba(255,255,255,.7); }
.radio-sleep-confirm { border: 1px solid rgba(233,255,71,.5); background: var(--accent); color: #14150f; }

.radio-sleep-menu {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  padding: 8px;
}

.radio-sleep-menu-title {
  padding: 6px 10px 8px;
  color: rgba(255,255,255,.4);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.radio-sleep-menu button {
  padding: 9px 10px;
  border: none;
  border-radius: 9px;
  background: none;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;

  transition: background .2s ease, color .2s ease;
}

.radio-sleep-menu button:hover {
  background: rgba(233,255,71,.12);
  color: var(--accent);
}

.radio-sleep-menu button.is-active {
  color: var(--accent);
  font-weight: 700;
}

.radio-volume-popup {
  padding: 14px 12px;
}

.radio-volume-slider {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 6px;
  height: 90px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* =====================================
   LYRICS CARD
====================================== */

.radio-page-lyrics-card {
  display: flex;
  flex-direction: column;
  gap: 14px;

  width: min(300px, 30vw);
  max-height: min(420px, 70vh);
  padding: clamp(20px, 2.6vw, 28px);
  flex-shrink: 0;
}

.radio-page-lyrics-label {
  color: rgba(255,255,255,.4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.radio-page-lyrics-viewport {
  overflow: hidden;
  mask-image: linear-gradient(180deg, transparent 0, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, black 12%, black 88%, transparent 100%);
}

.radio-page-lyrics-scroll {
  display: flex;
  flex-direction: column;
  gap: 12px;

  transition: transform .5s cubic-bezier(.16,1,.3,1);
}

.radio-page-lyrics-line {
  color: rgba(255,255,255,.35);
  font-size: 14px;
  line-height: 1.5;
  transition: color .4s ease, opacity .4s ease, transform .4s ease;
  opacity: .55;
}

.radio-page-lyrics-line.is-current {
  color: var(--text);
  font-weight: 600;
  opacity: 1;
}

/* =====================================
   RESPONSIVE
====================================== */

@media (max-width: 900px) {
  .radio-page-hero {
    flex-direction: column;
    justify-content: center;
    gap: 20px;
  }

  .radio-page-main {
    flex-direction: column;
    gap: 18px;
  }

  .radio-page-card {
    width: min(420px, 86vw);
    align-items: center;
    text-align: center;
  }

  .radio-page-next {
    align-items: center;
  }

  .radio-page-controls {
    justify-content: center;
  }

  .radio-page-lyrics-card {
    width: min(420px, 86vw);
    max-height: 26vh;
  }
}