/* ============================================
   TECHNO MINIMALIST DESIGN SYSTEM
   Единый технократичный стиль для игры
   ============================================ */

/* Подключение кастомного шрифта для названия игры */
/* Эпичный шрифт с поддержкой кириллицы */
@import url('https://fonts.googleapis.com/css2?family=Ruslan+Display&display=swap');

/* Улучшение четкости для Ruslan Display */
.ruslan-font {
  font-family: 'Ruslan Display', serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-smooth: always;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Эпичные заголовки */
.epic-title {
  font-family: 'Ruslan Display', serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

/* Если локальный шрифт исправлен - раскомментировать:
@font-face {
  font-family: 'Romvel';
  src: url('ofont.ru_Romvel.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
*/

/* ============================================
   ОБЩИЙ КЛАСС ДЛЯ ЗАГЛАВНЫХ ЗАГОЛОВКОВ
   Применяет шрифт Ruslan Display ко всем заглавным названиям
   ============================================ */

.epic-header {
  font-family: 'Ruslan Display', serif !important;
  font-weight: normal !important;
}

:root {
  /* Основная палитра */
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-tertiary: #1a1a25;
  --bg-panel: rgba(18, 18, 26, 0.95);
  
  /* Акцентные цвета */
  --accent-cyan: #00f0ff;
  --accent-cyan-dim: #00a0aa;
  --accent-magenta: #ff00aa;
  --accent-green: #00ff88;
  --accent-red: #ff3366;
  --accent-yellow: #ffcc00;
  --accent-orange: #ff8800;
  
  /* Цвета армий */
  --color-blue: #00aaff;
  --color-blue-dark: #0077cc;
  --color-red: #ff4466;
  --color-red-dark: #cc2244;
  --color-green: #00ff88;
  --color-green-dark: #00cc66;
  --color-yellow: #ffcc00;
  --color-yellow-dark: #cc9900;
  
  /* Текст */
  --text-primary: #e0e0e0;
  --text-secondary: #888899;
  --text-dim: #555566;
  
  /* Границы и свечение */
  --border-color: #2a2a3a;
  --border-glow: rgba(0, 240, 255, 0.3);
  --glow-cyan: 0 0 20px rgba(0, 240, 255, 0.4);
  --glow-magenta: 0 0 20px rgba(255, 0, 170, 0.4);
  
  /* Размеры */
  --unit-size: 30px;
  --border-radius: 4px;
  --border-radius-lg: 8px;
  
  /* Шрифты */
  --font-main: 'Segoe UI', -apple-system, sans-serif;
  --font-mono: 'Consolas', 'Monaco', monospace;
}

/* ============================================
   БАЗОВЫЕ СТИЛИ
   ============================================ */

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  background: var(--bg-primary);
  background-image: 
    radial-gradient(ellipse at 20% 80%, rgba(0, 240, 255, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(255, 0, 170, 0.03) 0%, transparent 50%);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

/* Контейнер на весь экран */
#responsive-container {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--bg-primary);
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

/* Внутренний контейнер - занимает весь экран */
#responsive-container > .container {
  width: 100%;
  height: 100%;
  max-width: none;
  transform: none !important;
}

/* Полноэкранные элементы в хедере */
.header-fullscreen-btn {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-cyan-dim));
  color: var(--bg-primary);
  border: 1px solid var(--accent-cyan);
  border-radius: var(--border-radius);
  padding: 8px 14px;
  font-size: 1em;
  font-family: 'Ruslan Display', serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 15px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.header-fullscreen-btn:hover {
  background: linear-gradient(135deg, var(--accent-cyan-dim), var(--accent-cyan));
  transform: translateY(-1px);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

.header-fullscreen-btn:active {
  transform: translateY(0);
}

/* Если в полноэкранном режиме */
.header-fullscreen-btn.fullscreen-active {
  background: linear-gradient(135deg, var(--accent-yellow), var(--color-yellow-dark));
  border-color: var(--accent-yellow);
  color: var(--bg-primary);
}

.header-fullscreen-btn.fullscreen-active:hover {
  background: linear-gradient(135deg, var(--color-yellow-dark), var(--accent-yellow));
  box-shadow: 0 0 15px rgba(255, 204, 0, 0.4);
}

/* Кнопки действий в хедере (домой, звук) */
.header-action-btn {
  background: transparent;
  border: 1px solid #555;
  color: white;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.7em;
  padding: 2px 4px;
  margin-left: 5px;
  line-height: 1;
  transition: all 0.2s ease;
}

.header-action-btn:hover {
  border-color: var(--accent-cyan);
  background: rgba(0, 240, 255, 0.1);
  transform: scale(1.1);
}

.header-action-btn:active {
  transform: scale(0.95);
}

.header-fullscreen-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: auto;
}

.fullscreen-info {
  color: var(--text-secondary);
  font-size: 0.9em;
}

/* Кастомный скроллбар */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-cyan-dim);
}

/* ============================================
   КОНТЕЙНЕР И LAYOUT
   ============================================ */

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============================================
   HEADER - Техно-панель статуса
   ============================================ */

header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--bg-secondary);
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-color);
  box-sizing: border-box;
  min-height: 60px;
  position: relative;
  opacity: 1; /* ИСПРАВЛЕНО: Всегда видим */
  transition: opacity 0.5s ease;
}

header::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  opacity: 0.5;
}

header .battle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 20px;
}

header .battle-stats,
header .battle-title,
header .battle-details,
header .wave-details {
  margin: 0;
  padding: 0;
  border: none;
  text-align: center;
}

header .battle-title {
  font-family: 'Ruslan Display', serif;
  font-size: 1.4em;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), var(--glow-cyan);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Стиль для описания битвы - мелкий шрифт */
#battle-description {
  font-size: 0.8em !important;
}

/* Отображение бабла в хедере */
.gold-display {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #2a2a1a, #1a1a10);
  border: 2px solid #ffd700;
  border-radius: 8px;
  padding: 4px 12px;
  margin-left: 15px;
  font-size: 1.1em;
  color: #ffd700;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
  white-space: nowrap;
  height: auto;
}

.gold-display span {
  font-family: 'Ruslan Display', serif;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.9);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1;
  display: flex;
  align-items: center;
  font-size: 1.1em;
}

header .battle-stats {
  font-family: 'Ruslan Display', serif;
  font-size: 1em;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--text-secondary);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

header .battle-details {
  font-family: 'Ruslan Display', serif;
  font-size: 0.85em;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--text-dim);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

header .wave-details {
  font-family: 'Ruslan Display', serif;
  font-size: 1em;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--accent-magenta);
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), var(--glow-magenta);
}

/* Счетчик очков захвата */
.header-conquest-score {
  background: rgba(0, 255, 136, 0.1);
  padding: 6px 14px;
  border-radius: var(--border-radius);
  border: 1px solid rgba(0, 255, 136, 0.3);
  color: var(--accent-green);
  font-family: 'Ruslan Display', serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 1em;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.conquest-icon {
  font-size: 1.1em;
}

/* Таймер */
.timer {
  font-family: 'Ruslan Display', serif;
  font-size: 1.3em;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--bg-tertiary);
  padding: 6px 16px;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  color: var(--accent-cyan);
  letter-spacing: 2px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* ============================================
   FOOTER - Минималистичный футер
   ============================================ */

footer {
  text-align: center;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  background: var(--bg-secondary);
  padding: 10px 20px;
  border-top: 1px solid var(--border-color);
  box-sizing: border-box;
  position: relative;
  opacity: 1; /* ИСПРАВЛЕНО: Всегда видим */
  transition: opacity 0.5s ease;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-magenta), transparent);
  opacity: 0.3;
}

/* ============================================
   GAME CONTAINER - Основная область
   ============================================ */

#game-container {
  display: flex;
  justify-content: space-between; /* Левая панель слева, правая справа, поле между ними */
  gap: 10px;
  flex: 1 1 auto;
  overflow: hidden;
  min-height: 0;
  max-height: 100%; /* Ограничиваем высоту */
  align-items: stretch; /* Панели растягиваются по высоте */
  padding: 10px;
  background: var(--bg-primary);
}

/* ============================================
   INFO PANEL - Левая панель управления
   ============================================ */

.info-panel {
  background: var(--bg-secondary) !important; /* Изменено с var(--bg-panel) на непрозрачный фон */
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  width: 280px;
  min-width: 280px;
  max-width: 280px; /* Фиксируем максимальную ширину */
  opacity: 1; /* ИСПРАВЛЕНО: Всегда видна на десктопе */
  pointer-events: auto; /* ИСПРАВЛЕНО: Всегда активна на десктопе */
  transition: opacity 0.5s ease;
  flex-shrink: 0;
  flex-grow: 0; /* Не растягивается */
  order: 1; /* Первый элемент */
  /* backdrop-filter: blur(10px); */ /* Убрано - делало панель полупрозрачной */
  z-index: 100 !important; /* ИСПРАВЛЕНИЕ: Высокий z-index чтобы панель была поверх всех элементов */
  transition: box-shadow 2s ease-out, border-color 2s ease-out;
}

.info-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-magenta));
  opacity: 0.7;
}

/* Миникарта */
.minicart-fixed {
  flex-shrink: 0;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  padding: 10px;
  margin: 0;
}

.minicart-fixed canvas {
  width: 100%;
  height: 150px;
  display: block;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
}

/* Панели контента */
.panel-view {
  padding: 15px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  gap: 12px;
  animation: fadeIn 0.3s ease;
  box-sizing: border-box;
}

.panel-view.hidden,
.hidden {
  display: none !important;
}

.panel-view h2 {
  margin: 0 0 10px 0;
  font-size: 1.4em;
  font-family: 'Ruslan Display', serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Анимация выезжания меню справа */
@keyframes slideInFromRight {
  from { 
    opacity: 0; 
    transform: translateX(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateX(0); 
  }
}

/* ============================================
   КНОПКИ - Техно-стиль
   ============================================ */

.control-btn {
  padding: 12px 18px;
  font-size: 1.05em;
  font-family: 'Ruslan Display', serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}

.control-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s ease;
}

.control-btn:hover::before {
  left: 100%;
}

.control-btn:hover:not(:disabled) {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
  transform: translateY(-1px);
}

.control-btn:active:not(:disabled) {
  transform: translateY(0);
}

.control-btn:disabled {
  background: var(--bg-primary);
  border-color: var(--border-color);
  color: var(--text-dim);
  cursor: not-allowed;
  opacity: 0.5;
}

.control-btn.full-width {
  width: 100%;
  flex-shrink: 0;
}

/* Кнопка старта - особый стиль */
#start-button:not(:disabled) {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 200, 100, 0.1));
  border-color: var(--accent-green);
  color: var(--accent-green);
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
  animation: pulse-glow 2s ease-in-out infinite;
}

#start-button:not(:disabled):hover {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.3), rgba(0, 200, 100, 0.2));
  box-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 136, 0.3); }
  50% { box-shadow: 0 0 35px rgba(0, 255, 136, 0.6); }
}

/* Кнопки выбора битвы */
.battle-select-btn {
  padding: 6px 12px;
  font-size: 0.85em;
  font-weight: bold;
  color: var(--bg-primary);
  background: var(--accent-yellow);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.2s;
  min-width: 36px;
}

.battle-select-btn:hover {
  background: var(--accent-orange);
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(255, 204, 0, 0.5);
}

/* Разделитель */
.panel-divider {
  border: 0;
  border-top: 1px solid var(--border-color);
  width: 100%;
  margin: 10px 0;
  opacity: 0.5;
}

/* ============================================
   ИНПУТЫ - Техно-стиль
   ============================================ */

input[type="text"] {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 10px 12px;
  border-radius: var(--border-radius);
  width: 100%;
  font-family: var(--font-main);
  transition: all 0.2s ease;
}

input[type="text"]:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

input[type="text"]::placeholder {
  color: var(--text-dim);
}

/* ============================================
   ИНФОРМАЦИОННЫЕ БЛОКИ
   ============================================ */

.tournament-info,
.army-stats,
.stats-box,
.deployment-info-box {
  padding: 10px;
  border-radius: var(--border-radius);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

.army-stats.blue {
  border-left: 3px solid var(--color-blue);
  background: linear-gradient(90deg, rgba(0, 170, 255, 0.1), transparent);
}

.army-stats.red {
  border-left: 3px solid var(--color-red);
  background: linear-gradient(90deg, rgba(255, 68, 102, 0.1), transparent);
}

.army-stats.green {
  border-left: 3px solid var(--color-green);
  background: linear-gradient(90deg, rgba(0, 255, 136, 0.1), transparent);
}

.army-stats.black {
  border-left: 3px solid #666;
  background: linear-gradient(90deg, rgba(100, 100, 100, 0.1), transparent);
}

.army-stats h3 {
  margin: 0 0 8px 0;
  font-size: 1.1em;
  font-family: 'Ruslan Display', serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: space-between;
  color: var(--text-primary);
}

.army-stats p {
  margin: 3px 0;
  font-size: 0.85em;
  color: var(--text-secondary);
}

.deployment-info-box {
  border: 1px solid rgba(255, 204, 0, 0.3);
  background: linear-gradient(135deg, rgba(255, 204, 0, 0.05), transparent);
  display: none;
}

/* ============================================
   ПАНЕЛЬ БИТВЫ
   ============================================ */

#view-battle {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 15px;
  gap: 15px;
  box-sizing: border-box;
  overflow: hidden;
}

#view-battle.hidden { display: none; }

#view-battle .minicart-container,
#view-deployment .minicart-container {
  flex-shrink: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 8px;
}

#view-battle .minicart-container canvas,
#view-deployment .minicart-container canvas {
  width: 100%;
  height: 140px;
  display: block;
  border-radius: var(--border-radius);
  background: var(--bg-primary);
}

#view-battle .battle-controls {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#view-battle .deployment-message {
  background: rgba(0, 255, 136, 0.1);
  padding: 10px;
  border-radius: var(--border-radius);
  text-align: center;
  font-weight: bold;
  color: var(--accent-green);
  border: 1px solid rgba(0, 255, 136, 0.3);
}

/* ============================================
   ЛОГ БИТВЫ
   ============================================ */

#view-battle .battle-log-section {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: linear-gradient(135deg, rgba(20, 30, 50, 0.95), rgba(15, 25, 45, 0.9));
  border-radius: var(--border-radius);
  border: 1px solid rgba(100, 176, 255, 0.15);
  overflow: hidden;
}

#view-battle .log-title {
  flex-shrink: 0;
  margin: 0;
  padding: 10px 12px;
  font-size: 1em;
  font-family: 'Ruslan Display', serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

#view-battle .battle-log-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px;
  font-size: 0.75em;
  font-family: var(--font-mono);
  display: flex;
  flex-direction: column-reverse;
  min-height: 0;
  color: var(--text-secondary);
}

.log-container {
  background: var(--bg-primary);
  border-radius: var(--border-radius);
  padding: 10px;
  display: flex !important;
  flex-direction: column;
  height: 200px;
  max-height: 200px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  margin-top: 10px;
  flex-shrink: 0;
}

.log-container h3 {
  margin: 0 0 8px 0;
  font-size: 0.85em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#battle-log,
#round-end-log {
  overflow-y: auto;
  flex: 1 1 auto;
  font-size: 0.75em;
  font-family: var(--font-mono);
  display: flex !important;
  flex-direction: column-reverse;
  min-height: 0;
  width: 100%;
}

.log-entry {
  border-bottom: 1px solid rgba(100, 176, 255, 0.08);
  padding: 5px 6px;
  color: var(--text-secondary);
  font-size: 0.9em;
  border-radius: 3px;
  transition: background 0.15s;
}
.log-entry:hover {
  background: rgba(0, 240, 255, 0.05);
}

#battle-log.force-visible {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ============================================
   ИГРОВОЕ ПОЛЕ
   ============================================ */

.game-field {
  /* ФОНОВАЯ ТРАВА - скрыта при загрузке, startCampaign() восстановит */
  background-color: #000;
  background-image: none;
  background-size: 400px 400px;
  background-repeat: repeat;
  background-position: 0 0;
  background-attachment: local;
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  flex-shrink: 1; /* ИЗМЕНЕНО: позволяем полю сжиматься для мобильных */
  order: 2;
  min-width: 200px; /* ИЗМЕНЕНО: уменьшили минимальную ширину для мобильных */
  min-height: 300px;
  max-width: none;
  max-height: 100%;
  margin: 0;
  cursor: crosshair;
  box-sizing: border-box;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  perspective: 2000px;
  perspective-origin: 50% 50%;
  transition: box-shadow 2s ease-out, border-color 2s ease-out, flex 0.3s ease; /* Добавили transition для flex */
}

/* Подсветка центральной панели (финальная в каскаде) */
.game-field.flash-center {
  box-shadow: 
    0 0 50px rgba(0, 240, 255, 0.35),
    0 0 100px rgba(0, 240, 255, 0.15),
    inset 0 0 40px rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.5);
}

/* Черный фон за пределами карты */
.game-field::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(0, 0, 0);
  pointer-events: none;
  z-index: 0;
}

.game-field::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid var(--accent-cyan);
  border-radius: var(--border-radius-lg);
  opacity: 0.2;
  pointer-events: none;
  z-index: 1000;
}

.game-field-inner {
  position: absolute;
  /* Размеры устанавливаются динамически через JavaScript в updateFieldSize() */
  /* width и height НЕ указываются здесь - только через JS! */
  top: 0;
  left: 0;
  transform-origin: center bottom;
  transform-style: preserve-3d;
  will-change: transform;
  /* ОСНОВНОЕ ИГРОВОЕ ПОЛЕ - трава с замощением */
  background-color: #2a3a2a;
  background-image: url('grass.jpg');
  background-size: 400px 400px;
  background-repeat: repeat;
  background-position: 0 0;
  z-index: 1;
  /* Наклон камеры для перспективы (переопределяется в JS) */
  transform: rotateX(25deg) translateZ(-200px);
  /* Затемнение по краям */
  box-shadow: inset 0 0 50px 50px rgb(0, 0, 0);
  border: 2px dashed rgba(0, 255, 0, 0.3);
  transition: box-shadow 1s ease-out, border-color 1s ease-out;
}

/* Анимация пульсации рамки - удалена */

/* УДАЛЕНО: Трава теперь всегда показывается в .game-field-inner */

.divider {
  position: absolute;
  top: 1200px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-magenta), transparent);
  z-index: 2;
  opacity: 0.7;
  box-shadow: 0 0 10px rgba(255, 0, 170, 0.6);
  animation: pulse-divider 2s ease-in-out infinite;
}

@keyframes pulse-divider {
  0%, 100% { 
    opacity: 0.7;
    box-shadow: 0 0 10px rgba(255, 0, 170, 0.6);
  }
  50% { 
    opacity: 0.9;
    box-shadow: 0 0 20px rgba(255, 0, 170, 0.8);
  }
}

.game-field.deployment-mode {
  cursor: default;
}

/* ============================================
   ПРАВАЯ ПАНЕЛЬ - Скорборд
   ============================================ */

#right-panel {
  background: var(--bg-secondary) !important; /* ИСПРАВЛЕНО: Непрозрачный фон */
  padding: 10px;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color);
  display: flex; /* Убран !important - управление через классы mobile-device/desktop-device */
  flex-direction: column;
  overflow: hidden;
  width: 350px;
  min-width: 350px;
  max-width: 350px; /* Фиксируем максимальную ширину */
  opacity: 1; /* ИСПРАВЛЕНО: Всегда видна на десктопе */
  pointer-events: auto; /* ИСПРАВЛЕНО: Всегда активна на десктопе */
  transition: opacity 0.5s ease;
  flex-shrink: 0;
  flex-grow: 0; /* Не растягивается */
  order: 3; /* Третий элемент - справа */
  /* backdrop-filter: blur(10px); */ /* Убрано - делало панель полупрозрачной */
  position: relative;
  transition: box-shadow 2s ease-out, border-color 2s ease-out;
}

#right-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-magenta), var(--accent-cyan));
  opacity: 0.7;
}

/* Мобильная версия правой панели */
@media (max-width: 768px) {
  #right-panel {
    position: fixed !important;
    right: -100vw !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    z-index: 9999 !important;
    transition: right 0.3s ease !important;
    order: unset !important;
  }
  
  #right-panel.mobile-visible {
    right: 0 !important;
  }
  
  /* Принудительный режим для тестирования на десктопе */
  #right-panel.force-mobile-panel {
    position: fixed !important;
    right: -100vw !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    z-index: 9999 !important;
    transition: right 0.3s ease !important;
  }
  
  #right-panel.force-mobile-panel.mobile-visible {
    right: 0 !important;
  }
}

#right-panel h3 {
  margin: 0 0 15px 0;
  padding-bottom: 12px;
  font-family: 'Ruslan Display', serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  border-bottom: 1px solid var(--border-color);
  color: var(--accent-cyan);
  font-size: 1.4em;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#scoreboard-content {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  padding-right: 5px;
  background: transparent !important; /* ИСПРАВЛЕНО: Прозрачный фон для контента */
  opacity: 1 !important; /* ИСПРАВЛЕНО: Полная непрозрачность */
}

#scoreboard-content .score-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8em;
  border: 1px solid rgba(74, 144, 217, 0.35);
  padding: 10px 8px;
  transition: all 0.3s;
  background: linear-gradient(135deg, rgba(10, 15, 30, 0.95), rgba(13, 27, 42, 0.92));
  margin-bottom: 4px;
  border-radius: 8px;
  opacity: 1 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}

#scoreboard-content .score-entry::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74, 144, 217, 0.3), transparent);
}

#scoreboard-content .score-entry:hover {
  background: linear-gradient(135deg, rgba(15, 25, 50, 0.95), rgba(20, 35, 55, 0.92));
  border-color: rgba(74, 144, 217, 0.6);
  box-shadow: 0 0 12px rgba(74, 144, 217, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateX(2px);
}

/* Командир в списке — стиль в духе игры */
.commander-sticky-container .score-entry {
  border: 1px solid rgba(170, 102, 255, 0.4) !important;
  box-shadow: 0 0 10px rgba(170, 102, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  background: linear-gradient(135deg, rgba(30, 15, 50, 0.95), rgba(20, 8, 35, 0.92)) !important;
  margin-bottom: 0;
}
.commander-sticky-container .score-entry:hover {
  border-color: rgba(170, 102, 255, 0.6) !important;
  background: linear-gradient(135deg, rgba(40, 20, 65, 0.95), rgba(28, 12, 48, 0.92)) !important;
  box-shadow: 0 0 15px rgba(170, 102, 255, 0.25) !important;
}

#scoreboard-content .score-entry .rank {
  color: var(--text-dim);
  width: 25px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-weight: bold;
}

#scoreboard-content .score-entry .name-section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin-right: 10px;
}

#scoreboard-content .score-entry .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.05em;
  font-family: 'Ruslan Display', serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-shadow: 0 0 6px rgba(100, 176, 255, 0.4), 1px 1px 2px rgba(0, 0, 0, 0.9);
}

/* Информационные блоки в правой панели */
#scoreboard-content > div[style*="background"] {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 12px !important;
  margin-bottom: 10px !important;
}

#scoreboard-content > div[style*="background"] > div:first-child {
  font-size: 0.75em !important;
  margin-bottom: 8px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================
   ЮНИТЫ - Визуал
   ============================================ */

.deployed-unit,
.unit {
  position: absolute;
  z-index: 10;
  transform-origin: center center;
  /* Размер юнита = UNIT_SIZE (40px), определяется в GameState.js */
  width: 40px;
  height: 40px;
  pointer-events: all; /* ИСПРАВЛЕНИЕ: Юнит должен ловить события мыши */
  cursor: grab; /* ИСПРАВЛЕНИЕ: Курсор для перетаскивания */
}

.unit:active {
  cursor: grabbing;
  z-index: 100 !important;
}

.unit:hover {
  z-index: 50;
}

/* Овальная тень для викингов */
.deployed-unit::before,
.unit::before {
  content: '';
  position: absolute;
  width: 32px;
  height: 12px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.35) 50%, transparent 100%);
  border-radius: 50%;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%) translateX(3px) translateY(-2px);
  z-index: -1;
  pointer-events: none;
  transition: background 0.3s ease, opacity 0.5s ease;
}

/* НОВОЕ: Тень командира — темнее, выше, больше */
.unit.commander::before {
  width: 42px;
  height: 16px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 50%, transparent 100%);
  bottom: 0px;
  transform: translateX(-50%) translateX(3px) translateY(-1px);
}

/* НОВОЕ: Красная тень смерти - полностью красная без прозрачности */
.unit.death-shadow::before {
  background: radial-gradient(ellipse, rgb(255, 0, 0) 0%, rgb(200, 0, 0) 50%, rgb(150, 0, 0) 100%);
}

.deployed-unit {
  cursor: grab;
  pointer-events: all;
}

.deployed-unit:active {
  cursor: grabbing;
  z-index: 100 !important;
}

.deployed-unit:hover {
  z-index: 50;
}

/* Контейнер для двух слоёв спрайтов (crossfade эффект) */
.unit-sprite-container {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.unit-sprite {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  /* Спрайт-лист 720x480, кадры 60x60, отображаем в 46x46
     SPRITE_BG_SIZE рассчитывается динамически в GameState.js */
  background-size: 240px 240px; /* Будет переопределено в JS */
  image-rendering: pixelated;
  pointer-events: none;
  
  /* НОВОЕ: Плавный переход управляется через JS в updateSprite() */
  /* transition устанавливается динамически для плавности кадров */
}

/* Слои для crossfade эффекта */
.unit-sprite-layer1,
.unit-sprite-layer2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}

.unit-sprite-layer1 {
  opacity: 1;
  z-index: 1;
}

.unit-sprite-layer2 {
  opacity: 0;
  z-index: 2;
}

/* Спрайты армий */
.unit.blue .unit-sprite,
.deployed-unit[data-army="blue"] .unit-sprite {
  background-image: url('blue.png');
}

.unit.red .unit-sprite,
.deployed-unit[data-army="red"] .unit-sprite {
  background-image: url('red.png');
}

.unit.green .unit-sprite,
.deployed-unit[data-army="green"] .unit-sprite {
  background-image: url('green.png');
}

.unit.black .unit-sprite,
.deployed-unit[data-army="black"] .unit-sprite {
  background-image: url('black.png');
}

/* Информация под юнитом */
.unit-info-wrapper {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  text-align: center;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 20;
  margin-top: 2px;
}

/* ИСПРАВЛЕНИЕ: В мультиплеере игрок может быть любого цвета
   Скрываем информацию только для ботов (без класса player-controlled) */
.unit.red:not(.commander):not(.player-controlled) .unit-info-wrapper,
.unit.green:not(.commander):not(.player-controlled) .unit-info-wrapper,
.unit.black:not(.commander):not(.player-controlled) .unit-info-wrapper,
.unit.monster .unit-info-wrapper {
  display: none;
}

.unit-name-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

.unit-name {
  font-size: 10px; /* Было 8px, увеличено до 10px */
  font-weight: bold;
  font-family: 'Ruslan Display', serif;
  color: var(--text-primary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2px;
  text-shadow: 0 0 4px #000, 1px 1px 2px #000;
  opacity: 1; /* Явно указываем непрозрачность */
  visibility: visible; /* Явно указываем видимость */
}

.unit-status-icon {
  font-size: 12px; /* Увеличено с 10px до 12px для лучшей видимости */
  flex-shrink: 0;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; /* Явно указываем шрифт для emoji */
  line-height: 1;
  display: inline-block; /* Явно указываем display */
  opacity: 1; /* Явно указываем непрозрачность */
  visibility: visible; /* Явно указываем видимость */
}

.unit-status-icon.rank-icon {
  font-size: 12px; /* Увеличено с 10px до 12px */
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  line-height: 1;
}

/* ИСПРАВЛЕНИЕ: Иконка защиты меньше */
.unit-name .unit-status-icon:last-child {
  font-size: 7px; /* Иконка защиты 🛡️ меньше */
}

.unit-level {
  font-size: 7px;
  color: var(--accent-yellow);
  font-weight: bold;
  text-shadow: 0 0 4px #000;
  font-family: var(--font-mono);
}

.unit-rank {
  font-size: 7px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

/* ============================================
   HP BAR - Техно-стиль
   ============================================ */

.hp-bar {
  display: flex;
  gap: 1px;
  height: 4px;
  background: transparent;
  margin-top: 2px;
}

.hp-segment {
  flex: 1;
  height: 100%;
  background: var(--bg-primary);
  transition: background 0.3s ease;
  min-width: 3px;
  border-radius: 1px;
}

.hp-segment.filled {
  background: var(--accent-green);
  box-shadow: 0 0 4px var(--accent-green);
}

.hp-segment.empty {
  background: var(--bg-tertiary);
  box-shadow: none;
}

.hp-fill {
  height: 100%;
  background: var(--accent-green);
  transition: width 0.3s ease;
  box-shadow: 0 0 4px var(--accent-green);
}

.hp-fill.low {
  background: var(--accent-orange);
  box-shadow: 0 0 4px var(--accent-orange);
}

.hp-fill.critical {
  background: var(--accent-red);
  box-shadow: 0 0 4px var(--accent-red);
}

/* Подсветка специальных юнитов */
.unit.commander .unit-name,
.deployed-unit[data-is-commander="true"] .unit-name {
  color: #00e5ff !important;
  font-size: 12px !important;
  text-shadow: 0 0 8px rgba(0, 200, 255, 0.7), 0 0 3px #000, 1px 1px 2px #000 !important;
}

/* НОВОЕ: Командир — увеличенные атрибуты на поле боя */
.unit.commander .unit-status-icon {
  font-size: 16px !important;
}

.unit.commander .hp-bar {
  height: 6px !important;
}

.unit.commander .hp-segment {
  min-width: 4px;
}

.unit.commander .unit-info-wrapper {
  transform: translateX(-50%) scale(1.15);
  transform-origin: center top;
}

.unit.veteran .unit-sprite,
.deployed-unit[data-is-veteran="true"] .unit-sprite {
  filter: drop-shadow(0 0 5px var(--accent-green)) brightness(1.1);
}

.unit.prisoner .unit-sprite,
.deployed-unit[data-is-prisoner="true"] .unit-sprite {
  filter: drop-shadow(0 0 5px var(--accent-yellow));
}

/* НОВОЕ: Визуальное выделение отряда игрока */
.unit.player-controlled .unit-sprite {
  /* Тонкая голубая подсветка для юнитов игрока */
  filter: drop-shadow(0 0 3px rgba(0, 170, 255, 0.4));
}

/* НОВОЕ: Рамка вокруг юнитов при расстановке для лучшей читаемости */
.deployment-mode .unit {
  border-radius: 4px;
}

.deployment-mode .unit.player-controlled::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 1.5px solid rgba(0, 170, 255, 0.5);
  border-radius: 4px;
  pointer-events: none;
  z-index: 11;
}

.deployment-mode .unit.commander::after {
  border-color: rgba(255, 215, 0, 0.7) !important;
  border-width: 2px;
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
}

.deployment-mode .unit.veteran::after {
  border-color: rgba(0, 255, 136, 0.6) !important;
}

.unit.player-controlled.commander .unit-sprite {
  /* Командир игрока — неоновый синий пульсирующий свет */
  filter: drop-shadow(0 0 6px rgba(0, 200, 255, 0.8)) drop-shadow(0 0 12px rgba(0, 140, 255, 0.5)) brightness(1.08);
  animation: commanderNeonPulse 2s ease-in-out infinite;
}

@keyframes commanderNeonPulse {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(0, 200, 255, 0.8)) drop-shadow(0 0 12px rgba(0, 140, 255, 0.5)) brightness(1.08);
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(0, 230, 255, 1.0)) drop-shadow(0 0 20px rgba(0, 160, 255, 0.7)) brightness(1.15);
  }
}

/* Командир красных — красное свечение */
.unit.red.commander .unit-sprite {
  filter: drop-shadow(0 0 6px rgba(255, 60, 30, 0.8)) drop-shadow(0 0 12px rgba(200, 30, 0, 0.5)) brightness(1.08);
  animation: commanderRedPulse 2s ease-in-out infinite;
}

@keyframes commanderRedPulse {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(255, 60, 30, 0.8)) drop-shadow(0 0 12px rgba(200, 30, 0, 0.5)) brightness(1.08);
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(255, 80, 40, 1.0)) drop-shadow(0 0 20px rgba(220, 40, 0, 0.7)) brightness(1.15);
  }
}

/* Командир зелёных — зелёное свечение */
.unit.green.commander .unit-sprite {
  filter: drop-shadow(0 0 6px rgba(30, 220, 60, 0.8)) drop-shadow(0 0 12px rgba(0, 180, 30, 0.5)) brightness(1.08);
  animation: commanderGreenPulse 2s ease-in-out infinite;
}

@keyframes commanderGreenPulse {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(30, 220, 60, 0.8)) drop-shadow(0 0 12px rgba(0, 180, 30, 0.5)) brightness(1.08);
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(50, 255, 80, 1.0)) drop-shadow(0 0 20px rgba(0, 200, 40, 0.7)) brightness(1.15);
  }
}

/* Командир чёрных — яркое белое свечение */
.unit.black.commander .unit-sprite {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 16px rgba(220, 220, 255, 0.7)) brightness(1.15);
  animation: commanderBlackPulse 2s ease-in-out infinite;
}

@keyframes commanderBlackPulse {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 16px rgba(220, 220, 255, 0.7)) brightness(1.15);
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, 1.0)) drop-shadow(0 0 24px rgba(240, 240, 255, 0.9)) brightness(1.25);
  }
}

.unit.player-controlled.veteran .unit-sprite {
  /* Ветераны игрока - комбинированная подсветка (зелёная + голубая) */
  filter: drop-shadow(0 0 5px var(--accent-green)) drop-shadow(0 0 3px rgba(0, 170, 255, 0.4)) brightness(1.1);
}

/* Дополнительная подсветка при наведении на юнитов игрока */
.unit.player-controlled:hover .unit-sprite {
  filter: drop-shadow(0 0 8px rgba(0, 170, 255, 0.8)) brightness(1.1);
  transition: filter 0.2s ease;
}

/* НОВОЕ v7.0: Подсветка отряда при выборе командира */
.unit.squad-highlighted,
.deployed-unit.squad-highlighted {
  animation: squadPulse 0.5s ease-in-out infinite alternate;
}

@keyframes squadPulse {
  from {
    box-shadow: 0 0 10px 3px rgba(255, 215, 0, 0.6);
  }
  to {
    box-shadow: 0 0 20px 8px rgba(255, 215, 0, 0.9);
  }
}

/* Стили для кнопок тактики отряда */
.squad-tactic-container {
  pointer-events: auto;
}

.squad-tactic-btn:hover {
  transform: scale(1.15);
  filter: brightness(1.2);
}

.squad-tactic-btn:active {
  transform: scale(0.95);
}

.unit.dead {
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

/* ============================================
   ПОКАДРОВАЯ АНИМАЦИЯ СМЕРТИ
   Кадры 9 → 10 → 11 → исчезновение
   ============================================ */
/* Все анимации удалены - используется только покадровая смена спрайтов */

/* ============================================
   ДЕКОРАЦИИ
   ============================================ */

.game-decoration {
  position: absolute;
  pointer-events: none;
  image-rendering: pixelated;
  z-index: 5;
  background-repeat: no-repeat;
  background-image: url('trees.png');

  transform: translate(-50%, -100%);
}

/* Иконки типов декораций скрыты по умолчанию */
.game-decoration .obstacle-type-icon,
.game-decoration .obstacle-type-num {
  display: none !important;
}

/* Показываем иконки только когда открыт редактор */
.game-field.editor-mode .game-decoration .obstacle-type-icon,
.game-field.editor-mode .game-decoration .obstacle-type-num {
  display: flex !important;
}

/* В режиме редактора декорации кликабельны */
.game-field.editor-mode .game-decoration {
  pointer-events: auto !important;
  cursor: pointer;
}

/* ============================================
   ЗОНЫ РАССТАНОВКИ
   ============================================ */

.deployment-zone {
  animation: zoneGlow 2s ease-in-out infinite;
}

@keyframes zoneGlow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.9; }
}

@keyframes deployment-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 30px var(--accent-cyan), inset 0 0 30px rgba(0, 136, 255, 0.3);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.02);
    box-shadow: 0 0 50px var(--accent-cyan), inset 0 0 40px rgba(0, 136, 255, 0.5);
  }
}

.deployment-zone.zone-active-valid {
  background: rgba(0, 255, 136, 0.1) !important;
  border-color: var(--accent-green) !important;
  box-shadow: inset 0 0 30px rgba(0, 255, 136, 0.2);
}

.deployment-zone.zone-active-invalid {
  background: rgba(0, 0, 0, 0.6) !important;
  border-color: var(--text-dim) !important;
  opacity: 0.5;
}

/* ============================================
   ПРИЗРАК ПРИ ПЕРЕТАСКИВАНИИ
   ============================================ */

.placement-guide {
  position: absolute;
  width: 30px;
  height: 30px;
  background-size: 240px 240px;
  background-position: 0 -120px;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1001;
  opacity: 0.9;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  image-rendering: pixelated;
}

.placement-guide.valid {
  filter: drop-shadow(0 0 15px var(--accent-green)) brightness(1.3);
}

.placement-guide.invalid {
  filter: drop-shadow(0 0 15px var(--accent-red)) brightness(0.6) saturate(0.5);
}

.deployed-unit.is-dragging-source,
.unit.is-dragging-source {
  opacity: 0.2;
  filter: grayscale(1) brightness(0.5);
}

/* ============================================
   ЭФФЕКТЫ И АНИМАЦИИ
   ============================================ */

@keyframes bloodFade {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
}

.blood-splatter {
  filter: blur(1px);
  box-shadow: 0 2px 8px rgba(139, 0, 0, 0.6);
}

.unit.commander.dying {
  z-index: 100 !important;
  filter: brightness(1.5) saturate(1.5) drop-shadow(0 0 20px var(--accent-yellow));
}

@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5px, 2px); }
  90% { transform: translate(-1px, 1px); }
}

.game-field.commander-death {
  animation: screenShake 0.5s ease-in-out;
}

.death-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle, rgba(255, 0, 0, 0.3) 0%, transparent 70%);
  pointer-events: none;
  z-index: 9999;
  animation: flashEffect 0.8s ease-out forwards;
}

@keyframes flashEffect {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes enemySpawn {
  0% { opacity: 0; transform: translate(-50%, -50%) translateY(-50px) scale(0.8); }
  100% { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
}

.unit.spawning {
  animation: enemySpawn 0.5s ease-out forwards;
}

@keyframes treeShake {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  25% { transform: translate(-50%, -50%) rotate(2deg); }
  75% { transform: translate(-50%, -50%) rotate(-2deg); }
}

.game-decoration.shaking {
  animation: treeShake 0.3s ease-in-out;
}

/* ============================================
   ПРОГРЕСС-БАРЫ (ТОЛСТЫЕ)
   ============================================ */

.thick-row {
  margin-bottom: 15px;
}

.thick-label-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 0.85em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.thick-container {
  width: 100%;
  height: 32px;
  background: var(--bg-primary);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
}

.thick-fill {
  height: 100%;
  width: 0%;
  transition: width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 12px;
  font-weight: bold;
  font-family: var(--font-mono);
  color: var(--text-primary);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  white-space: nowrap;
  font-size: 0.85em;
}

.thick-blue .thick-fill {
  background: linear-gradient(90deg, var(--color-blue-dark), var(--color-blue));
  box-shadow: 0 0 15px rgba(0, 170, 255, 0.3);
}

.thick-red .thick-fill {
  background: linear-gradient(90deg, var(--color-red-dark), var(--color-red));
  box-shadow: 0 0 15px rgba(255, 68, 102, 0.3);
}

.thick-green .thick-fill {
  background: linear-gradient(90deg, var(--color-green-dark), var(--color-green));
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.thick-yellow .thick-fill {
  background: linear-gradient(90deg, var(--color-yellow-dark), var(--color-yellow));
  box-shadow: 0 0 15px rgba(255, 204, 0, 0.3);
  color: var(--bg-primary);
}

.text-blue { color: var(--color-blue); }
.text-red { color: var(--color-red); }
.text-green { color: var(--color-green); }
.text-yellow { color: var(--color-yellow); }

/* ============================================
   ФИНАЛЬНАЯ СТАТИСТИКА
   ============================================ */

.final-stats-box {
  background: var(--bg-tertiary);
  padding: 0;
  border-radius: var(--border-radius);
  margin: 10px 0;
  max-height: 70vh;
  overflow-y: auto;
  border: 1px solid var(--border-color);
}

/* ============================================
   DEPLOYMENT UNITS
   ============================================ */

.deployment-units-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 5px;
}

.unit-deployment-card {
  user-select: none;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 8px;
  transition: all 0.2s;
}

.unit-deployment-card:hover {
  border-color: var(--accent-cyan-dim);
  background: rgba(0, 240, 255, 0.05);
}

.unit-deployment-card:active {
  cursor: grabbing !important;
}

/* ============================================
   ДОПОЛНИТЕЛЬНЫЕ УТИЛИТЫ
   ============================================ */

.vertical-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

h1 {
  color: var(--accent-cyan);
  margin: 0;
  font-family: 'Ruslan Display', serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  font-size: 1.5rem;
}

/* Стили для label */
label {
  color: var(--text-secondary);
  font-size: 0.9em;
  display: block;
  margin-bottom: 6px;
}

/* Кнопка следующей битвы */
#next-battle-button {
  margin-top: 15px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(0, 170, 200, 0.1));
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

#next-battle-button:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.3), rgba(0, 170, 200, 0.2));
  box-shadow: var(--glow-cyan);
}

/* Результаты битвы */
#battle-result-info {
  background: rgba(0, 240, 255, 0.05) !important;
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
  border-radius: var(--border-radius-lg) !important;
}

#result-battle-name {
  color: var(--accent-cyan) !important;
}

#result-message {
  color: var(--accent-green) !important;
}


/* ============================================
   ИНФОРМАЦИОННЫЕ БЛОКИ (ПРАВАЯ ПАНЕЛЬ)
   ============================================ */

.info-block {
  background: var(--bg-tertiary) !important; /* ИСПРАВЛЕНИЕ: Принудительно устанавливаем фон */
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 14px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
  opacity: 1 !important; /* ИСПРАВЛЕНИЕ: Полная непрозрачность */
}

.info-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
}

.info-block--cyan::before { background: var(--accent-cyan); }
.info-block--green::before { background: var(--accent-green); }
.info-block--yellow::before { background: var(--accent-yellow); }
.info-block--magenta::before { background: var(--accent-magenta); }

.info-block__title {
  font-family: 'Ruslan Display', serif;
  font-size: 1em;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.info-block--cyan .info-block__title { color: var(--accent-cyan); }
.info-block--green .info-block__title { color: var(--accent-green); }
.info-block--yellow .info-block__title { color: var(--accent-yellow); }
.info-block--magenta .info-block__title { color: var(--accent-magenta); }

.info-block__content {
  font-family: var(--font-main);
  font-size: 0.95em;
  color: var(--text-secondary);
  line-height: 1.7;
}

.key-hint {
  display: inline-block;
  background: var(--bg-primary);
  padding: 3px 8px;
  border-radius: 4px;
  font-family: 'Ruslan Display', serif;
  font-size: 0.95em;
  color: var(--accent-cyan);
  border: 1px solid var(--border-color);
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.highlight-green {
  color: var(--accent-green);
  font-weight: bold;
}

.level-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 1em;
  font-family: var(--font-main);
}

.level-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  background: rgba(255, 0, 170, 0.15);
  border: 1px solid var(--accent-magenta);
  border-radius: 4px;
  color: var(--accent-magenta);
  font-family: 'Ruslan Display', serif;
  font-weight: normal;
  font-size: 0.9em;
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* ============================================
   КНОПКИ СПЕЦИАЛЬНЫЕ
   ============================================ */

.btn-start-campaign {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(0, 170, 200, 0.1)) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
  font-size: 1em !important;
  padding: 14px !important;
  margin-top: 15px !important;
}

.btn-start-campaign:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.3), rgba(0, 170, 200, 0.2)) !important;
  box-shadow: var(--glow-cyan) !important;
}

.btn-auto {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 200, 100, 0.1)) !important;
  border-color: var(--accent-green) !important;
  color: var(--accent-green) !important;
  margin-top: 15px !important;
}

.btn-auto:hover {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.3), rgba(0, 200, 100, 0.2)) !important;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.3) !important;
}

/* ============================================
   РЕЗУЛЬТАТЫ И СТАТУСЫ
   ============================================ */

.result-box {
  background: rgba(0, 240, 255, 0.05);
  padding: 15px;
  border-radius: var(--border-radius-lg);
  border: 1px solid rgba(0, 240, 255, 0.3);
  margin-bottom: 15px;
  text-align: center;
}

.result-title {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--accent-cyan);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.result-status {
  font-size: 1em;
  font-weight: bold;
  color: var(--accent-green);
}

.section-title {
  font-size: 1.05em;
  font-family: 'Ruslan Display', serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 10px 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.winner-message {
  font-size: 1.1em;
  font-weight: bold;
  margin: 15px 0;
  color: var(--accent-yellow);
  text-align: center;
}

/* ============================================
   ФУТЕР
   ============================================ */

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.footer-logo {
  height: 100%;
  width: auto;
  max-height: 40px;
  margin-right: 12px;
  opacity: 0.85;
  filter: drop-shadow(0 0 5px rgba(74, 144, 217, 0.5));
  vertical-align: middle;
}

.footer-title {
  color: var(--text-dim);
  font-size: 1em;
  font-family: 'Ruslan Display', serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.footer-version {
  color: var(--accent-cyan);
  font-family: 'Ruslan Display', serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 0.95em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}


/* ============================================
   ТЕХНО-ЭФФЕКТЫ
   ============================================ */

/* Сканирующая линия убрана по запросу */

/* Пульсация для активных элементов */
@keyframes techPulse {
  0%, 100% { 
    box-shadow: 0 0 5px var(--accent-cyan);
    border-color: var(--accent-cyan);
  }
  50% { 
    box-shadow: 0 0 15px var(--accent-cyan), 0 0 30px rgba(0, 240, 255, 0.2);
    border-color: rgba(0, 240, 255, 0.8);
  }
}

/* Hover эффект для панелей */
.info-panel:hover,
#right-panel:hover {
  border-color: rgba(0, 240, 255, 0.3);
}

/* Глитч-эффект для заголовков при hover */
.panel-view h2:hover {
  animation: glitch 0.3s ease;
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

/* Градиентная подсветка для инпутов в фокусе */
input[type="text"]:focus {
  background: linear-gradient(135deg, var(--bg-primary), rgba(0, 240, 255, 0.05));
}

/* Анимация появления панелей */
.panel-view:not(.hidden) {
  animation: panelSlideIn 0.3s ease-out;
}

@keyframes panelSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Стилизация выделения текста */
::selection {
  background: var(--accent-cyan);
  color: var(--bg-primary);
}

/* Дополнительные hover-эффекты для info-block */
.info-block:hover {
  background: rgba(26, 26, 37, 0.9);
  border-color: rgba(0, 240, 255, 0.2);
}

.info-block:hover::before {
  box-shadow: 0 0 10px currentColor;
}

/* Стилизация placeholder */
::placeholder {
  color: var(--text-dim);
  opacity: 0.7;
}

/* Анимация загрузки */
@keyframes loadingPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.loading {
  animation: loadingPulse 1.5s ease-in-out infinite;
}

/* Техно-рамка для важных элементов */
.tech-border {
  position: relative;
}

.tech-border::before,
.tech-border::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid var(--accent-cyan);
}

.tech-border::before {
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
}

.tech-border::after {
  bottom: -2px;
  right: -2px;
  border-left: none;
  border-top: none;
}

/* Футер виден */


/* ============================================
   ПРАВАЯ ПАНЕЛЬ - ТАБЫ И ДЕРЕВО УРОВНЕЙ
   ============================================ */

/* Табы */
.right-panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color) !important;
  flex-shrink: 0;
  background: var(--bg-secondary) !important; /* ИСПРАВЛЕНО: Непрозрачный фон */
  opacity: 1 !important; /* ИСПРАВЛЕНО: Полная непрозрачность */
}

.right-panel-tab-content {
  overflow-y: auto;
  flex-grow: 1;
  background: transparent !important;
  opacity: 1 !important;
}

.right-panel-tabs .tab-btn {
  flex: 1;
  padding: 10px 8px !important;
  background: var(--bg-tertiary) !important;
  border: none !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
  border-bottom: 2px solid transparent !important;
  font-size: 0.95em !important;
  font-family: 'Ruslan Display', serif !important;
  font-weight: normal !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s;
  opacity: 1 !important; /* ИСПРАВЛЕНО: Полная непрозрачность */
}

.right-panel-tabs .tab-btn:hover {
  color: var(--text-primary) !important;
  background: var(--bg-secondary) !important;
}

.right-panel-tabs .tab-btn.active {
  background: var(--bg-secondary) !important;
  color: var(--accent-cyan) !important;
  border-bottom: 2px solid var(--accent-cyan) !important;
}

/* ============================================
   ДЕРЕВО УРОВНЕЙ — СТАРЫЙ СТИЛЬ (оставлено для совместимости)
   ============================================ */
.level-tree {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px;
}

.level-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}

.level-node.locked {
  opacity: 0.4;
  cursor: not-allowed;
}

.level-node.unlocked:hover,
.level-node.completed:hover {
  transform: scale(1.05);
}

.level-node-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.level-frame {
  position: relative;
  width: 80px;
  height: 80px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.level-node.unlocked .level-frame {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.level-node.completed .level-frame {
  border-color: var(--accent-green);
  background: rgba(0, 255, 136, 0.1);
}

.level-node.replayable .level-frame {
  border-color: var(--accent-yellow);
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.3);
}

.level-number {
  font-family: 'Ruslan Display', serif;
  font-size: 1.5em;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--text-primary);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.level-node.locked .level-number {
  color: var(--text-dim);
}

.level-node.unlocked .level-number {
  color: var(--accent-cyan);
}

.level-node.completed .level-number {
  color: var(--accent-green);
}

.level-checkmark {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  background: var(--accent-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--bg-primary);
  font-weight: bold;
}

.level-connector {
  width: 2px;
  height: 15px;
  background: var(--border-color);
  margin: 5px 0;
}

.level-node.completed + .level-node .level-connector,
.level-node.unlocked + .level-node .level-connector {
  background: linear-gradient(to bottom, var(--accent-cyan), var(--border-color));
}

.tree-icon {
  display: none;
}

/* ============================================
   ХЕДЕР БИТВЫ — КРУПНЫЙ УРОВЕНЬ + ЦВЕТНОЕ НАЗВАНИЕ
   ============================================ */
/* Иконка спрайта в хедере рядом с названием битвы */
.header-battle-icon {
  display: inline-block;
  width: 44px;
  height: 44px;
  vertical-align: middle;
  margin-right: 10px;
  border-radius: 6px;
  border: 2px solid var(--accent-cyan);
  box-shadow: 0 0 10px rgba(0, 170, 255, 0.4), inset 0 0 6px rgba(0, 0, 0, 0.5);
  image-rendering: pixelated;
  flex-shrink: 0;
  object-fit: contain;
  overflow: hidden;
}

.header-level-num {
  font-family: 'Ruslan Display', serif;
  font-size: 1.3em;
  font-weight: normal;
  color: var(--text-primary);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
  letter-spacing: 2px;
}

.header-level-sep {
  color: var(--accent-magenta);
  font-size: 1.3em;
  margin: 0 6px;
  text-shadow: 0 0 8px rgba(255, 0, 170, 0.5);
}

.header-level-name {
  font-family: 'Ruslan Display', serif;
  font-size: 1.5em;
  font-weight: normal;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 
    0 0 10px rgba(0, 240, 255, 0.6),
    0 0 20px rgba(0, 240, 255, 0.3),
    2px 2px 4px rgba(0, 0, 0, 0.9);
  animation: headerNameGlow 2s ease-in-out infinite alternate;
}

@keyframes headerNameGlow {
  0%   { text-shadow: 0 0 10px rgba(0, 240, 255, 0.5), 2px 2px 4px rgba(0, 0, 0, 0.9); }
  100% { text-shadow: 0 0 20px rgba(0, 240, 255, 0.8), 0 0 40px rgba(0, 240, 255, 0.3), 2px 2px 4px rgba(0, 0, 0, 0.9); }
}


/* ============================================
   НОВОЕ ДЕРЕВО УРОВНЕЙ КАМПАНИИ — КАРТОЧКИ
   ============================================ */
.level-tree-campaign {
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 0;
}

/* --- СОЕДИНИТЕЛЬ (ПУТЬ ОТРЯДА) --- */
.campaign-path-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 28px;
  position: relative;
}

.campaign-path-connector .path-line {
  width: 3px;
  height: 100%;
  background: var(--border-color);
  border-radius: 2px;
  opacity: 0.5;
}

.campaign-path-connector.path-active .path-line {
  opacity: 1;
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.3);
}

.campaign-path-connector .path-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8px;
  color: var(--text-dim);
  line-height: 1;
}

.campaign-path-connector.path-active .path-marker {
  color: var(--accent-cyan);
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.5);
}


/* --- КАРТОЧКА УРОВНЯ --- */
.campaign-level-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: #1e1519;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  min-height: 106px;
}

/* Полоска акцента слева */
.campaign-level-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--level-accent, var(--accent-cyan));
  opacity: 0.6;
  transition: opacity 0.25s, width 0.25s;
}

.campaign-level-card:hover::before {
  opacity: 1;
  width: 4px;
}

/* СОСТОЯНИЯ */
.campaign-level-card.locked {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.7);
}

.campaign-level-card.unlocked {
  border-color: color-mix(in srgb, var(--level-accent, var(--accent-cyan)) 40%, transparent);
}

.campaign-level-card.unlocked:hover {
  border-color: var(--level-accent, var(--accent-cyan));
  background: color-mix(in srgb, var(--level-accent, var(--accent-cyan)) 10%, #1e1519);
  transform: translateX(3px);
  box-shadow: 0 0 12px color-mix(in srgb, var(--level-accent, var(--accent-cyan)) 25%, transparent);
}

.campaign-level-card.completed {
  border-color: color-mix(in srgb, var(--level-accent, var(--accent-green)) 50%, transparent);
  background: color-mix(in srgb, var(--level-accent, var(--accent-green)) 6%, #1e1519);
}

.campaign-level-card.completed:hover {
  transform: translateX(3px);
  box-shadow: 0 0 12px color-mix(in srgb, var(--level-accent, var(--accent-green)) 30%, transparent);
}

.campaign-level-card.current-level {
  border-color: var(--level-accent, var(--accent-cyan));
  box-shadow: 
    0 0 15px color-mix(in srgb, var(--level-accent, var(--accent-cyan)) 30%, transparent),
    inset 0 0 15px color-mix(in srgb, var(--level-accent, var(--accent-cyan)) 5%, transparent);
  animation: currentLevelPulse 2s ease-in-out infinite alternate;
}

@keyframes currentLevelPulse {
  0%   { box-shadow: 0 0 10px color-mix(in srgb, var(--level-accent) 20%, transparent); }
  100% { box-shadow: 0 0 20px color-mix(in srgb, var(--level-accent) 40%, transparent), inset 0 0 8px color-mix(in srgb, var(--level-accent) 8%, transparent); }
}


/* --- ЛЕВАЯ ЧАСТЬ: СПРАЙТ 100×100 + НОМЕР --- */
.clc-sprite-wrap {
  position: relative;
  flex-shrink: 0;
  width: 100px;
  height: 100px;
}

.clc-sprite {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  border: 2px solid color-mix(in srgb, var(--level-accent, var(--accent-cyan)) 50%, transparent);
  background-color: rgba(0, 0, 0, 0.4);
  image-rendering: pixelated;
  box-shadow: 
    0 0 10px color-mix(in srgb, var(--level-accent, var(--accent-cyan)) 15%, transparent),
    inset 0 0 12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.25s, box-shadow 0.25s;
}

.campaign-level-card:hover .clc-sprite {
  border-color: var(--level-accent, var(--accent-cyan));
  box-shadow: 
    0 0 16px color-mix(in srgb, var(--level-accent, var(--accent-cyan)) 30%, transparent),
    inset 0 0 8px rgba(0, 0, 0, 0.4);
}

.campaign-level-card.locked .clc-sprite {
  filter: grayscale(1) brightness(0.4);
  border-color: var(--border-color);
  box-shadow: none;
}

.clc-number {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Ruslan Display', serif;
  font-size: 0.8em;
  font-weight: normal;
  color: var(--level-accent, var(--text-dim));
  text-shadow: 0 0 6px rgba(0, 0, 0, 1), 1px 1px 2px rgba(0, 0, 0, 0.9);
  letter-spacing: 2px;
  background: rgba(0, 0, 0, 0.7);
  padding: 0 6px;
  border-radius: 3px;
}

.campaign-level-card.locked .clc-number {
  color: var(--text-dim);
}


/* --- ПРАВАЯ ЧАСТЬ: НАЗВАНИЕ + ОПИСАНИЕ + БЕЙДЖИ --- */
.clc-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.clc-name {
  font-family: 'Ruslan Display', serif;
  font-size: 1.05em;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1.2;
  text-shadow: 
    0 0 8px rgba(0, 0, 0, 1),
    1px 1px 2px rgba(0, 0, 0, 1),
    -1px -1px 2px rgba(0, 0, 0, 1),
    0 0 16px rgba(0, 0, 0, 0.7);
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.4);
}

.campaign-level-card.locked .clc-name {
  color: var(--text-dim) !important;
}

.clc-desc {
  font-size: 0.73em;
  color: var(--text-secondary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.campaign-level-card.locked .clc-desc {
  color: var(--text-dim);
}


/* --- БЕЙДЖИ (ПРОЙДЕН / ПОВТОР / ЗАКРЫТ) --- */
.clc-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.clc-badge {
  font-size: 0.62em;
  font-family: 'Ruslan Display', serif;
  font-weight: normal;
  letter-spacing: 1px;
  padding: 1px 7px;
  border-radius: 3px;
  display: inline-block;
  width: fit-content;
}

.completed-badge {
  color: var(--accent-green);
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.3);
}

.replay-badge {
  color: var(--accent-yellow);
  background: rgba(255, 204, 0, 0.1);
  border: 1px solid rgba(255, 204, 0, 0.3);
}

.locked-badge {
  color: var(--text-dim);
  background: rgba(85, 85, 102, 0.15);
  border: 1px solid rgba(85, 85, 102, 0.3);
}


/* --- СТРЕЛКА СПРАВА --- */
.clc-arrow {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  font-size: 1em;
  color: var(--text-dim);
  transition: color 0.2s, transform 0.2s;
  align-self: center;
}

.campaign-level-card.unlocked:hover .clc-arrow,
.campaign-level-card.completed:hover .clc-arrow {
  color: var(--level-accent, var(--accent-cyan));
  transform: translateX(4px);
}

/* Состав армии */
.army-composition-section {
  margin-bottom: 15px;
}

.army-composition-title {
  font-size: 0.85em;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-color);
}

.unit-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 8px 10px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s;
}

.unit-card:hover {
  border-color: var(--accent-cyan-dim);
  background: rgba(0, 240, 255, 0.03);
}

.unit-card-icon {
  width: 30px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.unit-card-info {
  flex: 1;
  min-width: 0;
}

.unit-card-name {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unit-card-stats {
  font-size: 0.75em;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}


/* ============================================
   МОБИЛЬНАЯ ВЕРСИЯ - ПРОСТАЯ
   ============================================ */

/* Скрываем всё лишнее на мобильных */
.mobile-nav,
.mobile-panel,
.rotate-device-overlay {
  display: none !important;
}

/* Мобильные устройства - любая ориентация */
@media screen and (max-width: 1024px) {
  html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  
  #responsive-container {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  
  /* Контейнер масштабируется через JS */
  #responsive-container > .container {
    transform-origin: center center;
  }
  
  /* Скрываем секцию событий на мобильных */
  .hide-on-mobile {
    display: none !important;
  }
  
  /* Компактный хедер */
  header {
    padding: 5px 8px;
    min-height: 40px;
  }
  
  .header-fullscreen-btn {
    padding: 8px 12px;
    font-size: 12px;
    margin-right: 10px;
  }
  
  /* ИСПРАВЛЕНИЕ: Закрепляем левую панель на мобильных */
  .info-panel {
    position: relative !important; /* Не позволяем панели двигаться */
    left: 0 !important;
    transform: none !important;
    flex-shrink: 0 !important; /* Панель не сжимается */
    flex-grow: 0 !important; /* Панель не растягивается */
  }
  
  /* Игровое поле адаптируется по ширине */
  .game-field {
    flex: 1 1 auto !important; /* Поле занимает оставшееся пространство */
    min-width: 200px !important; /* Минимальная ширина для игрового поля */
  }
  
}

/* Очень маленькие экраны */
@media screen and (max-width: 600px) {
  .header-fullscreen-btn {
    padding: 6px 8px;
    font-size: 10px;
  }
  
  header {
    padding: 3px 5px;
    min-height: 35px;
  }
  
  /* Скрываем секцию событий на мобильных */
  .hide-on-mobile {
    display: none !important;
  }
}


/* ============================================
   TOUCH-УПРАВЛЕНИЕ И МОБИЛЬНЫЕ ЖЕСТЫ
   ============================================ */

/* Стили для touch-устройств */
@media (pointer: coarse) {
  /* Увеличиваем touch-области */
  .control-btn,
  .battle-select-btn,
  button {
    min-height: 40px;
    min-width: 40px;
  }
  
  .score-entry {
    min-height: 44px;
    padding: 8px 6px;
  }
  
  /* Увеличиваем область нажатия для иконок */
  .header-action-btn {
    min-width: 40px;
    min-height: 40px;
    padding: 6px 10px !important;
  }
  
  /* Скрываем курсор на touch-устройствах */
  .game-field {
    cursor: default !important;
  }
  
  /* ИСПРАВЛЕНО: Юниты остаются 40x40, но touch-область увеличена через padding */
  /* Убрано min-width/min-height которые ломали отображение спрайтов */
  /* Размер юнита = 40px (UNIT_SIZE), не меняем */
  /* Touch-область обеспечивается через transform: translate(-50%, -50%) */
  
  /* Увеличиваем табы */
  .right-panel-tabs .tab-btn {
    min-height: 40px;
    font-size: 0.85em !important;
  }
  
  /* Увеличиваем карточки юнитов */
  .unit-card {
    min-height: 44px;
    padding: 8px 10px;
  }
  
  /* Увеличиваем уровни в дереве */
  .level-frame {
    width: 60px;
    height: 60px;
  }
  
  .level-number {
    font-size: 1.4em;
  }
}

/* Визуальная обратная связь при касании */
.touch-active {
  transform: scale(0.95) !important;
  opacity: 0.8 !important;
  transition: transform 0.1s, opacity 0.1s !important;
}

/* Подсветка юнита при тапе */
.deployed-unit.highlighted,
.unit.highlighted {
  animation: highlightPulse 0.5s ease-in-out 2;
}

@keyframes highlightPulse {
  0%, 100% { 
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.5); 
    filter: brightness(1);
  }
  50% { 
    box-shadow: 0 0 30px rgba(0, 240, 255, 1); 
    filter: brightness(1.3);
  }
}

/* Виртуальный джойстик */
.virtual-joystick {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.joystick-knob {
  user-select: none;
  -webkit-user-select: none;
}

/* Предотвращаем выделение текста при перетаскивании */
.game-field,
.deployed-unit,
.unit,
.score-entry {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Отключаем контекстное меню на touch */
.game-field,
.deployed-unit,
.unit {
  -webkit-touch-callout: none;
}

/* Стили для перетаскивания на touch */
.deployed-unit.touch-dragging,
.unit.touch-dragging {
  opacity: 0.5;
  transform: scale(1.1);
  z-index: 1000;
}

/* Индикатор зоны сброса */
.drop-zone-indicator {
  position: absolute;
  border: 3px dashed var(--accent-green);
  border-radius: 50%;
  pointer-events: none;
  animation: dropZonePulse 1s ease-in-out infinite;
}

@keyframes dropZonePulse {
  0%, 100% { 
    opacity: 0.5;
    transform: scale(1);
  }
  50% { 
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Мобильная подсказка управления */
.mobile-controls-hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: var(--text-primary);
  padding: 10px 20px;
  border-radius: var(--border-radius);
  border: 1px solid var(--accent-cyan);
  font-size: 0.85em;
  z-index: 9998;
  display: none;
  text-align: center;
}

@media (pointer: coarse) {
  .mobile-controls-hint {
    display: block;
  }
}

/* Скрываем подсказку после первого взаимодействия */
.mobile-controls-hint.hidden {
  display: none !important;
}

/* Улучшенный скролл для панелей на touch */
.info-panel,
#right-panel,
#scoreboard-content,
.battle-log-content {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Оптимизация рендеринга */
  will-change: scroll-position;
  transform: translateZ(0);
}

/* Фикс для iOS Safari - предотвращаем bounce */
html {
  overscroll-behavior: none;
}

body {
  overscroll-behavior: none;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* Стили для landscape на мобильных */
@media screen and (max-width: 1024px) and (orientation: landscape) {
  /* Компактный джойстик */
  .virtual-joystick {
    width: 100px !important;
    height: 100px !important;
    bottom: 20px !important;
    left: 20px !important;
  }
  
  .joystick-knob {
    width: 40px !important;
    height: 40px !important;
  }
}

/* Стили для portrait на мобильных */
@media screen and (max-width: 1024px) and (orientation: portrait) {
  /* Джойстик внизу по центру */
  .virtual-joystick {
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%);
  }
}

/* Анимация появления джойстика */
.virtual-joystick {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.virtual-joystick.hidden {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

/* Индикатор направления на джойстике */
.joystick-direction-indicator {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.joystick-direction-indicator::before {
  content: '↑';
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(0, 240, 255, 0.3);
  font-size: 14px;
}

.joystick-direction-indicator::after {
  content: '↓';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(0, 240, 255, 0.3);
  font-size: 14px;
}

/* Кнопки действий для мобильных */
.mobile-action-buttons {
  position: fixed;
  bottom: 80px;
  right: 20px;
  display: none;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  /* Оптимизация для touch */
  touch-action: manipulation;
}

@media (pointer: coarse) {
  .mobile-action-buttons {
    display: flex;
  }
}

.mobile-action-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.8);
  border: 3px solid var(--accent-cyan);
  color: var(--accent-cyan);
  font-size: 1.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(0, 240, 255, 0.3);
  /* Оптимизация для touch */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mobile-action-btn:active {
  transform: scale(0.9);
  background: rgba(0, 240, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 240, 255, 0.5);
}

.mobile-action-btn.pause-btn {
  border-color: var(--accent-yellow);
  color: var(--accent-yellow);
  box-shadow: 0 4px 12px rgba(255, 204, 0, 0.3);
}

.mobile-action-btn.pause-btn:active {
  background: rgba(255, 204, 0, 0.3);
  box-shadow: 0 2px 8px rgba(255, 204, 0, 0.5);
}

.mobile-action-btn.sound-btn {
  border-color: var(--accent-green);
  color: var(--accent-green);
  box-shadow: 0 4px 12px rgba(0, 255, 136, 0.3);
}

.mobile-action-btn.sound-btn:active {
  background: rgba(0, 255, 136, 0.3);
  box-shadow: 0 2px 8px rgba(0, 255, 136, 0.5);
}

.mobile-action-btn.camera-btn {
  border-color: var(--accent-magenta);
  color: var(--accent-magenta);
  box-shadow: 0 4px 12px rgba(255, 0, 170, 0.3);
}

.mobile-action-btn.camera-btn:active {
  background: rgba(255, 0, 170, 0.3);
  box-shadow: 0 2px 8px rgba(255, 0, 170, 0.5);
}


/* ============================================
   РЕДАКТОР ДЕКОРАЦИЙ
   ============================================ */

/* Сетка спрайтов */
.sprite-grid {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-cyan) var(--bg-primary);
}

.sprite-grid::-webkit-scrollbar {
  width: 6px;
}

.sprite-grid::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

.sprite-grid::-webkit-scrollbar-thumb {
  background: var(--accent-cyan-dim);
  border-radius: 3px;
}

.sprite-cell {
  transition: all 0.15s ease;
}

.sprite-cell:hover {
  z-index: 10;
}

.sprite-cell.selected {
  border-color: var(--accent-yellow) !important;
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}

/* Призрак декорации при перетаскивании */
.decoration-guide {
  pointer-events: none;
  filter: drop-shadow(0 0 15px rgba(0, 255, 136, 0.8));
}

/* Декорации размещенные через редактор */
.game-decoration.editor-placed {
  pointer-events: auto;
  cursor: pointer;
}

.game-decoration.editor-placed:hover {
  filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.8)) !important;
}

/* Слайдер размера */
#decoration-size {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  outline: none;
}

#decoration-size::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--accent-cyan);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

#decoration-size::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--accent-cyan);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

/* Заголовок редактора */
.editor-header {
  border-radius: var(--border-radius);
}

/* ============================================
   ПРОСМОТР АРМИИ (КАРТОЧКИ ЮНИТОВ)
   ============================================ */

.army-cards-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  display: none;
  flex-direction: column;
  z-index: 100;
  overflow: hidden;
}

.army-cards-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.army-cards-header h2 {
  margin: 0;
  color: var(--accent-cyan);
  font-family: 'Ruslan Display', serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  font-size: 1.2em;
}

.army-cards-header .control-btn {
  padding: 8px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--accent-red);
  color: var(--accent-red);
  cursor: pointer;
  border-radius: var(--border-radius);
}

.army-cards-header .control-btn:hover {
  background: rgba(255, 51, 102, 0.2);
}

.army-cards-container {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 20px;
  overflow-y: auto;
  justify-content: center;
  align-content: flex-start;
}

/* === КАРТОЧКА ЮНИТА === */
.unit-card {
  width: 180px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.2s ease;
}

.unit-card:hover {
  border-color: var(--accent-cyan);
  box-shadow: var(--glow-cyan);
  transform: translateY(-2px);
}

.unit-card.commander {
  border-color: var(--accent-yellow);
  background: linear-gradient(135deg, var(--bg-secondary), rgba(255, 204, 0, 0.1));
}

.unit-card.commander:hover {
  box-shadow: 0 0 20px rgba(255, 204, 0, 0.4);
}

.unit-card.veteran {
  border-color: var(--accent-green);
  background: linear-gradient(135deg, var(--bg-secondary), rgba(0, 255, 136, 0.05));
}

.unit-card.veteran:hover {
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

.unit-card.dead {
  opacity: 0.5;
  border-color: var(--accent-red);
  background: linear-gradient(135deg, var(--bg-secondary), rgba(255, 51, 102, 0.1));
}

/* Заголовок карточки */
.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-icon {
  font-size: 1.5em;
}

.card-type {
  font-size: 0.75em;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Имя юнита */
.card-name {
  font-size: 1.1em;
  font-weight: bold;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Редактируемое имя юнита */
.card-name-editable {
  font-family: 'Ruslan Display', serif;
  font-weight: normal;
  cursor: pointer;
  padding: 2px;
  border-radius: 2px;
  transition: background 0.2s;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

/* HP секция */
.card-hp {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-hp .hp-label {
  font-size: 0.85em;
  color: var(--text-secondary);
  text-align: center;
}

.card-hp .hp-bar {
  display: flex;
  gap: 2px;
  height: 10px;
}

.card-hp .hp-segment {
  flex: 1;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.card-hp .hp-bonus {
  font-size: 0.7em;
  color: var(--accent-green);
  text-align: center;
}

/* Статистика */
.card-stats {
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

/* НОВОЕ: Выбор специализации */
.card-specialization {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}

.spec-label {
  font-size: 0.75em;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.spec-select {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.85em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.spec-select:hover {
  border-color: var(--accent-cyan);
  background: rgba(0, 240, 255, 0.05);
}

.spec-select:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

.spec-select option {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 4px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Специальное выравнивание для бабло */
.stat-item:last-child {
  flex-direction: row;
  gap: 4px;
  align-items: baseline;
}

.stat-item:last-child .stat-label {
  order: 1;
  font-size: 0.7em;
}

.stat-item:last-child .stat-value {
  order: 2;
  font-size: 1em;
}

.stat-item:last-child .stat-icon {
  order: 3;
  font-size: 1em;
}

.stat-icon {
  font-size: 1em;
}

.stat-value {
  font-size: 1.1em;
  font-weight: bold;
  color: var(--text-primary);
}

.stat-label {
  font-size: 0.65em;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* Статус */
.card-status {
  text-align: center;
  font-size: 0.8em;
  padding: 5px;
  border-radius: var(--border-radius);
  background: var(--bg-tertiary);
}

.card-status.status-dead {
  color: var(--accent-red);
  background: rgba(255, 51, 102, 0.2);
}

.card-status.status-placed {
  color: var(--accent-green);
  background: rgba(0, 255, 136, 0.2);
}

.card-status.status-waiting {
  color: var(--accent-yellow);
  background: rgba(255, 204, 0, 0.2);
}

.card-status.status-battle {
  color: var(--accent-cyan);
  background: rgba(0, 240, 255, 0.2);
}

/* Адаптив для мобильных */
@media (max-width: 600px) {
  .army-cards-container {
    padding: 10px;
    gap: 10px;
  }
  
  .unit-card {
    width: 150px;
    padding: 10px;
  }
  
  .card-name {
    font-size: 0.95em;
  }
}


/* ============================================
   INTRO SCREEN - Заставка игры
   ============================================ */

#intro-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: #0a0a12;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in, background-image 1s ease-in-out;
}

/* Показываем заставку когда она готова */
#intro-screen.ready {
  opacity: 1;
}

/* Скрываем панели во время заставки */
body:has(#intro-screen) .info-panel,
body:has(#intro-screen) #right-panel,
body:has(#intro-screen) header,
body:has(#intro-screen) footer {
  display: none !important;
}

/* Затухающая подсветка панелей (последняя в каскаде) */
.info-panel.flash-panel,
#right-panel.flash-panel {
  box-shadow: 
    0 0 20px rgba(0, 240, 255, 0.2),
    0 0 40px rgba(0, 240, 255, 0.1),
    inset 0 0 15px rgba(0, 240, 255, 0.06);
  border-color: rgba(0, 240, 255, 0.3);
}

/* ИСПРАВЛЕНИЕ: Фон добавляется через JavaScript, а не через CSS класс */

/* Сцена с логотипом DEFO */
#intro-logo-scene {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 40; /* Поверх фоновых слоев */
  /* Темный градиент для логотипа DEFO */
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #0a0a12 70%);
}

/* Логотип DEFO - начальный экран */
.intro-logo {
  width: 350px;
  height: auto;
  opacity: 0;
  transform: scale(0.5);
  filter: drop-shadow(0 0 30px rgba(74, 144, 217, 0.8));
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.intro-logo.intro-logo-appear {
  opacity: 1;
  transform: scale(1);
}

/* Текст под логотипом */
.intro-logo-text {
  margin-top: 30px;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 10px;
  color: #6ab0ff;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
  text-shadow: 0 0 20px rgba(74, 144, 217, 0.6);
}

.intro-logo-text.intro-logo-text-appear {
  opacity: 1;
  transform: translateY(0);
}

/* Логотип на финальном экране - маленький в углу */
.intro-logo-small {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 150px;
  height: auto;
  opacity: 0;
  transform: translateX(-20px);
  filter: drop-shadow(0 0 15px rgba(74, 144, 217, 0.6));
  transition: all 0.5s ease-out;
}

.intro-logo-small.intro-logo-final-appear {
  opacity: 0.9;
  transform: translateX(0);
}

#intro-scene {
  position: absolute;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 30; /* Поверх фоновых слоев */
  width: 100%;
  height: 100%;
  gap: 20px;
  /* Прозрачный фон - будет виден фон контейнера (screen1.jpeg) */
  background: transparent;
}

/* Контейнер для логотипа с пульсирующей рамкой (в 2 раза меньше) */
.intro-game-logo-container {
  position: relative;
  width: 35%;
  max-width: 400px;
  height: 35%;
  max-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid rgba(106, 176, 255, 0.8);
  box-shadow: 
    0 0 20px rgba(74, 144, 217, 0.6),
    0 0 40px rgba(106, 176, 255, 0.4),
    inset 0 0 30px rgba(106, 176, 255, 0.2);
  animation: intro-border-pulse 2s ease-in-out infinite;
  background: transparent;
  opacity: 0;
  transition: opacity 0.8s ease-in-out, background 0.8s ease-in-out;
}

@keyframes intro-border-pulse {
  0%, 100% {
    border-color: rgba(106, 176, 255, 0.8);
    box-shadow: 
      0 0 20px rgba(74, 144, 217, 0.6),
      0 0 40px rgba(106, 176, 255, 0.4),
      inset 0 0 30px rgba(106, 176, 255, 0.2);
  }
  50% {
    border-color: rgba(150, 200, 255, 1);
    box-shadow: 
      0 0 30px rgba(106, 176, 255, 0.9),
      0 0 60px rgba(74, 144, 217, 0.6),
      inset 0 0 40px rgba(150, 200, 255, 0.3);
  }
}

/* Canvas для логотипа GameLogo.png с эффектом построчной загрузки */
.intro-logo-canvas {
  width: 100%;
  height: 100%;
  opacity: 1;
}

#intro-content-scene {
  position: absolute;
  text-align: left;
  z-index: 5;
  opacity: 0;
  color: var(--text-primary);
  max-width: 800px;
  padding: 20px;
}

/* Заголовок WARLORDS (крупнее) */
#intro-screen .epic-title {
  font-family: 'Ruslan Display', serif;
  font-size: 6.5rem;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 10px;
  margin: 0;
  opacity: 0;
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.5), 0 0 40px rgba(0, 240, 255, 0.3), 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Подзаголовок ONLINE (меньше, под WARLORDS) */
#intro-screen .epic-subtitle {
  font-family: 'Ruslan Display', serif;
  font-size: 3.5rem;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: #6ab0ff;
  text-transform: uppercase;
  letter-spacing: 6px;
  margin: -10px 0 0 0;
  opacity: 0;
  text-shadow: 0 0 20px rgba(74, 144, 217, 0.6), 0 3px 6px rgba(0, 0, 0, 0.5);
}

/* Подзаголовок - лозунг */
#intro-screen .studio-subtitle {
  font-family: 'Ruslan Display', serif;
  font-size: 1.5rem;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: #6ab0ff;
  margin-top: 20px;
  opacity: 0;
  letter-spacing: 2px;
  text-transform: none;
  text-shadow: 0 0 20px rgba(74, 144, 217, 0.6), 2px 2px 4px rgba(0, 0, 0, 0.9);
}

/* Список фич */
#intro-screen .game-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#intro-screen .game-features-list li {
  font-size: 2rem;
  margin-bottom: 15px;
  opacity: 0;
  transform: translateY(30px);
  display: flex;
  align-items: center;
  color: var(--text-primary);
}

#intro-screen .game-features-list li::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: var(--accent-cyan);
  margin-right: 15px;
  transform: rotate(45deg);
  box-shadow: 0 0 10px var(--accent-cyan);
}

/* ================= АНИМАЦИИ ЗАСТАВКИ ================= */

/* Появление ЭПИК БАТЛ (резкий удар) */
.intro-anim-slam-in {
  animation: introSlamIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes introSlamIn {
  0% { opacity: 0; transform: scale(3); filter: blur(10px); }
  70% { opacity: 1; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* Появление студии (плавное всплытие) */
.intro-anim-fade-up {
  animation: introFadeUp 1s ease-out forwards;
}

@keyframes introFadeUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Отлет вверх (для ЭПИК БАТЛ) */
.intro-anim-fly-out-up {
  animation: introFlyOutUp 1.2s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@keyframes introFlyOutUp {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-150vh) scale(0.5) rotate(-10deg); opacity: 0; }
}

/* Отлет вниз (для студии) */
.intro-anim-fly-out-down {
  animation: introFlyOutDown 1.2s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@keyframes introFlyOutDown {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(150vh) scale(0.5) rotate(10deg); opacity: 0; }
}

/* Появление списка (поочередно) */
.intro-anim-list-reveal {
  animation: introListReveal 0.8s ease-out forwards;
}

@keyframes introListReveal {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Адаптив для мобильных и горизонтальных экранов */
@media (max-width: 768px) {
  #intro-screen .epic-title { font-size: 2.5rem; letter-spacing: 3px; }
  #intro-screen .epic-subtitle { font-size: 1.4rem; letter-spacing: 2px; margin: -5px 0 0 0; }
  #intro-screen .studio-subtitle { font-size: 0.85rem; }
  #intro-screen .game-features-list li { font-size: 1rem; }
  .intro-logo { width: 120px; }
  .intro-logo-text { font-size: 0.85rem; letter-spacing: 3px; }
  .intro-logo-small { width: 60px; top: 8px; left: 8px; }
  .intro-game-logo-container { width: 70%; max-width: 300px; height: 30%; max-height: 200px; }
  #intro-scene { gap: 12px; }
  .intro-skip-link { font-size: 0.9rem; }
}

/* Адаптив для горизонтальных экранов (landscape) */
@media (max-height: 600px) and (orientation: landscape) {
  #intro-screen .epic-title { font-size: 2.8rem; letter-spacing: 4px; }
  #intro-screen .epic-subtitle { font-size: 1.6rem; letter-spacing: 2px; margin: -6px 0 0 0; }
  #intro-screen .studio-subtitle { font-size: 0.85rem; margin-top: 8px; }
  .intro-logo { width: 150px; }
  .intro-logo-text { font-size: 0.9rem; letter-spacing: 5px; margin-top: 12px; }
  .intro-game-logo-container { width: 28%; max-width: 300px; height: 35%; max-height: 200px; }
  #intro-scene { gap: 8px; }
  /* Ссылка "пропустить заставку" НЕ уменьшается */
  .intro-skip-link { font-size: 0.9rem; }
}

/* Финальная сцена с кнопкой (LEGACY — больше не используется) */
#intro-final-scene {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 30;
}

/* ============================================
   INTRO GUIDE SCENE — Экран гайда по игре (v4)
   ============================================ */
#intro-guide-scene {
  position: absolute;
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  z-index: 30;
  background: transparent;
  overflow: hidden;
}

.intro-guide-scroll-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  padding: 0;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

/* Скроллбар гайда */
.intro-guide-scroll-container::-webkit-scrollbar {
  width: 8px;
}
.intro-guide-scroll-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.4);
}
.intro-guide-scroll-container::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4a90d9, #2563a8);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(74, 144, 217, 0.5);
}
.intro-guide-scroll-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6ab0ff, #4a90d9);
}

/* ===== ЗАГОЛОВОК ГАЙДА ===== */
.guide-header {
  text-align: center;
  padding: 60px 30px 40px;
  background: linear-gradient(180deg, rgba(10, 10, 18, 0.95) 0%, rgba(10, 10, 18, 0.7) 100%);
  border-bottom: 2px solid rgba(106, 176, 255, 0.3);
  position: relative;
}
.guide-header-defo {
  margin-bottom: 20px;
}
.guide-header-logo {
  width: 80px;
  height: auto;
  filter: drop-shadow(0 0 15px rgba(74, 144, 217, 0.6));
  opacity: 0.8;
}
.guide-main-title {
  font-family: 'Ruslan Display', serif;
  font-size: 3rem;
  font-weight: normal;
  color: #e0e0e0;
  text-transform: uppercase;
  letter-spacing: 6px;
  margin: 0;
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.5), 0 4px 8px rgba(0, 0, 0, 0.8);
  line-height: 1.2;
}
.guide-title-accent {
  color: #6ab0ff;
  text-shadow: 0 0 30px rgba(106, 176, 255, 0.8), 0 0 60px rgba(74, 144, 217, 0.4);
}
.guide-divider {
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4a90d9, transparent);
  margin: 20px auto;
  box-shadow: 0 0 10px rgba(74, 144, 217, 0.5);
}
.guide-subtitle {
  font-family: 'Ruslan Display', serif;
  font-size: 1.1rem;
  color: #888;
  letter-spacing: 2px;
  margin: 0;
  font-weight: normal;
}

/* ===== СЕКЦИИ ГАЙДА ===== */
.guide-section {
  position: relative;
  padding: 40px 50px;
  background: rgba(10, 10, 18, 0.85);
  border-bottom: 1px solid rgba(106, 176, 255, 0.15);
  overflow: hidden;
}
.guide-section-dark {
  background: rgba(5, 5, 12, 0.92);
}
.guide-section-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}
.guide-section-header h2 {
  font-family: 'Ruslan Display', serif;
  font-size: 1.6rem;
  font-weight: normal;
  color: #00f0ff;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0;
  text-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}

/* ===== ТЕКСТ ГАЙДА ===== */
.guide-text {
  font-size: 1rem;
  color: #c0c0d0;
  line-height: 1.8;
  margin: 0 0 15px 0;
  max-width: 700px;
}
.guide-highlight {
  color: #00f0ff;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}
.guide-accent {
  color: #6ab0ff;
  text-shadow: 0 0 6px rgba(106, 176, 255, 0.3);
}
.guide-green {
  color: #00ff88;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.4);
}
.guide-tip {
  background: rgba(0, 240, 255, 0.05);
  border-left: 3px solid #00f0ff;
  padding: 10px 15px;
  border-radius: 0 6px 6px 0;
  margin-top: 10px;
  font-style: normal;
}
.guide-tip em {
  color: #a0d0e0;
}

/* ===== РЯДЫ ИКОНОК ===== */
.guide-icon-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 15px 0;
  padding: 10px;
  justify-content: center;
}
.guide-icon-row-animated .guide-icon-float {
  animation: guideIconBob 3s ease-in-out infinite;
}

/* ===== ПЛАВАЮЩИЕ ИКОНКИ ===== */
.guide-icon-float {
  transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
  opacity: 0.5;
  transform: scale(0.8);
  filter: brightness(0.6);
}
.guide-icon-float.guide-icon-active {
  opacity: 1;
  transform: scale(1);
  filter: brightness(1) drop-shadow(0 0 6px rgba(0, 240, 255, 0.5));
}
@keyframes guideIconBob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.05); }
}

/* ===== ВАЛЬКИРИИ ===== */
.guide-valkyrie {
  position: absolute;
  width: 300px;
  height: 300px;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 1.5s ease;
  z-index: 0;
  filter: drop-shadow(0 0 25px rgba(106, 176, 255, 0.4));
  pointer-events: none;
}
.guide-valkyrie-left {
  left: 10%;
  top: 50%;
  transform: translateY(-50%) rotate(-25deg);
}
.guide-valkyrie-right {
  right: 10%;
  top: 50%;
  transform: translateY(-50%) rotate(25deg);
}
.guide-visible .guide-valkyrie {
  opacity: 0.3;
}

/* ===== REVEAL АНИМАЦИИ ===== */
.guide-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.guide-reveal.guide-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== УПРАВЛЕНИЕ ===== */
.guide-controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 10px;
}
.guide-control-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  background: rgba(0, 240, 255, 0.05);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: 8px;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease, background 0.3s ease, border-color 0.3s ease;
}
.guide-control-item.guide-item-visible {
  opacity: 1;
  transform: translateX(0);
}
.guide-control-item:hover {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.4);
}
.guide-key-group {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.guide-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  background: linear-gradient(180deg, #2a3a4a, #1a2a3a);
  border: 1px solid #4a90d9;
  border-radius: 6px;
  color: #6ab0ff;
  font-family: 'Consolas', monospace;
  font-size: 0.85rem;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-shadow: 0 0 6px rgba(106, 176, 255, 0.5);
}
.guide-key.wide {
  min-width: 80px;
  font-size: 0.75rem;
}
.guide-control-desc {
  color: #a0b0c0;
  font-size: 0.9rem;
}

/* ===== СТАТИСТИКА ===== */
.guide-stats-showcase {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 15px 0;
}
.guide-stat-card {
  text-align: center;
  padding: 15px 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.guide-stat-card.guide-item-visible {
  opacity: 1;
  transform: translateY(0);
}
.guide-stat-card:hover {
  border-color: rgba(0, 240, 255, 0.6);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}
.guide-stat-icon {
  margin-bottom: 8px;
}
.guide-stat-label {
  font-family: 'Ruslan Display', serif;
  font-size: 0.8rem;
  font-weight: normal;
  color: #00f0ff;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.guide-stat-desc {
  font-size: 0.75rem;
  color: #888;
  line-height: 1.3;
}

/* ===== СПЕЦИАЛИЗАЦИИ ===== */
.guide-spec-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 15px 0;
}
.guide-spec-card {
  text-align: center;
  padding: 15px 8px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(106, 176, 255, 0.3);
  border-radius: 8px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease;
}
.guide-spec-card.guide-item-visible {
  opacity: 1;
  transform: scale(1);
}
.guide-spec-card:hover {
  box-shadow: 0 0 20px rgba(106, 176, 255, 0.3);
  transform: scale(1.05);
}
.guide-spec-icon {
  margin-bottom: 8px;
}
.guide-spec-name {
  font-family: 'Ruslan Display', serif;
  font-size: 0.85rem;
  font-weight: normal;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.guide-spec-stats {
  font-family: 'Consolas', monospace;
  font-size: 0.65rem;
  color: #888;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.guide-spec-desc {
  font-size: 0.7rem;
  color: #a0a0b0;
  line-height: 1.3;
}

/* ===== НИШТЯКИ ===== */
.guide-loot-showcase {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 15px 0;
  max-width: 500px;
}
.guide-loot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: rgba(255, 215, 0, 0.03);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.guide-loot-item.guide-item-visible {
  opacity: 1;
  transform: translateY(0);
}
.guide-loot-item:hover {
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
}
.guide-loot-item span {
  font-size: 0.7rem;
  color: #FFD700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ===== УРОВНИ ===== */
.guide-levels-list {
  margin: 15px 0;
}
.guide-level-row {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 15px;
  background: rgba(0, 0, 0, 0.3);
  border-left: 3px solid rgba(106, 176, 255, 0.3);
  margin-bottom: 4px;
  border-radius: 0 6px 6px 0;
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.3s ease, border-color 0.3s ease;
}
.guide-level-row.guide-item-visible {
  opacity: 1;
  transform: translateX(0);
}
.guide-level-row:hover {
  background: rgba(106, 176, 255, 0.08);
  border-color: #6ab0ff;
}
.guide-level-num {
  font-family: 'Consolas', monospace;
  font-size: 1.1rem;
  font-weight: bold;
  color: #4a90d9;
  min-width: 30px;
  text-shadow: 0 0 8px rgba(74, 144, 217, 0.5);
}
.guide-level-name {
  font-family: 'Ruslan Display', serif;
  font-size: 1rem;
  font-weight: normal;
  color: #e0e0e0;
  flex: 1;
  letter-spacing: 1px;
}
.guide-level-desc {
  font-size: 0.8rem;
  color: #666;
}
.guide-level-final {
  border-left-color: #ff4466 !important;
  background: rgba(255, 68, 102, 0.05) !important;
}
.guide-level-final .guide-level-num {
  color: #ff4466;
  text-shadow: 0 0 10px rgba(255, 68, 102, 0.6);
}
.guide-level-final .guide-level-name {
  color: #ff6688;
  text-shadow: 0 0 8px rgba(255, 68, 102, 0.4);
}

/* ===== ПРОГРЕССИЯ ===== */
.guide-progression-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 20px 0;
  padding: 15px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 240, 255, 0.1);
}
.guide-prog-step {
  padding: 8px 14px;
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 6px;
  font-family: 'Ruslan Display', serif;
  font-size: 0.8rem;
  font-weight: normal;
  color: #888;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.guide-prog-recruit {
  color: #888;
  border-color: rgba(136, 136, 136, 0.3);
}
.guide-prog-sergeant {
  color: #88ff88;
  border-color: rgba(136, 255, 136, 0.4);
}
.guide-prog-lieutenant {
  color: #ffff88;
  border-color: rgba(255, 255, 136, 0.4);
}
.guide-prog-major {
  color: #ffaa44;
  border-color: rgba(255, 170, 68, 0.4);
  box-shadow: 0 0 6px rgba(255, 170, 68, 0.15);
}
.guide-prog-colonel {
  color: #ff8844;
  border-color: rgba(255, 136, 68, 0.5);
  box-shadow: 0 0 8px rgba(255, 136, 68, 0.2);
}
.guide-prog-general {
  color: #ff4444;
  border-color: rgba(255, 68, 68, 0.6);
  box-shadow: 0 0 12px rgba(255, 68, 68, 0.4);
  animation: guideGeneralPulse 2s ease-in-out infinite;
}
@keyframes guideGeneralPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 68, 68, 0.4); text-shadow: 0 0 5px rgba(255, 68, 68, 0.3); }
  50% { box-shadow: 0 0 30px rgba(255, 68, 68, 0.8), 0 0 50px rgba(255, 68, 68, 0.3); text-shadow: 0 0 15px rgba(255, 68, 68, 0.8); }
}
.guide-prog-arrow {
  color: #4a90d9;
  font-size: 1.2rem;
  text-shadow: 0 0 6px rgba(74, 144, 217, 0.4);
}

/* ===== ФИНАЛЬНАЯ СЕКЦИЯ ===== */
.guide-final-section {
  text-align: center;
  padding: 60px 30px;
  background: linear-gradient(180deg, rgba(10, 10, 18, 0.85), rgba(15, 20, 30, 0.95));
  border-top: 2px solid rgba(106, 176, 255, 0.3);
}
.guide-final-ornament {
  width: 150px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4a90d9, #00f0ff, #4a90d9, transparent);
  margin: 20px auto;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}
.guide-final-title {
  font-family: 'Ruslan Display', serif;
  font-size: 2.5rem;
  font-weight: normal;
  color: #e0e0e0;
  letter-spacing: 6px;
  margin: 20px 0;
  text-shadow: 0 0 25px rgba(0, 240, 255, 0.5), 0 4px 8px rgba(0, 0, 0, 0.8);
  animation: guideFinalTitleGlow 3s ease-in-out infinite alternate;
}
@keyframes guideFinalTitleGlow {
  from { text-shadow: 0 0 20px rgba(0, 240, 255, 0.4), 0 4px 8px rgba(0, 0, 0, 0.8); }
  to { text-shadow: 0 0 35px rgba(106, 176, 255, 0.8), 0 0 60px rgba(0, 240, 255, 0.3), 0 4px 8px rgba(0, 0, 0, 0.8); }
}
.guide-final-text {
  font-size: 1.1rem;
  color: #a0b0c0;
  line-height: 1.8;
  max-width: 600px;
  margin: 0 auto 30px;
}

/* ===== КНОПКА НАЧАТЬ КАМПАНИЮ ===== */
.intro-guide-start-btn {
  font-family: 'Ruslan Display', serif;
  font-size: 2rem;
  font-weight: normal;
  padding: 22px 70px;
  background: linear-gradient(180deg, #4a90d9 0%, #2563a8 50%, #1a4a7a 100%);
  color: #fff;
  border: 3px solid #6ab0ff;
  border-radius: 15px;
  cursor: pointer;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  text-transform: uppercase;
  letter-spacing: 3px;
  box-shadow: 
    0 0 40px rgba(74, 144, 217, 0.7),
    0 8px 25px rgba(0, 0, 0, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.4s ease;
  animation: guideBtnPulse 2.5s ease-in-out infinite;
  margin: 10px 0 20px;
  position: relative;
  z-index: 5;
}
.intro-guide-start-btn:hover {
  background: linear-gradient(180deg, #5aa0e9 0%, #3573b8 50%, #2a5a8a 100%);
  border-color: #8ac0ff;
  transform: scale(1.08);
  box-shadow: 
    0 0 60px rgba(74, 144, 217, 0.9),
    0 12px 35px rgba(0, 0, 0, 0.6),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
}
.intro-guide-start-btn:active {
  transform: scale(0.98);
}
@keyframes guideBtnPulse {
  0%, 100% { box-shadow: 0 0 40px rgba(74, 144, 217, 0.7), 0 8px 25px rgba(0, 0, 0, 0.5); }
  50% { box-shadow: 0 0 60px rgba(74, 144, 217, 1), 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 80px rgba(106, 176, 255, 0.3); }
}

/* ===== АДАПТИВ ===== */
@media (max-width: 768px) {
  .guide-header { padding: 20px 12px 15px; }
  .guide-header-logo { width: 50px; }
  .guide-main-title { font-size: 1.4rem; letter-spacing: 1.5px; }
  .guide-subtitle { font-size: 0.8rem; }
  .guide-divider { width: 120px; margin: 12px auto; }
  .guide-section { padding: 15px 12px; }
  .guide-section-header { gap: 10px; margin-bottom: 12px; }
  .guide-section-header h2 { font-size: 0.9rem; letter-spacing: 0.5px; }
  .guide-text { font-size: 0.75rem; line-height: 1.5; margin-bottom: 10px; }
  .guide-tip { padding: 8px 10px; font-size: 0.7rem; }
  .guide-controls-grid { grid-template-columns: 1fr; gap: 8px; }
  .guide-control-item { padding: 8px 10px; gap: 8px; }
  .guide-key { min-width: 28px; height: 28px; font-size: 0.7rem; }
  .guide-key.wide { min-width: 60px; font-size: 0.65rem; }
  .guide-control-desc { font-size: 0.7rem; }
  .guide-stats-showcase { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .guide-stat-card { padding: 10px 8px; }
  .guide-stat-label { font-size: 0.7rem; }
  .guide-stat-desc { font-size: 0.6rem; }
  .guide-spec-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .guide-spec-card { padding: 10px 6px; }
  .guide-spec-icon { margin-bottom: 4px; }
  .guide-spec-name { font-size: 0.7rem; }
  .guide-spec-stats { font-size: 0.55rem; }
  .guide-spec-desc { font-size: 0.6rem; }
  .guide-loot-showcase { grid-template-columns: repeat(4, 1fr); gap: 6px; max-width: 100%; }
  .guide-loot-item { padding: 8px 4px; gap: 4px; }
  .guide-loot-item span { font-size: 0.55rem; }
  .guide-valkyrie { width: 80px; height: 80px; opacity: 0.15; }
  .guide-valkyrie-left { left: 1%; }
  .guide-valkyrie-right { right: 1%; }
  .guide-levels-list { margin: 10px 0; }
  .guide-level-row { padding: 6px 10px; gap: 8px; }
  .guide-level-num { font-size: 0.8rem; min-width: 22px; }
  .guide-level-name { font-size: 0.75rem; }
  .guide-level-desc { font-size: 0.6rem; }
  .guide-icon-row { gap: 5px; padding: 6px; }
  .guide-progression-bar { flex-wrap: wrap; gap: 4px; padding: 10px; }
  .guide-prog-step { padding: 4px 6px; font-size: 0.55rem; }
  .guide-prog-arrow { font-size: 0.7rem; }
  .guide-final-section { padding: 30px 15px; }
  .guide-final-title { font-size: 1.3rem; letter-spacing: 2px; }
  .guide-final-text { font-size: 0.8rem; line-height: 1.6; }
  .intro-guide-start-btn { font-size: 1.1rem; padding: 14px 35px; width: 90%; max-width: 300px; box-sizing: border-box; }
  .guide-final-ornament { width: 100px; margin: 12px auto; }
  .intro-skip-link { font-size: 0.9rem; }
}

/* Адаптив для горизонтальных экранов (landscape) */
@media (max-height: 600px) and (orientation: landscape) {
  .guide-header { padding: 15px 15px 10px; }
  .guide-main-title { font-size: 1.3rem; letter-spacing: 2px; }
  .guide-section { padding: 12px 15px; }
  .guide-section-header h2 { font-size: 0.9rem; }
  .guide-text { font-size: 0.7rem; line-height: 1.4; }
  .guide-valkyrie { width: 100px; height: 100px; opacity: 0.15; }
  .guide-final-section { padding: 20px 15px; }
  .guide-final-title { font-size: 1.2rem; }
  .intro-guide-start-btn { font-size: 1rem; padding: 10px 30px; }
  .guide-control-item { padding: 6px 10px; }
  .guide-key { min-width: 28px; height: 28px; font-size: 0.7rem; }
  .guide-key.wide { min-width: 60px; }
  .guide-stat-card { padding: 8px 6px; }
  .guide-spec-card { padding: 8px 6px; }
  .intro-skip-link { font-size: 0.9rem; }
}

/* ============================================
   МОДАЛЬНОЕ ОКНО ПРАВИЛ ИГРЫ (из меню)
   ============================================ */
#game-rules-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#game-rules-modal.rules-modal-open {
  opacity: 1;
}
#game-rules-modal.rules-modal-closing {
  opacity: 0;
}

.rules-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
}

.rules-modal-container {
  position: relative;
  width: 90%;
  max-width: 720px;
  height: 85vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(8, 14, 28, 0.98), rgba(4, 8, 18, 0.99));
  border: 1px solid rgba(74, 144, 217, 0.5);
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(74, 144, 217, 0.2), 0 20px 60px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  z-index: 1;
}

.rules-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(74, 144, 217, 0.5);
  border-radius: 50%;
  color: #6ab0ff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.rules-modal-close:hover {
  background: rgba(74, 144, 217, 0.3);
  border-color: #6ab0ff;
  color: #fff;
  transform: scale(1.1);
}

.rules-modal-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 0;
}

/* Компактность: уменьшаем отступы внутри модалки */
#game-rules-modal .guide-header {
  padding: 30px 20px 20px;
}
#game-rules-modal .guide-main-title {
  font-size: 2rem;
}
#game-rules-modal .guide-section {
  padding: 25px 30px;
}
#game-rules-modal .guide-section-header h2 {
  font-size: 1.2rem;
}
#game-rules-modal .guide-text {
  font-size: 0.9rem;
}
#game-rules-modal .guide-valkyrie {
  width: 120px;
  height: 120px;
}
#game-rules-modal .guide-final-section {
  padding-bottom: 10px;
}
#game-rules-modal .guide-final-title {
  font-size: 1.4rem;
}

/* Скроллбар модалки правил */
.rules-modal-scroll::-webkit-scrollbar {
  width: 6px;
}
.rules-modal-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
}
.rules-modal-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4a90d9, #2563a8);
  border-radius: 3px;
}
.rules-modal-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6ab0ff, #4a90d9);
}

.rules-modal-footer {
  flex-shrink: 0;
  padding: 12px 20px;
  background: linear-gradient(0deg, rgba(8, 14, 28, 1), rgba(8, 14, 28, 0.9));
  border-top: 1px solid rgba(74, 144, 217, 0.3);
  text-align: center;
}

.rules-modal-back-btn {
  font-family: 'Ruslan Display', serif;
  font-size: 1.1rem;
  letter-spacing: 2px;
  color: #fff;
  background: linear-gradient(180deg, #4a90d9 0%, #2563a8 50%, #1a4a7a 100%);
  border: 2px solid #6ab0ff;
  border-radius: 8px;
  padding: 12px 40px;
  cursor: pointer;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 20px rgba(74, 144, 217, 0.4), 0 4px 15px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}
.rules-modal-back-btn:hover {
  background: linear-gradient(180deg, #5aa0e9 0%, #3573b8 50%, #2a5a8a 100%);
  border-color: #8ac0ff;
  box-shadow: 0 0 30px rgba(74, 144, 217, 0.6), 0 4px 15px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}
.rules-modal-back-btn:active {
  transform: scale(0.98);
}

@media (max-width: 768px) {
  .rules-modal-container {
    width: 95%;
    height: 90vh;
  }
  #game-rules-modal .guide-section {
    padding: 15px 15px;
  }
  #game-rules-modal .guide-main-title {
    font-size: 1.5rem;
  }
  .rules-modal-back-btn {
    font-size: 0.9rem;
    padding: 10px 30px;
  }
}

/* Кнопка "Начать кампанию" на заставке */
#intro-screen .intro-start-btn {
  font-family: 'Ruslan Display', serif;
  font-size: 1.8rem;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 20px 60px;
  background: linear-gradient(180deg, #4a90d9 0%, #2563a8 50%, #1a4a7a 100%);
  color: #fff;
  border: 3px solid #6ab0ff;
  border-radius: 15px;
  cursor: pointer;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: 
    0 0 20px rgba(74, 144, 217, 0.4),
    0 8px 20px rgba(0, 0, 0, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.2);
  transition: all 2s ease-out;
}

/* Класс для вспышки кнопки */
#intro-screen .intro-start-btn.flash {
  box-shadow: 
    0 0 40px rgba(74, 144, 217, 0.7),
    0 0 70px rgba(74, 144, 217, 0.4),
    0 8px 20px rgba(0, 0, 0, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
  border-color: rgba(138, 192, 255, 0.8);
  transform: scale(1.01);
}

#intro-screen .intro-start-btn:hover {
  background: linear-gradient(180deg, #5aa0e9 0%, #3573b8 50%, #2a5a8a 100%);
  border-color: #8ac0ff;
  box-shadow: 
    0 0 50px rgba(74, 144, 217, 0.8),
    0 10px 30px rgba(0, 0, 0, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

#intro-screen .intro-start-btn:active {
  transform: scale(0.98);
  box-shadow: 
    0 0 20px rgba(74, 144, 217, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.3);
}

@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 30px rgba(74, 144, 217, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 0 50px rgba(74, 144, 217, 0.9), 0 8px 20px rgba(0, 0, 0, 0.4); }
}


/* ============================================
   BATTLE END SCREEN - Экран окончания битвы
   ============================================ */

#battle-end-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  opacity: 0;
  transition: opacity 0.5s ease-out;
  pointer-events: none;
  padding: 0;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

#battle-end-screen.visible {
  opacity: 1;
  pointer-events: auto;
}

#battle-end-screen.hiding {
  opacity: 0;
  pointer-events: none;
}

.battle-end-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('screen2.jpeg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease-in;
  z-index: 0;
  pointer-events: none;
}

#battle-end-screen.visible .battle-end-overlay {
  opacity: 1;
}

.battle-end-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  width: 90%;
  margin: 20px auto;
  padding: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  animation: battleEndSlideIn 0.6s ease-out;
  overflow: visible;
  border-radius: var(--border-radius-lg);
  border: 2px solid rgba(0, 255, 136, 0.3);
  background: rgba(10, 10, 18, 0.92);
  flex-shrink: 0;
}

/* Пульсирующая рамка контейнера — ПОБЕДА */
.battle-end-content.container-pulse-victory {
  animation: battleEndSlideIn 0.6s ease-out, containerPulseVictory 2s ease-in-out infinite;
}

/* Пульсирующая рамка контейнера — ПОРАЖЕНИЕ */
.battle-end-content.container-pulse-defeat {
  animation: battleEndSlideIn 0.6s ease-out, containerPulseDefeat 2s ease-in-out infinite;
}

/* Скроллбар для экрана окончания */
#battle-end-screen::-webkit-scrollbar {
  width: 10px;
}

#battle-end-screen::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

#battle-end-screen::-webkit-scrollbar-thumb {
  background: var(--accent-cyan);
  border-radius: 5px;
}

#battle-end-screen::-webkit-scrollbar-thumb:hover {
  background: var(--accent-cyan-dim);
}

@keyframes battleEndSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Заголовок битвы */
.battle-end-header {
  margin-bottom: 20px;
}

.battle-end-header .battle-name {
  font-size: 1.2rem;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 5px;
}

.battle-end-header .battle-number {
  font-size: 0.9rem;
  color: var(--text-dim);
  letter-spacing: 1px;
}

/* Баннер результата */
.result-banner {
  padding: 8px 16px;
  margin: 0;
  border-radius: 0;
  border-top-left-radius: var(--border-radius-lg);
  border-top-right-radius: var(--border-radius-lg);
  overflow: hidden;
  flex-shrink: 0;
}

.result-banner.victory {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 200, 100, 0.1));
  border: 2px solid var(--accent-green);
  box-shadow: 0 0 40px rgba(0, 255, 136, 0.3), inset 0 0 60px rgba(0, 255, 136, 0.1);
}

.result-banner.defeat {
  background: linear-gradient(135deg, rgba(255, 51, 102, 0.2), rgba(200, 30, 60, 0.1));
  border: 2px solid var(--accent-red);
  box-shadow: 0 0 40px rgba(255, 51, 102, 0.3), inset 0 0 60px rgba(255, 51, 102, 0.1);
}

.result-title {
  font-family: 'Ruslan Display', serif;
  font-size: 3.2em;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 0 0 4px 0;
  text-transform: uppercase;
  letter-spacing: 4px;
  animation: resultPulse 1.5s ease-in-out infinite;
}

.result-banner.victory .result-title {
  color: var(--accent-green);
  text-shadow: 0 0 30px rgba(0, 255, 136, 0.8);
}

.result-banner.defeat .result-title {
  color: var(--accent-red);
  text-shadow: 0 0 30px rgba(255, 51, 102, 0.8);
}

@keyframes resultPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* Покачивание иконки в шапке (чуть-чуть по часовой стрелке) */
@keyframes iconRock {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(8deg); }
  75% { transform: rotate(-6deg); }
}

/* Пульсирующая рамка валькирии — ПОБЕДА (зелёная) */
@keyframes valkPulseVictory {
  0%, 100% {
    border-color: rgba(0, 255, 136, 0.8);
    box-shadow:
      0 0 15px rgba(0, 255, 136, 0.5),
      0 0 35px rgba(0, 255, 136, 0.3),
      inset 0 0 20px rgba(0, 255, 136, 0.15);
  }
  50% {
    border-color: rgba(100, 255, 180, 1);
    box-shadow:
      0 0 25px rgba(0, 255, 136, 0.9),
      0 0 55px rgba(0, 255, 136, 0.5),
      inset 0 0 30px rgba(100, 255, 180, 0.25);
  }
}

/* Пульсирующая рамка валькирии — ПОРАЖЕНИЕ (красная) */
@keyframes valkPulseDefeat {
  0%, 100% {
    border-color: rgba(255, 51, 102, 0.8);
    box-shadow:
      0 0 15px rgba(255, 51, 102, 0.5),
      0 0 35px rgba(255, 51, 102, 0.3),
      inset 0 0 20px rgba(255, 51, 102, 0.15);
  }
  50% {
    border-color: rgba(255, 120, 150, 1);
    box-shadow:
      0 0 25px rgba(255, 51, 102, 0.9),
      0 0 55px rgba(255, 51, 102, 0.5),
      inset 0 0 30px rgba(255, 120, 150, 0.25);
  }
}

/* Пульсирующая рамка общего контейнера — ПОБЕДА */
@keyframes containerPulseVictory {
  0%, 100% {
    border-color: rgba(0, 255, 136, 0.3);
    box-shadow:
      0 0 10px rgba(0, 255, 136, 0.15),
      0 0 25px rgba(0, 255, 136, 0.08);
  }
  50% {
    border-color: rgba(0, 255, 136, 0.6);
    box-shadow:
      0 0 20px rgba(0, 255, 136, 0.35),
      0 0 45px rgba(0, 255, 136, 0.15);
  }
}

/* Пульсирующая рамка общего контейнера — ПОРАЖЕНИЕ */
@keyframes containerPulseDefeat {
  0%, 100% {
    border-color: rgba(255, 51, 102, 0.3);
    box-shadow:
      0 0 10px rgba(255, 51, 102, 0.15),
      0 0 25px rgba(255, 51, 102, 0.08);
  }
  50% {
    border-color: rgba(255, 51, 102, 0.6);
    box-shadow:
      0 0 20px rgba(255, 51, 102, 0.35),
      0 0 45px rgba(255, 51, 102, 0.15);
  }
}

.result-subtitle {
  font-size: 0.95rem;
  color: var(--text-primary);
  letter-spacing: 1px;
}

/* Секции с контентом */
.rewards-section {
  flex-shrink: 0;
  background: rgba(18, 18, 26, 0.6);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 6px 12px;
}

.squads-stats-section {
  flex: 1 1 auto;
  overflow: visible;
  padding: 6px 12px;
  min-height: 0;
  background: rgba(18, 18, 26, 0.6);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

/* Статистика */
.battle-stats-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 25px;
}

.stat-box {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 15px 25px;
  min-width: 100px;
}

.stat-box.survivors {
  border-color: var(--accent-green);
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
}

.stat-box.enemies {
  border-color: var(--accent-red);
  box-shadow: 0 0 15px rgba(255, 51, 102, 0.2);
}

.stat-value {
  font-size: 2rem;
  font-weight: bold;
  font-family: var(--font-mono);
}

.stat-box.survivors .stat-value {
  color: var(--accent-green);
}

.stat-box.enemies .stat-value {
  color: var(--accent-red);
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 5px;
}

/* Топ убийц */
.top-killers-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 15px;
  margin-bottom: 20px;
}

.top-killers-section .section-title {
  font-size: 0.85rem;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

/* НОВОЕ: Статистика отрядов - стили для таблицы */
.squads-stats-section .section-title {
  font-size: 0.85rem;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.squads-stats-section table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.squads-stats-section th {
  text-align: center;
  padding: 8px 4px;
  color: var(--text-dim);
  font-weight: normal;
  font-size: 0.75rem;
}

.squads-stats-section td {
  padding: 10px 4px;
  vertical-align: middle;
}

.squads-stats-section tr {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.2s;
}

.squads-stats-section tr:hover {
  background: rgba(255,255,255,0.05);
}

/* Скроллбар секции отрядов (не нужен — скроллится весь экран) */

.killers-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.killer-row {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius);
  font-size: 0.85rem;
}

.killer-row.blue {
  border-left: 3px solid var(--color-blue);
}

.killer-row.red {
  border-left: 3px solid var(--color-red);
}

.killer-row.green {
  border-left: 3px solid var(--color-green);
}

.killer-row.black {
  border-left: 3px solid #666;
}

.killer-row.dead {
  opacity: 0.6;
}

.killer-rank {
  color: var(--text-dim);
  font-family: var(--font-mono);
  width: 30px;
  flex-shrink: 0;
}

.killer-name {
  flex: 1;
  color: var(--text-primary);
  text-align: left;
}

.killer-kills {
  color: var(--accent-yellow);
  font-family: var(--font-mono);
  font-weight: bold;
}

.no-kills {
  color: var(--text-dim);
  font-style: italic;
  padding: 10px;
}

/* Подсказка */
.battle-end-hint {
  font-size: 0.85rem;
  color: var(--text-dim);
  animation: hintBlink 2s ease-in-out infinite;
}

@keyframes hintBlink {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Адаптив */
@media (max-width: 768px) {
  .battle-end-content {
    padding: 12px;
    max-width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }

  #battle-end-screen {
    touch-action: pan-y;
    overscroll-behavior: contain;
  }

  /* Скроллбар для контента на мобильных */
  .battle-end-content::-webkit-scrollbar {
    width: 6px;
  }
  .battle-end-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
  }
  .battle-end-content::-webkit-scrollbar-thumb {
    background: var(--accent-cyan);
    border-radius: 3px;
  }
  
  .result-title {
    font-size: 1.6em !important;
  }
  
  .battle-stats-grid {
    flex-direction: column;
    gap: 10px;
  }
  
  .stat-box {
    padding: 10px 20px;
  }
  
  .stat-value {
    font-size: 1.5rem;
  }
  
  /* Адаптив для секции отрядов */
  .squads-stats-section {
    overflow: visible;
  }
  
  /* Уменьшаем размер таблицы на мобильных */
  .squads-stats-section table {
    font-size: 0.75rem;
  }
  
  .squads-stats-section th,
  .squads-stats-section td {
    padding: 6px 2px;
  }
}


/* Кнопки экрана окончания битвы */
.battle-end-actions {
  padding: 20px 16px 30px 16px;
  flex-shrink: 0;
}

.battle-end-btn {
  font-family: 'Ruslan Display', serif;
  padding: 10px 30px;
  font-size: 0.95rem;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 2px solid;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

.battle-end-btn.victory-btn {
  color: var(--accent-green);
  border-color: var(--accent-green);
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

.battle-end-btn.victory-btn:hover {
  background: rgba(0, 255, 136, 0.2);
  box-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
  transform: scale(1.05);
}

.battle-end-btn.defeat-btn {
  color: var(--accent-yellow);
  border-color: var(--accent-yellow);
  box-shadow: 0 0 20px rgba(255, 204, 0, 0.3);
}

.battle-end-btn.defeat-btn:hover {
  background: rgba(255, 204, 0, 0.2);
  box-shadow: 0 0 30px rgba(255, 204, 0, 0.5);
  transform: scale(1.05);
}

/* ============================================
   СИСТЕМА ПРОСМОТРА АРМИИ С ВЫБОРОМ СОЛДАТ
   ============================================ */

.unit-card-army {
    position: relative;
    transition: all 0.2s ease;
}

.unit-card-army:hover {
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.3);
}

.unit-card-army.selected {
    box-shadow: 0 0 20px rgba(68, 255, 68, 0.5);
}

.unit-card-army.commander {
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.4);
}

.unit-card-army.commander:hover {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
}

.selection-checkbox {
    transition: all 0.2s ease;
}

.selection-checkbox:hover {
    transform: scale(1.1);
}

.hp-segment {
    transition: background 0.3s ease;
}

/* Анимация для уведомлений */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Стили для панели распределения золота */
#gold-distribution-info {
    transition: all 0.3s ease;
}

/* Стили для input количества HP */
#hp-amount-input:focus {
    outline: none;
    border-color: #ffd700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

/* Адаптивность для сетки солдат */
@media (max-width: 1200px) {
    #soldiers-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media (max-width: 768px) {
    #soldiers-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    
    .army-cards-view {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   MULTIPLAYER LOBBY
   ============================================ */

.multiplayer-lobby {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a25 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    position: absolute; /* ИСПРАВЛЕНИЕ: Позиционируем абсолютно */
    top: 0;
    left: 0;
    z-index: 1000; /* ИСПРАВЛЕНИЕ: Высокий z-index чтобы быть поверх всего */
}

.lobby-content {
    max-width: 900px;
    width: 90%;
    padding: 30px;
}

.lobby-title {
    font-family: 'Ruslan Display', serif;
    font-size: 2.5em;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--accent-cyan);
    text-align: center;
    margin-bottom: 30px;
    text-shadow: 0 0 20px rgba(0, 240, 255, 0.5), 2px 2px 4px rgba(0, 0, 0, 0.9);
}

.lobby-section {
    margin-bottom: 30px;
}

.lobby-section-title {
    font-family: 'Ruslan Display', serif;
    font-size: 1.3em;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--text-primary);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--accent-cyan-dim);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

/* Выбор уровня */
.level-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.level-btn {
    background: var(--bg-tertiary);
    border: 2px solid var(--accent-cyan-dim);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-family: 'Ruslan Display', serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.level-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-cyan);
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.level-btn.selected {
    background: var(--accent-cyan);
    color: var(--bg-primary);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}

.level-btn-number {
    font-size: 1.8em;
    font-weight: normal;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.level-btn-name {
    font-size: 0.85em;
    text-align: center;
    font-weight: normal;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Выбор отряда */
.squad-selector {
    min-height: 200px;
}

.squad-hint {
    color: var(--text-secondary);
    text-align: center;
    padding: 40px;
    font-size: 1.1em;
}

.squad-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.squad-card {
    background: var(--bg-tertiary);
    border: 2px solid var(--accent-cyan-dim);
    border-radius: var(--border-radius);
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 15px;
}

.squad-card:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-cyan);
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.squad-card.selected {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}

.squad-card.selected .squad-info {
    color: var(--bg-primary);
}

.squad-color {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.squad-info {
    flex: 1;
}

.squad-name {
    font-size: 1.1em;
    font-family: 'Ruslan Display', serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    margin-bottom: 5px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.squad-composition {
    font-size: 0.85em;
    font-family: 'Ruslan Display', serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--text-secondary);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.squad-card.selected .squad-composition {
    color: var(--bg-secondary);
}

/* Футер лобби */
.lobby-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--accent-cyan-dim);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* Информация о командире */
.commander-info-section {
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.1), rgba(0, 119, 204, 0.05));
    border: 2px solid var(--accent-cyan-dim);
    border-radius: var(--border-radius-lg);
    padding: 20px;
}

.commander-card-lobby {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--bg-tertiary);
    padding: 20px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.commander-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3em;
    border: 3px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.commander-details {
    flex: 1;
}

.commander-name {
    font-family: 'Ruslan Display', serif;
    font-size: 1.8em;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--accent-cyan);
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

.commander-stats-row {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
}

.commander-stat {
    font-size: 1em;
    color: var(--text-secondary);
    font-family: 'Ruslan Display', serif;
}

.commander-gold {
    font-size: 1.3em;
    color: #ffd700;
    font-weight: bold;
    font-family: 'Ruslan Display', serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

/* Управление ставкой */
.stake-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
}

.stake-btn {
    width: 60px;
    height: 60px;
    font-size: 2em;
    background: var(--bg-tertiary);
    border: 2px solid var(--accent-cyan-dim);
    border-radius: 50%;
    color: var(--accent-cyan);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Ruslan Display', serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stake-btn:hover:not(:disabled) {
    background: var(--accent-cyan);
    color: var(--bg-primary);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}

.stake-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.stake-display {
    background: linear-gradient(135deg, #2a2a1a, #1a1a10);
    border: 3px solid #ffd700;
    border-radius: var(--border-radius-lg);
    padding: 20px 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.stake-display #stake-value {
    font-family: 'Ruslan Display', serif;
    font-size: 3em;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: #ffd700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

.stake-icon {
    font-size: 2em;
}

.stake-info {
    text-align: center;
    margin-top: 15px;
}

.stake-hint {
    color: var(--text-secondary);
    font-size: 0.9em;
    margin-bottom: 10px;
}

.stake-reward {
    font-size: 1.2em;
    color: var(--accent-green);
    font-family: 'Ruslan Display', serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.stake-reward span {
    color: #ffd700;
    font-size: 1.3em;
}

.lobby-info {
    display: flex;
    gap: 30px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.info-label {
    font-size: 0.85em;
    color: var(--text-secondary);
}

.info-value {
    font-size: 1.3em;
    color: var(--accent-cyan);
    font-weight: bold;
}

.lobby-actions {
    display: flex;
    gap: 15px;
}

.lobby-btn {
    padding: 12px 30px;
    font-size: 1.1em;
    font-family: 'Ruslan Display', serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    border: 2px solid;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

.lobby-btn-cancel {
    background: transparent;
    border-color: var(--text-dim);
    color: var(--text-primary);
}

.lobby-btn-cancel:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-secondary);
}

.lobby-btn-start {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: var(--bg-primary);
}

.lobby-btn-start:hover:not(:disabled) {
    background: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
    transform: translateY(-2px);
}

.lobby-btn-start:disabled {
    background: var(--bg-tertiary);
    border-color: var(--text-dim);
    color: var(--text-dim);
    cursor: not-allowed;
}

/* Адаптивность */
@media (max-width: 768px) {
    .lobby-content {
        padding: 20px;
    }
    
    .lobby-title {
        font-family: 'Ruslan Display', serif;
        font-size: 2em;
        font-weight: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    
    .level-selector {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .squad-list {
        grid-template-columns: 1fr;
    }
    
    .lobby-footer {
        flex-direction: column;
        align-items: stretch;
    }
    
    .lobby-info {
        justify-content: space-around;
    }
    
    .lobby-actions {
        width: 100%;
    }
    
    .lobby-btn {
        flex: 1;
    }
}

/* Стиль для 10-го уровня (мультиплеер) */
.level-node.multiplayer-level .level-frame {
    background: linear-gradient(135deg, #ff00aa 0%, #00f0ff 100%);
    border-color: #ff00aa;
}

.level-node.multiplayer-level.unlocked .level-frame {
    box-shadow: 0 0 15px rgba(255, 0, 170, 0.5);
}

.tree-style-multiplayer {
    font-size: 2em;
}


/* ============================================
   MULTIPLAYER HUB - Главный экран мультиплеера
   ============================================ */

.multiplayer-hub {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a0a15 0%, #1a1a2e 50%, #0f0f1e 100%);
    z-index: 9000;
    overflow: hidden;
}

.hub-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
}

/* Шапка */
.hub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    border: 1px solid rgba(0, 170, 255, 0.3);
    margin-bottom: 20px;
}

.player-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.player-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #00aaff;
    overflow: hidden;
}

.player-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.player-name {
    font-family: 'Ruslan Display', serif;
    font-size: 1.2em;
    color: #00f0ff;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.player-stats {
    display: flex;
    gap: 15px;
    font-size: 0.9em;
    color: #aaa;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.hub-stats {
    display: flex;
    gap: 20px;
}

.stat-box {
    text-align: center;
    padding: 10px 20px;
    background: rgba(0, 170, 255, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(0, 170, 255, 0.3);
}

.stat-label {
    font-size: 0.8em;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.stat-value {
    font-family: 'Ruslan Display', serif;
    font-size: 1.5em;
    color: #00f0ff;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

/* Основной контент */
.hub-content {
    flex: 1;
    display: flex;
    gap: 20px;
    overflow: hidden;
}

/* Левая панель */
.hub-left {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Навигация */
.hub-nav {
    display: flex;
    gap: 8px;
    background: rgba(0, 0, 0, 0.4);
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(0, 170, 255, 0.3);
}

.nav-btn {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(26, 26, 46, 0.6);
    border: 1px solid rgba(85, 85, 102, 0.3);
    border-radius: 6px;
    color: #888;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Ruslan Display', serif;
    height: 40px;
}

.nav-btn:hover {
    background: rgba(0, 170, 255, 0.1);
    border-color: rgba(0, 170, 255, 0.5);
    color: #00aaff;
    transform: translateY(-2px);
}

.nav-btn.active {
    background: linear-gradient(135deg, rgba(0, 170, 255, 0.2), rgba(0, 240, 255, 0.1));
    border-color: #00aaff;
    color: #00f0ff;
    box-shadow: 0 0 20px rgba(0, 170, 255, 0.3);
}

.nav-icon {
    font-size: 1.2em;
}

.nav-label {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Контент вкладок */
.hub-tab-content {
    flex: 1;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 1px solid rgba(0, 170, 255, 0.3);
    padding: 15px;
}

/* Список игр */
.games-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.game-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(26, 26, 46, 0.8);
    border: 1px solid rgba(0, 170, 255, 0.3);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.game-card:hover {
    background: rgba(0, 170, 255, 0.1);
    border-color: #00aaff;
    transform: translateX(5px);
}

.game-card.game-full {
    opacity: 0.6;
    border-color: rgba(255, 100, 100, 0.3);
}

.game-icons {
    display: flex;
    gap: 5px;
}

.game-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 170, 255, 0.2);
    border: 1px solid rgba(0, 170, 255, 0.5);
    border-radius: 50%;
    font-size: 1.2em;
}

.game-icon-empty {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px dashed rgba(85, 85, 102, 0.5);
    border-radius: 50%;
    color: #555;
    font-size: 1.5em;
}

.game-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20px;
}

.game-bet {
    font-family: 'Ruslan Display', serif;
    font-size: 1.3em;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    min-width: 100px;
}

.game-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.game-map {
    font-size: 1em;
    color: #00f0ff;
    font-weight: bold;
}

.game-host {
    font-size: 0.85em;
    color: #888;
}

.game-join-btn {
    padding: 10px 25px;
    background: linear-gradient(135deg, #ff4444, #cc0000);
    border: 1px solid #ff6666;
    border-radius: 5px;
    color: white;
    font-family: 'Ruslan Display', serif;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.game-join-btn:hover:not(.disabled) {
    background: linear-gradient(135deg, #ff6666, #ff0000);
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.5);
    transform: scale(1.05);
}

.game-join-btn.disabled {
    background: rgba(100, 100, 100, 0.3);
    border-color: #555;
    color: #666;
    cursor: not-allowed;
}

/* Кнопка создания игры */
.create-game-btn {
    padding: 15px;
    background: linear-gradient(135deg, #00ff00, #00aa00);
    border: 2px solid #00ff00;
    border-radius: 10px;
    color: white;
    font-family: 'Ruslan Display', serif;
    font-size: 1.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.create-game-btn:hover {
    background: linear-gradient(135deg, #00ff44, #00cc00);
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.6);
    transform: scale(1.02);
}

/* Правая панель - Чат */
.hub-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    border: 1px solid rgba(0, 170, 255, 0.3);
    overflow: hidden;
}

.chat-header {
    padding: 15px;
    background: rgba(0, 170, 255, 0.1);
    border-bottom: 1px solid rgba(0, 170, 255, 0.3);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.chat-title {
    font-family: 'Ruslan Display', serif;
    font-size: 1.1em;
    color: #00f0ff;
    text-transform: uppercase;
}

.chat-online {
    font-size: 0.85em;
    color: #888;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-message {
    padding: 8px 12px;
    background: rgba(26, 26, 46, 0.6);
    border-radius: 8px;
    border-left: 3px solid rgba(0, 170, 255, 0.5);
    font-size: 0.9em;
    line-height: 1.4;
}

.chat-user {
    color: #00aaff;
    font-weight: bold;
    margin-right: 8px;
}

.chat-text {
    color: #ccc;
}

.chat-input-container {
    display: flex;
    gap: 10px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(0, 170, 255, 0.3);
}

.chat-input {
    flex: 1;
    padding: 10px 15px;
    background: rgba(26, 26, 46, 0.8);
    border: 1px solid rgba(0, 170, 255, 0.3);
    border-radius: 5px;
    color: white;
    font-size: 0.9em;
    font-family: Arial, sans-serif;
}

.chat-input:focus {
    outline: none;
    border-color: #00aaff;
    box-shadow: 0 0 10px rgba(0, 170, 255, 0.3);
}

.chat-send-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, #00aaff, #0088cc);
    border: 1px solid #00aaff;
    border-radius: 5px;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.chat-send-btn:hover {
    background: linear-gradient(135deg, #00ccff, #00aaff);
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.5);
}

/* Кнопка закрытия */
.hub-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 68, 68, 0.2);
    border: 1px solid rgba(255, 68, 68, 0.5);
    border-radius: 50%;
    color: #ff4444;
    font-size: 1.5em;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hub-close-btn:hover {
    background: rgba(255, 68, 68, 0.4);
    border-color: #ff4444;
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.5);
    transform: scale(1.1);
}

/* Пустое состояние */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-icon {
    font-size: 4em;
    margin-bottom: 20px;
    opacity: 0.5;
}

.empty-text {
    font-family: 'Ruslan Display', serif;
    font-size: 1.3em;
    color: #00f0ff;
    margin-bottom: 10px;
}

.empty-subtext {
    font-size: 0.9em;
    color: #888;
}

/* ============================================
   ВКЛАДКА КЛАНЫ - ВЫБОР БИТВЫ
   ============================================ */

.clans-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 15px;
}

.section-title {
    font-family: 'Ruslan Display', serif;
    font-size: 1.1em;
    color: #00f0ff;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* Карточки битв */
.battle-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.battle-card {
    background: rgba(26, 26, 46, 0.6);
    border: 2px solid rgba(85, 85, 102, 0.3);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.battle-card:hover {
    border-color: rgba(0, 170, 255, 0.5);
    background: rgba(0, 170, 255, 0.1);
    transform: translateY(-2px);
}

.battle-card.selected {
    border-color: #00aaff;
    background: linear-gradient(135deg, rgba(0, 170, 255, 0.2), rgba(0, 240, 255, 0.1));
    box-shadow: 0 0 20px rgba(0, 170, 255, 0.3);
}

.battle-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.battle-number {
    font-family: 'Ruslan Display', serif;
    font-size: 0.75em;
    color: #888;
    text-transform: uppercase;
}

.battle-icon {
    font-size: 1.5em;
}

.battle-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.battle-name {
    font-family: 'Ruslan Display', serif;
    font-size: 1em;
    color: #00f0ff;
    font-weight: bold;
}

.battle-description {
    font-size: 0.75em;
    color: #888;
    line-height: 1.3;
}

/* Выбор цвета */
.color-selection {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.color-selection.hidden {
    display: none;
}

.color-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.color-btn {
    background: rgba(26, 26, 46, 0.6);
    border: 2px solid rgba(85, 85, 102, 0.3);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.color-btn:hover {
    background: rgba(0, 170, 255, 0.1);
    transform: translateY(-2px);
}

.color-btn.selected {
    background: linear-gradient(135deg, rgba(0, 170, 255, 0.2), rgba(0, 240, 255, 0.1));
    box-shadow: 0 0 20px rgba(0, 170, 255, 0.3);
}

.color-preview {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.color-name {
    font-family: 'Ruslan Display', serif;
    font-size: 0.85em;
    color: #00f0ff;
    text-transform: uppercase;
}

/* Выбор отряда с миникартой */
.squad-selection-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.squad-selection-container.hidden {
    display: none;
}

.minimap-wrapper {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(0, 170, 255, 0.3);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#clans-minimap {
    border-radius: 4px;
    cursor: pointer;
}

.minimap-hint {
    font-size: 0.8em;
    color: #888;
    font-style: italic;
}

.start-battle-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #00aaff, #00f0ff);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: 'Ruslan Display', serif;
    font-size: 1.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.start-battle-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #00f0ff, #00aaff);
    box-shadow: 0 0 20px rgba(0, 170, 255, 0.5);
    transform: translateY(-2px);
}

.start-battle-btn:disabled {
    background: rgba(85, 85, 102, 0.3);
    color: #555;
    cursor: not-allowed;
}

/* ============================================
   ВКЛАДКА ТУРНИРЫ
   ============================================ */

.tournament-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 15px;
}

.tournament-header {
    text-align: center;
    padding: 15px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.1));
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
}

.tournament-title {
    font-family: 'Ruslan Display', serif;
    font-size: 1.4em;
    color: #ffd700;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.tournament-description {
    font-size: 0.9em;
    color: #888;
}

/* Обратный отсчет */
.tournament-countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(0, 170, 255, 0.3);
    border-radius: 8px;
}

.countdown-label {
    font-family: 'Ruslan Display', serif;
    font-size: 0.9em;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.countdown-timer {
    font-family: 'Ruslan Display', serif;
    font-size: 3em;
    color: #00f0ff;
    font-weight: bold;
    text-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
    letter-spacing: 3px;
}

.countdown-participants {
    display: flex;
    gap: 8px;
    font-size: 1.1em;
}

.participants-label {
    color: #888;
}

.participants-count {
    color: #00f0ff;
    font-weight: bold;
    font-family: 'Ruslan Display', serif;
}

/* Миникарта турнира */
.tournament-map-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tournament-minimap-wrapper {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(0, 170, 255, 0.3);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#tournament-minimap {
    border-radius: 4px;
    cursor: pointer;
    width: 400px !important;
    height: 400px !important;
    max-width: 400px;
    max-height: 400px;
}

/* Информация о регистрации */
.tournament-registration-info {
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.1), rgba(0, 200, 0, 0.1));
    border: 2px solid rgba(0, 255, 0, 0.3);
    border-radius: 8px;
    padding: 15px;
}

.registration-badge {
    text-align: center;
    font-family: 'Ruslan Display', serif;
    font-size: 1.2em;
    color: #00ff00;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.registration-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.registration-line {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.detail-label {
    color: #888;
    font-size: 0.9em;
}

.detail-value {
    color: #00f0ff;
    font-weight: bold;
    font-family: 'Ruslan Display', serif;
}

/* Кнопка отмены регистрации */
.tournament-cancel-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #ff4444, #cc0000);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: 'Ruslan Display', serif;
    font-size: 1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tournament-cancel-btn:hover {
    background: linear-gradient(135deg, #ff6666, #ff0000);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
    transform: translateY(-2px);
}

/* Скроллбар для чата и списка игр */
.chat-messages::-webkit-scrollbar,
.hub-tab-content::-webkit-scrollbar {
    width: 8px;
}

.chat-messages::-webkit-scrollbar-track,
.hub-tab-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.chat-messages::-webkit-scrollbar-thumb,
.hub-tab-content::-webkit-scrollbar-thumb {
    background: rgba(0, 170, 255, 0.3);
    border-radius: 4px;
}

.chat-messages::-webkit-scrollbar-thumb:hover,
.hub-tab-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 170, 255, 0.5);
}


/* ============================================
   ПАНЕЛЬ ВЫБОРА СОЛДАТ
   ============================================ */

.soldier-selection-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  padding: 20px;
  overflow-y: auto;
}

.selection-header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--border-color);
}

.selection-header h2 {
  font-size: 1.8em;
  color: var(--accent-cyan);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.selection-header p {
  font-size: 1em;
  color: var(--text-secondary);
  margin: 5px 0;
}

.selection-header .highlight {
  color: var(--accent-yellow);
  font-weight: bold;
  font-size: 1.2em;
}

.selection-counter {
  font-size: 1.4em;
  font-weight: bold;
  margin-top: 15px;
  padding: 10px 20px;
  background: rgba(0, 240, 255, 0.1);
  border: 2px solid var(--accent-cyan);
  border-radius: 8px;
  display: inline-block;
}

.selection-counter #selected-count {
  color: var(--accent-yellow);
  font-size: 1.3em;
}

.selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 20px;
}

.soldier-selection-card {
  position: relative;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.soldier-selection-card:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
  transform: translateY(-2px);
}

.soldier-selection-card.selected {
  border-color: var(--accent-green);
  background: linear-gradient(135deg, var(--bg-secondary), rgba(0, 255, 136, 0.15));
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

.soldier-selection-card.veteran {
  border-color: var(--accent-yellow);
}

/* Верхняя часть: фото слева, имя и звание справа */
.soldier-selection-card .card-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.soldier-selection-card .card-face {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

.soldier-selection-card .card-header {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.soldier-selection-card .card-name {
  font-size: 1.1em;
  font-weight: bold;
  color: var(--text-primary);
  line-height: 1.2;
}

.soldier-selection-card .card-rank {
  font-size: 0.85em;
  color: var(--accent-yellow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Кнопка специализации */
.soldier-selection-card .specialization-btn {
  width: 100%;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(0, 150, 255, 0.2), rgba(0, 100, 200, 0.2));
  border: 1px solid var(--accent-cyan);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.soldier-selection-card .specialization-btn:hover {
  background: linear-gradient(135deg, rgba(0, 150, 255, 0.3), rgba(0, 100, 200, 0.3));
  border-color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
  transform: translateY(-1px);
}

/* Планка здоровья */
.soldier-selection-card .health-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}

.soldier-selection-card .health-icon {
  font-size: 1.2em;
  flex-shrink: 0;
}

.soldier-selection-card .health-value {
  font-size: 1em;
  font-weight: bold;
  color: #ff4444;
  min-width: 25px;
  flex-shrink: 0;
}

.soldier-selection-card .health-cubes {
  display: flex;
  gap: 3px;
  flex: 1;
}

.soldier-selection-card .health-cube {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  transition: all 0.2s ease;
}

.soldier-selection-card .health-cube.full {
  background: linear-gradient(135deg, #44ff44, #22cc22);
  box-shadow: 0 0 4px rgba(68, 255, 68, 0.6);
}

.soldier-selection-card .health-cube.half {
  background: linear-gradient(135deg, #ffaa00, #ff8800);
  box-shadow: 0 0 4px rgba(255, 170, 0, 0.6);
}

.soldier-selection-card .health-cube.low {
  background: linear-gradient(135deg, #ff4444, #cc2222);
  box-shadow: 0 0 4px rgba(255, 68, 68, 0.6);
}

.soldier-selection-card .health-cube.empty {
  background: rgba(50, 50, 50, 0.5);
}

/* Статистика в строку */
.soldier-selection-card .card-stats-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  font-size: 0.9em;
}

.soldier-selection-card .stat-compact {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-weight: 600;
}

.soldier-selection-card .veteran-badge-small {
  font-size: 1.2em;
  color: var(--accent-yellow);
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.8));
}

/* Модальное окно специализации */
.specialization-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.specialization-modal .modal-content {
  background: var(--bg-primary);
  border: 2px solid var(--accent-cyan);
  border-radius: 12px;
  padding: 20px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.specialization-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--border-color);
}

.specialization-modal .modal-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.3em;
}

.specialization-modal .modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5em;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.specialization-modal .modal-close:hover {
  background: rgba(255, 68, 68, 0.2);
  color: #ff4444;
}

.specialization-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.specialization-modal .spec-option {
  padding: 15px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 15px;
}

.specialization-modal .spec-option:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
  transform: translateX(5px);
}

.specialization-modal .spec-option.selected {
  border-color: var(--accent-green);
  background: linear-gradient(135deg, var(--bg-secondary), rgba(0, 255, 136, 0.1));
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

.specialization-modal .spec-icon {
  font-size: 2em;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  flex-shrink: 0;
}

.specialization-modal .spec-name {
  font-size: 1.1em;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.specialization-modal .spec-desc {
  font-size: 0.9em;
  color: var(--text-secondary);
}

.specialization-modal .modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.specialization-modal .modal-btn {
  padding: 10px 20px;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.specialization-modal .modal-btn-confirm {
  background: linear-gradient(135deg, var(--accent-green), #00aa44);
  color: #000;
  border-color: var(--accent-green);
}

.specialization-modal .modal-btn-confirm:hover {
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
  transform: translateY(-2px);
}

.specialization-modal .modal-btn-cancel {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.specialization-modal .modal-btn-cancel:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.selection-footer {
  display: flex;
  gap: 15px;
  justify-content: center;
  padding-top: 20px;
  border-top: 2px solid var(--border-color);
}

.selection-btn {
  padding: 15px 30px;
  font-size: 1.1em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 2px solid;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--bg-secondary);
}

.selection-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.selection-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.selection-btn-confirm {
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.selection-btn-confirm:hover:not(:disabled) {
  background: var(--accent-green);
  color: #000;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

.selection-btn-auto {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.selection-btn-auto:hover {
  background: var(--accent-cyan);
  color: #000;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}

/* Адаптивность */
@media (max-width: 768px) {
  .selection-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }
  
  .soldier-selection-card {
    padding: 10px;
  }
  
  .selection-footer {
    flex-direction: column;
  }
  
  .selection-btn {
    width: 100%;
  }
}

/* ============================================
   МЕНЮ В ЛЕВОЙ ПАНЕЛИ
   ============================================ */

.menu-container {
    position: relative;
    width: 100%;
    /* Добавляем padding как у panel-view для одинаковой ширины с другими кнопками */
    padding: 15px 15px 0 15px;
    box-sizing: border-box;
}

/* Кнопка МЕНЮ - точная копия стиля кнопки СТАРТ, но в синем */
#menu-toggle-btn {
    position: relative;
    width: 100%;
    padding: 8px !important;
    font-size: 1.8em !important;
    font-family: 'Ruslan Display', serif !important;
    /* Копируем стиль кнопки СТАРТ, но меняем зеленый на синий */
    background: linear-gradient(135deg, rgba(0, 170, 255, 0.2), rgba(0, 136, 204, 0.1)) !important;
    border-color: var(--accent-cyan) !important;
    color: var(--accent-cyan) !important;
    box-shadow: 0 0 20px rgba(0, 170, 255, 0.3) !important;
    animation: pulse-glow-blue 2s ease-in-out infinite;
    cursor: pointer;
    transition: all 0.3s ease;
}

#menu-toggle-btn:hover {
    background: linear-gradient(135deg, rgba(0, 170, 255, 0.3), rgba(0, 136, 204, 0.2)) !important;
    box-shadow: 0 0 30px rgba(0, 170, 255, 0.5) !important;
}

#menu-toggle-btn:active {
    transform: scale(0.98);
}

@keyframes pulse-glow-blue {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 170, 255, 0.3); }
    50% { box-shadow: 0 0 35px rgba(0, 170, 255, 0.6); }
}

.menu-dropdown {
    position: relative;
    width: 100%;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.menu-dropdown:not(.hidden) {
    max-height: 200px;
    opacity: 1;
}

.menu-item {
    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
    font-size: 0.85em !important;
    padding: 8px 12px !important;
}

.menu-item:hover {
    background: rgba(0, 170, 255, 0.2) !important;
    color: #00ffff !important;
    padding-left: 18px !important;
}

.menu-item:active {
    background: rgba(0, 170, 255, 0.4) !important;
}

/* ============================================
   МОДАЛЬНЫЕ ОКНА МЕНЮ
   ============================================ */

#game-rules-modal button:hover,
#shop-modal button:hover,
#defo-games-modal button:hover {
    background: linear-gradient(135deg, #2a3a4a, #1a2530) !important;
    border-color: #00ccff !important;
    box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
    transform: scale(1.02);
}

#game-rules-modal button:active,
#shop-modal button:active,
#defo-games-modal button:active {
    transform: scale(0.98);
}

/* Стили для списков в правилах */
#game-rules-modal ul {
    list-style-type: none;
    padding-left: 0;
}

#game-rules-modal ul li {
    padding: 5px 0;
    padding-left: 20px;
    position: relative;
}

#game-rules-modal ul li:before {
    content: "▸";
    position: absolute;
    left: 0;
    color: #00ffff;
}


/* ============================================
   INTRO WELCOME SCREEN - Приветственный экран с Валькирией
   ============================================ */

#intro-welcome-scene {
  position: absolute;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 50;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #0a0a12 70%);
  background-color: #0a0a12;
  gap: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  box-sizing: border-box;
}

/* Стили скроллбара для intro-welcome-scene */
#intro-welcome-scene::-webkit-scrollbar {
  width: 6px;
}

#intro-welcome-scene::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
}

#intro-welcome-scene::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.3);
  border-radius: 3px;
}

#intro-welcome-scene::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 255, 0.5);
}

/* Общий контейнер для валькирии, текста и кнопки */
.valkyrie-welcome-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 40px;
  background: rgba(10, 10, 18, 0.85);
  border: 2px solid var(--accent-cyan);
  border-radius: 12px;
  box-shadow: 
    0 0 30px rgba(0, 240, 255, 0.2),
    inset 0 0 20px rgba(0, 240, 255, 0.08);
  transition: box-shadow 2s ease-out, border-color 2s ease-out;
  max-width: 800px;
  width: 100%;
  box-sizing: border-box;
}

/* Класс для мягкой вспышки внешнего контейнера с плавным затуханием */
.valkyrie-welcome-container.flash {
  box-shadow: 
    0 0 50px rgba(0, 240, 255, 0.5),
    0 0 100px rgba(0, 240, 255, 0.25),
    inset 0 0 40px rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.7);
}

/* Контейнер валькирии с рамкой цвета как у внешнего контейнера */
.valkyrie-container {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--accent-cyan);
  border-radius: 8px;
  box-shadow: 
    0 0 15px rgba(0, 240, 255, 0.25),
    inset 0 0 10px rgba(0, 240, 255, 0.08);
  transition: box-shadow 2s ease-out, border-color 2s ease-out;
  overflow: hidden;
}

/* Внутренняя подсветка валькирии (первая в каскаде) */
.valkyrie-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(0, 240, 255, 0) 0%, rgba(0, 240, 255, 0) 100%);
  pointer-events: none;
  transition: background 2s ease-out;
  z-index: 1;
}

.valkyrie-container.flash-inner::before {
  background: radial-gradient(circle at center, rgba(0, 240, 255, 0.4) 0%, rgba(0, 240, 255, 0.15) 40%, rgba(0, 240, 255, 0.05) 60%, rgba(0, 240, 255, 0) 80%);
}

/* Класс для вспышки рамки валькирии */
.valkyrie-container.flash {
  box-shadow: 
    0 0 35px rgba(0, 240, 255, 0.6),
    0 0 60px rgba(0, 240, 255, 0.3),
    inset 0 0 25px rgba(0, 240, 255, 0.2);
  border-color: rgba(0, 240, 255, 0.8);
}

#valkyrie-canvas,
#valkyrie-canvas-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  z-index: 2;
  transition: filter 2s ease-out;
  object-fit: contain;
}

/* Подсветка canvas при flash-inner */
.valkyrie-container.flash-inner #valkyrie-canvas,
.valkyrie-container.flash-inner #valkyrie-canvas-2 {
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.5)) 
          drop-shadow(0 0 25px rgba(0, 240, 255, 0.3))
          brightness(1.1);
}

/* Текст приветствия */
.intro-welcome-text {
  text-align: center;
  max-width: 700px;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

.intro-welcome-text p {
  font-family: 'Ruslan Display', serif;
  font-size: 1.3rem;
  font-weight: normal;
  color: var(--text-primary);
  margin: 12px 0;
  letter-spacing: 1px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  line-height: 1.6;
}

.intro-welcome-text p:first-child {
  font-size: 1.8rem;
  color: var(--accent-cyan);
  text-shadow: 0 0 15px rgba(0, 240, 255, 0.5), 2px 2px 4px rgba(0, 0, 0, 0.9);
  margin-bottom: 20px;
}

/* Ссылка "пропустить заставку" */
.intro-skip-link {
  position: relative;
  width: 100%;
  text-align: center;
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: underline;
  transition: all 0.3s ease;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
  z-index: 10;
}

.intro-skip-link:hover {
  color: var(--accent-cyan);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

/* Финальное меню на заставке */
.intro-final-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 600px;
  width: 100%;
  padding: 0 20px;
}

.intro-menu-title {
  font-family: 'Ruslan Display', serif;
  font-size: 3rem;
  font-weight: normal;
  color: #6ab0ff;
  text-transform: uppercase;
  letter-spacing: 8px;
  margin-bottom: 20px;
  text-shadow: 0 0 30px rgba(74, 144, 217, 0.8), 0 0 60px rgba(106, 176, 255, 0.4);
  animation: intro-menu-title-glow 2s ease-in-out infinite alternate;
}

@keyframes intro-menu-title-glow {
  from {
    text-shadow: 0 0 20px rgba(74, 144, 217, 0.6), 0 0 40px rgba(106, 176, 255, 0.3);
  }
  to {
    text-shadow: 0 0 30px rgba(106, 176, 255, 1), 0 0 60px rgba(74, 144, 217, 0.6);
  }
}

.intro-menu-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.intro-menu-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 30px;
  background: linear-gradient(135deg, rgba(10, 30, 50, 0.9), rgba(5, 15, 25, 0.9));
  border: 2px solid rgba(106, 176, 255, 0.5);
  border-radius: 8px;
  font-family: 'Ruslan Display', serif;
  font-size: 1.3rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  width: 100%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.intro-menu-item:hover {
  background: linear-gradient(135deg, rgba(106, 176, 255, 0.3), rgba(74, 144, 217, 0.3));
  border-color: #6ab0ff;
  transform: translateX(10px) scale(1.02);
  box-shadow: 0 6px 25px rgba(106, 176, 255, 0.4);
}

.intro-menu-item:active {
  transform: translateX(10px) scale(0.98);
}

.intro-menu-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #6ab0ff, #4a90d9);
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 0 15px rgba(106, 176, 255, 0.6);
}

.intro-menu-item:hover .intro-menu-number {
  background: linear-gradient(135deg, #96c8ff, #6ab0ff);
  box-shadow: 0 0 25px rgba(106, 176, 255, 1);
}

.intro-menu-text {
  flex: 1;
  letter-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
  #intro-welcome-scene {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    justify-content: center;
    align-items: center;
  }
  
  .valkyrie-welcome-container {
    padding: 15px;
    gap: 12px;
    max-width: 100%;
    width: 100%;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0;
    box-sizing: border-box;
  }
  
  .valkyrie-container {
    width: 300px;
    height: 300px;
    flex-shrink: 0;
    overflow: hidden;
  }
  
  #valkyrie-canvas,
  #valkyrie-canvas-2 {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }
  
  .intro-welcome-text {
    flex: 1;
    min-width: 200px;
    text-align: left;
    max-width: calc(100% - 320px);
  }
  
  .intro-welcome-text p {
    font-size: 0.85rem;
    margin: 5px 0;
    line-height: 1.4;
  }
  
  .intro-welcome-text p:first-child {
    font-size: 1.3rem;
    margin-bottom: 8px;
  }
  
  #intro-screen .intro-start-btn {
    font-size: 1.3rem;
    padding: 14px 40px;
    width: 100%;
    margin-top: 5px;
    box-sizing: border-box;
  }
  
  .intro-skip-link {
    font-size: 0.9rem;
    margin-top: 10px;
    width: 100%;
    text-align: center;
  }
  
  .intro-menu-title {
    font-size: 1.5rem;
    letter-spacing: 3px;
    margin-bottom: 10px;
  }
  
  .intro-menu-item {
    padding: 8px 15px;
    font-size: 0.85rem;
    gap: 10px;
  }
  
  .intro-menu-number {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }
  
  .intro-menu-text {
    letter-spacing: 1px;
  }
}

/* Адаптив для горизонтальных экранов (landscape) и низких экранов */
@media (max-height: 600px) and (orientation: landscape) {
  #intro-welcome-scene {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px 10px;
    justify-content: center;
    align-items: center;
  }
  
  .valkyrie-welcome-container {
    padding: 8px 12px;
    gap: 10px;
    flex-direction: row;
    max-width: 100%;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0;
    box-sizing: border-box;
  }
  
  .valkyrie-container {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    overflow: hidden;
  }
  
  #valkyrie-canvas,
  #valkyrie-canvas-2 {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }
  
  .intro-welcome-text {
    text-align: left;
    flex: 1;
    min-width: 200px;
    max-width: calc(100% - 220px);
  }
  
  .intro-welcome-text p {
    font-size: 0.7rem;
    margin: 3px 0;
    line-height: 1.3;
  }
  
  .intro-welcome-text p:first-child {
    font-size: 1rem;
    margin-bottom: 5px;
  }
  
  #intro-screen .intro-start-btn {
    font-size: 1rem;
    padding: 8px 30px;
    width: 100%;
    box-sizing: border-box;
  }
  
  .intro-skip-link {
    font-size: 0.8rem;
    margin-top: 5px;
    width: 100%;
    text-align: center;
  }
}

/* Специальная адаптация для очень низких экранов (360px высота) */
@media (max-height: 400px) {
  #intro-welcome-scene {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 3px 5px;
    justify-content: center;
    align-items: center;
  }
  
  .valkyrie-welcome-container {
    padding: 5px 8px;
    gap: 6px;
    flex-direction: row;
    max-width: 100%;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0;
    box-sizing: border-box;
  }
  
  .valkyrie-container {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
    overflow: hidden;
  }
  
  #valkyrie-canvas,
  #valkyrie-canvas-2 {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }
  
  .intro-welcome-text {
    text-align: left;
    flex: 1;
    min-width: 150px;
    max-width: calc(100% - 165px);
  }
  
  .intro-welcome-text p {
    font-size: 0.55rem;
    margin: 1px 0;
    line-height: 1.2;
  }
  
  .intro-welcome-text p:first-child {
    font-size: 0.8rem;
    margin-bottom: 3px;
  }
  
  #intro-screen .intro-start-btn {
    font-size: 0.85rem;
    padding: 6px 20px;
    width: 100%;
    box-sizing: border-box;
  }
  
  .intro-skip-link {
    font-size: 0.7rem;
    margin-top: 3px;
    width: 100%;
    text-align: center;
  }
}

/* ============================================
   ЗРЕЛИЩНАЯ СМЕРТЬ КОМАНДИРА
   Анимации и эффекты для 5-секундной смерти
   ============================================ */

/* Вспышка при смерти командира */
@keyframes commander-flash {
    0% {
        width: 20px;
        height: 20px;
        opacity: 1;
    }
    50% {
        width: 300px;
        height: 300px;
        opacity: 0.8;
    }
    100% {
        width: 400px;
        height: 400px;
        opacity: 0;
    }
}

/* Частицы разлетающиеся от командира */
@keyframes commander-particle {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--particle-x)), calc(-50% + var(--particle-y))) scale(0);
        opacity: 0;
    }
}

/* Контейнер эффектов смерти командира */
.commander-death-effects {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
}

/* Затемнение экрана при смерти командира */
.commander-death-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
}

/* Пульсация для командира во время смерти */
@keyframes commander-death-pulse {
    0%, 100% {
        filter: brightness(1.5) drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
    }
    50% {
        filter: brightness(2.0) drop-shadow(0 0 30px rgba(255, 255, 255, 1.0));
    }
}

/* Волны от командира */
@keyframes commander-shockwave {
    0% {
        width: 50px;
        height: 50px;
        opacity: 0.8;
        border-width: 3px;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
        border-width: 1px;
    }
}


/* НОВОЕ v11.0: Анимация пульса для подсказки приказа */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* НОВОЕ v4.0: Пульсация маркера приказа на карте */
@keyframes squad-marker-pulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        filter: drop-shadow(0 0 6px rgba(255, 68, 68, 0.8));
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.15);
        filter: drop-shadow(0 0 12px rgba(255, 68, 68, 1));
    }
}


/* ═══════════════════════════════════════════════════════
   GAME END SCREEN — Экран окончания игры
   ═══════════════════════════════════════════════════════ */

@keyframes geGlowPulse {
    0%, 100% {
        box-shadow: 0 0 40px rgba(0,255,136,0.4), 0 0 80px rgba(0,255,136,0.2), inset 0 0 30px rgba(0,255,136,0.1);
        border-color: rgba(0,255,136,0.6);
    }
    50% {
        box-shadow: 0 0 60px rgba(0,255,136,0.6), 0 0 120px rgba(0,255,136,0.3), inset 0 0 50px rgba(0,255,136,0.15);
        border-color: rgba(0,255,136,0.9);
    }
}

@keyframes geGlowPulseGold {
    0%, 100% {
        box-shadow: 0 0 40px rgba(255,215,0,0.4), 0 0 80px rgba(255,215,0,0.2), inset 0 0 30px rgba(255,215,0,0.1);
        border-color: rgba(255,215,0,0.7);
    }
    50% {
        box-shadow: 0 0 60px rgba(255,215,0,0.7), 0 0 120px rgba(255,215,0,0.3), inset 0 0 50px rgba(255,215,0,0.15);
        border-color: rgba(255,215,0,1);
    }
}

@keyframes geHatBounce {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(-5deg); }
    50% { transform: translateX(-50%) translateY(-8px) rotate(5deg); }
}


/* ═══════════════════════════════════════════════════════
   ТОТАЛЬНАЯ МОБИЛЬНАЯ АДАПТАЦИЯ
   Уменьшение всех UI элементов для мобильных устройств
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* === HEADER === */
  header {
    padding: 3px 6px;
    min-height: 40px;
  }
  
  .header-fullscreen-btn {
    padding: 5px 8px;
    font-size: 0.7em;
  }
  
  /* Название битвы */
  .battle-title {
    font-size: 0.95em !important;
  }
  
  /* Номер уровня */
  .header-level-num {
    font-size: 0.95em !important;
  }
  
  /* Иконка уровня компактная */
  .header-battle-icon {
    width: 40px !important;
    height: 40px !important;
  }
  
  .battle-stats {
    font-size: 0.7em !important;
  }
  
  .battle-details {
    font-size: 0.6em !important;
  }
  
  .wave-details {
    font-size: 0.7em !important;
  }
  
  .timer {
    font-size: 0.85em !important;
  }
  
  .header-conquest-score {
    padding: 3px 6px;
    font-size: 0.75em;
  }
  
  .conquest-icon {
    font-size: 0.85em;
  }
  
  #battle-description {
    font-size: 0.6em !important;
  }
  
  /* === FOOTER === */
  footer {
    padding: 4px 8px;
    min-height: 36px;
  }
  
  /* === ЛЕВАЯ ПАНЕЛЬ === */
  .info-panel {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
    padding: 5px;
    position: relative !important; /* Закрепляем панель */
    left: 0 !important;
    transform: none !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }
  
  /* Скрываем секцию событий на мобильных */
  .hide-on-mobile {
    display: none !important;
  }
  
  .minicart-fixed canvas {
    height: 90px;
  }
  
  .panel-view {
    padding: 8px;
  }
  
  .panel-view h2 {
    font-size: 1em;
    margin-bottom: 6px;
  }
  
  /* === КНОПКИ === */
  .control-btn {
    padding: 6px 10px;
    font-size: 0.8em;
  }
  
  .battle-select-btn {
    padding: 3px 6px;
    font-size: 0.65em;
  }
  
  /* === МЕНЮ === */
  .menu-container {
    padding: 8px 8px 0 8px;
  }
  
  #menu-toggle-btn {
    padding: 5px !important;
    font-size: 1.1em !important;
  }
  
  .menu-item {
    padding: 5px 8px !important;
    font-size: 0.65em !important;
  }
  
  /* === СТАТИСТИКА АРМИИ === */
  .army-stats h3 {
    font-size: 0.85em;
  }
  
  .army-stats p {
    font-size: 0.65em;
  }
  
  .stats-box,
  .deployment-info-box {
    padding: 6px;
  }
  
  /* === ЛОГИ === */
  .log-container h3 {
    font-size: 0.65em;
    padding: 5px 6px;
  }
  
  .log-content {
    padding: 5px;
    font-size: 0.55em;
  }
  
  .log-entry {
    padding: 2px 3px;
    font-size: 0.7em;
  }
  
  /* === ПРАВАЯ ПАНЕЛЬ === */
  #right-panel {
    padding: 4px !important;
  }
  
  #right-panel h3 {
    font-size: 1em !important;
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
  }
  
  #scoreboard-content {
    padding-right: 2px !important;
  }
  
  .right-panel-tabs .tab-btn {
    padding: 4px 3px !important;
    font-size: 0.7em;
  }
  
  /* === SCOREBOARD === */
  #scoreboard-title {
    font-size: 1.1em;
    padding: 6px 8px;
  }
  
  #scoreboard-content .score-entry,
  .score-entry {
    padding: 2px 4px !important;
    font-size: 0.65em !important;
    min-height: 26px !important;
    margin-bottom: 2px !important;
    gap: 3px !important;
  }
  
  #scoreboard-content .score-entry .rank,
  .score-entry .rank {
    width: 16px !important;
    font-size: 0.75em !important;
  }
  
  #scoreboard-content .score-entry .name-section,
  .score-entry .name-section {
    margin-right: 4px !important;
    gap: 0px !important;
  }
  
  #scoreboard-content .score-entry .name,
  .score-entry .name {
    font-size: 0.75em !important;
    line-height: 1 !important;
  }
  
  #scoreboard-content .score-entry .army-name,
  .score-entry .army-name {
    font-size: 0.65em !important;
    line-height: 1 !important;
  }
  
  #scoreboard-content > div[style*="background"] {
    padding: 5px !important;
    margin-bottom: 5px !important;
  }
  
  #scoreboard-content > div[style*="background"] > div:first-child {
    font-size: 0.55em !important;
  }
  
  /* === ЮНИТЫ НА ПОЛЕ === */
  .unit-name {
    font-size: 7px !important;
  }
  
  .unit-status-icon {
    font-size: 9px !important;
  }
  
  .unit-status-icon.rank-icon {
    font-size: 9px !important;
  }
  
  .unit-name .unit-status-icon:last-child {
    font-size: 5px !important;
  }
  
  .unit-level {
    font-size: 5px !important;
  }
  
  .unit-rank {
    font-size: 5px !important;
  }
  
  .deployed-unit[data-is-commander="true"] .unit-name {
    font-size: 9px !important;
  }
  
  .unit.commander .unit-status-icon {
    font-size: 12px !important;
  }
  
  /* === КАРТОЧКИ ЮНИТОВ === */
  .unit-card {
    padding: 6px 8px;
    min-height: 36px;
  }
  
  .unit-card-header {
    font-size: 0.75em;
  }
  
  .unit-card-stats {
    font-size: 0.65em;
  }
  
  /* === РЕЗУЛЬТАТЫ БИТВЫ === */
  .result-title {
    font-size: 1.6em !important;
  }
  
  /* Скролл для финальной таблицы результатов */
  .battle-end-content {
    max-height: 90vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
    overscroll-behavior: contain;
  }

  #battle-end-screen {
    touch-action: pan-y !important;
    overscroll-behavior: contain;
  }
  
  .result-status {
    font-size: 0.75em;
  }
  
  .section-title {
    font-size: 0.8em;
  }
  
  .winner-message {
    font-size: 0.85em;
  }
  
  .final-stats-box {
    padding: 0;
  }
  
  .result-box {
    padding: 8px;
  }
  
  /* === INFO BLOCKS === */
  .info-block__title {
    font-size: 0.8em;
  }
  
  .info-block__content {
    font-size: 0.75em;
  }
  
  .info-block__badge {
    font-size: 0.75em;
    padding: 2px 5px;
  }
  
  /* === DEPLOYMENT === */
  .deployment-message {
    padding: 6px;
    font-size: 0.75em;
  }
  
  #view-battle .minicart-container canvas,
  #view-deployment .minicart-container canvas {
    height: 90px;
  }
  
  /* === SELECTION SCREEN === */
  .selection-title {
    font-size: 0.95em;
  }
  
  .selection-counter {
    font-size: 0.95em;
    padding: 5px 10px;
  }
  
  .selection-counter #selected-count {
    font-size: 1.05em;
  }
  
  .selection-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 6px;
    padding: 6px;
  }
  
  .soldier-selection-card {
    padding: 6px;
  }
  
  .soldier-selection-card .card-face {
    width: 45px;
    height: 45px;
  }
  
  .soldier-selection-card .card-name {
    font-size: 0.8em;
  }
  
  .soldier-selection-card .card-rank {
    font-size: 0.65em;
  }
  
  .soldier-selection-card .specialization-btn {
    padding: 5px 7px;
    font-size: 0.7em;
  }
  
  .soldier-selection-card .health-bar {
    padding: 3px 5px;
  }
  
  .soldier-selection-card .health-icon {
    font-size: 0.95em;
  }
  
  .soldier-selection-card .health-value {
    font-size: 0.8em;
  }
  
  .soldier-selection-card .health-cube {
    width: 7px;
    height: 7px;
  }
  
  .soldier-selection-card .card-stats-row {
    padding: 3px 5px;
    font-size: 0.7em;
  }
  
  .selection-footer {
    padding-top: 10px;
    gap: 8px;
  }
  
  .selection-btn {
    padding: 8px 16px;
    font-size: 0.85em;
  }
  
  /* === SPECIALIZATION MODAL === */
  .specialization-modal .modal-content {
    padding: 12px;
    max-width: 90%;
  }
  
  .specialization-modal .modal-header h3 {
    font-size: 1.05em;
  }
  
  .specialization-modal .spec-option {
    padding: 8px;
    gap: 8px;
  }
  
  .specialization-modal .spec-icon {
    font-size: 1.4em;
    width: 36px;
    height: 36px;
  }
  
  .specialization-modal .spec-name {
    font-size: 0.85em;
  }
  
  .specialization-modal .spec-desc {
    font-size: 0.7em;
  }
  
  .specialization-modal .modal-btn {
    padding: 7px 13px;
    font-size: 0.8em;
  }
  
  /* === LABELS & INPUTS === */
  label {
    font-size: 0.7em;
  }
  
  input, select, textarea {
    padding: 5px 8px;
    font-size: 0.8em;
  }
  
  /* === МИНИКАРТА === */
  .minicart-container {
    padding: 5px;
  }
  
  /* === SCROLLBAR === */
  ::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
}

/* === ДОПОЛНИТЕЛЬНАЯ АДАПТАЦИЯ ДЛЯ ОЧЕНЬ МАЛЕНЬКИХ ЭКРАНОВ === */
@media (max-width: 480px) {
  header {
    padding: 2px 4px;
    min-height: 36px;
  }
  
  .header-fullscreen-btn {
    padding: 3px 5px;
    font-size: 0.6em;
  }
  
  /* Название битвы */
  .battle-title {
    font-size: 0.95em !important;
  }
  
  /* Номер уровня */
  .header-level-num {
    font-size: 0.95em !important;
  }
  
  /* Иконка уровня как на десктопе */
  .header-battle-icon {
    width: 40px !important;
    height: 40px !important;
  }
  
  /* Скрываем секцию событий на мобильных */
  .hide-on-mobile {
    display: none !important;
  }
  
  .info-panel {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    position: relative !important; /* Закрепляем панель */
    left: 0 !important;
    transform: none !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }
  
  .panel-view h2 {
    font-size: 0.9em;
  }
  
  .control-btn {
    padding: 5px 8px;
    font-size: 0.7em;
  }
  
  #menu-toggle-btn {
    font-size: 0.95em !important;
  }
  
  .unit-name {
    font-size: 6px !important;
  }
  
  .selection-grid {
    grid-template-columns: 1fr;
  }
  
  /* === SCOREBOARD - ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ === */
  #scoreboard-content .score-entry,
  .score-entry {
    padding: 2px 3px !important;
    font-size: 0.6em !important;
    min-height: 22px !important;
    margin-bottom: 1px !important;
  }
  
  #scoreboard-content .score-entry .rank,
  .score-entry .rank {
    width: 14px !important;
    font-size: 0.7em !important;
  }
  
  #scoreboard-content .score-entry .name-section,
  .score-entry .name-section {
    margin-right: 3px !important;
  }
  
  #scoreboard-content .score-entry .name,
  .score-entry .name {
    font-size: 0.7em !important;
  }
  
  #scoreboard-content .score-entry .army-name,
  .score-entry .army-name {
    font-size: 0.6em !important;
  }
  
  #scoreboard-content > div[style*="background"] {
    padding: 3px !important;
    margin-bottom: 3px !important;
  }
}

/* === АДАПТАЦИЯ ДЛЯ LANDSCAPE НА МОБИЛЬНЫХ === */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 600px) {
  /* Header - равномерная сетка */
  header {
    padding: 1px 2px;
    min-height: auto;
    gap: 1px;
  }
  
  header .battle-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    width: 100%;
    align-items: center;
  }
  
  /* 1. Кнопка fullscreen */
  .header-fullscreen-btn {
    grid-column: 1;
    padding: 1px;
    font-size: 0.45em;
    text-align: center;
    border-width: 1px;
  }
  
  /* 2. Иконка уровня */
  .battle-title {
    grid-column: 2;
    font-size: 0.9em !important;
    letter-spacing: 0px;
    gap: 1px;
    justify-content: center;
  }
  
  /* Иконка уровня компактная */
  .header-battle-icon {
    width: 38px !important;
    height: 38px !important;
    margin: 0;
    object-fit: contain;
    border-width: 1px;
  }
  
  /* Номер уровня */
  .header-level-num,
  .header-level-sep {
    font-size: 0.9em !important;
  }
  
  /* Название уровня */
  .header-level-name {
    font-size: 0.9em !important;
  }
  
  /* 3. Статистика */
  .battle-stats {
    grid-column: 3;
    font-size: 0.5em !important;
    text-align: center;
  }
  
  /* 4. Детали */
  .battle-details {
    grid-column: 4;
    font-size: 0.4em !important;
    text-align: center;
  }
  
  /* 5. Сундук */
  .header-conquest-score {
    grid-column: 5;
    padding: 0px 1px;
    font-size: 0.55em;
    text-align: center;
    border: none;
  }
  
  /* 6. Золото */
  .gold-display {
    grid-column: 6;
    padding: 0px 2px;
    font-size: 0.65em;
    margin: 0;
    border-width: 1px;
    justify-content: center;
    gap: 1px;
  }
  
  .gold-display span {
    font-size: 0.8em;
  }
  
  /* 7. Таймер + кнопки */
  .timer {
    grid-column: 7;
    font-size: 0.6em !important;
    padding: 0px 1px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    border: none;
  }
  
  /* Кнопки под таймером - внутри ячейки */
  .header-action-btn {
    display: none !important; /* Скрываем кнопки в мобильной версии */
  }
  
  #home-button,
  #mute-music-button,
  #mute-sfx-button {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    border: none !important;
  }
  
  .wave-details {
    grid-column: 3;
    font-size: 0.5em !important;
  }
  
  #battle-description {
    font-size: 0.4em !important;
  }
  
  footer {
    padding: 2px 4px;
    min-height: 30px;
  }
  
  /* Скрываем секцию событий на мобильных */
  .hide-on-mobile {
    display: none !important;
  }
  
  .info-panel {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    position: relative !important; /* Закрепляем панель */
    left: 0 !important;
    transform: none !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }
  
  .panel-view {
    padding: 8px;
  }
  
  .minicart-fixed canvas {
    height: 80px;
  }
  
  #view-battle .minicart-container canvas,
  #view-deployment .minicart-container canvas {
    height: 80px;
  }
  
  .control-btn {
    padding: 6px 10px;
    font-size: 0.8em;
  }
  
  .log-container {
    max-height: 120px;
  }
}


/* === СПЕЦИАЛЬНАЯ АДАПТАЦИЯ ДЛЯ ЭКРАНОВ 360PX ВЫСОТЫ === */
@media (max-height: 400px) {
  /* Header - равномерная сетка */
  header {
    padding: 1px 2px;
    min-height: auto;
    gap: 1px;
  }
  
  header .battle-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    width: 100%;
    align-items: center;
  }
  
  /* 1. Кнопка fullscreen */
  .header-fullscreen-btn {
    grid-column: 1;
    padding: 1px;
    font-size: 0.45em;
    border-width: 1px;
    text-align: center;
  }
  
  /* 2. Иконка уровня + номер */
  .battle-title {
    grid-column: 2;
    font-size: 1.0em !important;
    letter-spacing: 0px;
    gap: 2px;
    justify-content: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  
  /* Иконка уровня как на десктопе */
  .header-battle-icon {
    width: 44px !important;
    height: 44px !important;
    margin: 0;
    border-width: 1px;
    object-fit: contain;
    flex-shrink: 0;
  }
  
  /* Номер и название уровня */
  .header-level-num,
  .header-level-sep,
  .header-level-name {
    font-size: 1.0em !important;
    display: inline; /* Показываем текст */
  }
  
  /* 3. Название битвы / статистика */
  .battle-stats {
    grid-column: 3;
    font-size: 0.45em !important;
    text-align: center;
  }
  
  /* 4. Рекорды / детали */
  .battle-details {
    grid-column: 4;
    font-size: 0.4em !important;
    text-align: center;
  }
  
  /* 5. Сундук (conquest score) */
  .header-conquest-score {
    grid-column: 5;
    padding: 0px 1px;
    font-size: 0.5em;
    text-align: center;
    border: none;
  }
  
  .conquest-icon {
    font-size: 0.75em;
  }
  
  /* 6. Бабло (gold) */
  .gold-display {
    grid-column: 6;
    padding: 0px 1px;
    font-size: 0.55em;
    margin: 0;
    border-width: 1px;
    gap: 1px;
    justify-content: center;
  }
  
  .gold-display span {
    font-size: 0.8em;
  }
  
  /* 7. Таймер + кнопки (вертикально) */
  .timer {
    grid-column: 7;
    font-size: 0.55em !important;
    padding: 0px 1px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    position: relative;
    border: none;
  }
  
  /* Кнопки домой, музыка, звук - скрыты в мобильной версии */
  .header-action-btn {
    display: none !important;
  }
  
  /* Контейнер для кнопок под таймером */
  #home-button,
  #mute-music-button,
  #mute-sfx-button {
    display: none !important;
  }
  
  /* Волны */
  .wave-details {
    grid-column: 3;
    font-size: 0.45em !important;
  }
  
  /* Описание битвы */
  #battle-description {
    font-size: 0.4em !important;
  }
  
  /* Скрываем секцию событий на мобильных */
  .hide-on-mobile {
    display: none !important;
  }
}




/* ============================================
   МОБИЛЬНАЯ ВЕРСИЯ - УПРАВЛЕНИЕ ПРАВОЙ ПАНЕЛЬЮ
   Применяется для всех мобильных устройств
   ============================================ */

/* Правая панель для мобильных - скрыта по умолчанию */
html.mobile-device #right-panel {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: all 0.3s ease !important;
}

/* Правая панель видна - показывается справа */
html.mobile-device #right-panel.mobile-visible {
  display: flex !important;
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  padding: 10px !important;
  border: 1px solid var(--border-color) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5) !important;
}

/* Для очень узких экранов - панель на весь экран */
@media (max-width: 480px) {
  html.mobile-device #right-panel.mobile-visible {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* Игровое поле на мобильных занимает всю доступную ширину */
html.mobile-device .game-field {
  flex: 1 1 auto !important;
  min-width: 200px !important;
  width: 100% !important;
  /* МОБИЛЬНАЯ КАМЕРА: Убираем 3D-перспективу — поле должно быть плоским */
  perspective: none !important;
  perspective-origin: unset !important;
}

/* МОБИЛЬНАЯ КАМЕРА: Убираем наклон и 3D-трансформации для плоского вида */
html.mobile-device .game-field-inner {
  transform-origin: 0 0 !important;
  transform-style: flat !important;
}

/* Десктоп - правая панель всегда видна */
html.desktop-device #right-panel {
  display: flex !important;
}

/* ============================================
   МОБИЛЬНАЯ АНИМАЦИЯ ХИДЕРА/ФУТЕРА ПРИ БОЕ
   ============================================ */

html.mobile-device header {
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              min-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease,
              border-width 0.5s ease;
  overflow: hidden;
}

html.mobile-device footer {
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              min-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease,
              border-width 0.5s ease;
  overflow: hidden;
}

html.mobile-device header.battle-hidden {
  max-height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0 !important;
  border-bottom-width: 0 !important;
  pointer-events: none;
}

html.mobile-device footer.battle-hidden {
  max-height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0 !important;
  border-top-width: 0 !important;
  pointer-events: none;
}

html.mobile-device header.battle-hidden::before,
html.mobile-device footer.battle-hidden::before {
  opacity: 0 !important;
}

.mobile-overlay {
  background: rgba(0, 0, 0, 0.7);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Подсветка пунктов меню при наведении */
.menu-item:hover {
  background: rgba(0, 170, 255, 0.15) !important;
  color: #00f0ff !important;
}

.menu-item:active {
  background: rgba(0, 170, 255, 0.25) !important;
}


/* ============================================
   МОБИЛЬНЫЙ ОВЕРЛЕЙ (ЗАТЕМНЕНИЕ)
   ============================================ */

.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-overlay.active {
  opacity: 1;
  pointer-events: auto;
}


/* ============================================
   МОБИЛЬНАЯ ПРАВАЯ ПАНЕЛЬ - СКРЫТИЕ ПО УМОЛЧАНИЮ
   ============================================ */

/* На мобильных устройствах скрываем правую панель по умолчанию */
@media screen and (max-width: 1024px) {
  #right-panel {
    position: fixed;
    right: -100%; /* Скрываем за пределами экрана справа */
    top: 0;
    bottom: 0;
    width: 85vw; /* 85% ширины экрана */
    max-width: 400px;
    z-index: 9999; /* Поверх всего */
    transition: right 0.3s ease-in-out;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    margin: 0;
    border-radius: 0; /* Убираем скругление для полноэкранной панели */
  }
  
  /* Показываем панель при добавлении класса mobile-visible */
  #right-panel.mobile-visible {
    right: 0; /* Выезжает справа */
  }
  
  /* Затемнение фона при открытой панели */
  #right-panel.mobile-visible::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: -1;
    pointer-events: none;
  }
  
  /* Игровое поле занимает всю ширину на мобильных */
  .game-field {
    flex: 1 1 100%;
    min-width: 100%;
  }
  
  /* Левая панель тоже может быть скрыта или уменьшена на очень маленьких экранах */
  .info-panel {
    min-width: 200px;
    width: 200px;
    max-width: 200px;
    position: relative !important; /* Закрепляем панель */
    left: 0 !important;
    transform: none !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }
}

/* Для очень маленьких экранов (телефоны в портретной ориентации) */
@media screen and (max-width: 600px) {
  #right-panel {
    width: 90vw; /* 90% ширины экрана */
    max-width: none;
  }
  
  /* Левую панель можно сделать еще компактнее */
  .info-panel {
    min-width: 180px;
    width: 180px;
    max-width: 180px;
    position: relative !important; /* Закрепляем панель */
    left: 0 !important;
    transform: none !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }
}

/* Для планшетов в портретной ориентации */
@media screen and (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {
  #right-panel {
    width: 70vw;
    max-width: 450px;
  }
}

/* Для горизонтальной ориентации на мобильных */
@media screen and (max-width: 1024px) and (orientation: landscape) {
  #right-panel {
    width: 50vw;
    max-width: 400px;
  }
}

/* ============================================
   МОБИЛЬНЫЕ СТИЛИ (html.mobile-device)
   ============================================ */

/* Для очень узких экранов - панель на весь экран */
@media (max-width: 480px) {
  html.mobile-device #right-panel.mobile-visible {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* Игровое поле на мобильных занимает всю доступную ширину */
html.mobile-device .game-field {
  flex: 1 1 auto !important;
  min-width: 200px !important;
  width: 100% !important;
  /* МОБИЛЬНАЯ КАМЕРА: Убираем 3D-перспективу — поле должно быть плоским */
  perspective: none !important;
  perspective-origin: unset !important;
}

/* МОБИЛЬНАЯ КАМЕРА: Убираем наклон и 3D-трансформации для плоского вида */
html.mobile-device .game-field-inner {
  transform-origin: 0 0 !important;
  transform-style: flat !important;
}

/* Десктоп - правая панель всегда видна */
html.desktop-device #right-panel {
  display: flex !important;
}

/* ============================================
   МОБИЛЬНАЯ АНИМАЦИЯ ХИДЕРА/ФУТЕРА ПРИ БОЕ
   ============================================ */

html.mobile-device header {
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              min-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease,
              border-width 0.5s ease;
  overflow: hidden;
}

html.mobile-device footer {
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              min-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease,
              border-width 0.5s ease;
  overflow: hidden;
}

html.mobile-device header.battle-hidden {
  max-height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0 !important;
  border-bottom-width: 0 !important;
  pointer-events: none;
}

html.mobile-device footer.battle-hidden {
  max-height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0 !important;
  border-top-width: 0 !important;
  pointer-events: none;
}

html.mobile-device header.battle-hidden::before,
html.mobile-device footer.battle-hidden::before {
  opacity: 0 !important;
}


/* ============================================
   ТЕСТИРОВАНИЕ НА ДЕСКТОПЕ
   Для тестирования мобильной панели на десктопе
   ============================================ */

/* Если добавлен класс force-mobile-panel, панель ведет себя как на мобильном */
#right-panel.force-mobile-panel {
  position: fixed !important;
  right: -100% !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 400px !important;
  z-index: 9999 !important;
  transition: right 0.3s ease-in-out !important;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5) !important;
  overflow-y: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

#right-panel.force-mobile-panel.mobile-visible {
  right: 0 !important;
}

#right-panel.force-mobile-panel.mobile-visible::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: -1;
  pointer-events: none;
}