/*
 * Canonical responsive frame shared by every Xiaoxiao page.
 *
 * Desktop: one stable 810px canvas. Browser zoom scales the whole canvas
 * instead of moving individual sections.
 * Phone: one fluid canvas below 768px. A short landscape-phone rule keeps
 * wide phones out of the desktop frame.
 */
:root {
  --xiaoxiao-desktop-canvas: 810px;
  --xiaoxiao-page-min-height: 100dvh;
}

/*
 * Browser zoom must scale one fixed desktop composition.  Do not use the
 * zoom-dependent CSS viewport width to decide whether the page is a phone.
 * The small early head script applies xiaoxiao-phone only on real phones.
 */
html.xiaoxiao-desktop,
html.xiaoxiao-desktop body {
  min-width: 810px !important;
}

html.xiaoxiao-desktop body.layout-main {
  overflow-x: auto !important;
}

html.xiaoxiao-desktop body.layout-main .app-shell {
  width: 810px !important;
  min-width: 810px !important;
  max-width: 810px !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  margin: 0 auto !important;
  padding-bottom: 135px !important;
  overflow-x: hidden !important;
}

html.xiaoxiao-desktop body.layout-main .bottom-nav {
  position: fixed !important;
  z-index: 1000 !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: 810px !important;
  min-width: 810px !important;
  max-width: 810px !important;
  height: 118px !important;
  padding: 13px 28px 12px !important;
  border-radius: 22px 22px 0 0 !important;
}

/* The legacy home rule contains #home and otherwise wins the cascade. */
html.xiaoxiao-desktop body.layout-main:has(#home.active) .bottom-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
}

html.xiaoxiao-desktop body.layout-main .events-gallery {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}

html.xiaoxiao-desktop body.layout-main .quick-grid,
html.xiaoxiao-desktop body.layout-main .home-contact-actions {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}

html.xiaoxiao-desktop body.layout-treasure,
html.xiaoxiao-desktop body.layout-treasure-history {
  min-width: 810px !important;
  overflow-x: auto !important;
}

html.xiaoxiao-desktop body.layout-treasure .game-shell,
html.xiaoxiao-desktop body.layout-treasure-history .history-page {
  width: 810px !important;
  min-width: 810px !important;
  max-width: 810px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep the treasure room at its authored 941:1672 ratio at every zoom. */
html.xiaoxiao-desktop body.layout-treasure .game-shell {
  height: 1517px !important;
  min-height: 1517px !important;
  max-height: 1517px !important;
  grid-template-rows: 78px 230px auto 360px auto !important;
  background-size: 810px 1439px !important;
  background-position: center 78px !important;
  background-repeat: no-repeat !important;
}

html.xiaoxiao-desktop body.layout-treasure .game-intro {
  /* Keep the complete action group inside the empty black area below the
     3x3 chest grid. Only this group moves; the chests and background stay put. */
  top: -285px !important;
}

html.xiaoxiao-desktop body.layout-treasure .curtain-title,
html.xiaoxiao-phone body.layout-treasure .curtain-title {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  text-align: center !important;
}

html.xiaoxiao-desktop body.layout-treasure .chest-board {
  width: 68% !important;
  max-width: 780px !important;
  row-gap: 70px !important;
  top: 160px !important;
}

html.xiaoxiao-desktop body.layout-treasure .chest-board .chest {
  top: 0 !important;
}

html.xiaoxiao-desktop body.layout-treasure .chest-visual {
  transform: scale(.72) !important;
}

html.xiaoxiao-desktop body.layout-player-search .panel {
  width: 760px !important;
  min-width: 760px !important;
  max-width: 760px !important;
}

/* Real phones retain the existing fluid mobile composition. */
html.xiaoxiao-phone,
html.xiaoxiao-phone body {
  min-width: 0 !important;
  width: 100% !important;
}

html.xiaoxiao-phone body.layout-treasure .chest-board {
  top: 153px !important;
}

html.xiaoxiao-phone body.layout-treasure .chest-board .chest {
  top: 0 !important;
}

html {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body.layout-main,
body.layout-treasure,
body.layout-treasure-history,
body.layout-player-search {
  width: 100%;
  min-height: 100vh;
  min-height: var(--xiaoxiao-page-min-height);
  margin: 0;
  overflow-x: hidden;
}

body.layout-main *,
body.layout-main *::before,
body.layout-main *::after,
body.layout-treasure *,
body.layout-treasure *::before,
body.layout-treasure *::after,
body.layout-treasure-history *,
body.layout-treasure-history *::before,
body.layout-treasure-history *::after,
body.layout-player-search *,
body.layout-player-search *::before,
body.layout-player-search *::after {
  box-sizing: border-box;
}

body.layout-main .app-shell,
body.layout-treasure .game-shell,
body.layout-treasure-history .history-page {
  width: 100%;
  max-width: var(--xiaoxiao-desktop-canvas);
  min-height: 100vh;
  min-height: var(--xiaoxiao-page-min-height);
  margin-inline: auto;
}

/* Keep the final home activity row fully scrollable above the fixed nav. */
html.xiaoxiao-desktop body.layout-main:has(#home.active) .events-gallery-section {
  padding-bottom: 134px !important;
}

html.xiaoxiao-phone body.layout-main:has(#home.active) .events-gallery-section {
  padding-bottom: calc(102px + env(safe-area-inset-bottom)) !important;
}

body.layout-main img,
body.layout-main video,
body.layout-treasure img,
body.layout-treasure video,
body.layout-treasure-history img,
body.layout-treasure-history video,
body.layout-player-search img,
body.layout-player-search video {
  max-width: 100%;
}

body.layout-main input,
body.layout-main textarea,
body.layout-main select,
body.layout-main button,
body.layout-treasure input,
body.layout-treasure textarea,
body.layout-treasure select,
body.layout-treasure button,
body.layout-treasure-history input,
body.layout-treasure-history textarea,
body.layout-treasure-history select,
body.layout-treasure-history button,
body.layout-player-search input,
body.layout-player-search textarea,
body.layout-player-search select,
body.layout-player-search button {
  max-width: 100%;
}

/* Full desktop canvas. */
@media (min-width: 810px) and (min-height: 521px) {
  body.layout-main,
  body.layout-treasure,
  body.layout-treasure-history,
  body.layout-player-search {
    min-width: var(--xiaoxiao-desktop-canvas);
    zoom: 1 !important;
  }

  body.layout-main .app-shell,
  body.layout-main .bottom-nav,
  body.layout-treasure .game-shell,
  body.layout-treasure-history .history-page {
    width: var(--xiaoxiao-desktop-canvas) !important;
    min-width: var(--xiaoxiao-desktop-canvas) !important;
    max-width: var(--xiaoxiao-desktop-canvas) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.layout-player-search .panel {
    width: 760px !important;
    min-width: 760px !important;
    max-width: 760px !important;
    margin-inline: auto !important;
  }
}

/* Narrow tablets keep the desktop composition without horizontal overflow. */
@media (min-width: 768px) and (max-width: 809px) and (min-height: 521px) {
  body.layout-main,
  body.layout-treasure,
  body.layout-treasure-history,
  body.layout-player-search {
    min-width: 0 !important;
  }

  body.layout-main .app-shell,
  body.layout-main .bottom-nav,
  body.layout-treasure .game-shell,
  body.layout-treasure-history .history-page {
    width: 100% !important;
    min-width: 0 !important;
    max-width: var(--xiaoxiao-desktop-canvas) !important;
  }

  body.layout-player-search .panel {
    width: min(760px, calc(100% - 40px)) !important;
    min-width: 0 !important;
    max-width: 760px !important;
  }
}

/* Shared phone layout. */
@media (max-width: 767px) {
  :root {
    --xiaoxiao-phone-gutter: clamp(12px, 4vw, 20px);
  }

  html,
  body.layout-main,
  body.layout-treasure,
  body.layout-treasure-history,
  body.layout-player-search {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
  }

  body.layout-main .app-shell,
  body.layout-treasure .game-shell,
  body.layout-treasure-history .history-page {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
  }

  body.layout-main .bottom-nav {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  body.layout-main .page,
  body.layout-main section,
  body.layout-main article,
  body.layout-main form,
  body.layout-main .modal,
  body.layout-treasure section,
  body.layout-treasure article,
  body.layout-treasure form,
  body.layout-treasure-history section,
  body.layout-treasure-history article,
  body.layout-treasure-history form {
    min-width: 0;
  }

  body.layout-main h1,
  body.layout-main h2,
  body.layout-main h3,
  body.layout-main p,
  body.layout-main label,
  body.layout-main small,
  body.layout-treasure h1,
  body.layout-treasure h2,
  body.layout-treasure h3,
  body.layout-treasure p,
  body.layout-treasure label,
  body.layout-treasure small,
  body.layout-treasure-history h1,
  body.layout-treasure-history h2,
  body.layout-treasure-history h3,
  body.layout-treasure-history p,
  body.layout-treasure-history label,
  body.layout-treasure-history small {
    overflow-wrap: anywhere;
  }

  body.layout-treasure .game-header,
  body.layout-treasure .treasure-top,
  body.layout-treasure .chest-board,
  body.layout-treasure .treasure-stage,
  body.layout-treasure .game-intro {
    max-width: 100% !important;
  }

  body.layout-treasure .chest-board {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.layout-treasure-history .history-content {
    width: 100%;
    padding-left: var(--xiaoxiao-phone-gutter) !important;
    padding-right: var(--xiaoxiao-phone-gutter) !important;
  }

  body.layout-treasure-history .history-row {
    min-width: 0;
  }

  body.layout-player-search {
    display: grid;
    place-items: center;
    padding: var(--xiaoxiao-phone-gutter) !important;
  }

  body.layout-player-search .panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: clamp(18px, 5vw, 24px) !important;
  }
}

/* Wide, short devices are phones in landscape, not desktop canvases. */
@media (min-width: 768px) and (max-width: 932px) and (max-height: 520px) {
  body.layout-main,
  body.layout-treasure,
  body.layout-treasure-history,
  body.layout-player-search {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  body.layout-main .app-shell,
  body.layout-main .bottom-nav,
  body.layout-treasure .game-shell,
  body.layout-treasure-history .history-page {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.layout-main .bottom-nav {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }

  body.layout-player-search .panel {
    width: min(760px, calc(100% - 32px)) !important;
    min-width: 0 !important;
  }
}

/* Very small phones must never create a sideways scroll bar. */
@media (max-width: 359px) {
  body.layout-main .bottom-nav {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  body.layout-main .bottom-nav b {
    font-size: 9.5px !important;
  }

  body.layout-treasure-history .history-row {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}

/* Lucky Treasure: keep all nine chests centered inside the black play area.
   The combined margin + board height stays unchanged so the controls below do not move. */
html.xiaoxiao-desktop body.layout-treasure .curtain-title {
  top: 52% !important;
}

html.xiaoxiao-desktop body.layout-treasure .chest-board {
  position: relative !important;
  top: 0 !important;
  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;
  /* Keep the 3x3 group inside the central black frame without moving
     the title, voucher notice or the controls below the stage. */
  transform: translateY(46px) !important;
}

html.xiaoxiao-desktop 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;
  aspect-ratio: auto !important;
  margin: 0 !important;
}

html.xiaoxiao-desktop 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.xiaoxiao-phone body.layout-treasure .curtain-title {
  top: 48% !important;
}

html.xiaoxiao-phone body.layout-treasure .chest-board {
  position: relative !important;
  top: 0 !important;
  width: min(340px, calc(100% - 28px)) !important;
  max-width: 340px !important;
  height: 330px !important;
  margin: 10px auto 10px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 100px) !important;
  grid-template-rows: repeat(3, 90px) !important;
  justify-content: center !important;
  align-content: center !important;
  column-gap: 16px !important;
  row-gap: 30px !important;
  /* Keep the compact phone grid inside its original safe area. */
  transform: none !important;
}

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

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

/* Lucky Treasure title: move only the title into the red banner below. */
html.xiaoxiao-desktop body.layout-treasure .curtain-title,
html.xiaoxiao-phone body.layout-treasure .curtain-title {
  transform: translateY(calc(-50% + 44px)) !important;
}

/* Home footer continuity: at reduced browser zoom the three bottom cards used
   to cast overlapping shadows that looked like a separate dark rectangle. */
body.layout-main:has(#home.active),
body.layout-main:has(#home.active) .app-shell,
body.layout-main:has(#home.active) #home,
body.layout-main:has(#home.active) .events-gallery-section {
  background-color: #141414 !important;
}

body.layout-main:has(#home.active) .events-gallery > .event-poster:nth-last-child(-n + 3),
body.layout-main:has(#home.active) .events-gallery > .event-poster:nth-last-child(-n + 3):hover {
  box-shadow: inset 0 0 0 1px rgba(255, 244, 196, .3) !important;
}