/* USA: red, white and blue, with a star accent on the title. Hull artwork
   is still Classic's shapes (see js/themes/usa.js) until that gets its own
   distinct silhouettes; the palette, texture and hit effect below are
   already USA specific. */
:root[data-theme="usa"] {
  --page-bg: #eef1f7;
  --water: #cfe0f7;
  --water-border: #93b3dd;
  --ship: #3d5a80;
  --hit: #c8102e;
  --hit-wash: rgba(200, 16, 46, 0.55);
  --sunk: #7a0d1e;
  --sunk-wash: rgba(10, 20, 40, 0.45);
  --sunk-wash-edge: rgba(10, 20, 40, 0.55);
  --miss: #d7dee8;
  --ink: #0a2240;
  --muted: #3d5a80;
  --preview-ok: #b7e4c7;
  --preview-ok-edge: #1f7a3d;
  --preview-bad: #f4b8bd;
  --preview-bad-edge: #c8102e;
  --reject-bg: #ffb3b8;
  --surface-bg: #ffffff;
  --surface-bg-hover: #eaf1fb;
  --surface-bg-active: #d7e6f7;
  --water-hover: #b8d3f2;
  --attached-bg: #dce9fa;
  --attached-ring: rgba(10, 34, 64, 0.22);
  --panel-shadow: rgba(10, 34, 64, 0.15);
  --panel-radius: 10px;
  --win-color: #1f7a3d;
  --lose-color: #b31b2c;
}

:root[data-theme="usa"] .ship-carrier {
  --ship-color: #14315e;
}

:root[data-theme="usa"] .ship-battleship {
  --ship-color: #b31942;
}

:root[data-theme="usa"] .ship-cruiser {
  --ship-color: #3d6ea5;
}

:root[data-theme="usa"] .ship-submarine {
  --ship-color: #7a1f2b;
}

:root[data-theme="usa"] .ship-destroyer {
  --ship-color: #46618f;
}

:root[data-theme="usa"] h1::before,
:root[data-theme="usa"] h1::after {
  content: "\2605";
  color: var(--hit);
  margin: 0 0.5rem;
  font-size: 1.4rem;
  vertical-align: middle;
}

/* Faint white stars scattered over the water, stars-and-stripes without
   drawing an actual flag over the grid. Low contrast on purpose, same
   readability rule as every other theme's texture. */
:root[data-theme="usa"] .cell:not(.hit):not(.miss):not(.sunk):not(.over-boat) {
  background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.5px),
    radial-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1.5px);
  background-size: 13px 13px, 9px 9px;
  background-position: 2px 3px, 7px 9px;
}

/* A firework burst: a ring of colour that expands and fades, red white and
   blue in sequence rather than one flat colour. Punched up from a single
   soft 0 -> 28px/16px glow (which read as a light dispersed haze, not an
   explosion) into a hard flash that jumps straight to a wide, fully opaque
   burst before fading, so the start-to-peak delta actually reads as a hit. */
@keyframes hit-fx-usa-anim {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
  }
  20% {
    box-shadow: 0 0 30px 18px rgba(200, 16, 46, 1);
  }
  55% {
    box-shadow: 0 0 46px 26px rgba(255, 255, 255, 0.9);
  }
  100% {
    box-shadow: 0 0 60px 34px rgba(61, 90, 128, 0);
  }
}

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