/* ==========================================================================
   Submarine Battle — Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables (Design Tokens)
   -------------------------------------------------------------------------- */
/* Этап 4 «Глубина и грани»: тёмная тема «Бездна» — тон по умолчанию,
 * т.к. это исходная идентичность игры (см. согласованный макет).
 * Светлая «Бело-лазурная» переопределяет те же токены ниже — по
 * системному prefers-color-scheme и явным выбором в Настройках. */
:root {
  /* Ocean color palette */
  --color-ocean-deep: #081018;
  --color-ocean-mid: #11233a;
  --color-ocean-light: #1c3c5c;
  --color-ocean-surface: #3d7ab5;

  /* Grid & cells */
  --color-grid: #2d5a87;
  --color-grid-border: #24405f;
  --color-cell-hover: rgba(70, 214, 200, 0.18);
  --color-cell-selected: rgba(70, 214, 200, 0.3);

  /* Game states */
  --color-hit: #ef4a56;
  --color-hit-bg: rgba(239, 74, 86, 0.18);
  --color-miss: #9fd8dc;
  --color-miss-bg: rgba(159, 216, 220, 0.16);
  --color-ship: #f3a15c;
  --color-ship-revealed: #4a7fa3;

  /* UI */
  --color-text: #e7eef4;
  --color-text-dim: #90a8bd;
  --color-bg: #0a121c;
  --color-surface: #11233a;
  --color-surface-light: #17304d;
  --color-accent: #46d6c8;
  --color-accent-hover: #35c0b2;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5.5L7 9.5L11 5.5' fill='none' stroke='%23e7eef4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Тёмный «чернильный» цвет текста поверх акцентных поверхностей —
   * не флипается между темами (акцент в обеих темах достаточно
   * светлый/насыщенный, тёмный текст на нём читается в любом случае). */
  --color-ink-strong: #081018;

  /* Typography: Chakra Petch — угловатые заголовки (в духе гранёных
   * кубов 3D-сцены), Manrope — текст интерфейса, JetBrains Mono —
   * координаты поля и цифровые показатели (HUD-ощущение) */
  --font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-display: 'Chakra Petch', 'Manrope', sans-serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-size-base: 24px;
  --font-size-sm: 21px;
  --font-size-lg: 27px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 12px;
  --spacing-md: 24px;
  --spacing-lg: 36px;
  --spacing-xl: 48px;

  /* Board */
  --cell-size: min(8vw, 48px);
  --grid-gap: 1px;
  --border-radius: 6px;

  /* Изометрия: доворот вокруг вертикальной оси кнопками ⟲/⟳ (Этап 2) */
  --iso-rotate: 0deg;
}

/* Светлая тема «Бело-лазурная»: по системе (если не выбрано явно тёмной)
 * или явным выбором в Настройках — см. applyThemePreference() в game.js */
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) {
    --color-ocean-deep: #d3e7ec;
    --color-ocean-mid: #dceef4;
    --color-ocean-light: #c3dbe3;
    --color-grid-border: #b9d3dd;
    --color-cell-hover: rgba(14, 154, 140, 0.14);
    --color-cell-selected: rgba(14, 154, 140, 0.24);
    --color-hit: #d02e3d;
    --color-hit-bg: rgba(208, 46, 61, 0.12);
    --color-miss: #2793a1;
    --color-miss-bg: rgba(39, 147, 161, 0.12);
    --color-ship: #d9781f;
    --color-ship-revealed: #3f7690;
    --color-text: #10222c;
    --color-text-dim: #52707c;
    --color-bg: #eef5f8;
    --color-surface: #ffffff;
    --color-surface-light: #e2f0f4;
    --color-accent: #0e9a8c;
    --color-accent-hover: #0c8579;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5.5L7 9.5L11 5.5' fill='none' stroke='%2310222c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
html[data-theme="light"] {
  --color-ocean-deep: #d3e7ec;
  --color-ocean-mid: #dceef4;
  --color-ocean-light: #c3dbe3;
  --color-grid-border: #b9d3dd;
  --color-cell-hover: rgba(14, 154, 140, 0.14);
  --color-cell-selected: rgba(14, 154, 140, 0.24);
  --color-hit: #d02e3d;
  --color-hit-bg: rgba(208, 46, 61, 0.12);
  --color-miss: #2793a1;
  --color-miss-bg: rgba(39, 147, 161, 0.12);
  --color-ship: #d9781f;
  --color-ship-revealed: #3f7690;
  --color-text: #10222c;
  --color-text-dim: #52707c;
  --color-bg: #eef5f8;
  --color-surface: #ffffff;
  --color-surface-light: #e2f0f4;
  --color-accent: #0e9a8c;
  --color-accent-hover: #0c8579;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5.5L7 9.5L11 5.5' fill='none' stroke='%2310222c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Формы/кнопки не наследуют шрифт по умолчанию — без этого весь UI
 * (кнопки, select, вкладки слоёв) рендерился мелким системным Arial
 * вместо Manrope (font-size у браузерных кнопок по умолчанию — около
 * 13px, вдвое меньше остального интерфейса), хотя выглядело это как
 * «мелкий/тонкий шрифт» на конкретных кнопках, а не как явный сбой. */
button, select, input, textarea {
  font-family: inherit;
  font-size: inherit;
}

html {
  font-size: var(--font-size-base);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  background: linear-gradient(180deg, var(--color-ocean-deep) 0%, var(--color-bg) 100%);
  color: var(--color-text);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   App Container
   -------------------------------------------------------------------------- */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--spacing-md) var(--spacing-lg);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--color-surface);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}

.header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header h1 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-text);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.logo-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.header-controls {
  display: flex;
  gap: var(--spacing-sm);
}

.lang-switch {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-ocean-light);
  border: 1px solid var(--color-grid-border);
  border-radius: var(--border-radius);
  color: var(--color-text-dim);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lang-switch:hover {
  background: var(--color-surface-light);
  color: var(--color-text);
}

.lang-switch.active {
  background: var(--color-accent);
  color: var(--color-ink-strong);
  border-color: var(--color-accent);
}

.header-btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-ocean-light);
  border: 1px solid var(--color-grid-border);
  border-radius: var(--border-radius);
  color: var(--color-text-dim);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.header-btn:hover {
  background: var(--color-surface-light);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Game Container (Two Boards)
   -------------------------------------------------------------------------- */
.game-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  flex: 1;
  align-items: start;
  justify-content: center;
}

/* Переключатель «Моё поле / Поле противника» — виден только там, где
 * .game-container уже переходит в один столбец (иначе оба поля и так
 * рядом, скрывать нечего). */
.mobile-board-toggle {
  display: none;
}

@media (max-width: 900px) {
  :root {
    --cell-size: min(8vw, 42px);
  }

  .game-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .mobile-board-toggle {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
  }

  .mobile-board-toggle-btn {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border: 2px solid var(--color-grid-border);
    border-radius: var(--border-radius);
    background: var(--color-ocean-mid);
    color: var(--color-text-dim);
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .mobile-board-toggle-btn.active {
    background: var(--color-accent);
    color: var(--color-ink-strong);
    border-color: var(--color-accent);
  }

  /* Показываем только активное поле — второе не просто ужато, а скрыто
   * целиком, чтобы не прокручивать между ними на телефоне. */
  .game-container[data-mobile-board="player"] .enemy-section {
    display: none;
  }
  .game-container[data-mobile-board="enemy"] .player-section {
    display: none;
  }

  .header {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .header h1 {
    font-size: var(--font-size-lg);
  }

  .board-section {
    padding: var(--spacing-sm);
  }

  .board-section h2 {
    font-size: var(--font-size-sm);
  }

  .ship-indicator {
    transform: scale(0.8);
  }

  .controls {
    padding: var(--spacing-sm);
    gap: var(--spacing-sm);
  }

  .controls button {
    min-width: 120px;
    padding: var(--spacing-xs) var(--spacing-md);
  }
}

/* --------------------------------------------------------------------------
   Board Section
   -------------------------------------------------------------------------- */
.board-section {
  background: var(--color-surface);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Скошенный угол — приборная табличка, отсылка к гранёным кубам 3D-сцены */
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.board-section h2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
  text-align: center;
}

/* Ship status inside board section */
.board-section .ship-status {
  width: 100%;
  max-width: 400px;
  margin-top: var(--spacing-md);
}

/* --------------------------------------------------------------------------
   Board Wrapper (with labels)
   -------------------------------------------------------------------------- */
.board-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Top labels row */
.board-labels-top {
  display: grid;
  grid-template-columns: calc(var(--cell-size) * 0.6) repeat(10, var(--cell-size));
  gap: var(--grid-gap);
  margin-bottom: var(--grid-gap);
}

.board-labels-top .board-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-dim);
  height: calc(var(--cell-size) * 0.6);
}

.board-labels-top .board-label.corner {
  /* Empty corner cell */
}

/* Board with left labels */
.board-with-rows {
  display: flex;
  gap: var(--grid-gap);
}

/* Left labels column */
.board-labels-left {
  display: grid;
  grid-template-rows: repeat(10, var(--cell-size));
  gap: var(--grid-gap);
}

.board-labels-left .board-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-dim);
  width: calc(var(--cell-size) * 0.6);
}

/* --------------------------------------------------------------------------
   Game Board Grid (10×10)
   -------------------------------------------------------------------------- */
.board {
  display: grid;
  grid-template-columns: repeat(10, var(--cell-size));
  grid-template-rows: repeat(10, var(--cell-size));
  gap: var(--grid-gap);
  background: var(--color-grid-border);
  padding: var(--grid-gap);
  border-radius: var(--border-radius);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
  /* Тач сам ведёт превью/прицел (см. setupBoardTouch в game.js) — без
   * этого iOS Safari успевает начать прокрутку/зум раньше preventDefault. */
  touch-action: none;
}

/* --------------------------------------------------------------------------
   Board Cell
   -------------------------------------------------------------------------- */
.cell {
  background: var(--color-ocean-mid);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
  position: relative;
}

/* Наведение реагирует только на клетки, доступные для действия —
 * пустые клетки при расстановке (JS сам красит .preview/.invalid) и
 * необстрелянные клетки чужого поля в бою. Без transform: scale —
 * масштабирование на :hover может мерцать даже в пределах одной
 * клетки (курсор у края клетки то входит, то выходит из увеличенной
 * области), из-за этого корабли «дрожали» при расстановке. */
.board:not(.locked) .cell:not(.ship):not(.hit):not(.miss):not(.sunk):hover {
  background: var(--color-cell-hover);
}

.board.locked .cell {
  cursor: default;
}

/* Cell states */
.cell.hit {
  background: var(--color-hit-bg);
}

.cell.hit::after {
  content: '×';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell-size) * 0.7);
  font-weight: bold;
  color: var(--color-hit);
}

.cell.miss {
  background: var(--color-miss-bg);
}

.cell.miss::after {
  content: '•';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell-size) * 0.6);
  color: var(--color-miss);
}

/* Ship cells (on player board) */
.cell.ship {
  background: var(--color-ship);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.cell.ship.hit {
  background: linear-gradient(135deg, var(--color-ship) 0%, var(--color-hit) 100%);
}

/* Sunk ship cell */
.cell.sunk {
  background: var(--color-miss-bg);
  opacity: 0.6;
}

.cell.sunk::after {
  content: '☠';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell-size) * 0.5);
  color: var(--color-text);
}

/* Revealed submarine */
.cell.revealed {
  background: var(--color-ship-revealed);
}

/* Cell with ship preview during placement */
.cell.preview {
  background: var(--color-cell-selected);
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.cell.preview.invalid {
  background: rgba(230, 57, 70, 0.3);
  box-shadow: inset 0 0 0 2px var(--color-hit);
}

/* --------------------------------------------------------------------------
   Footer Panel (wraps controls)
   -------------------------------------------------------------------------- */
footer.footer-panel {
  position: relative;
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-surface);
  border-radius: var(--border-radius);
  margin-top: var(--spacing-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
}

footer.footer-panel .controls {
  margin-top: 0;
  padding: 0;
  gap: var(--spacing-sm);
  display: flex;
  align-items: center;
}

footer.footer-panel .controls button {
  flex: none;
  white-space: nowrap;
  padding: var(--spacing-sm) var(--spacing-md);
}

footer.footer-panel .controls button.hidden {
  display: none;
}

footer.footer-panel .controls-center {
  gap: var(--spacing-md);
}

/* Control Panel */
.controls {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.controls button {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--color-ocean-light);
  border: 1px solid var(--color-grid-border);
  border-radius: var(--border-radius);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
}

.controls button:hover {
  background: var(--color-surface-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.controls button:active {
  transform: translateY(0);
}

.controls button.primary {
  background: var(--color-accent);
  color: var(--color-ink-strong);
  border-color: var(--color-accent);
}

.controls button.primary:hover {
  background: var(--color-accent-hover);
}

/* --------------------------------------------------------------------------
   Responsive Adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  :root {
    --cell-size: min(9vw, 36px);
  }

  #app {
    padding: var(--spacing-xs);
  }
  
  .header {
    padding: var(--spacing-sm);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }
  
  .header-title {
    order: 1;
    width: 100%;
    justify-content: center;
  }

  .header h1 {
    font-size: var(--font-size-base);
  }

  .header-controls {
    order: 2;
    margin-left: auto;
  }
  
  .board-section {
    padding: var(--spacing-md);
  }
  
  .controls {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .controls button {
    min-width: 120px;
    padding: var(--spacing-xs) var(--spacing-md);
  }

  /* Узкий экран: подпись + select + кнопка в ряд не помещаются —
   * "Противник: человек" при --font-size-sm (21px) шире самого экрана.
   * Складываем в столбец на всю ширину вместо обрезки текста. */
  .mode-select-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .mode-select-controls #mode-select-label {
    white-space: normal;
    text-align: center;
  }

  .mode-select {
    width: 100%;
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */
.hidden {
  display: none !important;
}

.text-center {
  text-align: center;
}

/* Mode Select Controls */
.mode-select-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-xs);
  /* flex-wrap: wrap (не nowrap+overflow:hidden) — на узких экранах
   * длинный вариант "Противник: человек" иначе обрезался серединой
   * слова вместо переноса строки. */
  flex-wrap: wrap;
}

.mode-select-controls #mode-select-label {
  font-weight: 500;
  white-space: nowrap;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.mode-select {
  background: var(--color-ocean-mid);
  color: var(--color-text);
  border: 2px solid var(--color-accent);
  padding: var(--spacing-xs) 34px var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  cursor: pointer;
  min-width: 180px;
  flex: 1 1 auto;
  max-width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}

.mode-select option {
  background: var(--color-ocean-mid);
  color: var(--color-text);
}

.mode-select option:disabled {
  color: var(--color-text-dim);
}

.mode-btn {
  flex: none;
  min-width: 0;
  white-space: nowrap;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.mode-btn.primary, .mode-btn.secondary {
  background: var(--color-accent);
  color: var(--color-ink-strong);
  border-color: var(--color-accent);
  flex: none;
  min-width: 0;
  white-space: nowrap;
}

.mode-btn.primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.mode-btn.secondary {
  background: var(--color-ocean-light);
  color: var(--color-text);
  border-color: var(--color-grid-border);
}

.mode-btn.secondary:hover {
  background: var(--color-surface-light);
}

.mode-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

.mode-btn:disabled:hover {
  background: var(--color-ocean-light);
  border-color: var(--color-grid-border);
}

/* Placement Controls */
.placement-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
}

.placement-controls button {
  flex: none;
  min-width: 0;
  white-space: nowrap;
}

#placement-status {
  color: var(--color-text-dim);
  font-size: 0.85em;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

#placement-status svg {
  width: 36px;
  height: 36px;
  vertical-align: middle;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.modal.active {
  display: flex;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
}

.modal-header h2 {
  font-family: var(--font-family-display);
  font-weight: 600;
  margin: 0;
  font-size: 1.2em;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: 0;
  width: 30px;
  height: 30px;
}

.modal-close:hover {
  color: var(--color-text);
}

.modal-body {
  color: var(--color-text-secondary);
}

.modal-body h3 {
  color: var(--color-text);
  margin: var(--spacing-sm) 0;
}

.modal-body p {
  margin: var(--spacing-sm) 0;
}

/* Sinking animation */
@keyframes sinking {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(0.9); opacity: 0.6; }
}

.sinking {
  animation: sinking 0.6s ease-out;
}

/* Ship status indicator */
.ship-status {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.ship-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ship-indicator .icon {
  width: 36px;
  height: 36px;
  border: 2px solid var(--color-accent);
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-ocean-deep);
}

.ship-indicator .icon svg {
  width: 28px;
  height: 28px;
  color: inherit;
}

/* Placed ship */
.ship-indicator.placed {
  opacity: 1;
}

/* Unplaced ship */
.ship-indicator.unplaced {
  opacity: 0.3;
}

/* Sunk ship */
.ship-indicator.sunk .icon {
  border-color: var(--color-miss);
  opacity: 0.5;
}

.ship-indicator.sunk .icon svg {
  color: inherit;
  opacity: 1;
}

.ship-indicator.sunk .icon::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}

/* No checkmark on placed ships */
.ship-indicator.placed .icon::after {
  content: none;
}

.ship-indicator .label {
  display: none;
}

.ship-indicator.placed .icon {
  background: var(--color-ship);
  border-color: var(--color-ship);
  color: #1a3a5c;  /* dark silhouette on orange background */
  opacity: 1;
}

/* Unplaced ship — dimmed */
.ship-indicator.unplaced .icon {
  background: var(--color-ocean-mid);
  border-color: var(--color-grid-border);
  color: var(--color-ink-strong);
  opacity: 0.4;
}

/* Sunk ship — muted with checkmark (overrides .placed) */
.ship-indicator.sunk .icon {
  background: var(--color-miss);
  border-color: var(--color-miss);
  color: #1a3a5c;  /* dark silhouette on miss (red) background */
  opacity: 0.5;
}

.ship-indicator.sunk .icon::after {
  content: '✓';
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: var(--color-text);
}

/* Placed ships should NOT show checkmark */
.ship-indicator.placed .icon::after {
  content: none;
}

.ship-indicator .label {
  font-size: 0.7em;
  color: var(--color-text-secondary);
}

/* Fully sunk notification */
.sunk-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-surface);
  color: var(--color-hit);
  padding: 18px 34px;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-hit);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6);
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: 1.15em;
  letter-spacing: 0.01em;
  z-index: 1001;
  animation: fadeInOut 2s ease-in-out forwards;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

/* Settings modal controls */
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.setting-toggle {
  background: var(--color-accent);
  color: var(--color-text);
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  min-width: 60px;
}

.setting-toggle:hover {
  opacity: 0.8;
}

.setting-toggle.off {
  background: var(--color-miss);
  opacity: 0.7;
}

.setting-select {
  background: var(--color-water, var(--color-ocean-mid));
  color: var(--color-text);
  border: 2px solid var(--color-accent);
  padding: 8px 34px 8px 12px;
  border-radius: 4px;
  font-size: 1em;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}

.setting-select option {
  background: var(--color-water, var(--color-ocean-mid));
  color: var(--color-text);
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

/* Modal styles */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.modal.active {
  display: flex;
}

.modal-content {
  background: var(--color-bg);
  border: 2px solid var(--color-accent);
  border-radius: 12px;
  padding: 0;
  min-width: 300px;
  max-width: 90%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: var(--color-accent);
  color: var(--color-bg);
  border-radius: 10px 10px 0 0;
}

.modal-close {
  background: none;
  border: none;
  color: var(--color-bg);
  font-size: 1.5em;
  cursor: pointer;
}

.modal-close:hover {
  opacity: 0.7;
}

.modal-body {
  padding: 20px;
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
}

.btn-toggle {
  padding: 8px 16px;
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.btn-toggle:hover {
  opacity: 0.8;
}

#difficulty-select {
  padding: 8px 12px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-accent);
  border-radius: 6px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.legend-item .cell {
  width: 36px;
  height: 36px;
  border-radius: 4px;
}

/* ============================================================
   Formation Selection UI
   ============================================================ */
/* Раньше .formation-select лежал внутри .controls-left обычным флекс-
 * элементом — 4 карточки строя делали левую группу футера вдвое шире
 * центральной, и весь футер «распирало» пустым зазором посередине.
 * Всплывающая панель над футером (position:absolute) держит футер
 * его обычной компактной ширины независимо от того, открыт выбор
 * строя или нет — см. position:relative на footer.footer-panel. */
.formation-select {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-grid-border);
  border-radius: var(--border-radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  z-index: 60;
}

.formation-grid {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.formation-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-grid-border);
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
  min-width: 100px;
  max-width: 128px;
  flex: 1;
  color: var(--color-text);
}

/* Значок «i» — историческая справка строя (Этап 3). Не button (нельзя
 * вкладывать button в button) — span с role="button", клик сам
 * останавливает всплытие, чтобы не выбрать строй по ошибке. */
.formation-info-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.formation-info-toggle:hover,
.formation-info-toggle:focus-visible {
  background: var(--color-accent);
  color: var(--color-ink-strong);
  outline: none;
}

.formation-history-popover {
  position: fixed;
  z-index: 1700;
  width: 460px;
  max-width: calc(100vw - 24px);
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--border-radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  padding: 14px 32px 14px 14px;
  display: none;
}
.formation-history-popover.visible { display: block; }
.formation-history-popover p {
  margin: 0;
  font-size: 0.85em;
  line-height: 1.45;
  color: var(--color-text);
}
.formation-history-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--color-text-dim);
  font-size: 1.1em;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.formation-history-close:hover { color: var(--color-text); }

.formation-btn:hover {
  background: var(--color-surface-light);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.formation-icon {
  width: 68px;
  height: 68px;
  background: var(--color-ocean-deep);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.formation-icon svg {
  width: 58px;
  height: 58px;
}

.formation-info {
  text-align: center;
}

.formation-name {
  font-size: 0.8em;
  font-weight: bold;
  color: var(--color-text);
  white-space: pre-line;
  text-align: center;
  line-height: 1.2;
}

.formation-desc {
  font-size: 0.6em;
  color: var(--color-text-secondary);
  margin-top: 2px;
}



/* ==========================================================================
   Layer Tabs & Multi-Layer Support
   ========================================================================== */

/* Layer Tabs */
/* Слой и действие/атака — теперь две отдельные строки (см. index.html):
 * полные подписи слоёв («Поверхность (Z1)») уже сами по себе занимают
 * почти всю ширину доски, втиснуть рядом ещё и кнопки без переноса
 * было физически некуда — а «плавающий» перенос двигал доску то выше,
 * то ниже между кадрами. Высота каждой строки теперь постоянна. */
.controls-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  align-items: center;
  margin-bottom: 8px;
}

/* Кнопки атаки/действия компактнее общего .mode-btn — не только чтобы
 * не переноситься на 2 строки внутри своего ряда на узких экранах,
 * но и для единого масштаба с .layer-tab в соседней строке. */
.controls-row .mode-btn {
  font-size: 17px;
  padding: 8px 14px;
}

.layer-tabs {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.layer-tab {
  padding: 6px 14px;
  background: var(--color-ocean-mid);
  border: 2px solid var(--color-grid-border);
  border-radius: var(--border-radius);
  color: var(--color-text-dim);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.layer-tab:hover {
  background: var(--color-surface-light);
  color: var(--color-text);
}

.layer-tab.active {
  background: var(--color-accent);
  color: var(--color-ink-strong);
  border-color: var(--color-accent);
  font-weight: 600;
}

.layer-tab[data-layer="depth"].active {
  background: var(--color-ocean-deep);
  color: var(--color-text);
  border-color: var(--color-accent);
}

/* Attack Mode Controls — высота зарезервирована постоянно (min-height),
 * скрытое состояние — через visibility, а не display:none, чтобы поле
 * противника не «прыгало» при переходе расстановка → бой. Зеркальный
 * пустой блок стоит на месте игрока (.attack-mode-controls-spacer),
 * чтобы обе колонки всегда были на одной высоте. */
.attack-mode-controls {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 44px;
  align-content: center;
}

.attack-mode-controls.is-collapsed {
  visibility: hidden;
  pointer-events: none;
}

/* Action Mode Controls (BP-7) — нырок/ремонт на своей доске, тот же
 * приём с min-height/visibility, что и у attack-mode-controls. */
.action-mode-controls {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 44px;
  align-content: center;
}

.action-mode-controls.is-collapsed {
  visibility: hidden;
  pointer-events: none;
}

/* Depth layer — darker cells */
.board.layer-depth .cell {
  background: var(--color-ocean-deep);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
}

.board.layer-depth .cell.ship {
  background: #1a3352;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* .board.layer-depth .cell (выше) специфичнее .cell.preview/.hit/.miss/.sunk
 * и полностью перекрывала их фон/обводку — на глубине превью корабля при
 * расстановке (и подсветка hit/miss/sunk) были не видны. Тот же приём,
 * что уже применён для .cell.ship выше. */
.board.layer-depth .cell.preview {
  background: var(--color-cell-selected);
  box-shadow: inset 0 0 0 2px var(--color-accent);
}
.board.layer-depth .cell.preview.invalid {
  background: rgba(230, 57, 70, 0.3);
  box-shadow: inset 0 0 0 2px var(--color-hit);
}
.board.layer-depth .cell.hit {
  background: var(--color-hit-bg);
}
.board.layer-depth .cell.sunk {
  background: var(--color-miss-bg);
}
.board.layer-depth .cell.miss {
  background: var(--color-miss-bg);
}

/* Depth bomb cell visual */
.cell.depthbomb-hit {
  background: var(--color-hit-bg);
}
.cell.depthbomb-hit::after {
  content: '⬟';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell-size) * 0.5);
  font-weight: bold;
  color: #ff9f1c;
}

.cell.depthbomb-miss {
  background: rgba(168, 218, 220, 0.15);
}
.cell.depthbomb-miss::after {
  content: '⬠';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell-size) * 0.5);
  color: #457b9d;
}

/* Torpedo cell visual */
.cell.torpedo-hit {
  background: var(--color-hit-bg);
}
.cell.torpedo-hit::after {
  content: '⬢';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell-size) * 0.5);
  font-weight: bold;
  color: #e63946;
}

.cell.torpedo-miss {
  background: var(--color-miss-bg);
}
.cell.torpedo-miss::after {
  content: '—';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell-size) * 0.4);
  color: var(--color-miss);
}

/* Torpedo column preview */
.cell.torpedo-col-preview {
  background: rgba(255, 159, 28, 0.25) !important;
  box-shadow: inset 0 0 0 2px #ff9f1c;
}

/* Torpedo/depthbomb cursor modes */
.board.torpedo-mode .cell { cursor: crosshair; }

/* Mode select active button */
.mode-btn.active-mode {
  background: var(--color-accent) !important;
  color: var(--color-ink-strong) !important;
  border-color: var(--color-accent) !important;
  font-weight: 700;
}

/* Placement layer indicator */
#placement-layer-indicator {
  font-size: 0.8em;
  color: var(--color-accent);
  font-weight: 600;
  margin-left: 8px;
  white-space: nowrap;
}

/* Toggle group (Basic/Hardcore mode switcher) */
.toggle-group {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 3px;
}

.toggle-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.6);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.85em;
  cursor: pointer;
  transition: all 0.2s;
}

.toggle-btn:hover {
  background: rgba(255,255,255,0.1);
}

.toggle-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink-strong);
  font-weight: 700;
}

/* Hint cell blink animation */
.cell.hint {
  animation: hint-blink 0.8s ease-in-out 3;
}

@keyframes hint-blink {
  0%, 100% { background: var(--color-water); }
  50% { background: rgba(255, 200, 50, 0.6); }
}

/* --------------------------------------------------------------------------
   Isometric view (прототип): стопка слоёв на CSS 3D transforms
   -------------------------------------------------------------------------- */
/* Переключатель отображения 2D/3D — верхнего уровня, над вкладками
 * слоёв (Этап 3): выбор проекции отделён от выбора активного слоя. */
.view-mode-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  justify-content: center;
}
.view-mode-btn {
  padding: 5px 18px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 2px solid var(--color-grid-border);
  border-radius: var(--border-radius);
  background: var(--color-ocean-mid);
  color: var(--color-text-dim);
  cursor: pointer;
  transition: all 0.2s ease;
}
.view-mode-btn:hover {
  background: var(--color-surface-light);
  color: var(--color-text);
}
.view-mode-btn.active {
  background: var(--color-accent);
  color: var(--color-ink-strong);
  border-color: var(--color-accent);
}

/* Поворот 3D-сцены вокруг вертикальной оси (Этап 2) — видны только
 * пока активен изометрический вид */
.iso-rotate-controls {
  display: none;
  gap: 4px;
  margin-left: 4px;
}
.iso-rotate-controls.visible {
  display: inline-flex;
}
.iso-rotate-btn {
  /* Тот же border-width/вертикальный padding, что у .view-mode-btn —
   * иначе кнопки поворота выглядят заметно мельче соседних 2D/3D. */
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-grid-border);
  border-radius: var(--border-radius);
  background: var(--color-ocean-mid);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.iso-rotate-btn:hover { filter: brightness(1.2); }

/* Иконка поворота (⟲/⟳, BP-«замечания») — SVG вместо текстового
 * глифа: тот рендерился системным шрифтом мимо Manrope, получался
 * тонким и не по центру. currentColor подхватывает цвет кнопки. */
.icon-rotate {
  display: block;
  flex: none;
}
.icon-rotate-ccw {
  transform: scaleX(-1);
}

/* Регистрируем --iso-rotate как угол, чтобы transform на .iso-layer
 * плавно анимировал доворот, а не «прыгал» между значениями —
 * обычные custom properties не интерполируются. */
@property --iso-rotate {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

/* Сцена: контейнер доски превращается в перспективную стопку */
.board.iso-scene {
  display: block;
  background: transparent;
  box-shadow: none;
  padding: 0;
  perspective: 1800px;
  width: calc(var(--cell-size) * 10 + var(--grid-gap) * 11);
  margin: 0 auto;
  height: calc(var(--cell-size) * 10 + var(--grid-gap) * 11 + 100px);
  position: relative;
}

.iso-layer {
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(var(--cell-size) * 10 + var(--grid-gap) * 11);
  height: calc(var(--cell-size) * 10 + var(--grid-gap) * 11);
  transform-style: preserve-3d;
  transition: opacity 0.3s ease, transform 0.3s ease;
  border-radius: var(--border-radius);
}

/* Наклон оси: rotateX кладёт сетку «на стол», rotateZ поворачивает ромбом.
   Масштаб 0.87 (×1.5 к прежним 0.58) — крупное поле по просьбе игрока.
   --iso-rotate — доворот вокруг вертикальной оси кнопками ⟲/⟳ (Этап 2),
   общий для обоих полей, по умолчанию 0deg (см. :root). */
.iso-layer.iso-surface {
  transform: rotateX(55deg) rotateZ(calc(45deg + var(--iso-rotate, 0deg))) translateZ(64px) scale(0.87);
  background: rgba(78, 205, 196, 0.10);
  outline: 2px solid rgba(78, 205, 196, 0.55);
}
.iso-layer.iso-depth {
  transform: rotateX(55deg) rotateZ(calc(45deg + var(--iso-rotate, 0deg))) translateZ(-64px) scale(0.87);
  background: rgba(10, 22, 40, 0.85);
  outline: 2px solid rgba(69, 123, 157, 0.6);
}

/* Контраст слоёв: поверхность — светлая «морская гладь»,
   глубина — тёмная толща воды */
.iso-layer.iso-surface .cell:not(.ship):not(.hit):not(.sunk) {
  background: var(--color-ocean-light);
}
.iso-layer.iso-depth .cell:not(.ship):not(.hit):not(.sunk) {
  background: #0d2038;
}

/* Неактивный слой — призрак: полупрозрачен и не ловит клики */
.iso-layer:not(.active) {
  opacity: 0.35;
  pointer-events: none;
}
.iso-layer.active {
  opacity: 1;
}

/* --- Кубы: занятые клетки приподняты, грани дорисованы элементами .face --- */
.iso-layer .cell {
  transform-style: preserve-3d;
}
.iso-layer .cell.ship,
.iso-layer .cell.hit,
.iso-layer .cell.sunk {
  transform: translateZ(16px);
}
.iso-layer .face {
  position: absolute;
  pointer-events: none;
}
.iso-layer .face-s {
  left: 0; top: 100%;
  width: 100%; height: 16px;
  transform-origin: center top;
  transform: rotateX(-90deg);
}
.iso-layer .face-e {
  left: 100%; top: 0;
  width: 16px; height: 100%;
  transform-origin: left center;
  transform: rotateY(90deg);
}
/* Обратные грани (видны только при повороте 3D-сцены, Этап 2/доп. фикс) */
.iso-layer .face-n {
  left: 0; bottom: 100%;
  width: 100%; height: 16px;
  transform-origin: center bottom;
  transform: rotateX(90deg);
}
.iso-layer .face-w {
  right: 100%; top: 0;
  width: 16px; height: 100%;
  transform-origin: right center;
  transform: rotateY(-90deg);
}
/* Цвета граней: затемнённые оттенки верхней грани */
.iso-layer .cell.ship .face-s { background: #b97c34; }
.iso-layer .cell.ship .face-e { background: #925f24; }
.iso-layer .cell.ship .face-n { background: #8c5f28; }
.iso-layer .cell.ship .face-w { background: #a66f2e; }
.iso-layer .cell.hit .face-s,
.iso-layer .cell.hit.ship .face-s { background: #a32833; }
.iso-layer .cell.hit .face-e,
.iso-layer .cell.hit.ship .face-e { background: #7d1f28; }
.iso-layer .cell.hit .face-n,
.iso-layer .cell.hit.ship .face-n { background: #6b1a22; }
.iso-layer .cell.hit .face-w,
.iso-layer .cell.hit.ship .face-w { background: #8f2530; }
.iso-layer .cell.sunk .face-s { background: #3a4753; }
.iso-layer .cell.sunk .face-e { background: #2b343d; }
.iso-layer .cell.sunk .face-n { background: #232a31; }
.iso-layer .cell.sunk .face-w { background: #333e47; }

/* Iso-mode: координатные лейблы 2D-сетки не согласуются с наклонной
   проекцией — прячем */
.board-wrapper.iso-mode .board-labels-top,
.board-wrapper.iso-mode .board-labels-left {
  display: none;
}
.board-wrapper.iso-mode {
  overflow: visible;
}

/* Sprint 3: статистика и диалог продолжения */
.stats-line {
  font-family: var(--font-family-mono);
  color: var(--color-text-dim);
  font-size: 0.85em;
}
.continue-actions {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  justify-content: center;
}
.continue-actions button {
  padding: 10px 18px;
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95em;
}
.continue-actions .primary {
  background: var(--color-accent);
  color: #10233d;
}
.continue-actions .primary:hover { background: var(--color-accent-hover); }
.continue-actions .secondary {
  background: var(--color-ocean-mid);
  color: var(--color-text);
}
.continue-actions .secondary:hover { filter: brightness(1.2); }

/* T-33: индикация хода ИИ */
.board-section.ai-turn .board {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.board-section.ai-turn .board .cell {
  cursor: wait;
}

/* Игровые сообщения (тост): элемент был потерян в вёрстке — showMessage
   писал в никуда; теперь сообщения видимы */
.game-message {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-accent);
  border-radius: var(--border-radius);
  padding: 10px 24px;
  font-family: var(--font-family-display);
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 1000;
}
.game-message.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------------------------------
   Tutorial (T-34..T-44): оверлей, карточка, подсветка, стрелка
   -------------------------------------------------------------------------- */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 10, 20, 0.72);
  z-index: 1500;
  display: none;
}
.tutorial-overlay.active { display: block; }

.tutorial-card {
  /* left/top выставляет JS (positionCard, tutorial.js) — карточка
   * держится в зазоре между полями игрока и противника, а не прижата
   * к низу экрана; transform центрирует её на этой точке. */
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 32px));
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--border-radius);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6);
  padding: 16px 20px;
  z-index: 1600;
  display: none;
}
.tutorial-card.active { display: block; }

.tutorial-progress {
  font-family: var(--font-family-mono);
  font-size: 0.75em;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 4px;
}
.tutorial-card h3 {
  font-family: var(--font-family-display);
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--color-accent);
}
.tutorial-card p {
  margin: 0 0 14px;
  line-height: 1.45;
}
.tutorial-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.tutorial-buttons button {
  padding: 8px 16px;
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
  font-weight: 600;
}
.tutorial-buttons .primary {
  background: var(--color-accent);
  color: #10233d;
}
.tutorial-buttons .primary:hover { background: var(--color-accent-hover); }
.tutorial-buttons .secondary {
  background: var(--color-ocean-mid);
  color: var(--color-text);
}
.tutorial-buttons .secondary:hover { filter: brightness(1.2); }
.tutorial-buttons button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Подсвеченный элемент поднимается над затемнением */
.tutorial-highlight {
  position: relative;
  z-index: 1550;
  box-shadow: 0 0 0 3px var(--color-accent), 0 0 24px rgba(78, 205, 196, 0.55);
  border-radius: var(--border-radius);
}

.tutorial-arrow {
  position: fixed;
  z-index: 1600;
  color: var(--color-accent);
  font-size: 22px;
  display: none;
  animation: tutorial-bounce 1s ease-in-out infinite;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
@keyframes tutorial-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* --------------------------------------------------------------------------
   Rotate FAB — плавающая иконка поворота корабля при расстановке
   -------------------------------------------------------------------------- */
.rotate-fab {
  position: fixed;
  z-index: 900;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  background: var(--color-surface);
  color: var(--color-accent);
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
  transition: opacity 0.12s ease, transform 0.12s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.rotate-fab.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.rotate-fab:hover {
  background: var(--color-accent);
  color: var(--color-ink-strong);
}

/* --------------------------------------------------------------------------
   Декоративное дно на экране выбора противника (Этап 3) — чисто
   визуально, не завязано на .locked: должно работать даже на «запертой»
   до боя доске противника.
   -------------------------------------------------------------------------- */
.cell[data-decor]::after {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75em;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.cell[data-decor]:hover::after { opacity: 0.85; }
.cell[data-decor="weed"]::after { content: '🌿'; }
.cell[data-decor="treasure"]::after { content: '💰'; }
.cell[data-decor="wreck"]::after { content: '⚓'; }
.cell[data-decor="shell"]::after { content: '🐚'; }