/* ============================================
   6th Sense — Тёмная тема «Память звука»
   Мудборд Даяны Гофман
   Подключается после style.css
   Активируется через .theme-dark
   ============================================ */

/* Шрифты из мудборда */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

/* === Палитра ===
   #121212  — графитовый чёрный (основной фон)
   #F1ECE6  — тёплый молочный (текст, акценты)
   #4A1E24  — глубокий бордовый (акцент, кнопки)
   #2E3A34  — холодный серо-зелёный (вторичный)
   ============================================ */

/* --- 1. Body: фон, текст, шрифт --- */
.theme-dark,
.theme-dark body {
  background: #121212;
  color: #F1ECE6;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- 2. Заголовки: Cormorant Garamond, увеличенные размеры --- */
.theme-dark .title,
.theme-dark .modal-title,
.theme-dark .modal-pane-title,
.theme-dark .modal-success-title,
.theme-dark .round-label,
.theme-dark .question,
.theme-dark .comp-title,
.theme-dark .fighter-name,
.theme-dark .player-name,
.theme-dark .rules-title,
.theme-dark .breakdown-title,
.theme-dark .result-text,
.theme-dark .final-verdict,
.theme-dark .final-numbers,
.theme-dark .profile-level,
.theme-dark .program-title,
.theme-dark .msg,
.theme-dark .msg-keynote,
.theme-dark .msg-highlight,
.theme-dark .top-title {
  font-family: 'Cormorant Garamond', serif;
}

.theme-dark .title {
  font-size: clamp(46px, 11vw, 78px);
  font-weight: 700;
  letter-spacing: 4px;
  color: #F1ECE6;
}

.theme-dark .subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: rgba(241, 236, 230, 0.55);
}

.theme-dark .modal-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #F1ECE6;
}

.theme-dark .round-label {
  font-size: clamp(38px, 9vw, 60px);
  font-weight: 700;
  color: #F1ECE6;
}

.theme-dark .question {
  font-size: clamp(24px, 5.5vw, 32px);
  font-weight: 600;
  color: #F1ECE6;
}

/* --- 3. Фоновый оверлей: более глубокий градиент --- */
.theme-dark .bg-overlay {
  background: linear-gradient(
    180deg,
    rgba(18, 18, 18, 0.3) 0%,
    rgba(18, 18, 18, 0.6) 30%,
    rgba(18, 18, 18, 0.9) 60%,
    rgba(18, 18, 18, 0.98) 100%
  );
}

.theme-dark .bg-img {
  opacity: 0.12;
}

/* --- 4. CTA кнопка: бордовый, элегантная --- */
.theme-dark .cta {
  background: #4A1E24;
  color: #F1ECE6;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 3px;
  border: 1px solid rgba(241, 236, 230, 0.08);
  transition: all 0.4s ease;
}

.theme-dark .cta::before {
  background: linear-gradient(90deg, transparent, rgba(241, 236, 230, 0.06), transparent);
}

.theme-dark .cta:hover {
  background: #5c2730;
  box-shadow: 0 8px 32px rgba(74, 30, 36, 0.4);
}

.theme-dark .cta-disabled {
  opacity: 0.35;
}

.theme-dark .cta-primary {
  background: #4A1E24;
  color: #F1ECE6;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  letter-spacing: 3px;
  border: 1px solid rgba(241, 236, 230, 0.06);
}

.theme-dark .cta-primary:hover {
  background: #5c2730;
  box-shadow: 0 8px 32px rgba(74, 30, 36, 0.4);
}

.theme-dark .cta-secondary {
  border-color: rgba(241, 236, 230, 0.12);
  color: #F1ECE6;
  font-family: 'Cormorant Garamond', serif;
}

.theme-dark .cta-secondary:hover {
  border-color: rgba(241, 236, 230, 0.3);
  background: rgba(241, 236, 230, 0.04);
}

/* --- 5. Title accent --- */
.theme-dark .title-accent {
  color: #4A1E24;
}

.theme-dark .top-title span {
  color: #4A1E24;
}

/* --- 6. Модалки: тёмно-серый фон, тонкая граница --- */
.theme-dark .modal-overlay {
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(12px);
}

.theme-dark .modal {
  background: #1a1a1a;
  border: 1px solid rgba(241, 236, 230, 0.08);
  box-shadow: none;
}

.theme-dark .modal-rule {
  background: #4A1E24;
}

.theme-dark .modal-close {
  color: rgba(241, 236, 230, 0.2);
}

.theme-dark .modal-close:hover {
  color: #F1ECE6;
}

.theme-dark .modal-error {
  color: #4A1E24;
}

.theme-dark .modal-error.success-msg {
  color: #F1ECE6;
}

.theme-dark .modal-link {
  color: rgba(241, 236, 230, 0.35);
}

.theme-dark .modal-link:hover {
  color: #F1ECE6;
}

.theme-dark .modal-success-text {
  color: rgba(241, 236, 230, 0.55);
}

/* Табы модалки */
.theme-dark .modal-tab {
  border-bottom-color: rgba(241, 236, 230, 0.06);
  color: rgba(241, 236, 230, 0.35);
  font-family: 'Inter', sans-serif;
}

.theme-dark .modal-tab:hover {
  color: rgba(241, 236, 230, 0.6);
}

.theme-dark .modal-tab.active {
  color: #F1ECE6;
  border-bottom-color: #4A1E24;
}

/* --- 7. Input поля: тёмный фон, молочная граница --- */
.theme-dark .modal-form input[type="text"],
.theme-dark .modal-form input[type="email"],
.theme-dark .modal-form input[type="password"] {
  background: transparent;
  border-bottom: 1px solid rgba(241, 236, 230, 0.12);
  color: #F1ECE6;
  font-family: 'Inter', sans-serif;
}

.theme-dark .modal-form input::placeholder {
  color: rgba(241, 236, 230, 0.25);
}

.theme-dark .modal-form input:focus {
  border-bottom-color: #4A1E24;
}

.theme-dark .modal-form input[type="password"]::placeholder {
  color: rgba(241, 236, 230, 0.25);
}

.theme-dark .modal-form input[type="password"]:focus {
  border-bottom-color: #4A1E24;
}

.theme-dark .modal-submit {
  background: #4A1E24;
  color: #F1ECE6;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  letter-spacing: 3px;
}

.theme-dark .modal-submit:hover {
  background: #5c2730;
}

/* Чекбокс */
.theme-dark .checkbox-row input[type="checkbox"] {
  border-color: rgba(241, 236, 230, 0.2);
}

.theme-dark .checkbox-row input[type="checkbox"]:checked {
  background: #4A1E24;
  border-color: #4A1E24;
}

.theme-dark .checkbox-row label {
  color: rgba(241, 236, 230, 0.4);
}

.theme-dark .checkbox-row label a {
  color: rgba(241, 236, 230, 0.6);
}

.theme-dark .checkbox-row label a:hover {
  color: #F1ECE6;
}

/* --- 8. Emotion кнопки: тёмный с молочной границей --- */
.theme-dark .emotion-btn {
  background: transparent;
  border: 1px solid rgba(241, 236, 230, 0.1);
  color: #F1ECE6;
  font-family: 'Inter', sans-serif;
  border-radius: 2px;
}

.theme-dark .emotion-btn:hover {
  border-color: rgba(241, 236, 230, 0.25);
  background: rgba(241, 236, 230, 0.03);
}

.theme-dark .emotion-btn.selected {
  border-color: #4A1E24;
  background: rgba(74, 30, 36, 0.2);
  box-shadow: 0 0 20px rgba(74, 30, 36, 0.15);
}

/* --- 9. Аудио-плеер: тёмный стиль --- */
.theme-dark .audio-player {
  /* контейнер */
}

.theme-dark .play-btn {
  border: 1px solid rgba(74, 30, 36, 0.6);
  color: #F1ECE6;
  background: transparent;
}

.theme-dark .play-btn:hover {
  background: rgba(74, 30, 36, 0.2);
}

.theme-dark .progress-bar {
  background: rgba(241, 236, 230, 0.06);
}

.theme-dark .progress-fill {
  background: #4A1E24;
}

.theme-dark .time-display {
  color: rgba(241, 236, 230, 0.3);
  font-family: 'Inter', sans-serif;
}

/* --- 10. Breakdown: тёмный --- */
.theme-dark .breakdown-title {
  color: #F1ECE6;
  font-weight: 600;
}

.theme-dark .breakdown-label {
  color: rgba(241, 236, 230, 0.5);
}

.theme-dark .breakdown-label.hl {
  color: #F1ECE6;
}

.theme-dark .breakdown-bar-bg {
  background: rgba(241, 236, 230, 0.04);
}

.theme-dark .breakdown-bar {
  background: rgba(241, 236, 230, 0.1);
}

.theme-dark .breakdown-bar.hl {
  background: #4A1E24;
}

.theme-dark .breakdown-val {
  color: rgba(241, 236, 230, 0.4);
}

.theme-dark .breakdown-val.hl {
  color: #F1ECE6;
}

/* --- 11. Все карточки: без теней, тонкие границы --- */
.theme-dark .modal,
.theme-dark .hyp-c-card,
.theme-dark .result-banner {
  box-shadow: none;
}

/* --- 12. Program-day: тёмный с бордовым акцентом --- */
.theme-dark .program-day {
  color: rgba(241, 236, 230, 0.6);
  border-bottom: 1px solid rgba(241, 236, 230, 0.05);
  font-family: 'Inter', sans-serif;
}

.theme-dark .program-day.active {
  color: #F1ECE6;
  background: rgba(74, 30, 36, 0.12);
  border-left: 3px solid #4A1E24;
}

.theme-dark .program-day.locked {
  color: rgba(241, 236, 230, 0.2);
}

.theme-dark .program-title {
  color: #F1ECE6;
  font-weight: 600;
}

/* --- 13. Hyp-C карточка: тёмный с молочными акцентами --- */
.theme-dark .hyp-c-card {
  background: rgba(241, 236, 230, 0.02);
  border: 1px solid rgba(241, 236, 230, 0.06);
  border-radius: 8px;
}

.theme-dark .hyp-c-row {
  border-bottom-color: rgba(241, 236, 230, 0.05);
}

.theme-dark .hyp-c-label {
  color: rgba(241, 236, 230, 0.4);
  font-family: 'Inter', sans-serif;
}

.theme-dark .hyp-c-value {
  color: #F1ECE6;
}

.theme-dark .hyp-c-value.match {
  color: #2E3A34;
}

.theme-dark .hyp-c-value.miss {
  color: #4A1E24;
}

.theme-dark .hyp-c-why {
  border-top-color: rgba(241, 236, 230, 0.06);
}

.theme-dark .hyp-c-list-item {
  border-bottom: 1px solid rgba(241, 236, 230, 0.05);
}

.theme-dark .hyp-c-list-item:hover {
  background: rgba(241, 236, 230, 0.02);
}

.theme-dark .hyp-c-list-item.miss {
  border-left-color: #4A1E24;
}

.theme-dark .hyp-c-list-item.match {
  border-left-color: #2E3A34;
}

.theme-dark .hyp-c-list-num {
  background: rgba(241, 236, 230, 0.05);
  color: rgba(241, 236, 230, 0.5);
}

.theme-dark .hyp-c-list-comp {
  color: #F1ECE6;
}

.theme-dark .hyp-c-list-answer {
  color: rgba(241, 236, 230, 0.4);
}

.theme-dark .hyp-c-list-answer strong {
  color: rgba(241, 236, 230, 0.7);
}

/* --- 14. Profile bar: бордовый градиент --- */
.theme-dark .profile-bar {
  background: rgba(241, 236, 230, 0.05);
}

.theme-dark .profile-bar-fill {
  background: linear-gradient(90deg, #4A1E24, #F1ECE6);
}

.theme-dark .profile-level {
  color: #F1ECE6;
}

.theme-dark .profile-level span {
  color: #4A1E24;
}

.theme-dark .profile-section-title {
  color: rgba(241, 236, 230, 0.6);
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
}

.theme-dark .profile-list {
  color: rgba(241, 236, 230, 0.65);
  font-family: 'Inter', sans-serif;
}

.theme-dark .profile-desc {
  color: rgba(241, 236, 230, 0.6);
}

/* --- 15. Золотые элементы → молочные / бордовые --- */

/* #d4af37 → #F1ECE6 (молочный) */
.theme-dark .fighter-role {
  color: rgba(241, 236, 230, 0.5);
}

.theme-dark .rules-title {
  color: #F1ECE6;
  font-weight: 600;
  font-size: 18px;
}

.theme-dark .comp-description {
  color: rgba(241, 236, 230, 0.5);
}

.theme-dark .player-choice {
  color: rgba(241, 236, 230, 0.45);
}

.theme-dark .player-photo.winner {
  border-color: #F1ECE6;
  box-shadow: 0 0 20px rgba(241, 236, 230, 0.1);
}

.theme-dark .player-score.winner {
  color: #F1ECE6;
}

.theme-dark .result-text {
  color: #F1ECE6;
}

.theme-dark .result-text.lost {
  color: #4A1E24;
}

.theme-dark .final-verdict {
  color: #F1ECE6;
}

.theme-dark .final-verdict.lost {
  color: #4A1E24;
}

.theme-dark .final-numbers {
  color: rgba(241, 236, 230, 0.45);
}

.theme-dark .msg strong {
  color: rgba(241, 236, 230, 0.8);
}

.theme-dark .msg-highlight {
  color: #F1ECE6;
}

.theme-dark .offer-text strong {
  color: #F1ECE6;
}

.theme-dark .offer-price {
  color: rgba(241, 236, 230, 0.35);
}

.theme-dark .leaderboard-link {
  color: rgba(241, 236, 230, 0.35);
}

.theme-dark .leaderboard-link:hover {
  color: #F1ECE6;
}

/* --- 16. Красные элементы → бордовые #4A1E24 --- */

/* Шаги */
.theme-dark .step-num {
  color: #4A1E24;
  border-color: rgba(74, 30, 36, 0.4);
}

.theme-dark .step {
  border-bottom-color: rgba(241, 236, 230, 0.04);
}

.theme-dark .step:first-child {
  border-top-color: rgba(241, 236, 230, 0.04);
}

.theme-dark .step-text {
  color: #F1ECE6;
}

/* Линейка-разделитель */
.theme-dark .rule {
  background: linear-gradient(90deg, transparent, rgba(74, 30, 36, 0.4), transparent);
}

/* Round badge */
.theme-dark .round-badge {
  color: #4A1E24;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}

.theme-dark .round-label span {
  color: #4A1E24;
}

/* Ромб в правилах */
.theme-dark .rule-diamond {
  background: #4A1E24;
}

.theme-dark .rule-text {
  color: #F1ECE6;
}

/* Границы сообщений */
.theme-dark .msg-keynote {
  border-top-color: rgba(74, 30, 36, 0.25);
  border-bottom-color: rgba(74, 30, 36, 0.25);
  color: #F1ECE6;
}

/* Баннер результата */
.theme-dark .result-banner.win {
  background: rgba(46, 58, 52, 0.15);
  border-color: rgba(46, 58, 52, 0.3);
  color: #2E3A34;
}

.theme-dark .result-banner.loss {
  background: rgba(74, 30, 36, 0.12);
  border-color: rgba(74, 30, 36, 0.25);
  color: #4A1E24;
}

/* Спиннер загрузки */
.theme-dark .loading-spinner {
  border-color: rgba(241, 236, 230, 0.08);
  border-top-color: #4A1E24;
}

/* Фото бойцов и игроков */
.theme-dark .fighter-photo {
  border-color: rgba(241, 236, 230, 0.08);
}

.theme-dark .player-photo {
  border-color: rgba(241, 236, 230, 0.08);
}

.theme-dark .player-name {
  color: #F1ECE6;
}

.theme-dark .player-score {
  color: #F1ECE6;
}

.theme-dark .player-score-label {
  color: rgba(241, 236, 230, 0.25);
}

.theme-dark .result-sub {
  color: rgba(241, 236, 230, 0.35);
}

/* Ссылки: админка, выход */
.theme-dark .admin-link {
  color: rgba(241, 236, 230, 0.05);
}

.theme-dark .admin-link:hover {
  color: rgba(241, 236, 230, 0.15);
}

.theme-dark .logout-link {
  color: rgba(241, 236, 230, 0.2);
}

.theme-dark .logout-link:hover {
  color: rgba(241, 236, 230, 0.5);
}

/* Подвал */
.theme-dark .footer-note {
  color: rgba(241, 236, 230, 0.15);
  font-family: 'Inter', sans-serif;
}

/* Offer box */
.theme-dark .offer-text {
  color: #F1ECE6;
}

/* Comp title */
.theme-dark .comp-title {
  color: #F1ECE6;
}

.theme-dark .comp-title em {
  color: rgba(241, 236, 230, 0.7);
}

/* Сообщения */
.theme-dark .msg {
  color: #F1ECE6;
}

.theme-dark .msg em {
  color: rgba(241, 236, 230, 0.8);
}

/* Top bar */
.theme-dark .top-title {
  color: #F1ECE6;
}

/* Fighter */
.theme-dark .fighter-name {
  color: #F1ECE6;
}

/* Swords */
.theme-dark .swords-img {
  opacity: 0.4;
}

/* === Адаптивные корректировки для тёмной темы === */
@media (max-width: 520px) {
  .theme-dark .title {
    font-size: clamp(42px, 10vw, 72px);
  }

  .theme-dark .round-label {
    font-size: clamp(34px, 8vw, 52px);
  }

  .theme-dark .question {
    font-size: clamp(20px, 5vw, 28px);
  }

  .theme-dark .modal-title {
    font-size: 22px;
  }
}

/* === Landing B (персональный лендинг) === */
.theme-dark .landing-b-title {
  color: #F1ECE6;
  font-family: 'Cormorant Garamond', serif;
}

.theme-dark .landing-b-text {
  color: rgba(241,236,230,0.65);
}

.theme-dark .landing-b-photo {
  border-color: rgba(241,236,230,0.12);
}

.theme-dark .landing-b-name {
  color: #F1ECE6;
  font-family: 'Cormorant Garamond', serif;
}

.theme-dark .landing-b-role {
  color: rgba(241,236,230,0.5);
}

.theme-dark .landing-b-how-title {
  color: #F1ECE6;
  font-family: 'Cormorant Garamond', serif;
}

.theme-dark .landing-b-overlay {
  background: linear-gradient(
    180deg,
    rgba(18,18,18,0.3) 0%,
    rgba(18,18,18,0.7) 30%,
    rgba(18,18,18,0.95) 55%,
    rgba(18,18,18,1) 100%
  );
}