/* ============================================================
   WINE GLASS — floating music player (persistent)
   ============================================================ */
.player{
  position:fixed;right:calc(1.2rem + env(safe-area-inset-right));bottom:calc(1.2rem + env(safe-area-inset-bottom));z-index:120;
  display:flex;align-items:center;gap:0.7rem;
  padding:0.5rem 0.9rem 0.5rem 0.5rem;
  border-radius:var(--r-pill);
  background:rgba(26,7,16,0.55);
  backdrop-filter:blur(var(--bl16)) saturate(1.3);-webkit-backdrop-filter:blur(var(--bl16)) saturate(1.3);
  border:1px solid var(--hairline-strong);
  box-shadow:0 14px 40px rgba(20,4,9,0.55),inset 0 1px 0 rgba(255,255,255,0.12);
  transform:translateY(140%);opacity:0;
  transition:transform 0.7s var(--ease-out-expo),opacity 0.7s var(--ease-out-expo);
  max-width:min(80vw,300px);
}
.player.is-visible{transform:none;opacity:1;}

.player-btn{
  flex:none;width:40px;height:40px;border-radius:50%;border:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--grad-pill);color:var(--cream-100);
  box-shadow:0 6px 16px rgba(196,116,139,0.4);
  transition:transform var(--dur-fast) var(--ease-out-back);
}
.player-btn:hover{transform:scale(1.08);}
.player-btn svg{width:16px;height:16px;}
.player-btn .ic-pause{display:none;}
.player.is-playing .player-btn .ic-play{display:none;}
.player.is-playing .player-btn .ic-pause{display:block;}

.player-meta{display:flex;flex-direction:column;min-width:0;line-height:1.2;}
.player-now{font-family:var(--font-ui);font-size:0.56rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--fg-faint);}
.player-track{font-family:var(--font-serif);font-style:italic;font-size:0.95rem;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* animated equalizer bars while playing */
.player-eq{display:flex;align-items:flex-end;gap:2px;height:16px;width:16px;flex:none;}
.player-eq span{width:2.5px;background:var(--accent-bright);border-radius:2px;height:30%;transform-origin:bottom;}
.player.is-playing .player-eq span{animation:player-eq 0.85s var(--ease-in-out) infinite;}
.player-eq span:nth-child(1){animation-delay:0s;}
.player-eq span:nth-child(2){animation-delay:0.18s;}
.player-eq span:nth-child(3){animation-delay:0.36s;}
@keyframes player-eq{0%,100%{transform:scaleY(0.35);}50%{transform:scaleY(1);}}

@media(max-width:560px){
  .player-track{font-size:0.85rem;}
  .player{right:calc(0.8rem + env(safe-area-inset-right));bottom:calc(0.8rem + env(safe-area-inset-bottom));}
}