/* ============================================================================
   Плеер и попап — общие для всего сайта.

   Вынесены из оформления альбома, потому что теперь нужны в ДВУХ местах:
   на странице альбома и на главной (кнопка ПЛЕЙ запускает прослушивание).
   Стили альбома целиком подключать на главной нельзя: они переопределяют body —
   фон и размер шрифта, — и главная поехала бы.

   Механика (js/tracks.js + js/player.js) при этом не менялась: она уже работала.
   ========================================================================== */

/* Popup для обложек */
.popup { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; padding: 30px; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.popup.active { opacity: 1; pointer-events: auto; }
.popup img { max-width: min(92vw, 1100px); max-height: 88vh; object-fit: contain; border: 1px solid rgba(190,160,90,0.3); box-shadow: 0 0 60px rgba(0,0,0,0.7); }
.popup-close { position: absolute; top: 24px; right: 28px; background: transparent; border: 1px solid rgba(190,160,90,0.35); color: #d8b866; font-size: 26px; cursor: pointer; width: 48px; height: 48px; }
.popup-caption { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(220,220,210,0.8); font-size: 16px; letter-spacing: 0.12em; }

/* Плеер: закреплён внизу и выезжает, когда начинается воспроизведение. */
.player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: rgba(5,7,6,0.97); border-top: 1px solid rgba(190,160,90,0.25); backdrop-filter: blur(18px); transform: translateY(100%); transition: transform 0.45s ease; }
.player.active { transform: translateY(0); }
.player-inner { width: min(1200px, 94%); margin: 0 auto; padding: 16px 0 20px; }
.player-top { display: flex; align-items: center; gap: 18px; }
.player-main-button { min-width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(215,180,95,0.55); background: transparent; color: #e0bf68; cursor: pointer; font-size: 17px; }
.player-prev, .player-next { background: transparent; border: 1px solid rgba(190,160,90,0.25); color: rgba(225,220,205,0.7); cursor: pointer; padding: 10px 16px; font-size: 16px; transition: 0.25s ease; }
.player-prev:hover, .player-next:hover { border-color: rgba(215,180,100,0.7); color: #e0bf68; }
.player-track { flex: 1; min-width: 0; }
.player-name { color: #ddd0a5; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-style { margin-top: 5px; color: rgba(130,190,185,0.6); font-size: 12px; letter-spacing: 0.12em; }
.player-time { display: flex; gap: 14px; align-items: center; margin-top: 10px; color: rgba(220,220,210,0.65); font-size: 13px; }
.progress-bar { flex: 1; height: 5px; background: rgba(190,160,90,0.15); cursor: pointer; position: relative; border-radius: 3px; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #d8b866, #8ec8c0); border-radius: 3px; }
.close-player { background: transparent; border: 1px solid rgba(190,160,90,0.25); color: rgba(220,220,210,0.6); cursor: pointer; padding: 8px 14px; font-size: 16px; }

@media (max-width: 700px) {
  /* На телефоне прячем перемотку назад/вперёд: места мало, а трек переключается
     сам и кнопкой паузы. */
  .player-prev, .player-next { display: none; }
  .player-inner { padding: 12px 0 16px; }
}