/* Doblons V3. HUD sobre superposé au canvas, panneaux hiérarchisés. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0d2836;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #eef2f6;
  user-select: none;
}

#game { position: fixed; inset: 0; display: block; }

#minimap {
  position: fixed; right: 14px; bottom: 14px;
  width: 232px; height: 232px; /* PC : agrandie (190 -> 232) pour une meilleure lisibilite */
  border: 2px solid rgba(0, 0, 0, 0.45);
  border-radius: 8px;
  z-index: 5; cursor: pointer; /* cliquable → carte détaillée */
}
#minimap:hover { border-color: rgba(240, 217, 122, 0.7); }
/* HALO « coffre gratuit » : pulse doré du cadre de la mini-carte pour attirer l'œil vers le point
   GPS du coffre (UI.showChestSpotlight). Remplace l'ancien assombrissement plein écran + flèche. */
#minimap.mm-chest-hint {
  border-color: rgba(240, 217, 122, 0.95);
  animation: mmChestHint 1.1s ease-in-out 6;
}
@keyframes mmChestHint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 217, 122, 0.0); }
  50% { box-shadow: 0 0 0 5px rgba(240, 217, 122, 0.55); }
}

/* PASTILLE DE POSITION sur la mini-carte : repositionnée en JS (UI.updateMinimapDot), au-dessus
   du canvas. Point FIXE (plus de grossissement) + léger cadre carré animé autour, discret. */
#mm-dot {
  position: fixed; z-index: 6; pointer-events: none;
  width: 6px; height: 6px; margin: -3px 0 0 -3px; /* centre la pastille sur left/top */
  border-radius: 50%; background: #ffffff;
  box-shadow: 0 0 4px 1px rgba(255,255,255,0.8);
}
#mm-dot::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px; /* cadre carré centré sur le point */
  border: 1px solid rgba(255,255,255,0.7);
  animation: mmdotframe 1.8s ease-in-out infinite;
}
#mm-dot.hidden { display: none; }
@keyframes mmdotframe {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.3; }
}

/* PASTILLE DE LA CIBLE À PRIME sur la mini-carte (UI.updateBountyDot) : dorée + glyphe « $ »,
   pour la distinguer du point (blanc) du joueur. Pulsation plus rapide/marquée : signale une
   cible à traquer, pas juste un repère de position. */
#mm-bounty-dot {
  position: fixed; z-index: 6; pointer-events: none;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; /* centre la pastille sur left/top */
  border-radius: 50%; background: #ffd75e; border: 1.5px solid #7a5a10;
  box-shadow: 0 0 6px 2px rgba(255, 215, 94, 0.8);
  display: flex; align-items: center; justify-content: center;
  animation: mmbountypulse 0.9s ease-in-out infinite;
}
#mm-bounty-dot::before {
  content: '$'; font: 800 9px/1 'Segoe UI', sans-serif; color: #4a3410;
}
#mm-bounty-dot.hidden { display: none; }
@keyframes mmbountypulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}

/* POINT GPS PRIVÉ du coffre de temps de jeu sur la mini-carte (UI.updateRewardChestDot) :
   vert trésor + glyphe coffre, distinct du point joueur (blanc) et de la prime (dorée). */
#mm-chest-dot {
  position: fixed; z-index: 6; pointer-events: none;
  width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; /* centre la pastille sur left/top */
  border-radius: 50%; background: #f0d97a; border: 1.5px solid #6b4a1f;
  box-shadow: 0 0 7px 2px rgba(240, 217, 122, 0.85);
  display: flex; align-items: center; justify-content: center;
  animation: mmchestpulse 0.85s ease-in-out infinite;
}
#mm-chest-dot::before {
  content: '';
  width: 12px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M3 9 Q12 1 21 9 L21 10 L3 10 Z' fill='%2396633f' stroke='%233f2a1a' stroke-width='1.4'/%3E%3Crect x='3' y='9.5' width='18' height='8.5' rx='1.5' fill='%237a5233' stroke='%233f2a1a' stroke-width='1.4'/%3E%3Crect x='9.5' y='6' width='5' height='5' rx='1' fill='%23f0d97a' stroke='%233f2a1a' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
}
#mm-chest-dot.hidden { display: none; }
@keyframes mmchestpulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.4); }
}
/* pastille « ÉPINGLÉE » : anneau cyan + LOGO COFFRE (au lieu du simple glyphe ⬧) qui RESTE après
   un clic sur le logo du HUD (UI.guideToChest), pour confirmer/repérer sur la carte OÙ ALLER —
   contrairement au ping (chest-dot-ping), qui ne joue qu'un instant, cet anneau persiste tant que
   le coffre est actif. Agrandi (15→22px) pour que le logo soit lisible et que le grossit/rétrécit
   (mmchestpulse, hérité de #mm-chest-dot) serve vraiment de repère visuel bien visible. */
#mm-chest-dot.tracked {
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  box-shadow: 0 0 0 3px rgba(94, 200, 255, 0.65), 0 0 9px 3px rgba(240, 217, 122, 0.9);
}
#mm-chest-dot.tracked::before {
  content: '';
  width: 17px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M3 9 Q12 1 21 9 L21 10 L3 10 Z' fill='%2396633f' stroke='%233f2a1a' stroke-width='1.4'/%3E%3Crect x='3' y='9.5' width='18' height='8.5' rx='1.5' fill='%237a5233' stroke='%233f2a1a' stroke-width='1.4'/%3E%3Crect x='9.5' y='6' width='5' height='5' rx='1' fill='%23f0d97a' stroke='%233f2a1a' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* POINT GPS DE CAP posé par le joueur (UI.updateWaypoint) : curseur/épingle GPS cyan, distinct du
   point joueur (blanc), de la prime et du coffre (dorés). La POINTE de l'épingle se pose pile sur
   le cap ; un pointillé sur la mini-carte guide vers lui. */
#mm-waypoint-dot {
  position: fixed; z-index: 6; pointer-events: none;
  width: 22px; height: 28px; margin: -28px 0 0 -11px; /* pointe (bas-centre) posée sur left/top */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 1.5 C6.2 1.5 1.8 5.9 1.8 11.6 C1.8 19.3 12 30.5 12 30.5 C12 30.5 22.2 19.3 22.2 11.6 C22.2 5.9 17.8 1.5 12 1.5 Z' fill='%235ec8ff' stroke='%230b2733' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='11.4' r='3.9' fill='%230e2a3c'/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 0 5px rgba(94, 200, 255, 0.75));
  transform-origin: 50% 100%; /* le pouls grandit depuis la pointe */
  animation: mmwppulse 1s ease-in-out infinite;
}
#mm-waypoint-dot::before { content: none; }
#mm-waypoint-dot.hidden { display: none; }
@keyframes mmwppulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* CARTE DÉTAILLÉE (overlay ouvert au clic sur la minimap) */
#minimap-modal { z-index: 46; }
/* carte détaillée : UNE seule colonne à onglets (Carte / Partage de position) → responsive */
#minimap-big-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(78vmin, 720px); max-width: 96vw; }
/* onglets (même patron que #foot-tabs) */
#mm-tabs { display: flex; gap: 10px; width: 100%; justify-content: center; }
.mm-tab {
  border: 1.5px solid #3a5f77; background: rgba(255, 255, 255, 0.06); color: #dce8f1;
  border-radius: 999px; padding: 10px 22px; font-size: 15px; font-weight: 800; letter-spacing: 0.3px;
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.mm-tab:hover { background: rgba(255, 255, 255, 0.12); border-color: #5ec8ff; }
.mm-tab.selected {
  background: rgba(94, 200, 255, 0.22); border-color: #5ec8ff; color: #eaf6ff;
  box-shadow: 0 0 0 1px rgba(94, 200, 255, 0.4), 0 6px 16px rgba(94, 200, 255, 0.22);
}
#mm-tab-badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 7px;
  background: #ec8d8d; color: #2a0f0f; border-radius: 999px;
  font-size: 12px; font-weight: 800; line-height: 18px; text-align: center;
}
.mm-tabpane { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
#minimap-big {
  width: min(78vmin, 720px); height: min(78vmin, 720px); max-width: 100%;
  border: 2px solid #33566b; border-radius: 12px;
  background: #0e3346; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.6);
}
/* Panneau latéral de l'onglet Carte : conteneur légende + outils de cap. Empilé sous la carte en
   mobile (base) ; devient une colonne à droite en desktop (voir media query >=781px plus bas). */
.mm-carte-side { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
/* Légende : liste pastille + libellé. Wrap horizontal par défaut (mobile, sous la carte) ;
   passe en colonne dans le panneau latéral en desktop. */
.minimap-legend {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; align-items: center;
  font-size: 13px; color: #cfdce6;
}
.minimap-legend li { display: flex; align-items: center; }
.mm-k { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.mm-you { background: #ffffff; border-radius: 50%; }
.mm-ally { background: #7db9ec; }
.mm-foe { background: #ec8d8d; }
.mm-boss { background: #b09ad0; }
.mm-isle { background: #77a267; border-radius: 50%; }
.mm-sell { background: #e9c53a; border-radius: 50%; }
.mm-arsenal { background: #e8703a; border-radius: 50%; }
.mm-chantier { background: #9aa7b0; border-radius: 50%; }
.mm-admiralty { background: #4a90d9; border-radius: 50%; }
.mm-stadium { background: #f0d97a; border-radius: 50%; }
.mm-waypoint { width: 12px; height: 15px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 1.5 C6.2 1.5 1.8 5.9 1.8 11.6 C1.8 19.3 12 30.5 12 30.5 C12 30.5 22.2 19.3 22.2 11.6 C22.2 5.9 17.8 1.5 12 1.5 Z' fill='%235ec8ff' stroke='%230b2733' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='11.4' r='3.9' fill='%230e2a3c'/%3E%3C/svg%3E") no-repeat center / contain; }
.mm-share { background: #f2b23a; border-radius: 2px; transform: rotate(45deg); }

/* Outils de CAP sous la carte détaillée : indice + bouton « Effacer le cap » (voir UI.updateWaypoint). */
#mm-waypoint-tools {
  display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; align-items: center;
  font-size: 13px; color: #9fb6c6;
}
.mm-wp-hint { opacity: 0.85; }
#mm-clear-waypoint {
  border: 1px solid rgba(94, 200, 255, 0.5); background: rgba(94, 200, 255, 0.12); color: #cdecff;
  border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
#mm-clear-waypoint:hover { background: rgba(94, 200, 255, 0.22); }

/* ---------- Carte détaillée en DESKTOP : légende + outils de cap SUR LE CÔTÉ ----------
   La carte occupe la gauche ; le panneau latéral (légende verticale + outils de cap) se cale à
   droite → plus lisible, plus de texte tassé sous la carte. Sous 781px on repasse en colonne. */
@media (min-width: 781px) {
  #minimap-big-wrap { width: min(96vw, 1040px); }
  #mm-tab-carte { flex-direction: row; align-items: flex-start; justify-content: center; gap: 24px; }
  .mm-carte-side { width: 250px; flex: 0 0 250px; align-items: flex-start; gap: 16px; padding-top: 2px; }
  .minimap-legend {
    flex-direction: column; flex-wrap: nowrap; align-items: flex-start;
    justify-content: flex-start; gap: 9px; font-size: 13.5px; text-align: left;
  }
  #mm-waypoint-tools { flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }
}

/* ---------- Carte détaillée en MOBILE PAYSAGE (peu de hauteur) ----------
   En paysage court, la carte remplissait toute la hauteur : les onglets (Carte / Partage de
   position) débordaient au-dessus de l'écran et la légende se tassait en colonne étroite. Ici :
   modale déroulante alignée en haut, carte réduite pour révéler les onglets, et conteneur élargi
   pour étaler la légende sur toute la largeur disponible (droite<->gauche). */
@media (orientation: landscape) and (max-height: 620px) {
  #minimap-modal { justify-content: safe center; overflow-y: auto; padding: 10px 0; }
  #minimap-big-wrap { width: min(96vw, 1080px); max-width: 96vw; gap: 8px; }
  #mm-tabs { position: sticky; top: 0; z-index: 2; }
  #minimap-big { width: min(58vh, 440px); height: min(58vh, 440px); }
  /* Peu de hauteur : on repasse la carte en colonne (légende horizontale sous la carte) au lieu
     du panneau latéral vertical — évite une légende trop haute qui déborderait. */
  #mm-tab-carte { flex-direction: column; align-items: center; gap: 8px; }
  .mm-carte-side { width: 100%; align-items: center; }
  .minimap-legend { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; max-width: 980px; font-size: 12px; gap: 5px 18px; }
  #mm-waypoint-tools { flex-direction: row; align-items: center; justify-content: center; }
}


/* ---------- PANNEAU LATÉRAL « partage de position (GPS) » de la carte détaillée ---------- */
/* onglet « partage de position » : occupe la largeur de la carte, liste défilante */
#mm-tab-gps { align-items: stretch; gap: 10px; text-align: left; max-height: min(70vmin, 640px); }
.mm-side-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: #9fb6c6; }
#mm-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* une ligne = un joueur : pseudo (+ état) à gauche, action(s) à droite */
.mm-player {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07);
}
.mm-player.is-shared { border-color: rgba(242, 178, 58, 0.55); background: rgba(242, 178, 58, 0.1); }
.mm-player.is-incoming { border-color: rgba(94, 200, 255, 0.55); background: rgba(94, 200, 255, 0.1); }
.mm-player-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mm-player-name { font-weight: 700; font-size: 14px; color: #eaf3fb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-player-state { font-size: 11.5px; color: #9fb6c6; }
.mm-player-actions { display: flex; gap: 6px; flex-shrink: 0; }
.mm-gps-btn {
  border: 1px solid rgba(94, 200, 255, 0.5); background: rgba(94, 200, 255, 0.12); color: #cdecff;
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.mm-gps-btn:hover { background: rgba(94, 200, 255, 0.24); }
.mm-gps-btn.is-accept { border-color: rgba(120, 210, 130, 0.6); background: rgba(120, 210, 130, 0.16); color: #d6f5da; }
.mm-gps-btn.is-accept:hover { background: rgba(120, 210, 130, 0.28); }
.mm-gps-btn.is-stop { border-color: rgba(236, 141, 141, 0.6); background: rgba(236, 141, 141, 0.14); color: #ffdada; }
.mm-gps-btn.is-stop:hover { background: rgba(236, 141, 141, 0.26); }

/* ---------- TOAST de demande de partage reçue (Accepter / Refuser) ---------- */
#gps-toasts {
  position: fixed; left: 50%; top: 74px; transform: translateX(-50%);
  z-index: 47; display: flex; flex-direction: column; gap: 10px;
  width: min(420px, 94vw); pointer-events: none;
}
#gps-toasts:empty { display: none; }
.gps-toast {
  pointer-events: auto;
  background: rgba(12, 28, 40, 0.96); border: 1px solid #3a6f8c; border-radius: 12px;
  padding: 12px 14px; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
  animation: gpsToastIn 0.22s ease-out;
}
@keyframes gpsToastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.gps-toast-title { font-size: 14.5px; font-weight: 700; color: #eaf3fb; }
.gps-toast-title strong { color: #ffd98a; }
.gps-toast-sub { font-size: 12px; color: #9fb6c6; margin-top: 3px; }
.gps-toast-actions { display: flex; gap: 8px; margin-top: 10px; }
.gps-toast-actions .mm-gps-btn { flex: 1; text-align: center; padding: 7px 12px; font-size: 13px; }

.hidden { display: none !important; }

/* ---------- overlays (hiérarchie stricte) ---------- */

.overlay {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  background: rgba(7, 20, 30, 0.78);
  z-index: 30;
  text-align: center;
}
#menu { z-index: 30; }
#death-screen { z-index: 32; }
#equip-panel, #class-panel, #gallery-panel { z-index: 36; }
/* PRÉSENTATION diep.io : mêmes fond sombre + grille que le menu pour les popups navires */
#equip-panel, #class-panel, #gallery-panel {
  background-color: rgba(14, 22, 34, 0.985); /* quasi opaque : la mer ne transparaît plus dessous */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 44px 44px;
}
#options-panel, #tutorial-panel, #premium-panel { z-index: 44; } /* toujours au-dessus, y compris du menu */
#options-panel, #premium-panel {
  background:
    radial-gradient(ellipse at 50% 22%, rgba(30, 80, 110, 0.5), rgba(7, 20, 30, 0.95) 72%),
    rgba(7, 20, 30, 0.9);
}
#options-panel h2 { text-shadow: 0 2px 10px rgba(0,0,0,0.5); }

/* ---------- menu ---------- */

#menu-grid {
  display: grid;
  /* DEUX colonnes claires : à GAUCHE le bloc principal (logo, navire, modes, boutons empilés
     VERTICALEMENT), à DROITE les cartes d'info. Les colonnes « collent » à leur contenu
     (largeurs bornées) pour que le navire remplisse sa colonne au lieu de flotter dans du vide.
     align-items:start → les deux colonnes démarrent en HAUT (le logo n'est jamais repoussé vers
     le bas par une colonne voisine plus longue). */
  grid-template-columns: minmax(340px, 470px) minmax(320px, 470px);
  gap: 28px;
  align-items: start;
  justify-content: center;
  width: min(1000px, 96vw);
  /* centrage HORIZONTAL uniquement (`0 auto`) : un `margin:auto` complet ajoutait des marges
     verticales auto qui re-centraient la grille et rouvraient le vide au-dessus du logo. */
  margin: 0 auto;
}
@media (max-width: 940px) {
  #menu-grid { grid-template-columns: 1fr; width: min(600px, 94vw); align-items: stretch; }
}

#menu-main {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
}

#menu {
  /* Fond d'accueil « coucher de soleil rose » : dégradé ciel rose→pêche→mer crépusculaire.
     La scène (soleil, mer, voilier, oiseaux) est dessinée dans #menu-sky par-dessus.
     Découplé du rendu du canvas de jeu. */
  background-color: #8a6f9e;
  background-image:
    linear-gradient(180deg, #ffd7e6 0%, #ffc2cf 20%, #ffb0a6 40%, #f5989f 58%, #cf88a8 76%, #8a6f9e 100%);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  /* CONTENEUR DÉFILANT plein écran : le menu occupe TOUJOURS exactement la hauteur du
     viewport (position:fixed + inset:0, hérité de .overlay) et défile EN INTERNE si le
     contenu dépasse. Indispensable car <body> est en overflow:hidden (verrou du jeu) :
     un menu en position:relative + min-height grandirait au-delà de l'écran et tout ce
     qui passe sous la ligne de flottaison (colonne latérale : missions, succès…)
     deviendrait CLIPPÉ et impossible à faire défiler. La hauteur bornée fait enfin
     mordre overflow-y:auto. Couvrir tout le viewport masque aussi la bande d'eau du
     canvas de jeu qui apparaissait sous un menu trop court. */
  /* Contenu ANCRÉ EN HAUT (padding supérieur responsive borné) plutôt que centré verticalement :
     sur un grand écran (ex. 1080p), le centrage laissait ~150px de vide au-dessus du logo
     (« padding énorme »). Le pied de page légal est, lui, repoussé en bas via `margin-top:auto`
     (voir .menu-legal-footer), ce qui garde l'ensemble équilibré sans creux au-dessus du titre. */
  padding: clamp(26px, 6vh, 72px) 16px 24px;
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  justify-content: flex-start;
  /* Barre de défilement DISCRÈTE et thématisée : quand le contenu de l'accueil dépasse la
     hauteur de la fenêtre, le menu défile en interne. Sans style, le navigateur affiche une
     barre par défaut (parfois sombre) collée au bord droit → « barre noire à droite ». On la
     rend fine et translucide (piste transparente) pour qu'elle se fonde dans le décor. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}
#menu::-webkit-scrollbar { width: 10px; }
#menu::-webkit-scrollbar-track { background: transparent; }
#menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
#menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
  background-clip: content-box;
}

/* SCÈNE DE FOND « coucher de soleil » : couche SVG décorative DERRIÈRE le contenu du menu
   (soleil, mer, voilier, oiseaux). pointer-events:none → n'intercepte aucun clic. */
#menu-sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* le fond fixe (soleil + mer) remplit l'écran ; les mobiles (voiliers/oiseaux) sont détachés */
#menu-sky .vsky-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* le contenu (titre, cartes, boutons) passe AU-DESSUS de la scène */
#menu-grid { position: relative; z-index: 1; }

/* VOILIERS qui traversent l'écran d'un bord à l'autre, en tanguant un peu. */
.vsky-boat { position: absolute; left: 0; width: 64px; height: 60px; will-change: transform; }
.vsky-boat--1 { bottom: 12%; animation: vskySail 36s linear infinite; }
.vsky-boat--2 { bottom: 7%; width: 46px; height: 43px; opacity: 0.85; animation: vskySail 52s linear infinite; animation-delay: -22s; }
@keyframes vskySail {
  0%   { transform: translateX(-12vw) rotate(-2deg); }
  25%  { transform: translateX(28vw) translateY(-5px) rotate(2deg); }
  50%  { transform: translateX(56vw) translateY(0) rotate(-2deg); }
  75%  { transform: translateX(84vw) translateY(-5px) rotate(2deg); }
  100% { transform: translateX(114vw) rotate(-2deg); }
}

/* OISEAUX qui traversent le ciel, avec un léger vol ondulant. */
.vsky-bird { position: absolute; left: 0; width: 64px; height: 22px; opacity: 0.72; will-change: transform; }
.vbird--1 { top: 11%; animation: vskyFly 40s linear infinite; }
.vbird--2 { top: 19%; width: 42px; animation: vskyFly 54s linear infinite; animation-delay: -16s; }
.vbird--3 { top: 7%;  width: 50px; animation: vskyFly 47s linear infinite; animation-delay: -31s; }
@keyframes vskyFly {
  0%   { transform: translateX(-12vw) translateY(0); }
  30%  { transform: translateX(28vw) translateY(-16px); }
  60%  { transform: translateX(62vw) translateY(6px); }
  100% { transform: translateX(114vw) translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .vsky-boat, .vsky-bird { animation: none !important; }
  .vsky-boat--1 { transform: translateX(18vw); } .vsky-boat--2 { transform: translateX(70vw); }
  .vbird--1 { transform: translateX(30vw); } .vbird--2 { transform: translateX(60vw); } .vbird--3 { transform: translateX(85vw); }
}

/* Décor cartoon d'accueil (soleil, nuages, mouettes, pièces, vagues, parade pirates) retiré
   au profit de l'esthétique épurée diep.io. Bloc conservé masqué pour réactivation éventuelle. */
#menu-scene { display: none; }

/* ---------- scène d'accueil animée (soleil, nuages, mouettes, pièces, vagues, coffre) ---------- */
#menu-scene {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
#menu-grid { position: relative; z-index: 1; }

.scene-sun {
  position: absolute; top: -8%; right: 6%;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, #fff6c8 0%, #ffe38a 35%, rgba(255,200,90,0) 72%);
  filter: blur(1px);
  animation: sunPulse 6s ease-in-out infinite;
}
@keyframes sunPulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.07); }
}

.cloud {
  position: absolute; width: 150px; height: 48px; left: -20%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.85), rgba(255,255,255,0));
  border-radius: 50%; filter: blur(1px);
  animation: cloudDrift linear infinite;
}
.cloud-1 { top: 10%; animation-duration: 65s; }
.cloud-2 { top: 24%; width: 110px; height: 38px; animation-duration: 90s; animation-delay: -28s; }
.cloud-3 { top: 5%; width: 90px; height: 32px; animation-duration: 110s; animation-delay: -55s; }
@keyframes cloudDrift { from { left: -20%; } to { left: 115%; } }

.gull { position: absolute; width: 34px; height: 12px; color: rgba(20, 30, 40, 0.55); animation: gullFly linear infinite; }
.gull-1 { top: 16%; animation-duration: 16s; }
.gull-2 { top: 27%; animation-duration: 22s; animation-delay: -9s; }
@keyframes gullFly {
  from { left: -10%; transform: translateY(0); }
  50% { transform: translateY(-9px); }
  to { left: 110%; transform: translateY(0); }
}

.sparkle {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px 2px rgba(255,255,255,0.85);
  animation: sparkleTwinkle ease-in-out infinite;
}
.s1 { top: 14%; left: 24%; animation-duration: 3.2s; }
.s2 { top: 34%; left: 66%; animation-duration: 2.6s; animation-delay: -1s; }
.s3 { top: 52%; left: 12%; animation-duration: 3.8s; animation-delay: -2s; }
.s4 { top: 20%; left: 82%; animation-duration: 2.9s; animation-delay: -0.6s; }
.s5 { top: 64%; left: 90%; animation-duration: 3.4s; animation-delay: -1.4s; }
@keyframes sparkleTwinkle { 0%, 100% { opacity: 0; transform: scale(0.4); } 50% { opacity: 1; transform: scale(1); } }

.coin {
  position: absolute; bottom: -40px; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #f0d97a 55%, #b9982a 100%);
  box-shadow: 0 0 8px rgba(240,217,122,0.55), inset 0 0 3px rgba(255,255,255,0.7);
  animation: coinFloat linear infinite;
}
.coin::before {
  content: '$'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #7a5f1e;
}
.c1 { left: 6%; width: 26px; height: 26px; animation-duration: 9s; }
.c2 { left: 18%; width: 16px; height: 16px; animation-duration: 12s; animation-delay: -3s; }
.c3 { left: 34%; animation-duration: 10s; animation-delay: -6s; }
.c4 { left: 62%; width: 18px; height: 18px; animation-duration: 13s; animation-delay: -2s; }
.c5 { left: 78%; width: 24px; height: 24px; animation-duration: 8.5s; animation-delay: -5s; }
.c6 { left: 90%; width: 15px; height: 15px; animation-duration: 11s; animation-delay: -8s; }
@keyframes coinFloat {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  8% { opacity: 0.9; }
  92% { opacity: 0.85; }
  100% { transform: translateY(-115vh) rotate(360deg); opacity: 0; }
}

.scene-chest {
  position: absolute; left: 2.5%; bottom: 4%; width: 84px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
  animation: chestBob 3.4s ease-in-out infinite;
}
.chest-svg { width: 100%; height: auto; display: block; }
.chest-glint {
  position: absolute; top: 34%; left: 40%; width: 9px; height: 9px; border-radius: 50%;
  background: #fff8d8; box-shadow: 0 0 10px 4px rgba(255,240,180,0.9);
  animation: sparkleTwinkle 2.2s ease-in-out infinite;
}
@keyframes chestBob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-6px) rotate(1deg); }
}
@media (max-width: 720px) { .scene-chest { width: 56px; } }

.scene-waves { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; }
.wave {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background-repeat: repeat-x; background-position: 0 100%; background-size: 400px 100%;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'><path d='M0 20 Q50 0 100 20 T200 20 V40 H0 Z' fill='%23ffffff' fill-opacity='0.10'/></svg>");
  animation: waveScroll 14s linear infinite;
}
.wave-2 { opacity: 0.7; bottom: -8px; background-size: 320px 100%; animation-duration: 10s; animation-direction: reverse; }
.wave-3 { opacity: 0.5; bottom: -18px; background-size: 260px 100%; animation-duration: 18s; }
@keyframes waveScroll { from { background-position-x: 0; } to { background-position-x: -400px; } }

/* ---------- CONVOI COMIQUE d'arrière-plan (voilier ⟵ bateau ⟵ chèvre ⟵ 4 pirates) ---------- */
#menu-parade {
  position: absolute; left: 0; right: 0; bottom: 15%;
  height: 74px; overflow: hidden; pointer-events: none; opacity: 0.9;
}
.parade-convoy {
  position: absolute; bottom: 0; left: 0;
  display: flex; align-items: flex-end; gap: 44px; white-space: nowrap;
  animation: paradeCross 27s linear infinite;
}
.parade-unit { position: relative; display: inline-flex; align-items: flex-end; }
.parade-unit svg { display: block; width: auto; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.25)); }
.pu-sail svg { height: 58px; animation: paradeBob 2.2s ease-in-out infinite; }
.pu-boat svg { height: 46px; animation: paradeBob 1.9s ease-in-out infinite; }
.pu-goat svg { height: 42px; animation: paradeHop 0.5s ease-in-out infinite; }
.pu-pirates svg { height: 48px; animation: paradeHop 0.34s ease-in-out infinite; }
.parade-insult {
  position: absolute; top: -15px; font-size: 13px; font-weight: 900; color: #ffe27a;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  opacity: 0;
}
.parade-insult.pi1 { left: 0; animation: paradeInsult 1.5s ease-in-out infinite; }
.parade-insult.pi2 { left: 30px; animation: paradeInsult 1.5s ease-in-out infinite 0.5s; }
.parade-insult.pi3 { left: 56px; animation: paradeInsult 1.5s ease-in-out infinite 1s; }
@keyframes paradeCross { 0% { transform: translateX(100vw); } 100% { transform: translateX(-640px); } }
@keyframes paradeBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
@keyframes paradeHop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes paradeInsult {
  0%, 100% { opacity: 0; transform: translateY(4px) scale(0.7); }
  30%, 60% { opacity: 1; transform: translateY(-2px) scale(1); }
}

.menu-teaser {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.2px;
  color: #b9c6cf; background: rgba(0,0,0,0.25);
  border: 1px solid #3a5566; border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  #menu-scene *, .menu-teaser, #btn-play, #btn-respawn { animation: none !important; }
  #btn-play::after, #btn-respawn::after { display: none !important; }
}
/* panneaux plats et sobres (diep.io) : fond uni, liseré fin, coins peu arrondis */
#menu-main, #menu-side {
  background: #1d1f3c;
  border: 1px solid #46487a;
  border-radius: 10px;
  padding: 22px 26px;
  box-shadow: 0 10px 30px rgba(20, 8, 30, 0.42);
}
#menu h1 {
  font-size: 64px; font-weight: 900; letter-spacing: 6px;
  color: #f2f5f7;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column; gap: 6px;
}
#menu-main, #menu-side { animation: menuIn 0.5s ease; }
@keyframes menuIn { from { opacity: 0; transform: translateY(12px); } }
#menu h1 span {
  font-size: 13px; font-weight: 500; letter-spacing: 3px;
  color: #8fa6b4; text-shadow: none; text-transform: uppercase;
}
/* Logo wordmark (emblème + DOVION) en image : remplace l'ancien titre texte.
   S'adapte à la largeur du panneau ; le teaser reste dessous. */
.menu-logo-img {
  display: block; width: 100%; max-width: 440px; height: auto;
  margin: 0 auto 4px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}
/* PSEUDO éditable DIRECTEMENT sous le bateau : le champ EST la légende du navire. Il ressemble
   au nom d'équipe (or, centré, gras) mais se signale clairement éditable — soulignement
   pointillé au repos, fond + trait plein au focus — avec un indice « clique pour écrire ». */
#pseudo-edit {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%; cursor: text;
}
#name-input {
  width: 100%; max-width: 300px; padding: 4px 8px 3px;
  font-size: 16px; text-align: center; font-weight: 800; letter-spacing: 0.5px;
  color: #f0d97a; background: transparent;
  border: none; border-bottom: 2px dashed rgba(240, 217, 122, 0.55);
  border-radius: 4px; outline: none;
  transition: background 0.15s, border-color 0.15s;
}
#name-input:hover { background: rgba(240, 217, 122, 0.08); }
#name-input:focus {
  background: rgba(240, 217, 122, 0.14);
  border-bottom-color: #f0d97a; border-bottom-style: solid;
}
#name-input::placeholder { color: #bfa155; font-weight: 700; opacity: 0.9; }
.pseudo-hint { font-size: 10px; color: #bcd0dc; letter-spacing: 0.3px; opacity: 0.85; }
#name-input:focus + .pseudo-hint { color: #cfe0ec; opacity: 1; }

/* MINI MENU ÉQUIPE — PLIÉ par défaut : il s'ouvre en popup centrée au clic sur #flag-open
   (desktop ET mobile). Ses propriétés flex servent à la mise en page INTERNE de la popup. */
#team-picker { flex: 1 1 260px; min-width: 0; display: none; flex-direction: column; gap: 8px; }

/* onglets Foot / Nations (compacts) */
#flag-tabs { display: flex; gap: 6px; }
.flag-tab {
  padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  color: #bcd0dc; background: rgba(8,22,32,0.6);
  border: 1px solid #33566b; border-radius: 8px;
}
.flag-tab:hover { border-color: #5aa9e6; color: #cfdde7; }
.flag-tab.selected { color: #0c1a24; background: linear-gradient(90deg, #f0d97a, #e0b84a); border-color: #f0d97a; }

/* barre de recherche dynamique du sélecteur d'équipe */
#flag-search {
  width: 100%; padding: 7px 12px; font-size: 13px;
  color: #eef2f6; background: #10303f;
  border: 1px solid #33566b; border-radius: 8px; outline: none;
}
#flag-search:focus { border-color: #5aa9e6; }
#flag-search::placeholder { color: #9bb0bd; }
#flag-empty { font-size: 12px; color: #9bb0bd; text-align: center; padding: 8px 0; }

/* grille de tuiles (vrai drapeau/logo + nom dessous), scrollable — tuiles COMPACTES */
#flag-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 5px;
  max-height: 150px; overflow-y: auto; padding: 2px;
}
#flag-grid::-webkit-scrollbar { width: 6px; }
#flag-grid::-webkit-scrollbar-thumb { background: #33566b; border-radius: 4px; }
.flag-sw {
  display: flex; flex-direction: column; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid #33566b; border-radius: 6px; background: rgba(8,22,32,0.5);
  transition: transform .1s ease, border-color .1s ease;
}
/* vignette : la bande couleur (repli) et l'image réelle se SUPERPOSENT (position absolue)
   pour éviter tout empilement vertical qui doublerait la hauteur. */
.flag-vis {
  position: relative; display: block; width: 100%; height: 28px; overflow: hidden;
  background: #0c1a24;
}
.flag-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.flag-stripes { position: absolute; inset: 0; display: flex; flex-direction: column; width: 100%; height: 100%; }
.flag-stripes span { flex: 1 1 33%; display: block; }
.flag-nm {
  padding: 2px 2px; font-size: 8px; font-style: normal; text-align: center; color: #cfdde7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flag-sw:hover { transform: translateY(-2px); border-color: #5aa9e6; }
.flag-sw.selected { border-color: #f0d97a; box-shadow: 0 0 0 2px rgba(240,217,122,0.4); }
/* équipe VERROUILLÉE : tuile GRISÉE + pastille cadenas/prix (débloquée en dépensant la réserve d'XP) */
.flag-sw.locked { position: relative; cursor: pointer; }
.flag-sw.locked .flag-vis { filter: grayscale(0.85) brightness(0.6); }
.flag-sw.locked .flag-nm { color: #8fa3b1; }
.flag-sw.locked:hover { border-color: #f0d97a; }
.flag-lock {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  background: rgba(6, 16, 24, 0.42); pointer-events: none;
}
.flag-lock-ic { font-size: 15px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6)); }
.flag-lock-px { font-size: 8.5px; font-weight: 800; color: #ffe08a; text-shadow: 0 1px 2px rgba(0,0,0,0.85); }

/* ---------- sélecteur d'équipe PLIÉ + POPUP centrée (desktop ET mobile) ----------
   Accueil sobre : on n'affiche qu'un déclencheur compact « Mon équipe ▾ ». Cliquer ouvre
   une popup CENTRÉE (onglets + recherche + grille), pilotée par js/ui.js (classe
   .flag-modal-open sur <body> + fond assombri #flag-backdrop). L'en-tête de popup n'apparaît
   qu'une fois ouverte. */
.flag-modal-head { display: none; }
.flag-open {
  /* déclencheur COMPACT, CENTRÉ dans son espace (margin auto) : sur les largeurs où il passe
     sous le navire, il se centre au lieu de coller à gauche. */
  width: auto; max-width: 100%; align-self: center; margin-left: auto; margin-right: auto;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 7px 12px; text-align: center; cursor: pointer;
  color: #cfdde7; background: rgba(8, 22, 32, 0.6);
  border: 1px solid #33566b; border-radius: 10px;
  transition: border-color .15s ease, background .15s ease;
}
.flag-open:hover { border-color: #5aa9e6; background: rgba(240, 217, 122, 0.06); }
.flag-open-vis {
  flex: 0 0 auto; width: 36px; height: 24px; border-radius: 4px;
  background: #0c1a24 center / cover no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.flag-open-txt { flex: 0 1 auto; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.flag-open-txt b {
  font-size: 9.5px; font-weight: 700; color: #bcd0dc;
  text-transform: uppercase; letter-spacing: 0.5px;
}
#flag-open-name {
  font-size: 14px; font-weight: 800; color: #f0d97a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flag-open-chev { flex: 0 0 auto; color: #bcd0dc; font-size: 14px; }
.flag-modal-head { align-items: center; justify-content: space-between; margin-bottom: 2px; }
.flag-modal-title { font-size: 14px; font-weight: 800; color: #eef2f6; }
.flag-close {
  width: 32px; height: 32px; font-size: 22px; line-height: 1; cursor: pointer;
  color: #cfdde7; background: rgba(8, 22, 32, 0.6);
  border: 1px solid #33566b; border-radius: 8px;
}
#flag-backdrop { position: fixed; inset: 0; background: rgba(4, 12, 18, 0.72); z-index: 49; backdrop-filter: blur(2px); }

/* POPUP OUVERTE — centrée à l'écran (desktop ET mobile), tuiles agrandies pour le confort. */
body.flag-modal-open .flag-modal-head { display: flex; }
body.flag-modal-open #team-picker {
  display: flex; position: fixed; z-index: 50;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(460px, 92vw); max-height: 82vh; overflow-y: auto;
  padding: 16px; gap: 10px;
  background: #14303f; border: 1px solid #3d6f92; border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.62);
  /* Keyframe DÉDIÉE qui conserve le recentrage translate(-50%,-50%) pendant toute
     l'animation : chestModalIn animait transform vers translateY(10px)/none et écrasait
     donc le centrage → la popup s'affichait un instant coin-haut-gauche au centre (« en bas »)
     avant de sauter au centre. */
  animation: teamPickerIn 0.2s ease;
}
@keyframes teamPickerIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
body.flag-modal-open #flag-grid {
  max-height: 56vh; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}
body.flag-modal-open .flag-vis { height: 40px; }
body.flag-modal-open .flag-nm { font-size: 10px; }

.mode-row { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.mode-btn {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 16px; min-width: 168px;
  font-size: 13.5px; font-weight: 700;
  color: #eef1fb; background: #2b2d52;
  border: 2px solid #4c4f86; border-radius: 6px;
  cursor: pointer;
}
.mode-btn small { font-size: 11px; font-weight: 400; color: #a8c0ce; }
.mode-btn { transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.mode-btn:hover:not(.is-locked) { border-color: #5aa9e6; transform: translateY(-2px); }
.mode-btn.selected {
  border-color: #f0d97a; color: #f0d97a;
  box-shadow: 0 0 0 1px rgba(240,217,122,0.35), 0 6px 16px rgba(240,217,122,0.22);
}
.mode-btn.selected small { color: #c9b565; }
/* mode à venir : bouton verrouillé, non cliquable */
.mode-btn.is-locked { opacity: 0.5; cursor: not-allowed; }
.mode-btn.is-locked:hover { border-color: #33566b; }
.mode-btn.is-locked small { color: #9bb0bd; font-style: italic; }

/* Rangée CTA « Prendre la mer » + logo coffre gratuit : les deux boutons côte à côte, le CTA
   principal prend toute la place restante (flex:1) et le coffre garde une taille fixe. Sélecteur
   `.play-row #btn-play` volontairement plus spécifique que la règle `#btn-play` seule (y compris
   sa variante mobile `width:100%` plus bas) pour ne PAS écraser #btn-respawn, qui lui reste seul
   sur sa ligne (écran de mort) et doit garder sa pleine largeur. */
.play-row { display: flex; align-items: stretch; gap: 8px; width: 100%; }
.play-row #btn-play { flex: 1 1 auto; width: auto; min-width: 0; }

/* BOUTON BOUTIQUE : échoppe bien visible sous « Prendre la mer » (icône sac + libellé + tag doré) —
   remplace l'ancien logo compact « ✦ » peu lisible. Garde id="btn-premium" (handler JS inchangé). */
/* Nouveau visuel : tuile « échoppe » NAVALE (corps bleu-nuit + liseré et accents dorés),
   cohérente avec les cartes du menu (.mode-row / .map-card) plutôt qu'un bouton doré « bonbon ».
   L'icône sac est posée dans une pastille dorée (vrai repère boutique), le tag est une pilule. */
.btn-shop {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 16px; cursor: pointer; text-align: left;
  font-family: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif; color: #f4e7c6;
  background: linear-gradient(180deg, #2c2f57, #20223f);
  border: 1.5px solid #c39a45; border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.25);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.btn-shop:hover {
  border-color: #f0d27a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 18px rgba(240,210,122,0.22);
  transform: translateY(-1px);
}
.btn-shop:active { transform: translateY(1px); }
.btn-shop-ic {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; color: #2a1f08;
  background: linear-gradient(180deg, #f3d179, #e2b64f); border-radius: 8px;
}
.btn-shop-txt { font-size: 16px; font-weight: 800; letter-spacing: 0.5px; color: #f6ecce; }
.btn-shop-tag {
  margin-left: auto; font-size: 10.5px; font-weight: 700; color: #e8c877;
  text-transform: uppercase; letter-spacing: 0.6px;
  border: 1px solid rgba(232,200,119,0.4); border-radius: 999px; padding: 3px 9px;
}

/* EN-TÊTE D'ACCUEIL (PC) : actions secondaires — Options, Comment jouer, Son, coffre gratuit.
   Disposées en LIGNE HORIZONTALE, insérées EN HAUT DE LA COLONNE DROITE (juste au-dessus de la
   carte « Réserve d'XP ») par UI.layoutMenuHome() → dans le flux, aucune superposition.
   Options / Comment jouer se partagent la largeur (flex) ; Son + coffre restent des icônes fixes.
   Sur mobile : masquée (les contrôles reviennent en bas via layoutMenuHome). */
.menu-topbar {
  display: flex; flex-direction: row; align-items: stretch; gap: 8px;
  width: 100%; margin: 0 0 2px;
}
.menu-topbar.hidden { display: none; }
/* boutons texte : partagent la largeur de la colonne à égalité */
.menu-topbar .btn-secondary {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px; font-size: 13px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* bouton Son en icône compacte fixe */
.menu-topbar .menu-cta-icon {
  flex: 0 0 auto; width: 42px; min-width: 42px; padding: 0; gap: 0; justify-content: center;
}
.menu-topbar .menu-cta-icon svg { width: 19px; height: 19px; }
.menu-topbar .menu-cta-icon.muted { border-color: #6a3540; color: #ec8d8d; }
/* coffre gratuit : repère doré, tuile fixe alignée sur la rangée */
.menu-topbar .menu-chest-badge {
  flex: 0 0 auto; width: 44px; min-width: 44px; height: auto; align-self: stretch;
}
.menu-topbar .menu-chest-badge svg { width: 26px; height: 22px; }

/* COLONNE ACTIONS (#menu-main) : conteneur des CTA + options + classement. En empilement
   normal (mobile/tablette) il reste « transparent » — `gap: inherit` reprend l'espacement de
   #menu-main pour garder un rythme vertical homogène avec les autres blocs. En desktop large
   (>=1200px) il devient la sous-colonne de DROITE (voir la media query dédiée en fin de feuille). */
.menu-side-actions { display: flex; flex-direction: column; gap: inherit; width: 100%; }

/* ============ CARROUSEL DE CARTES (accueil) — choix de map + verrous par grade ============
   Skin naval (marine + or) coherent avec .mode-row / .menu-card. La piste (.mapc-track) glisse
   au doigt (scroll natif + snap) ; les fleches la font defiler ; les cartes verrouillees ne sont
   pas selectionnables (secousse + rappel du grade requis, gere dans js/mapselect.js). */
.map-carousel { width: 100%; }
.mapc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mapc-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #bcd0dc; }
.mapc-grade { font-size: 11px; font-weight: 700; color: #f0d97a; background: rgba(240,217,122,0.12); border: 1px solid rgba(240,217,122,0.35); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.mapc-stage { display: flex; align-items: center; gap: 6px; }
.mapc-arrow {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: #cfe0ec; background: #2b2d52; border: 1px solid #4c4f86; border-radius: 999px; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.mapc-arrow:hover { border-color: #5aa9e6; color: #fff; }
.mapc-arrow:active { transform: scale(0.92); }
.mapc-track {
  flex: 1 1 auto; display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 6px;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.mapc-track::-webkit-scrollbar { display: none; }
.map-card {
  flex: 0 0 132px; scroll-snap-align: center;
  display: flex; flex-direction: column; text-align: left;
  padding: 8px; color: #eef1fb; cursor: pointer;
  background: #26284a; border: 2px solid #4d5084; border-radius: 10px;
  transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.map-card:hover { transform: translateY(-2px); border-color: #5aa9e6; }
.map-card.is-selected { border-color: #f0d97a; box-shadow: 0 0 0 1px rgba(240,217,122,0.35), 0 6px 16px rgba(240,217,122,0.2); }
/* MAP 2 mise en avant : halo doré permanent + badge « Conseillée » (carte principale à utiliser). */
.map-card { position: relative; }
.map-card.mapc-reco { border-color: #f0d97a; box-shadow: 0 0 0 1px rgba(240,217,122,0.4), 0 6px 18px rgba(240,217,122,0.28); }
.mapc-reco-badge { display: none; position: absolute; top: 6px; right: 6px; z-index: 2; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #2a1a06; background: #f0d97a; border-radius: 999px; padding: 2px 7px; }
.map-card.mapc-reco .mapc-reco-badge { display: inline-flex; }
.mapc-thumb { display: block; height: 72px; margin-bottom: 7px; border-radius: 6px; overflow: hidden; background: #0e2740; }
.mapc-thumb svg { display: block; width: 100%; height: 100%; }
.mapc-name { font-size: 13px; font-weight: 700; line-height: 1.2; }
.mapc-tag { margin-top: 1px; font-size: 10.5px; font-weight: 600; color: #9fd8c6; text-transform: uppercase; letter-spacing: 0.4px; }
.mapc-req { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 10.5px; color: #a8c0ce; }
.map-card.is-selected .mapc-req { color: #f0d97a; }
.map-card.is-locked { cursor: not-allowed; }
.map-card.is-locked:hover { transform: none; border-color: #33566b; }
.map-card.is-locked .mapc-thumb { filter: grayscale(0.5) brightness(0.7); }
.map-card.is-locked .mapc-name, .map-card.is-locked .mapc-tag { color: #7f93a3; }
.map-card.is-locked .mapc-req { color: #8aa0b0; }
/* Cartes verrouillées / bloquées : RÉDUITES pour concentrer le regard sur la carte jouable (Map 2). */
.map-card.is-mini { flex-basis: 98px; opacity: 0.85; }
.map-card.is-mini .mapc-thumb { height: 50px; margin-bottom: 5px; }
.map-card.is-mini .mapc-name { font-size: 11.5px; }
.map-card.is-mini .mapc-tag { font-size: 9.5px; }
.map-card.is-mini .mapc-req { font-size: 9.5px; margin-top: 4px; }
/* Cadenas d'angle : repère de verrou clair sur les cartes non débloquées. */
.mapc-lock-badge { display: none; position: absolute; top: 6px; left: 6px; z-index: 2; align-items: center; justify-content: center; width: 22px; height: 22px; color: #d7e3ee; background: rgba(10,19,32,0.82); border: 1px solid #46607a; border-radius: 999px; }
.map-card.is-locked .mapc-lock-badge { display: inline-flex; }
/* BANDE GIGA (panneau [Y]) : 3 giga bateaux aux armements distincts — bloc PROÉMINENT en haut. */
.giga-strip { width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 2px 0 16px; padding: 12px 14px 14px; background: linear-gradient(180deg, rgba(30,42,58,0.9), rgba(18,26,38,0.9)); border: 1px solid #3a4d63; border-radius: 12px; }
.giga-strip-title { width: 100%; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #eaf2fb; margin-bottom: 2px; }
.giga-card { flex: 0 0 172px; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 11px 13px; cursor: pointer; color: #eef1fb; background: #22273a; border: 2px solid var(--giga-col, #4d5084); border-radius: 10px; box-shadow: 0 0 0 1px rgba(0,0,0,0.2); transition: transform 0.12s ease, box-shadow 0.15s ease; }
.giga-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 0 2px var(--giga-col, #4d5084); }
.giga-card-name { font-size: 14px; font-weight: 800; }
.giga-card-desc { font-size: 11px; color: #b7c7d4; line-height: 1.3; }
.giga-card-cta { font-size: 10px; font-weight: 700; color: var(--giga-col, #7f93a3); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; }
.map-card.shake { animation: mapcShake 0.4s ease; }
@keyframes mapcShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.mapc-dots { display: flex; justify-content: center; gap: 6px; margin-top: 2px; }
.mapc-dot { width: 6px; height: 6px; border-radius: 50%; background: #4d5084; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; }
.mapc-dot.active { background: #f0d97a; transform: scale(1.25); }

/* CTA principal — parti pris NAVAL (pas « bouton paiement ») : corps bleu-canard profond,
   texte crème en petites capitales espacées (typo jeu), liseré + lueur dorés discrets.
   Lueur pulsée douce + fin reflet qui balaie, pour attirer l'œil sans virer au bouton d'achat. */
/* CTA principal — style diep.io : bloc plein aux coins arrondis, LISERÉ BAS plus foncé
   (effet touche physique), sans dégradé/reflet/glow. Enfoncement franc au clic. */
#btn-play, #btn-respawn {
  position: relative; overflow: hidden;
  padding: 15px 54px;
  font-family: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  font-size: 18px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
  color: #fff3e9; text-shadow: 0 1px 1px rgba(90,20,0,0.45);
  background: #f0512e;
  border: none; border-bottom: 5px solid #a8331a; border-radius: 8px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, transform 0.08s ease, border-width 0.08s ease;
}
#btn-play:hover, #btn-respawn:hover {
  background: #ff6742;
}
#btn-play:active, #btn-respawn:active {
  transform: translateY(3px);
  border-bottom-width: 2px;
}

/* état de chargement (connexion réseau) : bouton visuellement grisé + non cliquable + spinner —
   empêche le spam-clic pendant que NET.join()/NET.host() répondent. */
#btn-play.is-loading, #btn-play:disabled { opacity: 0.75; cursor: default; animation: none; }
#btn-play.is-loading::after, #btn-play:disabled::after { display: none; }
#btn-play .btn-spinner {
  display: inline-block; width: 15px; height: 15px; margin-right: 9px;
  border: 2px solid rgba(253, 243, 216, 0.35); border-top-color: #fdf3d8;
  border-radius: 50%; animation: btnSpin 0.7s linear infinite; flex: 0 0 auto;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* LOGO « coffre gratuit prêt » (accueil), à côté du CTA « Prendre la mer » — voir .play-row
   ci-dessus. Taille fixe carrée (jamais 0 : le SVG n'a pas de width/height propres, il lui faut
   une taille explicite ici, sinon il se réduit à rien et le bouton devient un point invisible/
   impossible à taper au doigt). */
.menu-chest-badge {
  position: relative; flex: 0 0 auto; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  width: 56px; min-width: 56px; padding: 0;
  background: linear-gradient(180deg, #8a5a34, #6b4326);
  border: 2px solid #f0d97a; border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.menu-chest-badge svg { width: 30px; height: 26px; filter: drop-shadow(0 0 5px rgba(240,217,122,0.5)); }
.menu-chest-badge:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(240,217,122,0.3); }
.menu-chest-badge:active { transform: translateY(0); }
.menu-chest-badge-n {
  position: absolute; top: -7px; right: -7px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #2a1a0c;
  background: #f0d97a; border-radius: 999px; border: 1.5px solid #2a1a0c;
}

#menu-side { display: flex; flex-direction: column; gap: 14px; }
.menu-card {
  background: #26284a;
  border: 1px solid #4d5084;
  border-radius: 8px;
  padding: 16px;
  text-align: left;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}
.menu-card h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: #bcd0dc; margin-bottom: 8px;
}
.menu-note { font-size: 12px; color: #a9bfcc; line-height: 1.4; margin-bottom: 8px; }

/* --- RÉTENTION : progression capitaine (niveau + XP + série) --- */
/* carte FUSIONNÉE « Progression » : petits intitulés qui expliquent chaque compteur + fin
   séparateur entre le bloc NIVEAU et le bloc RÉSERVE d'XP. */
.menu-prog-sub {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.2px;
  color: #9fd8c6; margin: 0 0 4px; text-transform: none;
}
.menu-prog-sub + .cap-grade-row, .menu-prog-sub + .reserve-row { margin-top: 0; }
.menu-prog-split {
  height: 1px; margin: 12px 0; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
}
.menu-progress .cap-grade-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cap-lvl { font-size: 17px; font-weight: 800; color: #ffe9a8; }
.cap-streak {
  font-size: 11px; font-weight: 700; color: #bcd0dc;
  padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.06);
}
.cap-streak.hot { color: #2c1a06; background: linear-gradient(90deg, #ffe98f, #e8b84a); }
.cap-xpbar {
  height: 8px; margin: 8px 0 4px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.16);
}
.cap-xpfill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #12b3a6, #f0d97a);
  transition: width 0.4s ease;
}
.cap-xptxt { font-size: 11px; color: #a9bfcc; text-align: right; }

/* --- RÉSERVE d'XP (monnaie douce dépensable + rang) --- */
.menu-reserve .reserve-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.reserve-bal { font-size: 18px; font-weight: 800; color: #7fe0c0; }
.reserve-rank {
  font-size: 11px; font-weight: 700; color: #ffe08a;
  padding: 2px 8px; border-radius: 999px; background: rgba(255,224,138,0.12);
}
.reserve-bar {
  height: 8px; margin: 8px 0 4px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.16);
}
.reserve-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #12b3a6, #7fe0c0);
  transition: width 0.4s ease;
}
.reserve-note { font-size: 11px; color: #a9bfcc; line-height: 1.4; }

/* --- RÉTENTION : missions du jour --- */
.mission-tag { font-size: 9px; font-weight: 600; color: #9bb0bd; text-transform: none; letter-spacing: 0; }
/* note explicative de récompense (missions / succès) */
.menu-reward-note { font-size: 11px; color: #b7cad6; line-height: 1.45; margin: -2px 0 10px; }
.menu-reward-note b { color: #ffe08a; font-weight: 700; }
/* récompense affichée sous chaque mission */
.menu-mission .mm-reward { font-size: 10.5px; color: #9fd9c4; }
.menu-mission .mm-reward b { color: #ffe08a; font-weight: 700; }
.menu-mission.done .mm-reward { color: #8fce97; }
/* MISSIONS DU JOUR — carrousel « une ligne » : une seule mission visible à la fois, fondu auto
   (rotation pilotée par UI._startMissionCycle). Les <li> sont empilés en absolu + opacité. */
.menu-missions { list-style: none; position: relative; min-height: 66px; }
.menu-mission {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: #cfdde7;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.5s ease;
}
.menu-mission.mm-show { opacity: 1; visibility: visible; pointer-events: auto; }
.menu-mission:last-child { border-bottom: none; padding-bottom: 0; }
.menu-mission .mm-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.menu-mission .mm-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-mission .mm-prog { flex: 0 0 auto; color: #f0d97a; font-size: 12px; }
/* P2 — barre de complétion (tâche inachevée visible = effet Zeigarnik) */
.menu-mission .mm-bar {
  height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.15);
}
.menu-mission .mm-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #12b3a6, #f0d97a);
  transition: width 0.4s ease;
}
.menu-mission.done { color: #7ad37a; }
.menu-mission.done .mm-prog { color: #7ad37a; }
.menu-mission.done .mm-fill { background: linear-gradient(90deg, #3ea86a, #7ad37a); }
.menu-mission.empty { color: #9bb0bd; border-bottom: none; }

/* FLASH de complétion : mission tout juste accomplie au retour sur l'accueil */
.menu-mission.just-done {
  animation: missionDone 1.8s ease;
}
.menu-mission.just-done .mm-prog::after {
  content: ' — accomplie !'; color: #7ad37a; font-weight: 700;
}
@keyframes missionDone {
  0%   { background: rgba(122, 211, 122, 0); }
  18%  { background: rgba(122, 211, 122, 0.22); box-shadow: 0 0 0 1px rgba(122,211,122,0.35); }
  100% { background: rgba(122, 211, 122, 0); box-shadow: none; }
}
/* PULSE du solde de réserve quand l'XP grimpe au retour sur l'accueil */
.reserve-bal.xp-bump { animation: xpBump 0.65s ease; }
@keyframes xpBump {
  0%   { transform: scale(1); color: #7fe0c0; }
  35%  { transform: scale(1.18); color: #b6ffe4; text-shadow: 0 0 12px rgba(127,224,192,0.6); }
  100% { transform: scale(1); }
}
.reserve-bal { display: inline-block; transition: color .2s ease; }

/* RÉCOMPENSE À RÉCUPÉRER : bouton doré bien visible sous une mission accomplie non encaissée.
   Le clic verse le lot (UI.onClaimMission) et déclenche la pluie de pièces + pulse de la Réserve. */
.menu-mission .mm-claim {
  margin-top: 2px; width: 100%;
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 12px; text-align: left;
  color: #2a1f06; font-family: inherit; font-weight: 800; font-size: 12px;
  background: linear-gradient(180deg, #ffe08a, #f0c14b);
  border: none; border-bottom: 3px solid #b0842a; border-radius: 9px;
  transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.12s ease;
  animation: mmClaimPulse 1.7s ease-in-out infinite;
}
.menu-mission .mm-claim:hover { filter: brightness(1.06); box-shadow: 0 4px 14px rgba(240,210,122,0.4); }
.menu-mission .mm-claim:active { transform: translateY(2px); border-bottom-width: 1px; }
.menu-mission .mm-claim-ic { flex: 0 0 auto; display: flex; color: #6b4e12; }
.menu-mission .mm-claim-txt { flex: 1 1 auto; }
.menu-mission .mm-claim-xp {
  flex: 0 0 auto; font-weight: 900; color: #2a1f06;
  background: rgba(255,255,255,0.42); border-radius: 999px; padding: 2px 9px;
}
@keyframes mmClaimPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,210,122,0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(240,210,122,0.28); }
}
/* état « déjà récupéré » */
.menu-mission .mm-reward--claimed { color: #8fce97; font-weight: 700; }
.menu-mission.mm-just-claimed { animation: missionDone 1.6s ease; }

/* PLUIE DE PIÈCES à la récupération (célébration) */
.mm-burst { position: absolute; left: 0; right: 0; bottom: 6px; height: 0; pointer-events: none; z-index: 3; }
.mm-coin {
  position: absolute; bottom: 0; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff2b8, #f0c14b 60%, #b0842a);
  box-shadow: 0 0 5px rgba(240,210,122,0.6);
  opacity: 0; animation: mmCoinFly 1.1s ease-out forwards;
}
@keyframes mmCoinFly {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0), -78px) scale(1) rotate(var(--dr, 180deg)); }
}
/* PULSE doré de la carte Réserve d'XP quand un lot vient d'être encaissé */
#menu-reserve-card.reserve-pulse { animation: reservePulse 1s ease; }
@keyframes reservePulse {
  0%   { box-shadow: 0 0 0 0 rgba(240,210,122,0); }
  30%  { box-shadow: 0 0 0 3px rgba(240,210,122,0.5), 0 0 22px rgba(240,210,122,0.35); }
  100% { box-shadow: 0 0 0 0 rgba(240,210,122,0); }
}

/* --- SUCCÈS : bande défilante (accueil) + puces réutilisables --- */
.ach-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; touch-action: pan-x; }
.ach-scroll.dragging { cursor: grabbing; }
.ach-scroll::-webkit-scrollbar { display: none; }
.ach-track { display: flex; gap: 8px; width: max-content; padding: 2px 0; }
.ach-chip {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  border-radius: 10px; padding: 6px 10px; min-width: 150px;
  border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.07);
}
.ach-chip-ico { font-size: 20px; line-height: 1; filter: grayscale(1) opacity(0.7); }
.ach-chip-txt { display: flex; flex-direction: column; min-width: 0; }
.ach-chip-txt b { font-size: 12.5px; color: #e7edf3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ach-chip-txt i { font-size: 10px; font-style: normal; color: #a3b7c4; }
/* débloqué : coloré et mis en valeur */
.ach-chip.done {
  border-color: rgba(255, 216, 128, 0.45);
  background: rgba(255, 216, 128, 0.10);
}
.ach-chip.done .ach-chip-ico { filter: none; }
.ach-chip.done .ach-chip-txt b { color: #ffe8b0; }
.ach-chip.done .ach-chip-txt i { color: #cddc9a; }
/* à venir : sombre/atténué */
.ach-chip.locked { opacity: 0.78; }
.ach-chip.locked .ach-chip-txt b { color: #aebecb; }

/* Grille de succès */
.ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 640px) { .ach-grid { grid-template-columns: 1fr; } }

/* --- COFFRES DE TEMPS DE JEU : carte menu « Coffres prêts » (accueil) ---
   UX : la carte doit ATTIRER l'œil et donner clairement envie de cliquer. Halo doré animé
   sur la carte + chaque coffre stylé comme un bouton « trésor » avec un CTA « Ouvrir › ». */
#menu-chests-card {
  position: relative;
  border-color: rgba(240, 217, 122, 0.5);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(240, 217, 122, 0.14), transparent 70%),
    #2a2a44;
  animation: chestCardGlow 2.6s ease-in-out infinite;
}
@keyframes chestCardGlow {
  0%, 100% { box-shadow: 0 6px 22px rgba(0,0,0,0.3), 0 0 0 1px rgba(240,217,122,0.14); }
  50%      { box-shadow: 0 6px 26px rgba(0,0,0,0.34), 0 0 20px rgba(240,217,122,0.3); }
}
#menu-chests-card h3 { color: #ffe08a; }
.menu-chests-hint { font-size: 11px; color: #d9c583; margin: -2px 0 8px; letter-spacing: 0.2px; }
.menu-chests-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.menu-chest {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 10px; border-radius: 11px;
  background: linear-gradient(135deg, rgba(240,217,122,0.2), rgba(240,217,122,0.07));
  border: 1px solid rgba(240, 217, 122, 0.45);
  transition: transform 0.14s ease, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.menu-chest > * { position: relative; z-index: 1; }
/* liseré brillant qui balaie la tuile : signale « cliquable » sans texte */
.menu-chest::before {
  content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; z-index: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-18deg); animation: chestSheen 3.4s ease-in-out infinite;
}
@keyframes chestSheen { 0%, 60% { left: -60%; } 82%, 100% { left: 135%; } }
.menu-chest:hover, .menu-chest:focus-visible {
  transform: translateY(-2px); outline: none;
  background: linear-gradient(135deg, rgba(240,217,122,0.32), rgba(240,217,122,0.12));
  border-color: rgba(240, 217, 122, 0.8);
  box-shadow: 0 6px 18px rgba(0,0,0,0.32), 0 0 14px rgba(240,217,122,0.3);
}
.menu-chest-ic { flex: 0 0 auto; width: 34px; height: 28px; filter: drop-shadow(0 0 6px rgba(240,217,122,0.45)); }
.menu-chest-ic svg { width: 100%; height: 100%; }
.menu-chest-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.menu-chest-body b { font-size: 12.5px; color: #ffe9a8; }
.menu-chest-body small { font-size: 11px; color: #cdd9df; }
.menu-chest-cta {
  flex: 0 0 auto; display: flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  color: #2c1f06; padding: 4px 9px; border-radius: 999px;
  background: linear-gradient(90deg, #ffe28c, #e8b84a);
}
.menu-chest-cta svg { width: 12px; height: 12px; }
.menu-chest:hover .menu-chest-cta { box-shadow: 0 0 10px rgba(240,217,122,0.6); }
@media (prefers-reduced-motion: reduce) {
  #menu-chests-card { animation: none; }
  .menu-chest::before { animation: none; display: none; }
}

/* POPUP « coffre prêt » (accueil) : fenêtre centrée déclenchée par un clic sur un coffre.
   Explique la récompense + comment l'ouvrir (en mer), avec un raccourci « Prendre la mer ». */
.chest-modal { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 20px; }
.chest-modal.hidden { display: none; }
.chest-modal-backdrop { position: absolute; inset: 0; background: rgba(4, 12, 18, 0.74); backdrop-filter: blur(2px); }
.chest-modal-box {
  position: relative; z-index: 1; width: min(420px, 94vw); text-align: center;
  padding: 22px 22px 20px; border-radius: 18px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(240, 217, 122, 0.16), transparent 62%),
    linear-gradient(180deg, #223052, #182238);
  border: 1px solid rgba(240, 217, 122, 0.5);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6), 0 0 26px rgba(240, 217, 122, 0.18);
  animation: chestModalIn 0.22s ease;
}
@keyframes chestModalIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
.chest-modal-x {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; font-size: 20px; line-height: 1;
  cursor: pointer; color: #cfdde7; background: rgba(8, 22, 32, 0.5);
  border: 1px solid #33566b; border-radius: 8px;
}
.chest-modal-x:hover { border-color: #5aa9e6; color: #fff; }
.chest-modal-ic { position: relative; width: 96px; height: 76px; margin: 4px auto 6px; }
.chest-modal-svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4)); }
.chest-modal-rays {
  position: absolute; inset: -14px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,217,122,0.4), transparent 62%);
  animation: chestRays 2.4s ease-in-out infinite;
}
@keyframes chestRays { 0%, 100% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.06); } }
.chest-modal-box h3 { font-size: 20px; color: #ffe08a; margin: 0 0 6px; letter-spacing: 0.5px; }
.chest-modal-reward {
  display: inline-block; font-size: 13px; font-weight: 700; color: #2c1f06;
  padding: 5px 12px; border-radius: 999px; margin: 0 auto 10px;
  background: linear-gradient(90deg, #ffe28c, #e8b84a);
}
.chest-modal-desc { font-size: 13px; color: #cdd9e2; line-height: 1.5; margin: 0 0 16px; }
.chest-modal-cta { display: flex; flex-direction: column; gap: 8px; }
.chest-modal-go {
  width: 100%; padding: 12px 16px; font-size: 15px; font-weight: 800; cursor: pointer;
  color: #2c1f06; border: none; border-radius: 10px;
  background: linear-gradient(90deg, #ffe28c, #e8b84a);
  box-shadow: 0 6px 16px rgba(240, 217, 122, 0.28);
  transition: transform 0.14s ease, box-shadow 0.2s;
}
.chest-modal-go:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(240, 217, 122, 0.42); }
.chest-modal-later { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .chest-modal-box { animation: none; }
  .chest-modal-rays { animation: none; }
}

#mp-status { font-size: 12px; margin-top: 8px; line-height: 1.4; }
#mp-status.ok { color: #7ad37a; }
#mp-status.err { color: #ec8d8d; }

#hs-list { list-style: none; counter-reset: hs; font-size: 13px; }
#hs-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 0;
  counter-increment: hs;
}
#hs-list li::before { content: counter(hs) '.'; color: #9bb0bd; width: 16px; }
#hs-list li.empty { color: #9bb0bd; }
#hs-list li.empty::before { content: ''; }
#hs-list .lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hs-list .hs-mode { font-size: 10px; color: #9bb0bd; border: 1px solid #33566b; border-radius: 4px; padding: 0 4px; }
#hs-list b { color: #f0d97a; }

/* =====================================================================
   THÈME FOOT — couleur & peps sur le menu d'accueil
   ===================================================================== */
#menu-main { position: relative; overflow: hidden; }

/* carte ÉQUIPE : aperçu du navire (drapeau dessiné dessus) + mini menu de sélection juste à côté */
#team-card {
  /* align-items: flex-end → le sélecteur d'équipe se cale sur la LIGNE DU PSEUDO (dernier
     élément de la colonne navire+pseudo). flex-wrap: wrap → si la colonne est trop étroite
     pour le tenir à côté de l'aperçu élargi, il repasse PROPREMENT sous le navire au lieu
     d'être rogné par le bord de la carte (adaptation automatique à la largeur d'écran). */
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; width: 100%;
  background: rgba(28, 30, 58, 0.6);
  border: 1px solid #464880; border-radius: 14px; padding: 12px;
}
#team-preview {
  flex: 1 1 240px; min-width: 0; max-width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
/* aperçu du navire AGRANDI / plus large (le boulet du tir a plus de place pour filer) ; se met
   à l'échelle sous 300px sans jamais déborder de sa colonne (max-width + aspect-ratio). */
#ship-preview {
  display: block; width: 384px; max-width: 100%; height: auto; aspect-ratio: 384 / 186;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
#preview-caption {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px;
  width: 300px; max-width: 100%;
}
.team-name {
  font-size: 15px; font-weight: 800; color: #f0d97a; letter-spacing: 0.5px;
  max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.team-flag-name { font-size: 12px; color: #bcd0dc; }

/* PC UNIQUEMENT (≥941px, seuil déjà utilisé par #menu-grid pour la mise en page bureau à 2
   colonnes) : l'aperçu du navire s'étire sur toute la largeur de la carte (au lieu des 300px
   fixes partagés avec le bouton équipe) ; le bouton « Mon équipe » passe SOUS l'image ; en
   échange, le pseudo (auparavant sous le navire) est déplacé sur le côté latéral, à droite du
   bouton. #team-preview passe en `display:contents` pour que le canvas et la légende du pseudo
   deviennent des items directs de la grille de #team-card (leur wrapper flex n'a plus de rôle
   de mise en page ici, seul le placement en grille compte). */
@media (min-width: 941px) {
  #team-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "image image" "button pseudo";
    align-items: center;
    column-gap: 16px;
    row-gap: 10px;
  }
  #team-preview { display: contents; }
  #ship-preview { grid-area: image; width: 100%; }
  #flag-open { grid-area: button; margin: 0; justify-self: start; }
  #preview-caption {
    grid-area: pseudo;
    width: 100%; max-width: 100%;
    align-items: flex-start; text-align: left;
  }
  #pseudo-edit { align-items: flex-start; }
  #name-input, .team-name { text-align: left; max-width: 100%; }
}

/* PC : l'« Image d'illustration » (aperçu navire) ne remplit plus toute la largeur de la carte —
   hauteur BORNÉE, largeur auto (le canvas garde ses proportions via aspect-ratio). Sélecteur à
   2 ID pour battre `@media(min-width:941px){#ship-preview{width:100%}}` (quel que soit l'ordre).
   La media compacte (max-height:940) plus bas le réduit encore. */
@media (min-width: 941px) {
  #team-card #ship-preview { width: auto; height: 118px; justify-self: center; }
}

/* ANTI-SCROLL sur écran PC peu haut (laptops ~900 px) : l'accueil ne doit plus obliger à défiler
   « alors qu'il y a la place ». On ÉLARGIT la grille pour occuper l'espace horizontal libre, et on
   COMPACTE les gros consommateurs de hauteur (logo, aperçu du navire, carrousel, marges) pour que
   les deux colonnes rentrent dans la fenêtre. Placé APRÈS la règle `#ship-preview{width:100%}`
   ci-dessus → il la surcharge à hauteur réduite. Complète l'anti-scroll JS (UI.layoutMenuHome). */
@media (min-width: 941px) and (max-height: 940px) {
  /* Sélecteurs à SPÉCIFICITÉ RENFORCÉE (deux ID / ID+classe) : d'autres blocs `@media (min-width:
     941px)` plus bas dans la feuille redéfinissent `#ship-preview{width:100%}` et la largeur de
     grille ; il faut les battre à coup sûr, indépendamment de l'ordre source. */
  #menu { padding-top: clamp(4px, 1vh, 12px); } /* marge RÉDUITE au-dessus du logo */
  #menu #menu-grid { width: min(1180px, 96vw); column-gap: 30px; }
  #menu #menu-main { gap: 5px; padding-top: 12px; } /* moins d'espace au-dessus du logo dans le panneau */
  #menu #menu-side { gap: 10px; }
  #menu-main .menu-logo-img { max-width: 320px; margin-bottom: 2px; }
  /* aperçu du navire RÉDUIT + borné en hauteur (le canvas garde ses proportions via aspect-ratio) */
  #team-card #ship-preview { width: auto; height: 82px; justify-self: center; }
  .map-carousel .mapc-thumb { height: 52px; }
  .map-carousel .map-card { flex-basis: 120px; }
}

/* écran encore plus court (~800 px et moins) : on serre davantage. */
@media (min-width: 941px) and (max-height: 820px) {
  #menu #menu-grid { column-gap: 26px; }
  #menu #menu-main { gap: 5px; }
  #menu-main .menu-logo-img { max-width: 280px; }
  #team-card #ship-preview { height: 74px; }
  .map-carousel .mapc-thumb { height: 46px; }
}

/* Rangée Options / Comment jouer / Couper le son + logo Boutique, TOUS alignés sur une seule
   ligne de même hauteur. Les 3 boutons texte se partagent la largeur à ÉGALITÉ (flex: 1 1 0)
   et se compriment sans jamais rejeter le logo à la ligne suivante : `min-width: 0` autorise
   le rétrécissement sous la taille du texte (ellipsis) plutôt qu'un retour à la ligne — ce qui
   corrige le ✦ qui « tombait » sous la rangée sur les largeurs intermédiaires. */
.menu-cta-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: stretch; width: 100%; }
.menu-cta-row .btn-secondary {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 9px 8px; font-size: 12.5px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Logo Boutique : tuile carrée nettement plus visible (vrai repère « boutique »), calée à droite
   et étirée à la hauteur de la rangée pour un alignement parfait. Sélecteurs scopés
   `.menu-cta-row …` pour passer DEVANT la règle de base `.btn-premium` (plus bas dans la feuille). */
.menu-cta-row .btn-premium--icon {
  flex: 0 0 auto; align-self: stretch;
  width: 58px; min-width: 58px; padding: 0; gap: 0; font-size: 0;
  border-radius: 12px;
}
.menu-cta-row .btn-premium--icon .btn-premium-ic { font-size: 27px; line-height: 1; }
/* bouton MUTE en ICÔNE (haut-parleur) : tuile compacte, comme le logo Boutique, pas un bouton texte */
.menu-cta-row .menu-cta-icon {
  flex: 0 0 auto; align-self: stretch;
  width: 44px; min-width: 44px; padding: 0; gap: 0;
  display: flex; align-items: center; justify-content: center;
}
.menu-cta-row .menu-cta-icon svg { width: 20px; height: 20px; }
.menu-cta-row .menu-cta-icon.muted { border-color: #6a3540; color: #ec8d8d; }

/* responsive téléphone : placé APRÈS les règles de base du menu pour gagner la cascade */
@media (max-width: 520px) {
  #menu { padding: 20px 10px; }
  #menu h1 { font-size: 40px; letter-spacing: 6px; }
  #menu-main, #menu-side { padding: 18px 16px; }
  #name-input { width: 100%; max-width: 280px; }
  .mode-row { gap: 6px; }
  .mode-btn { min-width: 0; width: 100%; padding: 6px 14px; font-size: 12px; }
  .mode-btn small { font-size: 10px; }
  .menu-cta-row { gap: 4px; }
  .menu-cta-row .btn-secondary, #btn-install { padding: 5px 14px; font-size: 12px; }
  #team-card { flex-direction: column; align-items: center; text-align: center; }
  #ship-preview { width: 240px; height: 166px; }
  #preview-caption { width: 240px; }
  /* team-card empilé (column) : le flex-basis de 260px (pensé comme largeur en mode ligne,
     cf. règle de base) deviendrait une base de HAUTEUR ici → panneau forcé à 260px de haut
     quel que soit son contenu réel. On le neutralise pour repasser en hauteur naturelle. */
  #team-picker { width: 100%; flex-basis: auto; }
  #flag-tabs { justify-content: center; }
  .menu-cta-row .btn-secondary { flex: 1 1 100%; }
}

/* écran de mort : popup centrée, fond flouté (retiré en mode « regarder en plein écran », cf. showDeath(false)) */
#death-screen.death-lite {
  background: rgba(7, 20, 30, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  padding: 16px;
}
#death-box {
  pointer-events: auto;
  background: rgba(10, 26, 38, 0.92);
  border: 1px solid #4a2b33;
  border-radius: 14px;
  padding: 22px 34px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
}
#death-box h2 { font-size: 30px; color: #e88; letter-spacing: 3px; text-align: center; }
#death-stats { font-size: 14px; line-height: 1.7; color: #cfdde7; white-space: pre-line; text-align: center; }
.death-hint { font-size: 12px; color: #bcd0dc; text-align: center; }

/* Bilan de mort : barre d'XP gagnée cette partie */
#death-xp { width: 100%; max-width: 340px; }
#death-xp.hidden, #death-ach.hidden { display: none; }
.death-xp-head { display: flex; justify-content: space-between; font-size: 12px; color: #bcd0dd; margin-bottom: 5px; }
#death-xp-val { color: #ffe08a; font-weight: 700; }
#death-xp-bar { height: 12px; background: rgba(255,255,255,0.08); border-radius: 7px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); }
#death-xp-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #e6b34a, #ffd97a);
  border-radius: 7px;
  transition: width 0.12s linear;
  box-shadow: 0 0 10px rgba(255,210,120,0.5);
}
/* Bilan de mort : succès débloqués révélés un par un */
#death-ach { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 6px; }
.death-ach-head { font-size: 12px; color: #bcd0dc; text-align: center; letter-spacing: 1px; text-transform: uppercase; }
.death-ach-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 216, 128, 0.10);
  border: 1px solid rgba(255, 216, 128, 0.35);
  border-radius: 10px; padding: 7px 12px;
  opacity: 0; transform: translateY(8px) scale(0.96);
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(.2,.8,.3,1.2);
}
.death-ach-row.in { opacity: 1; transform: none; }
.death-ach-ico { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.death-ach-txt { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.death-ach-txt b { font-size: 14px; color: #ffe8b0; }
.death-ach-txt i { font-size: 11px; color: #cddc9a; font-style: normal; }
.death-ach-howto { margin-top: 4px; font-size: 11.5px; line-height: 1.4; color: #cfe0ec; white-space: normal; }
.death-ach-howto[hidden] { display: none; }
.death-ach-howto b { color: #f0d97a; }
.death-ach-row .quest-info { flex: 0 0 auto; align-self: flex-start; }

/* Bilan de mort : RÉSERVE d'XP (bonus de fin + progression du rang) */
#death-reserve { width: 100%; max-width: 340px; }
#death-reserve.hidden { display: none; }
.death-reserve-head { display: flex; justify-content: space-between; font-size: 12px; color: #bcd0dd; margin-bottom: 5px; }
#death-reserve-val { color: #7fe0c0; font-weight: 800; }
#death-reserve-bar { height: 10px; background: rgba(255,255,255,0.08); border-radius: 7px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); }
#death-reserve-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #12b3a6, #7fe0c0);
  border-radius: 7px; box-shadow: 0 0 10px rgba(90,220,190,0.5);
  transition: width 0.12s linear;
}
#death-reserve-info { display: flex; justify-content: space-between; font-size: 11px; color: #bcd0dc; margin-top: 4px; }
#death-reserve-tier { color: #ffe08a; font-weight: 700; }

@media (max-width: 520px) {
  #death-box { padding: 18px 20px; max-width: 92vw; gap: 10px; }
  #death-box h2 { font-size: 24px; letter-spacing: 2px; }
  #death-stats { font-size: 13px; }
}

/* ---------- HUD ---------- */

#hud > * { position: fixed; z-index: 10; }

/* COMPTE À REBOURS du prochain coffre GRATUIT (anneau + minutage) — COLONNE GAUCHE PC, sous la
   barre d'armement, AGRANDI avec un fond (override mobile plus bas). Le coffre débloqué, lui, se
   chasse sur une île (flèche + GPS). */
#chest-next {
  /* COLLÉ AU BORD GAUCHE (aligné sur la barre d'armement + les panneaux), SOUS la colonne d'armement.
     `top` responsive (clamp) : descend un peu sur les grands écrans, remonte sur les petits → jamais
     de chevauchement avec l'armement (compacté par la media-query max-height plus bas). */
  top: clamp(196px, 24vh, 224px); left: 10px; right: auto; bottom: auto;
  width: 74px; height: 92px;
  background: rgba(8, 22, 32, 0.62); border: 2px solid #2f4a5c; border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.28);
  pointer-events: none; z-index: 11;
  transform: scale(0.78); transform-origin: top left; /* PLUS PETIT par défaut (ancré haut-gauche → moins de chevauchement avec l'armement/panneaux) */
}
.chest-next-ring {
  position: absolute; top: 8px; left: 50%; width: 60px; height: 60px; /* anneau AGRANDI (44→60) */
  transform: translateX(-50%) rotate(-90deg);
}
.cnr-bg { fill: none; stroke: rgba(8,22,32,0.72); stroke-width: 3.5; }
/* EN DÉCOMPTE : anneau + temps VOLONTAIREMENT SOBRES (gris-bleu) — le doré est réservé à l'état PRÊT.
   (Le doré permanent pendant l'attente était trop voyant / faisait « urgent » pour rien.) */
.cnr-fg { fill: none; stroke: #6f8a9c; stroke-width: 3.5; stroke-linecap: round; transition: stroke-dashoffset 0.3s linear; }
.chest-next-ic { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); width: 34px; height: 27px; opacity: 0.98; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
/* pendant le décompte, le coffre lui-même est atténué/désaturé (il « s'allume » en doré une fois PRÊT) */
#chest-next:not(.chest-ready) .chest-next-ic { opacity: 0.78; filter: saturate(0.5) brightness(0.92) drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
.chest-next-time {
  position: absolute; top: 70px; left: 0; width: 100%; text-align: center;
  font-size: 12.5px; font-weight: 800; color: #b7c7d4; text-shadow: 0 1px 2px rgba(0,0,0,0.65);
}
/* logo « coffre PRÊT » : un coffre est DISPONIBLE dans la citadelle → glow doré + pulsation,
   et CLIQUABLE (le clic guide le joueur). Redevient le simple compte à rebours sinon. */
#chest-next.chest-ready {
  pointer-events: auto; cursor: pointer;
  border-color: #f0d97a;
  animation: chestReadyPulse 1.1s ease-in-out infinite;
}
#chest-next.chest-ready .cnr-fg { stroke: #ffe08a; }
/* PRÊT : plus besoin de l'anneau de progression (le coffre est disponible, pas en attente) —
   on le masque et on AGRANDIT l'icône du coffre pour occuper l'espace libéré. */
#chest-next.chest-ready .chest-next-ring { display: none; }
#chest-next.chest-ready .chest-next-ic {
  top: 14px; width: 50px; height: 40px; /* agrandie (34×27 → 50×40) */
}
@keyframes chestReadyPulse {
  0%, 100% { box-shadow: 0 0 12px 2px rgba(240, 217, 122, 0.45); }
  50% { box-shadow: 0 0 22px 6px rgba(240, 217, 122, 0.85); }
}
/* icône du coffre PRÊT : petite secousse gauche-droite INTERMITTENTE (façon réveil qui sonne
   de temps en temps), pour rappeler qu'un coffre attend — sans être une animation continue
   fatigante. Le gros de chaque cycle est immobile, la secousse n'occupe que sa fin. */
#chest-next.chest-ready .chest-next-ic {
  transform-origin: 50% 100%;
  animation: chestAlarmWiggle 4.4s ease-in-out infinite;
}
@keyframes chestAlarmWiggle {
  0%, 80%, 100% { transform: translateX(-50%) rotate(0deg); }
  83%  { transform: translateX(-50%) translateX(-3px) rotate(-14deg); }
  86%  { transform: translateX(-50%) translateX(3px)  rotate(14deg); }
  89%  { transform: translateX(-50%) translateX(-3px) rotate(-11deg); }
  92%  { transform: translateX(-50%) translateX(3px)  rotate(11deg); }
  95%  { transform: translateX(-50%) translateX(-1px) rotate(-5deg); }
  98%  { transform: translateX(-50%) translateX(1px)  rotate(5deg); }
}
/* animation d'APPEL jouée à l'apparition du coffre et à chaque clic sur le logo */
#chest-next.chest-ping { animation: chestPing 0.5s ease-out, chestReadyPulse 1.1s ease-in-out 0.5s infinite; }
@keyframes chestPing {
  0% { transform: scale(1); }
  35% { transform: scale(1.28); }
  100% { transform: scale(1); }
}
/* pulse ponctuel du petit point GPS du coffre sur la mini-carte (déclenché au clic du logo) */
#mm-chest-dot.chest-dot-ping { animation: mmChestPing 0.6s ease-out 2, mmchestpulse 0.85s ease-in-out 1.2s infinite; }
@keyframes mmChestPing {
  0% { transform: scale(1); }
  40% { transform: scale(2.1); }
  100% { transform: scale(1); }
}

/* INFOBULLE de guidage du coffre : même ancrage (gauche) que #chest-next, qu'elle remplace
   visuellement pendant qu'elle est affichée (colonne gauche PC ; override tactile plus bas). */
#chest-tip {
  top: clamp(196px, 24vh, 224px); left: 10px; right: auto; bottom: auto;
  max-width: 220px;
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px;
  background: rgba(8, 22, 32, 0.82); border: 2px solid #f0d97a; border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.28), 0 0 12px 2px rgba(240, 217, 122, 0.35);
  font-size: 12.5px; font-weight: 700; line-height: 1.35; color: #ffe9a8;
  text-shadow: 0 1px 2px rgba(0,0,0,0.65);
  pointer-events: none; z-index: 11;
  animation: chestTipIn 0.32s cubic-bezier(.2,.85,.2,1);
}
@keyframes chestTipIn { from { transform: translateX(-16px); opacity: 0; } }
.chest-tip-ic { flex: none; width: 22px; height: 18px; margin-top: 1px; }
#chest-tip-text { flex: 1 1 auto; }

#coins, #cargo-wrap, #power-chip, #dash-chip, #xpbar-wrap, #leaderboard,
#team-scores, #boss-banner, #heli-notice, #killfeed { pointer-events: none; }

/* ANCIEN indicateur d'or/XP en haut : RETIRÉ — le compteur d'XP (réserve) vit désormais sur la
   barre d'XP en bas (#xpbar-label). On masque #coins partout (y compris son override tactile). */
#coins { display: none !important; }
/* pièces gagnées : rebond + FLASH doré (récompense visible = dopamine d'accumulation) */
#coins.pulse { animation: coinpulse 0.42s ease; }

/* LOGO SUCCÈS du HUD : RETIRÉ (2026-07-05) — l'étoile en haut à gauche encombrait le coin
   sans valeur ajoutée. Les succès restent accessibles via le panneau Options (onglet Succès),
   sur PC comme sur mobile. Le compteur est mis à jour de façon défensive (no-op si absent). */

@keyframes coinpulse {
  0% { transform: scale(1); }
  32% { transform: scale(1.18); color: #ffe488; box-shadow: 0 0 18px rgba(255,214,64,0.9); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(255,214,64,0); }
}
.coin-dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff6d2 0%, #ffe07a 28%, #e2ab2e 62%, #a67a1e 100%);
  border: 1px solid #7a5813;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.75), inset 0 -1px 1px rgba(0,0,0,0.35), 0 0 5px rgba(233,197,58,0.55);
  position: relative;
}
.coin-dot::after {
  content: "";
  position: absolute; inset: 2px;
  border-radius: 50%;
  border: 1px dashed rgba(122,88,19,0.55);
}

#cargo-wrap {
  position: fixed; /* ancrage viewport → vrai centrage horizontal à l'écran (PC) */
  top: 16px; left: 50%; transform: translateX(-50%);
  width: 340px; text-align: center; /* PC : barre de cale agrandie (260 -> 340) */
}
#cargo-bar {
  height: 24px; /* PC : plus haute (18 -> 24) pour une meilleure visibilite */
  background: rgba(8, 22, 32, 0.65);
  border-radius: 6px; overflow: hidden;
}
#cargo-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #cf9a4a, #e8bf5a);
  transition: width 0.2s linear, background 0.3s, box-shadow 0.3s;
}
/* cale bien remplie : ambre chaud (butin qui prend de la valeur) */
#cargo-fill.warn { background: linear-gradient(90deg, #e8862e, #ffb020); }
/* cale PLEINE : rouge urgent pulsé — aversion à la perte, « va vendre ! » */
#cargo-fill.full {
  background: linear-gradient(90deg, #d63a3a, #ff6b4d);
  box-shadow: 0 0 10px rgba(255,80,60,0.7);
  animation: cargoPulse 0.85s ease-in-out infinite;
}
@keyframes cargoPulse { 50% { box-shadow: 0 0 18px rgba(255,90,70,0.95); } }
#cargo-label {
  position: absolute; top: 0; left: 0; right: 0;
  height: 24px; line-height: 24px; margin: 0;
  font-size: 13px; font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

/* Menu d'évolution DÉPLIÉ (cartes de coques, touche [U]) : on masque la barre de cale pour
   libérer le haut de l'écran et éviter tout chevauchement avec les cartes. Le drapeau
   body.sy-open est posé par UI.applyShipyardCollapse (js/ui.js). */
body.sy-open #cargo-wrap { display: none; }

/* ligne « coach » : rappelle en une phrase la prochaine action utile (pédagogie) */
#coach {
  top: 44px; left: 50%; transform: translateX(-50%);
  /* PLUS ÉTROIT (ne passe plus SOUS le classement en haut à droite) + repli automatique sur
     2 ou 3 lignes au lieu d'une seule ligne tronquée qui filait sous le scoreboard. */
  max-width: min(560px, 52vw);
  padding: 6px 16px;
  font-size: 13px; font-weight: 600; line-height: 1.3;
  background: rgba(8, 22, 32, 0.62);
  border: 1px solid #2f5064;
  border-radius: 14px;
  color: #cfe3ef;
  text-align: center;
  white-space: normal;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
#coach.act { border-color: #f0d97a; color: #ffe9a8; } /* action prioritaire (vendre, améliorer) */

#power-chip {
  top: 76px; left: 50%; transform: translateX(-50%);
  padding: 4px 16px;
  font-size: 13px; font-weight: 700;
  background: rgba(8, 22, 32, 0.7);
  border: 1px solid #7db9ec;
  border-radius: 14px;
  color: #bfe0ff;
}

/* jauge turbo : centrée AU-DESSUS de la barre d'XP (plus jamais sur la mini-carte).
   Texte TOUJOURS lisible : ombre portée forte + léger flou du fond derrière la pastille. */
#dash-chip {
  bottom: 78px; left: 50%; transform: translateX(-50%);
  width: auto; max-width: 92vw; white-space: nowrap; padding: 6px 18px;
  font-size: 14px; font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
  border-radius: 14px;
  text-align: center;
  background: rgba(8, 22, 32, 0.6);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* arme spéciale sélectionnée (molette) : chip juste à gauche de la jauge turbo */
#weapon-chip {
  bottom: 74px; left: calc(50% - 200px);
  width: 180px; padding: 4px 10px;
  font-size: 12px; font-weight: 700;
  border-radius: 12px;
  text-align: center;
  background: rgba(8, 22, 32, 0.6);
  border: 1px solid #b98a6a;
  color: #e8c3a6;
}
#weapon-chip.empty { opacity: 0.55; }

/* HUD des BOOSTS Boutique actifs : rangée de pastilles (logo + temps/quantité) sous le chip de bonus */
#boost-hud {
  top: 108px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  max-width: 92vw; pointer-events: none;
}
.boost-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px; border-radius: 12px;
  border: 1px solid #7db9ec; background: rgba(8, 22, 32, 0.72);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  font-size: 12.5px; font-weight: 800; color: #eaf2f7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
.boost-badge-ic { position: relative; font-size: 15px; line-height: 1; }
.boost-badge-tag {
  position: absolute; right: -6px; bottom: -4px;
  font-size: 8.5px; font-style: normal; font-weight: 900;
  color: #2c1a06; background: #ffd24a; border-radius: 6px; padding: 0 2px;
}
.boost-badge-t { font-variant-numeric: tabular-nums; letter-spacing: 0.2px; }
body.vtouch #boost-hud { top: 96px; }

/* barre d'armement verticale à gauche (starblast-like) — collée au bord gauche, sous les
   boutons Options/Quitter ; les panneaux d'info sont alignés dessous en bas de l'écran */
#arm-slots {
  left: 10px; top: 60px; /* sous la rangée de boutons (quit/options/son) avec un vrai espacement */
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px; /* PC : COLONNE verticale (plus de grille 2 col qui se tassait) */
  z-index: 11; pointer-events: none;
}
.arm-slot {
  display: flex; flex-direction: column; align-items: center;
  width: 46px; padding: 3px 2px;
  background: rgba(8, 22, 32, 0.6);
  border: 2px solid #2f4a5c; border-radius: 10px;
  color: #bcd0dc; position: relative;
  pointer-events: auto; /* pour le survol (infobulle d'achat des munitions) */
}
/* infobulle d'achat des munitions au survol d'un slot vide */
#arm-tip {
  position: fixed; z-index: 13;
  max-width: 214px; padding: 7px 11px;
  background: rgba(8, 22, 32, 0.96);
  border: 1px solid #3a6a86; border-radius: 8px;
  font-size: 11.5px; line-height: 1.35; font-weight: 600;
  color: #d6e8f2; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.arm-slot.sel { border-color: #f0d97a; background: rgba(40, 34, 12, 0.7); color: #ffe9a8; box-shadow: 0 0 8px rgba(240,217,122,0.35); }
.arm-slot.empty { opacity: 0.68; } /* slot sans munition (satellite/missile/torpille) reste bien VISIBLE — sinon on croit qu'il n'existe pas */
.arm-ic { font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.arm-ic svg { display: block; }
.arm-lbl { font-size: 7.5px; font-weight: 700; margin-top: 1px; text-transform: uppercase; letter-spacing: 0.3px; }
.arm-n {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; line-height: 18px;
  font-size: 11px; font-weight: 800; text-align: center;
  background: #e9c53a; color: #142430; border-radius: 9px;
}
.arm-n.zero { background: #3a4d5a; color: #9bb0bd; }
/* ANTI-CHEVAUCHEMENT sur écrans courts/étroits : la barre d'armement (colonne gauche) ne doit
   pas déborder sur les panneaux Flotte/Améliorations. On compacte progressivement. */
@media (max-height: 820px) {
  #arm-slots { top: 52px; gap: 5px; }
  .arm-slot { width: 50px; padding: 4px 3px; }
  .arm-ic { font-size: 17px; }
  .arm-lbl { font-size: 8px; margin-top: 2px; }
  #fleet-panel { bottom: 292px; transform: scale(0.74); transform-origin: bottom left; }
  #stats-panel { transform: scale(0.86); transform-origin: bottom left; }
  /* écran d'accueil : compaction LÉGÈRE (fenêtre moyennement haute, cas le plus courant —
     ex. 1366×768). Le cas étroit + carte équipe empilée (sous 520px de large) est traité à
     part, plus bas, pour ne pas alourdir ce palier léger par un cas rare. */
  #menu { padding: 12px 16px; }
  #menu-grid { gap: 22px; }
  #menu-main { gap: 10px; }
  #menu-main, #menu-side { padding: 16px 20px; }
  #menu h1 { font-size: 46px; letter-spacing: 8px; }
  #menu h1 span { font-size: 11.5px; }
  /* logo réduit sur fenêtre peu haute : un wordmark de 132px mangeait une hauteur précieuse
     alors que l'aperçu du navire (désormais pleine colonne) prend déjà sa place. */
  .menu-logo-img { max-width: 340px; margin-bottom: 2px; }
  #ship-preview { width: 195px; height: 135px; }
  #preview-caption { width: 195px; }
  .team-name { max-width: 195px; }
  #flag-grid { max-height: 126px; }
  #btn-play, #btn-respawn { padding: 10px 40px; font-size: 17px; }
}
@media (max-height: 700px) {
  .arm-slot { width: 44px; padding: 3px 2px; }
  .arm-lbl { display: none; } /* icônes seules quand c'est vraiment court */
  .arm-slot { flex-direction: row; }
  #fleet-panel { bottom: 254px; transform: scale(0.68); transform-origin: bottom left; }
  /* pas de barre de scroll sur les Améliorations : on compacte les lignes plutôt que scroller */
  #stats-panel { overflow: visible; transform: scale(0.84); transform-origin: bottom left; }
  #stats-panel .stat-row { margin: 2px 0; }
  /* écran d'accueil : compaction MODÉRÉE, fenêtre courte */
  #menu { padding: 12px 16px; }
  #menu-grid { gap: 16px; }
  #menu-main { gap: 7px; }
  #menu-main, #menu-side { padding: 12px 18px; }
  #menu h1 { font-size: 32px; letter-spacing: 5px; }
  #menu h1 span { font-size: 10px; }
  #name-input { padding: 7px 14px; }
  #team-card { padding: 9px; gap: 10px; }
  #ship-preview { width: 145px; height: 100px; }
  #preview-caption { width: 145px; }
  .team-name { max-width: 145px; }
  #flag-grid { max-height: 92px; }
  .mode-btn { padding: 8px 14px; min-width: 175px; }
  #btn-play, #btn-respawn { padding: 8px 34px; font-size: 15.5px; }
  .menu-cta-row .btn-secondary, #btn-install { padding: 7px 16px; font-size: 13px; }
  .menu-card { padding: 11px 14px; }
  #hs-list { font-size: 12px; max-height: 96px; overflow-y: auto; }
}
/* écran d'accueil : cas ÉTROIT + carte équipe empilée (media max-width:520px plus haut fait
   passer #team-card en colonne) COMBINÉ à une fenêtre pas très haute — sans ce palier dédié,
   l'empilement (aperçu navire au-dessus du sélecteur d'équipe) déborde même si les deux
   media queries "génériques" ci-dessus restent, elles, volontairement spacieuses. */
@media (max-width: 520px) and (max-height: 820px) {
  #menu { padding: 14px 16px; }
  #menu-grid { gap: 14px; }
  #menu-main { gap: 6px; }
  #menu-main, #menu-side { padding: 10px 18px; }
  #menu-side { padding: 4px 18px; }
  #menu h1 { font-size: 27px; letter-spacing: 5px; }
  #name-input { padding: 6px 14px; }
  #team-card { padding: 8px; gap: 6px; }
  #team-preview { gap: 4px; }
  #team-picker { gap: 5px; }
  #ship-preview { width: 96px; height: 66px; }
  #preview-caption { width: 96px; }
  .team-name { max-width: 96px; }
  .flag-vis { height: 30px; }
  .flag-nm { padding: 1px 2px; font-size: 8px; }
  #flag-grid { max-height: 100px; gap: 4px; }
  .mode-row { gap: 6px; }
  .mode-btn { padding: 6px 14px; }
  #btn-play, #btn-respawn { padding: 6px 34px; font-size: 16px; }
  .menu-cta-row .btn-secondary, #btn-install { padding: 6px 16px; font-size: 12.5px; }
  .menu-card { padding: 10px 14px; }
  .menu-card h3 { margin-bottom: 2px; }
  #hs-list { max-height: 58px; overflow-y: auto; }
}
@media (max-width: 520px) and (max-height: 700px) {
  #menu { padding: 8px 16px; }
  #menu-grid { gap: 10px; }
  #menu-main { gap: 5px; }
  #menu-main, #menu-side { padding: 8px 16px; }
  #menu-side { padding: 4px 16px; }
  #menu h1 { font-size: 25px; letter-spacing: 4px; }
  #name-input { padding: 5px 14px; }
  #team-card { padding: 6px; gap: 6px; }
  #team-preview { gap: 3px; }
  #team-picker { gap: 4px; }
  #ship-preview { width: 84px; height: 58px; }
  #preview-caption { width: 84px; }
  .team-name { max-width: 84px; }
  #flag-tabs { gap: 4px; }
  .flag-tab { padding: 3px 9px; font-size: 10.5px; }
  #flag-search { padding: 5px 10px; font-size: 11.5px; }
  .flag-vis { height: 26px; }
  .flag-nm { padding: 1px 2px; font-size: 7.5px; }
  #flag-grid { max-height: 82px; gap: 3px; }
  .mode-row { gap: 5px; }
  .mode-btn { padding: 5px 14px; min-width: 150px; font-size: 12.5px; }
  #btn-play, #btn-respawn { padding: 5px 32px; font-size: 15px; }
  .menu-cta-row { gap: 4px; }
  .menu-cta-row .btn-secondary, #btn-install { padding: 5px 16px; font-size: 12px; }
  .menu-card { padding: 7px 12px; }
  #hs-list { font-size: 10.5px; max-height: 48px; overflow-y: auto; }
}
/* NAVIRE PLEINE COLONNE en bureau (≥941px), QUELLE QUE SOIT la hauteur de fenêtre. Les paliers
   `max-height` ci-dessus figent l'aperçu à 195/145px pour gagner de la hauteur sur les petits
   écrans — mais appliqués à un écran LARGE mais peu haut (ex. 1366×768, 1440×810), ce format
   minuscule laissait un grand vide à DROITE de l'image. Placé APRÈS ces paliers pour gagner la
   cascade : sur bureau, l'aperçu remplit sa colonne (hauteur déduite du ratio), sans vide. */
@media (min-width: 941px) {
  #ship-preview { width: 100%; height: auto; }
  #preview-caption { width: 100%; max-width: 100%; }
  .team-name { max-width: 100%; }
}
/* couleurs claires et contrastées quel que soit le fond (eau claire incluse) */
#dash-chip.ready { color: #cffbd6; border: 2px solid rgba(122, 211, 122, 0.9); box-shadow: 0 3px 12px rgba(0,0,0,0.5), 0 0 12px rgba(122,211,122,0.45); }
#dash-chip.active { color: #ffffff; border: 1px solid #ffd75e; }
#dash-chip.cooldown { color: #eaf2f8; border: 1px solid rgba(255,255,255,0.25); }

#xpbar-wrap {
  bottom: 16px; left: 50%; transform: translateX(-50%);
  width: 430px; text-align: center;
}
#xpbar {
  height: 15px;
  background: rgba(8, 22, 32, 0.65);
  border-radius: 8px; overflow: hidden;
  transition: box-shadow 0.2s;
}
#xpbar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #d98a10, #ffd21f);
  box-shadow: 0 0 6px rgba(255,210,31,0.45);
  transition: width 0.15s linear, box-shadow 0.25s, background 0.25s;
}
/* gradient de but : la barre s'illumine à l'approche du niveau suivant (« encore un peu ! ») */
#xpbar-fill.near {
  background: linear-gradient(90deg, #ffb01f, #fff2a0);
  box-shadow: 0 0 12px rgba(255,224,90,0.9), 0 0 4px rgba(255,255,255,0.7) inset;
  animation: xpNear 0.95s ease-in-out infinite;
}
@keyframes xpNear { 50% { box-shadow: 0 0 20px rgba(255,235,140,1), 0 0 6px rgba(255,255,255,0.85) inset; } }
/* passage de niveau : flash blanc/or de récompense sur toute la barre */
#xpbar.levelflash { animation: xpFlash 0.65s ease; }
@keyframes xpFlash {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  35% { box-shadow: 0 0 26px 7px rgba(255,235,140,0.95); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
#xpbar-label {
  margin-top: 3px; font-size: 13px; font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
#points-label {
  margin-top: 3px; font-size: 13px; font-weight: 700;
  color: #7db9ec;
  animation: blink 1.1s ease infinite;
}
@keyframes blink { 50% { opacity: 0.45; } }

/* silhouette FANTÔME du prochain navire : CENTRÉE au-dessus de la barre d'XP, remontée pour
   passer AU-DESSUS du chip Turbo (desktop, bottom:74px) sans le chevaucher. Sur mobile le chip
   Turbo est en haut (top:62px) → aucune collision en bas. */
#next-ship {
  position: absolute; bottom: calc(100% + 64px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 9px;
  padding: 5px 10px 5px 6px; border-radius: 12px;
  background: rgba(8, 22, 32, 0.55);
  border: 1px solid rgba(120,160,190,0.18);
  pointer-events: none; white-space: nowrap;
}
/* mobile : un peu plus compacte, remontée juste au-dessus de la barre (le chip Turbo est en haut) */
body.vtouch #next-ship { bottom: calc(100% + 12px); transform: translateX(-50%) scale(0.88); transform-origin: bottom center; }
#next-ship-cv {
  width: 70px; height: 42px; border-radius: 6px;
  transition: opacity 0.35s ease, filter 0.35s ease;
}
#next-ship-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.18; text-align: left; }
#next-ship-cap { font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: #9bb0bd; }
#next-ship-name { font-size: 13px; font-weight: 800; color: #dbe9f3; }
#next-ship-when { font-size: 10px; font-weight: 600; color: #bcd0dc; }
#next-ship-when.ready { color: #5df08a; text-shadow: 0 0 8px rgba(80,240,140,0.5); }

#leaderboard {
  top: 14px; right: 14px; width: 264px;
  padding: 0; overflow: hidden;
  background: linear-gradient(180deg, rgba(10,26,44,0.94), rgba(8,20,32,0.9));
  border-radius: 6px; border-top: 3px solid #22c55e;
  box-shadow: 0 7px 20px rgba(0,0,0,0.42);
  font-size: 14px;
}
/* en-tête = bandeau titre broadcast (or, italique, capitales) */
#leaderboard > h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; font-style: italic; font-weight: 800;
  color: #0c1a24; background: linear-gradient(90deg, #f0d97a, #e0b84a);
  margin: 0 0 4px; padding: 5px 14px;
}
/* compteur « N en mer » : discret, aligné à droite dans le bandeau titre */
#lb-count { float: right; font-style: normal; font-weight: 700; letter-spacing: 0.5px; opacity: 0.85; }
#lb-count:empty { display: none; }
#lb-list { padding: 2px 12px 9px; }
#stats-panel h3, #fleet-panel h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: #bcd0dc; margin-bottom: 6px;
}
#stats-panel h3 span, #fleet-panel h3 span { float: right; color: #cfdde7; }
#lb-list { list-style: none; }
#lb-list li {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 1px 0;
}
/* rang explicite (data-rank) : permet d'afficher le VRAI rang du joueur hors du top 5 */
#lb-list li::before { content: attr(data-rank) '.'; color: #9bb0bd; margin-right: 4px; min-width: 20px; text-align: right; }
#lb-list li.bot { color: #e8b23a; }
/* podium : or / argent / bronze (comparaison sociale — viser la marche du dessus) */
#lb-list li.rank1 { color: #ffd94a; font-weight: 700; text-shadow: 0 0 8px rgba(255,217,74,0.55); }
#lb-list li.rank1::before { color: #ffd94a; }
#lb-list li.rank2 { color: #d3dde6; font-weight: 700; }
#lb-list li.rank2::before { color: #d3dde6; }
#lb-list li.rank3 { color: #e2a05a; font-weight: 700; }
#lb-list li.rank3::before { color: #e2a05a; }
/* ma ligne : surlignage doré prioritaire (repérage instantané de son rang) */
#lb-list li.me { color: #f0d97a; font-weight: 700; text-shadow: 0 0 9px rgba(240,217,122,0.6); }
/* flèches de mouvement de rang : vert = je monte, rouge = je descends */
.lb-arrow { font-size: 10px; margin-left: 5px; font-weight: 700; }
.lb-arrow.up { color: #2fd66e; }
.lb-arrow.down { color: #ff6b5c; }
/* séparateur avant « ma position » quand je suis hors du top 5 */
#lb-list li.lb-sep { justify-content: center; color: #55707f; padding: 0; pointer-events: none; }
#lb-list li.lb-sep::before { content: none; }
#lb-list li.lb-far { margin-top: 3px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.12); }
#lb-list li span.lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }

#team-scores {
  top: 14px; left: 14px;
  display: flex; gap: 14px;
  padding: 8px 14px;
  background: rgba(8, 22, 32, 0.65);
  border-radius: 8px;
  font-size: 14px;
}
.ts-blue { color: #7db9ec; }
.ts-red { color: #ec8d8d; }

#btn-options, #btn-quit {
  left: 10px; /* collés au bord gauche, comme la barre d'armement et les panneaux */
  padding: 6px 14px;
  font-size: 12.5px; font-weight: 600;
  color: #cfdde7; background: rgba(8, 22, 32, 0.65);
  border: 1px solid #33566b; border-radius: 8px;
  cursor: pointer;
}
#btn-options { top: 14px; left: 68px; padding: 6px 12px; line-height: 0; }
#btn-quit { top: 14px; left: 10px; border-color: #6a3540; padding: 6px 12px; line-height: 0; }
#btn-quit svg, #btn-options svg { display: block; }
#btn-options:hover { border-color: #5aa9e6; }
/* bouton COUPER LE SON (HUD) */
#btn-mute {
  top: 14px; left: 122px; /* même écart (14px) que quit→options : icônes compactes */
  padding: 6px 12px; line-height: 0;
  color: #cfdde7; background: rgba(8, 22, 32, 0.65);
  border: 1px solid #33566b; border-radius: 8px; cursor: pointer;
}
#btn-mute:hover { border-color: #5aa9e6; }
#btn-mute.muted { border-color: #6a3540; color: #ec8d8d; }
.btn-secondary.muted { border-color: #6a3540; color: #ec8d8d; }
#btn-quit:hover { border-color: #e06666; color: #f0c0c0; }

#stats-panel {
  left: 10px; bottom: 16px; width: 264px; /* bloc « Améliorations » un peu moins large (300→264) */
  padding: 9px 11px;
  background: rgba(8, 22, 32, 0.65);
  border-radius: 8px;
  transform: scale(0.92); transform-origin: bottom left; /* PC : bloc RÉDUIT par défaut (compacté davantage sur écrans courts) */
  z-index: 12; /* AU-DESSUS du panneau Flotte : son badge « x3 » ne passe plus dessous */
}
/* NOTE « pourquoi les + sont verrouillés » : à DROITE du panneau Améliorations (voir UI.refreshStatsPanel) */
#stat-hint {
  position: absolute; left: calc(100% + 8px); bottom: 4px; width: 178px;
  background: rgba(34, 20, 8, 0.92); border: 1px solid #8a5a2a; border-left: 3px solid #f0b64a;
  border-radius: 8px; padding: 8px 10px;
  font-size: 11.5px; line-height: 1.35; font-weight: 600; color: #ffdca0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  pointer-events: none; z-index: 12;
  opacity: 1; transition: opacity 0.35s ease; /* n'apparaît qu'au clic d'un « + » verrouillé, puis fond */
}
#stat-hint.fade-out { opacity: 0; }
#stat-hint.hidden { display: none; }
/* MOBILE : la popup Améliorations est centrée et occupe quasi toute la largeur (min(680px, 97vw)) —
   la note ne peut plus apparaître « à droite » (elle partirait hors écran). On la place AU-DESSUS
   de la popup, centrée, avec l'accent doré en bas (pointe vers le panneau qu'elle commente). */
body.vtouch.mob-stats-open #stat-hint {
  left: 50%; right: auto; bottom: calc(100% + 10px);
  transform: translateX(-50%);
  width: min(300px, 88vw);
  text-align: center;
  border-left: 1px solid #8a5a2a; border-bottom: 3px solid #f0b64a;
}
/* AMÉLIORATIONS façon diep.io : pilule coloree = barre, nom en surimpression, touche, bouton + */
.stat-row {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 0; /* bloc « Améliorations » un peu moins haut (avant 9px) */
  position: relative;
}
.stat-bar {
  position: relative; flex: 1 1 auto; min-width: 0;
  height: 23px; border-radius: 6px; overflow: hidden; /* barre un peu plus fine (27→23) */
  background: rgba(8, 20, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.stat-fill {
  position: absolute; inset: 0; width: 0%;
  background: var(--c, #5aa9e6); opacity: 0.55;
  transition: width 0.2s ease;
}
.stat-name {
  position: absolute; left: 8px; right: 22px; top: 0; height: 23px; line-height: 23px;
  font-size: 12.5px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-key {
  position: absolute; right: 5px; top: 5px;
  min-width: 17px; height: 17px; line-height: 17px; text-align: center;
  font-size: 11px; font-weight: 800; color: #dfeaf2;
  background: rgba(0, 0, 0, 0.35); border-radius: 4px;
}
.stat-plus {
  flex: 0 0 23px; width: 23px; height: 23px; padding: 0;
  font-size: 18px; font-weight: 800; line-height: 21px;
  color: #fff; background: var(--c, #5aa9e6);
  border: none; border-radius: 6px; cursor: pointer;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}
.stat-plus:hover:not(:disabled) { filter: brightness(1.12); }
/* VERROUILLÉ : aucun point d'amélioration dispo → cadenas + curseur d'aide (indicateur « pas cliquable ») */
.stat-plus.locked { position: relative; opacity: 0.45; cursor: help; filter: grayscale(0.5); }
.stat-plus.locked::after {
  content: '🔒'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; opacity: 0.9;
}
/* badge diep.io « x5 » : points d'amélioration en attente, gros et incliné */
#stat-pts-badge {
  position: absolute; right: -14px; top: -30px;
  z-index: 20; /* toujours visible AU-DESSUS du panneau (mobile agrandi inclus) */
  transform: rotate(-9deg);
  font-size: 34px; font-weight: 900; font-style: italic;
  color: #ffd75e;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 14px rgba(255, 215, 94, 0.35);
  pointer-events: none;
  animation: ptsPulse 1s ease infinite;
}
@keyframes ptsPulse { 50% { transform: rotate(-9deg) scale(1.12); } }
/* inactif (plus de point à dépenser) : garde la couleur du stat, mais en version pâle/désaturée
   plutôt qu'un gris générique — cohérent PC et mobile (même règle, cf. media query mob-stats-open) */
.stat-plus:disabled {
  background: color-mix(in srgb, var(--c, #5aa9e6) 35%, #384854);
  color: rgba(255, 255, 255, 0.55);
  cursor: default; box-shadow: none;
}
.stat-plus.maxed { background: #46804a; color: #d6f2d6; }

/* AMÉLIORATION AU MAXIMUM : léger effet « enchantement » — halo doré pulsant + reflet qui balaye la barre. */
.stat-bar.maxed-ench {
  border-color: rgba(255, 238, 165, 0.6);
  animation: statEnchGlow 2.4s ease-in-out infinite;
}
.stat-bar.maxed-ench::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 248, 214, 0.5) 50%, transparent 66%);
  transform: translateX(-120%);
  animation: statEnchSweep 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes statEnchGlow {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 236, 150, 0.35); }
  50%      { box-shadow: 0 0 13px 2px rgba(255, 236, 150, 0.6); }
}
@keyframes statEnchSweep {
  0%        { transform: translateX(-120%); }
  55%, 100% { transform: translateX(120%); }
}

/* petit « pop » de satisfaction sur la ligne quand une amélioration est achetée (PC + mobile) */
.stat-row.stat-pop .stat-bar { animation: statRowFlash 0.5s ease; }
.stat-row.stat-pop .stat-plus { animation: statPlusPop 0.4s ease; }
@keyframes statRowFlash {
  0% { box-shadow: none; }
  35% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 0 16px 3px rgba(255, 255, 255, 0.4); }
  100% { box-shadow: none; }
}
@keyframes statPlusPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.28); }
  100% { transform: scale(1); }
}
/* particules éjectées du bouton + à l'achat (créées/retirées en JS, cf. UI.popStatFx) */
.stat-particle {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pc, #ffd75e);
  box-shadow: 0 0 4px var(--pc, #ffd75e);
  animation: statParticleFly 0.55s ease-out forwards;
}
@keyframes statParticleFly {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3); }
}
.fleet-row button {
  width: 56px; padding: 3px 0;
  font-size: 11.5px; font-weight: 600;
  color: #142430; background: #e9c53a;
  border: none; border-radius: 5px; cursor: pointer;
}
.fleet-row button:disabled { background: #3a4d5a; color: #9bb0bd; cursor: default; }


/* bandeau chantier en jeu (choix de coque, non intrusif) — PAS de fond : seules les
   pancartes de coques flottent au-dessus du jeu */
#shipyard-bar {
  top: 40px; left: 50%; transform: translateX(-50%); /* remonté COLLÉ sous la barre de cale (#cargo-wrap) */
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 12;
  pointer-events: auto;
}
.sy-label { font-size: 12px; color: #cfdde7; text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6); }
#sy-cards { display: flex; gap: 10px; }
.sy-card {
  width: 150px; background: rgba(12, 32, 45, 0.92);
  border: 2px solid #33566b; border-radius: 8px; padding: 6px;
  cursor: pointer; text-align: center; position: relative;
}
.sy-card:hover { border-color: #f0d97a; }
.sy-card canvas { width: 100%; border-radius: 5px; }
.sy-card b { font-size: 11.5px; display: block; margin-top: 2px; }
.class-card button.free {
  background: linear-gradient(90deg, #15803d, #2fa860); color: #eafff0;
  box-shadow: 0 0 5px rgba(47,168,96,0.3);
}

/* menu emoji flottant : GROS emojis sur fond SOMBRE */
#emoji-menu {
  position: fixed; z-index: 40;
  display: flex; gap: 6px; flex-wrap: wrap;
  max-width: 380px; padding: 10px;
  background: rgba(6, 14, 22, 0.97);
  border: 1px solid #2a4356; border-radius: 14px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
}
#emoji-menu button {
  font-size: 36px; width: 60px; height: 60px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 20, 30, 0.9); border: 1px solid #22384a;
  border-radius: 10px; cursor: pointer; overflow: hidden; padding: 0;
}
#emoji-menu button:hover { border-color: #f0d97a; background: rgba(30, 34, 18, 0.95); transform: scale(1.08); }
#emoji-menu .emoji-troll { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

/* boutique d'île : BANDEAU en haut de l'écran (articles alignés, achat en un clic) */
#shop-bar {
  top: 150px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 40px 8px 14px; z-index: 12;
  background: rgba(8, 22, 32, 0.85);
  border: 1px solid #4a5c33; border-radius: 12px;
  pointer-events: auto;
}
#shop-bar-items { display: flex; gap: 10px; }
/* croix de fermeture du bandeau boutique : plus compacte que la croix des panneaux plein écran,
   toujours cliquable même quand le joueur reste debout sur le comptoir. */
.shop-bar-x { top: 6px; right: 6px; width: 24px; height: 24px; font-size: 16px; }
.shop-card {
  position: relative; width: 118px; padding: 20px 8px 8px;
  background: linear-gradient(180deg, rgba(18,42,58,0.96), rgba(9,24,34,0.96));
  border: 1px solid #33566b; border-top: 3px solid #4a6076;
  border-radius: 10px; text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.shop-card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,0.45); }
/* accent de catégorie sur le liseré supérieur */
.shop-card--arme   { border-top-color: #e0803a; }
.shop-card--boost  { border-top-color: #e9c53a; }
.shop-card--flotte { border-top-color: #5aa0d0; }
/* achetable : halo doré discret */
.shop-card.is-afford { border-color: #e9c53a; box-shadow: 0 0 0 1px rgba(233,197,58,0.35), 0 6px 16px rgba(0,0,0,0.4); }
.shop-card.is-max { opacity: 0.6; }
/* pastille de catégorie en haut-gauche */
.shop-card .shop-cat {
  position: absolute; top: 6px; left: 6px;
  font-size: 8px; font-weight: 800; letter-spacing: 0.06em;
  color: #0c1a24; background: #7f97a6; padding: 1px 5px; border-radius: 4px;
}
.shop-card--arme   .shop-cat { background: #e0803a; }
.shop-card--boost  .shop-cat { background: #e9c53a; }
.shop-card--flotte .shop-cat { background: #5aa0d0; }
/* compteur de stock (munitions) en haut-droite */
.shop-card .shop-count:not(:empty) {
  position: absolute; top: 6px; right: 6px;
  font-size: 9px; font-weight: 700; color: #cfe6f2;
  background: rgba(6,16,24,0.7); padding: 1px 5px; border-radius: 4px;
}
.shop-card .shop-ic {
  font-size: 26px; line-height: 1; display: block; margin: 2px 0 4px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}
.shop-card b { font-size: 11.5px; display: block; margin: 2px 0; line-height: 1.15; color: #eaf2f7; }
.shop-card small { font-size: 9.5px; color: #bcd0dc; display: block; min-height: 24px; line-height: 1.2; }
.shop-card button {
  width: 100%; margin-top: 5px; padding: 5px 0;
  font-size: 12px; font-weight: 800; letter-spacing: 0.02em;
  color: #142430; background: linear-gradient(180deg, #f4d556, #e0b02f);
  border: none; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.shop-card button:hover:not(:disabled) { background: linear-gradient(180deg, #ffe36a, #eabb34); }
.shop-card button .shop-coin {
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff2b0, #b8860b);
  box-shadow: inset 0 0 0 1px rgba(120,90,10,0.6);
}
.shop-card button:disabled { background: #34485560; color: #9bb0bd; cursor: default; }
.shop-card button:disabled .shop-coin { background: #7d94a3; box-shadow: none; }

#fleet-panel {
  /* COLLÉ au bord gauche, empilé au-dessus du panneau Améliorations (même colonne), avec un
     ÉCART CLAIR (le badge « x3 » dépasse du haut des Améliorations : on lui laisse de l'air). */
  left: 10px; bottom: 300px; width: 272px; /* remonte moins : les Améliorations réduites laissent la place */
  padding: 11px 13px;
  background: rgba(8, 22, 32, 0.65);
  border-radius: 8px;
  transform: scale(0.8); transform-origin: bottom left; /* PC : Flotte RÉDUITE PLUS que les Améliorations (demande) */
  z-index: 10;
}
.fleet-row {
  display: flex; align-items: center; gap: 7px;
  margin: 3px 0; font-size: 13px;
}
.fleet-name { flex: 1; }
.fleet-cost { color: #e9c53a; width: 56px; text-align: right; }
.fleet-nb { color: #bcd0dc; width: 30px; text-align: right; }

/* ---------- habillage « broadcast foot / FIFA » des notifications ---------- */
/* bannière = « lower-third » TV : bandeau incliné, accent latéral, texte gras italique capitales */
#boss-banner {
  top: 200px; right: 14px; width: 250px;
  padding: 9px 14px 10px 16px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.4px; font-style: italic; text-transform: uppercase;
  line-height: 1.22; text-align: left;
  color: #f4f8fb;
  background: linear-gradient(100deg, rgba(9,24,42,0.96), rgba(17,42,70,0.92));
  border: none; border-left: 4px solid #22c55e; border-radius: 3px;
  box-shadow: 0 7px 20px rgba(0,0,0,0.45);
  position: fixed; overflow: hidden; /* fixed (pas relative) sinon top/right partent du flux → à GAUCHE */
  animation: btvIn 0.32s cubic-bezier(.2,.85,.2,1);
}
#boss-banner::after { /* liseré doré→vert animé en bas (signature broadcast) */
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, #f0d97a, #22c55e);
}
@keyframes btvIn { from { transform: translateX(34px); opacity: 0; } }

/* notice PERMANENTE (ne disparaît pas seule) : annonce du concert de Jony, visible tant que
   l'hélico n'a pas atteint la scène (masquée par UI.hideHeliNotice() quand le show démarre) */
#heli-notice {
  top: 200px; right: 14px; width: 250px;
  padding: 9px 14px 10px 16px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.4px; font-style: italic; text-transform: uppercase;
  line-height: 1.22; text-align: left;
  color: #f4f8fb;
  background: linear-gradient(100deg, rgba(42,32,9,0.96), rgba(70,54,17,0.92));
  border: none; border-left: 4px solid #f0d97a; border-radius: 3px;
  box-shadow: 0 7px 20px rgba(0,0,0,0.45);
  position: fixed; overflow: hidden;
  animation: btvIn 0.32s cubic-bezier(.2,.85,.2,1);
}
#heli-notice::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, #f0d97a, #e8703a);
}

/* MESSAGE RADIO DU GARDIEN : notification d'alerte ROUGE très visible, centrée en haut de l'écran
   (transmission de sommation « 1er tir de sommation », etc.). Distincte de la bannière d'événement. */
#gardien-radio {
  position: fixed; top: 92px; left: 50%; transform: translateX(-50%);
  min-width: 260px; max-width: min(560px, 88vw);
  padding: 11px 20px 12px 46px;
  font-size: 15px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
  line-height: 1.2; text-align: left; color: #fff5f4;
  background: linear-gradient(100deg, rgba(74,10,10,0.97), rgba(120,18,18,0.95));
  border: 1.5px solid rgba(255,120,110,0.85); border-left: 5px solid #ff3b30; border-radius: 5px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.5), 0 0 22px rgba(255,50,40,0.5);
  pointer-events: none; overflow: hidden; z-index: 60;
  animation: gRadioIn 0.28s cubic-bezier(.2,.85,.2,1), gRadioPulse 0.9s ease-in-out infinite;
}
#gardien-radio::before { /* pastille radio ⚠ clignotante à gauche */
  content: '📻'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 20px; filter: grayscale(0.15);
}
#gardien-radio::after { /* liseré rouge animé en bas (signature broadcast d'alerte) */
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, #ff3b30, #ffb03a, #ff3b30);
}
#gardien-radio .grtitle { display: block; font-size: 10.5px; letter-spacing: 1.4px; color: #ffb9b2; opacity: 0.95; margin-bottom: 2px; }
@keyframes gRadioIn { from { transform: translateX(-50%) translateY(-16px); opacity: 0; } }
@keyframes gRadioPulse { 0%,100% { box-shadow: 0 8px 26px rgba(0,0,0,0.5), 0 0 14px rgba(255,50,40,0.35); } 50% { box-shadow: 0 8px 26px rgba(0,0,0,0.5), 0 0 30px rgba(255,60,50,0.75); } }
body.vtouch #gardien-radio { top: 60px; font-size: 12.5px; min-width: 200px; padding: 8px 12px 9px 40px; }

/* killfeed = ticker d'évènements de match : onglet coloré à gauche, capitales condensées */
#killfeed {
  top: 312px; right: 14px; width: 250px;
  display: flex; flex-direction: column; align-items: stretch; gap: 7px;
}
.feed-msg {
  padding: 5px 10px 5px 11px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  background: linear-gradient(90deg, rgba(9,24,42,0.9), rgba(9,24,42,0.55));
  border-left: 3px solid #f0d97a;
  border-radius: 2px;
  color: #eaf2f7; text-align: left;
  transition: opacity 0.6s ease;
  animation: btvIn 0.25s ease;
}

/* ---------- panneaux ---------- */

.panel { justify-content: flex-start; padding-top: 6vh; overflow-y: auto; }
.panel h2 { font-size: 25px; letter-spacing: 1px; }
#equip-panel h2 span { color: #f0d97a; font-size: 17px; margin-left: 10px; }
.panel-hint { font-size: 13px; color: #bcd0dc; max-width: 680px; }
#equip-quota { color: #f0d97a; font-weight: 700; }

#preset-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: center;
}
.preset-hint { font-size: 12.5px; color: #bcd0dc; }
.preset-btn {
  padding: 5px 14px;
  font-size: 12.5px; font-weight: 600;
  color: #cfdde7; background: #10303f;
  border: 1px solid #33566b; border-radius: 14px;
  cursor: pointer;
}
.preset-btn.selected { border-color: #f0d97a; color: #f0d97a; }

#equip-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(215px, 240px));
  gap: 14px;
  align-items: start;
}
@media (max-width: 1024px) { #equip-columns { grid-template-columns: repeat(2, minmax(215px, 1fr)); } }

.equip-col {
  background: rgba(12, 32, 45, 0.9);
  border: 1px solid #274456;
  border-radius: 10px;
  padding: 10px;
  text-align: left;
}
.equip-col > h4 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 1px;
  color: #bcd0dc; margin-bottom: 8px; text-align: center;
}
.equip-opt {
  border: 1px solid #274456; border-radius: 8px;
  padding: 8px; margin-bottom: 8px;
  background: rgba(8, 22, 32, 0.55);
}
.equip-opt.owned { border-color: #f0d97a; }
.equip-opt.locked { opacity: 0.45; }
.equip-opt.recommended { border-color: #7db9ec; box-shadow: 0 0 0 1px #7db9ec inset; }
.equip-opt h5 { font-size: 13.5px; margin-bottom: 2px; }
.equip-opt h5 small { color: #bcd0dc; font-weight: 400; margin-left: 5px; }
.equip-opt p { font-size: 11.5px; color: #bcd0dc; line-height: 1.35; margin-bottom: 6px; }
.equip-opt button {
  width: 100%; padding: 4px 0;
  font-size: 12px; font-weight: 600;
  color: #142430; background: #e9c53a;
  border: none; border-radius: 5px;
  cursor: pointer;
}
.equip-opt button:disabled { background: #3a4d5a; color: #9bb0bd; cursor: default; }

/* catalogue des modèles au chantier (visuels + barres de progression colorées) */
#hull-cards {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  max-width: 1150px;
}
.hull-card {
  width: 184px;
  background: #1d2c37;
  border: 1px solid #2f4a5a;
  border-radius: 8px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
  text-align: center;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.hull-card:not(.locked):hover { border-color: #5aa9e6; transform: translateY(-2px); }
.hull-card canvas { border-radius: 6px; width: 100%; background: #16242e; }
.hull-card h5 { font-size: 13px; }
.hull-card.current { border-color: #f0d97a; box-shadow: 0 0 0 1px rgba(240,217,122,0.4) inset; }
.hull-card.locked { opacity: 0.55; }
.hull-card.past { opacity: 0.7; border-style: dashed; }
/* ARBRE DES NAVIRES (maintenir I) — popup CENTRÉE, compacte, animée, pédagogique */
/* ============================================================================
   ARBRE DES NAVIRES (touche Y) — refonte façon diep.io : arbre descendant en
   nœuds, 3 VOIES colorées (cyan/rouge/or), néons flashy, fond navy grillagé.
   ========================================================================== */
/* Panneau Y = overlay TRANSPARENT + FLOU (la mer transparaît, floutée) — override du
   fond quasi-opaque partagé equip/class ci-dessus. La boîte, elle, reste lisible. */
#gallery-panel {
  justify-content: center; padding-top: 0;
  background-color: rgba(8, 13, 24, 0.42);
  background-image: none;
  -webkit-backdrop-filter: blur(9px) saturate(1.08);
  backdrop-filter: blur(9px) saturate(1.08);
}
#gallery-box {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: min(1180px, 96vw); max-height: 94vh; overflow-y: auto;
  padding: 20px 22px 20px;
  background:
    radial-gradient(1200px 460px at 50% -8%, rgba(58,84,140,0.6), transparent 62%),
    linear-gradient(180deg, #1a2440 0%, #10182b 100%);
  border: 1px solid #33456b; border-radius: 18px;
  box-shadow: 0 26px 74px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.05);
}
#gallery-panel.gallery-in #gallery-box { animation: galIn 0.42s cubic-bezier(.2,.9,.25,1); }
#gallery-panel.closing #gallery-box { animation: galOut 0.17s ease forwards; }
@keyframes galIn  { from { transform: scale(0.9) translateY(10px); opacity: 0; } }
@keyframes galOut { to   { transform: scale(0.92) translateY(6px); opacity: 0; } }
#gallery-box h2 {
  font-size: 24px; letter-spacing: 3px; margin: 0; text-transform: uppercase;
  color: #eaf3ff; text-shadow: 0 0 18px rgba(90,190,255,0.55), 0 2px 0 rgba(0,0,0,0.4);
}
.gallery-lead { font-size: 12.5px; color: #9fb2cc; max-width: 640px; text-align: center; line-height: 1.45; }
.gallery-lead b { color: #7fe3ff; }

/* légende = les 3 VOIES colorées (+ rappel « rangée = palier ») */
#gallery-legend { display: flex; gap: 16px; font-size: 11px; color: #a9bccf; flex-wrap: wrap; justify-content: center; font-weight: 700; }
#gallery-legend span { display: flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.lg-dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; box-shadow: 0 0 10px currentColor; }
.lg-speed { background: #18e0ff; color: #18e0ff; }
.lg-war   { background: #ff3d6e; color: #ff3d6e; }
.lg-trade { background: #ffc21e; color: #ffc21e; }
.lg-base  { background: #cddcec; color: #cddcec; }
.gallery-foot { font-size: 11px; color: #8aa0b8; margin: 2px 0 0; }
.gallery-foot b { color: #cfe6ff; }
#gallery-box #gallery-cards { display: flex; flex-direction: column; gap: 12px; max-width: none; align-items: center; width: 100%; }

/* codex de collection */
#gallery-codex {
  font-size: 13px; color: #d5e6f5; text-align: center; font-weight: 700;
  padding: 5px 16px; border-radius: 999px;
  background: rgba(24,224,255,0.09); border: 1px solid rgba(24,224,255,0.28);
  box-shadow: inset 0 0 22px rgba(24,224,255,0.14);
}
#gallery-codex b { color: #5cf0ff; font-size: 15px; }
#gallery-codex .gc-hint { display: block; font-size: 10.5px; color: #94aabf; margin-top: 2px; font-weight: 600; }

/* ---- SCÈNE mise à l'échelle (coordonnées de design UI.VTREE_W x UI.VTREE_H = 1180x1120) ---- */
.vtree-wrap {
  position: relative; width: 100%;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: #2f4a6a transparent;
}
.vtree-wrap::-webkit-scrollbar { height: 8px; }
.vtree-wrap::-webkit-scrollbar-thumb { background: #2f4a6a; border-radius: 4px; }
.vtree-sizer { position: relative; margin: 0 auto; }
.vtree-stage {
  position: absolute; top: 0; left: 0;
  /* DOIT correspondre aux coordonnées de design JS (UI.VTREE_W x UI.VTREE_H) :
     sinon les nœuds des paliers bas sont clippés (overflow:hidden), un padding noir
     apparaît sous la boîte, et le SVG des liaisons est étiré (branches faussées). */
  width: 1180px; height: 1120px;
  transform-origin: top left;
  background:
    linear-gradient(0deg, rgba(20,30,52,0.35), rgba(20,30,52,0.35)),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(130,162,220,0.06) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(130,162,220,0.06) 39px 40px),
    linear-gradient(180deg, #16203a 0%, #0f1728 100%);
  border: 1px solid #29395c; border-radius: 14px; overflow: hidden;
}
.vtree-scrollhint {
  display: none; font-size: 11px; font-weight: 700; color: #6f9fd0;
  text-align: center; letter-spacing: 0.3px; margin-top: -2px;
}

/* liaisons SVG parent -> enfant */
.vtree-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vtree-link { fill: none; stroke-width: 3; stroke-linecap: round; opacity: 0.45; }
.vtree-link.branch-speed { stroke: #18e0ff; }
.vtree-link.branch-war   { stroke: #ff3d6e; }
.vtree-link.branch-trade { stroke: #ffc21e; }
.vtree-link.branch-base  { stroke: #cddcec; }
.vtree-link.is-lineage { opacity: 0.9; stroke-width: 4; }
.vtree-link.is-next {
  opacity: 1; stroke-width: 5; stroke-dasharray: 10 12;
  filter: drop-shadow(0 0 6px currentColor);
  animation: vtreeFlow 0.7s linear infinite;
}
@keyframes vtreeFlow { to { stroke-dashoffset: -22; } }

/* libellés de PALIER (une rangée = un palier) */
.vtree-rowlabel {
  position: absolute; left: 12px; transform: translateY(-50%);
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: #5f77a0;
  text-transform: uppercase; pointer-events: none;
}

/* ---- NŒUDS ---- */
.vtree-node {
  position: absolute; --bc: #cddcec;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; transition: transform 0.12s ease;
}
.vtree-node.branch-speed { --bc: #18e0ff; }
.vtree-node.branch-war   { --bc: #ff3d6e; }
.vtree-node.branch-trade { --bc: #ffc21e; }
.vtree-node.branch-base  { --bc: #d7e6f6; }
.vtree-disc {
  width: 100%; aspect-ratio: 1 / 1; position: relative; overflow: hidden;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 34%, #1a2740, #0b1322);
  border: 2px solid color-mix(in srgb, var(--bc) 50%, #2a3a55);
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.vtree-canvas { width: 100%; height: 100%; display: block; object-fit: contain; }
/* NŒUDS GIGA (rangée du bas de l'arbre) : disque bordé de la couleur de la variante + halo. */
.vtree-giga .vtree-disc { border-color: var(--giga-col, #4d5084); box-shadow: 0 0 0 2px var(--giga-col, #4d5084), 0 0 18px -2px var(--giga-col, #4d5084); }
.vtree-giga:hover .vtree-disc { box-shadow: 0 0 0 3px var(--giga-col, #4d5084), 0 0 24px -2px var(--giga-col, #4d5084); }
.vtree-giga .vtree-label { color: var(--giga-col, #eef1fb); font-weight: 800; }
.vtree-giga .vtree-tag { background: var(--giga-col, #4d5084); color: #0d1420; }
.vtree-label {
  font-size: 11px; line-height: 1.05; font-weight: 700; text-align: center;
  color: #b7c8dd; max-width: 90px; text-shadow: 0 1px 2px rgba(0,0,0,0.75);
}

/* survol / sélection : néon dans la couleur de voie + léger soulèvement */
.vtree-node:hover { transform: translateY(-3px); z-index: 5; }
.vtree-node.is-sel { z-index: 6; }
.vtree-node:hover .vtree-disc,
.vtree-node.is-sel .vtree-disc {
  border-color: var(--bc);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bc) 55%, transparent),
              0 0 24px color-mix(in srgb, var(--bc) 70%, transparent);
}

/* aspiration lointaine : colorée mais estompée (jamais grise/boueuse) */
.vtree-node.state-future { opacity: 0.7; }
.vtree-node.state-future:hover, .vtree-node.state-future.is-sel { opacity: 1; }

/* lignée déjà parcourue : pleinement colorée */
.vtree-node.state-lineage .vtree-disc { border-color: color-mix(in srgb, var(--bc) 80%, #2a3a55); }

/* coques ULTIMES (dernier palier) : liseré doré prestige */
.vtree-node.is-top .vtree-disc { box-shadow: 0 0 0 2px rgba(255,208,92,0.5), 0 0 18px rgba(255,208,92,0.32); }

/* PROCHAIN (accessible depuis la coque actuelle) : néon vif pulsé */
.vtree-node.state-reach .vtree-disc { border-color: var(--bc); animation: vtreePulse 1.2s ease-in-out infinite; }
@keyframes vtreePulse {
  0%,100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bc) 40%, transparent), 0 0 14px color-mix(in srgb, var(--bc) 45%, transparent); }
  50%     { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc) 75%, transparent), 0 0 30px color-mix(in srgb, var(--bc) 85%, transparent); }
}

/* VOUS (coque actuelle) : anneau blanc/or */
.vtree-node.state-current .vtree-disc {
  border-color: #ffe9a8;
  box-shadow: 0 0 0 3px rgba(240,217,122,0.7), 0 0 26px rgba(240,217,122,0.55);
}

/* CAP pré-visé : anneau cyan pointillé (l'outline ne se fait pas rogner) */
.vtree-node.is-cap .vtree-disc { outline: 2px dashed #5ad2ff; outline-offset: 3px; }

/* couronne (coques ultimes) + tag VOUS/PROCHAIN */
.vtree-crown {
  position: absolute; top: -10px; right: -6px; z-index: 3; font-size: 15px; color: #ffd15c;
  text-shadow: 0 0 8px rgba(255,209,92,0.85), 0 1px 2px rgba(0,0,0,0.85); pointer-events: none;
}
.vtree-tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%); z-index: 4;
  font-size: 9px; font-weight: 900; letter-spacing: 0.5px; white-space: nowrap;
  padding: 2px 7px; border-radius: 999px; color: #08111e; pointer-events: none;
}
.vtree-node.state-current .vtree-tag { background: #ffe9a8; box-shadow: 0 0 12px rgba(240,217,122,0.7); }
.vtree-node.state-reach .vtree-tag { background: var(--bc); box-shadow: 0 0 12px var(--bc); }

/* ---- RARETÉ des hauts paliers (dopamine : plus le rang est haut, plus ça brille) ---- */
.vtree-node.rar-rare .vtree-disc { box-shadow: 0 0 0 2px rgba(255,224,138,0.6), 0 0 16px rgba(255,224,138,0.4); }
.vtree-node.rar-epic .vtree-disc { box-shadow: 0 0 0 2px rgba(201,160,255,0.7), 0 0 20px rgba(201,160,255,0.5); }
.vtree-node.rar-legendary .vtree-disc {
  box-shadow: 0 0 0 2px rgba(255,215,120,0.9), 0 0 26px rgba(255,180,90,0.65);
  animation: legendPulse 1.8s ease-in-out infinite;
}
@keyframes legendPulse {
  50% { box-shadow: 0 0 0 3px rgba(255,235,170,1), 0 0 40px rgba(255,190,110,0.95); }
}
.vtree-node.rar-legendary .vtree-crown { color: #ffe08a; font-size: 18px; text-shadow: 0 0 12px rgba(255,210,120,1), 0 1px 2px rgba(0,0,0,0.9); animation: crownBob 2.2s ease-in-out infinite; }
@keyframes crownBob { 50% { transform: translateY(-2px) scale(1.12); } }
/* badge de rareté dans la fiche détail */
.vtree-detail-rar {
  font-size: 10px; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase;
  padding: 2px 10px; border-radius: 999px; color: #1a1206;
}
.vtree-detail-rar.rar-rare { background: linear-gradient(90deg, #ffe08a, #ffc94a); }
.vtree-detail-rar.rar-epic { background: linear-gradient(90deg, #d6b3ff, #a874ff); color: #150a24; }
.vtree-detail-rar.rar-legendary {
  background: linear-gradient(90deg, #ffd76a, #ff8a2b, #ff5ea0, #7cc4ff, #6affc0);
  background-size: 300% 100%; color: #1a0e02;
  animation: legendSheen 3.5s linear infinite;
  box-shadow: 0 0 14px rgba(255,180,90,0.6);
}
@keyframes legendSheen { to { background-position: 300% 0; } }
#vtree-detail.rar-legendary { border-left-color: #ffb45a; box-shadow: 0 12px 32px rgba(0,0,0,0.42), 0 0 26px rgba(255,180,90,0.28); }
#vtree-detail.rar-epic { border-left-color: #b98cff; }

/* ---- fiche DÉTAIL (texte net) ---- */
#vtree-detail {
  width: min(700px, 96%); min-height: 96px; --dc: #7fb0e6;
  display: flex; align-items: stretch; gap: 16px;
  background: linear-gradient(180deg, rgba(20,30,52,0.92), rgba(12,18,32,0.92));
  border: 1px solid #2a3a5c; border-left: 4px solid var(--dc);
  border-radius: 12px; padding: 13px 17px; text-align: left;
  box-shadow: 0 12px 32px rgba(0,0,0,0.42);
}
#vtree-detail.branch-speed { --dc: #18e0ff; }
#vtree-detail.branch-war   { --dc: #ff3d6e; }
#vtree-detail.branch-trade { --dc: #ffc21e; }
#vtree-detail.branch-base  { --dc: #cddcec; }
.vtree-detail-body { flex: 1 1 auto; min-width: 0; }
/* visuel du navire seul, en activité, calé en bas à droite de la fiche */
.vtree-detail-figure {
  flex: 0 0 auto; margin: 0; align-self: flex-end;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.vtree-detail-ship {
  width: 160px; height: 122px; border-radius: 10px; display: block;
  border: 1px solid #2f456a; background: #0c1626;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.4), 0 0 16px color-mix(in srgb, var(--dc) 22%, transparent);
}
.vtree-detail-figure figcaption {
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: #8aa0b8;
}
.vtree-detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vtree-detail-name { font-size: 18px; font-weight: 800; color: #eaf3ff; letter-spacing: 0.3px; }
.vtree-detail-tier {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  color: #08111e; background: var(--dc); padding: 2px 9px; border-radius: 999px;
}
.vtree-detail-branch { font-size: 11px; font-weight: 700; color: var(--dc); text-transform: uppercase; letter-spacing: 1px; }
.vtree-detail-desc { font-size: 12.5px; color: #aebfd4; line-height: 1.4; margin: 7px 0 9px; }
.vtree-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 2px; }
.vtree-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: #d7e6f5;
  background: rgba(255,255,255,0.05); border: 1px solid #2f456a;
  padding: 3px 10px; border-radius: 999px;
}
.vtree-chip b { color: var(--dc); font-weight: 700; }
.vtree-chip i { color: #fff; font-style: normal; font-weight: 800; }
.vtree-cap { font-size: 12px; font-weight: 700; margin-top: 9px; }
.vtree-cap--cur { color: #ffe08a; }
.vtree-cap--lock { color: #8aa0b8; }
.vtree-capbtn {
  margin-top: 10px; padding: 10px 16px; width: 100%;
  font-size: 13px; font-weight: 800; letter-spacing: 0.4px;
  color: #08111e; background: var(--dc); border: none; border-radius: 9px; cursor: pointer;
  box-shadow: 0 0 20px color-mix(in srgb, var(--dc) 45%, transparent);
  transition: filter 0.12s ease, transform 0.08s ease;
}
.vtree-capbtn:hover { filter: brightness(1.12); }
.vtree-capbtn:active { transform: translateY(1px); }
.vtree-capbtn.is-set { background: transparent; color: var(--dc); border: 2px solid var(--dc); box-shadow: none; }
/* mobile : plein écran opaque (aucune mer visible dessous), entête compacte, consigne
   « Relâchez Y » masquée (ici c'est un toggle tactile) ; l'arbre garde des nœuds cliquables
   (plancher d'échelle) et défile horizontalement. Cible portrait ET paysage court (téléphone). */
@media (max-width: 640px), (max-height: 560px) {
  #gallery-panel {
    padding: 0; max-height: 100vh; max-height: 100dvh;
    justify-content: flex-start; overflow: hidden;
  }
  #gallery-box {
    width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh;
    border-radius: 0; border: 0; gap: 8px;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  #gallery-box h2 { font-size: 19px; letter-spacing: 2px; }
  .gallery-lead { font-size: 11.5px; }
  #gallery-legend { gap: 8px 12px; font-size: 10px; }
  #gallery-codex { font-size: 12px; }
  #vtree-detail { width: 100%; padding: 11px 13px; }
  .vtree-detail-name { font-size: 16px; }
  .vtree-detail-ship { width: 128px; height: 98px; }
  .gallery-foot { display: none; }
}
/* portrait très étroit : la fiche empile le visuel sous le texte (centré) plutôt qu'à côté */
@media (max-width: 460px) {
  #vtree-detail { flex-direction: column; }
  .vtree-detail-figure { align-self: center; }
}

/* ---------- section « BIENTÔT DISPONIBLES » (nouveaux navires teaser) ---------- */
#vsoon {
  width: min(760px, 98%); margin: 6px auto 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  padding-top: 12px; border-top: 1px dashed #2a3a5c;
}
.vsoon-head { text-align: center; }
.vsoon-title {
  display: block; font-size: 13px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: #cde0f2;
}
.vsoon-sub { display: block; font-size: 10.5px; color: #8aa0b8; margin-top: 2px; font-weight: 600; }
.vsoon-row {
  display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px;
  scroll-snap-type: x proximity; justify-content: center; flex-wrap: wrap;
}
.vsoon-row::-webkit-scrollbar { height: 8px; }
.vsoon-row::-webkit-scrollbar-thumb { background: #2f4a6a; border-radius: 4px; }
.vsoon-card {
  --sc: #7fb0e6;
  position: relative; flex: 0 0 auto; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 116px; padding: 8px 8px 9px;
  background: linear-gradient(180deg, rgba(14,22,38,0.92), rgba(9,14,26,0.92));
  border: 1px solid #26344e; border-radius: 12px; cursor: pointer;
  transition: transform 0.1s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.vsoon-card:hover, .vsoon-card:focus-visible {
  transform: translateY(-2px); border-color: var(--sc);
  box-shadow: 0 8px 22px rgba(0,0,0,0.42), 0 0 16px color-mix(in srgb, var(--sc) 40%, transparent);
  outline: none;
}
.vsoon-card.is-sel {
  border-color: var(--sc);
  box-shadow: 0 0 0 1px var(--sc) inset, 0 0 18px color-mix(in srgb, var(--sc) 45%, transparent);
}
.vsoon-canvas {
  width: 104px; height: 82px; border-radius: 8px; display: block;
  border: 1px solid #22304a; background: #0a1a20;
}
.vsoon-badge {
  position: absolute; top: 4px; right: 4px;
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.6px;
  color: #08111e; background: var(--sc);
  padding: 2px 6px; border-radius: 999px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--sc) 55%, transparent);
}
.vsoon-label {
  font-size: 11px; font-weight: 700; color: #dbe7f5; text-align: center; line-height: 1.2;
}
#vsoon-detail {
  --sc: #7fb0e6;
  display: flex; align-items: stretch; gap: 16px;
  background: linear-gradient(180deg, rgba(16,24,42,0.95), rgba(9,14,26,0.95));
  border: 1px solid #2a3a5c; border-left: 4px solid var(--sc);
  border-radius: 12px; padding: 14px 18px; text-align: left;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
#vsoon-detail.hidden { display: none; }
.vsoon-detail-body { flex: 1 1 auto; min-width: 0; }
.vsoon-detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vsoon-detail-name { font-size: 18px; font-weight: 800; color: #eaf3ff; letter-spacing: 0.3px; }
.vsoon-detail-tag {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  color: #08111e; background: var(--sc); padding: 2px 9px; border-radius: 999px;
}
.vsoon-detail-desc { font-size: 12.5px; color: #aebfd4; line-height: 1.45; margin: 8px 0 10px; font-style: italic; }
.vsoon-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.vsoon-feats li {
  display: flex; flex-direction: column; gap: 1px;
  padding-left: 14px; position: relative;
}
.vsoon-feats li::before {
  content: '\203A'; position: absolute; left: 0; top: 0;
  color: var(--sc); font-weight: 900;
}
.vsoon-feats b { font-size: 12px; color: #eaf3ff; font-weight: 800; }
.vsoon-feats span { font-size: 11.5px; color: #9db2c8; line-height: 1.35; }
.vsoon-detail-figure {
  flex: 0 0 auto; margin: 0; align-self: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.vsoon-detail-ship {
  width: 176px; height: 132px; border-radius: 10px; display: block;
  border: 1px solid #22304a; background: #0a1a20;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.45), 0 0 16px color-mix(in srgb, var(--sc) 24%, transparent);
}
.vsoon-detail-figure figcaption {
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: #8aa0b8;
}
@media (max-width: 560px) {
  #vsoon-detail { flex-direction: column; }
  .vsoon-detail-figure { align-self: center; }
  .vsoon-detail-ship { width: 148px; height: 111px; }
}

/* ---------- OFFRE « bateau abandonné » (overlay accepter/refuser) ---------- */
#derelict-offer {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 10, 16, 0.55); backdrop-filter: blur(2px);
  padding: 16px; pointer-events: auto;
}
#derelict-offer.hidden { display: none; }
#derelict-offer .do-box {
  width: min(380px, 94vw); text-align: center;
  background: linear-gradient(180deg, rgba(18,30,34,0.98), rgba(9,16,20,0.98));
  border: 1px solid #2f5a4e; border-top: 4px solid #6affc0;
  border-radius: 16px; padding: 18px 20px 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 26px rgba(106,255,192,0.18);
  animation: doPop 0.22s cubic-bezier(.2,.9,.25,1);
}
@keyframes doPop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.do-kicker {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: #6affc0;
}
.do-title { font-size: 21px; font-weight: 800; color: #eafff6; margin-top: 3px; letter-spacing: 0.3px; }
.do-figure { margin: 10px 0 6px; }
.do-ship {
  width: 240px; max-width: 100%; height: 168px; border-radius: 12px; display: block; margin: 0 auto;
  border: 1px solid #2f5a4e; background: #0a1a20;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.45), 0 0 16px rgba(106,255,192,0.16);
}
.do-desc { font-size: 12.5px; color: #b6c9c2; line-height: 1.42; margin: 6px 2px 10px; }
.do-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 10px; }
.do-chip {
  font-size: 11px; color: #d7f0e7;
  background: rgba(106,255,192,0.08); border: 1px solid #2f5a4e;
  padding: 3px 10px; border-radius: 999px;
}
.do-chip b { color: #6affc0; font-weight: 700; }
.do-note { font-size: 11px; color: #8fb0a6; line-height: 1.35; margin-bottom: 14px; }
.do-actions { display: flex; gap: 10px; }
.do-actions button {
  flex: 1; padding: 12px 10px; font-size: 13.5px; font-weight: 800; letter-spacing: 0.3px;
  border: none; border-radius: 10px; cursor: pointer;
  transition: filter 0.12s ease, transform 0.07s ease;
}
.do-actions button:active { transform: translateY(1px); }
.do-accept {
  color: #06231a; background: #6affc0;
  box-shadow: 0 0 20px rgba(106,255,192,0.4);
}
.do-accept:hover { filter: brightness(1.1); }
.do-refuse {
  color: #cfe0da; background: transparent; border: 1px solid #3d5a52 !important;
}
.do-refuse:hover { background: rgba(255,255,255,0.05); }
@media (max-height: 560px) {
  .do-ship { height: 118px; width: 168px; }
  .do-desc, .do-chips { display: none; }
  #derelict-offer .do-box { padding: 14px 16px; }
}

.hull-state {
  display: inline-block;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: #bcd0dc; background: rgba(159,182,196,0.12);
  padding: 2px 8px; border-radius: 999px;
}
.hull-state.is-current { color: #f0d97a; background: rgba(240,217,122,0.18); }
.hull-state.is-past { color: #9bb0bd; background: rgba(125,148,163,0.12); }
.hull-state.ready { color: #7ad37a; background: rgba(122,211,122,0.18); animation: blink 1.1s ease infinite; }
.hull-state.locked-lvl { color: #f0a94a; background: rgba(224,149,74,0.22); box-shadow: 0 0 0 1px rgba(224,149,74,0.35) inset; animation: lockPulse 1.6s ease-in-out infinite; }
@keyframes lockPulse { 50% { background: rgba(224,149,74,0.4); box-shadow: 0 0 8px rgba(224,149,74,0.5); } }
.hull-bars { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.hull-bar-row {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; color: #bcd0dc;
}
.hull-bar-row > span:first-child { width: 56px; text-align: right; flex: 0 0 56px; font-weight: 600; }
.hull-bar {
  flex: 1; height: 9px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 5px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset;
}
.hull-bar span { display: block; height: 100%; border-radius: 5px; }
.hull-bar-val { flex: 0 0 34px; text-align: left; font-weight: 700; font-size: 10px; }
.hull-extra { font-size: 9.5px; color: #7db9ec; margin-top: 1px; }
.hull-card button {
  margin-top: 4px; padding: 6px 0;
  font-size: 12px; font-weight: 800;
  color: #142430; background: #f0d97a;
  border: none; border-bottom: 3px solid #b89a3a; border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease, border-bottom-width 0.08s ease;
}
.hull-card button:hover { background: #ffe89a; }
.hull-card button:active { transform: translateY(2px); border-bottom-width: 1px; }
.panel-sub {
  font-size: 15px; letter-spacing: 1px; color: #cfdde7;
  margin-top: 8px; text-transform: uppercase;
}

/* cartes de coques + galerie */
#class-cards, #gallery-cards {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  max-width: 1100px;
}
.class-card, .gallery-card {
  background: #1d2c37;
  border: 1px solid #2f4a5a;
  border-radius: 8px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
  text-align: center;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.class-card { width: 220px; }
.gallery-card { width: 220px; }
.class-card:hover { border-color: #5aa9e6; transform: translateY(-2px); }
.class-card canvas, .gallery-card canvas { border-radius: 6px; width: 100%; background: #16242e; }
.class-card h5, .gallery-card h5 { font-size: 15px; }
.gallery-tier {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
  color: #7db9ec;
}
.class-stats { font-size: 11px; color: #cfae5a; line-height: 1.4; }
.class-card p, .gallery-card p { font-size: 11.5px; color: #bcd0dc; line-height: 1.35; }
.class-card button {
  padding: 8px 0;
  font-size: 13px; font-weight: 800;
  color: #142430; background: #f0d97a;
  border: none; border-bottom: 4px solid #b89a3a; border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease, border-bottom-width 0.08s ease;
}
.class-card button:hover { background: #ffe89a; }
.class-card button:active { transform: translateY(3px); border-bottom-width: 1px; }
/* trop cher : bouton éteint, sans halo (contraste avec l'abordable qui « appelle ») */
.class-card button.too-expensive { background: #4a5560; color: #9fb0bd; border-bottom-color: #333c45; }
.class-card button.too-expensive:hover { background: #4a5560; }
.tier-chip {
  display: inline-block;
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  color: #0a1620; background: linear-gradient(90deg, #34e0ff, #4b8dff);
  box-shadow: 0 0 8px rgba(52,224,255,0.45);
  padding: 1px 7px; border-radius: 999px; vertical-align: middle;
}

/* options — grille de CARTES responsive (redesign) */
.opt-lead {
  font-size: 13px; color: #9bb0bd; line-height: 1.45;
  width: min(780px, 92vw); margin: -4px auto 16px; text-align: left;
}
#options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 16px;
  width: min(780px, 92vw);
  text-align: left;
}
.opt-card {
  background: linear-gradient(160deg, rgba(18, 44, 60, 0.92), rgba(10, 28, 40, 0.92));
  border: 1px solid #2f5268; border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.opt-card--wide { grid-column: 1 / -1; }
.opt-card h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: #cfdde7; margin: 12px 0 8px;
  display: flex; align-items: center; gap: 8px;
}
.opt-card h4:first-child { margin-top: 0; }
.opt-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto;
  background: rgba(240, 217, 122, 0.16); color: #f0d97a; font-size: 13px;
}
.opt-card label {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; font-size: 13.5px; margin: 6px 0;
}
/* CURSEURS (volume, sensibilité) : piste dégradée teal→or + pastille ronde nette */
.opt-card label input[type="range"] {
  width: 150px; max-width: 55%; height: 6px; cursor: pointer; margin: 0;
  appearance: none; -webkit-appearance: none;
  background: linear-gradient(90deg, #12b3a6, #f0d97a);
  border-radius: 999px; outline: none;
}
.opt-card label input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #eef2f6; border: 2px solid #f0d97a; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); transition: transform .12s ease;
}
.opt-card label input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.opt-card label input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #eef2f6; border: 2px solid #f0d97a; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.opt-card label input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: transparent; }
.opt-card label input[type="range"]:focus-visible { box-shadow: 0 0 0 3px rgba(240, 217, 122, 0.3); }
/* MENU DÉROULANT (niveau de détail) : caret custom + focus doré */
.opt-card label select {
  max-width: 58%; padding: 6px 28px 6px 10px; border-radius: 8px;
  border: 1px solid #2b566b; background-color: #0f2836; color: #dbe9f1;
  font-size: 13px; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239bb0bd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.opt-card label select:hover { border-color: #5aa9e6; }
.opt-card label select:focus { outline: none; border-color: #f0d97a; box-shadow: 0 0 0 2px rgba(240, 217, 122, 0.25); }
/* CASE À COCHER custom (ex. « Chiffres de dégâts ») : coche nette teal→or */
.opt-card label.chk { justify-content: flex-start; gap: 10px; cursor: pointer; }
.opt-card label.chk input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; position: relative;
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
  background: #0f2836; border: 2px solid #33566b;
  transition: background .15s ease, border-color .15s ease;
}
.opt-card label.chk input[type="checkbox"]:hover { border-color: #5aa9e6; }
.opt-card label.chk input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #12b3a6, #f0d97a); border-color: #f0d97a;
}
.opt-card label.chk input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid #0c1a24; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.opt-card label.chk input[type="checkbox"]:focus-visible { outline: 2px solid #f0d97a; outline-offset: 2px; }
.opt-note { font-size: 11.5px; color: #9bb0bd; margin-top: 8px; }

/* liste des pistes d'ambiance (sélection + extrait ▶) */
.opt-track-list { display: flex; flex-direction: column; gap: 8px; }
/* mode radio actif : la liste devient passive (la piste change toute seule) */
.opt-track-list.is-radio { opacity: 0.5; }
.opt-track {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 10px; cursor: pointer;
  background: #10303f; border: 2px solid #33566b;
  transition: border-color .12s ease, background .12s ease;
}
.opt-track:hover { border-color: #5aa9e6; }
.opt-track.selected { border-color: #f0d97a; background: #163a4b; }
.opt-track-name { font-size: 14px; font-weight: 600; color: #eaf2f7; }
.opt-track.selected .opt-track-name { color: #f0d97a; }

/* MODE RADIO — ligne titre + interrupteur */
.opt-radio-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; margin-bottom: 10px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(18,44,60,0.9), rgba(12,32,44,0.9));
  border: 1px solid #2f5268;
}
.opt-radio-txt { display: flex; flex-direction: column; gap: 1px; }
.opt-radio-txt b { font-size: 14px; color: #eaf2f7; }
.opt-radio-txt small { font-size: 11px; color: #a9bfcc; }
/* interrupteur (switch) à partir d'une checkbox native */
.opt-switch {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto;
  width: 46px; height: 26px; border-radius: 999px; cursor: pointer;
  background: #33566b; border: none; position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: background .18s ease;
}
.opt-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #eef2f6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); transition: transform .18s ease;
}
.opt-switch:checked { background: linear-gradient(90deg, #12b3a6, #f0d97a); }
.opt-switch:checked::after { transform: translateX(20px); }
.opt-switch:focus-visible { outline: 2px solid #f0d97a; outline-offset: 2px; }
#opt-captain { font-size: 13px; color: #cfae5a; }
#missions-list { list-style: none; }
#missions-list li {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; padding: 3px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
#missions-list li.done { color: #7ad37a; }
#flag-swatches, #trail-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 30px; height: 30px;
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  cursor: pointer;
}
.swatch.trail {
  width: auto; padding: 0 10px; height: 28px;
  background: #10303f; color: #cfdde7; font-size: 12px;
}
.swatch.selected { border-color: #f0d97a; box-shadow: 0 0 0 2px rgba(240,217,122,0.4); }
.swatch.locked { opacity: 0.35; cursor: default; }

.btn-secondary {
  padding: 8px 22px;
  font-size: 14px; font-weight: 600;
  color: #eef1fb; background: #363a67;
  border: 1px solid #52568f; border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.btn-secondary:hover { border-color: #5aa9e6; color: #eef2f6; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(90,169,230,0.25); }
.btn-secondary:active { transform: translateY(0); box-shadow: none; }

/* =====================================================================
   BOUTON BOUTIQUE PREMIUM (menu d'accueil) + PANNEAU COSMÉTIQUES
   ===================================================================== */
.btn-premium {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 26px; font-size: 14px; font-weight: 700; letter-spacing: 0.3px;
  color: #f6e9c2; cursor: pointer;
  background: linear-gradient(180deg, rgba(60,44,88,0.95), rgba(38,28,60,0.95));
  border: 1.5px solid rgba(240,217,122,0.55); border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-premium:hover { transform: translateY(-2px); border-color: #ffe98f; box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 0 18px rgba(240,217,122,0.3); }
.btn-premium:active { transform: translateY(0); }
.btn-premium-ic { color: #f0d97a; font-size: 15px; }

/* BOÎTE BOUTIQUE : carte fermée (en-tête FIXE + corps défilant), plus lisible qu'un long
   scroll indifférencié. Le corps #premium-scroll est le seul à défiler. */
#premium-box {
  width: min(800px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(160deg, #17364a, #0f2636);
  border: 1px solid #366079; border-radius: 16px;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.5);
}
#premium-head {
  flex: 0 0 auto; text-align: left;
  padding: 16px 20px 13px;
  border-bottom: 1px solid rgba(120, 170, 200, 0.18);
  background: rgba(255, 255, 255, 0.025);
}
.premium-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#premium-head h2 { font-size: 22px; color: #f0d97a; letter-spacing: 0.5px; }
.premium-lead { font-size: 12.5px; color: #b9c8d3; max-width: 640px; margin: 8px 0 0; line-height: 1.5; }

/* corps défilant */
#premium-scroll {
  flex: 1 1 auto; overflow-y: auto;
  display: flex; flex-direction: column; gap: 22px;
  padding: 16px 18px 18px;
  scrollbar-width: thin; scrollbar-color: rgba(120, 170, 200, 0.35) transparent;
}
#premium-scroll::-webkit-scrollbar { width: 8px; }
#premium-scroll::-webkit-scrollbar-track { background: transparent; }
#premium-scroll::-webkit-scrollbar-thumb { background: rgba(120, 170, 200, 0.3); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
#premium-scroll::-webkit-scrollbar-thumb:hover { background: rgba(150, 190, 215, 0.5); background-clip: padding-box; }

/* ZONES : économie de jeu (XP) vs premium payant (à venir), séparées par un titre à filet */
.shop-zone { display: flex; flex-direction: column; gap: 12px; }
.shop-zone-head { display: flex; align-items: center; gap: 10px; }
.shop-zone-ic { font-size: 15px; color: #f0d97a; }
.shop-zone-head h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 1.2px; color: #eef3f7; }
.shop-zone-head::after { content: ''; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgba(120, 170, 200, 0.3), transparent); }
.shop-zone-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.shop-zone-tag--xp { color: #0c231d; background: linear-gradient(90deg, #8ff0d0, #58c8a6); }
.shop-zone-tag--soon { color: #2c1a06; background: linear-gradient(90deg, #ffe98f, #e8b84a); }

/* CONTENEUR de sous-section boutique (mini-boosts, emojis, skins, traînées, pavillons).
   NB : nom volontairement distinct de « .shop-card » — cette dernière est DÉJÀ utilisée par
   le magasin en jeu (tuile fixe de 118px) ; réutiliser ce nom écrasait la largeur → cartes
   compressées. D'où « .premium-block ». */
.premium-block {
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(120, 170, 200, 0.16);
}
.premium-block-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.premium-block-head h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.8px; color: #cfdde7; margin: 0; }
.premium-flag {
  display: inline-block; margin-top: 10px; padding: 4px 14px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: #2c1a06; background: linear-gradient(90deg, #ffe98f, #e8b84a);
  border-radius: 999px;
}

/* COFFRE DE DÉPART — carte héros animée */
.premium-hero {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 20px; border-radius: 16px;
  background:
    radial-gradient(ellipse at 18% 40%, rgba(240,217,122,0.14), rgba(0,0,0,0) 60%),
    linear-gradient(160deg, rgba(46,36,72,0.95), rgba(20,30,44,0.95));
  border: 1.5px solid rgba(240,217,122,0.4);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.chest-anim {
  position: relative; flex: 0 0 auto; width: 150px; height: 120px;
  display: flex; align-items: center; justify-content: center;
}
.chest-big { width: 130px; height: auto; animation: chestBob 3s ease-in-out infinite; z-index: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.4)); }
.chest-rays {
  position: absolute; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,235,150,0.5) 0%, rgba(255,235,150,0) 62%);
  animation: chestGlow 3s ease-in-out infinite;
}
@keyframes chestGlow { 0%,100% { opacity: 0.55; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.08); } }
.chest-spark {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #fff6c8; box-shadow: 0 0 8px 2px rgba(255,235,150,0.9);
  animation: sparkleTwinkle 2.4s ease-in-out infinite;
}
.chest-spark.cs1 { top: 16%; left: 24%; animation-delay: 0s; }
.chest-spark.cs2 { top: 26%; right: 20%; animation-delay: -0.7s; }
.chest-spark.cs3 { bottom: 26%; left: 18%; animation-delay: -1.3s; }
.chest-spark.cs4 { top: 40%; right: 26%; animation-delay: -1.9s; }
.premium-hero-body { flex: 1 1 300px; text-align: left; }
.premium-hero-body h3 { font-size: 19px; color: #ffe9a8; margin-bottom: 4px; }
.premium-hero-desc { font-size: 13px; color: #b9c8d3; margin-bottom: 8px; }
.premium-perks { list-style: none; display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.premium-perks li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #e7eef3; }
.perk-ic {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #2c1a06;
  background: linear-gradient(180deg, #ffe98f, #e8b84a);
}
.premium-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.premium-buy, .premium-ad {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; font-size: 14px; font-weight: 700; border-radius: 10px;
  border: none; cursor: pointer;
}
.premium-buy { color: #2c1a06; background: linear-gradient(180deg, #ffe98f, #e8b84a); }
.premium-ad { color: #eef2f6; background: #21414f; border: 1px solid #33566b; }
.ad-ic { font-size: 11px; }
/* achats désactivés pour le moment : rendu « verrouillé » non cliquable */
.premium-buy:disabled, .premium-ad:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.3); }
.premium-soon-note { margin-top: 10px; font-size: 11.5px; color: #c99a9a; font-style: italic; }

/* SECTIONS (skins, traînées, pavillons) */
.premium-section { text-align: left; }
.premium-section h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #bcd0dc; margin-bottom: 10px; }
.premium-sub { font-size: 12px; color: #a9bfcc; margin: -6px 0 10px; }

/* ---------- BOUTIQUE — économie d'XP (réserve, mini-boosts, emojis premium) ---------- */
#shop-reserve {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(127, 224, 192, 0.12); border: 1px solid rgba(127, 224, 192, 0.4);
  font-size: 14px; color: #e7f2ee; white-space: nowrap;
}
.shop-reserve-ic { color: #7fe0c0; }
#shop-reserve b { color: #7fe0c0; }
.shop-reserve-rank { font-size: 11px; font-weight: 700; color: #ffe08a; padding: 1px 8px; border-radius: 999px; background: rgba(255,224,138,0.14); }
.shop-tag { font-size: 10px; font-weight: 600; color: #9bb0bd; text-transform: none; letter-spacing: 0; padding-left: 6px; }
.shop-realmoney-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; }
.shop-realmoney-head h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #bcd0dc; }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.shop-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 12px; background: rgba(18, 44, 60, 0.7); border: 1px solid #2f5268;
  cursor: pointer; transition: border-color 0.18s, background 0.18s, transform 0.12s;
}
.shop-item:hover { border-color: #7fe0c0; background: rgba(24, 56, 74, 0.85); transform: translateY(-1px); }
.shop-item-ic { font-size: 22px; flex: 0 0 auto; }
.shop-item-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.shop-item-body b { font-size: 13px; color: #eaf2f7; }
.shop-item-body small { font-size: 11px; color: #bcd0dc; }
.shop-item-price { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #bcd0dd; }
.shop-item-price.ok { color: #7fe0c0; }
.shop-item-price.owned { color: #ffe08a; }
/* NON abordable : grisé, prix en rouge doux (reste SÉLECTIONNABLE pour voir le détail) */
.shop-item.locked { opacity: 0.62; }
.shop-item.locked .shop-item-price { color: #e08a8a; }
/* déjà en réserve (une ou plusieurs unités cumulables) : liseré doré + badge quantité */
.shop-item.owned { border-color: rgba(255,224,138,0.5); background: rgba(60, 52, 20, 0.5); }
.shop-item-qty {
  flex: 0 0 auto; align-self: center; min-width: 24px; padding: 2px 7px; border-radius: 999px;
  background: linear-gradient(90deg, #ffe08a, #f2c04a); color: #4a3208;
  font-size: 12px; font-weight: 800; text-align: center;
}
/* carte SÉLECTIONNÉE (clic) : liseré + halo jaune, prime sur les autres états */
.shop-item.is-selected { border-color: #ffd24a; background: rgba(52, 46, 20, 0.85); box-shadow: 0 0 12px rgba(255,210,74,0.35); }

.shop-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.shop-emoji {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px;
  border-radius: 12px; background: rgba(18, 44, 60, 0.7); border: 1px solid #2f5268; position: relative;
}
.shop-emoji-char { font-size: 26px; line-height: 1; }
.shop-emoji-req { font-size: 10px; color: #bcd0dc; text-align: center; }
.shop-emoji.locked { opacity: 0.45; }
.shop-emoji.locked .shop-emoji-char { filter: grayscale(1); }
.shop-emoji.locked .shop-emoji-req { color: #e0b46a; }
.shop-emoji.is-new { border-color: #ff6b6b; box-shadow: 0 0 10px rgba(255,107,107,0.35); }
.shop-emoji.is-new::after {
  content: 'NOUVEAU'; position: absolute; top: -7px; right: -4px;
  font-size: 8px; font-weight: 800; letter-spacing: 0.4px; color: #fff;
  background: #ff5b5b; padding: 1px 5px; border-radius: 999px;
}

/* roue d'emojis en jeu : entrées verrouillées (grisées) + fraîchement débloquées (halo) */
#emoji-menu button.emoji-locked { opacity: 0.4; filter: grayscale(1); cursor: not-allowed; }
#emoji-menu button.emoji-new { box-shadow: 0 0 0 2px #ff5b5b inset; border-radius: 8px; }

/* PASTILLE « nouvel emoji » : point rouge sur le bouton Boutique (accueil) + slot Emoji + bouton tactile */
.has-new-emoji { position: relative; }
.has-new-emoji::after {
  content: ''; position: absolute; top: -6px; right: -6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #ff5b5b; border: 2px solid #0e2a3c; z-index: 5;
  animation: emojiDotPulse 1.4s ease-in-out infinite;
}
@keyframes emojiDotPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.premium-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.premium-grid--flags { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.premium-trails { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }

.premium-card {
  display: flex; flex-direction: column; gap: 6px; padding: 8px;
  background: rgba(10,26,38,0.6); border: 1px solid #2f5268; border-radius: 12px;
}
.premium-card-prev { position: relative; border-radius: 8px; overflow: hidden; line-height: 0; }
.premium-card-prev canvas, .premium-card-prev .flag-vis { width: 100%; height: auto; display: block; border-radius: 8px; }
.premium-card-prev .premium-flag-vis { height: 54px; }
/* LIBELLÉ de carte (Porter / Équipé / Bientôt / prix) : BANDE lisible en bas de l'aperçu
   (avant : minuscule pastille de coin illisible et compressée). */
.premium-lock {
  position: absolute; left: 5px; right: 5px; bottom: 5px;
  padding: 3px 6px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #2c1a06; background: linear-gradient(90deg, #ffe98f, #e8b84a); border-radius: 6px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.45);
}
.premium-lock.lock-soon { color: #0e1a26; background: linear-gradient(90deg, #aebfce, #6f879b); }
.premium-lock.lock-owned { color: #08301c; background: linear-gradient(90deg, #7ee08a, #3bbd6e); }
.premium-card.is-locked .premium-card-prev { filter: grayscale(0.15) brightness(0.92); }
.premium-card.is-soon .premium-card-prev { filter: grayscale(0.45) brightness(0.8); } /* teaser grisé */
.premium-card-name { font-size: 12.5px; font-weight: 700; color: #eaf1f7; text-align: center; line-height: 1.25; }

/* ANIMATION DE DÉBLOCAGE d'un emoji dans la Boutique : pop de l'emoji + halo doré (joue une fois). */
.shop-emoji.is-new { animation: shopEmojiUnlock 0.9s ease-out both; }
.shop-emoji.is-new .shop-emoji-char { display: inline-block; animation: shopEmojiPop 0.9s ease-out both; }
@keyframes shopEmojiUnlock {
  0%   { box-shadow: 0 0 0 0 rgba(255,210,74,0); border-color: #ffd24a; }
  30%  { box-shadow: 0 0 18px 5px rgba(255,210,74,0.75); border-color: #ffd24a; }
  100% { box-shadow: 0 0 10px rgba(255,107,107,0.35); border-color: #ff6b6b; }
}
@keyframes shopEmojiPop {
  0%   { transform: scale(0.45) rotate(-14deg); opacity: 0.25; }
  55%  { transform: scale(1.4) rotate(7deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* Cartes cliquables de la Boutique : SKINS de navire + DRAPEAUX/ÉQUIPES achetables en XP. */
.shop-skin-card, .shop-flag-card, .shop-trail-card { cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease; }
.shop-skin-card:hover, .shop-flag-card:hover, .shop-trail-card:hover { transform: translateY(-2px); border-color: #57c2f0; }
/* verrouillé (prix > réserve) : grisé mais toujours SÉLECTIONNABLE pour lire le détail */
.premium-card.is-locked { cursor: pointer; }
/* possédé mais NON porté : liseré vert discret */
.premium-card.is-owned { border-color: #3bbd6e; }
.premium-card.is-owned .premium-lock { color: #08301c; background: linear-gradient(90deg, #7ee08a, #3bbd6e); }
/* PORTÉ (équipé) : liseré vert appuyé + pastille dorée « Équipé » */
.premium-card.is-worn { border-color: #3bbd6e; box-shadow: 0 0 0 1px rgba(59,189,110,0.5) inset; }
.premium-card.is-worn .premium-lock { color: #2c1a06; background: linear-gradient(90deg, #ffe98f, #ffd24a); }
/* SÉLECTIONNÉE (clic) : prime sur les autres états */
.premium-card.is-selected { border-color: #ffd24a; box-shadow: 0 0 12px rgba(255,210,74,0.35); }
.premium-card.is-selected .premium-lock { color: #2c1a06; background: linear-gradient(90deg, #ffe98f, #ffd24a); }

/* ---- BARRE D'ACTION de la Boutique (sélection → achat / équipement) ---- */
#shop-action {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; padding: 12px 16px; border-radius: 12px;
  border: 1px solid #2f5268; background: rgba(14, 34, 47, 0.92);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.28);
}
#shop-action.is-empty { opacity: 0.7; }
.shop-action-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.shop-action-info b { font-size: 14px; color: #eaf2f7; }
.shop-action-info small { font-size: 11.5px; color: #bcd0dc; line-height: 1.3; }
.shop-action-btn {
  flex: 0 0 auto; padding: 11px 20px; border-radius: 10px; border: 0; cursor: pointer;
  font-size: 13.5px; font-weight: 800; letter-spacing: 0.3px;
  background: #2f5268; color: #9fb6c4; transition: transform 0.1s ease, filter 0.1s ease;
}
.shop-action-btn:disabled { cursor: not-allowed; opacity: 0.75; }
.shop-action-btn.is-buy { background: linear-gradient(90deg, #ffe08a, #f2b53a); color: #4a3208; }
.shop-action-btn.is-equip { background: linear-gradient(90deg, #7ee08a, #3bbd6e); color: #08301c; }
.shop-action-btn:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.06); }
.shop-action-btn:not(:disabled):active { transform: translateY(0); }
body.vtouch #shop-action { flex-direction: column; align-items: stretch; }
body.vtouch .shop-action-btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .chest-big, .chest-rays, .chest-spark { animation: none !important; }
}

/* =====================================================================
   TUTORIEL « Comment jouer » — panneau à sections illustrées
   ===================================================================== */
/* Boîte du tuto : colonne flex — titre + onglets + bouton Fermer FIXES, seules les sections défilent. */
#tutorial-box {
  width: min(720px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(18, 44, 60, 0.97), rgba(10, 28, 40, 0.97));
  border: 1px solid #2f5268; border-radius: 16px;
  padding: 18px 20px; text-align: left;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
#tutorial-box h2 { text-align: center; flex: 0 0 auto; margin-bottom: 2px; }
.tuto-lead { font-size: 13.5px; color: #cfdde7; text-align: center; margin: 0 0 12px; flex: 0 0 auto; }

/* ONGLETS du tutoriel : Bases / Touches / Mobile / Mécaniques / Astuces */
#tuto-tabs {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  flex: 0 0 auto; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(120, 170, 200, 0.16);
}
.tuto-tab {
  padding: 7px 15px; font-size: 13px; font-weight: 700; cursor: pointer;
  color: #bcd0dc; background: rgba(8, 22, 32, 0.6);
  border: 1px solid #33566b; border-radius: 999px;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.tuto-tab:hover { border-color: #5aa9e6; color: #cfdde7; }
.tuto-tab.selected {
  color: #0c1a24; background: linear-gradient(90deg, #f0d97a, #e0b84a);
  border-color: #f0d97a; box-shadow: 0 2px 10px rgba(240, 217, 122, 0.28);
}

/* ---------- PIED DE PAGE LÉGAL (accueil) + PANNEAU INFORMATIONS LÉGALES ---------- */
.menu-legal-footer {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  /* margin-top:auto → repoussé en bas de #menu (ancré en haut). Se réduit à 0 quand le contenu
     dépasse la fenêtre : le pied suit alors naturellement le contenu (défilement interne). */
  margin: 24px auto 0; margin-top: auto; padding: 6px 16px; max-width: 680px;
  /* Fond sombre translucide : le dégradé d'accueil est clair en haut (rose pâle), donc un
     texte clair sans appui derrière devient illisible. La pastille garantit le contraste
     quel que soit l'endroit du dégradé où le pied de page tombe. */
  background: rgba(8, 22, 32, 0.55); border-radius: 999px;
}
.legal-link {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  font-size: 11.5px; color: #cbd8e2; text-decoration: underline; text-underline-offset: 2px;
  opacity: 0.85; transition: color .12s ease, opacity .12s ease;
}
.legal-link:hover { color: #ffe08a; opacity: 1; }
.legal-sep { color: #7f93a2; font-size: 11px; }

#legal-box {
  width: min(680px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(18, 44, 60, 0.97), rgba(10, 28, 40, 0.97));
  border: 1px solid #2f5268; border-radius: 16px;
  padding: 18px 20px; text-align: left;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
#legal-box h2 { text-align: center; flex: 0 0 auto; margin-bottom: 2px; }
.legal-lead { font-size: 13px; color: #cfdde7; text-align: center; margin: 0 0 12px; flex: 0 0 auto; }
#legal-tabs {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  flex: 0 0 auto; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(120, 170, 200, 0.16);
}
.legal-tab {
  padding: 7px 15px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  color: #bcd0dc; background: rgba(8, 22, 32, 0.6);
  border: 1px solid #33566b; border-radius: 999px;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.legal-tab:hover { border-color: #5aa9e6; color: #cfdde7; }
.legal-tab.selected {
  color: #0c1a24; background: linear-gradient(90deg, #f0d97a, #e0b84a);
  border-color: #f0d97a; box-shadow: 0 2px 10px rgba(240, 217, 122, 0.28);
}
.legal-sections { flex: 1 1 auto; overflow-y: auto; padding-right: 6px; }
.legal-section h4 {
  font-size: 13px; color: #ffe9a8; margin: 14px 0 6px; letter-spacing: 0.2px;
}
.legal-section h4:first-child { margin-top: 0; }
.legal-section p { font-size: 12.5px; line-height: 1.6; color: #cbd8e2; margin: 0 0 10px; }
.legal-section p b { color: #eaf1f7; font-weight: 700; }
.legal-fineprint { font-size: 11px; color: #93a6b3; font-style: italic; }
#btn-close-legal { flex: 0 0 auto; margin-top: 12px; align-self: center; }

/* ---------- écran de scores de foot (menu des matchs) ---------- */
/* AU-DESSUS des contrôles tactiles (#touch-controls z-index:40) : sinon les boutons d'action
   tactiles interceptent les taps et « Fermer » ne répond pas. */
#foot-panel { z-index: 46; padding: 16px; }
/* CARTE : en-tête + onglets fixes, liste défilante */
#foot-box {
  display: flex; flex-direction: column; position: relative;
  width: min(720px, 96vw); max-height: min(88vh, 760px);
  padding: 0; text-align: left; overflow: hidden;
  background: linear-gradient(180deg, #12283a 0%, #0c1a28 100%);
  border: 1px solid #2b5670; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* croix de fermeture (coin haut-droit) — grande cible tactile */
.foot-x {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  width: 38px; height: 38px; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; color: #cfdce6;
  background: rgba(10, 22, 32, 0.85); border: 1px solid #33566b; border-radius: 50%;
  cursor: pointer; transition: color .12s ease, border-color .12s ease, background .12s ease, transform .12s ease;
}
.foot-x:hover { color: #fff; border-color: #7fd0ff; background: rgba(20, 44, 60, 0.95); transform: rotate(90deg); }
/* EN-TÊTE (fixe) : titre + horloge en direct */
#foot-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 18px 60px 12px 20px;
  background: linear-gradient(180deg, rgba(20, 44, 62, 0.55), rgba(20, 44, 62, 0));
}
#foot-head h2 {
  margin: 0; font-size: clamp(16px, 4.4vw, 21px); line-height: 1.15;
  letter-spacing: .3px; color: #eaf3fb;
}
#foot-clock {
  display: inline-flex; align-items: center; gap: 7px;
  font: 800 18px "Consolas", "Segoe UI", monospace; letter-spacing: 1px;
  color: #7fd0ff; background: rgba(6, 16, 26, 0.75);
  border: 1px solid #26506b; border-radius: 999px; padding: 5px 14px;
}
#foot-clock::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #ff5a5a; box-shadow: 0 0 8px #ff5a5a; animation: footPulse 1.1s ease-in-out infinite;
}
#foot-panel .panel-hint { margin: 0; padding: 0 20px 4px; font-size: 12.5px; color: #93aec2; }
/* ONGLETS (fixes) : contrôle segmenté pleine largeur */
#foot-tabs {
  display: flex; gap: 6px; margin: 0; padding: 12px 20px 14px;
  border-bottom: 1px solid rgba(120, 170, 200, 0.14);
}
.foot-tab {
  flex: 1 1 0; min-width: 0; padding: 10px 12px; font-size: 13.5px; font-weight: 700;
  cursor: pointer; color: #bcd0dc; background: rgba(8, 22, 32, 0.55);
  border: 1px solid #2c4d63; border-radius: 10px; text-align: center;
  transition: border-color .12s ease, color .12s ease, background .12s ease, box-shadow .12s ease;
}
.foot-tab:hover { border-color: #5aa9e6; color: #dceaf3; }
.foot-tab.selected {
  color: #08161f; background: linear-gradient(180deg, #8ad6ff, #4aa8e0);
  border-color: #8ad6ff; box-shadow: 0 4px 14px rgba(127, 208, 255, 0.3);
}
/* LISTE (défilante) */
#foot-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
  -webkit-overflow-scrolling: touch;
}
#foot-list::-webkit-scrollbar { width: 8px; }
#foot-list::-webkit-scrollbar-thumb { background: #33566b; border-radius: 4px; }
#foot-list::-webkit-scrollbar-track { background: transparent; }
.foot-row {
  display: grid; align-items: center; gap: 10px 12px;
  grid-template-columns: minmax(120px, 160px) 1fr auto;
  grid-template-areas: "comp teams when";
  background: rgba(9, 22, 32, 0.6); border: 1px solid #274b60;
  border-left: 4px solid #4aa8e0; border-radius: 12px; padding: 12px 14px;
  transition: border-color .12s ease, background .12s ease;
}
.foot-row:hover { border-color: #3f7a9a; background: rgba(14, 32, 46, 0.7); }
.foot-row.is-live { border-left-color: #ff5a5a; background: rgba(42, 14, 16, 0.5); }
.foot-comp { grid-area: comp; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.foot-comp b { font-size: 12.5px; font-weight: 800; color: #d7e6f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot-comp span { font-size: 10.5px; color: #8aa4b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot-teams {
  grid-area: teams;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
}
.foot-h, .foot-a { font-size: 14px; font-weight: 700; color: #eafff2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; min-width: 0; }
.foot-h { justify-content: flex-end; }
.foot-a { justify-content: flex-start; }
.foot-flag { flex: 0 0 auto; width: 22px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.4); box-shadow: 0 0 0 1px rgba(255,255,255,0.07); }
.foot-sc {
  font: 900 18px "Segoe UI", sans-serif; color: #0d1a24;
  min-width: 58px; text-align: center; padding: 4px 10px; border-radius: 8px;
  background: linear-gradient(180deg, #f6df8a, #e4c766);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.foot-row.is-live .foot-sc { color: #fff; background: linear-gradient(180deg, #ff7a7a, #e14b4b); }
.foot-when { grid-area: when; text-align: right; font-size: 11.5px; color: #bcd0dc; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.foot-live {
  font-size: 10px; font-weight: 800; letter-spacing: .4px; color: #fff;
  background: #e23b3b; border-radius: 5px; padding: 2px 7px;
  display: inline-flex; align-items: center; gap: 5px;
}
.foot-live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; animation: footPulse 1.1s ease-in-out infinite;
}
.foot-empty { color: #bcd0dc; font-size: 14px; padding: 32px 12px; text-align: center; }
.foot-status { font-size: 11px; color: #6f8698; margin: 0; padding: 4px 20px 14px; }
#btn-close-foot { margin: 0 20px 18px; align-self: flex-start; }
@keyframes footPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* MOBILE : carte à deux niveaux (compétition + heure en haut, équipes dessous), plein écran */
@media (max-width: 560px) {
  #foot-panel { padding: 0; }
  #foot-box { width: 100vw; max-height: 100vh; height: 100%; border-radius: 0; border: 0; }
  #foot-head { padding: 16px 56px 10px 16px; }
  #foot-panel .panel-hint { padding: 0 16px 4px; font-size: 12px; }
  #foot-tabs { padding: 10px 12px 12px; }
  .foot-tab { padding: 11px 8px; font-size: 13px; }
  #foot-list { padding: 12px; }
  .foot-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "comp when" "teams teams";
    gap: 8px 10px; padding: 12px;
  }
  .foot-comp b { white-space: normal; }
  .foot-teams { gap: 8px; }
  .foot-h, .foot-a { font-size: 14.5px; }
}

/* zone défilante : n'affiche que les sections de l'onglet actif */
.tuto-sections {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 6px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px; align-content: start;
}
.tuto-sections::-webkit-scrollbar { width: 8px; }
.tuto-sections::-webkit-scrollbar-thumb { background: #33566b; border-radius: 4px; }
.tuto-sections::-webkit-scrollbar-track { background: transparent; }
.tuto-section {
  background: rgba(7, 20, 30, 0.5); border: 1px solid #274b60;
  border-left: 4px solid #f0d97a; border-radius: 10px; padding: 12px 14px;
}
.tuto-section h4 {
  font-size: 14px; color: #f0d97a; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.tuto-num {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  background: #f0d97a; color: #142430; font-size: 12px; font-weight: 800;
}
.tuto-section p { font-size: 13px; color: #d6e2ea; line-height: 1.5; }
.tuto-section ul { margin: 0 0 0 16px; font-size: 13px; color: #d6e2ea; line-height: 1.55; }
.tuto-figure {
  background: rgba(7, 20, 30, 0.6); border-radius: 8px; margin-bottom: 10px; padding: 6px;
}
.tuto-figure svg { width: 100%; height: auto; display: block; }
.tuto-keys { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tuto-keys td {
  padding: 4px 6px; border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  color: #d6e2ea; vertical-align: top;
}
.tuto-keys td:last-child { color: #bcd0dc; }
.tuto-section.tuto-tip { border-left-color: #7ad37a; }
.tuto-section.tuto-tip h4 { color: #7ad37a; }
.tuto-section.tuto-tip .tuto-num { background: #7ad37a; }
kbd {
  display: inline-block; padding: 1px 6px; margin: 0 1px;
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  color: #eaf2f7; background: #22323d;
  border: 1px solid #3a5568; border-bottom-width: 2px; border-radius: 5px;
}
#btn-close-tutorial { flex: 0 0 auto; align-self: center; margin: 14px auto 0; }

/* =====================================================================
   CONTRÔLES TACTILES (mobile paysage) — joysticks flottants + boutons
   ===================================================================== */
body.vtouch, body.vtouch #game { touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; }

#touch-controls {
  position: fixed; inset: 0; z-index: 29; /* SOUS les overlays (z-index >= 30) : sinon les
    boutons d'action tactiles interceptent les taps et on ne peut plus fermer une popup */
  pointer-events: none; /* seuls les boutons captent les touchers */
}

/* joystick flottant : positionné en JS au point de contact (left/top), centré via transform */
.tc-stick {
  position: fixed; width: 132px; height: 132px;
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity 0.12s;
  pointer-events: none;
}
.tc-stick.tc-live { opacity: 1; }
.tc-base {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(20, 40, 55, 0.32);
  border: 2px solid rgba(180, 210, 230, 0.45);
}
.tc-knob {
  position: absolute; left: 50%; top: 50%;
  width: 58px; height: 58px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(120, 180, 220, 0.55);
  border: 2px solid rgba(230, 245, 255, 0.7);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
#tc-aim .tc-knob { background: rgba(224, 120, 90, 0.6); border-color: rgba(255, 220, 200, 0.8); }

/* boutons d'action : colonne en bas à droite, au pouce */
#tc-btns {
  position: fixed; right: 14px; bottom: 14px;
  display: flex; flex-direction: column-reverse; gap: 13px;
  pointer-events: none;
}
.tc-btn {
  pointer-events: auto;
  width: 72px; height: 72px; border-radius: 50%; /* -5% (76 → 72) : boutons P / Arme un peu plus compacts */
  background: rgba(20, 40, 55, 0.55);
  border: 2px solid rgba(180, 210, 230, 0.5);
  color: #eaf4fb; font-size: 14px; font-weight: 800;
  letter-spacing: 0.3px;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; user-select: none;
  /* le navigateur ne doit PAS interpréter de geste (scroll/zoom) sur les boutons de jeu : sinon il
     émet un touchcancel pendant un appui multi-doigts (avancer + turbo) qui coupait le turbo. */
  touch-action: none;
}
.tc-btn.tc-on { background: rgba(90, 169, 230, 0.55); border-color: #bfe3ff; transform: scale(0.94); }
/* Turbo = action la plus fréquente au pouce : légèrement plus GROS et teinté or pour se repérer vite. */
#tc-turbo {
  width: 82px; height: 82px; /* -5% (86 → 82) */
  border-color: rgba(255, 215, 94, 0.7); color: #ffe9a8;
  background: rgba(46, 38, 16, 0.6);
}
#tc-emoji { font-size: 26px; }

#tc-hint {
  position: fixed; left: 50%; top: 8px; transform: translateX(-50%);
  pointer-events: none;
  font-size: 11px; color: rgba(230, 244, 251, 0.75);
  background: rgba(10, 25, 35, 0.5); padding: 3px 10px; border-radius: 10px;
  white-space: nowrap;
  animation: tcHintFade 6s ease-out forwards;
}
@keyframes tcHintFade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* invite à passer en PAYSAGE (portrait) */
#rotate-hint {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: #0b1a24; color: #eaf4fb; text-align: center;
}
#rotate-hint .rotate-inner { padding: 24px; max-width: 320px; }
#rotate-hint .rotate-icon { font-size: 52px; margin-bottom: 12px; animation: rotatePulse 1.6s ease-in-out infinite; }
#rotate-hint p { font-size: 16px; line-height: 1.5; }
@keyframes rotatePulse { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

/* =====================================================================
   RESPONSIVE — petite fenêtre en paysage (écran court, y compris desktop réduit)
   ===================================================================== */
@media (max-height: 520px) {
  #coins { font-size: 12px; padding: 3px 9px; top: 8px; }
  #cargo-wrap { top: 12px; transform: translateX(-50%) scale(0.9); transform-origin: top center; }
  #minimap { width: 112px; height: 112px; }
  #xpbar-wrap { width: 300px; bottom: 8px; }
  #shipyard-bar { font-size: 11px; top: 40px; } /* évolution remontée sous la barre de cale même en fenêtre courte */
  #shop-bar { font-size: 11px; top: 96px; }
  #boss-banner, #heli-notice { font-size: 13px; }
  /* Améliorations : compactées + réduites plutôt que scrollées (pas de barre de scroll) */
  #stats-panel { transform: scale(0.8); transform-origin: bottom left; overflow: visible; }
  #fleet-panel { bottom: 278px; transform: scale(0.68); transform-origin: bottom left; }
  /* écran d'accueil : fenêtre très courte (mobile paysage inclus) — tout doit encore tenir sans scroll */
  #menu { padding: 4px 10px; }
  #menu-grid { gap: 8px; }
  #menu-main { gap: 2px; }
  #menu-main, #menu-side { padding: 6px 10px; }
  #menu h1 { font-size: 18px; letter-spacing: 1.5px; gap: 0; }
  #menu h1 span { font-size: 7px; }
  #name-input { padding: 4px 10px; font-size: 13px; }
  #team-card { padding: 5px; gap: 6px; }
  #team-preview { gap: 2px; }
  #team-picker { gap: 3px; }
  #ship-preview { width: 84px; height: 58px; }
  #preview-caption { width: 84px; }
  .team-name { max-width: 84px; font-size: 11px; }
  .team-flag-name { font-size: 10px; }
  #flag-tabs { gap: 4px; }
  .flag-tab { padding: 3px 8px; font-size: 10px; }
  #flag-search { padding: 5px 10px; font-size: 11px; }
  .flag-vis { height: 24px; }
  .flag-nm { padding: 1px 2px; font-size: 7.5px; }
  #flag-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); max-height: 84px; gap: 3px; }
  .mode-row { gap: 6px; }
  .mode-btn { padding: 4px 8px; min-width: 128px; font-size: 11px; }
  .mode-btn small { font-size: 9px; }
  #btn-play, #btn-respawn { padding: 5px 22px; font-size: 12px; }
  .menu-cta-row { gap: 6px; }
  .menu-cta-row .btn-secondary, #btn-install { padding: 4px 14px; font-size: 11px; }
  .menu-card { padding: 5px 8px; }
  .menu-card h3 { font-size: 10px; margin-bottom: 3px; }
  #hs-list { font-size: 9px; max-height: 28px; }
  #mp-status { font-size: 10px; margin-top: 3px; }
}

/* =====================================================================
   ACCUEIL — TÉLÉPHONE TENU EN PAYSAGE (large mais très bas de plafond)
   Le jeu se joue en paysage sur mobile. Or, sous 860px de large, la grille
   d'accueil passe en UNE colonne : la colonne principale (nom, équipe, boutons)
   s'empile AU-DESSUS de la colonne latérale (grade, missions, classement), ce
   qui rend l'écran ~2x trop haut, si bien que « Prendre la mer » et surtout
   « Installer le jeu » tombent sous la ligne de flottaison, invisibles sans
   défiler. Sur un vrai téléphone en paysage (assez large), on rétablit DEUX
   colonnes côte à côte, alignées en haut : la hauteur est divisée par deux et
   les actions principales redeviennent visibles d'emblée. La compaction fine
   des tailles est déjà assurée par les paliers @media (max-height: …) ci-dessus.
   ===================================================================== */
@media (orientation: landscape) and (max-height: 560px) and (min-width: 620px) {
  #menu-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    max-width: 96vw;
  }
  #menu-main, #menu-side { padding: 10px 16px; }
  /* la carte équipe reste en RANGÉE (aperçu à côté du sélecteur) pour limiter la hauteur */
  #team-card { flex-direction: row; align-items: stretch; text-align: left; }
  /* défilement de secours si le contenu dépasse malgré tout la découpe */
  #menu { justify-content: safe center; }
}

/* =====================================================================
   MOBILE TACTILE (body.vtouch) — HUD DÉSENCOMBRÉ
   Le HUD desktop empile 15+ panneaux flottants qui se chevauchent sur un
   téléphone. En tactile on : (1) MASQUE le redondant (chips d'état, coach,
   killfeed, minimap — l'info est déjà portée par les boutons/joysticks) ;
   (2) transforme la barre d'armes en RANGÉE d'icônes compacte en bas-centre ;
   (3) ouvre les gros panneaux Améliorations / Flotte À LA DEMANDE (overlays
   centrés via les bascules ↑ / ⚓), au lieu de les garder affichés en permanence.
   ===================================================================== */

/* non essentiels au pouce : masqués pour libérer l'écran */
body.vtouch #coach,
body.vtouch #weapon-chip,
body.vtouch #killfeed { display: none; }

/* TURBO / BOOST visibles en tactile (compacts, haut-centre) — sans ça « on ne voit pas la barre de
   boost » sur mobile. La jauge turbo ne s'affiche QUE quand elle est pertinente (boost en cours ou
   recharge), pas au repos, pour garder le HUD dégagé ; les bonus actifs (bouclier/boost/parapente)
   restent visibles pendant leur décompte. */
/* JAUGE TURBO (mobile) : descend SOUS la boussole « cale pleine » (elle-même collée sous la barre de
   cale — voir #guide-pointer plus bas). Agrandie et renforcée (font + padding + bordure nette) pour
   être bien LISIBLE sur téléphone — le ruban de remplissage est un dégradé posé en JS. */
body.vtouch #dash-chip {
  display: block; top: 84px; bottom: auto; left: 50%;
  transform: translateX(-50%); transform-origin: top center;
  font-size: 13px; padding: 5px 18px; min-width: 132px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
  z-index: 9;
}
body.vtouch #dash-chip.ready { display: none; } /* au repos : masquée ; réapparaît dès qu'on boost/recharge */
body.vtouch #dash-chip.cooldown { border-color: rgba(255, 255, 255, 0.55); }
body.vtouch #power-chip {
  display: block; top: 112px; bottom: auto; left: 50%;
  transform: translateX(-50%) scale(0.9); transform-origin: top center;
  font-size: 12px; padding: 3px 13px; z-index: 9;
}

/* MINIMAP : en BAS À DROITE en tactile, JUSTE À GAUCHE de la colonne de boutons (Turbo/Arme/P),
   un peu plus grande et CLIQUABLE (carte détaillée). Alignée sur le bas de la colonne de boutons. */
body.vtouch #minimap {
  left: auto; right: 108px; bottom: 14px;
  width: 112px; height: 112px;
  border-width: 1px; opacity: 0.94; z-index: 8;
  pointer-events: auto;
}

/* Compte à rebours miniature : ancrage tactile COMPACT (au-dessus de la mini-carte). Les tailles
   internes sont RÉINITIALISÉES ici — l'agrandissement PC (colonne gauche) ne doit pas déborder du
   petit encart mobile. */
body.vtouch #chest-next {
  top: auto; right: auto; bottom: 130px; left: 8px;
  width: 60px; height: 60px;
  background: rgba(8, 22, 32, 0.55); border: 1px solid #2f4a5c; border-radius: 10px;
}
body.vtouch .chest-next-ring { top: 6px; width: 44px; height: 44px; }
body.vtouch .chest-next-ic { top: 19px; width: 22px; height: 18px; }
body.vtouch .chest-next-time { top: 48px; font-size: 10px; }
/* Coffre PRÊT (mobile) : l'agrandissement PC (50×40, top 14) déborde de l'encart 60×60 et
   chevauche le libellé « PRÊT ». On recentre : icône 32×26 centrée horizontalement (left:50%
   hérité), posée haut, libellé juste dessous → visuel équilibré dans son conteneur. */
body.vtouch #chest-next.chest-ready .chest-next-ic { top: 10px; width: 32px; height: 26px; }
body.vtouch #chest-next.chest-ready .chest-next-time { top: 39px; }
/* infobulle de guidage : même ancrage tactile que #chest-next, plus compacte */
body.vtouch #chest-tip {
  top: auto; right: auto; bottom: 130px; left: 8px;
  max-width: 180px; padding: 8px 10px; font-size: 11px;
}
body.vtouch .chest-tip-ic { width: 18px; height: 15px; }

/* info haute compacte */
/* ARGENT plus GROS, sur la MÊME LIGNE (en haut) que la barre de Cale, juste à sa droite */
body.vtouch #coins { top: 6px; left: calc(50% + 162px); right: auto; transform: none; font-size: 18px; padding: 6px 15px; }
/* CALE (mobile paysage) : VRAIMENT centrée sur l'écran (comme sur PC), largeur bornée pour
   dégager la rangée de boutons compacte à gauche (fin ~242px) et le classement à droite. */
body.vtouch #cargo-wrap {
  top: 6px; left: 50%; right: auto;
  width: auto; max-width: 260px;
  transform: translateX(-50%); position: fixed;
}
body.vtouch #leaderboard { transform: scale(0.84); transform-origin: top right; top: 6px; right: 6px; }
body.vtouch #boss-banner, body.vtouch #heli-notice { top: 116px; right: 6px; width: 208px; font-size: 12px; }
/* Bandeau d'évolution / boutique : COLLÉ en haut, juste sous la rangée de boutons (mobile paysage).
   Remonté de 74→46px pour ne plus flotter au milieu ; garde ~20px d'espacement sous la barre de
   cale (qui, elle, disparaît quand le menu [U] est déplié — voir body.sy-open). */
body.vtouch #shipyard-bar, body.vtouch #shop-bar { top: 46px; font-size: 11px; }

/* Une évolution est en attente (badge « [U] » replié = body.sy-active) : les pastilles TURBO et
   BONUS se recalent SOUS le badge pour ne pas le chevaucher. */
body.vtouch.sy-active #dash-chip { top: 118px; }
body.vtouch.sy-active #power-chip { top: 148px; }
/* Menu [U] DÉPLIÉ (cartes de coques = body.sy-open) : turbo/bonus descendent dans la bande basse
   pour libérer tout le haut d'écran occupé par les cartes. */
body.vtouch.sy-open #dash-chip { top: auto; bottom: 118px; }
body.vtouch.sy-open #power-chip { top: auto; bottom: 94px; }

/* bouton d'installation PWA (menu) : appel à l'action doré, affiché en tactile par js/pwa.js */
#btn-install { border-color: #f0d97a; color: #f0d97a; font-weight: 700; }
#btn-install:hover { border-color: #ffe98f; color: #ffe98f; }
#install-hint { max-width: 280px; color: #cbb46a; }

/* boutons système compacts (haut-gauche) — MÊME gabarit que les bascules pour une rangée alignée */
body.vtouch #btn-options, body.vtouch #btn-quit, body.vtouch #btn-feedback {
  height: 36px; min-height: 36px; width: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; border-radius: 9px; white-space: nowrap; line-height: 0;
}
/* bascules Améliorations (↑) / Flotte (⚓) / Arbre (Y) : visibles UNIQUEMENT en tactile. */
.mob-toggle { display: none; }
#btn-mob-stats { position: relative; }
body.vtouch .mob-toggle {
  display: flex; position: fixed; z-index: 12; top: 6px; pointer-events: auto;
  width: 36px; height: 36px; align-items: center; justify-content: center;
  background: rgba(20,40,55,0.72); border: 1px solid rgba(180,210,230,0.5);
  border-radius: 9px; color: #eaf4fb; font-size: 17px; font-weight: 800; cursor: pointer;
}
/* RANGÉE UNIQUE en haut à gauche, gabarit 36px, pas de 40px (36 + 4 de gouttière), alignée top:6.
   Ordre : Options · Améliorations(↑) · Flotte(⚓) · Arbre(Y) · Idée · Quitter — Flotte/Y/Idée
   viennent juste À GAUCHE de Quitter comme demandé ; chaque bouton a sa marge propre. */
body.vtouch #btn-options   { position: fixed; top: 6px; left: 6px; }
body.vtouch #btn-mob-stats { position: fixed; top: 6px; left: 46px; }
body.vtouch #btn-mob-fleet { position: fixed; top: 6px; left: 86px; }
body.vtouch #btn-mob-tree  { position: fixed; top: 6px; left: 126px; }
body.vtouch #btn-feedback  { position: fixed; top: 6px; left: 166px; z-index: 12; }
body.vtouch #btn-quit      { position: fixed; top: 6px; left: 206px; }
/* AMÉLIORATION DISPONIBLE : la bascule ↑ se met bien en évidence — bordure or, fond doré et
   pulsation lumineuse — pour signaler au joueur qu'il a des points d'amélioration à dépenser. */
body.vtouch #btn-mob-stats.has-pts {
  border-color: #f0d97a; color: #10202c;
  background: linear-gradient(135deg, #f0d97a, #e0b84a);
  animation: mob-stats-pulse 1.3s ease-in-out infinite;
}
@keyframes mob-stats-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(240,217,122,0.55); transform: scale(1); }
  50%      { box-shadow: 0 0 16px 4px rgba(240,217,122,0.9); transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  body.vtouch #btn-mob-stats.has-pts { animation: none; box-shadow: 0 0 12px rgba(240,217,122,0.75); }
}
#mob-stats-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 15px; height: 15px; line-height: 15px; padding: 0 3px;
  border-radius: 8px; background: #f0d97a; color: #10202c;
  font-size: 10px; font-weight: 800; text-align: center;
}
#mob-stats-badge.hidden { display: none; }

/* Pastille de notification « installer la PWA » : petit point rouge pulsé, posé sur les
   boutons Options (HUD + menu) et sur le titre de la carte Application. Attire l'œil vers
   l'installation tant que le jeu n'est pas installé. Pilotée par js/pwa.js (.hidden). */
/* #btn-options est DÉJÀ position:fixed (via #hud > *) : le fixed ancre aussi la pastille absolue,
   donc on ne le repasse PAS en relative (sinon il sortait du flux fixe → désaligné avec quit/son). */
#btn-menu-options, #options-panel .opt-card h4 { position: relative; }
.pwa-badge {
  position: absolute; top: -4px; right: -4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #e5484d; border: 2px solid #10202c;
  box-shadow: 0 0 6px rgba(229,72,77,0.85);
  animation: pwa-badge-pulse 1.6s ease-in-out infinite;
}
.pwa-badge.hidden { display: none; }
@keyframes pwa-badge-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) { .pwa-badge { animation: none; } }

/* barre d'ARMES : DEUX COLONNES d'icônes, en HAUT à gauche SOUS la rangée Options (avec marge). */
body.vtouch #arm-slots {
  left: 6px; right: auto; top: 56px; bottom: auto; transform: none;
  display: grid; grid-template-columns: repeat(2, auto); gap: 6px; pointer-events: auto;
}

/* bouton d'INTERACTION CONTEXTUELLE : pastille purement VISUELLE (icône seule — ☀/☾/⚽/⚑ —
   sans libellé texte). Actif sur TOUTE plateforme (mobile ET PC) : sur mobile il est placé à
   côté du bouton P (#tc-action) ; sur PC (pas de barre de contrôles tactiles) il flotte en bas
   à droite de l'écran. */
#tc-context {
  display: none; align-items: center; justify-content: center;
  position: fixed; z-index: 22; border-radius: 50%;
  font-size: 26px; font-weight: 800; color: #0c1a24; line-height: 1;
  background: linear-gradient(135deg, #f0d97a, #e0b84a);
  border: 2px solid #fff0b0;
  box-shadow: 0 4px 16px rgba(240, 217, 122, 0.5); pointer-events: auto; cursor: pointer;
  animation: ctxpulse 1.1s ease-in-out infinite;
}
#tc-context.hidden { display: none; }
/* PC : bouton flottant en bas à droite de l'écran */
body:not(.vtouch) #tc-context {
  display: flex; right: 24px; bottom: 24px; width: 60px; height: 60px;
}
/* Mobile : à côté du bouton P, dans la colonne de contrôles tactiles */
body.vtouch #tc-context {
  display: flex; left: auto; right: 96px; bottom: 165px; width: 56px; height: 56px; font-size: 24px;
}
@keyframes ctxpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* bouton P mis en SURBRILLANCE quand on peut accoster/interagir */
.tc-btn.tc-hot {
  background: rgba(240, 217, 122, 0.75); border-color: #fff0b0; color: #0c1a24;
  box-shadow: 0 0 16px rgba(240, 217, 122, 0.7); animation: hotpulse 1.1s ease-in-out infinite;
}
@keyframes hotpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }
/* l'emoji est déjà dans la barre d'armes → on retire le bouton emoji EN DOUBLE à droite */
body.vtouch #tc-emoji { display: none; }
/* sur mobile, le son se règle dans OPTIONS (sliders) → plus de bouton son sur le HUD */
body.vtouch #btn-mute { display: none; }

/* croix de fermeture générique en haut-droite de tout overlay-panneau */
.panel-x {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 40px; height: 40px; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; color: #cfdce6;
  background: rgba(12, 24, 34, 0.9); border: 1px solid #33566b; border-radius: 50%;
  cursor: pointer; transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.panel-x:hover { color: #fff; border-color: #7fd0ff; background: rgba(20, 44, 60, 0.95); }
body.vtouch #arm-slots .arm-lbl, body.vtouch #arm-slots .arm-n { display: none; }
body.vtouch .arm-slot { width: 44px; height: 44px; padding: 0; flex-direction: row; justify-content: center; }
body.vtouch #arm-tip { display: none; }

body.vtouch #xpbar-wrap { width: min(300px, 68vw); bottom: 6px; }

/* gros PANNEAUX interactifs : masqués par défaut, ouverts À LA DEMANDE en overlay centré.
   Fermés, ils sont pointer-events:none (le joystick passe par-dessus). */
body.vtouch #stats-panel, body.vtouch #fleet-panel { display: none; pointer-events: none; }
body.vtouch.mob-stats-open #stats-panel,
body.vtouch.mob-fleet-open #fleet-panel {
  display: block; pointer-events: auto;
  left: 50%; top: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  width: min(420px, 94vw); max-height: 86vh;
  padding: 22px 20px 18px;
  /* overflow VISIBLE sur le panneau (sinon il rogne le badge « xN » qui déborde en haut-droite) :
     le scroll se fait sur la liste interne (#stats-list / #fleet-list) plus bas. */
  overflow: visible;
  z-index: 60; box-shadow: 0 12px 44px rgba(0,0,0,0.62);
  font-size: 1.18em; /* popup agrandie : lignes et libellés plus lisibles au doigt */
}
/* flou d'arrière-plan derrière le panneau Améliorations ouvert : assombrit + floute la scène
   de jeu, sans DOM ajouté (pseudo-élément plein écran, sous le panneau dans l'empilement). */
body.vtouch.mob-stats-open::before {
  content: ''; position: fixed; inset: 0;
  background: rgba(4, 12, 18, 0.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 59;
}
body.vtouch.mob-stats-open #stats-panel h3,
body.vtouch.mob-fleet-open #fleet-panel h3 {
  font-size: 1.05em; margin-bottom: 12px;
}
body.vtouch.mob-fleet-open #fleet-list {
  max-height: 68vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* Améliorations : panneau ÉLARGI + compteur juste à côté du titre + liste en 2 colonnes,
   pour que les 8 lignes tiennent sans scroll interne (y compris en paysage mobile, où la
   hauteur de viewport est réduite). */
body.vtouch.mob-stats-open #stats-panel {
  width: min(680px, 97vw);
}
body.vtouch.mob-stats-open #stats-panel h3 {
  display: flex; align-items: baseline; gap: 8px;
}
body.vtouch.mob-stats-open #stats-panel h3 span {
  float: none; margin-left: 0;
}
body.vtouch.mob-stats-open #stats-list {
  max-height: none; overflow: visible;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px;
}
body.vtouch.mob-stats-open #stats-panel .stat-row {
  margin: 0;
}
body.vtouch.mob-stats-open #stats-panel .stat-bar { height: 34px; }
body.vtouch.mob-stats-open #stats-panel .stat-name { height: 34px; line-height: 34px; font-size: 14.5px; }
body.vtouch.mob-stats-open #stats-panel .stat-plus { flex-basis: 34px; width: 34px; height: 34px; font-size: 21px; }
/* badge « xN » : le panneau élargi (jusqu'à 97vw) place son bord droit tout près de l'écran ;
   `right: -14px` (valeur PC) le faisait alors déborder hors zone visible — on le ramène DANS le panneau. */
body.vtouch.mob-stats-open #stat-pts-badge {
  right: 4px; top: -12px;
  font-size: 26px;
}

/* croix de fermeture légère, propre aux popups mobiles Améliorations / Flotte
   (pas affichée en desktop : là, ce sont des panneaux persistants, pas des popups) */
.mob-panel-close { display: none; }
body.vtouch.mob-stats-open #stats-panel .mob-panel-close,
body.vtouch.mob-fleet-open #fleet-panel .mob-panel-close {
  display: flex; position: absolute; top: 8px; right: 8px; z-index: 15;
  width: 26px; height: 26px; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; color: rgba(207, 221, 231, 0.55);
  background: transparent; border: none; cursor: pointer;
}
.mob-panel-close:hover { color: #fff; }

/* POPUPS/overlays tactiles : scrollables et cibles de tap plus grandes */
/* TOUTES les popups plein écran mobile (.overlay.panel = conteneur position:fixed inset:0 qui
   sert de backdrop ET centre sa carte) : elles doivent couvrir TOUT l'écran. L'ancien
   `max-height: 94vh` clampait ce conteneur à 94 % → une bande d'~6vh du jeu/de l'accueil
   restait visible en bas de CHAQUE popup (Améliorations, Classe, Galerie, Foot, Mentions,
   Quêtes, Feedback, Options, Comment jouer, Boutique). On remet la hauteur pleine ; le
   défilement interne gère les cartes plus hautes que l'écran, et `safe center` garde la carte
   centrée quand elle tient mais l'aligne en haut (sans rogner) quand elle dépasse. */
body.vtouch .overlay.panel {
  height: 100vh; height: 100dvh; max-height: none;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  justify-content: safe center;
}
body.vtouch .overlay .btn-secondary, body.vtouch .overlay button { min-height: 40px; }
body.vtouch #menu-main button, body.vtouch #menu-side button { min-height: 44px; }

/* INSTALLER LA PWA — mise en avant sur mobile.
   Le bouton d'installation vit tout en bas de la colonne principale (après la boutique,
   les options, etc.) : sur un téléphone en paysage il tombait sous la ligne de flottaison,
   d'où l'impression que « le jeu ne propose jamais d'installer la PWA ». Sur appareil
   tactile, on le fait remonter JUSTE SOUS « Prendre la mer » (via flex order, #menu-main
   étant une colonne flex) et on lui donne l'accent doré pour qu'il soit vu d'emblée. */
body.vtouch #btn-install:not(.hidden) {
  order: 1;
  background: rgba(240, 217, 122, 0.12);
}
body.vtouch #install-hint:not(.hidden) { order: 1; }
body.vtouch #btn-premium { order: 2; }
body.vtouch .menu-cta-row { order: 3; }
body.vtouch #mp-status { order: 4; }

/* ==========================================================================
   DIDACTICIEL & ORIENTATION (js/onboarding.js) — overlays HUD non bloquants
   ========================================================================== */

/* Bulle du fil guidé de première partie : carte centrée en haut, discrète mais lisible. */
/* Carte du didacticiel façon « Coupe du Monde » : pelouse verte fondue vers le marine du jeu,
   emblème TROPHÉE doré, fanion doré (guirlande de stade) sur le bord haut, chip d'étape en pastille
   dorée. Décor 100 % CSS/SVG, aucune couleur de gameplay touchée. */
#onboard-tip {
  position: fixed;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 26;
  width: min(93vw, 488px);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px 13px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(24, 96, 66, 0.55) 0%, rgba(24, 96, 66, 0) 42%),
    linear-gradient(135deg, rgba(14, 74, 54, 0.97) 0%, rgba(11, 44, 66, 0.97) 54%, rgba(7, 26, 40, 0.98) 100%);
  border: 2px solid rgba(240, 217, 122, 0.5);
  border-radius: 15px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: #eef6f1;
  animation: onboardIn 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.15), onboardGlow 2.4s ease-in-out 0.4s infinite;
  pointer-events: auto;
  overflow: hidden;
}
/* fanion doré : guirlande triangulaire de stade le long du bord supérieur */
#onboard-tip::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 9px;
  background:
    linear-gradient(180deg, rgba(240, 217, 122, 0.95), rgba(212, 168, 66, 0.95)),
    #d4a842;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 6px);
          mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 6px);
  opacity: 0.9;
}
#onboard-tip.hidden { display: none; }
@keyframes onboardIn {
  from { opacity: 0; transform: translate(-50%, -10px) scale(0.98); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
/* halo doré pulsé en continu : la carte reste visible au premier coup d'œil malgré un fond de
   jeu chargé (mer/îles), sans être agressif au point de gêner la lecture du texte. */
@keyframes onboardGlow {
  0%, 100% {
    border-color: rgba(240, 217, 122, 0.5);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 rgba(255, 224, 130, 0);
  }
  50% {
    border-color: rgba(255, 226, 140, 0.95);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 28px 5px rgba(255, 216, 110, 0.55);
  }
}

/* emblème TROPHÉE sur médaille dorée */
#onboard-tip .ob-emblem {
  flex: 0 0 auto;
  margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffeeb0 0%, #f2cd63 52%, #c99a34 100%);
  color: #3a2c08;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.42), inset 0 1px 2px rgba(255, 255, 255, 0.75),
              0 0 0 3px rgba(240, 217, 122, 0.16);
}

/* corps : ligne « étape + OK » puis texte pleine largeur (moins de retours = carte compacte) */
#onboard-tip .ob-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
#onboard-tip .ob-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#onboard-tip .ob-step {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #1a2733;
  background: linear-gradient(90deg, #ffe490, #f0c256);
  padding: 2px 10px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#onboard-tip .ob-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.36;
  font-weight: 500;
  color: #eef6f1;
}
#onboard-tip .ob-ok {
  flex: 0 0 auto;
  padding: 5px 18px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #1a2733;
  background: linear-gradient(180deg, #ffe490, #f0c256);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
}
#onboard-tip .ob-ok:hover { background: linear-gradient(180deg, #fff0b0, #ffd873); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); }
#onboard-tip .ob-ok:active { transform: scale(0.95); }

/* Le didacticiel s'efface tant qu'un bandeau d'évolution est présent (badge « [U] » OU cartes) :
   la proposition d'évolution est prioritaire et cela évite tout empilement au centre-haut. */
body.sy-active #onboard-tip { display: none; }

/* La ligne "coach" (astuce tournante) fait doublon avec la carte du didacticiel : masquée tant
   que celle-ci est affichée pour ne pas surcharger l'écran de deux messages superposés. */
body.ob-tip #coach { display: none; }
/* AUDIT anti-chevauchement des notifs transitoires : elles s'effacent aussi pendant une bulle de
   didacticiel (mission éclair + bulle de quête) ET pendant le CHOIX d'une évolution (cartes de
   coques dépliées = sy-open) — plus rien ne se superpose au message prioritaire du moment. */
body.ob-tip #flash-mission, body.ob-tip #quest-bubble { display: none; }
body.sy-open #coach, body.sy-open #flash-mission, body.sy-open #quest-chip, body.sy-open #quest-bubble { display: none; }

/* Boussole directionnelle : pointe le comptoir (cale pleine) ou le chantier (évolution). RÉUNIE
   avec la barre de cale (#cargo-wrap) juste au-dessus : gap resserré + même famille visuelle
   (fond/bordure proches, coins arrondis en rectangle plutôt qu'en pill) → se lit comme UN SEUL
   bloc « statut de cale », pas deux éléments flottants indépendants. */
#guide-pointer {
  position: fixed;
  top: 38px; /* resserré contre #cargo-wrap (16px + ~18px de barre) pour lire comme un bloc uni */
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  background: rgba(9, 24, 34, 0.9);
  border: 1px solid rgba(122, 180, 220, 0.35);
  border-radius: 12px; /* rectangle arrondi (plus un pill) : lecture « prolongement » de la cale */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  color: #cfe0ee;
  font-size: 13px;
  font-weight: 600;
  /* LARGEUR AUTO-ADAPTÉE À L'ÉCRAN : réserve TOUJOURS l'espace du classement (#leaderboard, coin
     haut-droit, ~264px + marges) quelle que soit la taille de fenêtre → le texte passe tout seul
     sur plusieurs lignes au lieu de chevaucher le scoreboard (fini le débordement une seule ligne). */
  max-width: clamp(200px, calc(100vw - 680px), 420px);
  white-space: normal;
  line-height: 1.32;
  text-align: left;
}
#guide-pointer.hidden { display: none; }
/* Quand la carte du didacticiel est RÉELLEMENT affichée (body.ob-tip, posé par js/onboarding.js,
   et carte non masquée par un bandeau d'évolution → :not(.sy-active)), la boussole se cale SOUS elle
   pour ne jamais la chevaucher (l'étape « vendre » affiche les deux ensemble). */
body.ob-tip:not(.sy-active) #guide-pointer { top: 168px; }
#guide-pointer .gp-arrowwrap {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(122, 180, 220, 0.18);
  color: #7ab4dc;
}
/* le libellé peut désormais faire plusieurs lignes (voir #guide-pointer.white-space:normal) :
   flex 1 pour occuper l'espace restant + min-width:0 pour autoriser le retour à la ligne dans
   un conteneur flex (sinon le texte déborderait au lieu de se replier). */
.gp-label { flex: 1 1 auto; min-width: 0; }
/* rotation AUTOUR DU CENTRE de la flèche (JS pose transform:rotate() vers le comptoir) : sans
   transform-origin explicite, certains navigateurs pivotent le SVG autour d'un coin → flèche qui
   part de travers au lieu de pointer la cible. On fixe le centre pour une flèche vraiment dynamique. */
#guide-pointer .gp-ic { display: block; transform-origin: 50% 50%; transform-box: fill-box; transition: transform 0.12s linear; }
/* état « action prioritaire » (cale pleine → vendre) : accent doré + EFFET LÉGER pour attirer
   l'attention (pulsation du halo + très léger « souffle » d'échelle — reste discret, pas criard). */
#guide-pointer.act {
  border-color: rgba(255, 215, 94, 0.6);
  color: #ffe9a8;
  animation: guidePulse 1.3s ease-in-out infinite, gpBreathe 2.6s ease-in-out infinite;
}
#guide-pointer.act .gp-arrowwrap { background: rgba(255, 215, 94, 0.2); color: #ffd75e; }
@keyframes guidePulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
  50%      { box-shadow: 0 6px 22px rgba(255, 215, 94, 0.4), 0 0 14px rgba(255, 215, 94, 0.28); }
}
/* souffle d'échelle très subtil (1 → 1.015) : translateX(-50%) est repris dans le keyframe pour
   ne pas perdre le centrage horizontal pendant l'animation (elle remplace la transform statique). */
@keyframes gpBreathe {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.015); }
}

/* Surbrillance d'un élément du HUD ciblé par une étape (cale, jauge de turbo…) */
.onboard-focus {
  outline: 2px solid #ffd75e !important;
  outline-offset: 3px;
  border-radius: 8px;
  animation: onboardFocus 1.2s ease-in-out infinite;
}
@keyframes onboardFocus {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 94, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 215, 94, 0); }
}

/* ------------------------------------------------------------------
   SPOTLIGHT « première fois » (js/onboarding.js)
   Le trou lumineux est positionné en JS sur la zone à mettre en avant.
   Le box-shadow géant assombrit TOUT le reste de l'écran ; pointer-events:none
   laisse le clic atteindre la cible (bandeau de coques, coffre, chip turbo…).
   ------------------------------------------------------------------ */
#ob-spotlight {
  position: fixed;
  z-index: 150;
  pointer-events: none;
  border-radius: 12px;
  box-shadow:
    0 0 0 9999px rgba(6, 16, 26, 0.52),
    0 0 0 3px rgba(240, 217, 122, 0.95),
    0 0 26px 6px rgba(240, 217, 122, 0.45);
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}
#ob-spotlight.hidden { display: none; }

#ob-arrow {
  position: fixed;
  z-index: 152;
  color: #ffd75e;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.85));
  animation: obArrowBounce 0.9s ease-in-out infinite;
}
#ob-arrow svg { display: block; }
/* variante « la cible est SOUS la flèche » (flèche au-dessus, pointe vers le bas) : défaut.
   Quand la cible est en HAUT d'écran, on retourne la flèche (pointe vers le haut) via .up. */
#ob-arrow.up { transform: scaleY(-1); }
@keyframes obArrowBounce {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 13px; }
}

/* Bouton « J'ai compris » du spotlight : ferme l'aide sur validation explicite du joueur.
   Le spotlight parent est en pointer-events:none → on réactive le clic sur ce bouton seul. */
#ob-got-it {
  position: fixed;
  z-index: 153;
  transform: translateX(-50%);
  pointer-events: auto;
  cursor: pointer;
  padding: 8px 18px;
  font: 600 13px/1 inherit;
  color: #f6e9c2;
  background: linear-gradient(180deg, rgba(60, 44, 88, 0.95), rgba(38, 28, 60, 0.95));
  border: 1px solid rgba(240, 217, 122, 0.55);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transition: background 0.15s ease, transform 0.05s ease;
}
#ob-got-it:hover { background: linear-gradient(180deg, rgba(74, 55, 106, 0.98), rgba(48, 35, 74, 0.98)); }
#ob-got-it:active { transform: translateX(-50%) translateY(1px); }

/* Texte explicatif du spotlight didacticiel (flèche + texte + bouton). Purement informatif, non bloquant. */
#ob-spot-text {
  position: fixed;
  z-index: 153;
  transform: translateX(-50%);
  pointer-events: none;
  max-width: min(300px, 82vw);
  padding: 9px 14px;
  font: 600 13px/1.35 inherit;
  color: #f6e9c2;
  text-align: center;
  background: linear-gradient(180deg, rgba(28, 40, 58, 0.96), rgba(18, 28, 44, 0.96));
  border: 1px solid rgba(240, 217, 122, 0.5);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
#ob-spot-text.hidden { display: none; }

/* CADRE de PROTECTION provisoire : liseré cyan pulsant au contour de l'écran pendant l'immunité
   didacticielle (15 s). Non bloquant. */
#ob-shield-frame {
  position: fixed;
  inset: 0;
  z-index: 148;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 4px rgba(120, 210, 255, 0.9),
    inset 0 0 46px 10px rgba(120, 210, 255, 0.32);
  animation: obShieldPulse 1.4s ease-in-out infinite;
}
#ob-shield-frame.hidden { display: none; }
@keyframes obShieldPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* Ligne d'actions du panneau « Comment jouer » (relancer le tuto / fermer) */
#tutorial-panel .tuto-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
#tutorial-panel .tuto-actions .btn-secondary {
  flex: 0 0 auto; padding: 8px 18px; font-size: 12.5px; min-height: 0;
}
/* « Fermer » = action principale du panneau : léger accent doré pour la hiérarchiser */
#tutorial-panel .tuto-actions #btn-close-tutorial {
  color: #f6e9c2; border-color: rgba(240,217,122,0.55);
  background: linear-gradient(180deg, rgba(60,44,88,0.9), rgba(38,28,60,0.9));
}

/* MOBILE (paysage) : la carte descend sous la rangée de compteurs du haut et la boussole se cale
   sous elle (via body.ob-tip) pour ne rien masquer ni gêner les joysticks du bas. */
body.vtouch #onboard-tip { top: 54px; width: min(88vw, 430px); }
/* Boussole « cale pleine » (mobile) : COLLÉE juste sous la barre de cale (top 6px + ~30px), AU-DESSUS
   de la jauge turbo, et forcée sur UNE SEULE LIGNE (libellé court côté JS, cf. onboarding.js). */
body.vtouch #guide-pointer {
  top: 40px;
  max-width: none;
  white-space: nowrap;
  padding: 4px 12px 4px 6px;
  font-size: 12px;
}
/* Évolution en attente (badge « [U] » à top 46px) : la boussole passe SOUS lui pour ne pas le masquer. */
body.vtouch.sy-active #guide-pointer { top: 78px; }
body.vtouch.ob-tip:not(.sy-active) #guide-pointer { top: 156px; }

/* ---- Bandeau d'évolution : état REPLIÉ (badge « [U] ») vs DÉPLIÉ (cartes de coques) ---- */
#shipyard-bar .sy-collapsed { display: none; }
#shipyard-bar.collapsed .sy-full { display: none; }
#shipyard-bar.collapsed .sy-collapsed { display: inline-flex; }
.sy-collapsed {
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(12, 32, 45, 0.94);
  border: 2px solid #f0d97a;
  border-radius: 999px;
  color: #f4ecd6;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  animation: syCollapsedPulse 1.5s ease-in-out infinite;
}
.sy-collapsed-ic { display: flex; color: #f0d97a; }
.sy-collapsed-n {
  background: #f0d97a; color: #1a2733;
  border-radius: 999px; padding: 0 7px;
  font-size: 12px; font-weight: 800;
}
.sy-collapsed-key {
  border: 1px solid rgba(244, 236, 214, 0.5);
  border-radius: 5px; padding: 1px 6px;
  font-size: 11px; color: #cfdde7;
}
@keyframes syCollapsedPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
  50%      { box-shadow: 0 4px 20px rgba(240, 217, 122, 0.55); }
}

/* =====================================================================
   ÉCRAN D'INSTALLATION (#install-gate) — navigateur mobile, HORS PWA.
   Plein écran, bloque le jeu ; invite propre à installer / ouvrir l'app.
   Reprend la charte « coucher de soleil » de l'accueil. Piloté par js/pwa.js.
   ===================================================================== */
#install-gate {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: safe center;
  padding: calc(24px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background-color: #8a6f9e;
  background-image: linear-gradient(180deg, #ffd7e6 0%, #ffc2cf 20%, #ffb0a6 40%, #f5989f 58%, #cf88a8 76%, #8a6f9e 100%);
}
#install-gate.hidden { display: none !important; }

#install-gate .ig-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ig-sun {
  position: absolute; right: 12%; bottom: 22%; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, #fff2d9 0%, #ffe6c2 42%, rgba(255, 217, 168, 0) 72%);
}
.ig-wave { position: absolute; left: -12%; right: -12%; height: 70px; border-radius: 50%; }
.ig-wave-1 { bottom: -34px; background: #c98aa6; opacity: 0.5; }
.ig-wave-2 { bottom: -52px; background: #7d6394; opacity: 0.6; }

.ig-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  padding: 26px 22px 24px;
  background: rgba(20, 24, 46, 0.9);
  border: 1px solid #46487a; border-radius: 18px;
  box-shadow: 0 18px 50px rgba(20, 8, 30, 0.5);
  color: #eef1fb;
}
.ig-logo {
  display: flex; flex-direction: column; gap: 6px; line-height: 1;
  font-size: 34px; font-weight: 900; letter-spacing: 4px; color: #f2f5f7;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
.ig-logo span { font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #8fa6b4; }
.ig-art { margin: 2px 0; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35)); animation: igBob 3s ease-in-out infinite; }
@keyframes igBob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
.ig-title { font-size: 21px; font-weight: 800; color: #fff3e9; letter-spacing: 0.3px; }
.ig-sub { font-size: 14px; line-height: 1.55; color: #c7d3e0; max-width: 340px; }
.ig-sub b { color: #ffe08a; }
.ig-perks {
  list-style: none; margin: 2px auto 4px; padding: 0;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  font-size: 13.5px; color: #dbe6f0;
}
.ig-perks li { display: flex; align-items: center; gap: 9px; }
.ig-tick {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 20px; height: 20px; border-radius: 50%;
  background: #2f8f5b; color: #fff; font-size: 12px; font-weight: 900;
}
.ig-btn {
  width: 100%; max-width: 320px; padding: 15px 24px;
  font-family: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  font-size: 17px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: #fff3e9; background: #f0512e;
  border: none; border-bottom: 5px solid #a8331a; border-radius: 10px;
  cursor: pointer; transition: background 0.12s, transform 0.08s, border-width 0.08s;
}
.ig-btn:active { transform: translateY(3px); border-bottom-width: 2px; }
.ig-btn--open { background: #2f8f5b; border-bottom-color: #1e6a41; }
.ig-hint {
  font-size: 13px; line-height: 1.5; color: #ffe0b0; max-width: 340px;
  background: rgba(255, 224, 138, 0.1); border: 1px solid rgba(255, 224, 138, 0.3);
  border-radius: 10px; padding: 10px 14px;
}
.ig-installed { font-size: 13px; color: #bcd0dc; }

/* paysage bas de plafond (téléphone couché sur l'écran d'install) : compacter pour tenir */
@media (max-height: 520px) {
  #install-gate { padding: 14px 16px; }
  .ig-card { padding: 16px 18px; gap: 8px; max-width: 480px; }
  .ig-art { display: none; }
  .ig-logo { font-size: 26px; }
  .ig-title { font-size: 18px; }
  .ig-sub { font-size: 12.5px; }
  .ig-perks { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 12px; }
  .ig-btn { padding: 12px 20px; font-size: 15px; }
}

/* =====================================================================
   ACCUEIL RESPONSIVE — TÉLÉPHONE (portrait & petits écrans).
   Depuis que la PWA n'est plus verrouillée en paysage (manifest orientation
   « any »), l'accueil s'affiche AUSSI en portrait : cette section en fait une
   colonne unique propre, défilable, avec des cibles tactiles confortables et
   un aperçu de navire fluide. Placée en fin de feuille pour primer la cascade.
   ===================================================================== */
@media (max-width: 620px) {
  #menu {
    padding: calc(18px + env(safe-area-inset-top)) 12px calc(20px + env(safe-area-inset-bottom));
    justify-content: safe start;
  }
  #menu-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 460px; gap: 14px; align-items: stretch; margin: 0 auto;
  }
  /* min-width:0 : sans ca, un enfant a large contenu intrinseque (bande de succes qui
     defile) gonfle la colonne 1fr BIEN au-dela de l ecran -> menu debordant. */
  #menu-main, #menu-side { padding: 16px 15px; min-width: 0; }
  #menu-main > *, #menu-side > *, .menu-side-actions > * { min-width: 0; max-width: 100%; }
  #menu-main { gap: 12px; }

  /* titre : lisible sans écraser la hauteur */
  #menu h1 { font-size: 38px; letter-spacing: 4px; }
  #menu h1 span { font-size: 10px; letter-spacing: 2px; }
  .menu-teaser { font-size: 12px; }

  /* carte ÉQUIPE empilée + aperçu de navire FLUIDE (canvas mis à l'échelle par CSS) */
  #team-card { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  #team-preview { width: 100%; align-items: center; }
  #ship-preview {
    width: min(74vw, 260px); height: auto; aspect-ratio: 384 / 186; max-width: 100%;
  }
  #preview-caption { width: min(74vw, 260px); max-width: 100%; }
  .team-name, .pseudo-input { max-width: min(74vw, 260px); }
  #team-picker { width: 100%; flex-basis: auto; }

  /* modes de jeu : pleine largeur, empilés */
  .mode-row { flex-direction: column; gap: 8px; width: 100%; }
  .mode-btn { min-width: 0; width: 100%; padding: 10px 14px; font-size: 13px; }
  .mode-btn small { font-size: 10px; }

  /* actions principales : larges, hautes, faciles au pouce */
  #btn-play, #btn-respawn { width: 100%; max-width: 340px; padding: 15px 20px; font-size: 16px; letter-spacing: 1.5px; }
  .btn-premium { width: 100%; max-width: 340px; }
  .menu-cta-row { gap: 8px; }
  .menu-cta-row .btn-secondary { flex: 1 1 45%; min-height: 42px; padding: 9px 12px; font-size: 12px; }
  #btn-install { width: 100%; max-width: 340px; min-height: 44px; }

  /* cartes latérales lisibles, listes plafonnées mais défilables */
  .menu-card { padding: 13px 14px; }
  .menu-card h3 { font-size: 11px; }
  #hs-list { font-size: 12px; max-height: none; }
  #menu-missions { font-size: 12px; }
  .ach-scroll { max-width: 100%; }
}

/* très petits téléphones : resserrer encore le titre et l'aperçu */
@media (max-width: 380px) {
  #menu h1 { font-size: 32px; letter-spacing: 3px; }
  #ship-preview, #preview-caption { width: min(80vw, 240px); }
  .menu-cta-row .btn-secondary { flex: 1 1 100%; }
}

/* =====================================================================
   MOBILE (body.vtouch) — POPUPS « Options » & « Comment jouer »
   Deux corrections :
   1) FOND OPAQUE plein écran : les anciens fonds étaient semi-transparents
      (0.78 → 0.95) → la mer / l'accueil transparaissaient dans les coins.
      On pose un fond plein qui masque totalement l'arrière-plan.
   2) PLEINE LARGEUR + blocs compacts : la boîte occupe toute la largeur
      utile et les cartes/illustrations sont resserrées pour tenir sur un
      écran de téléphone (paysage comme portrait).
   Placé en fin de feuille pour primer la cascade.
   ===================================================================== */
body.vtouch #options-panel,
body.vtouch #tutorial-panel {
  /* fond OPAQUE : plus aucune transparence, l'arrière-plan disparaît */
  background: #0a1a26;
  justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Popups PLEIN ÉCRAN mobile (Options / Comment jouer / Boutique) : elles doivent couvrir
   TOUTE la hauteur. La règle générique `body.vtouch .overlay.panel { max-height:94vh }`
   (pensée pour les panneaux flottants centrés) les caperait à 94vh -> une bande vide en
   bas laissant transparaître l'accueil. On lève le cap ici : hauteur = viewport entier,
   le défilement interne (overflow-y:auto) gère les contenus longs. */
body.vtouch #options-panel,
body.vtouch #tutorial-panel,
body.vtouch #premium-panel {
  height: 100vh; height: 100dvh; max-height: none;
}

/* ---- Options : grille pleine largeur, cartes compactes ---- */
body.vtouch #options-panel {
  padding: calc(14px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));
  gap: 10px;
}
body.vtouch #options-panel h2 { margin-bottom: 2px; }
body.vtouch .opt-lead { max-width: 100%; }
body.vtouch #options-grid {
  width: 100%;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
body.vtouch .opt-card { padding: 11px 13px; }
body.vtouch .opt-card h4 { margin: 8px 0 6px; }
body.vtouch .opt-card label { margin: 5px 0; }

/* ---- Tutoriel « Comment jouer » : boîte pleine largeur, figures réduites ---- */
body.vtouch #tutorial-box {
  width: 100%;
  max-width: 640px;
  max-height: 100%;
  margin: auto;
  padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
}
body.vtouch .tuto-sections {
  grid-template-columns: 1fr;
  gap: 10px;
}
body.vtouch .tuto-figure svg { max-height: 128px; margin: 0 auto; }

body.ig-blocking { overflow: hidden; }

/* =====================================================================
   REFONTE MOBILE — ACCUEIL & POPUPS (drapeaux + boutique)
   Placé en fin de feuille pour primer la cascade. Corrige les défauts
   signalés en usage téléphone : aperçu de navire trop petit, boutons
   trop gros / trop serrés, mauvaise disposition, textes tassés, zone
   « Mon équipe » démesurée, popups drapeaux/boutique non défilables et
   non adaptées. Le défilement global est corrigé à la base (#menu passé
   en conteneur borné défilant). Deux dispositions : PORTRAIT/étroit
   (colonne unique, navire héros) et PAYSAGE court (deux colonnes qui
   respirent + navire modéré pour préserver la hauteur).
   ===================================================================== */

/* ---------- ACCUEIL — PORTRAIT / largeur téléphone ---------- */
@media (max-width: 620px) {
  #menu-grid { gap: 16px; max-width: 500px; }
  #menu-main { gap: 16px; }

  /* Titre aéré */
  #menu h1 { letter-spacing: 4px; margin-bottom: 2px; }
  .menu-teaser { line-height: 1.45; margin: 2px 0 4px; opacity: 0.95; }

  /* CARTE ÉQUIPE : navire HÉROS grand + centré, pseudo mis en avant juste dessous.
     Le sélecteur d'équipe redevient un simple bouton compact (fini la « zone énorme »). */
  #team-card { gap: 14px; padding: 16px 14px; }
  #team-preview { gap: 10px; }
  #ship-preview {
    width: min(84vw, 320px); height: auto; aspect-ratio: 384 / 186; max-width: 100%;
    border-radius: 14px;
  }
  #preview-caption { width: min(84vw, 320px); max-width: 100%; }
  .pseudo-input, #name-input {
    font-size: 19px; max-width: min(84vw, 320px);
    padding: 6px 10px 5px;
  }
  .pseudo-hint { font-size: 11px; }
  .flag-open {
    width: min(84vw, 320px); margin: 0 auto; padding: 11px 14px; gap: 12px;
  }
  .flag-open-vis { width: 40px; height: 27px; }
  #flag-open-name { font-size: 15px; }

  /* MODES : deux blocs pleine largeur, bien espacés */
  .mode-row { flex-direction: column; gap: 10px; width: 100%; }
  .mode-btn { width: 100%; min-width: 0; padding: 12px 16px; font-size: 14px; }
  .mode-btn small { font-size: 11px; }

  /* CTA principaux : Prendre la mer proéminent, puis Boutique, tous deux larges */
  #btn-play, #btn-respawn {
    width: 100%; max-width: 360px; padding: 16px 20px; font-size: 17px; letter-spacing: 2px;
  }
  .btn-premium { width: 100%; max-width: 360px; padding: 13px 18px; font-size: 14px; }

  /* Rangée utilitaire : 3 boutons ÉGAUX sur une seule ligne (fini le 2+1 bancal) */
  .menu-cta-row { gap: 8px; flex-wrap: nowrap; max-width: 360px; margin: 0 auto; width: 100%; }
  .menu-cta-row .btn-secondary {
    flex: 1 1 0; min-width: 0; min-height: 46px; padding: 9px 6px; font-size: 12px;
    display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.15;
    /* étroit : on laisse le libellé passer sur 2 lignes (min-height le prévoit) plutôt que
       de le tronquer à l'ellipsis hérité de la règle de base. */
    white-space: normal; overflow: visible;
  }

  /* Colonne latérale : cartes bien détachées et lisibles */
  #menu-side { gap: 14px; }
  .menu-card { padding: 15px 16px; }
  .menu-card h3 { font-size: 12px; margin-bottom: 10px; }
}

/* Très petits téléphones : on garde le navire dominant mais un cran plus sobre */
@media (max-width: 380px) {
  #ship-preview, #preview-caption, .flag-open, .pseudo-input, #name-input { width: min(88vw, 300px); }
  .menu-cta-row .btn-secondary { font-size: 11px; }
}

/* ---------- ACCUEIL — PAYSAGE court (téléphone couché) ----------
   Deux colonnes qui remplissent la largeur (fini les grosses marges roses)
   avec un navire modéré et des boutons compacts mais aérés. Le défilement
   interne (#menu borné) rend enfin la colonne latérale atteignable. */
@media (orientation: landscape) and (max-height: 560px) and (min-width: 620px) {
  #menu-grid {
    width: 96vw; max-width: 96vw;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 18px; align-items: start;
  }
  #menu-main { gap: 12px; padding: 14px 18px; }
  #menu h1 { font-size: 30px; letter-spacing: 3px; }
  #menu h1 span { font-size: 9px; }
  .menu-teaser { font-size: 11px; margin: 0; }

  /* Carte équipe : navire à gauche, pseudo dessous ; sélecteur d'équipe COMPACT
     (plus la « zone énorme » étirée qui remplissait tout le reste de la rangée). */
  #team-card { flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; }
  #team-preview { flex: 0 0 auto; gap: 6px; }
  #ship-preview { width: 170px; height: auto; aspect-ratio: 384 / 186; }
  #preview-caption { width: 170px; }
  .pseudo-input, #name-input { font-size: 15px; max-width: 170px; }
  .pseudo-hint { font-size: 10px; }
  /* sélecteur d'équipe compact et centré : vignette + nom lisibles mais bornés en hauteur */
  .flag-open { flex: 0 1 auto; max-width: 300px; align-self: center; justify-content: center; gap: 10px; padding: 8px 14px; }
  .flag-open-vis { width: 44px; height: 29px; }
  #flag-open-name { font-size: 15px; }
  /* sous-titre + accroche fusionnés dans le h1 : discrets pour préserver la hauteur */
  #menu h1 .menu-teaser { font-size: 10.5px; padding: 4px 10px; }

  .mode-row { gap: 12px; }
  .mode-btn { padding: 8px 14px; font-size: 13px; min-width: 0; flex: 1 1 0; }
  #btn-play, #btn-respawn { padding: 12px 40px; font-size: 16px; }
  .menu-cta-row { gap: 8px; align-items: stretch; }
  .menu-cta-row .btn-secondary { min-height: 42px; padding: 8px 10px; font-size: 12px; }
  /* Boutique = logo compact calé à droite (cohérent avec le mode PC), pas un large bouton */
  .menu-cta-row .btn-premium--icon { width: 42px; }
  .menu-cta-row .btn-premium--icon .btn-premium-ic { font-size: 18px; }

  #menu-side { gap: 12px; }
  .menu-card { padding: 12px 14px; }
  .menu-card h3 { margin-bottom: 8px; }
  /* carte « Progression » fusionnée : intitulés + séparateur resserrés */
  .menu-prog-sub { font-size: 9.5px; margin-bottom: 3px; }
  .menu-prog-split { margin: 8px 0; }
}

/* ---------- POPUP DRAPEAUX — feuille mobile défilable ----------
   Sur téléphone (portrait OU paysage court), la popup de choix d'équipe
   devient une feuille quasi plein écran, sobre et défilable, avec des
   tuiles compactes (fini les grandes tuiles + le grand vide inutile). */
@media (max-width: 620px), (orientation: landscape) and (max-height: 560px) {
  body.flag-modal-open #team-picker {
    width: min(560px, 94vw);
    max-height: min(88vh, 88dvh);
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    gap: 12px;
  }
  body.flag-modal-open #flag-grid {
    max-height: none; /* c'est la feuille entière qui défile, pas une sous-zone */
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px;
    overflow: visible;
  }
  body.flag-modal-open .flag-vis { height: 34px; }
  body.flag-modal-open .flag-nm { font-size: 9px; }
  .flag-modal-title { font-size: 16px; }
  #flag-tabs { gap: 8px; }
  .flag-tab { padding: 8px 16px; font-size: 13px; }
  #flag-search { padding: 10px 14px; font-size: 15px; }
  .flag-close { width: 38px; height: 38px; font-size: 24px; }
}

/* ---------- BOUTIQUE — plein écran défilable sur mobile ----------
   Même parti pris que les popups Options / Comment jouer : fond OPAQUE
   plein écran, boîte pleine largeur, corps réellement défilable au pouce,
   marges de sécurité (encoches). Corrige « impossible de scroller ». */
body.vtouch #premium-panel {
  background: #08161f;
  justify-content: flex-start;
  padding: calc(12px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom));
  overflow: hidden;
}
body.vtouch #premium-box {
  width: 100%; max-width: 640px; max-height: 100%; margin: auto;
  border-radius: 14px;
}
body.vtouch #premium-head { padding: 14px 16px 12px; }
body.vtouch #premium-head h2 { font-size: 19px; }
body.vtouch .premium-lead { font-size: 12px; }
body.vtouch #premium-scroll {
  padding: 14px 14px 18px; gap: 18px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
body.vtouch .shop-grid { grid-template-columns: 1fr; }
body.vtouch #btn-close-premium { display: none; } /* la croix (.panel-x) suffit, évite le débord bas */
/* La croix de fermeture reste toujours atteignable, au-dessus du corps défilant */
body.vtouch #premium-panel .panel-x { position: fixed; top: calc(8px + env(safe-area-inset-top)); right: 10px; z-index: 46; }


/* Tutoriel — animations & polish */

/* (a) Apparition douce des sections au changement d'onglet */
@keyframes tutoIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tuto-section:not(.hidden) {
  animation: tutoIn .28s ease both;
}

/* (b) Relief discret des cartes de section + entrée des figures */
.tuto-section {
  box-shadow: 0 1px 0 rgba(90, 169, 230, 0.06),
              inset 0 0 0 1px rgba(120, 170, 200, 0.04);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.tuto-section:hover {
  border-color: #3d86ab;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28),
              0 0 0 1px rgba(90, 169, 230, 0.12);
  transform: translateY(-1px);
}
.tuto-section.tuto-tip:hover {
  border-color: #7ad37a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28),
              0 0 0 1px rgba(122, 211, 122, 0.16);
}

@keyframes tutoFigureIn {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}
.tuto-section:not(.hidden) .tuto-figure {
  animation: tutoFigureIn .34s ease both .06s;
}

/* (c) Soin de la figure (fond bleu nuit, radius, ombre interne) */
.tuto-figure {
  background: linear-gradient(160deg, rgba(18, 40, 58, 0.6), rgba(12, 26, 40, 0.72));
  border: 1px solid rgba(61, 134, 171, 0.22);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.34),
              inset 0 0 0 1px rgba(90, 169, 230, 0.04);
}

/* (c) Pastille numéro : relief or subtil, texte fonce */
.tuto-num {
  box-shadow: 0 1px 4px rgba(240, 217, 122, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.tuto-section.tuto-tip .tuto-num {
  box-shadow: 0 1px 4px rgba(122, 211, 122, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* (d) Respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .tuto-section:not(.hidden),
  .tuto-section:not(.hidden) .tuto-figure {
    animation: none;
  }
  .tuto-section,
  .tuto-section:hover {
    transition: none;
    transform: none;
  }
}

/* ---------- CONTACT & IDÉES (formulaire de feedback) ---------- */
#feedback-box {
  width: min(560px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(18, 44, 60, 0.97), rgba(10, 28, 40, 0.97));
  border: 1px solid #2f5268; border-radius: 16px;
  padding: 18px 20px; text-align: left;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  overflow-y: auto;
}
#fb-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
#fb-bulb { flex: 0 0 auto; width: 56px; height: 70px; }
#fb-hero-text h2 { margin: 0 0 4px; font-size: 20px; }
.fb-lead { font-size: 13px; line-height: 1.5; color: #cfdde7; margin: 0; }
.fb-lead b { color: #ffe08a; }
#fb-examples { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.fb-chip {
  font-size: 11px; color: #bcd0dc; padding: 3px 9px; border-radius: 999px;
  background: rgba(8, 22, 32, 0.6); border: 1px dashed #33566b;
}
#fb-types { display: flex; gap: 8px; margin-bottom: 14px; }
.fb-type {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 6px; cursor: pointer; font-size: 12.5px; font-weight: 700;
  color: #bcd0dc; background: rgba(8, 22, 32, 0.6);
  border: 1px solid #33566b; border-radius: 10px;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.fb-type:hover { border-color: #5aa9e6; color: #cfdde7; }
.fb-type.selected {
  color: #0c1a24; background: linear-gradient(90deg, #f0d97a, #e0b84a);
  border-color: #f0d97a; box-shadow: 0 2px 10px rgba(240, 217, 122, 0.28);
}
.fb-type-ic { font-size: 18px; line-height: 1; }
.fb-field { margin-bottom: 12px; }
.fb-field-lbl { display: block; font-size: 12px; font-weight: 700; color: #cfdde7; margin-bottom: 5px; }
.fb-optional { color: #9bb0bd; font-weight: 500; }
#fb-message, #fb-contact {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  font-size: 13px; color: #eef2f6; background: #10303f;
  border: 1px solid #33566b; border-radius: 8px; outline: none; font-family: inherit;
}
#fb-message { min-height: 96px; resize: vertical; line-height: 1.5; }
#fb-message:focus, #fb-contact:focus { border-color: #5aa9e6; }
#fb-message::placeholder, #fb-contact::placeholder { color: #9bb0bd; }
.fb-count { text-align: right; font-size: 10.5px; color: #9bb0bd; margin-top: 3px; }
.fb-note { font-size: 11px; color: #9bb0bd; margin: 5px 0 0; }
#fb-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
#fb-actions .btn-secondary { flex: 1 1 auto; }
#fb-status { min-height: 18px; margin-top: 10px; font-size: 12.5px; font-weight: 600; text-align: center; }
#fb-status.ok { color: #7ad37a; }
#fb-status.err { color: #ec8d8d; }
@media (prefers-reduced-motion: reduce) { #fb-bulb * { animation: none !important; } }



/* ================= QUÊTES : notification, tracker HUD, panneau statut ================= */
/* TOAST « quête accomplie » : célébration IMMÉDIATE en haut-centre pendant la partie */
#quest-toast {
  position: fixed; top: 64px; left: 50%; z-index: 45;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: 14px; pointer-events: none; opacity: 0;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(28, 52, 40, 0.96), rgba(14, 32, 26, 0.96));
  border: 1.5px solid #7ad37a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 22px rgba(122, 211, 122, 0.35);
  color: #eaf6ee; max-width: 92vw;
}
#quest-toast.qt-show { animation: questPop 3.6s ease forwards; }
@keyframes questPop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(0.92); }
  8%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); }
  16%  { transform: translateX(-50%) translateY(0) scale(1); }
  85%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.98); }
}
#quest-toast .qt-ic { font-size: 26px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); }
#quest-toast .qt-body { display: flex; flex-direction: column; }
#quest-toast .qt-title { font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: #9be6a4; }
#quest-toast .qt-label { font-size: 15px; font-weight: 800; }
#quest-toast .qt-xp { font-size: 14px; font-weight: 800; color: #2c1f06; background: linear-gradient(90deg, #ffe28c, #e8b84a); padding: 4px 10px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { #quest-toast.qt-show { animation: none; opacity: 1; } }

/* CHIP « prochaine quête » (HUD desktop) : cliquable → ouvre le panneau statut.
   Rangée du haut, juste à côté du bouton ampoule (#btn-feedback), pour ne plus coller
   au panneau Flotte empilé dans la colonne de gauche (voir UI.layoutQuestChip). */
#quest-chip {
  position: fixed; top: 14px; left: 230px; bottom: auto; z-index: 20;
  display: flex; align-items: center; gap: 9px; max-width: 260px;
  padding: 7px 11px; cursor: pointer; text-align: left;
  background: rgba(10, 26, 38, 0.82); border: 1px solid #33566b; border-radius: 10px;
  color: #cfdde7; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
#quest-chip:hover { border-color: #5aa9e6; }
#quest-chip .qc-ic { font-size: 18px; line-height: 1; flex: 0 0 auto; }
#quest-chip .qc-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#quest-chip .qc-label { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#quest-chip .qc-bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
#quest-chip .qc-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #12b3a6, #f0d97a); transition: width .3s ease; }
#quest-chip .qc-prog { font-size: 11px; font-weight: 700; color: #f0d97a; flex: 0 0 auto; }
/* mobile : place tactile trop chargée en bas → le chip est masqué (statut via le menu) */
body.vtouch #quest-chip { max-width: 200px; padding: 5px 9px; z-index: 22; } /* place sous le coffre par UI.layoutQuestChip */
/* DIDACTICIEL : masquer le tracker de quete pendant une bulle d'aide (il chevauchait la barre de cale). */
body.ob-tip #quest-chip { display: none; }
/* MICRO-CÉLÉBRATION « +XP » à chaque palier de quête franchi (cf. UI.xpTick) : pulse du chip +
   étiquette dorée qui s'envole. Reste discret — la grosse fête est réservée à la complétion. */
#quest-chip.qc-bump { animation: qcBump .4s ease; }
@keyframes qcBump { 0% { transform: scale(1); } 35% { transform: scale(1.07); } 100% { transform: scale(1); } }
.qc-xptick {
  position: absolute; right: 10px; top: -8px; pointer-events: none;
  font-size: 13px; font-weight: 800; color: #2c1f06;
  background: linear-gradient(90deg, #ffe28c, #e8b84a);
  padding: 2px 8px; border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  animation: qcXpFloat 1.05s ease forwards;
}
@keyframes qcXpFloat {
  0% { opacity: 0; transform: translateY(6px) scale(0.8); }
  20% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-26px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #quest-chip.qc-bump { animation: none; }
  .qc-xptick { animation: none; opacity: 1; }
}
/* MISSIONS ÉCLAIR : bandeau central avec compte à rebours (créé par UI._renderFlash, greffé dans #hud). */
#flash-mission {
  position: fixed; top: 52px; left: 50%; transform: translateX(-50%); z-index: 21;
  display: flex; align-items: center; gap: 9px; min-width: 210px; max-width: 330px;
  padding: 7px 12px; pointer-events: none;
  background: rgba(10, 26, 38, 0.9); border: 1px solid #e8b84a; border-radius: 10px;
  color: #f0e4c8; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
#flash-mission.hidden { display: none; }
#flash-mission.fm-in { animation: fmIn .35s ease; }
#flash-mission .fm-ic { font-size: 20px; line-height: 1; flex: 0 0 auto; }
#flash-mission .fm-body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
#flash-mission .fm-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
#flash-mission .fm-label { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#flash-mission .fm-time { font-size: 12px; font-weight: 800; color: #ffd75e; flex: 0 0 auto; }
#flash-mission .fm-bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
#flash-mission .fm-fill { display: block; height: 100%; border-radius: 999px; transition: width .25s linear; }
#flash-mission.fm-urgent { border-color: #ff7a59; animation: fmPulse .7s ease-in-out infinite; }
@keyframes fmIn { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes fmPulse { 0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); } 50% { box-shadow: 0 6px 22px rgba(255, 122, 89, 0.55); } }
body.vtouch #flash-mission { top: 46px; min-width: 150px; padding: 5px 9px; }
@media (prefers-reduced-motion: reduce) { #flash-mission.fm-in, #flash-mission.fm-urgent { animation: none; } }
/* JUICE de montée de niveau : flash central « NIVEAU X » + pulse de la barre d'XP (cf. UI._celebrateLevelUp). */
#xpbar-fill.levelup { animation: xpLevelPulse .7s ease; }
@keyframes xpLevelPulse { 0%, 100% { filter: none; } 40% { filter: brightness(1.7) drop-shadow(0 0 7px #ffd75e); } }
#levelup-flash {
  position: fixed; top: 34%; left: 50%; transform: translate(-50%, -50%); z-index: 40;
  display: none; flex-direction: column; align-items: center; gap: 5px; pointer-events: none; text-align: center;
}
#levelup-flash.lf-show { display: flex; animation: lfPop 1.9s ease forwards; }
#levelup-flash .lf-lvl { font-size: 46px; font-weight: 900; letter-spacing: 2px; color: #ffe28c; text-shadow: 0 3px 0 #7a5a12, 0 0 22px rgba(255, 210, 74, 0.7); }
#levelup-flash .lf-sub { font-size: 15px; font-weight: 800; color: #eaf2f7; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6); }
@keyframes lfPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  30% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -54%) scale(1); }
}
body.vtouch #levelup-flash .lf-lvl { font-size: 34px; }
@media (prefers-reduced-motion: reduce) { #levelup-flash.lf-show { animation: none; opacity: 1; } #xpbar-fill.levelup { animation: none; } }

/* BULLE de rappel de quête : apparaît périodiquement sous le chip pour expliquer QUOI faire.
   Position (top/left) fixée en JS depuis le rect du chip (robuste PC/mobile). */
#quest-bubble {
  position: fixed; z-index: 21; max-width: 230px;
  padding: 8px 11px; pointer-events: none;
  background: rgba(10, 26, 38, 0.94); border: 1px solid #5aa9e6; border-radius: 10px;
  color: #eaf3fa; font-size: 12px; line-height: 1.35; font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .28s ease, transform .28s ease;
}
#quest-bubble.qb-show { opacity: 1; transform: translateY(0); }
#quest-bubble .qb-title { display: block; color: #f0d97a; font-weight: 800; margin-bottom: 2px; }
/* petit bec pointant vers le chip, en haut à gauche de la bulle */
#quest-bubble::before {
  content: ""; position: absolute; top: -6px; left: 18px;
  width: 10px; height: 10px; background: rgba(10, 26, 38, 0.94);
  border-left: 1px solid #5aa9e6; border-top: 1px solid #5aa9e6;
  transform: rotate(45deg);
}
body.vtouch #quest-bubble { max-width: 190px; z-index: 23; }

/* bouton « Voir tout » dans la carte Quêtes du menu */
.quest-see-all { float: right; background: none; border: 1px solid #33566b; color: #cbd8e2; font-size: 10.5px; padding: 2px 8px; border-radius: 999px; cursor: pointer; }
.quest-see-all:hover { border-color: #5aa9e6; color: #ffe08a; }

/* PANNEAU STATUT DES QUÊTES */
#quests-box {
  width: min(560px, 94vw); max-height: 88vh; display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(18, 44, 60, 0.97), rgba(10, 28, 40, 0.97));
  border: 1px solid #2f5268; border-radius: 16px; padding: 18px 20px; text-align: left;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
#quests-box h2 { margin: 0 0 4px; }
.quests-lead { font-size: 12.5px; color: #cfdde7; margin: 0 0 12px; }
.quests-list { list-style: none; margin: 0 0 12px; padding: 0; flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.quest-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; background: rgba(8, 22, 32, 0.5); border: 1px solid rgba(120, 170, 200, 0.12); }
.quest-row.active { border-color: rgba(240, 217, 122, 0.35); }
.quest-row.done { opacity: 0.72; border-color: rgba(122, 211, 122, 0.3); }
.quest-ic { font-size: 22px; line-height: 1; flex: 0 0 auto; width: 26px; text-align: center; }
.quest-row.locked .quest-ic { filter: grayscale(1) opacity(0.6); }
.quest-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.quest-name { font-size: 13px; font-weight: 700; color: #eaf1f7; }
.quest-desc { font-size: 11px; color: #9bb0bd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quest-bar { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.quest-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #12b3a6, #f0d97a); }
.quest-row.done .quest-fill { background: linear-gradient(90deg, #3ea86a, #7ad37a); }
.quest-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.quest-prog { font-size: 12px; font-weight: 700; color: #f0d97a; }
.quest-ok { font-size: 11px; color: #7ad37a; }
.quest-xp { font-size: 10.5px; color: #9fd9c4; }
/* bouton « i » : révèle la ligne « comment faire » du succès */
.quest-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 7px; padding: 0; vertical-align: middle;
  border-radius: 50%; border: 1px solid rgba(120, 170, 200, 0.5);
  background: rgba(120, 170, 200, 0.12); color: #bcd3e2;
  font-size: 10.5px; font-weight: 800; font-style: italic; line-height: 1; cursor: pointer;
}
.quest-info:hover { background: rgba(240, 217, 122, 0.22); border-color: rgba(240, 217, 122, 0.6); color: #f0d97a; }
.quest-info.open { background: #f0d97a; border-color: #f0d97a; color: #12222f; }
/* ligne dépliable « comment faire » + rappel de récompense */
.quest-howto { font-size: 11.5px; line-height: 1.45; color: #cfe0ec; white-space: normal; margin: 2px 0 1px; }
.quest-howto[hidden] { display: none; }
.quest-howto b { color: #f0d97a; }
.quest-howto-reward { display: block; margin-top: 3px; font-size: 10.5px; color: #9fd9c4; }
#btn-close-quests { flex: 0 0 auto; align-self: center; }



/* ================= MENU LATÉRAL — PEPS / DOPAMINE / PÉDAGOGIE ================= */
/* #menu-grid (et non #menu-side seul) : la carte « Meilleurs capitaines » vit désormais sous
   le bloc principal (#menu-main), elle doit garder le même habillage que ses anciennes voisines. */
#menu-grid .menu-card {
  background: linear-gradient(165deg, #2c2e56 0%, #212340 100%);
  border: 1px solid #4d5084; border-radius: 14px;
  padding: 15px 16px 16px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#menu-grid .menu-card:hover {
  transform: translateY(-2px); border-color: #6a6ec0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(130, 130, 230, 0.18);
}
#menu-grid .menu-card h3 {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 800; letter-spacing: 1.1px; color: #eff2ff; margin-bottom: 11px;
}
#menu-grid .menu-card h3::before {
  content: ''; flex: 0 0 auto; width: 4px; height: 15px; border-radius: 999px;
  background: linear-gradient(180deg, #7fe0c0, #12b3a6); box-shadow: 0 0 8px rgba(127, 224, 192, 0.5);
}
#menu-reserve-card h3::before { background: linear-gradient(180deg, #ffe08a, #e8b84a); box-shadow: 0 0 8px rgba(240, 217, 122, 0.5); }
#menu-grid .mission-tag {
  font-size: 9.5px; font-weight: 700; color: #b9c6e6; letter-spacing: 0.2px;
  padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.07);
}
/* #menu-main utilise align-items:center (les autres blocs ont width:100% explicite) : sans
   cette règle, la carte déplacée se réduirait à la largeur de son contenu au lieu de remplir
   la colonne, comme le reste du panneau Dovion. */
#menu-main .menu-card { width: 100%; }

/* RÉSERVE : solde punchy + rang doré */
.reserve-bal { font-size: 27px; font-weight: 900; color: #86eecb; letter-spacing: -0.5px; text-shadow: 0 0 18px rgba(127, 224, 192, 0.35); }
.reserve-rank {
  font-size: 10px; font-weight: 800; color: #2c1f06; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 10px; border-radius: 999px;
  background: linear-gradient(90deg, #ffe28c, #e8b84a); box-shadow: 0 2px 9px rgba(240, 217, 122, 0.3);
}
.reserve-note { font-size: 10.5px; color: #93a9b6; }
.menu-prog-sub { color: #a7e2d0; font-weight: 700; font-size: 11px; }

/* BARRES : relief + brillance qui glisse (dopamine) */
.reserve-bar, .cap-xpbar, .menu-mission .mm-bar {
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.reserve-fill, .cap-xpfill, .menu-mission .mm-fill { position: relative; overflow: hidden; }
.reserve-fill::after, .menu-mission .mm-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-120%); animation: barSheen 2.8s ease-in-out infinite;
}
@keyframes barSheen { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(260%); } }

/* MISSIONS : récompense en pastille verte + note pédagogique en encart */
.menu-reward-note {
  font-size: 11px; color: #d3dfe9; line-height: 1.5; margin: 2px 0 12px;
  padding: 8px 11px; border-radius: 9px;
  background: rgba(240, 217, 122, 0.08); border-left: 3px solid rgba(240, 217, 122, 0.55);
}
.menu-reward-note b { color: #ffe08a; font-weight: 800; }
.menu-mission .mm-label { font-size: 12.5px; color: #e7edf6; font-weight: 600; }
.menu-mission .mm-prog { font-size: 13px; font-weight: 800; color: #ffe08a; }
.menu-mission.done .mm-prog { color: #7ee39a; }
.menu-mission .mm-reward { font-size: 10.5px; color: #a9c0cd; margin-top: 3px; }
.menu-mission .mm-reward b {
  color: #08301f; background: linear-gradient(90deg, #8ef0b8, #38cf8e);
  padding: 1px 7px; border-radius: 999px; font-weight: 800; font-size: 10px;
}

/* QUÊTES : bouton « Voir tout » (le h3 est en flex → margin-left auto au lieu de float) */
#menu-side .menu-card h3 .quest-see-all {
  float: none; margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
  color: #0c1a24; background: linear-gradient(90deg, #7fe0c0, #12b3a6); border: none;
  padding: 3px 10px; border-radius: 999px; text-transform: uppercase;
}
#menu-side .menu-card h3 .quest-see-all:hover { filter: brightness(1.1); }

/* BOUTON AMPOULE « Contact » du HUD (en jeu) */
#btn-feedback {
  top: 14px; left: 176px; padding: 6px 12px; line-height: 0;
  color: #ffe08a; background: rgba(8, 22, 32, 0.65);
  border: 1px solid #6a5a2e; border-radius: 8px; cursor: pointer;
}
#btn-feedback:hover { border-color: #f0d97a; color: #fff0b8; box-shadow: 0 0 12px rgba(240, 217, 122, 0.3); }
#btn-feedback svg { display: block; }

@media (prefers-reduced-motion: reduce) {
  .reserve-fill::after, .menu-mission .mm-fill::after { animation: none; display: none; }
  #menu-grid .menu-card:hover { transform: none; }
}



/* ================= OPTIONS — typographie affinée & boutons compacts/espacés ================= */
#options-grid { gap: 18px; }
.opt-card { padding: 16px 18px; }
.opt-card h4 {
  font-size: 12.5px; letter-spacing: 0.7px; color: #eaf1f7; font-weight: 800;
  margin: 16px 0 11px; text-transform: uppercase;
}
.opt-card h4:first-child { margin-top: 0; }
.opt-ic {
  width: 24px; height: 24px; border-radius: 7px; font-size: 14px;
  background: linear-gradient(135deg, rgba(240, 217, 122, 0.22), rgba(240, 217, 122, 0.08));
  box-shadow: inset 0 0 0 1px rgba(240, 217, 122, 0.25); color: #f4dd7e;
}
.opt-card label { font-size: 13px; margin: 9px 0; }
.opt-note { font-size: 11.5px; line-height: 1.55; color: #9db2c0; margin-top: 9px; }

/* BOUTONS des cartes Options : compacts, nettement ESPACÉS du texte, largeur pleine mais fine */
.opt-card > .btn-secondary,
#opt-btn-install, #opt-btn-feedback {
  display: block; width: 100%; box-sizing: border-box; margin-top: 13px;
  padding: 9px 14px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px;
  border-radius: 10px; text-align: center;
  color: #eaf1f7; background: rgba(255, 255, 255, 0.05); border: 1px solid #46647e;
  transition: border-color .14s ease, background .14s ease, color .14s ease, transform .12s ease;
}
.opt-card > .btn-secondary:hover,
#opt-btn-install:hover {
  border-color: #5aa9e6; background: rgba(90, 169, 230, 0.12); transform: translateY(-1px);
}
.opt-card > .btn-secondary:active, #opt-btn-install:active, #opt-btn-feedback:active { transform: translateY(0); }
/* bouton CONTACT : accent doré (idée) pour l'inciter */
#opt-btn-feedback { border-color: #6a5a2e; color: #ffe6a3; background: rgba(240, 217, 122, 0.06); }
#opt-btn-feedback:hover { border-color: #f0d97a; background: rgba(240, 217, 122, 0.14); color: #fff2c8; transform: translateY(-1px); }

/* toggle « Mode radio » : intitulé plus lisible */
.opt-radio-row .opt-radio-txt b { font-size: 13.5px; color: #eef3f8; }
.opt-radio-row .opt-radio-txt small { font-size: 11px; color: #9db2c0; }



/* ================= TITRES DE PRESTIGE + ONGLETS + CÉLÉBRATION QUÊTE ================= */
/* onglets du panneau (Quêtes | Titres) */
#quests-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex: 0 0 auto; }
.quests-tab {
  padding: 7px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  color: #bcd0dc; background: rgba(8, 22, 32, 0.6); border: 1px solid #33566b; border-radius: 999px;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.quests-tab:hover { border-color: #5aa9e6; color: #cfdde7; }
.quests-tab.selected { color: #0c1a24; background: linear-gradient(90deg, #f0d97a, #e0b84a); border-color: #f0d97a; box-shadow: 0 2px 10px rgba(240, 217, 122, 0.28); }

/* ÉCHELLE DE TITRES */
.titles-list { list-style: none; margin: 0 0 12px; padding: 0; flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.title-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px; border-radius: 11px; background: rgba(8, 22, 32, 0.5); border: 1px solid rgba(120, 170, 200, 0.12);
}
.title-row.locked { opacity: 0.6; }
.title-row.locked .title-badge { color: #8296a5 !important; text-shadow: none !important; }
.title-row.current { border-color: rgba(240, 217, 122, 0.55); background: rgba(240, 217, 122, 0.06); }
.title-row.glow.unlocked { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.title-badge { font-size: 15.5px; font-weight: 800; letter-spacing: 0.4px; }
.title-badge::before { content: '« '; opacity: 0.5; }
.title-badge::after { content: ' »'; opacity: 0.5; }
.title-meta { flex: 0 0 auto; font-size: 11px; text-align: right; }
.title-current { color: #ffe08a; font-weight: 800; }
.title-got { color: #7ad37a; font-weight: 700; }
.title-need { color: #9bb0bd; }

/* TOAST DE QUÊTE — plus grand, plus net, avec halo (fini le « SD ») */
#quest-toast { padding: 12px 20px; border-radius: 16px; }
#quest-toast .qt-ic { font-size: 30px; }
#quest-toast .qt-title { font-size: 12px; }
#quest-toast .qt-label { font-size: 16px; }
#quest-toast .qt-xp { font-size: 15px; }
#quest-toast::before {
  content: ''; position: absolute; inset: -4px; border-radius: 20px; z-index: -1; opacity: 0;
  background: radial-gradient(closest-side, rgba(122, 211, 122, 0.4), transparent 75%);
}
#quest-toast.qt-show::before { animation: qtGlow 3.6s ease; }
@keyframes qtGlow { 0%, 100% { opacity: 0; } 8%, 80% { opacity: 1; } }

/* CONFETTIS qui jaillissent du toast */
.qt-confetti {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 2px;
  pointer-events: none; opacity: 0; transform: translate(-50%, -50%); z-index: 2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  animation: qtConfetti 1.05s cubic-bezier(.15, .7, .3, 1) forwards;
}
@keyframes qtConfetti {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.5) rotate(var(--rot)); }
}
@media (prefers-reduced-motion: reduce) { .qt-confetti { display: none; } #quest-toast.qt-show::before { animation: none; } }

/* =====================================================================
   ACCUEIL — PAYSAGE TÉLÉPHONE : TOUT TIENT SANS SCROLL (2026-07-06)
   Le jeu se joue en paysage (PWA verrouillée en paysage). Sur un téléphone
   couché (~360–430px de haut), l'accueil doit tenir d'un seul coup d'œil,
   sans défilement. Stratégie :
   - colonne GAUCHE = action (entête + carte équipe + « Prendre la mer »),
     resserrée mais lisible ;
   - colonne DROITE (infos) éclatée en DEUX sous-colonnes (réserve + missions
     | quêtes + classement) pour diviser sa hauteur par ~2 ;
   - notes explicatives verbeuses masquées (gain de hauteur), l'essentiel
     restant visible (soldes, barres, intitulés, progression).
   Placé en toute fin de feuille pour primer la cascade. Ne touche QUE le
   paysage court (téléphone) : desktop et portrait inchangés.
   ===================================================================== */
@media (orientation: landscape) and (max-height: 560px) {
  #menu {
    padding: calc(6px + env(safe-area-inset-top)) 10px calc(6px + env(safe-area-inset-bottom));
    justify-content: safe center;
    gap: 4px; /* le .overlay impose 16px : trop en paysage court, on resserre grid<->footer */
  }
  #menu-grid {
    width: 98vw; max-width: 98vw;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.35fr);
    gap: 12px; align-items: start;
  }

  /* ---------- Colonne gauche : entête + équipe + jouer ---------- */
  #menu-main { gap: 2px; padding: 6px 14px; }
  #menu h1 { font-size: 22px; letter-spacing: 2px; margin-bottom: 0; line-height: 1; }
  /* teaser masqué en paysage court : gain de hauteur, le titre suffit */
  #menu h1 .menu-teaser { display: none; }

  /* Carte ÉQUIPE en DEUX COLONNES : le navire (AGRANDI, toute sa colonne) à GAUCHE, le choix
     d'équipe + le pseudo à DROITE. Fini la vignette minuscule de 74px calée à gauche : le canvas
     s'étire sur la moitié gauche de la carte, ce qui lui donne une vraie présence. #team-preview
     passe en display:contents pour que le canvas et la légende du pseudo deviennent des items
     directs de la grille (placement par grid-area). */
  #team-card {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-areas: "image team" "image pseudo";
    align-items: center; column-gap: 12px; row-gap: 6px; padding: 8px 12px;
  }
  #team-preview { display: contents; }
  #ship-preview { grid-area: image; width: 100%; max-width: 100%; height: auto; aspect-ratio: 384 / 186; }
  #preview-caption { grid-area: pseudo; width: 100%; max-width: 100%; align-self: start; align-items: stretch; }
  .pseudo-input, #name-input { font-size: 12px; width: 100%; max-width: 100%; padding: 3px 7px; }
  /* indice « clique pour ecrire ton nom » masque en paysage : redondant (le champ est
     visible et editable), et gagne ~15px de hauteur sur la colonne d'action. */
  .pseudo-hint { display: none; }
  .flag-open {
    grid-area: team; width: 100%; max-width: 100%; min-width: 0; margin: 0;
    align-self: end; justify-content: center; gap: 8px; padding: 8px 10px;
  }
  .flag-open-vis { width: 34px; height: 23px; flex: 0 0 auto; }
  .flag-open-txt { min-width: 0; }
  #flag-open-name { font-size: 13px; }

  /* Modes de jeu : boutons ÉTIRÉS sur toute la largeur (flex:1) avec un léger confort vertical
     (padding haut/bas) → pastilles plus larges que hautes, plus propres et moins tassées. */
  .mode-row { gap: 10px; }
  .mode-btn { padding: 9px 18px; font-size: 12.5px; min-width: 0; flex: 1 1 0; line-height: 1.15; }
  .mode-btn small { font-size: 9px; }
  /* padding horizontal reduit : sinon « Prendre la mer (solo) » passe sur 2 lignes en
     paysage etroit (667px), rallongeant la colonne. white-space:nowrap le garde sur 1 ligne. */
  #btn-play, #btn-respawn { padding: 8px 16px; font-size: 14px; letter-spacing: 0.5px; white-space: nowrap; }
  /* Boutons d'option (Options / Comment jouer / son / Boutique) : plus PETITS et plus SOBRES. */
  .menu-cta-row { gap: 6px; }
  .menu-cta-row .btn-secondary { min-height: 30px; padding: 4px 8px; font-size: 10.5px; border-radius: 9px; }
  .menu-cta-row .menu-cta-icon { width: 36px; min-width: 36px; }
  .menu-cta-row .menu-cta-icon svg { width: 17px; height: 17px; }
  .menu-cta-row .btn-premium--icon { width: 36px; min-width: 36px; }
  .menu-cta-row .btn-premium--icon .btn-premium-ic { font-size: 16px; }

  /* « Meilleurs capitaines » : deplace en bas de la colonne gauche par un autre chantier
     (equilibrage desktop). En paysage telephone on le compacte pour ne pas rallonger la
     colonne d'action au point de forcer le scroll. */
  /* specificite (2,0,0) : bat `#menu-grid .menu-card` (1,1,0) pose par un autre chantier. */
  #menu-grid #menu-captains-card { padding: 7px 11px 8px; }
  #menu-grid #menu-captains-card h3 { font-size: 10.5px; letter-spacing: 0.6px; margin-bottom: 4px; }
  #menu-grid #menu-captains-card #hs-list { font-size: 10px; max-height: none; }
  #menu-grid #menu-captains-card #hs-list li { padding: 1px 0; }

  /* ---------- Colonne droite : DEUX sous-colonnes d'infos ---------- */
  #menu-side {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start;
  }
  /* min-width:0 : sans ca, la bande de quetes (.ach-track en width:max-content) donne
     aux cartes une largeur intrinseque enorme qui fait exploser la sous-colonne. */
  #menu-side > .menu-card { min-width: 0; max-width: 100%; }
  #menu-side .menu-card { padding: 9px 11px 10px; border-radius: 11px; }
  .ach-scroll { max-width: 100%; }
  #menu-side .menu-card h3 { font-size: 10.5px; letter-spacing: 0.6px; margin-bottom: 6px; gap: 6px; }
  #menu-side .menu-card h3::before { height: 12px; width: 3px; }
  #menu-side .mission-tag { font-size: 8px; padding: 1px 6px; }

  /* notes verbeuses masquées : on garde l'essentiel (soldes, barres, intitulés) */
  .menu-prog-sub, .reserve-note, .menu-reward-note, .menu-mission .mm-reward { display: none; }

  .reserve-row { margin: 0; }
  .reserve-bal { font-size: 19px; }
  .reserve-rank { font-size: 9px; padding: 2px 8px; }
  .reserve-bar { height: 6px; margin-top: 6px; }

  .menu-missions { gap: 5px; }
  .menu-mission .mm-top { font-size: 11.5px; }
  .menu-mission .mm-bar { margin-top: 4px; }

  .ach-scroll { max-height: none; }
  #hs-list { font-size: 11px; max-height: none; }
  #hs-list li { padding: 2px 0; }

  .menu-legal-footer { margin: 0; font-size: 10px; }
}


/* titres cliquables (porter un titre débloqué) */
.title-row[data-tid] { cursor: pointer; }
.title-row[data-tid]:hover { border-color: #5aa9e6; background: rgba(90,169,230,0.08); }
.title-wear { color: #9bb0bd; font-weight: 700; }
.title-row[data-tid]:hover .title-wear { color: #ffe08a; }
.title-row[data-tid]:hover .title-wear::before { content: '▸ '; }

/* Confirmation MODE TEST sur l'accueil (masquée par défaut via l'attribut [hidden]). */
#cheat-confirm { margin: 8px auto 0; max-width: 320px; padding: 6px 12px; border-radius: 8px;
  background: rgba(18,18,22,0.85); border: 1px solid #ffd24a; color: #ffd24a;
  font: 600 12px system-ui, 'Segoe UI', sans-serif; text-align: center; line-height: 1.35; }
#cheat-confirm[hidden] { display: none; }

/* Bouton personnel MODE TEST (déverrouillage par mot de passe) — discret, sous le pseudo.
   VISIBLE seulement en mode développeur : l'attribut [hidden] doit gagner sur display:flex. */
#cheat-controls { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin: 6px auto 0; }
#cheat-controls[hidden] { display: none; }
.cheat-toggle { padding: 4px 10px; border-radius: 7px; cursor: pointer;
  background: rgba(18,18,22,0.6); border: 1px solid rgba(255,255,255,0.22); color: #cfd6dd;
  font: 600 11px system-ui, 'Segoe UI', sans-serif; letter-spacing: .02em; transition: border-color .15s, color .15s, background .15s; }
.cheat-toggle:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.cheat-toggle.is-on { background: rgba(255,210,74,0.14); border-color: #ffd24a; color: #ffd24a; }
#cheat-pass-wrap { display: inline-flex; gap: 5px; align-items: center; }
#cheat-pass-wrap[hidden] { display: none; }
.cheat-pass { width: 130px; padding: 4px 8px; border-radius: 7px;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.22); color: #fff;
  font: 500 12px system-ui, 'Segoe UI', sans-serif; }
.cheat-pass::placeholder { color: #8b97a2; }
.cheat-pass-ok { padding: 4px 10px; border-radius: 7px; cursor: pointer;
  background: rgba(90,169,230,0.16); border: 1px solid #5aa9e6; color: #cfe6fb;
  font: 600 11px system-ui, 'Segoe UI', sans-serif; }
.cheat-pass-ok:hover { background: rgba(90,169,230,0.28); color: #fff; }
@keyframes cheat-shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }
.cheat-shake { animation: cheat-shake .32s ease; }

/* ACCÈS DÉVELOPPEUR (pied du panneau Options) — volontairement DISCRET : petit lien sobre + champ
   mot de passe replié par défaut. Déverrouille le mode dev (qui fait réapparaître le bouton Cheat). */
#dev-access { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
  margin: 14px auto 2px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.07); }
.dev-toggle { padding: 4px 10px; border-radius: 7px; cursor: pointer;
  background: transparent; border: 1px solid rgba(255,255,255,0.14); color: #8b97a2;
  font: 500 11px system-ui, 'Segoe UI', sans-serif; letter-spacing: .02em; opacity: .75;
  transition: border-color .15s, color .15s, opacity .15s; }
.dev-toggle:hover { border-color: rgba(255,255,255,0.3); color: #cfd6dd; opacity: 1; }
.dev-toggle.is-on { border-color: #ffd24a; color: #ffd24a; opacity: 1; }
#dev-pass-wrap { display: inline-flex; gap: 5px; align-items: center; }
#dev-pass-wrap[hidden] { display: none; }
.dev-pass { width: 130px; padding: 4px 8px; border-radius: 7px;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.22); color: #fff;
  font: 500 12px system-ui, 'Segoe UI', sans-serif; }
.dev-pass::placeholder { color: #8b97a2; }
.dev-pass-ok { padding: 4px 10px; border-radius: 7px; cursor: pointer;
  background: rgba(90,169,230,0.16); border: 1px solid #5aa9e6; color: #cfe6fb;
  font: 600 11px system-ui, 'Segoe UI', sans-serif; }
.dev-pass-ok:hover { background: rgba(90,169,230,0.28); color: #fff; }
.dev-status { flex-basis: 100%; text-align: center; color: #b0b8c0;
  font: 500 11px system-ui, 'Segoe UI', sans-serif; line-height: 1.35; }
.dev-status[hidden] { display: none; }

/* ACCUEIL — TABLETTE / petit écran portrait (621–940px) : dans cette plage, la carte ÉQUIPE
   restait en rangée (aperçu du navire calé à GAUCHE, pseudo à droite). On l'empile en COLONNE
   CENTRÉE pour que le bateau soit bien au milieu, avec une mer élargie (aspect 384/186) et une
   image plus grande. Placé en fin de feuille et borné à cette plage : ne perturbe pas les paliers
   téléphone (<620) ni la grille bureau (≥941px). */
@media (min-width: 621px) and (max-width: 940px) {
  #team-card { flex-direction: column; align-items: center; text-align: center; }
  #team-preview { width: 100%; align-items: center; }
  #ship-preview {
    width: min(92vw, 460px); height: auto; aspect-ratio: 384 / 186; max-width: 100%;
    margin-left: auto; margin-right: auto;
  }
  #preview-caption { width: min(92vw, 460px); max-width: 100%; margin-left: auto; margin-right: auto; }
  .team-name, .pseudo-input, #name-input { max-width: min(92vw, 460px); }
  .flag-open { margin-left: auto; margin-right: auto; }
}

/* ACCUEIL — GRAND ÉCRAN (≥1280px) : on garde la mise en page à DEUX colonnes (bloc principal
   à gauche, cartes d'info à droite) et on l'élargit simplement un peu pour respirer. Le bloc
   principal reste une PILE VERTICALE (logo → navire → modes → boutons) : les boutons sont
   TOUJOURS sous l'image, jamais sur le côté. Aucune sous-colonne, donc aucun « trou » à droite
   du navire ni logo repoussé vers le bas. */
@media (min-width: 1280px) {
  #menu-grid {
    grid-template-columns: minmax(380px, 500px) minmax(340px, 500px);
    width: min(1080px, 94vw);
    gap: 32px;
  }
}

/* ============================================================
   PAGE DE BLOCAGE ANTI-TRICHE (#cheat-block) — cf. index.html + js/anticheat.js.
   Overlay plein écran au-dessus de TOUTE l'UI. Sobre : fond marine très sombre,
   accent rouge d'alerte, cohérent avec la palette du jeu.
   ============================================================ */
#cheat-block {
  position: fixed;
  inset: 0;
  z-index: 2147483000; /* au-dessus de tout le HUD / menus / panneaux */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 24px;
  background: radial-gradient(120% 120% at 50% 30%, rgba(20, 8, 12, 0.94), rgba(6, 12, 18, 0.97));
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #f2e9e6;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}
/* défense-en-profondeur : quand la page de blocage est active, rien d'autre ne s'affiche */
body.cheat-blocked > *:not(#cheat-block) { display: none !important; }

#cheat-block .cb-box {
  max-width: 440px;
  width: 100%;
  padding: 32px 28px 28px;
  background: #10202c;
  border: 1px solid rgba(224, 74, 90, 0.5);
  border-top: 4px solid #e04a5a;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
#cheat-block .cb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-bottom: 14px;
  color: #e04a5a;
  background: rgba(224, 74, 90, 0.12);
  border-radius: 50%;
}
#cheat-block h2 {
  margin: 0 0 10px;
  font-size: 26px;
  letter-spacing: 0.3px;
  color: #ff6b78;
}
#cheat-block .cb-lead { margin: 0 0 12px; font-size: 15px; line-height: 1.45; }
#cheat-block .cb-reason { margin: 0 0 16px; font-size: 13px; color: #c9b8b4; min-height: 1em; }
#cheat-block .cb-legal {
  margin: 0 0 16px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #e8d3aa;
  background: rgba(233, 197, 58, 0.08);
  border: 1px solid rgba(233, 197, 58, 0.25);
  border-radius: 10px;
}
#cheat-block .cb-foot { margin: 0 0 20px; font-size: 12.5px; color: #9fb0bd; }
#cheat-block .cb-reload {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 12px 22px;
  font: inherit;
  font-weight: 700;
  color: #10202c;
  background: #e9c53a;
  border-radius: 10px;
  transition: transform 0.08s ease, background 0.15s ease;
}
#cheat-block .cb-reload:hover { background: #f2d461; }
#cheat-block .cb-reload:active { transform: translateY(1px); }