/* Featured song: small pill bottom-left in header photo, tuner-only perk */
.hdr-art-after { position: relative; }
.fs-box {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  max-width: 55%;
  border-radius: 999px;
  background: rgba(13, 12, 11, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(236, 228, 214, 0.15);
  color: #ece4d6;
  font-size: 13px;
  line-height: 1.3;
  transition: background 0.2s, border-color 0.2s;
}
.fs-box[hidden] { display: none; }
.fs-box:hover { background: rgba(13, 12, 11, 0.85); border-color: rgba(201, 160, 99, 0.4); }

.fs-play {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(201, 160, 99, 0.2);
  color: #c9a063;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s, transform 0.15s;
}
.fs-play:hover { background: rgba(201, 160, 99, 0.3); transform: scale(1.05); }
.fs-play:active { transform: scale(0.95); }

.fs-play-ic, .fs-pause-ic {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  margin: auto;
  transition: opacity 0.2s;
}
.fs-play-ic { opacity: 1; }
.fs-pause-ic { opacity: 0; }
.fs-play.playing .fs-play-ic { opacity: 0; }
.fs-play.playing .fs-pause-ic { opacity: 1; }

.fs-ring {
  position: absolute;
  inset: -2px;
  width: 36px;
  height: 36px;
  pointer-events: none;
  opacity: 0;
  transform: rotate(-90deg);
  transition: opacity 0.2s;
}
.fs-play.playing .fs-ring { opacity: 1; }
.fs-ring circle {
  transition: stroke-dashoffset 0.1s linear;
}

.fs-play.loading .fs-play-ic,
.fs-play.loading .fs-pause-ic { animation: fsLoading 0.8s linear infinite; }
@keyframes fsLoading {
  to { transform: rotate(360deg); }
}

.fs-cover {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(201, 160, 99, 0.1);
}
.fs-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fs-text {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1;
  font-weight: 500;
}
.fs-track, .fs-artist {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fs-track { font-weight: 600; }
.fs-artist { color: rgba(236, 228, 214, 0.75); }
.fs-sep { flex: none; opacity: 0.5; }

.fs-tuner {
  flex: none;
  width: 16px;
  height: 16px;
  opacity: 0.6;
  color: #c9a063;
}
.fs-tuner svg { width: 100%; height: 100%; }

.fs-box .dz-credit.fs-dz {
  flex: none;
  margin-left: 4px;
  opacity: 0.5;
  height: 14px;
  transition: opacity 0.2s;
}
.fs-box:hover .dz-credit.fs-dz { opacity: 0.7; }

@media (min-width: 641px) {
  .fs-box {
    max-width: 280px;
    bottom: 16px;
    left: 16px;
    padding: 7px 12px 7px 7px;
    gap: 10px;
  }
  .fs-play {
    width: 36px;
    height: 36px;
  }
  .fs-play-ic, .fs-pause-ic {
    width: 20px;
    height: 20px;
  }
  .fs-cover {
    width: 36px;
    height: 36px;
  }
}

html[data-theme="light"] .fs-box {
  background: rgba(245, 243, 239, 0.85);
  color: #1d1a16;
  border-color: rgba(29, 26, 22, 0.15);
}
html[data-theme="light"] .fs-box:hover {
  background: rgba(245, 243, 239, 0.95);
  border-color: rgba(201, 160, 99, 0.5);
}
html[data-theme="light"] .fs-artist {
  color: rgba(29, 26, 22, 0.65);
}
/* v3: sits inside the band spacer (.hdr-art-sp), bottom-left, small and quiet; paused until tapped */
.hdr-art-sp { position: relative; }
.hdr-art-sp > .fs-box { bottom: 10px; left: 12px; gap: 7px; padding: 4px 10px 4px 4px; max-width: min(72%, 340px); font-size: 12px; background: rgba(13,12,11,.55); border-color: rgba(236,228,214,.12); opacity: .85; }
.hdr-art-sp > .fs-box:hover { opacity: 1; }
.hdr-art-sp > .fs-box .fs-play { width: 26px; height: 26px; }
.hdr-art-sp > .fs-box .fs-play svg:not(.fs-ring) { width: 12px; height: 12px; }
.hdr-art-sp > .fs-box .fs-cover { width: 22px; height: 22px; border-radius: 4px; }
.hdr-art-sp > .fs-box .fs-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-art-sp > .fs-box .fs-tuner { display: none; }
.hdr-art-sp > .fs-box .fs-dz { display: none; }   /* the band already credits Deezer bottom-right */
.hdr-art-sp > .fs-box .fs-text { flex: 1; display: flex; gap: 4px; }
.hdr-art-sp > .fs-box .fs-track { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hdr-art-sp > .fs-box .fs-artist { flex: 0 10 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: .75; }
/* v5: progress = light-gold fill behind the pill (the ring was off-centre on the small play button) */
@property --fs-p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.hdr-art-sp > .fs-box { background-image: linear-gradient(90deg, rgba(231,196,140,.30) var(--fs-p), transparent var(--fs-p)) }
.hdr-art-sp > .fs-box .fs-ring { display: none; }