/* Fish: an aquatic blue/teal palette. Hull artwork is its own creature per
   ship class (see js/themes/fish.js): a whale carrier, a shark battleship, a
   reef fish cruiser, a moray eel submarine and a baitfish destroyer. */
:root[data-theme="fish"] {
  --page-bg: #eaf5f6;
  --water: #cdeaf0;
  --water-border: #8fc4d1;
  --ship: #3f6b73;
  --hit: #e2603f;
  --hit-wash: rgba(226, 96, 63, 0.55);
  --sunk: #0d3b3f;
  --sunk-wash: rgba(4, 30, 33, 0.55);
  --sunk-wash-edge: rgba(4, 30, 33, 0.65);
  --miss: #cfe3e6;
  --ink: #0c2d31;
  --muted: #3f6b73;
  --preview-ok: #a4e0c9;
  --preview-ok-edge: #1f8f6b;
  --preview-bad: #f2b3a3;
  --preview-bad-edge: #c0392b;
  --reject-bg: #ff9d85;
  --surface-bg: #ffffff;
  --surface-bg-hover: #eaf7f8;
  --surface-bg-active: #d7eef1;
  --water-hover: #b7dee6;
  --attached-bg: #dff3f5;
  --attached-ring: rgba(12, 45, 49, 0.2);
  --panel-shadow: rgba(6, 40, 44, 0.14);
  --panel-radius: 10px;
  --win-color: #1f8f6b;
  --lose-color: #a02f1f;
}

/* One colour per creature. Whale reads blue-gray, shark reads plain gray,
   reef fish gets the one warm, saturated hue in the set, eel reads olive
   green and the small darting destroyer reads deep teal-cyan. All five stay
   dark enough to carry white text for the tray badge. */
:root[data-theme="fish"] .ship-carrier {
  --ship-color: #4a6f96;
}

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

:root[data-theme="fish"] .ship-cruiser {
  --ship-color: #c9692a;
}

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

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

/* A faint shimmering crosshatch of near horizontal lines, low enough contrast
   to stay well behind the grid lines, hit/miss markers and boat art. Only
   paints open water: the hit, miss, sunk and over-boat states all cover it
   with their own background. */
:root[data-theme="fish"] .cell:not(.hit):not(.miss):not(.sunk):not(.over-boat) {
  background-image: repeating-linear-gradient(
      4deg,
      rgba(255, 255, 255, 0.2) 0px,
      rgba(255, 255, 255, 0.2) 1px,
      transparent 1px,
      transparent 9px
    ),
    repeating-linear-gradient(
      -4deg,
      rgba(255, 255, 255, 0.14) 0px,
      rgba(255, 255, 255, 0.14) 1px,
      transparent 1px,
      transparent 9px
    );
}

/* Fish has no separate explosion style hit effect: a thrown harpoon replaces
   the default X on both a fresh hit and a sunk cell, and the marker landing
   is the whole of the feedback. Small barbed spearhead, a shaft and a tail
   fletching, white so it stays legible over both the hit wash and the sunk
   wash. */
:root[data-theme="fish"] .cell.hit::after,
:root[data-theme="fish"] .cell.sunk::after {
  content: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20width='16'%20height='16'%3E%3Cpath%20d='M12%201%20L15%208%20L9%208%20Z'%20fill='white'/%3E%3Cpath%20d='M12%208%20L12%2021'%20stroke='white'%20stroke-width='2.4'%20stroke-linecap='round'/%3E%3Cpath%20d='M9%208%20L5%2012'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'/%3E%3Cpath%20d='M15%208%20L19%2012'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'/%3E%3Cpath%20d='M9%2021%20L12%2018%20L15%2021'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E");
}