* { box-sizing: border-box; }
body {
  margin: 0;
  background: #493327;
  color: #643a1b;
  font: 700 16px Thonburi, "Noto Sans Thai", system-ui, sans-serif;
}
main {
  position: relative;
  width: min(100vw, 53dvh);
  height: 100dvh;
  margin: auto;
  background: #edc998 url(art/shop-workspace.webp) center / 100% 100%;
  container-type: inline-size;
  touch-action: none;
}
button {
  color: inherit;
  font: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
}
button:focus-visible { outline: 3px solid #d9753c; }
main button, .scene-piece {
  position: absolute;
  font-size: 3.8cqw;
}
.scene-piece { object-fit: fill; pointer-events: none; }
main .order {
  text-align: left;
  padding: 1% 4%;
  background: #fff3db;
  border: 2px solid #996034;
  border-radius: 3cqw;
}
.order small { display: block; font-size: .77em; }
.order progress { display: block; width: 100%; height: .45em; accent-color: #769944; }
.selected { outline: 2px solid #ed9e48; }
.slot { color: #fff3d7; text-shadow: 0 1px 3px #372719; }
.slot progress { display: block; width: 75%; margin: auto; height: .45em; accent-color: #f0b953; }
.toast {
  display: block;
  position: relative;
  width: 54%;
  margin: auto;
  aspect-ratio: 1.55;
  background: none;
}
.plate .toast { width: 75%; }


.toast i { position: absolute; inset: 24% 19% 26%; border-radius: 42%; }
.toast .milk { background: repeating-linear-gradient(145deg, transparent 0 17%, #fff0b2 18% 23%, transparent 24% 36%); }
.toast .sugar { background: radial-gradient(circle, #fff8e6 20%, transparent 25%) 0 0 / 7px 6px; }
.toast .cocoa { background: radial-gradient(circle, #653716 24%, transparent 30%) 0 0 / 6px 5px; }
.toast .jam { background: radial-gradient(ellipse, #e64b3c, #a82528); }
main .ingredient { display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 0; }
.ingredient img { width: 100%; height: 100%; object-fit: contain; }
.ingredient span { background: #fff1d5; border-radius: 1em; font-size: 3.15cqw; }
main .art, main [data-id="hint"] {
  background: url(art/button-cream.webp) center / 100% 100% no-repeat;
  font-size: 3.3cqw;
}
main [data-id="pause"], main [data-id="flip"], main [data-id="trash"] {
  background-image: url(art/button-round.webp);
  font-size: 5cqw;
}
main .drop-target { outline: 2px solid #efb14a; border-radius: 12px; }
.drag-preview {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  transform: translate(-50%, -90%);
  width: 23cqw;
  text-align: center;
}
.drag-preview .toast, .drag-preview img { width: 100%; }
dialog {
  padding: 9% 8%;
  width: min(94vw, 430px);
  max-height: 96dvh;
  overflow: auto;
  border: 0;
  color: inherit;
  background: url(art/panel.webp) center / 100% 100% no-repeat;
  text-align: center;
}
dialog::backdrop { background: #362315aa; }
dialog.landing {
  padding: 0 5% 3dvh;
  width: min(100vw, 53dvh);
  height: 100dvh;
  max-width: none;
  max-height: none;
  background-image: url(art/landing-bg.webp);
}
.landing .screen-content {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.screen-title {
  margin: 0 0 .55em;
  padding: .8em .45em;
  background: url(art/sign.webp) center / 100% 100% no-repeat;
  font-size: clamp(21px, 6vw, 33px);
}
.landing .screen-title { margin-top: 11dvh; }
.screen-actions { display: grid; justify-items: center; gap: .25em; }
.screen-actions button {
  width: 86%;
  min-height: 46px;
  padding: .65em 1.1em;
  background: url(art/button-cream.webp) center / 100% 100% no-repeat;
}
.screen-actions button:first-child { background-image: url(art/button-green.webp); }
.landing .screen-actions button:first-child { background-image: url(art/button-coral.webp); color: #fff7e9; font-size: 1.3em; }
.recipe-row { display: flex; gap: .4em; align-items: center; margin: .45em 0; text-align: left; }
.recipe-row img { width: 54px; height: 45px; object-fit: contain; }
.results strong { font-size: 2em; }
main .station {
  background: url(art/sign.webp) center / 100% 100% no-repeat;
  padding-top: .55em;
  pointer-events: none;
}
main .order { padding: .18em 3% .2em 18%; font-size: 3.45cqw; }
.order .portrait {
  position: absolute;
  left: 2%;
  top: 5%;
  width: 14%;
  height: 90%;
  object-fit: contain;
}
.order-time {
  float: right;
  border-radius: 1em;
  padding: .1em .55em;
  background: #dce9ad;
}
.order-toppings { display: flex; gap: .25em; height: 4cqw; }
.order-toppings img { width: 5cqw; object-fit: contain; }
body { min-height: 100dvh; display: grid; place-items: center; overflow: hidden; }
main { width: min(100vw, 52.69dvh); height: min(100dvh, 189.8vw); }
dialog { padding: 36px 28px; width: min(92vw, 420px); }
dialog.landing { width: min(100vw, 52.69dvh); height: min(100dvh, 189.8vw); padding: 0 22px 24px; }
main .order-toppings { height: 8cqw; align-items: center; }
main .order-toppings img { width: 10cqw; height: 7cqw; }
main .order { background: url(art/button-cream.webp) center / 100% 100%; border: 0; }
main .order progress { height: 1.7cqw; margin-top: 1cqw; }
main .customer { background: none; }
.delivery-marker { opacity: 0; color: #fff5d8; font-size: 9cqw; text-shadow: 0 2px 5px #6f451e; }
.ready-to-serve .delivery-marker { opacity: 1; animation: point 1s ease-in-out infinite alternate; display: inline-block; }
@keyframes point { to { transform: translateY(6px); } }
main .scene-piece { object-fit: contain; }
main .ingredient { display: block; padding: 2px; }
main .ingredient img { height: 100%; }
main [data-id="trash"] { color: #bb5745; padding: 18%; }
main [data-id="trash"] svg { position: absolute; inset: 17%; width: 66%; height: 66%; }
.heat-meter { position: absolute; bottom: -4%; left: 8%; width: 84%; height: 9%; border: 2px solid #694324; border-radius: 1em; background: linear-gradient(90deg,#ffe5aa 0 37.5%,#f6bb43 37.5% 72%,#9a4f28 72%); }
.heat-meter i { position: absolute; top: -5px; height: calc(100% + 10px); width: 3px; background: #fff9dd; border: 1px solid #5e3b20; transition: left .2s linear; }
.sides { position: absolute; bottom: -23%; left: 40%; color: #764b27; font-size: 3cqw; text-shadow: none; }
.toast.buttered::before { content: ''; position: absolute; inset: 25% 24% 24%; background: #ffd46955; border-radius: 40%; box-shadow: inset 0 0 10px #ffe4a5; }
.plate .toast { width: 90%; height: 90%; aspect-ratio: auto; }
main [data-id="trash"] { padding: 0; }
main .scene-piece[src$="grill.webp"], main .scene-piece[src$="plate.webp"] { object-fit: fill; }
main .order { border-radius: 3cqw; }
main .ingredient img { object-fit: contain; }
html, body { width: 100%; height: 100%; }
body { background: #e9bc87 url(art/shop-workspace.webp) center / cover; }
main { width: 100%; height: 100dvh; max-width: 560px; background-size: cover; }
dialog.landing {
  inset: 0;
  margin: 0 auto;
  width: 100%;
  height: 100dvh;
  max-width: 560px;
  padding: max(12px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background-size: cover;
}
dialog.landing::backdrop { background: #d9b077 url(art/landing-bg.webp) center / cover; }
.landing .screen-title { margin-top: 12dvh; padding: 40px 12px 18px; font-size: clamp(24px, 7vw, 34px); }
.screen-actions button { background-size: 100% 100%; min-height: 56px; font-size: 19px; padding: 12px 20px; }
.screen-actions { gap: 10px; }
button:focus:not(:focus-visible) { outline: none; }
dialog {
  width: min(92vw, 420px);
  max-height: 88dvh;
  border-radius: 28px;
  background: #fff0d5;
  border: 3px solid #ab7442;
  box-shadow: inset 0 0 0 5px #ffe0ad, 0 14px 50px #4b2d2766;
  padding: 24px 20px;
}
dialog.landing { border: 0; border-radius: 0; box-shadow: none; }
.screen-title { padding: 27px 8px 13px; line-height: 1.35; font-size: 25px; margin-bottom: 16px; }
.recipe-row { border: 1px solid #d9b789; border-radius: 16px; padding: 9px; background: #fff7e8; min-height: 76px; gap: 14px; }
.recipe-row img { width: 92px; height: 68px; object-fit: contain; }
main .toast, main .plate .toast {
  background: none;
  filter: none;
  position: relative;
  width: 76%;
  height: 80%;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast::before { display: none; }
.toast img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
main .plate .toast { width: 76%; height: 82%; }
main .slot .toast { height: 83%; width: 78%; }
.burn-alert { position: absolute; top: 0; right: 2%; opacity: 0; color: #e54f31; font-size: 7cqw; text-shadow: 0 2px #fff; }
.burn-alert.visible { opacity: 1; animation: warning .6s ease-in-out infinite alternate; }
@keyframes warning { to { transform: scale(1.18); } }
.drag-preview .toast { width: 100%; height: 100px; }
@media (max-height: 550px) and (orientation: landscape) {
  main { max-width: 55dvh; }
  dialog.landing { max-width: none; background-position: center 60%; }
  .landing .screen-content { flex-direction: row; align-items: center; gap: 24px; }
  .landing .screen-title { margin: 0; width: 48%; }
  .landing .screen-actions { width: 45%; }
}
@font-face {
  font-family: Itim;
  src: url(art/fonts/Itim-Regular.ttf) format("truetype");
  font-display: swap;
}
body, button { font-family: Itim, Thonburi, sans-serif; font-weight: 400; }
.landing .screen-title {
  background-image: url(art/landing-logo.webp);
  height: 25dvh;
  min-height: 150px;
  margin-top: 3dvh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 12px 3.5dvh;
  font-size: clamp(30px, 8vw, 45px);
  text-shadow: 0 1px #fff1c9;
}
.landing .screen-actions { gap: 5px; padding-bottom: 1dvh; }
.landing .screen-actions button {
  width: 84%;
  min-height: 58px;
  padding-left: 18%;
  background-image: url(art/landing-menu.webp);
  background-size: 100% 100%;
  font-size: 25px;
}
.landing .screen-actions button:first-child {
  background-image: url(art/landing-play.webp);
  min-height: 86px;
  padding-left: 20px;
  font-size: 37px;
  text-shadow: 0 2px #c76c46;
}
.landing .screen-actions button:last-child { background-image: url(art/landing-scores.webp); }
button { transition: transform .12s ease, filter .12s ease; }
button:active { transform: scale(.96); filter: brightness(.95); }
.screen-title { font-size: 30px; }
dialog.recipe-menu {
  width: min(100vw, 540px);
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 auto;
  border: none;
  border-radius: 0;
  padding: 16px;
  background: #fff2d9 url(art/landing-bg.webp) center / cover;
}
.recipe-menu .screen-content { padding: 8px; background: #fff3deec; border-radius: 24px; }
.recipe-menu .screen-title { margin-bottom: 8px; }
.recipe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.recipe-card {
  background: #fff6d7;
  border: 2px solid #c4a173;
  border-radius: 24px;
  padding: 10px 5px;
  box-shadow: inset 0 0 0 4px #fffaf0;
  text-align: center;
}
.recipe-card:nth-child(2) { background: #edf3d5; }
.recipe-card:nth-child(3) { background: #e7eef0; }
.recipe-card:nth-child(4) { background: #ffe4dc; color: #a84536; }
.recipe-card h2 { font-size: clamp(18px, 4.8vw, 25px); margin: 0; font-weight: 400; }
.recipe-toast { width: 100%; height: 14dvh; object-fit: contain; }
.recipe-ingredients { display: flex; justify-content: center; align-items: center; gap: 3px; }
.recipe-ingredients img { width: 26%; height: 35px; object-fit: contain; }
.recipe-card small { font-size: 17px; }
.recipe-guide { background: #fff8e8; border: 2px solid #d5b489; border-radius: 24px; margin: 10px 0; padding: 8px; }
.recipe-guide > div { display: flex; align-items: center; justify-content: space-evenly; }
.recipe-guide img { width: 24%; height: 8dvh; object-fit: contain; }
.recipe-guide p { margin: 5px 0; font-size: 19px; }
.recipe-guide small { color: #b94d48; font-size: 17px; }
.landing { container-type: inline-size; }
.landing .screen-actions button { width: 80%; height: 20cqw; min-height: 62px; max-height: 100px; }
.landing .screen-actions button:first-child { height: 25cqw; min-height: 88px; max-height: 130px; }
.landing .screen-title { font-size: clamp(30px, 8cqw, 45px); }
@media (min-width: 700px) {
  dialog.landing::backdrop { background: #edd6b5; }
  body { background: #edd6b5; }
}
.landing .screen-actions button {
  font-size: clamp(17px, 5cqw, 25px);
  white-space: nowrap;
  padding-left: 24%;
  padding-right: 5%;
}
.landing .screen-actions button:first-child {
  font-size: clamp(27px, 8cqw, 37px);
  padding-left: 10%;
  padding-right: 10%;
}
@media (max-height: 650px) {
  .landing .screen-actions button { min-height: 48px; height: 17cqw; }
  .landing .screen-actions button:first-child { min-height: 64px; height: 23cqw; }
  .landing .screen-title { min-height: 130px; }
}
@media (max-width: 360px) {
  dialog:not(.landing) .screen-title { font-size: 24px; }
}
/* Preserve illustrated proportions while the surrounding hit areas stay generous. */
main .order {
  background: #fff2d8;
  border: 2px solid #a87440;
  border-radius: 18px;
  box-shadow: inset 0 0 0 3px #ffe3b8, 0 2px 0 #885a3230;
  padding-top: 4px;
}
main .order.selected { outline: none; border-color: #b47d39; }
main .drop-target { outline: none; box-shadow: none; }
main .heat-meter {
  height: 16%;
  min-height: 14px;
  bottom: -6%;
  left: 4%;
  width: 92%;
  border: 2px solid #684126;
  box-shadow: 0 0 0 3px #fff2cf, 0 3px 7px #52351c60;
  background: linear-gradient(90deg, #f3d491 0 37.5%, #70b858 37.5% 75%, #ee7948 75% 100%);
}
main .heat-meter i {
  width: 5px;
  height: calc(100% + 10px);
  border-radius: 3px;
  background: #fff;
  border: 1px solid #452b1a;
}
main .heat-meter::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 37%, #fff6 37% 38%, transparent 38% 74%, #fff6 74% 75%, transparent 75%);
  pointer-events: none;
}
main .sides { bottom: -28%; }
main .art { background-size: contain; }
main [data-id="pause"], main [data-id="trash"] { background-size: contain; }
.screen-actions button, .screen-title { background-size: contain; background-repeat: no-repeat; }
.landing .screen-actions button {
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 613 / 260;
  padding-top: 0;
  padding-bottom: 0;
  background-size: contain;
}
.landing .screen-actions button:first-child {
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 610 / 264;
}
.landing .screen-title { background-size: contain; }
dialog:not(.landing) .screen-actions button { min-height: 52px; }
.landing .screen-actions button { width: 66%; padding-left: 20%; font-size: clamp(17px, 4.5cqw, 23px); }
.landing .screen-actions button:first-child { width: 76%; padding-left: 10%; font-size: clamp(27px, 7cqw, 35px); }
@media (max-height: 650px) {
  .landing .screen-actions button { width: 56%; font-size: 15px; padding-left: 17%; }
  .landing .screen-actions button:first-child { width: 65%; font-size: 26px; padding-left: 10%; }
}
main .order { padding: 6px 8px 8px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.order .portrait { left: 4%; top: 4%; width: 26%; height: 53%; }
main .order-toppings { height: 55%; margin-left: 28%; gap: 3px; }
main .order-toppings img { width: 30%; height: 100%; }
main .order progress { width: 100%; height: 16px; margin: 0; appearance: none; border: 2px solid #926339; border-radius: 10px; overflow: hidden; background: #e6cdae; }
.order progress::-webkit-progress-bar { background: #e6cdae; }
.order progress::-webkit-progress-value { background: #8ebc59; transition: width .2s linear, background .3s; }
.order[data-phase="warning"] progress::-webkit-progress-value { background: #efb444; }
.order[data-phase="urgent"] progress::-webkit-progress-value { background: #df6552; }
.order progress::-moz-progress-bar { background: #8ebc59; }
.order[data-phase="warning"] progress::-moz-progress-bar { background: #efb444; }
.order[data-phase="urgent"] progress::-moz-progress-bar { background: #df6552; }
.flip-hint { position: absolute; right: 0; top: -9%; width: 25%; height: 40%; object-fit: contain; pointer-events: none; animation: point .8s ease-in-out infinite alternate; }
main .slot .flip-hint { right: -5%; top: -18%; width: 33%; height: 48%; }
main .delivery-marker { position: absolute; top: 0; right: 0; width: 42%; height: 45%; object-fit: contain; pointer-events: none; }
dialog:not(.landing):not(.recipe-menu) {
  width: min(90vw, 380px);
  padding: 22px 24px;
  max-height: 88dvh;
  border: 3px solid #a77544;
  border-radius: 25px;
  background: #fff1d6;
  box-shadow: inset 0 0 0 5px #ffe2b2, 0 16px 60px #3f241760;
}
dialog:not(.landing) .screen-title {
  background: none;
  padding: 4px 0 14px;
  border-bottom: 2px dashed #ceaa78;
  margin: 0 0 20px;
  font-size: clamp(25px, 6vw, 32px);
}
dialog:not(.landing) .screen-actions { margin-top: 20px; gap: 10px; }
dialog:not(.landing) .screen-actions button {
  width: 100%;
  min-height: 52px;
  background: #fff8e7;
  border: 2px solid #a57948;
  border-radius: 16px;
  box-shadow: inset 0 0 0 3px #fff1cf, 0 3px 0 #a57948;
  font-size: 22px;
  padding: 10px 18px;
}
dialog:not(.landing) .screen-actions button:first-child { background: #d5e6a3; }
.results strong { display: block; font-size: 48px; color: #94601e; }
.results p { padding: 8px 10px; margin: 8px 0; border-radius: 10px; background: #f5e5c9; font-size: 20px; }
@media (prefers-reduced-motion: reduce) {
  .flip-hint, .delivery-marker, .burn-alert { animation: none !important; }
}
.departing { animation: departure .35s ease-in forwards; pointer-events: none; }
@keyframes departure { to { opacity: 0; transform: translateX(35px); } }
main .order {
  border-radius: 24px;
  padding: 12px 10px 10px;
  overflow: visible;
}
main .order::before, main .order::after {
  content: '';
  position: absolute;
  background: #fff2d8;
  border: 2px solid #a87440;
  border-radius: 50%;
  pointer-events: none;
}
main .order::before { width: 13px; height: 10px; bottom: -17px; left: 44%; }
main .order::after { width: 7px; height: 6px; bottom: -28px; left: 49%; }
main .order-toppings { margin: 0; justify-content: center; height: 65%; }
main .order-toppings img { width: 28%; height: 90%; }
main .slot { padding: 0; display: flex; align-items: center; justify-content: center; }
main .slot .toast { width: 90%; height: 87%; margin-top: -6%; }
main .plate { display: flex; align-items: center; justify-content: center; padding: 0; }
main .plate .toast { width: 80%; height: 83%; }
main .flip-hint { width: 38%; height: 47%; right: 10%; top: 25%; z-index: 2; }
main .slot .flip-hint { width: 40%; height: 55%; right: 8%; top: 19%; }
.score-pop {
  position: fixed; z-index: 10; pointer-events: none;
  font: 38px Itim, sans-serif; color: #487c2f;
  text-shadow: 2px 2px #fff4ce, -2px -2px #fff4ce;
  animation: score-rise 1.1s ease-out forwards;
}
@keyframes score-rise {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.7); }
  20% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -65px) scale(1); }
}
.results { padding: 20px 0; }
.results strong { font-size: 64px; }
main { overflow: hidden; }
main [data-id="item0"] img { object-fit: contain; object-position: right center; }
main .slot { display: block; }
main .slot .toast {
  position: absolute;
  left: 5%;
  top: -2%;
  width: 90%;
  height: 78%;
  margin: 0;
}
main .flip-hint, main .slot .flip-hint {
  width: 45%;
  height: 60%;
  right: -3%;
  top: 15%;
  filter: drop-shadow(2px 0 #fff) drop-shadow(-2px 0 #fff)
    drop-shadow(0 2px #fff) drop-shadow(0 -2px #fff)
    drop-shadow(0 3px 4px #57331b99);
}
main .sides {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 16px;
  background: #fff2dce8;
}
main .sides { bottom: -30%; }
.side-dot {
  display: block;
  flex: none;
  width: 13px;
  height: 13px;
  border: 2px solid #916038;
  border-radius: 50%;
  background: #e8cfaa;
}
.side-dot.complete { background: #79b84b; border-color: #4e7e2d; }
.side-dot.current { outline: 2px solid #efaa36; outline-offset: 2px; }
main .delivery-marker {
  width: 46%;
  height: 47%;
  right: -1%;
  top: -3%;
  filter: drop-shadow(0 2px 2px #fff5da) drop-shadow(0 2px 2px #704525);
}
main .slot .toast {
  left: 0;
  top: 3%;
  width: 100%;
  height: 78%;
  margin: 0;
}
main .slot .toast img { object-position: center; }
main [data-id="item0"] { z-index: 1; }
main [data-id="trash"] { z-index: 2; }
main .ingredient:not([data-id="item0"]) img { max-height: 100%; }
main img { user-select: none; -webkit-user-drag: none; }
main button:active { transform: none; }

/* Keep delivery previews inside their thought bubbles, clear of faces. */
main .order .delivery-marker {
  display: none;
  left: 5%;
  top: 10%;
  width: 34%;
  height: 59%;
  animation: none;
}
main.ready-to-serve .order .delivery-marker { display: block; }
main.ready-to-serve .order-toppings {
  margin-left: 37%;
  width: 63%;
}
main.ready-to-serve .order-toppings img { width: 31%; }

/* Anchor every container to the same shelf surface. */
main .ingredient:not([data-id="item0"]) { padding: 0; }
main .ingredient:not([data-id="item0"]) img {
  object-position: center bottom;
  filter: drop-shadow(0 2px 1px #69401d55);
}

main .heat-meter {
  background: linear-gradient(90deg,
    #f9edd6 0 16.667%, #f4d9a2 16.667% 33.333%,
    #efbc66 33.333% 50%, #73b65b 50% 66.667%,
    #d77b42 66.667% 83.333%, #6a3734 83.333% 100%);
}
main .heat-meter::after {
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - 1px),
    #68412680 calc(100% / 6 - 1px) calc(100% / 6));
}
main .heat-meter i { z-index: 1; }
main .slot .toast { filter: none; }
main .grill-power {
  z-index: 3;
  padding: 0;
  border: 1px solid #5f3e24;
  border-radius: 8px;
  background: #69483c;
  color: #fff6e4;
  box-shadow: 0 2px 0 #4e3425;
  font-size: 2.7cqw;
}
main .grill-power.powered { background: #d5e49a; color: #334822; }

main .order.courier-order {
  background: linear-gradient(145deg, #ffefb3, #f8f5d9 60%, #e3efbb);
  border-color: #a37230;
  box-shadow: inset 0 0 0 3px #f5cf70, 0 2px 5px #673f3455;
}
main .courier-order::before, main .courier-order::after { background: #fae5a8; }
.courier-bonus {
  position: absolute;
  right: 5%;
  top: 4%;
  padding: 0 8px;
  border: 1px solid #9c661d;
  border-radius: 100px;
  background: #ffdc7e;
  color: #704020;
  font-size: 3.8cqw;
}
main .courier-order .order-toppings { height: 54%; }
main .tray-well:focus-visible { border-radius: 20%; }

.grill-fire, .grill-ash {
  display: none;
  position: absolute;
  inset: 4% 13% 26%;
  pointer-events: none;
}
.on-fire .grill-fire, .crumbling .grill-ash { display: block; }
.grill-fire { inset: -27% 7% 17%; }
.grill-fire img {
  position: absolute;
  left: 20%;
  bottom: 0;
  width: 60%;
  height: 72%;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: center 90%;
  filter: drop-shadow(0 2px 2px #713d2670);
  animation: flame-rise .38s linear infinite;
}
@keyframes flame-rise {
  0%, 100% { transform: skewX(-4deg) scale(.96, 1.04); opacity: .91; }
  32% { transform: skewX(5deg) scale(1.07, .92); opacity: 1; }
  64% { transform: skewX(-1deg) scale(.93, 1.13); opacity: .95; }
}
.grill-fire i {
  position: absolute;
  bottom: 29%;
  left: 42%;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  background: #edac59;
  border: 1px solid #a96636;
  animation: lift-ember .85s ease-out infinite;
}
.grill-fire i:nth-of-type(2) { left: 56%; animation-delay: -.35s; }
.grill-fire i:nth-of-type(3) { left: 65%; animation-delay: -.58s; }
@keyframes lift-ember {
  from { opacity: .95; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(12px, -54px) scale(.22); }
}
.crumbling .grill-fire, .crumbling .toast { animation: crumble .8s ease-out forwards; }
@keyframes crumble { to { opacity: 0; transform: translateY(17%) scale(.63); } }
.grill-ash i {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 5px;
  height: 5px;
  border-radius: 40%;
  background: #51423a;
  box-shadow: 4px 7px #a8998a, -7px 4px #705449;
  animation: scatter .9s ease-out forwards;
  --dx: 39px;
  --dy: -25px;
}
.grill-ash i:nth-child(3n) { --dx: -42px; --dy: -19px; }
.grill-ash i:nth-child(3n + 1) { --dx: -17px; --dy: 17px; }
.grill-ash i:nth-child(even) { animation-delay: .1s; top: 52%; }
.grill-ash i:nth-child(4n) { --dx: 53px; --dy: 14px; }
@keyframes scatter {
  from { transform: scale(.5); }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(100deg) scale(.4); }
}

.prep-scene {
  position: absolute;
  inset: 0;
  z-index: 5;
  isolation: isolate;
  background: repeating-conic-gradient(#f6d6bd 0 25%, #fff1dc 0 50%) 50% / 44px 44px;
  box-shadow: inset 0 0 100px #a9563055;
}
.counter-controls { display: contents; }

.prep-scene header {
  position: absolute;
  top: 4%;
  left: 5%;
  right: 5%;
  display: flex;
  align-items: center;
  gap: 10px;
}
.prep-scene h2 {
  margin: 0;
  padding: .3em .85em;
  border: 2px solid #ad7240;
  border-radius: 100px;
  background: #fff3d9;
  font-size: 5.6cqw;
}
main .prep-scene header button, main .prep-flip {
  position: static;
  padding: .35em .7em;
  border: 2px solid #ad7240;
  border-radius: 100px;
  background: #fff3d9;
  box-shadow: 0 2px #925a31;
}
main .prep-scene header button { font-size: 6cqw; line-height: 1; }
.prep-dish {
  position: absolute;
  left: 5%;
  top: 14%;
  width: 90%;
  height: 51%;
  object-fit: contain;
  filter: drop-shadow(0 5px 6px #74452955);
}
.prep-slice {
  position: absolute;
  left: 50%;
  top: 39.5%;
  width: min(66%, calc(var(--play-height) * .44));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.prep-slice img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
main .prep-flip {
  position: absolute;
  top: 64%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.prep-instruction {
  position: absolute;
  top: 70%;
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 3.65cqw;
}
.prep-labels {
  position: absolute;
  top: 87%;
  left: 3%;
  width: 94%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: center;
  font-size: 3.4cqw;
}
.prep-labels span { text-shadow: 0 1px #fff7e4; }
.trace-line, path.spread {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.trace-line { stroke: #fff8dbbd; stroke-width: 3.6; }
.spread-1 { stroke: #ffe17c; stroke-width: 8; opacity: .78; }
.spread-2 { stroke: #fff4c2; stroke-width: 5; }
.spread-3 { fill: #fffcf1; stroke: #fff8e8; stroke-width: .3; }
.spread-4 { fill: #713c24; stroke: #a25f38; stroke-width: .4; }
.spread-5 { stroke: #b83331; stroke-width: 15; opacity: .9; }
.prep-trace path.spread-3, .prep-trace path.spread-4 { stroke-width: 3; }

@media (prefers-reduced-motion: reduce) {
  .prep-scene, .grill-fire i { animation: none; }
}

.tray-art {
  position: absolute;
  left: 3%;
  width: 94%;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.tray-art img { width: 100%; max-height: 100%; object-fit: contain; }
main .active-well::after {
  content: '';
  position: absolute;
  left: 17%;
  right: 17%;
  bottom: 3%;
  height: 4px;
  border-radius: 100px;
  background: #e89b35;
  box-shadow: 0 0 0 1px #fff2bf;
}
main .tray-well:disabled { cursor: default; }
main .tray-well .tray-status {
  position: absolute;
  top: 4%;
  right: 7%;
  width: clamp(21px, 6cqw, 35px);
  aspect-ratio: 1;
  object-fit: contain;
  pointer-events: none;
}
.prep-labels .unavailable { opacity: .55; }
.prep-clock {
  margin-left: auto;
  padding: .35em .65em;
  border-radius: 100px;
  background: #fff3d9;
  border: 1px solid #ad7240;
  font-size: 4.2cqw;
}
main .grill-power { border-radius: 50%; }

.trace-line { filter: drop-shadow(0 1px 1px #774c28a0); }

.landing .screen-actions button {
  width: 59%;
  padding-left: 16%;
  font-size: clamp(18px, 5.6cqw, 28px);
  white-space: nowrap;
}
.landing .screen-actions button:first-child {
  width: 68%;
  padding-inline: 0;
  font-size: clamp(30px, 8.5cqw, 47px);
}
.landing .screen-actions button:focus:not(:focus-visible),
.landing .screen-actions button:first-child:focus-visible {
  outline: none;
}
.landing .screen-actions button:first-child:focus-visible {
  filter: drop-shadow(0 0 4px #fff4b9);
}
.landing .screen-title {
  align-items: center;
  padding: min(11dvh, 27cqw) 12px 0;
  text-align: center;
}

main .heat-meter {
  bottom: -4.5%;
  height: 12%;
  min-height: 0;
  width: 70%;
  left: 19%;
  border: 1px solid #694324;
  box-shadow: 0 0 0 2px #fff3d3;
  pointer-events: none;
}
main [data-id="slot1"] .heat-meter { left: 6%; }
main .heat-meter i {
  top: -3px;
  width: 4px;
  height: calc(100% + 6px);
  transform: translateX(-50%);
}
main .grill-power {
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  box-shadow: none;
}
main .grill-power span {
  display: grid;
  place-items: center;
  width: 69%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #5d4624;
  background: radial-gradient(circle at 39% 29%, #b9a077 3%, #827054 62%, #665033 100%);
  box-shadow: inset 0 1px 1px #fff6bd88, inset 0 -2px 2px #4b382c70,
    0 0 0 1px #d4b86e, 0 2px 2px #412e1cb0;
  color: #fff3ca;
}
main .grill-power svg {
  width: 60%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
main .grill-power.powered { background: none; }
main .grill-power.powered span {
  background: radial-gradient(circle at 39% 29%, #edf5ad 3%, #acc466 62%, #7a9546 100%);
  color: #324921;
}

.counter-controls {
  position: absolute;
  inset: 0;
  display: block;
  background: #edc998 url(art/shop-workspace.webp) center / 100% 100%;
  transform-origin: 63% 70%;
}
.counter-controls[hidden] { display: none; }
.camera-out { animation: counter-settle .25s ease-out both; }
@keyframes counter-settle {
  from { transform: scale(1.12); }
  to { transform: none; }
}
.prep-scene {
  transform-origin: 50% 39.5%;
  background:
    linear-gradient(90deg, #eab1a24d 50%, transparent 50%) 0 0 / 44px 44px,
    linear-gradient(#eab1a24d 50%, transparent 50%) 0 0 / 44px 44px,
    #fff0db;
}
.prep-entering { animation: prep-settle .28s ease-out both; }
@keyframes prep-settle {
  from { transform: scale(1.09); }
  to { transform: none; }
}
.counter-controls .tray-art {
  left: 2%;
  width: 96%;
  align-items: flex-end;
}
.counter-controls .tray-art img { filter: drop-shadow(0 2px 2px #4b2c1e88); }
.prep-scene .tray-art img { filter: drop-shadow(0 4px 3px #86574760); }
@media (prefers-reduced-motion: reduce) {
  .camera-out, .prep-entering { animation: none; }
  .grill-fire img { animation: none; }
}

.landing .screen-actions button:last-child { padding-left: 21%; }


/* Enlarge the bread above the dimmed counter during spreading. */
.prep-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #362319a6;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.prep-scene.tracing::after {
  opacity: 1;
  pointer-events: auto;
}
main .trace-cancel,
.prep-scene .trace-instruction { display: none; }
main .prep-slice .spread-tool {
  inset: auto -1% 1% auto;
  width: 43%;
  height: 43%;
  filter: drop-shadow(0 3px 3px #3c21167a);
}
main .prep-slice .spread-tool[data-ingredient="2"] {
  width: 30%;
  height: 30%;
  right: 0;
}

main:has(.topping-preview) .spread-tool { visibility: hidden; }
main .topping-preview {
  z-index: 12;
  width: 28cqw;
  height: 28cqw;
  transform: translate(-36%, -62%);
  filter: drop-shadow(0 3px 3px #3c21167a);
}
main .topping-preview[data-ingredient="2"] {
  width: min(20cqw, 13.2dvh);
  height: min(20cqw, 13.2dvh);
}

main .topping-preview img {
  height: 100%;
  object-fit: contain;
}
.trace-instruction p { margin: 0 0 .35em; }
.spread-progress {
  display: block;
  width: 58%;
  height: .8em;
  margin: auto;
  accent-color: #a8c779;
}
.tracing .prep-slice,
main .tracing .trace-cancel,
.tracing .trace-instruction { z-index: 2; }
main .tracing .trace-cancel,
.tracing .trace-instruction { display: block; }
.tracing .trace-instruction {
  color: #fff3d6;
  text-shadow: 0 1px 3px #39251c;
}
@media (prefers-reduced-motion: reduce) {
  .prep-scene::after { transition: none; }
}

.prep-scene.trace-finished::after { animation: trace-reveal .2s ease-out both; }
@keyframes trace-reveal { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .prep-scene.trace-finished::after { animation: none; }
}

main .prep-tap-flip {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}
main .prep-tap-flip .flip-hint {
  inset: 44% 4% auto auto;
  width: 35%;
  height: 38%;
}
main .tracing .prep-tap-flip { display: none; }


/* Pressing bread must not tint its generated artwork. */
main .plate:active,
main .slot:active { filter: none; }

@property --coverage {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.bread-face {
  position: relative;
  display: block;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  pointer-events: none;
}

.prep-slice .bread-face { width: 100%; }
.raw-face { --face-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='f'%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3C/filter%3E%3Cpath filter='url(%23f)' d='M 11,53 C 12,45 24,35 34,29 C 36,21 45,16 55,16 C 64,15 68,20 72,27 C 78,24 87,27 91,34 C 96,42 90,49 82,56 L 63,74 Q 59,79 51,76 L 20,65 Q 10,61 11,53 Z'/%3E%3C/svg%3E"); }
.cooked-face { --face-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='f'%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3C/filter%3E%3Cpath filter='url(%23f)' d='M 9,52 C 10,42 23,31 33,26 C 36,16 46,11 56,11 C 65,10 70,15 73,23 C 81,21 90,25 94,33 C 98,42 90,48 83,54 L 65,72 Q 60,78 51,75 L 18,64 Q 8,60 9,52 Z'/%3E%3C/svg%3E"); }

/* Keep the reveal inside the crumb, even when the finished artwork has a
   slightly different crust silhouette. The smaller mask is feathered. */
.bread-face .face-topping {
  --face-size: 94% 94%;
  --face-position: 50% 53%;
  position: absolute;
  inset: 0;
  mask-image: var(--face-mask), var(--bread-silhouette);
  mask-composite: intersect;
  mask-size: var(--face-size), 100% 100%;
  mask-position: var(--face-position), center;
  mask-repeat: no-repeat;
}

.bread-face .face-topping[data-ingredient="2"] {
  --face-size: 100% 100%;
  --face-position: center;
  --face-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='f'%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3C/filter%3E%3Cpath filter='url(%23f)' d='M 10,53 C 12,42 24,30 34,24 C 37,13 47,9 57,10 C 66,9 72,15 74,23 C 83,22 92,28 94,37 C 96,46 89,52 82,60 L 63,81 Q 59,85 52,81 L 20,65 Q 9,61 10,53 Z'/%3E%3C/svg%3E");
  --reveal-feather: 4%;
}

.bread-face .face-topping[data-ingredient="3"] {
  --face-size: 87% 88%;
  --face-position: 50% 53%;
}

.bread-face .face-topping[data-ingredient="4"] {
  --face-size: 98% 99%;
  --face-position: 50% 50%;
}

.bread-face .face-topping[data-ingredient="5"] {
  --face-size: 88% 86%;
  --face-position: 50% 58%;
}

.bread-face .spread-result {
  mask-image: var(--face-mask), var(--bread-silhouette), linear-gradient(to bottom, #000 0,
    #000 max(0%, calc(var(--coverage) - var(--reveal-feather, 15%))), transparent var(--coverage));
  mask-size: var(--face-size), 100% 100%, 100% 100%;
  mask-position: var(--face-position), center, center;
  transition: --coverage 160ms ease-out;
}

.prep-slice .spread-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.spread-particle {
  position: absolute;
  width: clamp(12px, 5%, 27px);
  aspect-ratio: 1;
  border-radius: 48%;
  background: var(--particle-art) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px #49230d88);
  animation: spread-fall 670ms ease-out both;
}

.spread-particle.ingredient-1 { --particle-art: url(art/topping-particles/1.webp); }
.spread-particle.ingredient-2 { --particle-art: url(art/topping-particles/2.webp); }
.spread-particle.ingredient-3 { --particle-art: url(art/topping-particles/3.webp); }
.spread-particle.ingredient-4 { --particle-art: url(art/topping-particles/4.webp); }
.spread-particle.ingredient-5 { --particle-art: url(art/topping-particles/5.webp); }

@keyframes spread-fall {
  from { transform: translate(-50%, -145%) scale(.8); opacity: 0; }
  16%, 46% { opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) scale(.55); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .prep-slice .spread-result { transition: none; }
}


main [data-id="trash"].trash-bin {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  z-index: 7;
  transform: translateX(-10%);
}

main [data-id="trash"].trash-bin img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.counter-controls .tray-art {
  display: flex;
  align-items: flex-end;
}

.customer-counter {
  position: absolute;
  left: 0;
  top: 35.8%;
  width: 100%;
  height: 3%;
  background: #b97537 url(art/shop-workspace.webp) center 42% / 100% 1300%;
  border-top: 3px solid #ffe1a0;
  border-bottom: 3px solid #9b5527;
  box-shadow: 0 -2px 0 #b8783d, 0 3px 4px #60301340;
  pointer-events: none;
}

.trace-controls { display: none; }

.tracing .trace-controls {
  position: absolute;
  top: calc(39.5% + min(33cqw, calc(var(--play-height) * .22)) + .6dvh);
  left: 8%;
  width: 84%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7dvh;
  z-index: 3;
}

main .tracing .trace-cancel,
main .tracing .trace-instruction {
  position: static;
  transform: none;
  margin: 0;
}

main .tracing .trace-instruction { width: 100%; }
.tracing .trace-instruction p { margin-bottom: .25em; }

.tracing > .prep-instruction:not(.trace-instruction) {
  display: none;
}


main .drag-preview {
  z-index: 20;
}

main [data-id="trash"].trash-bin {
  transition: filter .15s ease-out;
}

main.trash-hover [data-id="trash"].trash-bin {
  filter: brightness(1.13) drop-shadow(0 0 7px #ffe79a);
}

main .slot .sides {
  top: calc(104.5% + 1.3cqw);
  bottom: auto;
  gap: 1cqw;
  padding: .3cqw .8cqw;
  line-height: 1;
}

main .slot .side-dot {
  width: clamp(6px, 2cqw, 11px);
  height: clamp(6px, 2cqw, 11px);
  border-width: 1px;
}

main .slot .side-dot.current {
  outline-width: 1px;
  outline-offset: 1px;
}

main .grill-power span {
  background: radial-gradient(circle at 35% 25%, #efac91, #c85948 65%, #88362c);
  color: #fff8ed;
  border-color: #783a2a;
}

main .grill-power.powered span {
  background: radial-gradient(circle at 35% 25%, #c6f2aa, #59a34c 65%, #326b36);
  color: #fffdf0;
  border-color: #345e2e;
}

.online-ranking { font-size: clamp(13px, 3.5cqw, 19px); }
.ranking-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: left;
}
.ranking-table th {
  padding: .65em .2em;
  border-bottom: 2px solid #b78a59;
  font-size: .85em;
}
.ranking-table th:first-child { width: 16%; text-align: center; }
.ranking-table th:last-child { width: 25%; text-align: right; }
.ranking-table td { padding: .7em .2em; border-bottom: 1px solid #be916255; }
.ranking-table td:first-child { text-align: center; position: relative; }
.ranking-table td:last-child { text-align: right; overflow-wrap: anywhere; }
.ranking-profile { display: flex; align-items: center; gap: .4em; min-width: 0; }
.ranking-profile img { width: 2.2em; height: 2.2em; object-fit: contain; border-radius: 50%; flex: none; }
.ranking-place { display: inline-block; font-size: .85em; }
.ranking-medal { width: 1.9em; height: 1.9em; object-fit: contain; display: block; margin: 0 auto .1em; }
.ranking-identity { min-width: 0; display: flex; flex-direction: column; text-align: left; overflow-wrap: anywhere; }
.ranking-identity small { font-size: .72em; opacity: .75; }
.ranking-player b { font-size: .9em; }
.ranking-empty { text-align: center; padding: 1.5em .4em; }
.score-receipt { text-align: center; min-height: 2em; font-size: clamp(12px, 3.3cqw, 18px); }
.score-receipt button, .online-ranking button { position: static; padding: .5em .8em; border: 1px solid #aa7647; border-radius: 1em; background: #f6e6bd; }

.ranking-profile .ranking-identity .ranking-badge {
  width: 1.5em;
  height: 1.5em;
  border-radius: 0;
}

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --play-height: calc(100svh - var(--safe-top) - var(--safe-bottom));
}

body {
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  min-height: 100svh;
  height: auto;
  overflow-x: hidden;
  overscroll-behavior: none;
}

main {
  width: 100%;
  max-width: min(560px, calc(100vw - var(--safe-left) - var(--safe-right)));
  height: var(--play-height);
}

dialog {
  max-width: calc(100vw - var(--safe-left) - var(--safe-right) - 20px);
  max-height: calc(var(--play-height) - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

dialog.landing {
  top: var(--safe-top);
  bottom: auto;
  width: min(560px, calc(100vw - var(--safe-left) - var(--safe-right)));
  height: var(--play-height);
  max-height: var(--play-height);
  padding-bottom: 20px;
}

.asset-status {
  position: absolute;
  top: 66%;
  left: 8%;
  width: 84%;
  margin: 0;
  text-align: center;
  font-size: 3.7cqw;
  z-index: 8;
  background: #fff1d8;
  padding: .5em;
  border-radius: 1em;
}

@media (orientation: landscape) and (max-height: 550px) {
  main, dialog.landing {
    max-width: min(560px, calc(var(--play-height) * .6));
  }
}

@supports not (height: 100svh) {
  :root {
    --play-height: calc(100vh - var(--safe-top) - var(--safe-bottom));
  }

  body { min-height: 100vh; }
}