/* ═══════════════════════════════════════════════════════════════════════════
   Battleship — black and green, the house theme.

   The one rule that is not cosmetic:

       [hidden] { display: none !important; }

   Every screen and overlay in this game is toggled with the `hidden` attribute
   rather than a class, because `hidden` is what assistive technology reads. This
   line is what makes it actually hide something that a `display` rule would
   otherwise win against — and in this game the thing being hidden is a fleet.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #0a0a0a;
  --surface: #121212;
  --surface2: #181818;
  --line: #242424;
  --text: #e8e8e8;
  --dim: #9a9a9a;
  --green: #1db954;
  --green-dark: #158a3e;
  --hit: #ef4444;
  --miss: #4b5563;
  --sunk: #7f1d1d;
  --ship: #1db954;
  --heat: #22d3ee;
}

/* ── Light mode ─────────────────────────────────────────────────────────────
   Battleship was the LAST page in the room without a light palette, so even
   once it gained a theme bootstrap it would have had nothing to switch to.

   The game colours deliberately stay put: a hit, a sunk ship and an untouched
   ship have to read the same in both themes or the board stops being glanceable.
   The two that must move are the miss grey (it has to stay visible against a
   light board) and the board's own colours, which are the only places in this
   file that do not go through a variable.
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg: #f4f6f4;
  --surface: #ffffff;
  --surface2: #f5f5f5;
  --line: #d5dad5;
  --text: #121212;
  --dim: #5c635c;
  --green-dark: #0f7a34;
  --miss: #b9c0c9;
}
[data-theme="light"] .cell { background: #eceeec; }
[data-theme="light"] .cell[data-state="miss"] { color: #2b323b; }
[data-theme="light"] .cell[data-state="blocked"] {
  background: repeating-linear-gradient(45deg, #dfe3df, #dfe3df 4px, #eef0ee, #eef0ee 8px);
}
[data-theme="light"] .cell[data-prob]::after { color: #121212; text-shadow: none; }

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100%;
}

#app { max-width: 1080px; margin: 0 auto; padding: 16px; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 0 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-icon { font-size: 28px; color: var(--green); }
.topbar h1 { margin: 0; font-size: 20px; letter-spacing: 0.5px; }
.tag { margin: 2px 0 0; color: var(--dim); font-size: 12px; }

.screen { display: none; }
.screen.active { display: block; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.panel h2 { margin: 0 0 10px; font-size: 15px; color: var(--green); letter-spacing: 0.4px; }
.panel h3 { margin: 14px 0 6px; font-size: 13px; color: var(--dim); font-weight: 600; }
.panel.pass { text-align: center; padding: 48px 16px; }

.hint, .note { color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.note { min-height: 18px; color: var(--heat); }
.readout { color: var(--green); font-variant-numeric: tabular-nums; }

.settings { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.settings label { color: var(--dim); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.settings label.check { gap: 6px; }

select, input.code {
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font-size: 13px;
}
input.code { width: 130px; letter-spacing: 3px; text-align: center; }

.buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.buttons.online { margin-top: 10px; }

button {
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
button:hover { border-color: var(--green); color: var(--green); }
button.primary { background: var(--green); border-color: var(--green); color: #04170a; }
button.primary:hover { background: var(--green-dark); color: #04170a; }
button.ghost { background: transparent; }

/* ── boards ─────────────────────────────────────────────────────────────── */

.board-wrap { overflow-x: auto; }
.board {
  display: grid;
  gap: 3px;
  margin: 10px 0;
  touch-action: manipulation;
}
.cell {
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0e0e0e;
  color: var(--dim);
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  position: relative;
}
.cell:hover { border-color: var(--green); }
.cell[data-state="ship"] { background: var(--ship); border-color: var(--ship); }
.cell[data-state="hit"] { background: var(--hit); border-color: var(--hit); color: #fff; }
.cell[data-state="sunk"] { background: var(--sunk); border-color: var(--hit); color: #fff; }
.cell[data-state="miss"] { background: var(--miss); border-color: var(--miss); color: #fff; }
.cell[data-state="blocked"] { background: repeating-linear-gradient(45deg, #1a1a1a, #1a1a1a 4px, #141414 4px, #141414 8px); }
.cell[data-prob]::after {
  content: attr(data-prob);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: #eaffef; text-shadow: 0 0 3px #000;
}
.cell.heat { background: rgba(34, 211, 238, var(--p, 0)); }
.cell.last-shot { outline: 2px solid var(--green); outline-offset: 1px; }
.cell.optimal { outline: 2px dashed var(--green); outline-offset: 1px; }

/* ── roster ─────────────────────────────────────────────────────────────── */

.roster { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.roster li {
  background: var(--surface2); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; color: var(--dim);
}
.roster li.sunk { border-color: var(--hit); color: var(--hit); text-decoration: line-through; }
.roster li .pips { color: var(--green); letter-spacing: 1px; }

/* ── log, turn, over ────────────────────────────────────────────────────── */

.shotlog { margin: 0; padding-left: 18px; color: var(--dim); font-size: 12.5px; max-height: 150px; overflow-y: auto; }
.shotlog li.hit { color: var(--hit); }
.shotlog li.sunk { color: var(--hit); font-weight: 700; }
.turn { margin: 0 0 6px; font-size: 14px; color: var(--green); font-weight: 600; }
.panel.over { border-color: var(--green); }
.over h2 { color: var(--green); }

.first-shots { margin: 8px 0 0; padding-left: 18px; color: var(--dim); font-size: 12.5px; }

.game-columns { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 820px) {
  .game-columns { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .cell { width: 28px; height: 28px; }
}