/* Final mobile-only header placement overrides.
   Loaded after all fantasy/theme styles. Desktop is untouched. */

@media (pointer: coarse) and (max-width: 1366px) {
  /* SHOP — reserve a right rail and stack Back above Filters. */
  html body #shopPanel .page-panel-head {
    position: relative !important;
    display: block !important;
    min-height: 116px !important;
    padding-right: 124px !important;
    box-sizing: border-box !important;
  }

  html body #shopPanel .collection-header-left {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Give the available-gold badge a little more breathing room below NEGOZIO. */
  html body #shopPanel .shop-summary {
    transform: translateY(4px) !important;
  }

  html body #shopPanel .shop-head-actions {
    position: absolute !important;
    top: 6px !important;
    right: 8px !important;
    display: block !important;
    width: 112px !important;
    height: 104px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #shopPanel #shopBackHomeBtn.back-nav-btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #shopPanel #shopFiltersToggleBtn {
    position: absolute !important;
    top: 58px !important;
    right: 0 !important;
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    justify-content: center !important;
  }

  /* STORY — give the header its own vertical rhythm on mobile.
     Back occupies the first action row; Resume / Challenges sit below it,
     so the navigation control can never overlap either action button. */
  html body #campaignPanel .page-panel-head {
    position: relative !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px) !important;
    align-items: start !important;
    gap: 12px 18px !important;
    padding-right: 0 !important;
    padding-bottom: 18px !important;
    box-sizing: border-box !important;
  }

  html body #campaignPanel .campaign-header-actions {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: 54px auto !important;
    gap: 10px !important;
    align-self: start !important;
    justify-self: end !important;
    width: min(100%, 520px) !important;
    min-height: 112px !important;
    margin: 0 0 0 auto !important;
  }

  html body #campaignPanel #campaignBackHomeBtn.back-nav-btn {
    position: static !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: start !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #campaignPanel #campaignResumeBtn {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
  }

  html body #campaignPanel #campaignChallengesBtn {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
  }

  html body #campaignPanel .campaign-chapters-nav {
    margin-top: 18px !important;
  }
}

@media (pointer: coarse) and (orientation: portrait) and (max-width: 700px) {
  html body #shopPanel .page-panel-head {
    min-height: 122px !important;
    padding-right: 116px !important;
  }

  html body #campaignPanel .page-panel-head {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding-right: 0 !important;
    padding-bottom: 20px !important;
  }

  html body #campaignPanel .campaign-header-actions {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  html body #campaignPanel .campaign-chapters-nav {
    margin-top: 20px !important;
  }
}