/* ═══════════════════════════════════════════
   01 · DESIGN TOKENS — DIGITAL KRAKEN THEME
   
   Бездна цифрового океана. Биолюминесцентные
   щупальца, neo-noir диснеевская мягкость, 
   светящийся планктон и комфорт для глаз.
   ═══════════════════════════════════════════ */

:root {
  /* ── Палитра интерфейса ──
       Мягкий графитовый сланец, призрачный свет,
       циановые разряды кракена */
  --c-text:            #c8dae5;          /* лунный свет сквозь толщу */
  --c-text-secondary:  #5c748d;          /* тени в расщелине (слегка осветлены для читаемости) */
  --c-bg:              #121b29;          /* новое осветленное дно Марианской впадины */
  --c-bg-alt:          #1a2638;          /* абиссальный слой (плашка поверх основного фона) */
  --c-border:          #25354e;          /* хребет спящего кракена (границы блоков) */
  --c-accent:          #00e5ff;          /* биолюминесцентный разряд */

  /* ── Доска (Old Disney + Ламповый Киберпанк) ──
       Чешуя кракена: матовая и теплая,
       черные фигуры гарантированно видны */
  --c-sq-light:        #f3dfbf;          /* теплое свечение вакуумной лампы */
  --c-sq-dark:         #7a8b99;          /* припыленный сизый металл */
  
  --c-highlight:       #a855f7;          /* щупальце схватило */
  --c-highlight-alpha: rgba(168, 85, 247, 0.25);
  --c-premove:         rgba(0, 229, 255, 0.20); /* след щупальца */

  /* ── Категории ходов ──
       Глубоководная шкала опасности:
       от планктона до левиафана */
  --c-theory:          #38bdf8;          /* синий планктон */
  --c-good:            #34d399;          /* биолюминесценция */
  --c-inaccuracy:      #fbbf24;          /* глаз открывается */
  --c-mistake:         #f97316;          /* всплеск чернил */
  --c-blunder:         #ef4444;          /* хватка щупальца */
  --c-gross-blunder:   #d946ef;          /* яд кракена */
  --c-catastrophe:     #ff0040;          /* клюв кракена */

  /* ── Рейтинг ── */
  --c-rising:          #00ffaa;          /* всплытие */
  --c-falling:         #ff2255;          /* погружение в бездну */

  /* ── Hull (корпус) ── */
  --c-hull-green:      #00ffaa;          /* корпус герметичен */
  --c-hull-yellow:     #ffc107;          /* давление растёт */
  --c-hull-red:        #ff2255;          /* корпус раздавлен */

  /* ── Пергамент (газетный модал) ──
       Экран гидролокатора в батискафе,
       адаптирован под новый --c-bg */
  --c-parchment:       #152030;          /* экран выключен */
  --c-parchment-dark:  #1d2b40;          /* корпус экрана */
  --c-parchment-mid:   #24354d;          /* тёплая зона */
  --c-parchment-light: #223249;          /* область сканирования */
  --c-ink:             #e0ecf4;          /* фосфор текста */
  --c-ink-faded:       #6d8ea9;          /* старый фосфор */
  --c-ink-red:         #ff4466;          /* тревога */
  --c-ink-green:       #00ffaa;          /* безопасная зона */
  --c-ink-gold:        #ffc107;          /* обнаружение */
  --c-eldritch:        #a855f7;          /* аномалия */

  /* ── Лейаут ── */
  --w-column:          520px;
  --w-side:            280px;
  --gap:               32px;

  /* ── Типографика ── */
  --ff-system:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-serif:          'Playfair Display', 'Georgia', serif;
  --ff-serif-body:     'IM Fell English', 'Georgia', serif;
  --ff-gothic:         'UnifrakturMaguntia', 'Playfair Display', serif;
  --ff-mono:           'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* ── Дополнительные токены кракена ── */
  --c-kraken:          #a855f7;          /* основной фиолетовый */
  --c-kraken-deep:     #7c3aed;          /* глубинный */
  --c-kraken-glow:     #c084fc;          /* свечение */
  --c-neon-cyan:       #00e5ff;          /* неоновый циан */
  --c-neon-cyan-dim:   #0891b2;          /* приглушённый циан */
  --c-neon-green:      #00ffaa;          /* биолюм. зелёный */
  --c-neon-pink:       #ff2288;          /* неоновый розовый */
  --c-abyss:           #0a1424;          /* абсолютная тьма (согласована с новым bg) */
  --c-abyss-mid:       #162337;          /* средняя глубина */
  --c-sonar:           #22d3ee;          /* луч сонара */
  --c-ink-cloud:       #232154;          /* чернильное облако */


  /* ── Тени — глубоководное свечение ── */
  --shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.4),
                       0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:         0 4px 16px rgba(0, 0, 0, 0.5),
                       0 0 8px rgba(0, 229, 255, 0.04);
  --shadow-lg:         0 12px 40px rgba(0, 0, 0, 0.6),
                       0 0 20px rgba(168, 85, 247, 0.06);
  --shadow-glow-cyan:  0 0 12px rgba(0, 229, 255, 0.25),
                       0 0 40px rgba(0, 229, 255, 0.08);
  --shadow-glow-purple:0 0 12px rgba(168, 85, 247, 0.25),
                       0 0 40px rgba(168, 85, 247, 0.08);
  --shadow-glow-green: 0 0 12px rgba(0, 255, 170, 0.25),
                       0 0 40px rgba(0, 255, 170, 0.06);

  /* ── Анимации ── */
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:       cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-tentacle:     cubic-bezier(0.22, 0.68, 0.0, 1.04);  
  --ease-pulse:        cubic-bezier(0.4, 0, 0.6, 1);          
  --ease-emerge:       cubic-bezier(0.0, 0.9, 0.1, 1);        
  --duration-fast:     0.15s;
  --duration-normal:   0.35s;
  --duration-slow:     0.7s;
  --duration-deep:     2.5s;
}

/* ═══════════════════════════════════════════
   02 · RESET & BASE — DIGITAL KRAKEN
   
   Абиссальный сброс. Тьма океанского дна
   заливает всё пространство. Тихо. Глубоко.
   ═══════════════════════════════════════════ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  font-family: var(--ff-system);
  background-color: var(--c-bg);
  color: var(--c-text);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  min-height: 100vh;
  overflow-x: hidden;

  /* ── Абиссальный фон с лёгким свечением ── */
  background-image:
    radial-gradient(
      ellipse 800px 600px at 50% 0%,
      rgba(168, 85, 247, 0.04) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 600px 800px at 0% 50%,
      rgba(0, 229, 255, 0.02) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 600px 800px at 100% 80%,
      rgba(0, 255, 170, 0.015) 0%,
      transparent 60%
    );
  background-attachment: fixed;
}

/* ── Скроллбары — щупальце в расщелине ── */

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--c-abyss);
}

::-webkit-scrollbar-thumb {
  background: var(--c-kraken);
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.4);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--c-kraken-glow);
}

/* ── Выделение текста ── */

::selection {
  background: rgba(168, 85, 247, 0.3);
  color: #fff;
}

/* ═══════════════════════════════════════════
   03 · LAYOUT — DIGITAL KRAKEN
   
   Каркас батискафа. Три отсека:
   левый борт — правый борт — центральный
   обзорный иллюминатор.
   ═══════════════════════════════════════════ */

.app {
  display: grid;
  grid-template-columns: var(--w-side) var(--w-column) var(--w-side);
  grid-template-rows: auto 1fr;
  gap: 0 var(--gap);
  align-items: start;
  width: 100%;
  max-width: 1200px;
}

.board-column {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.side-panel {
  grid-column: 1;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-self: start;
}

.analysis-panel {
  grid-column: 3;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-self: start;
}

/* ═══════════════════════════════════════════
   04 · TYPOGRAPHY — DIGITAL KRAKEN
   
   Шрифты глубин: холодный неон заголовков,
   фосфорный свет данных, шёпот бездны
   в мелком тексте.
   ═══════════════════════════════════════════ */

/* ── Заголовок приложения ── */

.header {
  text-align: center;
  padding: 0 0 20px;
  width: 100%;
}

.header h1 {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}

.header .subtitle {
  font-size: 0.7rem;
  color: var(--c-neon-cyan-dim);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 6px;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}

/* ── Универсальные лейблы ── */

label,
.panel-label {
  font-size: 0.65rem;
  color: var(--c-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}

.panel-label {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-neon-cyan-dim);
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.15);
}

/* ── Бейдж дебюта ── */

.opening-badge {
  font-size: 0.7rem;
  color: var(--c-text-secondary);
  font-weight: 500;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

/* ── Сообщение кракена ── */

.kraken-message {
  padding-left: 10px;
  border-left: 2px solid var(--c-kraken);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--c-text);
  margin-top: 4px;
  text-shadow: 0 0 4px rgba(168, 85, 247, 0.1);
}

/* ═══════════════════════════════════════════
   05 · COMPONENTS — DIGITAL KRAKEN
   
   Приборы батискафа: переключатели,
   кнопки экстренного всплытия,
   индикаторы давления и сонар.
   ═══════════════════════════════════════════ */

/* ── Select — сонарный переключатель ── */

select {
  appearance: none;
  width: 100%;
  background: var(--c-bg-alt);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  padding: 8px 10px;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: inherit;
  transition:
    border-color var(--duration-fast),
    box-shadow var(--duration-fast);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a6278' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

select:focus {
  outline: none;
  border-color: var(--c-neon-cyan);
  box-shadow: 0 0 0 1px var(--c-neon-cyan),
              var(--shadow-glow-cyan);
}

/* ── Кнопки — панель управления ── */

button {
  font-family: inherit;
  padding: 10px 16px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--c-border);
  background: var(--c-bg-alt);
  color: var(--c-text);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition:
    border-color var(--duration-fast),
    background-color var(--duration-fast),
    box-shadow var(--duration-fast);
}

button:hover {
  border-color: var(--c-neon-cyan-dim);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.1);
}

/* ── Модификаторы кнопок ── */

.btn-start {
  background: linear-gradient(135deg, var(--c-kraken-deep), var(--c-kraken));
  color: #fff;
  border-color: var(--c-kraken);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: var(--shadow-glow-purple);
}

.btn-start:hover {
  background: linear-gradient(135deg, var(--c-kraken), var(--c-kraken-glow));
  border-color: var(--c-kraken-glow);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.4),
              0 0 60px rgba(168, 85, 247, 0.15);
}

.btn-secondary {
  background: var(--c-abyss-mid);
}

.btn-row {
  display: flex;
  gap: 8px;
}

.btn-row button {
  flex: 1;
}

/* ── Кнопка анализа Lichess ── */

.btn-lichess-analysis {
  display: none;
  width: 100%;
  padding: 12px 16px;
  margin-top: 12px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #4a8c1c, #629924);
  border: 1px solid #4a8c1c;
  cursor: pointer;
  transition:
    background-color var(--duration-fast),
    transform 0.1s ease,
    box-shadow var(--duration-fast);
  box-shadow: 0 0 12px rgba(98, 153, 36, 0.2);
}

.btn-lichess-analysis:hover {
  background: linear-gradient(135deg, #3d7516, #4a8c1c);
  box-shadow: 0 0 20px rgba(98, 153, 36, 0.35);
}

.btn-lichess-analysis:active {
  transform: scale(0.98);
}

.btn-lichess-analysis.visible {
  display: block;
}

/* ── Бейджи и теги — индикаторы сонара ── */

.combo-badge,
.cat-tag,
.bonus-tag {
  display: inline-flex;
  padding: 4px 10px;
  border: 1px solid var(--c-border);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text);
  background: var(--c-bg-alt);
  transition: border-color var(--duration-fast),
              box-shadow var(--duration-fast);
}

.combo-badge:hover,
.cat-tag:hover,
.bonus-tag:hover {
  border-color: var(--c-neon-cyan-dim);
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.1);
}

.move-categories,
.bonus-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  justify-content: center;
}

.combo-result,
.perfect-game,
.critical-moment {
  padding: 16px;
  margin: 12px 0;
  border: 1px solid var(--c-border);
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--c-bg-alt);
}

/* ── Controls wrapper ── */

.controls-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* ═══════════════════════════════════════════
   06 · CHESS BOARD — DIGITAL KRAKEN (RETRO-CYBER)
   
   Иллюминатор батискафа. Шахматная доска —
   вид на океанское дно сквозь толстое стекло.
   Эстетика старой диснеевской анимации и 
   хакерского фосфорного терминала.
   ═══════════════════════════════════════════ */

#board {
  position: relative;
  width: var(--w-column);
  height: var(--w-column);
  border: 4px solid var(--c-border); /* Сделали рамку толще, как у настоящего иллюминатора */
  border-radius: 4px; /* Легкое скругление углов старых экранов */
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  contain: layout style;
  
  /* Эффект линзы старого мультфильма и мягкое сведение цветов */
  filter: contrast(1.02) brightness(0.96) saturate(0.95);
  
  box-shadow:
    0 0 30px rgba(0, 0, 0, 0.6),
    0 0 60px var(--c-highlight-alpha),
    inset 0 0 40px rgba(0, 0, 0, 0.8); /* Глубокая тень внутри иллюминатора */
}

/* Эффект выгнутого стекла и виньетки старого кадра */

#board::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle, transparent 40%, rgba(6, 10, 18, 0.4) 100%);
  pointer-events: none;
  z-index: 5; /* Поверх клеток, но под фигурами (если фигуры имеют z-index > 5) */
}

/* ── Цвета клеток — чешуя кракена (Чернильная Фантазия / Мягкий Фосфор) ── */

#board .white-1e1d7 {
  /* Рекомендуемый пастельный тон бумаги/светлого фосфора */
  background-color: var(--c-sq-light) !important; 
}

#board .black-3c85d {
  /* Матовая гуашь, на которой черные фигуры гарантированно не сольются */
  background-color: var(--c-sq-dark) !important; 
}

/* ── Выделение — щупальце схватило фигуру ── */

#board .click-selected {
  box-shadow: inset 0 0 0 3px var(--c-kraken-glow),
              inset 0 0 20px var(--c-highlight-alpha) !important;
  background-color: var(--c-highlight-alpha) !important;
  filter: hue-rotate(-10deg); /* Мягкое смещение тона в ретро-гамму */
}

/* ── Точки возможных ходов — фосфорный луч радара ── */

#board .legal-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24%;
  height: 24%;
  background: var(--c-accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  /* Мягкое аналоговое свечение вместо ядовитого цифрового */
  box-shadow: 0 0 10px var(--c-accent),
              0 0 20px rgba(0, 229, 255, 0.3);
  opacity: 0.85;
}

/* ── Кружок для взятий — охват щупальца (Ретро-эффект) ── */

#board .legal-capture::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 82%;
  height: 82%;
  border: 2px dashed var(--c-kraken-glow); /* Штриховка добавляет интерфейсности */
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  background: rgba(168, 85, 247, 0.05);
  box-shadow: 0 0 12px var(--c-highlight-alpha);
  animation: board-pulse 3s var(--ease-pulse) infinite; /* Плавное органическое дыхание */
}

/* ── Подсветка предходов — затухающий след сонара ── */

#board .premove-highlight {
  background-color: var(--c-premove) !important;
  box-shadow: inset 0 0 0 2px var(--c-neon-cyan-dim),
              inset 0 0 16px rgba(0, 229, 255, 0.15) !important;
}

/* ── Убираем дефолтную подсветку библиотеки ── */

#board .highlight2-9c5d2 {
  box-shadow: none !important;
}

/* ── Сервисная анимация пульсации для эффекта живого океана ── */

@keyframes board-pulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.02); }
}

/* ═══════════════════════════════════════════
   07 · PANELS — DIGITAL KRAKEN
   
   Приборные панели батискафа: глубиномер,
   сонар, бортовой журнал, система
   жизнеобеспечения и детектор аномалий.
   ═══════════════════════════════════════════ */

/* Переменные для унификации панелей */

:root {
  --c-panel-bg: rgba(12, 26, 36, 0.35); /* Фирменное темное стекло */
  --c-panel-border: rgba(0, 255, 204, 0.08); /* Тончайший неон */
  --c-panel-neon: #00ffcc; /* Чистый циан */
  --c-panel-text-dim: #708d9f; /* Читаемый серый в синеве для логов */
}

/* ── Общий стиль панелей ── */

.side-panel,
.analysis-panel {
  margin-top: 62px;
  border-top: 2px solid  #c084fc;
  box-shadow: 0 -4px 20px rgba(0, 255, 204, 0.05);
}

/* ── Элементы внутри панелей ── */

.side-panel .info-card,
.side-panel .controls-wrapper,
.side-panel .combo-container,
.side-panel .live-stats-box,
.analysis-panel .notation-box,
.analysis-panel .feedback-box,
.analysis-panel .combo-container {
  background: var(--c-panel-bg);
  backdrop-filter: blur(6px);
  border: none;
  border-bottom: 1px solid var(--c-panel-border);
  padding: 16px; /* Добавили внутренний отступ для эстетики стекла */
}

.side-panel > :last-child,
.analysis-panel > :last-child {
  border-bottom: none;
}

/* ── Info Card & Rating — глубиномер ── */

.info-card {
  background: var(--c-panel-bg);
  padding: 24px 16px;
  width: 100%;
  border-bottom: 1px solid var(--c-panel-border);
}

#rating-display {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.rating-main .label {
  font-size: 0.55rem;
  color: var(--c-panel-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  margin-bottom: 4px;
}

#rating-value {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  text-shadow: 0 0 15px rgba(0, 255, 204, 0.15);
}

#rating-value.rising {
  color: #00ffaa;
  text-shadow: 0 0 15px rgba(0, 255, 170, 0.5);
}

#rating-value.falling {
  color: #ff2255;
  text-shadow: 0 0 15px rgba(255, 34, 85, 0.5);
}

.rating-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--c-panel-border);
}

.rating-delta {
  font-size: 0.7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-panel-text-dim);
}

.rating-delta.positive {
  color: #00ffaa;
  text-shadow: 0 0 6px rgba(0, 255, 170, 0.3);
}

.rating-delta.positive::before { content: '+'; }

.rating-delta.negative {
  color: #ff2255;
  text-shadow: 0 0 6px rgba(255, 34, 85, 0.3);
}

.rating-peak {
  font-size: 0.6rem;
  color: var(--c-panel-text-dim);
  letter-spacing: 0.04em;
}

.rating-peak::before {
  content: 'PEAK ';
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ── Notation & Feedback — бортовой журнал ── */

.notation-box,
.feedback-box {
  background: var(--c-panel-bg);
  border: none;
  border-bottom: 1px solid var(--c-panel-border);
  padding: 16px;
  width: 100%;
}

/* ── Move History — судовой лог ── */

.move-history,
#move-history {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  max-height: 300px;
  min-height: 60px;
  padding: 4px;
}

.move-pair {
  display: grid;
  grid-template-columns: 28px 1fr 1fr;
  gap: 4px;
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(0, 255, 204, 0.05); /* Заменено на тонкий неоновый разделитель */
}

.move-pair:last-child {
  border-bottom: none;
}

.move-number {
  font-size: 0.72rem;
  color: var(--c-panel-text-dim);
  text-align: right;
  padding-right: 4px;
}

.move-san {
  padding: 2px 6px;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 3px;
  cursor: pointer;
  transition:
    background var(--duration-fast),
    box-shadow var(--duration-fast);
  color: var(--c-text);
}

.move-san:hover {
  background: rgba(0, 255, 204, 0.06);
  box-shadow: 0 0 6px rgba(0, 255, 204, 0.15);
}

/* ── Категории ходов — система детекции на темном стекле ── */

.move-san.pending     { color: #4e6378; }

.move-san.opponent    { color: var(--c-panel-text-dim); }

.move-san.theory {
  color: #38bdf8;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.3);
}

.move-san.good {
  color: #34d399;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(52, 211, 153, 0.3);
}

.move-san.inaccuracy {
  color: #fbbf24;
  text-shadow: 0 0 4px rgba(251, 191, 36, 0.2);
}

.move-san.mistake {
  color: #f97316;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(249, 115, 22, 0.3);
}

.move-san.blunder {
  color: #ef4444;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}

.move-san.grossBlunder {
  color: #d946ef;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(217, 70, 239, 0.4);
}

.move-san.catastrophe {
  color: #ff0040;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 0, 64, 0.5);
  animation: catastrophe-pulse 1.5s var(--ease-pulse) infinite;
}

@keyframes catastrophe-pulse {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 2px rgba(255,0,64,0.5)); }
  50%      { opacity: 0.6; filter: drop-shadow(0 0 0px transparent); }
}

.move-san.placeholder { color: rgba(0, 255, 204, 0.04); }

/* ── Combo Container — счётчик аномалий ── */

.combo-container {
  background: var(--c-panel-bg);
  border-bottom: 2px solid var(--c-panel-neon);
  padding: 20px 16px 12px;
  width: 100%;
  position: relative;
  transition: all var(--duration-normal) var(--ease-bounce);
}

.combo-container.active {
  background: rgba(0, 255, 204, 0.03);
  box-shadow: inset 0 0 15px rgba(0, 255, 204, 0.04);
}

.combo-info {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 10px;
}

.combo-label {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--c-text);
}

.combo-label::after {
  content: "LIVE RECAP";
  display: block;
  font-size: 0.5rem;
  font-family: var(--ff-system);
  font-style: normal;
  font-weight: 800;
  background: #ff2288; /* Свежий неоновый розовый */
  color: #fff;
  padding: 2px 5px;
  border-radius: 3px;
  margin-top: 4px;
  letter-spacing: 0.05em;
  box-shadow: 0 0 10px rgba(255, 34, 136, 0.4);
}

#combo-multiplier {
  font-family: var(--ff-mono);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.05em;
  background: linear-gradient(
    135deg,
    #00ffcc,
    #00aaff
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(0, 255, 204, 0.3));
  transition: transform var(--duration-fast) ease;
}

.bump {
  transform: scale(1.15);
}

.combo-bar-bg {
  height: 6px;
  background: rgba(6, 13, 19, 0.6); /* Внутреннее затемнение трека бара */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

#combo-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    #006666 0%,
    #00ffcc 60%,
    #00ffaa 100%
  );
  box-shadow:
    0 0 10px rgba(0, 255, 204, 0.6),
    0 0 20px rgba(0, 255, 170, 0.2);
  width: 0%;
  border-radius: 10px;
  transition: width var(--duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Live Stats — панель жизнеобеспечения ── */

.live-stats-box {
  background: var(--c-panel-bg);
  border: none;
  border-bottom: 1px solid var(--c-panel-border);
  padding: 16px;
  width: 100%;
}

.live-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.live-stat {
  padding: 12px 8px;
  border-bottom: 1px solid var(--c-panel-border);
  border-right: 1px solid var(--c-panel-border);
  text-align: center;
  transition: background var(--duration-fast);
}

.live-stat:hover {
  background: rgba(0, 255, 204, 0.03);
}

.live-stat:nth-child(2n) {
  border-right: none;
}

.live-stat:nth-last-child(-n+2) {
  border-bottom: none;
}

.live-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

.live-stat-label {
  font-size: 0.6rem;
  color: var(--c-panel-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════
   ENCHANTED SEA SCENE — Old Disney Style
   
   Тёплая ночная сцена: бархатное небо,
   крупная сказочная луна, мягкие облака,
   живописная вода, парусник из сказки.
   
   Стилистика: классический Disney 1940–1995
   — Мягкие градиенты, тёплые тени
   — Округлые формы, «рисованные» линии
   — Приглушённое волшебство вместо неона
   — Палитра: индиго, лаванда, золото, бирюза
   ═══════════════════════════════════════════ */

/* ── Контейнер сцены ── */

.sea-scene {
  width: 100%;
  height: 185px;
  border: none;
  padding: 0;
  margin-top: 16px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  transition: filter var(--duration-weather) ease;
  contain: layout style;
  box-shadow:
    0 4px 20px rgba(20, 10, 45, 0.5),
    0 1px 0 rgba(255, 220, 150, 0.08) inset;
}

.sea-scene::before,
.sea-scene::after {
  content: none;
}

/* ── Бархатное ночное небо ──
   Классический Disney: глубокий индиго
   с переходом в тёплый горизонт */

.sky-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(
    180deg,
    #0b0e2a 0%,        /* глубокая ночь */
    #141840 15%,
    #1c2455 28%,
    #253068 40%,
    #2e3c78 52%,
    #3a4a82 62%,
    #4d5a8a 72%,
    #5e6890 80%,
    #7a7ea0 88%,
    #a08e8a 94%,        /* тёплый горизонт */
    #c4a07a 100%
  );
  transition: background var(--duration-weather) ease;
  z-index: 1;
}

/* ── Звёзды: крупные, «нарисованные» ──
   Disney-звёзды — это не точки, а мягкие
   четырёхлучевые блики с тёплым свечением */

.sky-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Крупные «диснеевские» звёзды — мягкие, с ореолом */
    radial-gradient(3px 3px at 12% 14%, rgba(255, 248, 220, 0.95), transparent 70%),
    radial-gradient(2px 2px at 12% 14%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 28% 8%, rgba(255, 248, 220, 0.9), transparent 70%),
    radial-gradient(1.5px 1.5px at 28% 8%, #fff, transparent),
    radial-gradient(3.5px 3.5px at 45% 22%, rgba(255, 240, 200, 0.85), transparent 70%),
    radial-gradient(2px 2px at 45% 22%, #fff, transparent),
    radial-gradient(2px 2px at 62% 10%, rgba(255, 248, 230, 0.8), transparent 70%),
    radial-gradient(1px 1px at 62% 10%, #fff, transparent),
    radial-gradient(3px 3px at 78% 18%, rgba(255, 245, 210, 0.9), transparent 70%),
    radial-gradient(1.5px 1.5px at 78% 18%, #fff, transparent),
    radial-gradient(2px 2px at 90% 6%, rgba(255, 248, 220, 0.85), transparent 70%),
    radial-gradient(1px 1px at 90% 6%, #fff, transparent),
    /* Средние звёзды */
    radial-gradient(1.5px 1.5px at 8% 38%, rgba(255, 245, 220, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 20% 28%, rgba(255, 250, 230, 0.65), transparent),
    radial-gradient(1.5px 1.5px at 38% 42%, rgba(255, 245, 215, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 52% 35%, rgba(255, 248, 225, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 68% 30%, rgba(255, 245, 220, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 85% 38%, rgba(255, 250, 230, 0.5), transparent);
  animation: disneyTwinkle 5s ease-in-out infinite alternate;
  z-index: 1;
}

/* Мелкая звёздная пыль */

.sky-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 5% 20%, rgba(255, 240, 200, 0.5), transparent),
    radial-gradient(1px 1px at 16% 45%, rgba(255, 245, 210, 0.4), transparent),
    radial-gradient(1px 1px at 24% 18%, rgba(255, 240, 200, 0.45), transparent),
    radial-gradient(1px 1px at 34% 32%, rgba(255, 245, 215, 0.35), transparent),
    radial-gradient(1px 1px at 42% 12%, rgba(255, 240, 200, 0.5), transparent),
    radial-gradient(1px 1px at 56% 48%, rgba(255, 245, 210, 0.3), transparent),
    radial-gradient(1px 1px at 65% 22%, rgba(255, 240, 200, 0.4), transparent),
    radial-gradient(1px 1px at 74% 42%, rgba(255, 245, 215, 0.35), transparent),
    radial-gradient(1px 1px at 82% 12%, rgba(255, 240, 200, 0.45), transparent),
    radial-gradient(1px 1px at 94% 32%, rgba(255, 245, 210, 0.4), transparent);
  animation: disneyTwinkle2 7s ease-in-out infinite alternate;
  z-index: 1;
}

@keyframes disneyTwinkle {
  0%   { opacity: 0.7; }
  100% { opacity: 1; }
}

@keyframes disneyTwinkle2 {
  0%   { opacity: 1; }
  100% { opacity: 0.55; }
}

/* ═══ СКАЗОЧНАЯ ЛУНА ═══
   Большая, тёплая, с мягким ореолом —
   как в «Русалочке» или «Питере Пэне» */

.celestial-body {
  position: absolute;
  top: 6%;
  right: 16%;
  width: 36px;
  height: 36px;
  z-index: 2;
  transition:
    opacity var(--duration-weather) ease,
    transform var(--duration-weather) ease,
    filter var(--duration-weather) ease;
}

.sun-glow {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #fff8e8 0%,
    #ffefca 20%,
    #ffe4a8 40%,
    rgba(255, 220, 150, 0.6) 55%,
    rgba(255, 200, 120, 0.25) 70%,
    rgba(255, 180, 100, 0.08) 85%,
    transparent 100%
  );
  box-shadow:
    0 0 12px rgba(255, 230, 160, 0.7),
    0 0 35px rgba(255, 210, 130, 0.35),
    0 0 70px rgba(255, 190, 100, 0.15),
    0 0 120px rgba(255, 180, 80, 0.06);
  animation: disneyMoonGlow 8s ease-in-out infinite;
}

/* Кратеры луны — тонкие тени */

.sun-glow::before {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background:
    radial-gradient(3px 3px at 35% 40%, rgba(220, 190, 130, 0.3), transparent 70%),
    radial-gradient(4px 4px at 60% 30%, rgba(210, 180, 120, 0.25), transparent 70%),
    radial-gradient(2px 2px at 50% 65%, rgba(215, 185, 125, 0.2), transparent 70%),
    radial-gradient(3px 3px at 25% 60%, rgba(220, 190, 130, 0.15), transparent 70%);
}

@keyframes disneyMoonGlow {
  0%, 100% {
    box-shadow:
      0 0 12px rgba(255, 230, 160, 0.7),
      0 0 35px rgba(255, 210, 130, 0.35),
      0 0 70px rgba(255, 190, 100, 0.15);
  }
  50% {
    box-shadow:
      0 0 18px rgba(255, 235, 170, 0.85),
      0 0 45px rgba(255, 215, 140, 0.4),
      0 0 90px rgba(255, 195, 110, 0.18);
  }
}

/* ═══ МЯГКОЕ СВЕЧЕНИЕ ГОРИЗОНТА ═══
   Вместо северного сияния — тёплый
   лунный свет на горизонте, как в
   классических Disney-задниках */

.aurora-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: soft-light;
}

/* Мягкий лунный столб */

.aurora-band {
  position: absolute;
  left: -20%;
  right: -20%;
  height: 100%;
  filter: blur(20px);
  will-change: transform;
}

.aurora-band-1 {
  top: 30%;
  height: 50%;
  background: radial-gradient(
    ellipse 40% 80% at 75% 100%,
    rgba(255, 220, 150, 0.25) 0%,
    rgba(255, 200, 130, 0.12) 40%,
    transparent 70%
  );
  animation: moonlightSway 12s ease-in-out infinite;
  opacity: 0.7;
}

/* Лёгкая лавандовая дымка — фирменный Disney */

.aurora-band-2 {
  top: 20%;
  height: 60%;
  background: radial-gradient(
    ellipse 60% 70% at 50% 90%,
    rgba(140, 130, 180, 0.15) 0%,
    rgba(120, 110, 170, 0.08) 50%,
    transparent 80%
  );
  animation: hazeShift 18s ease-in-out infinite;
  opacity: 0.5;
}

/* Тёплый отсвет у горизонта */

.aurora-band-3 {
  top: 50%;
  height: 50%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(200, 160, 100, 0.1) 60%,
    rgba(180, 130, 80, 0.15) 100%
  );
  animation: none;
  opacity: 0.6;
}

/* Лучи лунного света — не нужны,
   скрываем контейнер */

.aurora-rays { display: none; }

.aurora-ray  { display: none; }

@keyframes moonlightSway {
  0%, 100% { transform: translateX(0) scaleX(1); }
  50%      { transform: translateX(15px) scaleX(1.05); }
}

@keyframes hazeShift {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50%      { transform: translateX(-10px); opacity: 0.35; }
}

/* ── Горизонт ── */

.horizon-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
   background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(210, 180, 130, 0.2) 15%,
    rgba(235, 200, 145, 0.4) 40%,
    rgba(255, 215, 155, 0.45) 55%,
    rgba(235, 200, 145, 0.4) 70%,
    rgba(210, 180, 130, 0.2) 85%,
    transparent 100%
  );
  z-index: 3;
  transition:
    background var(--duration-weather) ease,
    opacity var(--duration-weather) ease;
   box-shadow:
    0 0 8px rgba(255, 215, 155, 0.15),
    0 2px 6px rgba(255, 210, 150, 0.08);
}

/* ═══ ОБЛАКА — МЯГКИЕ, ПУШИСТЫЕ ═══
   Классический Disney: облака как
   пухлые подушки, тёплые полутона,
   лёгкая подсветка луной снизу */

.clouds-container {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.cloud {
  position: absolute;
  display: flex;
  align-items: center;
  will-change: transform;
  transition:
    opacity var(--duration-weather) ease,
    transform 1s ease;
}

.cloud-puff {
  border-radius: 50%;
  /* Тёмно-лавандовые облака с тёплым подсветом */
  background: radial-gradient(
    ellipse at 50% 65%,
    rgba(80, 75, 110, 0.55) 0%,
    rgba(60, 55, 90, 0.5) 40%,
    rgba(45, 40, 75, 0.45) 70%,
    rgba(35, 30, 65, 0.35) 100%
  );
  box-shadow:
    inset 0 -3px 6px rgba(200, 170, 120, 0.08),
    inset 0 2px 4px rgba(10, 8, 25, 0.2),
    0 2px 8px rgba(10, 8, 25, 0.15);
  transition: background var(--duration-weather) ease;
}

/* Облако 1 — большое, переднеплановое */

.cloud-1 {
  top: 10%;
  left: -15%;
  animation: cloudDrift1 50s linear infinite;
  opacity: 0.7;
}

.cloud-1 .cp-1 { width: 30px; height: 20px; margin-right: -10px; }

.cloud-1 .cp-2 { width: 44px; height: 28px; margin-right: -12px; margin-top: -8px; }

.cloud-1 .cp-3 { width: 34px; height: 22px; }

/* Облако 2 */

.cloud-2 {
  top: 22%;
  left: 20%;
  animation: cloudDrift2 60s linear infinite;
  opacity: 0.45;
}

.cloud-2 .cp-1 { width: 22px; height: 15px; margin-right: -7px; }

.cloud-2 .cp-2 { width: 32px; height: 20px; margin-right: -9px; margin-top: -5px; }

.cloud-2 .cp-3 { width: 26px; height: 17px; margin-right: -6px; }

.cloud-2 .cp-4 { width: 20px; height: 13px; }

/* Облако 3 — маленькое, далёкое */

.cloud-3 {
  top: 6%;
  left: 55%;
  animation: cloudDrift3 40s linear infinite;
  opacity: 0.3;
}

.cloud-3 .cp-1 { width: 16px; height: 11px; margin-right: -5px; }

.cloud-3 .cp-2 { width: 24px; height: 15px; margin-right: -6px; margin-top: -3px; }

.cloud-3 .cp-3 { width: 15px; height: 10px; }

/* Облако 4 — крохотное */

.cloud-4 {
  top: 32%;
  left: 70%;
  animation: cloudDrift4 65s linear infinite;
  opacity: 0.22;
}

.cloud-4 .cp-1 { width: 14px; height: 10px; margin-right: -4px; }

.cloud-4 .cp-2 { width: 22px; height: 14px; }

/* Облако 5 */

.cloud-5 {
  top: 16%;
  left: -25%;
  animation: cloudDrift5 55s linear infinite;
  opacity: 0.5;
}

.cloud-5 .cp-1 { width: 24px; height: 16px; margin-right: -7px; }

.cloud-5 .cp-2 { width: 36px; height: 22px; margin-right: -9px; margin-top: -6px; }

.cloud-5 .cp-3 { width: 28px; height: 18px; }

/* Облака медленно дрейфуют */

@keyframes cloudDrift1 {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 120px)); }
}

@keyframes cloudDrift2 {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 100px)); }
}

@keyframes cloudDrift3 {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 80px)); }
}

@keyframes cloudDrift4 {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 60px)); }
}

@keyframes cloudDrift5 {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 140px)); }
}

/* Удаляем неоновое свечение облаков —
   вместо него лёгкое мерцание лунного света */

@keyframes cloudGlow {
  0%, 100% {
    box-shadow:
      inset 0 -3px 6px rgba(200, 170, 120, 0.08),
      inset 0 2px 4px rgba(10, 8, 25, 0.2);
  }
  50% {
    box-shadow:
      inset 0 -4px 8px rgba(210, 180, 130, 0.12),
      inset 0 2px 4px rgba(10, 8, 25, 0.2);
  }
}

/* ═══ ЧАЙКИ — РИСОВАННЫЕ СИЛУЭТЫ ═══
   Мягкие, тёплые, как в «Русалочке» */

.seagulls-container {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.seagull {
  position: absolute;
  color: rgba(200, 190, 210, 0.55);
  transition: opacity var(--duration-weather) ease;
  will-change: transform;
  filter: none; /* убираем неоновый drop-shadow */
}

.seagull-svg {
  width: 100%;
  height: 100%;
}

.seagull-1 {
  top: 20%; left: 10%; width: 14px; height: 6px;
  animation: seagullFly1 14s ease-in-out infinite;
}

.seagull-2 {
  top: 12%; left: 40%; width: 10px; height: 4px;
  opacity: 0.4;
  animation: seagullFly2 18s ease-in-out infinite;
}

.seagull-3 {
  top: 28%; left: 65%; width: 12px; height: 5px;
  opacity: 0.45;
  animation: seagullFly3 20s ease-in-out infinite;
}

@keyframes seagullFly1 {
  0%, 100% { transform: translate(0, 0) scaleY(1); }
  15%  { transform: translate(8px, -4px) scaleY(0.5); }
  30%  { transform: translate(18px, -2px) scaleY(1.1); }
  50%  { transform: translate(30px, -6px) scaleY(0.6); }
  70%  { transform: translate(40px, 2px) scaleY(1); }
  85%  { transform: translate(50px, -3px) scaleY(0.7); }
}

@keyframes seagullFly2 {
  0%, 100% { transform: translate(0, 0) scaleY(1); }
  25%  { transform: translate(-8px, -3px) scaleY(0.5); }
  50%  { transform: translate(-15px, 1px) scaleY(1.1); }
  75%  { transform: translate(-5px, -4px) scaleY(0.6); }
}

@keyframes seagullFly3 {
  0%, 100% { transform: translate(0, 0) scaleY(1); }
  20%  { transform: translate(12px, -5px) scaleY(0.5); }
  45%  { transform: translate(25px, 0) scaleY(1); }
  70%  { transform: translate(15px, -3px) scaleY(0.7); }
}

/* ═══ ВОДНАЯ ПОВЕРХНОСТЬ — ЖИВОПИСНАЯ ═══
   Глубокая, тёмно-синяя, с тёплыми
   лунными бликами — как нарисованная */

.water-surface {
  position: absolute;
  top: 55%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  overflow: hidden;
}

.water-body {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #0f715d 0%,
    #0d6352 8%,
    #0b5647 18%,
    #0a4a3d 30%,
    #083d32 45%,
    #073229 60%,
    #05271f 75%,
    #041c16 88%,
    #02120e 100%
  );

  transition: background var(--duration-weather) ease;
}

/* Лунная дорожка на воде */

.water-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 25% 80% at 75% 0%, rgba(200, 255, 230, 0.25) 0%, rgba(100, 240, 190, 0.15) 30%, rgba(50, 220, 160, 0.08) 50%, transparent 70%);

  animation: moonReflection 10s ease-in-out infinite;
}

@keyframes moonReflection {
  0%, 100% { opacity: 0.8; transform: scaleX(1); }
  30%  { opacity: 1;   transform: scaleX(1.04); }
  60%  { opacity: 0.6; transform: scaleX(0.96); }
}

/* ── Рябь — мягкие горизонтальные линии ── */

.water-ripples {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ripple-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  opacity: 0.5;
  will-change: transform;
  transition:
    opacity var(--duration-weather) ease,
    background 1.5s ease;
}

/* Тёплая палитра ряби */

.rl-1 {
  top: 8%;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255, 220, 160, 0.08) 20%,
    rgba(160, 210, 200, 0.1) 50%, transparent 80%);
  animation: rippleShift 7s ease-in-out infinite;
}

.rl-2 {
  top: 18%;
  background: linear-gradient(90deg,
    transparent 5%, rgba(160, 180, 210, 0.08) 30%,
    rgba(255, 215, 150, 0.07) 60%, transparent 90%);
  animation: rippleShift 8s ease-in-out infinite 0.6s;
}

.rl-3 {
  top: 30%;
  background: linear-gradient(90deg,
    transparent 10%, rgba(140, 160, 200, 0.07) 40%,
    transparent 70%);
  animation: rippleShift 6s ease-in-out infinite 1.2s;
}

.rl-4 {
  top: 42%;
  background: linear-gradient(90deg,
    transparent 0%, rgba(130, 150, 190, 0.06) 35%,
    rgba(200, 190, 160, 0.05) 65%, transparent 100%);
  animation: rippleShift 9s ease-in-out infinite 0.4s;
}

.rl-5 {
  top: 55%;
  background: linear-gradient(90deg,
    transparent 15%, rgba(120, 140, 180, 0.05) 50%,
    transparent 85%);
  animation: rippleShift 7.5s ease-in-out infinite 1.8s;
  opacity: 0.35;
}

.rl-6 {
  top: 68%;
  background: linear-gradient(90deg,
    transparent 20%, rgba(110, 130, 170, 0.04) 55%,
    transparent 90%);
  animation: rippleShift 8.5s ease-in-out infinite 1s;
  opacity: 0.25;
}

.rl-7 {
  top: 82%;
  background: linear-gradient(90deg,
    transparent 25%, rgba(100, 120, 160, 0.03) 50%,
    transparent 80%);
  animation: rippleShift 10s ease-in-out infinite 1.5s;
  opacity: 0.18;
}

@keyframes rippleShift {
  0%, 100% { transform: translateX(0) scaleX(1);    opacity: 0.5; }
  25%  { transform: translateX(6px) scaleX(1.01);   opacity: 0.65; }
  50%  { transform: translateX(-4px) scaleX(0.99);  opacity: 0.4; }
  75%  { transform: translateX(2px) scaleX(1.005);  opacity: 0.55; }
}

/* ── Лунные блики на воде ──
   Тёплые золотистые искры вдоль лунной
   дорожки — как мазки кисти аниматора */

.water-glints {
  position: absolute;
  inset: 0;
  z-index: 2;
  transition: opacity var(--duration-weather) ease;
}

.glint {
  position: absolute;
  border-radius: 50%;
  filter: blur(0.5px);
}

/* Блики сконцентрированы вдоль лунной дорожки
   (правая часть сцены, под луной) */

.g-1 {
  top: 6%; left: 68%; width: 3px; height: 2px;
  background: rgba(255, 230, 170, 0.55);
  animation: glintFlicker 4s ease-in-out infinite;
}

.g-2 {
  top: 14%; left: 74%; width: 2.5px; height: 1.5px;
  background: rgba(255, 220, 150, 0.45);
  animation: glintFlicker 5s ease-in-out infinite 0.7s;
}

.g-3 {
  top: 22%; left: 70%; width: 2px; height: 1.5px;
  background: rgba(255, 225, 160, 0.4);
  animation: glintFlicker 3.5s ease-in-out infinite 1.2s;
}

.g-4 {
  top: 10%; left: 78%; width: 3px; height: 2px;
  background: rgba(255, 235, 180, 0.5);
  animation: glintFlicker 4.5s ease-in-out infinite 0.3s;
}

.g-5 {
  top: 30%; left: 66%; width: 2px; height: 1.5px;
  background: rgba(255, 215, 140, 0.35);
  animation: glintFlicker 5.5s ease-in-out infinite 1.8s;
}

.g-6 {
  top: 18%; left: 82%; width: 2px; height: 1.5px;
  background: rgba(255, 225, 160, 0.3);
  animation: glintFlicker 4.2s ease-in-out infinite 0.9s;
}

/* Пара бликов вне дорожки — редкие, тусклые */

.g-7 {
  top: 15%; left: 30%; width: 2px; height: 1.5px;
  background: rgba(200, 200, 220, 0.2);
  animation: glintFlicker 6s ease-in-out infinite 2s;
}

.g-8 {
  top: 40%; left: 45%; width: 2px; height: 1.5px;
  background: rgba(190, 195, 215, 0.15);
  animation: glintFlicker 7s ease-in-out infinite 1.5s;
}

@keyframes glintFlicker {
  0%, 100% { opacity: 0;   transform: scale(0.5); }
  15%  { opacity: 0.85; transform: scale(1.3); }
  30%  { opacity: 0;    transform: scale(0.7); }
  55%  { opacity: 0.5;  transform: scale(1.1); }
  75%  { opacity: 0;    transform: scale(0.6); }
}

/* ── Пена — лёгкая, живописная ──
   Мягкие белёсые штрихи, как акварель */

.foam-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.foam-streak {
  position: absolute;
  height: 1.5px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(200, 210, 230, 0.1),
    rgba(220, 220, 240, 0.18),
    rgba(200, 210, 230, 0.1),
    transparent
  );
  opacity: 0.4;
  transition: opacity var(--duration-weather) ease;
}

.fs-1 {
  top: 4%; left: 8%; width: 55px;
  animation: foamDrift 10s ease-in-out infinite;
}

.fs-2 {
  top: 16%; left: 42%; width: 38px;
  animation: foamDrift 13s ease-in-out infinite 3s;
  opacity: 0.25;
}

.fs-3 {
  top: 28%; left: 65%; width: 45px;
  animation: foamDrift 15s ease-in-out infinite 5s;
  opacity: 0.2;
}

@keyframes foamDrift {
  0%, 100% { transform: translateX(0) scaleX(1);   opacity: 0.4; }
  30%  { transform: translateX(8px) scaleX(1.08);   opacity: 0.55; }
  60%  { transform: translateX(-4px) scaleX(0.95);  opacity: 0.25; }
}

/* ═══ ВОЛНЫ — ПЛАВНЫЕ, РИСОВАННЫЕ ═══
   Мягкие синусоиды, как нарисованные
   широкой кистью — тёмно-синие с
   лёгким бирюзовым оттенком */

.sea-waves {
  position: absolute;
  top: 53%;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}

.sea-wave {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 100%;
  will-change: transform;
  transition: opacity var(--duration-weather) ease;
}

/* Ближняя волна — самая заметная */

.sw-1 {
  top: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath d='M0 30 Q150 12 300 30 T600 30 T900 30 T1200 30 V60 H0Z' fill='rgba(30,50,80,0.12)'/%3E%3C/svg%3E")
    repeat-x bottom;
  background-size: 300px 20px;
  animation: waveFlow 7s linear infinite;
  opacity: 0.8;
}

.sw-2 {
  top: 8%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath d='M0 30 Q150 16 300 30 T600 30 T900 30 T1200 30 V60 H0Z' fill='rgba(25,42,70,0.08)'/%3E%3C/svg%3E")
    repeat-x bottom;
  background-size: 350px 18px;
  animation: waveFlow 9s linear infinite -2s;
  opacity: 0.6;
}

.sw-3 {
  top: 16%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath d='M0 30 Q150 19 300 30 T600 30 T900 30 T1200 30 V60 H0Z' fill='rgba(20,35,60,0.06)'/%3E%3C/svg%3E")
    repeat-x bottom;
  background-size: 400px 15px;
  animation: waveFlow 12s linear infinite -4s;
  opacity: 0.4;
}

.sw-4 {
  top: 24%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath d='M0 30 Q150 22 300 30 T600 30 T900 30 T1200 30 V60 H0Z' fill='rgba(18,30,55,0.04)'/%3E%3C/svg%3E")
    repeat-x bottom;
  background-size: 450px 12px;
  animation: waveFlow 15s linear infinite -6s;
  opacity: 0.25;
}

@keyframes waveFlow {
  from { transform: translateX(0); }
  to   { transform: translateX(300px); }
}

/* ═══ ПАРУСНИК ИЗ СКАЗКИ ═══
   Не призрак, а настоящий деревянный
   кораблик — как из «Питера Пэна» или
   «Русалочки». Тёплый силуэт с
   мягкой тенью на воде */

.ship.ship-editorial {
  position: absolute;
  right: -60px;
  top: -78px;
  width: 110px;
  height: 90px;
  pointer-events: none;
  z-index: 9;
}

.ship-drift-shell {
  position: relative;
  width: 100%;
  height: 100%;
}

.ship-bob {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 75%;
  animation: shipBob 5s ease-in-out infinite;
  /* Мягкая тень вместо неонового свечения */
  filter:
    drop-shadow(0 2px 4px rgba(10, 8, 25, 0.5))
    drop-shadow(0 4px 8px rgba(10, 8, 25, 0.3));
  will-change: transform;
}

/* Отражение корабля в воде —
   тёплое, размытое пятно */

.ship-bob::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -8px;
  height: 16px;
  background: radial-gradient(
    ellipse at center,
    rgba(20, 15, 40, 0.35) 0%,
    rgba(15, 12, 35, 0.2) 40%,
    rgba(10, 8, 25, 0.08) 70%,
    transparent 100%
  );
  border-radius: 50%;
  z-index: -1;
  animation: reflectionPulse 5s ease-in-out infinite;
}

@keyframes reflectionPulse {
  0%, 100% { transform: scaleX(1) scaleY(1);    opacity: 0.6; }
  50%      { transform: scaleX(1.2) scaleY(0.8); opacity: 0.3; }
}

/* Более плавное покачивание —
   как настоящий кораблик на волнах */

@keyframes shipBob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  20%  { transform: translateY(-1.5px) rotate(-0.3deg); }
  40%  { transform: translateY(-3.5px) rotate(0.8deg); }
  60%  { transform: translateY(-2px) rotate(1.2deg); }
  80%  { transform: translateY(-0.5px) rotate(0deg); }
}

/* ═══ VOYAGE TRACK — КАРТА ПУТЕШЕСТВИЯ ═══
   Стилизация под старинную карту:
   пергаментные тона, чернильные линии */

.voyage-track {
  position: absolute;
  bottom: 38px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 8;
}

.voyage-start,
.voyage-end {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: right;
}

.voyage-start svg,
.voyage-end svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: rgba(220, 195, 150, 0.6);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px rgba(200, 170, 120, 0.2));
}

.voyage-progress-bg {
  flex: 1;
  height: 1px;
  background: rgba(180, 160, 130, 0.2);
  position: relative;
  overflow: visible;
}

.voyage-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(220, 190, 130, 0.6),
    rgba(240, 210, 150, 0.7),
    rgba(220, 195, 140, 0.6)
  );
  position: relative;
  transition: width 0.6s ease;
  box-shadow: 0 0 4px rgba(220, 190, 130, 0.15);
}

/* Маркер текущей позиции */

.voyage-fill::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  background: rgba(15, 12, 30, 0.7);
  border: 1.5px solid rgba(230, 200, 140, 0.8);
  border-radius: 50%;
  box-shadow:
    0 0 5px rgba(230, 200, 140, 0.25),
    0 0 10px rgba(230, 200, 140, 0.1);
}

/* ═══ CHECKPOINTS — ТОЧКИ НА КАРТЕ ═══ */

.checkpoint {
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  background: rgba(20, 16, 40, 0.5);
  border: 1px solid rgba(180, 160, 130, 0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.checkpoint.reached {
  background: rgba(230, 200, 140, 0.85);
  border-color: rgba(240, 215, 160, 1);
  box-shadow:
    0 0 4px rgba(230, 200, 140, 0.35),
    0 0 8px rgba(230, 200, 140, 0.12);
}

.checkpoint.final {
  width: 8px;
  height: 8px;
  background: transparent;
  border: 1.5px solid rgba(200, 170, 120, 0.6);
  animation: finalMark 3s ease-in-out infinite;
}

@keyframes finalMark {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.12); opacity: 0.55; }
}

/* Тултипы в стиле пергамента */

.checkpoint[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(25, 20, 15, 0.88);
  color: rgba(230, 210, 170, 0.9);
  font-size: 0.58rem;
  padding: 4px 8px;
  white-space: nowrap;
  letter-spacing: 0.03em;
  border-radius: 3px;
  border: 1px solid rgba(180, 160, 120, 0.2);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(10, 8, 5, 0.3);
}

/* ═══ HULL BAR — СОСТОЯНИЕ КОРАБЛЯ ═══
   Деревянная палитра: от золотистого
   (хорошо) через янтарный к красному */

.hull-bar {
  position: absolute;
  bottom: -25px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 8;
}

.hull-label {
  font-size: 0.55rem;
  color: rgba(200, 180, 140, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  flex-shrink: 0;
}

.hull-segments {
  display: flex;
  gap: 2px;
  flex: 1;
}

.hull-segment {
  height: 4px;
  flex: 1;
  background: rgba(150, 130, 100, 0.1);
  border-radius: 1px;
  transition:
    background 0.3s ease,
    opacity 0.3s ease;
}

.hull-segment.active {
  background: linear-gradient(
    90deg,
    rgba(180, 200, 140, 0.55),
    rgba(200, 210, 150, 0.65)
  );
  box-shadow: 0 0 3px rgba(180, 200, 140, 0.15);
}

.hull-segment.warning {
  background: linear-gradient(
    90deg,
    rgba(230, 190, 80, 0.55),
    rgba(240, 170, 50, 0.65)
  );
  box-shadow: 0 0 3px rgba(230, 190, 80, 0.15);
}

.hull-segment.critical {
  background: rgba(220, 80, 70, 0.55);
  animation: hullPulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 4px rgba(220, 80, 70, 0.2);
}

@keyframes hullPulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

#hull-text {
  font-size: 0.55rem;
  color: rgba(200, 180, 140, 0.5);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  flex-shrink: 0;
}

/* ═══ WEATHER INDICATOR ═══
   Стилизация под старинный компас /
   записку на пергаменте */

.weather-indicator {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.58rem;
  color: rgba(220, 200, 160, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.6s ease;
  /* Полупрозрачный «пергамент» */
  background: rgba(25, 20, 15, 0.55);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(180, 160, 120, 0.15);
  backdrop-filter: blur(6px);
  box-shadow:
    0 2px 8px rgba(10, 8, 5, 0.25),
    inset 0 1px 0 rgba(220, 200, 160, 0.04);
}

.weather-indicator.visible { opacity: 1; }

.weather-icon {
  font-size: 0.8rem;
  line-height: 1;
  filter: none; /* убираем неоновый glow */
}

.weather-name {
  font-weight: 600;
  font-size: 0.55rem;
  text-shadow: none;
}

/* ═══════════════════════════════════════════
   09 · ENCHANTED WEATHER SYSTEM
   
   Магический шторм, призрачный ветер,
   мистический туман, зачарованный штиль.
   Палитра: глубокий индиго, бирюза, аметист.
   ═══════════════════════════════════════════ */

/* ── Общий слой погоды ── */

.weather-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
  transition: opacity 1s ease;
}

/* ── Контейнеры эффектов ── */

.rain-container,
.wind-container,
.fog-container,
.lightning-container {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease;
}

/* ── Анимация смены погоды ── */

.sea-scene.weather-transitioning {
  animation: weatherShift 2s ease-in-out;
}

@keyframes weatherShift {
  0%   { filter: brightness(1); }
  40%  { filter: brightness(0.6) saturate(1.3); }
  60%  { filter: brightness(0.6) saturate(1.3); }
  100% { filter: brightness(1); }
}

/* ═══════════════════════════════════════════
   STORM — Магический шторм
   ═══════════════════════════════════════════ */

/* Штормовое небо — тёмный индиго с пурпуром */

.sea-scene.weather-storm .sky-layer {
  background: linear-gradient(
    180deg,
    #05051a 0%,
    #0a0a2a 15%,
    #12103a 30%,
    #1a1545 50%,
    #221a50 70%,
    #2a2060 85%,
    #32285a 100%
  );
}

/* Звёзды скрыты за тучами */

.sea-scene.weather-storm .sky-layer::before,
.sea-scene.weather-storm .sky-layer::after {
  opacity: 0.1;
}

/* Штормовая вода — чёрный аметист */

.sea-scene.weather-storm .water-body {
  background: linear-gradient(
    180deg,
    #0a0818 0%,
    #080614 30%,
    #060510 60%,
    #03020a 100%
  );
}

/* Отражение сияния гаснет в шторм */

.sea-scene.weather-storm .water-body::before {
  opacity: 0.15;
}

/* Горизонт при шторме — тусклый фиолетовый */

.sea-scene.weather-storm .horizon-line {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(100, 60, 180, 0.15) 30%,
    rgba(120, 80, 200, 0.25) 50%,
    rgba(100, 60, 180, 0.15) 70%,
    transparent 100%
  );
  box-shadow: 0 0 6px rgba(100, 60, 180, 0.1);
}

/* Луна скрыта */

.sea-scene.weather-storm .celestial-body {
  opacity: 0;
  transform: scale(0.5);
}

/* ── Магический дождь ── */

.sea-scene.weather-storm .rain-container { opacity: 1; }

.raindrop {
  position: absolute;
  left: var(--x);
  top: -20px;
  width: 1.5px;
  height: 18px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(100, 150, 255, 0.3) 30%,
    rgba(150, 100, 255, 0.6)
  );
  opacity: 0;
  transform: rotate(30deg);
  transform-origin: top center;
  border-radius: 0 0 2px 2px;
  filter: blur(0.3px);
}

.sea-scene.weather-storm .raindrop {
  animation: rainFallDiagonal var(--duration) linear var(--delay) infinite;
}

@keyframes rainFallDiagonal {
  0%  { transform: rotate(30deg) translateY(-20px); opacity: 0; }
  5%  { opacity: 0.8; }
  85% { opacity: 0.5; }
  100%{ transform: rotate(30deg) translateY(250px); opacity: 0; }
}

/* Сияние тускнеет, но не гаснет — мерцает сквозь тучи */

.sea-scene.weather-storm .aurora-container {
  opacity: 0.25;
  filter: blur(4px);
  animation: auroraStormFlicker 6s ease-in-out infinite;
}

@keyframes auroraStormFlicker {
  0%, 100% { opacity: 0.15; }
  30% { opacity: 0.35; }
  50% { opacity: 0.1; }
  70% { opacity: 0.3; }
}

/* Облака — тёмные грозовые с фиолетовым нутром */

.sea-scene.weather-storm .cloud-puff {
  background: rgba(15, 10, 35, 0.85);
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.5),
    inset 0 2px 4px rgba(80, 40, 150, 0.15);
}

.sea-scene.weather-storm .cloud {
  opacity: 0.9 !important;
  animation-duration: 80s !important;
}

/* Чайки-духи прячутся */

.sea-scene.weather-storm .seagull {
  opacity: 0 !important;
}

/* Волны — выше, агрессивнее */

.sea-scene.weather-storm .sea-wave { opacity: 0.9; }

.sea-scene.weather-storm .sw-1 {
  animation-duration: 2s !important;
  background-size: 200px 30px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath d='M0 30 Q150 10 300 30 T600 30 T900 30 T1200 30 V60 H0Z' fill='rgba(100,60,200,0.08)'/%3E%3C/svg%3E")
    repeat-x bottom;
  background-size: 200px 30px;
}

.sea-scene.weather-storm .sw-2 {
  animation-duration: 2.5s !important;
  background-size: 250px 25px;
}

.sea-scene.weather-storm .sw-3 {
  animation-duration: 3s !important;
  opacity: 0.6;
}

.sea-scene.weather-storm .sw-4 {
  animation-duration: 3.5s !important;
  opacity: 0.4;
}

/* Блики скрыты */

.sea-scene.weather-storm .water-glints { opacity: 0; }

/* Рябь — хаотичная, фиолетовый оттенок */

.sea-scene.weather-storm .ripple-line {
  opacity: 0.9;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(120, 100, 255, 0.12) 10%,
    transparent 20%,
    rgba(150, 80, 255, 0.1) 35%,
    transparent 45%,
    rgba(100, 150, 255, 0.15) 60%,
    transparent 70%,
    rgba(80, 100, 200, 0.08) 85%,
    transparent 100%
  );
  animation-duration: 2s !important;
}

/* Пена — магическое свечение */

.sea-scene.weather-storm .foam-streak {
  opacity: 0.8;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(100, 150, 255, 0.3),
    rgba(150, 100, 255, 0.5),
    rgba(100, 150, 255, 0.3),
    transparent
  );
  animation-duration: 3s !important;
}

/* Корабль — сильная качка, мерцающее свечение */

.sea-scene.weather-storm .ship-bob {
  animation: shipBobStorm 2s ease-in-out infinite !important;
  filter:
    drop-shadow(0 0 6px rgba(100, 60, 200, 0.4))
    drop-shadow(0 2px 5px rgba(0, 0, 20, 0.8));
}

@keyframes shipBobStorm {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  20% { transform: translateY(-6px) rotate(5deg); }
  40% { transform: translateY(-2px) rotate(-6deg); }
  60% { transform: translateY(-8px) rotate(4deg); }
  80% { transform: translateY(-3px) rotate(-3deg); }
}

/* Магические брызги на корабле */

.sea-scene.weather-storm .ship-bob::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: -15px;
  right: -15px;
  height: 18px;
  background-image:
    radial-gradient(circle 2px at 15% 50%, rgba(100, 180, 255, 0.8) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 30% 30%, rgba(150, 100, 255, 0.6) 50%, transparent 51%),
    radial-gradient(circle 2.5px at 50% 60%, rgba(0, 255, 180, 0.7) 50%, transparent 51%),
    radial-gradient(circle 1px at 70% 40%, rgba(100, 200, 255, 0.5) 50%, transparent 51%),
    radial-gradient(circle 2px at 85% 55%, rgba(200, 100, 255, 0.6) 50%, transparent 51%);
  opacity: 0;
  animation: sprayBurst 0.6s ease-out infinite alternate;
}

@keyframes sprayBurst {
  0%   { opacity: 0; transform: translateY(0) scale(0.8); }
  50%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-15px) scale(1.3); }
}

/* ── Магические молнии ── */

.sea-scene.weather-storm .lightning-container { opacity: 1; }

.lightning-bolt {
  position: absolute;
  top: 0;
  width: 40px;
  height: 60%;
  opacity: 0;
}

.bolt-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 8px rgba(150, 100, 255, 0.9));
}

.bolt-svg path {
  stroke: rgba(200, 170, 255, 0.9);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lb-1 { left: 25%; }

.lb-2 { left: 65%; }

.sea-scene.weather-storm .lb-1 {
  animation: boltStrike1 8s ease-out infinite;
}

.sea-scene.weather-storm .lb-2 {
  animation: boltStrike2 8s ease-out infinite 3.5s;
}

@keyframes boltStrike1 {
  0%, 32%, 37%, 100% { opacity: 0; }
  33% { opacity: 1; transform: scaleY(1); }
  34% { opacity: 0.3; }
  35% { opacity: 0.9; }
}

@keyframes boltStrike2 {
  0%, 45%, 50%, 100% { opacity: 0; }
  46% { opacity: 1; }
  47% { opacity: 0.2; }
  48% { opacity: 0.8; }
}

/* Вспышка от молнии — фиолетовая */

.lightning-flash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(150, 100, 255, 0.2) 0%,
    rgba(100, 80, 200, 0.1) 50%,
    rgba(80, 60, 180, 0.05) 100%
  );
  opacity: 0;
}

.sea-scene.weather-storm .lightning-flash {
  animation: lightningFlash 8s ease-out infinite;
}

@keyframes lightningFlash {
  0%, 32.5%, 33.5%, 34.5%, 35%, 46%, 47%, 47.5%, 48%, 100% { opacity: 0; }
  33%  { opacity: 0.8; }
  46.5%{ opacity: 0.6; }
  47.5%{ opacity: 0.3; }
}

/* ═══════════════════════════════════════════
   WIND — Призрачный ветер
   ═══════════════════════════════════════════ */

.sea-scene.weather-wind .wind-container { opacity: 1; }

/* Призрачные порывы ветра */

.wind-gust {
  position: absolute;
  height: 2px;
  border-radius: 4px;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 255, 180, 0.1) 15%,
    rgba(100, 200, 255, 0.2) 35%,
    rgba(150, 100, 255, 0.25) 50%,
    rgba(100, 200, 255, 0.2) 65%,
    rgba(0, 255, 180, 0.1) 85%,
    transparent 100%
  );
  will-change: transform;
  filter: blur(0.5px);
}

.wg-1 { top: 30%; left: -20%; width: 80px;  animation: gustBlow 2.5s ease-in-out infinite; }

.wg-2 { top: 50%; left: -15%; width: 60px;  animation: gustBlow 3s ease-in-out infinite 0.8s; }

.wg-3 { top: 65%; left: -25%; width: 100px; animation: gustBlow 2.8s ease-in-out infinite 1.5s; }

.wg-4 { top: 40%; left: -10%; width: 50px;  animation: gustBlow 3.2s ease-in-out infinite 2.2s; }

@keyframes gustBlow {
  0%   { transform: translateX(0) scaleX(0.5); opacity: 0; }
  15%  { opacity: 0.6; transform: translateX(40px) scaleX(1); }
  50%  { opacity: 0.4; transform: translateX(150px) scaleX(1.2); }
  85%  { opacity: 0.2; }
  100% { transform: translateX(350px) scaleX(0.8); opacity: 0; }
}

/* Магические брызги от ветра */

.wind-spray {
  position: absolute;
  width: 4px;
  height: 3px;
  border-radius: 50%;
  background: rgba(0, 255, 180, 0.5);
  opacity: 0;
  filter: blur(0.5px);
}

.ws-1 { top: 55%; left: -5%;  animation: sprayFly 1.8s ease-out infinite 0.2s; }

.ws-2 {
  top: 60%; left: -3%;
  animation: sprayFly 2.2s ease-out infinite 0.7s;
  background: rgba(100, 200, 255, 0.5);
}

.ws-3 {
  top: 52%; left: -8%;
  animation: sprayFly 1.5s ease-out infinite 1.2s;
  background: rgba(150, 100, 255, 0.5);
}

.ws-4 { top: 58%; left: -2%;  animation: sprayFly 2s ease-out infinite 1.8s; }

.ws-5 {
  top: 63%; left: -6%;
  animation: sprayFly 1.7s ease-out infinite 0.5s;
  background: rgba(100, 255, 200, 0.5);
}

@keyframes sprayFly {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  10%  { opacity: 0.7; }
  50%  { transform: translate(120px, -15px) scale(0.7); opacity: 0.4; }
  100% { transform: translate(280px, -30px) scale(0.3); opacity: 0; }
}

/* Небо при ветре — чуть светлее ночного */

.sea-scene.weather-wind .sky-layer {
  background: linear-gradient(
    180deg,
    #0a0a30 0%,
    #0e1248 15%,
    #131860 30%,
    #182068 45%,
    #1d2870 60%,
    #203060 75%,
    #1a2850 100%
  );
}

/* Сияние усиливается от ветра */

.sea-scene.weather-wind .aurora-container {
  opacity: 0.8;
  filter: blur(2px);
}

.sea-scene.weather-wind .aurora-band {
  animation-duration: 4s !important;
}

/* Облака — быстрее, вытянутые */

.sea-scene.weather-wind .cloud {
  animation-duration: 20s !important;
}

.sea-scene.weather-wind .cloud-puff {
  transform: scaleX(1.3);
  background: rgba(50, 40, 90, 0.5);
  box-shadow:
    inset 0 -2px 4px rgba(0, 0, 0, 0.2),
    0 0 8px rgba(0, 255, 180, 0.08);
}

/* Корабль — наклонён, призрачный шлейф */

.sea-scene.weather-wind .ship-bob {
  animation: shipBobWind 3s ease-in-out infinite !important;
  transform-origin: 50% 80%;
  filter:
    drop-shadow(0 0 10px rgba(0, 255, 180, 0.3))
    drop-shadow(0 2px 5px rgba(0, 0, 30, 0.6));
}

@keyframes shipBobWind {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  30% { transform: translateY(-2px) rotate(-3deg); }
  60% { transform: translateY(-4px) rotate(-6deg); }
}

/* Волны — быстрее */

.sea-scene.weather-wind .sw-1 { animation-duration: 3s !important; }

.sea-scene.weather-wind .sw-2 { animation-duration: 4s !important; }

.sea-scene.weather-wind .sw-3 { animation-duration: 5s !important; }

/* Чайки-духи — быстро летят */

.sea-scene.weather-wind .seagull {
  animation-duration: 5s !important;
  filter: drop-shadow(0 0 4px rgba(0, 255, 180, 0.5));
}

/* ═══════════════════════════════════════════
   FOG — Мистический туман
   ═══════════════════════════════════════════ */

.sea-scene.weather-fog .fog-container { opacity: 1; }

/* Слои мистического тумана */

.fog-layer {
  position: absolute;
  left: -20%;
  width: 140%;
  border-radius: 50%;
}

.fog-deep {
  top: 35%;
  height: 40%;
  background: radial-gradient(
    ellipse 120% 100% at 50% 50%,
    rgba(60, 40, 100, 0.5) 0%,
    rgba(40, 60, 90, 0.3) 30%,
    rgba(0, 100, 80, 0.15) 50%,
    transparent 70%
  );
  animation: fogLayerDrift 18s ease-in-out infinite;
}

.fog-mid {
  top: 25%;
  height: 50%;
  background: radial-gradient(
    ellipse 100% 80% at 40% 50%,
    rgba(80, 50, 120, 0.35) 0%,
    rgba(50, 80, 100, 0.2) 40%,
    rgba(0, 80, 60, 0.1) 60%,
    transparent 75%
  );
  animation: fogLayerDrift 24s ease-in-out infinite -6s;
}

.fog-near {
  top: 15%;
  height: 70%;
  background: radial-gradient(
    ellipse 80% 90% at 60% 50%,
    rgba(100, 60, 140, 0.3) 0%,
    rgba(60, 90, 110, 0.15) 35%,
    rgba(0, 120, 100, 0.08) 55%,
    transparent 70%
  );
  animation: fogLayerDrift 30s ease-in-out infinite -12s;
}

@keyframes fogLayerDrift {
  0%, 100% { transform: translateX(0) scaleX(1); }
  25% { transform: translateX(5%) scaleX(1.05); }
  50% { transform: translateX(-3%) scaleX(0.95); }
  75% { transform: translateX(4%) scaleX(1.02); }
}

/* Щупальца тумана — светящиеся */

.fog-tendril {
  position: absolute;
  height: 8px;
  border-radius: 4px;
  opacity: 0;
  filter: blur(3px);
}

.ft-1 {
  top: 45%; left: -30%; width: 70%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 200, 150, 0.2) 20%,
    rgba(80, 100, 200, 0.35) 50%,
    rgba(0, 200, 150, 0.2) 80%,
    transparent 100%
  );
  animation: tendrilCreep 14s ease-in-out infinite;
}

.ft-2 {
  top: 55%; left: -20%; width: 50%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(100, 50, 180, 0.2) 20%,
    rgba(60, 120, 200, 0.3) 50%,
    rgba(100, 50, 180, 0.2) 80%,
    transparent 100%
  );
  animation: tendrilCreep 18s ease-in-out infinite 4s;
}

.ft-3 {
  top: 65%; left: -35%; width: 60%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 150, 120, 0.2) 20%,
    rgba(100, 80, 200, 0.3) 50%,
    rgba(0, 150, 120, 0.2) 80%,
    transparent 100%
  );
  animation: tendrilCreep 16s ease-in-out infinite 8s;
}

.sea-scene.weather-fog .ft-1,
.sea-scene.weather-fog .ft-2,
.sea-scene.weather-fog .ft-3 {
  opacity: 1;
}

@keyframes tendrilCreep {
  0%   { transform: translateX(0) scaleX(0.8); opacity: 0; }
  20%  { opacity: 0.6; transform: translateX(20%) scaleX(1); }
  50%  { opacity: 0.8; transform: translateX(60%) scaleX(1.1); }
  80%  { opacity: 0.4; transform: translateX(100%) scaleX(0.9); }
  100% { transform: translateX(140%) scaleX(0.7); opacity: 0; }
}

/* Небо при тумане — приглушённое, но ночное */

.sea-scene.weather-fog .sky-layer {
  background: linear-gradient(
    180deg,
    #08082a 0%,
    #0c0c38 20%,
    #101048 40%,
    #151555 60%,
    #1a1a50 80%,
    #181848 100%
  );
}

/* Вода при тумане — тёмная с призрачным блеском */

.sea-scene.weather-fog .water-body {
  background: linear-gradient(
    180deg,
    #080620 0%,
    #060518 30%,
    #050412 60%,
    #03030a 100%
  );
}

/* Сияние размыто туманом, но видно */

.sea-scene.weather-fog .aurora-container {
  opacity: 0.35;
  filter: blur(12px);
}

.sea-scene.weather-fog .horizon-line {
  opacity: 0.15;
  filter: blur(3px);
  box-shadow: none;
}

.sea-scene.weather-fog .celestial-body {
  opacity: 0.2;
  filter: blur(4px);
}

.sea-scene.weather-fog .cloud {
  opacity: 0.15 !important;
  filter: blur(3px);
}

.sea-scene.weather-fog .seagull {
  opacity: 0.15 !important;
  filter:
    blur(1px)
    drop-shadow(0 0 2px rgba(0, 255, 180, 0.2));
}

.sea-scene.weather-fog .water-glints { opacity: 0.15; }

.sea-scene.weather-fog .ship-bob {
  opacity: 0.4;
  filter:
    blur(0.5px)
    drop-shadow(0 0 12px rgba(0, 255, 180, 0.2));
  animation: shipBob 7s ease-in-out infinite !important;
}

/* Отражение корабля в тумане — призрачное */

.sea-scene.weather-fog .ship-bob::after {
  background: radial-gradient(
    ellipse at center,
    rgba(0, 255, 180, 0.1) 0%,
    rgba(100, 80, 200, 0.05) 50%,
    transparent 80%
  );
}

.sea-scene.weather-fog .sea-wave {
  opacity: 0.1 !important;
  animation-duration: 10s !important;
}

/* Звёзды чуть видны сквозь туман */

.sea-scene.weather-fog .sky-layer::before {
  opacity: 0.2;
  filter: blur(1px);
}

.sea-scene.weather-fog .sky-layer::after {
  opacity: 0.15;
  filter: blur(1px);
}

/* ═══════════════════════════════════════════
   CALM — Зачарованный штиль
   ═══════════════════════════════════════════ */

/* Небо — идеальная ночь, все звёзды видны */

.sea-scene.weather-calm .sky-layer {
  background: linear-gradient(
    180deg,
    #0b0e2a 0%,        /* глубокая ночь */
    #141840 15%,
    #1c2455 28%,
    #253068 40%,
    #2e3c78 52%,
    #3a4a82 62%,
    #4d5a8a 72%,
    #5e6890 80%,
    #7a7ea0 88%,
    #a08e8a 94%,        /* тёплый горизонт */
    #c4a07a 100%
  );
}

/* Звёзды максимально яркие */

.sea-scene.weather-calm .sky-layer::before {
  opacity: 1;
  animation: starsTwinkleCalm 3s ease-in-out infinite alternate;
}

.sea-scene.weather-calm .sky-layer::after {
  opacity: 1;
  animation: starsTwinkleCalm2 4s ease-in-out infinite alternate;
}

@keyframes starsTwinkleCalm {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

@keyframes starsTwinkleCalm2 {
  0% { opacity: 1; }
  100% { opacity: 0.6; }
}

/* Луна — полная, яркая, с ореолом */

.sea-scene.weather-calm .celestial-body {
  opacity: 1;
  transform: scale(1.1);
}

.sea-scene.weather-calm .sun-glow {
  box-shadow:
    0 0 20px rgba(180, 200, 255, 0.8),
    0 0 40px rgba(120, 160, 255, 0.5),
    0 0 80px rgba(80, 120, 255, 0.25),
    0 0 120px rgba(60, 100, 255, 0.1);
}

/* Сияние — максимальная красота */

.sea-scene.weather-calm .aurora-container {
  opacity: 0.8;
  filter: blur(0px);
}

.sea-scene.weather-calm .aurora-band-1 {
  animation-duration: 10s !important;
  opacity: 0.7;
}

.sea-scene.weather-calm .aurora-band-2 {
  animation-duration: 14s !important;
  opacity: 0.55;
}

.sea-scene.weather-calm .aurora-band-3 {
  animation-duration: 18s !important;
  opacity: 0.45;
}

/* Блики — максимальные, разноцветные */

.sea-scene.weather-calm .water-glints { opacity: 1; }

.sea-scene.weather-calm .water-glints .glint {
  animation-duration: 2.5s;
}

/* Отражение сияния в воде — яркое */

.sea-scene.weather-calm .water-body::before {
  opacity: 0.9;
  animation: waterAuroraReflectionCalm 6s ease-in-out infinite;
}

@keyframes waterAuroraReflectionCalm {
  0%, 100% { opacity: 0.7; transform: scaleX(1); }
  30% { opacity: 1; transform: scaleX(1.03); }
  60% { opacity: 0.6; transform: scaleX(0.97); }
}

/* Волны — минимальные, нежные */

.sea-scene.weather-calm .sea-wave { opacity: 0.2 !important; }

.sea-scene.weather-calm .sw-1 { animation-duration: 10s !important; }

.sea-scene.weather-calm .sw-2 { animation-duration: 12s !important; }

.sea-scene.weather-calm .sw-3 { animation-duration: 14s !important; }

.sea-scene.weather-calm .sw-4 { animation-duration: 16s !important; }

/* Рябь — нежная */

.sea-scene.weather-calm .ripple-line {
  opacity: 0.25;
  animation-duration: 10s !important;
}

.sea-scene.weather-calm .foam-streak { opacity: 0.15; }

/* Корабль — плавно покачивается */

.sea-scene.weather-calm .ship-bob {
  animation: shipBobCalm 6s ease-in-out infinite !important;
  filter:
    drop-shadow(0 0 12px rgba(0, 255, 180, 0.35))
    drop-shadow(0 0 25px rgba(100, 150, 255, 0.15))
    drop-shadow(0 2px 4px rgba(0, 0, 20, 0.5));
}

@keyframes shipBobCalm {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-1px) rotate(0.5deg); }
  50% { transform: translateY(-2px) rotate(0deg); }
  75% { transform: translateY(-1px) rotate(-0.5deg); }
}

/* Лунная дорожка — магическая */

.sea-scene.weather-calm .water-surface::after {
  content: '';
  position: absolute;
  top: 0;
  right: 15%;
  width: 35px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(180, 200, 255, 0.15) 0%,
    rgba(120, 160, 255, 0.1) 15%,
    rgba(0, 255, 180, 0.08) 30%,
    rgba(150, 100, 255, 0.06) 50%,
    rgba(100, 200, 255, 0.04) 70%,
    transparent 100%
  );
  z-index: 4;
  animation: moonPathShimmer 4s ease-in-out infinite;
  filter: blur(1px);
}

@keyframes moonPathShimmer {
  0%, 100% { opacity: 0.5; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.4); }
}

/* Магические частицы, парящие над водой при штиле */

.sea-scene.weather-calm .water-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 12% 15%, rgba(0, 255, 180, 0.6), transparent),
    radial-gradient(1px 1px at 28% 40%, rgba(150, 100, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 45% 10%, rgba(100, 200, 255, 0.6), transparent),
    radial-gradient(1px 1px at 62% 35%, rgba(0, 255, 150, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 78% 20%, rgba(200, 100, 255, 0.5), transparent),
    radial-gradient(1px 1px at 88% 45%, rgba(0, 200, 180, 0.4), transparent),
    radial-gradient(1px 1px at 35% 55%, rgba(100, 255, 200, 0.3), transparent),
    radial-gradient(1px 1px at 55% 50%, rgba(180, 120, 255, 0.3), transparent);
  z-index: 5;
  animation: magicParticlesFloat 5s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes magicParticlesFloat {
  0% {
    opacity: 0.4;
    transform: translateY(0);
  }
  100% {
    opacity: 0.8;
    transform: translateY(-3px);
  }
}

/* Горизонт при штиле — яркая магическая линия */

.sea-scene.weather-calm .horizon-line {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 255, 180, 0.2) 15%,
    rgba(100, 200, 255, 0.35) 35%,
    rgba(150, 100, 255, 0.3) 50%,
    rgba(100, 200, 255, 0.35) 65%,
    rgba(0, 255, 180, 0.2) 85%,
    transparent 100%
  );
  box-shadow:
    0 0 8px rgba(0, 255, 180, 0.2),
    0 0 16px rgba(100, 150, 255, 0.1);
  height: 2px;
}

/* Облака при штиле — полупрозрачные, с подсветкой */

.sea-scene.weather-calm .cloud-puff {
  background: rgba(60, 50, 100, 0.3);
  box-shadow:
    inset 0 -2px 4px rgba(0, 0, 0, 0.1),
    0 0 8px rgba(0, 255, 180, 0.08),
    0 0 12px rgba(100, 100, 255, 0.05);
}

/* Чайки-духи — спокойные, светящиеся */

.sea-scene.weather-calm .seagull {
  filter:
    drop-shadow(0 0 4px rgba(0, 255, 180, 0.5))
    drop-shadow(0 0 8px rgba(100, 150, 255, 0.2));
}

.sea-scene.weather-calm .seagull-1 { animation-duration: 18s !important; }

.sea-scene.weather-calm .seagull-2 { animation-duration: 22s !important; }

.sea-scene.weather-calm .seagull-3 { animation-duration: 25s !important; }

/* =========================================================================
   07 · SEA EVENTS & CAPTAIN'S LOG — DIGITAL KRAKEN THEME
   
   Винтажные элементы интерфейса батискафа, интегрированные в 
   кибернетическую экосистему цифрового океана.
   ========================================================================= */

/* === Морские события === */

.sea-event-card {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    z-index: 9999;
    background: var(--c-sq-light); /* Светлая чешуя (эффект старой бумаги) */
    border: 3px solid var(--c-sq-dark); /* Сизый металл для рамки иллюминатора */
    border-radius: 12px;
    padding: 20px 28px;
    text-align: center;
    opacity: 0;
    
    /* Использована ваша плавная органическая анимация щупальца */
    transition: all var(--duration-slow) var(--ease-tentacle);
    
    /* Тень глубоководного свечения */
    box-shadow: var(--shadow-lg), inset 0 0 15px rgba(0, 0, 0, 0.05);
    max-width: 340px;
    font-family: var(--ff-serif-body); /* Ваша винтажная типографика */
    
    /* Эффект линзы, как на доске */
    filter: contrast(1.02) brightness(1.02);
}

.sea-event-card.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Категории событий привязаны к шкале опасности и вашим теням свечения */

.sea-event-card.event-good {
    border-color: var(--c-good);
    box-shadow: var(--shadow-glow-green);
}

.sea-event-card.event-bad {
    border-color: var(--c-mistake);
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.3), 0 0 40px rgba(249, 115, 22, 0.1);
}

.sea-event-card.event-legendary {
    border-color: var(--c-eldritch); /* Аномалия Кракена */
    box-shadow: var(--shadow-glow-purple);
    animation: legendary-glow var(--duration-deep) var(--ease-pulse) infinite;
}

@keyframes legendary-glow {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.2)); }
    50% { filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.5)); }
}

.sea-event-name {
    font-family: var(--ff-serif);
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--c-bg); /* Контрастный темный текст на светлом пергаменте */
    letter-spacing: -0.02em;
}

.sea-event-message {
    font-style: italic;
    color: var(--c-text-secondary);
    margin-bottom: 12px;
    line-height: 1.45;
}

.sea-event-result {
    font-family: var(--ff-mono); /* Результаты выводятся кодом, как на радаре */
    font-weight: 600;
    font-size: 0.85rem;
    padding: 8px var(--gap);
    border-radius: 6px;
    background: rgba(122, 139, 153, 0.12);
    border: 1px dashed rgba(122, 139, 153, 0.25);
    color: var(--c-bg);
}

/* === Капитанский журнал === */

#captains-log {
    position: relative;
    max-height: 140px;
    overflow: hidden;
    padding: 14px;
    background: var(--c-parchment); /* Экран гидролокатора выключен */
    border: 2px solid var(--c-border); /* Хребет спящего кракена */
    border-radius: 8px;
    font-family: var(--ff-serif-body);
    font-size: 0.85rem;
    color: var(--c-ink); /* Фосфорный текст */
    box-shadow: var(--shadow-sm);
    
    /* Градиент угасания текста адаптирован под новый цвет фона */
    mask-image: linear-gradient(180deg, var(--c-bg) 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, var(--c-bg) 60%, transparent 100%);
}

.log-entry {
    padding: 6px 0;
    border-bottom: 1px dashed rgba(109, 142, 169, 0.15); /* Старый фосфор */
    opacity: 0;
    transform: translateY(-10px);
    transition: all var(--duration-normal) var(--ease-emerge); /* Эффект всплытия лога */
    font-style: italic;
}

.log-entry.show {
    opacity: 1;
    transform: translateY(0);
}

/* Цвета записей синхронизированы со шкалой повреждений корпуса батискафа */

.log-damage { 
    color: var(--c-hull-red); 
    font-family: var(--ff-mono);
}

.log-storm { 
    color: var(--c-theory); 
}

.log-repair { 
    color: var(--c-ink-green); 
}

.log-crewDeath { 
    color: var(--c-ink-red); 
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--ff-serif);
    letter-spacing: 0.05em;
}

/* ── Спрайт ── */

.kraken-sprite {
  position: absolute;
  background-image: url('animation/kraken_sprite.png');
  background-size: 700% 100%;
  background-position: 0% 0;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  z-index: 11;
  transform-origin: center bottom;
  filter: sepia(1) saturate(3) hue-rotate(240deg) brightness(0.85);
}

/* ── Обычная атака ── */

.kraken-attack.active .kraken-sprite {
  animation:
    krakenFrames   2.4s steps(6)  forwards,
    krakenEmerge   2.4s ease-out  forwards,
    krakenFade     2.4s ease-out  forwards;
}

/* ── Blunder-атака ── */

.kraken-attack.active .kraken-sprite.blunder {
  animation:
    krakenFrames        2s steps(6)                          forwards,
    krakenEmergeBlunder 2s cubic-bezier(0.15, 0.9, 0.25, 1) forwards,
    krakenFadeBlunder   2s ease-out                          forwards;
}

@keyframes krakenFrames {
  from { background-position:   0% 0; }
  to   { background-position: 100% 0; }
}

@keyframes krakenEmerge {
  0%   { transform: translateX(-50%) translateY(30px) scale(0.1); }
  12%  { transform: translateX(-50%) translateY(-4px) scale(0.75) rotate(2.5deg); }
  24%  { transform: translateX(-50%) translateY(-10px) scale(0.68) rotate(-1.5deg); }
  45%  { transform: translateX(-50%) translateY(-8px) scale(0.71) rotate(0.5deg); }
  70%  { transform: translateX(-50%) translateY(-6px) scale(0.7); }
  100% { transform: translateX(-50%) translateY(-4px) scale(0.64); }
}

@keyframes krakenEmergeBlunder {
  0%   { transform: translateX(-50%) translateY(40px) scale(0.07) rotate(-8deg); }
  8%   { transform: translateX(-50%) translateY(-22px) scale(0.9) rotate(6deg); }
  18%  { transform: translateX(-50%) translateY(-16px) scale(0.78) rotate(-4deg); }
  35%  { transform: translateX(-50%) translateY(-12px) scale(0.74) rotate(2.5deg); }
  60%  { transform: translateX(-50%) translateY(-9px) scale(0.71); }
  100% { transform: translateX(-50%) translateY(-6px) scale(0.7); }
}

@keyframes krakenFade {
  0% {
    opacity: 0;
    filter: sepia(1) saturate(3) hue-rotate(240deg) brightness(0.85);
  }
  4% {
    opacity: 1;
    filter: sepia(1) saturate(3) hue-rotate(240deg) brightness(0.85);
  }
  20% {
    opacity: 1;
    filter: sepia(1) saturate(3) hue-rotate(240deg) brightness(0.85)
            drop-shadow(0 0 12px rgba(140, 60, 255, 0.4));
  }
  40% {
    opacity: 1;
    filter: sepia(1) saturate(3) hue-rotate(240deg) brightness(0.85)
            drop-shadow(0 0 6px rgba(140, 60, 255, 0.2));
  }
  55% {
    opacity: 1;
    filter: sepia(1) saturate(3) hue-rotate(240deg) brightness(0.85)
            drop-shadow(0 0 10px rgba(160, 80, 255, 0.35));
  }
  70% {
    opacity: 1;
    filter: sepia(1) saturate(3) hue-rotate(240deg) brightness(0.85);
  }
  85% {
    opacity: 0.5;
    filter: sepia(1) saturate(3) hue-rotate(240deg) brightness(0.85);
  }
  100% {
    opacity: 0;
    filter: sepia(1) saturate(3) hue-rotate(240deg) brightness(0.85);
  }
}

@keyframes krakenFadeBlunder {
  0% {
    opacity: 0;
    filter: sepia(1) saturate(3) hue-rotate(240deg) brightness(0.85);
  }
  3% {
    opacity: 1;
    filter: sepia(1) saturate(3) hue-rotate(240deg) brightness(0.85);
  }
  10% {
    opacity: 1;
    filter: sepia(1) saturate(4) hue-rotate(240deg) brightness(0.9)
            drop-shadow(0 0 18px rgba(200, 50, 255, 0.6));
  }
  30% {
    opacity: 1;
    filter: sepia(1) saturate(3) hue-rotate(240deg) brightness(0.85)
            drop-shadow(0 0 10px rgba(180, 60, 255, 0.35));
  }
  50% {
    opacity: 1;
    filter: sepia(1) saturate(3.5) hue-rotate(240deg) brightness(0.9)
            drop-shadow(0 0 14px rgba(200, 80, 255, 0.5));
  }
  70% {
    opacity: 1;
    filter: sepia(1) saturate(3) hue-rotate(240deg) brightness(0.85);
  }
  85% {
    opacity: 0.4;
    filter: sepia(1) saturate(3) hue-rotate(240deg) brightness(0.85);
  }
  100% {
    opacity: 0;
    filter: sepia(1) saturate(3) hue-rotate(240deg) brightness(0.85);
  }
}

.kraken-sprite.blunder { }

/* Тень под кракеном */

.kraken-sprite::after {
  content: '';
  position: absolute;
  bottom: -6%;
  left: 22%;
  width: 56%;
  height: 12%;
  background: radial-gradient(
    ellipse,
    rgba(60, 10, 80, 0.45) 0%,
    rgba(40, 5, 60, 0.2) 60%,
    transparent 100%
  );
  filter: blur(8px);
  border-radius: 50%;
  z-index: -1;
}

/* ══════════════════════════════════════════
   ТРЯСКА КОРАБЛЯ — агрессивная, по severity
   ══════════════════════════════════════════ */

/* Базовая (mistake) — ощутимый удар */

.ship-bob.under-attack {
  animation: shipStruck 3.2s ease-out forwards !important;
  transform-origin: center bottom !important;
}

/* Blunder — сильнее */

.ship-bob.under-attack[data-severity="blunder"] {
  animation: shipStruckHard 3.5s ease-out forwards !important;
}

/* Gross blunder — жёсткий */

.ship-bob.under-attack[data-severity="grossBlunder"] {
  animation: shipStruckBrutal 4s ease-out forwards !important;
}

/* Catastrophe — почти опрокидывание */

.ship-bob.under-attack[data-severity="catastrophe"] {
  animation: shipStruckCatastrophe 5s ease-out forwards !important;
}

/* ── Mistake — базовый удар ── */

@keyframes shipStruck {
  0%   { transform: translateY(0) rotate(0deg); }
  3%   { transform: translateY(-14px) rotate(4deg); }
  8%   { transform: translateY(10px) rotate(-22deg); }
  16%  { transform: translateY(-6px) rotate(18deg); }
  26%  { transform: translateY(5px) rotate(-12deg); }
  38%  { transform: translateY(-3px) rotate(8deg); }
  52%  { transform: translateY(2px) rotate(-5deg); }
  68%  { transform: translateY(-1px) rotate(3deg); }
  82%  { transform: translateY(0) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* ── Blunder — сильный удар ── */

@keyframes shipStruckHard {
  0%   { transform: translateY(0) rotate(0deg); }
  2%   { transform: translateY(-18px) rotate(5deg); }
  6%   { transform: translateY(14px) rotate(-32deg); }
  12%  { transform: translateY(-10px) rotate(28deg); }
  20%  { transform: translateY(8px) rotate(-22deg); }
  30%  { transform: translateY(-6px) rotate(16deg); }
  42%  { transform: translateY(5px) rotate(-11deg); }
  55%  { transform: translateY(-3px) rotate(7deg); }
  68%  { transform: translateY(2px) rotate(-4deg); }
  80%  { transform: translateY(-1px) rotate(2deg); }
  92%  { transform: translateY(0) rotate(-0.5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* ── Gross Blunder — жёсткий удар ── */

@keyframes shipStruckBrutal {
  0%   { transform: translateY(0) rotate(0deg); }
  1.5% { transform: translateY(-24px) rotate(7deg); }
  5%   { transform: translateY(18px) rotate(-42deg); }
  10%  { transform: translateY(-14px) rotate(36deg); }
  17%  { transform: translateY(12px) rotate(-30deg); }
  25%  { transform: translateY(-9px) rotate(22deg); }
  35%  { transform: translateY(7px) rotate(-16deg); }
  46%  { transform: translateY(-5px) rotate(11deg); }
  58%  { transform: translateY(3px) rotate(-7deg); }
  70%  { transform: translateY(-2px) rotate(4deg); }
  82%  { transform: translateY(1px) rotate(-2deg); }
  92%  { transform: translateY(0) rotate(0.5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* ── Catastrophe — почти опрокидывание ── */

@keyframes shipStruckCatastrophe {
  0%   { transform: translateY(0) rotate(0deg); }
  1%   { transform: translateY(-30px) rotate(10deg); }
  4%   { transform: translateY(24px) rotate(-55deg); }
  8%   { transform: translateY(-18px) rotate(48deg); }
  13%  { transform: translateY(16px) rotate(-42deg); }
  19%  { transform: translateY(-12px) rotate(34deg); }
  26%  { transform: translateY(10px) rotate(-26deg); }
  34%  { transform: translateY(-8px) rotate(20deg); }
  43%  { transform: translateY(6px) rotate(-14deg); }
  53%  { transform: translateY(-4px) rotate(10deg); }
  64%  { transform: translateY(3px) rotate(-6deg); }
  75%  { transform: translateY(-2px) rotate(3deg); }
  86%  { transform: translateY(1px) rotate(-1.5deg); }
  94%  { transform: translateY(0) rotate(0.5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* ══════════════════════════════
   ТРЯСКА СЦЕНЫ — тоже по severity
   ══════════════════════════════ */

.sea-scene.under-attack {
  animation: sceneImpact 1.2s cubic-bezier(0.2, 0.6, 0.3, 1);
}

@keyframes sceneImpact {
  0%   { transform: translate(0, 0); }
  3%   { transform: translate(-14px, 10px) rotate(-1.2deg); }
  8%   { transform: translate(16px, -8px) rotate(1deg); }
  15%  { transform: translate(-12px, 6px) rotate(-0.8deg); }
  24%  { transform: translate(10px, -5px) rotate(0.6deg); }
  35%  { transform: translate(-7px, 4px) rotate(-0.4deg); }
  48%  { transform: translate(5px, -3px) rotate(0.2deg); }
  62%  { transform: translate(-3px, 2px) rotate(-0.1deg); }
  78%  { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); }
}

/* ── Корабль — жёсткая раскачка ── */

.ship-bob.under-attack {
  animation: shipStruck 3.2s ease-out forwards !important;
}

@keyframes shipStruck {
  0%   { transform: translateY(0) rotate(0deg); }
  3%   { transform: translateY(-12px) rotate(3deg); }
  8%   { transform: translateY(8px) rotate(32deg); }
  16%  { transform: translateY(-5px) rotate(-25deg); }
  24%  { transform: translateY(7px) rotate(28deg); }
  33%  { transform: translateY(-4px) rotate(-18deg); }
  42%  { transform: translateY(5px) rotate(15deg); }
  52%  { transform: translateY(-3px) rotate(-10deg); }
  62%  { transform: translateY(3px) rotate(7deg); }
  72%  { transform: translateY(-1px) rotate(-4deg); }
  82%  { transform: translateY(1px) rotate(2deg); }
  92%  { transform: translateY(0) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* ═══════════════════════════════════════════════════
   БОРТЖУРНАЛ КАПИТАНА — Game Over Modal
   
   Стиль: Old Disney Cartoon × Maritime Logbook
   Steamboat Willie · Rubber-hose · Halftone
   Тёплый песок #f3dfbf · Металл #7a8b99
   Бирюза · Золото · Толстые контуры
   ═══════════════════════════════════════════════════ */

/* ══ Overlay — «Старая киноплёнка» ══ */

.game-over-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  background:
    /* Зерно плёнки — мелкие точки */
    url("data:image/svg+xml,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='0.6' fill='%232a2520' opacity='0.04'/%3E%3C/svg%3E"),
    /* Виньетка проектора */
    radial-gradient(ellipse at 50% 45%,
      rgba(243, 223, 191, 0.06) 0%,
      transparent 55%),
    radial-gradient(ellipse at center,
      rgba(42, 37, 32, 0.60) 0%,
      rgba(42, 37, 32, 0.92) 100%);

  backdrop-filter: blur(0px) saturate(1) sepia(0);
  transition:
    opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    visibility 0.6s ease,
    backdrop-filter 0.6s ease;
}

.game-over-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  backdrop-filter: blur(5px) saturate(1.1) sepia(0.15);
  animation: projectorFlicker 4s ease-in-out 0.8s 1;
}

/* Мерцание старого проектора при появлении */

@keyframes projectorFlicker {
  0%, 100% { opacity: 1; }
  2%  { opacity: 0.92; }
  4%  { opacity: 1; }
  8%  { opacity: 0.96; }
  10% { opacity: 1; }
}

/* ══ Scroll-обёртка ══ */

.game-over-scroll-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ══ Карточка — Страница бортжурнала ══ */

.game-over-card {
  position: relative;
  padding: 0;
  width: 90%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
  color: #2a2520;

  /* Пергамент бортжурнала */
  background-color: #f3dfbf;
  background-image:
    /* Halftone — фирменная текстура Disney 1928 */
    radial-gradient(circle,
      rgba(42, 37, 32, 0.06) 1px, transparent 1px),
    radial-gradient(circle,
      rgba(42, 37, 32, 0.04) 1px, transparent 1px),
    /* Пятно чернил — левый низ */
    radial-gradient(ellipse at 15% 85%,
      rgba(122, 139, 153, 0.07) 0%, transparent 45%),
    /* Тёплый свет лампы каюты — правый верх */
    radial-gradient(ellipse at 85% 15%,
      rgba(210, 170, 90, 0.10) 0%, transparent 50%),
    /* Солевой налёт — морская атмосфера */
    radial-gradient(ellipse at 50% 50%,
      rgba(100, 190, 190, 0.04) 0%, transparent 70%);
  background-size:
    6px 6px,
    6px 6px,
    100% 100%,
    100% 100%,
    100% 100%;
  background-position:
    0 0,
    3px 3px,
    0 0,
    0 0,
    0 0;

  /* Толстый мультяшный контур */
  border: 4px solid #2a2520;
  border-radius: 22px;

  box-shadow:
    /* Двойная обводка — cartoon outline */
    0 0 0 3px #f3dfbf,
    0 0 0 7px #2a2520,
    /* Жёсткая тень — как в Silly Symphonies */
    8px 10px 0 rgba(42, 37, 32, 0.22),
    /* Мягкий ambient */
    0 24px 60px -12px rgba(42, 37, 32, 0.35),
    /* Тёплое свечение пергамента изнутри */
    inset 0 2px 16px rgba(210, 170, 90, 0.15),
    inset 0 -4px 12px rgba(122, 139, 153, 0.06);

  transform-origin: center bottom;
  animation: logbookBounceIn 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Виньетка + царапины старой плёнки */

.game-over-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background:
    /* Угловая виньетка */
    radial-gradient(ellipse at 0% 0%,
      rgba(42, 37, 32, 0.09) 0%, transparent 35%),
    radial-gradient(ellipse at 100% 100%,
      rgba(42, 37, 32, 0.09) 0%, transparent 35%),
    radial-gradient(ellipse at 100% 0%,
      rgba(42, 37, 32, 0.05) 0%, transparent 25%),
    radial-gradient(ellipse at 0% 100%,
      rgba(42, 37, 32, 0.05) 0%, transparent 25%);
  pointer-events: none;
  z-index: 0;
}

.game-over-card::after {
  content: none;
}

/* ══ Bounce-вход — журнал шлёпается на стол ══ */

@keyframes logbookBounceIn {
  0% {
    opacity: 0;
    transform: translateY(80px) scale(0.55) rotate(-4deg);
  }
  40% {
    opacity: 1;
    transform: translateY(-16px) scale(1.06) rotate(1.5deg);
  }
  60% {
    transform: translateY(6px) scale(0.97) rotate(-0.8deg);
  }
  78% {
    transform: translateY(-3px) scale(1.015) rotate(0.3deg);
  }
  90% {
    transform: translateY(1px) scale(0.998) rotate(0deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

/* ══ Скроллбар — в стиле линейки ══ */

.game-over-card::-webkit-scrollbar {
  width: 7px;
}

.game-over-card::-webkit-scrollbar-track {
  background: rgba(122, 139, 153, 0.08);
  border-radius: 4px;
  margin: 8px 0;
}

.game-over-card::-webkit-scrollbar-thumb {
  background:
    repeating-linear-gradient(
      180deg,
      #7a8b99 0px,
      #7a8b99 3px,
      transparent 3px,
      transparent 5px
    );
  border-radius: 4px;
  border: 1px solid rgba(42, 37, 32, 0.15);
}

/* ══ Masthead — Шапка бортжурнала ══ */

.game-over-masthead {
  position: relative;
  padding: 26px 28px 16px;
  border-bottom: 3px solid #2a2520;
  z-index: 1;
}

/* Декоративная планка сверху — как переплёт журнала */

.game-over-masthead::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 13px;
  background: #2a2520;
  border-radius: 0 0 50% 50%;
  box-shadow: 0 2px 0 rgba(243, 223, 191, 0.3);
}

/* ⚓️ Якоря по бокам планки */

.game-over-masthead::after {
  content: '⚓️';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  color: #f3dfbf;
  z-index: 2;
  animation: anchorSwing 4s ease-in-out infinite;
}

@keyframes anchorSwing {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  25%  { transform: translateX(-50%) rotate(6deg); }
  75%  { transform: translateX(-50%) rotate(-6deg); }
}

.masthead-dateline {
  font-family: var(--ff-mono);
  font-size: 0.56rem;
  letter-spacing: 0.35em;
  color: #7a8b99;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.masthead-title {
  font-family: var(--ff-gothic);
  font-size: 1.85rem;
  line-height: 1;
  color: #2a2520;
  margin: 0;
  text-shadow:
    2px 2px 0 rgba(42, 37, 32, 0.07),
    -1px -1px 0 rgba(255, 248, 232, 0.4);
  /* Rubber-hose squash & stretch при наведении */
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.masthead-title:hover {
  transform: scaleX(1.04) scaleY(0.97) rotate(-0.8deg);
}

/* Орнамент с компасом */

.masthead-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.masthead-ornament::before,
.masthead-ornament::after {
  content: '';
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(122, 139, 153, 0.35) 0px,
      rgba(122, 139, 153, 0.35) 6px,
      transparent 6px,
      transparent 10px
    );
}

.masthead-ornament-symbol {
  font-size: 0.9rem;
  color: #7a8b99;
  line-height: 1;
  animation: compassWobble 3.5s ease-in-out infinite;
}

@keyframes compassWobble {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20%  { transform: translateY(-3px) rotate(8deg); }
  50%  { transform: translateY(0) rotate(-5deg); }
  80%  { transform: translateY(1px) rotate(3deg); }
}

/* ══ Headline — Заголовок записи ══ */

.game-over-headline {
  position: relative;
  padding: 18px 28px;
  border-bottom: 2px dashed rgba(42, 37, 32, 0.15);
  z-index: 1;
}

.headline-kicker {
  font-family: var(--ff-mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7a8b99;
  margin-bottom: 6px;
}

.game-over-title {
  font-family: var(--ff-serif);
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
  color: #2a2520;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Морские цвета для исходов */

.game-over-title--victory {
  color: #1a8a72;
  text-shadow: 1px 1px 0 rgba(26, 138, 114, 0.12);
}

.game-over-title--defeat {
  color: #b8443a;
  text-shadow: 1px 1px 0 rgba(184, 68, 58, 0.10);
}

.game-over-title--neutral {
  color: #2a2520;
}

.headline-sub {
  font-family: var(--ff-serif-body);
  font-style: italic;
  font-size: 0.85rem;
  color: #7a8b99;
  margin-top: 8px;
  line-height: 1.45;
}

/* ══ Stars — Звёзды капитанского ранга ══ */

.game-over-stars {
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  margin-bottom: 10px;
}

.game-over-stars span {
  display: inline-block;
  animation: starSplash 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  filter: drop-shadow(1px 1px 0 rgba(42, 37, 32, 0.15));
}

.game-over-stars span:nth-child(1) { animation-delay: 0.5s; }

.game-over-stars span:nth-child(2) { animation-delay: 0.65s; }

.game-over-stars span:nth-child(3) { animation-delay: 0.8s; }

.game-over-stars span:nth-child(4) { animation-delay: 0.95s; }

.game-over-stars span:nth-child(5) { animation-delay: 1.1s; }

@keyframes starSplash {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-200deg);
  }
  50% {
    transform: scale(1.4) rotate(15deg);
  }
  70% {
    transform: scale(0.9) rotate(-5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* ══ Illustration — Гравюра в журнале ══ */

.game-over-illustration {
  position: relative;
  padding: 12px 0 16px;
  z-index: 1;
}

.game-over-kraken-img {
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  display: block;

  /* Старая гравюра / мультяшный кадр */
  filter:
    grayscale(0.55)
    contrast(1.35)
    brightness(0.93)
    sepia(0.3);
  mix-blend-mode: multiply;

  border: 3px solid #2a2520;
  border-radius: 14px;
  padding: 6px;
  background:
    /* Halftone внутри рамки */
    radial-gradient(circle,
      rgba(42, 37, 32, 0.04) 1px, transparent 1px),
    rgba(255, 248, 232, 0.6);
  background-size: 4px 4px, auto;

  box-shadow:
    /* Cartoon offset shadow */
    5px 6px 0 rgba(42, 37, 32, 0.18),
    inset 0 0 20px rgba(210, 170, 90, 0.08);

  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Rubber-hose squash при наведении */

.game-over-kraken-img:hover {
  transform: scaleX(1.05) scaleY(0.97) rotate(-1.5deg);
  filter:
    grayscale(0.3)
    contrast(1.3)
    brightness(0.95)
    sepia(0.2);
}

.illustration-caption {
  font-family: var(--ff-serif-body);
  font-style: italic;
  font-size: 0.63rem;
  color: #7a8b99;
  margin-top: 8px;
  letter-spacing: 0.04em;
}

/* ══ Rating Block — Рейтинг капитана ══ */

.newspaper-rating-block {
  position: relative;
  margin: 0 28px;
  padding: 20px 22px;
  z-index: 1;

  border-top: 3px solid #2a2520;
  border-bottom: 3px solid #2a2520;
  border-radius: 14px;

  background:
    /* Halftone */
    radial-gradient(circle,
      rgba(122, 139, 153, 0.05) 1px, transparent 1px),
    /* Тёплый пергамент */
    linear-gradient(175deg,
      rgba(255, 248, 232, 0.6) 0%,
      rgba(243, 223, 191, 0.3) 100%);
  background-size: 4px 4px, auto;
}

/* Декоративные волны сверху */

.newspaper-rating-block::before {
  content: '〰️〰️〰️';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.4rem;
  letter-spacing: 0.1em;
  color: rgba(122, 139, 153, 0.3);
}

.rating-block-label {
  font-family: var(--ff-mono);
  font-size: 0.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #7a8b99;
  text-align: center;
  margin-bottom: 8px;
}

.newspaper-rating-block .rating-delta {
  font-family: var(--ff-serif);
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
  text-shadow:
    3px 3px 0 rgba(42, 37, 32, 0.07),
    -1px -1px 0 rgba(255, 255, 255, 0.2);
  animation: ratingSlam 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both;
}

/* Цифра «шлёпается» как штамп */

@keyframes ratingSlam {
  0% {
    transform: scale(2.5) rotate(-8deg);
    opacity: 0;
  }
  40% {
    transform: scale(0.9) rotate(2deg);
    opacity: 1;
  }
  60% {
    transform: scale(1.1) rotate(-1deg);
  }
  80% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.rating-delta--positive { color: #1a8a72; }

.rating-delta--negative { color: #b8443a; }

.rating-delta--zero     { color: #7a8b99; }

.newspaper-rating-block .rating-transition {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  color: #7a8b99;
  text-align: center;
  margin-top: 6px;
  letter-spacing: 0.05em;
}

.newspaper-rating-block .rating-transition b {
  color: #2a2520;
  font-weight: 700;
}

/* ══ Categories — Классификация ══ */

.game-over-categories {
  position: relative;
  padding: 14px 28px;
  border-top: 2px dashed rgba(42, 37, 32, 0.12);
  z-index: 1;
}

.categories-title {
  font-family: var(--ff-mono);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7a8b99;
  margin-bottom: 10px;
}

.game-over-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ══ Voyage Stat Rows — Строки вахтенного журнала ══ */

.voyage-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 6px;
  border-bottom: 1.5px dotted rgba(122, 139, 153, 0.22);
  border-radius: 6px;
  transition:
    background 0.2s ease,
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.voyage-stat-row:hover {
  background: rgba(122, 139, 153, 0.06);
  transform: translateX(2px);
}

.voyage-stat-row:last-child {
  border-bottom: none;
}

.voyage-stat-label {
  font-family: var(--ff-serif-body);
  font-size: 1rem;
  color: #7a8b99;
}

.voyage-stat-value {
  font-family: var(--ff-serif);
  font-size: 0.8rem;
  font-weight: 700;
  color: #2a2520;
  font-variant-numeric: tabular-nums;
}

.voyage-stat-value--bold {
  font-weight: 900;
  font-size: 0.9rem;
}

.voyage-stat-value--critical {
  color: #b8443a;
  font-weight: 900;
}

/* Цвета категорий — морская / мультяшная палитра */

.cat-theory      { color: #2a7a9a; }

/* Глубокая бирюза */

.cat-good        { color: #1a8a72; }

/* Морская зелень */

.cat-inaccuracy  { color: #b09030; }

/* Старое золото */

.cat-mistake     { color: #c07530; }

/* Ржавчина */

.cat-blunder     { color: #b8443a; }

/* Красный буй */

.cat-gross       { color: #7a4a9a; }

/* Чернила кальмара */

.cat-catastrophe {
  color: #6a1a1a;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(106, 26, 26, 0.12);
}

/* ══ Combo Section ══ */

.game-over-combo {
  position: relative;
  padding: 4px 0;
  z-index: 1;
}

/* ══ Voyage Section — Итоги плавания ══ */

.game-over-voyage {
  position: relative;
  padding: 14px 28px;
  border-top: 2px dashed rgba(42, 37, 32, 0.12);
  z-index: 1;
}

.voyage-summary-title {
  font-family: var(--ff-mono);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7a8b99;
  margin-bottom: 8px;
}

/* ══ Achievements — Медали капитана ══ */

.game-over-achievements {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  z-index: 1;
  position: relative;
}

.achievement-badge {
  font-size: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 3px solid #2a2520;
  border-radius: 50%;
  cursor: default;

  background:
    /* Cartoon highlight — блик на медали */
    radial-gradient(circle at 32% 28%,
      rgba(255, 255, 255, 0.55) 0%, transparent 55%),
    /* Тёплый металл */
    linear-gradient(145deg,
      #f3dfbf 0%,
      rgba(210, 170, 90, 0.25) 100%);

  box-shadow:
    3px 4px 0 rgba(42, 37, 32, 0.20),
    inset 0 -3px 5px rgba(42, 37, 32, 0.08),
    inset 0 1px 3px rgba(255, 255, 255, 0.3);

  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease;
}

/* Rubber-hose stretch при наведении */

.achievement-badge:hover {
  transform: scale(1.28) rotate(-10deg) scaleX(1.05);
  box-shadow:
    5px 6px 0 rgba(42, 37, 32, 0.24),
    inset 0 -3px 5px rgba(42, 37, 32, 0.08);
}

/* Staggered cartoon pop-in */

.achievement-badge:nth-child(1) { animation: badgeSplat 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.0s both; }

.achievement-badge:nth-child(2) { animation: badgeSplat 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.12s both; }

.achievement-badge:nth-child(3) { animation: badgeSplat 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.24s both; }

.achievement-badge:nth-child(4) { animation: badgeSplat 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.36s both; }

.achievement-badge:nth-child(5) { animation: badgeSplat 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.48s both; }

.achievement-badge:nth-child(6) { animation: badgeSplat 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.60s both; }

@keyframes badgeSplat {
  0% {
    opacity: 0;
    transform: scale(0) rotate(200deg);
  }
  45% {
    transform: scale(1.35) rotate(-15deg);
  }
  65% {
    transform: scale(0.88) rotate(5deg);
  }
  82% {
    transform: scale(1.08) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* ══ Penalties — Штрафы ══ */

.penalty-line {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: #b8443a;
  text-align: center;
  padding: 8px 28px;
  letter-spacing: 0.05em;
  z-index: 1;
  position: relative;
}

/* ══ Worst Move — Роковой ход ══ */

.worst-move-row {
  position: relative;
  margin: 10px 28px;
  padding: 13px 18px;
  text-align: left;
  z-index: 1;

  background:
    radial-gradient(circle,
      rgba(184, 68, 58, 0.04) 1px, transparent 1px),
    rgba(184, 68, 58, 0.05);
  background-size: 4px 4px, auto;

  border: 2.5px solid rgba(184, 68, 58, 0.30);
  border-left: 5px solid #b8443a;
  border-radius: 0 12px 12px 0;

  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.worst-move-row:hover {
  transform: translateX(4px) rotate(-0.3deg);
}

.worst-move-row .label {
  font-family: var(--ff-mono);
  font-size: 0.53rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #b8443a;
}

.worst-move-row .value {
  font-family: var(--ff-serif);
  font-size: 0.85rem;
  font-weight: 700;
  color: #b8443a;
  margin-top: 3px;
}

/* ══ Defeat Tip — Наставление капитану ══ */

.defeat-tip {
  position: relative;
  font-family: var(--ff-serif-body);
  font-style: italic;
  font-size: 1rem;
  color: #4d7358;
  line-height: 1.5;
  text-align: left;
  padding: 14px 18px 14px 24px;
  margin: 14px 28px;
  z-index: 1;

  border: 2px solid rgba(122, 139, 153, 0.18);
  border-left: 5px solid #7a8b99;
  border-radius: 0 12px 12px 0;

  background:
    radial-gradient(circle,
      rgba(122, 139, 153, 0.03) 1px, transparent 1px),
    rgba(122, 139, 153, 0.03);
  background-size: 4px 4px, auto;
}

/* Открывающая кавычка — «перо капитана» */

.defeat-tip::before {
  content: '201C';
  font-family: var(--ff-serif);
  font-size: 2.4rem;
  position: absolute;
  top: -2px;
  left: 7px;
  color: rgba(122, 139, 153, 0.18);
  line-height: 1;
}

/* ══ Buttons — Приказы капитана ══ */

.game-over-buttons {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 20px 28px 28px;
  border-top: 3px solid #2a2520;
  z-index: 1;
}

.game-over-buttons button {
  flex: 1;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 16px;
  cursor: pointer;

  border: 3px solid #2a2520;
  border-radius: 12px;
  background: #f3dfbf;
  color: #2a2520;

  box-shadow: 4px 5px 0 rgba(42, 37, 32, 0.20);

  transition:
    transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

/* Hover — чернильная инверсия */

.game-over-buttons button:hover {
  background: #2a2520;
  color: #f3dfbf;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 5px 7px 0 rgba(42, 37, 32, 0.25);
}

/* Active — кнопка «вдавлена» как клавиша пишущей машинки */

.game-over-buttons button:active {
  transform: translateY(3px) scale(0.98);
  box-shadow: 1px 1px 0 rgba(42, 37, 32, 0.2);
}

.game-over-buttons .btn-primary-action {
  background: #2a2520;
  color: #f3dfbf;
  font-weight: 700;
  box-shadow: 4px 5px 0 rgba(42, 37, 32, 0.30);
}

.game-over-buttons .btn-primary-action:hover {
  background: #7a8b99;
  border-color: #7a8b99;
  color: #f3dfbf;
  box-shadow: 4px 5px 0 rgba(122, 139, 153, 0.25);
}

/* ══ Section Ornament — Морской разделитель ══ */

.section-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 28px;
  gap: 12px;
  z-index: 1;
  position: relative;
}

.section-ornament::before,
.section-ornament::after {
  content: '';
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(122, 139, 153, 0.28) 0px,
      rgba(122, 139, 153, 0.28) 8px,
      transparent 8px,
      transparent 14px
    );
}

.section-ornament-glyph {
  font-size: 0.72rem;
  color: #7a8b99;
  opacity: 0.65;
  animation: glyphRock 5s ease-in-out infinite;
}

/* Покачивание как на волне */

@keyframes glyphRock {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  15%  { transform: rotate(6deg) translateY(-1px); }
  30%  { transform: rotate(-4deg) translateY(1px); }
  50%  { transform: rotate(0deg) translateY(0); }
  65%  { transform: rotate(3deg) translateY(-1px); }
  80%  { transform: rotate(-2deg); }
}

/* ══ Defeat Effects — Шторм ══ */

.game-over-card.result-defeat .game-over-title {
  animation: stormShake 3.5s ease-in-out infinite;
}

@keyframes stormShake {
  0%, 88%, 100% { transform: rotate(0deg); }
  90%  { transform: rotate(-2deg) scale(1.01); }
  92%  { transform: rotate(2deg); }
  94%  { transform: rotate(-1.5deg); }
  96%  { transform: rotate(1deg); }
  98%  { transform: rotate(-0.3deg); }
}

.game-over-card.result-defeat {
  animation:
    logbookBounceIn 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    defeatStorm 5s ease-in-out 1.3s infinite;
}

@keyframes defeatStorm {
  0%, 100% {
    box-shadow:
      0 0 0 3px #f3dfbf,
      0 0 0 7px #2a2520,
      8px 10px 0 rgba(42, 37, 32, 0.22),
      0 24px 60px -12px rgba(42, 37, 32, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 3px #f3dfbf,
      0 0 0 7px #b8443a,
      8px 10px 0 rgba(184, 68, 58, 0.14),
      0 24px 60px -12px rgba(184, 68, 58, 0.20),
      0 0 35px rgba(184, 68, 58, 0.05);
  }
}

/* ══ Victory Effects — Попутный ветер ══ */

.result-victory .game-over-card,
.game-over-card.result-victory {
  animation:
    logbookBounceIn 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    victoryBreeze 4s ease-in-out 1.3s infinite;
}

@keyframes victoryBreeze {
  0%, 100% {
    box-shadow:
      0 0 0 3px #f3dfbf,
      0 0 0 7px #2a2520,
      8px 10px 0 rgba(42, 37, 32, 0.22),
      0 24px 60px -12px rgba(42, 37, 32, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 3px #f3dfbf,
      0 0 0 7px #1a8a72,
      8px 10px 0 rgba(26, 138, 114, 0.12),
      0 24px 60px -12px rgba(26, 138, 114, 0.18),
      0 0 45px rgba(26, 138, 114, 0.05);
  }
}

/* Victory — заголовок «дышит» от радости */

.game-over-card.result-victory .game-over-title,
.result-victory .game-over-title {
  animation: captainJoy 2.2s ease-in-out infinite;
}

@keyframes captainJoy {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25%  { transform: scale(1.02) rotate(0.3deg); }
  50%  { transform: scale(1.03) rotate(0deg); }
  75%  { transform: scale(1.01) rotate(-0.3deg); }
}

/* ═══════════════════════════════════════════
12 · VOYAGE MAP

Приключенческая карта с портами,
маршрутами, кораблём, панелью выбора.
═══════════════════════════════════════════ */

/* ── Слои маршрутов и портов ── */

.voyage-routes-layer,
.voyage-ports-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
transition: opacity var(--duration-normal) ease;
}

.voyage-routes-layer { z-index: 2; }

.voyage-ports-layer { z-index: 3; }

.voyage-routes-layer.active,
.voyage-ports-layer.active {
opacity: 1;
}

.voyage-ports-layer.active {
pointer-events: auto;
}

/* ── Порт ── */

.voyage-port {
position: absolute;
transform: translate(-50%, -50%);
text-align: center;
cursor: pointer;
transition:
transform var(--duration-fast) ease,
filter 0.3s ease;
z-index: 4;
}

.voyage-port:hover {
transform: translate(-50%, -50%) scale(1.15);
}

.voyage-port.locked:hover {
  transform: translate(-50%, -50%) scale(1.03);
}

.voyage-port.current .vport-icon {
  animation: portPulse 2.5s ease-in-out infinite;
}

@keyframes portPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.3)); }
  50% { transform: scale(1.2); filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.7)); }
}

.vport-icon {
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.vport-name {
  font-family: var(--ff-serif-body);
  font-size: 0.65rem;
  color: var(--c-parchment-dark);
  font-weight: 700;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.9),
    0 0 8px rgba(0, 0, 0, 0.5);
  margin-top: 2px;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

.vport-stars {
  font-size: 0.5rem;
  letter-spacing: 1px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.vport-lock {
  position: absolute;
  top: -4px;
  right: -8px;
  font-size: 0.7rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

/* ── Корабль на карте ── */

.voyage-ship {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 1.8rem;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition:
    left 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    opacity var(--duration-normal) ease;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.7));
}

.voyage-ship img {
  width: 50px;
  height: auto;
  display: block;
}

.voyage-ship.active {
  opacity: 1;
  animation: shipBob 3s ease-in-out infinite;
}

/* ── Счётчик звёзд ── */

.voyage-stars-counter {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, rgba(42, 32, 18, 0.92), rgba(28, 22, 12, 0.95));
  color: #ffd700;
  padding: 6px 14px;
  border: 1px solid var(--c-parchment-dark);
  font-family: var(--ff-serif);
  font-size: 0.85rem;
  font-weight: 700;
  z-index: 6;
  opacity: 0;
  transition: opacity var(--duration-normal) ease;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(200, 169, 110, 0.15);
}

.voyage-stars-counter.active {
  opacity: 1;
}

/* ── Панель порта ── */

.voyage-port-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 55%;
  background: linear-gradient(
    180deg,
    rgba(36, 28, 18, 0.94) 0%,
    rgba(24, 18, 10, 0.98) 100%
  );
  border-top: 2px solid var(--c-parchment-dark);
  z-index: 10;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 16px 20px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

.voyage-port-panel.visible {
  transform: translateY(0);
}

.voyage-port-panel.hidden {
  transform: translateY(100%);
}

.voyage-port-panel.closing {
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.8, 1),
    opacity 0.25s ease;
  pointer-events: none;
}

/* Кнопка закрытия */

.vpp-close-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: 1px solid transparent;
  color: var(--c-parchment-dark);
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 11;
  padding: 4px 8px;
  transition:
    color var(--duration-fast),
    border-color var(--duration-fast);
}

.vpp-close-btn:hover {
  color: var(--c-parchment);
  border-color: var(--c-parchment-dark);
}

/* Заголовок панели */

.vpp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(200, 169, 110, 0.25);
  margin-bottom: 12px;
}

.vpp-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.vpp-name {
  font-family: var(--ff-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-parchment);
  letter-spacing: 0.02em;
}

.vpp-stars {
  margin-left: auto;
  color: #ffd700;
  font-size: 0.85rem;
  font-weight: 600;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.vpp-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Карточка дебюта ── */

.voyage-opening-card {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(50, 40, 28, 0.85),
    rgba(38, 30, 20, 0.9)
  );
  border: 1px solid rgba(200, 169, 110, 0.25);
  padding: 12px 14px;
  cursor: pointer;
  transition:
    border-color var(--duration-fast),
    transform var(--duration-fast),
    box-shadow var(--duration-fast);
}

.voyage-opening-card.unlocked:hover {
  border-color: var(--c-parchment-dark);
  transform: translateX(4px);
  box-shadow:
    0 2px 16px rgba(200, 169, 110, 0.15),
    inset 0 0 0 1px rgba(200, 169, 110, 0.1);
}

.voyage-opening-card.selected {
  border-color: #ffd700;
  background: linear-gradient(
    135deg,
    rgba(60, 50, 30, 0.95),
    rgba(45, 35, 20, 0.95)
  );
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
}

.voyage-opening-card.locked {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Верхняя строка карточки */

.voc-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.voc-eco {
  font-size: 0.65rem;
  color: var(--c-parchment-dark);
  font-family: 'Courier New', monospace;
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border: 1px solid rgba(200, 169, 110, 0.2);
}

.voc-color {
  font-size: 0.75rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.voc-diff {
  margin-left: auto;
  font-size: 0.6rem;
  padding: 2px 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid;
}

/* Уровни сложности */

.diff-easy   { background: rgba(45, 90, 45, 0.3);  color: #7ddf7d; border-color: rgba(125, 223, 125, 0.4); }

.diff-medium { background: rgba(90, 90, 45, 0.3);  color: #dfdf7d; border-color: rgba(223, 223, 125, 0.4); }

.diff-hard   { background: rgba(90, 61, 45, 0.3);  color: #dfad7d; border-color: rgba(223, 173, 125, 0.4); }

.diff-expert { background: rgba(90, 45, 45, 0.3);  color: #df7d7d; border-color: rgba(223, 125, 125, 0.4); }

.diff-master { background: rgba(74, 45, 90, 0.3);  color: #c87ddf; border-color: rgba(200, 125, 223, 0.4); }

.voc-name {
  font-family: var(--ff-serif);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-parchment);
  margin-bottom: 2px;
}

.voc-desc {
  font-family: var(--ff-serif-body);
  font-size: 0.7rem;
  color: var(--c-parchment-dark);
  line-height: 1.4;
  margin-bottom: 6px;
  font-style: italic;
}

.voc-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.voc-stars {
  font-size: 0.75rem;
  letter-spacing: 1px;
}

.voc-attempts {
  font-size: 0.6rem;
  color: rgba(200, 169, 110, 0.5);
  font-family: var(--ff-serif-body);
}

.voc-lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(10, 8, 5, 0.75);
  color: var(--c-parchment-dark);
  font-family: var(--ff-serif-body);
  font-size: 0.8rem;
  font-weight: 600;
  backdrop-filter: blur(2px);
}

.voc-lock::before {
  content: '🔒';
  font-size: 1.2rem;
}

/* ── Анимация появления карточек ── */

.voyage-port-panel.visible .voyage-opening-card {
  animation: cardSlideIn 0.3s ease backwards;
}

.voyage-port-panel.visible .voyage-opening-card:nth-child(1) { animation-delay: 0.05s; }

.voyage-port-panel.visible .voyage-opening-card:nth-child(2) { animation-delay: 0.1s; }

.voyage-port-panel.visible .voyage-opening-card:nth-child(3) { animation-delay: 0.15s; }

.voyage-port-panel.visible .voyage-opening-card:nth-child(4) { animation-delay: 0.2s; }

.voyage-port-panel.visible .voyage-opening-card:nth-child(5) { animation-delay: 0.25s; }

@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════
   13 · ACHIEVEMENTS
   
   Всплывающие тосты достижений.
   Фиксированная позиция, анимация входа.
   ═══════════════════════════════════════════ */

#achievement-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.achievement-toast {
  display: flex;
  align-items: center;
  gap: 16px;
  pointer-events: auto;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-hull-green);
  border-radius: 8px;
  padding: 16px 20px;
  min-width: 280px;
  box-shadow: 0 12px 32px -4px rgba(10, 22, 40, 0.12);
  animation: slideInRight 0.5s var(--ease-out-expo) forwards;
}

.achievement-toast .icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.achievement-toast .text-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.achievement-toast .title {
  color: var(--c-text);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

.achievement-toast .desc {
  color: var(--c-text-secondary);
  font-size: 0.85rem;
  line-height: 1.4;
}

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

/* ═══════════════════════════════════════════
   14 · OPENING MAP
   
   Оверлей с картой дебютного дерева.
   Режимы: overlay, background, fullscreen.
   ═══════════════════════════════════════════ */

/* ── Кнопка переключения ── */

.map-toggle-wrapper {
  padding: 16px 0;
  border-bottom: 1px solid var(--c-border);
}

.btn-map-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1.5px solid var(--c-text);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Анимированная заливка */

.btn-map-toggle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--c-text);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.btn-map-toggle:hover::before {
  transform: translateY(0);
}

.btn-map-toggle:hover {
  color: #fff;
  border-color: var(--c-text);
}

.btn-map-toggle .map-btn-label {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

/* Активное состояние */

.btn-map-toggle.active {
  background: var(--c-text);
  color: #fff;
  border-color: var(--c-text);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.btn-map-toggle.active::before {
  transform: translateY(0);
}

/* ── Контейнер карты ── */

.opening-map-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  transform: scale(0.98);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.opening-map-container.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* Режим фона */

.opening-map-container.as-background {
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
  transform: scale(1.05);
}

.opening-map-container.as-background.visible {
  opacity: 0.05;
}

/* ── Изображение карты ── */

.opening-map-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: sepia(0.3) saturate(1.2) contrast(1.1);
  transition:
    filter var(--duration-normal) ease,
    transform var(--duration-normal) ease;
}

.opening-map-container.visible .opening-map-img {
  filter: sepia(0.15) saturate(1.1) contrast(1.05);
}

.opening-map-container.visible:hover .opening-map-img {
  filter: sepia(0.05) saturate(1.3) contrast(1.1);
  transform: scale(1.02);
}

/* ── Градиент поверх карты ── */

.map-overlay-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(10, 15, 25, 0.7) 100%),
    linear-gradient(180deg, rgba(10, 15, 25, 0.1) 0%, transparent 20%, transparent 80%, rgba(10, 15, 25, 0.3) 100%);
  pointer-events: none;
}

/* ── Полноэкранный режим ── */

.opening-map-container.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: rgba(5, 10, 20, 0.95);
  border-radius: 0;
  cursor: zoom-out;
}

.opening-map-container.fullscreen .opening-map-img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  filter: none;
}

.opening-map-container.fullscreen .map-overlay-gradient {
  background: radial-gradient(ellipse at center, transparent 60%, rgba(5, 10, 20, 0.5) 100%);
}

/* ── Flash-подсказка ── */

#opening-map-container.flash-hint {
  animation: mapFlash 1.5s ease;
}

@keyframes mapFlash {
  0%   { filter: brightness(1); }
  30%  { filter: brightness(1.25) saturate(1.1); }
  100% { filter: brightness(1); }
}

@keyframes map-flash {
  0%   { opacity: 0.2; }
  50%  { opacity: 0.4; }
  100% { opacity: 0.2; }
}

.opening-map-container.flash-hint {
  animation: map-flash 1.5s ease-in-out;
}

/* ═══════════════════════════════════════════
   15 · RESPONSIVE
   
   ВСЕ медиа-запросы собраны в одном файле.
   Порядок: от большого к маленькому.
   
   Это устраняет проблему разбросанных
   @media по разным файлам и упрощает
   отладку адаптивности.
   ═══════════════════════════════════════════ */

/* ═══ ≤1200px ═══ */

@media (max-width: 1200px) {
  :root {
    --w-side: 240px;
    --w-column: 480px;
    --gap: 24px;
  }

  .side-panel,
  .analysis-panel {
    margin-top: 56px;
  }

  /* Sea scene */
  .sea-scene {
    height: 180px;
  }

  .ship.ship-editorial {
    width: 80px;
    height: 68px;
    right: -50px;
    top: -60px;
  }

  .cloud-1 .cp-2 { width: 30px; height: 18px; }
  .cloud-2 .cp-2 { width: 22px; height: 14px; }
}

/* ═══ ≤900px — Одноколоночная раскладка ═══ */

@media (max-width: 900px) {
  body {
    padding: 16px;
  }

  .app {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 520px;
  }

  .side-panel,
  .board-column,
  .analysis-panel {
    grid-column: 1;
    grid-row: auto;
  }

  .side-panel,
  .analysis-panel {
    margin-top: 0;
    border-top: 2px solid var(--c-text);
  }

  #board {
    width: min(90vw, 480px);
    height: min(90vw, 480px);
  }

  .sea-scene {
    height: 160px;
    padding: 16px 12px 12px;
  }

  /* Упрощаем сцену */
  .seagulls-container { display: none; }
  .cloud-4,
  .cloud-5 { display: none; }

  .weather-indicator {
    bottom: 48px;
    font-size: 0.5rem;
  }

  .voyage-track {
    bottom: 34px;
    left: 12px;
    right: 12px;
  }

  .hull-bar {
    bottom: 8px;
    left: 12px;
    right: 12px;
  }
}

/* ═══ ≤768px — Мобильная карта ═══ */

@media (max-width: 768px) {
  .map-toggle-bar {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1000;
  }

  .opening-map-container.visible {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9998;
    background: rgba(5, 10, 20, 0.95);
    border-radius: 0;
  }
}

/* ═══ ≤600px — Маленькие экраны ═══ */

@media (max-width: 600px) {
  .sea-scene {
    height: 140px;
  }

  .clouds-container { display: none; }
  .water-glints { display: none; }
  .fog-tendril { display: none; }

  .ship.ship-editorial {
    width: 60px;
    height: 50px;
    right: -40px;
    top: -45px;
  }
}

/* ═══ ≤520px — Game Over карточка ═══ */

@media (max-width: 520px) {
  .game-over-scroll-wrap {
    padding: 10px;
  }

  .game-over-card {
    width: 100%;
    max-width: 100%;
    max-height: 95vh;
    outline-offset: 3px;
  }

  .game-over-masthead {
    padding: 14px 16px 10px;
  }

  .masthead-title {
    font-size: 1.4rem;
  }

  .game-over-headline {
    padding: 14px 16px;
  }

  .game-over-title {
    font-size: 1.3rem;
  }

  .newspaper-rating-block {
    margin: 0 16px;
    padding: 12px 14px;
  }

  .newspaper-rating-block .rating-delta {
    font-size: 2.2rem;
  }

  .game-over-categories,
  .game-over-voyage {
    padding: 12px 16px;
  }

  .game-over-buttons {
    padding: 14px 16px 18px;
    flex-direction: column;
  }

  .worst-move-row,
  .defeat-tip {
    margin: 10px 16px;
  }

  .game-over-achievements {
    padding: 10px 16px;
  }
}

/* ═══════════════════════════════════════════
   16 · UTILITIES
   
   Вспомогательные классы.
   Единственное место где допустим !important.
   ═══════════════════════════════════════════ */

.hidden {
  display: none !important;
}

/* ── Кнопка повторить тренировку ── */

#go-btn-retry-fen {
  margin-top: 8px;
}

#go-btn-retry-fen.hidden {
  display: none !important;
}