/* Battleship with real ships.
 *
 * Referent: warship paint and a chart table. Flat greys with one signal
 * colour, hard edges, nothing rounded that a shipyard would not round. The
 * board is a chart and the panel beside it is a recognition sheet — the thing
 * a lookout held up against a silhouette on the horizon.
 *
 * No warm off-white, no book serif, no earth tones — PLAYBOOK §12.
 */

:root {
  --sea:    #0E1A24;
  --sea-d:  #081118;
  --hull:   #16242F;
  --hull-l: #21333F;
  --rivet:  #2D4351;
  --paint:  #C8D4DC;
  --signal: #E8873A;
  --hit:    #D9443B;
  --sunk:   #6B7B87;
  --ok:     #3FB98A;

  --gutter: 18px;
  --wrap:   1240px;

  --plate:  Oswald, system-ui, sans-serif;
  --body:   Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:   "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

/* An author `display` rule outranks the browser's own [hidden] { display:none },
   so any element that is both flex/grid AND hidden at runtime stays visible.
   The Scatter/Ready controls shipped that way: hidden="true" in the DOM and
   plainly on screen throughout the game. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body.deck {
  margin: 0;
  padding: 0 0 64px;
  background-color: var(--sea);
  /* Plated steel: a seam every 56px, and a faint sheen across it. */
  background-image:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  color: var(--paint);
  font-family: var(--body);
  line-height: 1.5;
  overflow-x: hidden;
}

main { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ------------------------------------------------------------------- top */

.top { max-width: var(--wrap); margin: 0 auto; padding: 40px var(--gutter) 6px; }

h1 {
  margin: 0;
  font-family: var(--plate);
  font-weight: 700;
  font-size: clamp(1.9rem, 7vw, 3rem);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--paint);
}

.intro { margin: 12px 0 0; max-width: 46ch; color: rgba(200, 212, 220, .74); }

/* ----------------------------------------------------------------- setup */

.setup { margin: 32px 0 0; }

.pick { margin: 0 0 22px; }

.pick-label {
  margin: 0 0 10px;
  font-family: var(--body);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--signal);
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  appearance: none;
  padding: 11px 16px;
  border: 1px solid var(--rivet);
  border-radius: 2px;
  background: var(--hull);
  color: var(--paint);
  font-family: var(--plate);
  font-weight: 500;
  font-size: .96rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .12s ease-out, background .12s ease-out;
}

.chip:hover { border-color: var(--paint); }
.chip[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: var(--sea-d); }
.chip:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.chip .yr {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: 0;
  opacity: .66;
  text-transform: none;
}

.go {
  appearance: none;
  margin: 6px 0 0;
  padding: 14px 30px;
  border: 0;
  border-radius: 2px;
  background: var(--signal);
  color: var(--sea-d);
  font-family: var(--plate);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.go:active { transform: translateY(2px); }
.go:focus-visible { outline: 2px solid var(--paint); outline-offset: 3px; }

.solo {
  margin: 16px 0 0;
  font-size: .84rem;
  color: rgba(200, 212, 220, .5);
}

/* ------------------------------------------------------------------ game */

.game { margin: 26px 0 0; }

.status {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--rivet);
  padding-bottom: 10px;
}

.phase {
  margin: 0;
  font-family: var(--plate);
  font-weight: 500;
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Tabular figures, because a countdown that reflows as it ticks drags the
   whole line around once a second. */
.clock {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  font-variant-numeric: tabular-nums;
  color: var(--signal);
}

.clock.low { color: var(--hit); }

.tools { display: flex; gap: 8px; margin: 14px 0 0; }

.tool {
  appearance: none;
  padding: 10px 16px;
  border: 1px solid var(--rivet);
  border-radius: 2px;
  background: var(--hull);
  color: var(--paint);
  font-family: var(--plate);
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}

.tool:hover { border-color: var(--paint); }
.tool-go { background: var(--ok); border-color: var(--ok); color: var(--sea-d); }
.tool:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* --------------------------------------------------------------- boards */

.boards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 18px 0 0;
}

.board-name {
  margin: 0 0 8px;
  font-family: var(--body);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(200, 212, 220, .58);
}

.board {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  background: var(--rivet);
  border: 2px solid var(--rivet);
  aspect-ratio: 1;
  max-width: 460px;
}

.cell {
  appearance: none;
  border: 0;
  padding: 0;
  background: #10202B;
  position: relative;
  cursor: default;
}

.board.live .cell { cursor: crosshair; }
.board.live .cell:hover:not(.shot) { background: #1B3242; }
.cell:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }

/* A ship of your own: plated, not a flat block, so a five-cell hull reads as
   one object rather than five squares that happen to touch. */
.cell.ship { background: var(--hull-l); box-shadow: inset 0 0 0 1px rgba(200, 212, 220, .14); }
.cell.ship.dead { background: var(--sunk); }

.cell.miss::after {
  content: "";
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: rgba(200, 212, 220, .45);
}

.cell.hit::after,
.cell.hit::before {
  content: "";
  position: absolute;
  inset: 44% 12%;
  background: var(--hit);
}

.cell.hit::after { transform: rotate(45deg); }
.cell.hit::before { transform: rotate(-45deg); }

.cell.placing { background: var(--signal); }

.log {
  margin: 18px 0 0;
  min-height: 1.5em;
  font-family: var(--mono);
  font-size: .9rem;
  color: var(--signal);
}

/* ------------------------------------------------------- recognition sheet */

.sheet { margin: 34px 0 0; }

.sheet h2 {
  margin: 0 0 12px;
  font-family: var(--plate);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--signal);
}

.ships {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 178px), 1fr));
  gap: 10px;
}

.ship-card {
  background: var(--hull);
  border: 1px solid var(--rivet);
  border-radius: 2px;
  overflow: hidden;
}

/* The photograph is a real one of a real ship and its colours are whatever the
   archive scan is, so no text is ever set over it. */
.ship-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--sea-d);
}

.ship-body { padding: 10px 12px 12px; }

.ship-name {
  margin: 0;
  font-family: var(--plate);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: .01em;
}

.ship-class {
  margin: 2px 0 8px;
  font-size: .76rem;
  color: rgba(200, 212, 220, .56);
}

.ship-specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 10px;
  margin: 0;
  font-size: .76rem;
}

.ship-specs dt { color: rgba(200, 212, 220, .48); }
.ship-specs dd { margin: 0; font-family: var(--mono); font-size: .72rem; }

.ship-state {
  display: inline-block;
  margin: 8px 0 0;
  padding: 2px 7px;
  font-family: var(--body);
  font-weight: 600;
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ok);
  box-shadow: inset 0 0 0 1px currentColor;
}

.ship-card.is-sunk { opacity: .58; }
.ship-card.is-sunk .ship-state { color: var(--hit); }
.ship-card.is-sunk .ship-photo { filter: grayscale(1); }


/* ------------------------------------------------------------ era themes */

/* One palette per century. The hull greys stay close together on purpose —
   this is paint, not decoration — and what actually moves is the signal
   colour and how cold the water is. */
body[data-era="ironclad"] {
  --sea: #1A1613; --sea-d: #0E0B09; --hull: #251F1A; --hull-l: #332A22;
  --rivet: #463A2E; --paint: #DCD2C0; --signal: #C8922F;
}

body[data-era="wwi"] {
  --sea: #15191C; --sea-d: #0B0E10; --hull: #212629; --hull-l: #2D3439;
  --rivet: #3D464C; --paint: #CBD2D6; --signal: #B8632F;
}

body[data-era="wwii"] {
  --sea: #0E1A24; --sea-d: #081118; --hull: #16242F; --hull-l: #21333F;
  --rivet: #2D4351; --paint: #C8D4DC; --signal: #E8873A;
}

body[data-era="modern"] {
  --sea: #0A1618; --sea-d: #050D0E; --hull: #102226; --hull-l: #183036;
  --rivet: #234248; --paint: #C2D6D8; --signal: #32C8B4;
}

/* A photograph of a ship that served in the chosen era, behind everything and
   well behind a scrim. It is atmosphere; no text is ever read against it. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-out;
  filter: grayscale(.55) contrast(1.05);
}

.backdrop.on { opacity: .17; }

.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--sea) 0%, rgba(0,0,0,.25) 45%, var(--sea) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .backdrop { transition: none; }
}

/* --------------------------------------------------------------- picker */

.choose { margin: 26px 0 0; }

.choose-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--rivet);
  padding-bottom: 10px;
}

.chips.joiner { margin: 0 0 18px; }
.chip.is-on { background: var(--signal); border-color: var(--signal); color: var(--sea-d); }

/* The five hulls as a row of buttons: the pips say how long each one is, so
   the shape of the fleet is legible before a single ship is chosen. */
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 8px;
  margin: 16px 0 0;
}

.slot {
  appearance: none;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--rivet);
  border-radius: 2px;
  background: var(--hull);
  color: var(--paint);
  cursor: pointer;
}

.slot.is-active { border-color: var(--signal); }
.slot.is-filled { background: var(--hull-l); }
.slot:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.slot-pips { display: flex; gap: 2px; margin-bottom: 6px; }
.slot-pips i { width: 9px; height: 9px; background: var(--rivet); }
.slot.is-filled .slot-pips i { background: var(--signal); }

.slot-kind {
  display: block;
  font-family: var(--body);
  font-weight: 600;
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(200, 212, 220, .5);
}

.slot-ship {
  display: block;
  font-family: var(--plate);
  font-size: .98rem;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finder { margin: 20px 0 0; }

.finder-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

#search {
  flex: 1 1 220px;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--rivet);
  border-radius: 2px;
  background: var(--sea-d);
  color: var(--paint);
  font-family: var(--body);
  font-size: .95rem;
}

#search:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }

.filters { display: flex; flex-wrap: wrap; gap: 6px; }

.filter {
  appearance: none;
  padding: 7px 11px;
  border: 1px solid var(--rivet);
  border-radius: 2px;
  background: transparent;
  color: rgba(200, 212, 220, .78);
  font-family: var(--mono);
  font-size: .76rem;
  cursor: pointer;
}

.filter.is-on { background: var(--signal); border-color: var(--signal); color: var(--sea-d); }

.finder-count {
  margin: 10px 0 8px;
  font-family: var(--mono);
  font-size: .76rem;
  color: rgba(200, 212, 220, .5);
}

.candidates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 8px;
  max-height: 460px;
  overflow-y: auto;
}

.cand-btn {
  appearance: none;
  display: flex;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 0;
  border: 1px solid var(--rivet);
  border-radius: 2px;
  background: var(--hull);
  color: var(--paint);
  cursor: pointer;
  overflow: hidden;
}

.cand-btn:hover { border-color: var(--paint); }
.cand-btn.is-chosen { border-color: var(--signal); background: var(--hull-l); }
.cand-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }

.cand-photo {
  width: 84px;
  height: 64px;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--sea-d);
}

.cand-body { padding: 8px 10px 8px 0; min-width: 0; }

.cand-name {
  display: block;
  font-family: var(--plate);
  font-size: .94rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cand-cls,
.cand-facts {
  display: block;
  font-size: .7rem;
  color: rgba(200, 212, 220, .52);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cand-facts { font-family: var(--mono); margin-top: 3px; }

/* ------------------------------------------------------------ room strip */

.room {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: .82rem;
  color: rgba(200, 212, 220, .66);
}

.watchers { color: var(--signal); }

/* The two fleets stack rather than sitting side by side, so each one gets the
   whole width and lays its ships out in as many columns as fit. Side by side
   gave each fleet half the screen, which came out as two cards and a scroll
   for five ships — the recognition sheet is the reason to be here and it was
   the thing you had to go looking for. */
.fleets { display: block; }

.sheet + .sheet { margin-top: 30px; }

.picker-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; }

/* ------------------------------------------------------------------ deep */

.deep { margin: 52px 0 0; max-width: 640px; }

.deep-eyebrow {
  margin: 0;
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--signal);
}

.deep-head {
  margin: 6px 0 18px;
  font-family: var(--plate);
  font-weight: 500;
  font-size: clamp(1.2rem, 4.4vw, 1.6rem);
  text-transform: uppercase;
}

.deep-item { border-top: 1px solid var(--rivet); }
.deep-item:last-of-type { border-bottom: 1px solid var(--rivet); }

.deep-item summary {
  padding: 14px 28px 14px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.deep-item summary::-webkit-details-marker { display: none; }

.deep-item summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--plate);
  color: var(--signal);
}

.deep-item[open] summary::after { content: "\2013"; }

.deep-body { padding: 0 0 16px; color: rgba(200, 212, 220, .8); }
.deep-body p { margin: 0 0 12px; }
.deep-body b { color: var(--signal); font-weight: 600; }

/* ---------------------------------------------------------------- footer */

footer { margin: 52px 0 0; max-width: 640px; }
.foot-nav { display: flex; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--paint); font-size: .88rem; }

.credit,
.disclaimer { margin: 12px 0 0; font-size: .78rem; color: rgba(200, 212, 220, .46); }

/* ------------------------------------------------------------------ wide */

@media (min-width: 760px) {
  .boards { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .chip, .go, .tool { transition: none; }
}

/* --------------------------------------------------------------- account */

.account { display: flex; gap: 8px; align-items: center; margin: 16px 0 0; flex-wrap: wrap; }

.me {
  font-family: var(--plate);
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--signal);
}

/* A panel rather than a modal: no focus trap to get wrong, and closing it is
   a button rather than a gesture nobody finds. */
.sheetpanel {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 16px 16px;
  background: rgba(5, 10, 14, .78);
  overflow-y: auto;
}

.panel {
  width: min(100%, 460px);
  background: var(--hull);
  border: 1px solid var(--rivet);
  border-radius: 2px;
  padding: 20px;
}

.panel-head {
  margin: 0 0 14px;
  font-family: var(--plate);
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.panel-sub {
  margin: 18px 0 6px;
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(200, 212, 220, .5);
}

.panel-note { margin: 10px 0 0; font-size: .82rem; color: rgba(200, 212, 220, .62); }

.panel-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; align-items: center; }

.field { display: block; margin: 0 0 12px; }

.field span {
  display: block;
  margin-bottom: 4px;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(200, 212, 220, .55);
}

.field input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--rivet);
  border-radius: 2px;
  background: var(--sea-d);
  color: var(--paint);
  font-family: var(--body);
  font-size: 1rem;
}

.field input:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }

/* Shown once and never again, so it has to be impossible to miss. */
.recovery {
  margin: 16px 0 0;
  padding: 12px;
  border: 1px dashed var(--signal);
  font-family: var(--mono);
  font-size: .86rem;
  color: var(--signal);
  word-break: break-word;
}

.tallies { margin: 0; font-family: var(--mono); font-size: .9rem; color: var(--signal); }

.foes, .games { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: .8rem; }
.foes li, .games li { padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.games li.win { color: var(--ok); }
.games li.loss { color: rgba(200, 212, 220, .6); }