:root {
  /* Naval-tactical palette: ocean blue base with warm amber signature accent
     (replaces the old harsh red). Matches combat transition + campaign title. */
  --primary-color: #1e88e5;
  --primary-light: #64b5f6;
  --primary-dark: #1565c0;
  --secondary-color: #0d3b66;

  --accent-color: #ffa000;        /* amber — signature */
  --accent-light: #ffc107;
  --accent-dark: #e65100;

  --background-dark: #0b0f17;
  --background-light: #1a2332;
  --surface-color: #131a26;       /* translucent panels */

  --text-color: #f5f7fa;
  --text-secondary: #90a4b8;
  --grid-color: rgba(255, 255, 255, 0.12);
  --success-color: #00c853;
  --warning-color: #ffc107;
  --danger-color: #ef5350;

  /* Layer-specific colors */
  --space-color: #1a237e;
  --space-accent: #5c6bc0;
  --sky-color: #0288d1;
  --sky-accent: #4fc3f7;
  --sea-color: #0097a7;
  --sea-accent: #4dd0e1;
  --sub-color: #00695c;
  --sub-accent: #26a69a;

  --cell-size: 42px;
  --board-size: 4;
  --border-radius: 8px;
  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  --panel-border: 1px solid rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: 'Orbitron', sans-serif;
  background-color: var(--background-dark);
  color: var(--text-color);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow-x: hidden;
  background-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.93)),
    url('assets/splash/title.webp'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23121212"/><path d="M0 50 L100 50" stroke="%23222" stroke-width="0.5"/><path d="M50 0 L50 100" stroke="%23222" stroke-width="0.5"/></svg>');
  background-size: cover, cover, 50px 50px;
  background-position: top, center, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
  background-attachment: scroll, fixed, scroll;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Menu Styles */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.85)),
    url('assets/splash/title.webp') center/cover no-repeat,
    rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.menu-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 2.8rem;
  background: linear-gradient(145deg, rgba(45, 45, 45, 0.10), rgba(18, 18, 18, 0.10));
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 176, 64, 0.25);
  position: relative;
}

/* Subtle corner accent brackets — naval/HUD detail */
.menu-content::before,
.menu-content::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--accent-color);
  opacity: 0.75;
}
.menu-content::before {
  top: -1px; left: -1px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 14px;
}
.menu-content::after {
  bottom: -1px; right: -1px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 14px;
}

.menu-content h1 {
  font-size: 2.75rem;
  font-weight: 700;
  margin: 0 0 0.3rem;
  letter-spacing: 0.28em;
  padding-right: 0.28em; /* compensate trailing letter-spacing */
  background: linear-gradient(180deg, #fff4d6 0%, #ffc107 55%, #ff8f00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 12px rgba(255, 160, 0, 0.35));
  line-height: 1.1;
}

/* Tagline beneath the title (injected via CSS, no HTML change needed) */
.menu-content h1::after {
  content: "Four-Layer Naval Combat";
  display: block;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  color: var(--text-secondary);
  background: none;
  -webkit-text-fill-color: var(--text-secondary);
  filter: none;
  margin-top: 0.65rem;
  text-transform: uppercase;
}

/* Accent divider between title and buttons */
.menu-content h1 {
  padding-bottom: 1.2rem;
  margin-bottom: 1.3rem;
  border-bottom: 1px solid rgba(255, 176, 64, 0.2);
}

.menu-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.menu-notice {
  max-width: 320px;
  margin: 0 0 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.78em;
  line-height: 1.4;
  color: #e0e0e0;
  background: rgba(255, 196, 0, 0.08);
  border: 1px solid rgba(255, 196, 0, 0.4);
  border-radius: var(--border-radius);
  text-align: left;
}

.menu-notice strong {
  color: #ffc400;
}

.menu-button {
  width: 240px;
  padding: 13px 18px;
  font-size: 1.05em;
  font-weight: 500;
  letter-spacing: 0.05em;
  font-family: 'Orbitron', sans-serif;
  background: linear-gradient(180deg, #2b5f97 0%, #1e4a7a 50%, #143a63 100%);
  border: 1px solid rgba(100, 181, 246, 0.35);
  border-radius: 10px;
  color: #eef4fb;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.25s ease;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.menu-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
  box-shadow:
    0 4px 14px rgba(30, 136, 229, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.menu-button:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

.hidden {
  display: none !important;
}

.menu-input {
  padding: 10px;
  font-size: 1.1em;
  width: 220px;
  margin-bottom: 10px;
  border-radius: 8px;
  border: 1px solid var(--primary-color);
  background: rgba(0, 0, 0, 0.3);
  color: white;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
}

.menu-input:focus {
  outline: none;
  box-shadow: 0 0 10px var(--primary-light);
}

#hostGameDisplay h2 {
  font-size: 2rem;
  color: var(--accent-color);
  margin: 10px 0;
  letter-spacing: 2px;
  user-select: all;
  cursor: pointer;
}

#hostGameDisplay p {
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

/* Game Header */
.game-header {
  width: 100%;
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--background-light);
  border-bottom: 1px solid var(--primary-color);
  box-shadow: var(--box-shadow);
  position: sticky;
  top: 0;
  z-index: 60;
}

.timer {
  font-size: 1em;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--border-radius);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.sound-control {
  margin-right: 0.5rem;
}

.icon-button {
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1.3rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.icon-button:hover {
  transform: scale(1.1);
}

/* Score Display */
.win-counter {
  background: linear-gradient(145deg, var(--background-light), var(--background-dark));
  padding: 0.4rem 0.8rem;
  border-radius: var(--border-radius);
  margin: 0.4rem 0;
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  max-width: 100%;
  box-shadow: var(--box-shadow);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.player-score {
  text-align: center;
  padding: 0.3rem 0.6rem;
  border-radius: var(--border-radius);
  background: rgba(0, 0, 0, 0.2);
  flex: 0 1 auto;
  min-width: 160px;
  transition: all 0.3s ease;
}

.player-score.active {
  box-shadow: 0 0 15px var(--primary-light);
  background: rgba(30, 136, 229, 0.15);
}

.player-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
  justify-content: center;
}

.player-icon {
  font-size: 1.1rem;
  margin-bottom: 0;
}

.player-name {
  font-weight: bold;
  color: var(--text-color);
  font-size: 0.85em;
}

.score-container {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--border-radius);
  padding: 0.3rem 0.5rem;
}

.win-label {
  font-size: 0.85em;
  margin-bottom: 2px;
  color: var(--primary-light);
}

.stats-row {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.75em;
  color: var(--text-secondary);
}

/* Game Container */
.game-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  padding: 0.6rem;
  margin: 0.5rem 0;
  width: 100%;
  max-width: 1200px;
}

.layer-container {
  background: linear-gradient(145deg, var(--background-light), var(--background-dark));
  padding: 0.8rem;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  flex: 0 0 auto;
  width: fit-content;
}

.layer-container h2 {
  text-align: center;
  margin-bottom: 0.7rem;
  font-size: 1.1rem;
  color: var(--primary-light);
  text-shadow: 0 0 5px rgba(106, 183, 255, 0.5);
}

.layer-container.active {
  box-shadow: 0 0 20px var(--primary-light);
  border: 1px solid var(--primary-color);
}

.boards-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.board-section {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.layer-label {
  font-size: 0.8rem;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  margin-bottom: 0.3rem;
  text-align: center;
  letter-spacing: 0.05em;
  z-index: 1;
}

.board-section:nth-child(1) .layer-label {
  background: var(--space-color);
  color: white;
}

.board-section:nth-child(2) .layer-label {
  background: var(--sky-color);
  color: white;
}

.board-section:nth-child(3) .layer-label {
  background: var(--sea-color);
  color: white;
}

.board-section:nth-child(4) .layer-label {
  background: var(--sub-color);
  color: white;
}

.board {
  display: grid;
  grid-template-columns: repeat(var(--board-size), var(--cell-size));
  gap: 3px;
  padding: 8px;
  border-radius: var(--border-radius);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
  position: relative;
  z-index: 2;
  width: calc(var(--cell-size) * var(--board-size) + 16px + 9px); /* account for padding and gaps */
}

/* Layer-specific board styles — painted zone image tinted by a translucent
   gradient for grid contrast. Fallback color is set via background-color so
   the image can fail to load without blowing out the composition. */
.board[data-layer="Space"] {
  background-color: #16213e;
  background-image:
    linear-gradient(to bottom, rgba(26,26,46,0.20), rgba(22,33,62,0.30)),
    url('assets/zones/space.webp');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  position: relative;
  overflow: hidden;
}

.board[data-layer="Space"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 2px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 50px 50px, 30px 30px;
  background-position: 0 0, 25px 25px;
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
  animation: starTwinkle 3s ease-in-out infinite, starDrift 60s linear infinite;
  will-change: opacity, background-position;
}

.board[data-layer="Sky"] {
  background-color: #2196f3;
  background-image:
    linear-gradient(to bottom, rgba(33,150,243,0.10), rgba(129,212,250,0.20)),
    url('assets/zones/sky.webp');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  position: relative;
  overflow: hidden;
}

.board[data-layer="Sky"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="0 0 120 40"><ellipse cx="30" cy="20" rx="25" ry="12" fill="white" opacity="0.4"/><ellipse cx="55" cy="22" rx="20" ry="10" fill="white" opacity="0.35"/><ellipse cx="75" cy="18" rx="18" ry="9" fill="white" opacity="0.3"/></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="30" viewBox="0 0 80 30"><ellipse cx="20" cy="15" rx="15" ry="8" fill="white" opacity="0.35"/><ellipse cx="40" cy="17" rx="18" ry="9" fill="white" opacity="0.3"/></svg>');
  background-size: 120px 40px, 80px 30px;
  background-position: 0 10px, 40px 5px;
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
  animation: cloudDrift 25s linear infinite;
  will-change: background-position;
}

.board[data-layer="Sea"] {
  background-color: #0277bd;
  background-image:
    linear-gradient(to bottom, rgba(3,155,229,0.15), rgba(2,119,189,0.25)),
    url('assets/zones/sea.webp');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  position: relative;
  overflow: hidden;
}

.board[data-layer="Sea"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="20" viewBox="0 0 200 20"><path d="M0,10 Q20,20 40,10 Q60,0 80,10 Q100,20 120,10 Q140,0 160,10 Q180,20 200,10" fill="none" stroke="white" stroke-width="1"/></svg>');
  background-size: 200px 20px;
  background-position: 0 center;
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
  animation: waveMove 10s linear infinite;
  /* Force animation to continue even when parent might be display:none initially */
  will-change: background-position;
}

.board[data-layer="Sub"] {
  background-color: #002f6c;
  background-image:
    linear-gradient(to bottom, rgba(1,87,155,0.20), rgba(0,47,108,0.30)),
    url('assets/zones/underwater.webp');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  position: relative;
  overflow: hidden;
}

.board[data-layer="Sub"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><circle cx="15" cy="35" r="4" fill="white" opacity="0.4"/><circle cx="35" cy="25" r="3" fill="white" opacity="0.35"/><circle cx="25" cy="45" r="2.5" fill="white" opacity="0.3"/></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 70 70"><circle cx="20" cy="50" r="3.5" fill="white" opacity="0.35"/><circle cx="50" cy="40" r="2.5" fill="white" opacity="0.3"/><circle cx="35" cy="60" r="2" fill="white" opacity="0.25"/></svg>');
  background-size: 50px 50px, 70px 70px;
  background-position: 0 0, 35px 0;
  opacity: 0.2;
  z-index: 0;
  pointer-events: none;
  animation: bubbleRise 20s linear infinite;
  will-change: background-position;
}

.cell {
  width: var(--cell-size);
  height: var(--cell-size);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  font-size: 1.2rem;
  color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
  z-index: 1;
  will-change: transform;
}

.cell:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
  z-index: 5;
}

/* Touch-friendly enhancements */
.cell:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

@media (hover: none) and (pointer: coarse) {
  /* Mobile touch devices */
  .cell {
    cursor: default;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }

  .cell:active {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(0.92);
  }

  /* Remove hover effects on touch devices */
  .cell:hover {
    transform: none;
    background: initial;
  }
}

/* Layer-specific cell styles */
.board[data-layer="Space"] .cell {
  background: rgba(26, 35, 126, 0.3);
  border: 1px solid rgba(92, 107, 192, 0.3);
}

.board[data-layer="Sky"] .cell {
  background: rgba(2, 136, 209, 0.3);
  border: 1px solid rgba(79, 195, 247, 0.3);
}

.board[data-layer="Sea"] .cell {
  background: rgba(0, 151, 167, 0.3);
  border: 1px solid rgba(77, 208, 225, 0.3);
}

.board[data-layer="Sub"] .cell {
  background: rgba(0, 105, 92, 0.3);
  border: 1px solid rgba(38, 166, 154, 0.3);
}

/* Layer specific ship styles */
.board[data-layer="Space"] .cell.ship {
  background: rgba(92, 107, 192, 0.4);
  border: 1px solid rgba(92, 107, 192, 0.7);
  box-shadow: 0 0 5px rgba(92, 107, 192, 0.5);
}

.board[data-layer="Sky"] .cell.ship {
  background: rgba(79, 195, 247, 0.4);
  border: 1px solid rgba(79, 195, 247, 0.7);
  box-shadow: 0 0 5px rgba(79, 195, 247, 0.5);
}

.board[data-layer="Sea"] .cell.ship {
  background: rgba(77, 208, 225, 0.4);
  border: 1px solid rgba(77, 208, 225, 0.7);
  box-shadow: 0 0 5px rgba(77, 208, 225, 0.5);
}

.board[data-layer="Sub"] .cell.ship {
  background: rgba(38, 166, 154, 0.4);
  border: 1px solid rgba(38, 166, 154, 0.7);
  box-shadow: 0 0 5px rgba(38, 166, 154, 0.5);
}

/* Ship sprite overlay. JS sets data-ship plus custom properties that slice
   a single sprite across the ship's bounding box. For vertically-placed
   ships the ::after is rotated 90° CW and the slice math runs in the
   pre-rotation (horizontal) coordinate space. */
.cell[data-ship]::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ship-sprite);
  background-size: var(--ship-bg-size, contain);
  background-repeat: no-repeat;
  background-position: var(--ship-bg-pos, center);
  transform: rotate(var(--ship-rotate, 0deg));
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}
.cell.hit[data-ship]::after { display: none; }

.cell[data-ship="Spacecraft"]  { --ship-sprite: url('assets/ships/spacecraft.webp'); }
.cell[data-ship="FighterJet"]  { --ship-sprite: url('assets/ships/fighterjet.webp'); }
.cell[data-ship="Battleship"]  { --ship-sprite: url('assets/ships/battleship.webp'); }
.cell[data-ship="Cruiser"]     { --ship-sprite: url('assets/ships/cruiser.webp'); }
.cell[data-ship="Destroyer"]   { --ship-sprite: url('assets/ships/destroyer.webp'); }
.cell[data-ship="Submarine"]   { --ship-sprite: url('assets/ships/submarine.webp'); }
.cell[data-ship="ExtraJet"]    { --ship-sprite: url('assets/ships/fighterjet.webp'); }

.cell.hit {
  background: rgba(255, 82, 82, 0.4) !important;
  border: 1px solid rgba(255, 82, 82, 0.7) !important;
  box-shadow: 0 0 8px rgba(255, 82, 82, 0.5);
  animation: hitPulse 1s infinite alternate;
  z-index: 3;
}

.cell.miss {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
}

.cell.valid-placement {
  background: rgba(0, 200, 83, 0.3) !important;
  border: 2px solid rgba(0, 200, 83, 0.7) !important;
  box-shadow: 0 0 8px rgba(0, 200, 83, 0.5);
}

.cell.invalid-placement {
  background: rgba(255, 82, 82, 0.3) !important;
  border: 2px solid rgba(255, 82, 82, 0.7) !important;
  box-shadow: 0 0 8px rgba(255, 82, 82, 0.5);
}

.cell.sunk {
  animation: sunkPulse 2s infinite alternate;
}

/* Controls */
.game-controls {
  width: 100%;
  max-width: 850px;
  padding: 1.2rem;
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: linear-gradient(145deg, var(--background-light), var(--background-dark));
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.primary-controls,
.new-game-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.control-button {
  padding: 12px 20px;
  background: linear-gradient(145deg, var(--primary-color), var(--secondary-color));
  border: none;
  border-radius: var(--border-radius);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9em;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.control-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.control-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Touch improvements for buttons */
@media (hover: none) and (pointer: coarse) {
  .control-button,
  .menu-button,
  .game-over-button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    min-height: 44px; /* iOS minimum touch target */
  }

  .control-button:active,
  .menu-button:active,
  .game-over-button:active {
    transform: scale(0.95);
    opacity: 0.9;
  }

  .icon-button {
    -webkit-tap-highlight-color: transparent;
    min-width: 44px;
    min-height: 44px;
  }
}

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

/* Commentary Box */
.commentary-box {
  background: linear-gradient(145deg, var(--background-light), var(--background-dark));
  padding: 0.6rem 1rem;
  border-radius: var(--border-radius);
  margin: 0.4rem 0;
  text-align: center;
  width: 100%;
  max-width: 850px;
  font-size: 0.95em;
  color: var(--text-color);
  box-shadow: var(--box-shadow);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.commentary-box.highlight {
  border-color: var(--primary-color);
  box-shadow: 0 0 15px rgba(30, 136, 229, 0.5);
}

/* UIController injects a duplicate commentary box (#gameInfo) after the
   static one, and game.js updates both with the same text. Hide the
   duplicate globally — updateCommentary is the single source of truth. */
#gameInfo { display: none; }

/* Game Over Overlay Styles */
.game-over-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* More transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease-out;
}

.game-over-content {
  background: linear-gradient(145deg, var(--background-light), var(--background-dark));
  padding: 2.5rem;
  border-radius: var(--border-radius);
  text-align: center;
  box-shadow: 0 0 25px rgba(106, 183, 255, 0.3);
  border: 2px solid var(--primary-color);
  max-width: 400px;
  width: 90%;
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.game-over-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(180deg, #fff4d6 0%, #ffc107 55%, #ff8f00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 12px rgba(255, 160, 0, 0.35));
  letter-spacing: 0.1em;
}

.game-over-content p {
  margin: 15px 0;
  font-size: 1.2em;
  color: var(--text-secondary);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.game-over-content .stats {
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius);
  padding: 1rem;
  margin: 1.5rem 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.game-over-content .accuracy-value {
  font-size: 1.5em;
  color: var(--primary-light);
  font-weight: bold;
  display: block;
  margin: 5px 0;
}

.game-over-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.game-over-button {
  padding: 11px 18px;
  background: linear-gradient(145deg, var(--primary-color), var(--secondary-color));
  border: none;
  border-radius: var(--border-radius);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.95em;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  min-width: 110px;
  flex: 0 1 auto;
  white-space: nowrap;
}

.game-over-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(106, 183, 255, 0.4);
}

.game-over-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

#mainMenuBtn {
  background: linear-gradient(145deg, var(--background-light), var(--space-color));
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Treasure and Powerup Styles */
.treasure-content {
  background: linear-gradient(145deg, var(--sub-color), var(--background-dark));
  padding: 2.5rem;
  border-radius: var(--border-radius);
  text-align: center;
  box-shadow: 0 0 25px rgba(38, 166, 154, 0.5);
  border: 2px solid var(--sub-accent);
  max-width: 600px;
  width: 90%;
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.treasure-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  text-shadow: 0 0 10px var(--sub-accent);
  color: gold;
  letter-spacing: 0.1em;
}

.powerup-options {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem 0;
}

.powerup-option {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.powerup-option:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border-color: gold;
}

.powerup-option.powerup-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.powerup-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 3rem;
}

/* Inline icon images (used inside powerup.icon HTML) render crisp and sized. */
.icon-img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* Sprite shown inside a board cell for treasure / mines. */
.cell-sprite {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}

.powerup-name {
  font-weight: bold;
  color: var(--primary-light);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.powerup-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .powerup-options {
    flex-direction: row;
  }
  
  .powerup-option {
    flex: 1;
  }
}

@keyframes treasureFound {
  0% {
    box-shadow: 0 0 5px gold;
    transform: scale(1);
  }
  100% {
    box-shadow: 0 0 20px gold;
    transform: scale(1.1);
  }
}

.cell.treasure {
  background: rgba(255, 215, 0, 0.3) !important;
  border: 1px solid gold !important;
  animation: treasureFound 1s infinite alternate;
}

.cell.sonar-detected {
  background: rgba(255, 255, 255, 0.5) !important;
  border: 2px solid cyan !important;
  animation: sonarPulse 1.5s infinite alternate;
}

.cell.sonar-scanned {
  background: rgba(100, 100, 100, 0.3) !important;
  border: 1px solid cyan !important;
}

/* Add to existing CSS */
.cell.laser-target {
  background: rgba(255, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 0, 0, 0.7) !important;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
  animation: laserPulse 1s infinite alternate;
}

.cell.cannon-target {
  background: rgba(255, 165, 0, 0.3) !important;
  border: 1px solid rgba(255, 165, 0, 0.7) !important;
  box-shadow: 0 0 8px rgba(255, 165, 0, 0.5);
  animation: cannonPulse 1s infinite alternate;
}

@keyframes laserPulse {
  0% {
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
  }
  100% {
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.9);
  }
}

@keyframes cannonPulse {
  0% {
    box-shadow: 0 0 5px rgba(255, 165, 0, 0.5);
  }
  100% {
    box-shadow: 0 0 15px rgba(255, 165, 0, 0.9);
  }
}

@keyframes sonarPulse {
  0% {
    box-shadow: 0 0 5px cyan;
  }
  100% {
    box-shadow: 0 0 15px cyan;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes popIn {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
/* Animations */
@keyframes waveMove {
  0% { background-position: 0 center; }
  100% { background-position: 200px center; }
}

@keyframes bubbleRise {
  0% { background-position: 0 0, 35px 0; }
  100% { background-position: 5px -50px, 40px -70px; }
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

@keyframes starDrift {
  0% { background-position: 0 0, 25px 25px; }
  100% { background-position: 50px 0, 75px 25px; }
}

@keyframes cloudDrift {
  0% { background-position: 0 10px, 40px 5px; }
  100% { background-position: 120px 10px, 120px 5px; }
}

@keyframes hitPulse {
  0% { box-shadow: 0 0 5px rgba(255, 82, 82, 0.7); }
  100% { box-shadow: 0 0 15px rgba(255, 82, 82, 0.9); }
}

@keyframes sunkPulse {
  0% { box-shadow: 0 0 5px rgba(255, 82, 82, 0.7); opacity: 0.7; }
  100% { box-shadow: 0 0 20px rgba(255, 82, 82, 1); opacity: 1; }
}

@keyframes hitEffect {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes missEffect {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

/* Ship Placement Visual Feedback */
.board-section.placement-active {
  position: relative;
}

.board-section.placement-active::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 3px solid gold;
  border-radius: var(--border-radius);
  animation: placementPulse 1.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.board-section.placement-active .layer-label {
  background: gold !important;
  color: #000 !important;
  font-weight: bold;
  animation: labelPulse 1.5s ease-in-out infinite;
}

@keyframes placementPulse {
  0%, 100% {
    opacity: 1;
    border-color: gold;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
  }
  50% {
    opacity: 0.6;
    border-color: #ffd700;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
  }
}

@keyframes labelPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
  }
}

/* Responsive Design */

/* Tablet and below - optimize layout */
@media (max-width: 1024px) {
  :root {
    --cell-size: 32px;
  }

  .game-container {
    gap: 1rem;
    padding: 0.5rem;
  }

  .layer-container {
    padding: 0.7rem;
  }

  .layer-container h2 {
    font-size: 1rem;
    margin-bottom: 0.6rem;
  }
}

/* ===========================
   MOBILE / TABLET (≤768px)

   Mirror the laptop sidebar design in a single-column flow: frosted
   panels, amber accents, generous board cells. Player + opponent
   containers stack vertically so a board at full phone width still
   feels large.
   =========================== */
@media (max-width: 768px) {
  :root {
    --cell-size: 22px;
  }

  body {
    overflow-x: hidden;
    background-size: cover, 30px 30px;
  }

  /* Compact header (already sticky from base) */
  .game-header {
    padding: 0.3rem 0.6rem;
  }

  .timer {
    font-size: 0.8em;
    padding: 2px 6px;
  }

  .icon-button {
    font-size: 1rem;
  }

  /* Score display: always 2-col row, frosted card feel */
  .win-counter {
    padding: 0.3rem 0.4rem;
    margin: 0.3rem auto;
    max-width: 440px;
    gap: 6px;
  }

  .player-score {
    padding: 0.3rem 0.45rem;
    width: 50%;
    background: linear-gradient(145deg, rgba(30, 40, 58, 0.55), rgba(18, 22, 35, 0.70));
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .player-score.active {
    border-color: rgba(255, 160, 0, 0.55);
    box-shadow: 0 0 14px rgba(255, 160, 0, 0.2);
  }

  .player-icon {
    font-size: 0.95rem;
    margin-bottom: 0.1rem;
  }

  .player-name {
    font-size: 0.75em;
  }

  .score-container {
    padding: 0.2rem 0.3rem;
  }

  .win-label {
    font-size: 0.72em;
    margin-bottom: 2px;
  }

  .stats-row {
    font-size: 0.62em;
    gap: 5px;
  }

  /* Single commentary box — amber accent border */
  .commentary-box {
    font-size: 0.75em;
    padding: 0.3rem 0.6rem;
    margin: 0.25rem auto;
    min-height: 1.6rem;
    max-width: 440px;
    border: 1px solid rgba(255, 176, 64, 0.18);
  }

  /* Two layer-containers side-by-side so combat fits all 8 boards on
     one screen. During setup the opponent container is hidden via JS
     (display:none), so the single player container centers cleanly. */
  .game-container {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.3rem 0.4rem;
    margin: 0.3rem auto;
    max-width: 100%;
    align-items: flex-start;
  }

  .layer-container {
    padding: 0.45rem 0.5rem;
    width: auto;
    max-width: none;
    flex: 0 1 auto;
    margin: 0;
    background: linear-gradient(145deg, rgba(30, 40, 58, 0.55), rgba(18, 22, 35, 0.70));
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .layer-container.active {
    border-color: rgba(255, 160, 0, 0.55);
    box-shadow: 0 0 18px rgba(255, 160, 0, 0.22);
  }

  .layer-container h2 {
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
  }

  /* Keep the thematic Space → Sky → Sea → Underwater vertical stack.
     Smaller cells (via --cell-size above) keep the column short enough
     that scrolling is minimal. */
  .boards-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }

  .board-section {
    width: auto;
    align-items: center;
  }

  .layer-label {
    font-size: 0.6rem;
    padding: 2px 7px;
    margin-bottom: 0.2rem;
    letter-spacing: 0.06em;
  }

  .board {
    padding: 4px;
    gap: 2px;
    width: max-content;
    box-sizing: border-box;
  }

  /* Controls: tight full-width button row at the bottom */
  .game-controls {
    padding: 0.5rem;
    margin: 0.5rem auto 0;
    gap: 6px;
    max-width: 440px;
  }

  .primary-controls,
  .new-game-controls {
    gap: 6px;
  }

  .control-button {
    padding: 7px 10px;
    font-size: 0.75em;
    gap: 4px;
  }

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

  .button-text {
    display: inline;
  }

  .menu-button {
    width: 220px;
    padding: 12px;
    font-size: 1em;
  }

  .menu-content {
    padding: 1.8rem 1.6rem;
  }

  .menu-content h1 {
    font-size: 2.2rem;
    letter-spacing: 0.22em;
    padding-right: 0.22em;
  }

  /* Compact overlays */
  .game-over-content,
  .treasure-content {
    padding: 1.5rem;
    max-width: 90%;
  }

  .game-over-content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .game-over-content p {
    font-size: 1em;
    margin: 10px 0;
  }
}

/* Small mobile phones (≤480px) — scale down cells, keep brand intact */
@media (max-width: 480px) {
  :root {
    --cell-size: 20px;
  }

  .win-counter {
    padding: 0.35rem 0.4rem;
    gap: 6px;
    margin: 0.35rem auto;
  }

  .player-score {
    padding: 0.35rem 0.4rem;
  }

  .player-icon {
    font-size: 1rem;
  }

  .player-name {
    font-size: 0.75em;
  }

  .score-container {
    padding: 0.25rem 0.3rem;
  }

  .win-label {
    font-size: 0.75em;
  }

  .stats-row {
    font-size: 0.62em;
    gap: 5px;
  }

  .commentary-box {
    font-size: 0.75em;
    padding: 0.4rem 0.55rem;
    margin: 0.3rem auto;
    min-height: 1.8rem;
  }

  .game-container {
    gap: 0.55rem;
    padding: 0.2rem 0.3rem;
    margin: 0.3rem auto;
  }

  .layer-container {
    padding: 0.45rem 0.55rem;
  }

  .layer-container h2 {
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
  }

  .boards-wrapper {
    gap: 0.45rem;
  }

  .layer-label {
    font-size: 0.55rem;
    padding: 2px 6px;
  }

  .board {
    padding: 4px;
    gap: 2px;
  }

  .cell {
    font-size: 1rem;
  }

  .game-controls {
    padding: 0.4rem;
    gap: 5px;
    margin: 0.35rem auto 0;
  }

  .primary-controls,
  .new-game-controls {
    gap: 5px;
    width: 100%;
  }

  .control-button {
    padding: 6px 8px;
    font-size: 0.7em;
    flex: 1;
    min-width: 0;
    gap: 4px;
  }

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

  /* Keep button text visible — narrower padding gives it room */
  .button-text {
    display: inline;
  }

  .menu-content {
    padding: 1.6rem 1.3rem;
  }

  .menu-content h1 {
    font-size: 1.9rem;
    letter-spacing: 0.18em;
    padding-right: 0.18em;
  }

  .menu-button {
    width: 200px;
    padding: 11px 14px;
    font-size: 0.95em;
  }
}

/* Landscape mode optimization for mobile */
@media (max-width: 896px) and (max-height: 500px) and (orientation: landscape) {
  :root {
    --cell-size: 26px;
  }

  body {
    overflow-y: auto;
  }

  .game-header {
    padding: 0.2rem 0.4rem;
  }

  .timer {
    font-size: 0.75em;
  }

  .win-counter {
    padding: 0.3rem;
    margin: 0.2rem 0;
  }

  .player-score {
    padding: 0.3rem;
  }

  .player-icon {
    font-size: 1rem;
  }

  .score-container {
    padding: 0.3rem;
  }

  .win-label {
    font-size: 0.75em;
  }

  .commentary-box {
    padding: 0.3rem;
    margin: 0.2rem 0;
    min-height: 1.5rem;
    font-size: 0.7em;
  }

  .game-container {
    margin: 0.2rem 0;
    padding: 0.2rem;
    gap: 0.2rem;
  }

  .layer-container {
    padding: 0.3rem;
    width: fit-content;
  }

  .layer-container h2 {
    font-size: 0.7rem;
    margin-bottom: 0.2rem;
  }

  .boards-wrapper {
    gap: 0.25rem;
  }

  .layer-label {
    font-size: 0.5rem;
    padding: 1px 2px;
  }

  .board {
    padding: 2px;
    gap: 1px;
  }

  .cell {
    font-size: 0.8rem;
  }

  .game-controls {
    padding: 0.3rem;
    margin-top: 0.3rem;
    gap: 4px;
  }

  .control-button {
    padding: 4px 6px;
    font-size: 0.6em;
  }

  .button-text {
    display: none;
  }
}

/* Powerup target board highlighting */
.powerup-target-board {
  box-shadow: 0 0 20px rgba(79, 195, 247, 0.7) !important;
  animation: pulseTargetBoard 1.5s infinite alternate;
}

@keyframes pulseTargetBoard {
  0% { box-shadow: 0 0 15px rgba(79, 195, 247, 0.5); }
  100% { box-shadow: 0 0 25px rgba(79, 195, 247, 0.9); }
}

.blackbox-target {
  background: rgba(79, 195, 247, 0.4) !important;
  border: 2px solid rgba(79, 195, 247, 0.8) !important;
  transform: scale(1.1);
  z-index: 10;
}

.ai-powerup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1500;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
  animation: fadeIn 0.3s ease-in;
  transition: opacity 0.5s ease;
}

.ai-powerup-overlay.fade-out {
  opacity: 0;
}

.ai-powerup-content {
  background: linear-gradient(145deg, var(--sub-color), var(--background-dark));
  padding: 2rem;
  border-radius: var(--border-radius);
  text-align: center;
  box-shadow: 0 0 20px rgba(38, 166, 154, 0.5);
  border: 2px solid var(--primary-color);
  max-width: 400px;
  width: 90%;
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ai-powerup-content h3 {
  margin-bottom: 1rem;
  color: var(--primary-light);
}

.selected-powerup {
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.selected-powerup .powerup-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.selected-powerup .powerup-name {
  font-weight: bold;
  color: gold;
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}

.selected-powerup .powerup-desc {
  color: var(--text-color);
}

/* === How to Play Styles === */
.menu-button.secondary {
  background: transparent;
  border: 1px solid rgba(100, 181, 246, 0.45);
  color: var(--primary-light);
  margin-top: 0.6rem;
  box-shadow: none;
  text-shadow: none;
}

.menu-button.secondary:hover {
  background: rgba(30, 136, 229, 0.12);
  border-color: var(--primary-light);
  filter: none;
  box-shadow: 0 2px 8px rgba(30, 136, 229, 0.2);
}

.header-controls {
  display: flex;
  gap: 0.5rem;
}

.how-to-play-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  padding: 1rem;
  animation: fadeIn 0.3s ease;
}

.how-to-play-content {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-radius: 16px;
  padding: 2rem;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  border: 1px solid rgba(100, 180, 255, 0.3);
  box-shadow: 0 0 40px rgba(30, 136, 229, 0.3), inset 0 0 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

.how-to-play-content h1 {
  text-align: center;
  font-size: 2rem;
  background: linear-gradient(135deg, #64b5f6, #e91e63);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.25rem;
}

.how-to-play-content .subtitle {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--text-color);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s;
}

.close-button:hover {
  background: var(--accent-color);
  transform: scale(1.1);
}

.how-to-play-sections {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.htp-section {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.htp-section h2 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  color: var(--primary-light);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.htp-section p {
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.htp-section strong {
  color: var(--text-color);
}

/* Layers Grid */
.layers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.layer-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 0.75rem 0.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.2s, background 0.2s;
}

.layer-item:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
}

.layer-icon {
  font-size: 1.5rem;
}

.layer-name {
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--text-color);
  letter-spacing: 1px;
}

.layer-desc {
  font-size: 0.6rem;
  color: var(--text-secondary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Ships Grid */
.ships-grid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ship-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.2s;
}

.ship-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.ship-icon {
  font-size: 1.5rem;
  width: 40px;
  text-align: center;
}

.ship-info {
  display: flex;
  flex-direction: column;
}

.ship-name {
  font-weight: bold;
  font-size: 0.9rem;
  color: var(--text-color);
}

.ship-details {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.tip {
  background: rgba(255, 214, 0, 0.1);
  border: 1px solid rgba(255, 214, 0, 0.3);
  border-radius: 6px;
  padding: 0.6rem;
  margin-top: 0.75rem;
  margin-bottom: 0 !important;
  text-align: center;
}

.tip kbd {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  font-family: 'Orbitron', monospace;
  font-size: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Rules List */
.rules-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.rule-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.rule-icon {
  font-size: 1.25rem;
  width: 30px;
  text-align: center;
}

/* Powerups Grid */
.treasure-section {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 140, 0, 0.05) 100%);
  border-color: rgba(255, 215, 0, 0.3);
}

.treasure-section h2 {
  color: gold;
}

.powerups-grid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.powerup-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 215, 0, 0.2);
  transition: all 0.2s;
}

.powerup-item:hover {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.4);
}

.powerup-item .powerup-icon {
  font-size: 1.5rem;
  width: 40px;
  text-align: center;
}

.powerup-info {
  display: flex;
  flex-direction: column;
}

.powerup-info .powerup-name {
  font-weight: bold;
  font-size: 0.85rem;
  color: gold;
  letter-spacing: 1px;
}

.powerup-info .powerup-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Got It Button */
.got-it-button {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  padding: 1rem;
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: white;
  background: linear-gradient(135deg, var(--primary-color), #e91e63);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.got-it-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(233, 30, 99, 0.4);
}

/* Mobile responsive for How to Play */
@media (max-width: 600px) {
  .how-to-play-content {
    padding: 1.5rem 1rem;
    max-height: 85vh;
  }
  
  .how-to-play-content h1 {
    font-size: 1.5rem;
  }
  
  .layers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .layer-icon {
    font-size: 1.25rem;
  }
  
  .ship-item, .powerup-item {
    padding: 0.5rem 0.75rem;
  }
  
  .ship-icon, .powerup-item .powerup-icon {
    font-size: 1.25rem;
    width: 32px;
  }
}

/* === Keyboard Navigation Cursor === */
.cell.keyboard-cursor {
  outline: 2px solid var(--warning-color) !important;
  outline-offset: -2px;
  box-shadow: 0 0 12px rgba(255, 214, 0, 0.6), inset 0 0 8px rgba(255, 214, 0, 0.15) !important;
  z-index: 10 !important;
  position: relative;
}

.cell.keyboard-cursor::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  animation: cursorPulse 1.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cursorPulse {
  0%, 100% { box-shadow: inset 0 0 4px rgba(255, 214, 0, 0.2); }
  50% { box-shadow: inset 0 0 10px rgba(255, 214, 0, 0.4); }
}

/* Active layer indicator during keyboard nav */
.board-section.keyboard-active-layer .layer-label {
  color: var(--warning-color) !important;
  text-shadow: 0 0 8px rgba(255, 214, 0, 0.6);
}

/* Keyboard hint bar */
.keyboard-hint {
  display: none;
  width: 100%;
  max-width: 850px;
  padding: 0.3rem 0.8rem;
  margin: 0.2rem 0;
  text-align: center;
  font-size: 0.65em;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.keyboard-hint.visible {
  display: block;
}

.keyboard-hint kbd {
  display: inline-block;
  padding: 0.1em 0.4em;
  font-size: 0.9em;
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  margin: 0 0.15em;
  font-family: 'Orbitron', sans-serif;
}

/* === Fleet Dock (Ship Placement Phase) === */
.fleet-dock {
  width: 100%;
  max-width: 850px;
  padding: 0.5rem 0.8rem;
  margin: 0.2rem 0;
  background: linear-gradient(145deg, var(--background-light), var(--background-dark));
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.fleet-dock.hidden {
  display: none !important;
}

.fleet-dock-label {
  font-size: 0.65em;
  color: var(--text-secondary);
  letter-spacing: 0.15em;
  text-align: center;
}

.fleet-dock-ships {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.6rem;
}

/* Individual ship slot in the dock */
.dock-ship {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.4s ease;
  position: relative;
}

/* Ship shape grid - the visual representation */
.dock-ship-shape {
  display: grid;
  gap: 2px;
}

.dock-ship-shape.shape-square {
  grid-template-columns: repeat(2, 14px);
}

.dock-ship-shape.shape-single {
  grid-template-columns: 14px;
}

.dock-ship-shape.shape-line {
  grid-template-columns: repeat(auto-fill, 14px);
}

.dock-ship-shape.size-2 {
  grid-template-columns: repeat(2, 14px);
}

.dock-ship-shape.size-3 {
  grid-template-columns: repeat(3, 14px);
}

.dock-ship-cell {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  transition: all 0.4s ease;
}

/* Layer-colored cells */
.dock-ship[data-layer="Space"] .dock-ship-cell {
  background: var(--space-accent);
  border: 1px solid rgba(92, 107, 192, 0.6);
  box-shadow: 0 0 4px rgba(92, 107, 192, 0.3);
}

.dock-ship[data-layer="Sky"] .dock-ship-cell {
  background: var(--sky-accent);
  border: 1px solid rgba(79, 195, 247, 0.6);
  box-shadow: 0 0 4px rgba(79, 195, 247, 0.3);
}

.dock-ship[data-layer="Sea"] .dock-ship-cell {
  background: var(--sea-accent);
  border: 1px solid rgba(77, 208, 225, 0.6);
  box-shadow: 0 0 4px rgba(77, 208, 225, 0.3);
}

.dock-ship[data-layer="Sub"] .dock-ship-cell {
  background: var(--sub-accent);
  border: 1px solid rgba(38, 166, 154, 0.6);
  box-shadow: 0 0 4px rgba(38, 166, 154, 0.3);
}

/* Ship name and layer label */
.dock-ship-name {
  font-size: 0.55em;
  color: var(--text-color);
  text-align: center;
  line-height: 1.1;
  white-space: nowrap;
}

.dock-ship-layer {
  font-size: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
}

.dock-ship[data-layer="Space"] .dock-ship-layer { color: var(--space-accent); }
.dock-ship[data-layer="Sky"] .dock-ship-layer { color: var(--sky-accent); }
.dock-ship[data-layer="Sea"] .dock-ship-layer { color: var(--sea-accent); }
.dock-ship[data-layer="Sub"] .dock-ship-layer { color: var(--sub-accent); }

/* === Dock ship states === */

/* Current ship - glowing and pulsing */
.dock-ship.current {
  border-color: rgba(255, 215, 0, 0.6);
  background: rgba(255, 215, 0, 0.08);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
  animation: dockShipPulse 1.8s ease-in-out infinite;
}

.dock-ship.current .dock-ship-name {
  color: gold;
  font-weight: bold;
}

@keyframes dockShipPulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.35);
    border-color: rgba(255, 215, 0, 0.8);
  }
}

/* Placed ship - dimmed with checkmark overlay */
.dock-ship.placed {
  opacity: 0.35;
  transform: scale(0.92);
}

.dock-ship.placed .dock-ship-cell {
  filter: saturate(0.3) brightness(0.6);
}

.dock-ship.placed::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2em;
  color: var(--success-color);
  text-shadow: 0 0 6px rgba(0, 200, 83, 0.5);
  pointer-events: none;
}

/* Upcoming ship - slightly dimmed */
.dock-ship.upcoming {
  opacity: 0.5;
}

.dock-ship.upcoming .dock-ship-cell {
  filter: saturate(0.5) brightness(0.7);
}

/* === Fleet Dock Responsive === */
@media (max-width: 768px) {
  .fleet-dock {
    padding: 0.35rem 0.5rem;
    margin: 0.3rem 0;
  }

  .fleet-dock-label {
    font-size: 0.55em;
  }

  .fleet-dock-ships {
    gap: 0.35rem;
  }

  .dock-ship {
    padding: 0.3rem 0.35rem;
  }

  .dock-ship-cell {
    width: 12px;
    height: 12px;
  }

  .dock-ship-shape.shape-square { grid-template-columns: repeat(2, 12px); }
  .dock-ship-shape.size-2 { grid-template-columns: repeat(2, 12px); }
  .dock-ship-shape.size-3 { grid-template-columns: repeat(3, 12px); }

  .dock-ship-name { font-size: 0.5em; }
  .dock-ship-layer { font-size: 0.45em; }
}

@media (max-width: 480px) {
  .fleet-dock {
    padding: 0.25rem 0.4rem;
    margin: 0.2rem 0;
  }

  .fleet-dock-label {
    font-size: 0.5em;
  }

  .fleet-dock-ships {
    gap: 0.25rem;
  }

  .dock-ship {
    padding: 0.2rem 0.25rem;
    gap: 0.15rem;
  }

  .dock-ship-cell {
    width: 10px;
    height: 10px;
  }

  .dock-ship-shape.shape-square { grid-template-columns: repeat(2, 10px); }
  .dock-ship-shape.size-2 { grid-template-columns: repeat(2, 10px); }
  .dock-ship-shape.size-3 { grid-template-columns: repeat(3, 10px); }

  .dock-ship-name { font-size: 0.45em; }
  .dock-ship-layer { font-size: 0.4em; }

  .dock-ship.placed::after { font-size: 0.9em; }
}

@media (max-width: 896px) and (max-height: 500px) and (orientation: landscape) {
  .fleet-dock {
    padding: 0.2rem 0.4rem;
    margin: 0.15rem 0;
  }

  .fleet-dock-label { font-size: 0.45em; }

  .dock-ship {
    padding: 0.15rem 0.2rem;
    gap: 0.1rem;
  }

  .dock-ship-cell {
    width: 9px;
    height: 9px;
  }

  .dock-ship-shape.shape-square { grid-template-columns: repeat(2, 9px); }
  .dock-ship-shape.size-2 { grid-template-columns: repeat(2, 9px); }
  .dock-ship-shape.size-3 { grid-template-columns: repeat(3, 9px); }

  .dock-ship-name { font-size: 0.4em; }
  .dock-ship-layer { display: none; }

  .dock-ship.placed::after { font-size: 0.75em; }
}

/* === Ship Counter Display === */
.ship-counter {
  display: none;
  width: 100%;
  max-width: 850px;
  padding: 0.4rem 0.8rem;
  margin: 0.2rem 0;
  background: linear-gradient(145deg, var(--background-light), var(--background-dark));
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ship-counter.visible {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.ship-counter-side {
  flex: 0 1 auto;
  text-align: center;
}

.ship-counter-side .counter-label {
  font-size: 0.7em;
  color: var(--primary-light);
  margin-bottom: 0.25rem;
  letter-spacing: 0.05em;
}

.ships-list {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.ship-status {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.75em;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.ship-status.sunk {
  opacity: 0.4;
  text-decoration: line-through;
  border-color: rgba(255, 82, 82, 0.3);
  background: rgba(255, 82, 82, 0.1);
}

.ship-status.alive {
  border-color: rgba(0, 200, 83, 0.3);
  background: rgba(0, 200, 83, 0.05);
}

.ship-status .ship-emoji {
  font-size: 0.9em;
}

/* === Connection Status Indicator === */
.connection-status {
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  font-size: 0.65em;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 500;
  transition: all 0.3s ease;
}

.connection-status.visible {
  display: flex;
}

.connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: background 0.3s ease;
}

.connection-status.connected .connection-dot {
  background: var(--success-color);
  box-shadow: 0 0 6px var(--success-color);
}

.connection-status.connecting .connection-dot {
  background: var(--warning-color);
  animation: connectingPulse 1s infinite;
}

.connection-status.disconnected .connection-dot {
  background: var(--danger-color);
  box-shadow: 0 0 6px var(--danger-color);
}

@keyframes connectingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

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

.connection-ping {
  color: var(--text-secondary);
  font-size: 0.9em;
  opacity: 0.7;
}

/* === Powerup Notification (Online) === */
.powerup-notification {
  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.6rem 1.2rem;
  background: linear-gradient(135deg, rgba(45, 45, 45, 0.95), rgba(18, 18, 18, 0.95));
  border: 1px solid rgba(255, 215, 0, 0.5);
  border-radius: var(--border-radius);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  animation: slideDown 0.4s ease-out, fadeOut 0.4s ease-in 3.6s forwards;
  font-size: 0.85em;
}

.powerup-notification .notif-icon {
  font-size: 1.3em;
}

.powerup-notification .notif-text {
  color: var(--text-color);
}

.powerup-notification .notif-name {
  color: gold;
  font-weight: bold;
}

@keyframes slideDown {
  from { transform: translateX(-50%) translateY(-100%); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; pointer-events: none; }
}

/* === Explosion Effects === */
.explosion-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  overflow: visible;
}

.explosion-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

.explosion-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  border: 2px solid rgba(255, 82, 82, 0.8);
  pointer-events: none;
  animation: explosionRing 0.6s ease-out forwards;
}

@keyframes explosionRing {
  0% { width: 0; height: 0; opacity: 1; transform: translate(-50%, -50%) scale(0); }
  100% { width: 80px; height: 80px; opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

.explosion-flash {
  position: absolute;
  inset: -4px;
  border-radius: 4px;
  background: radial-gradient(circle, rgba(255, 200, 50, 0.9), rgba(255, 82, 82, 0.6), transparent 70%);
  pointer-events: none;
  animation: explosionFlash 0.35s ease-out forwards;
}

@keyframes explosionFlash {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(2); }
}

/* Miss splash effect */
.miss-splash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  overflow: visible;
}

.splash-drop {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(106, 183, 255, 0.7);
  pointer-events: none;
}

.splash-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  border: 1px solid rgba(106, 183, 255, 0.5);
  pointer-events: none;
  animation: splashRing 0.5s ease-out forwards;
}

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

/* === Screen Shake === */
.screen-shake {
  animation: screenShake 0.4s ease-out;
}

@keyframes screenShake {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-1.5px, 0.75px); }
  20% { transform: translate(1.5px, -0.75px); }
  30% { transform: translate(-1.1px, -0.4px); }
  40% { transform: translate(1.1px, 0.4px); }
  50% { transform: translate(-0.75px, 0.75px); }
  60% { transform: translate(0.75px, -0.4px); }
  70% { transform: translate(-0.4px, 0.4px); }
  80% { transform: translate(0.4px, -0.4px); }
  90% { transform: translate(-0.4px, 0); }
  100% { transform: translate(0, 0); }
}

.screen-shake-heavy {
  animation: screenShakeHeavy 0.5s ease-out;
}

@keyframes screenShakeHeavy {
  0% { transform: translate(0, 0) rotate(0); }
  10% { transform: translate(-2.25px, 1.1px) rotate(-0.19deg); }
  20% { transform: translate(2.25px, -1.5px) rotate(0.19deg); }
  30% { transform: translate(-1.9px, -0.75px) rotate(-0.11deg); }
  40% { transform: translate(1.5px, 1.1px) rotate(0.11deg); }
  50% { transform: translate(-1.1px, 0.75px) rotate(-0.075deg); }
  60% { transform: translate(1.1px, -0.75px) rotate(0.075deg); }
  70% { transform: translate(-0.75px, 0.4px) rotate(0); }
  80% { transform: translate(0.4px, -0.4px); }
  100% { transform: translate(0, 0) rotate(0); }
}

/* === Sunk Ship Dramatic Effect === */
.cell.sinking {
  animation: shipSink 0.8s ease-in forwards;
}

@keyframes shipSink {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  30% { transform: scale(1.1) rotate(3deg); opacity: 1; }
  60% { transform: scale(0.9) rotate(-5deg); opacity: 0.7; }
  100% { transform: scale(0.75) rotate(8deg); opacity: 0.5; filter: brightness(0.4) saturate(0.3); }
}

.cell.sunk {
  animation: sunkPulse 2s infinite alternate;
  transform: scale(0.75) rotate(8deg);
  opacity: 0.5;
  filter: brightness(0.4) saturate(0.3);
}

/* === Victory Confetti Canvas === */
.confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2001;
}

/* Victory-specific game over styling */
.game-over-overlay.victory-overlay {
  background: rgba(0, 20, 0, 0.5);
}

.game-over-overlay.victory-overlay .game-over-content {
  border-color: var(--success-color);
  box-shadow: 0 0 40px rgba(0, 200, 83, 0.4), 0 0 80px rgba(0, 200, 83, 0.1);
}

.game-over-overlay.victory-overlay h2 {
  background: linear-gradient(to right, #ffd700, #ff6b35, #ffd700);
  -webkit-background-clip: text;
  background-clip: text;
  animation: victoryTextGlow 1.5s ease-in-out infinite alternate;
}

@keyframes victoryTextGlow {
  0% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); filter: brightness(1); }
  100% { text-shadow: 0 0 25px rgba(255, 215, 0, 0.8), 0 0 50px rgba(255, 107, 53, 0.4); filter: brightness(1.2); }
}

/* Defeat styling */
.game-over-overlay.defeat-overlay {
  background: rgba(20, 0, 0, 0.5);
}

.game-over-overlay.defeat-overlay .game-over-content {
  border-color: var(--danger-color);
  box-shadow: 0 0 40px rgba(239, 83, 80, 0.3);
}

.game-over-overlay.defeat-overlay h2 {
  background: linear-gradient(to right, #ef5350, #b71c1c);
  -webkit-background-clip: text;
  background-clip: text;
}

/* === AI Thinking Indicator === */
.ai-thinking {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.ai-thinking-dots {
  display: inline-flex;
  gap: 3px;
}

.ai-thinking-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary-light);
  animation: thinkingDot 1.2s ease-in-out infinite;
}

.ai-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes thinkingDot {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.2); }
}

/* Scanning overlay on player boards during AI turn */
.board.ai-scanning::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
  animation: aiScanLine 1s ease-in-out infinite;
  z-index: 15;
  pointer-events: none;
}

@keyframes aiScanLine {
  0% { top: 0; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* === Phase Transition ===
   Cinematic reveal used when transitioning from placement to combat.
   Single warm amber palette (matches campaign title) instead of the old
   blue→red gradient which read as arcade/tacky. Letter-spacing contracts
   from wide to medium on entry for a "confident hud reveal" feel. */
.phase-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.82), rgba(0,0,0,0.95));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1800;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: phaseTransitionIn 0.35s ease-out;
}

.phase-transition-overlay.exit {
  animation: phaseTransitionOut 0.35s ease-in forwards;
}

@keyframes phaseTransitionIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes phaseTransitionOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.phase-transition-text {
  position: relative;
  font-family: 'Orbitron', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  padding-right: 0.3em;
  background: linear-gradient(to right, #ffc107, #ff8f00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(255, 143, 0, 0.35));
  animation: phaseTextReveal 0.55s cubic-bezier(0.2, 0.8, 0.25, 1);
}

/* Thin accent bars above and below the title that expand in on reveal. */
.phase-transition-text::before,
.phase-transition-text::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #ff8f00, transparent);
  transform: translateX(-50%);
  animation: phaseBarExpand 0.6s ease-out 0.15s forwards;
}
.phase-transition-text::before { top: -0.6em; }
.phase-transition-text::after  { bottom: -0.4em; }

.phase-transition-sub {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 1.2rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0;
  animation: phaseSubFadeIn 0.5s ease-out 0.3s forwards;
}

@keyframes phaseTextReveal {
  from { opacity: 0; letter-spacing: 0.55em; filter: blur(6px) drop-shadow(0 0 12px rgba(255, 143, 0, 0.35)); }
  to   { opacity: 1; letter-spacing: 0.3em; filter: blur(0) drop-shadow(0 0 12px rgba(255, 143, 0, 0.35)); }
}

@keyframes phaseBarExpand {
  to { width: 80%; }
}

@keyframes phaseSubFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 0.85; transform: translateY(0); }
}

/* Responsive adjustments for new effects */
@media (max-width: 768px) {
  .phase-transition-text { font-size: 1.8rem; }
  .phase-transition-sub { font-size: 0.75rem; }
  .explosion-ring { animation-duration: 0.4s; }
}

@media (max-width: 480px) {
  .phase-transition-text { font-size: 1.4rem; }
}

/* Responsive adjustments for new elements */
@media (max-width: 768px) {
  .keyboard-hint { display: none !important; }
  .connection-status { font-size: 0.6em; top: 4px; right: 4px; }
  .ship-counter.visible { gap: 0.6rem; padding: 0.2rem 0.4rem; margin: 0.2rem auto; }
  .ship-counter-side .counter-label { font-size: 0.55em; margin-bottom: 0.1rem; }
  .ships-list { gap: 0.2rem; }
  .ship-status { font-size: 0.55em; padding: 0.08rem 0.25rem; }
  .ship-status .ship-emoji { font-size: 0.85em; }
}

@media (max-width: 480px) {
  /* Keep YOUR FLEET / ENEMY FLEET side-by-side so combat doesn't eat
     vertical space — the column was doubling the ship-counter height. */
  .ship-counter.visible { gap: 0.4rem; padding: 0.3rem 0.4rem; }
  .ship-counter .ship-counter-side { flex: 1; min-width: 0; }
  .ship-counter .counter-label { font-size: 0.55em; }
  .ship-status { font-size: 0.6em; padding: 0.08rem 0.25rem; }
  .powerup-notification { font-size: 0.75em; padding: 0.4rem 0.8rem; }
}

/* ===========================
   CAMPAIGN MODE STYLES
   =========================== */

/* Campaign Menu Button — the featured CTA, uses the signature amber */
.campaign-menu-btn {
  background: linear-gradient(180deg, #ffc107 0%, #ff8f00 55%, #e65100 100%) !important;
  border: 1px solid rgba(255, 193, 7, 0.6) !important;
  color: #1a0e00 !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.25);
  box-shadow:
    0 2px 8px rgba(255, 143, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
  position: relative;
  overflow: hidden;
}
.campaign-menu-btn:hover {
  filter: brightness(1.08) !important;
  box-shadow:
    0 4px 16px rgba(255, 143, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
}
.campaign-menu-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
  animation: campaignShimmer 3s infinite;
}
@keyframes campaignShimmer {
  0% { transform: translateX(-100%) rotate(25deg); }
  100% { transform: translateX(100%) rotate(25deg); }
}

/* Campaign Overlay */
.campaign-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(8px);
}

.campaign-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  max-width: 600px;
  max-height: 94vh;
  padding: 1.5rem;
  background: linear-gradient(145deg, #1a1a2e, #0a0a15);
  border-radius: 12px;
  border: 1px solid #ff8f00;
  box-shadow: 0 0 30px rgba(255, 143, 0, 0.2), inset 0 0 30px rgba(0,0,0,0.5);
  overflow-y: auto;
}

.campaign-header {
  text-align: center;
  margin-bottom: 1rem;
}

.campaign-title {
  font-size: 1.8rem;
  background: linear-gradient(to right, #ffab00, #ff6d00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.15em;
  text-shadow: none;
}

.campaign-subtitle {
  color: var(--text-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-top: 0.25rem;
}

.campaign-star-total {
  color: #ffd600;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* ===== Campaign World Map (new) =====
   The campaign overlay shows a painted canvas (the title splash) with 10
   mission nodes pinned at curated coordinates, connected by a winding SVG
   path. Locked missions are fully visible but desaturated with a lock badge;
   completed missions show a green checkmark. Node positions use --x/--y
   custom properties set inline by JS so the design is easy to re-tune. */
.campaign-world-map {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  background-image: url('assets/splash/title.webp');
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 0 30px rgba(0,0,0,0.6), inset 0 0 80px rgba(0,0,0,0.4);
  overflow: hidden;
}

.campaign-world-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 0;
}

.campaign-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.campaign-paths .path-segment {
  fill: none;
  stroke-width: 0.9;
  stroke-linecap: round;
}
.campaign-paths .path-segment.unlocked {
  stroke: rgba(255, 215, 0, 0.95);
  stroke-dasharray: 2.2 1.4;
  filter: drop-shadow(0 0 1.2px rgba(255, 215, 0, 0.9));
}
.campaign-paths .path-segment.locked {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-dasharray: 1.6 2.2;
}

.map-node {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.map-node:not(.locked):hover {
  transform: translate(-50%, -50%) scale(1.12);
  z-index: 5;
}
.map-node.locked {
  cursor: default;
}

.map-node-portrait-wrap {
  position: relative;
  display: inline-block;
}

.map-node .map-node-portrait {
  width: clamp(3rem, 10vmin, 5rem);
  height: clamp(3rem, 10vmin, 5rem);
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.45);
  box-shadow: 0 0 14px rgba(0,0,0,0.75);
  background: rgba(0,0,0,0.4);
  display: block;
}
/* Act-coded portrait rings so each character is immediately tied to their
   chapter. Boss/current states below override these. */
.map-node.act-1 .map-node-portrait {
  border-color: rgba(77, 208, 225, 0.85);
  box-shadow: 0 0 14px rgba(0, 188, 212, 0.55);
}
.map-node.act-2 .map-node-portrait {
  border-color: rgba(255, 171, 64, 0.85);
  box-shadow: 0 0 14px rgba(255, 143, 0, 0.55);
}
.map-node.act-3 .map-node-portrait {
  border-color: rgba(206, 147, 216, 0.9);
  box-shadow: 0 0 14px rgba(156, 39, 176, 0.6);
}
/* Tint the name pill to match the act too. */
.map-node.act-1 .map-node-label .name { border-color: rgba(0, 188, 212, 0.5); color: #a5ecf5; }
.map-node.act-2 .map-node-label .name { border-color: rgba(255, 143, 0, 0.5); color: #ffd29a; }
.map-node.act-3 .map-node-label .name { border-color: rgba(156, 39, 176, 0.5); color: #e1bee7; }
.map-node.node-mini-boss .map-node-portrait {
  border-color: rgba(255, 82, 82, 0.85);
  box-shadow: 0 0 18px rgba(255, 82, 82, 0.55);
}
.map-node.node-final-boss .map-node-portrait {
  /* Admiral's portrait itself uses a restrained bronze ring — the flashy
     "he is the big bad" cue is the laurel wreath wrapping him, not a ring
     that would clash with the gold "current" pulse used elsewhere. */
  border-color: rgba(176, 128, 44, 0.9);
  box-shadow: 0 0 18px rgba(176, 128, 44, 0.55);
  width: clamp(3.8rem, 13vmin, 6.4rem);
  height: clamp(3.8rem, 13vmin, 6.4rem);
  position: relative;
  z-index: 2;
}

/* Prevent the "current" pulsing-gold ring from stepping on the laurel
   design when Admiral eventually becomes current — the wreath is already
   the reward cue. */
.map-node.current.node-final-boss .map-node-portrait {
  border-color: rgba(255, 215, 0, 0.9);
  animation: none;
  box-shadow: 0 0 26px rgba(255, 215, 0, 0.65);
}
.map-node.locked .map-node-portrait {
  filter: none;
}

.map-node-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  line-height: 1;
  background: rgba(20, 20, 30, 0.92);
  border: 1px solid rgba(255,255,255,0.25);
  z-index: 4;
}
.map-node.completed .map-node-badge {
  background: rgba(0, 200, 83, 0.9);
  border-color: rgba(255,255,255,0.5);
  color: white;
}
.map-node.locked .map-node-badge {
  background: rgba(20, 20, 30, 0.95);
  color: rgba(255,255,255,0.8);
}

.map-node-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}
.map-node-label .name {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: white;
  background: rgba(10, 12, 20, 0.85);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.12);
}
.map-node.node-mini-boss .map-node-label .name { color: #ff8a8a; border-color: rgba(255, 82, 82, 0.4); }
.map-node.node-final-boss .map-node-label .name { color: #ffe070; border-color: rgba(255, 215, 0, 0.4); }
.map-node-label .stars {
  display: flex;
  gap: 1px;
  font-size: 0.7rem;
  line-height: 1;
}
.map-node-label .stars .star.earned { color: #ffd600; }
.map-node-label .stars .star.empty { color: rgba(255,255,255,0.25); }

/* Act bands: translucent horizontal tints behind each act's mission nodes,
   plus a centered chapter heading floating at the band's top edge. Tints
   are colored to suggest thematic depth (Act 1 sea/teal, Act 2 storm/amber,
   Act 3 cosmic/purple). */
.campaign-world-map .act-band {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
  border-top: 1px dashed rgba(255,255,255,0.18);
  border-bottom: 1px dashed rgba(255,255,255,0.18);
}
/* Act bands: color tint removed per design feedback. Kept as thin dashed
   dividers so acts still read as distinct chapter panels. */
.campaign-world-map .act-band[data-act="1"],
.campaign-world-map .act-band[data-act="2"],
.campaign-world-map .act-band[data-act="3"] {
  background: transparent;
  box-shadow: none;
}

.campaign-world-map .act-chapter {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  white-space: nowrap;
  z-index: 3;
  background: rgba(10, 12, 22, 0.92);
  border: 1px solid rgba(255, 215, 0, 0.55);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.25);
  pointer-events: none;
}
.campaign-world-map .act-chapter-num {
  color: #ffd600;
}
.campaign-world-map .act-chapter-name {
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  letter-spacing: 0.18em;
}
.campaign-world-map .act-chapter[data-act="1"] { border-color: rgba(0, 188, 212, 0.65); box-shadow: 0 0 14px rgba(0, 188, 212, 0.3); }
.campaign-world-map .act-chapter[data-act="1"] .act-chapter-num { color: #4dd0e1; }
.campaign-world-map .act-chapter[data-act="2"] { border-color: rgba(255, 143, 0, 0.65); box-shadow: 0 0 14px rgba(255, 143, 0, 0.3); }
.campaign-world-map .act-chapter[data-act="2"] .act-chapter-num { color: #ffab40; }
.campaign-world-map .act-chapter[data-act="3"] { border-color: rgba(186, 104, 200, 0.7); box-shadow: 0 0 14px rgba(156, 39, 176, 0.3); }
.campaign-world-map .act-chapter[data-act="3"] .act-chapter-num { color: #ce93d8; }

/* Floating "▼ START HERE" prompt above mission 1 when no stars earned yet. */
.map-node-begin-prompt {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #0a0a10;
  background: #ffd600;
  padding: 3px 10px;
  border-radius: 3px;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(255, 214, 0, 0.7);
  animation: beginBounce 1.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 6;
}
@keyframes beginBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -4px); }
}

/* Current-mission glow — pulsing gold ring pulls the eye to where you should
   click next. Overrides boss border colors via specificity. */
.map-node.current .map-node-portrait,
.map-node.current.node-mini-boss .map-node-portrait,
.map-node.current.node-final-boss .map-node-portrait {
  border-color: #ffd600;
  border-width: 4px;
  animation: currentPulse 2.2s ease-in-out infinite;
}
.map-node.current .map-node-label .name {
  color: #0a0a10;
  background: #ffd600;
  border-color: #ffd600;
}
@keyframes currentPulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(255, 214, 0, 0.35),
                0 0 22px rgba(255, 214, 0, 0.7),
                0 0 40px rgba(255, 214, 0, 0.35);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 214, 0, 0.45),
                0 0 34px rgba(255, 214, 0, 0.95),
                0 0 60px rgba(255, 214, 0, 0.55);
  }
}

/* Legacy vertical list — kept for fallback / reference */
.campaign-map-scroll {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  padding: 0.5rem 0;
  scrollbar-width: thin;
  scrollbar-color: #ff8f00 #1a1a2e;
}

.campaign-map-scroll::-webkit-scrollbar {
  width: 4px;
}
.campaign-map-scroll::-webkit-scrollbar-track {
  background: #1a1a2e;
}
.campaign-map-scroll::-webkit-scrollbar-thumb {
  background: #ff8f00;
  border-radius: 2px;
}

.campaign-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0.5rem;
}

/* Act Headers */
.campaign-act-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0.75rem 0;
}

.act-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #ff8f00, transparent);
}

.act-name {
  color: #ffab00;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

/* Mission Nodes */
.campaign-mission-node {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: linear-gradient(145deg, rgba(30,30,50,0.8), rgba(20,20,35,0.9));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.campaign-mission-node:not(.locked):hover {
  border-color: var(--primary-light);
  background: linear-gradient(145deg, rgba(40,40,70,0.9), rgba(30,30,55,0.9));
  transform: translateX(4px);
  box-shadow: 0 0 15px rgba(30, 136, 229, 0.2);
}

.campaign-mission-node.locked {
  opacity: 0.4;
  cursor: default;
}

.campaign-mission-node.completed {
  border-color: rgba(0, 200, 83, 0.3);
}

/* Boss Nodes */
.campaign-mission-node.node-mini-boss {
  border-color: rgba(255, 82, 82, 0.5);
  background: linear-gradient(145deg, rgba(60,20,20,0.8), rgba(30,10,10,0.9));
}
.campaign-mission-node.node-mini-boss:not(.locked):hover {
  border-color: #ff5252;
  box-shadow: 0 0 20px rgba(255, 82, 82, 0.3);
}

.campaign-mission-node.node-final-boss {
  border-color: rgba(255, 215, 0, 0.5);
  background: linear-gradient(145deg, rgba(60,40,0,0.8), rgba(30,20,0,0.9));
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.1);
}
.campaign-mission-node.node-final-boss:not(.locked):hover {
  border-color: #ffd700;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.3);
}

.mission-node-number {
  min-width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
}

.node-mini-boss .mission-node-number {
  background: rgba(255, 82, 82, 0.3);
  color: #ff5252;
}
.node-final-boss .mission-node-number {
  background: rgba(255, 215, 0, 0.3);
  color: #ffd700;
  font-size: 1.1rem;
}

.mission-node-info {
  flex: 1;
  min-width: 0;
}

.mission-node-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mission-node-subtitle {
  font-size: 0.55rem;
  color: var(--text-secondary);
  font-style: italic;
}

.mission-node-difficulty {
  font-size: 0.5rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 0.15rem;
}

/* Difficulty Colors */
.difficulty-recruit { color: #4caf50; }
.difficulty-soldier { color: #2196f3; }
.difficulty-veteran { color: #ff9800; }
.difficulty-dangerous { color: #ff5252; }
.difficulty-elite { color: #e040fb; }
.difficulty-legendary { color: #ffd700; text-shadow: 0 0 6px rgba(255,215,0,0.5); }

.mission-node-stars {
  display: flex;
  gap: 0.1rem;
  font-size: 1rem;
}

.star.earned { color: #ffd600; }
.star.empty { color: rgba(255,255,255,0.2); }
.lock-icon { font-size: 1rem; }

/* Path Connectors */
.campaign-path-connector {
  width: 2px;
  height: 12px;
  background: linear-gradient(to bottom, var(--primary-color), var(--primary-light));
  margin: 0;
}
.campaign-path-connector.locked {
  background: rgba(255,255,255,0.1);
}

/* Campaign Buttons */
.campaign-buttons {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  width: 100%;
  justify-content: center;
}

.campaign-reset-btn {
  background: linear-gradient(145deg, #424242, #212121) !important;
  font-size: 0.7rem !important;
  padding: 8px 12px !important;
}

/* ===== Briefing Overlay ===== */
.briefing-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1100;
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease;
}

.briefing-content {
  width: 90%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.5rem;
  background: linear-gradient(145deg, #1a1a2e, #0a0a15);
  border-radius: 12px;
  border: 1px solid var(--primary-color);
  box-shadow: 0 0 30px rgba(30, 136, 229, 0.2);
  text-align: center;
}

.briefing-content.briefing-mini-boss {
  border-color: #ff5252;
  box-shadow: 0 0 40px rgba(255, 82, 82, 0.3);
}

.briefing-content.briefing-final-boss {
  border-color: #ffd700;
  box-shadow: 0 0 50px rgba(255, 215, 0, 0.3);
}

.briefing-boss-tag {
  display: inline-block;
  padding: 0.2rem 0.8rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 0.5rem;
}

.briefing-mini-boss .briefing-boss-tag {
  background: rgba(255, 82, 82, 0.2);
  color: #ff5252;
  border: 1px solid rgba(255, 82, 82, 0.5);
}

.briefing-final-boss .briefing-boss-tag {
  background: rgba(255, 215, 0, 0.2);
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.5);
  animation: bossTagPulse 2s infinite;
}

@keyframes bossTagPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
  50% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); }
}

.briefing-act {
  font-size: 0.6rem;
  color: #ffab00;
  letter-spacing: 0.2em;
  margin-bottom: 0.3rem;
}

.briefing-title {
  font-size: 1.3rem;
  color: var(--text-color);
  margin-bottom: 0.25rem;
}

.briefing-subtitle {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 0.5rem;
}

.briefing-difficulty {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.briefing-text {
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: left;
  padding: 0.75rem;
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  border-left: 3px solid var(--primary-color);
  margin-bottom: 1rem;
  font-family: 'Orbitron', sans-serif;
}

.briefing-mini-boss .briefing-text { border-left-color: #ff5252; }
.briefing-final-boss .briefing-text { border-left-color: #ffd700; }

.briefing-modifiers {
  margin-bottom: 1rem;
}

.modifiers-label {
  font-size: 0.55rem;
  color: var(--text-secondary);
  letter-spacing: 0.2em;
  margin-bottom: 0.4rem;
}

.modifiers-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}

.modifier-tag {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  font-size: 0.6rem;
  color: var(--text-secondary);
}

.briefing-best {
  margin-bottom: 1rem;
}

.best-score {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.best-score .star.earned { font-size: 0.9rem; }

.briefing-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.deploy-btn {
  background: linear-gradient(145deg, #ff8f00, #e65100) !important;
  border: 1px solid #ffab00 !important;
  font-weight: 700;
  letter-spacing: 0.15em;
  min-width: 120px;
}

/* ===== Campaign Debriefing ===== */
.campaign-debrief-content {
  text-align: center;
  max-width: 500px;
  padding: 2rem 1.5rem;
}

.debrief-header h2 {
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}

.debrief-mission-name {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.debrief-stars {
  margin: 1rem 0;
}

.star-display {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.debrief-star {
  font-size: 2.5rem;
  opacity: 0;
  transform: scale(0);
  animation: starReveal 0.5s ease forwards;
}

.debrief-star.earned {
  color: #ffd600;
  text-shadow: 0 0 15px rgba(255, 214, 0, 0.6);
}

.debrief-star:not(.earned) {
  color: rgba(255,255,255,0.15);
}

@keyframes starReveal {
  0% { opacity: 0; transform: scale(0) rotate(-30deg); }
  60% { transform: scale(1.3) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.star-label {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  margin-top: 0.5rem;
  color: #ffab00;
}

.debrief-defeat-msg {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-style: italic;
  margin: 1rem 0;
  padding: 0.5rem;
}

.final-victory-text {
  font-size: 1.8rem;
  background: linear-gradient(to right, #ffd700, #ff6d00, #ffd700);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.2em;
  margin-bottom: 0.5rem;
  animation: finalVictoryGlow 2s infinite;
}

@keyframes finalVictoryGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}

.final-victory-msg {
  font-size: 0.7rem;
  line-height: 1.6;
  color: #ffd700;
  padding: 0.75rem;
  margin: 0.75rem 0;
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 6px;
}

.campaign-next-btn {
  background: linear-gradient(145deg, #ff8f00, #e65100) !important;
  font-weight: 700;
}

.debrief-mini-boss .debrief-header h2 { color: #ff5252; }
.debrief-final-boss .debrief-header h2 { color: #ffd700; }

/* ===== Turn Timer ===== */
.turn-timer {
  width: 80%;
  max-width: 500px;
  margin: 0.3rem auto;
  height: 22px;
  background: rgba(0,0,0,0.4);
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.12);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset;
}

.turn-timer.hidden { display: none; }
.turn-timer.paused .turn-timer-bar { background: rgba(255,255,255,0.05); transition: none; }

.turn-timer-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
  border-radius: 10px;
  transition: width 1s linear;
}

.turn-timer.warning .turn-timer-bar {
  background: linear-gradient(90deg, #ff9800, #ffb74d);
}

.turn-timer.critical .turn-timer-bar {
  background: linear-gradient(90deg, #ff1744, #ff5252);
  animation: timerPulse 0.5s infinite;
}

@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.turn-timer-text {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: white;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 0 4px rgba(0,0,0,0.6);
  pointer-events: none;
}

/* ===== Campaign Modifier Visual Effects ===== */

/* Shield Deflection */
.shield-deflect {
  animation: shieldDeflect 1.2s ease !important;
  z-index: 10;
}

@keyframes shieldDeflect {
  0% { background: rgba(100, 181, 246, 0.8); transform: scale(1); box-shadow: 0 0 20px rgba(100, 181, 246, 0.8); }
  25% { background: rgba(100, 181, 246, 1); transform: scale(1.3); box-shadow: 0 0 30px rgba(100, 181, 246, 1); }
  50% { background: rgba(100, 181, 246, 0.6); transform: scale(1.1); }
  100% { background: transparent; transform: scale(1); box-shadow: none; }
}

/* Mine Explosion */
.mine-exploded {
  animation: mineExplode 0.8s ease !important;
}

@keyframes mineExplode {
  0% { background: #ff1744; transform: scale(1); }
  20% { background: #ff6d00; transform: scale(1.5); box-shadow: 0 0 30px rgba(255, 109, 0, 0.8); }
  40% { background: #ffd600; transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Fogged Cell - intentionally no visual overrides so fogged cells look
   identical to unattacked cells, forcing memory-based play */
.cell.fogged {}

/* Decayed Hit (hit faded) */
.cell.decayed {
  background: rgba(255, 82, 82, 0.1) !important;
  color: rgba(255,255,255,0.2) !important;
  font-size: 0.7rem;
  border-color: rgba(255, 82, 82, 0.15) !important;
}

/* ===== Enemy Portraits ===== */

/* Campaign map node portrait (legacy list + new world map both use this class) */
.mission-node-portrait {
  width: 3.5rem;
  height: 3.5rem;
  min-width: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
}
/* Locked missions keep full-color portraits — the lock badge and the absence
   of the pulsing-gold "current" ring are enough to communicate status. No
   filter applied. */
.locked .mission-node-portrait {
  filter: none;
}
.node-mini-boss .mission-node-portrait {
  border-color: rgba(255, 82, 82, 0.6);
  box-shadow: 0 0 10px rgba(255, 82, 82, 0.3);
}
.node-final-boss .mission-node-portrait {
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}

/* Briefing portrait */
.briefing-portrait-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.5rem;
}
.briefing-portrait {
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
.briefing-mini-boss .briefing-portrait {
  border-color: rgba(255, 82, 82, 0.5);
  box-shadow: 0 0 20px rgba(255, 82, 82, 0.3);
}
.briefing-final-boss .briefing-portrait {
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.4);
  width: 14rem;
  height: 14rem;
}
.briefing-enemy-name {
  margin-top: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Combat HUD portrait */
.combat-portrait {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  border: 1px solid rgba(255,255,255,0.3);
}

/* Debriefing portrait */
.debrief-portrait {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 0.5rem;
  display: block;
  border: 3px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.debrief-portrait.defeated {
  filter: grayscale(0.6) brightness(0.7);
  border-color: rgba(255, 82, 82, 0.4);
  box-shadow: 0 0 15px rgba(255, 82, 82, 0.3);
}
.defeat-overlay .debrief-portrait {
  filter: none;
  border-color: rgba(255, 82, 82, 0.5);
  box-shadow: 0 0 20px rgba(255, 82, 82, 0.4);
}

/* ===== Campaign Responsive ===== */
@media (max-width: 480px) {
  .campaign-content { padding: 1rem; max-width: 95%; }
  .campaign-title { font-size: 1.4rem; }
  .briefing-content { padding: 1rem; }
  .briefing-title { font-size: 1.1rem; }
  .briefing-text { font-size: 0.65rem; }
  .debrief-star { font-size: 2rem; }
}

/* === Laptop+ (≥1100px): sidebar layout ===
   Placed at end of file so it reliably overrides base rules defined later
   (e.g. .fleet-dock at line ~2050, .ship-counter at line ~2330). Keeps the
   vertical top-to-bottom layer metaphor (Space→Sky→Sea→Underwater) while
   moving HUD elements into fixed left/right sidebars to fill previously
   wasted horizontal space. */
@media (min-width: 1100px) {
  :root {
    --cell-size: 32px;
  }

  .game-header { padding: 0.3rem 1rem; }
  .timer { font-size: 0.85em; padding: 3px 7px; }

  /* Win counter: split children into fixed left/right cards. */
  .win-counter {
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
    height: 0;
    overflow: visible;
    gap: 0;
    pointer-events: none;
  }
  .win-counter .player-score {
    position: fixed;
    top: 60px;
    width: 210px;
    min-width: 0;
    padding: 0.5rem 0.7rem;
    background: linear-gradient(145deg, var(--background-light), var(--background-dark));
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: auto;
    z-index: 50;
  }
  .win-counter .player-score:first-child { left: 15px; }
  .win-counter .player-score:last-child  { right: 15px; }

  /* Fleet dock (placement phase) pinned to left sidebar. */
  .fleet-dock {
    position: fixed;
    top: 210px;
    left: 15px;
    width: 210px;
    max-width: none;
    margin: 0;
    padding: 0.6rem;
    z-index: 40;
  }
  .fleet-dock-label { font-size: 0.6em; margin-bottom: 0.2rem; }
  .fleet-dock-ships {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }
  .dock-ship {
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    justify-content: flex-start;
  }

  /* Ship counters (combat): split to left/right sidebars. */
  .ship-counter {
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
    gap: 0;
    pointer-events: none;
  }
  .ship-counter .ship-counter-side {
    position: fixed;
    top: 210px;
    width: 210px;
    padding: 0.5rem 0.7rem;
    background: linear-gradient(145deg, var(--background-light), var(--background-dark));
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: auto;
    z-index: 40;
  }
  .ship-counter #playerShipCounter   { left: 15px; }
  .ship-counter #opponentShipCounter { right: 15px; }

  /* Commentary: narrower, centered. Hide duplicate gameInfo on laptop. */
  .commentary-box {
    max-width: 620px;
    padding: 0.35rem 0.8rem;
    margin: 0.25rem auto;
    min-height: 1.8rem;
    font-size: 0.88em;
  }
  #gameInfo { display: none; }

  /* Central boards: two columns side-by-side, 4 layers vertical each. */
  .game-container {
    gap: 1rem;
    padding: 0.3rem;
    margin: 0.25rem auto;
    max-width: 620px;
    justify-content: center;
  }
  .layer-container {
    padding: 0.5rem 0.7rem;
  }
  .layer-container h2 {
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
  }
  .boards-wrapper { gap: 0.5rem; }
  .layer-label {
    font-size: 0.65rem;
    padding: 2px 6px;
    margin-bottom: 0.15rem;
  }
  .board { padding: 6px; gap: 3px; }

  /* Game controls: pinned bottom-left sidebar, vertical button stack. */
  .game-controls {
    position: fixed;
    left: 15px;
    bottom: 15px;
    width: 210px;
    max-width: none;
    margin: 0;
    padding: 0.5rem;
    flex-direction: column;
    gap: 6px;
    z-index: 30;
  }
  .game-controls .primary-controls,
  .game-controls .new-game-controls {
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }
  .game-controls .control-button {
    width: 100%;
    padding: 7px 10px;
    font-size: 0.78em;
    justify-content: center;
    gap: 6px;
  }
  .game-controls .button-icon { font-size: 1em; }
}