/* Mobile secondary views share the editor's bounded, gold scroll surface.
   Android staging enables this touch query independently of WebView's pointer
   reporting. Keep home, gameplay, dialogs and the editor's two panes separate. */
@media (pointer: coarse) and (max-width: 1366px) {
  /* Match the catalogue's nearly edge-to-edge mobile width. The app's home
     padding must not leave these pages offset or clip their right edge. Scope
     the parent change to an open secondary view so the home rails keep their
     spacing. Shop, Collection and Deck Editor keep their current layout. */
  html body:not(.in-game) > .app:has(:is(
    #userProfilePanel, #avatarCosmeticsPanel, #avatarClassPanel, #avatarSkillTreePanel, #statsPanel, #leaderboardPanel, #friendsPanel,
    #guildPanel, #guidePanel, #missionsPanel, #mailPanel,
    #avatarProgressionPanel
  ):not(.hidden)) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left) !important;
  }

  html body:not(.in-game) :is(
    #userProfilePanel, #avatarCosmeticsPanel, #avatarClassPanel, #avatarSkillTreePanel, #statsPanel, #leaderboardPanel, #friendsPanel,
    #guildPanel, #guidePanel, #missionsPanel, #mailPanel,
    #avatarProgressionPanel
  ) {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: min(calc(100% - 8px), 1180px) !important;
    max-width: min(calc(100% - 8px), 1180px) !important;
    margin-inline: auto !important;
    padding: 10px !important;
    transform: none !important;
  }

  html body:not(.in-game) :is(
    #userProfilePanel, #avatarCosmeticsPanel, #avatarClassPanel, #avatarSkillTreePanel, #statsPanel, #leaderboardPanel, #friendsPanel,
    #guildPanel, #guidePanel, #missionsPanel, #mailPanel,
    #avatarProgressionPanel, #collectionPanel, #shopPanel
  ) {
    box-sizing: border-box !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin-block: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-gutter: stable;
    /* Use the custom WebKit track on Android instead of a transient overlay. */
    scrollbar-width: auto !important;
    scrollbar-color: #c88a27 #050707 !important;
  }

  /* Catalogue flex children must keep their natural height, so the outer
     panel owns scrolling instead of squeezing the header or card rows. */
  html body:not(.in-game) :is(#collectionPanel, #shopPanel) > * {
    flex-shrink: 0 !important;
  }

  /* Keep long skill names inside their branch on narrow landscape phones. */
  #avatarSkillTreePanel .class-skill-node-head {
    flex-wrap: nowrap;
    padding-right: 0;
  }

  #avatarSkillTreePanel .class-skill-node-head > div {
    flex: 1;
    overflow-wrap: anywhere;
  }

  #avatarSkillTreePanel .class-skill-icon {
    flex-shrink: 0;
  }

  /* Remove legacy vertical sub-scrollers only from the main page content.
     Filter drawers, dialogs and the editor keep their own scrolling. */
  html body:not(.in-game) #collectionPanel :is(.collection-body, .collection-container),
  html body:not(.in-game) #shopPanel .shop-cards-container,
  html body:not(.in-game) #leaderboardPanel .leaderboard-list,
  html body:not(.in-game) #guidePanel .guide-content {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Preserve horizontal access to the progression table's columns. With no
     height cap this wrapper cannot trap vertical swipes in a second viewport. */
  html body:not(.in-game):has(#avatarProgressionPanel:not(.hidden)) {
    touch-action: pan-x pan-y !important;
  }

  html body:not(.in-game) #avatarProgressionPanel .avatar-progression-table-wrap {
    height: auto !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    touch-action: pan-x pan-y !important;
  }

  html body:not(.in-game) :is(
    #userProfilePanel, #avatarCosmeticsPanel, #avatarClassPanel, #avatarSkillTreePanel, #statsPanel, #leaderboardPanel, #friendsPanel,
    #guildPanel, #guidePanel, #missionsPanel, #mailPanel,
    #avatarProgressionPanel, #collectionPanel, #shopPanel,
    #deckBuilderPanel #deckEditorCardsGrid,
    #deckBuilderPanel .editor-sidebar-cards
  )::-webkit-scrollbar {
    width: 10px !important;
    height: 9px !important;
  }

  html body:not(.in-game) :is(
    #deckBuilderPanel #deckEditorCardsGrid,
    #deckBuilderPanel .editor-sidebar-cards
  ) {
    scrollbar-width: auto !important;
    scrollbar-gutter: stable;
  }
}