/* 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:    #071316;
  --sea-d:  #030A0C;
  --hull:   #0E2126;
  --hull-l: #163038;
  --rivet:  #24474F;
  --paint:  #CFE2E4;
  --signal: #F0A63C;      /* brass */
  --scope:  #35F0A0;      /* phosphor, for the enemy's water */
  --chart:  #9FD4D8;      /* the ink a sea chart is printed in */
  --hit:    #FF5A46;
  --sunk:   #55757C;
  --ok:     #35F0A0;

  --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);
  /* Depth contours, the way a chart draws the shape of the sea floor: closed
     curves at irregular spacing. A ruled grid says spreadsheet. */
  background-image:
    radial-gradient(ellipse 120% 80% at 18% 12%, rgba(53, 240, 160, .05), transparent 60%),
    radial-gradient(ellipse 90% 70% at 88% 78%, rgba(240, 166, 60, .045), transparent 62%),
    repeating-radial-gradient(circle at 12% 88%, transparent 0 58px,
      rgba(159, 212, 216, .035) 58px 59px, transparent 59px 124px),
    repeating-radial-gradient(circle at 92% 8%, transparent 0 74px,
      rgba(159, 212, 216, .028) 74px 75px, transparent 75px 150px);
  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: 999px;
  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: 999px;
  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: 999px;
  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 */

/* The base rule. It was deleted along with the old board styles, which left
   only the wide-screen `grid-template-columns` — a property that does nothing
   to a block element, so the two boards stacked at every width. */
.boards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 18px 0 0;
  align-items: start;
}


/* Two instruments, not two copies of one grid. Your own water is a chart:
   pale ink, ruled, hulls drawn on it. Theirs is a sonar scope: black glass,
   range rings, a trace going round, and nothing on it until something is
   found. */

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

.board {
  position: relative;
  display: grid;
  grid-template-columns: 22px repeat(10, 1fr);
  gap: 2px;
  padding: 10px 12px 12px;
  /* A bezel, not a border: brass rim, glass inside. */
  border-radius: 14px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, .06), transparent 55%),
    var(--hull);
  box-shadow:
    inset 0 0 0 1px rgba(240, 166, 60, .30),
    inset 0 0 26px rgba(0, 0, 0, .65),
    0 10px 30px -12px rgba(0, 0, 0, .8);
  max-width: 480px;
}

.grid-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 22px repeat(10, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}

/* The lettered edge is the first ten flags of the international code, because
   that is what a ship uses for a letter. Drawn in CSS: ten gradients cost
   nothing, ten image requests would cost ten round trips. */
.flag {
  height: 11px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
  align-self: end;
  position: relative;
}

.flag-0 { background: linear-gradient(90deg, #FFF 50%, #1E62C8 50%); }
.flag-1 { background: #D8232A; }
.flag-2 { background: linear-gradient(#1E62C8 20%, #FFF 20% 35%, #D8232A 35% 65%, #FFF 65% 80%, #1E62C8 80%); }
.flag-3 { background: linear-gradient(#F5C518 33%, #1E62C8 33% 67%, #F5C518 67%); }
.flag-4 { background: linear-gradient(#1E62C8 50%, #D8232A 50%); }
.flag-5 { background: #FFF; }
.flag-5::after { content: ""; position: absolute; inset: 20%; background: #D8232A; transform: rotate(45deg); }
.flag-6 { background: repeating-linear-gradient(90deg, #F5C518 0 16.6%, #1E62C8 16.6% 33.3%); }
.flag-7 { background: repeating-linear-gradient(90deg, #FFF 0 25%, #D8232A 25% 50%); }
.flag-8 { background: #F5C518; }
.flag-8::after { content: ""; position: absolute; inset: 26%; border-radius: 50%; background: #111; }
.flag-9 { background: linear-gradient(#1E62C8 30%, #FFF 30% 70%, #1E62C8 70%); }

.rownum {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: .62rem;
  color: rgba(159, 212, 216, .5);
}

.cell {
  appearance: none;
  border: 0;
  padding: 0;
  position: relative;
  aspect-ratio: 1;
  border-radius: 3px;
  cursor: default;
  transition: background .12s ease-out, box-shadow .12s ease-out;
}

#mine .cell {
  background: rgba(159, 212, 216, .06);
  box-shadow: inset 0 0 0 1px rgba(159, 212, 216, .10);
}

#theirs {
  background:
    radial-gradient(circle at 50% 54%, rgba(53, 240, 160, .07), transparent 62%),
    var(--sea-d);
}

#theirs .cell {
  background: rgba(53, 240, 160, .035);
  box-shadow: inset 0 0 0 1px rgba(53, 240, 160, .08);
}

/* Range rings sit under the cells and over the glass. */
#theirs::before {
  content: "";
  position: absolute;
  inset: 34px 12px 12px;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 15%,
    rgba(53, 240, 160, .13) 15% calc(15% + 1px), transparent calc(15% + 1px) 30%);
}

/* The trace only turns while it is your move: a scope sweeping during the
   other side's turn is telling you something is happening when nothing is. */
.board.live::after {
  content: "";
  position: absolute;
  inset: 34px 12px 12px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(53, 240, 160, .30) 0deg, rgba(53, 240, 160, .06) 26deg, transparent 52deg);
  animation: sweep 3.4s linear infinite;
}

@keyframes sweep { to { transform: rotate(360deg); } }

.board.live .cell { cursor: crosshair; }

.board.live .cell:hover:not(.shot) {
  background: rgba(53, 240, 160, .22);
  box-shadow: inset 0 0 0 1px var(--scope), 0 0 12px rgba(53, 240, 160, .45);
}

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

#mine .cell.ship {
  background: linear-gradient(180deg, #2C4D57, #1B343B);
  box-shadow: inset 0 0 0 1px rgba(207, 226, 228, .28);
}

#mine .cell.ship.dead { background: var(--sunk); }

.cell.miss::after {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: rgba(207, 226, 228, .38);
}

/* A hit is a contact: a lit blip, not a cross. */
.cell.hit {
  background: rgba(255, 90, 70, .26);
  box-shadow: inset 0 0 0 1px var(--hit), 0 0 14px rgba(255, 90, 70, .5);
}

.cell.hit::after {
  content: "";
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  background: var(--hit);
  box-shadow: 0 0 10px var(--hit);
}

@media (prefers-reduced-motion: reduce) {
  .board.live::after { animation: none; opacity: .18; }
  .cell { transition: none; }
}

.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: 10px;
  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: 10px;
  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: 10px;
  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: 14px;
  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); }

/* ---------------------------------------------------------------- share */

/* share.js ships markup and no CSS, so a page that does not style these gets
   a row of bare 17px links under a heading — which is what this looked like.
   Squared off rather than pill-shaped, to match everything else here. */
.share { margin: 44px 0 0; }

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

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

.share-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid var(--rivet);
  border-radius: 999px;
  background: var(--hull);
  color: var(--paint);
  font-family: var(--plate);
  font-weight: 500;
  font-size: .86rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .12s ease-out, background .12s ease-out;
}

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

.share-copy,
.share-more { border-color: var(--signal); color: var(--signal); }
.share-copy.done { background: var(--ok); border-color: var(--ok); color: var(--sea-d); }

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

.share-btn { gap: 7px; }
.share-icon { flex: 0 0 auto; }