/* =========================================================================
   CULT ON AIR — Sticky player (persistente, non si interrompe mai)
   ========================================================================= */

.player{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  height:var(--player-h);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-top:1px solid var(--surface-hairline);
  box-shadow:0 -12px 32px -16px rgba(20,18,27,0.28);
}
.player-inner{
  max-width:var(--max-w); margin-inline:auto; height:100%;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
}

.player-play{
  width:46px; height:46px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--amber-300), var(--amber-500) 65%, var(--amber-600));
  color:#1B0F04;
  box-shadow:var(--shadow-glow);
  transition:transform .16s var(--ease-out);
}
.player[data-playing="true"] .player-play{ animation:glow-pulse 2.6s ease-out infinite; }
.player-play:active{ transform:scale(0.92); }
.player-play .icon{ width:18px; height:18px; }
.player-play svg.pause{ display:none; }
.player[data-playing="true"] .player-play svg.play{ display:none; }
.player[data-playing="true"] .player-play svg.pause{ display:block; }
.player[data-loading="true"] .player-play{ animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* scatto di conferma al tocco play (studiato su RDS/RTL: un rimbalzo breve
   nel momento esatto in cui parte l'audio, non un loop continuo — quello lo
   fa già glow-pulse qui sopra). Si applica e si toglie da solo via JS in
   playerBar.js quando lo stato passa da pausa a riproduzione. */
@keyframes pop{ 0%{ transform:scale(1); } 35%{ transform:scale(1.16); } 100%{ transform:scale(1); } }
/* BUG TROVATO IN TEST: `.player-play.pop-once` da solo (specificità 0,2,0)
   perdeva sempre contro `.player[data-playing="true"] .player-play` qui
   sopra (specificità 0,3,0) — l'animazione "pop" non partiva mai, restava
   silenziosamente solo glow-pulse. Corretto ripetendo lo stesso selettore
   completo e mettendo entrambe le animazioni nella stessa dichiarazione
   (l'animation shorthand non si somma tra regole diverse, vince solo una). */
.player[data-playing="true"] .player-play.pop-once{ animation:pop .38s var(--ease-out), glow-pulse 2.6s ease-out infinite; }

.player-now{
  min-width:0;
  display:flex; align-items:center; gap:12px;
}
.player-cover{
  width:40px; height:40px; border-radius:var(--r-sm); flex:none;
  background:linear-gradient(160deg, var(--accent2), var(--accent2-strong));
  display:grid; place-items:center; color:#fff; overflow:hidden;
  font-family:var(--font-display); font-size:.7rem;
}
.player-cover img{ width:100%; height:100%; object-fit:cover; }
.player-meta{ min-width:0; }
.player-station{
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.06em;
  color:var(--accent); text-transform:uppercase;
  display:flex; align-items:center; gap:6px;
}
.player-title{
  font-weight:700; font-size:.95rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.player-show{
  font-size:var(--fs-xs); color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.player-aux{ display:flex; align-items:center; gap:16px; color:var(--text-muted); }
.player-eq{ color:var(--accent); }
.player-volume{ display:none; }
.player-hub-link{
  display:none;
  align-items:center; gap:6px;
  font-size:var(--fs-sm); font-weight:600;
  color:var(--text-secondary);
  padding:8px 14px; border-radius:var(--r-pill);
  border:1px solid var(--surface-hairline);
}
.player-hub-link:hover{ border-color:var(--accent2); color:var(--text-primary); }

@media (max-width:759px){
  .player{
    height:104px;
  }
  .player-inner{
    grid-template-columns:auto 1fr;
    gap:14px;
    padding-inline:max(14px, var(--gutter));
  }
  .player-play{
    width:68px;
    height:68px;
    border-radius:22px;
  }
  .player-play .icon{
    width:26px;
    height:26px;
  }
  .player-cover{
    width:46px;
    height:46px;
  }
  .player-title{
    font-size:1.02rem;
  }
  .player-show{
    font-size:.86rem;
  }
  .player-aux{
    display:none;
  }
}

@media (min-width:760px){
  .player{ height:84px; }
  .player-volume{ display:flex; align-items:center; gap:8px; width:120px; }
  .player-volume input[type="range"]{
    width:100%; accent-color:var(--accent);
  }
  .player-hub-link{ display:inline-flex; }
}

/* mobile: leave room so bottom nav / hub grid never hides under player already
   handled via body padding-bottom (see base.css) */