/*═══════════════════════════════════
  RESET & BASE
═══════════════════════════════════*/
*, *::before, *::after {margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-text: #000000;
  --secondary-text: #666666;
  --background: #ffffff;
  --background-secondary: #f8f8f8;
  --border-color: #e5e5e5;
  --accent-color: #000000;
  --sq-light: #ffffff;
  --sq-dark: #f0f0f0;
  --column-width: 520px;
  --side-width: 280px;
  --gap: 32px;
  --parchment: #f5f0e8;
  --hull-green: #2ecc71;
  --hull-yellow: #f1c40f;
  --hull-red: #e74c3c;
 /* Victorian Gazette Modal */
  --parchment-dark: #d4c5a0;
  --parchment-mid: #e8dcc8;
  --parchment-light: #f2ebe0;
  --ink-black: #1a1209;
  --ink-faded: #3d3425;
  --ink-red: #6b1a1a;
  --ink-green: #1a3d1a;
  --ink-gold: #8b6914;
  --eldritch-purple: #2d1b4e;
}

/*═══ VICTORIAN GAZETTE FONTS═══ */
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Special+Elite&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=IM+Fell+English:ital@0;1&display=swap');

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--background);
  color: var(--primary-text);
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  min-height: 100vh;line-height: 1.4;
  overflow-x: hidden;
}

/*═══════════════════════════════════
  LAYOUT
═══════════════════════════════════*/
.app {
  display: grid;
  grid-template-columns: var(--side-width) var(--column-width) var(--side-width);
  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;
  
}


/*═══════════════════════════════════
  HEADER
═══════════════════════════════════*/
.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;
}

.header .subtitle {
  font-size: 0.7rem;
  color: var(--secondary-text);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
}

/*═══════════════════════════════════
  SIDE PANELS
═══════════════════════════════════*/
.side-panel,
.analysis-panel {
  margin-top: 62px;
  border-top: 2px solid var(--primary-text);
}

.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(--background);
  border: none;
  border-bottom: 1px solid var(--border-color);
  padding: 16px 0;
}

.side-panel .info-card:last-child,
.side-panel .controls-wrapper:last-child,
.side-panel .combo-container:last-child,
.side-panel .live-stats-box:last-child,
.analysis-panel .notation-box:last-child,
.analysis-panel .feedback-box:last-child,
.analysis-panel .combo-container:last-child {
  border-bottom: none;
}

/*═══════════════════════════════════
  INFO CARD & RATING — V10: Optimal Hybrid
  Сочетание газетной строгости + Apple-чистоты
═══════════════════════════════════*/
.info-card {
  background: var(--background);
  padding: 24px 0;
  width: 100%;
  border-bottom: 1px solid var(--border-color);
}

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

.rating-main .label {
  font-size: 0.55rem;
  color: var(--secondary-text);
  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: var(--primary-text);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

/* Состояния рейтинга */
#rating-value.rising {
  color: #2d8a4e;
}

#rating-value.falling {
  color: #c0392b;
}

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

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

.rating-delta.positive {
  color: #2d8a4e;
}

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

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

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

.rating-peak::before {
  content: 'PEAK ';
  font-weight: 700;letter-spacing: 0.08em;
}
/*═══════════════════════════════════
  CONTROLS & BUTTONS
═══════════════════════════════════*/
.controls-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

label {
  font-size: 0.7rem;
  color: var(--secondary-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

select {
  appearance: none;
  width: 100%;
  background: var(--background);
  color: var(--primary-text);
  border: 1px solid var(--border-color);
  padding: 8px 10px;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: inherit;
  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='%23666666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

select:focus {
  outline: 1px solid var(--accent-color);
  border-color: var(--accent-color);
}

button {
  font-family: inherit;
  padding: 10px 16px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--border-color);
  background: var(--background);
  color: var(--primary-text);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: border-color 0.2s, background-color 0.2s;
}

button:hover {
  border-color: var(--accent-color);
}

.btn-start {
  background: var(--primary-text);
  color: #ffffff;
  border-color: var(--primary-text);
  font-weight: 600;
}

.btn-start:hover {
  background: #333333;
  border-color: #333333;
}

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

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

.btn-row button {
  flex: 1;
}

/*═══════════════════════════════════
  MAP TOGGLE BUTTON (в правой колонке)
═══════════════════════════════════*/
.map-toggle-wrapper {
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
}

.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(--primary-text);
  background: var(--background);
  border: 1.5px solid var(--primary-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(--primary-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: #ffffff;
  border-color: var(--primary-text);
}

/* Текст кнопки */
.btn-map-toggle .map-btn-label {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}


/* Активное состояние (карта открыта) */
.btn-map-toggle.active {
  background: var(--primary-text);
  color: #ffffff;
  border-color: var(--primary-text);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.btn-map-toggle.active::before {
  transform: translateY(0);
}

.btn-map-toggle.active .map-icon {
  transform: rotate(-15deg) scale(1.1);
  border-color: #ffffff;
}

.btn-map-toggle.active::after {
  opacity: 0.6;
  background: #ffffff;
}

/* Контейнер карты — за доской */
.opening-map-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--background);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.opening-map-container.visible {
  display: flex;
}

.opening-map-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.map-overlay-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to top, var(--background), transparent);
  pointer-events: none;
}

/*═══════════════════════════════════
  BOARD
═══════════════════════════════════*/
#board {
  width: var(--column-width);
  height: var(--column-width);
  border: 1px solid var(--border-color);
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#board .white-1e1d7{
  background-color: var(--sq-light) !important;
}

#board .black-3c85d {
  background-color: #D1D5DB !important;
}

/* Выделение выбранной клетки */
#board .click-selected {
  box-shadow: inset 0 0 0 4px #0a9396!important;
  background-color: rgba(10, 147, 150, 0.35) !important;
}

/* Точки возможных ходов */
#board .legal-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26%;
  height: 26%;
  background: rgba(10, 147, 150, 0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
}

/* Кружок для взятий */
#board .legal-capture::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 85%;
  border: 3px solid rgba(10, 147, 150, 0.7);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  background: transparent;
}

/* Скрываем подсветку наведения при перетаскивании */
/* Убираем только желтую рамку, не трогая фон клетки */
#board .highlight2-9c5d2 {
  box-shadow: none !important;
}

/* Подсветка предходов */
#board .premove-highlight {
  background-color: rgba(255, 170, 0, 0.4) !important;
  box-shadow: inset 0 0 0 3px rgba(255, 170, 0, 0.7) !important;
}


/*═══════════════════════════════════════════
   КАРТА ДЕБЮТОВ — OPENING MAP
   ═══════════════════════════════════════════ */

.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 0.4s ease, transform 0.4s 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%);
}


/* ═══ Адаптивность board-column ═══ */
.board-column {
    position: relative; /* Важно для позиционирования карты */
}

/* ═══ Анимация появления при смене дебюта ═══ */
@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;
}

/* ═══ Мобильная адаптация ═══ */
@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;
    }
}




/*═══════════════════════════════════
  NOTATION & FEEDBACK
═══════════════════════════════════*/
.notation-box,
.feedback-box {
  background: var(--background);
  border: none;
  border-bottom: 1px solid var(--border-color);
  padding: 16px 0;
  width: 100%;
}

.panel-label {
  font-size: 0.65rem;
  color: var(--secondary-text);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
  font-weight: 600;padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

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

.kraken-message {
  padding-left: 10px;
  border-left: 2px solid var(--primary-text);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--primary-text);margin-top: 4px;
}

/*═══════════════════════════════════
  MOVE HISTORY (ИСПРАВЛЕНО)
═══════════════════════════════════*/
.move-history,
#move-history {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  max-height: 300px;
  min-height: 60px;
  padding: 8px;
}

.move-pair {
  display: grid;
  grid-template-columns: 28px 1fr 1fr;
  gap: 4px;
  padding: 3px 0;
  font-variant-numeric: tabular-nums;border-bottom: 1px solid var(--border-color);
}

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

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

.move-san {
  padding: 2px 4px;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 3px;
  cursor: pointer;
  transition: background0.15s;
  color: var(--primary-text);
}

.move-san:hover {
  background: var(--background-secondary);
}

/* Категории ходов */
.move-san.pending {
  color: #999999;
}

.move-san.opponent {
  color: var(--secondary-text);
}

.move-san.theory {
  color: #0077b6;
  font-weight: 700;
}

.move-san.good {
  color: #2d8a4e;
  font-weight: 700;
}

.move-san.inaccuracy {
  color: #b8860b;
}

.move-san.mistake {
  color: #d35400;
  font-weight: 700;
}

.move-san.blunder {
  color: #c0392b;
  font-weight: 700;
}

.move-san.grossBlunder {
  color: #8e44ad;
  font-weight: 700;
}

.move-san.catastrophe {
  color: #cc0000;
  font-weight: 700;
}

.move-san.placeholder {
  color: #cccccc;
}

/*═══════════════════════════════════════════════════════════════
  SEA SCENE — ПОЛНАЯ ПЕРЕРАБОТКА
  Живая морская сцена с горизонтом, облаками, водой и погодой
═══════════════════════════════════════════════════════════════*/

.sea-scene {
  width: 100%;
  height: 185px;
  border: 1px solid var(--border-color);
  padding: 0;
  margin-top: 16px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  transition: filter 2s ease, background 2s ease;
}

/* Убираем старые псевдоэлементы */
.sea-scene::before,
.sea-scene::after {
  content: none;
}

/*═══════════════════════════════════
  SKY LAYER — Небо
═══════════════════════════════════*/
.sky-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(
    180deg,
    #9e9e9e 0%,
    #cfcfcf 30%,
    #e8e8e8 60%,
    #f5f5f5 85%,
    #ffffff 100%
  );

  transition: background 2s ease;
  z-index: 1;
}

/* Горизонт — тёплая полоска на стыке неба и воды */
.horizon-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 20%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.25) 80%,
    transparent 100%
  );
  z-index: 3;
  transition: background 2s ease, opacity 2s ease;
}

/* Солнце */
.celestial-body {
  position: absolute;
  top: 15%;
  right: 20%;
  width: 24px;
  height: 24px;
  z-index: 2;
  transition: opacity 2s ease, transform 2s ease;
}

.sun-glow {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.6) 40%,
    rgba(255, 255, 255, 0.2) 70%,
    transparent 100%
  );
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.3),
    0 0 40px rgba(255, 255, 255, 0.15);
}

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


/*═══════════════════════════════════
  CLOUDS — Облака
═══════════════════════════════════*/
.clouds-container {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.cloud {
  position: absolute;
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 2s ease, transform 1s ease;
}

.cloud-puff {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.05);
  transition: background 2s ease;
  
  /* Добавляем анимацию потемнения */
  animation: cloudDarken 20s ease-in-out infinite;
}

/* Облако 1 — большое, медленное */
.cloud-1 {
  top: 12%;
  left: -15%;
  animation: cloudDrift1 45s linear infinite;
  
}
.cloud-1 .cp-1 { width: 28px; height: 18px; margin-right: -8px; }
.cloud-1 .cp-2 { width: 40px; height: 24px; margin-right: -10px; margin-top: -6px; }
.cloud-1 .cp-3 { width: 32px; height: 20px; }

/* Облако 2 — среднее */
.cloud-2 {
  top: 25%;
  left: 20%;
  animation: cloudDrift2 55s linear infinite;
  opacity: 0.5;
}
.cloud-2 .cp-1 { width: 20px; height: 14px; margin-right: -6px; }
.cloud-2 .cp-2 { width: 30px; height: 18px; margin-right: -8px; margin-top: -4px; }
.cloud-2 .cp-3 { width: 24px; height: 16px; margin-right: -5px; }
.cloud-2 .cp-4 { width: 18px; height: 12px; }

/* Облако 3 — маленькое, быстрое */
.cloud-3 {
  top: 8%;
  left: 55%;
  animation: cloudDrift3 35s linear infinite;
  opacity: 0.4;
}
.cloud-3 .cp-1 { width: 16px; height: 10px; margin-right: -4px; }
.cloud-3 .cp-2 { width: 22px; height: 14px; margin-right: -5px; margin-top: -3px; }
.cloud-3 .cp-3 { width: 14px; height: 9px; }

/* Облако 4 — дальнее, полупрозрачное */
.cloud-4 {
  top: 35%;
  left: 70%;
  animation: cloudDrift4 60s linear infinite;
  opacity: 0.3;
}
.cloud-4 .cp-1 { width: 14px; height: 9px; margin-right: -4px; }
.cloud-4 .cp-2 { width: 20px; height: 12px; }

/* Облако 5 — среднее */
.cloud-5 {
  top: 18%;
  left: -25%;
  animation: cloudDrift5 50s linear infinite;
  opacity: 0.55;
}
.cloud-5 .cp-1 { width: 22px; height: 14px; margin-right: -6px; }
.cloud-5 .cp-2 { width: 34px; height: 20px; margin-right: -8px; margin-top: -5px; }
.cloud-5 .cp-3 { width: 26px; height: 16px; }


/* Первое облако темнеет сразу */
.cloud-1 .cloud-puff { animation-delay: 0s; }

/* Второе облако потемнеет через 5 секунд */
.cloud-2 .cloud-puff { animation-delay: 5s; }

/* Третье облако потемнеет через 12 секунд */
.cloud-3 .cloud-puff { animation-delay: 12s; }

/* И так далее... */
.cloud-4 .cloud-puff { animation-delay: 8s; }
.cloud-5 .cloud-puff { animation-delay: 15s; }




@keyframes cloudDrift1 {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100% + 350px)); }
}
@keyframes cloudDrift2 {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100% + 300px)); }
}
@keyframes cloudDrift3 {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100% + 250px)); }
}
@keyframes cloudDrift4 {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100% + 200px)); }
}
@keyframes cloudDrift5 {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100% + 380px)); }
}

@keyframes cloudDarken {
  0%, 70%, 100% { 
    background: rgba(255, 255, 255, 0.6); 
  }
  85% { 
    background: rgba(60, 60, 60, 0.8); /* Темно-серый цвет тучи */
  }
}

/*═══════════════════════════════════
  SEAGULLS — Чайки
═══════════════════════════════════*/
.seagulls-container {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.seagull {
  position: absolute;
  color: rgba(255, 255, 255, 0.7);
  transition: opacity 2s ease;
}

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

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

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

.seagull-3 {
  top: 28%;
  left: 65%;
  width: 12px;
  height: 5px;
  opacity: 0.6;
  animation: seagullFly3 18s 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, 0px) scaleY(1); }
  70% { transform: translate(15px, -3px) scaleY(0.7); }
}

/*═══════════════════════════════════
  WATER SURFACE — Водная гладь
═══════════════════════════════════*/
.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,
    #8e8e8e 0%,   /* Было #3a3a3a */
    #7a7a7a 20%,  /* Было #2e2e2e */
    #666666 45%,  /* Было #222222 */
    #4a4a4a 70%,  /* Было #181818 */
    #2b2b2b 100%  /* Было #0e0e0e */
  );
  transition: background 2s ease;
}

/* Рябь на воде — горизонтальные тонкие линии */
.water-ripples {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ripple-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 15%,
    rgba(255, 255, 255, 0.12) 30%,
    transparent 45%,
    rgba(255, 255, 255, 0.06) 60%,
    rgba(255, 255, 255, 0.1) 75%,
    transparent 100%
  );
  opacity: 0.6;
  transition: opacity 2s ease;
}

.rl-1 { top: 10%; animation: rippleShift 6s ease-in-out infinite; }
.rl-2 { top: 22%; animation: rippleShift 7s ease-in-out infinite 0.5s; }
.rl-3 { top: 35%; animation: rippleShift 5.5s ease-in-out infinite 1s; }
.rl-4 { top: 48%; animation: rippleShift 8s ease-in-out infinite 0.3s; }
.rl-5 { top: 60%; animation: rippleShift 6.5s ease-in-out infinite 1.5s; opacity: 0.4; }
.rl-6 { top: 72%; animation: rippleShift 7.5s ease-in-out infinite 0.8s; opacity: 0.3; }
.rl-7 { top: 85%; animation: rippleShift 9s ease-in-out infinite 1.2s; opacity: 0.2; }

@keyframes rippleShift {
  0%, 100% { transform: translateX(0) scaleX(1); opacity: 0.6; }
  25% { transform: translateX(8px) scaleX(1.02); opacity: 0.8; }
  50% { transform: translateX(-5px) scaleX(0.98); opacity: 0.5; }
  75% { transform: translateX(3px) scaleX(1.01); opacity: 0.7; }
}

/* Блики на воде — мерцающие точки */
.water-glints {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.glint {
  position: absolute;
  width: 3px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  filter: blur(0.5px);
}

.g-1 { top: 8%; left: 15%; animation: glintFlicker 3s ease-in-out infinite; }
.g-2 { top: 15%; left: 35%; animation: glintFlicker 4s ease-in-out infinite 0.5s; }
.g-3 { top: 25%; left: 55%; animation: glintFlicker 3.5s ease-in-out infinite 1s; }
.g-4 { top: 12%; left: 75%; animation: glintFlicker 5s ease-in-out infinite 0.3s; }
.g-5 { top: 35%; left: 25%; animation: glintFlicker 4.5s ease-in-out infinite 1.5s; width: 2px; }
.g-6 { top: 45%; left: 60%; animation: glintFlicker 3.8s ease-in-out infinite 0.8s; width: 2px; }
.g-7 { top: 20%; left: 85%; animation: glintFlicker 4.2s ease-in-out infinite 1.2s; }
.g-8 { top: 55%; left: 45%; animation: glintFlicker 5.5s ease-in-out infinite 0.6s; width: 2px; opacity: 0.3; }

@keyframes glintFlicker {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  20% { opacity: 0.8; transform: scale(1.2); }
  40% { opacity: 0; transform: scale(0.8); }
  60% { opacity: 0.5; transform: scale(1); }
  80% { opacity: 0; transform: scale(0.6); }
}

/* Пена на волнах */
.foam-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.foam-streak {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0.2),
    transparent
  );
  opacity: 0.5;
}

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

.fs-2 {
  top: 18%;
  left: 45%;
  width: 40px;
  animation: foamDrift 10s ease-in-out infinite 2s;
  opacity: 0.3;
}

.fs-3 {
  top: 32%;
  left: 70%;
  width: 50px;
  animation: foamDrift 12s ease-in-out infinite 4s;
  opacity: 0.25;
}

@keyframes foamDrift {
  0%, 100% { transform: translateX(0) scaleX(1); opacity: 0.5; }
  30% { transform: translateX(10px) scaleX(1.1); opacity: 0.7; }
  60% { transform: translateX(-5px) scaleX(0.9); opacity: 0.3; }
}

/*═══════════════════════════════════
  SEA WAVES — Волны (переработанные)
═══════════════════════════════════*/
.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%;
  opacity: 0.5;
  transition: opacity 2s ease;
}

/* Волна 1 — ближайшая, SVG-подобная форма через градиент */
.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 10 300 30 T600 30 T900 30 T1200 30 V60 H0Z' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E")
    repeat-x bottom;
  background-size: 300px 20px;
  animation: waveFlow6s linear infinite;
  opacity: 0.7;
}

.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 15 300 30 T600 30 T900 30 T1200 30 V60 H0Z' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E")
    repeat-x bottom;
  background-size: 350px 18px;
  animation: waveFlow 8s linear infinite -2s;
  opacity: 0.5;
}

.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 18 300 30 T600 30 T900 30 T1200 30 V60 H0Z' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E")
    repeat-x bottom;
  background-size: 400px 15px;
  animation: waveFlow 10s linear infinite -4s;
  opacity: 0.35;
}

.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 20 300 30 T600 30 T900 30 T1200 30 V60 H0Z' fill='rgba(255,255,255,0.02)'/%3E%3C/svg%3E")
    repeat-x bottom;
  background-size: 450px 12px;
  animation: waveFlow 13s linear infinite -6s;
  opacity: 0.2;
}

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

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

/*─── ДОЖДЬ — косой, частый, эпичный ─── */
.rain-container {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.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(255, 255, 255, 0.4) 30%,
    rgba(255, 255, 255, 0.7)
  );
  opacity: 0;
  /*Ключевое — наклон 30° для косого дождя */
  transform: rotate(30deg);
  transform-origin: top center;
  border-radius: 00 2px 2px;
}

.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 .sky-layer {
  background: linear-gradient(
    180deg,
    #1a1b26 0%,    /* Темный чернильный */
    #24273a 25%,   /* Глубокий сизый */
    #2e324d 50%,   /* Насыщенный штормовой */
    #3b4261 75%,   /* Приглушенный фиолетово-синий */
    #4a5075 100%   /* Светлеет к горизонту */
  );
}

/* Штормовая вода — тёмная, глубокая */
.sea-scene.weather-storm .water-body {
    background: linear-gradient(
    180deg,
    #1a1a1a 0%,
    #121212 30%,
    #0a0a0a 60%,
    #050505 100%
  );
}

/* Горизонт при шторме — тусклый */
.sea-scene.weather-storm .horizon-line {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(150, 150, 150, 0.2) 30%,
    rgba(150, 150, 150, 0.3) 50%,
    rgba(150, 150, 150, 0.2) 70%,
    transparent 100%
  );
}

/* Солнце скрыто при шторме */
.sea-scene.weather-storm .celestial-body {
  opacity: 0;transform: scale(0.5);
}

/* Облака при шторме — тёмные, плотные */
.sea-scene.weather-storm .cloud-puff {
   background: rgba(20, 20, 20, 0.85);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.4);
}

.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;
}
.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(255, 255, 255, 0.15) 10%,
    transparent 20%,
    rgba(255, 255, 255, 0.12) 35%,
    transparent 45%,
    rgba(255, 255, 255, 0.18) 60%,
    transparent 70%,
    rgba(255, 255, 255, 0.1) 85%,
    transparent 100%
  );
  animation-duration: 2s !important;
}

/* Пена при шторме — ярче */
.sea-scene.weather-storm .foam-streak {
  opacity: 0.8;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation-duration: 3s !important;
}

/* Корабль в шторме — сильная качка */
.sea-scene.weather-storm .ship-bob {
  animation: shipBobStorm 2s ease-in-out infinite !important;
}

@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(circle2px at 15% 50%, rgba(200, 220, 255, 0.8) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 30% 30%, rgba(200, 220, 255, 0.6) 50%, transparent 51%),
    radial-gradient(circle 2.5px at 50% 60%, rgba(200, 220, 255, 0.7) 50%, transparent 51%),
    radial-gradient(circle 1px at 70% 40%, rgba(200, 220, 255, 0.5) 50%, transparent 51%),
    radial-gradient(circle 2px at 85% 55%, rgba(200, 220, 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); }
}

/*─── МОЛНИИ — для шторма ─── */
.lightning-container {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}

.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 4px rgba(255, 255, 255, 0.8));
}

.bolt-svg path {
  stroke: rgba(255, 255, 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%, 100% { opacity: 0; }
  32% { opacity: 0; }
  33% { opacity: 1; transform: scaleY(1); }
  34% { opacity: 0.3; }
  35% { opacity: 0.9; }
  37% { opacity: 0; }
}

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

/* Вспышка освещения от молнии */
.lightning-flash {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  opacity: 0;
}

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

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

/*─── ВЕТЕР — порывы и брызги ─── */
.wind-container {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.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(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.15) 80%,
    transparent 100%
  );
}

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

.sea-scene.weather-wind .wind-gust {
  animation-play-state: running;
}

@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(255, 255, 255, 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; }
.ws-3 { top: 52%; left: -8%; animation: sprayFly 1.5s ease-out infinite 1.2s; }
.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; }

.sea-scene.weather-wind .wind-spray {
  animation-play-state: running;
}

@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,
    #9e9e9e 0%,
    #cfcfcf 30%,
    #e8e8e8 60%,
    #f5f5f5 85%,
    #ffffff 100%
  );


}

/* Облака при ветре — быстрее, вытянутые */
.sea-scene.weather-wind .cloud {
  animation-duration: 20s !important;
}

.sea-scene.weather-wind .cloud-puff {
  transform: scaleX(1.3);
  background: rgba(230, 230, 230, 0.7);
}

/* Корабль при ветре — наклонён */
.sea-scene.weather-wind .ship-bob {
  animation: shipBobWind 3s ease-in-out infinite !important;
  transform-origin: 50% 80%;
}

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

/*─── ТУМАН — многослойный, атмосферный ─── */
.fog-container {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2.5s ease;
  z-index: 7;
}

.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(180, 180, 180, 0.6) 0%,
    rgba(180, 180, 180, 0.3) 40%,
    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(200, 200, 200, 0.4) 0%,
    rgba(200, 200, 200, 0.2) 50%,
    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(220, 220, 220, 0.35) 0%,
    rgba(220, 220, 220, 0.15) 45%,
    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;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 200, 200, 0.4) 20%,
    rgba(210, 210, 210, 0.6) 50%,
    rgba(200, 200, 200, 0.4) 80%,
    transparent 100%
  );
  filter: blur(3px);
}

.sea-scene.weather-fog .fog-tendril {
  animation-play-state: running;
}

.ft-1 {
  top: 45%;
  left: -30%;
  width: 70%;
  animation: tendrilCreep 14s ease-in-out infinite;
}

.ft-2 {
  top: 55%;
  left: -20%;
  width: 50%;
  animation: tendrilCreep 18s ease-in-out infinite 4s;
}

.ft-3 {
  top: 65%;
  left: -35%;
  width: 60%;
  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,
    #9e9e9e 0%,
    #cfcfcf 30%,
    #e8e8e8 60%,
    #f5f5f5 85%,
    #ffffff 100%
  );

}

/* Вода при тумане — тусклая */
.sea-scene.weather-fog .water-body {
  background: linear-gradient(
    180deg,
    #2a2a2a 0%,
    #1e1e1e 30%,
    #151515 60%,
    #0f0f0f 100%
  );
}

/* Горизонт при тумане — размытый, едва виден */
.sea-scene.weather-fog .horizon-line {
  opacity: 0.2;
  filter: blur(2px);
}

/* Солнце при тумане — тусклый диск */
.sea-scene.weather-fog .celestial-body {
  opacity: 0.3;
  filter: blur(3px);
}

/* Облака при тумане — сливаются */
.sea-scene.weather-fog .cloud {
  opacity: 0.2!important;
  filter: blur(2px);
}

/* Чайки при тумане — едва видны */
.sea-scene.weather-fog .seagull {
  opacity: 0.2 !important;
}

/* Блики при тумане — приглушены */
.sea-scene.weather-fog .water-glints {
  opacity: 0.2;
}

/* Корабль при тумане — полупрозрачный */
.sea-scene.weather-fog .ship-bob {
  opacity: 0.5;
  filter: blur(0.5px);
  animation: shipBob 7s ease-in-out infinite !important;
}

/* Волны при тумане — еле видны */
.sea-scene.weather-fog .sea-wave {
  opacity: 0.15!important;
  animation-duration: 10s !important;
}

/*─── ШТИЛЬ — спокойствие, солнце, блики ─── */
.sea-scene.weather-calm .sky-layer {
   background: linear-gradient(
    180deg,
    #9e9e9e 0%,
    #cfcfcf 30%,
    #e8e8e8 60%,
    #f5f5f5 85%,
    #ffffff 100%
  );

}

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

/* Блики при штиле — максимальные */
.sea-scene.weather-calm .water-glints .glint {
  animation-duration: 2.5s;
}

/* Волны при штиле — минимальные, мягкие */
.sea-scene.weather-calm .sea-wave {
  opacity: 0.25!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.3;
  animation-duration: 10s !important;
}

/* Пена при штиле — минимальная */
.sea-scene.weather-calm .foam-streak {
  opacity: 0.2;
}

/* Корабль при штиле — плавное покачивание */
.sea-scene.weather-calm .ship-bob {
  animation: shipBobCalm 6s ease-in-out infinite !important;
}

@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: 30px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.08) 30%,
    rgba(255, 255, 255, 0.03) 60%,
    transparent 100%
  );
  z-index: 4;
  animation: sunPathShimmer 4s ease-in-out infinite;
}

@keyframes sunPathShimmer {
  0%, 100% { opacity: 0.6; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.3); }
}

/*═══════════════════════════════════WEATHER INDICATOR — перенесён влево-вниз
═══════════════════════════════════*/
.weather-indicator {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.6s ease;
  /* Фон-подложка чтобы текст читался */
  background: rgba(0, 0, 0, 0.3);
  padding: 3px 8px;
  border-radius: 3px;backdrop-filter: blur(4px);
}

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

.weather-icon {
  font-size: 0.8rem;
  line-height: 1;
}

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

/*═══════════════════════════════════
  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(255, 255, 255, 0.6);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.voyage-fill {
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  position: relative;
  transition: width 0.6s ease;
}

.voyage-fill::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  background: rgba(10, 20, 40, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}

/*═══════════════════════════════════
  CHECKPOINTS
═══════════════════════════════════*/
.checkpoint {
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  background: rgba(10, 20, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.checkpoint.reached {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
}

.checkpoint.final {
  width: 8px;
  height: 8px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  animation: finalMark 2.6s ease-in-out infinite;
}

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

.checkpoint[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.58rem;
  padding: 4px 8px;
  white-space: nowrap;
  letter-spacing: 0.03em;
  border-radius: 3px;
  backdrop-filter: blur(4px);
}

/*═══════════════════════════════════
  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(255, 255, 255, 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(255, 255, 255, 0.1);
  border-radius: 1px;
  transition: background 0.3s ease, opacity 0.3s ease;
}

.hull-segment.active {
  background: rgba(255, 255, 255, 0.7);
}

.hull-segment.warning {
  background: rgba(255, 180, 80, 0.7);
}

.hull-segment.critical {
  background: rgba(255, 80, 80, 0.6);
  animation: hullPulse 1.4s ease-in-out infinite;
}

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

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

/*═══════════════════════════════════
  SHIP — адаптирован к водной сцене
═══════════════════════════════════*/
.ship.ship-editorial {
  position: absolute;
  right: -60px;
  top: -75px;
  width: 100px;
  height: 84px;
  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% 72%;animation: shipBob 4.4s ease-in-out infinite;filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

/* Отражение корабля в воде */
.ship-bob::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: -4px;
  height: 12px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 80%
  );
  border-radius: 50%;
  z-index: -1;
  animation: reflectionPulse 4.4s ease-in-out infinite;
}

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

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


/* Корабль — размеры и позиция */
.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 4.4s ease-in-out infinite;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}


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


/*═══════════════════════════════════
  KRAKEN — Атака из глубин
═══════════════════════════════════*/
.kraken-attack {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  overflow: visible; /* кракен МОЖЕТ вылезать из своего контейнера */
}

.kraken-attack.hidden {
  display: none; /* ← вернуть display:none */
}

/* ── Спрайт ── */
.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); }
}

/*═══════════════════════════════════
  SCENE SHAKE
═══════════════════════════════════*/
.sea-scene.under-attack {
  animation: sceneShake 0.6s ease-out;
}

@keyframes sceneShake {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-6px, 4px) rotate(-0.4deg); }
  20%  { transform: translate(6px, -3px) rotate(0.4deg); }
  35%  { transform: translate(-4px, 2px) rotate(-0.2deg); }
  50%  { transform: translate(3px, -2px); }
  70%  { transform: translate(-1px, 1px); }
  100% { transform: translate(0, 0); }
}

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

@keyframes shipUnderAttack {
  0%   { transform: translateY(0) rotate(0deg); }
  8%{ transform: translateY(3px) rotate(20deg); }
  20%  { transform: translateY(-2px) rotate(-15deg); }
  35%  { transform: translateY(4px) rotate(22deg); }
  50%  { transform: translateY(-2px) rotate(-10deg); }
  65%  { transform: translateY(2px) rotate(8deg); }
  80%  { transform: translateY(-1px) rotate(-3deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* ─── Виньетка ─── */
.damage-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
  /* Заменяем красные оттенки (rgba(80, 0, 0...)) на нейтрально-черные */
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.3) 70%,
    rgba(0, 0, 0, 0.7) 100%
  );
}


.damage-vignette.active {
  animation: vignettePulse 0.6s ease-in-out infinite alternate;
}

@keyframes vignettePulse {
  from { opacity: 0.3; }
  to   { opacity: 0.7; }
}
/*═══════════════════════════════════
  WEATHER TRANSITIONS
═══════════════════════════════════*/

/* Плавный переход для всех элементов */
.sea-scene {
  transition: filter 2s ease;
}

.sky-layer,
.water-body,
.horizon-line {
  transition: background2s ease, opacity 2s ease;
}

.celestial-body {
  transition: opacity 2s ease, transform 2s ease, filter 2s ease;
}

.cloud,
.cloud-puff {
  transition: opacity 2s ease, background 2s ease, filter 1.5s ease, transform 1s ease;
}

.seagull {
  transition: opacity 2s ease;
}

.sea-wave {
  transition: opacity 2s ease;
}

.water-glints {
  transition: opacity 2s ease;
}

.ripple-line {
  transition: opacity 2s ease, background 1.5s ease;
}

.foam-streak {
  transition: opacity 2s ease;
}

/* Анимация смены погоды */
.sea-scene.weather-transitioning {
  animation: weatherShift 2s ease-in-out;
}

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

/* Контейнеры погодных эффектов — плавное появление/исчезновение */
.rain-container,
.wind-container,
.fog-container,
.lightning-container {
  transition: opacity 1.5s ease;
}

/*═══════════════════════════════════
  KRAKEN OVERLAY — фоновые щупальца
═══════════════════════════════════*/
.kraken-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.kraken-overlay.active {
  opacity: 1;
}

.tentacle {
  position: absolute;
  bottom: -50%;
  left: 50%;
  width: 4px;
  height: 60%;
   background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.1),
    transparent
  );
  transform-origin: bottom center;
  transform: rotate(var(--rot));
  border-radius: 2px;
  opacity: 0.4;
}

@keyframes wave {
  0%, 100% { transform: rotate(var(--rot)) scaleY(1); }
  50% { transform: rotate(calc(var(--rot) + 5deg)) scaleY(1.05); }
}

/*═══════════════════════════════════
  RESPONSIVE — адаптация сцены
═══════════════════════════════════*/
@media (max-width: 1200px) {
  .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; }
}

@media (max-width: 900px) {
  .sea-scene {
    height: 160px;
  }

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

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

/*═══════════════════════════════════
  COMBO: GAZETTE x APPLE STYLE
═══════════════════════════════════*/
.combo-container {
  background: var(--background);
  border-bottom: 2px solid var(--primary-text); /* Толстая газетная линия */
  padding: 20px 0 12px;
  width: 100%;
  position: relative;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Эффект "Свечения" при высоком комбо */
.combo-container.active {
  background: #fdfaf3; /* Цвет старой бумаги под лампой */
}

.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(--primary-text);
  position: relative;
}

.combo-label::after {
  content: "LIVE RECAP";
  display: block;
  font-size: 0.5rem;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-style: normal;
  font-weight: 800;
  background: #ff3b30; /* Apple Red */
  color: white;
  padding: 1px 4px;
  border-radius: 3px;
  margin-top: 4px;
  letter-spacing: 0.05em;
}

#combo-multiplier {
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: 2.5rem; /* Огромная цифра как заголовок */
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--primary-text);
  /* Текстура газетных чернил */
  background: linear-gradient(45deg, #000, #444);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.2s ease;
}
/* Анимация при изменении множителя */
.bump {
  transform: scale(1.2);
}

.combo-bar-bg {
  height: 6px;
  background: #e5e5e7; /* Apple Gray */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

#combo-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b4513 0%, #d4a017 40%, #ffd700 100%);
  box-shadow: 0 0 8px rgba(212, 160, 23, 0.6);
  width: 0%;
  border-radius: 10px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/*═══════════════════════════════════
  LIVE STATS
═══════════════════════════════════*/
.live-stats-box {
  background: var(--background);
  border: none;
  border-bottom: 1px solid var(--border-color);
  padding: 16px 0;
  width: 100%;
}

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

.live-stat {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  text-align: center;
}

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

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

/*═══════════════════════════════════
  BADGES & TAGS
═══════════════════════════════════*/
.combo-badge,
.cat-tag,
.bonus-tag {
  display: inline-flex;
  padding: 4px 10px;
  border: 1px solid var(--border-color);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary-text);
  background: var(--background-secondary);
}

.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(--border-color);
  font-size: 0.85rem;
  font-weight: 500;
}


/* ============================================
УТИЛИТЫ
============================================ */

.hidden {
display: none !important;
}

/* ============================================
GAME OVER 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:
radial-gradient(ellipse at 30% 20%, rgba(45, 27, 78, 0.15) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(26, 58, 42, 0.1) 0%, transparent 40%),
radial-gradient(ellipse at center, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.92) 100%);
backdrop-filter: blur(0px) sepia(0);transition:
opacity 0.6s ease,
visibility 0.6s ease,
backdrop-filter 0.6s ease;
}

.game-over-overlay.show {
opacity: 1;
visibility: visible;
pointer-events: auto;
backdrop-filter: blur(4px) sepia(0.2);
}

/ 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
============================================ */

.game-over-card {
position: relative;
background-color: var(--parchment-mid);
background-image:
radial-gradient(ellipse at 15% 85%, rgba(139, 105, 20, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 85% 15%, rgba(107, 26, 26, 0.05) 0%, transparent 40%),
radial-gradient(ellipse at 50% 50%, rgba(180, 160, 120, 0.1) 0%, transparent 70%),
repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.01) 2px,
rgba(0, 0, 0, 0.01) 3px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 3px,
rgba(0, 0, 0, 0.008) 3px,
rgba(0, 0, 0, 0.008) 4px
);
color: var(--ink-black);
padding: 0;
width: 90%;
max-width: 520px;
max-height: 90vh;
overflow-y: auto;
text-align: center;
border: 3px solid var(--ink-black);
outline: 1px solid var(--ink-black);
outline-offset: 6px;
box-shadow:
0 0 0 7px var(--parchment-dark),
0 0 0 8px var(--ink-black),
0 25px 60px -10px rgba(0, 0, 0, 0.7),
0 10px 30px -5px rgba(0, 0, 0, 0.5),
inset 0 0 80px rgba(139, 105, 20, 0.05);
transform-origin: center bottom;

/ Анимация появления /
animation: cardRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/ Пятна старения на пергаменте /
.game-over-card::before {
content: '';
position: absolute;
inset: -1px;
background:
radial-gradient(circle at 0% 30%, rgba(80, 50, 20, 0.3) 0%, transparent 3%),
radial-gradient(circle at 100% 60%, rgba(80, 50, 20, 0.2) 0%, transparent 4%),
radial-gradient(circle at 20% 100%, rgba(60, 40, 15, 0.25) 0%, transparent 3%),
radial-gradient(circle at 80% 0%, rgba(60, 40, 15, 0.15) 0%, transparent 5%);
pointer-events: none;
z-index: 0;
}

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

@keyframes cardRise {
from {
opacity: 0;
transform: translateY(40px) rotateX(4deg) scale(0.95);
filter: blur(2px) brightness(0.7);
}
60% {
opacity: 1;
filter: blur(0px) brightness(1);
}
to {
transform: translateY(0) rotateX(0deg) scale(1);
filter: none;
}
}

/* ============================================
MASTHEAD (шапка газеты)
============================================ */

.game-over-masthead {
position: relative;
padding: 20px 30px 14px;
border-bottom: 2px solid var(--ink-black);
z-index: 1;
}

.game-over-masthead::before {
content: '';
position: absolute;
top: 0;
left: 20px;
right: 20px;
height: 1px;
background: var(--ink-black);
}

.masthead-dateline {
font-family: 'Special Elite', 'Courier New', monospace;
font-size: 0.6rem;
letter-spacing: 0.25em;
color: var(--ink-faded);
text-transform: uppercase;
margin-bottom: 8px;
}

.masthead-title {
font-family: 'UnifrakturMaguntia', 'Playfair Display', serif;
font-size: 1.8rem;
line-height: 1;
color: var(--ink-black);
margin: 0;
text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.1);
}

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

.masthead-ornament::before,
.masthead-ornament::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--ink-faded), transparent);
}

.masthead-ornament-symbol {
font-size: 0.7rem;
color: var(--ink-faded);
line-height: 1;
}

/* ============================================
HEADLINE (заголовок-исход)
============================================ */

.game-over-headline {
position: relative;
padding: 18px 30px;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
z-index: 1;
}

.headline-kicker {
font-family: 'Special Elite', 'Courier New', monospace;
font-size: 0.6rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-faded);
margin-bottom: 6px;
}

.game-over-title {
font-family: 'Playfair Display', 'Georgia', serif;
font-size: 1.6rem;
font-weight: 900;
line-height: 1.15;
margin: 0;
letter-spacing: -0.02em;
color: var(--ink-black);
}

.game-over-title--victory { color: var(--ink-green); }
.game-over-title--defeat { color: var(--ink-red); }
.game-over-title--neutral { color: var(--ink-black); }

.headline-sub {
font-family: 'IM Fell English', 'Georgia', serif;
font-style: italic;
font-size: 0.85rem;
color: var(--ink-faded);
margin-top: 6px;
line-height: 1.4;
}

/ Звёзды /
.game-over-stars {
font-size: 1.4rem;
letter-spacing: 0.15em;
margin-bottom: 10px;
}

/* ============================================
ILLUSTRATION (GIF кракена)
============================================ */

.game-over-illustration {
position: relative;
padding: 8px 012px;
z-index: 1;
}

.game-over-kraken-img {
width: 100%;
max-width: 220px;
margin: 0 auto;
display: block;
filter: grayscale(1) contrast(1.6) brightness(0.85) sepia(0.4);
mix-blend-mode: multiply;border: 1.5px solid var(--ink-black);
padding: 4px;
background: var(--parchment-light);
box-shadow:
inset 0 0 10px rgba(0, 0, 0, 0.1),
2px 2px 6px rgba(0, 0, 0, 0.15);
}

.illustration-caption {
font-family: 'IM Fell English', 'Georgia', serif;
font-style: italic;
font-size: 0.65rem;
color: var(--ink-faded);
margin-top: 6px;
letter-spacing: 0.02em;
}

/* ============================================
   RATING BLOCK
   ============================================ */

.newspaper-rating-block {
  position: relative;
  margin: 0 30px;
  padding: 16px 20px;
  border-top: 3px double var(--ink-black);
  border-bottom: 3px double var(--ink-black);
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(0, 0, 0, 0.015) 1px,
      rgba(0, 0, 0, 0.015) 2px
    ),
    rgba(0, 0, 0, 0.02);
  z-index: 1;
}

.rating-block-label {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faded);
  text-align: center;
  margin-bottom: 8px;
}

.newspaper-rating-block .rating-delta {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
}

.rating-delta--positive { color: var(--ink-green); }
.rating-delta--negative { color: var(--ink-red); }
.rating-delta--zero{ color: var(--ink-faded); }

.newspaper-rating-block .rating-transition {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 0.75rem;
  color: var(--ink-faded);
  text-align: center;
  margin-top: 6px;
  letter-spacing: 0.05em;
}

.newspaper-rating-block .rating-transition b {
  color: var(--ink-black);font-weight: 700;
}

/* ============================================
   CATEGORIES (качествоходов)
   ============================================ */

.game-over-categories {
  position: relative;
  padding: 14px 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  z-index: 1;
}

.categories-title {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faded);
  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: 5px 0;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.08);
}

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

.voyage-stat-label {
  font-family: 'IM Fell English', 'Georgia', serif;
  font-size: 0.75rem;
  color: var(--ink-faded);
}

.voyage-stat-value {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-black);
  font-variant-numeric: tabular-nums;
}

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

.voyage-stat-value--critical {
  color: var(--ink-red);
  font-weight: 900;
}

/* Цвета категорий в строках */
.cat-theory{ color: #1a4a6b; }
.cat-good{ color: var(--ink-green); }
.cat-inaccuracy{ color: #6b5a14; }
.cat-mistake     { color: #6b3a14; }
.cat-blunder     { color: var(--ink-red); }
.cat-gross       { color: var(--eldritch-purple, #4a1a6b); }
.cat-catastrophe { color: #4a0a0a; font-weight: 700; }

/* ============================================
   COMBO SECTION
   ============================================ */

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

/*============================================
   VOYAGE SECTION (бортовой журнал)
   ============================================ */

.game-over-voyage {
  position: relative;
  padding: 14px 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  z-index: 1;
}

.voyage-summary-title {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin-bottom: 8px;
}

/* ============================================
   ACHIEVEMENTS
   ============================================ */

.game-over-achievements {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 12px 30px;
  z-index: 1;
  position: relative;
}

.achievement-badge {
  font-size: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--ink-faded);
  border-radius: 50%;
  background: var(--parchment-light);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease;
}

.achievement-badge:hover {
  transform: scale(1.15);
}

/* ============================================
   PENALTIES
   ============================================ */

.penalty-line {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 0.7rem;
  color: var(--ink-red);
  text-align: center;
  padding: 8px 30px;
  letter-spacing: 0.05em;
  z-index: 1;
  position: relative;
}

/* ============================================
   WORST MOVE
   ============================================ */

.worst-move-row {
  position: relative;
  margin: 10px 30px;
  padding: 10px 14px;
  background: rgba(107, 26, 26, 0.04);
  border-left: 3px solid var(--ink-red);
  text-align: left;
  z-index: 1;
}

.worst-move-row .label {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-red);
}

.worst-move-row .value {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-red);
  margin-top: 2px;
}

/* ============================================
   DEFEAT TIP
   ============================================ */

.defeat-tip {
  font-family: 'IM Fell English', 'Georgia', serif;
  font-style: italic;
  font-size: 0.8rem;
  color: var(--ink-faded);
  border-left: 3px solid var(--ink-black);
  padding: 10px 16px;
  margin: 14px 30px;
  text-align: left;
  line-height: 1.5;
  background: rgba(0, 0, 0, 0.02);
  position: relative;
  z-index: 1;
}

.defeat-tip::before {
  content: '"';
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 2rem;
  position: absolute;
  top: -2px;
  left: 6px;
  color: rgba(0, 0, 0, 0.1);
  line-height: 1;
}

/* ============================================
   BUTTONS
   ============================================ */

.game-over-buttons {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 18px 30px 24px;
  border-top: 2px solid var(--ink-black);
  z-index: 1;
}

.game-over-buttons button {
  flex: 1;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 16px;
  border: 1.5px solid var(--ink-black);
  background: var(--parchment-light);
  color: var(--ink-black);
  cursor: pointer;
  transition: all 0.2s ease;
}

.game-over-buttons button:hover {
  background: var(--ink-black);
  color: var(--parchment-light);
}

.game-over-buttons button:active {
  transform: scale(0.97);
}

.game-over-buttons .btn-primary-action {
  background: var(--ink-black);
  color: var(--parchment-light);
  font-weight: 700;
}

.game-over-buttons .btn-primary-action:hover {
  background: var(--ink-faded);
  border-color: var(--ink-faded);
}

/* ============================================
   SECTION ORNAMENT (разделители с символом)
   ============================================ */

.section-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 30px;
  gap: 10px;
  z-index: 1;
  position: relative;
}

.section-ornament::before,
.section-ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.2) 20%,
    rgba(0, 0, 0, 0.2) 80%,
    transparent
  );
}

.section-ornament-glyph {
  font-size: 0.6rem;
  color: var(--ink-faded);
  opacity: 0.6;
}

/* ============================================
   ELDRITCH EFFECTS (эффекты при поражении)
   ============================================ */

/* Мерцание заголовка */
.game-over-card.result-defeat .game-over-title {
  animation: textFlicker 4s ease-in-out infinite;
}

@keyframes textFlicker {
  0%, 95%, 100% { opacity: 1; }
  96% { opacity: 0.8; }
  97% { opacity: 1; }
  98% { opacity: 0.85; }
}

/* «Дыхание» карточки при поражении */
.game-over-card.result-defeat {
  animation:
    cardRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    cardBreathe 6s ease-in-out 1s infinite;
}

@keyframes cardBreathe {
  0%, 100% {
    box-shadow:
      0 0 0 7px var(--parchment-dark),
      0 0 0 8px var(--ink-black),
      0 25px 60px -10px rgba(0, 0, 0, 0.7),
      0 10px 30px -5px rgba(0, 0, 0, 0.5),
      inset 0 0 80px rgba(139, 105, 20, 0.05);
  }
  50% {
    box-shadow:
      0 0 0 7px var(--parchment-dark),
      0 0 0 8px var(--ink-red),
      0 25px 60px -10px rgba(107, 26, 26, 0.3),
      0 10px 30px -5px rgba(0, 0, 0, 0.5),
      inset 0 0 100px rgba(107, 26, 26, 0.03);
  }
}

/* Лёгкое свечение при победе */
.result-victory .game-over-card {
  animation:
    cardRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    cardGlowVictory 5s ease-in-out 1s infinite;
}

@keyframes cardGlowVictory {
  0%, 100% {
    box-shadow:
      0 0 0 7px var(--parchment-dark),
      0 0 0 8px var(--ink-black),
      0 25px 60px -10px rgba(0, 0, 0, 0.7),
      0 10px 30px -5px rgba(0, 0, 0, 0.5),
      inset 0 0 80px rgba(139, 105, 20, 0.05);
  }
  50% {
    box-shadow:
      0 0 0 7px var(--parchment-dark),
      0 0 0 8px var(--ink-green),
      0 25px 60px -10px rgba(26, 107, 42, 0.2),
      0 10px 30px -5px rgba(0, 0, 0, 0.5),
      inset 0 0 100px rgba(26, 107, 42, 0.02);
  }
}

/*============================================
   SCROLLBAR внутри карточки
   ============================================ */

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

.game-over-card::-webkit-scrollbar-track {
  background: var(--parchment-dark);
}

.game-over-card::-webkit-scrollbar-thumb {
  background: var(--ink-faded);
  border-radius: 2px;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

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









/*═══════════════════════════════════
  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(--background);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--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 cubic-bezier(0.16, 1, 0.3, 1) 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(--primary-text);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

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

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

/*═══════════════════════════════════
  LICHESS ANALYSIS BUTTON
═══════════════════════════════════*/
.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: #ffffff;
  background: #629924;
  border: 1px solid #4d7a1d;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-lichess-analysis:hover {
  background: #4d7a1d;
}

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

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




/*═══════════════════════════════════
  RESPONSIVE
═══════════════════════════════════*/
@media (max-width: 1100px) {
  :root {
    --side-width: 240px;
    --column-width: 480px;
    --gap: 24px;
  }

  .side-panel,
  .analysis-panel {
    margin-top: 56px;
  }
}

@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(--primary-text);
  }

  #board {
    width: min(90vw, 480px);
    height: min(90vw, 480px);
  }

  .sea-scene {
    padding: 16px 12px 12px;
  }
}

/*═══════════════════════════════════
  SCROLLBAR
═══════════════════════════════════*/
.move-history::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
  width: 3px;
}

.move-history::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
  background: var(--secondary-text);
}

/*═══════════════════════════════════
  UTILITIES
═══════════════════════════════════*/
.hidden {
  display: none !important;
}

/*.sea-scene {
  filter: grayscale(1);
} */

/* Кнопка повторить тренировку из FEN */
#go-btn-retry-fen {
    margin-top: 8px;
}

#go-btn-retry-fen.hidden {
    display: none;
}



/* ═══════════════════════════════════════
   VOYAGE MAP — Слои поверх карты
   ═══════════════════════════════════════ */


.voyage-routes-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
}

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

/* ═══ Слой портов ═══ */
.voyage-ports-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 3;
}

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

/* ═══ Порт ═══ */
.voyage-port {
    position: absolute;
    transform: translate(-50%, -50%);
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.3s ease;
    z-index: 4;
}

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

.voyage-port.locked {
    filter: grayscale(0.7) brightness(0.6);
    cursor: not-allowed;
}

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

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

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

.vport-icon {
    font-size: 2rem;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.vport-name {
    font-size: 0.65rem;
    color: #e8d5a3;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    margin-top: 2px;
    white-space: nowrap;
}

.vport-stars {
    font-size: 0.5rem;
    letter-spacing: 1px;
}

.vport-lock {
    position: absolute;
    top: -4px; right: -8px;
    font-size: 0.7rem;
}

/* ═══ Корабль ═══ */
.voyage-ship {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: left 0.7s ease, top 0.7s ease, opacity 0.4s ease;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

.voyage-ship.active {
    opacity: 1;
}

/* ═══ Счётчик звёзд ═══ */
.voyage-stars-counter {
    position: absolute;
    top: 8px; right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #ffd700;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    z-index: 6;
    opacity: 0;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(4px);
}

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

/* ═══ Панель порта ═══ */
/* ═══ Панель порта (Стиль старинной морской карты) ═══ */
.voyage-port-panel {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    max-height: 55%;
    /* Текстура выцветшего архивного пергамента */
    background: linear-gradient(180deg, #f3e8cb 0%, #e9dbb6 100%);
    /* Двойная рамка, характерная для старых навигационных карт */
    border-top: 3px double #5c432d;
    border-radius: 14px 14px 0 0;
    z-index: 10;
    overflow-y: auto;
    transform: translateY(100%);
    /* Плавное разворачивание свитка карты */
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 14px;
    /* Тяжелая тень, отделяющая панель от нижних слоев */
    box-shadow: 0 -8px 28px rgba(43, 33, 24, 0.35);
}

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

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

/* Кнопка закрытия в виде винтажного штампа */
.vpp-close-btn {
    position: absolute;
    top: 10px; right: 12px;
    background: transparent;
    border: 1px solid #7c5d3f;
    /* Глубокий кофейно-черный цвет для идеальной читаемости */
    color: #312115;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 11;
    padding: 4px 10px;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
}

.vpp-close-btn:hover {
    /* Инверсия при наведении: кнопка заливается чернилами */
    background: #312115;
    color: #f3e8cb;
    border-color: #312115;
    box-shadow: 0 2px 6px rgba(43, 33, 24, 0.2);
}

.vpp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    /* Разделитель в виде пунктирного навигационного маршрута */
    border-bottom: 1px dashed rgba(49, 33, 21, 0.35);
    margin-bottom: 12px;
}

.vpp-icon {
    font-size: 1.4rem;
    /* Цвет жжёной умбры */
    color: #5c432d;
    filter: drop-shadow(0.5px 0.5px 0px rgba(255, 255, 255, 0.6));
}

/* Название порта (Каллиграфический стиль судового журнала) */
.vpp-name {
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 1.15rem;
    font-weight: 700;
    /* Максимально контрастный чернильный цвет */
    color: #120b05;
    letter-spacing: 0.02em;
    /* Легкая светлая подложка для эффекта объема на бумаге */
    text-shadow: 0.5px 0.5px 0px rgba(255, 255, 255, 0.7);
}

/* Отметка звезд порта (Имитация портового сургучного оттиска) */
.vpp-stars {
    margin-left: auto;
    color: #9e1b1b; /* Благородный сургучно-красный */
    font-size: 0.9rem;
    font-weight: 700;
    background: rgba(158, 27, 27, 0.06);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(158, 27, 27, 0.25);
}

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

/* Кастомизация полосы прокрутки (скроллбара) под стиль карты */
.voyage-port-panel::-webkit-scrollbar {
    width: 6px;
}

.voyage-port-panel::-webkit-scrollbar-track {
    background: rgba(49, 33, 21, 0.05);
    border-radius: 3px;
}

.voyage-port-panel::-webkit-scrollbar-thumb {
    background: rgba(92, 67, 45, 0.4);
    border-radius: 3px;
}

.voyage-port-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(92, 67, 45, 0.7);
}


/* ═══ Карточка дебюта (Старая морская карта / Пергамент) ═══ */
.voyage-opening-card {
    position: relative;
    /* Светлый оттенок старой бумаги для идеального контраста черного текста */
    background: #faf4e3;
    /* Четкая коричневая рамка вместо блеклого золота */
    border: 1px solid #bda88a;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(53, 40, 28, 0.1);
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

/* Эффект выдвижения карты при наведении */
.voyage-opening-card.unlocked:hover {
    border-color: #61462d;
    transform: translateX(4px);
    background: #ffffff;
    box-shadow: -4px 4px 12px rgba(53, 40, 28, 0.2);
}

.voyage-opening-card.locked {
    opacity: 0.6;
    cursor: not-allowed;
    background: #e3d9bf;
    border-color: rgba(97, 70, 45, 0.2);
}

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

/* Код ECO (как архивный шифр на полях) */
.voc-eco {
    font-size: 0.7rem;
    color: #4a3b2c;
    font-family: monospace;
    font-weight: bold;
    background: rgba(97, 70, 45, 0.1);
    padding: 1px 5px;
    border-radius: 3px;
}

/* Цвет (белые/черные фигуры) */
.voc-color {
    font-size: 0.75rem;
    color: #2b1f15;
    font-weight: 500;
}

/* Метки сложности (Стилизованы под старинные портовые штампы и сургуч) */
.voc-diff {
    margin-left: auto;
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 4px; /* Более строгие углы для эффекта штампа */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Цвета штампов: приглушенные, глубокие, как старые чернила */
.diff-easy   { background: #d0e1d0; color: #1e3f1e; border: 1px solid #a3c4a3; }
.diff-medium { background: #e6e6c5; color: #42421a; border: 1px solid #c7c793; }
.diff-hard   { background: #ecdcc3; color: #52371c; border: 1px solid #d1b694; }
.diff-expert { background: #f2cbd0; color: #5c1e24; border: 1px solid #df9da5; }
.diff-master { background: #ebd1f5; color: #431c52; border: 1px solid #d4a3e8; }

/* Главное название (Чернильное каллиграфическое начертание) */
.voc-name {
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #120b05; /* Максимально темный коричнево-черный цвет */
    margin-bottom: 2px;
}

/* Описание дебюта */
.voc-desc {
    font-size: 0.7rem;
    color: #4f4235; /* Смягченный кофейный цвет для читаемости текста мелкого кегля */
    line-height: 1.3;
    margin-bottom: 6px;
}

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

/* Звезды (Имитация отметок портового цензора) */
.voc-stars {
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: #b52a2a; /* Сургучно-красный цвет звезд вместо блеклого золота */
}

/* Попытки */
.voc-attempts {
    font-size: 0.65rem;
    color: #6e5e4f;
    font-weight: 500;
}

/* Заблокированная карточка (Покрывается плотной архивной калькой) */
.voc-lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(43, 35, 26, 0.45); /* Полупрозрачная сепия */
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    backdrop-filter: blur(1.5px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* ═══ Подсветка карты при смене дебюта ═══ */
/* Стилизовано под "вспышку молнии" над морем или старой картой */
#opening-map-container.flash-hint {
    animation: mapFlash 1.5s ease;
}

@keyframes mapFlash {
    0%   { filter: brightness(1) sepia(0); }
    25%  { filter: brightness(1.25) sepia(0.15) contrast(1.1); box-shadow: inset 0 0 40px rgba(97, 70, 45, 0.3); }
    100% { filter: brightness(1) sepia(0); }
}

/* theme-toggle.css — стили переключателя */

.theme-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: var(--bg-card, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-light, rgba(255, 255, 255, 0.08));
    transition: background 0.3s ease, border-color 0.3s ease;
    justify-content: flex-end;
}


/* ═══ Переключатель (адаптированный) ═══ */
.cl-toggle-switch {
    position: relative;
}

.cl-switch {
    position: relative;
    display: inline-block;
    cursor: pointer;
    transform: scale(0.75);      /* уменьшение на 25% */
    transform-origin: right center;
}

.cl-switch > input {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    z-index: -1;
    position: absolute;
    right: 6px;
    top: -8px;
    display: block;
    margin: 0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.38);
    outline: none;
    opacity: 0;
    transform: scale(1);
    pointer-events: none;
    transition: opacity 0.3s 0.1s, transform 0.2s 0.1s;
}

/* Трек */
.cl-switch > span::before {
    content: "";
    float: right;
    display: inline-block;
    margin: 5px 0 5px 10px;
    border-radius: 7px;
    width: 36px;
    height: 14px;
    background-color: var(--theme-toggle-track, rgba(0, 0, 0, 0.25));
    vertical-align: top;
    transition: background-color 0.3s ease;
}

/* Ползунок */
.cl-switch > span::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 16px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background-color: var(--theme-toggle-thumb, #fff);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
                0 2px 2px 0 rgba(0, 0, 0, 0.14),
                0 1px 5px 0 rgba(0, 0, 0, 0.12);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Checked = Тёмная тема */
.cl-switch > input:checked {
    right: -10px;
    background-color: #d4a855;
}

.cl-switch > input:checked + span::before {
    background-color: rgba(212, 168, 85, 0.4);
}

.cl-switch > input:checked + span::after {
    background-color: #d4a855;
    transform: translateX(16px);
}

/* Hover эффекты */
.cl-switch:hover > input {
    opacity: 0.04;
}

.cl-switch > input:focus {
    opacity: 0.12;
}

.cl-switch:hover > input:focus {
    opacity: 0.16;
}

.cl-switch > input:active {
    opacity: 1;
    transform: scale(0);
    transition: transform 0s, opacity 0s;
}

.cl-switch > input:active + span::before {
    background-color: #8f8f8f;
}

.cl-switch > input:checked:active + span::before {
    background-color: rgba(212, 168, 85, 0.5);
}

/* ═══ Плавный переход при смене темы ═══ */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.4s ease,
                color 0.4s ease,
                border-color 0.4s ease,
                box-shadow 0.4s ease !important;
}

/* ═══════════════════════════════════════════
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); }
}

/* === Treasure Hunt === */

.treasure-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 8px;
  font-size: 14px;
  color: #ffd700;
}

.treasure-panel.hidden {
  display: none;
}

.treasure-panel-icon {
  font-size: 18px;
}

.treasure-panel-pts::before {
  content: '⚜️ ';
}

.treasure-streak {
  display: none;
  color: #ff6b35;
  font-weight: 700;
}

.treasure-streak.visible {
  display: inline;
}

/* Подсказка */
.treasure-hint {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.85);
  color: #ffd700;
  border-radius: 20px;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 100;
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.treasure-hint-visible {
  opacity: 1;
}

@keyframes treasure-shimmer {
  0%, 100% { text-shadow: 0 0 4px rgba(255, 215, 0, 0.3); }
  50% { text-shadow: 0 0 12px rgba(255, 215, 0, 0.8); }
}

.treasure-shimmer {
  animation: treasure-shimmer 1s ease-in-out 2;
}

.treasure-missed {
  color: #ff8a65;
}

.treasure-missed b {
  color: #fff;
}

@keyframes treasure-missed-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.treasure-missed-anim {
  animation: treasure-missed-pulse 0.8s ease 2;
}

/* Оверлей найденного сокровища */
.treasure-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.treasure-overlay-visible {
  opacity: 1;
}

/* Карточка найденного сокровища */
@keyframes treasure-appear {
  0% {
    transform: scale(0.3) rotate(-10deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.1) rotate(2deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.treasure-found-card {
  background: linear-gradient(135deg, #0d1b2a, #1b2838);
  border: 2px solid #ffd700;
  border-radius: 16px;
  padding: 24px 32px;
  text-align: center;
  color: #fff;
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.4);
  animation: treasure-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: 240px;
  max-width: 340px;
}

/* Тиры сокровищ */
.treasure-tier-3 {
  border-color: #e040fb;
  box-shadow: 0 0 40px rgba(224, 64, 251, 0.5);
  background: linear-gradient(135deg, #1a0a2e, #2d1b4e);
}

.treasure-tier-2 {
  border-color: #ffd700;
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.4);
}

.treasure-tier-1 {
  border-color: #b0bec5;
  box-shadow: 0 0 30px rgba(176, 190, 197, 0.3);
}

.treasure-tier-0 {
  border-color: #ff7043;
  box-shadow: 0 0 25px rgba(255, 112, 67, 0.3);
}

.treasure-icon-large {
  font-size: 48px;
  margin-bottom: 8px;
}

.treasure-title {
  font-size: 18px;
  font-weight: 700;
  color: #ffd700;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.treasure-name {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}

.treasure-move {
  font-size: 28px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  color: #fff;
  margin: 8px 0;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.treasure-details {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 8px;
}

.treasure-details span {
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.treasure-streak-badge {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #ff6b35;
  animation: treasure-shimmer 1s ease-in-out infinite;
}

/* Секция в модалке результатов */
.treasure-missed-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.treasure-missed-item {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  padding: 3px 0;
}

.treasure-missed-item b {
  color: #ffd700;
}

/* Тёмная тема — корректировки */
[data-theme="light"] .treasure-found-card {
  background: linear-gradient(135deg, #f5f0e8, #e8e0d0);
  color: #1a1a2e;
  border-color: #c8a000;
}

[data-theme="light"] .treasure-title {
  color: #8b6914;
}

[data-theme="light"] .treasure-move {
  color: #1a1a2e;
  text-shadow: none;
}

[data-theme="light"] .treasure-hint {
  background: rgba(255, 255, 255, 0.95);
  color: #8b6914;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .treasure-panel {
  background: linear-gradient(135deg, #f5f0e8, #ebe3d3);
  border-color: rgba(200, 160, 0, 0.4);
  color: #8b6914;
}

/* Адаптив */
@media (max-width: 600px) {
  .treasure-found-card {
    padding: 16px 20px;
    min-width: 200px;
    max-width: 280px;
  }

  .treasure-icon-large {
    font-size: 36px;
  }

  .treasure-move {
    font-size: 22px;
  }

  .treasure-details {
    flex-direction: column;
    gap: 4px;
  }

  .treasure-hint {
    font-size: 12px;
    bottom: 48px;
  }
}