/* 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 — mobile information hierarchy:
     centered title/copy, centered actions below, Back kept in the top-right. */
  html body #campaignPanel .page-panel-head {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    min-height: 0 !important;
    padding: 12px 74px 18px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  html body #campaignPanel .page-panel-head > div:first-child {
    width: min(100%, 760px) !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  html body #campaignPanel .page-panel-head h2 {
    margin: 0 0 7px !important;
    line-height: 1.08 !important;
  }

  html body #campaignPanel .page-panel-head .panel-subtitle {
    max-width: 680px !important;
    margin: 0 auto !important;
    line-height: 1.42 !important;
    text-wrap: balance;
  }

  html body #campaignPanel .campaign-header-actions {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 2px auto 0 !important;
  }

  html body #campaignPanel #campaignBackHomeBtn.back-nav-btn {
    position: absolute !important;
    top: 4px !important;
    right: 6px !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,
  html body #campaignPanel #campaignChallengesBtn {
    flex: 0 1 220px !important;
    width: min(220px, 42vw) !important;
    min-width: 150px !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  html body #campaignPanel .campaign-chapters-nav {
    margin-top: 12px !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 {
    gap: 11px !important;
    padding: 12px 64px 18px !important;
  }

  html body #campaignPanel .campaign-header-actions {
    width: 100% !important;
    justify-content: center !important;
  }

  html body #campaignPanel #campaignResumeBtn,
  html body #campaignPanel #campaignChallengesBtn {
    width: min(100%, 260px) !important;
    flex-basis: 220px !important;
  }

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


/* Mobile tutorial focus target: survives the taller centered story header. */
@media (pointer: coarse) and (max-width: 1366px) {
  html body #campaignPanel .campaign-coach-target {
    position: relative !important;
    z-index: 9 !important;
    scroll-margin-block: 42dvh !important;
    outline: 2px solid rgba(91, 222, 255, 0.92) !important;
    outline-offset: 3px !important;
    box-shadow:
      0 0 0 4px rgba(46, 203, 255, 0.16),
      0 0 24px rgba(46, 203, 255, 0.52) !important;
  }
}