/* GGR Radio — station page. Inherits the site palette from /style.css */
body.radio{min-height:100vh}
.r-bg{position:fixed;inset:-10%;z-index:-1;background-size:cover;background-position:center;
  filter:blur(60px) saturate(1.2) brightness(.35);opacity:0;transition:opacity 1.2s ease,background-image .6s}
.r-bg.on{opacity:1}
.r-home{display:flex;align-items:center;gap:14px}
.onair{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:5px 11px;border-radius:999px}
.onair i{width:8px;height:8px;border-radius:50%;background:var(--dim)}
.onair.live{color:#ffd9e5;border-color:rgba(224,95,138,.55)}
.onair.live i{background:var(--rose);box-shadow:0 0 10px var(--rose);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

.r-main{max-width:560px;margin:0 auto;padding:6px 20px 60px}
.r-station{text-align:center;margin:8px 0 18px}
.r-kicker{color:var(--aqua);font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.r-station h1{font-size:clamp(24px,6vw,36px);text-transform:uppercase;margin:6px 0 0;line-height:1.05}
.r-pick{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.r-pick[hidden]{display:none}
.r-pick button{background:var(--panel);color:var(--muted);border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;font:600 13px Inter,sans-serif;cursor:pointer;transition:border-color .18s,color .18s}
@media(hover:hover){.r-pick button:hover{border-color:var(--aqua-deep);color:var(--ink)}}
.r-pick button[aria-pressed="true"]{background:var(--aqua);border-color:var(--aqua);color:#03231f}

.r-now{text-align:center}
.r-art{position:relative;width:min(100%,420px);aspect-ratio:1;margin:0 auto;border-radius:16px;overflow:hidden;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.r-art img,.r-art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.r-art video{opacity:0;transition:opacity .6s}
.r-art video.on{opacity:1}
.r-meta{margin:18px 0 12px}
.r-title{font-size:clamp(22px,5.4vw,30px);text-transform:uppercase;line-height:1.1}
.r-artist{color:var(--aqua-hi);font-weight:600;margin-top:6px}
.r-album{color:var(--muted);font-size:13px;margin-top:3px}

.r-prog{width:min(100%,420px);margin:0 auto}
.r-bar{height:4px;background:var(--line);border-radius:99px;overflow:hidden}
.r-bar span{display:block;height:100%;width:0;background:var(--aqua);border-radius:99px}
.r-times{display:flex;justify-content:space-between;color:var(--dim);font-size:12px;margin-top:6px;font-variant-numeric:tabular-nums}

.r-ctl{margin:16px 0 8px;display:flex;flex-direction:column;align-items:center;gap:8px}
.r-play{width:76px;height:76px;border-radius:50%;border:0;cursor:pointer;background:var(--aqua);color:#03231f;
  display:grid;place-items:center;box-shadow:0 10px 30px rgba(72,207,194,.28);transition:transform .15s ease}
.r-play:active{transform:scale(.94)}
.r-play svg{width:34px;height:34px;fill:currentColor}
.r-play .i-pause{display:none}
.r-play.on .i-play{display:none}.r-play.on .i-pause{display:block}
.r-play.wait{opacity:.7}
.r-ctl-lbl{color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase}

.r-rel{margin-top:8px;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:999px;
  padding:10px 18px;font:600 14px Inter,sans-serif;cursor:pointer}
.r-rel:hover{border-color:var(--aqua-deep)}
.r-rel[hidden]{display:none}

.r-next{margin-top:34px}
.r-next h2{font-family:Oswald,sans-serif;font-size:18px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px;color:var(--muted)}
.r-next ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.r-next li{display:flex;align-items:center;gap:12px;background:rgba(22,24,29,.72);border:1px solid var(--line);
  border-radius:12px;padding:8px 12px 8px 8px}
.r-next li img{width:46px;height:46px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:var(--card)}
.r-next .t{flex:1;min-width:0;text-align:left}
.r-next .t b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-next .t span{color:var(--muted);font-size:13px}
.r-next .w{color:var(--dim);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* release sheet: title page in an overlay so the station keeps playing */
.r-sheet{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .3s ease}
.r-sheet.open{transform:none}
.r-sheet-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;
  border-bottom:1px solid var(--line);color:var(--muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.r-sheet-bar button{background:var(--card2);color:var(--ink);border:1px solid var(--line);border-radius:50%;
  width:36px;height:36px;font-size:15px;cursor:pointer}
.r-sheet iframe{flex:1;width:100%;border:0;background:var(--bg)}