/* Bataille navale : styles propres à l'outil. */
.o-bataille-navale {
  --o-bn-mer: #e4eefb; --o-bn-ligne: #b9cbe6; --o-bn-coque: #5b6578; --o-bn-choisi: var(--marque);
  --o-bn-touche: #c2410c; --o-bn-touche-fond: #fde3d3; --o-bn-coule: #7f1d1d; --o-bn-sur-coule: #fff4ef;
  --o-bn-ok: #c9efd9; --o-bn-ko: #f8c9c9;
  min-width: 0;
}
:root[data-theme="dark"] .o-bataille-navale {
  --o-bn-mer: #16233d; --o-bn-ligne: #2c3d63; --o-bn-coque: #9aa6bd; --o-bn-touche: #fb923c; --o-bn-touche-fond: #4a2412;
  --o-bn-coule: #e35d5d; --o-bn-sur-coule: #1a0b0b; --o-bn-ok: #174a33; --o-bn-ko: #5a1d22;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .o-bataille-navale {
    --o-bn-mer: #16233d; --o-bn-ligne: #2c3d63; --o-bn-coque: #9aa6bd; --o-bn-touche: #fb923c; --o-bn-touche-fond: #4a2412;
    --o-bn-coule: #e35d5d; --o-bn-sur-coule: #1a0b0b; --o-bn-ok: #174a33; --o-bn-ko: #5a1d22;
  }
}
.o-bataille-navale [hidden] { display: none !important; }
.o-bataille-navale .bn-choix { border-top: 0; padding: 0 0 8px; }
.atelier .o-bataille-navale .bn-choix .btn[aria-pressed="true"] { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }
.o-bataille-navale .bn-reglages { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: end; padding-bottom: 6px; }

.o-bataille-navale .bn-scene { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0 18px; border-top: 1px solid var(--bord); margin-top: 12px; }
.o-bataille-navale .bn-message { min-height: 1.5em; max-width: 60ch; font-weight: 700; font-size: 1.05rem; text-align: center; color: var(--texte); }
.o-bataille-navale.fini .bn-message { color: var(--marque); }
.o-bataille-navale .tirage-astuce { margin: 0; text-align: center; }

.o-bataille-navale .bn-passage { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(100%, 460px); padding: 32px 18px; border: 2px dashed var(--bord); border-radius: var(--rayon); background: var(--surface-2); text-align: center; }
.o-bataille-navale .bn-passage p { margin: 0; font-size: 1.1rem; font-weight: 600; }
.o-bataille-navale .bn-outils-placement, .o-bataille-navale .bn-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.o-bataille-navale .bn-plateaux { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 28px; width: 100%; }
.o-bataille-navale .bn-zone { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 320px; max-width: 440px; min-width: 0; }
.o-bataille-navale .bn-titre { font-size: .95rem; color: var(--texte-2); font-weight: 600; }

.o-bataille-navale .bn-plateau { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: 3px; width: 100%; }
.o-bataille-navale .bn-colonnes { grid-column: 2; display: grid; grid-template-columns: repeat(10, 1fr); text-align: center; }
.o-bataille-navale .bn-rangs { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(10, 1fr); align-items: center; padding-right: 2px; text-align: right; }
.o-bataille-navale .bn-colonnes span, .o-bataille-navale .bn-rangs span { font: 600 .72rem/1 var(--mono); color: var(--texte-2); }

.o-bataille-navale .bn-grille { grid-column: 2; grid-row: 2; container-type: inline-size; display: grid; grid-template-columns: repeat(10, 1fr); gap: 1px; aspect-ratio: 1; min-width: 0; padding: 1px; border-radius: 6px; background: var(--o-bn-ligne); }
.o-bataille-navale .bn-grille.placement .bn-case.coque { touch-action: none; cursor: grab; }
.o-bataille-navale .bn-grille.actif .bn-case[aria-disabled="false"] { cursor: crosshair; }
.o-bataille-navale .bn-grille.actif .bn-case[aria-disabled="false"]:hover { background: var(--surface); }

.o-bataille-navale .bn-case { position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: 1; padding: 0; border: 0; border-radius: 0; background: var(--o-bn-mer); color: var(--texte); font: 800 calc(6.2cqi)/1 var(--police); cursor: default; }
.o-bataille-navale .bn-symbole { position: relative; z-index: 1; }

/* Coque : une bande arrondie continue d'une case à l'autre, proue arrondie, poupe carrée. */
.o-bataille-navale .bn-case.coque::before { content: ""; position: absolute; background: var(--o-bn-coque); }
.o-bataille-navale .bn-case.coque.h::before { top: 22%; bottom: 22%; left: -1px; right: 0; }
.o-bataille-navale .bn-case.coque.v::before { left: 22%; right: 22%; top: -1px; bottom: 0; }
.o-bataille-navale .bn-case.coque.h.debut::before { left: 10%; border-radius: 999px 0 0 999px; }
.o-bataille-navale .bn-case.coque.h.fin::before { right: 12%; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.o-bataille-navale .bn-case.coque.v.debut::before { top: 10%; border-radius: 999px 999px 0 0; }
.o-bataille-navale .bn-case.coque.v.fin::before { bottom: 12%; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.o-bataille-navale .bn-case.coque.h.debut.fin::before { border-radius: 999px 4px 4px 999px; }
.o-bataille-navale .bn-case.coque.v.debut.fin::before { border-radius: 999px 999px 4px 4px; }
.o-bataille-navale .bn-case.coque.choisi::before { background: var(--o-bn-choisi); }

.o-bataille-navale .bn-case.eau { color: var(--texte-2); }
.o-bataille-navale .bn-case.eau .bn-symbole { font-size: 1.3em; }
.o-bataille-navale .bn-case.touche { background: var(--o-bn-touche-fond); color: var(--o-bn-touche); }
.o-bataille-navale .bn-case.coque.coule::before { background: var(--o-bn-coule); }
.o-bataille-navale .bn-case.coule { color: var(--o-bn-sur-coule); }
.o-bataille-navale .bn-case.coque.revele::before { background: transparent; border: 2px dashed var(--o-bn-coque); }
.o-bataille-navale .bn-case.coque.h.revele:not(.debut)::before { border-left: 0; }
.o-bataille-navale .bn-case.coque.h.revele:not(.fin)::before { border-right: 0; }
.o-bataille-navale .bn-case.coque.v.revele:not(.debut)::before { border-top: 0; }
.o-bataille-navale .bn-case.coque.v.revele:not(.fin)::before { border-bottom: 0; }
.o-bataille-navale .bn-case.apercu-ok { background: var(--o-bn-ok); box-shadow: inset 0 0 0 2px var(--ok-texte); }
.o-bataille-navale .bn-case.apercu-ko { background: var(--o-bn-ko); box-shadow: inset 0 0 0 2px var(--erreur-texte); }
.o-bataille-navale .bn-case.dernier { box-shadow: inset 0 0 0 2px var(--texte); }
.o-bataille-navale .bn-case.dernier .bn-symbole { animation: o-bn-tir .35s ease-out; }
@keyframes o-bn-tir { from { transform: scale(1.8); opacity: .2; } to { transform: scale(1); opacity: 1; } }
.o-bataille-navale .bn-case:focus-visible { outline: 3px solid var(--marque); outline-offset: 0; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .o-bataille-navale .bn-case.dernier .bn-symbole { animation: none; }
}

.o-bataille-navale .bn-liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: .84rem; color: var(--texte-2); }
.o-bataille-navale .bn-liste li { display: flex; align-items: center; gap: 5px; }
.o-bataille-navale .bn-liste li.coule span:last-child { text-decoration: line-through; }
.o-bataille-navale .bn-mini { display: inline-flex; gap: 1px; }
.o-bataille-navale .bn-mini i { width: 8px; height: 8px; background: var(--o-bn-coque); }
.o-bataille-navale .bn-mini i:first-child { border-radius: 4px 0 0 4px; }
.o-bataille-navale .bn-liste li.coule .bn-mini i { background: var(--o-bn-coule); }

.o-bataille-navale .bn-legende { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: .88rem; color: var(--texte-2); }
.o-bataille-navale .bn-legende li { display: flex; align-items: center; gap: 6px; }
.o-bataille-navale .bn-legende .bn-case { width: 1.6rem; font-size: .9rem; border-radius: 3px; }

.o-bataille-navale .btn:focus-visible, .o-bataille-navale select:focus-visible, .o-bataille-navale input:focus-visible { outline: 3px solid var(--marque); outline-offset: 2px; }

.o-bataille-navale .bn-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 14px; border-top: 1px solid var(--bord); }
.o-bataille-navale .bn-stats > strong { font-size: .9rem; color: var(--texte-2); font-weight: 600; }
.o-bataille-navale .bn-stats dl { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; flex: 1; }
.o-bataille-navale .bn-stats dl div { display: flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); }
.o-bataille-navale .bn-stats dt { font-size: .88rem; color: var(--texte-2); }
.o-bataille-navale .bn-stats dd { margin: 0; font: 700 1rem var(--mono); color: var(--texte); }

/* Mobile : grilles empilées, la grille adverse d'abord, la vôtre plus petite pendant la partie. */
@media (max-width: 700px) {
  .o-bataille-navale[data-phase="jeu"] .bn-zone-moi, .o-bataille-navale[data-phase="fin"] .bn-zone-moi { max-width: 300px; }
  .o-bataille-navale .bn-scene { padding-top: 10px; }
  .o-bataille-navale .bn-stats > strong { flex-basis: 100%; }
}

/* Impression : deux grilles vierges sur fond blanc */
.o-bataille-navale .bn-impression { display: none; }
@media print {
  body:has(.bn-impression) *:not(:has(.bn-impression)):not(.bn-impression):not(.bn-impression *) { display: none !important; }
  html:has(.bn-impression), body:has(.bn-impression), body:has(.bn-impression) *:has(.bn-impression) {
    display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: #fff !important;
    box-shadow: none !important; width: auto !important; max-width: none !important; min-height: 0 !important; height: auto !important;
    position: static !important; overflow: visible !important; color: #000 !important;
  }
  .o-bataille-navale .bn-impression { display: block !important; color: #000; font-family: var(--police); }
  .o-bataille-navale .bn-impression section { margin: 0 0 8mm; break-inside: avoid; }
  .o-bataille-navale .bn-impression h2 { margin: 0 0 2mm; font-size: 14pt; color: #000; }
  .o-bataille-navale .bn-impression table { border-collapse: collapse; }
  .o-bataille-navale .bn-impression th { width: 9mm; height: 7mm; font: 600 9pt var(--police); color: #333; }
  .o-bataille-navale .bn-impression td { width: 9mm; height: 9mm; border: .3mm solid #555; }
  .o-bataille-navale .bn-impression p { font-size: 11pt; color: #000; }
}