/* Player bar: love/vote button + volume controller. Replaces the old
   "sound" glyph button and removes the close-player (×) button entirely. */

.player{gap:12px}
.player-meta{min-width:0}
.player-meta b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- Love / vote button --- */
.player-love{
  display:flex;align-items:center;gap:6px;
  border:0;background:transparent;color:#c9c6d4;
  padding:8px;border-radius:999px;
  line-height:0;flex-shrink:0;
  transition:color .18s ease,background-color .18s ease,transform .12s ease;
}
.player-love .love-icon{width:20px;height:20px;fill:currentColor;display:block}
.player-love .love-count{font:11px var(--mono);min-width:10px;text-align:left}
.player-love:hover{background:rgba(255,255,255,.08);color:#fff}
.player-love:active{transform:scale(.92)}
.player-love.is-voted{color:var(--pink)}
.player-love.is-voted .love-icon{fill:var(--pink)}
.player-love.is-voting{opacity:.6;pointer-events:none}

/* --- Volume controller --- */
.volume-control{
  display:flex;align-items:center;gap:8px;
  flex-shrink:0;
}
.volume-btn{
  border:0;background:transparent;color:#c9c6d4;
  padding:6px;line-height:0;border-radius:999px;
  transition:color .18s ease,background-color .18s ease;
  flex-shrink:0;
}
.volume-btn .volume-icon{width:20px;height:20px;fill:currentColor;display:block}
.volume-btn .volume-icon[hidden]{display:none}
.volume-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.volume-control.is-muted .volume-btn{color:var(--pink)}

.volume-slider{
  -webkit-appearance:none;appearance:none;
  width:88px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--lime) 0%,var(--lime) var(--vol,80%),rgba(255,255,255,.25) var(--vol,80%),rgba(255,255,255,.25) 100%);
  outline:none;cursor:pointer;
}
.volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:13px;height:13px;border-radius:50%;
  background:var(--lime);border:0;cursor:pointer;
  box-shadow:0 0 0 4px rgba(214,255,56,.18);
}
.volume-slider::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;
  background:var(--lime);border:0;cursor:pointer;
  box-shadow:0 0 0 4px rgba(214,255,56,.18);
}
.volume-slider::-moz-range-track{background:transparent}

/* Player bar has room for these controls now that "×" is gone. Keep the
   wave visualizer as the first thing to drop on narrow screens. */
@media(max-width:950px){
  .volume-slider{width:64px}
}

@media(max-width:680px){
  .player{padding:0 14px;gap:8px}
  .player-wave{display:none}
  .player-love{padding:7px}
  .player-love .love-count{display:none}
  .volume-control{gap:5px}
  .volume-btn{padding:5px}
  .volume-slider{width:56px}
}

@media(max-width:360px){
  .volume-slider{width:42px}
}