/* PRIME VR mobile hotfix v1.5 — opaque hamburger overlay fix.
   v1.4 fixed layout, but some Chromium/mobile compositions still painted
   the page through the menu because the menu is a fixed descendant of the
   fixed/backdrop-filter header. v1.5 adds an independent body overlay.
*/

@media (max-width: 1050px) {
  body.menu-open {
    overflow: hidden !important;
    touch-action: none;
  }

  /* Independent opaque layer. It does not depend on the header's containing
     block, so page cards/images can never shine through the open menu. */
  body.menu-open::before {
    content: "";
    position: fixed;
    z-index: 2147483000;
    top: 76px;
    right: 0;
    bottom: 0;
    left: 0;
    background: #080a10;
    opacity: 1;
    pointer-events: auto;
  }

  body.menu-open .site-header {
    z-index: 2147483001 !important;
    background: #080a10 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    isolation: auto !important;
  }

  .mobile-menu {
    position: fixed !important;
    z-index: 2147483002 !important;
    top: 76px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - 76px) !important;
    min-height: calc(100vh - 76px) !important;
    padding: 22px 16px calc(30px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    background: #080a10 !important;
    background-color: #080a10 !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: none !important;
  }

  .mobile-menu.is-open {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.menu-open .mobile-dock {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .mobile-menu__nav,
  .mobile-menu__contacts {
    position: relative;
    z-index: 1;
    background: #080a10 !important;
  }

  .mobile-menu__nav a {
    color: #f7f9ff !important;
    background: #080a10 !important;
  }

  /* Keep the catalog/search controls behind the menu even if they have their
     own stacking contexts. */
  body.menu-open main,
  body.menu-open .footer {
    position: relative;
    z-index: 0 !important;
  }
}

@media (max-width: 800px) {
  body.menu-open::before { top: 68px; }
  .mobile-menu {
    top: 68px !important;
    height: calc(100dvh - 68px) !important;
    min-height: calc(100vh - 68px) !important;
  }
}

/* Preserve the previous compact-card correction too. */
@media (max-width: 800px) {
  .games-carousel__track .game-card--compact {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .games-carousel__track .game-card--compact .game-card__visual {
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 1.42 / 1 !important;
  }
  .games-carousel__track .game-card--compact .game-card__body {
    width: 100% !important;
    min-width: 0 !important;
    padding: 15px !important;
  }
  .filter-row {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .filter-row::-webkit-scrollbar { display: none; }
}