/* Spaceship: dark deep space palette, distinct from Hardcore War's gunmetal
   despite both being dark themes. One craft per ship class (see
   js/themes/spaceship.js: destroyer an interceptor, cruiser a cargo
   shuttle, submarine a corvette, battleship a cruiser class warship,
   carrier a dreadnought). */
:root[data-theme="spaceship"] {
  --page-bg: #0b0f1a;
  --water: #141b2e;
  --water-border: #2a3550;
  --ship: #4a5a7a;
  --hit: #ff4d6d;
  --hit-wash: rgba(255, 77, 109, 0.55);
  --sunk: #2a0e1c;
  --sunk-wash: rgba(0, 0, 0, 0.6);
  --sunk-wash-edge: rgba(0, 0, 0, 0.7);
  --miss: #232c42;
  --ink: #e4e9f7;
  --muted: #8b96b8;
  --preview-ok: #2f6b5a;
  --preview-ok-edge: #4fd8a8;
  --preview-bad: #6b2a3a;
  --preview-bad-edge: #ff4d6d;
  --reject-bg: #ff4d6d;
  --surface-bg: #161d30;
  --surface-bg-hover: #1e2740;
  --surface-bg-active: #283252;
  --water-hover: #1c2540;
  --attached-bg: #232d4a;
  --attached-ring: rgba(79, 216, 168, 0.35);
  --panel-shadow: rgba(0, 0, 0, 0.55);
  --panel-radius: 6px;
  --win-color: #4fd8a8;
  --lose-color: #ff4d6d;
}

/* One hull colour per craft. Also used by the ship tray's badge, so all
   five stay legible against a dark background with white text. */
:root[data-theme="spaceship"] .ship-carrier {
  --ship-color: #3a4a7a;
}

:root[data-theme="spaceship"] .ship-battleship {
  --ship-color: #5a3a7a;
}

:root[data-theme="spaceship"] .ship-cruiser {
  --ship-color: #4a6b5a;
}

:root[data-theme="spaceship"] .ship-submarine {
  --ship-color: #6b4a3a;
}

:root[data-theme="spaceship"] .ship-destroyer {
  --ship-color: #2f7a8f;
}

/* A starfield: two layers of small dots at different scale and opacity, low
   enough contrast against the already dark background that grid lines,
   markers and ship art all stay clearly legible over it. */
:root[data-theme="spaceship"] .cell:not(.hit):not(.miss):not(.sunk):not(.over-boat) {
  background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1.3px),
    radial-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1.3px),
    radial-gradient(rgba(255, 255, 255, 0.18) 0.8px, transparent 1px);
  background-size: 17px 17px, 11px 11px, 7px 7px;
  background-position: 2px 3px, 8px 1px, 4px 9px;
}

/* A laser/plasma blast: sharp and cool coloured (cyan into magenta) instead
   of the warm orange bursts every other theme uses. */
@keyframes hit-fx-spaceship-anim {
  0% {
    box-shadow: 0 0 0 0 rgba(120, 240, 255, 1);
  }
  35% {
    box-shadow: 0 0 18px 8px rgba(120, 240, 255, 0.85);
  }
  100% {
    box-shadow: 0 0 26px 16px rgba(210, 90, 255, 0);
  }
}

:root[data-theme="spaceship"] .cell.hit-fx-spaceship {
  animation: hit-fx-spaceship-anim 0.4s ease-out;
}