:root {
  --card-panel-art:url(assets/ui/card-frames-v5/milk-tea-panel.webp);
  --card-tile-art:url(assets/ui/card-frames-v5/boba-card.webp);
}
.game-card {
  --card-frame:68px;
  border: 8px solid transparent;
  border-image: var(--card-panel-art) 38% fill / var(--card-frame) / 0 repeat;
  background: none;
  box-shadow: 0 9px 20px rgba(59, 43, 70, .25);
}
.game-card:not(.chapter-modal) {
  border-radius: 24px;
}
.game-card h2,
.game-card h3 {
  color: #68496b;
  text-shadow: 0 1px #fff;
}
.modal.game-card {
  padding: 26px 22px calc(26px + var(--safe-area-inset-bottom,0px));
  padding: 26px 22px calc(26px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));
}
.chapter-modal.game-card,
.unlock-modal.game-card {
  border-width: 4px;
  border-radius: 0;
  box-shadow: none;
}
.chapter-modal.game-card:not(.is-playing) {
  padding: calc(25px + var(--safe-area-inset-top,0px)) 16px 18px;
  padding: calc(25px + var(--safe-area-inset-top,env(safe-area-inset-top,0px))) 16px 18px;
}
.unlock-modal.game-card {
  padding: 0;
}
.unlock-modal.game-card:before {
  content: "";
  position: absolute;
  z-index: 3;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  border: 4px solid transparent;
  border-image: var(--card-panel-art) 38% / var(--card-frame) / 0 repeat;
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 14px 68px, 68px 14px, calc(100% - 68px) 14px, calc(100% - 14px) 68px, calc(100% - 14px) calc(100% - 68px), calc(100% - 68px) calc(100% - 14px), 68px calc(100% - 14px), 14px calc(100% - 68px), 14px 68px, 0 0);
  pointer-events: none;
}
.unlock-modal .modal-head .close-btn {
  position: relative;
  z-index: 4;
}
.unlock-modal .research-top .modal-head {
  padding: calc(26px + var(--safe-area-inset-top,0px)) 28px 8px;
  padding: calc(26px + var(--safe-area-inset-top,env(safe-area-inset-top,0px))) 28px 8px;
}
.unlock-modal .research-bottom {
  padding-left: 22px;
  padding-right: 22px;
}
.chapter-modal.is-playing.game-card {
  --card-frame:34px;
  padding: calc(8px + var(--safe-area-inset-top,0px)) 10px calc(8px + var(--safe-area-inset-bottom,0px));
  padding: calc(8px + var(--safe-area-inset-top,env(safe-area-inset-top,0px))) 10px calc(8px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));
}
.chapter-briefing-card.game-card {
  padding: 28px 18px 24px;
  box-shadow: 0 12px 24px rgba(60, 43, 67, .333);
}
.chapter-briefing-card .chapter-star-rewards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  --xhs-row-gap:8px;
  --xhs-column-gap:8px;
  grid-gap: 8px;
  gap: 8px;
  margin: 13px 0 10px;
}
.chapter-star-tab {
  min-height: 65px;
  padding: 7px 2px;
  border: 2px solid #d2b9bd;
  border-radius: 15px 17px 13px 16px;
  background: linear-gradient(#fffefa, #f3e7e9);
  box-shadow: inset 0 2px #fff, 0 3px 0 #d9bec4;
  cursor: pointer;
}
.chapter-star-tab.current {
  border-color: #d6a967;
  background: linear-gradient(#fffbea, #f8e6c7);
  box-shadow: inset 0 2px #fff, 0 3px 0 #cda66e;
}
.chapter-star-tab strong {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 29px;
  --xhs-row-gap:1px;
  --xhs-column-gap:1px;
  grid-gap: 1px;
  gap: 1px;
}
.chapter-star-tab img {
  --xhs-width:24px;
  width: 24px;
  --xhs-height:24px;
  height: 24px;
  object-fit: contain;
}
.chapter-star-tab small {
  display: block;
  margin-top: 1px;
  color: #765a71;
  font-size: 11px;
  font-weight: 900;
}
.chapter-star-detail {
  min-height: 96px;
  padding: 11px 10px 8px;
  border: 2px solid #e3c9c7;
  border-radius: 16px;
  background: #fffaf2;
  box-shadow: inset 0 2px 3px rgba(230, 201, 180, .3);
}
.chapter-star-detail p {
  margin: 0;
  color: #684e65;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}
.chapter-star-detail .chapter-reward-note {
  margin-top: 7px;
  color: #806b7b;
  font-size: 11px;
  font-weight: 600;
  white-space: pre-line;
}
.chapter-briefing-card .dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  --xhs-row-gap:10px;
  --xhs-column-gap:10px;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 10px;
}
.chapter-briefing-card .chapter-begin {
  --xhs-width:100%;
  width: 100%;
  margin: 0;
  padding: 7px 3px;
  font-size: 13px;
  white-space: nowrap;
}
.game-action,
.research-guide,
.recipe-purchase button,
.garden-link,
.cashbox-row button {
  position: relative;
  min-height: 44px;
  padding: 9px 13px;
  border: 2px solid #59836c;
  border-radius: 17px 19px 16px 18px;
  background:
    linear-gradient(
      170deg,
      #f3ffe3 0%,
      #9dce9c 18%,
      #6da777 74%,
      #50865f);
  color: #244f3c;
  font-weight: 900;
  text-shadow: 0 1px #edffe9;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .79),
    inset 0 -3px 2px rgba(55, 109, 80, .6),
    0 4px 0 #427351,
    0 7px 7px rgba(71, 59, 75, .267);
  transition: transform .12s, box-shadow .12s;
}
.game-action:before,
.research-guide:before,
.recipe-purchase button:before,
.garden-link:before,
.cashbox-row button:before {
  content: "";
  position: absolute;
  left: 12%;
  top: 3px;
  --xhs-width:45%;
  width: 45%;
  --xhs-height:5px;
  height: 5px;
  border-radius: 100%;
  background: rgba(255, 255, 255, .66);
  --xhs-transform:rotate(-4deg);
  transform: rotate(-4deg);
  pointer-events: none;
}
.game-action:active,
.research-guide:active,
.recipe-purchase button:active,
.garden-link:active,
.cashbox-row button:active {
  --xhs-transform:translateY(4px);
  transform: translateY(4px);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .79), 0 1px 0 #427351;
}
.game-action-cancel,
.close-btn {
  border-color: #af6c79;
  background:
    linear-gradient(
      170deg,
      #fff4ef,
      #efaaa9 25%,
      #d9747b 80%,
      #bb5c67);
  color: #743b4c;
  text-shadow: 0 1px #ffe9e3;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .6),
    inset 0 -3px 2px rgba(155, 70, 86, .667),
    0 4px 0 #a65465,
    0 7px 7px rgba(71, 59, 75, .267);
}
.close-btn {
  border-radius: 50%;
  font-weight: 900;
  transition: transform .12s, box-shadow .12s;
}
.close-btn:active,
.game-action-cancel:active {
  --xhs-transform:translateY(4px);
  transform: translateY(4px);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .6), 0 1px 0 #a65465;
}
.game-action:disabled,
.recipe-purchase button:disabled,
.cashbox-row button:disabled {
  filter: grayscale(.7);
  opacity: .65;
  box-shadow: none;
  cursor: default;
}
.chapter-star-reward {
  border-radius: 15px;
  background: linear-gradient(#fffefa, #fff4eb);
  box-shadow: inset 0 2px #fff, 0 3px 0 #e0c8ce;
}
.chapter-star-reward.current {
  background: linear-gradient(#fff9df, #f8e4c5);
}
.development.game-card {
  top: 50%;
  bottom: auto;
  max-height: 86%;
  padding: 32px 18px 26px;
  --xhs-transform:translateY(-50%);
  transform: translateY(-50%);
  box-shadow: 0 0 0 100vmax rgba(60, 52, 75, .7), 0 9px 20px rgba(59, 43, 70, .25);
}
.development > small {
  padding-right: 30px;
}
.development #developmentResult:empty {
  display: none;
}
.development #backToMerge {
  --xhs-width:var(--xhs-local-24);
  width: var(--xhs-local-24);
  width: min(100%, 220px);
  min-height: 40px;
  flex: none;
  margin: 9px auto 0;
  padding: 7px 13px;
  border: 2px solid #af6c79;
  border-radius: 16px;
  background:
    linear-gradient(
      170deg,
      #fff4ef,
      #efaaa9 25%,
      #d9747b 80%,
      #bb5c67);
  color: #743b4c;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  text-shadow: 0 1px #ffe9e3;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .6),
    inset 0 -3px 2px rgba(155, 70, 86, .667),
    0 4px 0 #a65465;
}
.development #backToMerge:active {
  --xhs-transform:translateY(4px);
  transform: translateY(4px);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .6), 0 1px 0 #a65465;
}
.research-guide {
  --xhs-width:var(--xhs-local-3);
  width: var(--xhs-local-3);
  width: min(100%, 310px);
  font-size: 11px;
}
.reward-card.game-card {
  --xhs-width:var(--xhs-local-25);
  width: var(--xhs-local-25);
  width: min(90%, 360px);
  max-height: 92%;
  padding: 28px 18px;
  overflow: auto;
  filter: none;
}
.reward-card h2 {
  color: #795173;
  -webkit-text-stroke: 0;
  text-shadow: 0 2px #fff, 0 3px #eac7b8;
}
.reward-card small {
  color: #76566b;
  text-shadow: none;
  margin: 9px 0;
}
.reward-card button {
  --xhs-width:var(--xhs-local-26);
  width: var(--xhs-local-26);
  width: min(100%, 255px);
  min-height: 47px;
  margin-top: 7px;
  font-size: 13px;
}
.reward-card .game-action-confirm {
  border-color: #59836c;
  background:
    linear-gradient(
      170deg,
      #f3ffe3 0%,
      #9dce9c 18%,
      #6da777 74%,
      #50865f);
  color: #244f3c;
  text-shadow: 0 1px #edffe9;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .79),
    inset 0 -3px 2px rgba(55, 109, 80, .6),
    0 4px 0 #427351,
    0 7px 7px rgba(71, 59, 75, .267);
}
.reward-badge {
  --xhs-width:var(--xhs-math-10);
  width: var(--xhs-math-10);
  width: min(54vw, 185px);
}
.recipe-catalog,
.drink-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  --xhs-row-gap:10px;
  --xhs-column-gap:10px;
  grid-gap: 10px;
  gap: 10px;
  align-content: start;
}
.recipe-catalog {
  overflow: auto;
  --xhs-width:100%;
  width: 100%;
  padding: 4px 2px 9px;
}
.recipe-purchase,
.drink-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  --xhs-row-gap:4px;
  --xhs-column-gap:4px;
  grid-gap: 4px;
  gap: 4px;
  padding: 8px 5px 10px;
  border: 2px solid #c8acc0;
  border-radius: 16px 19px 15px 17px;
  background: linear-gradient(#fffefd, #fff5e8);
  box-shadow: inset 0 2px #fff, 0 4px 0 #dbc6d1;
  text-align: center;
}
.recipe-purchase:only-child {
  grid-column: 1/-1;
  --xhs-width:var(--xhs-local-27);
  width: var(--xhs-local-27);
  width: min(100%, 180px);
  justify-self: center;
}
.recipe-purchase img,
.drink-card-art .drink-picture {
  display: block;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:112px;
  height: 112px;
  object-fit: contain;
}
.recipe-purchase img {
  max-width: 120px;
  filter: drop-shadow(0 3px 2px #79616d55);
}
.recipe-purchase b,
.drink-card > b {
  min-height: 30px;
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  font-size: 12px;
  line-height: 1.25;
  color: #624a63;
}
.recipe-purchase small,
.drink-card > small {
  display: block;
  color: #7b5c72;
  font-size: 11px;
  font-weight: 800;
}
.recipe-purchase button {
  --xhs-width:100%;
  width: 100%;
  min-height: 39px;
  margin-top: auto;
  padding: 5px 2px;
  font-size: 10px;
}
.drink-card-grid {
  margin-top: 8px;
}
.drink-card-art {
  --xhs-width:100%;
  width: 100%;
  --xhs-height:112px;
  height: 112px;
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
}
.drink-card-art .drink-picture {
  position: relative;
}
.drink-card-art .drink-picture > img:first-child {
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  object-fit: contain;
}
.drink-card-art .drink-garnish {
  position: absolute;
  right: 3px;
  bottom: 0;
  --xhs-width:38%;
  width: 38%;
  --xhs-height:40%;
  height: 40%;
  object-fit: contain;
}
.garden-link {
  grid-column: 1/-1;
  --xhs-width:100%;
  width: 100%;
}
.scene {
  isolation: isolate;
}
.dashboard {
  position: absolute;
  z-index: 700;
  left: 0;
  right: 0;
  bottom: 0;
  --xhs-height:170px;
  height: 170px;
  display: block;
  flex: none;
  padding: 0 13px calc(6px + var(--safe-area-inset-bottom,0px));
  padding: 0 13px calc(6px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));
  border: 0;
  background:
    linear-gradient(
      transparent 0%,
      rgba(99, 80, 116, .25) 42%,
      rgba(67, 57, 84, .467) 100%);
  box-shadow: none;
  pointer-events: none;
}
.dashboard button {
  pointer-events: auto;
}
.dashboard .service-control {
  position: absolute;
  right: 20px;
  top: 10px;
  display: flex;
  margin: 0;
}
.dashboard #levelBadge,
.dashboard .nav-row small,
.dashboard .cashbox-button small {
  position: absolute;
  --xhs-width:1px;
  width: 1px;
  --xhs-height:1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.dashboard .auto-switch {
  --xhs-width:76px;
  width: 76px;
  --xhs-height:62px;
  height: 62px;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  justify-content: end;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 4px 2px #4f3b5559);
  color: #6e4771;
  transition: transform .12s, filter .12s;
}
.dashboard .auto-switch img {
  --xhs-width:46px;
  width: 46px;
  --xhs-height:46px;
  height: 46px;
  object-fit: contain;
  pointer-events: none;
}
.dashboard .auto-switch b {
  display: block;
  margin-top: -5px;
  padding: 2px 5px;
  border: 2px solid #77517f;
  border-radius: 99px;
  background: linear-gradient(#fff9d9, #f2c879);
  box-shadow: 0 3px 0 #6c4b82;
  color: #6e4771;
  font-size: 10px;
  line-height: 1.1;
  text-shadow: 0 1px #fff;
  white-space: nowrap;
}
.dashboard .auto-switch[aria-pressed=false] img {
  filter: grayscale(.65);
  opacity: .75;
}
.dashboard .auto-switch[aria-pressed=false] b {
  border-color: #a46e82;
  background: linear-gradient(#fff4ef, #e9a5a8);
  box-shadow: 0 3px 0 #9d6479;
  color: #743b4c;
}
.dashboard .auto-switch:active {
  --xhs-transform:translateY(4px) scale(.96);
  transform: translateY(4px) scale(.96);
  filter: drop-shadow(0 1px 1px #4f3b5559);
}
.dashboard .nav-row {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(5px + var(--safe-area-inset-bottom,0px));
  bottom: calc(5px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items: flex-end;
  align-items: end;
  justify-items: center;
  --xhs-row-gap:0;
  --xhs-column-gap:0;
  grid-gap: 0;
  gap: 0;
  margin: 0;
}
.dashboard .serving-entry {
  --xhs-width:104px;
  width: 104px;
  --xhs-height:102px;
  height: 102px;
  margin: 0;
}
.illustrated-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  justify-content: end;
  --xhs-width:90px;
  width: 90px;
  --xhs-height:91px;
  height: 91px;
  padding: 0 0 2px;
  border: 0;
  background: none;
  filter: drop-shadow(0 5px 2px #4f3b5559);
  transition: transform .12s, filter .12s;
  color: #fff7dc;
}
.illustrated-entry img {
  --xhs-width:75px;
  width: 75px;
  --xhs-height:75px;
  height: 75px;
  object-fit: contain;
  pointer-events: none;
}
.illustrated-entry b {
  display: block;
  margin-top: -7px;
  padding: 2px 10px;
  border: 2px solid #77517f;
  border-radius: 12px;
  background: linear-gradient(#fff9d9, #f2c879);
  color: #6e4771;
  font-size: 14px;
  line-height: 1.2;
  text-shadow: 0 1px #fff;
  box-shadow: 0 3px 0 #6c4b82;
  white-space: nowrap;
}
.illustrated-entry:active {
  --xhs-transform:translateY(5px) scale(.96);
  transform: translateY(5px) scale(.96);
  filter: drop-shadow(0 1px 1px #4f3b5559);
}
.dashboard .cashbox-button {
  position: absolute;
  left: 24px;
  bottom: calc(102px + var(--safe-area-inset-bottom,0px));
  bottom: calc(102px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));
  --xhs-width:68px;
  width: 68px;
  --xhs-height:68px;
  height: 68px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
}
.dashboard .cashbox-button img {
  --xhs-width:58px;
  width: 58px;
  --xhs-height:58px;
  height: 58px;
}
.dashboard .cashbox-button b {
  margin-top: -9px;
  padding: 1px 5px;
  font-size: 10px;
}
.modal .close-btn {
  flex: none;
}
@media (max-height: 700px) {
  .dashboard {
    --xhs-height:146px;
    height: 146px;
  }
  .dashboard .cashbox-button {
    bottom: calc(87px + var(--safe-area-inset-bottom,0px));
    bottom: calc(87px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));
    --xhs-width:58px;
    width: 58px;
    --xhs-height:58px;
    height: 58px;
  }
  .dashboard .cashbox-button img {
    --xhs-width:49px;
    width: 49px;
    --xhs-height:49px;
    height: 49px;
  }
  .dashboard .serving-entry {
    --xhs-width:91px;
    width: 91px;
    --xhs-height:89px;
    height: 89px;
  }
  .illustrated-entry {
    --xhs-width:75px;
    width: 75px;
    --xhs-height:79px;
    height: 79px;
  }
  .illustrated-entry img {
    --xhs-width:63px;
    width: 63px;
    --xhs-height:63px;
    height: 63px;
  }
  .illustrated-entry b {
    font-size: 12px;
  }
  .dashboard .service-control {
    top: 2px;
    right: 15px;
  }
  .reward-badge {
    --xhs-width:var(--xhs-math-11);
    width: var(--xhs-math-11);
    width: min(46vw, 155px);
  }
  .recipe-purchase img,
  .drink-card-art .drink-picture {
    --xhs-height:95px;
    height: 95px;
  }
  .drink-card-art {
    --xhs-height:95px;
    height: 95px;
  }
}
@media (max-width: 360px) {
  .dashboard .nav-row {
    left: 2px;
    right: 2px;
  }
  .dashboard .cashbox-button {
    left: 14px;
  }
  .dashboard .service-control {
    right: 5px;
  }
  .illustrated-entry {
    --xhs-width:78px;
    width: 78px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .game-action,
  .illustrated-entry,
  .close-btn {
    transition: none;
  }
}
.recipe-purchase,
.drink-card,
.shop-card,
.cashbox-row,
.chapter-group,
.chapter-tutorial,
.chapter-levels > button,
.chapter-star-detail,
.chapter-star-reward,
.chapter-order,
.customer-order,
.order-chip,
.chapter-result,
.level-notice > div,
.reward-preview > span,
.merge-tile:not(:empty),
.game-card .furniture-bundle,
.game-card .furniture-item,
.chapter-energy,
.chapter-status .chapter-goal,
.research-message:not(:empty) {
  --card-frame:24px;
  border: 4px solid transparent;
  border-image: var(--card-tile-art) 28% fill / var(--card-frame) / 0 stretch;
  border-radius: 14px;
  background: none;
  box-shadow: 0 3px 5px rgba(110, 83, 107, .15);
}
.chapter-group {
  --card-frame:30px;
  border-image-repeat: repeat;
  padding: 14px 10px;
}
.chapter-group .chapter-levels > button {
  padding: 12px 3px 10px;
  font-size: 18px;
}
.chapter-group .chapter-levels > button.locked {
  background: none;
  color: #8e7d99;
}
.chapter-levels > button.current,
.chapter-star-tab.current {
  background: none;
  box-shadow: 0 0 0 2px #de94ae, 0 4px 8px rgba(200, 120, 149, .25);
}
.chapter-levels > button:active {
  box-shadow: 0 1px 3px rgba(110, 83, 107, .15);
}
.chapter-star-detail {
  padding: 13px 10px;
}
.recipe-purchase,
.drink-card {
  padding: 12px 8px;
}
.chapter-order,
.customer-order,
.order-chip,
.reward-preview > span {
  --card-frame:16px;
  border-width: 2px;
}
.merge-tile:not(:empty) {
  --card-frame:12px;
  border-width: 2px;
  padding: 4px;
}
.merge-tile.held {
  box-shadow: 0 10px 18px rgba(110, 82, 100, .3);
}
.chapter-scene .chapter-result,
.level-notice > div {
  --card-frame:62px;
  border-image-source: var(--card-panel-art);
  border-image-slice: 38% fill;
  border-image-repeat: repeat;
  padding: 24px 18px;
  box-shadow: 0 0 0 100vmax rgba(57, 45, 66, .42);
}
@media (max-width: 360px) {
  .chapter-briefing-card.game-card {
    --card-frame:42px;
    padding: 24px 12px 20px;
  }
  .modal.game-card:not(.chapter-modal):not(.unlock-modal) {
    padding-left: 16px;
    padding-right: 16px;
  }
  .chapter-group {
    padding-left: 7px;
    padding-right: 7px;
  }
}
.modal-head > div {
  text-align: center;
  flex: 1;
}
.chapter-star-tab {
  border: 0;
  border-image: none;
  border-radius: 20px;
  background: #f8e9ed;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 #c6a7ba;
}
.chapter-star-tab.current {
  background: #f6dfad;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 #b89c6c;
}
.chapter-star-tab:active {
  --xhs-transform:translateY(3px);
  transform: translateY(3px);
  box-shadow: inset 0 2px 3px rgba(154, 121, 153, .25);
}
.chapter-star-detail,
.chapter-briefing-card {
  text-align: center;
}
.cashbox-row button {
  font-size: 13px;
  color: #173f30;
  text-shadow: 0 1px #fff8e9;
}
.unlock-modal.game-card {
  border-radius: 28px;
  overflow: hidden;
}
.research-top {
  border-radius: 26px 26px 0 0;
}
.research-bottom {
  border-radius: 26px;
  margin: 0 9px 9px;
  padding-bottom: calc(12px + var(--safe-area-inset-bottom,0px));
  padding-bottom: calc(12px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));
}
.research-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  --xhs-row-gap:12px;
  --xhs-column-gap:12px;
  grid-gap: 12px;
  gap: 12px;
  padding: 0 30px;
  align-items: stretch;
  text-align: center;
}
.research-stage-status {
  align-items: stretch;
  justify-content: center;
}
.research-stage-status > b,
#recipeBook {
  border: 2px solid #af94b4;
  border-radius: 20px;
  background: linear-gradient(#fffdf0, #efe3f1);
  box-shadow: inset 0 2px #fff, 0 3px 0 #ad93b0;
  color: #5b4263;
  font-weight: 900;
}
.research-stage-status > b {
  min-height: 52px;
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  padding: 5px 2px;
  font-size: 10px;
  white-space: normal;
}
.research-stage-status > b,
.research-stats #recipeBook {
  border: 3px solid transparent;
  border-image: var(--card-tile-art) 28% fill / 18px / 0 stretch;
  background: none;
  border-radius: 20px;
}
.research-stats #recipeBook {
  padding: 5px 3px;
  font-size: 11px;
  min-height: 52px;
  border-radius: 20px;
}
#recipeBook:active {
  --xhs-transform:translateY(3px);
  transform: translateY(3px);
  box-shadow: inset 0 2px 3px rgba(154, 121, 153, .25);
}
.research-message:empty {
  display: none;
}
#researchMessage:not(:empty) {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 2px;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 2px 8px;
  font-size: 10px;
  line-height: 16px;
}
#researchMessage:after {
  display: none;
}
#researchMessage:not(:empty) ~ .supply-label {
  visibility: hidden;
}
.research-panda {
  --xhs-height:calc(100% - 195px);
  height: calc(100% - 195px);
}
.research-xp {
  text-align: center;
}
.ingredient-shelf {
  padding: 7px 5px;
  border: 3px solid transparent;
  border-image: var(--card-tile-art) 28% fill / 20px / 0 stretch;
  border-radius: 20px;
  background: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: thin;
  scrollbar-color: #b89bc0 transparent;
}
.material-unlock {
  min-height: 58px;
  justify-content: center;
  touch-action: pan-x;
}
@media (max-width: 360px) {
  .research-stats {
    padding: 0 20px;
  }
  .research-stage-status > b {
    font-size: 10px;
  }
  .research-stats #recipeBook {
    font-size: 11px;
  }
}
.chapter-star-tab,
.login-modal .login-seven-card,
.login-modal .login-calendar-day,
.login-modal .login-today,
.login-modal .login-wallet,
.shop-customer .customer-order {
  border-color: transparent;
  border-style: solid;
  border-image: var(--card-tile-art) 28% / 20px / 0 stretch;
  background-color: #fff8e6;
}
.chapter-star-tab {
  border-width: 2px;
  background-image: none;
}
.chapter-star-tab.current {
  background: #f6dfad;
}
.login-modal .login-seven-card {
  border-image-width: 17px;
}
.login-modal .login-seven-card:nth-child(7) {
  border-image-width: 21px;
}
.login-modal .login-calendar-day {
  border-image-width: 12px;
}
.login-modal .login-wallet {
  border-width: 2px;
}
.login-modal .login-today {
  border-image-width: 28px;
}
.login-modal .login-calendar-day.is-today {
  border-color: transparent;
  border-image: var(--card-tile-art) 28% / 12px / 0 stretch;
  box-shadow: 0 0 0 2px #bd8aa9, 0 3px 0 #c7a9bc;
}
.shop-customer .customer-order {
  border-image-width: 13px;
  background-image: none;
}
.chapter-order:after {
  border-color: #c98c49;
  background: #fff8e6;
}
.decor-dialog-card.game-card,
.decor-preview-card.game-card {
  padding-bottom: 34px;
}