/* Mobile activity details are immersive: keep page scrolling, but remove the
   persistent navigation that belongs to the home screen. */
html.desktop-mobile-fit body.current-page-rescueBonus .bottom-nav,
html.desktop-mobile-fit body:has(#rescueBonus.active) .bottom-nav,
html.desktop-mobile-fit body.ranking-open .bottom-nav,
html.desktop-mobile-fit body.ranking-open .ranking-bottom-nav,
html.desktop-mobile-fit body:has(.coming-soon-backdrop.open) .bottom-nav,
html.desktop-mobile-fit body:has(#eventModal.open) .bottom-nav {
  display: none !important;
}

html.desktop-mobile-fit body.current-page-rescueBonus .app-shell,
html.desktop-mobile-fit body:has(#rescueBonus.active) .app-shell {
  min-height: calc(100dvh + env(safe-area-inset-bottom)) !important;
  padding-bottom: 0 !important;
  background: #141414 !important;
}

html.desktop-mobile-fit.activity-detail-open,
html.desktop-mobile-fit.activity-detail-open body,
html.desktop-mobile-fit.activity-detail-open body .app-shell {
  background: #141414 !important;
  background-color: #141414 !important;
}

html.desktop-mobile-fit body.current-page-rescueBonus #rescueBonus,
html.desktop-mobile-fit body:has(#rescueBonus.active) #rescueBonus {
  height: calc(100dvh - 86px + env(safe-area-inset-bottom)) !important;
  min-height: calc(100dvh - 86px + env(safe-area-inset-bottom)) !important;
  padding-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

html.desktop-mobile-fit body.current-page-rescueBonus .rescue-bonus-toolbar,
html.desktop-mobile-fit body:has(#rescueBonus.active) .rescue-bonus-toolbar {
  flex: 0 0 78px !important;
}

html.desktop-mobile-fit body.current-page-rescueBonus .rescue-bonus-card,
html.desktop-mobile-fit body:has(#rescueBonus.active) .rescue-bonus-card {
  width: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}

html.desktop-mobile-fit body.current-page-rescueBonus .rescue-bonus-card img,
html.desktop-mobile-fit body:has(#rescueBonus.active) .rescue-bonus-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

html.desktop-mobile-fit body.ranking-open .ranking-panel {
  height: calc(100dvh + env(safe-area-inset-bottom)) !important;
  max-height: calc(100dvh + env(safe-area-inset-bottom)) !important;
}

html.desktop-mobile-fit body.ranking-open .ranking-backdrop::after {
  display: none !important;
}

html.desktop-mobile-fit.activity-detail-open :is(.ranking-backdrop, .coming-soon-backdrop, #eventModal) {
  min-height: calc(100dvh + env(safe-area-inset-bottom)) !important;
}

/* Match the Lucky Treasure back target to the other mobile activity pages. */
html.xiaoxiao-desktop.desktop-mobile-fit.treasure-canonical body.layout-treasure .shared-site-header .shared-site-back {
  left: 28px !important;
  width: 48px !important;
  height: 48px !important;
  border: 1px solid rgba(246, 207, 114, 0.65) !important;
  border-radius: 50% !important;
  background: rgba(7, 12, 20, 0.82) !important;
  color: #fff !important;
  font-size: 46px !important;
  line-height: 1 !important;
}

.activity-swipe-home-preview {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  width: 100% !important;
  height: calc(100dvh + env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  background: #141414 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.activity-swipe-home-preview.is-visible {
  opacity: 1;
  visibility: visible;
}

.activity-swipe-current {
  z-index: 2147483001 !important;
  will-change: transform;
  box-shadow: -18px 0 38px rgba(0, 0, 0, 0.52) !important;
}

body.activity-swipe-current {
  position: relative !important;
  width: var(--activity-swipe-width, 100vw) !important;
  min-width: var(--activity-swipe-width, 100vw) !important;
  max-width: none !important;
  min-height: calc(100dvh + env(safe-area-inset-bottom)) !important;
  overflow-x: clip !important;
  transform-origin: left top !important;
  background: #141414 !important;
}

/* Profile routes move the fixed-width application canvas instead of the
   document body. Keeping the outer viewport stationary prevents mobile
   browsers from scaling the page down while it is dragged. */
.app-shell.activity-swipe-current {
  width: var(--activity-swipe-width, 100%) !important;
  min-width: var(--activity-swipe-width, 100%) !important;
  max-width: none !important;
  min-height: calc(100dvh + env(safe-area-inset-bottom)) !important;
  overflow-x: clip !important;
  transform-origin: left top !important;
}

html.activity-swipe-dragging,
html.activity-swipe-dragging body {
  overscroll-behavior: none !important;
}

html.profile-swipe-page,
html.profile-swipe-page body,
html.profile-swipe-root,
html.profile-swipe-root body,
html.home-swipe-root,
html.home-swipe-root body {
  overscroll-behavior-x: none !important;
  touch-action: pan-y !important;
}
