#player{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);width:min(760px,94vw);z-index:30;background:var(--ink);color:#fff;border-radius:22px;border:2px solid var(--hi);padding:12px 18px;display:flex;align-items:center;gap:16px;box-shadow:0 14px 40px rgba(0,0,0,.4)}
#pp{width:54px;height:54px;border-radius:50%;border:0;background:var(--hi);color:var(--ink);font-size:1.4rem;cursor:pointer;flex:none;transition:transform .15s}
#pp:hover{transform:scale(1.08)}
.meta{flex:1;min-width:0}.meta b{font-family:'Bricolage Grotesque';display:block}
.meta span{font-size:.85rem;color:#9db0c4}
.eq{display:flex;gap:3px;align-items:flex-end;height:30px}
.eq i{width:5px;height:6px;background:var(--hi);border-radius:2px}
.playing .eq i{animation:eq .9s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:.15s}.eq i:nth-child(3){animation-delay:.3s}.eq i:nth-child(4){animation-delay:.45s}.eq i:nth-child(5){animation-delay:.6s}
@keyframes eq{to{height:30px}}
#vol{width:90px;accent-color:var(--hi)}
.live{background:var(--red);color:#fff;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:99px;margin-right:6px}
.meta .live{color:#fff;font-size:.7rem}
.player-fallback{display:block;color:var(--hi);font-size:.82rem}
.player-fallback[hidden]{display:none}
.open-player{background:none;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:10px;padding:6px 9px;cursor:pointer}
@media(max-width:560px){
  body:not(.popup) #vol{display:none}
  #player{gap:9px;padding:9px 12px}
  #pp{width:45px;height:45px}
}
.popup{margin:0;min-height:100vh;display:grid;place-items:center;padding:8px;background:#0a1827;color:#fff}
.popup #player{position:static;transform:none;width:100%;max-width:760px;gap:10px;padding:10px 12px}
.popup #pp{width:48px;height:48px}
.popup #vol{width:clamp(48px,18vw,90px)}
@media(max-width:360px){.popup .eq{display:none}}
@media(prefers-reduced-motion:reduce){.eq i,#pp{animation:none!important;transition:none!important}}