.shop-customers {
  display: contents;
}
.scene-world:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 84% 23%,
      #fff0c02b,
      transparent 47%),
    linear-gradient(
      155deg,
      transparent 45%,
      #55436212 100%);
}
.scene-counter,
.scene-decoration,
.scene-plant {
  filter: drop-shadow(2px 5px 3px #59465c30);
}
.shop-customer:before,
.panda-walker:before {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -2%;
  --xhs-height:9%;
  height: 9%;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      #59465c40,
      transparent 72%);
  pointer-events: none;
}
.shop-customer[data-pose=seated]:before {
  opacity: 0;
}
.shop-customer[data-phase=eating] .character-sprite {
  animation: customer-savor 2.1s ease-in-out infinite;
}
.customer-sip {
  position: absolute;
  left: 37%;
  top: calc(100% - var(--order-head-height) * .55);
  --xhs-width:28%;
  width: 28%;
  --xhs-height:32%;
  height: 32%;
  pointer-events: none;
  transform-origin: 50% 80%;
  animation: customer-sip 2.1s ease-in-out infinite;
}
.shop-customer[data-direction=left] .customer-sip {
  left: 22%;
}
.shop-customer[data-direction=right] .customer-sip {
  left: 50%;
}
.customer-sip .drink-picture {
  display: block;
  position: relative;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
}
.customer-sip .drink-picture > img:first-child {
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  object-fit: contain;
}
.customer-sip .drink-garnish {
  position: absolute;
  right: 0;
  bottom: 10%;
  --xhs-width:38%;
  width: 38%;
  --xhs-height:38%;
  height: 38%;
  object-fit: contain;
}
.served-dish.is-sipping .drink-picture:last-child {
  opacity: 0;
}
@keyframes customer-savor {
  0%, 100% {
    --xhs-rotate:0deg;
    rotate: 0deg;
  }
  35%, 65% {
    --xhs-rotate:1.5deg;
    rotate: 1.5deg;
  }
}
@supports not (translate:0px) {
  @keyframes customer-savor {
    0%, 100% {
      --xhs-rotate:0deg;
      rotate: 0deg;
      transform: translate(var(--xhs-translate-x,0px), var(--xhs-translate-y,0px)) rotate(0deg) scale(1, 1) var(--xhs-transform,translate(0px,0px));
    }
    35%, 65% {
      --xhs-rotate:1.5deg;
      rotate: 1.5deg;
      transform: translate(var(--xhs-translate-x,0px), var(--xhs-translate-y,0px)) rotate(1.5deg) scale(1, 1) var(--xhs-transform,translate(0px,0px));
    }
  }
}
@keyframes customer-sip {
  0%, 100% {
    --xhs-translate:0 8%;
    translate: 0 8%;
    --xhs-rotate:0deg;
    rotate: 0deg;
  }
  35%, 65% {
    --xhs-translate:0 -15%;
    translate: 0 -15%;
    --xhs-rotate:-8deg;
    rotate: -8deg;
  }
}
@supports not (translate:0px) {
  @keyframes customer-sip {
    0%, 100% {
      --xhs-translate:0 8%;
      translate: 0 8%;
      --xhs-rotate:0deg;
      rotate: 0deg;
      transform: translate(0, 8%) rotate(0deg) scale(1, 1) var(--xhs-transform,translate(0px,0px));
    }
    35%, 65% {
      --xhs-translate:0 -15%;
      translate: 0 -15%;
      --xhs-rotate:-8deg;
      rotate: -8deg;
      transform: translate(0, -15%) rotate(-8deg) scale(1, 1) var(--xhs-transform,translate(0px,0px));
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .shop-customer .character-sprite,
  .customer-sip {
    animation: none !important;
  }
}
.table-slot:nth-child(n) {
  --xhs-width:31.2%;
  width: 31.2%;
  --xhs-height:11.706%;
  height: 11.706%;
  --xhs-aspect-ratio:auto;
  aspect-ratio: auto;
  --xhs-transform:none;
  transform: none;
  z-index: auto;
}
.table-slot:hover {
  --xhs-transform:none;
  transform: none;
}
.table-furniture,
.table-foreground {
  pointer-events: none;
}
.table-slot .customer-order {
  z-index: 1100;
}
.scene-counter {
  z-index: 370;
}
.scene-decoration {
  z-index: 440;
}
.scene-plant {
  z-index: 580;
}
.staff-tray {
  z-index: 380;
}
.shop-customer,
.panda-walker {
  position: absolute;
  --xhs-transform:translate(-50%,-100%);
  transform: translate(-50%, -100%);
  pointer-events: none;
  transition: none;
  filter: drop-shadow(0 2px 1px #64517744);
}
.shop-customer {
  --xhs-width:17%;
  width: 17%;
  --xhs-aspect-ratio:8/9;
  aspect-ratio: 8/9;
  border: 0;
  padding: 0;
  background: none;
  pointer-events: auto;
}
.panda-walker {
  --xhs-width:20%;
  width: 20%;
  --xhs-aspect-ratio:1;
  aspect-ratio: 1;
}
.character-sprite {
  position: relative;
  display: block;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  transform-origin: 50% 100%;
}
.sprite-frame {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
}
.panda-walker .shop-panda {
  background: none;
  animation: none;
  clip-path: none;
}
.panda-walker .carried-dish {
  display: none;
}
.handoff-drink {
  position: absolute;
  z-index: 1100;
  --xhs-width:5.8%;
  width: 5.8%;
  --xhs-height:4.2%;
  height: 4.2%;
  --xhs-transform:translate(-50%,-100%);
  transform: translate(-50%, -100%);
  pointer-events: none;
  filter: drop-shadow(0 2px 1px #64517744);
}
.panda-walker.handing .shop-panda {
  animation: hand-drink .65s ease-in-out both;
}
@keyframes hand-drink {
  45% {
    --xhs-transform:translate(var(--reach-x,3px),-2px) rotate(var(--reach-angle,3deg));
    transform: translate(var(--reach-x,3px), -2px) rotate(var(--reach-angle,3deg));
  }
  75% {
    --xhs-transform:translate(var(--reach-x,3px),0);
    transform: translate(var(--reach-x,3px), 0);
  }
}
.serving-entry {
  position: relative;
  align-self: center;
  justify-self: center;
  --xhs-width:103px;
  width: 103px;
  --xhs-height:100px;
  height: 100px;
  margin: -22px 0 -4px;
  border: 0;
  padding: 0;
  background: transparent;
  filter: drop-shadow(0 5px 2px #77577955);
  transition: transform .12s, filter .12s;
  touch-action: manipulation;
}
.serving-entry > img {
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.serving-entry > small {
  position: absolute;
  --xhs-width:1px;
  width: 1px;
  --xhs-height:1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.serving-entry:active {
  --xhs-transform:translateY(5px) scale(.96);
  transform: translateY(5px) scale(.96);
  filter: drop-shadow(0 1px 1px #77577955);
}
.nav-row {
  align-items: flex-end;
  align-items: end;
  grid-template-columns: 1fr 112px 1fr;
}
@media (max-height: 700px) {
  .serving-entry {
    --xhs-width:91px;
    width: 91px;
    --xhs-height:88px;
    height: 88px;
    margin-top: -17px;
  }
  .nav-row {
    grid-template-columns: 1fr 99px 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .panda-walker.handing .shop-panda {
    animation: none;
  }
  .serving-entry {
    transition: none;
  }
}
.chapter-modal:not(.is-playing) #chapterTitle {
  position: absolute;
  --xhs-width:1px;
  width: 1px;
  --xhs-height:1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
#chapterSummary:empty {
  display: none;
}
.chapter-tutorial {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 6px 15px;
  border: 2px solid #c6b1c6;
  border-radius: 17px;
  background: #fff9ed;
  box-shadow: 0 4px 0 #c0aec3;
}
.chapter-tutorial > img {
  --xhs-width:55px;
  width: 55px;
  --xhs-height:60px;
  height: 60px;
  object-fit: contain;
}
.chapter-group {
  padding: 12px;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(#fffaf0, #f7edf1);
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 #c8b6cc;
  margin: 16px 0;
}
.chapter-group .chapter-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  --xhs-width:100%;
  width: 100%;
  padding: 3px 8px 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.chapter-group-title b {
  display: block;
  font-size: 19px;
  color: #705776;
}
.chapter-group-title small {
  color: #b291a6;
  letter-spacing: .13em;
  font-size: 9px;
}
.chapter-group-title > img {
  --xhs-width:58px;
  width: 58px;
  --xhs-height:56px;
  height: 56px;
  object-fit: contain;
}
.chapter-group > .chapter-levels {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  --xhs-row-gap:12px;
  --xhs-column-gap:10px;
  grid-gap: 12px 10px;
  gap: 12px 10px;
  padding: 8px 1px 7px;
}
.chapter-levels > button {
  position: relative;
  min-height: 87px;
  border: 2px solid #b7a0bf;
  border-radius: 19px;
  background: linear-gradient(#fffdf4, #efe2ee);
  box-shadow: inset 0 3px 0 #fff, 0 5px 0 #af98b7;
  transition: transform .12s, box-shadow .12s;
  font-size: 18px;
}
.chapter-group .chapter-levels > button.locked {
  opacity: 1;
  background: linear-gradient(#f7f4fc, #e6e2ee);
  color: #8e7d99;
}
.chapter-levels > button.current {
  border-color: #ceab66;
  background: linear-gradient(#fff8dd, #f6dfad);
  box-shadow: inset 0 3px 0 #fff, 0 5px 0 #bda16b;
}
.chapter-levels > button:active {
  --xhs-transform:translateY(4px) scale(.98);
  transform: translateY(4px) scale(.98);
  box-shadow: inset 0 2px 5px rgba(146, 125, 157, .333), 0 1px 0 #af98b7;
}
.chapter-levels .level-stars {
  display: flex;
  justify-content: center;
  --xhs-height:29px;
  height: 29px;
  margin-top: 5px;
}
.level-stars > img {
  --xhs-width:25px;
  width: 25px;
  --xhs-height:27px;
  height: 27px;
  object-fit: contain;
}
.level-lock {
  display: block;
  --xhs-width:35px;
  width: 35px;
  --xhs-height:35px;
  height: 35px;
  object-fit: contain;
  margin: 2px auto 0;
}
.chapter-star-reward > strong {
  display: flex;
  align-items: center;
  --xhs-row-gap:0;
  --xhs-column-gap:0;
  grid-gap: 0;
  gap: 0;
  --xhs-width:81px;
  width: 81px;
}
.chapter-star-reward > strong > img {
  --xhs-width:27px;
  width: 27px;
  --xhs-height:32px;
  height: 32px;
  object-fit: contain;
}
.hall-mode {
  position: absolute;
  z-index: 700;
  right: 12px;
  bottom: calc(106px + var(--safe-area-inset-bottom,0px));
  bottom: calc(106px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));
  --xhs-width:66px;
  width: 66px;
  --xhs-height:82px;
  height: 82px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  touch-action: manipulation;
}
.hall-mode > img {
  --xhs-width:58px;
  width: 58px;
  --xhs-height:58px;
  height: 58px;
  object-fit: contain;
}
.hall-mode > b {
  font-size: 12px;
}
.panda-walker {
  border: 0;
  padding: 0;
  background: none;
  pointer-events: auto;
  touch-action: manipulation;
}
.panda-walker > * {
  pointer-events: none;
}
.panda-wave {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 100%;
}
.panda-speech {
  position: absolute;
  bottom: 102%;
  left: 50%;
  --xhs-transform:translateX(-50%);
  transform: translateX(-50%);
  --xhs-width:max-content;
  width: max-content;
  max-width: 170px;
  padding: 7px 9px;
  border: 2px solid #ab8b9f;
  border-radius: 14px;
  background: #fffaf2;
  color: #665371;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 2px 0 #cbb9ca;
}
.panda-walker[data-interaction=wave] .shop-panda {
  visibility: hidden;
}
.panda-walker[data-interaction=wave] .panda-wave {
  animation: hall-wave 1.5s ease-in-out;
}
.panda-walker[data-interaction=jump] .shop-panda {
  animation: hall-jump 1.5s ease-in-out;
}
.panda-walker[data-interaction=stretch] .shop-panda {
  animation: hall-stretch 1.5s ease-in-out;
}
.panda-walker[data-interaction=hug] .shop-panda {
  animation: hall-hug 1.5s ease-in-out;
}
@keyframes hall-wave {
  0%, 100% {
    --xhs-rotate:0deg;
    rotate: 0deg;
  }
  20%, 60% {
    --xhs-rotate:-7deg;
    rotate: -7deg;
  }
  40%, 80% {
    --xhs-rotate:5deg;
    rotate: 5deg;
  }
}
@supports not (translate:0px) {
  @keyframes hall-wave {
    0%, 100% {
      --xhs-rotate:0deg;
      rotate: 0deg;
      transform: translate(var(--xhs-translate-x,0px), var(--xhs-translate-y,0px)) rotate(0deg) scale(1, 1) var(--xhs-transform,translate(0px,0px));
    }
    20%, 60% {
      --xhs-rotate:-7deg;
      rotate: -7deg;
      transform: translate(var(--xhs-translate-x,0px), var(--xhs-translate-y,0px)) rotate(-7deg) scale(1, 1) var(--xhs-transform,translate(0px,0px));
    }
    40%, 80% {
      --xhs-rotate:5deg;
      rotate: 5deg;
      transform: translate(var(--xhs-translate-x,0px), var(--xhs-translate-y,0px)) rotate(5deg) scale(1, 1) var(--xhs-transform,translate(0px,0px));
    }
  }
}
@keyframes hall-jump {
  0%, 100% {
    --xhs-translate:0 0;
    translate: 0 0;
    --xhs-scale:1;
    scale: 1;
  }
  20% {
    --xhs-scale:1.05 .92;
    scale: 1.05 .92;
  }
  42% {
    --xhs-translate:0 -15%;
    translate: 0 -15%;
    --xhs-scale:.98 1.03;
    scale: .98 1.03;
  }
  68% {
    --xhs-translate:0 0;
    translate: 0 0;
    --xhs-scale:1.06 .94;
    scale: 1.06 .94;
  }
  82% {
    --xhs-scale:1;
    scale: 1;
  }
}
@supports not (translate:0px) {
  @keyframes hall-jump {
    0%, 100% {
      --xhs-translate:0 0;
      translate: 0 0;
      --xhs-scale:1;
      scale: 1;
      transform: translate(0, 0) rotate(var(--xhs-rotate,0deg)) scale(1, 1) var(--xhs-transform,translate(0px,0px));
    }
    20% {
      --xhs-scale:1.05 .92;
      scale: 1.05 .92;
      transform: translate(var(--xhs-translate-x,0px), var(--xhs-translate-y,0px)) rotate(var(--xhs-rotate,0deg)) scale(1.05, .92) var(--xhs-transform,translate(0px,0px));
    }
    42% {
      --xhs-translate:0 -15%;
      translate: 0 -15%;
      --xhs-scale:.98 1.03;
      scale: .98 1.03;
      transform: translate(0, -15%) rotate(var(--xhs-rotate,0deg)) scale(.98, 1.03) var(--xhs-transform,translate(0px,0px));
    }
    68% {
      --xhs-translate:0 0;
      translate: 0 0;
      --xhs-scale:1.06 .94;
      scale: 1.06 .94;
      transform: translate(0, 0) rotate(var(--xhs-rotate,0deg)) scale(1.06, .94) var(--xhs-transform,translate(0px,0px));
    }
    82% {
      --xhs-scale:1;
      scale: 1;
      transform: translate(var(--xhs-translate-x,0px), var(--xhs-translate-y,0px)) rotate(var(--xhs-rotate,0deg)) scale(1, 1) var(--xhs-transform,translate(0px,0px));
    }
  }
}
@keyframes hall-stretch {
  0%, 100% {
    --xhs-scale:1;
    scale: 1;
    --xhs-rotate:0deg;
    rotate: 0deg;
  }
  35%, 65% {
    --xhs-scale:1.05 1.1;
    scale: 1.05 1.1;
  }
  40% {
    --xhs-rotate:-5deg;
    rotate: -5deg;
  }
  70% {
    --xhs-rotate:5deg;
    rotate: 5deg;
  }
}
@supports not (translate:0px) {
  @keyframes hall-stretch {
    0%, 100% {
      --xhs-scale:1;
      scale: 1;
      --xhs-rotate:0deg;
      rotate: 0deg;
      transform: translate(var(--xhs-translate-x,0px), var(--xhs-translate-y,0px)) rotate(0deg) scale(1, 1) var(--xhs-transform,translate(0px,0px));
    }
    35%, 65% {
      --xhs-scale:1.05 1.1;
      scale: 1.05 1.1;
      transform: translate(var(--xhs-translate-x,0px), var(--xhs-translate-y,0px)) rotate(var(--xhs-rotate,0deg)) scale(1.05, 1.1) var(--xhs-transform,translate(0px,0px));
    }
    40% {
      --xhs-rotate:-5deg;
      rotate: -5deg;
      transform: translate(var(--xhs-translate-x,0px), var(--xhs-translate-y,0px)) rotate(-5deg) scale(1, 1) var(--xhs-transform,translate(0px,0px));
    }
    70% {
      --xhs-rotate:5deg;
      rotate: 5deg;
      transform: translate(var(--xhs-translate-x,0px), var(--xhs-translate-y,0px)) rotate(5deg) scale(1, 1) var(--xhs-transform,translate(0px,0px));
    }
  }
}
@keyframes hall-hug {
  0%, 100% {
    --xhs-rotate:0deg;
    rotate: 0deg;
    --xhs-translate:0 0;
    translate: 0 0;
  }
  30% {
    --xhs-rotate:-6deg;
    rotate: -6deg;
    --xhs-translate:0 -3%;
    translate: 0 -3%;
  }
  65% {
    --xhs-rotate:6deg;
    rotate: 6deg;
    --xhs-translate:0 -3%;
    translate: 0 -3%;
  }
}
@supports not (translate:0px) {
  @keyframes hall-hug {
    0%, 100% {
      --xhs-rotate:0deg;
      rotate: 0deg;
      --xhs-translate:0 0;
      translate: 0 0;
      transform: translate(0, 0) rotate(0deg) scale(1, 1) var(--xhs-transform,translate(0px,0px));
    }
    30% {
      --xhs-rotate:-6deg;
      rotate: -6deg;
      --xhs-translate:0 -3%;
      translate: 0 -3%;
      transform: translate(0, -3%) rotate(-6deg) scale(1, 1) var(--xhs-transform,translate(0px,0px));
    }
    65% {
      --xhs-rotate:6deg;
      rotate: 6deg;
      --xhs-translate:0 -3%;
      translate: 0 -3%;
      transform: translate(0, -3%) rotate(6deg) scale(1, 1) var(--xhs-transform,translate(0px,0px));
    }
  }
}
.shop-customer .customer-order[data-state] {
  pointer-events: auto;
  touch-action: manipulation;
}
.shop-customer .customer-order[data-state]:not([data-state=auto]) {
  --xhs-transform:translateX(calc(-50% + var(--order-shift,0px)));
  transform: translateX(calc(-50% + var(--order-shift,0px)));
}
.shop-customer .customer-order[data-state=awaiting]:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
  --xhs-transform:translate(-50%,-50%);
  transform: translate(-50%, -50%);
}
.shop-customer[data-pose=walking] .customer-order {
  bottom: 100%;
}
.shop-customer .hall-cup {
  position: relative;
  display: inline-block;
  flex: none;
  --pour-duration:1.8s;
  --pour-from-line:91%;
  --pour-from-color:transparent;
  --milk-line:28%;
  --milk-width:59%;
}
.hall-cup .cup-visual {
  top: 0;
  right: 2px;
  bottom: 0;
  left: 2px;
  top: 0;
  right: 2px;
  bottom: 0;
  left: 2px;
}
.hall-cup.pouring .cup-liquid-body,
.hall-cup.pouring .cup-liquid-surface,
.hall-cup.pouring .cup-pour-stream,
.hall-cup.pouring .cup-liquid-surface:after {
  animation-iteration-count: infinite;
}
.hall-cup.pouring .cup-pour-stream {
  top: 0;
  --xhs-height:65%;
  height: 65%;
  --xhs-width:5%;
  width: 5%;
}
@media (prefers-reduced-motion: reduce) {
  .panda-walker[data-interaction] .shop-panda,
  .panda-walker[data-interaction] .panda-wave {
    animation: none;
  }
}
[data-build=beta] .nav-row #autoServeButton {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  inset: auto;
  grid-column: 9 / 11;
  grid-row: 1;
  justify-self: center;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  --xhs-width:100%;
  width: 100%;
  min-width: 0;
  max-width: 88px;
  --xhs-height:82px;
  height: 82px;
  margin: 0;
  padding: 0 0 3px;
}
[data-build=beta] .nav-row #autoServeButton > img {
  --xhs-width:100%;
  width: 100%;
  --xhs-height:58px;
  height: 58px;
  object-fit: contain;
}
html[data-build=beta] .nav-row #upgradeButton {
  grid-column: 3 / 5;
}
html[data-build=beta] .beta-label {
  top: auto;
  bottom: calc(100px + var(--safe-area-inset-bottom,0px));
  bottom: calc(100px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));
}
html[data-build=beta] .nav-row .illustrated-entry b,
html[data-build=beta] .nav-row #deliveryButton span {
  max-width: 100%;
  padding-left: 3px;
  padding-right: 3px;
  font-size: var(--xhs-math-9);
  font-size: clamp(10px, 3.2vw, 12px);
}