/* ===========================================================
   Bogestv0 — общий плеер (css/player.css).
   Подключается вместе с player-global.js на ВСЕХ страницах сайта, где
   должна продолжать играть музыка. Сам плеер зафиксирован над шапкой
   сайта (z-index выше, чем у header), поэтому не зависит от разметки
   конкретной страницы — работает одинаково везде.

   Требует переменные --bg/--panel/--panel-2/--line/--text/--muted/
   --violet/--pink — они уже определены в :root каждой страницы сайта.
   =========================================================== */
#bg-player-bar{
  position: fixed; top:0; left:0; right:0; z-index: 200;
  background: rgba(16,14,24,0.94); backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line, #2A2638);
  padding: 10px 18px; display:none; align-items:center; gap:14px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#bg-player-bar.show{ display:flex; }
html.bg-player-active{ padding-top: 58px; }
@media (max-width:560px){ html.bg-player-active{ padding-top: 96px; } }

.bg-player-track{ display:flex; flex-direction:column; min-width:0; width:200px; flex-shrink:0; }
.bg-player-title{ font-size:13px; font-weight:700; color:var(--text, #F3F1F8); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bg-player-author{ font-size:11.5px; color:var(--muted, #948FA8); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.bg-player-controls{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.bg-player-btn{
  width:32px; height:32px; border-radius:9px; border:none; background: var(--panel-2, #1B1826); color: var(--text, #F3F1F8);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition: background .15s; padding:0;
}
.bg-player-btn:hover{ background: rgba(139,92,246,0.18); }
.bg-player-btn.bg-player-play{ width:38px; height:38px; background: linear-gradient(135deg, var(--violet, #8B5CF6), var(--pink, #F4568C)); color:#fff; }
.bg-player-btn svg{ width:15px; height:15px; }
.bg-player-close{ background:none; color: var(--muted, #948FA8); }
.bg-player-close:hover{ background: rgba(244,86,140,0.14); color: var(--pink, #F4568C); }

.bg-player-seek{ flex:1; display:flex; align-items:center; gap:8px; min-width:0; }
.bg-player-time{ font-family:'JetBrains Mono', monospace; font-size:11px; color: var(--muted, #948FA8); flex-shrink:0; width:36px; text-align:center; }
.bg-player-seek input[type="range"]{ flex:1; accent-color: var(--violet, #8B5CF6); }

.bg-player-volume{ display:flex; align-items:center; gap:6px; flex-shrink:0; width:100px; }
.bg-player-volume svg{ width:15px; height:15px; color: var(--muted, #948FA8); flex-shrink:0; }
.bg-player-volume input[type="range"]{ flex:1; accent-color: var(--violet, #8B5CF6); }

@media (max-width:760px){
  .bg-player-track{ width:120px; }
  .bg-player-volume{ display:none; }
}
@media (max-width:560px){
  #bg-player-bar{ flex-wrap:wrap; padding:8px 14px; gap:6px 10px; }
  .bg-player-track{ width:auto; order:1; flex:1 1 auto; }
  .bg-player-controls{ order:2; }
  .bg-player-close{ order:3; }
  .bg-player-seek{ order:4; flex-basis:100%; }
  .bg-player-time{ width:30px; }
}