:root {
  --bg: #0a0a0a;
  --panel: #111;
  --ink: #e0e0e0;
  --muted: #888;
  --accent: #00ff9d;
  --cyan: #a0f0ff;
  --hit: #ff6b6b;
  --miss: #3a4a5a;
  --ship: #1e3d38;
  --line: #222;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: Inter, system-ui, sans-serif; }
a { color: var(--cyan); text-decoration: none; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 28px 20px 60px; }
header { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 28px; }
h1 { margin: 0; font-size: 1.8rem; background: linear-gradient(90deg, #a0f0ff, #fff, #a0f0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tag { color: var(--muted); font-size: 0.95rem; }
.panel { background: var(--panel); border-radius: 16px; padding: 24px; margin-bottom: 20px; }
button, .btn {
  background: var(--accent); color: #111; border: 0; border-radius: 10px; padding: 12px 18px;
  font-weight: 700; cursor: pointer; font-family: inherit;
}
button.ghost { background: #1a1a1a; color: var(--ink); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
input {
  background: #0a0a0a; border: 1px solid #333; color: white; border-radius: 10px;
  padding: 12px 14px; font-size: 1rem; font-family: inherit;
}
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.error { color: var(--hit); }
.status { color: var(--cyan); min-height: 1.4em; }
.boards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 820px) { .boards { grid-template-columns: 1fr; } }
.board-wrap { position: relative; }
.board-wrap h2 { margin: 0 0 10px; font-size: 1rem; color: var(--muted); font-weight: 600; }
.grid {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px;
  width: min(100%, 420px); aspect-ratio: 1;
  overflow: visible;
}
.cell {
  background: #161616; border-radius: 4px; cursor: pointer; position: relative;
  overflow: visible;
}
.cell:hover { outline: 1px solid var(--cyan); }
.cell.ship { background: var(--ship); }
.cell.preview { background: #0d3; opacity: 0.45; }
.cell.bad { background: var(--hit); opacity: 0.45; }
.cell.miss { background: var(--miss); }
.cell.hit { background: var(--hit); }
.colheads {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
  width: min(100%, 420px);
  margin-bottom: 4px;
  color: #555;
  font-size: 0.7rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cell.ship-carrier { background: #0f5c48; }
.cell.ship-battleship { background: #1a3f5c; }
.cell.ship-cruiser { background: #5c4a12; }
.cell.ship-submarine { background: #3a1a5c; }
.cell.ship-destroyer { background: #5c1a1a; }
.cell.revealed {
  box-shadow: inset 0 0 0 1px rgba(160, 240, 255, 0.35);
}
.cell.wreck { background: #8b1e1e !important; }
.cell.reveal-anim {
  animation: revealShip 0.55s cubic-bezier(0.2, 0.9, 0.2, 1) backwards;
}
.board-wrap.reveal-mode .grid {
  animation: radarSweep 0.9s ease;
}
@keyframes revealShip {
  0% { opacity: 0; transform: scale(0.35); filter: brightness(3); }
  55% { opacity: 1; transform: scale(1.12); filter: brightness(1.4); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@keyframes radarSweep {
  0% { filter: brightness(0.25) saturate(0.4); }
  100% { filter: brightness(1) saturate(1); }
}
.cell.mine.hit::after, .cell.opp.hit::after {
  content: ''; position: absolute; inset: 28%; background: #111; border-radius: 50%;
}
.fleet { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.ship-chip { border: 1px solid #333; border-radius: 999px; padding: 6px 12px; color: var(--muted); font-size: 0.85rem; }
.ship-chip.on { border-color: var(--accent); color: var(--accent); }
.ship-chip.done { opacity: 0.4; }
.log { color: var(--muted); font-size: 0.9rem; line-height: 1.5; max-height: 160px; overflow: auto; }
.code { font-family: ui-monospace, monospace; color: var(--accent); letter-spacing: 0.12em; font-size: 1.4rem; }
.hidden { display: none !important; }
.floater {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  pointer-events: none;
  white-space: nowrap;
  z-index: 6;
  text-shadow: 0 1px 6px #000, 0 0 12px rgba(0,0,0,0.8);
  animation: floatOut 1.15s ease-out forwards;
}
.floater-hit { color: #ff6b6b; }
.floater-miss { color: #a0f0ff; }
.floater-sunk { color: #00ff9d; font-size: 0.82rem; }
@keyframes floatOut {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(0.55); }
  18% { opacity: 1; transform: translate(-50%, -70%) scale(1.18); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(1); }
}