.modern-radio-wrap{
  width:min(900px,calc(100% - 20px));
  min-height:72px;
  margin:8px auto 10px;
  padding:0;
  border:0;
  background:transparent;
  overflow:visible;
}
.modern-radio-wrap[hidden]{display:none!important}
.modern-radio-bar{
  min-height:72px;
  width:100%;
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  padding:7px 12px;
  color:var(--modern-text,#fff);
  background:
    radial-gradient(circle at 12% 50%,color-mix(in srgb,var(--modern-accent,#e1b72b) 10%,transparent),transparent 23%),
    linear-gradient(90deg,var(--modern-bg,#101010),color-mix(in srgb,var(--modern-bg,#101010) 90%,#2a2107),var(--modern-bg,#101010));
  border:1px solid color-mix(in srgb,var(--modern-accent,#e1b72b) 30%,transparent);
  border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.05),inset 0 -10px 25px rgba(0,0,0,.22);
  overflow:hidden;
}
.modern-radio-play{
  width:46px;height:46px;border-radius:10px;display:grid;place-items:center;padding:0!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--modern-accent,#e1b72b) 92%,#fff),var(--modern-accent,#e1b72b))!important;
  color:#151107!important;border:0!important;font-size:20px!important;font-weight:1000!important;
  box-shadow:0 7px 18px color-mix(in srgb,var(--modern-accent,#e1b72b) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.35);
}
.modern-radio-turntable{position:relative;width:56px;height:56px;display:grid;place-items:center;filter:drop-shadow(0 6px 9px rgba(0,0,0,.55))}
.modern-radio-vinyl{
  position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:repeating-radial-gradient(circle at center,#080808 0 2px,#171717 3px 4px,#070707 5px 7px);
  border:2px solid color-mix(in srgb,var(--modern-accent,#e1b72b) 55%,#181818);
  box-shadow:inset 0 0 0 1px #000,0 0 0 3px rgba(0,0,0,.35);
}
.modern-radio-vinyl:after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:#ddd;box-shadow:0 0 0 2px #111}
.modern-radio-cover{width:29px;height:29px;border-radius:50%;object-fit:cover;border:0;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.modern-radio-tonearm{position:absolute;width:25px;height:3px;border-radius:999px;background:linear-gradient(90deg,#c5c5c5,#5f5f5f);right:-5px;top:10px;transform:rotate(47deg);transform-origin:right center;box-shadow:0 1px 3px #000}
.modern-radio-tonearm:after{content:'';position:absolute;width:8px;height:8px;border-radius:50%;background:#292929;border:2px solid #aaa;right:-4px;top:-4px}
.modern-radio-wrap.is-playing .modern-radio-vinyl{animation:radio-vinyl-spin 2.8s linear infinite}
@keyframes radio-vinyl-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.modern-radio-wrap.is-playing .modern-radio-vinyl{animation:none}}
.modern-radio-info{min-width:0;display:grid;gap:2px;align-content:center}
.modern-radio-topline{display:flex;align-items:center;gap:7px;min-width:0}
.modern-radio-livebadge{font-size:9px;font-weight:1000;line-height:1;padding:3px 5px;border-radius:3px;background:var(--modern-accent,#e1b72b);color:#151106}
.modern-radio-listeners{font-size:14px;font-weight:1000;line-height:1}.modern-radio-listener-label{font-size:10px;opacity:.72}
.modern-radio-station{font-size:12px;font-weight:900;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modern-radio-song{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--modern-text,#fff)}
.modern-radio-liveword{font-size:11px;font-weight:900;opacity:.92}
.modern-radio-cast{min-width:104px;height:36px!important;padding:0 10px!important;border-radius:9px!important;border:1px solid color-mix(in srgb,var(--modern-accent,#e1b72b) 50%,#222)!important;background:#171715!important;color:var(--modern-accent,#e1b72b)!important;font-size:11px!important;font-weight:900!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.modern-radio-cast:hover{background:color-mix(in srgb,var(--modern-accent,#e1b72b) 12%,#171715)!important}
.modern-radio-cast.is-casting{background:var(--modern-accent,#e1b72b)!important;color:#17130a!important}
.modern-radio-volume{display:flex;align-items:center;gap:7px}.modern-radio-volume span{font-size:15px}.modern-radio-volume input{width:90px;accent-color:var(--modern-accent,#e1b72b);padding:0!important;border:0!important;background:transparent!important}
body.auth-bg .modern-radio-wrap{width:min(700px,calc(100vw - 28px));margin:0 auto 8px}
@media(max-width:760px){
 .modern-radio-wrap,body.auth-bg .modern-radio-wrap{width:calc(100% - 8px);min-height:68px;margin:4px auto 7px}
 .modern-radio-bar{min-height:68px;grid-template-columns:auto auto minmax(0,1fr) auto;padding:6px 8px;gap:8px;border-radius:8px}
 .modern-radio-play{width:44px;height:44px;border-radius:10px;font-size:20px!important}
 .modern-radio-turntable{width:50px;height:50px}.modern-radio-vinyl{width:48px;height:48px}.modern-radio-cover{width:27px;height:27px}.modern-radio-tonearm{width:22px;right:-4px;top:9px}
 .modern-radio-liveword{display:none}.modern-radio-cast{min-width:44px;width:44px;height:38px!important;padding:0!important;font-size:0!important}.modern-radio-cast:before{content:'▣';font-size:17px}
 .modern-radio-volume{display:none}.modern-radio-listeners{font-size:12px}.modern-radio-listener-label{font-size:9px}.modern-radio-station{font-size:10.5px}.modern-radio-song{font-size:11px}
}
@media(max-width:420px){.modern-radio-bar{grid-template-columns:auto auto minmax(0,1fr) auto;gap:6px}.modern-radio-turntable{width:44px;height:44px}.modern-radio-vinyl{width:42px;height:42px}.modern-radio-cover{width:24px;height:24px}.modern-radio-play{width:40px;height:40px}.modern-radio-cast{width:40px;min-width:40px}}


/* Compacte Cast Platenspeler — houdt de player onder chat/login zonder paginascroll. */
.modern-radio-wrap{width:min(860px,calc(100% - 16px))!important;min-height:54px!important;margin:3px auto 4px!important}
.modern-radio-bar{min-height:54px!important;grid-template-columns:auto auto minmax(0,1fr) auto auto auto!important;gap:7px!important;padding:4px 8px!important;border-radius:9px!important}
.modern-radio-play{width:38px!important;height:38px!important;border-radius:8px!important;font-size:17px!important}
.modern-radio-turntable{width:43px!important;height:43px!important}.modern-radio-vinyl{width:40px!important;height:40px!important}.modern-radio-cover{width:22px!important;height:22px!important}.modern-radio-tonearm{width:19px!important;height:2px!important;right:-3px!important;top:7px!important}.modern-radio-tonearm:after{width:6px!important;height:6px!important;right:-3px!important;top:-3px!important}
.modern-radio-info{gap:0!important}.modern-radio-topline{gap:5px!important}.modern-radio-livebadge{font-size:8px!important;padding:2px 4px!important}.modern-radio-listeners{font-size:12px!important}.modern-radio-listener-label{font-size:9px!important}.modern-radio-station{font-size:10.5px!important;line-height:13px!important}.modern-radio-song{font-size:11px!important;line-height:14px!important}.modern-radio-liveword{font-size:10px!important}.modern-radio-cast{min-width:92px!important;height:31px!important;padding:0 8px!important;border-radius:7px!important;font-size:10px!important}.modern-radio-volume{gap:4px!important}.modern-radio-volume span{font-size:13px!important}.modern-radio-volume input{width:72px!important}
body.auth-login-page .modern-radio-wrap{width:min(620px,calc(100vw - 20px))!important;margin:3px auto 0!important;flex:0 0 auto!important}
@media(max-width:760px){.modern-radio-wrap,body.auth-login-page .modern-radio-wrap{width:calc(100% - 6px)!important;min-height:50px!important;margin:2px auto 3px!important}.modern-radio-bar{min-height:50px!important;grid-template-columns:auto auto minmax(0,1fr) auto!important;gap:5px!important;padding:3px 6px!important;border-radius:7px!important}.modern-radio-play{width:36px!important;height:36px!important;font-size:16px!important}.modern-radio-turntable{width:39px!important;height:39px!important}.modern-radio-vinyl{width:36px!important;height:36px!important}.modern-radio-cover{width:20px!important;height:20px!important}.modern-radio-tonearm{width:17px!important}.modern-radio-liveword,.modern-radio-volume{display:none!important}.modern-radio-cast{width:36px!important;min-width:36px!important;height:32px!important}.modern-radio-station{font-size:10px!important}.modern-radio-song{font-size:10.5px!important}}

/* 2026-09-07 mobiel: Cast-knop toont uitsluitend het Cast-icoon en kan niet buiten de player lopen. */
@media(max-width:760px){
  .modern-radio-cast{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:30px!important;
    padding:0!important;
    margin:0!important;
    font-size:0!important;
    line-height:0!important;
    overflow:hidden!important;
    display:grid!important;
    place-items:center!important;
    flex:0 0 34px!important;
  }
  .modern-radio-cast::before{
    content:''!important;
    display:block!important;
    width:18px!important;
    height:14px!important;
    background:currentColor!important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 18v3h3a3 3 0 0 0-3-3Zm0-4v2a5 5 0 0 1 5 5h2a7 7 0 0 0-7-7Zm0-4v2c4.97 0 9 4.03 9 9h2c0-6.08-4.92-11-11-11Zm3-7a3 3 0 0 0-3 3v2h2V6a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-6v2h6a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H4Z'/%3E%3C/svg%3E") center/contain no-repeat!important;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 18v3h3a3 3 0 0 0-3-3Zm0-4v2a5 5 0 0 1 5 5h2a7 7 0 0 0-7-7Zm0-4v2c4.97 0 9 4.03 9 9h2c0-6.08-4.92-11-11-11Zm3-7a3 3 0 0 0-3 3v2h2V6a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-6v2h6a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H4Z'/%3E%3C/svg%3E") center/contain no-repeat!important;
  }
  .modern-radio-bar{
    grid-template-columns:36px 39px minmax(0,1fr) 34px!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .modern-radio-info{min-width:0!important;overflow:hidden!important}
}
@media(max-width:380px){
  .modern-radio-bar{grid-template-columns:34px 36px minmax(0,1fr) 32px!important;gap:4px!important;padding-left:4px!important;padding-right:4px!important}
  .modern-radio-cast{width:32px!important;min-width:32px!important;max-width:32px!important;height:29px!important;flex-basis:32px!important}
  .modern-radio-cast::before{width:16px!important;height:13px!important}
}

/* Login/gast: player blijft helder en boven de achtergrond-overlay. */
body.auth-bg > .modern-radio-wrap{
  position:relative!important;
  z-index:4!important;
  opacity:1!important;
  filter:none!important;
  -webkit-filter:none!important;
  mix-blend-mode:normal!important;
}
body.auth-bg > .modern-radio-wrap .modern-radio-bar,
body.auth-bg > .modern-radio-wrap .modern-radio-play,
body.auth-bg > .modern-radio-wrap .modern-radio-cast,
body.auth-bg > .modern-radio-wrap .modern-radio-turntable,
body.auth-bg > .modern-radio-wrap .modern-radio-info{
  opacity:1!important;
  filter:none!important;
  -webkit-filter:none!important;
}