.card-legacy-bg {
  background:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("/static/images/background-rpg.png") no-repeat center/cover;

  color: white;
  position: relative;

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.1);
}

.game-logo {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-variation-settings: "wdth" 400;
}
/* Настройки для ТЕМНОЙ темы (основной стиль игры) */
[data-bs-theme="dark"] .card-legacy-bg {
  background:
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("/static/images/background-rpg.png") no-repeat center/cover;
  border: 1px solid #444 !important;
  color: white;
}

/* Настройки для СВЕТЛОЙ темы (чтобы не сливалось) */
[data-bs-theme="light"] .card-legacy-bg {
  background-color: #f8f9fa; /* Светло-серый фон вместо белого */
}

/* Настройки специально для ТЕМНОЙ темы */
[data-bs-theme="dark"] .card-legacy-bg {
  /* Делаем фон карточки чуть светлее общего фона страницы */
  background-color: #fff1ef !important;

  /* Добавляем видимую рамку (серую или стальную) */
  border: 1px solid #444 !important;

  /* Добавляем мягкую тень, чтобы карточка "приподнялась" над фоном */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* Если внутри карточки есть картинка, убедитесь, что она не слишком темная */
[data-bs-theme="dark"] .card-legacy-bg {
  background:
    linear-gradient(rgba(246, 0, 0, 0.05), rgba(0, 0, 0, 0.8)),
    url("/static/images/background-rpg.png") no-repeat center/cover;
}
body {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  background-attachment: fixed;
  min-height: 100vh;
}
[data-bs-theme="light"] body {
  background: radial-gradient(circle at top, #fdfbfb 0%, #ebedee 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

[data-bs-theme="light"] .display-4 {
  color: #444;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] body {
  background: linear-gradient(180deg, #212529 0%, #111111 100%);
}

/* Настройка для ТЕМНОЙ темы */
[data-bs-theme="dark"] .bg-body-tertiary {
  background-color: #2b3035 !important; /* Светло-серый графит */
  border: 1px solid #495057 !important; /* Более выраженная рамка */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); /* Мягкая тень для объема */
}

/* Эффект при наведении, чтобы карточка "оживала" */
[data-bs-theme="dark"] .bg-body-tertiary:hover {
  background-color: #32383e !important; /* Еще чуть светлее при наведении */
  transition: 0.3s ease;
}

.terminal-window {
  max-width: 850px;
  background: #11111b; /* Темный фон терминала */
  border-radius: 10px;
  overflow: hidden;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  border: 1px solid #313244;
}

.terminal-header {
  background: #1e1e2e;
}
.dot {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
.red {
  background: #f38ba8;
}
.yellow {
  background: #f9e2af;
}
.green {
  background: #a6e3a1;
}

/* Цвет логотипа */
.arch-logo-vibrant {
  color: #1793d1; /* Официальный цвет Arch Linux */
  font-size: 14px;
  line-height: 1.1;
  filter: drop-shadow(0 0 5px rgba(23, 147, 209, 0.4));
}

/* Цвет текста */
.text-cyan {
  color: #89b4fa;
}
.key-green {
  color: #50fa7b;
  font-weight: bold;
  margin-right: 8px;
}
.info-line {
  color: #cdd6f4;
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.p-box {
  width: 30px;
  height: 15px;
  border-radius: 2px;
}
.bg-magenta {
  background: #cba6f7;
}

/* --- СТИЛИ ДЛЯ СТРАНИЦЫ OST --- */

/* СВЕТЛАЯ ТЕМА для OST */
[data-bs-theme="light"] .main-content body,
[data-bs-theme="light"] body:has(.main-content) {
  background: radial-gradient(
    circle at top,
    #ffffff 0%,
    #f1f3f5 100%
  ) !important;
  color: #212529 !important;
}

[data-bs-theme="light"] .player-bar {
  background: #ffffff !important;
  border-top: 1px solid #dee2e6 !important;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
}

[data-bs-theme="light"] .player-bar .text-white {
  color: #212529 !important; /* Название трека в плеере */
}

[data-bs-theme="light"] .track-row:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

[data-bs-theme="light"] .track-row.active {
  background-color: rgba(29, 185, 84, 0.1) !important;
  color: #1a7a3a !important; /* Чуть более темный зеленый для читаемости на белом */
}

[data-bs-theme="light"] #play-btn {
  background-color: #1db954 !important; /* Кнопка Play становится зеленой в светлой теме */
  color: white !important;
}

[data-bs-theme="light"] #play-btn svg {
  fill: white !important;
}

[data-bs-theme="light"] #prev-btn svg,
[data-bs-theme="light"] #next-btn svg,
[data-bs-theme="light"] #loop-btn svg {
  fill: #6c757d !important; /* Серые иконки управления */
}

[data-bs-theme="light"] .progress {
  background-color: #e9ecef !important;
}

/* ТЕМНАЯ ТЕМА (уточнение существующих стилей) */
[data-bs-theme="dark"] .player-bar {
  background: #181818 !important;
  border-top: 1px solid #282828 !important;
}

[data-bs-theme="dark"] .track-row:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Общие настройки контента */
.main-content {
  padding-bottom: 150px;
}

/* ПЛЕЕР-БАР: Динамические цвета */
.player-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px 0;
  z-index: 1000;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

/* Темная тема для плеера */
[data-bs-theme="dark"] .player-bar {
  background: #181818;
  border-top: 1px solid #282828;
}

/* Светлая тема для плеера */
[data-bs-theme="light"] .player-bar {
  background: #ffffff;
  border-top: 1px solid #dee2e6;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
}

/* КНОПКА PLAY/PAUSE */
#play-btn {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  padding: 0 !important;
  border: none;
  transition:
    transform 0.2s,
    background-color 0.2s;
  flex-shrink: 0;
}

/* Цвета кнопки Play в зависимости от темы */
[data-bs-theme="dark"] #play-btn {
  background-color: #ffffff;
  color: #000;
}
[data-bs-theme="light"] #play-btn {
  background-color: #1db954; /* Зеленый Spotify в светлой теме для акцента */
}
[data-bs-theme="light"] #play-btn svg {
  fill: white !important;
}

#play-btn:hover {
  transform: scale(1.05);
}

/* Управление кнопками (иконки) */
.control-buttons .btn {
  margin: 0 12px;
  display: flex;
  transition: opacity 0.2s;
  text-decoration: none;
}

[data-bs-theme="light"] .control-buttons .btn svg {
  fill: #212529 !important; /* Черные иконки в светлой теме */
}

#loop-btn.active svg {
  fill: #1db954 !important;
  opacity: 1 !important;
}

.track-row.active {
  color: #1db954 !important;
}

/* ПРОГРЕСС-БАР */
.progress {
  background-color: #4f4f4f !important;
  height: 4px !important;
  cursor: pointer;
}
[data-bs-theme="light"] .progress {
  background-color: #ced4da !important;
}
#progress-bar {
  height: 100%; /* Заполнит только 6px высоты контента */
  background-color: #1db954; /* Ваш зеленый цвет */
  transition: width 0.1s linear;
}

.album-art {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
/* Базовый стиль для строки (плавный переход) */
.track-row {
  transition: background-color 0.2s ease;
  cursor: pointer;
}

/* Состояние активного трека (универсальное) */
.track-row.active {
  background-color: rgba(
    13,
    110,
    253,
    0.15
  ) !important; /* Нежный синий с прозрачностью */
  border-left: 4px solid #0d6efd; /* Акцентная линия слева */
}

/* Если используете Bootstrap темы: */
[data-bs-theme="dark"] .track-row.active {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Эффект при наведении */
.track-row:hover:not(.active) {
  background-color: rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] .track-row:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.05);
}

#progress-container {
  height: 6px; /* Визуальная высота полоски */
  padding: 12px 100; /* Невидимая зона клика (всего станет 30px) */
  margin-top: -12px; /* Компенсируем отступ, чтобы не двигать соседние элементы */
  margin-bottom: -12px;
  cursor: pointer;
  background-clip: content-box; /* Важно: фон будет только там, где контент, а не падинги */
  background-color: rgba(255, 255, 255, 0.1); /* Цвет подложки */
  display: flex;
  align-items: center;
}

#progress-container:hover #progress-bar {
  filter: brightness(1.3);
}
#progress-container {
  touch-action: none; /* Блокирует системный скролл при перемотке */
  cursor: pointer;
  position: relative;
  padding: 20px 15 !important; /* Увеличиваем зону клика для пальца */
  margin: -20px 15 !important; /* Компенсируем отступ обратно */
  -webkit-tap-highlight-color: transparent;
}

#progress-bar {
  transition: width 0.1s linear; /* Плавность движения */
  pointer-events: none; /* Чтобы полоска не мешала клику по контейнеру */
}

.main-content {
  padding-bottom: 120px; /* Высота плеера + запас */
}

.track-row {
  border-radius: 12px; /* Скругление строки */
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.track-row:hover {
  background-color: rgba(255, 255, 255, 0.05); /* Легкая подсветка */
}

/* Нужно, чтобы ячейки таблицы не ломали скругление строки */
.track-row td:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.track-row td:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}
.border-radius-row td:first-child {
  border-top-left-radius: 0.5rem; /* аналог rounded-2 */
  border-bottom-left-radius: 0.5rem;
}

.border-radius-row td:last-child {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}