.player{
  position:fixed;inset:auto 0 0 0;z-index:110;height:var(--player-h);display:flex;align-items:stretch;
  background:rgba(40,36,48,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;
}

.player__bar{position:absolute;left:0;right:0;top:0;height:3px;overflow:hidden;opacity:0;transition:opacity .3s;pointer-events:none}
.player__bar::before{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,var(--cyan-hi),var(--pink),transparent);animation:pbar 1.2s ease-in-out infinite}
@keyframes pbar{from{translate:-100% 0}to{translate:250% 0}}
.player[data-state=connecting] .player__bar,.player[data-state=buffering] .player__bar,.player[data-state=reconnecting] .player__bar{opacity:1}

.player__play,.player__vol{flex:none;width:var(--player-h);border:0;color:#fff;font-size:20px;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.player__play{position:relative;background:#7c03f6}
.player__play:hover{background:#e70380}
.player__play:focus-visible,.player__vol:focus-visible{outline:2px solid var(--cyan-hi);outline-offset:-4px}
.player__vol{background:#111}
.player__vol:hover{background:#8224e3}

.player__play .ico{grid-area:1 / 1;opacity:0;scale:.4;transition:opacity .2s,scale .25s cubic-bezier(.3,1.5,.5,1)}
.player[data-state=idle] .ico--play,.player[data-state=stopped] .ico--play,
.player[data-state=playing] .ico--stop,
.player[data-state=connecting] .spin,.player[data-state=buffering] .spin,.player[data-state=reconnecting] .spin,
.player[data-state=error] .ico--retry,.player[data-state=offline] .ico--retry{opacity:1;scale:1}
.spin{width:26px;height:26px;border-radius:50%;border:3px solid rgba(255,255,255,.28);border-top-color:#fff;animation:spin .75s linear infinite}
@keyframes spin{to{rotate:360deg}}
.player[data-state=playing] .player__play,.player[data-state=buffering] .player__play{background:var(--pink)}
.player[data-state=error] .player__play,.player[data-state=offline] .player__play{background:#c60038}

.player__cover{flex:none;width:var(--player-h);height:var(--player-h);object-fit:cover;background:linear-gradient(135deg,var(--pink),var(--cyan))}
.player__txt{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 20px;min-width:0;line-height:1.25}
.player__tit{display:flex;align-items:center;gap:9px;min-width:0;font-weight:700;font-size:18px;text-transform:uppercase;white-space:nowrap}
.player__name{overflow:hidden;text-overflow:ellipsis}
.player__badge{
  flex:none;display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 7px;border-radius:4px;
  font-family:'Montserrat',sans-serif;font-size:10px;font-weight:800;letter-spacing:.09em;line-height:1;
  background:rgba(255,255,255,.16);transition:background .3s;
}
.player__badge::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55)}
.player[data-state=playing] .player__badge{background:var(--pink)}
.player[data-state=playing] .player__badge::before{background:#fff;animation:livePulse 1.6s ease-out infinite}
.player[data-state=connecting] .player__badge::before,.player[data-state=buffering] .player__badge::before,
.player[data-state=reconnecting] .player__badge::before{background:#ffd23f;animation:blink 1s ease-in-out infinite}
.player[data-state=error] .player__badge,.player[data-state=offline] .player__badge{background:#c60038}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.75)}100%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}
@keyframes blink{50%{opacity:.25}}
.player__art{font-family:'Montserrat',sans-serif;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.82)}

.player__eq{flex:none;display:flex;align-items:flex-end;gap:3px;height:24px;align-self:center;margin-left:auto;padding:0 18px 0 8px;opacity:.3;transition:opacity .3s}
.player__eq i{width:4px;height:100%;border-radius:2px;background:linear-gradient(to top,var(--pink),var(--cyan-hi));transform-origin:50% 100%;scale:1 .15;transition:scale .4s}
.player[data-state=playing] .player__eq{opacity:1}
.player[data-state=playing] .player__eq i{animation:eq .8s ease-in-out infinite alternate}
.player__eq i:nth-child(2){animation-duration:.55s!important;animation-delay:-.2s!important}
.player__eq i:nth-child(3){animation-duration:.95s!important;animation-delay:-.5s!important}
.player__eq i:nth-child(4){animation-duration:.65s!important;animation-delay:-.1s!important}
.player__eq i:nth-child(5){animation-duration:.85s!important;animation-delay:-.35s!important}
.player.is-muted .player__eq i{animation-play-state:paused!important;opacity:.5}
@keyframes eq{0%{scale:1 .2}50%{scale:1 1}100%{scale:1 .4}}

.player__time{flex:none;align-self:center;padding-right:18px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:rgba(255,255,255,.75);display:none}
.player[data-state=playing] .player__time,.player[data-state=buffering] .player__time{display:block}
.player__range{flex:none;align-self:center;width:90px;margin-right:20px;accent-color:#ff0d51}
@media (max-width:700px){
  .player__range,.player__time{display:none!important}
  .player__tit{font-size:15px;gap:7px}
  .player__txt{padding:0 12px}
  .player__art{font-size:11px}
  .player__eq{padding:0 14px 0 4px}
}

@media (prefers-reduced-motion:reduce){
  .player__bar::before,.player__eq i,.player__badge::before{animation:none !important}
}