[data-build=beta] #upgradeModal,
[data-build=beta] #unlockModal,
[data-build=beta] #cashboxModal,
[data-build=beta] #levelRewardsModal {
  top: 12px;
  right: 10px;
  bottom: 12px;
  left: 10px;
  top: 12px;
  right: 10px;
  bottom: 12px;
  left: 10px;
  max-height: none;
  --xhs-height:auto;
  height: auto;
  padding: 22px 18px 26px;
  border: 8px solid transparent;
  border-image: var(--xhs-image-300) 38% fill / 58px / 0 repeat;
  border-radius: 26px;
  background: #fff4df;
  overflow: hidden;
  box-shadow: 0 9px 22px rgba(80, 59, 70, .247);
  color: #684e39;
}
[data-build=beta] :is(#upgradeModal, #unlockModal, #cashboxModal, #levelRewardsModal) {
  top: 12px;
  right: 10px;
  bottom: 12px;
  left: 10px;
  top: 12px;
  right: 10px;
  bottom: 12px;
  left: 10px;
  max-height: none;
  --xhs-height:auto;
  height: auto;
  padding: 22px 18px 26px;
  border: 8px solid transparent;
  border-image: var(--xhs-image-300) 38% fill / 58px / 0 repeat;
  border-radius: 26px;
  background: #fff4df;
  overflow: hidden;
  box-shadow: 0 9px 22px rgba(80, 59, 70, .247);
  color: #684e39;
}
[data-build=beta] #upgradeModal:not(.hidden),
[data-build=beta] #unlockModal:not(.hidden),
[data-build=beta] #cashboxModal:not(.hidden),
[data-build=beta] #levelRewardsModal:not(.hidden) {
  display: flex;
  flex-direction: column;
  --xhs-row-gap:8px;
  --xhs-column-gap:8px;
  grid-gap: 8px;
  gap: 8px;
}
[data-build=beta] :is(#upgradeModal, #unlockModal, #cashboxModal, #levelRewardsModal):not(.hidden) {
  display: flex;
  flex-direction: column;
  --xhs-row-gap:8px;
  --xhs-column-gap:8px;
  grid-gap: 8px;
  gap: 8px;
}
[data-build=beta] #upgradeModal > .modal-head,
[data-build=beta] #unlockModal > .modal-head,
[data-build=beta] #cashboxModal > .modal-head {
  flex: none;
  align-items: center;
  min-height: 46px;
  padding: 0 2px 5px;
  margin: 0;
  background: transparent;
}
[data-build=beta] :is(#upgradeModal, #unlockModal, #cashboxModal) > .modal-head {
  flex: none;
  align-items: center;
  min-height: 46px;
  padding: 0 2px 5px;
  margin: 0;
  background: transparent;
}
[data-build=beta] #upgradeTitle,
[data-build=beta] #unlockTitle,
[data-build=beta] #cashboxTitle,
[data-build=beta] #levelRewardsTitle {
  margin: 0;
  font-family:
    "Xiaoman Rounded",
    "YouYuan",
    sans-serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .03em;
  color: #9c6039;
  -webkit-text-stroke: 4px #fff3cf;
  paint-order: stroke fill;
  text-shadow: 0 3px #805038, 0 5px #dfbd86;
  white-space: normal;
}
[data-build=beta] :is(#upgradeTitle, #unlockTitle, #cashboxTitle, #levelRewardsTitle) {
  margin: 0;
  font-family:
    "Xiaoman Rounded",
    "YouYuan",
    sans-serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .03em;
  color: #9c6039;
  -webkit-text-stroke: 4px #fff3cf;
  paint-order: stroke fill;
  text-shadow: 0 3px #805038, 0 5px #dfbd86;
  white-space: normal;
}
[data-build=beta] #upgradeModal .modal-head .close-btn,
[data-build=beta] #unlockModal .modal-head .close-btn,
[data-build=beta] #cashboxModal .modal-head .close-btn {
  --xhs-width:44px;
  width: 44px;
  --xhs-height:44px;
  height: 44px;
  flex: none;
}
[data-build=beta] :is(#upgradeModal, #unlockModal, #cashboxModal) .modal-head .close-btn {
  --xhs-width:44px;
  width: 44px;
  --xhs-height:44px;
  height: 44px;
  flex: none;
}
.shop-panel-hero {
  display: block;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:auto;
  height: auto;
  object-fit: contain;
  flex: none;
  border-radius: 18px 18px 0 0;
  pointer-events: none;
}
#upgradeModal .equipment-hero {
  --xhs-height:var(--xhs-math-34);
  height: var(--xhs-math-34);
  height: clamp(100px, 21dvh, 190px);
  object-fit: contain;
  background: #fff4df;
}
#upgradeModal .decor-scroll {
  padding: 4px 4px 16px;
  border-radius: 12px;
}
#upgradeModal .decor-item {
  background: linear-gradient(#fffbec, #f5e5c4);
  border-color: #bd976e;
  box-shadow: inset 0 2px #fffdf0, 0 3px #dec19b;
}
#upgradeModal .decor-section-title {
  color: #826039;
  font-size: 16px;
  text-align: left;
  margin: 8px 2px;
}
#upgradeModal .decor-tabs {
  --xhs-row-gap:10px;
  --xhs-column-gap:10px;
  grid-gap: 10px;
  gap: 10px;
  padding: 0 3px 4px;
}
#upgradeModal .decor-wallet {
  margin: 0;
  padding: 5px;
  border-bottom: 1px dashed #d1b58a;
  color: #785d42;
}
#unlockModal .material-scroll {
  padding: 0 4px 14px;
  min-height: 0;
}
#unlockModal .materials-hero {
  margin: 0 0 6px;
}
#unlockModal .menu-material {
  border-radius: 20px 20px 15px 15px;
  background: linear-gradient(#fffcef, #f1dcad);
  box-shadow:
    inset 0 3px #fffdf3,
    0 4px 0 #d6b68b,
    0 6px 7px rgba(132, 99, 62, .125);
}
#unlockModal .menu-material .material-art {
  background:
    radial-gradient(
      ellipse,
      #fff7dc,
      #edd3a8);
  border-bottom: 3px solid #d5ac75;
}
#unlockModal .menu-material.undiscovered {
  background: #ede6db;
  box-shadow: inset 0 2px #fff9ef, 0 3px #cec3b2;
}
#cashboxModal .cashbox-scroll {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 5px 16px;
  scrollbar-width: thin;
}
#cashboxModal .cashbox-hero {
  --xhs-width:100%;
  width: 100%;
  --xhs-height:auto;
  height: auto;
  max-height: none;
  margin: 0;
}
#cashboxModal .cashbox-row {
  display: flex;
  flex-direction: column;
  --xhs-row-gap:14px;
  --xhs-column-gap:14px;
  grid-gap: 14px;
  gap: 14px;
  padding: 16px 12px;
  background: linear-gradient(#fffdf0, #f5e4bd);
  border: 2px solid #c69d67;
  border-radius: 22px;
  box-shadow: inset 0 2px #fff, 0 4px #d7b78a;
}
#cashboxModal #cashboxFree {
  --xhs-width:100%;
  width: 100%;
  text-align: center;
}
#cashboxModal .cashbox-amount {
  justify-content: center;
  font-size: 34px;
  font-weight: 800;
  color: #876033;
}
#cashboxModal #claimFree {
  --xhs-width:100%;
  width: 100%;
  min-height: 48px;
}
#cashboxModal #cashboxEstimate {
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  margin: 0;
  color: #77644b;
}
#cashboxModal .visual-rules {
  margin: 4px 0 12px;
  text-align: center;
  color: #806344;
}
[data-build=beta] #levelRewardsModal .level-rewards-header {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  background: none;
  --xhs-row-gap:6px;
  --xhs-column-gap:6px;
  grid-gap: 6px;
  gap: 6px;
  flex: none;
}
[data-build=beta] #levelRewardsModal .level-rewards-header > div:not(#levelRewardPanda) {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  --xhs-row-gap:4px;
  --xhs-column-gap:14px;
  grid-gap: 4px 14px;
  gap: 4px 14px;
  --xhs-width:100%;
  width: 100%;
}
[data-build=beta] #levelRewardsModal .reward-eyebrow {
  display: none;
}
[data-build=beta] #levelRewardsModal h2 {
  grid-column: 1/-1;
  margin: 0 46px 8px 0;
  font-size: 30px;
  color: #9c6039;
}
[data-build=beta] #levelRewardsModal .level-xp {
  position: static;
  --xhs-width:auto;
  width: auto;
  grid-column: 2;
  grid-row: 2;
}
[data-build=beta] #levelRewardLevel {
  font-size: 22px;
  grid-column: 1;
  grid-row: 2/4;
  color: #84613d;
}
[data-build=beta] #levelRewardXpText {
  position: static;
  grid-column: 2;
  font-size: 11px;
  text-align: center;
}
[data-build=beta] #levelRewardsModal .reward-celebration-art {
  position: static;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:var(--xhs-math-35);
  height: var(--xhs-math-35);
  height: clamp(90px, 20dvh, 180px);
  object-fit: contain;
  border-radius: 16px;
  order: 2;
}
[data-build=beta] #levelRewardSummary {
  padding: 7px 9px;
  font-size: 12px;
  margin: 0;
  box-shadow: none;
}
[data-build=beta] #levelRewardTrack {
  padding: 10px 5px 18px;
  border-radius: 12px;
  min-height: 0;
}
[data-build=beta] #levelRewardsModal .level-rewards-footer {
  flex: none;
  padding: 3px 0;
  min-height: 0;
}
[data-build=beta] #levelRewardsModal .level-rewards-footer .close-btn {
  right: 2px;
  top: 0;
  --xhs-width:44px;
  width: 44px;
  --xhs-height:44px;
  height: 44px;
  border: 2px solid #af6c79;
  background:
    linear-gradient(
      #fff4ef,
      #efaaa9 25%,
      #d9747b);
  color: #743b4c;
  box-shadow: 0 3px #a65465;
}
@media (max-width: 350px) {
  [data-build=beta] #upgradeModal,
  [data-build=beta] #unlockModal,
  [data-build=beta] #cashboxModal,
  [data-build=beta] #levelRewardsModal {
    padding: 20px 12px 24px;
    top: 10px;
    right: 8px;
    bottom: 10px;
    left: 8px;
    top: 10px;
    right: 8px;
    bottom: 10px;
    left: 8px;
    --xhs-row-gap:6px;
    --xhs-column-gap:6px;
    grid-gap: 6px;
    gap: 6px;
  }
  [data-build=beta] :is(#upgradeModal, #unlockModal, #cashboxModal, #levelRewardsModal) {
    padding: 20px 12px 24px;
    top: 10px;
    right: 8px;
    bottom: 10px;
    left: 8px;
    top: 10px;
    right: 8px;
    bottom: 10px;
    left: 8px;
    --xhs-row-gap:6px;
    --xhs-column-gap:6px;
    grid-gap: 6px;
    gap: 6px;
  }
  [data-build=beta] #upgradeTitle,
  [data-build=beta] #unlockTitle,
  [data-build=beta] #cashboxTitle,
  [data-build=beta] #levelRewardsTitle {
    font-size: 27px;
  }
  [data-build=beta] :is(#upgradeTitle, #unlockTitle, #cashboxTitle, #levelRewardsTitle) {
    font-size: 27px;
  }
  #upgradeModal .equipment-hero {
    --xhs-height:110px;
    height: 110px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  #upgradeModal .equipment-hero {
    position: absolute;
    left: 22px;
    top: 82px;
    --xhs-width:31%;
    width: 31%;
    --xhs-height:180px;
    height: 180px;
  }
  #upgradeModal > .decor-tabs,
  #upgradeModal > .decor-wallet,
  #upgradeModal > .decor-panel {
    margin-left: 34%;
  }
  #upgradeModal > :is(.decor-tabs, .decor-wallet, .decor-panel) {
    margin-left: 34%;
  }
  #unlockModal .materials-hero {
    float: left;
    --xhs-width:38%;
    width: 38%;
    margin-right: 14px;
  }
  #unlockModal #ingredientShelf {
    clear: both;
  }
  #cashboxModal .cashbox-hero {
    float: left;
    --xhs-width:45%;
    width: 45%;
    margin-right: 16px;
  }
  #cashboxModal .cashbox-row {
    margin-left: 48%;
  }
  [data-build=beta] #levelRewardsModal .reward-celebration-art {
    position: absolute;
    right: 58px;
    top: 0;
    --xhs-width:28%;
    width: 28%;
    --xhs-height:82px;
    height: 82px;
  }
  [data-build=beta] #levelRewardsModal .level-rewards-header > div:not(#levelRewardPanda) {
    --xhs-width:60%;
    width: 60%;
  }
  [data-build=beta] #levelRewardsModal .level-rewards-footer .close-btn {
    right: 0;
    top: 0;
  }
}
#upgradeModal .equipment-hero {
  --xhs-width:100%;
  width: 100%;
  --xhs-height:auto;
  height: auto;
  max-height: none;
}
[data-build=beta] #levelRewardsModal .reward-celebration-art {
  --xhs-height:auto;
  height: auto;
  --xhs-width:100%;
  width: 100%;
}
[data-build=beta] #levelRewardsModal .level-rewards-footer .close-btn {
  right: 16px;
  top: 18px;
}
[data-build=beta] #cashboxModal {
  top: 50%;
  bottom: auto;
  max-height: calc(100% - 24px);
  --xhs-transform:translateY(-50%);
  transform: translateY(-50%);
}
@media (max-height: 500px) and (orientation: landscape) {
  #upgradeModal .equipment-hero {
    --xhs-width:31%;
    width: 31%;
    --xhs-height:180px;
    height: 180px;
  }
  [data-build=beta] #levelRewardsModal .reward-celebration-art {
    --xhs-width:28%;
    width: 28%;
    --xhs-height:82px;
    height: 82px;
  }
}
@media (max-width: 350px) {
  #cashboxModal .cashbox-hero {
    --xhs-height:135px;
    height: 135px;
    object-fit: contain;
  }
  #cashboxModal .cashbox-row {
    --xhs-row-gap:10px;
    --xhs-column-gap:10px;
    grid-gap: 10px;
    gap: 10px;
    padding: 12px 10px;
  }
}
[data-build=beta] #upgradeModal,
[data-build=beta] #unlockModal,
[data-build=beta] #levelRewardsModal {
  top: var(--xhs-local-76);
  top: max(12px, var(--safe-area-inset-top,env(safe-area-inset-top,0px)));
  bottom: var(--xhs-local-48);
  bottom: max(12px, var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));
  left: var(--xhs-local-77);
  left: max(10px, var(--safe-area-inset-left,env(safe-area-inset-left,0px)));
  right: var(--xhs-local-49);
  right: max(10px, var(--safe-area-inset-right,env(safe-area-inset-right,0px)));
}
[data-build=beta] :is(#upgradeModal, #unlockModal, #levelRewardsModal) {
  top: var(--xhs-local-76);
  top: max(12px, var(--safe-area-inset-top,env(safe-area-inset-top,0px)));
  bottom: var(--xhs-local-48);
  bottom: max(12px, var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));
  left: var(--xhs-local-77);
  left: max(10px, var(--safe-area-inset-left,env(safe-area-inset-left,0px)));
  right: var(--xhs-local-49);
  right: max(10px, var(--safe-area-inset-right,env(safe-area-inset-right,0px)));
}
[data-build=beta] #cashboxModal {
  max-height: calc(100% - 24px - var(--safe-area-inset-top,0px) - var(--safe-area-inset-bottom,0px));
  max-height: calc(100% - 24px - var(--safe-area-inset-top,env(safe-area-inset-top,0px)) - var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));
}