/* Classic palette, the default theme. Every other theme redefines this same
   set of custom properties under its own [data-theme="x"] selector; nothing
   outside the css/themes/ files references a theme by name, so adding a
   theme only ever means one more file plus one more <link> in index.html. */
:root[data-theme="classic"] {
  --page-bg: #f0f4f8;
  --water: #dbe9f4;
  --water-border: #b7cfe0;
  --ship: #5b6b7a;
  --hit: #e0553c;
  --hit-wash: rgba(224, 85, 60, 0.55);
  --sunk: #7a1f14;
  --sunk-wash: rgba(0, 0, 0, 0.4);
  --sunk-wash-edge: rgba(0, 0, 0, 0.5);
  --miss: #cfd8e3;
  --ink: #1a2634;
  --muted: #5b6b7a;
  --preview-ok: #a7ddbd;
  --preview-ok-edge: #2f8f5b;
  --preview-bad: #f2b3a8;
  --preview-bad-edge: #c0392b;
  --reject-bg: #ffb3b3;
  --surface-bg: #ffffff;
  --surface-bg-hover: #eef4fa;
  --surface-bg-active: #dfeaf5;
  --water-hover: #c7ddee;
  --attached-bg: #e6eff8;
  --attached-ring: rgba(26, 38, 52, 0.18);
  --panel-shadow: rgba(0, 0, 0, 0.12);
  --panel-radius: 10px;
  --win-color: #1f7a3d;
  --lose-color: #7a1f14;
}

/* One hull colour per ship, so a cell, a tray entry and the cursor ghost can
   all pick it up from the same place. Five clearly separated hues, each
   dark enough to carry white text. */
:root[data-theme="classic"] .ship-carrier {
  --ship-color: #7a5bd0;
}

:root[data-theme="classic"] .ship-battleship {
  --ship-color: #2f7ec4;
}

:root[data-theme="classic"] .ship-cruiser {
  --ship-color: #17967a;
}

:root[data-theme="classic"] .ship-submarine {
  --ship-color: #bd7f16;
}

:root[data-theme="classic"] .ship-destroyer {
  --ship-color: #c94f88;
}

/* Faint diagonal ripple, 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="classic"] .cell:not(.hit):not(.miss):not(.sunk):not(.over-boat) {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.35) 0px,
    rgba(255, 255, 255, 0.35) 1px,
    transparent 1px,
    transparent 8px
  );
}

/* A plain naval explosion: a bright flash that blooms out and fades. */
@keyframes hit-fx-classic-anim {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 214, 140, 0.95);
  }
  100% {
    box-shadow: 0 0 26px 14px rgba(255, 214, 140, 0);
  }
}

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