/*
 * Phones display the same authored 810px desktop canvas as desktop browsers.
 * Only the final canvas is scaled; no phone-specific reflow is allowed.
 */
:root {
  --desktop-mobile-scale: 1;
}

/* Narrow Windows/IAB previews reserve 15px for a classic scrollbar while
   Lucky Treasure does not. Keep scrolling, but make the scrollbar overlay
   invisible so every page receives the exact same fitting width. */
@media (max-width: 809px) {
  html.xiaoxiao-desktop.desktop-mobile-fit {
    overflow-y: auto !important;
    scrollbar-gutter: auto !important;
    scrollbar-width: none !important;
  }

  html.xiaoxiao-desktop.desktop-mobile-fit::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }
}

html.xiaoxiao-desktop.desktop-mobile-fit {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  background: #141414 !important;
}

html.xiaoxiao-desktop.desktop-mobile-fit body.layout-main,
html.xiaoxiao-desktop.desktop-mobile-fit body.layout-player-search,
html.xiaoxiao-desktop.desktop-mobile-fit body.layout-treasure-history {
  width: 810px !important;
  min-width: 810px !important;
  max-width: 810px !important;
  margin: 0 !important;
  zoom: var(--desktop-mobile-scale) !important;
  transform-origin: top left !important;
  overflow-x: hidden !important;
}

html.xiaoxiao-desktop.desktop-mobile-fit body.layout-main .app-shell,
html.xiaoxiao-desktop.desktop-mobile-fit body.layout-treasure-history .history-page {
  width: 810px !important;
  min-width: 810px !important;
  max-width: 810px !important;
  margin: 0 !important;
}

html.xiaoxiao-desktop.desktop-mobile-fit body.layout-player-search {
  padding: 20px !important;
}

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

html.xiaoxiao-desktop.desktop-mobile-fit body.layout-player-search .search-row {
  grid-template-columns: 1fr 150px !important;
}

html.xiaoxiao-desktop.desktop-mobile-fit body.layout-player-search .grid {
  grid-template-columns: 150px 1fr !important;
  font-size: 18px !important;
}

html.xiaoxiao-desktop.desktop-mobile-fit body.layout-treasure-history .history-page {
  padding-bottom: 42px !important;
}

html.xiaoxiao-desktop.desktop-mobile-fit body.layout-treasure-history .history-content {
  width: auto !important;
  padding: 34px 30px 0 !important;
}

html.xiaoxiao-desktop.desktop-mobile-fit body.layout-treasure-history .history-title-row {
  align-items: flex-end !important;
  margin-bottom: 18px !important;
}

html.xiaoxiao-desktop.desktop-mobile-fit body.layout-treasure-history h1 {
  font-size: 35px !important;
}

html.xiaoxiao-desktop.desktop-mobile-fit body.layout-treasure-history #historyRefresh {
  min-width: 86px !important;
  height: 44px !important;
  padding: 0 19px !important;
  font-size: 16px !important;
}

html.xiaoxiao-desktop.desktop-mobile-fit body.layout-treasure-history .history-header {
  height: 86px !important;
  min-height: 86px !important;
  grid-template-columns: 44px minmax(0,1fr) 44px !important;
  padding: 0 18px !important;
  border-bottom-width: 4px !important;
}

html.xiaoxiao-desktop.desktop-mobile-fit body.layout-treasure-history .history-brand {
  gap: 18px !important;
}

html.xiaoxiao-desktop.desktop-mobile-fit body.layout-treasure-history .history-brand img {
  width: 60px !important;
  height: 60px !important;
}

html.xiaoxiao-desktop.desktop-mobile-fit body.layout-treasure-history .history-brand strong {
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

html.xiaoxiao-desktop.desktop-mobile-fit body.layout-treasure-history .history-back {
  width: 35px !important;
  height: 35px !important;
  font-size: 34px !important;
}

html.xiaoxiao-desktop.desktop-mobile-fit body.layout-treasure-history .history-row {
  min-height: 132px !important;
  padding: 22px 20px !important;
  grid-template-columns: 70px minmax(0,1fr) auto !important;
  gap: 18px !important;
}

html.xiaoxiao-desktop.desktop-mobile-fit body.layout-treasure-history .history-coin,
html.xiaoxiao-desktop.desktop-mobile-fit body.layout-treasure-history .history-coin img {
  width: 62px !important;
  height: 62px !important;
}

html.xiaoxiao-desktop.desktop-mobile-fit body.layout-treasure-history .history-copy b { font-size: 18px !important; }
html.xiaoxiao-desktop.desktop-mobile-fit body.layout-treasure-history .history-copy small { font-size: 13px !important; }
html.xiaoxiao-desktop.desktop-mobile-fit body.layout-treasure-history .history-value { font-size: 24px !important; }
html.xiaoxiao-desktop.desktop-mobile-fit body.layout-treasure-history .history-value small { font-size: 12px !important; }

/* The treasure room already owns an authored 810px canvas and scale variable. */
html.xiaoxiao-desktop.desktop-mobile-fit.treasure-canonical,
html.xiaoxiao-desktop.desktop-mobile-fit.treasure-canonical body.layout-treasure {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

/* Restore the desktop header values even when a narrow test browser matches
   legacy width-based media queries. */
html.xiaoxiao-desktop.desktop-mobile-fit.treasure-canonical body.layout-treasure .game-header {
  grid-template-columns: 44px minmax(0,1fr) 44px !important;
  height: 86px !important;
  min-height: 86px !important;
  padding: 0 18px !important;
}

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

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

html.xiaoxiao-desktop.desktop-mobile-fit.treasure-canonical body.layout-treasure .game-header .brand strong {
  font-size: 28px !important;
}