:root {
  --bg: #101418; --panel: #1b2027; --line: #2c3a4a; --text: #e8ecef;
  --dim: #8a939c; --accent: #5aa9e6; --danger: #d04040;
  --light: #ede8d8; --dark: #6e7b62;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: #101418; color: #e8ecef;
  font: 16px/1.5 system-ui, -apple-system, sans-serif;
}
header { padding: 1.6rem 2rem 0.6rem; }
h1 { margin: 0; font-size: 1.5rem; letter-spacing: 0.02em; }
.sub { margin: 0.4rem 0 0; color: #8a939c; max-width: 42rem; }
main {
  display: grid; grid-template-columns: minmax(320px, 560px) 1fr;
  gap: 1.6rem; padding: 1.2rem 2rem 3rem; align-items: start;
}
@media (max-width: 860px) { main { grid-template-columns: 1fr; } }

.board-host { width: 100%; aspect-ratio: 1; }
.board { width: 100%; height: 100%; border-radius: 6px; }
rect.light { fill: #ede8d8; }
rect.dark { fill: #6e7b62; }
/* The move that produced this position. Dimmer than a selection and drawn
   under it: it is context, not something you are about to act on. */
rect.light.lastmove { fill: #b9c48a; }
rect.dark.lastmove { fill: #8a9a5e; }
rect.selected { fill: #c8b45a; }
rect.pending { fill: #9aa8c8; }
text.piece {
  font-size: 46px; text-anchor: middle; dominant-baseline: central;
  pointer-events: all; user-select: none;
}
text.coord { font-size: 11px; fill: #33383a; opacity: 0.75; user-select: none; }
circle.target { fill: #2b3a2b; opacity: 0.45; }
circle.capture { fill: none; stroke: #2b3a2b; stroke-width: 5; opacity: 0.45; }

.status { margin: 0.9rem 0 0; font-size: 1.05rem; }
.colour { margin: 0.2rem 0 0; color: #8a939c; font-size: 0.9rem; }

.side { display: grid; gap: 1rem; }
.panel { background: #1b2027; border-radius: 10px; padding: 1rem 1.1rem; }
.panel h2 { margin: 0 0 0.7rem; font-size: 0.85rem; text-transform: uppercase;
            letter-spacing: 0.08em; color: #8a939c; }
button {
  background: #2c3a4a; color: #e8ecef; border: 0; border-radius: 7px;
  padding: 0.6rem 1rem; font: inherit; cursor: pointer;
}
button:hover { background: #35485c; }
button:disabled { opacity: 0.4; cursor: default; }
button.danger { background: #3a2426; color: #e6a0a0; }
button.danger:hover:not(:disabled) { background: #4d2c2f; }
.join-row { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
#code {
  flex: 1; background: #101418; border: 1px solid #2c3a4a; border-radius: 7px;
  color: #e8ecef; font: 1.3rem/1 ui-monospace, monospace; letter-spacing: 0.3em;
  padding: 0.55rem 0.7rem; text-transform: uppercase; min-width: 0;
}
.hint { color: #8a939c; font-size: 0.82rem; margin: 0.6rem 0 0; }
.games { list-style: none; margin: 0; padding: 0; }
.games li {
  padding: 0.5rem 0.6rem; border-radius: 6px; cursor: pointer;
  font-family: ui-monospace, monospace; font-size: 0.9rem;
}
.games li:hover { background: #2c3a4a; }
.games li.your-turn { color: #7fd39a; }
.games li.empty { color: #8a939c; cursor: default; font-family: inherit; }
.games li.empty:hover { background: none; }
.moves { font-family: ui-monospace, monospace; font-size: 0.85rem;
         color: #8a939c; word-break: break-all; margin: 0 0 0.9rem; min-height: 3rem; }

.promotion {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: grid; place-items: center;
}
.promotion.hidden { display: none; }
.promotion-inner {
  background: #1b2027; border-radius: 12px; padding: 1.5rem; display: grid;
  gap: 0.5rem; min-width: 16rem;
}
.promotion-inner h2 { margin: 0 0 0.4rem; font-size: 1rem; }

/* Both clocks, to both players: a clock you cannot see your opponent's half
   of tells you nothing. */
.control-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.control-row span { color: var(--dim); font-size: 0.85rem; }
.control-row select {
  background: #1b2027; color: #e8ecef; border: 1px solid #2a323c;
  border-radius: 6px; padding: 6px 8px; font: inherit;
}
.clocks { display: flex; gap: 10px; margin: 10px 0; }
.clock {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
  background: #1b2027; border: 2px solid transparent;
  border-radius: 8px; padding: 8px 10px;
}
.clock .who { color: var(--dim); font-size: 0.75rem; text-transform: uppercase; }
.clock .time { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
/* The running one is the one to look at, so it is the one that is lit. */
.clock.running { border-color: var(--accent); }
/* Under thirty seconds. Colour rather than a number change, because by then
   nobody is reading the digits. */
.clock.low .time { color: var(--danger); }

/* --- Battleship ---------------------------------------------------------- */
.bs-main { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.bs-grids { display: flex; gap: 24px; flex-wrap: wrap; }
.bs-grid-wrap h2 { font-size: 0.9rem; color: var(--dim); margin: 0 0 8px; }
.bs-grid {
  display: grid; grid-template-columns: repeat(10, 30px);
  grid-auto-rows: 30px; gap: 2px;
}
.bs-count { color: var(--dim); font-size: 0.85rem; margin-top: 8px;
            font-variant-numeric: tabular-nums; }
.cell {
  background: #16202b; border: 1px solid #223040; border-radius: 3px;
  padding: 0; cursor: default;
}
/* Your own ships. Only ever drawn on your own waters - there is no state in
   which this client knows where the other fleet is. */
.cell.ship { background: #35485c; }
/* A shot that found something, on either grid. */
.cell.struck { background: var(--danger); }
.cell.splash { background: #1d2b38; box-shadow: inset 0 0 0 6px #16202b; }
/* Squares you can still fire at, while it is your turn. */
.cell.live { cursor: pointer; border-color: var(--accent); }
.cell.live:hover { background: #1f3242; }