:root {
  color-scheme: light;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --cream: #fff8d9;
  --brown: #6d351d;
  --brown-dark: #422113;
  --green: #69d83f;
  --green-dark: #2ea93a;
  --coral: #ff764c;
  --aqua: #7fe4ea;
}

* { box-sizing: border-box; }

html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; }

body {
  background:
    radial-gradient(circle at 20% 10%, rgba(254, 213, 106, .2), transparent 28%),
    radial-gradient(circle at 82% 90%, rgba(71, 213, 151, .18), transparent 30%),
    #123936;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

button { font: inherit; -webkit-tap-highlight-color: transparent; }

.page-shell {
  width: 100vw;
  height: 100dvh;
  display: grid;
  place-items: center;
}

.game {
  position: relative;
  width: min(100vw, calc(100dvh * .4497));
  height: min(100dvh, calc(100vw / .4497));
  overflow: hidden;
  isolation: isolate;
  background: #f4bd77;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 24px 80px rgba(0,0,0,.48);
}

.scene {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url("assets/kitchen-bg.png") center / 100% 100% no-repeat;
}

.hud {
  position: absolute;
  z-index: 20;
  top: max(1.4%, env(safe-area-inset-top));
  left: 10.2%;
  width: 80%;
  height: 6.5%;
  padding: 1.1% 2.2%;
  display: flex;
  align-items: center;
  gap: 2%;
  color: var(--brown-dark);
  background: linear-gradient(#fffdec, #ffeebd);
  border: max(2px, .32vw) solid #f6c677;
  border-radius: 999px;
  box-shadow: 0 .55vh 0 #b97838, 0 .8vh 1.5vh rgba(86,44,16,.22), inset 0 2px 0 white;
}

.customer-count { width: 16%; display: flex; align-items: center; gap: 8%; font-size: clamp(12px, 3.7vw, 18px); }
.mini-avatar { width: 48%; aspect-ratio: 1; border-radius: 50%; background: #69a8e8; border: 2px solid white; position: relative; overflow: hidden; box-shadow: 0 0 0 2px #c58842; }
.mini-avatar::before { content: ""; position: absolute; width: 60%; height: 60%; border-radius: 45% 45% 40% 40%; background: #263b58; left: 20%; top: 25%; box-shadow: 0 -.15em 0 #fff; }
.goal-wrap { position: relative; flex: 1; min-width: 0; }
.level-line { display: flex; justify-content: space-between; align-items: center; font-size: clamp(7px, 2.1vw, 11px); font-weight: 800; line-height: 1; padding: 0 4%; color: #995a2d; }
.goal-track { position: relative; height: 2.6vh; min-height: 16px; margin-top: .35vh; overflow: hidden; border-radius: 999px; background: #7d301c; box-shadow: inset 0 2px 4px rgba(48,18,8,.45), 0 1px 0 white; }
.goal-fill { position: absolute; inset: 3px auto 3px 3px; width: 0%; border-radius: inherit; background: linear-gradient(90deg, #57d536, #a8ec42); box-shadow: inset 0 2px 0 rgba(255,255,255,.45); transition: width .35s cubic-bezier(.2,.8,.2,1); }
.goal-track b { position: absolute; inset: 0; display: grid; place-items: center; color: white; font-size: clamp(9px, 2.7vw, 14px); text-shadow: 0 1px 2px #59210c; letter-spacing: .03em; }
.coin-mini { position: absolute; left: 2%; top: 50%; translate: 0 -50%; width: 1.7vh; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff5a2 0 10%, #ffc925 13% 55%, #d98b05 58% 72%, #fff074 76%); border: 1px solid #a95e09; z-index: 2; }
.star-track { position: absolute; top: calc(100% + .15vh); right: 4%; display: flex; gap: 1.6vw; }
.star-track i { width: .9vh; height: .9vh; border-radius: 50%; background: #b7bfcc; box-shadow: 0 0 0 1px white; }
.round-control { width: 11%; aspect-ratio: 1; padding: 0; border-radius: 50%; border: 2px solid #fff; color: #fff; background: #72b4a9; box-shadow: 0 .35vh 0 #347268, inset 0 2px 0 rgba(255,255,255,.5); font-weight: 900; font-size: clamp(10px, 3vw, 16px); }
.round-control:active { translate: 0 .25vh; box-shadow: 0 .1vh 0 #347268; }

.customer-lane { position: absolute; z-index: 8; left: 2%; right: 2%; top: 12.3%; height: 23%; display: flex; justify-content: center; align-items: end; gap: 1.5%; pointer-events: none; }
.customer { position: relative; width: 31.5%; height: 100%; display: flex; align-items: flex-end; animation: customerIn .45s cubic-bezier(.2,.9,.25,1.2) both; }
.customer.leaving { animation: customerOut .45s ease-in both; }
.customer-sprite { background-image: url("assets/customers.png"); background-repeat: no-repeat; background-size: 200% 200%; }
.customer-0 { background-position: 0 0; }
.customer-1 { background-position: 100% 0; }
.customer-2 { background-position: 0 100%; }
.customer-3 { background-position: 100% 100%; }
.customer .customer-sprite { position: absolute; left: 0; right: 0; bottom: 0; height: 76%; background-size: 200% 200%; }
.order-card { position: absolute; z-index: 2; left: 2%; right: 2%; bottom: -1%; height: 38%; padding: 4% 7% 6%; display: flex; align-items: center; justify-content: center; background: linear-gradient(#fffefa, #fff4ce); border: 2px solid #a96737; border-radius: 14% 14% 12% 12%; box-shadow: 0 .4vh .8vh rgba(66,34,17,.25), inset 0 2px 0 white; }
.order-card::before { content: ""; position: absolute; left: 18%; top: -12%; width: 14%; aspect-ratio: 1; rotate: 45deg; background: #fffefa; border-left: 2px solid #a96737; border-top: 2px solid #a96737; }
.order-card .food-sprite { width: 62%; }
.patience { position: absolute; left: 7%; right: 7%; height: 11%; bottom: 6%; border-radius: 99px; background: #923527; border: 1px solid white; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.patience i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(#89ef58, #35c83c); transition: width .1s linear; }
.customer.urgent .order-card { animation: urgent .55s ease-in-out infinite alternate; }

.recipe-rack { position: absolute; z-index: 4; left: 32%; top: 35.3%; width: 64%; height: 11.8%; display: flex; align-items: center; justify-content: center; gap: 2%; pointer-events: none; }
.rack-card { width: 23%; aspect-ratio: 1.35; padding: 2%; border-radius: 12%; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 .3vh .6vh rgba(33,124,147,.18); opacity: .92; display: grid; place-items: center; }
.rack-card .food-sprite { width: 88%; }
.rack-card.locked { filter: grayscale(1); opacity: .3; }

.station { position: absolute; z-index: 10; border: 0; padding: 0; background: transparent; cursor: pointer; touch-action: manipulation; }
.station:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.station.hint::after { content: ""; position: absolute; inset: -5%; border: .55vh solid rgba(102,255,75,.92); border-radius: 50%; box-shadow: 0 0 0 .35vh rgba(255,255,255,.7), 0 0 2.4vh #61ff4a; animation: hintPulse 1s ease-in-out infinite; pointer-events: none; }

.discard-station { left: 3.2%; top: 37%; width: 25%; height: 9%; border-radius: 50%; }
.discard-mark { position: absolute; width: 47%; aspect-ratio: 1; left: 26%; top: 14%; border-radius: 50%; background: linear-gradient(#ff735d,#d5322a); border: .4vh solid #fff7d2; box-shadow: 0 .35vh 0 #852e1e, inset 0 .25vh 0 rgba(255,255,255,.45); }
.discard-mark::before { content: ""; position: absolute; left: 27%; top: 24%; width: 46%; height: 13%; border-radius: 99px; background: white; rotate: 45deg; }
.discard-mark::after { content: ""; position: absolute; left: 27%; top: 24%; width: 46%; height: 13%; border-radius: 99px; background: white; rotate: -45deg; }

.plate { top: 54.2%; width: 18%; height: 10.5%; border-radius: 50%; }
.plate-0 { left: 4.5%; }
.plate-1 { left: 23.2%; }
.plate .food-sprite { position: absolute; inset: -13%; width: 126%; height: 126%; filter: drop-shadow(0 .35vh .3vh rgba(83,43,12,.25)); animation: plateIn .25s cubic-bezier(.2,.8,.2,1.3) both; }
.plate.selected::after { content: ""; position: absolute; inset: -8%; border: .5vh solid #57ed43; border-radius: 50%; box-shadow: 0 0 1.5vh #b8ff87; }

.pan { top: 54%; width: 20.5%; height: 11.4%; border-radius: 50%; }
.pan-0 { left: 49.1%; }
.pan-1 { left: 71.1%; }
.pan-food { position: absolute; inset: 8%; background-image: url("assets/food-sprites.png"); background-repeat: no-repeat; background-size: 300% 300%; opacity: 0; filter: drop-shadow(0 .25vh .3vh rgba(83,35,4,.25)); }
.pan.raw .pan-food { opacity: 1; background-position: 0 0; animation: batterDrop .3s ease-out both; }
.pan.cooked .pan-food { opacity: 1; background-position: 50% 0; animation: readyPop .4s ease-out both; }
.pan.burnt .pan-food { opacity: 1; background-position: 100% 0; animation: burntShake .25s linear 2; }
.cook-ring { position: absolute; right: -8%; top: -15%; width: 31%; aspect-ratio: 1; display: none; border-radius: 50%; padding: 8%; background: conic-gradient(#55dc39 var(--cook, 0%), #4d6b5f 0); border: .3vh solid white; box-shadow: 0 .25vh .4vh rgba(43,46,24,.3); }
.cook-ring::after { content: ""; position: absolute; inset: 23%; border-radius: 50%; background: #eeffd6; }
.pan.raw .cook-ring, .pan.cooked .cook-ring, .pan.burnt .cook-ring { display: block; }
.pan.cooked .cook-ring { background: #55dc39; animation: readyPulse .55s ease-in-out infinite alternate; }
.pan.burnt .cook-ring { background: #ff4c2f; }
.steam { position: absolute; left: 0; top: -60%; width: 100%; opacity: 0; pointer-events: none; }
.pan.raw .steam, .pan.cooked .steam { opacity: .62; animation: steamFloat 1.2s ease-in-out infinite; }

.ingredient { top: 69.2%; width: 23.5%; height: 10.4%; border-radius: 10%; }
.sesame-bin { left: 1%; }
.cream-bin { left: 24.4%; }
.bin-fill { position: absolute; inset: 9% 8% 18%; border-radius: 9%; border: .35vh solid rgba(255,255,255,.7); box-shadow: inset 0 .6vh 1vh rgba(0,0,0,.3), 0 .25vh .4vh rgba(60,38,20,.2); }
.sesame-fill { background: radial-gradient(circle at 35% 30%, #6d665f 0 2%, transparent 3%), radial-gradient(circle at 65% 55%, #746a5f 0 2%, transparent 3%), linear-gradient(145deg,#191716,#352d28); background-size: 15% 15%, 18% 18%, auto; }
.cream-fill { background: radial-gradient(ellipse at 50% 42%, #fffef2 0 22%, #f1ead7 24% 44%, #fffdfa 46% 63%, #d9ccb5 66%); }
.ingredient-label, .batter-label { position: absolute; left: 10%; right: 10%; bottom: -9%; padding: 2% 3%; border-radius: 999px; color: white; background: #7c492e; font-size: clamp(7px, 1.9vw, 10px); font-weight: 800; line-height: 1.45; text-shadow: 0 1px 1px #48200e; box-shadow: 0 .2vh .35vh rgba(53,29,14,.25); }
.ingredient.locked { filter: grayscale(.8); opacity: .68; }
.mini-lock { position: absolute; inset: 28%; border-radius: 30%; background: rgba(50,54,54,.78); }
.mini-lock::before { content: ""; position: absolute; left: 25%; top: -35%; width: 50%; height: 55%; border: .55vh solid white; border-bottom: 0; border-radius: 50% 50% 0 0; }
.mini-lock::after { content: ""; position: absolute; left: 45%; top: 35%; width: 10%; height: 28%; border-radius: 99px; background: white; }
.cream-bin:not(.locked) .mini-lock { display: none; }

.batter-station { left: 63%; top: 69%; width: 29%; height: 11.5%; border-radius: 18%; }
.batter-glow { position: absolute; inset: 8%; border-radius: 18%; background: radial-gradient(circle, rgba(255,255,255,.33), transparent 60%); opacity: 0; }
.batter-station:active .batter-glow { opacity: 1; }
.batter-label { left: 28%; right: 28%; }

.upgrade-row { position: absolute; z-index: 3; left: 11%; right: 12%; bottom: 2.5%; display: flex; justify-content: space-between; color: rgba(45,126,48,.7); font-size: clamp(6px, 1.6vw, 8px); font-weight: 900; pointer-events: none; }

.food-sprite { display: block; aspect-ratio: 1; background-image: url("assets/food-sprites.png"); background-repeat: no-repeat; background-size: 300% 300%; }
.food-sprite.raw { background-position: 0 0; }
.food-sprite.cooked { background-position: 50% 0; }
.food-sprite.burnt { background-position: 100% 0; }
.food-sprite.plain { background-position: 0 50%; }
.food-sprite.sesame { background-position: 50% 50%; }
.food-sprite.cream { background-position: 100% 50%; }
.food-sprite.deluxe { background-position: 0 100%; }
.food-sprite.coin { background-position: 50% 100%; }
.food-sprite.steam-sprite { background-position: 100% 100%; }

.tutorial { position: absolute; z-index: 25; left: 15%; right: 15%; bottom: 10.8%; min-height: 4.7%; padding: 2.5% 5% 2.5% 13%; display: flex; align-items: center; border-radius: 999px; color: #694122; background: linear-gradient(90deg, #fff9dd, #fffef5); border: .3vh solid #f2bd69; box-shadow: 0 .45vh 1vh rgba(86,44,16,.24), inset 0 2px 0 white; transition: opacity .25s, transform .25s; }
.tutorial p { margin: 0; font-size: clamp(9px, 2.5vw, 13px); font-weight: 800; line-height: 1.25; }
.chef-dot { position: absolute; left: 2%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(145deg,#fff,#e9f4ff); border: .3vh solid #62bcdf; }
.chef-dot::before { content: ""; position: absolute; left: 25%; top: 28%; width: 50%; height: 48%; border-radius: 48% 48% 42% 42%; background: #303743; box-shadow: 0 -.5vh 0 .25vh white; }
.tutorial.hidden { opacity: 0; transform: translateY(1vh); pointer-events: none; }

.toast { position: absolute; z-index: 50; left: 50%; top: 47%; translate: -50% 0; max-width: 74%; padding: 2.1% 4.5%; border-radius: 999px; color: white; background: rgba(69,37,22,.9); box-shadow: 0 .5vh 1.2vh rgba(0,0,0,.25); font-size: clamp(9px, 2.4vw, 13px); font-weight: 800; opacity: 0; transform: translateY(.8vh); transition: opacity .18s, transform .18s; pointer-events: none; text-align: center; }
.toast.show { opacity: 1; transform: translateY(0); }
.coin-layer { position: absolute; inset: 0; z-index: 45; pointer-events: none; }
.flying-coin { position: absolute; width: 9%; aspect-ratio: 1; animation: coinFly .75s cubic-bezier(.2,.75,.15,1) forwards; filter: drop-shadow(0 .3vh .3vh rgba(114,65,0,.32)); }

.overlay { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; padding: 8%; background: rgba(24,25,23,.64); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.overlay.active { opacity: 1; visibility: visible; }
.start-overlay { background: linear-gradient(rgba(19,73,70,.15), rgba(8,48,45,.72)); }
.brand-card, .modal-card, .coach-card { width: 92%; color: var(--brown-dark); background: linear-gradient(145deg,#fffef4,#ffe3a8); border: .55vh solid #fff8ce; border-radius: 7%; box-shadow: 0 1.4vh 0 #ba6834, 0 2vh 4vh rgba(43,25,13,.38), inset 0 0 0 .35vh #ecac54; text-align: center; }
.brand-card { padding: 9% 8% 8%; }
.eyebrow, .modal-kicker { display: block; margin: 0 0 1.4%; color: #c05831; font-size: clamp(9px, 2.4vw, 12px); font-weight: 900; letter-spacing: .16em; }
.brand-card h1 { margin: 0; color: #fff7d9; font-size: clamp(26px, 7.7vw, 39px); line-height: 1.08; letter-spacing: -.04em; white-space: nowrap; -webkit-text-stroke: clamp(1.5px,.45vw,2.5px) #6d321a; text-shadow: 0 .4vh 0 #ed7d35, 0 .8vh 0 #ad4226, 0 1.1vh 1.2vh rgba(78,30,14,.3); }
.brand-card p:not(.eyebrow) { margin: 2% 0 6%; color: #945733; font-weight: 800; }
.title-food { width: 38%; margin: 2% auto -1%; filter: drop-shadow(0 .7vh .6vh rgba(119,63,12,.24)); animation: titleBob 1.8s ease-in-out infinite; }
.brand-card small { display: block; margin-top: 4%; color: #a36c48; }
.primary-btn, .secondary-btn, .text-btn { width: 76%; min-height: 5.4vh; border: 0; border-radius: 999px; font-weight: 900; }
.primary-btn { color: #fff; background: linear-gradient(#8bec54,#42be35); border: .35vh solid #fffde1; box-shadow: 0 .65vh 0 #208b32, 0 .9vh 1.3vh rgba(47,82,25,.2), inset 0 .25vh 0 rgba(255,255,255,.5); text-shadow: 0 .2vh .2vh #28762d; font-size: clamp(14px, 4vw, 20px); }
.primary-btn:active { translate: 0 .45vh; box-shadow: 0 .2vh 0 #208b32; }
.secondary-btn { margin-top: 4%; color: #8a512f; background: #fff4d2; border: .3vh solid #d89a54; box-shadow: 0 .4vh 0 #b97539; }
.text-btn { margin-top: 4%; min-height: 3vh; color: #956247; background: transparent; }
.modal-card { padding: 10% 7%; }
.modal-card.compact h2, .result-card h2 { margin: 1% 0 7%; font-size: clamp(24px, 7vw, 36px); color: #9b472d; text-shadow: 0 2px 0 white; }
.pause-overlay { z-index: 92; }
.recipe-overlay { z-index: 88; }
.coach-card { width: 100%; padding: 5%; display: flex; align-items: flex-end; text-align: left; }
.coach-sprite { width: 42%; aspect-ratio: .82; flex: 0 0 auto; background-size: 200% 200%; filter: drop-shadow(0 .7vh .6vh rgba(80,40,12,.18)); }
.coach-copy { width: 58%; padding: 3% 3% 5% 0; }
.coach-copy h2 { margin: 2% 0; color: #b4512b; font-size: clamp(20px, 5.8vw, 30px); }
.coach-copy p { margin: 0 0 5%; color: #784b32; font-size: clamp(9px, 2.5vw, 13px); line-height: 1.5; }
.coach-copy .primary-btn { width: 100%; }
.recipe-flow { display: flex; align-items: center; justify-content: center; gap: 2%; margin-bottom: 7%; }
.recipe-flow .food-sprite { width: 28%; }
.recipe-flow b { color: #b86a3c; }
.cream-dab { width: 14%; aspect-ratio: 1; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 40% 25%,#fff,#eee2c8 72%); box-shadow: 0 .25vh .2vh rgba(89,54,24,.25); }

.result-overlay { z-index: 90; background: rgba(36,28,20,.72); }
.result-card { position: relative; overflow: hidden; }
.result-card h2 { color: #ff7138; font-size: clamp(31px, 9vw, 48px); -webkit-text-stroke: 1px #9e351d; text-shadow: 0 .35vh 0 #fff1ad, 0 .7vh 0 #c44827; }
.result-burst { position: absolute; inset: -45%; z-index: -1; background: repeating-conic-gradient(from 0deg, rgba(255,221,82,.46) 0 7deg, transparent 7deg 16deg); animation: burstSpin 14s linear infinite; }
.result-stars { display: flex; justify-content: center; gap: 5%; margin: 3% 0 7%; }
.result-stars i { color: #d7d2c4; font-style: normal; font-size: clamp(34px, 10vw, 52px); -webkit-text-stroke: 1px #a66a24; transform: scale(.8) rotate(-6deg); filter: drop-shadow(0 .5vh 0 #9b5c25); transition: color .3s, transform .3s; }
.result-stars i.earned { color: #ffd640; transform: scale(1) rotate(0); }
.result-stats { display: flex; justify-content: center; gap: 7%; margin: 2% 0 8%; }
.result-stats span { min-width: 36%; padding: 4%; border-radius: 14%; color: #875134; background: rgba(255,255,255,.58); font-size: clamp(9px,2.4vw,12px); }
.result-stats b { display: block; color: #e65f33; font-size: 1.8em; }
.result-card.failed h2 { color: #7d664f; -webkit-text-stroke: 0; text-shadow: 0 2px white; }

@keyframes customerIn { from { opacity: 0; transform: translateY(12%) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes customerOut { to { opacity: 0; transform: translateY(8%) scale(.86); } }
@keyframes urgent { to { transform: rotate(-1.5deg) translateY(-.3vh); box-shadow: 0 .4vh 1.3vh rgba(255,59,38,.5); } }
@keyframes hintPulse { 50% { transform: scale(1.08); opacity: .35; } }
@keyframes batterDrop { from { transform: scale(.35); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes readyPop { 50% { transform: scale(1.12); } }
@keyframes burntShake { 25% { transform: translateX(-3%); } 75% { transform: translateX(3%); } }
@keyframes readyPulse { to { transform: scale(1.12); box-shadow: 0 0 1.1vh #7dff4e; } }
@keyframes steamFloat { 0%,100% { transform: translateY(5%) scale(.82); opacity: .18; } 50% { transform: translateY(-12%) scale(1); opacity: .58; } }
@keyframes plateIn { from { opacity: 0; transform: scale(.65) rotate(-8deg); } }
@keyframes titleBob { 50% { transform: translateY(-.8vh) rotate(1deg); } }
@keyframes burstSpin { to { rotate: 360deg; } }
@keyframes coinFly { 0% { transform: translate(0,0) scale(.55) rotate(0); opacity: 0; } 18% { opacity: 1; transform: translate(0,-2vh) scale(1.1) rotate(80deg); } 100% { left: 49%; top: 4%; transform: scale(.35) rotate(420deg); opacity: 0; } }

@media (min-aspect-ratio: 7/10) {
  .game { border-radius: 2.6vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}