.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;
}