/* MAD FM Stage 06 UAT02. Scoped to homepage player only. */
#online .mad-player{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,3.3fr) minmax(0,0.9fr);align-items:center;gap:14px;margin:12px 0 18px;font-family:Arial,Helvetica,sans-serif;color:#fff}
#online .mad-player-side{height:126px;min-height:0;overflow:hidden;position:relative;border-radius:12px;background:#13131b}
#online .mad-player-side img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:.8;transition:transform 1.8s ease,opacity 1.8s ease}
#online .mad-player-side-left img.mad-transition{transform:translateX(-100%);opacity:0}
#online .mad-player-side-right img.mad-transition{transform:translateX(100%);opacity:0}
#online .mad-player-core{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:14px;background:linear-gradient(120deg,#12141d,#25223a 60%,#162d38);border:1px solid #464054;box-shadow:0 6px 22px #0004;min-width:0}
#online .mad-player-art{width:96px;height:96px;object-fit:contain;flex:none;border-radius:10px;background:#000}
#online .mad-player-details{min-width:0;flex:1}
#online .mad-player-eyebrow{font-size:12px;font-weight:bold;letter-spacing:1.5px;color:#ddd}
#online .mad-player-live{color:#ff625f;margin-left:6px}
#online .mad-player-track{font-size:17px;font-weight:bold;line-height:1.3;overflow-wrap:anywhere;margin:6px 0;color:white}
#online .mad-player-subtitle{font-size:13px;color:#c9c8d0}
#online .mad-player-controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:10px}
#online .mad-player button{background:#ff249c;color:white;border:0;border-radius:25px;padding:8px 13px;cursor:pointer;font-size:14px;line-height:1.2}
#online #mad-mute{background:#34465a;padding:8px}
#online .mad-volume-label{font-size:12px;color:#ddd}
#online #mad-volume{width:75px;accent-color:#58bfd0;margin:0}
#online .mad-player-status{font-size:12px;color:#bec9d4;margin-top:6px;min-height:14px}
@media(max-width:980px){#online .mad-player{grid-template-columns:1fr}#online .mad-player-side{display:none}#online .mad-player-core{min-height:165px}}
@media(max-width:500px){#online .mad-player-core{padding:14px;gap:12px}#online .mad-player-art{width:88px;height:88px}#online .mad-player-track{font-size:15px}#online .mad-player button{font-size:12px;padding:9px 11px}#online .mad-player-eyebrow{font-size:10px}}
@media(prefers-reduced-motion:reduce){#online .mad-player-side img{transition:none}}

/* Retain Centova text updates without displaying a second Now Playing label. */
#online .mad-streaminfo-source{display:none!important}
/* Avoid letterboxing from carousel images with different source dimensions. */
#online .mad-player-side img{display:block;object-position:center}

/* Stage 06 UAT03: synchronised genre typography and restrained horizontal waves. */
#online .mad-player-side{background:#000;border-radius:0;display:flex;align-items:center;justify-content:center;height:126px;overflow:hidden}
#online .mad-genre-word{display:block;color:#ff1da5;font:900 clamp(20px,2.7vw,36px)/1 Arial,Helvetica,sans-serif;letter-spacing:-.6px;text-align:center;white-space:nowrap;transition:transform 1.8s ease,opacity 1.8s ease;will-change:transform,opacity}
#online .mad-player-side-left .mad-genre-word.mad-transition{transform:translateX(-120%);opacity:0}
#online .mad-player-side-right .mad-genre-word.mad-transition{transform:translateX(120%);opacity:0}
#online #mad-play{background:#328fbf;color:#fff;transition:background-color .2s ease}
#online #mad-play.mad-is-playing{background:#ff249c}
#online .mad-player-core{position:relative}
#online .mad-player-details{position:relative;z-index:1}
#online .mad-player-waves{width:96px;flex:0 0 96px;align-self:center;overflow:hidden;opacity:.75;pointer-events:none}
#online .mad-player-waves svg{display:block;width:100%;height:72px}
#online .mad-wave{fill:none;stroke-width:2.5;stroke-linecap:round;transform-origin:center;animation:mad-wave-drift 5s ease-in-out infinite alternate;animation-play-state:paused}
#online .mad-wave-cyan{stroke:#58bfd0}
#online .mad-wave-pink{stroke:#ff1da5;opacity:.45;stroke-width:1.5;animation-duration:6.5s;animation-direction:alternate-reverse}
#online .mad-player.mad-playing .mad-wave{animation-play-state:running}
@keyframes mad-wave-drift{from{transform:translateY(-7px) scaleY(.65)}to{transform:translateY(7px) scaleY(1.1)}}
@media(max-width:1100px){#online .mad-player-waves{width:65px;flex-basis:65px}}
@media(max-width:980px){#online .mad-player-side{display:none}}
@media(max-width:560px){#online .mad-player-waves{display:none}}
@media(prefers-reduced-motion:reduce){#online .mad-genre-word{transition:none}#online .mad-wave{animation:none}}

/* Stage 06 UAT04: compact vinyl turntable replaces horizontal waves. */
#online .mad-player-waves{display:none}
#online .mad-turntable{width:112px;flex:0 0 112px;align-self:center;overflow:visible;pointer-events:none}
#online .mad-turntable svg{display:block;width:100%;height:auto;overflow:visible}
#online .mad-vinyl-disc{transform-box:view-box;transform-origin:52px 57px;animation:mad-vinyl-spin 1.8s linear infinite;animation-play-state:paused}
#online .mad-tonearm{transform-box:view-box;transform-origin:107px 14px;transform:rotate(-24deg);transition:transform 1.1s cubic-bezier(.2,.75,.25,1)}
#online .mad-player.mad-playing .mad-vinyl-disc{animation-play-state:running}
#online .mad-player.mad-playing .mad-tonearm{transform:rotate(0deg)}
@keyframes mad-vinyl-spin{to{transform:rotate(360deg)}}
@media(max-width:1100px){#online .mad-turntable{width:90px;flex-basis:90px}}
@media(max-width:560px){#online .mad-turntable{display:none}}
@media(prefers-reduced-motion:reduce){#online .mad-vinyl-disc{animation:none!important}#online .mad-tonearm{transition:none}}

/* Stage 06 UAT05: centre the information and controls without changing the turntable. */
#online .mad-player-details{text-align:center}
#online .mad-player-controls{justify-content:center}
#online .mad-player-live[hidden]{display:none!important}
#online .mad-genre-word{font-size:clamp(20px,2.7vw,36px)}

/* Stage 06 UAT06: mobile-only layout; desktop UAT05 appearance is unchanged. */
@media (max-width:560px){
  #online .mad-player{grid-template-columns:minmax(0,1fr);width:100%;max-width:100%;min-width:0}
  #online .mad-player-core{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto auto auto;align-items:center;justify-items:center;column-gap:12px;row-gap:8px;min-height:0;height:auto;min-width:0;box-sizing:border-box;padding:16px 12px}
  #online .mad-player-details{display:contents}
  #online .mad-player-eyebrow{grid-column:1/-1;grid-row:1;text-align:center;line-height:1.5;letter-spacing:1px}
  #online .mad-player-track{grid-column:1/-1;grid-row:2;text-align:center;max-width:100%;min-width:0;margin:0;font-size:15px;line-height:1.35}
  #online .mad-player-subtitle{grid-column:1/-1;grid-row:3;text-align:center;font-size:12px}
  #online .mad-player-art{grid-column:1;grid-row:4;justify-self:center;width:min(94px,100%);height:auto;aspect-ratio:1;object-fit:contain}
  #online .mad-turntable{display:block;grid-column:2;grid-row:4;justify-self:center;align-self:center;width:min(112px,100%);max-width:112px;min-width:0;flex:none}
  #online .mad-player-controls{grid-column:1/-1;grid-row:5;display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;width:100%;min-width:0;margin-top:4px}
  #online .mad-player-status{grid-column:1/-1;grid-row:6;text-align:center;margin-top:0;min-height:14px}
  #online .mad-player button{font-size:12px;padding:8px 10px}
  #online #mad-volume{width:65px;min-width:0}
}
/* Keep the stylus over the playable grooves rather than near the centre label. */
#online .mad-tonearm{transform:rotate(-34deg)}
#online .mad-player.mad-playing .mad-tonearm{transform:rotate(-10deg)}