/* =====================================================================================
   REFONTE ACCUEIL 2026-07-08 (Dovion) — fond map animé, Login/Shop en coin haut-droite,
   bloc central compact (pseudo + drapeau / mode + serveur / Play), popup Login, états
   « connexion requise ». Feuille DÉDIÉE, chargée APRÈS style.css dans index.html → ses
   règles priment (même spécificité, source plus tardive) sur l'accueil historique.
   Elle est isolée pour éviter les conflits d'édition concurrente sur style.css.
   Palette navale sobre (marine + or), cohérente avec le jeu.
   ===================================================================================== */

/* --- Fond map animé (js/menubg.js) : canvas plein écran (fixe) + voile de lisibilité --- */
#menu-map-bg {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block; pointer-events: none;
}
#menu-map-veil {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  /* voile ALLÉGÉ : la carte animée (mer + îles colorées) ressort davantage — accueil plus clair
     et coloré, tout en gardant juste ce qu'il faut de contraste aux bords pour la lisibilité. */
  background:
    radial-gradient(ellipse at 50% 42%, rgba(10,26,38,0.06), rgba(8,20,30,0.30) 82%),
    linear-gradient(180deg, rgba(8,20,30,0.26), rgba(8,20,30,0.05) 34%, rgba(8,20,30,0.32));
}
/* l'ancienne scène « coucher de soleil » est remplacée par le fond map */
#menu-sky { display: none !important; }
/* contenu au-dessus du canvas + voile */
#menu-grid, #menu-corner, .menu-legal-footer { position: relative; z-index: 2; }
/* panneaux « verre Ghibli » : verts-chauds translucides + fort flou → plus clairs, la carte
   colorée respire au travers, tout en gardant le texte clair lisible. */
#menu-main, #menu-side {
  background: linear-gradient(180deg, rgba(36, 54, 50, 0.66), rgba(27, 43, 41, 0.74));
  border: 1px solid rgba(205, 224, 188, 0.16);
  border-radius: 18px;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 14px 36px rgba(10, 20, 16, 0.32);
}

/* --- Barre HAUT-DROITE : Login + Shop --- */
#menu-corner {
  position: absolute; top: clamp(10px, 2vh, 18px); right: clamp(10px, 2vw, 20px);
  z-index: 20; display: flex; gap: 10px; align-items: center;
}
.menu-corner-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; cursor: pointer;
  font-family: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  font-size: 14px; font-weight: 800; letter-spacing: 0.3px;
  border-radius: 10px; border: 1.5px solid #3d6f92; color: #eaf2fb;
  background: linear-gradient(180deg, rgba(30,44,64,0.94), rgba(18,30,44,0.94));
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: border-color .15s ease, transform .08s ease, box-shadow .15s ease;
}
.menu-corner-btn:hover { border-color: #5aa9e6; transform: translateY(-1px); }
.menu-corner-btn:active { transform: translateY(1px); }
.menu-corner-btn svg { display: block; }
.menu-corner-btn.hidden { display: none; }
.btn-login .btn-login-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.btn-login .btn-login-avatar.hidden { display: none; }
.btn-login.is-connected { border-color: #7ad39a; }
.btn-login.is-connected .btn-login-ic { display: none; }
.btn-login.is-connected .btn-login-txt { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Bouton LOGIN mis en avant (appel à l'action) TANT QUE le joueur n'est pas connecté : fond plein
   accentué + halo, pour se démarquer nettement de la barre sombre du coin (retour joueur : « login
   pas assez démarqué »). Une fois connecté, il redevient sobre (règle .is-connected ci-dessus). */
.menu-corner-btn.btn-login:not(.is-connected) {
  border-color: #6fc0ea;
  background: linear-gradient(180deg, #2f86c2, #1d6098);
  color: #f4faff;
  box-shadow: 0 4px 16px rgba(47,134,194,0.5);
}
.menu-corner-btn.btn-login:not(.is-connected):hover { border-color: #a6ddff; }
.menu-corner-btn.btn-login:not(.is-connected) .btn-login-ic { color: #eaf6ff; }
.menu-corner-btn.btn-shop { border-color: #c39a45; padding: 7px 12px; }
.menu-corner-btn.btn-shop:hover { border-color: #f0d27a; }
.menu-corner-btn.btn-shop .btn-shop-ic {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  color: #2a1f08; background: linear-gradient(180deg, #f3d179, #e2b64f); border-radius: 7px;
}
.menu-corner-btn.btn-shop .btn-shop-txt { color: #f6ecce; font-size: 14px; }
/* le tag « skins & coffres » de l'ancien bouton boutique n'a plus sa place dans le coin compact */
#menu-corner .btn-shop-tag { display: none; }

/* --- Bloc central : pseudo + drapeau côte à côte --- */
.pseudo-flag-row {
  display: flex; align-items: stretch; justify-content: center; gap: 10px;
  width: 100%; max-width: 430px; margin: 4px auto 0;
}
.pseudo-flag-row #preview-caption { flex: 1 1 auto; min-width: 0; display: flex; }
.pseudo-flag-row #pseudo-edit {
  justify-content: center; width: 100%;
  background: rgba(8, 22, 32, 0.5); border: 1px solid #33566b; border-radius: 10px; padding: 6px 8px;
}
.pseudo-flag-row #name-input { max-width: none; }
.pseudo-flag-row .flag-open { flex: 0 0 auto; align-self: stretch; margin: 0; }

/* --- Sélecteur de serveur (visuel, mono-région active) --- */
.server-select { position: relative; width: 100%; max-width: 320px; margin: 6px auto 0; }
.srv-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; cursor: pointer;
  text-align: left; color: #cfe0ec; background: rgba(8, 22, 32, 0.6);
  border: 1px solid #33566b; border-radius: 10px; font-size: 13px; font-weight: 700;
  transition: border-color .15s ease;
}
.srv-toggle:hover { border-color: #5aa9e6; }
.srv-ic { width: 9px; height: 9px; border-radius: 50%; background: #6fe08a; box-shadow: 0 0 8px rgba(111,224,138,0.8); flex: 0 0 auto; }
.srv-lbl { text-transform: uppercase; letter-spacing: 0.6px; font-size: 11px; color: #9fb6c6; }
.srv-val { margin-left: auto; color: #f0d97a; font-weight: 800; }
.srv-chev { flex: 0 0 auto; color: #9fb6c6; }
.srv-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 25;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: #14303f; border: 1px solid #3d6f92; border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.srv-menu.hidden { display: none; }
.srv-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px;
  cursor: pointer; text-align: left; color: #dfeaf2; background: transparent;
  border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 700;
}
.srv-opt:hover:not([disabled]) { background: rgba(90,169,230,0.12); border-color: #33566b; }
.srv-opt.is-selected { border-color: #f0d97a; color: #f0d97a; }
.srv-opt-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #7ea08f; }
.srv-opt.is-selected .srv-opt-tag { color: #cbb45f; }
.srv-opt.is-soon { opacity: 0.55; cursor: not-allowed; }
.srv-opt.is-soon .srv-opt-tag { color: #9bb0bd; font-style: italic; }

/* --- État « recherche du meilleur serveur » (chargement au 1er affichage) --- */
.srv-toggle.is-loading { cursor: progress; }
.srv-toggle.is-loading .srv-val { color: #9fb6c6; font-weight: 700; font-style: italic; }
.srv-toggle.is-loading .srv-ic { background: #f0c14b; box-shadow: 0 0 8px rgba(240,193,75,0.8); animation: srvBlink 0.9s ease-in-out infinite; }
.srv-toggle.is-loading .srv-chev { display: none; }
.srv-spin {
  display: none; flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(159,182,198,0.35); border-top-color: #5aa9e6; animation: srvSpin 0.7s linear infinite;
}
.srv-toggle.is-loading .srv-spin { display: inline-block; }

/* --- Lignes serveur : nom + méta (ping / joueurs) à gauche, tag d'état à droite --- */
.srv-opt-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.srv-opt-name { font-weight: 800; }
.srv-opt-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; }
.srv-ping { color: #9fb6c6; letter-spacing: 0.2px; }
.srv-ping.is-good { color: #6fe08a; }
.srv-ping.is-mid { color: #f0d97a; }
.srv-ping.is-bad { color: #e88b6a; }
.srv-pop { color: #b9cdda; font-variant-numeric: tabular-nums; }
.srv-pop.pulse { animation: srvPop 0.5s ease; }

.srv-opt-tag.is-on { color: #6fe08a; }
.srv-opt-tag.is-full { color: #e0637a; }

/* Serveurs vitrine « complet » : non rejoignables. */
.srv-opt.is-full { cursor: not-allowed; }
.srv-opt.is-full .srv-opt-name { color: #c3d2de; }
.srv-opt.is-full:hover { background: rgba(224,99,122,0.10); border-color: rgba(224,99,122,0.35); }
.srv-opt.is-full .srv-pop { color: #e0637a; }
.srv-opt.shake { animation: srvShake 0.4s ease; }

@keyframes srvSpin { to { transform: rotate(360deg); } }
@keyframes srvBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes srvPop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes srvShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* --- Popup Login --- */
#login-panel { z-index: 46; }
#login-box {
  width: min(460px, 92vw); margin: auto; text-align: center;
  background: #14273a; border: 1px solid #3d6f92; border-radius: 16px; padding: 26px 24px;
  box-shadow: 0 26px 70px rgba(0,0,0,0.6);
}
#login-box h2 { font-size: 24px; font-weight: 900; color: #eef4fa; margin-bottom: 8px; }
.login-lead { font-size: 13.5px; line-height: 1.5; color: #b9cdda; margin-bottom: 16px; }
.login-lead b { color: #f0d97a; }
#login-box .auth-box { justify-content: center; min-height: 46px; margin: 4px 0 10px; }
.login-note { font-size: 11.5px; color: #8fa6b4; margin: 4px 0 14px; }
.login-perks { list-style: none; display: grid; gap: 6px; text-align: left; max-width: 320px; margin: 0 auto; padding: 0; }
.login-perks li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #cfe0ec; }
.login-perk-ic {
  flex: 0 0 auto; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; color: #10202c; background: #7ad39a; border-radius: 50%;
}
body.login-modal-open { overflow: hidden; }

/* --- Meilleurs capitaines déplacés dans les Options --- */
.opt-card--captains .opt-captains-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.opt-card--captains .opt-captains-list li {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #dfeaf2;
  padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.opt-card--captains .opt-captains-list li.empty { color: #90a4b2; border: 0; }
.opt-card--captains .opt-captains-list .lb-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-card--captains .opt-captains-list .hs-mode { font-size: 10px; color: #90a4b2; text-transform: uppercase; }
.opt-card--captains .opt-captains-list b { color: #f0d97a; }

/* --- États « connexion requise » --- */
.menu-chest-badge.is-login-locked { filter: grayscale(0.4) brightness(0.9); }
.menu-chest-badge.is-login-locked::after {
  content: '\1F512'; position: absolute; right: -6px; bottom: -6px;
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; background: #14303f; border: 1.5px solid #f0d97a; border-radius: 50%;
}
.flag-sw.login-locked .flag-lock-px { color: #cfe0ec; font-size: 8px; }
.shop-action-btn.is-login { background: linear-gradient(180deg, #3a6a86, #2b5470); color: #eaf6ff; }
.shop-action-btn.is-login:hover { background: linear-gradient(180deg, #457a98, #33627f); }

/* --- Responsive : accueil compact « un écran » --- */
@media (min-width: 941px) {
  #menu-main .menu-logo-img { max-width: 250px; }
  #menu-corner { top: 14px; right: 18px; }
}
@media (min-width: 941px) and (max-height: 860px) {
  #menu-main .menu-teaser { display: none; }
  #menu #menu-main .menu-logo-img { max-width: 210px; }
  #team-card #ship-preview { height: 84px; }
}
@media (min-width: 941px) and (max-height: 720px) {
  #team-card #ship-preview { height: 66px; }
  #menu-main, #menu-side { padding: 14px 20px; }
}
@media (max-width: 940px) {
  #menu-corner { top: 8px; right: 8px; gap: 6px; }
  .menu-corner-btn { padding: 7px 10px; font-size: 12.5px; }
  .menu-corner-btn.btn-shop .btn-shop-txt, .btn-login .btn-login-txt { font-size: 12.5px; }
  .menu-corner-btn.btn-shop .btn-shop-ic { width: 22px; height: 22px; }
  #menu-grid { margin-top: 44px; }
  .pseudo-flag-row, .server-select { max-width: 100%; }
}
@media (max-width: 420px) {
  .menu-corner-btn .btn-login-txt, .menu-corner-btn.btn-shop .btn-shop-txt { display: none; }
  .menu-corner-btn { padding: 8px; }
}

/* ============================================================================================
   RETOURS 2026-07-08 (lot 2) : aperçu navire retiré, drapeau plus gros, blocs compactés, serveur
   non coupé, Options/Son en icônes dans le coin + onglets Options, MODE TEST en badge « i »,
   popup Login avec coffre de gemmes, coffre verrouillé plus animé.
   ============================================================================================ */

/* Aperçu du navire retiré : le fond map montre déjà des bateaux qui se battent. On masque le CANVAS
   (l'« Image d'illustration ») — PAS #team-preview, qui héberge encore la confirmation MODE TEST
   (#cheat-confirm) et les contrôles développeur (#cheat-controls). Le conteneur devient invisible
   (sans fond/bordure/hauteur) tant que rien n'y est actif. */
#ship-preview { display: none !important; }
#team-preview { background: none !important; border: 0 !important; min-height: 0; padding: 0; margin: 0; }
#team-card { min-height: 0; gap: 8px; }

/* « Mon équipe » : vignette de drapeau PLUS GROSSE (le drapeau devient le repère principal). */
.flag-open { padding: 8px 14px; gap: 12px; }
.pseudo-flag-row .flag-open-vis { width: 62px; height: 42px; border-radius: 6px; }
.flag-open-txt b { font-size: 10px; }
#flag-open-name { font-size: 16px; }

/* Missions du jour + Quêtes : blocs COMPACTS, textes explicatifs retirés. */
#menu-side .menu-card { padding: 12px 14px; }
#menu-side .menu-card h3 { margin-bottom: 6px; }
/* Carte RECORDS (accueil) : deux compteurs (navires coulés / or), demande « compteur de kills à l'accueil ». */
.menu-records-row { display: flex; gap: 10px; }
.menu-records-row .menu-rec { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(140,180,220,0.14); }
.menu-records-row .menu-rec-v { font-size: 20px; font-weight: 800; color: #ffd75e; line-height: 1; font-variant-numeric: tabular-nums; }
.menu-records-row .menu-rec-l { font-size: 10px; letter-spacing: 0.3px; text-transform: uppercase; color: #9db6c8; text-align: center; }
/* marqueur VIP sur le rang (accueil) quand un grade est actif */
.reserve-rank.is-vip { color: #ffd75e; font-weight: 800; text-shadow: 0 0 8px rgba(255,215,94,0.4); }
.menu-reward-note, .menu-chests-hint { display: none !important; }
#menu-missions { gap: 6px; }

/* Serveur : la liste déroulante ne doit PLUS être coupée (#menu-main était overflow:hidden). */
#menu-main, .menu-side-actions { overflow: visible; }
.server-select { z-index: 6; }

/* MODE TEST reconnu : petit badge « i » discret au lieu du gros bandeau jaune. */
#cheat-confirm:not([hidden]) {
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 280px; margin: 4px auto 0; padding: 4px 12px 4px 6px;
  font-size: 10px; line-height: 1.25; font-weight: 600; text-align: left;
  color: #cbb45f; background: rgba(240,217,122,0.08);
  border: 1px solid rgba(240,217,122,0.35); border-radius: 999px;
}
#cheat-confirm:not([hidden])::before {
  content: 'i'; flex: 0 0 auto;
  width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center;
  font-style: italic; font-weight: 900; font-size: 11px;
  color: #2a1a06; background: #f0d97a; border-radius: 50%;
}

/* Barre haut-droite : Options (roue) + Son en ICÔNES, à gauche de Login/Shop. */
.menu-cta-row { display: none !important; } /* rangée d'origine vidée (contrôles déplacés dans le coin) */
#menu-corner .corner-icon {
  width: 40px; min-width: 40px; padding: 8px; gap: 0; justify-content: center;
  font-size: 0; color: #eaf2fb;
}
#menu-corner .corner-icon .opt-gear { display: inline-flex; }
#menu-corner .corner-icon .opt-gear svg,
#menu-corner .corner-icon svg { width: 18px; height: 18px; }
#menu-corner .corner-icon.muted { border-color: #6a3540; color: #ec8d8d; }
#menu-corner .corner-icon .pwa-badge { font-size: 10px; }

/* Onglets du panneau Options. */
#opt-tabs {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin: 4px 0 14px;
}
.opt-tab {
  padding: 7px 16px; 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 .15s ease, color .15s ease, background .15s ease;
}
.opt-tab:hover { border-color: #5aa9e6; color: #cfe0ec; }
.opt-tab.selected { color: #0c1a24; background: linear-gradient(90deg, #f0d97a, #e0b84a); border-color: #f0d97a; }
.opt-card.opt-card-hidden { display: none !important; }
.opt-card--howto .opt-open-tuto { margin-top: 4px; }

/* Popup Login : COFFRE rempli de gemmes (rubis / émeraude / or) → donne envie de se connecter. */
.login-chest { display: flex; justify-content: center; margin: -4px 0 10px; }
.login-chest svg { width: 116px; height: auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.55)); }
.login-chest .lc-gleam { transform-origin: 58px 40px; animation: lcGleam 2.6s ease-in-out infinite; }
.login-chest .lc-spark { animation: lcSpark 1.9s ease-in-out infinite; }
.login-chest .lc-spark2 { animation: lcSpark 1.9s ease-in-out .55s infinite; }
.login-chest .lc-spark3 { animation: lcSpark 1.9s ease-in-out 1.15s infinite; }
@keyframes lcGleam { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes lcSpark { 0%,100% { opacity: 0; transform: translateY(0) scale(.55); } 42% { opacity: 1; transform: translateY(-3px) scale(1); } }

/* Coffre gratuit VERROUILLÉ (invité) : animation d'appel plus forte pour inciter au clic. */
.menu-chest-badge.is-login-locked {
  filter: none;
  animation: chestLockedPulse 1.5s ease-in-out infinite;
}
.menu-chest-badge.is-login-locked svg { animation: chestLockedWobble 1.5s ease-in-out infinite; }
@keyframes chestLockedPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(240,217,122,0), 0 4px 12px rgba(0,0,0,0.35); border-color: #f0d97a; }
  50% { box-shadow: 0 0 0 7px rgba(240,217,122,0.18), 0 6px 20px rgba(240,217,122,0.55); border-color: #ffe9a8; }
}
@keyframes chestLockedWobble {
  0%,100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-6deg) scale(1.07); }
  75% { transform: rotate(6deg) scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .login-chest .lc-gleam, .login-chest .lc-spark, .login-chest .lc-spark2, .login-chest .lc-spark3,
  .menu-chest-badge.is-login-locked, .menu-chest-badge.is-login-locked svg { animation: none !important; }
}

/* ============================================================================================
   RETOURS 2026-07-08 (lot 3) : fond map plus CLAIR, logo plus GRAND, blocs + coin CENTRÉS,
   PORTE-DRAPEAU (mât + drapeau du camp), badge MODE TEST centré.
   ============================================================================================ */

/* Fond map moins assombri (la mer claire doit ressortir). */
#menu-map-veil {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(6,30,34,0.08), rgba(6,30,34,0.32) 84%),
    linear-gradient(180deg, rgba(6,30,34,0.26), rgba(6,30,34,0.08) 34%, rgba(6,30,34,0.32)) !important;
}

/* Logo du site PLUS GRAND (il était trop petit). */
#menu-main .menu-logo-img { max-width: 360px !important; }
@media (min-width: 941px) { #menu #menu-main .menu-logo-img { max-width: 340px !important; } }
@media (min-width: 941px) and (max-height: 820px) { #menu #menu-main .menu-logo-img { max-width: 290px !important; } }

/* Blocs + coin CENTRÉS ensemble : le coin Login/Shop s'aligne sur le BORD DROIT de la grille
   centrée (au lieu de coller au bord de l'écran, ce qui le désolidarisait des deux blocs). */
#menu-grid { margin-left: auto; margin-right: auto; }
@media (min-width: 941px) {
  #menu-corner {
    right: max(16px, calc((100vw - min(1180px, 96vw)) / 2)) !important;
  }
}

/* PORTE-DRAPEAU (centre de l'accueil) : mât + drapeau du camp choisi (remplace l'aperçu navire).
   Injecté par js/ui.js dans #team-preview ; le drapeau (image nation ou bandes club) est posé en
   fond de .fs-flag par updateFlagTrigger(). Léger flottement. */
#team-preview { text-align: center; }
.flag-stand { position: relative; width: 132px; height: 104px; margin: 2px auto 0; }
.flag-stand .fs-base {
  position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 40px; height: 9px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #caa96a, #8a6f42);
  box-shadow: 0 3px 8px rgba(0,0,0,0.35);
}
.flag-stand .fs-pole {
  position: absolute; left: 30px; bottom: 6px; width: 5px; height: 92px; border-radius: 3px;
  background: linear-gradient(180deg, #e6d29a, #9c8150);
}
.flag-stand .fs-pole::before {
  content: ''; position: absolute; left: -3px; top: -7px; width: 11px; height: 11px;
  border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe9a8, #d8b45a);
}
.flag-stand .fs-flag {
  position: absolute; left: 33px; top: 6px; width: 88px; height: 56px; border-radius: 3px;
  background: #0c1a24 center / cover no-repeat;
  box-shadow: 0 5px 12px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.16);
  transform-origin: left center; animation: fsWave 3.6s ease-in-out infinite;
}
@keyframes fsWave {
  0%,100% { transform: perspective(200px) rotateY(-6deg) skewY(-1.4deg); }
  50% { transform: perspective(200px) rotateY(6deg) skewY(1.4deg); }
}
@media (prefers-reduced-motion: reduce) { .flag-stand .fs-flag { animation: none; } }

/* MODE TEST : badge « i » CENTRÉ sous le porte-drapeau. */
#cheat-confirm:not([hidden]) { margin-left: auto; margin-right: auto; }

/* ============================================================================================
   RETOURS 2026-07-08 (lot 4) : logo encore plus grand, drapeau du bouton retiré (le porte-drapeau
   le remplace), porte-drapeau recentré, MODE TEST supprimé, pseudo pleine largeur, bloc 2 abaissé,
   coffre gratuit agrandi dans son cadre.
   ============================================================================================ */

/* Logo DOVION encore plus grand. */
#menu-main .menu-logo-img { max-width: 440px !important; }
@media (min-width: 941px) { #menu #menu-main .menu-logo-img { max-width: 420px !important; } }
@media (min-width: 941px) and (max-height: 820px) { #menu #menu-main .menu-logo-img { max-width: 340px !important; } }

/* MODE TEST : visuel entièrement supprimé de l'accueil (le rond « i »). La détection réelle du
   mode test reste active (pseudo caché / serveur) — seul l'indicateur visuel est masqué. */
#cheat-confirm { display: none !important; }

/* Le porte-drapeau REMPLACE la miniature du bouton « Mon équipe » → on masque la vignette du bouton. */
.flag-open-vis { display: none !important; }

/* Porte-drapeau RECENTRÉ (socle sous le mât, drapeau à droite du mât) + drapeau un peu plus grand. */
.flag-stand { width: 156px; height: 110px; }
.flag-stand .fs-pole { left: 40px; bottom: 8px; height: 96px; }
.flag-stand .fs-base { left: 42px; bottom: 2px; width: 46px; }
.flag-stand .fs-flag { left: 45px; top: 8px; width: 100px; height: 62px; }

/* PSEUDO : le champ prend TOUTE la largeur (la rangée pseudo/équipe s'empile en colonne). */
.pseudo-flag-row { flex-direction: column; align-items: stretch; gap: 8px; max-width: 340px; }
.pseudo-flag-row #preview-caption { width: 100%; }
.pseudo-flag-row .flag-open { width: 100%; justify-content: center; }

/* BLOC 2 (réserve XP / missions / quêtes) ABAISSÉ pour dégager la rangée de boutons du coin
   (roue, son, Login, Shop) au-dessus, sur le même alignement. */
@media (min-width: 941px) { #menu-side { margin-top: 48px; } }

/* Coffre gratuit : visuel AGRANDI dans son cadre (il paraissait trop petit). */
.menu-chest-badge svg { width: 40px !important; height: 34px !important; }
.play-row .menu-chest-badge { width: 62px; min-width: 62px; }

/* ============================================================================================
   RETOURS 2026-07-08 (lot 5) : drapeau porte-drapeau un peu plus petit, logo un peu plus grand,
   boutons du coin ALIGNÉS sur la bordure droite des blocs (même conteneur centré que la grille).
   ============================================================================================ */

/* Drapeau du porte-drapeau un peu PLUS PETIT (il était un poil trop grand). */
.flag-stand { width: 150px; height: 102px; }
.flag-stand .fs-pole { height: 88px; }
.flag-stand .fs-flag { width: 86px; height: 54px; }

/* Logo un peu plus grand (l'emblème à côté de DOVION paraissait petit). NB : emblème + « DOVION »
   sont une SEULE image (logo-wordmark.png) → ils grandissent ensemble ; pour agrandir SEULEMENT
   l'emblème il faudrait régénérer l'asset. */
#menu-main .menu-logo-img { max-width: 470px !important; }
@media (min-width: 941px) { #menu #menu-main .menu-logo-img { max-width: 460px !important; } }

/* Boutons du coin ALIGNÉS sur la bordure DROITE des blocs : on place #menu-corner dans le MÊME
   conteneur centré que #menu-grid (largeur + margin auto identiques) et on pousse les boutons à
   droite (flex-end) → le bord droit de « Shop » colle au bord droit du bloc de droite. */
@media (min-width: 941px) {
  #menu-corner {
    left: 0; right: 0; width: min(1180px, 96vw); margin-left: auto; margin-right: auto;
    justify-content: flex-end; padding-right: 0;
    top: clamp(16px, 3.5vh, 30px);
  }
}

/* ============================================================================================
   RETOURS 2026-07-08 (lot 6) : les boutons du coin s'alignent sur le bord droit du bloc
   « Réserve d'XP » (menu-side) — PAS sur la grille, plus large (colonnes centrées) — avec un
   ESPACEMENT sous les boutons. Le bord droit du bloc étant en retrait, sa position exacte est
   mesurée en JS (UI.positionCorner) qui pose left/right/top inline ; ici on neutralise la largeur
   pleine du lot précédent et on réserve la place au-dessus du bloc.
   ============================================================================================ */
@media (min-width: 941px) {
  #menu-corner { width: auto; left: auto; margin: 0; }
  #menu-side { margin-top: 58px; } /* place pour la rangée de boutons + écart net au-dessus du bloc */
}

/* ============================================================================================
   RETOURS 2026-07-08 (lot 7) : bouton Shop plus COMPACT (il était trop gros par rapport aux
   autres boutons du coin — pastille dorée + texte trop imposants).
   ============================================================================================ */
#menu-corner .btn-shop { padding: 6px 11px; gap: 7px; }
#menu-corner .btn-shop .btn-shop-ic { width: 22px; height: 22px; border-radius: 6px; }
#menu-corner .btn-shop .btn-shop-ic svg { width: 15px; height: 15px; }
#menu-corner .btn-shop .btn-shop-txt { font-size: 13px; }
/* on aligne aussi Login sur le même gabarit compact. */
#menu-corner .btn-login { padding: 7px 12px; }
#menu-corner .btn-login .btn-login-txt { font-size: 13px; }

/* ============================================================================================
   RETOURS 2026-07-08 (lot 8) : coin HOMOGÈNE (tous à la même hauteur), Shop compact MAIS mis en
   évidence (nouveautés) + puce d'offre à côté, pleine largeur ÉTIRABLE sur grand écran, compactage
   MOBILE pour tenir en un seul écran.
   ============================================================================================ */

/* Tous les boutons du coin à la MÊME HAUTEUR (38px), non étirables. */
#menu-corner .menu-corner-btn { height: 38px; box-sizing: border-box; flex: 0 0 auto; width: auto !important; }
#menu-corner .corner-icon { width: 38px !important; height: 38px; padding: 0; }
#menu-corner .btn-login, #menu-corner .btn-shop { height: 38px; }

/* Shop COMPACT mais MIS EN ÉVIDENCE (nouveautés) : halo doré pulsé + pastille rouge de notification. */
#menu-corner .btn-shop { position: relative; animation: shopGlow 2.4s ease-in-out infinite; }
@keyframes shopGlow {
  0%,100% { box-shadow: 0 0 0 1px rgba(240,210,122,0.4), 0 0 8px rgba(240,210,122,0.22); }
  50% { box-shadow: 0 0 0 1px rgba(240,210,122,0.78), 0 0 18px rgba(240,210,122,0.5); }
}
#menu-corner .btn-shop::after {
  content: ''; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%;
  background: #e0463f; border: 2px solid #0e2436; box-shadow: 0 0 8px rgba(224,70,63,0.85);
  animation: shopDot 1.5s ease-in-out infinite;
}
@keyframes shopDot { 0%,100% { transform: scale(1); } 50% { transform: scale(1.28); } }

/* Puce « Nouveautés » (offre) à gauche du bouton Shop. */
.shop-promo {
  display: inline-flex; align-items: center; height: 38px; padding: 0 11px; box-sizing: border-box;
  font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  color: #2a1f08; background: linear-gradient(180deg, #f7dd8a, #e6b94f);
  border: 1px solid #c39a45; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3); flex: 0 0 auto;
  animation: shopGlow 2.4s ease-in-out infinite;
}
@media (max-width: 420px) { .shop-promo { display: none; } } /* trop étroit sur très petit écran */
@media (prefers-reduced-motion: reduce) {
  #menu-corner .btn-shop, #menu-corner .btn-shop::after, .shop-promo { animation: none; }
}

/* Pleine largeur ÉTIRABLE sur grand écran : la grille + les colonnes s'élargissent si possible. */
@media (min-width: 941px) {
  #menu #menu-grid { width: min(1320px, 96vw); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1500px) { #menu #menu-grid { width: min(1480px, 94vw); } }

/* MOBILE : compactage pour tenir en UN écran (moins de hauteur perdue). */
@media (max-width: 940px) {
  #menu { padding-top: 8px; }
  #menu-grid { margin-top: 40px; row-gap: 10px; }
  #menu-main .menu-logo-img { max-width: 250px !important; }
  #menu-main, #menu-side { padding: 12px 14px; }
  #menu-main { gap: 7px; }
  #menu-side { gap: 8px; }
  .flag-stand { height: 78px; width: 122px; }
  .flag-stand .fs-pole { height: 66px; }
  .flag-stand .fs-flag { width: 66px; height: 42px; }
  #menu-side .menu-card { padding: 9px 11px; }
  .mode-btn { min-width: 140px; padding: 7px 12px; }
  #btn-play, #btn-respawn { padding: 12px 30px; font-size: 16px; }
}

/* ============================================================================================
   RETOURS 2026-07-08 (lot 9) : les deux gros blocs à la MÊME HAUTEUR + alignés, drapeau plus petit,
   logo plus grand, fond des blocs plus transparent.
   ============================================================================================ */

/* Blocs de MÊME HAUTEUR, alignés en haut : la rangée de boutons flotte au-dessus du bloc de droite
   dans le padding supérieur (agrandi) — on n'abaisse plus le bloc (fini le décalage de hauteur). */
@media (min-width: 941px) {
  #menu { padding-top: 60px; }
  #menu #menu-grid { align-items: stretch; }
  #menu-side { margin-top: 0 !important; }
  /* QUÊTES DÉSACTIVÉES : la colonne droite n'a plus que la carte « Réserve d'XP » → l'étirer en un
     grand panneau vide fait « pas fini ». On épure : le panneau droit ne s'étire plus (align-self),
     perd son habillage de cadre (la carte Réserve a déjà le sien) et se CENTRE verticalement en face
     du panneau gauche → présentation propre et équilibrée, sans grand vide. */
  body.quests-off #menu #menu-side {
    align-self: center;
    background: none; border: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding-top: 0; padding-bottom: 0;
  }
}

/* Fond des deux gros blocs PLUS TRANSPARENT (on voit davantage la map derrière). */
#menu-main, #menu-side { background: rgba(20, 24, 46, 0.66) !important; }

/* Logo du jeu encore PLUS GRAND. */
#menu-main .menu-logo-img { max-width: 560px !important; }
@media (min-width: 941px) { #menu #menu-main .menu-logo-img { max-width: 540px !important; } }
@media (min-width: 941px) and (max-height: 820px) { #menu #menu-main .menu-logo-img { max-width: 430px !important; } }

/* Drapeau (porte-drapeau) PLUS PETIT. */
.flag-stand { width: 130px; height: 90px; }
.flag-stand .fs-pole { height: 76px; }
.flag-stand .fs-flag { width: 72px; height: 46px; }

/* ============================================================================================
   RETOURS 2026-07-09 (lot 6, accueil) : fond plus CLAIR aux couleurs de la BOUTIQUE (ciel/sauge/
   crème), logo REMONTÉ dans son bloc, porte-drapeau (drapeau plus petit + mât plus haut).
   ============================================================================================ */

/* FOND accueil plus clair, teinté « boutique » : la carte animée des navires ressort en clair et
   chaud, comme derrière la popup boutique (fini le voile trop sombre). */
#menu-map-veil {
  background:
    radial-gradient(ellipse at 50% 26%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(191, 224, 234, 0.32), rgba(220, 236, 214, 0.12) 46%, rgba(244, 234, 210, 0.36)) !important;
}
/* Panneaux : teinte slate-teal (accordée à la mer + à la boutique), assez opaque pour garder le
   texte clair lisible sur le fond désormais clair. */
#menu-main, #menu-side { background: rgba(22, 38, 52, 0.64) !important; }

/* LOGO remonté dans son bloc (moins d'air au-dessus). */
#menu-main h1 { margin-top: -6px; }
#menu-main .menu-logo-img { margin-bottom: 2px; }

/* PORTE-DRAPEAU : mât PLUS HAUT, drapeau PLUS PETIT (hissé au sommet du mât). */
.flag-stand { width: 150px; height: 134px; }
.flag-stand .fs-pole { left: 40px; bottom: 8px; height: 120px; }
.flag-stand .fs-flag { left: 44px; top: 8px; width: 64px; height: 40px; }

/* ============================================================================================
   MOBILE — CORRECTIONS INTERFACE (boutons Login/Shop intégrés + drapeau + pseudo)
   Sur petit écran, les boutons Login/Shop en position:absolute créent un espace mort
   en haut du menu (margin-top artificiel). On les intègre dans le flux normal de #menu-side
   (en-tête de la colonne droite), ce qui supprime le margin-top et libère de la hauteur.
   ============================================================================================ */
@media (max-width: 940px) {
  /* Supprime l'espace réservé pour les boutons flottants. */
  #menu-grid { margin-top: 8px !important; }
  #menu { padding-top: 4px; }

  /* Intègre #menu-corner dans le flux au-dessus de #menu-side au lieu de le laisser absolu. */
  #menu-corner {
    position: static !important;
    width: 100%;
    justify-content: flex-end;
    padding: 0 0 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 4px;
  }

  /* #menu-side devient un flex-column pour accueillir #menu-corner en tête.
     Les boutons sont intégrés visuellement DANS la colonne droite. */
  #menu-side {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
  }

  /* Drapeau plus compact sur mobile (le visuel était disproportionné). */
  .flag-stand { width: 64px !important; height: 56px !important; }
  .flag-stand .fs-pole { height: 48px !important; }
  .flag-stand .fs-flag { width: 40px !important; height: 26px !important; }

  /* Zone pseudo plus large : le drapeau réduit libère de l'espace pour le champ de texte. */
  .pseudo-flag-row { gap: 6px; }
  .pseudo-flag-row #preview-caption { flex: 1 1 auto; min-width: 0; }
  .pseudo-flag-row .flag-open { flex: 0 0 auto; max-width: 38%; }
  #name-input { font-size: 15px !important; }

  /* Boutons Login/Shop un peu plus compacts sur mobile. */
  .menu-corner-btn { padding: 6px 10px; font-size: 12px; }
  .shop-promo { display: none; } /* pas de place pour la puce promo */
}

/* ============================================================================================
   LOGO — badge « .io » positionné à droite du wordmark
   Le wrapper est en position:relative pour ancrer le badge en absolu.
   ============================================================================================ */
.menu-logo-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto 4px;
}
.menu-logo-wrap .menu-logo-img {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
}
/* Badge .io : positionné en bas à droite du wordmark, aligné avec la baseline du texte */
.menu-logo-io {
  position: absolute;
  right: 0;
  bottom: 14%;
  font-family: 'Pirata One', 'Georgia', serif;
  font-size: clamp(14px, 3.5cqw, 28px);
  font-weight: 700;
  color: #ffe08a;
  letter-spacing: 1px;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 940px) {
  .menu-logo-wrap { max-width: 260px; }
  .menu-logo-io { font-size: clamp(11px, 5vw, 18px); bottom: 12%; }
}

/* --- OFFRE DU JOUR (accueil) : carte promo cliquable, dorée/chaude pour attirer l'œil (ouvre la Boutique) --- */
#menu-offer-card.menu-offer {
  position: relative;
  display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; cursor: pointer; appearance: none; -webkit-appearance: none;
  padding: 13px 14px; border-radius: 16px;
  border: 1px solid rgba(224, 168, 60, 0.55);
  background: linear-gradient(135deg, rgba(240, 185, 60, 0.24), rgba(36, 54, 50, 0.72));
  box-shadow: 0 10px 26px rgba(10, 20, 16, 0.28);
  transition: transform .12s ease, box-shadow .18s ease, border-color .15s ease;
}
#menu-offer-card.menu-offer:hover { transform: translateY(-2px); border-color: #f0d27a; box-shadow: 0 14px 32px rgba(200, 140, 40, 0.32); }
.menu-offer-badge {
  position: absolute; top: -9px; left: 12px;
  font: 800 9px/1 'Trebuchet MS', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: #3a2306; background: linear-gradient(90deg, #fde047, #e0a83c);
  border-radius: 20px; padding: 4px 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.menu-offer-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; color: #3a2306;
  background: linear-gradient(160deg, #fde047, #e0a83c);
  box-shadow: 0 3px 10px rgba(200, 140, 40, 0.4);
}
.menu-offer-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-offer-name { font-size: 14px; font-weight: 800; color: #ffe9a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-offer-sub { font-size: 12px; color: #d8e0cf; }
.menu-offer-cta {
  flex: 0 0 auto; font: 800 12px/1 'Trebuchet MS', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .03em;
  color: #3a2306; background: linear-gradient(90deg, #f0b93c, #d1892a);
  border-radius: 10px; padding: 9px 14px; box-shadow: 0 4px 12px rgba(200, 140, 40, 0.4);
}

/* ============================================================================================
   REFONTE « VERRE LIQUIDE » (LIQUID GLASS) 2026-07-09 — accueil moderne : panneaux très
   translucides à FORT flou + saturation, reflets spéculaires (liseré de lumière en haut),
   profondeur en couches, boutons/cartes/champs en verre cohérents, CTA « Prendre la mer » lustré
   avec balayage de lumière (shine). La carte animée derrière (mer + îles) transparaît et
   « réfracte » à travers le verre — c'est ce défilement qui donne l'aspect vivant/liquide.
   Palette froide (marine glacé) avec accents cyan + or (identité Dovion) conservés.
   Chargé APRÈS tout le reste → prime (même spécificité, source plus tardive) ; !important là où les
   lots précédents en posaient déjà. Respecte prefers-reduced-motion (shine coupé plus bas).
   ============================================================================================ */

/* Jetons locaux à l'accueil (portée #menu) — un seul endroit pour régler la « recette » du verre. */
#menu {
  --lg-radius: 22px;
  --lg-hi: rgba(255, 255, 255, 0.34);          /* reflet spéculaire (arête haute) */
  --lg-edge: rgba(168, 214, 244, 0.20);        /* liseré verre (cyan glacé) */
  --lg-shadow: 0 30px 72px rgba(3, 12, 22, 0.50);
  --lg-accent: 127, 212, 255;                  /* cyan glacé (rgb) pour halos/focus */
}

/* ---------- 1. GRANDS PANNEAUX (colonnes gauche/droite) : dalles de verre épais ---------- */
#menu-main,
#menu-side {
  /* deux couches : un léger gloss diagonal en tête + un scrim marine translucide (lisibilité). */
  background:
    linear-gradient(157deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 30%, rgba(9, 20, 32, 0.04) 100%),
    linear-gradient(180deg, rgba(17, 32, 47, 0.44), rgba(11, 23, 35, 0.56)) !important;
  border: 1px solid var(--lg-edge) !important;
  border-radius: var(--lg-radius) !important;
  /* flou fort + saturation/luminosité : c'est ce qui donne le « verre dépoli » qui vibre. */
  backdrop-filter: blur(26px) saturate(1.5) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.5) brightness(1.05) !important;
  box-shadow:
    inset 0 1px 0 var(--lg-hi),                       /* arête de lumière (haut) */
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),        /* fin liseré interne */
    inset 0 -24px 48px rgba(6, 16, 26, 0.24),         /* fond qui s'assombrit (volume) */
    var(--lg-shadow);                                  /* ombre portée profonde (flottement) */
  position: relative;
  /* Le « mouvement » du verre vient de la CARTE ANIMÉE (mer + navires) qui défile DERRIÈRE et se
     réfracte à travers le flou fort — pas d'un pseudo-élément animé sur la dalle : cela créerait un
     contexte d'empilement qui piégerait le menu déroulant du serveur et la popup d'équipe
     (position:fixed). On garde donc overflow visible et aucun ::before ici. */
}

/* ---------- 2. CARTES INTERNES (Réserve, Records, Missions, Ta partie…) : verre plus léger ---------- */
.menu-card {
  background:
    linear-gradient(162deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.015) 42%, rgba(9, 20, 32, 0.03)),
    linear-gradient(180deg, rgba(20, 35, 50, 0.34), rgba(13, 26, 39, 0.44)) !important;
  border: 1px solid rgba(168, 210, 240, 0.14) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(15px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(15px) saturate(1.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 12px 30px rgba(4, 14, 24, 0.34) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.menu-card:hover {
  border-color: rgba(var(--lg-accent), 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 16px 38px rgba(4, 14, 24, 0.40) !important;
}

/* barre de progression « Réserve d'XP » : rail en verre creusé + remplissage lumineux. */
.reserve-bar {
  background: rgba(6, 16, 26, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.reserve-fill {
  background: linear-gradient(90deg, #6fe0c4, #48c8ff) !important;
  box-shadow: 0 0 12px rgba(72, 200, 255, 0.5);
}

/* ---------- 3. CHAMPS & SÉLECTEURS en verre (pseudo, équipe, serveur, modes) ---------- */
.pseudo-flag-row #pseudo-edit,
.flag-open,
.srv-toggle,
.mode-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
              rgba(12, 26, 38, 0.42) !important;
  border: 1px solid rgba(168, 210, 240, 0.18) !important;
  backdrop-filter: blur(10px) saturate(1.25);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 14px rgba(4, 14, 24, 0.28);
}
.flag-open:hover,
.srv-toggle:hover { border-color: rgba(var(--lg-accent), 0.5) !important; }

/* MODES de jeu : tuiles de verre ; l'actif garde son anneau doré (identité). */
.mode-btn { border-radius: 12px !important; color: #eaf3fb !important; }
.mode-btn:hover:not(.is-locked) {
  border-color: rgba(var(--lg-accent), 0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 20px rgba(4, 14, 24, 0.34);
}
.mode-btn.selected {
  border-color: #ffe08a !important; color: #ffe6a0 !important;
  background: linear-gradient(180deg, rgba(240, 217, 122, 0.16), rgba(240, 217, 122, 0.05)),
              rgba(14, 26, 38, 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 1px rgba(255, 224, 138, 0.35),
    0 10px 26px rgba(240, 200, 100, 0.20) !important;
}

/* menu déroulant du serveur : verre dépoli (au lieu du bleu plat). */
.srv-menu {
  background: rgba(14, 28, 40, 0.72) !important;
  border: 1px solid rgba(168, 210, 240, 0.22) !important;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 20px 48px rgba(0, 0, 0, 0.5) !important;
}

/* ---------- 4. BOUTONS DU COIN (Login / Shop / icônes) en verre ---------- */
.menu-corner-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
              rgba(15, 29, 42, 0.5) !important;
  border: 1px solid rgba(168, 210, 240, 0.24) !important;
  color: #eaf4fb !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 6px 18px rgba(4, 14, 24, 0.42) !important;
}
.menu-corner-btn:hover { border-color: rgba(var(--lg-accent), 0.6) !important; transform: translateY(-1px); }
/* LOGIN mis en avant (invité) : verre teinté bleu lumineux — reste l'appel à l'action. */
.menu-corner-btn.btn-login:not(.is-connected) {
  background: linear-gradient(180deg, rgba(90, 190, 255, 0.42), rgba(40, 120, 200, 0.34)),
              rgba(20, 60, 96, 0.5) !important;
  border-color: rgba(150, 220, 255, 0.6) !important; color: #f4faff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 22px rgba(60, 150, 230, 0.45) !important;
}
/* SHOP : verre teinté or (garde sa pastille rouge + son halo, définis plus haut). */
.menu-corner-btn.btn-shop {
  background: linear-gradient(180deg, rgba(245, 210, 120, 0.28), rgba(200, 155, 60, 0.20)),
              rgba(30, 34, 40, 0.5) !important;
  border-color: rgba(240, 210, 122, 0.55) !important;
}

/* ---------- 5. BOUTON PRINCIPAL « Prendre la mer » : verre chaud glossy + shine ---------- */
/* Le reflet spéculaire du haut est intégré au FOND (peint sous le texte → aucune perte de
   lisibilité) ; le ::before ne porte qu'un fin balayage de lumière (shine) qui traverse la surface. */
#btn-play {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.06) 42%, transparent 58%),
    linear-gradient(150deg, #ff8a5e 0%, #f5562f 50%, #dc3e1c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -3px 6px rgba(150, 40, 10, 0.45),
    0 12px 30px rgba(224, 70, 28, 0.5),
    0 0 0 1px rgba(255, 150, 110, 0.35) !important;
}
/* balayage de lumière (shine) : fine bande diagonale claire qui traverse le CTA. Bornée par
   overflow:hidden (défini sur #btn-play dans style.css) ; passe brièvement sur le libellé (effet
   « bouton lustré » classique, sans nuire à la lecture — le texte a son ombre portée). */
#btn-play::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.26) 50%, transparent 60%);
  background-size: 250% 100%; background-repeat: no-repeat; background-position: 180% 0;
  animation: playShine 6.5s ease-in-out infinite;
}
@keyframes playShine {
  0%, 100% { background-position: 175% 0; }
  55%      { background-position: -70% 0; }
}
#btn-play > * { position: relative; z-index: 2; }   /* spinner de chargement au-dessus du shine */
#btn-play:hover { filter: brightness(1.06) saturate(1.05); }

/* coffre gratuit (à côté du CTA) : cadre de verre chaud cohérent. */
.menu-chest-badge {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)),
              rgba(120, 78, 44, 0.55) !important;
  border: 1px solid rgba(240, 217, 122, 0.7) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 16px rgba(4, 14, 24, 0.4) !important;
}

/* ---------- 6. POPUP LOGIN : boîte de verre (au lieu du bleu plat) ---------- */
#login-box {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 34%, rgba(9, 20, 32, 0.04)),
    linear-gradient(180deg, rgba(18, 34, 50, 0.7), rgba(12, 24, 38, 0.82)) !important;
  border: 1px solid rgba(168, 210, 240, 0.22) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(30px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 30px 80px rgba(0, 0, 0, 0.6) !important;
}

/* ---------- 7. Coupe le shine animé si l'utilisateur réduit les animations ---------- */
@media (prefers-reduced-motion: reduce) {
  #btn-play::before { animation: none !important; }
}

/* ============================================================================================
   ACCUEIL MOBILE « UN SEUL ÉCRAN » (2026-07-10) — plus aucun scroll sur la page d'accueil.

   Constat mesuré avant correction (iPhone 390x844) : contenu de 1703 px pour 844 px d'écran,
   soit 859 px de débordement. Les trois postes de gaspillage :
     1) #team-preview porte `flex: 1 1 240px` (style.css). Cette flex-basis est pensée pour la
        RANGÉE horizontale du bureau ; sur mobile #team-card passe en `flex-direction: column`,
        la basis s'applique donc à la HAUTEUR → 240 px réservés pour un drapeau de 56 px
        (#ship-preview est `display:none` sur mobile). ~185 px de vide pur.
     2) .pseudo-flag-row : `#preview-caption { width: min(74vw,260px) }` fige la largeur du champ
        pseudo → le sélecteur d'équipe PASSE À LA LIGNE (135 px au lieu de 66).
     3) La colonne de droite empile 5 cartes verbeuses (titres, sous-titres, notes explicatives)
        pour 691 px, alors que seules les VALEURS intéressent sur téléphone.

   Principe de la refonte : sur mobile on garde l'essentiel EN ENTIER (logo, navire/drapeau,
   pseudo, équipe, mode, « Prendre la mer »), et les cartes secondaires sont réduites à leurs
   CHIFFRES. Le détail reste accessible : « Voir tout » ouvre la popup Quêtes, les tickets et
   mini-boosts s'achètent dans la Boutique (bouton du coin). Aucun contenu n'est perdu.

   CSS uniquement : aucun id/classe n'est ajouté ni retiré → les rendus JS (UI.refreshMenu,
   shop-stripe.js, ui.js) continuent d'écrire dans les mêmes éléments.
   ============================================================================================ */
@media (max-width: 940px) {

  /* --- 1. Le conteneur : une colonne qui tient dans la hauteur VISIBLE du navigateur.
     `dvh` (dynamic viewport height) exclut la barre d'URL rétractable de Safari/Chrome mobile,
     là où `vh` la compte à tort et rendait la page scrollable de la hauteur de cette barre. --- */
  #menu {
    height: 100dvh; max-height: 100dvh;
    padding-top: max(4px, env(safe-area-inset-top));
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    display: flex; flex-direction: column;
    /* Filet de sécurité : sur un très petit écran (≤320x568) ou avec une police système géante,
       mieux vaut un scroll résiduel qu'un bouton « Prendre la mer » coupé. */
    overflow-y: auto;
  }
  #menu-grid { margin-top: 6px !important; row-gap: 8px; flex: 1 1 auto; min-height: 0; }
  #menu-main, #menu-side { padding: 10px 12px; }
  #menu-main { gap: 6px; }
  #menu-side { gap: 6px; }

  /* --- 2. En-tête : logo compact, accroche marketing retirée (elle coûte 43 px et n'aide pas
     un joueur déjà arrivé sur l'écran de lancement). --- */
  #menu-main h1 { margin: 0; gap: 0; }
  #menu-main .menu-teaser { display: none; }
  .menu-logo-wrap { max-width: 190px; margin-bottom: 0; }
  #menu #menu-main .menu-logo-img { max-width: 190px !important; }

  /* --- 3. Carte ÉQUIPE : on annule la flex-basis fantôme (poste n°1 ci-dessus). Le bloc se
     dimensionne désormais sur son contenu réel : le porte-drapeau. --- */
  #team-card { gap: 6px !important; padding: 8px 10px; }
  #team-preview { flex: 0 0 auto !important; min-height: 0; }
  .flag-stand { width: 58px !important; height: 62px !important; margin: 0 auto; }
  .flag-stand .fs-pole { height: 54px !important; }
  .flag-stand .fs-flag { width: 36px !important; height: 23px !important; }

  /* --- 4. Pseudo + équipe VRAIMENT côte à côte (poste n°2) : on lève la largeur figée du champ
     pseudo qui forçait le sélecteur d'équipe à passer à la ligne. `flex-direction: row` explicite
     car une règle de base (menu-refonte.css l.391) pose `column` hors media query → sans ce
     forçage, ma redéfinition de `display:flex` héritait de la colonne et l'empilement persistait. --- */
  .pseudo-flag-row { display: flex; flex-direction: row !important; flex-wrap: nowrap; align-items: stretch; gap: 6px; max-width: none; }
  .pseudo-flag-row #preview-caption { flex: 1 1 0; width: auto !important; max-width: none !important; min-width: 0; }
  .pseudo-flag-row #pseudo-edit { width: 100%; }
  .pseudo-flag-row .team-name,
  .pseudo-flag-row .pseudo-input,
  .pseudo-flag-row #name-input { width: 100% !important; max-width: none !important; }
  .pseudo-flag-row .flag-open { flex: 0 0 auto; max-width: 44%; padding: 6px 8px; }

  /* --- 5. Modes de jeu : côte à côte (ils étaient empilés sous 620 px). --- */
  .mode-row { flex-direction: row !important; gap: 6px; width: 100%; }
  .mode-btn { flex: 1 1 0; min-width: 0 !important; padding: 7px 6px; font-size: 13px; line-height: 1.15; }
  .mode-btn small { display: block; font-size: 10px; opacity: .8; }

  /* --- 6. Bloc d'actions : serveur discret, CTA bien présent (c'est LE bouton de l'écran). --- */
  .menu-side-actions { gap: 6px; }
  #server-select { transform: scale(.92); transform-origin: center; }
  #btn-play, #btn-respawn { padding: 12px 26px !important; font-size: 17px !important; }

  /* --- 7. Colonne secondaire : grille 2 colonnes. Les cartes larges (missions, loadout, offre)
     s'étalent sur toute la largeur ; « Réserve d'XP » et « Tes records » se PARTAGENT une rangée
     (chacune 1 colonne) au lieu d'empiler deux cartes → ~87 px regagnés, ce qui supprime le dernier
     scroll. `display:grid` en !important pour battre le `display:flex !important` posé plus haut
     (l.~579) sur #menu-side en mobile. --- */
  #menu-side {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    align-content: start;
  }
  #menu-side > .menu-card,
  #menu-side > .menu-cta-row,
  #menu-side > #menu-corner { grid-column: 1 / -1; } /* pleine largeur par défaut */
  /* Ces deux-là côte à côte. Sélecteur à 2 id (#menu-side > #…) OBLIGATOIRE : le défaut ci-dessus
     `#menu-side > .menu-card` pèse (0,1,1) et battrait un simple `#menu-reserve-card` (0,1,0). */
  #menu-side > #menu-reserve-card { grid-column: 1 / 2; }
  #menu-side > #menu-records-card { grid-column: 2 / 3; }
  #menu-side .menu-card { padding: 7px 9px; border-radius: 14px; }
  #menu-side .menu-card h3 { font-size: 12px; margin: 0 0 3px; }

  #menu-reserve-card, #menu-records-card { margin: 0; align-self: stretch; }
  #menu-reserve-card .menu-prog-sub,
  #menu-reserve-card .reserve-note,
  #menu-records-card h3 { display: none; }
  #menu-reserve-card .reserve-row { gap: 6px; }
  #menu-reserve-card .reserve-bar { margin-top: 4px; }
  #menu-records-card .menu-rec-l { font-size: 9.5px; }

  /* Missions & quêtes : l'en-tête (compteur + « Voir tout ») et le coffre du jour suffisent.
     Le détail des missions et la bande des quêtes vivent déjà dans la popup « Voir tout ». */
  #menu-missions-card .menu-reward-note,
  #menu-missions-card .menu-mq-h,
  #menu-missions-card #menu-ach-scroll,
  #menu-missions-card #menu-missions { display: none; }
  #menu-daily { padding: 6px 8px; }

  /* Ta partie : seul le compteur de tickets (dans le tag du titre) est utile ici ; les
     mini-boosts se choisissent dans la Boutique. */
  #menu-loadout-card .menu-reward-note,
  #menu-loadout-card #menu-loadout { display: none; }
  #menu-loadout-card h3 { margin: 0; }

  /* Offre du jour : carte plus plate. */
  #menu-offer-card.menu-offer { padding: 8px 10px; gap: 8px; }
  #menu-offer-card .menu-offer-ic { width: 30px; height: 30px; font-size: 17px; border-radius: 9px; }
  #menu-offer-card .menu-offer-cta { padding: 7px 11px; }

  /* --- 8. Pied de page légal : discret, sur une ligne. --- */
  .menu-legal-footer { padding: 4px 6px; gap: 4px; font-size: 10px; flex-wrap: wrap; }
  .menu-legal-footer .legal-link { font-size: 10px; }
}

/* ============================================================================================
   PORTRAIT MOBILE — ÉPURE (2026-07-13, demande) : trois ajustements ne concernant QUE le portrait
   mobile (max-width:940px + orientation:portrait), le paysage et le PC restant inchangés.
     1) SÉLECTEUR DE SERVEUR « trop visuel » → réduit à une LIGNE DISCRÈTE (plus de gros pavé
        encadré) : fond quasi transparent, pas de bordure lourde, texte compact centré. Le choix
        reste possible (le menu déroulant s'ouvre toujours au tap).
     2) 2e BLOC (#menu-side) « plus propre » : quand « Tes records » est masqué (joueur sans record),
        la carte « Réserve d'XP » ne reste plus coincée sur une demi-colonne avec un trou à droite —
        elle s'étale sur TOUTE la largeur. Hiérarchie et espacements homogénéisés (compact & aéré).
   Spécificité : on double l'id (#menu … #server-select .srv-toggle) + !important pour battre le
   pavé serveur peint par sunset-arcade.css (chargé APRÈS). Aucun id/classe modifié → JS intact.
   ============================================================================================ */
@media (max-width: 940px) and (orientation: portrait) {

  /* 1 — SERVEUR discret : ligne sobre, centrée, sans encadré marqué. On annule le scale(.92) hérité
     du bloc mobile (poste n°6) et on repeint le pavé en simple ligne (gain de hauteur ~11 px). */
  #menu #server-select { transform: none; max-width: 260px; margin: 4px auto 0; }
  #menu .menu-side-actions #server-select .srv-toggle {
    width: auto; justify-content: center; gap: 6px;
    padding: 4px 10px !important; font-size: 12px !important; font-weight: 700 !important;
    background: transparent !important; border: 0 !important;
    border-radius: 999px !important; box-shadow: none !important;
    /* ce n'est plus une cible d'action mais une simple ligne d'info : on annule le gabarit tactile
       `min-height:44px` (style.css `body.vtouch #menu-main button`) qui la regonflait à 44 px. */
    min-height: 0 !important; height: auto !important;
    opacity: 0.9;
  }
  #menu .menu-side-actions #server-select .srv-toggle:hover { opacity: 1; }
  /* pastille d'état plus petite, label « SERVEUR » atténué, valeur sans « pousser » à droite */
  #menu #server-select .srv-ic { width: 7px; height: 7px; }
  #menu #server-select .srv-lbl { font-size: 10px; letter-spacing: 0.4px; }
  #menu #server-select .srv-val { margin-left: 0; font-weight: 700 !important; }
  #menu #server-select .srv-chev { font-size: 11px; }

  /* 2 — RÉSERVE pleine largeur quand « Tes records » est masqué (joueur sans record) : la carte ne
     reste plus coincée sur une DEMI-colonne avec un vide à droite — c'était le défaut « pas propre ».
     `:has()` (Chrome 105+/Safari 15.4+) cible précisément ce cas. Mise en page horizontale nette :
     solde à gauche, rang à droite, barre dessous. Résultat plus court que l'ancienne demi-carte. */
  #menu-side:has(> #menu-records-card.hidden) > #menu-reserve-card,
  #menu-side:not(:has(> #menu-records-card)) > #menu-reserve-card {
    grid-column: 1 / -1 !important;
  }
  #menu-side:has(> #menu-records-card.hidden) > #menu-reserve-card .reserve-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  }
  #menu-side:has(> #menu-records-card.hidden) > #menu-reserve-card .reserve-bal { font-size: 21px; line-height: 1; }

  /* 3 — ESPACEMENTS COHÉRENTS (compact & aéré, SANS ajouter de hauteur — l'accueil doit tenir sans
     scroll) : coins homogènes et un titre légèrement plus lisible, en gardant le padding serré du
     bloc mobile de base. */
  #menu-side .menu-card { border-radius: 16px; }
  #menu-side .menu-card h3 { letter-spacing: 0.2px; }

  /* 4 — « Prendre la mer » CENTRÉ (demande) : le CTA était étiré bord à bord (flex:1 de style.css) ;
     on le borne à une largeur agréable et on le centre dans le panneau. Spécificité #menu .play-row
     #btn-play (2 ids, 1 classe) > `.play-row #btn-play` (style.css) → gagne sans !important. */
  #menu .play-row { justify-content: center; }
  #menu .play-row #btn-play { flex: 0 1 auto; width: 100%; max-width: 320px; margin: 10px auto 0; }
}

/* ============================================================================================
   PALIERS DE HAUTEUR (mobile) — « tout tient sans scroll » aussi sur les écrans COURTS.
   La largeur ne suffit pas : un iPhone SE (375x667) ou un petit Android (360x640) ont assez de
   largeur mais PAS assez de hauteur → sans ces paliers il restait ~175 px de débordement. On
   compresse par étages le décor (logo, porte-drapeau) et les cartes secondaires, en gardant
   INTACTS les éléments d'action (pseudo, équipe, mode, « Prendre la mer »).
   ============================================================================================ */

/* Écrans un peu courts (≈ iPhone SE, la plupart des Android <=800 px de haut). */
@media (max-width: 940px) and (max-height: 800px) {
  #menu-grid { row-gap: 6px !important; }
  .menu-logo-wrap, #menu #menu-main .menu-logo-img { max-width: 156px !important; }
  #team-card { padding: 6px 10px; gap: 4px !important; }
  .flag-stand { width: 48px !important; height: 46px !important; }
  .flag-stand .fs-pole { height: 40px !important; }
  .flag-stand .fs-flag { width: 30px !important; height: 19px !important; }
  .mode-btn { padding: 6px 6px; }
  .mode-btn small { display: none; }                 /* le titre du mode suffit sur écran court */
  #btn-play, #btn-respawn { padding: 10px 24px !important; font-size: 16px !important; }
  #menu-side .menu-card { padding: 6px 8px; }
  #menu-reserve-card .reserve-bar { display: none; } /* le solde chiffré + le rang suffisent */
}

/* Écrans vraiment courts (≈ 360x640, vieux Android, paysage bas de gamme) : on sacrifie le
   porte-drapeau décoratif (l'équipe reste choisie via le bouton « Mon équipe ») et l'offre du
   jour, pour garantir que le bouton de lancement et les infos clés restent visibles. */
@media (max-width: 940px) and (max-height: 700px) {
  #menu-main .menu-logo-wrap, #menu #menu-main .menu-logo-img { max-width: 132px !important; }
  #team-preview { display: none !important; }        /* porte-drapeau retiré (gain ~70 px) */
  #team-card { padding: 6px 8px; }
  #menu-offer-card { display: none !important; }      /* l'offre reste dans la Boutique */
  #menu-side .menu-card h3 { font-size: 11px; }
  #server-select { transform: scale(.86); }
}

/* Écrans minuscules (≈ 360x640 et moins) : on retire aussi la carte « Ta partie » (simple
   compteur de tickets, retrouvable en Boutique) pour éliminer le dernier filet de scroll. */
@media (max-width: 940px) and (max-height: 660px) {
  #menu-loadout-card { display: none !important; }
  #menu-grid { row-gap: 5px !important; }
  #menu-main, #menu-side { padding: 8px 10px; }
}

/* ============================================================================================
   ACCUEIL EN PAYSAGE TÉLÉPHONE (#41, 2026-07-11) — réconcilie le layout paysage 2 colonnes de
   style.css (media « orientation:landscape & max-height:560 », défini AVANT cette feuille)
   avec les paliers mobiles ci-dessus (pensés portrait, chargés APRÈS lui → ils l'écrasaient).
   Constats corrigés (mesurés à 700×360 et 640×360) :
     1) le palier ≤700px de haut masque #team-preview (pensé portrait) ALORS QUE la grille
        paysage de style.css réserve sa colonne « image » → navire absent ET pseudo écrasé ;
     2) #team-preview / .pseudo-flag-row restent des CONTENEURS (flex) → les grid-areas
        « image / team / pseudo » posées sur leurs ENFANTS par style.css sont ignorées ;
     3) #menu-grid en flex:1 min-height:0 rétrécit sous son contenu → la colonne gauche
        débordait SOUS le pied de page légal (chevauchement).
   Placé en TOUTE FIN de feuille → gagne la cascade sur les paliers portrait.
   ============================================================================================ */
@media (max-width: 940px) and (orientation: landscape) and (max-height: 560px) {
  /* 1+2. L'aperçu navire est RETIRÉ partout depuis le lot 2 (#ship-preview masqué global) :
     la grille paysage de style.css (aires « image / team / pseudo ») réservait donc une
     colonne VIDE de ~55 % et écrasait pseudo + équipe dans le reste. On repasse la carte
     ÉQUIPE en simple pile : rangée pseudo | équipe pleine largeur. */
  #team-card {
    display: flex !important; flex-direction: column; align-items: stretch;
    gap: 6px !important; padding: 8px 10px;
  }
  .pseudo-flag-row { display: flex !important; flex-direction: row !important; }
  .pseudo-flag-row #preview-caption { flex: 1 1 0; width: auto !important; max-width: none !important; }
  .pseudo-flag-row .flag-open { align-self: stretch; width: auto; max-width: 48%; margin: 0; }

  /* 3. La grille garde sa hauteur naturelle : plus de débordement sous le footer.
     (#menu garde overflow-y:auto en filet de sécurité pour les hauteurs < 330px.) */
  #menu-grid { flex: 0 0 auto; margin-top: 2px !important; }
  #menu { row-gap: 0; }

  /* colonnes équilibrées : l'action à gauche, les infos à droite */
  #menu-main { gap: 5px; }
  #menu-side { gap: 5px; }

  /* en-tête compact (le logo 132px du palier ≤700 suffit, on resserre juste les marges) */
  #menu-main h1 { margin: 0; }

  /* CTA + PWA : boutons plus plats pour tenir dans ~360px de haut */
  #btn-play, #btn-respawn { padding: 9px 20px !important; font-size: 15px !important; }
  body.vtouch #btn-install:not(.hidden) { min-height: 34px; padding: 5px 10px; font-size: 11.5px; }

  /* vignette drapeau réduite → le champ pseudo garde une largeur de saisie confortable */
  .pseudo-flag-row .flag-open-vis { width: 44px; height: 30px; }
  .pseudo-flag-row .flag-open { gap: 8px; padding: 6px 10px; }

  /* pied de page légal : une seule ligne discrète, jamais chevauchée.
     min-height:0 sur les liens : la règle tactile « body.vtouch .overlay button ≥ 40px »
     (style.css) gonflait le pied à 46 px et forçait 12 px de scroll. */
  .menu-legal-footer {
    flex: 0 0 auto; margin-top: 4px; padding: 3px 10px;
    font-size: 9.5px; gap: 4px; flex-wrap: nowrap; white-space: nowrap; overflow: hidden;
  }
  .menu-legal-footer .legal-link { font-size: 9.5px; padding: 1px 2px; }
  body.vtouch .menu-legal-footer .legal-link { min-height: 0; }
}

/* ============================================================================================
   ACCUEIL ÉPURÉ (nouveau joueur) EN PAYSAGE TÉLÉPHONE (2026-07-12) — tenir en UN écran, sans scroll.
   Constat (mesuré à 780×380) : body.menu-fresh replie toute la colonne droite (méta-progression)
   ET force #menu-grid en UNE colonne de 480px (`minmax(320px,480px) !important`, style.css:824).
   En paysage court (~360-400px de haut) le contenu de #menu-main — logo + carte équipe + choix
   serveur + « Prendre la mer » + comment-jouer + promo — s'empile sur ~440px de haut → l'accueil
   DÉFILE (le joueur doit scroller pour atteindre le bouton). L'espace horizontal, lui, est gâché.
   Correctif : on rend sa largeur au grid, puis on répartit #menu-main en DEUX colonnes internes —
   à GAUCHE l'identité (logo + carte équipe), à DROITE l'action (serveur + Jouer + comment-jouer).
   Tout tient alors à l'écran, sans scroll. Ne touche QUE le nouveau joueur en paysage court :
   le portrait et le joueur établi (2 colonnes déjà gérées plus haut) restent inchangés.
   Placé en TOUTE FIN de feuille (chargée après style.css) → bat le `!important` de menu-fresh.
   ============================================================================================ */
@media (orientation: landscape) and (max-height: 560px) {
  /* 1. Rendre la largeur : bat le `minmax(320px,480px) !important` (style.css) qui bornait à 480px. */
  body.menu-fresh #menu-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 96vw; max-width: 900px;
  }
  /* 2. Deux colonnes internes dans #menu-main (qui était une simple pile verticale). Le bloc
     .menu-side-actions occupe toute la colonne de droite (2 rangées) ; logo puis carte équipe
     s'empilent à gauche. Chaque sous-bloc garde sa mise en forme héritée. */
  body.menu-fresh #menu-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "logo actions" "team actions";
    align-items: start; column-gap: 18px; row-gap: 8px;
  }
  body.menu-fresh #menu-main > h1 { grid-area: logo; align-self: end; margin: 0; }
  body.menu-fresh #menu-main > #team-card { grid-area: team; }
  body.menu-fresh #menu-main > .menu-side-actions { grid-area: actions; align-self: center; }
  /* 3. La bannière « joue aussi sur téléphone » n'a pas de sens sur un accueil paysage étroit et
     mange ~70px de hauteur : masquée ici (reste affichée en portrait / desktop). */
  body.menu-fresh #mobile-promo { display: none; }
}

/* ============================================================================================
   ACCUEIL PAYSAGE TÉLÉPHONE — BANNIÈRE PROMO + BOUTON « VOIR TOUT » (2026-07-13, 2e passe).
   Deux résidus mesurés sur un profil ÉTABLI en paysage court (667×375, 640×320, UA mobile) :
     1) SCROLL de ~66 px : la bannière #mobile-promo (« joue aussi sur téléphone », ~195 px) restait
        AFFICHÉE pour le joueur établi — le bloc « nouveau joueur » (plus bas) la masque déjà, mais
        pas le bloc « établi ». Sur un TÉLÉPHONE en paysage cette promo n'a aucun sens (on Y EST déjà)
        et à elle seule elle repoussait #menu-main à 360 px → l'accueil défilait. On la masque pour
        TOUS les profils ici. #menu-main retombe à ~149 px → tout tient sans scroll (mesuré : 0 px de
        débordement à 850×393 / 667×375 / 640×320).
     2) Bouton « Voir tout » (Missions & quêtes) DIFFORME : la règle tactile
        `body.vtouch #menu-side button { min-height: 44px }` (style.css) le gonflait à 44 px de haut,
        et dans la colonne méta étroite du paysage son libellé se repliait → une grosse pastille
        quasi ronde « VOIR / TOUT ». On rend son gabarit naturel : hauteur auto, libellé sur UNE ligne
        (nowrap) → une pastille plate et nette (~22 px). C'est un lien secondaire (ouvre la popup
        Quêtes), pas une cible d'action principale : la contrainte tactile 44 px n'a pas lieu d'être.
   Scope STRICT : paysage téléphone court uniquement (portrait, desktop, tablette hauts = inchangés).
   Placé en fin de feuille (menu-refonte.css charge après style.css) → gagne la cascade.
   ============================================================================================ */
@media (orientation: landscape) and (max-height: 560px) {
  /* 1 — la promo « aussi sur téléphone » n'a pas de sens sur un accueil paysage étroit (~195 px). */
  #mobile-promo { display: none !important; }

  /* 2 — « Voir tout » : gabarit de pastille plate, jamais gonflée ni repliée par la règle tactile. */
  body.vtouch #menu-side .quest-see-all {
    min-height: 0 !important; height: auto !important;
    white-space: nowrap !important; line-height: 1.3 !important;
    padding: 3px 10px !important; align-self: center;
  }
  /* l'en-tête Missions garde compteur + bouton sur une rangée nette (pas de retour à la ligne parasite) */
  #menu-missions-card h3 { flex-wrap: nowrap; gap: 6px; }
}

/* ============================================================================================
   ACCUEIL JOUEUR ÉTABLI EN PAYSAGE TÉLÉPHONE (2026-07-13) — tenir en UN écran, sans scroll.
   Constat (mesuré à 667×375, UA mobile, profil établi) : le joueur établi n'avait PAS le repli
   2-colonnes du nouveau joueur (bloc ci-dessus, réservé à body.menu-fresh). Sa colonne d'action
   #menu-main empilait logo + carte équipe + serveur + « Prendre la mer » + comment-jouer +
   installer sur ~393 px, DANS une colonne étroite (~40 % via style.css:7264) → l'accueil
   DÉFILAIT de ~106 px, pendant que la colonne méta #menu-side (à droite) gaspillait ~157 px de
   hauteur. Correctif, même esprit que le nouveau joueur : #menu-main éclaté en DEUX sous-colonnes
   (identité : logo + carte équipe | action : serveur + jouer + comment-jouer), ce qui divise sa
   hauteur par ~2 ; grille rééquilibrée pour donner à l'ACTION la largeur (main devient la colonne
   large, la méta la colonne étroite). Résultat : main ~200 px de haut, tout tient sans scroll.
   Ne touche QUE le paysage court établi : portrait, desktop et NOUVEAU joueur inchangés.
   Placé APRÈS le bloc menu-fresh → gagne la cascade sur style.css:7256 (chargé avant cette feuille).
   ============================================================================================ */
@media (orientation: landscape) and (max-height: 560px) {
  /* Grille rééquilibrée : main (action) devient un peu plus large que la méta — assez pour que
     CHAQUE colonne éclate en 2 sous-colonnes ET que le CTA « Prendre la mer » (nowrap) tienne
     sans se faire couper. Inverse l'ancien 0.92fr | 1.35fr de style.css:7264 (qui étranglait
     l'action et forçait le scroll). */
  body:not(.menu-fresh) #menu-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
  /* #menu-main : mêmes aires que le nouveau joueur — identité empilée à gauche (logo puis équipe),
     bloc d'actions à droite sur les deux rangées → hauteur divisée par ~2. La sous-colonne
     d'action reçoit la plus grosse part (1.2fr) : le bouton « Prendre la mer » y tient en entier. */
  body:not(.menu-fresh) #menu-main {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.2fr);
    grid-template-areas: "logo actions" "team actions";
    align-items: start; column-gap: 12px; row-gap: 4px;
  }
  body:not(.menu-fresh) #menu-main > h1 { grid-area: logo; align-self: end; margin: 0; }
  body:not(.menu-fresh) #menu-main > #team-card { grid-area: team; align-self: start; }
  body:not(.menu-fresh) #menu-main > .menu-side-actions { grid-area: actions; align-self: start; }
  /* Comment-jouer : rappel d'ONBOARDING (Déplace-toi / Tire / Mine l'or) — inutile à un joueur
     ÉTABLI, et dans la sous-colonne d'action étroite il s'empilait sur 3 lignes (~100 px). On le
     masque ici : c'est le plus gros gain de hauteur, et le geste reste guidé en jeu. */
  body:not(.menu-fresh) .menu-howto { display: none; }
  /* Barre compte/boutique (coin haut) : boutons plus plats en paysage court → ~15 px regagnés. */
  body:not(.menu-fresh) #menu-corner { padding: 2px 0; gap: 6px; }
  body:not(.menu-fresh) #menu-corner .menu-corner-btn,
  body:not(.menu-fresh) #menu-corner button { padding-top: 5px; padding-bottom: 5px; }
  /* Méta un cran plus compacte + pied resserré : marge de sécurité sur les plus petits écrans. */
  body:not(.menu-fresh) #menu-side { gap: 7px; }
  body:not(.menu-fresh) #menu-side .menu-card { padding: 6px 9px 7px; }
  body:not(.menu-fresh) .menu-legal-footer { margin-top: 2px; }
}