.delivery-entry {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  --xhs-width:84px;
  width: 84px;
  --xhs-height:88px;
  height: 88px;
  padding: 0;
  border: 0;
  background: none;
  color: #533e56;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  filter: drop-shadow(0 3px 3px #65445f45);
  cursor: pointer;
}
.hud-currencies {
  position: relative;
}
.delivery-entry img {
  position: absolute;
  top: 0;
  left: 4px;
  --xhs-width:76px;
  width: 76px;
  --xhs-height:72px;
  height: 72px;
  object-fit: contain;
  pointer-events: none;
}
.delivery-entry span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  padding: 2px 0;
  background: #fff0d8;
  border: 1px solid #c89f72;
  border-radius: 10px;
  line-height: 16px;
  text-shadow: 0 1px #fff7e4;
}
.delivery-entry:active {
  --xhs-transform:scale(.95);
  transform: scale(.95);
}
.delivery-modal {
  display: flex;
  flex-direction: column;
  --xhs-row-gap:9px;
  --xhs-column-gap:9px;
  grid-gap: 9px;
  gap: 9px;
  max-height: 94vh;
  max-height: 94dvh;
  color: #62485c;
}
.delivery-modal h2,
.delivery-modal h3,
.delivery-modal p {
  margin: 0;
}
.delivery-modal .modal-head {
  flex: none;
}
.delivery-modal progress {
  --xhs-width:100%;
  width: 100%;
  --xhs-height:9px;
  height: 9px;
  accent-color: #679574;
}
.delivery-modal #deliveryProgress {
  font-size: 13px;
  text-align: center;
}
.delivery-route {
  overflow-y: auto;
  min-height: 100px;
  max-height: 44vh;
  max-height: 44dvh;
  padding: 7px 3px;
  scrollbar-color: #b893a8 #f8eadd;
  scrollbar-width: thin;
}
.delivery-leg {
  padding: 7px 0 10px;
}
.delivery-leg > div {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  --xhs-row-gap:7px;
  --xhs-column-gap:7px;
  grid-gap: 7px;
  gap: 7px;
}
.delivery-leg [data-delivery-level] {
  min-height: 40px;
  border: 2px solid #b99aaa;
  border-radius: 13px 16px 14px 12px;
  background: #fff7e7;
  color: #68495c;
  font: inherit;
  font-weight: 800;
  box-shadow: inset 0 2px #fff, 0 3px 5px rgba(101, 73, 94, .15);
}
.delivery-leg [data-delivery-level].passed {
  background: #dcebd0;
  border-color: #789476;
}
.delivery-leg [aria-current=step] {
  outline: 3px solid #a16a36;
  outline-offset: 2px;
}
.delivery-leg button:disabled {
  opacity: .55;
}
.delivery-leg button.boss {
  background: #f4d5c4;
}
.delivery-leg button small {
  display: block;
  font-size: 8px;
  line-height: 1.2;
}
.delivery-reward-node {
  display: flex;
  align-items: center;
  --xhs-row-gap:5px;
  --xhs-column-gap:5px;
  grid-gap: 5px;
  gap: 5px;
  --xhs-width:100%;
  width: 100%;
  margin-top: 7px;
  padding: 5px 3px;
  border: 0;
  border-bottom: 1px dashed #c6a4ae;
  background: transparent;
  color: #62485c;
  font: inherit;
  font-size: 10px;
  text-align: left;
}
.delivery-reward-node img {
  --xhs-width:24px;
  width: 24px;
  --xhs-height:24px;
  height: 24px;
  object-fit: contain;
}
.delivery-reward-node b {
  margin-left: auto;
  white-space: nowrap;
}
.delivery-preview {
  flex: none;
  text-align: center;
}
.delivery-preview h3 {
  font-size: 18px;
}
.delivery-preview p {
  font-size: 12px;
  margin: 6px 0;
}
.delivery-preview button {
  --xhs-width:100%;
  width: 100%;
  font-size: 13px;
}
.delivery-rules {
  font-size: 10px;
  line-height: 1.7;
  text-align: center;
  color: #71566a;
}
.delivery-board {
  --xhs-width:100%;
  width: 100%;
  position: relative;
  flex: none;
}
.delivery-receipts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(68px, auto));
  --xhs-row-gap:6px;
  --xhs-column-gap:6px;
  grid-gap: 6px;
  gap: 6px;
  padding: 2px 2px 6px;
  min-height: 154px;
}
.delivery-ticket {
  position: relative;
  min-width: 0;
  padding: 5px 7px 7px;
  color: #564238;
  background:
    linear-gradient(
      100deg,
      #f5e9d5,
      #fffbed 14%,
      #fffbed 86%,
      #ebd8bb);
  border-top: 3px solid #b49880;
  box-shadow: 0 3px 5px rgba(103, 75, 77, .18);
  animation: delivery-paper-in .24s ease-out;
}
.delivery-ticket:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  --xhs-height:5px;
  height: 5px;
  background:
    linear-gradient(
      135deg,
      transparent 33%,
      #f6edda 34%,
      #f6edda 66%,
      transparent 67%) 0 0/8px 5px;
}
.delivery-ticket header {
  font-size: 9px;
  border-bottom: 1px dashed #bea588;
  padding-bottom: 2px;
  margin-bottom: 2px;
  color: #765741;
}
.delivery-ticket [data-row] {
  display: flex;
  align-items: center;
  --xhs-row-gap:3px;
  --xhs-column-gap:3px;
  grid-gap: 3px;
  gap: 3px;
  min-height: 23px;
  padding: 2px 0;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
.delivery-ticket [data-row] + [data-row] {
  border-top: 1px solid #deceb9;
}
.delivery-ticket [data-row] span {
  flex: 1;
}
.delivery-ticket em {
  flex: none;
  font-style: normal;
  font-weight: 900;
  --xhs-width:12px;
  width: 12px;
}
.delivery-ticket .correct {
  color: #286640;
}
.delivery-ticket .wrong {
  color: #a52f39;
}
.delivery-ticket.tearing {
  pointer-events: none;
  z-index: 20;
  animation: delivery-tear .42s ease-in both;
}
.is-delivery #chapterPlay {
  --xhs-width:100%;
  width: 100%;
  --xhs-row-gap:3px;
  --xhs-column-gap:3px;
  grid-gap: 3px;
  gap: 3px;
}
.is-delivery .modal-head {
  min-height: 36px !important;
  padding-left: 44px !important;
  margin-bottom: 0 !important;
}
.is-delivery .modal-head h2 {
  font-size: 17px;
}
.is-delivery #chapterLabel {
  display: none;
}
.is-delivery #chapterPauseButton {
  --xhs-width:36px;
  width: 36px;
  --xhs-height:36px;
  height: 36px;
  min-height: 36px;
}
.is-delivery #chapterGoal {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 5px;
}
.delivery-error {
  color: #9f2634;
}
.is-delivery #chapterScene {
  --xhs-aspect-ratio:941/1070;
  aspect-ratio: 941/1070;
  --xhs-width:var(--xhs-local-52);
  width: var(--xhs-local-52);
  width: min(100%, calc((100dvh - 284px)*.879), 402px);
  overflow: visible;
  background: none;
}
.is-delivery.xhs-has-3 #chapterScene {
  --xhs-width:var(--xhs-local-53);
  width: var(--xhs-local-53);
  width: min(100%, calc((100dvh - 370px)*.879), 402px);
}
.is-delivery:has(.delivery-guests:not(.hidden)) #chapterScene {
  --xhs-width:var(--xhs-local-53);
  width: var(--xhs-local-53);
  width: min(100%, calc((100dvh - 370px)*.879), 402px);
}
.is-delivery #chapterScene > .chapter-background {
  display: none;
}
.is-delivery .chapter-counter-layer {
  top: calc(-100% * 602 / 1070);
  --xhs-height:calc(100% * 1672 / 1070);
  height: calc(100% * 1672 / 1070);
  bottom: auto;
}
.is-delivery .chapter-counter-art {
  clip-path: inset(36% 0 0);
}
.is-delivery .chapter-counter-layer {
  pointer-events: none;
}
.is-delivery .chapter-cup-label {
  font-size: 10px;
}
.is-delivery #chapterScene .chapter-effects {
  pointer-events: none;
}
.is-delivery .chapter-tools {
  display: none !important;
}
.delivery-guests {
  --guest-reference:var(--xhs-math-8);
  --guest-reference:min(100vw,560px);
  position: relative;
  --xhs-height:calc(24.8vh + 120px);
  height: calc(24.8vh + 120px);
  height: calc(24.8dvh + 120px);
  margin-bottom: 0;
}
.delivery-guests .chapter-customers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  clip-path: inset(0 0 var(--guest-occlusion,0px) 0);
}
.delivery-guests .challenge-customer {
  top: var(--guest-body-top,120px);
  bottom: auto;
  --xhs-width:calc(var(--guest-reference)*.28);
  width: calc(var(--guest-reference)*.28);
  --xhs-height:24.8vh;
  height: 24.8vh;
  height: 24.8dvh;
}
.delivery-guests .chapter-happy-badge,
.delivery-guests .chapter-happy-zone {
  display: none;
}
.delivery-result,
.delivery-reward-dialog {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  padding: 20px;
  background: rgba(72, 56, 79, .52);
}
.delivery-result > .game-card,
.delivery-reward-dialog > .game-card {
  --xhs-width:100%;
  width: 100%;
  max-width: 355px;
  padding: 22px 19px;
  color: #67475f;
  animation: delivery-open .28s cubic-bezier(.16, 1, .3, 1);
}
.delivery-result h2,
.delivery-result p {
  text-align: center;
  margin: 8px 0;
}
.delivery-result dl {
  margin: 14px 0;
}
.delivery-result dl > div {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 12px;
  border-bottom: 1px dashed #c9afb8;
}
.delivery-result dd {
  font-weight: 900;
  margin: 0;
}
.delivery-result #deliveryResultMilestone {
  font-size: 11px;
}
.delivery-result-actions {
  display: grid;
  --xhs-row-gap:10px;
  --xhs-column-gap:10px;
  grid-gap: 10px;
  gap: 10px;
}
.delivery-result-actions button {
  font-size: 13px;
}
.delivery-reward-dialog {
  z-index: 90;
  text-align: center;
}
.delivery-reward-dialog img {
  --xhs-width:120px;
  width: 120px;
  --xhs-height:105px;
  height: 105px;
  object-fit: contain;
  animation: delivery-open .4s ease-out;
}
.delivery-reward-dialog p {
  font-size: 13px;
}
.delivery-modal:not(.hidden) {
  animation: delivery-open .28s cubic-bezier(.16, 1, .3, 1);
}
.delivery-modal.closing,
.delivery-reward-dialog.closing {
  animation: delivery-close .18s ease-in both;
}
.delivery-modal button:focus,
.delivery-result button:focus,
.delivery-entry:focus {
  outline: 3px solid #8b5c35;
  outline-offset: 3px;
}
.delivery-modal button:focus-visible,
.delivery-result button:focus-visible,
.delivery-entry:focus-visible {
  outline: 3px solid #8b5c35;
  outline-offset: 3px;
}
@keyframes delivery-open {
  from {
    opacity: 0;
    --xhs-transform:translateY(12px) scale(.94);
    transform: translateY(12px) scale(.94);
  }
  to {
    opacity: 1;
    --xhs-transform:translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}
@keyframes delivery-close {
  to {
    opacity: 0;
    --xhs-transform:translateY(8px) scale(.96);
    transform: translateY(8px) scale(.96);
  }
}
@keyframes delivery-paper-in {
  from {
    opacity: 0;
    --xhs-transform:translateY(-5px) rotate(-1deg);
    transform: translateY(-5px) rotate(-1deg);
  }
  to {
    opacity: 1;
    --xhs-transform:none;
    transform: none;
  }
}
@keyframes delivery-tear {
  20% {
    --xhs-transform:rotate(-2deg);
    transform: rotate(-2deg);
  }
  45% {
    --xhs-transform:translateX(5px) rotate(2deg);
    transform: translateX(5px) rotate(2deg);
    clip-path: inset(0 0 0 0);
  }
  to {
    --xhs-transform:translate(20px,18px) rotate(9deg);
    transform: translate(20px, 18px) rotate(9deg);
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
}
@media (max-height: 650px) {
  .delivery-receipts {
    grid-template-rows: repeat(2, minmax(62px, auto));
    min-height: 136px;
    --xhs-row-gap:4px;
    --xhs-column-gap:4px;
    grid-gap: 4px;
    gap: 4px;
  }
  .delivery-ticket {
    padding: 3px 5px 5px;
  }
  .delivery-ticket [data-row] {
    font-size: 10px;
    min-height: 19px;
  }
  .is-delivery #chapterScene {
    --xhs-width:var(--xhs-local-54);
    width: var(--xhs-local-54);
    width: min(100%, calc((100dvh - 263px)*.879), 402px);
  }
  .is-delivery.xhs-has-3 #chapterScene {
    --xhs-width:var(--xhs-local-55);
    width: var(--xhs-local-55);
    width: min(100%, calc((100dvh - 349px)*.879), 402px);
  }
  .is-delivery:has(.delivery-guests:not(.hidden)) #chapterScene {
    --xhs-width:var(--xhs-local-55);
    width: var(--xhs-local-55);
    width: min(100%, calc((100dvh - 349px)*.879), 402px);
  }
  .delivery-result > .game-card {
    padding: 15px;
  }
  .delivery-result dl > div {
    padding: 3px;
  }
  .delivery-result-actions {
    --xhs-row-gap:8px;
    --xhs-column-gap:8px;
    grid-gap: 8px;
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .delivery-modal,
  .delivery-ticket,
  .delivery-result > .game-card,
  .delivery-reward-dialog,
  .delivery-reward-dialog img {
    animation: none !important;
  }
  .delivery-ticket.tearing {
    opacity: 0;
  }
}
#chapterModal.is-playing.is-delivery {
  background: #f3e6db;
}
#chapterModal.is-playing.is-delivery #chapterPlay {
  position: absolute;
  top: 61px;
  right: 8px;
  bottom: 6px;
  left: 8px;
  top: 61px;
  right: 8px;
  bottom: 6px;
  left: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  --xhs-width:auto;
  width: auto;
  overflow: visible;
  --xhs-row-gap:4px;
  --xhs-column-gap:4px;
  grid-gap: 4px;
  gap: 4px;
}
#chapterModal.is-playing.is-delivery .chapter-status {
  position: fixed;
  left: 50%;
  --xhs-transform:translateX(-50%);
  transform: translateX(-50%);
  top: 33px;
  --xhs-width:var(--xhs-math-19);
  width: var(--xhs-math-19);
  width: min(calc(100vw - 18px), 540px);
  max-width: none;
}
#chapterModal.is-playing.is-delivery #chapterGoal {
  display: flex;
  justify-content: space-between;
  --xhs-row-gap:10px;
  --xhs-column-gap:10px;
  grid-gap: 10px;
  gap: 10px;
  --xhs-width:100%;
  width: 100%;
}
#chapterModal.is-playing.is-delivery #chapterScene {
  flex: none;
  --xhs-width:var(--delivery-scene-width,90%);
  width: var(--delivery-scene-width,90%);
  --xhs-height:var(--delivery-scene-height,300px);
  height: var(--delivery-scene-height,300px);
  --xhs-aspect-ratio:auto;
  aspect-ratio: auto;
  overflow: visible;
  margin: 0 auto;
}
#chapterModal.is-playing.is-delivery .chapter-counter-layer {
  top: calc(-100% * 602 / 1070);
  --xhs-height:calc(100% * 1672 / 1070);
  height: calc(100% * 1672 / 1070);
  bottom: auto;
}
#chapterModal.is-playing.is-delivery .chapter-cup-label {
  display: none;
}
#chapterModal.is-playing.is-delivery .delivery-board {
  z-index: 8;
}
#chapterModal.is-playing.is-delivery #chapterScene.is-dragging {
  z-index: 12;
}
.delivery-guests .chapter-customers {
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
#chapterModal.is-playing.is-delivery #chapterPlay {
  --xhs-row-gap:24px;
  --xhs-column-gap:24px;
  grid-gap: 24px;
  gap: 24px;
}
#chapterModal.is-playing.is-delivery .chapter-cup {
  top: 77.2%;
}
.delivery-result.closing > .game-card {
  animation: delivery-close .18s ease-in both;
}
.delivery-champion {
  display: flex;
  align-items: center;
  --xhs-row-gap:9px;
  --xhs-column-gap:9px;
  grid-gap: 9px;
  gap: 9px;
  flex: none;
  padding: 6px 10px;
  background: #fff7dd;
  border: 1px solid #d6b875;
  border-radius: 12px;
}
.delivery-champion > img {
  --xhs-width:48px;
  width: 48px;
  --xhs-height:64px;
  height: 64px;
  object-fit: contain;
  flex: none;
}
.delivery-champion > div {
  min-width: 0;
}
.delivery-champion b {
  font-size: 13px;
}
.delivery-champion p {
  font-size: 12px;
  margin: 3px 0;
}
.delivery-champion small {
  font-size: 10px;
}
.delivery-fragment-node {
  padding: 5px 7px;
  font-size: 11px;
  color: #795418;
  background: #fff5d4;
  border-radius: 0 0 8px 8px;
}
.delivery-champion-result {
  color: #795418;
  background: #fff5d4;
  padding: 8px;
  border-radius: 8px;
  font-size: 12px;
}
.delivery-result > .game-card {
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}
@media (max-height: 650px) {
  .delivery-champion > img {
    --xhs-height:46px;
    height: 46px;
    --xhs-width:35px;
    width: 35px;
  }
  .delivery-modal {
    --xhs-row-gap:6px;
    --xhs-column-gap:6px;
    grid-gap: 6px;
    gap: 6px;
  }
  .delivery-route {
    flex: 1;
  }
}
#chapterModal.is-playing.is-delivery {
  background: #eedfcb var(--xhs-image-322) center top/auto var(--xhs-math-20) no-repeat;
  background: #eedfcb var(--xhs-image-322) center top/auto max(180dvh, 1250px) no-repeat;
}
#chapterModal.is-playing.is-delivery #chapterPlay {
  inset: calc(76px + var(--safe-area-inset-top,0px)) 8px calc(6px + var(--safe-area-inset-bottom,0px));
  top: calc(76px + var(--safe-area-inset-top,0px));
  right: 8px;
  bottom: calc(6px + var(--safe-area-inset-bottom,0px));
  left: 8px;
  inset: calc(76px + var(--safe-area-inset-top,env(safe-area-inset-top,0px))) 8px calc(6px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));
  --xhs-row-gap:24px;
  --xhs-column-gap:24px;
  grid-gap: 24px;
  gap: 24px;
}
#chapterModal.is-playing.is-delivery .modal-head {
  left: 8px;
  right: 8px;
  top: calc(5px + var(--safe-area-inset-top,0px));
  top: calc(5px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));
}
#chapterModal.is-playing.is-delivery .modal-head > div {
  --xhs-width:max-content;
  width: max-content;
  margin: 2px auto 0;
  padding: 6px 16px;
  background: linear-gradient(#c58062, #a8614a);
  border: 1px solid #89533c;
  border-radius: 5px 5px 12px 12px;
  box-shadow: inset 0 1px #edc39c, 0 2px 3px rgba(110, 73, 40, .24);
}
#chapterModal.is-playing.is-delivery #chapterTitle {
  color: #fff8e5;
  font-size: 12px !important;
  letter-spacing: .7px;
  text-shadow: 0 1px #814936;
}
#chapterModal.is-playing.is-delivery #chapterPauseButton {
  --xhs-width:44px;
  width: 44px;
  --xhs-height:44px;
  height: 44px;
  min-height: 44px;
}
#chapterModal.is-playing.is-delivery .chapter-status {
  position: absolute;
  top: -29px;
  left: 0;
  right: 0;
  --xhs-width:auto;
  width: auto;
  --xhs-transform:none;
  transform: none;
}
#chapterModal.is-playing.is-delivery #chapterGoal {
  padding: 4px 9px;
  --xhs-row-gap:4px;
  --xhs-column-gap:4px;
  grid-gap: 4px;
  gap: 4px;
  background: rgba(255, 247, 230, .93);
  border: 1px solid #d4b995;
  border-radius: 12px;
  color: #654a38;
  font-size: 11px;
}
.is-delivery .delivery-receipts {
  display: flex;
  flex-direction: column;
  --xhs-row-gap:9px;
  --xhs-column-gap:9px;
  grid-gap: 9px;
  gap: 9px;
  min-height: 0;
  padding: 0 5px 7px;
}
.is-delivery .delivery-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  --xhs-row-gap:13px;
  --xhs-column-gap:13px;
  grid-gap: 13px;
  gap: 13px;
  padding-top: 12px;
}
.is-delivery .delivery-rail:before {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  top: 3px;
  --xhs-height:5px;
  height: 5px;
  border: 1px solid #96683e;
  border-radius: 8px;
  background: linear-gradient(#efce8b, #ba884d);
  box-shadow: 0 2px 3px rgba(87, 55, 25, .25);
  pointer-events: none;
}
.is-delivery .delivery-ticket {
  border: 5px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22140%22%20viewBox%3D%220%200%20180%20140%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22p%22%20x2%3D%221%22%20y2%3D%22.2%22%3E%3Cstop%20stop-color%3D%22%23f1e2c5%22%2F%3E%3Cstop%20offset%3D%22.12%22%20stop-color%3D%22%23fff9e9%22%2F%3E%3Cstop%20offset%3D%22.85%22%20stop-color%3D%22%23fff8e7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23efdfbe%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M9%201Q1%201%201%209V132L6%20137L11%20133L16%20137L21%20133H159L164%20137L169%20133L174%20137L179%20132V9Q179%201%20171%201Z%22%20fill%3D%22url(%23p)%22%20stroke%3D%22%23c7aa7f%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M10%203H170%22%20stroke%3D%22%23fffdf5%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") 18 fill / 5px / 0 stretch;
  padding: 4px 3px 2px;
  background: none;
  border-radius: 9px;
  box-shadow: 0 4px 5px rgba(101, 66, 43, .17);
  transform-origin: 50% 0;
  color: #543d2b;
}
.is-delivery .delivery-ticket:before {
  content: "";
  position: absolute;
  top: -17px;
  left: calc(50% - 9px);
  --xhs-width:18px;
  width: 18px;
  --xhs-height:25px;
  height: 25px;
  border: 1px solid #aa7b48;
  border-radius: 5px 5px 4px 4px;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2028%22%3E%3Cg%20fill%3D%22%2380552f%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2219%22%20rx%3D%225%22%20ry%3D%224%22%2F%3E%3Cellipse%20cx%3D%225%22%20cy%3D%2212%22%20rx%3D%222%22%20ry%3D%223%22%20transform%3D%22rotate(-25%205%2012)%22%2F%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%229%22%20rx%3D%222%22%20ry%3D%223%22%2F%3E%3Cellipse%20cx%3D%2215%22%20cy%3D%229%22%20rx%3D%222%22%20ry%3D%223%22%2F%3E%3Cellipse%20cx%3D%2220%22%20cy%3D%2212%22%20rx%3D%222%22%20ry%3D%223%22%20transform%3D%22rotate(25%2020%2012)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/16px 22px no-repeat,
    linear-gradient(
      95deg,
      #e6bb79,
      #f3d19a 45%,
      #cea165);
  box-shadow: inset 0 1px #ffe3b3, 1px 2px 2px rgba(117, 80, 52, .333);
  pointer-events: none;
}
.is-delivery .delivery-ticket:after {
  content: "";
  left: auto;
  right: -3px;
  bottom: -3px;
  --xhs-width:12px;
  width: 12px;
  --xhs-height:12px;
  height: 12px;
  background:
    linear-gradient(
      135deg,
      #dec8a4 48%,
      #fff9e7 52%);
  border-radius: 3px 0 8px 0;
  box-shadow: -1px -1px 1px rgba(197, 167, 125, .333);
  pointer-events: none;
}
.is-delivery .delivery-ticket header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  --xhs-row-gap:3px;
  --xhs-column-gap:3px;
  grid-gap: 3px;
  gap: 3px;
  margin: 0 0 3px;
  padding: 0 0 4px;
  border-bottom: 1px dashed #b1b18c;
  color: #637654;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}
.is-delivery .delivery-ticket header small {
  color: #9b6c4c;
  font-size: 9px;
  font-weight: 400;
  white-space: nowrap;
}
.is-delivery .delivery-ticket [data-row] {
  min-height: 29px;
  padding: 3px 0;
  --xhs-row-gap:2px;
  --xhs-column-gap:2px;
  grid-gap: 2px;
  gap: 2px;
  line-height: 1.4;
}
.is-delivery .delivery-ticket [data-row] + [data-row] {
  border-top: 1px dashed #d9cbb0;
}
.is-delivery .delivery-ticket .boss-recipe-text {
  font-size: 12px;
  line-height: 1.4;
}
.is-delivery .delivery-ticket em {
  --xhs-width:10px;
  width: 10px;
  font-size: 12px;
}
.is-delivery .delivery-ticket .correct .boss-recipe-text {
  text-decoration: line-through;
  text-decoration-color: #74936b;
}
@media (max-height: 650px) {
  .is-delivery .delivery-receipts {
    --xhs-row-gap:7px;
    --xhs-column-gap:7px;
    grid-gap: 7px;
    gap: 7px;
    padding-bottom: 4px;
  }
  .is-delivery .delivery-rail {
    --xhs-row-gap:10px;
    --xhs-column-gap:10px;
    grid-gap: 10px;
    gap: 10px;
    padding-top: 10px;
  }
  .is-delivery .delivery-ticket {
    padding-top: 2px;
    padding-bottom: 0;
  }
  .is-delivery .delivery-ticket header {
    padding-bottom: 2px;
    margin-bottom: 1px;
    font-size: 9px;
  }
  .is-delivery .delivery-ticket [data-row] {
    min-height: 23px;
    padding: 2px 0;
  }
  .is-delivery .delivery-ticket .boss-recipe-text {
    font-size: 11px;
    line-height: 1.3;
  }
}
#chapterModal.is-playing.is-delivery .chapter-cup {
  --xhs-width:var(--xhs-local-56);
  width: var(--xhs-local-56);
  width: max(44px, min(17%, calc(var(--delivery-scene-height)*.23)));
}
.delivery-ticket button[data-row] {
  --xhs-width:100%;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.delivery-ticket button[data-row]:disabled {
  opacity: 1;
  cursor: default;
}
.is-delivery .delivery-ticket button.correct {
  color: #286640;
}
.is-delivery .delivery-ticket button.wrong {
  color: #a52f39;
}
.delivery-ticket button[data-row]:focus {
  outline: 2px solid #8a704a;
  outline-offset: 1px;
}
.delivery-ticket button[data-row]:focus-visible {
  outline: 2px solid #8a704a;
  outline-offset: 1px;
}
.delivery-ticket[data-ticket] {
  cursor: pointer;
  touch-action: manipulation;
}
.delivery-ticket[data-ticket] button[data-row]:disabled {
  pointer-events: none;
}
#deliveryBackground {
  display: none;
}
#chapterModal.is-playing.is-delivery {
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100vh;
  height: 100vh;
  height: 100dvh;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  max-width: none;
  max-height: none;
  background: none;
  isolation: isolate;
  animation: none;
  --xhs-transform:none;
  transform: none;
}
#chapterModal.is-playing.is-delivery #deliveryBackground {
  display: block;
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: 50%;
  inset: 0 auto 0 50%;
  --xhs-width:var(--worktop-width,100%);
  width: var(--worktop-width,100%);
  --xhs-transform:translateX(-50%);
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
#deliveryBackground > svg {
  position: absolute;
  left: 0;
  --xhs-width:100%;
  width: 100%;
  display: block;
}
#deliveryBackground .delivery-garden {
  top: 0;
  --xhs-height:var(--worktop-edge,50%);
  height: var(--worktop-edge,50%);
}
#deliveryBackground .delivery-worktop {
  top: var(--worktop-edge,50%);
  --xhs-height:var(--worktop-height,50%);
  height: var(--worktop-height,50%);
}
#chapterModal.is-playing.is-delivery #chapterPlay {
  inset: calc(76px + var(--safe-area-inset-top,0px)) 0 var(--safe-area-inset-bottom,0px);
  top: calc(76px + var(--safe-area-inset-top,0px));
  right: 0;
  bottom: var(--safe-area-inset-bottom,0px);
  left: 0;
  inset: calc(76px + var(--safe-area-inset-top,env(safe-area-inset-top,0px))) 0 var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));
  --xhs-row-gap:24px;
  --xhs-column-gap:24px;
  grid-gap: 24px;
  gap: 24px;
  z-index: 1;
}
#chapterModal.is-playing.is-delivery .delivery-board {
  --xhs-width:calc(100% - 16px);
  width: calc(100% - 16px);
  max-width: 540px;
}
#chapterModal.is-playing.is-delivery .chapter-status {
  left: 8px;
  right: 8px;
}
#chapterModal.is-playing.is-delivery #chapterScene {
  margin: auto auto 0;
  flex-shrink: 0;
}
#chapterModal.is-playing.is-delivery .delivery-board {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
#chapterModal.is-playing.is-delivery #chapterScene {
  min-height: 0;
}
#chapterModal.is-playing.is-delivery #chapterPlay {
  --xhs-row-gap:40px;
  --xhs-column-gap:40px;
  grid-gap: 40px;
  gap: 40px;
}
.service-hud {
  display: none;
}
#chapterModal.is-playing .service-hud {
  position: absolute;
  z-index: 24;
  top: calc(8px + var(--safe-area-inset-top,0px));
  top: calc(8px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));
  left: var(--xhs-local-57);
  left: max(8px, var(--safe-area-inset-left,env(safe-area-inset-left,0px)), var(--safe-area-inset-right,env(safe-area-inset-right,0px)));
  right: var(--xhs-local-58);
  right: max(8px, var(--safe-area-inset-left,env(safe-area-inset-left,0px)), var(--safe-area-inset-right,env(safe-area-inset-right,0px)));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr);
  align-items: flex-start;
  align-items: start;
  --xhs-row-gap:5px;
  --xhs-column-gap:5px;
  grid-gap: 5px;
  gap: 5px;
  pointer-events: none;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #593d2d;
}
.service-sign {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  --xhs-height:54px;
  height: 54px;
  padding: 3px 5px;
  border: 2px solid #78543a;
  border-radius: 9px 11px 8px 10px;
  background:
    linear-gradient(
      105deg,
      #fff9e9,
      #f4e1b8);
  box-shadow:
    inset 0 0 0 2px #fff8e2,
    0 3px 0 #99714c,
    0 5px 5px rgba(73, 54, 29, .19);
  line-height: 1.15;
}
.service-sign::before,
.service-sign::after {
  content: "";
  position: absolute;
  top: 5px;
  --xhs-width:3px;
  width: 3px;
  --xhs-height:3px;
  height: 3px;
  border-radius: 50%;
  background: #987147;
  box-shadow: 0 1px #fff9dc;
}
.service-sign::before {
  left: 5px;
}
.service-sign::after {
  right: 5px;
}
.service-sign > small {
  font-size: 14px;
  color: #796044;
  font-weight: 700;
  white-space: nowrap;
}
.service-stage-sign {
  justify-self: start;
  margin-left: 48px;
  min-width: 54px;
}
#serviceStage {
  font-size: 20px;
  white-space: nowrap;
  line-height: 1.2;
}
.service-clock-sign {
  --xhs-width:104px;
  width: 104px;
  border-color: #597453;
  border-radius: 14px 14px 10px 10px;
  box-shadow:
    inset 0 0 0 2px #fffbed,
    0 3px 0 #6e855b,
    0 5px 5px rgba(73, 54, 29, .19);
  background: linear-gradient(#fffced, #f7eccb);
}
#serviceTimer {
  display: block;
  font-family:
    "Trebuchet MS",
    "Arial Rounded MT Bold",
    sans-serif;
  font-size: 29px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .2px;
  white-space: nowrap;
  color: #4e6547;
  text-shadow: 0 1px #fff;
}
.service-clock-sign.xhs-has-4 {
  border-color: #a2533c;
  background: #fff0d9;
  box-shadow:
    inset 0 0 0 2px #fffbed,
    0 3px 0 #ab664b,
    0 5px 5px rgba(73, 54, 29, .19);
}
.service-clock-sign:has(.is-urgent) {
  border-color: #a2533c;
  background: #fff0d9;
  box-shadow:
    inset 0 0 0 2px #fffbed,
    0 3px 0 #ab664b,
    0 5px 5px rgba(73, 54, 29, .19);
}
#serviceTimer.is-urgent {
  color: #ad3f2e;
}
.service-cups-sign {
  justify-self: end;
  min-width: 82px;
}
#serviceCups {
  font-size: 19px;
  white-space: nowrap;
  line-height: 1.2;
  color: #526948;
}
#serviceErrors {
  grid-column: 3;
  text-align: right;
  font-size: 12px;
  color: #633e2d;
  background: #fff6df;
  border: 1px solid #b49a71;
  border-radius: 6px;
  padding: 2px 6px;
  justify-self: end;
}
#serviceErrors:empty {
  display: none;
}
#chapterModal.is-playing .modal-head > div,
#chapterModal.is-playing #chapterGoal,
#chapterModal.is-playing.is-delivery #chapterGoal {
  display: none;
}
#chapterModal.is-playing .modal-head {
  left: var(--xhs-local-59);
  left: max(8px, var(--safe-area-inset-left,env(safe-area-inset-left,0px)));
  top: calc(8px + var(--safe-area-inset-top,0px));
  top: calc(8px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));
}
#chapterModal.is-playing #chapterPauseButton {
  --xhs-width:44px;
  width: 44px;
  --xhs-height:44px;
  height: 44px;
  min-height: 44px;
}
#chapterModal.is-playing #chapterTools {
  top: calc(72px + var(--safe-area-inset-top,0px));
  top: calc(72px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));
}
@media (max-width: 360px) {
  #chapterModal.is-playing .service-hud {
    grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
    --xhs-row-gap:3px;
    --xhs-column-gap:3px;
    grid-gap: 3px;
    gap: 3px;
  }
  .service-clock-sign {
    --xhs-width:96px;
    width: 96px;
  }
  .service-stage-sign {
    min-width: 49px;
    margin-left: 48px;
    padding-left: 3px;
    padding-right: 3px;
    padding-inline: 3px;
  }
  #serviceStage {
    font-size: 18px;
  }
  .service-cups-sign {
    min-width: 76px;
    padding-left: 3px;
    padding-right: 3px;
    padding-inline: 3px;
  }
  #serviceCups {
    font-size: 17px;
  }
}
.delivery-guests .chapter-order {
  left: -18%;
  right: -18%;
}
.delivery-guests .chapter-order small {
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
#chapterModal.is-playing.is-delivery .chapter-order .order-drink {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  inset: auto;
  display: block;
  --xhs-width:48px;
  width: 48px;
  --xhs-height:64px;
  height: 64px;
  --xhs-aspect-ratio:auto;
  aspect-ratio: auto;
  margin: 0;
  --xhs-transform:none;
  transform: none;
  min-height: 0;
  --milk-line:21%;
  --milk-width:61%;
  pointer-events: none;
}
.delivery-guests .challenge-guest,
.delivery-guests .guest-departure-body {
  --xhs-height:100%;
  height: 100%;
}
.delivery-guests .chapter-order {
  bottom: 100%;
}
#chapterModal.is-playing.is-delivery .chapter-order .order-drink {
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
#chapterModal.is-playing.is-delivery.xhs-has-3 #chapterPlay {
  --xhs-row-gap:40px;
  --xhs-column-gap:40px;
  grid-gap: 40px;
  gap: 40px;
}
#chapterModal.is-playing.is-delivery:has(.delivery-guests:not(.hidden)) #chapterPlay {
  --xhs-row-gap:40px;
  --xhs-column-gap:40px;
  grid-gap: 40px;
  gap: 40px;
}
#chapterModal.is-playing.is-delivery .delivery-receipts {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.is-delivery .delivery-rail {
  flex: none;
}
#chapterModal.is-playing.is-delivery #chapterPlay {
  overflow: hidden;
  overflow-anchor: none;
  --xhs-row-gap:40px;
  --xhs-column-gap:40px;
  grid-gap: 40px;
  gap: 40px;
}
#chapterModal.is-playing.is-delivery.xhs-has-3 .delivery-board {
  overflow-y: auto;
  overflow-x: hidden;
}
#chapterModal.is-playing.is-delivery:has(.delivery-guests:not(.hidden)) .delivery-board {
  overflow-y: auto;
  overflow-x: hidden;
}
#chapterModal.is-playing.is-delivery .delivery-compact .chapter-order .order-drink {
  --xhs-width:36px;
  width: 36px;
  --xhs-height:48px;
  height: 48px;
}
#chapterModal.is-playing.is-delivery .delivery-compact .chapter-order {
  padding-bottom: 6px;
}
.delivery-result {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  padding: var(--xhs-local-60) var(--xhs-local-61) var(--xhs-local-29) var(--xhs-local-62);
  padding: max(12px, var(--safe-area-inset-top,env(safe-area-inset-top,0px))) max(12px, var(--safe-area-inset-right,env(safe-area-inset-right,0px))) max(12px, var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px))) max(12px, var(--safe-area-inset-left,env(safe-area-inset-left,0px)));
  overflow: hidden;
}
.delivery-result > .game-card {
  box-sizing: border-box;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
}
.delivery-result-scroll {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.delivery-result h2,
.delivery-result #deliveryResultReason,
.delivery-result #deliveryResultMilestone,
.delivery-result-actions {
  flex-shrink: 0;
}
.delivery-result-actions button:disabled {
  opacity: .5;
  filter: grayscale(.65);
  cursor: default;
  pointer-events: none;
}
@media (max-height: 450px) {
  .delivery-result > .game-card {
    padding: 10px 18px;
  }
  .delivery-result h2 {
    font-size: 18px;
    margin: 2px 0;
  }
  .delivery-result #deliveryResultReason,
  .delivery-result #deliveryResultMilestone {
    font-size: 11px;
    margin: 3px 0;
  }
  .delivery-result-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --xhs-row-gap:5px;
    --xhs-column-gap:5px;
    grid-gap: 5px;
    gap: 5px;
  }
  .delivery-result-actions button {
    min-height: 36px;
    padding: 5px;
  }
}
#chapterModal.is-playing.is-delivery {
  --xhs-width:var(--xhs-local-63);
  width: var(--xhs-local-63);
  width: min(100%, 560px);
  margin-left: auto;
  margin-right: auto;
  margin-inline: auto;
}
#chapterModal.is-playing.is-delivery #chapterPlay {
  top: calc(96px + var(--safe-area-inset-top,0px));
  top: calc(96px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));
  left: var(--safe-area-inset-left,0px);
  left: var(--safe-area-inset-left,env(safe-area-inset-left,0px));
  right: var(--safe-area-inset-right,0px);
  right: var(--safe-area-inset-right,env(safe-area-inset-right,0px));
  justify-content: flex-end;
  --xhs-row-gap:32px;
  --xhs-column-gap:32px;
  grid-gap: 32px;
  gap: 32px;
}
#chapterModal.is-playing.is-delivery.xhs-has-3 #chapterPlay {
  --xhs-row-gap:32px;
  --xhs-column-gap:32px;
  grid-gap: 32px;
  gap: 32px;
}
#chapterModal.is-playing.is-delivery:has(.delivery-guests:not(.hidden)) #chapterPlay {
  --xhs-row-gap:32px;
  --xhs-column-gap:32px;
  grid-gap: 32px;
  gap: 32px;
}
#chapterModal.is-playing.is-delivery #chapterScene {
  margin: 0 auto;
}
#chapterModal.is-playing.is-delivery #deliveryBackground {
  left: var(--worktop-left,50%);
}
#chapterModal.is-playing.is-delivery .delivery-ticket .boss-recipe-text {
  font-size: 13px;
  line-height: 1.5;
}
#chapterModal.is-playing.is-delivery .delivery-ticket [data-row] {
  min-height: 32px;
}
@media (min-width: 700px) and (max-height: 550px) {
  #chapterModal.is-playing.is-delivery {
    --xhs-width:var(--xhs-local-64);
    width: var(--xhs-local-64);
    width: min(100%, 960px);
  }
  #chapterModal.is-playing.is-delivery #chapterPlay {
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    --xhs-row-gap:24px;
    --xhs-column-gap:24px;
    grid-gap: 24px;
    gap: 24px;
    padding-left: 12px;
    padding-right: 12px;
    padding-inline: 12px;
    overflow: visible;
  }
  #chapterModal.is-playing.is-delivery.xhs-has-3 #chapterPlay {
    --xhs-row-gap:24px;
    --xhs-column-gap:24px;
    grid-gap: 24px;
    gap: 24px;
  }
  #chapterModal.is-playing.is-delivery:has(.delivery-guests:not(.hidden)) #chapterPlay {
    --xhs-row-gap:24px;
    --xhs-column-gap:24px;
    grid-gap: 24px;
    gap: 24px;
  }
  #chapterModal.is-playing.is-delivery .delivery-board {
    flex: 1;
    max-width: 420px;
    align-self: flex-start;
    overflow: auto;
  }
  #chapterModal.is-playing.is-delivery #chapterScene {
    margin: 0;
  }
}
#chapterModal.is-playing.is-delivery .chapter-cup {
  top: var(--xhs-local-65);
  top: min(77.2%, calc(100% - 72px));
}
#chapterModal.is-playing.is-delivery #chapterMilk {
  min-width: 44px;
  min-height: 44px;
}
@media (min-width: 700px) and (max-height: 550px) {
  #chapterModal.is-playing.is-delivery .service-hud {
    left: 12px;
    right: auto;
    --xhs-width:48%;
    width: 48%;
    max-width: 420px;
  }
}
