/* ═══════════════════════════════════════════════════════════════════════════
 * radio-widget.css — Общие стили MUN Radio.
 *
 * Используется в двух местах:
 *   - /pages/live-radio.html — полноэкранный стенд
 *   - /index.html            — мобильный виджет на месте .hero-copy
 *
 * Виджет инициализируется, если на странице есть #radio-stage.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─ Scaffolding (на /pages/live-radio.html) ────────────────────────────── */
body.radio-page {
  background:
    radial-gradient(ellipse at 20% 10%, #42126a40 0, transparent 55%),
    radial-gradient(ellipse at 85% 90%, #1a1c6c40 0, transparent 55%),
    #050719;
  min-height: 100vh;
}
.radio-main {
  min-height: calc(100vh - 88px);
  padding: 32px 20px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* ─ Radio widget wrap (на /index.html, mobile-only) ────────────────────── */
#radio-widget-wrap {
  display: none;                   /* скрыт по умолчанию (desktop) */
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 20px 14px 24px;
}
@media (max-width: 700px) {
  #radio-widget-wrap { display: flex }
}

/* ─ The card ──────────────────────────────────────────────────────────── */
.radio-stage {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 2 / 3;
  border-radius: 32px;
  overflow: hidden;
  isolation: isolate;
  background: #0a0820;
  box-shadow:
    0 0 0 1px #4c2fa050 inset,
    0 20px 60px #0007,
    0 0 70px #7a2fe033;
}
.radio-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, #d94effcc 0%, #28cff1aa 50%, #5a3cff99 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 5;
}

/* ─ Hero: DJ portrait, visible in STOP ────────────────────────────────── */
.radio-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
  border-radius: inherit;
}
.radio-stage.playing .radio-bg {
  opacity: 0;
  transform: scale(1.05);
}

/* ─ Cover art: square in upper area, visible in PLAY ──────────────────── */
.radio-cover {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%) scale(.92);
  width: min(74%, 320px);
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-color: #15113a;
  opacity: 0;
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
  z-index: 2;
  box-shadow:
    0 10px 40px #0008,
    0 0 30px #d94eff40,
    0 0 0 1px #ffffff14 inset;
}
.radio-stage.playing .radio-cover {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ─ Dark overlay for text readability ─────────────────────────────────── */
.radio-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(10, 8, 32, .55) 0%,
      rgba(10, 8, 32, .15) 14%,
      transparent 24%),
    linear-gradient(to bottom,
      transparent 42%,
      rgba(10, 8, 32, .55) 58%,
      rgba(10, 8, 32, .88) 75%,
      rgba(8, 6, 28, .97) 90%,
      #080620 100%);
}

/* ─ Top bar ───────────────────────────────────────────────────────────── */
.radio-top {
  position: absolute;
  top: 20px; left: 20px; right: 20px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.radio-mun-mark {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: 1px; font-size: 20px;
  color: #fff;
  text-shadow: 0 2px 10px #0007;
}
.radio-mun-mark .brand-mark { width: 28px; height: 28px; border-width: 4px }
.radio-live-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 20px;
  background: rgba(14, 11, 46, .55);
  border: 1px solid #a07de860;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 10px; letter-spacing: 2.5px; color: #e2d7ff;
}
.radio-live-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #db40ff;
  box-shadow: 0 0 8px #db40ff;
}

/* ─ Listeners pill ────────────────────────────────────────────────────── */
.radio-listeners {
  position: absolute;
  top: 68px; right: 20px;
  z-index: 4;
  font-size: 11px; letter-spacing: 1px; color: #c7bfed;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 20px;
  background: rgba(14, 11, 46, .55);
  border: 1px solid #a07de860;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity .25s ease;
}
.radio-listeners b { color: #fff; font-weight: 600 }
/* Прячем счётчик пока реконнект — некорректно показывать listeners, когда
   у нас самих нет связи до API/Icecast. */
.radio-stage.reconnecting .radio-listeners { opacity: 0 }

/* ─ Reconnect hint ────────────────────────────────────────────────────── */
/* Показывается при transient сетевых проблемах (LTE↔Wi-Fi handoff, короткие
 * потери). Занимает место listeners-пилюли (та в это время скрыта), с тёплым
 * янтарным акцентом — явно отличается от стандартных элементов, но не
 * тревожным красным. */
.radio-reconnecting {
  position: absolute;
  top: 68px; right: 20px;
  z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 20px;
  background: rgba(60, 42, 10, .65);
  border: 1px solid #f0c86099;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 11px; letter-spacing: 1px;
  color: #fff2c0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.radio-reconnecting::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #f0c860;
  box-shadow: 0 0 8px #f0c860;
  animation: radioReconnectPulse 1s ease-in-out infinite;
}
.radio-stage.reconnecting .radio-reconnecting {
  opacity: 1;
  transform: translateX(0);
}
@keyframes radioReconnectPulse {
  0%, 100% { opacity: .35; transform: scale(.8) }
  50%      { opacity: 1;   transform: scale(1.15) }
}

/* ─ Content area ──────────────────────────────────────────────────────── */
.radio-body {
  position: absolute;
  left: 32px; right: 32px; bottom: 28px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.radio-title {
  font-weight: 800;
  font-size: clamp(32px, 7.5vw, 44px);
  line-height: .98;
  letter-spacing: -1.5px;
  margin: 0;
  color: #ffffff;
  text-shadow: 0 2px 12px #0008;
  transition: opacity .4s ease, transform .4s ease, font-size .4s ease;
}
.radio-title .accent {
  display: block;
  background: linear-gradient(100deg, #e04bff 0%, #6a9bff 50%, #2bb6ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.radio-slogan {
  font-size: 14px;
  color: #d4c7ff;
  line-height: 1.35;
  margin: -4px 0 2px;
  text-shadow: 0 1px 8px #0007;
  transition: opacity .3s ease;
}

.radio-track-info {
  display: none;
  gap: 2px;
  flex-direction: column;
  animation: radioSlideUpIn .4s ease both;
}
.radio-track-info .artist {
  font-size: 13px;
  letter-spacing: 2px;
  color: #c9b8ff;
  text-transform: uppercase;
  opacity: .9;
  text-shadow: 0 1px 6px #0007;
}
.radio-track-info .title {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.3px;
  text-shadow: 0 2px 10px #0007;
}
.radio-stage.playing .radio-slogan { display: none }
.radio-stage.playing .radio-track-info { display: flex }
.radio-stage.playing .radio-title {
  font-size: clamp(16px, 3.5vw, 20px);
  opacity: .75;
  letter-spacing: 0;
}
.radio-stage.playing .radio-title .accent {
  display: inline;
}
@keyframes radioSlideUpIn {
  from { transform: translateY(10px); opacity: 0 }
  to   { transform: translateY(0);    opacity: 1 }
}

/* ─ Play / Pause button ───────────────────────────────────────────────── */
.radio-cta {
  position: relative;
  width: 100%;
  padding: 16px 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, #491080cc, #6a1aa0cc);
  border: 1px solid #c48bffb0;
  color: #fff;
  font-size: 15px;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow:
    0 0 0 1px #d94eff40 inset,
    0 0 24px #d94eff55,
    0 0 60px #6a1aa044;
  font-family: inherit;
}
.radio-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px #d94eff80 inset,
    0 0 32px #d94effaa,
    0 0 80px #6a1aa088;
}
.radio-cta .play-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #ffffff22;
  display: grid; place-items: center;
  font-size: 11px;
  color: #fff;
}
.radio-cta[aria-pressed="true"] {
  background: linear-gradient(90deg, #0e3c7a, #1a2a8a);
  border-color: #28cff1b0;
  box-shadow:
    0 0 0 1px #28cff140 inset,
    0 0 24px #28cff155,
    0 0 60px #1a2a8a44;
}
.radio-cta[aria-pressed="true"]:hover {
  box-shadow:
    0 0 0 1px #28cff180 inset,
    0 0 32px #28cff1aa,
    0 0 80px #1a2a8a88;
}

/* ─ Decorative waveform ───────────────────────────────────────────────── */
.radio-wave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 36px;
  margin-top: 2px;
}
.radio-wave span {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(to top, #d94eff 0%, #28cff1 100%);
  opacity: .55;
  transition: opacity .3s ease, transform .3s ease;
}
.radio-stage.playing .radio-wave span {
  opacity: 1;
  animation: radioWave 1s ease-in-out infinite alternate;
}
.radio-wave span:nth-child(1)  { height: 20%; animation-delay: 0s }
.radio-wave span:nth-child(2)  { height: 55%; animation-delay: -.11s }
.radio-wave span:nth-child(3)  { height: 30%; animation-delay: -.22s }
.radio-wave span:nth-child(4)  { height: 70%; animation-delay: -.33s }
.radio-wave span:nth-child(5)  { height: 90%; animation-delay: -.44s }
.radio-wave span:nth-child(6)  { height: 60%; animation-delay: -.55s }
.radio-wave span:nth-child(7)  { height: 40%; animation-delay: -.66s }
.radio-wave span:nth-child(8)  { height: 80%; animation-delay: -.77s }
.radio-wave span:nth-child(9)  { height: 100%; animation-delay: -.88s }
.radio-wave span:nth-child(10) { height: 70%; animation-delay: -.99s }
.radio-wave span:nth-child(11) { height: 50%; animation-delay: -.10s }
.radio-wave span:nth-child(12) { height: 85%; animation-delay: -.21s }
.radio-wave span:nth-child(13) { height: 65%; animation-delay: -.32s }
.radio-wave span:nth-child(14) { height: 40%; animation-delay: -.43s }
.radio-wave span:nth-child(15) { height: 90%; animation-delay: -.54s }
.radio-wave span:nth-child(16) { height: 30%; animation-delay: -.65s }
.radio-wave span:nth-child(17) { height: 60%; animation-delay: -.76s }
.radio-wave span:nth-child(18) { height: 45%; animation-delay: -.87s }
.radio-wave span:nth-child(19) { height: 75%; animation-delay: -.98s }
.radio-wave span:nth-child(20) { height: 25%; animation-delay: -.09s }
@keyframes radioWave {
  to { transform: scaleY(.45) }
}

/* ─ Station tabs ──────────────────────────────────────────────────────── */
.radio-tabs {
  display: flex;
  gap: 0;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 500px;
  width: 100%;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--muted);
}
.radio-tabs .tab {
  padding: 12px 14px;
  background: none;
  border: 0;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: color .2s ease, text-shadow .2s ease;
  font-family: inherit;
  position: relative;
}
.radio-tabs .tab:hover { color: #eabaff }
.radio-tabs .tab[aria-current="page"] {
  color: #fff;
  text-shadow: 0 0 10px #db40ff80;
}
.radio-tabs .sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: #6a5fb080;
  flex-shrink: 0;
}

/* ─ Fade-in anim on station switch ────────────────────────────────────── */
.radio-stage-fade {
  animation: radioFadeStage .35s ease both;
}
@keyframes radioFadeStage {
  from { opacity: 0; transform: translateY(8px) scale(.985) }
  to   { opacity: 1; transform: translateY(0) scale(1) }
}

/* ─ Swipe hint (touch devices, STOP state only) ───────────────────────── */
.swipe-hint {
  display: none;
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-size: 10px; letter-spacing: 2px; color: #c7bfed;
  opacity: .55;
  padding: 4px 10px; border-radius: 10px;
  background: rgba(10, 8, 32, .4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  animation: radioHintPulse 2.4s ease-in-out infinite;
}
@keyframes radioHintPulse {
  0%, 100% { opacity: .35 }
  50%      { opacity: .75 }
}
@media (hover: none) and (pointer: coarse) {
  .radio-stage:not(.playing) .swipe-hint { display: inline-block }
}

/* ─ Cover pill: метка станции в углу кавера (мобильный PLAY state) ──── */
/* По умолчанию скрыт. Включается в мобильной media query ниже только
 * когда .radio-stage имеет класс .playing (т.е. аудио играет). */
.radio-cover-pill {
  display: none;
  position: absolute;
  padding: 6px 11px;
  background: rgba(8, 6, 28, .78);
  border: 1px solid rgba(216, 110, 255, .32);
  border-radius: 10px;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  line-height: 1.1;
  color: #f3e5ff;
  font-weight: 600;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 3;
  white-space: nowrap;
  pointer-events: none;
}
.radio-cover-pill .accent {
  background: linear-gradient(100deg, #e04bff 0%, #6a9bff 50%, #2bb6ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 600;
}

/* ─ Mobile tweaks ─────────────────────────────────────────────────────── */
/* Цель: компактная гармоничная PLAY-композиция:
 *   1) кавер ~20% меньше (с 78% до 60%, max 240px)
 *   2) станция рендерится как pill в левом-нижнем углу кавера, не висит
 *      между кавером и track-info (разгружает центр)
 *   3) артист+название трека — ниже кавера, уменьшенный шрифт, 2-line clamp
 *      для длинных названий (например "Elekfantz_She_Knows_Mark_Lower") */
@media (max-width: 480px) {
  .radio-main { padding: 20px 14px 40px; gap: 20px }
  .radio-body { left: 24px; right: 24px; bottom: 22px; gap: 10px }
  .radio-tabs { font-size: 11px; letter-spacing: 1.5px }
  .radio-tabs .tab { padding: 10px 8px }

  /* (1) Кавер */
  .radio-cover { top: 68px; width: min(60%, 240px) }

  /* (2) Pill — позиция вычислена от тех же значений, что .radio-cover:
   *     top:68 + высота_кавера(=ширина, aspect-ratio 1/1) - 44px → 24px над
   *     нижним краем кавера. left:50% - полу-ширина_кавера + 12 → 12px внутри
   *     левого края. При PLAY-state показываем inline-block. */
  .radio-stage.playing .radio-cover-pill {
    display: inline-block;
    top: calc(68px + min(60vw, 240px) - 44px);
    left: calc(50% - min(30vw, 120px) + 12px);
    max-width: calc(min(60vw, 240px) - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* В PLAY-state большой .radio-title внутри .radio-body скрываем — его
   * заменяет pill на кавере. STOP-state не трогаем, там big-title остаётся. */
  .radio-stage.playing .radio-title { display: none }

  /* (3) Track info компактнее */
  .radio-track-info { gap: 2px }
  .radio-track-info .artist {
    font-size: 10.5px;
    letter-spacing: 1.5px;
  }
  .radio-track-info .title {
    font-size: 14px;
    letter-spacing: -0.1px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * Mutual exclusion: radio ↔ player (на index.html)
 *
 * body.radio-playing  — играет радио, прячем плеер
 * body.player-playing — играет плеер, прячем радио
 * ═══════════════════════════════════════════════════════════════════════ */
body.radio-playing .player-hub   { display: none !important }
body.player-playing #radio-widget-wrap { display: none !important }

/* ═══════════════════════════════════════════════════════════════════════
 * Mobile overrides for /index.html
 *   • Прячем .hero-copy — её место занимает радио-виджет
 *   • Выключаем scroll-magnets, листаем плавно
 *   • dj-scene / ambient фон тоже не нужны (мобильный layout)
 * ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  main.home .hero-copy { display: none !important }

  main.home { scroll-snap-type: none !important; height: auto !important }
  main.home > section { scroll-snap-align: unset !important; scroll-snap-stop: normal !important }
}