/* ============================================================
   Глобальная панель плеера саундтрека — «Тактический минимум»
   Подключается в layout.ejs на каждой странице. Разметка —
   views/partials/soundtrackPlayer.ejs, логика — public/js/soundtrackPlayer.js.
   Контракты: #st-player[hidden], .st-ctl--main.is-playing, .is-muted,
   body.has-st-player — отступ страницы под липкую панель.
   ============================================================ */

/* Пока панель плеера видна, страница не должна прятаться под неё */
body.has-st-player {
  padding-bottom: 96px;
}

/* ── Нижняя панель плеера ── */

.st-player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  background: rgba(16, 17, 20, 0.96);
  border-top: 1px solid var(--t-panel-border);
  color: var(--t-text);
  font-family: var(--t-font-body);
}

.st-player[hidden] { display: none; }

/* Шкала прогресса — 4px по гайду, кликабельная по всей ширине */
.st-player-progress {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.st-player-progress:focus-visible {
  outline: 1px solid var(--t-red-bright);
  outline-offset: 2px;
}

.st-player-progress-buffer,
.st-player-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
}

.st-player-progress-buffer { background: rgba(255, 255, 255, 0.12); }
.st-player-progress-fill { background: var(--t-red); }

.st-player-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: 28px;
  max-width: 1328px;
  margin: 0 auto;
  padding: 12px 24px;
}

.st-player-now {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.st-player-status { letter-spacing: 2px; }

.st-player-title {
  font-family: var(--t-font-display);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-player-album {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-player-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.st-ctl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--t-text-muted);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.st-ctl:hover,
.st-ctl:focus-visible {
  color: var(--t-red-bright);
}

.st-ctl--main {
  width: 44px;
  height: 44px;
  background: var(--t-red);
  color: #ffffff;
}

.st-ctl--main:hover,
.st-ctl--main:focus-visible {
  background: #e63946;
  color: #ffffff;
}

.st-ctl--small {
  width: 30px;
  height: 30px;
}

.st-player-time {
  display: flex;
  gap: 6px;
  min-width: 96px;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.st-player-time-sep { color: var(--t-text-faint); }

.st-player-vol {
  display: flex;
  align-items: center;
  gap: 8px;
}

.st-player-vol-bar {
  position: relative;
  width: 96px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.st-player-vol-bar:focus-visible {
  outline: 1px solid var(--t-red-bright);
  outline-offset: 2px;
}

.st-player-vol-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 80%;
  background: var(--t-text-muted);
}

.st-ico--muted { display: none; }
.is-muted .st-ico--vol { display: none; }
.is-muted .st-ico--muted { display: block; }

.st-player-title {
  text-decoration: none;
  transition: color 0.18s ease;
}

.st-player-title:hover,
.st-player-title:focus-visible {
  color: var(--t-red-bright);
}

.st-player-close {
  color: var(--t-text-faint);
}

.st-ctl--main .st-ico--pause { display: none; }
.st-ctl--main.is-playing .st-ico--play { display: none; }
.st-ctl--main.is-playing .st-ico--pause { display: block; }

@media (max-width: 768px) {
  body.has-st-player { padding-bottom: 120px; }

  .st-player-inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      'now controls close'
      'time controls close';
    gap: 4px 16px;
    padding: 10px 16px;
  }

  .st-player-now { grid-area: now; }
  .st-player-controls { grid-area: controls; }
  .st-player-time { grid-area: time; min-width: 0; }
  .st-player-album { display: none; }
  .st-player-vol { display: none; }
  .st-player-close { grid-area: close; }
}