:root{
  --cell:36px;
  --gap:3px;
  --bg:#f4f9ff;
  --panel-bg:#ffffff;
  --accent:#1f6feb;
  --ship:#6c88b8;
  --hit:#d9534f;
  --miss:#cfd8e3;
  --labels:#3a556f;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, Arial, sans-serif;
  background:var(--bg);
  color:#122230;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px;
}
header{ text-align:center; margin-bottom:8px; }
.subtitle{ color:#25455f; font-size:13px; margin:4px 0 16px; }

.boards{ display:flex; gap:48px; align-items:flex-start; margin-bottom:14px; }
.panel{ display:flex; flex-direction:column; align-items:center; }
.board-wrapper{ background:var(--panel-bg); padding:10px; border-radius:8px; box-shadow:0 2px 10px rgba(18,34,48,0.06); }
.board{
  display:grid;
  grid-template-columns: 30px repeat(10, var(--cell));
  grid-template-rows: 30px repeat(10, var(--cell));
  gap: var(--gap);
  user-select:none;
}
.cell{ width:var(--cell); height:var(--cell); background:#eaf3fb; border:1px solid #9db0c9; display:block; }
.cell:hover{ filter:brightness(0.98); cursor:pointer; }
.label{ display:flex; align-items:center; justify-content:center; font-weight:600; color:var(--labels); }
.empty{ background:transparent; border:none; }

/* states */
.cell.ship{ background: var(--ship); } /* visible on player's board */
.cell.hit{ background: var(--hit) !important; }
.cell.miss{ background: var(--miss) !important; opacity:0.9; }

/* controls */
.controls{ display:flex; gap:8px; align-items:center; flex-direction:column; }
.controls > *{ margin:6px 0; }
#coord-input{ padding:8px 10px; font-size:15px; width:110px; text-transform:uppercase; border-radius:6px; border:1px solid #c7d7ea; background:#fff;}
button{ padding:8px 12px; font-size:14px; border-radius:6px; border:none; background:var(--accent); color:#fff; cursor:pointer; }
button:disabled{ opacity:0.6; cursor:not-allowed; }
#message{ min-height:22px; font-weight:700; color:#10335a; text-align:center; margin-top:4px; }
.counters{ color:#234; font-size:14px; margin-top:6px; }

/* responsive */
@media (max-width:880px){
  .boards{ flex-direction:column; gap:20px; align-items:center; }
}