/* v572: final mobile main-menu geometry owner.
   Fixes the Stage-3 full-height drawer + legacy circular clip-path combination
   that could render as one giant black oval on Android/WebView. */

@media (pointer: coarse), (max-width: 920px) {
  html.lme-platform-mobile body #mainMenuPopover.lme-burger-menu,
  html[data-lme-platform="mobile"] body #mainMenuPopover.lme-burger-menu,
  html.lme-mobile-stage3-v569 body #mainMenuPopover.lme-burger-menu,
  body.mobile-ui #mainMenuPopover.lme-burger-menu {
    position: fixed !important;
    inset: auto 10px auto max(10px, var(--lme-main-menu-left, 10px)) !important;
    bottom: auto !important;
    top: max(
      calc(env(safe-area-inset-top, 0px) + 66px),
      var(--lme-main-menu-top, 66px)
    ) !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 380px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(
      var(--lme-main-menu-max-height, 620px),
      calc(var(--lme-vv-height-v567, 100dvh) - env(safe-area-inset-top, 0px) - 82px)
    ) !important;

    margin: 0 !important;
    padding: 10px !important;
    gap: 8px !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;

    border-radius: 24px !important;
    border: 1px solid rgba(224, 212, 255, .16) !important;
    background: #17151d !important;
    background-image: linear-gradient(180deg, rgba(32, 28, 43, .98), rgba(20, 18, 26, .995)) !important;
    box-shadow: 0 22px 58px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .055) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;

    /* Hard reset every legacy circle / ellipse / mask path. */
    clip-path: none !important;
    -webkit-clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    shape-outside: none !important;
    aspect-ratio: auto !important;

    /* Keep Stage-3 direct manipulation, but never scale or curve the surface. */
    transform: translate3d(var(--lme-stage3-menu-x, 0%), 0, 0) !important;
    translate: none !important;
    rotate: none !important;
    scale: 1 !important;
    transform-origin: top left !important;
    filter: none !important;

    isolation: isolate !important;
    contain: layout style !important;
    z-index: 10030 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    animation: none !important;
    transition:
      transform 230ms cubic-bezier(.16, 1, .3, 1),
      opacity 150ms ease,
      visibility 0s linear 230ms !important;
  }

  html.lme-platform-mobile body #mainMenuPopover.lme-burger-menu::before,
  html.lme-platform-mobile body #mainMenuPopover.lme-burger-menu::after,
  html[data-lme-platform="mobile"] body #mainMenuPopover.lme-burger-menu::before,
  html[data-lme-platform="mobile"] body #mainMenuPopover.lme-burger-menu::after,
  html.lme-mobile-stage3-v569 body #mainMenuPopover.lme-burger-menu::before,
  html.lme-mobile-stage3-v569 body #mainMenuPopover.lme-burger-menu::after {
    content: none !important;
    display: none !important;
  }

  html.lme-platform-mobile body #mainMenuPopover.lme-burger-menu:not(.hidden),
  html.lme-platform-mobile body #mainMenuPopover.lme-burger-menu.is-open,
  html.lme-platform-mobile body.main-menu-popover-open #mainMenuPopover.lme-burger-menu,
  html[data-lme-platform="mobile"] body #mainMenuPopover.lme-burger-menu:not(.hidden),
  html[data-lme-platform="mobile"] body #mainMenuPopover.lme-burger-menu.is-open,
  html[data-lme-platform="mobile"] body.main-menu-popover-open #mainMenuPopover.lme-burger-menu,
  html.lme-mobile-stage3-v569 body #mainMenuPopover.lme-burger-menu:not(.hidden),
  html.lme-mobile-stage3-v569 body #mainMenuPopover.lme-burger-menu.is-open,
  html.lme-mobile-stage3-v569 body.main-menu-popover-open #mainMenuPopover.lme-burger-menu,
  body.mobile-ui.main-menu-popover-open #mainMenuPopover.lme-burger-menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition-delay: 0s !important;
  }

  html.lme-platform-mobile body #mainMenuPopover.lme-burger-menu.hidden,
  html[data-lme-platform="mobile"] body #mainMenuPopover.lme-burger-menu.hidden,
  html.lme-mobile-stage3-v569 body #mainMenuPopover.lme-burger-menu.hidden {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Never let old item animations or pseudo layers cover the panel. */
  #mainMenuPopover > *,
  #mainMenuPopover .lme-burger-menu-head,
  #mainMenuPopover .lme-burger-menu-item {
    position: relative !important;
    z-index: 1 !important;
    visibility: visible !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    filter: none !important;
  }

  #mainMenuPopover .lme-burger-menu-head,
  #mainMenuPopover .lme-burger-menu-item,
  body.main-menu-popover-open #mainMenuPopover .lme-burger-menu-head,
  body.main-menu-popover-open #mainMenuPopover .lme-burger-menu-item {
    animation: lmeMenuItemFadeV572 150ms ease-out both !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  #mainMenuPopover .lme-burger-menu-item::before,
  #mainMenuPopover .lme-burger-menu-item::after {
    content: none !important;
    display: none !important;
  }

  #mainMenuPopover .lme-burger-menu-item,
  #mainMenuPopover .lme-burger-menu-item:hover,
  #mainMenuPopover .lme-burger-menu-item:focus-visible,
  #mainMenuPopover .lme-burger-menu-item.is-active {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  #mainMenuPopover.is-stage3-dragging-v569,
  #mainMenuPopover.is-stage3-menu-snap-v569 {
    animation: none !important;
  }

  #mainMenuPopover.lme-burger-menu::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  /* Stage-3 backdrop remains a separate rectangular layer. */
  #lmeMobileStage3BackdropV569 {
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
  }
}

@media (max-width: 380px) {
  html.lme-platform-mobile body #mainMenuPopover.lme-burger-menu,
  html[data-lme-platform="mobile"] body #mainMenuPopover.lme-burger-menu,
  html.lme-mobile-stage3-v569 body #mainMenuPopover.lme-burger-menu,
  body.mobile-ui #mainMenuPopover.lme-burger-menu {
    inset-inline: 8px !important;
    max-width: none !important;
    padding: 9px !important;
    gap: 7px !important;
    border-radius: 22px !important;
  }

  #mainMenuPopover .lme-burger-menu-item,
  #mainMenuPopover .lme-burger-menu-item:hover,
  #mainMenuPopover .lme-burger-menu-item:focus-visible,
  #mainMenuPopover .lme-burger-menu-item.is-active {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
  }
}

@keyframes lmeMenuItemFadeV572 {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #mainMenuPopover.lme-burger-menu,
  #mainMenuPopover .lme-burger-menu-head,
  #mainMenuPopover .lme-burger-menu-item {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}