/* Bugs: a grass and dirt board instead of water, and one bug per ship class
   (see js/themes/bugs.js: destroyer a beetle, cruiser a stick insect,
   submarine a spider, battleship a centipede, carrier a dragonfly). */
:root[data-theme="bugs"] {
  --page-bg: #f1f4e8;
  --water: #8fa35c;
  --water-border: #6a7d3e;
  --ship: #4a5a2e;
  --hit: #e0553c;
  --hit-wash: rgba(224, 85, 60, 0.6);
  --sunk: #4a2e14;
  --sunk-wash: rgba(30, 22, 8, 0.5);
  --sunk-wash-edge: rgba(30, 22, 8, 0.6);
  --miss: #cdd6b2;
  --ink: #2a2e18;
  --muted: #5c6a3e;
  --preview-ok: #b8e0a0;
  --preview-ok-edge: #3f8f2f;
  --preview-bad: #f0b8a0;
  --preview-bad-edge: #c0392b;
  --reject-bg: #ffb380;
  --surface-bg: #fbfbf2;
  --surface-bg-hover: #eef2df;
  --surface-bg-active: #dfe6c6;
  --water-hover: #7d9450;
  --attached-bg: #e6ecd2;
  --attached-ring: rgba(42, 46, 24, 0.2);
  --panel-shadow: rgba(30, 34, 14, 0.15);
  --panel-radius: 10px;
  --win-color: #3f8f2f;
  --lose-color: #a03a1f;
}

/* One shell/body colour per bug. Also used by the ship tray's badge, so all
   five stay dark enough to carry white text. */
:root[data-theme="bugs"] .ship-carrier {
  --ship-color: #2f7a8f;
}

:root[data-theme="bugs"] .ship-battleship {
  --ship-color: #8a4a1f;
}

:root[data-theme="bugs"] .ship-cruiser {
  --ship-color: #2a2622;
}

:root[data-theme="bugs"] .ship-submarine {
  --ship-color: #4a3324;
}

:root[data-theme="bugs"] .ship-destroyer {
  --ship-color: #5a7a2f;
}

/* Grass blades and dirt speckle, low contrast so grid lines, markers and
   bug art all stay clearly legible. */
:root[data-theme="bugs"] .cell:not(.hit):not(.miss):not(.sunk):not(.over-boat) {
  background-image: repeating-linear-gradient(
      95deg,
      rgba(255, 255, 255, 0.14) 0px,
      rgba(255, 255, 255, 0.14) 1px,
      transparent 1px,
      transparent 5px
    ),
    radial-gradient(rgba(74, 52, 30, 0.2) 1px, transparent 1.5px);
  background-size: 100% 100%, 9px 9px;
  background-position: 0 0, 2px 4px;
}

/* A squash/splat: a hard scale-down flatten cue plus a big burst of
   splatter dots that punch out past the cell and snap back, not a radial
   explosion glow. Peak spread and the squash/overshoot swing are both much
   larger than the light-glow version this replaced, while the whole thing
   still finishes well inside the 900ms window js/ui.js uses to strip the
   effect class. */
@keyframes hit-fx-bugs-anim {
  0% {
    box-shadow: 0 0 0 0 rgba(74, 90, 46, 0.95);
    transform: scale(1);
  }
  35% {
    box-shadow: 0 0 10px 22px rgba(74, 90, 46, 0.75), 16px -12px 0 2px rgba(74, 90, 46, 0.65),
      -16px -10px 0 2px rgba(74, 90, 46, 0.65), 14px 14px 0 2px rgba(74, 90, 46, 0.55),
      -14px 12px 0 2px rgba(74, 90, 46, 0.55);
    transform: scale(0.6, 1.4);
  }
  70% {
    box-shadow: 0 0 6px 30px rgba(74, 90, 46, 0.3), 26px -18px 0 0 rgba(74, 90, 46, 0.2),
      -26px -16px 0 0 rgba(74, 90, 46, 0.2), 22px 20px 0 0 rgba(74, 90, 46, 0.15),
      -22px 18px 0 0 rgba(74, 90, 46, 0.15);
    transform: scale(1.08, 0.92);
  }
  100% {
    box-shadow: 0 0 2px 34px rgba(74, 90, 46, 0), 30px -20px 0 0 rgba(74, 90, 46, 0),
      -30px -18px 0 0 rgba(74, 90, 46, 0), 26px 22px 0 0 rgba(74, 90, 46, 0),
      -26px 20px 0 0 rgba(74, 90, 46, 0);
    transform: scale(1);
  }
}

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