/* =====================================================================================
   ACCUEIL « ARCADE JOUET » (2026-10-18, maquettes https://claude.ai/artifact/HjMJ8bDFzUZVnva6hSgDQc,
   choix Simon : style B). Accueil ÉPURÉ façon diep.io : logo, nom, drapeau, JOUER, autres modes, et
   trois boutons en coin. Le reste (réserve de perles, records, coffres, missions, serveur, puces d'aide,
   thème, langue, son, Mes achats, bandeau mobile) quitte l'accueil : il reste accessible ailleurs
   (Options, Boutique, fin de partie).
   ⚠️ Chargée EN DERNIER et scopée `html body.ui-arcade` + !important : il faut battre les 10 couches
   précédentes (charte-pastel, charte-sombre… cf. audit). Rien ici ne s'applique sans body.ui-arcade
   (posée par js/accueil-arcade.js quand CFG.UI_STYLE === 'arcade') → revenir = changer ce réglage.
   ===================================================================================== */
html body.ui-arcade {
  --ar-font: "Arial Rounded MT Bold", "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --ar-ink: #1a3d55;        /* encre marine des contours */
  --ar-ink-2: #3b2a00;      /* encre brune (boutons jaunes) */
  --ar-cream: #fff7e3;      /* fond des cartes */
  --ar-yellow: #ffe36b;
  --ar-orange: #ff6a3d; --ar-orange-d: #7a2410;
  --ar-blue: #2fb6ff;   --ar-blue-d: #1a5f88;
  --ar-green: #6fd06a;  --ar-green-d: #2d6b2a;
  --ar-red: #ff4d4d;
}

/* ---------- 1. CE QUI QUITTE L'ACCUEIL ---------- */
html body.ui-arcade #menu #menu-side,
html body.ui-arcade #menu #server-select,
html body.ui-arcade #menu .menu-howto,
html body.ui-arcade #menu #mp-status,
html body.ui-arcade #menu #btn-install,
html body.ui-arcade #menu #install-hint,
html body.ui-arcade #menu #mobile-promo,
html body.ui-arcade #menu .menu-teaser,
html body.ui-arcade #menu #team-preview,
html body.ui-arcade #menu-corner #btn-menu-mute,
html body.ui-arcade #menu-corner #btn-inventory,
html body.ui-arcade #menu-corner #i18n-chip,
html body.ui-arcade #menu .menu-legal-footer [data-open-legal="cgu"],
html body.ui-arcade #menu .menu-legal-footer [data-open-legal="privacy"] { display: none !important; }

/* ---------- 2. MISE EN PAGE : une colonne centrée, sans carte ---------- */
html body.ui-arcade #menu { background: radial-gradient(ellipse at 40% 35%, #49aac6, #2f87a6 72%) !important; }
html body.ui-arcade #menu #menu-map-veil {
  background: radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.04), rgba(10,40,60,.22) 78%) !important;
}
html body.ui-arcade #menu #menu-grid {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  min-height: 100% !important; gap: 0 !important; grid-template-columns: none !important;
  width: 100% !important; max-width: none !important; padding: 0 16px !important; margin: 0 auto !important;
}
html body.ui-arcade #menu #menu-main {
  background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important;
  width: min(440px, 100%) !important; max-width: 440px !important; padding: 0 !important; margin: 0 auto !important;
  display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 16px !important;
}
html body.ui-arcade #menu #menu-main::before, html body.ui-arcade #menu #menu-main::after { display: none !important; }
html body.ui-arcade #menu, html body.ui-arcade #menu * { font-family: var(--ar-font) !important; }

/* ---------- 3. LOGO : penché, contour, ombre dure ---------- */
html body.ui-arcade #menu #menu-main .menu-logo-wrap, html body.ui-arcade #menu .menu-logo-wrap { display: flex !important; justify-content: center !important; margin: 0 0 8px !important; }
html body.ui-arcade #menu #menu-main .menu-logo-img, html body.ui-arcade #menu .menu-logo-img {
  width: min(400px, 84vw) !important; max-width: none !important; height: auto !important; max-height: none !important;
  transform: rotate(-3deg) !important;
  filter: drop-shadow(0 6px 0 var(--ar-ink-2)) drop-shadow(0 12px 18px rgba(0,0,0,.25)) !important;
}

/* ---------- 4. NOM + DRAPEAU : une rangée dodue ---------- */
html body.ui-arcade #menu #menu-main #team-card, html body.ui-arcade #menu #team-card {
  width: 100% !important; max-width: none !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
  display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 10px !important; margin: 0 !important;
}
html body.ui-arcade #menu #menu-main .pseudo-flag-row, html body.ui-arcade #menu .pseudo-flag-row { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 10px !important; width: 100% !important; margin: 0 !important; }
html body.ui-arcade #menu #preview-caption { display: block !important; flex: 1 1 auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
html body.ui-arcade #menu #preview-caption > *:not(#pseudo-edit) { display: none !important; }
html body.ui-arcade #menu #pseudo-edit { flex: 1 1 auto !important; display: block !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
html body.ui-arcade #menu #pseudo-edit > *:not(input) { display: none !important; }
html body.ui-arcade #menu #name-input {
  width: 100% !important; height: 58px !important; box-sizing: border-box !important;
  background: var(--gc-card) !important; color: var(--gc-text) !important;
  border: 4px solid var(--ar-ink) !important; border-radius: 16px !important;
  box-shadow: 0 5px 0 var(--ar-ink) !important;
  font-size: 22px !important; font-weight: 800 !important; text-align: center !important; padding: 0 14px !important;
}
html body.ui-arcade #menu #name-input:focus { outline: none !important; box-shadow: 0 5px 0 var(--ar-ink), 0 0 0 4px rgba(47,182,255,.55) !important; }
html body.ui-arcade #menu #flag-open {
  flex: 0 0 auto !important; width: auto !important; min-width: 64px !important; height: 58px !important; margin: 0 !important;
  background: var(--ar-yellow) !important; color: var(--ar-ink-2) !important;
  border: 4px solid var(--ar-ink-2) !important; border-radius: 16px !important; box-shadow: 0 5px 0 var(--ar-ink-2) !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 0 12px !important;
  font-size: 15px !important; font-weight: 800 !important; cursor: pointer !important;
}
html body.ui-arcade #menu #flag-open .flag-open-vis { display: inline-flex !important; width: 30px !important; height: 22px !important; }
html body.ui-arcade #menu #flag-open .flag-open-vis img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 4px !important; }
html body.ui-arcade #menu #flag-open .flag-open-txt b, html body.ui-arcade #menu #flag-open .flag-open-chev { display: none !important; }
html body.ui-arcade #menu #flag-open-name { max-width: 110px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* ---------- 5. BOUTON JOUER : le gros bouton orange qui s'enfonce ---------- */
html body.ui-arcade #menu .menu-side-actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; margin: 4px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
html body.ui-arcade #menu #btn-play {
  width: 100% !important; height: 74px !important; margin: 0 !important;
  background: var(--ar-orange) !important; background-image: none !important; color: #fff !important;
  border: 5px solid var(--ar-orange-d) !important; border-radius: 20px !important;
  box-shadow: 0 8px 0 var(--ar-orange-d) !important;
  font-size: 32px !important; font-weight: 900 !important; letter-spacing: .06em !important; text-transform: uppercase !important;
  -webkit-text-stroke: 1.5px var(--ar-orange-d) !important; paint-order: stroke fill !important; text-shadow: none !important;
  transition: transform .08s ease, box-shadow .08s ease !important; animation: none !important;
}
html body.ui-arcade #menu #btn-play::before, html body.ui-arcade #menu #btn-play::after { display: none !important; }
html body.ui-arcade #menu #btn-play:hover { filter: brightness(1.06) !important; }
html body.ui-arcade #menu #btn-play:active { transform: translateY(6px) !important; box-shadow: 0 2px 0 var(--ar-orange-d) !important; }
html body.ui-arcade #menu #btn-play:focus-visible { outline: 4px solid var(--ar-blue) !important; outline-offset: 4px !important; }

/* ---------- 5 bis. COFFRE DU JOUR (remonté sous Jouer par js/accueil-arcade.js) ---------- */
html body.ui-arcade #menu #menu-daily:not(.hidden) {
  display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; margin: 2px 0 0 !important;
  background: var(--gc-stone) !important; background-image: none !important; color: var(--gc-text) !important;
  border: 4px solid var(--ar-ink) !important; border-radius: 16px !important; box-shadow: 0 5px 0 var(--ar-ink) !important;
  padding: 8px 12px !important; text-align: left !important; cursor: pointer !important;
}
html body.ui-arcade #menu #menu-daily *:not(.menu-daily-cta) { color: var(--gc-text) !important; }
html body.ui-arcade #menu #menu-daily:active { transform: translateY(4px) !important; box-shadow: 0 1px 0 var(--ar-ink) !important; }
html body.ui-arcade #menu #menu-daily .menu-daily-cta {
  margin-left: auto !important; background: var(--ar-green) !important; color: #fff !important;
  border: 3px solid var(--ar-green-d) !important; border-radius: 999px !important; box-shadow: 0 3px 0 var(--ar-green-d) !important;
  padding: 4px 14px !important; font-weight: 900 !important;
}

/* ---------- 6. AUTRES MODES : une petite pilule bleue ---------- */
html body.ui-arcade #menu #btn-altmodes {
  align-self: center !important; background: var(--ar-blue) !important; color: #fff !important;
  border: 3px solid var(--ar-blue-d) !important; border-radius: 999px !important; box-shadow: 0 4px 0 var(--ar-blue-d) !important;
  padding: 6px 18px !important; font-size: 15px !important; font-weight: 800 !important; text-decoration: none !important;
}
html body.ui-arcade #menu #btn-altmodes:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 var(--ar-blue-d) !important; }
html body.ui-arcade #menu #menu-altmodes-panel { background: var(--gc-stone) !important; border: 4px solid var(--ar-ink) !important; border-radius: 18px !important; box-shadow: 0 6px 0 var(--ar-ink) !important; padding: 12px !important; }
html body.ui-arcade #menu #menu-altmodes-panel button:not(.is-soon):not([hidden]) {
  background: var(--ar-green) !important; color: #fff !important; border: 3px solid var(--ar-green-d) !important; border-radius: 14px !important;
  box-shadow: 0 4px 0 var(--ar-green-d) !important; font-weight: 800 !important;
}

/* ---------- 7. COIN : trois boutons jaunes dodus (Options · Connexion · Boutique) ---------- */
html body.ui-arcade #menu-corner { gap: 10px !important; background: none !important; border: 0 !important; box-shadow: none !important; }
html body.ui-arcade #menu-corner .menu-corner-btn {
  position: relative !important; height: 48px !important; min-width: 48px !important; padding: 0 14px !important;
  background: var(--ar-yellow) !important; background-image: none !important; color: var(--ar-ink-2) !important;
  border: 4px solid var(--ar-ink-2) !important; border-radius: 14px !important; box-shadow: 0 5px 0 var(--ar-ink-2) !important;
  font-size: 16px !important; font-weight: 800 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important;
}
html body.ui-arcade #menu-corner #btn-login { background: var(--ar-yellow) !important; color: var(--ar-ink-2) !important; border-color: var(--ar-ink-2) !important; box-shadow: 0 5px 0 var(--ar-ink-2) !important; }
html body.ui-arcade #menu-corner #btn-menu-options { font-size: 0 !important; width: 48px !important; padding: 0 !important; justify-content: center !important; }
html body.ui-arcade #menu-corner #btn-menu-options .opt-gear svg { width: 24px !important; height: 24px !important; }
html body.ui-arcade #menu-corner #btn-premium .notif-dot, html body.ui-arcade #menu-corner #btn-premium [class*="dot"]:not(.ar-badge) { display: none !important; }
html body.ui-arcade #menu-corner .menu-corner-btn:active { transform: translateY(4px) !important; box-shadow: 0 1px 0 var(--ar-ink-2) !important; }
html body.ui-arcade #menu-corner #btn-premium { background: var(--ar-green) !important; color: #fff !important; border-color: var(--ar-green-d) !important; box-shadow: 0 5px 0 var(--ar-green-d) !important; }
html body.ui-arcade #menu-corner #btn-premium .ar-badge {
  position: absolute !important; top: -12px !important; right: -10px !important;
  background: var(--gc-card) !important; color: var(--gc-text) !important; border: 3px solid var(--ar-ink) !important; border-radius: 999px !important;
  font-size: 12px !important; font-weight: 900 !important; line-height: 1 !important; padding: 3px 7px !important; white-space: nowrap !important;
}
html body.ui-arcade #menu-corner #btn-premium .ar-badge.ar-gift { background: var(--ar-red) !important; color: #fff !important; border-color: #fff !important; }

/* ---------- 8. PIED : quatre liens discrets ---------- */
html body.ui-arcade #menu .menu-legal-footer { background: none !important; border: 0 !important; box-shadow: none !important; gap: 14px !important; }
html body.ui-arcade #menu .menu-legal-footer .legal-link {
  color: #fff !important; background: none !important; border: 0 !important; font-size: 13px !important; font-weight: 700 !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.45) !important; opacity: .9 !important; text-decoration: none !important;
}
html body.ui-arcade #menu .menu-legal-footer .legal-link:hover { opacity: 1 !important; text-decoration: underline !important; }
html body.ui-arcade #menu .menu-legal-footer > *:not(.legal-link) { display: none !important; }

/* ---------- 9. MOBILE ---------- */
@media (max-width: 560px) {
  html body.ui-arcade #menu #menu-main { gap: 12px !important; }
  html body.ui-arcade #menu #menu-main .menu-logo-img, html body.ui-arcade #menu .menu-logo-img { width: min(300px, 80vw) !important; }
  html body.ui-arcade #menu #btn-play { height: 64px !important; font-size: 26px !important; }
  html body.ui-arcade #menu #name-input, html body.ui-arcade #menu #flag-open { height: 52px !important; }
  html body.ui-arcade #menu-corner .menu-corner-btn { height: 42px !important; min-width: 42px !important; padding: 0 10px !important; font-size: 14px !important; }
  html body.ui-arcade #menu-corner .menu-corner-btn .btn-login-txt { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body.ui-arcade #menu #btn-play, html body.ui-arcade #menu-corner .menu-corner-btn { transition: none !important; }
}
html body.ui-arcade #menu-corner #btn-premium::after, html body.ui-arcade #menu-corner #btn-premium::before { display: none !important; }

/* ---------- 10. AJUSTEMENTS DE BANC (2026-10-18) ---------- */
/* le champ du nom remplit la rangée (le libellé et sa légende avaient une largeur fixe) */
html body.ui-arcade #menu #menu-main #preview-caption { min-width: 0 !important; width: auto !important; }
html body.ui-arcade #menu #menu-main #pseudo-edit, html body.ui-arcade #menu #menu-main #name-input { width: 100% !important; max-width: none !important; }
/* pied de page ancré en bas de l'écran, comme les liens discrets de diep.io */
html body.ui-arcade #menu .menu-legal-footer {
  position: fixed !important; left: 50% !important; transform: translateX(-50%) !important;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; width: auto !important; max-width: calc(100vw - 32px) !important;
  margin: 0 !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; z-index: 2 !important;
}

/* ---------- 11. ACCUEIL PLEINE LARGEUR, ÉPURÉ (2026-10-19, Simon : « plus en pleine largeur », puis
   « trop mal fait, moche ») ----------
   Une seule composition centrée, sans gros panneaux sombres :
     logo  →  BARRE DE JEU large (nom + drapeau | PRENDRE LA MER) sur une ligne  →  « Autres modes »
     + coffre du jour, discrets.
   L'arbre des navires quitte la page : il s'ouvre dans un PANNEAU LATÉRAL depuis l'onglet de gauche
   (section 12). En portrait, tout s'empile. Le pied de page est dans le flux (ne recouvre plus rien). */
html body.ui-arcade #menu:not(.hidden) {
  justify-content: flex-start !important; align-items: stretch !important; gap: 0 !important;
  padding: 0 !important; overflow-x: hidden !important; overflow-y: auto !important;
}
html body.ui-arcade #menu #menu-map-veil {
  /* voile de lisibilité : centre un peu assombri là où vivent les commandes, bords plus clairs */
  background: radial-gradient(ellipse 70% 60% at 50% 52%, rgba(8,34,52,.30), rgba(8,34,52,.10) 70%, rgba(8,34,52,.22)) !important;
}
html body.ui-arcade #menu #menu-grid {
  flex: 1 0 auto !important; min-height: 0 !important; height: auto !important; justify-content: center !important;
  padding: calc(80px + env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 80px) 20px !important; box-sizing: border-box !important;
}
html body.ui-arcade #menu .menu-legal-footer {
  position: relative !important; left: auto !important; transform: none !important; bottom: auto !important;
  flex: 0 0 auto !important; align-self: center !important;
  margin: 0 auto calc(12px + env(safe-area-inset-bottom, 0px)) !important; padding: 6px 16px !important;
  max-width: calc(100vw - 32px) !important; row-gap: 4px !important;
}
html body.ui-arcade #menu #menu-main .menu-teaser { display: none !important; }
html body.ui-arcade #menu #menu-main h1 { margin: 0 !important; padding: 0 !important; display: flex !important; justify-content: center !important; width: 100% !important; max-width: none !important; }
html body.ui-arcade #menu #menu-main h1 .menu-logo-wrap { width: 100% !important; max-width: none !important; margin: 0 !important; }
html body.ui-arcade #menu #menu-main .menu-logo-img, html body.ui-arcade #menu .menu-logo-img { width: min(440px, 86vw) !important; }
html body.ui-arcade #menu #menu-main #team-card, html body.ui-arcade #menu #menu-main .pseudo-flag-row {
  width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important;
}
html body.ui-arcade #menu #menu-main .pseudo-flag-row { flex: 1 1 100% !important; flex-wrap: nowrap !important; }
html body.ui-arcade #menu #menu-main .pseudo-flag-row #preview-caption { flex: 1 1 0 !important; min-width: 0 !important; }
html body.ui-arcade #menu .play-row { width: 100% !important; margin: 0 !important; padding: 0 !important; }
html body.ui-arcade #menu #menu-daily:not(.hidden) { max-width: 460px !important; justify-self: center !important; align-self: center !important; }

/* -- PAYSAGE : la barre de jeu tient sur UNE ligne, large -- */
@media (min-width: 760px) and (orientation: landscape) {
  html body.ui-arcade #menu #menu-main {
    display: grid !important; width: min(1120px, 100%) !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important; column-gap: 16px !important; row-gap: 18px !important;
    justify-items: stretch !important; align-items: center !important;
  }
  html body.ui-arcade #menu #menu-main > h1 { grid-column: 1 / -1 !important; margin-bottom: clamp(4px, 2vh, 26px) !important; }
  html body.ui-arcade #menu #menu-main .menu-logo-img, html body.ui-arcade #menu .menu-logo-img { width: clamp(380px, 40vw, 760px) !important; }
  html body.ui-arcade #menu #menu-main .menu-side-actions { display: contents !important; }  /* ses enfants rejoignent la grille */
  html body.ui-arcade #menu #menu-main #team-card { grid-column: 1 !important; }
  html body.ui-arcade #menu #menu-main .play-row { grid-column: 2 !important; }
  html body.ui-arcade #menu #menu-main #btn-altmodes, html body.ui-arcade #menu #menu-main #menu-altmodes-panel,
  html body.ui-arcade #menu #menu-main #menu-daily:not(.hidden) { grid-column: 1 / -1 !important; justify-self: center !important; }
  html body.ui-arcade #menu #menu-main #menu-altmodes-panel { width: min(460px, 100%) !important; box-sizing: border-box !important; }
  html body.ui-arcade #menu #menu-main #menu-daily:not(.hidden) { width: min(460px, 100%) !important; }
  html body.ui-arcade #menu #btn-play, html body.ui-arcade #menu #name-input, html body.ui-arcade #menu #flag-open { height: clamp(64px, 7.6vh, 80px) !important; }
  html body.ui-arcade #menu #btn-play { font-size: clamp(26px, 2.2vw, 36px) !important; }
  /* marge réservée à l'onglet latéral de l'arbre (64 px) des deux côtés : la barre reste centrée */
  html body.ui-arcade #menu #menu-grid { padding-left: max(80px, 4vw) !important; padding-right: max(80px, 4vw) !important; }
  html body.ui-arcade #menu #name-input { font-size: clamp(20px, 1.6vw, 26px) !important; }
}
/* paysage COURT (téléphone couché) : tout tient sans défiler */
@media (orientation: landscape) and (max-height: 520px) {
  html body.ui-arcade #menu #menu-grid { padding-top: calc(60px + env(safe-area-inset-top, 0px)) !important; padding-bottom: 6px !important; }
  html body.ui-arcade #menu #menu-main { row-gap: 10px !important; }
  html body.ui-arcade #menu #menu-main .menu-logo-img, html body.ui-arcade #menu .menu-logo-img { width: min(300px, 40vw) !important; }
  html body.ui-arcade #menu #btn-play, html body.ui-arcade #menu #name-input, html body.ui-arcade #menu #flag-open { height: 52px !important; }
  html body.ui-arcade #menu #btn-play { font-size: 22px !important; }
  html body.ui-arcade #menu #name-input { font-size: 18px !important; }
  html body.ui-arcade #menu #menu-daily:not(.hidden) { padding: 4px 10px !important; }
  html body.ui-arcade #menu .menu-legal-footer { margin-bottom: 4px !important; padding: 2px 12px !important; }
  html body.ui-arcade #menu .menu-legal-footer .legal-link { font-size: 12px !important; }
  html body.ui-arcade #menu #menu-grid { padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important; }
  html body.ui-arcade #menu #menu-main > h1 { margin-bottom: 0 !important; }
  html body.ui-arcade #menu #menu-main .menu-logo-img, html body.ui-arcade #menu .menu-logo-img { width: min(240px, 34vw) !important; }
  html body.ui-arcade #menu #btn-play, html body.ui-arcade #menu #name-input, html body.ui-arcade #menu #flag-open { height: 46px !important; }
  html body.ui-arcade #menu #tree-open:not([hidden]) { width: 52px !important; padding: 8px 4px 10px !important; }
  html body.ui-arcade #menu #tree-open canvas { width: 36px !important; height: 36px !important; }
  html body.ui-arcade #menu #tree-open span { font-size: 13px !important; }
}
/* -- PORTRAIT : une colonne -- */
@media not all and (min-width: 760px) and (orientation: landscape) {
  html body.ui-arcade #menu #menu-main { width: min(480px, 100%) !important; max-width: 480px !important; padding: 0 !important; gap: 14px !important; }
  html body.ui-arcade #menu #menu-main h1 { margin-bottom: 4px !important; }
  /* le bloc + le bouton de l'arbre restent groupés, centrés ; le pied de page descend en bas */
  html body.ui-arcade #menu #menu-grid { flex: 0 0 auto !important; margin-top: auto !important; padding-bottom: 8px !important; }
  html body.ui-arcade #menu .menu-legal-footer { margin-top: auto !important; }
}

/* ---------- 12. ARBRE DES NAVIRES : onglet latéral + panneau (js/accueil-arcade.js) ---------- */
html body.ui-arcade #menu #tree-open:not([hidden]) {
  position: fixed !important; z-index: 8 !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important;
  width: 64px !important; padding: 10px 6px 14px !important; margin: 0 !important; cursor: pointer !important;
  background: var(--ar-yellow) !important; color: var(--ar-ink-2) !important;
  border: 4px solid var(--ar-ink-2) !important; border-left: 0 !important; border-radius: 0 18px 18px 0 !important;
  box-shadow: 0 6px 0 var(--ar-ink-2) !important; transition: padding-left .12s ease !important;
}
html body.ui-arcade #menu #tree-open:hover { padding-left: 12px !important; }
html body.ui-arcade #menu #tree-open:focus-visible { outline: 4px solid var(--ar-blue) !important; outline-offset: 3px !important; }
html body.ui-arcade #menu #tree-open canvas { width: 44px !important; height: 44px !important; background: #1d6f98 !important; border: 3px solid var(--ar-ink-2) !important; border-radius: 12px !important; }
html body.ui-arcade #menu #tree-open span { writing-mode: vertical-rl !important; transform: rotate(180deg) !important; font-size: 15px !important; font-weight: 900 !important; letter-spacing: .02em !important; white-space: nowrap !important; }
html body.ui-arcade #menu .mt-backdrop:not([hidden]) { position: fixed !important; inset: 0 !important; z-index: 29 !important; background: rgba(6, 22, 34, .45) !important; }
html body.ui-arcade #menu #menu-tree {
  position: fixed !important; z-index: 30 !important; top: 0 !important; bottom: 0 !important; left: 0 !important; margin: 0 !important;
  width: min(1000px, 94vw) !important; box-sizing: border-box !important; overflow-y: auto !important; overscroll-behavior: contain !important;
  display: block !important; padding: calc(16px + env(safe-area-inset-top, 0px)) 18px 18px !important;
  background: #12405e !important; border: 0 !important; border-right: 5px solid var(--ar-ink) !important; border-radius: 0 26px 26px 0 !important;
  box-shadow: 10px 0 40px rgba(4, 20, 34, .45) !important;
  transform: translateX(-105%) !important; visibility: hidden !important; transition: transform .22s ease, visibility 0s linear .22s !important;
}
html body.ui-arcade #menu #menu-tree.open { transform: translateX(0) !important; visibility: visible !important; transition: transform .22s ease !important; }
html body.ui-arcade #menu #menu-tree[hidden] { display: none !important; }
html body.ui-arcade #menu .mt-head { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 4px 12px !important; margin: 0 44px 8px 0 !important; color: #fff !important; position: relative !important; }
html body.ui-arcade #menu .mt-head b { font-size: 22px !important; font-weight: 900 !important; color: var(--ar-yellow) !important; text-shadow: 0 2px 0 rgba(10,40,60,.6) !important; }
html body.ui-arcade #menu .mt-head span { font-size: 14px !important; font-weight: 700 !important; color: #e6f4fb !important; }
html body.ui-arcade #menu .mt-close {
  position: absolute !important; top: -4px !important; right: -44px !important; width: 38px !important; height: 38px !important; padding: 0 !important;
  background: var(--ar-red) !important; color: #fff !important; border: 3px solid #fff !important; border-radius: 50% !important;
  box-shadow: 0 3px 0 rgba(0,0,0,.3) !important; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; cursor: pointer !important;
}
html body.ui-arcade #menu .mt-body { position: relative !important; }
html body.ui-arcade #menu #menu-tree-cv { display: block !important; width: 100% !important; touch-action: manipulation; cursor: pointer; }
html body.ui-arcade #menu .mt-tip:not([hidden]) {
  position: absolute !important; z-index: 3 !important; pointer-events: none !important; white-space: nowrap !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
  background: var(--gc-stone) !important; color: var(--gc-text) !important; border: 3px solid var(--ar-ink) !important; border-radius: 12px !important;
  box-shadow: 0 4px 0 var(--ar-ink) !important; padding: 4px 10px !important; font-size: 14px !important; line-height: 1.2 !important;
}
html body.ui-arcade #menu .mt-tip span { font-size: 12px !important; font-weight: 700 !important; opacity: .75 !important; }
/* PORTRAIT : l'onglet devient un bouton dans le flux, sous le coffre (pas d'onglet collé au bord sur 390 px) */
@media not all and (min-width: 760px) and (orientation: landscape) {
  html body.ui-arcade #menu #tree-open:not([hidden]) {
    position: relative !important; top: auto !important; left: auto !important; transform: none !important; align-self: center !important;
    flex-direction: row !important; width: auto !important; margin: 4px auto 14px !important; padding: 6px 16px 6px 8px !important;
    border-left: 4px solid var(--ar-ink-2) !important; border-radius: 16px !important; box-shadow: 0 5px 0 var(--ar-ink-2) !important;
  }
  html body.ui-arcade #menu #tree-open:hover { padding-left: 8px !important; }
  html body.ui-arcade #menu #tree-open canvas { width: 36px !important; height: 36px !important; }
  html body.ui-arcade #menu #tree-open span { writing-mode: horizontal-tb !important; transform: none !important; }
  html body.ui-arcade #menu #menu-tree { width: 100vw !important; border-radius: 0 !important; border-right: 0 !important; padding: calc(12px + env(safe-area-inset-top, 0px)) 10px 14px !important; }
  html body.ui-arcade #menu .mt-head span { font-size: 12.5px !important; }
}

/* ---------- 13. FICHE NAVIRE (clic dans l'arbre) — ancrée en bas du panneau ouvert ---------- */
html body.ui-arcade #menu .mt-card:not([hidden]) {
  position: fixed !important; z-index: 4 !important; left: 50% !important; bottom: 14px !important; transform: translateX(-50%) !important;
  width: min(580px, calc(100% - 24px)) !important; box-sizing: border-box !important;
  display: grid !important; grid-template-columns: minmax(110px, 38%) 1fr !important; gap: 4px 14px !important; align-items: center !important;
  background: var(--gc-stone) !important; color: var(--gc-text) !important; text-align: left !important;
  border: 4px solid var(--ar-ink) !important; border-radius: 18px !important; box-shadow: 0 6px 0 var(--ar-ink), 0 18px 40px rgba(4,20,34,.45) !important;
  padding: 10px 14px 12px 10px !important;
}
html body.ui-arcade #menu .mt-card .mt-x {
  position: absolute !important; top: -14px !important; right: -12px !important; width: 34px !important; height: 34px !important; padding: 0 !important;
  background: var(--ar-red) !important; color: #fff !important; border: 3px solid #fff !important; border-radius: 50% !important;
  box-shadow: 0 3px 0 rgba(0,0,0,.3) !important; font-size: 15px !important; font-weight: 900 !important; line-height: 1 !important; cursor: pointer !important;
}
html body.ui-arcade #menu .mt-card .mt-cv { width: 100% !important; height: auto !important; border-radius: 12px !important; border: 3px solid var(--ar-ink) !important; box-sizing: border-box !important; }
html body.ui-arcade #menu .mt-card .mt-info { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
html body.ui-arcade #menu .mt-card .mt-name { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px 8px !important; }
html body.ui-arcade #menu .mt-card .mt-name b { font-size: 19px !important; font-weight: 900 !important; color: var(--gc-text) !important; }
html body.ui-arcade #menu .mt-card .mt-lv, html body.ui-arcade #menu .mt-card .mt-you {
  font-size: 12px !important; font-weight: 900 !important; border-radius: 999px !important; padding: 2px 8px !important; border: 2px solid var(--ar-ink) !important;
}
html body.ui-arcade #menu .mt-card .mt-lv { background: var(--ar-blue) !important; color: #fff !important; }
html body.ui-arcade #menu .mt-card .mt-you { background: var(--ar-yellow) !important; color: var(--ar-ink-2) !important; }
html body.ui-arcade #menu .mt-card p { margin: 0 !important; color: var(--gc-text) !important; }
html body.ui-arcade #menu .mt-card .mt-role { font-size: 13.5px !important; font-weight: 800 !important; }
html body.ui-arcade #menu .mt-card .mt-desc { font-size: 12px !important; font-weight: 600 !important; line-height: 1.3 !important; opacity: .85 !important; }
html body.ui-arcade #menu .mt-card .mt-stats { display: grid !important; grid-template-columns: auto 1fr !important; gap: 3px 8px !important; align-items: center !important; margin-top: 2px !important; }
html body.ui-arcade #menu .mt-card .mt-stat { display: contents !important; }
html body.ui-arcade #menu .mt-card .mt-stat span { font-size: 11.5px !important; font-weight: 800 !important; color: var(--gc-text) !important; white-space: nowrap !important; }
html body.ui-arcade #menu .mt-card .mt-stat i { display: block !important; height: 9px !important; border-radius: 999px !important; background: rgba(255, 240, 220, .14) !important; border: 2px solid var(--ar-ink) !important; overflow: hidden !important; }
html body.ui-arcade #menu .mt-card .mt-stat em { display: block !important; height: 100% !important; background: var(--ar-green) !important; border-radius: 999px !important; }
@media (max-width: 520px) {
  html body.ui-arcade #menu .mt-card:not([hidden]) { grid-template-columns: 1fr !important; max-height: calc(100vh - 40px) !important; overflow-y: auto !important; }
  html body.ui-arcade #menu .mt-card .mt-cv { max-width: 200px !important; justify-self: center !important; }
  html body.ui-arcade #menu .mt-card .mt-x { top: 6px !important; right: 6px !important; }
}
@media (prefers-reduced-motion: reduce) { html body.ui-arcade #menu #menu-tree { transition: none !important; } }
/* très grand écran (1440p+) : la composition grandit avec l'écran */
@media (min-width: 2200px) and (orientation: landscape) {
  html body.ui-arcade #menu #menu-main { width: min(1500px, 100%) !important; row-gap: 26px !important; column-gap: 20px !important; }
  html body.ui-arcade #menu #menu-main .menu-logo-img, html body.ui-arcade #menu .menu-logo-img { width: 960px !important; }
  html body.ui-arcade #menu #btn-play, html body.ui-arcade #menu #name-input, html body.ui-arcade #menu #flag-open { height: 96px !important; }
  html body.ui-arcade #menu #btn-play { font-size: 46px !important; }
  html body.ui-arcade #menu #name-input { font-size: 32px !important; }
  html body.ui-arcade #menu #flag-open { font-size: 21px !important; }
  html body.ui-arcade #menu #btn-altmodes { font-size: 19px !important; padding: 9px 24px !important; }
  html body.ui-arcade #menu #menu-main #menu-daily:not(.hidden) { width: 600px !important; }
}