.placement-square {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 0 2px 2px 0;
  background: #6c8ebf;
  border: 1px solid #333;
  border-radius: 3px;
  vertical-align: middle;
}
/* Barre commune (css/games.css) aux couleurs de l'océan */
.bn-jeu {
  --mg-jeu-largeur: 844px;
  --mgb-fond: radial-gradient(120% 160% at 0% 0%, rgba(179, 209, 247, 0.25), transparent 55%),
    linear-gradient(120deg, #0f2238, #1e3a5c);
  --mgb-accent: #b3d1f7;
  --mgb-titre: linear-gradient(100deg, #ffffff, #b3d1f7);
  --mg-fs-fond: #eef3f9;
  --mg-bulle-fond: #1e3a5c;
}

.bn-jeu {
  --bn-case: 32px;
}
.bn-jeu.mg-fs {
  justify-content: center;
}
/* Plein écran : cases agrandies selon la place disponible
   (hauteur : barre, titres, flotte et message ; largeur : deux grilles) */
.bn-jeu.mg-fs {
  --bn-case: clamp(32px, min((100vh - 330px) / 10, (100vw - 120px) / 20), 60px);
}
/* Flotte sur deux colonnes pour laisser la hauteur aux grilles */
.bn-jeu.mg-fs .fleet-panel {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: space-around;
  column-gap: 16px;
}

#bataille-navale-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.grilles {
  display: flex;
  gap: 40px;
  justify-content: center;
}

.board {
  display: grid;
  grid-template-columns: repeat(10, var(--bn-case));
  grid-template-rows: repeat(10, var(--bn-case));
  gap: 2px;
  background: #1e3a5c;
  border: 2px solid #333;
  margin: 0 auto;
}

.cell {
  width: var(--bn-case);
  height: var(--bn-case);
  background: #b3d1f7;
  border: 1px solid #7fa1c7;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--bn-case) * 0.56);
  user-select: none;
  transition: background 0.2s;
}

.cell.ship {
  background: #6c8ebf;
}
.cell.hit {
  background: #e74c3c;
  color: #fff;
}
.cell.miss {
  background: #95a5a6;
  color: #fff;
}
.cell.sunk {
  background: #222;
  color: #fff;
}

.cell.highlight {
  background: #a3e6a3 !important;
}
.cell.highlight-valid {
  background: #6fcf6f !important;
}
.cell.highlight-invalid {
  background: #e06666 !important;
}

#game-messages {
  min-height: 32px;
  font-size: 18px;
  text-align: center;
  margin-top: 10px;
  background: #fff;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: width 0.3s;
}

#game-messages.width-1 {
  width: calc(var(--bn-case) * 10 + 22px); /* largeur d'une grille (10 cases + 9 espaces + bordure) */
  max-width: 100vw;
}
#game-messages.width-2 {
  width: calc(var(--bn-case) * 20 + 84px); /* largeur de 2 grilles + espace */
  max-width: 100vw;
}

/* Ajoute un style pour .ship-alive pour la lisibilité */
.ship-alive {
  display: inline-block;
  background: #6c8ebf;
  color: #fff;
  border-radius: 3px;
  padding: 2px 7px;
  margin: 0 2px;
  font-size: 13px;
}

/* Panneaux de flotte (listent les bateaux, coulés barrés) */
.fleet-panel {
  margin-top: 10px;
  padding: 8px 10px;
  min-height: 20px;
  border: 3px solid transparent;
  border-radius: 10px;
  background: #f7f9fc;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fleet-panel.active-fleet {
  border-color: #2ecc40;
  box-shadow: 0 0 8px rgba(46, 204, 64, 0.5);
}
.fleet-ship {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.fleet-ship:last-child {
  margin-bottom: 0;
}
.fleet-ship-name {
  font-size: 12px;
  color: #555;
  margin-left: 8px;
}
.fleet-ship.sunk .fleet-ship-name {
  text-decoration: line-through;
  color: #999;
}
.placement-square.sunk-square {
  background: #222;
  border-color: #000;
}