:root {
  --accent: #22a7f2;
  --accent-2: #7ddfff;
  --accent-rgb: 34, 167, 242;
  --text: #f7fbff;
  --muted: #9eb2c7;
  --panel: rgba(5, 13, 27, .74);
  --line: rgba(255,255,255,.11);
  --shadow: 0 34px 110px rgba(0,0,0,.58);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background: #050a13;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.background {
  position: fixed;
  inset: -8%;
  z-index: -5;
  background: url("/fallback-cover.png") center/cover no-repeat;
  filter: blur(48px) saturate(1.18) brightness(.72);
  transform: scale(1.15);
  transition: background-image 1s ease;
  animation: drift 26s ease-in-out infinite alternate;
}

.background-shade {
  position: fixed;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(circle at 18% 22%, rgba(var(--accent-rgb),.22), transparent 34%),
    radial-gradient(circle at 82% 76%, rgba(65,113,255,.16), transparent 38%),
    linear-gradient(120deg, rgba(1,6,14,.72), rgba(1,6,14,.91) 68%, rgba(1,6,14,.79));
}

.liquid-orb {
  position: fixed;
  z-index: -3;
  width: 330px;
  height: 330px;
  border-radius: 45% 55% 58% 42% / 52% 45% 55% 48%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.28), rgba(var(--accent-rgb),.16) 34%, transparent 68%);
  filter: blur(10px);
  opacity: .52;
  animation: morph 13s ease-in-out infinite alternate;
}
.orb-a { left: -90px; bottom: -90px; }
.orb-b { right: -70px; top: -80px; animation-delay: -6s; }

.shell {
  min-height: 100vh;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 28px;
  padding: 26px 0 22px;
}

.brand, footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.brand-mark {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(var(--accent-rgb),.35));
}
.brand-link > div { display: grid; line-height: 1; gap: 4px; }
.brand-name { letter-spacing: .22em; font-weight: 760; font-size: .98rem; }
.brand-sub { color: var(--accent-2); letter-spacing: .33em; font-weight: 700; font-size: .58rem; }

.live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
  font-size: .72rem;
  letter-spacing: .16em;
  font-weight: 780;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff4757;
  animation: pulse 1.7s infinite;
}

.player-card {
  align-self: center;
  display: grid;
  grid-template-columns: minmax(280px, 430px) minmax(320px, 1fr);
  gap: clamp(32px, 6vw, 82px);
  align-items: center;
  padding: clamp(25px, 4vw, 50px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 36px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), transparent 32%),
    var(--panel);
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(28px) saturate(1.18);
}

.visual-column { display: grid; gap: 20px; }
.cover-wrap { position: relative; isolation: isolate; }
.cover {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 1;
  display: block;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 25px 70px rgba(0,0,0,.5);
  transition: opacity .45s ease, transform .45s ease;
}
.cover-ring {
  position: absolute;
  z-index: 1;
  inset: -8px;
  border-radius: 34px;
  background: linear-gradient(140deg, rgba(255,255,255,.18), rgba(var(--accent-rgb),.24), transparent 60%);
  filter: blur(4px);
}
.station-signature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255,255,255,.72);
  text-transform: uppercase;
  letter-spacing: .19em;
  font-size: .68rem;
}
.signature-logo { width: 28px; height: 28px; object-fit: contain; }

.eyebrow {
  color: var(--accent-2);
  margin: 0 0 14px;
  font-size: .74rem;
  font-weight: 820;
  letter-spacing: .20em;
}
h1 {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.artist {
  margin: 14px 0 30px;
  color: var(--muted);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
}
.time-row {
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.progress {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}
.progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #a1e8ff);
  box-shadow: 0 0 20px rgba(var(--accent-rgb),.58);
}
.controls {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
}
button { font: inherit; }
.play-btn, .icon-btn {
  border: 0;
  color: var(--text);
  cursor: pointer;
}
.play-btn {
  width: 80px; height: 80px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #a7efff, var(--accent));
  color: #03101b;
  box-shadow: 0 16px 44px rgba(var(--accent-rgb),.4);
  transition: transform .18s ease, box-shadow .18s ease;
}
.play-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 20px 52px rgba(var(--accent-rgb),.52); }
.play-btn svg { width: 30px; height: 30px; fill: currentColor; }
.icon-pause { display: none; }
.is-playing .icon-play { display: none; }
.is-playing .icon-pause { display: block; }

.icon-btn {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
}
.icon-btn svg { width: 22px; height: 22px; fill: currentColor; }
.icon-muted { display: none; }
.is-muted .icon-volume { display: none; }
.is-muted .icon-muted { display: block; }

.volume {
  width: min(210px, 34vw);
  accent-color: var(--accent);
  cursor: pointer;
}
.meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
  color: var(--muted);
  font-size: .82rem;
}
.meta span {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
}
.meta strong { color: var(--text); }

footer {
  color: rgba(255,255,255,.56);
  font-size: .76rem;
  letter-spacing: .09em;
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 9px rgba(255,71,87,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,71,87,0); }
}
@keyframes drift {
  from { transform: scale(1.13) translate3d(-1%, -1%, 0); }
  to { transform: scale(1.19) translate3d(1%, 1%, 0); }
}
@keyframes morph {
  from { transform: rotate(0deg) scale(1); border-radius: 45% 55% 58% 42% / 52% 45% 55% 48%; }
  to { transform: rotate(18deg) scale(1.08); border-radius: 57% 43% 46% 54% / 44% 57% 43% 56%; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 24px, 620px); padding: 15px 0 17px; gap: 14px; }
  .brand-name { font-size: .78rem; }
  .player-card {
    grid-template-columns: 1fr;
    gap: 27px;
    border-radius: 27px;
    padding: 20px;
  }
  .cover-wrap { width: min(100%, 350px); margin-inline: auto; }
  .content { text-align: center; }
  .time-row { grid-template-columns: 42px 1fr 42px; gap: 9px; }
  .controls, .meta { justify-content: center; }
  footer { font-size: .64rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}