/* ==========================================================================
   sea-battle.css — sea battle's arena (src/assets/js/games/sea-battle/view.mjs),
   inside the table games.css draws: two seas as hairline grids, the ships and
   the shots on them, each sea's fleet as a row of little ships, and a line for
   the last shot on it. Every class here is .sb-*.

   The marks are told apart by shape, never by colour alone: a miss is a small
   round dot, a hit a filled square, a ship afloat a pale bar, a ship sunk a
   grey bar struck through. Green is the square fired at last, and the sea that
   is yours to fire at now; pink is the pointer's; red, briefly, a square pressed
   that was already fired at.
   ========================================================================== */

/* The column the seas are given decides how they lie. Where it holds two (686 design pixels:
   sixteen squares of 36, four gutters and the gap) they are side by side, each under its name and
   its line; with the full 720 the squares are 38. Where it does not they are one over the other,
   their sea first, still on squares of 36 — 325 across with the gutters, inside the 335px column
   of a 375px phone — and the two lines move together to the top, above their sea: what was just
   fired at your fleet is then on screen while you look at theirs, and not a screen further down.
   Narrower columns still get whole squares, a little smaller (the end of this sheet). */
.sb {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14 * var(--s, 1px));
  font-family: var(--font-mono);
  text-align: start;
}
.sb-seas {
  --cell: calc(36 * var(--s, 1px));
  --gut: calc(18 * var(--s, 1px)); /* the row numbers hang in it; as much again on the right, so a sea sits centred */
  --wide: calc(8 * var(--cell) + 1px);
  --line: calc(18 * var(--s, 1px)); /* the height of a sea's line of words */
  display: grid;
  grid-template-columns: auto;
  grid-template-areas: "log1" "log2" "head1" "board1" "head2" "board2";
  justify-content: center;
}
/* A sea is only a grouping: its three parts are placed by the grid above. */
.sb-sea { display: contents; }
.sb-head,
.sb-log,
.sb-board {
  inline-size: var(--wide);
  margin-inline: var(--gut);
}
.sb-sea--theirs .sb-head { grid-area: head1; }
.sb-sea--theirs .sb-log { grid-area: log1; }
.sb-sea--theirs .sb-board { grid-area: board1; }
.sb-sea--mine .sb-head { grid-area: head2; }
.sb-sea--mine .sb-log { grid-area: log2; }
.sb-sea--mine .sb-board { grid-area: board2; }
/* One over the other: the two lines, a breath, their sea, a longer one, yours. Kept tight: on a
   390 × 664 phone, with the page not yet scrolled, the lines and the whole of their sea are on
   screen together. */
.sb-sea--mine .sb-log { margin-block-end: calc(8 * var(--s, 1px)); }
.sb-sea--theirs .sb-board { margin-block-end: calc(20 * var(--s, 1px)); }
@container (min-width: 686px) {
  .sb-seas {
    --line: calc(20 * var(--s, 1px));
    grid-template-columns: auto auto;
    grid-template-areas: "head1 head2" "log1 log2" "board1 board2";
    column-gap: calc(36 * var(--s, 1px));
  }
  .sb-sea--mine .sb-log,
  .sb-sea--theirs .sb-board { margin-block-end: 0; }
}
@container (min-width: 718px) {
  .sb-seas { --cell: calc(38 * var(--s, 1px)); }
}

/* ---- A sea's name, and its line --------------------------------------------------- */
.sb-head {
  block-size: calc(20 * var(--s, 1px));
  font-size: calc(13 * var(--s, 1px));
  line-height: calc(20 * var(--s, 1px));
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
}
/* The word that says their sea is yours to fire at now: green, and gone when it is not. */
.sb-hint {
  color: var(--green);
  white-space: pre;
}
/* The line: the last shot on this sea in words, its fleet at the other end. One reserved height, so
   nothing moves when it is written. Green while that shot is the latest of all, as its square is;
   grey once the other sea has had one since. */
.sb-log {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(8 * var(--s, 1px));
  block-size: var(--line);
  font-size: calc(12 * var(--s, 1px));
  line-height: var(--line);
  color: var(--ink-muted);
  white-space: nowrap;
}
.sb-note {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 150ms ease;
}
.sb-log--now .sb-note { color: var(--green); }

/* ---- The fleet at the end of the line: four little ships, 4 3 3 2 --------------- */
.sb-fleet {
  --unit: calc(8 * var(--s, 1px));
  display: flex;
  align-items: center;
  gap: calc(6 * var(--s, 1px));
  flex: none;
}
/* A ship afloat: a pale bar, a tick between its squares so its length can be counted. */
.sb-bar {
  position: relative;
  display: flex;
  border: 1px solid var(--ink-muted);
  background: color-mix(in srgb, var(--ink) 12%, var(--bg));
}
.sb-bar > i {
  box-sizing: border-box;
  inline-size: var(--unit);
  block-size: var(--unit);
}
.sb-bar > i + i { border-inline-start: 1px solid color-mix(in srgb, var(--ink-muted) 55%, transparent); }
/* A square of yours that has been hit: filled, as on the sea. */
.sb-bar > i.hit { background: var(--ink); }
/* Sunk: grey all through, and struck out. */
.sb-bar--sunk {
  border-color: transparent;
  background: color-mix(in srgb, var(--ink-muted) 38%, var(--bg));
}
.sb-bar--sunk > i,
.sb-bar--sunk > i.hit,
.sb-bar--sunk > i + i {
  background: none;
  border-color: transparent;
}
.sb-bar--sunk::after {
  content: "";
  position: absolute;
  inset-inline: calc(-3 * var(--s, 1px));
  inset-block-start: calc(50% - 0.75 * var(--s, 1px));
  block-size: calc(1.5 * var(--s, 1px));
  background: var(--ink-muted);
}

/* ---- The grid, under its letters and beside its numbers -------------------------- */
.sb-board {
  --lab: calc(16 * var(--s, 1px));
  position: relative;
  padding-block-start: var(--lab);
  font-size: calc(11 * var(--s, 1px));
  color: var(--ink-muted);
  -webkit-user-select: none;
  user-select: none;
}
.sb-cols,
.sb-rows {
  position: absolute;
  display: grid;
  place-items: center;
}
.sb-cols {
  inset-block-start: 0;
  inset-inline-start: 0;
  block-size: var(--lab);
  grid-template-columns: repeat(8, var(--cell));
}
.sb-rows {
  inset-block-start: var(--lab);
  inset-inline-start: calc(-1 * var(--gut));
  inline-size: var(--gut);
  grid-template-rows: repeat(8, var(--cell));
}
/* Hairlines, not boxes: the grid draws its top and left edge, every square its right and bottom. */
.sb-grid {
  --mark: calc(var(--cell) * 0.5); /* a hit's square */
  --inset: calc(var(--cell) * 0.14); /* a ship's bar, in from the lines of its squares */
  position: relative;
  display: grid;
  grid-template: repeat(8, var(--cell)) / repeat(8, var(--cell));
  inline-size: max-content;
  border-block-start: 1px solid var(--hairline);
  border-inline-start: 1px solid var(--hairline);
}
/* Their sea while it is yours to fire at: framed in green. (An overlay, so no line moves.) */
.sb-grid::after {
  content: "";
  position: absolute;
  inset: -1px 0 0 -1px;
  border: 1px solid transparent;
  pointer-events: none;
  z-index: 2;
  transition: border-color 150ms ease;
}
.sb-sea--live .sb-grid::after { border-color: var(--green); }

.sb-cell {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-inline-end: 1px solid var(--hairline);
  border-block-end: 1px solid var(--hairline);
  background: none;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease;
}
/* A square's mark, centred on it (the square's own lines are on its right and bottom). */
.sb-cell::before,
.sb-seg::before {
  position: absolute;
  inset: 0;
  margin: auto;
  box-sizing: border-box;
}
/* A miss: a small round dot. */
.sb-cell[data-mark="o"]::before {
  content: "";
  inline-size: calc(var(--cell) * 0.16);
  block-size: calc(var(--cell) * 0.16);
  border-radius: 50%;
  background: var(--ink-muted);
}
/* A hit: a filled square. */
.sb-cell[data-mark="x"]::before,
.sb-seg--hit::before {
  content: "";
  inline-size: var(--mark);
  block-size: var(--mark);
  background: var(--ink);
}
/* A shot of yours not yet answered: a ring, green because it is the latest thing on the board. */
.sb-cell[data-mark="?"]::before {
  content: "";
  inline-size: calc(var(--cell) * 0.44);
  block-size: calc(var(--cell) * 0.44);
  border: calc(2 * var(--s, 1px)) solid var(--green);
  border-radius: 50%;
}
/* Under a ship laid over the grid the ship draws the mark, not the square. */
.sb-cell.sb-cell--under::before { content: none; }
/* The square fired at last, until the next shot: washed green, its mark green. */
.sb-cell--last { background-color: color-mix(in srgb, var(--green) 13%, transparent); }
.sb-cell--last[data-mark="o"]::before,
.sb-cell--last[data-mark="x"]::before,
.sb-seg--last.sb-seg--hit::before { background: var(--green); }

/* A square already fired at, pressed again: red for a moment (view.mjs takes the class off). */
.sb-cell--no { background-color: color-mix(in srgb, var(--red) 16%, transparent); }

/* Yours to fire at: an untried square takes the pointer, and shows where the shot would go — the
   ring it will become, in pink (only where there is a hover). */
.sb-sea--live .sb-cell[data-mark="."] { cursor: pointer; }
@media (hover: hover) {
  .sb-sea--live .sb-cell[data-mark="."]:hover::before {
    content: "";
    inline-size: calc(var(--cell) * 0.44);
    block-size: calc(var(--cell) * 0.44);
    border: calc(2 * var(--s, 1px)) solid var(--pink);
    border-radius: 50%;
  }
}
/* The keyboard's square: the ring base.css draws, set just inside the square and above the ships. */
.sb-cell:focus-visible {
  outline-offset: calc(-3 * var(--s, 1px));
  z-index: 3;
}

/* ---- Ships laid over the grid ------------------------------------------------------ */
/* One element across a ship's squares, a segment to a square, so a hit sits exactly where the
   square's own mark would. The bar itself is ::before, in from the squares' lines. */
.sb-ship {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--cell);
  grid-auto-rows: var(--cell);
  pointer-events: none;
}
.sb-ship--down { grid-auto-flow: row; }
.sb-ship::before {
  content: "";
  position: absolute;
  inset: var(--inset) calc(var(--inset) + 1px) calc(var(--inset) + 1px) var(--inset);
  border: 1px solid var(--ink-muted);
  background: color-mix(in srgb, var(--ink) 12%, var(--bg));
  transition: background-color 150ms ease, border-color 150ms ease;
}
.sb-seg {
  position: relative;
  box-sizing: border-box;
  border-inline-end: 1px solid transparent;
  border-block-end: 1px solid transparent;
}
/* Sunk: the bar grey all through, its hits gone into it, a line struck along it — plainly not a
   lone hit, and plainly not afloat. All of it in the muted ink: a ship sunk is done with, and the
   darkest marks left on a sea are the hits still to be followed up. The square that sank it keeps
   its green until the next shot. */
.sb-ship--sunk::before {
  border-color: transparent;
  background: color-mix(in srgb, var(--ink-muted) 38%, var(--bg));
}
.sb-ship--sunk .sb-seg--hit:not(.sb-seg--last)::before { content: none; }
.sb-ship--sunk::after {
  content: "";
  position: absolute;
  z-index: 1;
  background: var(--ink-muted);
  inset-inline: calc(var(--inset) - 4 * var(--s, 1px)) calc(var(--inset) - 3 * var(--s, 1px));
  inset-block-start: calc(50% - 1.5 * var(--s, 1px));
  block-size: calc(2 * var(--s, 1px));
  transform-origin: left center;
}
.sb-ship--down.sb-ship--sunk::after {
  inset-inline: auto;
  inset-inline-start: calc(50% - 1.5 * var(--s, 1px));
  inline-size: calc(2 * var(--s, 1px));
  inset-block: calc(var(--inset) - 4 * var(--s, 1px)) calc(var(--inset) - 3 * var(--s, 1px));
  block-size: auto;
  transform-origin: center top;
}

/* ---- A mark arriving (view.mjs adds .sb-pop on the move that made it, and on no other render) ---- */
.sb-cell.sb-pop::before,
.sb-seg.sb-pop::before { animation: sb-in 200ms ease-out; }
@keyframes sb-in {
  from {
    opacity: 0;
    scale: 0.5;
  }
}
/* A ship going down: the line is struck along it. */
.sb-ship.sb-pop::after { animation: sb-strike 240ms ease-out; }
.sb-ship--down.sb-pop::after { animation-name: sb-strike-down; }
@keyframes sb-strike {
  from { transform: scaleX(0); }
}
@keyframes sb-strike-down {
  from { transform: scaleY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sb-cell.sb-pop::before,
  .sb-seg.sb-pop::before,
  .sb-ship.sb-pop::after { animation: none; }
}

/* Forced colours repaint every background as the page's own, and every mark here is a fill: all of
   them would be gone. These keep theirs, in the system's own colours — its text for a miss, a hit
   and a ship's outline, its grey for a ship sunk, its highlight for the square fired at last (ringed
   as well, since the wash behind it is a background too). */
@media (forced-colors: active) {
  .sb-cell::before,
  .sb-seg::before,
  .sb-ship::before,
  .sb-ship::after,
  .sb-bar,
  .sb-bar > i,
  .sb-bar::after { forced-color-adjust: none; }
  .sb-cell[data-mark="o"]::before,
  .sb-cell[data-mark="x"]::before,
  .sb-seg--hit::before,
  .sb-bar > i.hit { background: CanvasText; }
  .sb-ship::before,
  .sb-bar {
    background: Canvas;
    border-color: CanvasText;
  }
  .sb-ship--sunk::before,
  .sb-bar--sunk {
    background: GrayText;
    border-color: GrayText;
  }
  .sb-ship--sunk::after,
  .sb-bar--sunk::after { background: CanvasText; }
  .sb-cell--last[data-mark="o"]::before,
  .sb-cell--last[data-mark="x"]::before,
  .sb-seg--last.sb-seg--hit::before { background: Highlight; }
  .sb-cell[data-mark="?"]::before { border-color: Highlight; }
  .sb-cell--last::after {
    content: "";
    position: absolute;
    inset: calc(2 * var(--s, 1px));
    border: calc(2 * var(--s, 1px)) solid Highlight;
    z-index: 2;
  }
}

/* The keys, where a keyboard is likely (as 24 shows its own during the count-in). */
.sb-keys {
  display: none;
  font-size: calc(12 * var(--s, 1px));
}
@media (hover: hover) and (pointer: fine) {
  .sb-keys { display: block; }
}

/* ---- Narrow columns ------------------------------------------------------------------ */
/* A 360px phone, and a 320px one: the little ships give way too, so the words beside them still
   fit ("they sank your 3 at h6" is the longest there are). */
@container (max-width: 324.98px) {
  .sb-seas { --cell: calc(35 * var(--s, 1px)); }
  .sb-fleet { --unit: calc(7 * var(--s, 1px)); }
}
@container (max-width: 316.98px) {
  .sb-seas { --cell: calc(30 * var(--s, 1px)); }
  .sb-log { font-size: calc(11 * var(--s, 1px)); }
  .sb-fleet {
    --unit: calc(5 * var(--s, 1px));
    gap: calc(4 * var(--s, 1px));
  }
}