/* One authored website header shared by Home, Lucky Treasure and Treasure
   History. Telegram has its own locked geometry below. */
html.xiaoxiao-desktop:not(.telegram-mini-app) body .shared-site-header {
  position: relative !important;
  z-index: 20 !important;
  width: 810px !important;
  min-width: 810px !important;
  max-width: 810px !important;
  height: 86px !important;
  min-height: 86px !important;
  margin: 0 !important;
  padding: 0 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #020814 url("assets/xiaoxiao-header-bg.png?v=clean3") center/cover no-repeat !important;
  border: 0 !important;
  border-bottom: 4px solid #d7a12d !important;
  box-sizing: border-box !important;
}

/* The homepage header supplies the carousel's upper divider by itself. */
html.xiaoxiao-desktop:not(.telegram-mini-app) body.current-page-home .shared-site-header {
  border-bottom-width: 3px !important;
}

html.xiaoxiao-desktop:not(.telegram-mini-app) body .shared-site-header .shared-site-brand {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  min-width: 0 !important;
  height: 60px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  color: #f6cb68 !important;
  text-decoration: none !important;
}

html.xiaoxiao-desktop:not(.telegram-mini-app) body .shared-site-header .shared-site-brand-mark,
html.xiaoxiao-desktop:not(.telegram-mini-app) body .shared-site-header .shared-site-brand-mark img,
html.xiaoxiao-desktop:not(.telegram-mini-app) body .shared-site-header .shared-site-brand-logo {
  display: block !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  object-fit: contain !important;
}

html.xiaoxiao-desktop:not(.telegram-mini-app) body .shared-site-header .shared-site-brand b,
html.xiaoxiao-desktop:not(.telegram-mini-app) body .shared-site-header .shared-site-brand strong {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  font-family: Manrope, "Noto Sans SC", sans-serif !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .4px !important;
  white-space: nowrap !important;
  color: #f6cb68 !important;
  -webkit-text-fill-color: #f6cb68 !important;
  text-shadow: none !important;
  filter: drop-shadow(0 1px 6px rgba(246,203,104,.25)) !important;
}

html.xiaoxiao-desktop:not(.telegram-mini-app) body .shared-site-header .shared-site-brand b::after,
html.xiaoxiao-desktop:not(.telegram-mini-app) body .shared-site-header .shared-site-brand strong::after {
  content: none !important;
}

html.xiaoxiao-desktop:not(.telegram-mini-app) body .shared-site-header .shared-site-back {
  position: absolute !important;
  left: 42px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 35px !important;
  height: 35px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #f7ce66 !important;
  text-decoration: none !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

html.xiaoxiao-desktop:not(.telegram-mini-app) body .shared-site-header .shared-site-back:active {
  background: rgba(247,206,102,.12) !important;
}

@keyframes sharedSiteHeaderLightSweep {
  from { background-position: 160% 0; }
  to { background-position: -160% 0; }
}

/* Telegram keeps its original geometry. This selector deliberately matches
   the treasure header's specificity so the website typeface and sweep really
   replace the legacy treasure lettering. */
html.telegram-mini-app body:is(.layout-main,.layout-treasure,.layout-treasure-history) .shared-site-header .shared-site-brand b,
html.telegram-mini-app body:is(.layout-main,.layout-treasure,.layout-treasure-history) .shared-site-header .shared-site-brand strong {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  font-family: Manrope, "Noto Sans SC", sans-serif !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .4px !important;
  white-space: nowrap !important;
  color: #f6cb68 !important;
  background: none !important;
  -webkit-text-fill-color: #f6cb68 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  filter: drop-shadow(0 1px 6px rgba(246,203,104,.25)) !important;
  animation: none !important;
}

html.telegram-mini-app body:is(.layout-main,.layout-treasure,.layout-treasure-history) .shared-site-header .shared-site-brand b::after,
html.telegram-mini-app body:is(.layout-main,.layout-treasure,.layout-treasure-history) .shared-site-header .shared-site-brand strong::after {
  content: none !important;
}

/* A real text layer is used for the sweep. Telegram WebView can drop animated
   generated content while its canvas is zoomed, but it consistently paints
   regular DOM text on desktop and phone. */
.shared-site-header .shared-site-brand b > .shared-site-brand-shine,
.shared-site-header .shared-site-brand strong > .shared-site-brand-shine {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  white-space: nowrap !important;
  color: transparent !important;
  background-image: linear-gradient(110deg,transparent 0%,transparent 42%,rgba(255,246,181,.55) 47%,#fff 50%,rgba(255,246,181,.55) 53%,transparent 58%,transparent 100%) !important;
  background-size: 320% 100% !important;
  background-position: 150% 0;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: sharedSiteHeaderLightSweep 4.8s linear infinite !important;
  will-change: background-position !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .shared-site-header .shared-site-brand .shared-site-brand-shine {
    animation-duration: 4.8s !important;
    animation-iteration-count: infinite !important;
  }
}

/* Telegram uses the same sweep, just slightly slower. Web timing is unchanged. */
html.telegram-mini-app .shared-site-header .shared-site-brand .shared-site-brand-shine {
  animation-duration: 6s !important;
}

/* Telegram uses the same blue-black brand background as the desktop website.
   This replaces the legacy brown history-page banner without changing layout. */
html.telegram-mini-app body:is(.layout-main,.layout-treasure,.layout-treasure-history) .shared-site-header {
  background: #020814 url("assets/xiaoxiao-header-bg.png?v=clean3") center/cover no-repeat !important;
  border: 0 !important;
  border-bottom: 4px solid #d7a12d !important;
  box-sizing: border-box !important;
}

/* One literal chevron treatment is shared by both Telegram treasure routes so
   the history link cannot fall back to its legacy Segoe UI rendering. */
html.telegram-mini-app body:is(.layout-treasure,.layout-treasure-history) .shared-site-header .shared-site-back {
  color: #f5c85d !important;
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  text-align: center !important;
  text-decoration: none !important;
}

/* Phone Telegram locks both treasure headers to the same 810px centered
   canvas. The brand is positioned from the header center, independent of the
   back button's enlarged hit target. */
html.telegram-mobile-app body:is(.layout-treasure,.layout-treasure-history) .shared-site-header {
  position: relative !important;
  width: 810px !important;
  min-width: 810px !important;
  max-width: 810px !important;
  height: 86px !important;
  min-height: 86px !important;
  margin: 0 !important;
  padding: 0 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.telegram-mobile-app body:is(.layout-treasure,.layout-treasure-history) .shared-site-header .shared-site-brand {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: max-content !important;
  max-width: calc(100% - 110px) !important;
  margin: 0 !important;
  transform: translate(-50%,-50%) !important;
}

/* Phone Telegram history and treasure use the same large treasure back target. */
html.telegram-mobile-app body:is(.layout-treasure,.layout-treasure-history) .shared-site-header .shared-site-back {
  position: absolute !important;
  left: 22px !important;
  top: 50% !important;
  width: 76px !important;
  height: 76px !important;
  font-size: 64px !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}

/* Match the Telegram Desktop home wordmark to the treasure-room wordmark.
   Logo geometry and every mobile/web layout remain unchanged. */
html.telegram-desktop-app body.layout-main .shared-site-header .shared-site-brand b {
  font-size: 28px !important;
}

/* Telegram Desktop: every shared header follows the treasure-room header as
   the single source of truth for size, spacing and placement. */
html.telegram-desktop-app body:is(.layout-main,.layout-treasure,.layout-treasure-history) .shared-site-header {
  position: relative !important;
  width: 810px !important;
  min-width: 810px !important;
  max-width: 810px !important;
  height: 86px !important;
  min-height: 86px !important;
  margin: 0 !important;
  padding: 0 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.telegram-desktop-app body:is(.layout-main,.layout-treasure,.layout-treasure-history) .shared-site-header .shared-site-brand {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  inset-inline-end: auto !important;
  bottom: auto !important;
  width: max-content !important;
  max-width: calc(100% - 110px) !important;
  height: 60px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  transform: translate(-50%,-50%) !important;
}

html.telegram-desktop-app body:is(.layout-main,.layout-treasure,.layout-treasure-history) .shared-site-header .shared-site-brand-mark,
html.telegram-desktop-app body:is(.layout-main,.layout-treasure,.layout-treasure-history) .shared-site-header .shared-site-brand-mark img,
html.telegram-desktop-app body:is(.layout-main,.layout-treasure,.layout-treasure-history) .shared-site-header .shared-site-brand-logo {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  height: 60px !important;
  object-fit: contain !important;
}

html.telegram-desktop-app body:is(.layout-main,.layout-treasure,.layout-treasure-history) .shared-site-header .shared-site-brand b,
html.telegram-desktop-app body:is(.layout-main,.layout-treasure,.layout-treasure-history) .shared-site-header .shared-site-brand strong {
  font-size: 28px !important;
  line-height: 1 !important;
  letter-spacing: .4px !important;
}

/* Desktop Telegram history and treasure share the treasure-room back control. */
html.telegram-desktop-app body:is(.layout-treasure,.layout-treasure-history) .shared-site-header .shared-site-back {
  position: absolute !important;
  left: 42px !important;
  top: 50% !important;
  width: 35px !important;
  height: 35px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 34px !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}

/* Telegram Desktop auth pages must not inherit the narrow-window mobile
   wordmark. Match the desktop Telegram home header exactly. */
html.telegram-desktop-app body.auth-open .auth-centered-brand {
  gap: 18px !important;
  max-width: calc(100% - 210px) !important;
}

html.telegram-desktop-app body.auth-open .auth-centered-brand .auth-bottom-brand-logo {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  height: 60px !important;
  flex: 0 0 60px !important;
}

html.telegram-desktop-app body.auth-open .auth-centered-brand strong {
  overflow: visible !important;
  font-family: Manrope, "Noto Sans SC", sans-serif !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .4px !important;
  white-space: nowrap !important;
  color: #f6cb68 !important;
}

/* Desktop Telegram auth uses the same large, borderless chevron control as
   the phone Telegram treasure room. */
html.telegram-desktop-app body.auth-open .auth-back-home {
  left: 22px !important;
  top: 50% !important;
  width: 76px !important;
  min-width: 76px !important;
  height: 76px !important;
  min-height: 76px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f5c85d !important;
  transform: translateY(-50%) !important;
}

html.telegram-desktop-app body.auth-open .auth-back-home-icon {
  margin: 0 !important;
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", sans-serif !important;
  font-size: 64px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

html.telegram-desktop-app body.auth-open .auth-back-home > span:last-child {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Profile entry sub-pages own their compact back header. Remove the global
   brand/navigation chrome and reclaim its reserved space completely. */
body:is(.current-page-wallet,.current-page-walletTransactions,.current-page-memberProfiles,.current-page-memberPoints,.current-page-editProfile) .shared-site-header,
body:has(#wallet.active) .shared-site-header,
body:has(#walletTransactions.active) .shared-site-header,
body:has(#memberProfiles.active) .shared-site-header,
body:has(#memberPoints.active) .shared-site-header,
body:has(#memberHistory.active) .shared-site-header,
body:has(#editProfile.active) .shared-site-header,
body:is(.current-page-wallet,.current-page-walletTransactions,.current-page-memberProfiles,.current-page-memberPoints,.current-page-editProfile) .bottom-nav,
body:has(#wallet.active) .bottom-nav,
body:has(#walletTransactions.active) .bottom-nav,
body:has(#memberProfiles.active) .bottom-nav,
body:has(#memberPoints.active) .bottom-nav,
body:has(#editProfile.active) .bottom-nav {
  display: none !important;
}

body:is(.current-page-wallet,.current-page-walletTransactions,.current-page-memberProfiles,.current-page-memberPoints,.current-page-editProfile) .app-shell,
body:has(#wallet.active) .app-shell,
body:has(#walletTransactions.active) .app-shell,
body:has(#memberProfiles.active) .app-shell,
body:has(#memberPoints.active) .app-shell,
body:has(#editProfile.active) .app-shell {
  min-height: 100dvh !important;
  padding-bottom: 0 !important;
}

body:is(.current-page-wallet,.current-page-walletTransactions,.current-page-memberProfiles,.current-page-memberPoints,.current-page-editProfile) :is(#wallet,#walletTransactions,#memberProfiles,#memberPoints,#editProfile),
body:has(#wallet.active) #wallet,
body:has(#walletTransactions.active) #walletTransactions,
body:has(#memberProfiles.active) #memberProfiles,
body:has(#memberPoints.active) #memberPoints,
body:has(#editProfile.active) #editProfile {
  min-height: 100dvh !important;
  padding-bottom: 0 !important;
}

/* Keep the edit-profile canvas continuous after the global chrome is removed. */
body.current-page-editProfile,
body.current-page-editProfile .app-shell,
body.current-page-editProfile .app-shell main,
body.current-page-editProfile #editProfile,
body:has(#editProfile.active),
body:has(#editProfile.active) .app-shell,
body:has(#editProfile.active) .app-shell main,
body:has(#editProfile.active) #editProfile {
  background: #141414 !important;
  background-color: #141414 !important;
  background-image: none !important;
}

body.current-page-editProfile .app-shell,
body:has(#editProfile.active) .app-shell {
  box-shadow: none !important;
}

/* Keep every route on the same fixed 810px authored canvas (scaled by the
   existing phone/Telegram rules). Scrolling stays enabled while the root
   scrollbar does not change that canvas width between pages. */
html,
body {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Full-page profile and transaction views can contain nested scrolling layers.
   Keep every layer scrollable, but never render a scrollbar rail or thumb. */
html:has(body.current-page-memberPoints),
html:has(body.current-page-walletTransactions),
html:has(body.current-page-memberProfiles),
html:has(body.current-page-editProfile),
body:is(.current-page-memberPoints,.current-page-walletTransactions,.current-page-memberProfiles,.current-page-editProfile),
body:is(.current-page-memberPoints,.current-page-walletTransactions,.current-page-memberProfiles,.current-page-editProfile) * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html:has(body.current-page-memberPoints)::-webkit-scrollbar,
html:has(body.current-page-walletTransactions)::-webkit-scrollbar,
html:has(body.current-page-memberProfiles)::-webkit-scrollbar,
html:has(body.current-page-editProfile)::-webkit-scrollbar,
body:is(.current-page-memberPoints,.current-page-walletTransactions,.current-page-memberProfiles,.current-page-editProfile)::-webkit-scrollbar,
body:is(.current-page-memberPoints,.current-page-walletTransactions,.current-page-memberProfiles,.current-page-editProfile) *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}