/* Una misma retícula para escritorio, navegador móvil y APK.
   Los cinco accesos inferiores comparten centros, imagen y línea de texto. */
html.main-menu-view-active:not(.game-view-active) {
  --menu-edge: max(16px, 2vw, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --menu-top: max(16px, env(safe-area-inset-top, 0px));
  --menu-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  --menu-column: calc((100vw - 2 * var(--menu-edge)) / 5);
  --menu-icon: clamp(48px, 12dvh, 128px);
  --menu-footer-height: calc(var(--menu-icon) + 24px);
  --menu-row-step: calc((100dvh - var(--menu-top) - var(--menu-bottom) - var(--menu-footer-height)) / 3);
}

html.main-menu-view-active:not(.game-view-active) #mainMenuScreen .main-menu__footer--five {
  position: fixed !important;
  inset: auto var(--menu-edge) var(--menu-bottom) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-template-rows: auto !important;
  align-items: end !important;
  justify-items: center !important;
  width: auto !important;
  height: var(--menu-footer-height) !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
  animation: none !important;
}

html.main-menu-view-active:not(.game-view-active) #mainMenuScreen .main-menu__footer--five > *,
html.main-menu-view-active:not(.game-view-active) #mainMenuScreen .main-menu__footer--five #settingsBtn,
html.main-menu-view-active:not(.game-view-active) #mainMenuScreen .main-menu__footer--five #inventoryBtn {
  position: relative !important;
  inset: auto !important;
  grid-area: auto !important;
  justify-self: center !important;
  align-self: end !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  translate: none !important;
  transform: none !important;
}

html.main-menu-view-active:not(.game-view-active) #topBarLeftActions {
  position: fixed !important;
  inset: var(--menu-top) auto calc(var(--menu-bottom) + var(--menu-row-step)) var(--menu-edge) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: var(--menu-footer-height);
  align-content: space-between;
  align-items: center !important;
  justify-items: center !important;
  width: var(--menu-column) !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
html.main-menu-view-active:not(.game-view-active) #topBarLeftActions[hidden] { display: none !important; }

html.main-menu-view-active:not(.game-view-active) :is(#topBarLeftActions, #mainMenuScreen .main-menu__footer--five) .menu-btn--footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  gap: 6px !important;
}
html.main-menu-view-active:not(.game-view-active) :is(#topBarLeftActions, #mainMenuScreen .main-menu__footer--five) .menu-btn__footer-img {
  width: var(--menu-icon) !important;
  height: var(--menu-icon) !important;
  max-width: 100% !important;
  object-fit: contain;
  margin: 0 !important;
}
html.main-menu-view-active:not(.game-view-active) :is(#topBarLeftActions, #mainMenuScreen .main-menu__footer--five) .menu-btn__footer-label {
  margin: 0 !important;
  width: 100% !important;
  min-height: 18px !important;
  font-size: clamp(11px, 1.1vw, 16px) !important;
  line-height: 18px !important;
  text-align: center !important;
  white-space: normal !important;
}
html.main-menu-view-active:not(.game-view-active) #mainMenuScreen .main-menu__game-version {
  position: absolute !important;
  inset: 100% 0 auto !important;
  margin: 2px 0 0 !important;
  text-align: center;
  transform: none !important;
  translate: none !important;
  width: 100% !important;
}

html.main-menu-view-active:not(.game-view-active) #mainMenuScreen > .main-menu__stack {
  top: max(var(--menu-top), min(22dvh, 200px)) !important;
  bottom: calc(var(--menu-bottom) + var(--menu-footer-height) + 16px) !important;
  width: min(400px, 44vw) !important;
  max-width: none !important;
  box-sizing: border-box;
  justify-content: safe center;
}
html.main-menu-view-active:not(.game-view-active) #topBarControls {
  top: var(--menu-top) !important;
  right: var(--menu-edge) !important;
  width: var(--menu-column) !important;
  max-height: calc(100dvh - var(--menu-top) - var(--menu-bottom) - var(--menu-footer-height) - 16px);
}
html.main-menu-view-active:not(.game-view-active) #topBarSettingsControl {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Ocultar también los descendientes con visibility/pointer-events propios. */
body:is(.aax-modal-open, .has-blocking-modal) :is(#topBarControls, #topBarLeftActions, .main-menu__footer),
body:is(.aax-modal-open, .has-blocking-modal) :is(#topBarControls, #topBarLeftActions, .main-menu__footer) * {
  visibility: hidden !important;
  pointer-events: none !important;
}
body:has(dialog[aria-label="Laboratorio de Axies"][open]) :is(#topBarControls, #topBarLeftActions, .main-menu__footer) {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Paneles: caja incluida en el ancho, márgenes iguales y cierre accesible. */
:is(#rankingMenu, #settingsMenu, #profileMenu, #missionsMenu, #upgradesMenu) header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px 44px !important;
  align-items: start !important;
  gap: 8px !important;
}
:is(#rankingMenu, #settingsMenu, #profileMenu, #missionsMenu, #upgradesMenu) header > :not(button) { min-width: 0; grid-column: 1; }
:is(#rankingMenu, #settingsMenu, #profileMenu, #missionsMenu, #upgradesMenu) header > button {
  position: relative !important;
  inset: auto !important;
  grid-column: 3;
  grid-row: 1;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none;
}
:is(#rankingMenu, #settingsMenu, #profileMenu, #missionsMenu, #upgradesMenu) header > .panel-help__btn { grid-column: 2; }
#rankingMenu .ranking-menu__total-label { white-space: normal; }
#settingsMenu .settings-menu__header--sub {
  grid-template-columns: 44px minmax(0, 1fr) 44px 44px !important;
}
#settingsMenu .settings-menu__header--sub > .settings-menu__back { grid-column: 1; }
#settingsMenu .settings-menu__header--sub > .settings-menu__title { grid-column: 2; grid-row: 1; align-self: center; }
#settingsMenu .settings-menu__header--sub > .panel-help__btn { grid-column: 3; }
#settingsMenu .settings-menu__header--sub > .settings-menu__close { grid-column: 4; }
dialog[aria-label="Laboratorio de Axies"][open] {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
dialog[aria-label="Laboratorio de Axies"] > div {
  flex: 0 0 auto;
  gap: 12px;
  box-sizing: border-box;
}
dialog[aria-label="Laboratorio de Axies"] > div > strong { min-width: 0; }
dialog[aria-label="Laboratorio de Axies"] > div > button { flex-shrink: 0; min-height: 44px; }
dialog[aria-label="Laboratorio de Axies"] > iframe { flex: 1; min-height: 0; height: auto !important; }
:is(#rankingMenu, #settingsMenu, #profileMenu, #missionsMenu, #upgradesMenu, #inventoryEmptyMenu, #marketMenu) {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)) !important;
}
:is(#rankingMenu, #settingsMenu, #profileMenu, #missionsMenu, #upgradesMenu, #inventoryEmptyMenu, #marketMenu) > [role="dialog"] {
  box-sizing: border-box;
  max-width: 100% !important;
  min-width: 0;
  min-height: 0 !important;
  scrollbar-gutter: stable both-edges;
}
:is(.missions-menu__tabs, .upgrades-menu__tabs, .market-menu__tabs, .market-menu__subtabs, .profile-menu__section-switcher) {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
}
:is(.missions-menu__tabs, .upgrades-menu__tabs, .market-menu__tabs, .market-menu__subtabs, .profile-menu__section-switcher) > button {
  min-width: 0;
  min-height: 44px;
  padding-inline: 6px;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-height: 620px), (max-width: 900px) {
  html.main-menu-view-active:not(.game-view-active) {
    --menu-edge: max(8px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --menu-top: max(8px, env(safe-area-inset-top, 0px));
    --menu-icon: clamp(44px, 12dvh, 72px);
  }
  html.main-menu-view-active:not(.game-view-active) #mainMenuScreen > .main-menu__stack {
    top: var(--menu-top) !important;
    padding: 8px !important;
  }
  html.main-menu-view-active:not(.game-view-active) #topBarSettingsControl {
    max-height: inherit;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 0 !important;
  }
  html.main-menu-view-active:not(.game-view-active) .top-bar-currency {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    padding: 5px !important;
    gap: 5px !important;
  }
  html.main-menu-view-active:not(.game-view-active) .top-bar-currency__item {
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 4px !important;
    gap: 3px !important;
  }
  html.main-menu-view-active:not(.game-view-active) .top-bar-currency__art {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px;
  }
  html.main-menu-view-active:not(.game-view-active) .top-bar-currency__art .top-bar-currency__icon {
    width: 24px !important;
    height: 24px !important;
  }
  html.main-menu-view-active:not(.game-view-active) .top-bar-currency__copy { width: 100%; text-align: center; }
  html.main-menu-view-active:not(.game-view-active) :is(.top-bar-currency__purpose, .top-bar-currency__header-badge) { display: none !important; }
  html.main-menu-view-active:not(.game-view-active) .top-bar-currency__name { font-size: 10px !important; }
  html.main-menu-view-active:not(.game-view-active) .top-bar-currency__copy .top-bar-currency__value { font-size: 16px !important; }
  html.main-menu-view-active:not(.game-view-active) .top-bar-settings__row { flex-wrap: wrap; justify-content: center; }
  html.main-menu-view-active:not(.game-view-active) .pvp-live-status { min-width: 0; max-width: 100%; }
  html.main-menu-view-active:not(.game-view-active) .pvp-live-status__matches { white-space: normal; text-align: center; }
  :is(#rankingMenu, #settingsMenu, #profileMenu, #upgradesMenu, #inventoryEmptyMenu, #marketMenu) {
    align-items: start !important;
    place-items: start center !important;
    overflow-y: auto !important;
  }
  #missionsMenu {
    align-items: start !important;
    place-items: start center !important;
    overflow-y: hidden !important;
  }
  :is(#rankingMenu, #settingsMenu, #profileMenu, #upgradesMenu, #inventoryEmptyMenu, #marketMenu) > [role="dialog"] {
    max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  #missionsMenu > [role="dialog"] {
    max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 16px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  #missionsMenu > [role="dialog"] > * { flex-shrink: 1; }
  :is(#rankingMenu, #settingsMenu, #profileMenu, #missionsMenu, #upgradesMenu) :is(header, .ranking-menu__header) {
    position: relative !important;
    inset: auto !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
  }
  #rankingMenu .ranking-menu__list-wrap {
    flex: 0 0 auto;
    max-height: 50dvh;
    overflow-y: auto !important;
  }
  html.main-menu-view-active:not(.game-view-active) .top-bar-currency__name {
    white-space: normal !important;
    overflow: visible;
    line-height: 1.1;
  }
  html.main-menu-view-active:not(.game-view-active) .top-bar-materials__value {
    flex-direction: column !important;
    min-width: 0 !important;
    padding: 3px !important;
    gap: 2px !important;
  }
  html.main-menu-view-active:not(.game-view-active) .top-bar-materials__copy {
    min-width: 0;
    text-align: center;
  }
  html.main-menu-view-active:not(.game-view-active) .top-bar-materials__copy b {
    font-size: 11px !important;
    overflow: visible;
  }
}

/* Ranking apaisado: búsqueda y nombre comparten fila para dejar ver la lista. */
@media (orientation: landscape) and (max-height: 620px) {
  #rankingMenu > .ranking-menu__panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto minmax(90px, 1fr);
    gap: 6px 12px;
    width: min(760px, 100%);
    height: calc(100dvh - 32px) !important;
    padding: 12px !important;
  }
  #rankingMenu .ranking-menu__header { grid-column: 1 / -1; margin-bottom: 0 !important; }
  #rankingMenu .ranking-menu__heading { gap: 3px 8px; }
  #rankingMenu .ranking-menu__title { font-size: 20px; }
  #rankingMenu .ranking-menu__total { padding-top: 5px; }
  #rankingMenu .ranking-menu__search-wrap { margin: 0; align-self: end; }
  #rankingMenu .ranking-menu__name-field { margin: 0; padding: 6px 8px; }
  #rankingMenu .ranking-menu__name-input { padding: 7px 10px; }
  #rankingMenu .ranking-menu__status { grid-column: 1 / -1; min-height: 0; margin: 0; }
  #rankingMenu .ranking-menu__list-wrap { grid-column: 1 / -1; max-height: none; min-height: 0; }
}

html.main-menu-view-active.main-menu-subpanel-open:not(.game-view-active) #mainMenuScreen > .main-menu__stack {
  top: max(16px, env(safe-area-inset-top, 0px)) !important;
  bottom: var(--menu-bottom) !important;
  width: min(520px, calc(100vw - 2 * var(--menu-edge))) !important;
}

/* En vertical, las columnas laterales pasan a filas simétricas. */
@media (orientation: portrait) and (max-width: 900px) {
  html.main-menu-view-active:not(.game-view-active) { --menu-icon: 44px; }
  html.main-menu-view-active:not(.game-view-active) #topBarLeftActions {
    inset: var(--menu-top) var(--menu-edge) auto !important;
    width: auto !important;
    height: 72px;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: auto;
    gap: 0 !important;
  }
  html.main-menu-view-active:not(.game-view-active) #topBarControls {
    inset: calc(var(--menu-top) + 78px) var(--menu-edge) auto !important;
    width: auto !important;
    max-height: 184px;
  }
  html.main-menu-view-active:not(.game-view-active) #topBarSettingsControl .top-bar-currency {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "juice gold" "materials market";
    margin-top: 4px;
  }
  html.main-menu-view-active:not(.game-view-active) .top-bar-currency__header { display: none !important; }
  html.main-menu-view-active:not(.game-view-active) .top-bar-currency__item { flex-direction: row !important; }
  html.main-menu-view-active:not(.game-view-active) #mainMenuScreen > .main-menu__stack {
    top: calc(var(--menu-top) + 270px) !important;
    width: calc(100vw - 2 * var(--menu-edge)) !important;
  }
  #settingsMenu .settings-menu__header--sub > .settings-menu__title { font-size: 16px; overflow-wrap: anywhere; }
  dialog[aria-label="Laboratorio de Axies"] > div { flex-wrap: wrap; }
}