/*
 * Lucky Treasure has one authored 810px canvas.
 * The authored coordinates stay at 810px, while the whole scene is fitted into
 * the same 810px desktop canvas used by the home page. Smaller screens fit
 * the complete scene to the viewport without changing authored coordinates.
 */
html.treasure-canonical,
html.treasure-canonical body.layout-treasure {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 810px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  background: #141414 !important;
  min-height: var(--treasure-canvas-height, 100dvh) !important;
  height: var(--treasure-canvas-height, 100dvh) !important;
}

html.treasure-canonical body.layout-treasure .game-shell {
  width: 810px !important;
  min-width: 810px !important;
  max-width: 810px !important;
  height: var(--treasure-authored-height, 1525px) !important;
  min-height: var(--treasure-authored-height, 1525px) !important;
  max-height: var(--treasure-authored-height, 1525px) !important;
  margin: 0 !important;
  zoom: var(--treasure-canvas-scale, 1) !important;
  grid-template-rows: 86px 230px auto 360px auto !important;
  background-image:
    linear-gradient(180deg, rgba(4,1,0,.02) 0, rgba(4,1,0,.1) 35%, rgba(4,1,0,.36) 78%, rgba(4,1,0,.62) 100%),
    url("assets/treasure-lounge-mobile-bg.png?v=20260823-no-static-fireworks-v2") !important;
  background-size: 810px 1439px !important;
  background-position: center 86px !important;
  background-repeat: no-repeat !important;
  isolation: isolate !important;
}

/* Ambient scene motion only: it never changes the authored layout coordinates. */
html.treasure-canonical body.layout-treasure .game-shell::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 86px 0 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  transform-origin: center top !important;
  mix-blend-mode: screen !important;
}

html.treasure-canonical body.layout-treasure .game-shell::before {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
}

html.treasure-canonical body.layout-treasure .game-shell::after {
  background:
    radial-gradient(ellipse 28px 62px at 8% 15%, rgba(255,246,176,.58), rgba(255,125,24,.28) 48%, transparent 100%),
    radial-gradient(ellipse 28px 62px at 92% 15%, rgba(255,246,176,.58), rgba(255,125,24,.28) 48%, transparent 100%),
    radial-gradient(ellipse 25px 56px at 14% 30%, rgba(255,237,151,.52), rgba(255,111,18,.25) 48%, transparent 100%),
    radial-gradient(ellipse 25px 56px at 86% 30%, rgba(255,237,151,.52), rgba(255,111,18,.25) 48%, transparent 100%) !important;
  opacity: .56 !important;
  animation: treasureLanternInnerFlicker 2.1s ease-in-out infinite alternate !important;
}

html.treasure-canonical body.layout-treasure .window-fireworks {
  position: absolute !important;
  inset: 86px 0 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
}

html.treasure-canonical body.layout-treasure .window-fireworks canvas {
  display: block !important;
  width: 810px !important;
  height: 1431px !important;
}

/* Exact original lounge foreground. Its transparent window panes let the
 * fireworks sit outside while curtains, frames, lanterns and furniture stay
 * naturally in front. */
html.treasure-canonical body.layout-treasure .treasure-foreground-occluder {
  position: absolute !important;
  left: 0 !important;
  top: 86px !important;
  width: 810px !important;
  height: 1439px !important;
  object-fit: fill !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

html.treasure-canonical body.layout-treasure .game-header,
html.treasure-canonical body.layout-treasure .winner-ticker,
html.treasure-canonical body.layout-treasure .treasure-top,
html.treasure-canonical body.layout-treasure .chest-board,
html.treasure-canonical body.layout-treasure .voucher-empty-notice,
html.treasure-canonical body.layout-treasure .treasure-stage,
html.treasure-canonical body.layout-treasure .game-intro {
  position: relative !important;
  z-index: 3 !important;
}

@keyframes treasureLanternInnerFlicker {
  0% { opacity: .42; filter: brightness(.92) saturate(1.05); }
  32% { opacity: .66; filter: brightness(1.18) saturate(1.22); }
  58% { opacity: .49; filter: brightness(1.02) saturate(1.1); }
  100% { opacity: .72; filter: brightness(1.28) saturate(1.3); }
}

html.treasure-canonical body.layout-treasure .game-header {
  height: 86px !important;
  min-height: 86px !important;
  padding: 0 18px !important;
  background: #020814 url("assets/xiaoxiao-header-bg.png?v=clean3") center/cover no-repeat !important;
  border-bottom: 3px solid #d7a12d !important;
}

html.treasure-canonical body.layout-treasure .game-header .brand {
  gap: 14px !important;
}

html.treasure-canonical body.layout-treasure .game-header .brand img {
  width: 56px !important;
  height: 56px !important;
}

html.treasure-canonical body.layout-treasure .game-header .brand strong {
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .25px !important;
  background: linear-gradient(180deg,#fff7c5 0%,#ffe07a 28%,#f1b342 55%,#bd6b14 78%,#fff0a0 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: .35px rgba(104,45,3,.45) !important;
  filter: drop-shadow(0 1px 0 rgba(255,248,192,.72)) drop-shadow(0 3px 2px rgba(72,25,0,.58)) drop-shadow(0 0 8px rgba(246,190,70,.26)) !important;
}

/* Desktop header uses the exact same brand sizing, colour and light sweep as the home page. */
@media (min-width: 768px) {
  html.treasure-canonical body.layout-treasure .game-header {
    border-bottom-width: 4px !important;
  }

  html.treasure-canonical body.layout-treasure .game-header .brand {
    gap: 18px !important;
  }

  html.treasure-canonical body.layout-treasure .game-header .brand img {
    width: 60px !important;
    height: 60px !important;
  }

  html.treasure-canonical body.layout-treasure .game-header .brand strong {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .2px !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.treasure-canonical body.layout-treasure .game-header .brand strong::after {
    content: "XIAOXIAO X WINBOX";
    position: absolute;
    inset: 0;
    color: transparent;
    background: linear-gradient(110deg,transparent 0%,transparent 44%,rgba(255,246,181,.35) 47%,#fff 50%,rgba(255,246,181,.35) 53%,transparent 56%,transparent 100%);
    background-size: 350% 100%;
    background-position: 160% 0;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: treasureBrandLightSweep 13s linear infinite;
    pointer-events: none;
  }
}

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

html.treasure-canonical body.layout-treasure .treasure-top {
  height: 230px !important;
}

html.treasure-canonical body.layout-treasure .curtain-title {
  top: 52% !important;
  bottom: auto !important;
  left: 92px !important;
  right: 92px !important;
  transform: translateY(calc(-50% + 44px)) !important;
}

html.treasure-canonical body.layout-treasure .curtain-title strong {
  font-size: 52px !important;
}

html.treasure-canonical body.layout-treasure .chest-board {
  position: relative !important;
  top: 0 !important;
  width: 520px !important;
  min-width: 520px !important;
  max-width: 520px !important;
  height: 480px !important;
  margin: 40px auto 74px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 140px) !important;
  grid-template-rows: repeat(3, 140px) !important;
  justify-content: center !important;
  align-content: center !important;
  column-gap: 45px !important;
  row-gap: 15px !important;
  transform: translateY(46px) !important;
}

html.treasure-canonical body.layout-treasure .chest-board .chest {
  position: relative !important;
  top: 0 !important;
  width: 140px !important;
  height: 140px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
}

html.treasure-canonical body.layout-treasure .chest-board .chest-visual {
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: 118px !important;
  height: 108px !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center !important;
}

html.treasure-canonical body.layout-treasure .treasure-stage {
  height: 360px !important;
}

html.treasure-canonical body.layout-treasure .game-intro {
  position: relative !important;
  top: -355px !important;
  width: 100% !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
  padding: 32px 22px 22px !important;
  background: none !important;
}

/* Telegram safe-area values must not move the authored treasure coordinates. */
html.treasure-canonical.telegram-mini-app body.layout-treasure .game-shell {
  width: 810px !important;
  min-width: 810px !important;
  max-width: 810px !important;
  grid-template-rows: 86px 230px auto 360px auto !important;
}

html.treasure-canonical.telegram-mini-app body.layout-treasure .game-header {
  height: 86px !important;
  min-height: 86px !important;
  padding-top: 0 !important;
}

/* Mobile only: match the homepage header's measured 72px / 45px / 17.27px geometry.
   Values are inverse-scaled because the complete 810px treasure canvas is scaled as one unit. */
@media (max-width: 767px) {
  html.xiaoxiao-phone.treasure-canonical body.layout-treasure .game-shell {
    grid-template-rows: var(--treasure-mobile-header-height) 230px auto 360px auto !important;
  }

  html.xiaoxiao-phone.treasure-canonical body.layout-treasure .game-header {
    height: var(--treasure-mobile-header-height) !important;
    min-height: var(--treasure-mobile-header-height) !important;
  }

  html.xiaoxiao-phone.treasure-canonical body.layout-treasure .game-header .brand {
    gap: var(--treasure-mobile-brand-gap) !important;
  }

  html.xiaoxiao-phone.treasure-canonical body.layout-treasure .game-header .brand img {
    width: var(--treasure-mobile-logo-size) !important;
    height: var(--treasure-mobile-logo-size) !important;
    flex: 0 0 var(--treasure-mobile-logo-size) !important;
  }

  html.xiaoxiao-phone.treasure-canonical body.layout-treasure .game-header .brand strong {
    font-size: var(--treasure-mobile-brand-size) !important;
    letter-spacing: .2px !important;
  }
}