:root {
  --bg: #0b1d2e;
  --panel: #12293f;
  --water: #1d4a73;
  --water-hover: #2a6499;
  --ship: #8a99a8;
  --miss: #cfe3f5;
  --hit: #e8553d;
  --sunk: #5a1d14;
  --ok: #3fbf7f;
  --bad: #d9534f;
  --text: #e8f1f8;
  --cell: clamp(24px, 2.9vw, 38px);
  --glass: rgba(6, 6, 8, 0.8);
  --gold: #c9a227;
  --wide: 1190px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Jost", Futura, "Century Gothic", system-ui, sans-serif;
  background: #050505;
  color: var(--text);
  padding: 16px;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: #050505 url("assets/gunbarrel.svg?v=8") center / cover no-repeat;
}
header {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--wide); margin: 0 auto;
}
h1 { margin: 0; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; }
h2 { font-size: 1rem; margin: 0 0 8px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
button {
  font: inherit; cursor: pointer; border: 1px solid #3c5d7c; border-radius: 6px;
  background: var(--panel); color: var(--text); padding: 6px 12px;
  touch-action: manipulation;
}
button:not(.cell):hover:not(:disabled) { background: #1b3a57; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.primary { background: #2b7bd0; border-color: #2b7bd0; }
button.primary:hover:not(:disabled) { background: #3a8ce3; }

#status {
  text-align: center; font-size: 1.15rem; min-height: 1.5em; letter-spacing: 0.04em;
  max-width: var(--wide); margin: 12px auto; text-shadow: 0 1px 4px #000;
}
#setup-panel {
  max-width: var(--wide); margin: 0 auto 12px; background: var(--glass);
  border-radius: 8px; padding: 12px; display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between; align-items: center;
}
#setup-panel.hidden { display: none; }
.setup-ships, .setup-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#rotate-btn { min-width: 11.5em; }
.ship-choice.selected { outline: 2px solid #ffd54a; }
.ship-choice.placed { text-decoration: line-through; opacity: 0.5; }

.battle-area {
  display: flex; gap: 24px; justify-content: center; align-items: flex-start;
  max-width: var(--wide); margin: 0 auto;
}
.boat-key { flex: 0 0 200px; background: var(--glass); border-radius: 10px; padding: 12px; }
.boat-key ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.boat-key li { display: flex; flex-direction: column; }
.boat-key svg { width: 150px; height: 55px; }
.boat-key .boat-name { color: var(--text); font-weight: 600; letter-spacing: 0.05em; }
.boat-key .boat-meta { color: var(--text); opacity: 0.65; font-size: 0.78rem; }
.boards { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.board-wrap { background: var(--glass); border-radius: 10px; padding: 12px; }
@media (max-width: 1100px) {
  :root { --cell: clamp(24px, 3.6vw, 38px); }
  .battle-area { flex-direction: column; align-items: center; }
  .boat-key { flex: none; width: 100%; }
  .boat-key ul { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .boat-key li { width: 160px; }
}
.board {
  display: grid;
  grid-template-columns: repeat(11, var(--cell));
  grid-template-rows: repeat(11, var(--cell));
  gap: 2px; user-select: none;
}
.label {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; opacity: 0.7;
}
.cell {
  --fill: var(--water);
  background: var(--fill); border-radius: 3px; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; padding: 0; border: none;
}
.cell.ship { --fill: var(--ship-color, var(--ship)); }
.cell.join-up { border-top-left-radius: 0; border-top-right-radius: 0; }
.cell.join-down { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cell.join-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cell.join-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cell.preview-ok { --fill: var(--preview-color, var(--ok)); opacity: 0.6; }
.cell.preview-bad { --fill: var(--bad); }
.cell.miss::after {
  content: ""; width: 30%; height: 30%; border-radius: 50%; background: var(--miss);
}
.cell.hit { --fill: var(--hit); }
.cell.hit::after, .cell.sunk::after {
  content: "\2715"; color: #fff; font-size: 1.1em; line-height: 1;
}
#computer-board .cell.hit::after, #computer-board .cell.sunk::after {
  content: "\1F3ED"; color: initial; font-size: 1.15em; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.cell.sunk { --fill: var(--sunk); }
.cell.sunk::after { opacity: 0.55; }
.no-emoji #computer-board .cell.hit::after, .no-emoji #computer-board .cell.sunk::after {
  content: ""; width: 68%; height: 68%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M2 21V3h4v8l5-3v3l5-3v3l6-3.5V21zM5 15h3v3H5zm5.5 0h3v3h-3zm5.5 0h3v3h-3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
#player-board .cell.ship.hit, #player-board .cell.ship.sunk { --fill: var(--ship-color); }
#player-board .cell.ship.sunk { filter: brightness(0.5); }
#player-board .cell.hit::after, #player-board .cell.sunk::after {
  color: var(--hit); font-size: 1.35em; text-shadow: 0 0 2px #000; opacity: 1;
}
@media (hover: hover) {
  #computer-board.active .cell.targetable:hover { --fill: var(--water-hover); cursor: crosshair; }
}
.cell.last-shot { outline: 2px solid #ffd54a; outline-offset: -2px; z-index: 1; }

.fleet-status { list-style: none; padding: 0; margin: 8px 0 0; font-size: 0.9rem; }
.swatch {
  display: inline-block; width: 0.8em; height: 0.8em; border-radius: 2px;
  margin-right: 6px; vertical-align: -0.05em;
}
.fleet-status li.sunk { text-decoration: line-through; color: #ff8b78; }

.log-wrap { max-width: var(--wide); margin: 20px auto 0; }
#log { max-height: 180px; overflow-y: auto; background: var(--glass); border-radius: 8px; padding: 8px 8px 8px 36px; margin: 0; font-size: 0.9rem; }
#log li.sunk { color: #ffb4a6; font-weight: bold; }

.overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
}
.overlay.hidden { display: none; }
.overlay-card {
  background: #0b0b0d; border: 1px solid var(--gold); padding: 24px 32px; border-radius: 10px; text-align: center;
}
.overlay-card h2 { font-size: 1.8rem; }