/* NeoMobile Core V1 — Select layout only
   Scope: #pageGame.nm-core-v1 + touch + portrait
   No :has(). Appearance GOLD stays in index.html.
   Viewport budget (100dvh / --appH) belongs to .app-shell only.
   main.card already takes the leftover under .app-header.
   #pageGame must fill that leftover (height/max-height: 100%), never 100dvh.
*/

@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  #pageGame.nm-core-v1 {
    --nm-safe-b: env(safe-area-inset-bottom, 0px);
  }

  #pageGame.nm-core-v1.page.active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-bottom: max(0.2rem, var(--nm-safe-b)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-x: none;
  }

  #pageGame.nm-core-v1 .game-header {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #pageGame.nm-core-v1 .select-mobile-top-logo,
  #pageGame.nm-core-v1 .select-logo-title-row {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
  }

  #pageGame.nm-core-v1 .game-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  #pageGame.nm-core-v1 .game-layout > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  #pageGame.nm-core-v1 .preview-panel {
    min-width: 0;
  }

  #pageGame.nm-core-v1 .group,
  #pageGame.nm-core-v1 .group-burger,
  #pageGame.nm-core-v1 .group-drink,
  #pageGame.nm-core-v1 .group-dessert {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  #pageGame.nm-core-v1 .choices-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #pageGame.nm-core-v1 .choice-btn,
  #pageGame.nm-core-v1 .choice-btn[data-group="burger"],
  #pageGame.nm-core-v1 .choice-btn[data-group="drink"],
  #pageGame.nm-core-v1 .choice-btn[data-group="dessert"] {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #pageGame.nm-core-v1 .choice-content {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #pageGame.nm-core-v1 .food-icon,
  #pageGame.nm-core-v1 .choice-btn img.food-icon,
  #pageGame.nm-core-v1 .choice-btn img {
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  #pageGame.nm-core-v1 .choice-label {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #pageGame.nm-core-v1 .group.draw-glow,
  #pageGame.nm-core-v1 .choice-btn.draw-cycling {
    overflow: visible !important;
  }

  /* Footer in document flow — neutralize fixed/out-of-flow offsets only. */
  #pageGame.nm-core-v1 .game-footer {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    padding-bottom: max(0.2rem, var(--nm-safe-b)) !important;
    transform: none !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  #pageGame.nm-core-v1 #btnValidate {
    position: relative !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
    pointer-events: auto !important;
  }
}

/* Viewport-width guard (loaded last). Neutralizes legacy 640px / 520px / min-width:520px
   even if hover/pointer/orientation media do not match. Desktop >880px unchanged. */
@media (max-width: 880px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  #pageGame.nm-core-v1,
  #pageGame.nm-core-v1.page.active {
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #pageGame.nm-core-v1 .game-header,
  #pageGame.nm-core-v1 .select-mobile-top-logo,
  #pageGame.nm-core-v1 .select-logo-title-row,
  #pageGame.nm-core-v1 .game-layout,
  #pageGame.nm-core-v1 .game-layout > div:first-child,
  #pageGame.nm-core-v1 .preview-panel,
  #pageGame.nm-core-v1 .group,
  #pageGame.nm-core-v1 .group-burger,
  #pageGame.nm-core-v1 .group-drink,
  #pageGame.nm-core-v1 .group-dessert,
  #pageGame.nm-core-v1 .choices-row,
  #pageGame.nm-core-v1 .game-footer {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #pageGame.nm-core-v1 .game-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #pageGame.nm-core-v1 .choices-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #pageGame.nm-core-v1 .choice-btn,
  #pageGame.nm-core-v1 .choice-btn[data-group="burger"],
  #pageGame.nm-core-v1 .choice-btn[data-group="drink"],
  #pageGame.nm-core-v1 .choice-btn[data-group="dessert"],
  #pageGame.nm-core-v1 .choice-content,
  #pageGame.nm-core-v1 .choice-label {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Intro promo: nowrap + 1.28rem overflows ~525px when hover:none does not match. */
  .app-shell:has(#pageIntro.active) .app-header {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .app-shell:has(#pageIntro.active) .app-title,
  .app-shell:has(#pageIntro.active) .app-title-promo-slot {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .app-shell:has(#pageIntro.active) .app-title-promo-slot {
    display: block !important;
    width: 100% !important;
    grid-column: 1 / -1 !important;
  }

  .app-shell:has(#pageIntro.active) .app-title-promo {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-size: clamp(0.68rem, 3.05vw, 1.05rem) !important;
    transform-origin: center center !important;
  }

  /* Overlay: same selectors as index.html, without (hover:none). */
  #mobileItemOverlay.mobile-item-overlay {
    position: fixed !important;
    inset: 0 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.55) !important;
    z-index: 20000 !important;
    padding: 18px !important;
  }

  #mobileItemOverlay.mobile-item-overlay.active {
    display: flex !important;
  }

  #mobileItemOverlay .mobile-item-modal {
    width: min(88vw, 360px) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: #fff8ef !important;
    border: 2px solid #e06f19 !important;
    border-radius: 24px !important;
    padding: 18px !important;
    text-align: center !important;
  }

  #mobileItemChoose,
  #mobileItemCancel {
    pointer-events: auto !important;
  }
}