/* Dancefloor Diaries mode: same transport, full magenta surface, optional 16:9 Spotify video in the player corner. */
.mini-player .mini-mode,.mini-player .mini-spotify {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 26px; margin: 0; border-radius: 13px; font: 600 11px/1 var(--body); letter-spacing: .06em; white-space: nowrap; text-decoration: none;
}
.mini-player .mini-mode { top: 10px; right: 12px; padding: 0 10px 0 8px; border: 1px solid #ff85c8b8; background: #ff00901f; color: #ffd6ec; text-transform: uppercase; }
.mini-player .mini-mode:hover { color: #fff; background-color: #ff009040; }
.mini-player .mini-mode[aria-pressed=true] { border-color: #fff; background: #fff; color: #b0005f; }
.mini-player .mini-mode[aria-pressed=true]:hover { background: #ffe3f1; color: #9a0054; }
.mini-player .mini-mode svg { width: 14px; height: 14px; }
.mini-player .mini-spotify { top: 10px; right: 113px; min-width: 28px; padding: 0 6px; border: 0; background: #121212; color: #fff; }
.mini-player .mini-spotify:hover { background: #262626; }
.mini-player .mini-spotify[hidden] { display: none; }
.mini-player .mini-spotify svg { width: 16px; height: 16px; flex: none; }
.mini-player .mini-spotify span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mini-player .mini-spotify:focus-visible { outline: 2px solid #ffd1e9; outline-offset: 1px; }
.is-revealed .mini-player__details a { pointer-events: auto; }
@media (min-width:1367px), (min-width:1200px) and (not (any-pointer:coarse)) {
  body .music-player.mini-player.is-revealed .mini-title { right: 116px; }
  body .music-player.mini-player.is-podcast.is-revealed .mini-title { right: 150px; }
}

/* Magenta surface. White text stays at or above 4.5:1 on both gradient stops. */
body .music-player.mini-player.is-podcast,body .music-player.mini-player.is-podcast.is-revealed,body .music-player.mini-player.is-podcast.is-footer-safe {
  border-color: #ffc4e2; background: linear-gradient(150deg,#e00085,#c20073);
  box-shadow: inset 0 1px 1px #ffffff8c,0 0 0 3px #090509,0 0 22px #ff009066;
}
.music-player.mini-player.is-podcast::before { opacity: 0; }
body .music-player.mini-player.is-podcast :is(.mini-title,.mini-time,.mini-volume svg,.mini-expand,.mini-next) { color: #fff; }
body .music-player.mini-player.is-podcast button:not(.mini-mode):hover { color: #fff; background-color: #ffffff26; }
body .music-player.mini-player.is-podcast .mini-cover { border-color: #ffffffb3; box-shadow: 0 3px 12px #5a00338c; }
body .music-player.mini-player.is-podcast .mini-disc { display: none; }
body .music-player.mini-player.is-podcast .mini-play { border-color: #ffffffd9; background: #8a004f; color: #fff; }
body .music-player.mini-player.is-podcast .mini-play::before { background: none; box-shadow: none; }
body .music-player.mini-player.is-podcast .mini-play svg { visibility: visible; color: #fff; filter: none; }
body .music-player.mini-player.is-podcast.is-playing .mini-play { border-color: #fff; box-shadow: 0 0 0 3px #ffffff47; }
.mini-player.is-podcast input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(to right,#fff var(--fill),#ffffff5c var(--fill)); }
.mini-player.is-podcast input[type=range]::-moz-range-track { background: linear-gradient(to right,#fff var(--fill),#ffffff5c var(--fill)); }
.mini-player.is-podcast input[type=range]::-webkit-slider-thumb { background: #fff; box-shadow: 0 0 0 2px #a30062; }
.mini-player.is-podcast input[type=range]::-moz-range-thumb { background: #fff; }
.mini-player.is-podcast button:focus-visible,.mini-player.is-podcast input:focus-visible,.mini-player.is-podcast a:focus-visible { outline-color: #fff; }

/* Consent and feed errors are shown in the player instead of a silent play button. */
.mini-player:is([data-state=consent],[data-state=error]).is-revealed .mini-status {
  inset: 39px 71px auto 94px; width: auto; height: auto; margin: 0; clip-path: none; font: 400 11px/1.3 var(--body);
}
.mini-player[data-state=consent] .mini-seek { visibility: hidden; }
.mini-player.is-podcast:is([data-state=consent],[data-state=error]).is-revealed .mini-status { color: #fff; }

/* Video episodes: Spotify plays the episode itself in a small 16:9 frame above the player corner.
   The desktop offset matches the revealed height, so hovering never moves the frame. */
body .music-player.mini-player.has-video { overflow: visible; }
.mini-player .mini-video {
  position: absolute; right: 0; bottom: 112px; z-index: 4; width: 320px; aspect-ratio: 16 / 9;
  border: 2px solid #e00085; border-radius: 12px; overflow: hidden; background: #000;
  box-shadow: 0 12px 32px #000c,0 0 22px #ff009055;
}
.mini-player .mini-video[hidden] { display: none; }
.mini-player .mini-video__frame,.mini-player .mini-video__frame > *,.mini-player .mini-video iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width:1199px), (any-pointer:coarse) and (max-width:1366px) {
  /* Touch: a fourth row keeps every control at least 36px tall without crowding the transport row. */
  body .music-player.mini-player.is-revealed { height: 176px; }
  body .music-player.mini-player .mini-time { bottom: 64px; }
  body .music-player.mini-player :is(.mini-volume,.mini-next) { bottom: 50px; }
  .mini-player:not(.is-revealed) :is(.mini-mode,.mini-spotify) { display: none; }
  body .music-player.mini-player .mini-mode { top: auto; right: auto; bottom: 8px; left: 14px; height: 36px; padding: 0 14px 0 11px; border-radius: 18px; font-size: 12px; }
  body .music-player.mini-player .mini-mode svg { width: 16px; height: 16px; }
  body .music-player.mini-player .mini-spotify { top: auto; right: auto; bottom: 8px; left: 136px; height: 36px; padding: 0 14px 0 10px; border-radius: 18px; font-size: 12px; }
  body .music-player.mini-player .mini-spotify span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .mini-player:is([data-state=consent],[data-state=error]).is-revealed .mini-status { inset: 59px 14px auto; font-size: 12px; }
  .mini-player .mini-video { bottom: calc(100% + 10px); width: min(300px,calc(100vw - 32px)); }
}
@media (max-width:600px) {
  .mini-player .mini-video { width: clamp(220px,68vw,270px); }
}