/* === Bataille Navale — remplissage des 3 navires du banner + fond body ===
   Le layout banner (wrapper, home, title) et la pastille .deco-banner viennent
   de banner.css partagé.
*/

/* Vagues décoratives en fond du body (identitaire) */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: repeating-linear-gradient(170deg, rgba(147, 197, 253, 0.03) 0px, transparent 8px, transparent 20px), repeating-linear-gradient(190deg, rgba(96, 165, 250, 0.03) 0px, transparent 6px, transparent 18px);
  background-size: 100% 60px;
  pointer-events: none;
  z-index: 0;
}

/* Relief interne seulement : pas d'ombre portée */
.ship-dark {
  background: radial-gradient(circle at 35% 35%, #4a6fa5, #1e3a5f);
  box-shadow: inset 0 -2px 3px rgba(255, 255, 255, 0.1);
}

.ship-blue {
  background: radial-gradient(circle at 35% 35%, #93c5fd, #2563eb);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.2);
}

/* Sur mobile, les pages réduisent leur marge intérieure à 12 px : la bannière, qui
   déborde de -24 px pour aller d'un bord à l'autre de la carte, dépassait alors de
   l'écran (défilement horizontal de 3 à 9 px sur le défi et le tournoi). */
@media (max-width: 780px) {

  #app > .jeu-banner,
  .card > .jeu-banner {
    margin-left: -12px;
    margin-right: -12px;
  }
}