/* ============================================================
   BATAILLE NAVALE — Multijoueur
   Même thème "arcade nocturne" que le reste du hub, accent bleu marine.
   ============================================================ */
:root{
  --bg:#0a0e1a;
  --surface:rgba(255,255,255,0.04);
  --surface-2:rgba(255,255,255,0.07);
  --line:rgba(255,255,255,0.10);
  --line-2:rgba(255,255,255,0.16);
  --text:#eef1f8;
  --muted:#9aa3bd;
  --dim:#626b86;
  --accent:#22d3ee;
  --accent-2:#a5f3fc;
  --success:#34d399;
  --warn:#fbbf24;
  --danger:#fb7185;
  --rouge:#f43f5e;
  --bleu:#3b82f6;
  --agent:#22c55e;
  --neutre:#a8a29e;
  --assassin:#111827;
  --panel-solid:#131a2c;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* Garantit que l'attribut HTML "hidden" masque vraiment un élément, même si
   une règle plus bas lui donne un display explicite (.modal est en flex).
   Une feuille d'auteur l'emporte toujours sur le [hidden]{display:none} du
   navigateur : sans ce garde-fou, la modale des règles reste affichée en
   permanence et bloque toute la page. */
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(34,211,238,0.13), transparent 70%),
    radial-gradient(50% 40% at 90% 100%, rgba(8,145,178,0.08), transparent 70%),
    var(--bg);
  color:var(--text);
  min-height:100vh; min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(40px + env(safe-area-inset-bottom));
}

/* ===== Intégration iOS ===== */
body::before, body::after{
  content:""; position:fixed; left:0; right:0; z-index:60; pointer-events:none;
  background:rgba(0,0,0,0.18);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  backdrop-filter:saturate(140%) blur(16px);
}
body::before{ top:0; height:env(safe-area-inset-top); }
body::after{ bottom:0; height:env(safe-area-inset-bottom); }

.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(34,211,238,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,0.03) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 75%);
}

/* ---------- Header ---------- */
.app-header{
  position:relative; z-index:1; text-align:center;
  padding:calc(16px + env(safe-area-inset-top)) 16px 10px;
}
.app-header h1{
  font-family:var(--font-display); font-size:1.5rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:10px;
  letter-spacing:-0.02em;
}
.game-logo{width:30px; height:30px; color:var(--accent);}
.home-btn{
  position:absolute; left:14px; top:calc(16px + env(safe-area-inset-top));
  width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
  text-decoration:none;
}
.home-btn svg{width:20px; height:20px;}

/* ---------- Structure ---------- */
.wrap{position:relative; z-index:1; max-width:620px; margin:0 auto; padding:8px 14px 40px;}
.screen{display:none;}
.screen.active{display:block;}

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:16px; margin-bottom:14px;
}
.card h2{
  font-family:var(--font-display); font-size:1rem; font-weight:600;
  margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
label{display:block; font-size:0.82rem; color:var(--muted); margin:10px 0 6px;}
input[type=text], input[type=number]{
  width:100%; padding:13px 14px; border-radius:12px;
  background:rgba(0,0,0,0.28); border:1px solid var(--line-2);
  color:var(--text); font-family:var(--font-body); font-size:1rem;
}
input[type=range]{width:100%; accent-color:var(--accent);}
button{
  font-family:var(--font-body); font-size:0.95rem; cursor:pointer;
  border-radius:12px; border:1px solid transparent; padding:13px 18px;
  margin-top:10px; color:var(--text); background:var(--surface-2);
}
button.primary{
  width:100%; background:linear-gradient(120deg, var(--accent), #0891b2);
  color:#042f37; font-weight:600; border:0;
}
button.ghost{background:var(--surface); border:1px solid var(--line-2); color:var(--muted);}
button.full{width:100%;}
button.danger-btn{color:var(--danger); border-color:rgba(251,113,133,0.3);}
button:disabled{opacity:0.45;}
.hint{font-size:0.78rem; color:var(--dim); margin-top:8px; line-height:1.5;}
.val-tag{color:var(--accent); font-weight:600;}
.count-badge{
  font-size:0.72rem; background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:2px 9px; color:var(--muted);
}
.or-sep{text-align:center; margin:6px 0 14px; color:var(--dim); font-size:0.8rem;}

.code-card{text-align:center;}
.code-label{font-size:0.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.16em;}
.code-display{
  font-family:var(--font-display); font-size:2.6rem; font-weight:700;
  letter-spacing:0.34em; color:var(--accent); margin:6px 0 4px; padding-left:0.34em;
}
.code-input{text-align:center; letter-spacing:0.4em; text-transform:uppercase; font-size:1.3rem;}

/* ---------- Joueurs ---------- */
.player-row{
  display:flex; align-items:center; gap:8px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.player-row:last-child{border-bottom:0;}
.player-row.off{opacity:0.42;}
.pl-name{flex:1; font-size:0.92rem;}
.pl-seat{font-size:0.74rem; color:var(--dim);}
.pl-seat.team-r{color:var(--rouge);} .pl-seat.team-b{color:var(--bleu);}
.pl-seat.team-A{color:var(--accent);} .pl-seat.team-B{color:#a78bfa;}
.tag{
  font-size:0.66rem; background:var(--surface-2); border-radius:999px;
  padding:1px 7px; color:var(--muted);
}
.kick-btn{
  margin:0; padding:4px 9px; font-size:0.75rem;
  background:transparent; border:1px solid var(--line-2); color:var(--danger);
}
.lobby-actions{margin-top:4px;}
.waiting-note{text-align:center;}

/* ---------- Bandeau de tour ---------- */
.round-head{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.round-badge{
  flex:1; font-family:var(--font-display); font-size:0.9rem; font-weight:600;
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:10px 14px;
}
.round-badge.mine{border-color:var(--accent); color:var(--accent); background:rgba(34,211,238,0.10);}
.manche-badge{
  font-family:var(--font-display); font-weight:700; font-size:0.85rem;
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:10px 14px; color:var(--muted);
}

/* ---------- Choix de la cible ---------- */
.cibles{display:flex; flex-wrap:wrap; gap:8px;}
.cible{
  flex:1 1 44%; margin:0; padding:10px 12px; text-align:left;
  background:rgba(0,0,0,0.25); border:1px solid var(--line-2); border-radius:12px;
}
.cible b{display:block; font-family:var(--font-display); font-size:0.9rem;}
.cible span{font-size:0.72rem; color:var(--dim);}
.cible.on{border-color:var(--accent); background:rgba(34,211,238,0.10);}
.cible.on b{color:var(--accent);}
.cible.mort{opacity:0.45; text-decoration:line-through;}

/* ---------- La grille ----------
   11 colonnes : une pour les en-têtes de ligne, dix pour le jeu.
   La grille doit tenir en largeur sur un téléphone sans jamais
   déborder, d'où le dimensionnement en fractions et le aspect-ratio
   qui garde les cases carrées quelle que soit la largeur. */
.grid-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.grid-nav{
  display:grid; grid-template-columns:1.1rem repeat(10, 1fr);
  gap:2px; min-width:0;
}
.grid-head{
  display:flex; align-items:center; justify-content:center;
  font-size:0.58rem; color:var(--dim); font-family:var(--font-display);
}
.cell{
  margin:0; padding:0; aspect-ratio:1;
  background:rgba(14,52,80,0.55); border:1px solid rgba(255,255,255,0.07);
  border-radius:3px; cursor:default;
}
.grid-nav.petite .cell{border-radius:2px;}
.grid-nav.petite{grid-template-columns:0.9rem repeat(10, 1fr);}

/* Mes bateaux, sur ma propre grille */
.cell.bateau{background:#64748b; border-color:#94a3b8;}
.cell.coule{background:#475569;}
.cell.b0{background:#64748b;} .cell.b1{background:#7c8fa5;}
.cell.b2{background:#5b7086;} .cell.b3{background:#8497ab;}
.cell.b4{background:#6b7f93;}

/* Résultats de tir — les mêmes couleurs des deux côtés, pour que
   « touché » se lise pareil sur sa grille et sur celle d'en face. */
.cell.eau{
  background:rgba(14,52,80,0.9);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,0.10);
}
.cell.touche{background:#ef4444; border-color:#fca5a5;}
.cell.bateau.touche{background:#dc2626;}

/* Cases encore tirables, quand c'est notre tour */
.grid-nav.jouable .cell.libre{cursor:pointer; background:rgba(34,211,238,0.10);}
.grid-nav.jouable .cell.libre:active{background:rgba(34,211,238,0.35);}

/* ---------- Placement de la flotte ---------- */
.fleet{display:flex; flex-direction:column; gap:6px;}
.fleet-row{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px; cursor:pointer;
  background:rgba(0,0,0,0.25); border:1px solid var(--line-2);
}
.fleet-row.actif{border-color:var(--accent); background:rgba(34,211,238,0.10);}
.fleet-nom{flex:1; font-size:0.88rem; font-weight:500;}
.fleet-taille{font-size:0.72rem; color:var(--dim);}
.fleet-etat{font-size:0.75rem; color:var(--muted); min-width:52px; text-align:right;}
.fleet-row.pose .fleet-etat{color:var(--success);}
.place-actions{display:flex; gap:8px;}
.place-actions button{flex:1;}
/* Flotte validée : on fige les commandes plutôt que de les cacher,
   pour que l'écran ne se réorganise pas sous les doigts. */
.fige{opacity:0.4; pointer-events:none;}

/* ---------- Bateaux coulés ---------- */
.coules{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.coule-tag{
  font-size:0.7rem; padding:3px 9px; border-radius:999px;
  background:rgba(239,68,68,0.15); color:#fca5a5;
  text-decoration:line-through;
}

/* ---------- Grilles de fin ---------- */
.end-grid-block{margin-bottom:16px;}
.end-grid-block h3{
  font-family:var(--font-display); font-size:0.9rem;
  margin-bottom:6px; color:var(--accent-2);
}

/* ---------- Décomptes ---------- */
.score-row{
  display:flex; align-items:center; gap:8px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.score-row:last-child{border-bottom:0;}
.score-row.winner .sr-name{color:var(--accent);}
.sr-pos{
  font-family:var(--font-display); font-weight:700; color:var(--dim);
  width:20px; text-align:center;
}
.sr-name{font-size:0.9rem; font-weight:500; min-width:70px;}
.sr-tot{
  font-family:var(--font-display); font-weight:700;
  min-width:52px; text-align:right;
}

/* ---------- Journal ---------- */
.log{max-height:190px; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.log-line{
  font-size:0.8rem; color:var(--muted);
  padding:6px 0; border-bottom:1px solid var(--line);
}
.log-line:last-child{border-bottom:0;}
/* Un « touché » et surtout un « coulé » doivent sauter aux yeux. */
.log-line.touche{color:var(--warn);}
.log-line.coule{color:var(--danger); font-weight:500;}

/* ---------- Fin ---------- */
.end-card{text-align:center;}
.end-emoji{font-size:3rem; margin-bottom:6px;}
#end-title{justify-content:center; font-size:1.35rem;}
.end-score{
  font-family:var(--font-display); font-weight:700; font-size:2.8rem;
  color:var(--accent); margin:6px 0;
}
.log-tall{max-height:320px;}

/* ---------- Modale règles ---------- */
.modal{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center; padding:5vh 16px;
  pointer-events:none;
}
.modal:not([hidden]){pointer-events:auto;}
.modal-backdrop{position:absolute; inset:0; background:rgba(3,7,18,0.86);}
.modal-box{
  position:relative; z-index:1; width:100%; max-width:520px;
  max-height:86vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--panel-solid); border:1px solid var(--line-2);
  border-radius:20px; padding:22px;
}
.modal-box h2{font-family:var(--font-display); font-size:1.15rem; margin-bottom:14px;}
.modal-box p{font-size:0.86rem; color:var(--muted); line-height:1.6; margin-bottom:12px;}
.modal-box b{color:var(--text);}
.modal-close{
  position:absolute; top:10px; right:12px; margin:0;
  width:34px; height:34px; padding:0; border-radius:50%;
  background:var(--surface-2); color:var(--muted); font-size:1.3rem; line-height:1;
}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translate(-50%, 24px); z-index:100;
  background:var(--panel-solid); border:1px solid var(--line-2);
  border-radius:12px; padding:12px 18px; font-size:0.85rem;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
  max-width:88vw; text-align:center;
}
.toast.show{opacity:1; transform:translate(-50%, 0);}

/* ---------- Petits écrans ---------- */
@media (max-width:380px){
  .code-display{font-size:2.1rem;}
  .grid-nav{gap:1px; grid-template-columns:0.9rem repeat(10, 1fr);}
  .grid-head{font-size:0.5rem;}
  .cible{flex:1 1 100%;}
}