/* ------------------------------------------------------------------
   The persistent player bar: vinyl, transport, seek bar, EQ.
   ------------------------------------------------------------------ */

.player{
  position:fixed; left:0; right:0; bottom:0; height:var(--player-h); z-index:120;
  display:flex; align-items:center; gap:clamp(10px,2vw,22px);
  padding:0 clamp(14px,3vw,32px);
  /* solid-ish background instead of heavy backdrop blur: same look, no per-frame re-blur */
  background:color-mix(in srgb,var(--bg-2) 97%,var(--accent));
  border-top:1px solid var(--border);
  transform:translateZ(0); will-change:transform;
  transition:background .8s var(--ease);
}
.pdisc{
  width:46px; height:46px; flex:none; border-radius:50%; position:relative;
  background:radial-gradient(circle, var(--vinyl) 0 26%, transparent 27%),
             repeating-radial-gradient(circle, var(--vinyl) 0 2px, var(--groove) 2px 3px);
  background-color:var(--vinyl);
  animation:spin 12s linear infinite; animation-play-state:paused;
  border:1px solid var(--border);
}
body.playing .pdisc{animation-play-state:running}
.pdisc::after{content:""; position:absolute; inset:0; margin:auto; width:34%; height:34%; border-radius:50%; background:var(--accent); transition:background .8s var(--ease)}
.np{min-width:0; flex:0 1 220px}
.np .np-label{display:block; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-3)}
.np b{display:block; font-family:var(--font-display); font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.np .np-artist{font-size:.76rem; color:var(--text-3)}
.pctrl{display:flex; align-items:center; gap:6px; flex:none}
.pbtn{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  color:var(--text-2); transition:all .3s var(--ease);
}
.pbtn:hover{color:var(--text); background:var(--surface-2)}
.pbtn svg{width:17px; height:17px}
.pbtn.play{
  width:44px; height:44px; background:var(--accent); color:#17131A;
  box-shadow:0 6px 20px -6px var(--accent); transition:all .3s var(--ease), background .8s var(--ease);
}
html[data-theme="light"] .pbtn.play{color:#fff}
.pbtn.play:hover{transform:scale(1.07)}
.pbtn.play .i-pause{display:none}
body.playing .pbtn.play .i-play{display:none}
body.playing .pbtn.play .i-pause{display:block}
.pbar{flex:1 1 auto; display:flex; align-items:center; gap:10px; min-width:80px}
.ptime{font-family:var(--font-mono); font-size:.7rem; color:var(--text-3); flex:none}
.ptrack{flex:1; height:5px; border-radius:99px; background:var(--chip); cursor:pointer; position:relative}
.pfill{position:absolute; inset:0 auto 0 0; width:0%; border-radius:99px; background:var(--accent); transition:background .8s var(--ease)}
.pfill::after{
  content:""; position:absolute; right:-5px; top:50%; transform:translateY(-50%);
  width:11px; height:11px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow); opacity:0; transition:opacity .3s var(--ease);
}
.ptrack:hover .pfill::after{opacity:1}
.peq{display:flex; gap:3px; align-items:flex-end; height:22px; flex:none}
.peq i{width:3px; background:var(--accent); border-radius:2px; height:30%; transition:background .8s var(--ease)}
body.playing .peq i{animation:eqb .8s ease-in-out infinite}
body.playing .peq i:nth-child(1){height:55%} body.playing .peq i:nth-child(2){height:95%; animation-delay:.12s}
body.playing .peq i:nth-child(3){height:45%; animation-delay:.24s} body.playing .peq i:nth-child(4){height:80%; animation-delay:.36s}
body.playing .peq i:nth-child(5){height:60%; animation-delay:.48s}
@media(max-width:760px){
  .np{flex:1 1 auto}
  .pbar{position:absolute; top:-3px; left:0; right:0; padding:0; gap:0}
  .ptime{display:none}
  .ptrack{height:3px; border-radius:0}
  .peq{display:none}
}