/* HeardFeed listener player — standalone. Depends on tokens.css.
   Scott can drop this + js/player.js into a test listener page. */

.hf-player {
  background: var(--hf-bg-elevated, #121216);
  border: 1px solid var(--hf-border, rgba(244,241,239,0.10));
  border-radius: var(--hf-radius-lg, 16px);
  padding: var(--hf-space-5, 24px);
  color: var(--hf-text, #F4F1EF);
  font-family: var(--hf-font-body, Inter, system-ui, sans-serif);
}
.hf-player__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.hf-player__brand {
  display: flex; align-items: center; gap: 12px;
}
.hf-player__brand img { height: 40px; width: auto; }
.hf-player__title {
  font-family: var(--hf-font-display, Poppins, sans-serif);
  font-weight: 600; font-size: 1.1rem;
}
.hf-player__sub { color: var(--hf-text-muted, #B0ADAC); font-size: 0.9rem; }

.hf-badge {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 0 14px;
  border-radius: 999px;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.hf-badge--live {
  background: rgba(255,45,85,0.16);
  color: var(--hf-live, #FF2D55);
  border: 1px solid rgba(255,45,85,0.45);
}
.hf-badge--live .hf-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hf-live, #FF2D55);
  box-shadow: 0 0 0 3px var(--hf-live-glow, rgba(255,45,85,0.45));
  animation: hf-pulse 1.4s ease-in-out infinite;
}
.hf-badge--off {
  background: rgba(255,255,255,0.04);
  color: var(--hf-text-muted, #B0ADAC);
  border: 1px solid var(--hf-border, rgba(244,241,239,0.10));
}
@keyframes hf-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
}

.hf-player__stage {
  position: relative;
  min-height: 180px;
  border-radius: var(--hf-radius, 14px);
  background: #0E0E12;
  border: 1px solid var(--hf-border, rgba(244,241,239,0.10));
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.hf-player__offline {
  text-align: center; padding: 24px;
  color: var(--hf-text-muted, #B0ADAC); max-width: 28rem;
}
.hf-player__offline strong {
  display: block; color: var(--hf-text, #F4F1EF);
  font-family: var(--hf-font-display, Poppins, sans-serif);
  font-size: 1.15rem; margin-bottom: 8px;
}
.hf-player__stage iframe,
.hf-player__stage video,
.hf-player__stage audio {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.hf-player__stage audio { height: 40px; top: auto; }

.hf-player__controls {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.hf-play {
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--hf-gradient-brand, linear-gradient(105deg,#52C6FC,#2E38F0,#E00BB0,#FB5F5A));
  color: #fff; display: grid; place-items: center;
}
.hf-play[disabled] { opacity: 0.45; cursor: not-allowed; }
.hf-play svg { width: 22px; height: 22px; fill: currentColor; }

.hf-wave { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.hf-wave i {
  display: block; width: 3px; border-radius: 2px; height: 30%;
  background: var(--hf-gradient-wave, linear-gradient(90deg,#D4A8FF,#FF8FB0,#FF5A7A));
}
.hf-wave.is-playing i { animation: hf-wave 1.1s ease-in-out infinite; }
.hf-wave i:nth-child(2){animation-delay:.1s} .hf-wave i:nth-child(3){animation-delay:.2s}
.hf-wave i:nth-child(4){animation-delay:.05s} .hf-wave i:nth-child(5){animation-delay:.25s}
.hf-wave i:nth-child(6){animation-delay:.15s} .hf-wave i:nth-child(7){animation-delay:.3s}
.hf-wave:not(.is-playing) i { opacity: 0.45; height: 35%; }
@keyframes hf-wave { 0%,100%{height:25%} 50%{height:100%} }

.hf-countdown {
  font-family: var(--hf-font-display, Poppins, sans-serif);
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.hf-countdown span {
  color: var(--hf-text-muted, #B0ADAC); font-weight: 500;
  font-size: 0.9rem; margin-right: 8px;
}
.hf-listeners {
  margin-left: auto; color: var(--hf-text-muted, #B0ADAC); font-size: 0.92rem;
}
.hf-listeners[hidden] { display: none !important; }