/* Now tab: a full-screen "now playing" screen, like a music app. Phones first */
.player {
  display: flex; flex-direction: column; align-items: center; gap: clamp(var(--space-3), 2.4dvh, var(--space-5));
  padding: calc(env(safe-area-inset-top) + var(--space-3)) var(--space-5) var(--space-5);
}

.top { width: 100%; display: flex; align-items: center; justify-content: center; position: relative; min-height: 44px; }
.eyebrow { font-size: var(--fs-meta); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--text) 66%, transparent); }
.settings { position: absolute; right: -8px; top: 0; }
.settings summary {
  list-style: none; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.settings summary::-webkit-details-marker { display: none; }
.settings summary svg { width: 22px; height: 22px; fill: currentColor; }
.settings[open] summary { color: var(--text); background: var(--card); }
.settings-panel {
  position: absolute; right: 8px; top: 50px; z-index: 2; width: min(320px, calc(100vw - 44px));
  background: var(--card); border-radius: var(--r-md); padding: var(--space-4); box-shadow: 0 10px 40px rgba(0,0,0,.35);
  font-size: var(--fs-label); color: var(--muted);
}
.url { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.url input {
  flex: 1; min-width: 0; min-height: var(--tap); padding: 0 var(--space-3); border-radius: var(--r-sm); font-size: var(--fs-body);
  border: 1px solid var(--muted); background: transparent; color: var(--text);
}
.url button { min-width: var(--tap); padding: 0 var(--space-4); border: 0; border-radius: var(--r-sm); background: var(--accent-strong); color: #fff; font-size: var(--fs-label); font-weight: 600; }

/* Cover: as big as the screen allows, square */
.art {
  position: relative; width: min(100%, 44dvh, 380px); aspect-ratio: 1; flex: none; margin-top: clamp(var(--space-1), 2dvh, var(--space-5));
  border-radius: var(--r-xl); display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #5b2bd6));
  box-shadow: 0 24px 60px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform .4s ease;
}
.art span { font-weight: 800; font-size: clamp(56px, 13dvh, 112px); color: #fff; letter-spacing: .02em; }
.art:not(.live) { transform: scale(.94); }
.eq { position: absolute; bottom: 9%; left: 50%; translate: -50% 0; display: flex; gap: 5px; align-items: flex-end; height: 26px; opacity: 0; transition: opacity .3s; }
.eq i { width: 5px; height: 30%; border-radius: 3px; background: rgba(255,255,255,.85); }
.art.live .eq { opacity: 1; }
.art.live .eq i { animation: eq 1s ease-in-out infinite; }
.art.live .eq i:nth-child(2) { animation-delay: -.4s; }
.art.live .eq i:nth-child(3) { animation-delay: -.7s; }
.art.live .eq i:nth-child(4) { animation-delay: -.2s; }
.art.live .eq i:nth-child(5) { animation-delay: -.55s; }
@keyframes eq { 0%,100% { height: 25%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .art.live .eq i { animation: none; height: 60%; } .art { transition: none; } }

.now {   /* room for title, song and status even before the song is known, so nothing below jumps when it arrives */
  width: 100%; text-align: center;
  min-height: calc(var(--fs-title) * 1.15 + var(--fs-body) * 1.4 + var(--space-1) * 2 + 20px);
}
.now h1 { margin: 0 0 var(--space-1); }
.now .status { margin: 0; min-height: 20px; }

.controls { display: flex; justify-content: center; }
.player .play-btn {
  width: clamp(72px, 11dvh, 92px); aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 45%, transparent);
  -webkit-tap-highlight-color: transparent; transition: transform .1s;
}
.player .play-btn:active { transform: scale(.94); }
.player .play-btn svg { width: 44%; height: 44%; fill: currentColor; }

.vol { width: 100%; display: flex; align-items: center; gap: var(--space-3); color: var(--muted); }
.vol svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); height: 32px; }

/* Hover, only where there's a pointer (on phones it would stick after a tap) */
@media (hover: hover) {
  .play-btn, .settings summary, .url button { transition: transform .1s, background-color .15s, filter .15s; }
  .player .play-btn:hover { filter: brightness(1.08); }
  .settings summary:hover { color: var(--text); }
  .url button:hover { filter: brightness(1.1); }
}

/* Short phones: a smaller cover and tighter spacing, so everything fits without scrolling */
@media (max-height: 680px) {
  .player { gap: var(--space-2); padding-top: calc(env(safe-area-inset-top) + var(--space-1)); }
  .art { width: min(100%, 36dvh); margin-top: 0; border-radius: var(--r-lg); }
}

/* Phones on their side: the cover on the left, the song and the controls beside it, all on one screen */
@media (orientation: landscape) and (max-height: 520px) {
  .player {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto auto auto 1fr;
    column-gap: var(--space-6); row-gap: var(--space-3); align-items: center;
    padding: var(--space-1) var(--space-5) var(--space-4);
  }
  .top { grid-column: 1 / -1; }
  .art { grid-column: 1; grid-row: 2 / -1; width: min(40vw, calc(100dvh - 160px)); margin: 0; border-radius: var(--r-lg); }
  .art span { font-size: clamp(40px, 12dvh, 72px); }
  .now { grid-column: 2; grid-row: 3; min-height: 0; }
  .controls { grid-column: 2; grid-row: 4; }
  .vol { grid-column: 2; grid-row: 5; }
  .player .play-btn { width: 64px; }
}

@media (min-width: 700px) and (min-height: 700px) {
  .player { padding: var(--space-4) var(--space-6) var(--space-5); }
  .art { width: min(100%, 36dvh, 340px); }
}

/* What's playing: the album cover over the FOO artwork, and the song under the station name */
.art .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art .cover[hidden] { display: none; }
.art:has(.cover:not([hidden])) .eq { background: rgba(0,0,0,.35); padding: var(--space-1) var(--space-2); border-radius: var(--r-sm); height: 36px; }
.now .track {
  margin: 0 0 var(--space-1); font-size: var(--fs-body); color: var(--text); opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.now .track:empty { display: none; }   /* empty: the status moves up under the title; .now keeps the space */

/* Recent tab: the song on now, then the radio's last songs */
.recent { padding: calc(env(safe-area-inset-top) + var(--space-5)) var(--space-5) var(--space-5); }
.recent h1 { font-size: var(--fs-title); }
.recent-note { margin: 0 0 var(--space-4); font-size: var(--fs-label); color: var(--muted); text-wrap: pretty; }
.recent-list { list-style: none; margin: 0; padding: 0; }
.recent-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; }
.recent-item img { width: 48px; height: 48px; border-radius: var(--r-sm); object-fit: cover; background: var(--card); }
.recent-item .song { display: block; font-size: var(--fs-body); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-item .by { display: block; font-size: var(--fs-label); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-item .at { font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
.recent-item.is-live { margin-bottom: var(--space-2); padding: var(--space-3); border-radius: var(--r-md); background: var(--card); }
.recent-item.is-live img { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.recent-item.is-live .at { color: var(--accent-text); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.recent-empty { color: var(--muted); font-size: var(--fs-label); }
.recent-empty[hidden] { display: none; }