.battleship-page{
  display:grid;
  gap:18px;
}

.battleship-hero,
.battleship-toolbar,
.battleship-status,
.battleship-board-card,
.battleship-log,
.quick-friend-panel{
  background:#fff;
  border:3px solid var(--line);
  border-radius:22px;
  box-shadow:6px 6px 0 var(--line);
}

.battleship-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  padding:18px;
}

.battleship-hero h2{
  margin:0 0 6px;
  font-size:clamp(1.6rem, 3vw, 2.4rem);
  font-weight:900;
}

.battleship-hero p{
  margin:0;
  font-weight:800;
  color:#333;
}

.battleship-actions,
.battleship-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:end;
}

.battleship-actions button,
.battleship-toolbar button,
.quick-friend-row button{
  border:3px solid var(--line);
  border-radius:16px;
  box-shadow:4px 4px 0 var(--line);
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  background:#ff4757;
  color:#fff;
}

.battleship-actions button:nth-child(2),
.battleship-toolbar button:nth-of-type(2){
  background:#2ed573;
  color:#111;
}

.battleship-toolbar{
  padding:14px;
}

.battleship-toolbar label{
  display:grid;
  gap:6px;
  font-weight:900;
}

.battleship-toolbar select{
  border:3px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  font-weight:900;
  background:#fff8e7;
}

.quick-friend-panel{
  display:none;
  padding:14px;
  gap:10px;
}

.quick-friend-panel.open{
  display:grid;
}

.quick-friend-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border:2px solid var(--line);
  border-radius:14px;
  padding:10px;
  background:#fff8e7;
  font-weight:900;
}

.battleship-status{
  padding:14px;
  background:#fffa85;
  display:grid;
  gap:5px;
}

.battleship-status strong{
  font-size:1.2rem;
  font-weight:900;
}

.battleship-status span{
  font-weight:900;
}

.battleship-layout{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:start;
}

.battleship-board-card{
  padding:14px;
  display:grid;
  gap:14px;
  background:#fff8e7;
}

.battleship-board{
  width:max-content;
  max-width:100%;
  display:grid;
  grid-template-columns:34px repeat(10, 34px);
  grid-template-rows:34px repeat(10, 34px);
  gap:4px;
  background:#1e90ff;
  border:4px solid var(--line);
  border-radius:18px;
  box-shadow:5px 5px 0 var(--line);
  padding:8px;
  overflow:auto;
}

.bs-head-cell,
.bs-row-head{
  display:grid;
  place-items:center;
  font-size:.78rem;
  font-weight:900;
  color:#fff;
  background:#111;
  border:2px solid #111;
  border-radius:8px;
}

.bs-corner{
  background:transparent;
  border:none;
}

.bs-cell{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:2px solid #111;
  border-radius:8px;
  font-weight:900;
  cursor:pointer;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), transparent 27%),
    linear-gradient(145deg, #dff3ff, #8ec8ff);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.5),
    inset -2px -2px 0 rgba(0,0,0,.16);
}

.bs-cell:hover:not(:disabled){
  transform:translateY(-2px);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), transparent 27%),
    linear-gradient(145deg, #fff, #b9e2ff);
}

.bs-cell:disabled{
  cursor:default;
}

.bs-cell.ship{
  background:
    linear-gradient(145deg, #636e72, #2d3436);
  color:#fff;
}

.bs-cell.preview{
  background:
    linear-gradient(145deg, #2ed573, #139d4c);
  color:#111;
}

.bs-cell.preview-bad{
  background:
    linear-gradient(145deg, #ff4757, #b51224);
  color:#fff;
}

.bs-cell.hit{
  background:
    radial-gradient(circle, #fff 0 15%, transparent 16%),
    linear-gradient(145deg, #ff4757, #b51224);
  color:#fff;
}

.bs-cell.miss{
  background:
    radial-gradient(circle, #fff 0 18%, transparent 19%),
    linear-gradient(145deg, #74b9ff, #0984e3);
  color:#111;
}

.bs-cell.sunk{
  background:
    linear-gradient(145deg, #2d3436, #000);
  color:#fff;
}

.bs-cell.last-shot{
  outline:4px solid #ffd32a;
  outline-offset:1px;
}

.battleship-board.locked .bs-cell{
  opacity:.65;
}

.fleet-box{
  display:grid;
  gap:8px;
}

.fleet-box h4{
  margin:0;
  font-size:1rem;
  font-weight:900;
  text-transform:uppercase;
}

.fleet-list{
  display:grid;
  gap:7px;
}

.fleet-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  border:2px solid var(--line);
  border-radius:13px;
  background:#fff;
  padding:8px 10px;
  font-weight:900;
}

.fleet-row .blocks{
  white-space:nowrap;
  letter-spacing:2px;
}

.fleet-row.placed{
  background:#2ed573;
}

.fleet-row.current{
  background:#ffd32a;
}

.fleet-row.sunk{
  background:#ffdddd;
  text-decoration:line-through;
  opacity:.78;
}

.battleship-log{
  padding:14px;
  display:grid;
  gap:8px;
}

.battleship-log h3{
  margin:0;
  font-weight:900;
  text-transform:uppercase;
}

#bsLog{
  display:grid;
  gap:6px;
  max-height:180px;
  overflow:auto;
}

#bsLog div{
  background:#fff8e7;
  border:2px solid var(--line);
  border-radius:12px;
  padding:7px 10px;
  font-weight:800;
}

@media(max-width:1100px){
  .battleship-layout{
    grid-template-columns:1fr;
  }
}

@media(max-width:620px){
  .battleship-board{
    grid-template-columns:26px repeat(10, 26px);
    grid-template-rows:26px repeat(10, 26px);
    gap:3px;
    padding:6px;
  }

  .bs-cell,
  .bs-head-cell,
  .bs-row-head{
    width:26px;
    height:26px;
    border-radius:6px;
    font-size:.72rem;
  }

  .battleship-toolbar,
  .battleship-actions{
    display:grid;
    width:100%;
  }
}

/* Flotte visible à placer */
.fleet-box{
  margin-top:14px;
  background:#fff;
  border:4px solid var(--line);
  border-radius:18px;
  box-shadow:5px 5px 0 var(--line);
  padding:14px;
}

.fleet-box h4{
  margin:0 0 10px;
  font-size:1rem;
  font-weight:1000;
  text-transform:uppercase;
}

#bsPlayerFleet,
#bsEnemyFleet{
  display:grid;
  gap:10px;
}

.bs-ship-card{
  width:100%;
  display:grid;
  grid-template-columns:minmax(120px,1fr) auto;
  gap:6px 10px;
  align-items:center;
  text-align:left;
  background:#fff8e7;
  border:3px solid var(--line);
  border-radius:14px;
  box-shadow:4px 4px 0 var(--line);
  padding:10px;
  color:#111;
  cursor:pointer;
}

.bs-ship-card:disabled{
  cursor:default;
}

.bs-ship-card.selected{
  background:#ffd32a;
  outline:4px solid #111;
  outline-offset:2px;
}

.bs-ship-card.placed{
  background:#dff8e8;
}

.bs-ship-card.sunk{
  background:#2d3436;
  color:#fff;
}

.bs-ship-name{
  font-weight:1000;
}

.bs-ship-size{
  font-weight:900;
  color:#555;
  text-align:right;
}

.bs-ship-state{
  grid-column:1 / -1;
  font-size:.85rem;
  font-weight:1000;
  text-transform:uppercase;
}

.bs-ship-shape{
  grid-column:1 / -1;
  display:flex;
  gap:4px;
}

.bs-ship-shape i{
  width:24px;
  height:20px;
  display:block;
  background:#1e90ff;
  border:2px solid #111;
  border-radius:6px;
  box-shadow:2px 2px 0 #111;
}

/* Plateaux */
.battleship-board{
  display:grid;
  grid-template-columns:repeat(10, minmax(26px, 42px));
  grid-template-rows:repeat(10, minmax(26px, 42px));
  gap:3px;
  background:#111;
  border:4px solid var(--line);
  border-radius:18px;
  box-shadow:6px 6px 0 var(--line);
  padding:8px;
  width:max-content;
  max-width:100%;
  overflow:auto;
}

.bs-cell{
  width:42px;
  height:42px;
  border:2px solid #111;
  border-radius:8px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 28%),
    linear-gradient(145deg, #54a0ff, #0f6fc6);
  cursor:pointer;
}

.bs-cell.ship{
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.45), transparent 28%),
    linear-gradient(145deg, #95a5a6, #576574);
}

.bs-cell.targetable:hover{
  outline:4px solid #ffd32a;
  outline-offset:1px;
}

.bs-cell.hit{
  background:
    radial-gradient(circle at center, #ff4757 0 35%, #2d3436 36% 100%);
}

.bs-cell.miss{
  background:
    radial-gradient(circle at center, #fff 0 18%, #54a0ff 19% 100%);
}

.battleship-board.locked{
  opacity:.75;
}

.battleship-status{
  background:#fffa85;
  border:4px solid var(--line);
  border-radius:20px;
  box-shadow:5px 5px 0 var(--line);
  padding:14px;
  display:grid;
  gap:4px;
}

.battleship-status strong{
  font-size:1.2rem;
}

.battleship-log{
  background:#fff;
  border:4px solid var(--line);
  border-radius:20px;
  box-shadow:5px 5px 0 var(--line);
  padding:14px;
}

#bsLog{
  display:grid;
  gap:6px;
  max-height:220px;
  overflow:auto;
}

.bs-log-line{
  background:#fff8e7;
  border:2px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
  font-weight:850;
}

@media(max-width:700px){
  .battleship-board{
    grid-template-columns:repeat(10, 28px);
    grid-template-rows:repeat(10, 28px);
  }

  .bs-cell{
    width:28px;
    height:28px;
    border-radius:6px;
  }

  .bs-ship-card{
    grid-template-columns:1fr;
  }

  .bs-ship-size{
    text-align:left;
  }
}

/* Correctif contraste Bataille navale */
.battleship-page{
  color:#111;
}

.battleship-layout{
  gap:22px;
}

.battleship-board-card{
  background:#ffffff;
  border:4px solid #111;
  border-radius:22px;
  box-shadow:7px 7px 0 #111;
  padding:16px;
}

/* Mer très contrastée */
.battleship-board{
  background:#061a33 !important;
  border:5px solid #111 !important;
  border-radius:18px;
  box-shadow:7px 7px 0 #111;
  padding:8px;
}

/* Case eau normale */
.bs-cell{
  background:#2d9cff !important;
  border:2px solid #061a33 !important;
  border-radius:7px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}

/* Case eau au survol */
.bs-cell:hover{
  filter:brightness(1.15);
}

/* Bateau joueur visible */
.bs-cell.ship{
  background:#606b78 !important;
  border:2px solid #111 !important;
  box-shadow:
    inset 0 0 0 3px #dfe6e9,
    inset -5px -5px 0 rgba(0,0,0,.22),
    2px 2px 0 #111;
}

/* Bateau touché */
.bs-cell.hit{
  background:#ff2d2d !important;
  border:2px solid #111 !important;
  position:relative;
}

.bs-cell.hit::after{
  content:"×";
  color:#fff;
  font-size:1.8rem;
  font-weight:1000;
  line-height:1;
  text-shadow:2px 2px 0 #111;
}

/* Tir raté */
.bs-cell.miss{
  background:#dff6ff !important;
  border:2px solid #111 !important;
  position:relative;
}

.bs-cell.miss::after{
  content:"•";
  color:#061a33;
  font-size:2rem;
  font-weight:1000;
  line-height:1;
}

/* Case ciblable adverse */
.bs-cell.targetable{
  cursor:crosshair;
}

.bs-cell.targetable:hover{
  background:#f5c542 !important;
  outline:4px solid #111;
  outline-offset:1px;
}

/* Plateau verrouillé plus lisible */
.battleship-board.locked{
  opacity:1 !important;
  filter:saturate(.85);
}

/* Zone flotte */
.fleet-box{
  background:#f6f6f6 !important;
  border:4px solid #111 !important;
  border-radius:18px;
  box-shadow:5px 5px 0 #111;
}

.fleet-box h4{
  color:#111;
  font-weight:1000;
}

/* Cartes bateaux */
.bs-ship-card{
  background:#ffffff !important;
  color:#111 !important;
  border:3px solid #111 !important;
  border-radius:14px;
  box-shadow:4px 4px 0 #111;
}

.bs-ship-card:hover:not(:disabled){
  background:#f5c542 !important;
  transform:translateY(-2px);
}

.bs-ship-card.selected{
  background:#f5c542 !important;
  color:#111 !important;
  outline:5px solid #111;
  outline-offset:2px;
}

.bs-ship-card.placed{
  background:#d7fbe2 !important;
  color:#111 !important;
}

.bs-ship-card.sunk{
  background:#111 !important;
  color:#fff !important;
}

.bs-ship-name{
  color:inherit;
  font-weight:1000;
}

.bs-ship-size{
  color:#333 !important;
  font-weight:1000;
}

.bs-ship-card.sunk .bs-ship-size{
  color:#ddd !important;
}

.bs-ship-state{
  color:inherit;
  font-weight:1000;
}

/* Représentation visuelle des bateaux */
.bs-ship-shape i{
  background:#606b78 !important;
  border:2px solid #111 !important;
  box-shadow:
    inset 0 0 0 2px #dfe6e9,
    2px 2px 0 #111;
}

/* Statut / message */
.battleship-status{
  background:#fff3b0 !important;
  color:#111 !important;
  border:4px solid #111 !important;
  box-shadow:5px 5px 0 #111;
}

.battleship-status strong{
  color:#111;
  font-weight:1000;
}

.battleship-status span{
  color:#111;
  font-weight:900;
}

/* Journal */
.battleship-log{
  background:#fff !important;
  color:#111 !important;
  border:4px solid #111 !important;
  box-shadow:5px 5px 0 #111;
}

.battleship-log h3{
  color:#111;
  font-weight:1000;
}

.bs-log-line{
  background:#f6f6f6 !important;
  color:#111 !important;
  border:2px solid #111 !important;
  font-weight:900;
}

/* Boutons toolbar */
.battleship-toolbar button,
.battleship-toolbar select{
  border:4px solid #111 !important;
  box-shadow:5px 5px 0 #111 !important;
  color:#111 !important;
}

#bsRotateBtn{
  background:#f5c542 !important;
}

#bsAutoPlaceBtn{
  background:#2ed573 !important;
}

#bsResetPlacementBtn{
  background:#ff6b6b !important;
  color:#111 !important;
}

@media(max-width:700px){
  .bs-cell.hit::after{
    font-size:1.35rem;
  }

  .bs-cell.miss::after{
    font-size:1.45rem;
  }
}

.bs-right-click-help{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  background:#111;
  color:#fff;
  border:3px solid #111;
  border-radius:14px;
  box-shadow:4px 4px 0 #111;
  padding:10px 12px;
  font-weight:1000;
}

/* Alignement des grilles */
.battleship-layout{
  align-items:stretch !important;
}

.battleship-board-card{
  display:grid !important;
  grid-template-rows:auto auto 1fr !important;
  align-content:start !important;
}

.battleship-board-card .battleship-board{
  align-self:start !important;
}

.battleship-board{
  margin:0 auto !important;
}

/* Aperçu du bateau avant dépôt */
.bs-cell.preview-valid{
  background:#2ed573 !important;
  outline:4px solid #111;
  outline-offset:-3px;
  box-shadow:
    inset 0 0 0 3px #dff8e8,
    2px 2px 0 #111 !important;
}

.bs-cell.preview-valid::before{
  content:"";
  display:block;
  width:70%;
  height:70%;
  border-radius:8px;
  background:#606b78;
  border:2px solid #111;
  box-shadow:
    inset 0 0 0 3px #dfe6e9,
    2px 2px 0 #111;
}

.bs-cell.preview-invalid{
  background:#ff4757 !important;
  outline:4px solid #111;
  outline-offset:-3px;
}

.bs-cell.preview-invalid::before{
  content:"×";
  display:grid;
  place-items:center;
  color:#fff;
  font-size:1.6rem;
  font-weight:1000;
  text-shadow:2px 2px 0 #111;
}

/* Hauteur cohérente des zones flotte */
.fleet-box{
  align-self:start;
}

@media(max-width:900px){
  .battleship-layout{
    align-items:start !important;
  }
}



.board-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:8px;
  background:#111;
  color:#fff;
  border:4px solid #111;
  border-radius:20px;
  box-shadow:5px 5px 0 #111;
  padding:14px 16px;
  margin-bottom:14px;
}

.board-head h3{
  margin:0;
  color:#fff;
  font-size:2rem;
  line-height:1.05;
  font-weight:1000;
  text-transform:uppercase;
}

.board-head span{
  display:block;
  margin:0;
  color:#ffd54a;
  font-size:1.05rem;
  line-height:1.2;
  font-weight:1000;
  text-align:left;
}

@media (max-width:700px){
  .board-head h3{
    font-size:1.45rem;
  }

  .board-head span{
    font-size:.95rem;
  }
}


/* === PLAYZONE 3D SHIPS START === */
.bs-cell{
  position:relative;
  overflow:hidden;
}

#bsPlayerBoard .bs-cell.ship,
#bsEnemyBoard .bs-cell.ship.hit,
#bsEnemyBoard .bs-cell.ship.sunk{
  background:
    linear-gradient(180deg, #7a8795 0%, #67727f 40%, #535e69 100%) !important;
  border:2px solid #111 !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -3px 0 rgba(0,0,0,.25),
    1px 1px 0 rgba(0,0,0,.18);
}

#bsPlayerBoard .bs-cell.ship::before,
#bsEnemyBoard .bs-cell.ship.hit::before,
#bsEnemyBoard .bs-cell.ship.sunk::before{
  content:"";
  position:absolute;
  inset:3px 5px auto 5px;
  height:24%;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.08));
  pointer-events:none;
}

#bsPlayerBoard .bs-cell.ship::after,
#bsEnemyBoard .bs-cell.ship.hit::after,
#bsEnemyBoard .bs-cell.ship.sunk::after{
  content:"";
  position:absolute;
  right:4px;
  bottom:4px;
  width:26%;
  height:26%;
  border-radius:50%;
  background:rgba(0,0,0,.12);
  filter:blur(1px);
  pointer-events:none;
}

/* orientation */
.bs-cell.ship-horizontal{
  border-radius:10px 10px 10px 10px !important;
}
.bs-cell.ship-vertical{
  border-radius:10px 10px 10px 10px !important;
}

/* extrémités */
.bs-cell.ship-single{
  border-radius:12px !important;
}

.bs-cell.ship-left-end{
  border-radius:14px 8px 8px 14px !important;
}
.bs-cell.ship-right-end{
  border-radius:8px 14px 14px 8px !important;
}
.bs-cell.ship-top-end{
  border-radius:14px 14px 8px 8px !important;
}
.bs-cell.ship-bottom-end{
  border-radius:8px 8px 14px 14px !important;
}

/* effet proue plus marqué */
.bs-cell.ship-left-end::before{
  inset:4px auto 4px 4px;
  width:42%;
  height:auto;
  border-radius:12px 0 0 12px;
}
.bs-cell.ship-right-end::before{
  inset:4px 4px 4px auto;
  width:42%;
  height:auto;
  border-radius:0 12px 12px 0;
}
.bs-cell.ship-top-end::before{
  inset:4px 4px auto 4px;
  height:42%;
  border-radius:12px 12px 0 0;
}
.bs-cell.ship-bottom-end::before{
  inset:auto 4px 4px 4px;
  height:42%;
  border-radius:0 0 12px 12px;
}

/* ligne centrale du navire */
#bsPlayerBoard .bs-cell.ship.ship-horizontal .bs-ridge,
#bsEnemyBoard .bs-cell.ship.hit.ship-horizontal .bs-ridge,
#bsEnemyBoard .bs-cell.ship.sunk.ship-horizontal .bs-ridge{
  position:absolute;
  left:8%;
  right:8%;
  top:50%;
  height:3px;
  transform:translateY(-50%);
  background:rgba(255,255,255,.28);
  border-radius:999px;
  pointer-events:none;
}

#bsPlayerBoard .bs-cell.ship.ship-vertical .bs-ridge,
#bsEnemyBoard .bs-cell.ship.hit.ship-vertical .bs-ridge,
#bsEnemyBoard .bs-cell.ship.sunk.ship-vertical .bs-ridge{
  position:absolute;
  top:8%;
  bottom:8%;
  left:50%;
  width:3px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.28);
  border-radius:999px;
  pointer-events:none;
}

/* impact visible par-dessus les navires */
.bs-cell.ship.hit{
  background:
    radial-gradient(circle at center, rgba(255,80,80,.92) 0 28%, transparent 29%),
    linear-gradient(180deg, #7a8795 0%, #67727f 40%, #535e69 100%) !important;
}
.bs-cell.ship.sunk{
  background:
    radial-gradient(circle at center, rgba(255,130,70,.95) 0 28%, transparent 29%),
    linear-gradient(180deg, #545c66 0%, #444b53 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -3px 0 rgba(0,0,0,.35),
    1px 1px 0 rgba(0,0,0,.22);
}

@media (max-width:700px){
  #bsPlayerBoard .bs-cell.ship::before,
  #bsEnemyBoard .bs-cell.ship.hit::before,
  #bsEnemyBoard .bs-cell.ship.sunk::before{
    inset:2px 4px auto 4px;
  }
}
/* === PLAYZONE 3D SHIPS END === */

/* === BATEAUX 3D REELS === */
.bs-cell.ship{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, #a7b0ba 0%, #7f8a96 38%, #58636f 100%) !important;
  border:2px solid #111 !important;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.65),
    inset 0 -5px 0 rgba(0,0,0,.28),
    2px 2px 0 #111 !important;
}

.bs-ship-deck{
  position:absolute;
  z-index:2;
  width:16px;
  height:14px;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  background:linear-gradient(180deg, #f2f2f2 0%, #b7c0c8 100%);
  border:2px solid #111;
  border-radius:5px;
  box-shadow:2px 2px 0 rgba(0,0,0,.35);
  pointer-events:none;
}

.bs-ship-ridge{
  position:absolute;
  z-index:1;
  background:rgba(255,255,255,.38);
  border-radius:999px;
  pointer-events:none;
}

.bs-cell.ship-horizontal .bs-ship-ridge{
  left:8%;
  right:8%;
  top:50%;
  height:4px;
  transform:translateY(-50%);
}

.bs-cell.ship-vertical .bs-ship-ridge{
  top:8%;
  bottom:8%;
  left:50%;
  width:4px;
  transform:translateX(-50%);
}

.bs-cell.ship-left-end{
  border-radius:22px 6px 6px 22px !important;
  clip-path:polygon(18% 0,100% 0,100% 100%,18% 100%,0 50%);
}

.bs-cell.ship-right-end{
  border-radius:6px 22px 22px 6px !important;
  clip-path:polygon(0 0,82% 0,100% 50%,82% 100%,0 100%);
}

.bs-cell.ship-top-end{
  border-radius:22px 22px 6px 6px !important;
  clip-path:polygon(50% 0,100% 18%,100% 100%,0 100%,0 18%);
}

.bs-cell.ship-bottom-end{
  border-radius:6px 6px 22px 22px !important;
  clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%);
}

.bs-cell.ship-middle{
  background:
    linear-gradient(180deg, #99a3ad 0%, #77838f 45%, #56616c 100%) !important;
}

.bs-cell.ship.hit{
  background:
    radial-gradient(circle at 50% 50%, #ffdd55 0 16%, #ff3131 17% 34%, transparent 35%),
    linear-gradient(180deg, #8b949e 0%, #68737f 45%, #4e5964 100%) !important;
}

.bs-cell.ship.hit::after{
  content:"×";
  position:absolute;
  z-index:4;
  color:#fff;
  font-size:1.8rem;
  font-weight:1000;
  line-height:1;
  text-shadow:2px 2px 0 #111;
}

.bs-cell.preview-valid::before{
  content:"";
  width:76%;
  height:58%;
  border-radius:999px;
  background:
    linear-gradient(180deg, #a7b0ba 0%, #7f8a96 45%, #58636f 100%);
  border:2px solid #111;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.65),
    inset 0 -4px 0 rgba(0,0,0,.25),
    2px 2px 0 #111;
}

.bs-ship-shape i{
  background:
    linear-gradient(180deg, #a7b0ba 0%, #7f8a96 45%, #58636f 100%) !important;
  border:2px solid #111 !important;
  border-radius:7px !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.65),
    inset 0 -3px 0 rgba(0,0,0,.25),
    2px 2px 0 #111 !important;
}

.bs-ship-shape i:first-child{
  border-radius:14px 7px 7px 14px !important;
  clip-path:polygon(20% 0,100% 0,100% 100%,20% 100%,0 50%);
}

.bs-ship-shape i:last-child{
  border-radius:7px 14px 14px 7px !important;
  clip-path:polygon(0 0,80% 0,100% 50%,80% 100%,0 100%);
}

@media(max-width:700px){
  .bs-ship-deck{
    width:10px;
    height:10px;
  }

  .bs-cell.ship.hit::after{
    font-size:1.25rem;
  }
}
/* === FIN BATEAUX 3D REELS === */

/* === FORCE BATEAUX VISIBLES — remplace les points === */

/* On neutralise les anciens points sur les cases bateau */
#bsPlayerBoard .bs-cell.ship::before,
#bsPlayerBoard .bs-cell.ship::after{
  content:"" !important;
}

/* Cellule bateau : coque métallique 3D */
#bsPlayerBoard .bs-cell.ship{
  position:relative !important;
  overflow:hidden !important;
  background:
    linear-gradient(180deg, #b9c3cf 0%, #83909d 42%, #53606c 100%) !important;
  border:2px solid #111 !important;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.75),
    inset 0 -5px 0 rgba(0,0,0,.35),
    2px 2px 0 #111 !important;
}

/* Coque du bateau */
#bsPlayerBoard .bs-cell.ship .bs-boat-hull,
#bsPlayerBoard .bs-cell.ship::before{
  content:"" !important;
  position:absolute !important;
  z-index:2 !important;
  left:5px !important;
  right:5px !important;
  top:12px !important;
  height:18px !important;
  border:2px solid #111 !important;
  border-radius:999px 999px 12px 12px !important;
  background:
    linear-gradient(180deg, #dfe7ef 0%, #7d8894 55%, #414b55 100%) !important;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.8),
    inset 0 -4px 0 rgba(0,0,0,.35),
    2px 2px 0 rgba(0,0,0,.45) !important;
}

/* Cabine du bateau */
#bsPlayerBoard .bs-cell.ship .bs-boat-cabin,
#bsPlayerBoard .bs-cell.ship::after{
  content:"" !important;
  position:absolute !important;
  z-index:3 !important;
  width:14px !important;
  height:12px !important;
  left:50% !important;
  top:9px !important;
  transform:translateX(-50%) !important;
  border:2px solid #111 !important;
  border-radius:5px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #c7d0d9 100%) !important;
  box-shadow:2px 2px 0 rgba(0,0,0,.4) !important;
}

/* Si JS ajoute orientation horizontale */
#bsPlayerBoard .bs-cell.ship-horizontal::before{
  left:4px !important;
  right:4px !important;
  top:12px !important;
  height:18px !important;
}

/* Si JS ajoute orientation verticale */
#bsPlayerBoard .bs-cell.ship-vertical::before{
  top:4px !important;
  bottom:4px !important;
  left:12px !important;
  right:auto !important;
  width:18px !important;
  height:auto !important;
  border-radius:999px 999px 12px 12px !important;
}

#bsPlayerBoard .bs-cell.ship-vertical::after{
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;
}

/* Extrémités horizontales */
#bsPlayerBoard .bs-cell.ship-left-end::before{
  clip-path:polygon(20% 0,100% 0,100% 100%,20% 100%,0 50%) !important;
  border-radius:18px 8px 8px 18px !important;
}

#bsPlayerBoard .bs-cell.ship-right-end::before{
  clip-path:polygon(0 0,80% 0,100% 50%,80% 100%,0 100%) !important;
  border-radius:8px 18px 18px 8px !important;
}

/* Extrémités verticales */
#bsPlayerBoard .bs-cell.ship-top-end::before{
  clip-path:polygon(50% 0,100% 20%,100% 100%,0 100%,0 20%) !important;
  border-radius:18px 18px 8px 8px !important;
}

#bsPlayerBoard .bs-cell.ship-bottom-end::before{
  clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%) !important;
  border-radius:8px 8px 18px 18px !important;
}

/* Touché : explosion visible, pas un point */
#bsPlayerBoard .bs-cell.ship.hit::before{
  background:
    radial-gradient(circle at center, #ffdd55 0 18%, #ff3131 19% 38%, transparent 39%),
    linear-gradient(180deg, #b9c3cf 0%, #83909d 42%, #53606c 100%) !important;
}

#bsPlayerBoard .bs-cell.ship.hit::after{
  content:"×" !important;
  display:grid !important;
  place-items:center !important;
  width:100% !important;
  height:100% !important;
  left:0 !important;
  top:0 !important;
  transform:none !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#fff !important;
  font-size:1.8rem !important;
  font-weight:1000 !important;
  text-shadow:2px 2px 0 #111 !important;
}

/* Aperçu de placement : silhouette bateau au lieu d’un point */
#bsPlayerBoard .bs-cell.preview-valid::before{
  content:"" !important;
  position:absolute !important;
  z-index:3 !important;
  left:5px !important;
  right:5px !important;
  top:12px !important;
  height:18px !important;
  border:2px solid #111 !important;
  border-radius:999px 999px 12px 12px !important;
  background:
    linear-gradient(180deg, #dfe7ef 0%, #7d8894 55%, #414b55 100%) !important;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.8),
    inset 0 -4px 0 rgba(0,0,0,.35),
    2px 2px 0 rgba(0,0,0,.45) !important;
}

#bsPlayerBoard .bs-cell.preview-valid::after{
  content:"" !important;
  position:absolute !important;
  z-index:4 !important;
  width:14px !important;
  height:12px !important;
  left:50% !important;
  top:9px !important;
  transform:translateX(-50%) !important;
  border:2px solid #111 !important;
  border-radius:5px !important;
  background:linear-gradient(180deg, #ffffff 0%, #c7d0d9 100%) !important;
  box-shadow:2px 2px 0 rgba(0,0,0,.4) !important;
}

/* Cartes flotte : vrais petits bateaux au lieu de points/blocs simples */
.bs-ship-shape i{
  position:relative !important;
  width:26px !important;
  height:20px !important;
  background:
    linear-gradient(180deg, #b9c3cf 0%, #83909d 42%, #53606c 100%) !important;
  border:2px solid #111 !important;
  border-radius:999px 999px 8px 8px !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.75),
    inset 0 -3px 0 rgba(0,0,0,.30),
    2px 2px 0 #111 !important;
}

.bs-ship-shape i:first-child{
  clip-path:polygon(20% 0,100% 0,100% 100%,20% 100%,0 50%) !important;
}

.bs-ship-shape i:last-child{
  clip-path:polygon(0 0,80% 0,100% 50%,80% 100%,0 100%) !important;
}

@media(max-width:700px){
  #bsPlayerBoard .bs-cell.ship::before,
  #bsPlayerBoard .bs-cell.preview-valid::before{
    left:3px !important;
    right:3px !important;
    top:8px !important;
    height:13px !important;
  }

  #bsPlayerBoard .bs-cell.ship::after,
  #bsPlayerBoard .bs-cell.preview-valid::after{
    width:9px !important;
    height:8px !important;
    top:6px !important;
  }
}

/* === FIN FORCE BATEAUX VISIBLES === */





/* === TIRS PROPRES ET LISIBLES === */

/* Plateau adverse : eau propre */
#bsEnemyBoard .bs-cell{
  transition:transform .12s ease, background .12s ease, outline .12s ease;
}

/* Case attaquable */
#bsEnemyBoard .bs-cell.targetable{
  cursor:crosshair !important;
  position:relative;
}

#bsEnemyBoard .bs-cell.targetable:hover{
  background:#f5c542 !important;
  outline:4px solid #111 !important;
  outline-offset:1px;
  transform:translateY(-2px);
  z-index:3;
}

/* Mire sobre seulement au survol */
#bsEnemyBoard .bs-cell.targetable:hover::before{
  content:"";
  position:absolute;
  inset:9px;
  border:3px solid #111;
  border-radius:50%;
  background:transparent;
  pointer-events:none;
}

#bsEnemyBoard .bs-cell.targetable:hover::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:70%;
  height:3px;
  transform:translate(-50%, -50%);
  background:#111;
  border-radius:999px;
  pointer-events:none;
}

/* Dernier tir joueur */
#bsEnemyBoard .bs-cell.last-shot{
  outline:5px solid #f5c542 !important;
  outline-offset:1px;
  z-index:2;
}

/* Dernier tir du bot */
#bsPlayerBoard .bs-cell.bot-last-shot{
  outline:5px solid #ff6b6b !important;
  outline-offset:1px;
  z-index:2;
}

/* Raté joueur ou bot */
.bs-cell.miss{
  position:relative !important;
  background:#2d9cff !important;
}

.bs-cell.miss::before{
  content:"";
  position:absolute;
  width:54%;
  height:54%;
  border-radius:50%;
  background:#fff;
  border:3px solid #061a33;
  box-shadow:2px 2px 0 rgba(0,0,0,.35);
}

.bs-cell.miss::after{
  content:"";
}

/* Touché joueur ou bot */
.bs-cell.hit{
  position:relative !important;
  background:#ff4757 !important;
  border:2px solid #111 !important;
}

.bs-cell.hit::before{
  content:"";
  position:absolute;
  width:68%;
  height:68%;
  border-radius:50%;
  background:radial-gradient(circle, #ffd54a 0 28%, #ff4757 30% 58%, #7a1111 60%);
  border:3px solid #111;
  box-shadow:2px 2px 0 rgba(0,0,0,.35);
}

.bs-cell.hit::after{
  content:"";
}

/* Si touché sur un bateau joueur, garder un rendu propre */
#bsPlayerBoard .bs-cell.ship.hit .bs-ship-deck,
#bsPlayerBoard .bs-cell.ship.hit .bs-ship-ridge{
  opacity:.35;
}

@media(max-width:700px){
  #bsEnemyBoard .bs-cell.targetable:hover::before{
    inset:6px;
    border-width:2px;
  }

  .bs-cell.miss::before,
  .bs-cell.hit::before{
    border-width:2px;
  }
}

/* === FIN TIRS PROPRES === */

/* === BATAILLE NAVALE V400 : TIRS VISIBLES === */

#bsEnemyBoard .bs-cell.targetable{
  cursor:crosshair !important;
  position:relative;
}

#bsEnemyBoard .bs-cell.targetable:hover{
  background:#f5c542 !important;
  outline:4px solid #111 !important;
  outline-offset:1px;
  transform:translateY(-2px);
  z-index:3;
}

#bsEnemyBoard .bs-cell.targetable:hover::before{
  content:"";
  position:absolute;
  inset:9px;
  border:3px solid #111;
  border-radius:50%;
  background:transparent;
  pointer-events:none;
}

#bsEnemyBoard .bs-cell.last-player-shot{
  outline:6px solid #f5c542 !important;
  outline-offset:1px;
  z-index:4;
}

#bsPlayerBoard .bs-cell.last-bot-shot{
  outline:6px solid #ff6b6b !important;
  outline-offset:1px;
  z-index:4;
}

.bs-cell.miss{
  position:relative !important;
  background:#2d9cff !important;
}

.bs-cell.miss::before{
  content:"";
  position:absolute;
  width:56%;
  height:56%;
  border-radius:50%;
  background:#ffffff;
  border:3px solid #061a33;
  box-shadow:2px 2px 0 rgba(0,0,0,.35);
}

.bs-cell.miss::after{
  content:"";
}

.bs-cell.hit{
  position:relative !important;
  background:#ff4757 !important;
  border:2px solid #111 !important;
}

.bs-cell.hit::before{
  content:"";
  position:absolute;
  width:70%;
  height:70%;
  border-radius:50%;
  background:radial-gradient(circle, #ffd54a 0 28%, #ff4757 30% 58%, #7a1111 60%);
  border:3px solid #111;
  box-shadow:2px 2px 0 rgba(0,0,0,.35);
}

.bs-cell.hit::after{
  content:"";
}

#bsPlayerBoard .bs-cell.ship.hit{
  background:#ff4757 !important;
}

@media(max-width:700px){
  #bsEnemyBoard .bs-cell.targetable:hover::before{
    inset:6px;
    border-width:2px;
  }

  .bs-cell.miss::before,
  .bs-cell.hit::before{
    border-width:2px;
  }
}

/* === FIN V400 === */

/* === BATAILLE NAVALE V402 : IMPACTS PLUS VISUELS === */

/* Base cellules */
.bs-cell{
  position:relative;
  overflow:hidden;
}

/* Coup dans l'eau : rond bleu type vague */
.bs-cell.miss{
  background:
    radial-gradient(circle at 50% 50%, #dff4ff 0 24%, #9fdbff 25% 42%, #49a9ff 43% 58%, #1d6fe0 59% 100%) !important;
  border-color:#0f3f8a !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.55),
    inset 0 -8px 12px rgba(0,0,0,.14),
    2px 2px 0 #111 !important;
}

.bs-cell.miss::before{
  content:"";
  position:absolute;
  inset:18%;
  border:3px solid rgba(255,255,255,.96);
  border-radius:50%;
  box-shadow:
    0 0 0 3px rgba(51,153,255,.35),
    0 0 12px rgba(255,255,255,.5);
}

.bs-cell.miss::after{
  content:"";
  position:absolute;
  inset:32%;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  box-shadow:0 0 10px rgba(255,255,255,.7);
}

/* Coup touché : losange rouge + croix */
.bs-cell.hit{
  background:
    radial-gradient(circle at 50% 50%, #fff4a8 0 16%, #ffba52 17% 34%, #ff6b45 35% 56%, #d62828 57% 100%) !important;
  border-color:#6e0f0f !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.35),
    inset 0 -8px 12px rgba(0,0,0,.18),
    2px 2px 0 #111 !important;
}

.bs-cell.hit::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:68%;
  height:68%;
  transform:translate(-50%,-50%) rotate(45deg);
  background:linear-gradient(135deg,#ffd76a,#ff6f3c 55%,#d61f1f);
  border:3px solid rgba(255,255,255,.85);
  border-radius:8px;
  box-shadow:
    0 0 14px rgba(255,120,80,.8),
    0 0 0 2px rgba(0,0,0,.08) inset;
}

.bs-cell.hit::after{
  content:"✕";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-53%);
  font-size:1.15rem;
  line-height:1;
  font-weight:1000;
  color:#fff;
  text-shadow:
    0 2px 0 rgba(0,0,0,.35),
    0 0 10px rgba(255,255,255,.4);
}

/* Dernier tir joueur : halo jaune plus propre */
#bsEnemyBoard .bs-cell.last-player-shot{
  outline:4px solid #ffd400 !important;
  outline-offset:-4px;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.4),
    0 0 0 3px rgba(255,212,0,.35),
    0 0 18px rgba(255,212,0,.45) !important;
}

/* Dernier tir bot : halo rouge visible */
#bsPlayerBoard .bs-cell.last-bot-shot{
  outline:4px solid #ff4d4d !important;
  outline-offset:-4px;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.35),
    0 0 0 3px rgba(255,77,77,.28),
    0 0 18px rgba(255,77,77,.42) !important;
}

/* Responsive */
@media (max-width:700px){
  .bs-cell.hit::after{
    font-size:1rem;
  }
}