/* Sushi Battleship.
 *
 * Zero colour literals: every colour in here is a token from client/ui/base.css, which is what
 * makes both themes work and what the contrast specs rely on.
 *
 * Every square state is marked TWICE — a colour and a glyph. A grid where hit and miss differ only
 * by fill is a grid two of the couples who play this cannot read, and it is also unreadable over a
 * video call on a phone at arm's length, which is how this game is actually going to be played. */

.su-h1 { font: 800 clamp(26px, 5vw, 38px)/1.15 var(--font); margin: 0; text-wrap: balance; }
.su-lead { color: var(--ink-soft); margin: 0; max-width: 52ch; }

/* ── the board ─────────────────────────────────────────────────────────────────────────────── */

.su-grid {
  display: grid;
  grid-template-columns: repeat(var(--su-side, 8), 1fr);
  gap: 3px;
  width: min(100%, var(--su-max, 440px));
  margin-inline: auto;
}
.su-grid--sm { --su-max: 220px; gap: 2px; }

.su-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  min-width: 0;
  font: 700 clamp(9px, 2.4vw, 14px)/1 var(--mono);
  border: 1px solid var(--line);
  border-radius: var(--r0);
  background: var(--paper-raised);
  color: var(--ink-faint);
  cursor: pointer;
}
.su-cell:disabled { cursor: default; }
.su-cell:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; z-index: 1; }

/* A boat of yours, still afloat. `--me` is this player's own colour, so your fleet is your colour
   on your screen and there is never a moment where you have to remember which side you are. */
.su-cell.is-boat { background: var(--me-tint); border-color: var(--me); color: var(--on-me-tint); }

/* Hit, but the boat is still up. */
.su-cell.is-hit { background: var(--red-tint); border-color: var(--red); color: var(--on-red-tint); }
.su-cell.is-hit::after { content: '✕'; }

/* Gone. Eaten, or about to be. */
.su-cell.is-sunk { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.su-cell.is-sunk::after { content: '🍣'; font-size: clamp(8px, 2vw, 12px); }

/* A shot that found water. */
.su-cell.is-miss { color: var(--ink-faint); }
.su-cell.is-miss::after { content: '·'; font-size: 1.6em; line-height: 0; }

/* Placement preview, on the screen where you are still hiding things. */
.su-cell.is-ok { background: var(--green-tint); border-color: var(--green); }
.su-cell.is-no { background: var(--red-tint); border-color: var(--red); }

.su-board { display: flex; flex-direction: column; gap: 8px; }
.su-board--mine .su-grid { --su-max: 250px; }

/* `.scene` sets `align-items: center`, so every flex child shrinks to fit its own content. For a
   grid of `1fr` columns that content is nothing, and a ten-column board renders about eighty pixels
   wide — which is exactly how it first shipped to the screenshot pass. Everything that owns a width
   has to say so; everything else (the buttons, the headings) still centres. */
.su-board, .su-boards, .su-place__board, .su-tray, .su-banner, .su-pend,
.su-log, .su-fair, .su-tally, .su-result__boards { align-self: stretch; width: 100%; }

.su-boards { display: flex; flex-wrap: wrap; gap: var(--stack); justify-content: center; align-items: flex-start; }
.su-boards .su-board--theirs { flex: 1 1 300px; min-width: 0; }
.su-boards .su-board--mine { flex: 0 1 250px; min-width: 0; }

/* ── plate ─────────────────────────────────────────────────────────────────────────────────── */

.su-count { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.su-count__row { display: flex; align-items: center; gap: 18px; }
.su-count__n { font: 800 clamp(48px, 12vw, 76px)/1 var(--font); font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: center; }
.su-count__b { font-size: 24px; min-width: var(--tap); min-height: var(--tap); }
.su-count__unit { font: 600 13px/1 var(--mono); letter-spacing: .08em; color: var(--ink-faint); text-transform: uppercase; }
.su-quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.su-quick__b { cursor: pointer; }
.su-quick__b.is-on { background: var(--me-tint); border-color: var(--me); color: var(--on-me-tint); }

.su-fleetline { font: 600 15px/1.5 var(--font); color: var(--ink-soft); text-align: center; }
.su-theirs { font: 600 15px/1.5 var(--mono); color: var(--ink); text-align: center; }
.su-fair {
  border: 1px solid var(--yellow); background: var(--yellow-tint); color: var(--on-yellow-tint);
  border-radius: var(--r-card); padding: 12px 14px; font-size: 15px;
}
.su-waiting { color: var(--ink-soft); text-align: center; font-size: 15px; }
.su-left { color: var(--ink-soft); text-align: center; font-size: 15px; }

/* ── placing ───────────────────────────────────────────────────────────────────────────────── */

.su-place__board { display: flex; justify-content: center; }
.su-place__tools { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.su-tray { display: flex; flex-direction: column; gap: 8px; }
.su-tray__b, .su-tray__placed {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--paper-raised); padding: 10px 12px; text-align: left; width: 100%;
}
.su-tray__b { cursor: pointer; color: var(--ink); font: 600 15px/1.3 var(--font); }
.su-tray__b.is-on { border-color: var(--me); background: var(--me-tint); color: var(--on-me-tint); }
.su-tray__pips { display: inline-flex; gap: 3px; flex: none; }
.su-tray__pip { width: 12px; height: 12px; border-radius: var(--r0); border: 1px solid var(--line-strong); background: var(--paper); }
.su-tray__pip.is-boat { background: var(--me); border-color: var(--me); }
.su-tray__t { flex: 1; min-width: 0; }
.su-tray__name { flex: 1; min-width: 0; }
.su-tray__up { flex: none; }

/* ── firing ────────────────────────────────────────────────────────────────────────────────── */

.su-banner {
  border-radius: var(--r-card); padding: 12px 14px; text-align: center;
  font: 700 clamp(16px, 3.4vw, 20px)/1.3 var(--font);
  border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink-soft);
}
.su-banner.is-you { border-color: var(--me); background: var(--me-tint); color: var(--on-me-tint); }

/* The mouthful. Loud on purpose — it is the only thing on the screen that matters until it clears. */
.su-pend {
  display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center;
  border: 2px solid var(--yellow); background: var(--yellow-tint); color: var(--on-yellow-tint);
}
.su-pend__t { font: 800 clamp(22px, 5vw, 32px)/1.15 var(--font); }
.su-pend__s { font-size: 15px; }

/* Two plates, two chips. One run-on line of four numbers is what this was first, and neither
   person could find their own half of it at a glance. */
.su-tally { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.su-tally .sh-chip { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.su-tally .sh-chip--me { background: var(--me-tint); border-color: var(--me); color: var(--on-me-tint); }

.su-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.su-log__i { font: 400 13px/1.5 var(--mono); color: var(--ink-faint); }
.su-log__i:first-child { color: var(--ink-soft); }

/* ── result ────────────────────────────────────────────────────────────────────────────────── */

.su-result { text-align: center; }
.su-result__art { font-size: 46px; line-height: 1; }
.su-result .su-lead { margin-inline: auto; }
.su-result__boards { --cards-min: 200px; }
.su-result__boards .sh-card { display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* ── the still board on the start screen ───────────────────────────────────────────────────── */

/* Sized in pixels, not a percentage of the card: the card is 4:3 and carries its own caption at
   the bottom, so a preview that scales with WIDTH grows past the bottom edge on a wide screen. */
.su-pv { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.su-pv__art { font-size: 28px; line-height: 1; }
.su-pv__grid { display: grid; grid-template-columns: repeat(5, 26px); gap: 3px; }
.su-pv__c {
  aspect-ratio: 1; border-radius: var(--r0);
  border: 1px solid var(--line); background: var(--paper-raised);
  display: grid; place-items: center; font: 700 10px/1 var(--mono);
}
.su-pv__c.boat { background: var(--pink-tint); border-color: var(--pink); }
.su-pv__c.hit { background: var(--red-tint); border-color: var(--red); color: var(--on-red-tint); }
.su-pv__c.hit::after { content: '✕'; }
.su-pv__c.miss { color: var(--ink-faint); }
.su-pv__c.miss::after { content: '·'; font-size: 1.6em; line-height: 0; }

@media (prefers-reduced-motion: no-preference) {
  .su-cell.is-hit, .su-cell.is-sunk { transition: background-color .18s ease, border-color .18s ease; }
}