/* =====================================================================================================
   MENUS ÉPURÉS (2026-10-21, maquette validée par Simon — planches P4 Accueil et P5 Paramètres).
   Chargée TOUT EN DERNIER (après panneaux-pleine-largeur.css) ; scopée body.ui-arcade ; ne retire AUCUNE
   fonction : ce qui quitte la vue est rangé derrière une icône / un onglet (cf. js/menus-epures.js).
   Cibles ≥ 44 px, focus visible, prefers-reduced-motion respecté.
   ===================================================================================================== */

/* ---------- P4 · ACCUEIL ---------- */

/* L'arbre des navires n'est plus un onglet collé au bord : il s'ouvre depuis le panneau « Récompenses »
   (#rewards-tree → clic programmatique sur #tree-open, qui reste dans le DOM avec ses handlers). */
html body.ui-arcade #menu #tree-open, html body.ui-arcade #menu #tree-open:not([hidden]) { display: none !important; }

/* « Autres modes » : un simple lien sous le bouton, plus un bouton plein. */
html body.ui-arcade #menu #btn-altmodes {
  display: block !important; width: auto !important; min-height: 44px !important; margin: 4px auto 0 !important; padding: 10px 14px !important;
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 6px !important;
  color: #fff !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: .02em !important; text-transform: none !important;
  text-decoration: underline !important; text-underline-offset: 4px !important; text-shadow: 0 1px 3px rgba(5, 25, 40, .9) !important; opacity: .95 !important;
  -webkit-text-stroke: 0 !important;
}
html body.ui-arcade #menu #btn-altmodes:hover { opacity: 1 !important; text-decoration-thickness: 2px !important; }
html body.ui-arcade #menu #btn-altmodes:active { transform: none !important; box-shadow: none !important; }
html body.ui-arcade #menu #btn-altmodes:focus-visible { outline: 3px solid #fff !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px #154a42 !important; }

/* Icône Récompenses (coin haut-droite) + pastille « du nouveau ». */
html body.ui-arcade #menu-corner #btn-rewards { width: 48px !important; min-width: 48px !important; padding: 0 !important; justify-content: center !important; font-size: 0 !important; }
html body.ui-arcade #menu-corner #btn-rewards svg { width: 24px !important; height: 24px !important; }
html body.ui-arcade #menu-corner #btn-rewards .rw-dot {
  position: absolute !important; top: -7px !important; right: -7px !important; width: 18px !important; height: 18px !important; border-radius: 50% !important;
  background: #d8322a !important; border: 3px solid #fff !important; box-shadow: 0 0 0 2px #5e1b10 !important;
}
html body.ui-arcade #menu-corner #btn-rewards .rw-dot[hidden] { display: none !important; }
html body.ui-arcade #menu-corner #btn-rewards:focus-visible { outline: 3px solid #fff !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px #154a42 !important; }

/* Panneau Récompenses : petite planche de marbre sous l'icône. */
html body.ui-arcade #menu .rewards-pop:not([hidden]) {
  position: fixed !important; z-index: 40 !important; top: calc(max(8px, env(safe-area-inset-top)) + 66px) !important;
  right: max(8px, env(safe-area-inset-right)) !important; left: auto !important;
  width: min(440px, calc(100vw - 16px)) !important; max-height: calc(100dvh - 90px) !important; overflow: auto !important; overscroll-behavior: contain;
  box-sizing: border-box !important; display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 12px !important;
  background: var(--an-plate, #fbf7ee) !important; border: 3px solid var(--an-line, #2f2619) !important; border-radius: var(--an-r, 3px) !important;
  box-shadow: var(--an-shadow-lg, 0 10px 30px rgba(0, 0, 0, .4)) !important; color: var(--an-ink, #2f2619) !important;
}
html body.ui-arcade #menu .rewards-pop[hidden] { display: none !important; }
html body.ui-arcade #menu .rewards-body { display: flex !important; flex-direction: column !important; gap: 10px !important; }
html body.ui-arcade #menu .rewards-body > * {
  width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; justify-self: stretch !important; box-sizing: border-box !important;
}
html body.ui-arcade #menu .rewards-body #menu-daily.hidden { display: none !important; }
html body.ui-arcade #menu .rewards-body #menu-event-ach { position: static !important; }
html body.ui-arcade #menu .rewards-body .menu-event-ach-list { flex-wrap: wrap !important; }
html body.ui-arcade #menu .rewards-tree {
  min-height: 48px !important; padding: 10px 16px !important; cursor: pointer !important;
  background: var(--an-teal, #2b7a6e) !important; color: #fff !important; border: 3px solid var(--an-teal-d, #154a42) !important; border-radius: var(--an-r, 3px) !important;
  box-shadow: 0 4px 0 var(--an-teal-d, #154a42) !important; font: 800 15px/1.2 var(--an-font-title, inherit) !important; letter-spacing: .05em !important; text-transform: uppercase !important;
}
html body.ui-arcade #menu .rewards-tree:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 var(--an-teal-d, #154a42) !important; }
html body.ui-arcade #menu .rewards-tree:focus-visible { outline: 3px solid #fff !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px #154a42 !important; }

/* Bandeau cookies : UNE petite ligne en bas à gauche (texte légal et « En savoir plus » conservés). */
html body.ui-arcade #privacy-notice:not(.hidden) {
  left: max(10px, env(safe-area-inset-left)) !important; right: auto !important; bottom: max(10px, env(safe-area-inset-bottom)) !important;
  width: min(560px, calc(100vw - 20px)) !important; padding: 7px 10px !important; border: 1px solid rgba(255, 255, 255, .28) !important; border-radius: 8px !important;
  background: rgba(10, 26, 38, .82) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .35) !important; animation: none !important;
}
html body.ui-arcade #privacy-notice .pn-inner { max-width: none !important; margin: 0 !important; gap: 8px !important; flex-wrap: wrap !important; }
html body.ui-arcade #privacy-notice .pn-ic { display: none !important; }
html body.ui-arcade #privacy-notice :is(.pn-text, .pn-text span, p) { flex: 1 1 260px !important; font-size: 12px !important; line-height: 1.35 !important; font-weight: 600 !important; color: #e4eef5 !important; }
html body.ui-arcade #privacy-notice .pn-text b { color: #f6e08a !important; }
html body.ui-arcade:has(#options-panel:not(.hidden)) #privacy-notice { display: none !important; }
html body.ui-arcade #privacy-notice .pn-actions { display: flex !important; align-items: center !important; gap: 4px !important; margin-left: auto !important; }
html body.ui-arcade #privacy-notice .pn-btn { min-height: 44px !important; min-width: 44px !important; padding: 6px 12px !important; font-size: 13px !important; border-radius: 6px !important; }
html body.ui-arcade #privacy-notice .pn-btn--ghost { background: none !important; border: 0 !important; box-shadow: none !important; color: #f0d97a !important; text-decoration: underline !important; text-underline-offset: 3px !important; }
html body.ui-arcade #privacy-notice .pn-btn:focus-visible { outline: 3px solid #fff !important; outline-offset: 2px !important; }

/* ---------- P5 · PARAMÈTRES : onglets à GAUCHE ---------- */
html body.ui-arcade #options-panel:not(.hidden) {
  display: grid !important; grid-template-columns: 210px minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
  column-gap: 22px !important; row-gap: 10px !important; align-content: stretch !important; overflow: hidden !important;
}
html body.ui-arcade #options-panel > #opt-title { grid-column: 1 / -1 !important; grid-row: 1 !important; }
html body.ui-arcade #options-panel > #opt-tabs {
  grid-column: 1 !important; grid-row: 2 / 4 !important; flex-direction: column !important; flex-wrap: nowrap !important; align-self: start !important; gap: 8px !important; padding: 0 !important;
}
html body.ui-arcade #options-panel #opt-tabs .opt-tab {
  width: 100% !important; min-height: 48px !important; padding: 10px 16px !important; border-radius: var(--an-r, 3px) !important; text-align: left !important; justify-content: flex-start !important;
}
html body.ui-arcade #options-panel #opt-tabs .opt-tab:focus-visible { outline: 3px solid #0f4f8a !important; outline-offset: 2px !important; }
html body.ui-arcade #options-panel > #options-grid { grid-column: 2 !important; grid-row: 2 !important; overflow-y: auto !important; overscroll-behavior: contain; padding: 2px 4px 8px 2px !important; min-height: 0 !important; }
html body.ui-arcade #options-panel > .opt-foot { grid-column: 2 !important; grid-row: 3 !important; }
html body.ui-arcade #options-panel > #opt-install-hint { grid-column: 2 !important; grid-row: 4 !important; }
html body.ui-arcade #options-panel > #menu-captains-card { display: none !important; }
html body.ui-arcade #options-panel > #opt-version { grid-column: 1 / -1 !important; grid-row: 5 !important; margin-top: 0 !important; }
/* l'accès développeur vit maintenant au bas de l'onglet Avancé */
html body.ui-arcade #options-panel .opt-pane #dev-access { margin-top: 10px !important; }
html body.ui-arcade #options-panel .opt-row .opt-btn { min-height: 44px !important; }
html body.ui-arcade #options-panel input[type="range"] { min-height: 44px !important; }

/* Mobile portrait : onglets en barre horizontale au-dessus du contenu. */
@media (max-width: 700px) {
  html body.ui-arcade #options-panel:not(.hidden) { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto !important; row-gap: 8px !important; }
  html body.ui-arcade #options-panel > #opt-title { min-height: 48px !important; display: flex !important; align-items: center !important; }
  html body.ui-arcade #options-panel > #opt-tabs { grid-column: 1 !important; grid-row: 2 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding-bottom: 4px !important; }
  html body.ui-arcade #options-panel #opt-tabs .opt-tab { width: 100% !important; justify-content: center !important; text-align: center !important; padding: 8px 10px !important; }
  html body.ui-arcade #options-panel > #options-grid { grid-column: 1 !important; grid-row: 3 !important; }
  html body.ui-arcade #options-panel > .opt-foot { grid-column: 1 !important; grid-row: 4 !important; }
  html body.ui-arcade #options-panel > #opt-install-hint { grid-column: 1 !important; grid-row: 5 !important; }
  html body.ui-arcade #options-panel > #opt-version { grid-row: 6 !important; }
}
/* Paysage mobile (bas) : on garde les onglets à gauche, plus étroits. */
@media (max-width: 960px) and (max-height: 480px) and (min-width: 701px) {
  html body.ui-arcade #options-panel:not(.hidden) { grid-template-columns: 150px minmax(0, 1fr) !important; column-gap: 14px !important; }
  html body.ui-arcade #options-panel #opt-tabs .opt-tab { min-height: 44px !important; padding: 6px 10px !important; font-size: 13px !important; }
  html body.ui-arcade #options-panel > #opt-title { font-size: 20px !important; }
  html body.ui-arcade #options-panel:not(.hidden) { row-gap: 6px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body.ui-arcade #menu .rewards-tree, html body.ui-arcade #options-panel #opt-tabs .opt-tab { transition: none !important; }
}

/* Coin haut-droite : 4 boutons tiennent sur 390 px (Boutique réduite à son icône + pastille de perles). */
@media (max-width: 480px) {
  html body.ui-arcade #menu-corner { gap: 6px !important; padding: 10px 10px 0 !important; box-sizing: border-box !important; justify-content: flex-end !important; }
  html body.ui-arcade #menu-corner .menu-corner-btn { height: 44px !important; min-width: 44px !important; padding: 0 8px !important; }
  html body.ui-arcade #menu-corner #btn-rewards, html body.ui-arcade #menu-corner #btn-menu-options { width: 44px !important; min-width: 44px !important; }
  html body.ui-arcade #menu-corner #btn-premium .btn-shop-txt { display: none !important; }
}

/* ---- Logo « DOVION.IO » (revue Simon, point 11) : lettrage en arc + contour intégrés à l'image (tools/gen-logo.mjs),
   donc plus d'inclinaison ni de contour CSS ; affiché nettement plus grand, borné en hauteur pour garder « Prendre la mer » visible. ---- */
html body.ui-arcade #menu #menu-main .menu-logo-img, html body #menu #menu-main .menu-logo-img, html body.ui-arcade #menu .menu-logo-img {
  width: min(820px, 94vw, calc(46vh * 3.46)) !important; max-width: none !important; height: auto !important;
  transform: none !important;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.28)) !important;
}
@media (max-height: 520px) {
  html body.ui-arcade #menu #menu-main .menu-logo-img, html body #menu #menu-main .menu-logo-img { width: min(520px, 60vw, calc(46vh * 3.46)) !important; }
}