/* Grilles, navires, listes de flotte et écran de fin : commun au solo, au multijoueur et
   au défi du jour (02/10/2026). Ces règles étaient recopiées dans les trois feuilles de
   page, et chaque retouche devait être faite trois fois. */

/* L'attribut hidden doit l'emporter sur les display: flex des blocs (info-bar, actions). */
[hidden] {
  display: none !important;
}

.grilles-container {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.grille-wrapper {
  text-align: center;
}

.grille-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--texte);
  margin-bottom: 8px;
}

.grille {
  --bn-case: 34px;
  --bn-entete: 30px;
  display: inline-grid;
  grid-template-columns: var(--bn-entete) repeat(10, var(--bn-case));
  grid-template-rows: var(--bn-entete) repeat(10, var(--bn-case));
  gap: 1px;
  background: var(--surface-2);
  border: 2px solid var(--line-forte);
  border-radius: 8px;
  overflow: hidden;
}

.grille-header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--texte-faible);
  background: var(--surface-2);
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  background: var(--surface-1);
  user-select: none;
  -webkit-user-select: none;
}

.cell:hover {
  background: var(--surface-2);
}

.cell.eau {
  background: #1e3550;
  color: #7fb0dd;
}

.cell.touche {
  background: #9c333c;
  color: #ffdcdc;
}

.cell.coule {
  background: #47141a;
  color: #ff9a9a;
  box-shadow: inset 0 0 0 2px #c4545e;
}

.cell.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* --- Navires ---
   Chaque navire a sa teinte et des extrémités arrondies : deux navires collés ne se
   confondent plus en un seul bloc (audit du 02/10/2026, un porte-avions et un croiseur
   qui se touchaient formaient un « L » indéchiffrable). */
.cell.navire {
  background: rgba(99, 102, 241, 0.45);
  box-shadow: inset 0 0 0 1px rgba(199, 210, 254, 0.35);
}

.cell.navire.nav-1 {
  background: rgba(59, 130, 246, 0.5);
}

.cell.navire.nav-2 {
  background: rgba(20, 184, 166, 0.42);
}

.cell.navire.nav-3 {
  background: rgba(168, 85, 247, 0.42);
}

.cell.navire.nav-4 {
  background: rgba(14, 165, 233, 0.5);
}

.cell.navire-touche {
  background: #9c333c;
  color: #ffdcdc;
  box-shadow: inset 0 0 0 1px #d0606a;
}

.cell.navire-coule {
  background: #47141a;
  color: #ff9a9a;
  box-shadow: inset 0 0 0 2px #c4545e;
}

/* Navires adverses dévoilés en fin de partie, là où on n'avait pas tiré. */
.cell.navire-revele {
  background: rgba(148, 163, 184, 0.28);
  box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 0.45);
}

.cell.nav-h.nav-debut {
  border-top-left-radius: 45%;
  border-bottom-left-radius: 45%;
}

.cell.nav-h.nav-fin {
  border-top-right-radius: 45%;
  border-bottom-right-radius: 45%;
}

.cell.nav-v.nav-debut {
  border-top-left-radius: 45%;
  border-top-right-radius: 45%;
}

.cell.nav-v.nav-fin {
  border-bottom-left-radius: 45%;
  border-bottom-right-radius: 45%;
}

.cell.preview {
  background: color-mix(in srgb, var(--color-mid) 55%, transparent);
  box-shadow: inset 0 0 0 2px var(--color-light);
}

.cell.preview-invalid {
  background: rgba(239, 68, 68, 0.45);
  box-shadow: inset 0 0 0 2px #ef4444;
}

/* Tir parti, verdict pas encore revenu du serveur. */
.cell.attente,
.cell.en-attente {
  cursor: progress;
  box-shadow: inset 0 0 0 2px rgba(148, 163, 184, 0.7);
  animation: bn-tir-attente 0.7s ease-in-out infinite;
}

@keyframes bn-tir-attente {

  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

/* --- Placement --- */
.placement-info {
  text-align: center;
  margin-bottom: 16px;
  font-size: 0.85rem;
  color: var(--texte-doux);
}

.placement-info .key {
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: monospace;
  color: var(--texte);
}

/* La touche R n'existe pas sur un écran tactile. */
@media (hover: none) {

  .astuce-clavier {
    display: none;
  }
}

.navires-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

.navire-tag {
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  color: var(--texte-doux);
}

.navire-tag.actif {
  background: rgba(99, 102, 241, 0.3);
  color: var(--texte);
}

.navire-tag.place {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
}

/* --- État des deux flottes pendant le combat ---
   Savoir QUELS navires restent (le 2 ? le 5 ?) est la base de la stratégie. */
.flottes-etat {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  flex-basis: 100%;
  margin-bottom: 14px;
  font-size: 0.78rem;
}

.flotte-etat-titre {
  font-weight: 700;
  color: var(--texte-doux);
  margin-bottom: 6px;
  text-align: center;
}

.flotte-etat-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.flotte-etat-liste li {
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  color: var(--texte);
  white-space: nowrap;
}

.flotte-cases {
  display: none;
  letter-spacing: 1px;
}

.flotte-etat-liste li.coule {
  text-decoration: line-through;
  color: #ff9a9a;
  background: rgba(71, 20, 26, 0.6);
  border-color: rgba(196, 84, 94, 0.5);
  opacity: 0.8;
}

/* --- Écran de fin --- */
.overlay-card {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--line-forte);
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  max-width: 420px;
  width: 90%;
  max-height: 92vh;
  overflow-y: auto;
}

/* La croix : on doit toujours pouvoir revoir les grilles après la partie. */
.overlay-fermer {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--texte-doux);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.overlay-fermer:hover,
.overlay-fermer:focus-visible {
  background: var(--surface-2);
  color: var(--texte);
}

.overlay-icon {
  font-size: 4rem;
  margin-bottom: 16px;
}

.overlay-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
  font-family: var(--font-display);
  color: #f0f3f6;
}

.overlay-stats {
  font-size: 0.9rem;
  color: var(--texte-doux);
  margin-bottom: 20px;
  line-height: 1.6;
}

.overlay-stats span {
  color: var(--color-light);
  font-weight: 700;
}

.overlay-rang {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--texte);
  margin: -8px 0 8px;
}

.overlay-rang strong {
  color: #d2973a;
}

.lien-classement-fin {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-light);
  text-decoration: none;
}

.lien-classement-fin:hover {
  text-decoration: underline;
}

/* Barre affichée sous les grilles quand l'écran de fin a été refermé. */
.fin-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.fin-actions[hidden] {
  display: none;
}

.actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

@media (max-width: 900px) {

  .grille {
    --bn-case: 31px;
  }
}

@media (max-width: 780px) {

  .grilles-container {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .grille {
    --bn-case: 28px;
    --bn-entete: 24px;
  }

  .grille-header {
    font-size: 0.6rem;
  }

  .cell {
    font-size: 0.65rem;
  }

  /* Combat sur téléphone : la grille adverse, celle qu'on touche à chaque tour, passe en
     premier et en grand ; sa propre flotte devient une mini-grille à côté de l'état des
     flottes. Les deux restent visibles sans défiler, le tir de l'ordinateur compris. */
  .bn-combat .grilles-container {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "flotte etat"
      "tour tour"
      "adverse adverse";
    align-items: center;
    justify-items: center;
    gap: 10px 12px;
  }

  .bn-combat .status-bar {
    margin-bottom: 8px;
  }

  .bn-combat .info-bar {
    padding: 6px 10px;
    margin-bottom: 8px;
    font-size: 0.74rem;
    gap: 4px 12px;
  }

  .bn-combat .grille-label {
    margin-bottom: 4px;
  }

  .bn-combat .wrapper-flotte {
    grid-area: flotte;
  }

  .bn-combat .flottes-etat {
    grid-area: etat;
    flex-direction: column;
    gap: 10px;
  }

  .bn-combat .wrapper-adverse {
    grid-area: adverse;
  }

  .bn-combat .zone-centrale {
    grid-area: tour;
  }

  .bn-combat .wrapper-flotte .grille {
    --bn-case: 15px;
    --bn-entete: 12px;
    border-width: 1px;
    border-radius: 5px;
  }

  .bn-combat .wrapper-flotte .grille-header {
    font-size: 0.45rem;
  }

  .bn-combat .wrapper-flotte .cell {
    font-size: 0.5rem;
  }

  .bn-combat .wrapper-flotte .grille-label {
    font-size: 0.72rem;
    margin-bottom: 4px;
  }

  /* Sur téléphone, sa propre flotte se lit sur la mini-grille : seule reste la liste des
     navires adverses, en silhouettes (une case par case du navire). */
  .bn-combat .flottes-etat > div:last-child {
    display: none;
  }

  .bn-combat .flotte-etat-titre {
    font-size: 0.72rem;
    margin-bottom: 4px;
  }

  .bn-combat .flotte-etat-liste {
    max-width: 150px;
    gap: 4px;
  }

  .bn-combat .flotte-etat-liste li {
    padding: 1px 5px;
    font-size: 0.62rem;
    line-height: 1.4;
  }

  .bn-combat .flotte-nom {
    display: none;
  }

  .bn-combat .flotte-cases {
    display: inline;
  }
}

/* Téléphone à l'horizontale : les deux grilles côte à côte doivent tenir en hauteur. */
@media (max-height: 500px) and (orientation: landscape) {

  .grille {
    --bn-case: 25px;
    --bn-entete: 20px;
  }
}

@media (max-width: 400px) {

  .grille {
    --bn-case: 25px;
    --bn-entete: 20px;
  }

  .overlay-card {
    padding: 32px 18px 24px;
  }
}

@media (max-width: 340px) {

  .grille {
    --bn-case: 23px;
    --bn-entete: 18px;
  }

  .bn-combat .wrapper-flotte .grille {
    --bn-case: 12px;
    --bn-entete: 10px;
  }
}

/* --- Bouton son (03/10/2026) --- */
.bouton-son {
  display: block;
  margin: -4px auto 10px;
  padding: 4px 12px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--line-forte);
  background: var(--surface-2);
  color: var(--texte-doux);
  cursor: pointer;
}

.bouton-son[aria-pressed="true"] {
  color: var(--texte-faible);
}

/* --- Grille au clavier : la case qui a le focus --- */
.cell:focus {
  outline: none;
}

.cell:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: -2px;
  position: relative;
  z-index: 1;
}

/* --- Record personnel sur l'écran de fin --- */
.overlay-record {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--texte-doux);
  margin: -4px 0 10px;
}