/* One mounted player survives minimisation. Leaving Retro mode removes its iframe. */
.retro-radio{position:fixed;bottom:22px;right:22px;width:340px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;z-index:30;border:2px solid var(--azure);border-radius:5px;background:var(--bone);color:var(--azure);box-shadow:6px 6px 0 #0b39483b;font:12px/1.6 'IBM Plex Mono',monospace}
.radio-bar{display:flex;align-items:center;gap:9px;background:var(--azure);color:var(--bone);padding:5px 8px 5px 14px}.radio-bar h2{font:400 27px/1 VT323,monospace;letter-spacing:0}.radio-bar button{margin-left:auto;min-width:44px;min-height:36px;background:transparent;color:var(--bone);font-size:23px;border:1px solid #fffef93d;border-radius:2px}.radio-bar button:focus-visible{outline-color:var(--bone)}
.radio-light{width:7px;height:7px;background:var(--bone);opacity:.45}.is-playing .radio-light{background:var(--coral);opacity:1}.radio-body{padding:16px 16px 0}.radio-tape{background:var(--coral);border:1px solid var(--azure);border-radius:7px;padding:9px 13px 6px;position:relative;box-shadow:inset 0 0 0 4px #fffef926}
.tape-label{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--azure);padding-bottom:6px;font:400 22px/1 VT323,monospace}.tape-label span:last-child{font:10px 'IBM Plex Mono',monospace}.tape-window{display:flex;align-items:center;justify-content:space-between;margin:10px 0;background:var(--azure);border:3px solid #fffef969;border-radius:25px;padding:4px;color:var(--bone);font:400 21px VT323,monospace}.tape-reel{width:35px;height:35px;border:7px dashed var(--bone);border-radius:50%;background:var(--azure);box-shadow:0 0 0 2px var(--bone);margin:0 3px}.tape-foot{display:flex;justify-content:space-between;font-size:9px}.radio-description{margin:11px 0 8px;font-size:10px}.radio-embed:empty{display:none}.radio-embed iframe{display:block;width:100%;height:166px;border:0;border-radius:3px}.radio-privacy,.radio-credit{font-size:9px;line-height:1.6}.radio-privacy{margin-top:10px}.radio-privacy a,.radio-credit{text-decoration:underline;text-underline-offset:2px}.radio-credit{display:block;margin-top:5px}.radio-controls{display:flex;gap:7px;padding:13px 16px 7px}.radio-controls button{min-height:44px;border:1px solid var(--azure);border-radius:2px;background:var(--bone);font-size:11px;padding:7px 10px}.radio-controls .radio-play{background:var(--azure);color:var(--bone);flex:1}.radio-controls button:disabled{opacity:.45;cursor:default}.radio-status{padding:0 16px 12px;font-size:9px;min-height:26px}.retro-radio.is-minimised .radio-body{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;pointer-events:none}.retro-radio.is-minimised .radio-status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.retro-radio.is-minimised{width:310px}
@media(prefers-reduced-motion:no-preference){.is-playing .tape-reel{animation:tape-turn 3s linear infinite}@keyframes tape-turn{to{transform:rotate(360deg)}}}

.retro-radio{box-shadow:5px 5px 0 var(--azure);z-index:50}.radio-controls button{cursor:pointer}.radio-body a:focus-visible{outline:2px solid var(--azure)}@media(max-width:680px){.retro-radio{right:12px;bottom:12px}}

/* Compact controls keep the page usable while the cassette is tucked away. */
.retro-radio.is-minimised{width:250px}
.retro-radio.is-minimised .radio-bar{padding:4px 7px 4px 11px}
.retro-radio.is-minimised .radio-bar h2{font-size:23px}
.retro-radio.is-minimised .radio-controls{padding:7px 9px 4px;gap:5px}
.retro-radio.is-minimised .radio-controls button{padding:5px 8px}
.retro-radio.is-minimised .radio-status{padding:0 9px 7px;min-height:20px;font-size:8px}

/* The embedded station needs a real layout width, even while tucked away. */
.retro-radio.is-minimised .radio-body{width:300px;height:auto;max-height:600px;overflow:hidden}
.radio-embed iframe{min-width:280px}

.retro-radio.is-minimised{overflow:hidden}
.retro-radio.is-minimised .radio-body{position:fixed;left:-10000px;top:0;clip-path:inset(50%)}

/* The coastal loop sits above the cassette; the provider view is optional. */
.radio-drive{position:relative;aspect-ratio:16/9;border:1px solid var(--azure);border-radius:4px;overflow:hidden;margin-bottom:12px;background:var(--azure)}
.radio-drive video{display:block;width:100%;height:100%;object-fit:cover}
.radio-drive button{position:absolute;right:7px;bottom:7px;width:36px;height:32px;border:1px solid var(--bone);background:var(--azure);color:var(--bone);border-radius:3px;cursor:pointer}
.radio-provider-toggle{border:0;padding:4px 0;background:none;text-decoration:underline;text-underline-offset:3px;font:10px 'IBM Plex Mono';cursor:pointer}
.retro-radio:not(.provider-open) .radio-embed{display:block;position:fixed;left:-10000px;top:0;width:300px;height:166px;clip-path:inset(50%);overflow:hidden}
.retro-radio.provider-open .radio-embed{position:relative;width:100%;margin-top:8px}
.radio-controls #radio-prev,.radio-controls #radio-next{min-width:36px;padding-inline:8px}
.radio-controls .radio-play{min-width:75px}
.retro-radio.is-minimised{width:270px}

/* ── Mobile: the minimised player is a compact oval ────────────────────────
   Added 11 September 2026 at the founder's request, after the full-size
   panel was found covering the carousel on a phone.

   Scope is deliberately narrow: max-width 680px AND .is-minimised only, so
   the desktop player and the expanded mobile player are both unchanged.
   No JavaScript change — retro-radio.js already minimises on load and owns
   the expand/collapse control; this only restyles that existing state.

   The off-screen .radio-embed is NOT touched. It must stay in the layout
   (clipped, not display:none) or the SoundCloud audio stops. */
@media (max-width: 680px) {
  .retro-radio.is-minimised {
    width: auto;
    max-width: calc(100vw - 24px);
    display: flex;
    align-items: stretch;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 4px 4px 0 var(--azure);
  }

  /* Left half of the pill: status light and the station name. */
  .retro-radio.is-minimised .radio-bar {
    padding: 3px 6px 3px 13px;
    gap: 8px;
    align-items: center;
  }
  .retro-radio.is-minimised .radio-bar h2 { font-size: 20px; }
  .retro-radio.is-minimised .radio-bar button {
    min-width: 38px;
    min-height: 38px;
    border-radius: 999px;
    font-size: 20px;
    margin-left: 4px;
  }

  /* Right half: Play only. Prev, Stop and Next return when expanded. */
  .retro-radio.is-minimised .radio-controls {
    padding: 4px 5px 4px 3px;
    gap: 0;
    align-items: center;
  }
  .retro-radio.is-minimised .radio-controls #radio-prev,
  .retro-radio.is-minimised .radio-controls #radio-stop,
  .retro-radio.is-minimised .radio-controls #radio-next { display: none; }
  .retro-radio.is-minimised .radio-controls .radio-play {
    min-width: 0;
    min-height: 38px;
    padding-inline: 15px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 11px;
  }

  /* A status sentence cannot fit an oval; it reappears on expand. */
  .retro-radio.is-minimised .radio-status { display: none; }
}