/**
 * Stranger Things Theme
 * Красные неоновые огни, тёмная атмосфера Изнанки
 */

/* ============================================================================
   Google Font — Rubik Glitch (похож на ITC Benguiat)
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Rubik+Glitch&display=swap');

/* ============================================================================
   CSS Variables Override
   ============================================================================ */
[data-theme="stranger-things"] {
  /* Цвета */
  --bg-primary: #0a0808;
  --bg-secondary: #1a0a0a;
  --text-primary: #f0e6e6;
  --text-secondary: #8a7a7a;
  --accent: #e50914;
  --accent-hover: #ff1a1a;
  --success: #4ecca3;
  --error: #e50914;
  --border: #3a1a1a;

  /* Фон с градиентом */
  background:
    radial-gradient(ellipse at bottom, #1a0a18 0%, #0a0808 50%, #050505 100%);
  background-attachment: fixed;
}

/* ============================================================================
   Заголовки — Неоновое свечение (умеренное)
   ============================================================================ */
[data-theme="stranger-things"] h1 {
  font-family: 'Rubik Glitch', system-ui, sans-serif;
  color: #fff;
  text-shadow:
    0 0 10px #e50914,
    0 0 30px rgba(229, 9, 20, 0.5);
  letter-spacing: 0.05em;
  animation: flicker 4s infinite;
}

/* Текст вопросов — белый с лёгким свечением */
[data-theme="stranger-things"] h2,
[data-theme="stranger-things"] #question-text,
[data-theme="stranger-things"] #answer-question-text {
  color: #fff;
  text-shadow: 0 0 15px rgba(229, 9, 20, 0.4);
}

/* Эффект мерцания как неоновые лампы */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.8; }
  94% { opacity: 1; }
  96% { opacity: 0.9; }
  97% { opacity: 1; }
}

/* ============================================================================
   Варианты ответов — Неоновые кнопки
   ============================================================================ */
[data-theme="stranger-things"] .option {
  background: rgba(229, 9, 20, 0.05);
  border: 2px solid #3a1a1a;
  box-shadow:
    inset 0 0 20px rgba(229, 9, 20, 0.05),
    0 0 5px rgba(229, 9, 20, 0.1);
  transition: all 0.3s ease;
}

[data-theme="stranger-things"] .option:hover {
  border-color: #e50914;
  box-shadow:
    inset 0 0 30px rgba(229, 9, 20, 0.1),
    0 0 15px rgba(229, 9, 20, 0.3);
}

[data-theme="stranger-things"] .option .option-letter {
  background: #e50914;
  box-shadow: 0 0 10px #e50914;
}

[data-theme="stranger-things"] .option.correct {
  background: rgba(46, 204, 113, 0.2);
  border-color: #2ecc71;
  box-shadow:
    inset 0 0 30px rgba(46, 204, 113, 0.1),
    0 0 20px rgba(46, 204, 113, 0.4);
}

[data-theme="stranger-things"] .option.wrong {
  background: rgba(229, 9, 20, 0.2);
  border-color: #e50914;
}

/* ============================================================================
   Таймер — Пульсирующий красный
   ============================================================================ */
[data-theme="stranger-things"] .timer {
  color: #ff4444;
  text-shadow: 0 0 8px rgba(229, 9, 20, 0.5);
}

[data-theme="stranger-things"] .timer.danger {
  animation: pulse-glow 0.5s infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    text-shadow: 0 0 10px #e50914, 0 0 20px #e50914;
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 20px #e50914, 0 0 40px #e50914, 0 0 60px #e50914;
    transform: scale(1.1);
  }
}

/* ============================================================================
   Лидерборд и результаты
   ============================================================================ */
[data-theme="stranger-things"] .leaderboard-row,
[data-theme="stranger-things"] .score-row {
  background: rgba(229, 9, 20, 0.05);
  border: 1px solid #3a1a1a;
}

[data-theme="stranger-things"] .leaderboard-row.first,
[data-theme="stranger-things"] .score-row.first {
  background: linear-gradient(135deg, rgba(229, 9, 20, 0.2), rgba(255, 50, 50, 0.1));
  border: 2px solid #e50914;
  box-shadow: 0 0 20px rgba(229, 9, 20, 0.3);
}

[data-theme="stranger-things"] .leaderboard-points,
[data-theme="stranger-things"] .score-points {
  color: #ff4444;
  text-shadow: none;
}

/* ============================================================================
   Экран раунда
   ============================================================================ */
[data-theme="stranger-things"] .round-number {
  color: #e50914;
  text-shadow: 0 0 8px rgba(229, 9, 20, 0.6);
  letter-spacing: 5px;
}

[data-theme="stranger-things"] #round-name {
  font-family: 'Rubik Glitch', system-ui, sans-serif;
  color: #fff;
  text-shadow: 0 0 15px rgba(229, 9, 20, 0.5);
}

/* ============================================================================
   QR-код и лобби
   ============================================================================ */
[data-theme="stranger-things"] .room-code strong {
  color: #ff4444;
  text-shadow: 0 0 8px rgba(229, 9, 20, 0.5);
}

[data-theme="stranger-things"] #qrcode {
  box-shadow: 0 0 30px rgba(229, 9, 20, 0.3);
}

/* ============================================================================
   Плавающие частицы (споры Изнанки)
   Принцип: очень медленно, еле заметно, только вверх — как фоновый шум
   ============================================================================ */

/* Слой 1 — Мелкие споры */
[data-theme="stranger-things"] #app::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 15px 25px, rgba(255, 255, 255, 0.25), transparent),
    radial-gradient(1px 1px at 55px 85px, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1px 1px at 95px 45px, rgba(255, 255, 255, 0.25), transparent),
    radial-gradient(1px 1px at 135px 125px, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1px 1px at 175px 65px, rgba(255, 255, 255, 0.25), transparent),
    radial-gradient(1.5px 1.5px at 35px 145px, rgba(255, 255, 255, 0.18), transparent),
    radial-gradient(1.5px 1.5px at 75px 15px, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1.5px 1.5px at 115px 105px, rgba(255, 255, 255, 0.18), transparent),
    radial-gradient(1.5px 1.5px at 155px 175px, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1px 1px at 25px 75px, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1px 1px at 85px 155px, rgba(255, 255, 255, 0.25), transparent),
    radial-gradient(1px 1px at 145px 35px, rgba(255, 255, 255, 0.22), transparent);
  background-size: 200px 200px;
  animation: floatUp 60s linear infinite;
  opacity: 0.8;
}

/* Слой 2 — Крупные споры (медленнее, бледнее) */
[data-theme="stranger-things"] #app::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(2px 2px at 40px 60px, rgba(255, 220, 220, 0.12), transparent),
    radial-gradient(2.5px 2.5px at 120px 160px, rgba(255, 220, 220, 0.1), transparent),
    radial-gradient(2px 2px at 200px 80px, rgba(255, 220, 220, 0.12), transparent),
    radial-gradient(3px 3px at 80px 220px, rgba(255, 200, 200, 0.08), transparent),
    radial-gradient(2.5px 2.5px at 160px 40px, rgba(255, 220, 220, 0.1), transparent),
    radial-gradient(2px 2px at 240px 140px, rgba(255, 220, 220, 0.12), transparent);
  background-size: 280px 280px;
  animation: floatUp 90s linear infinite;
  opacity: 0.6;
}

/* Простая анимация — только вверх, равномерно */
@keyframes floatUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

/* Убеждаемся что контент выше частиц */
[data-theme="stranger-things"] #app > * {
  position: relative;
  z-index: 1;
}

/* ============================================================================
   Контроллер (телефон) — Специфичные стили
   ============================================================================ */
[data-theme="stranger-things"] .game-option {
  background: rgba(229, 9, 20, 0.1);
  border: 2px solid #3a1a1a;
  color: var(--text-primary);
}

[data-theme="stranger-things"] .game-option:active {
  background: rgba(229, 9, 20, 0.3);
  border-color: #e50914;
}

[data-theme="stranger-things"] .game-option.selected {
  background: rgba(229, 9, 20, 0.3);
  border-color: #e50914;
  box-shadow: 0 0 15px rgba(229, 9, 20, 0.5);
}

[data-theme="stranger-things"] .game-timer {
  color: #ff4444;
  text-shadow: 0 0 8px rgba(229, 9, 20, 0.5);
}

/* ============================================================================
   Экран ожидания
   ============================================================================ */
[data-theme="stranger-things"] .waiting-icon {
  text-shadow: 0 0 20px rgba(229, 9, 20, 0.5);
}

/* ============================================================================
   Статус подключения
   ============================================================================ */
[data-theme="stranger-things"] #status {
  background: rgba(229, 9, 20, 0.1);
  border: 1px solid #3a1a1a;
}