.board-wrap { display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start; }
.board { display:inline-block; }

.grid { display:grid; gap:2px; user-select:none; }

.cell{
  width: 28px; height: 28px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid #ccc; border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
  background: #fff;
}
.cell.given { cursor: not-allowed; opacity: .85; }
.cell.water { background: #f3f6ff; }
.cell.ship  { background: #fff3f3; }

.targets{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color:#444; }
.targets .row { height: 28px; display:flex; align-items:center; justify-content:flex-start; }
.targets .col { width: 28px;  display:flex; align-items:center; justify-content:center; }

#errors ul { margin: 0; padding-left: 18px; }
.ok { color: green; }
.err { color: crimson; }


.board-layout{
  display: grid;
  grid-template-columns: auto 46px; /* grid | right targets */
  grid-template-rows: auto 28px;    /* grid | bottom targets */
  gap: 6px;
  align-items: start;
}

.corner { width: 46px; height: 28px; }

/* RIGHT = targets righe (uno per riga) */
.rowTargetsRight{
  display: grid;
  grid-auto-rows: 28px;
  gap: 2px;
}
.rowTargetsRight .rt{
  width: 46px;
  height: 28px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding-left: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-sizing: border-box;
}

/* BOTTOM = targets colonne (uno per colonna) */
.colTargetsBottom{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 28px;
  gap: 2px;
}
.colTargetsBottom .ct{
  width: 28px;
  height: 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-sizing: border-box;
}
.legend{
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 13px;
}

.cell.sel{
  outline: 3px solid #333;
  outline-offset: -2px;
}
#grid .cell.sel { outline: 2px solid #1e90ff; }