:root{font-family:Trebuchet MS,Arial,sans-serif;color:#fff;--cream:#fff5df;--brown:#52200d;--orange:#ff971c;--green:#54c84f}*{box-sizing:border-box}html,body{margin:0;height:100%;width:100%;overflow:hidden;background:#24150e;touch-action:manipulation}body{display:grid;place-items:center}#app{height:100dvh;width:100vw;display:grid;place-items:center;overflow:hidden;background:radial-gradient(#523016,#160f0a)}#game{position:relative;aspect-ratio:941 / 1672;height:min(100dvh,calc(100vw * 1672 / 941));width:auto;max-width:100vw;overflow:hidden;isolation:isolate;box-shadow:0 0 48px #0008;background:#cf8650}#backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none;pointer-events:none}button{-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}.hotspot{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);z-index:5}.click-zone{width:100%;height:100%;border:0;background:transparent;outline-offset:-4px}.click-zone:active{background:#fff3;filter:brightness(1.2)}.hud-overlay{position:absolute;top:2.1%;left:25%;width:52%;height:6.4%;z-index:6;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;text-shadow:0 2px 2px #381407;font-size:clamp(9px,1.5vh,17px);font-weight:900}.hud-overlay span{padding:.4em .5em;background:#49200bc9;border:2px solid #f8c573;border-radius:15px;box-shadow:0 3px 0 #8d400b}#orderPanel{position:absolute;z-index:7;left:50.9%;top:13.9%;width:25.2%;height:19.8%;background:linear-gradient(145deg,#fff,#fff7e3);border-radius:29% 26% 23% 23%;border:3px solid #ffdaa1;color:#652c13;box-shadow:0 5px 10px #5c210d6a;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:4% 1% 2%;text-align:center;transition:transform .2s}.order-title{font-size:clamp(8px,1.2vh,14px);font-weight:1000;color:#994016}.order-items{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1px;margin:9% 0 3%;font-size:clamp(16px,2.3vh,27px);line-height:1.2}.plus{font-size:60%}.order-label{font-weight:1000;font-size:clamp(8px,1.25vh,14px);line-height:1.2}.patience{height:5.5%;width:82%;border:2px solid #8a4219;background:#f6ccae;border-radius:100px;margin-top:8%;overflow:hidden}#patienceFill{width:100%;height:100%;background:linear-gradient(90deg,#45c647,#9cef32);transition:width .15s linear}#packs{position:absolute;z-index:8;left:26.5%;top:52.8%;width:48%;height:21.6%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;column-gap:4%;row-gap:3%;pointer-events:none}.pack{pointer-events:auto;position:relative;border:none;background:transparent;width:100%;height:100%;border-radius:18%;padding:2%;filter:drop-shadow(0 1px 2px #351500);outline-offset:0}.pack.locked{background:#16100a75;border:2px dashed #e2a96c88}.pack.locked:after{content:'🔒';font-size:clamp(18px,3vh,30px)}.pack:focus-visible,.click-zone:focus-visible{outline:3px solid #fafa65}.comp{position:absolute;top:10%;bottom:18%;display:grid;place-items:center;line-height:1;pointer-events:none}.comp.first{left:7%;width:43%}.comp.second{left:55%;width:38%}.food-token{font-size:clamp(18px,3.15vh,35px);filter:drop-shadow(1px 2px 1px #4b1707)}.food-token.akara{letter-spacing:-6px;display:block;max-width:100%;word-break:break-word}.pack-index{position:absolute;top:0;left:3%;font-size:clamp(9px,1.3vh,14px);color:#fffdc0;font-weight:1000;text-shadow:1px 2px 2px #281605}.pack.ready{animation:readyPulse .9s infinite alternate;box-shadow:inset 0 0 0 4px #65e74a;border-radius:18%}.pack.selected{box-shadow:inset 0 0 0 5px #ffe235;border-radius:18%}@keyframes readyPulse{from{filter:brightness(1)}to{filter:brightness(1.35)}}#cupSlots{position:absolute;z-index:7;left:5%;top:66.1%;width:17%;height:6.8%;pointer-events:none;display:flex;justify-content:space-between;align-items:center}.cup-ring{font-size:clamp(11px,1.7vh,19px);color:#fef1b6;text-shadow:1px 2px 2px #000;background:#512512b0;border:2px solid #fff7;border-radius:40%;width:30%;height:52%;display:grid;place-items:center}.cup-ring.ready{background:#59af62;color:white}.cup-ring.filling{background:#edb435;color:#2a1806;animation:readyPulse .7s infinite alternate}#fryerStatus{position:absolute;z-index:7;left:10%;top:91%;width:56%;height:2%;display:flex;align-items:center;gap:3%;pointer-events:none}#fryProgress{height:100%;width:70%;background:#542710;border:2px solid #fff0ac;border-radius:100px;overflow:hidden}#fryProgress div{height:100%;width:0;background:linear-gradient(90deg,#7eda3e,#fce438)}#fryerLabel{font-weight:1000;font-size:clamp(9px,1.3vh,14px);text-shadow:0 2px 2px #000}.overlay{position:absolute;inset:0;z-index:20;background:#130d09a9;display:grid;place-items:center;padding:6%;backdrop-filter:blur(3px)}.overlay.hidden{display:none}.modal{width:100%;max-height:82%;overflow:auto;border:4px solid #e8a344;background:linear-gradient(180deg,#fff2c8,#fff8e8);border-radius:26px;box-shadow:0 13px 0 #7d351a,0 25px 35px #180904a6;color:#48260d;padding:6%;text-align:center;font-size:clamp(13px,1.85vh,22px)}.modal h1{color:#b74707;font-size:clamp(28px,4.4vh,50px);line-height:1;margin:0 0 12px;text-shadow:2px 3px #ffd48d}.modal h2{color:#aa420f;font-size:clamp(20px,3vh,32px);margin:0 0 10px}.modal p{line-height:1.42}.modal .accent{background:#fff;border:2px dashed #db9a4a;border-radius:14px;padding:12px;margin:12px 0;font-weight:800}.modal button{display:block;width:100%;margin:10px auto;border:0;border-radius:14px;background:linear-gradient(#ffbf43,#f17713);color:#4b2406;padding:13px 8px;font-weight:1000;font-size:clamp(14px,2vh,23px);box-shadow:0 5px #ae4510;text-shadow:0 1px #ffedb2}.modal button:active{transform:translateY(3px);box-shadow:0 2px #ae4510}.modal button.secondary{background:linear-gradient(#54d6c8,#238e9b);color:#fff;text-shadow:0 2px #10636d;box-shadow:0 5px #17667c}.modal button:disabled{filter:grayscale(1);opacity:.6;cursor:default}.shop-row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:2px solid #efcca0;border-radius:12px;margin:8px 0;padding:8px;text-align:left}.shop-row small{display:block;font-size:85%;color:#765034}.shop-row button{width:auto;min-width:92px;margin:0;font-size:90%;padding:9px}.muted{color:#87674c;font-size:85%}body.reduce-motion *{animation:none!important;transition:none!important}@media (max-aspect-ratio:941/1672){#game{width:100vw;height:auto}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Independent live cooking and customer layers. */
#customerLane{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}#customerCar{position:absolute;left:-5%;top:30.8%;width:110%;height:32%;object-fit:contain;object-position:center top;will-change:transform;visibility:hidden;filter:drop-shadow(0 6px 4px #4e28134d)}#counterForeground{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;clip-path:polygon(0 44%,24.5% 44%,24.5% 53%,100% 53%,100% 100%,0 100%);z-index:3;pointer-events:none}#fryerPieces{position:absolute;left:10.5%;top:78.5%;width:57%;height:10.3%;z-index:4;pointer-events:none;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(0,1fr);gap:5% 6%;padding:1.4% 3%}#fryerPieces:empty{display:none}.akara-piece{align-self:center;justify-self:center;width:78%;height:83%;min-height:9px;max-height:45px;border-radius:46% 54% 43% 57% / 52% 42% 58% 48%;background:radial-gradient(ellipse at 30% 25%,#fff8a5 0 3%,transparent 5%),radial-gradient(ellipse at 65% 45%,#ffe18a 0 5%,transparent 7%),radial-gradient(ellipse at 40% 70%,#d99e41 0 5%,transparent 8%),radial-gradient(ellipse at 40% 25%,#ffe3a0,#dfb45d 60%,#a66b27);box-shadow:inset 0 -3px 4px #80541180,0 3px 2px #532b1580;position:relative;transition:background .4s,filter .4s}.akara-piece:after{content:"";position:absolute;inset:-10%;border:2px dotted #fff4a6;border-radius:48%;animation:sizzle .5s infinite alternate}.akara-piece.ready{background:radial-gradient(ellipse at 30% 25%,#fff7a5 0 4%,transparent 6%),radial-gradient(ellipse at 65% 45%,#ffe06a 0 5%,transparent 8%),radial-gradient(ellipse at 40% 70%,#b74f07 0 5%,transparent 8%),radial-gradient(ellipse at 40% 25%,#ffbf32,#e77905 60%,#9e3604)}.akara-piece.burnt{filter:brightness(.35);}.akara-piece.burnt:after{display:none}@keyframes sizzle{from{transform:scale(.95);opacity:.4}to{transform:scale(1.08);opacity:.9}}.modal-open .akara-piece:after{animation-play-state:paused}.milk-bottle{position:relative;display:block;margin:10% auto 0;width:88%;height:86%;border-radius:26% 26% 16% 16%;border:1px solid #e8ca8e;background:linear-gradient(90deg,#dbd6bd,#fffef3 32%,#fff9e7 67%,#cfc4a4);box-shadow:inset -3px -3px 5px #ad8f5580,2px 3px 3px #40260a70;overflow:visible}.milk-cap{position:absolute;left:12%;top:-12%;width:76%;height:18%;border:1px solid #173889;border-radius:30% 30% 15% 15%;background:repeating-linear-gradient(90deg,#175adc 0 3px,#2d77ef 3px 5px)}.milk-label{position:absolute;left:0;top:33%;width:100%;padding:12% 0;color:#1546a1;background:#fffbe2;border-block:1px solid #efc58b;font-weight:1000;font-size:clamp(7px,1.2vh,14px);text-align:center;letter-spacing:-.5px}

#cupSlots{left:10%;top:65.4%;width:10%;height:8.2%;flex-direction:column}.cup-ring{width:88%;height:29%;font-size:clamp(9px,1.3vh,15px)}.akara-piece{max-height:none;height:auto;aspect-ratio:1.5;max-height:85%}

/* Per-piece timers, transparent pap cups and payments. */
#fryerPieces{z-index:9;pointer-events:none;grid-template-rows:repeat(4,1fr);padding:.4% 3%;gap:6% 6%}.akara-piece{pointer-events:auto;border:0;padding:0;width:78%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;overflow:visible}.piece-timer{position:absolute;left:50%;top:-30%;transform:translateX(-50%);white-space:nowrap;border:1px solid #fff5c2;border-radius:20px;padding:1px 4px;color:#fff;font-size:clamp(7px,1.2vh,13px);font-weight:900;background:linear-gradient(#321906dd,#321906dd) padding-box,conic-gradient(var(--timer-color) var(--progress),#63351f 0) border-box;border:2px solid transparent;box-shadow:0 1px 2px #301305}.akara-piece.ready .piece-timer{color:#fff1a4}.akara-piece.burnt{filter:none;background:#362216}.akara-piece.burnt .piece-timer{background:#a52f1d}.akara-piece:after{pointer-events:none}
#cupSlots{z-index:10;pointer-events:none;left:10%;top:61.8%;width:11%;height:12%;gap:3%;align-items:center}.cup-ring{pointer-events:auto;position:relative;width:100%;height:31%;border:0;border-radius:0;background:transparent!important;padding:0;box-shadow:none;text-shadow:none;display:block}.cup-ring.locked{color:#fff4bb;font-size:clamp(12px,2vh,23px)}.clear-cup{position:absolute;left:14%;top:3%;width:72%;height:78%;border:1.5px solid #e4f7ff;border-radius:12% 12% 24% 24%;background:linear-gradient(100deg,#fff5,transparent 50%,#e2f6ff55);overflow:hidden;box-shadow:inset 2px 0 2px #fff8,0 2px 3px #28180480}.pap-liquid{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(90deg,#e6c46e,#fff1af 40%,#f0d286);border-top:1px solid #fff2bd;transition:height .12s linear}.milk-layer{position:absolute;top:0;left:0;right:0;height:25%;min-height:3px;background:linear-gradient(#fffefa,#f7efdf);border-bottom:1px solid #d4c19a;border-radius:50% 50% 0 0}.cup-lid{position:absolute;inset:0 0 auto;height:13%;border-radius:50%;background:#ffffff66;border:1px solid #fff9;z-index:2}.cup-indicator{position:absolute;bottom:-7%;left:-15%;width:130%;font-size:clamp(6px,1vh,11px);font-weight:900;color:#fff4c4;text-shadow:0 1px 2px #281200;background:#40200acc;border-radius:8px}.cup-ring.ready .cup-indicator{background:#21743a}.cup-ring.filling{animation:none}#tableCoins{position:absolute;z-index:12;left:38%;top:49.7%;width:27%;height:3.5%;padding:0;border:0;border-radius:14px;background:#79432344;color:#fff8bc;text-shadow:0 1px 2px #4f260e;display:flex;align-items:center;justify-content:center;gap:5%;flex-wrap:wrap;font-size:clamp(12px,2vh,22px);box-shadow:0 2px 3px #7c401b55}#tableCoins[hidden]{display:none}#tableCoins small{width:100%;font-size:clamp(6px,1vh,12px);font-weight:bold;line-height:1}.coin-stack{position:relative;width:36%;height:60%;display:block}.coin-stack i{position:absolute;left:0;bottom:0;width:60%;height:90%;border-radius:50%;border:2px solid #ffe277;background:radial-gradient(ellipse at 30% 25%,#fff8b3,#fac128 60%,#cf8307);color:#a66709;display:grid;place-items:center;font-style:normal;font-size:clamp(9px,1.5vh,18px);box-shadow:0 2px 0 #ac6311}.coin-stack i:nth-child(2){left:23%;bottom:10%}.coin-stack i:nth-child(3){left:44%;bottom:20%}#tableCoins:active{transform:scale(.96)}

#papDelivery{position:absolute;z-index:14;left:11%;top:63%;width:10%;height:5%;pointer-events:none;visibility:hidden}#papDelivery.flying{animation:deliver-pap .75s ease-in both}@keyframes deliver-pap{0%{visibility:visible;opacity:1;transform:translate(0,0) scale(1)}85%{visibility:visible;opacity:1;transform:translate(430%,-520%) scale(.8)}100%{visibility:hidden;opacity:0;transform:translate(450%,-550%) scale(.7)}}

.akara-piece.warning .piece-timer{background:#a33a13;color:#fff7b9}.akara-piece.warning:after{border-color:#ff8c39}

/* Reference-matched food art and physical basket capacity. */
#fryerPieces{left:10%;top:78.4%;width:58%;height:11.1%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:5% 1.5%;padding:.6% .8%;z-index:9}.fryer-slot{position:relative;display:block;min-width:0;min-height:0}.fryer-slot.empty:after{content:"";position:absolute;inset:12% 6%;border:1px dashed #ffe49a66;border-radius:48%;background:#ffbb2912}.fryer-slot.locked{border-radius:12%;border:1px solid #d6e8f377;background:repeating-linear-gradient(110deg,#4e6473aa 0 3px,#6b8290aa 3px 5px);box-shadow:inset 0 1px 2px #eaf8ff88;display:grid;place-items:center}.fryer-slot.locked span{font-size:clamp(8px,1.4vh,16px);opacity:.65}.akara-piece,.akara-piece.ready,.akara-piece.warning,.akara-piece.burnt{position:absolute;inset:0;width:100%;height:100%;max-height:none;max-width:none;background:none;border:0;border-radius:0;box-shadow:none;filter:none;aspect-ratio:auto;overflow:visible}.akara-art{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 1px #71320980)}.akara-piece.raw .akara-art{filter:saturate(.55) brightness(1.22) drop-shadow(0 2px 2px #71320980)}.akara-piece.burnt .akara-art{filter:brightness(.32) saturate(.5)}.akara-piece:after{inset:20% 4% 6%;border:2px dotted #ffe3a4aa;z-index:-1}.piece-timer{z-index:2;top:-4%;padding:0 3px;font-size:clamp(6px,1vh,11px);line-height:1.2;border-width:1.5px}.comp.first{left:7%;top:15%;bottom:22%;width:43%;overflow:hidden}.plated-akara{position:relative;display:block;width:100%;height:100%;letter-spacing:normal}.plated-akara .akara-art{position:absolute;width:64%;height:55%;object-fit:contain}.plated-akara .akara-art:nth-child(1){left:18%;top:0;transform:rotate(-12deg)}.plated-akara .akara-art:nth-child(2){left:-1%;top:42%;transform:rotate(9deg)}.plated-akara .akara-art:nth-child(3){left:39%;top:42%;transform:rotate(-7deg)}.plated-akara.count-1 .akara-art{left:18%;top:23%}.plated-akara.count-2 .akara-art{top:23%;width:57%;height:62%}.plated-akara.count-2 .akara-art:nth-child(1){left:0}.plated-akara.count-2 .akara-art:nth-child(2){left:43%}
/* Cup body and domed lid use the actual illustration; filling stays behind it. */
#cupSlots{left:4.3%;top:60.3%;width:16.8%;height:13%;display:block}.cup-ring{position:absolute;left:0;width:100%;height:55%;z-index:1}.cup-ring:nth-child(1){top:0;z-index:3}.cup-ring:nth-child(2){top:33%;z-index:2}.cup-ring:nth-child(3){top:66%;z-index:1}.cup-ring.locked{width:65%;left:22%;height:19%;border:1px dashed #d4e9f577;border-radius:50%;background:#15202a44!important}.cup-ring.locked:nth-child(2){top:62%}.cup-ring.locked:nth-child(3){top:88%}.cup-ring.empty .reference-cup{opacity:.5}.reference-cup{position:absolute;inset:0;display:block}.cup-shell{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:2}.cup-contents{position:absolute;left:20%;right:20%;top:34%;bottom:10%;overflow:hidden;clip-path:polygon(0 0,100% 0,87% 95%,70% 100%,30% 100%,13% 95%);border-radius:0 0 22% 22%;z-index:1}.pap-liquid{left:0;right:0;bottom:0;background:linear-gradient(90deg,#e3bb6c,#fff1bb 38%,#ebcb86 84%,#d6af66);border-radius:45% 45% 0 0 / 7% 7% 0 0}.cup-indicator{z-index:4;left:14%;bottom:0;width:72%;font-size:clamp(6px,.9vh,10px);padding:1px 0}#papDelivery{width:16%;height:7.5%;left:5%;top:60.3%}.milk-bottle{z-index:2}#orderAkara{display:flex;width:45%;height:30px}#orderAkara .akara-art{width:33%}

.cup-contents{top:50%;bottom:5%;left:14%;right:14%}.akara-piece.raw .akara-art{filter:saturate(.85) brightness(1.12) drop-shadow(0 2px 2px #71320980)}
.cup-contents{z-index:3;left:15%;right:15%;top:50%;bottom:7%}.cup-contents:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 4%,#fff8 9%,transparent 18%,transparent 78%,#fff5 87%,transparent 96%)}.cup-shell{z-index:2}.cup-contents .milk-layer{z-index:1;height:20%;min-height:3px}

/* Deep white inserts keep both food compartments clearly visible. */
.dish-liner{position:absolute;inset:11% 5% 16%;display:flex;gap:4%;pointer-events:none;filter:drop-shadow(0 2px 1px #6b171d99)}.dish-liner i{display:block;position:relative;width:48%;height:100%;border-radius:12% 12% 17% 17%;border:1px solid #fff;background:linear-gradient(105deg,#c8c6bf,#fffef8 18%,#fff 70%,#e0dfd8);box-shadow:inset 3px 3px 4px #8a8b874d,inset -2px -3px 3px #fff,inset 0 9px 7px #d6d3cb80}.dish-liner i:after{content:"";position:absolute;inset:22% 9% 9%;border-radius:10%;background:linear-gradient(#f3f1eb,#fffdf7);box-shadow:0 -1px 2px #aaa69c55}.pack .comp{z-index:2;pointer-events:none}.pack.locked .dish-liner{filter:brightness(.62)}.pack.locked:after{position:relative;z-index:3}.pack-index{z-index:4}.pack .comp.second{left:55%;width:38%;top:15%;bottom:22%;overflow:hidden}.pack-cup{position:absolute;inset:0 5%;display:block}.pack-cup .reference-cup{left:8%;width:84%;height:100%}.pack-cup .cup-shell{object-fit:fill}.side-food{display:block;width:100%;height:100%;font-size:clamp(20px,3.6vh,40px);line-height:1;display:grid;place-items:center;filter:drop-shadow(0 2px 1px #6b371c66)}
/* The physical cup silhouette is no longer stretched sideways. */
.cup-ring .reference-cup{left:13%;right:auto;width:74%;height:100%}.cup-indicator{font-size:clamp(5px,.85vh,10px);font-weight:800;bottom:-2%}.cup-ring.filling .cup-indicator{background:#704820cc}.cup-shell{filter:drop-shadow(0 2px 1px #1d263a55)}.cup-contents .pap-liquid{border-radius:45% 45% 16% 16% / 9% 9% 8% 8%;background:linear-gradient(90deg,#d8b368,#f8e3a5 22%,#fff0ba 53%,#e8c782 83%,#c7a05b)}
.pack.ready{animation:none;filter:none}.pack-cup{filter:drop-shadow(1px 2px 2px #62564088)}.pack-cup .cup-shell{filter:drop-shadow(0 0 1px #596675aa)}

/* Stable buttons preserve every touch between cooking-timer updates. */
.akara-piece[hidden],.fryer-slot span[hidden]{display:none!important}.akara-piece .akara-art,.piece-timer{pointer-events:none}.akara-piece{touch-action:manipulation}.akara-flight{position:absolute;z-index:14;width:7%;height:4.5%;object-fit:contain;pointer-events:none;transform:translate(-50%,-50%);animation:akara-to-pack .38s cubic-bezier(.2,.65,.35,1) forwards;filter:drop-shadow(0 3px 3px #3d200a77)}@keyframes akara-to-pack{from{left:var(--from-x);top:var(--from-y);opacity:1}90%{opacity:1}to{left:var(--to-x);top:var(--to-y);opacity:0}}
/* Use the existing cash/customer artwork instead of covering it with pills. */
.hud-overlay{inset:0 auto auto 0;width:100%;height:10%;display:block;font-size:clamp(11px,2.6vh,29px);color:#a3293b;text-shadow:none}.hud-overlay span{position:absolute;padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none;line-height:1;text-align:center}.hud-overlay #coinHud{left:41.8%;top:42%;width:12.5%;}.hud-overlay #servedHud{left:66.5%;top:42%;width:10.5%}.pack-index{color:#6c4730;text-shadow:0 1px #fff5c7}

/* Full meal pictures in a white speech bubble, as in the reference. */
#orderPanel{left:52.5%;top:14.2%;width:24.5%;height:20%;border:0;border-radius:24% 24% 22% 22% / 16% 16% 15% 15%;background:#fffefb;box-shadow:0 3px 5px #76351033;padding:3% 1% 2%;overflow:visible;justify-content:space-between}#orderPanel:after{content:"";position:absolute;left:29%;bottom:-8%;width:15%;height:12%;background:#fffefb;clip-path:polygon(0 0,100% 0,25% 100%)}#orderMeals{width:100%;height:88%;display:flex;flex-direction:column;justify-content:center;gap:1%;z-index:1}.meal-request{position:relative;width:100%;min-height:0;flex:1;display:grid;place-items:center}.meal-request>img{display:block;width:100%;height:100%;object-fit:contain;min-height:0;filter:drop-shadow(0 2px 2px #70380a22)}.order-milk-note{position:absolute;right:1%;bottom:2%;padding:2px 4px;border-radius:8px;background:#305db9;color:#fff;font-size:clamp(6px,.95vh,11px);font-weight:900;line-height:1}#orderPanel .patience{height:4%;width:73%;margin:2% auto 0;border-width:1px;flex-shrink:0;z-index:1}#orderPanel.single-meal #orderMeals{height:88%}
/* Baselines are centered in the artwork's white value frames. */
.hud-overlay #coinHud,.hud-overlay #servedHud{top:31%;height:40%;display:flex;align-items:center;justify-content:center;line-height:1;font-variant-numeric:tabular-nums;font-size:clamp(12px,2.65vh,30px);text-align:center;white-space:nowrap}.hud-overlay #coinHud{left:40.1%;width:12.8%}.hud-overlay #servedHud{left:63.7%;width:12%}.hud-overlay #servedHud b{font-weight:900}
/* Milk is an upright illustrated bottle with a contact shadow on the ledge. */
.milk-bottle{display:block;position:relative;margin:0;width:100%;height:100%;background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;overflow:visible}.milk-bottle img{position:relative;display:block;width:82%;height:100%;margin:auto;object-fit:contain;filter:drop-shadow(1px 2px 1px #2a28415e);pointer-events:none;z-index:1}.milk-bottle:before{content:"";position:absolute;left:15%;right:15%;bottom:1%;height:5%;border-radius:50%;background:#13243c88;filter:blur(1px)}.milk-bottle:active{transform:translateY(1px);filter:brightness(1.07)}
.milk-bottle img{width:120%;max-width:none;margin:0 -10%;object-fit:contain}

/* One bubble per customer, with separate food pictures for a complete meal. */
#orderPanel{left:38%;top:16%;width:43%;height:18%;padding:0;background:none;box-shadow:none;border:0;border-radius:0;justify-content:flex-start;gap:4%}#orderPanel:after{display:none}#orderMeals{display:flex;flex-direction:row;align-items:stretch;justify-content:space-around;gap:9%;height:91%;width:100%}.customer-request{position:relative;flex:1;min-width:0;max-width:46%;padding:8% 3% 5%;border-radius:25% / 12%;background:#fffefb;display:flex;flex-direction:column;align-items:center;justify-content:space-around;box-shadow:0 3px 5px #66351333}.customer-request:after{content:"";position:absolute;left:45%;bottom:-6%;width:18%;height:8%;background:#fffefb;clip-path:polygon(0 0,100% 0,15% 100%)}.request-item{position:relative;width:100%;height:45%;display:grid;place-items:center}.request-akara{position:relative;width:100%;height:100%;display:block}.request-akara img{position:absolute;width:66%;height:65%}.request-akara img:nth-child(1){left:17%;top:0}.request-akara img:nth-child(2){left:-3%;top:30%}.request-akara img:nth-child(3){left:37%;top:30%}.item-quantity{position:absolute;right:-5%;bottom:0;background:#bc4020;color:white;border:1px solid #fff3bc;border-radius:50%;width:1.3em;height:1.3em;font-size:clamp(10px,1.6vh,18px);line-height:1.25}.request-cup{position:relative;display:block;width:90%;height:100%}.request-side{font-size:clamp(24px,4.8vh,54px);line-height:1}.order-check{color:#51c937;font-size:clamp(28px,5vh,57px);font-weight:900;text-shadow:0 2px #2e9b1c}.request-item .order-milk-note{right:-16%;bottom:-5%;font-size:clamp(5px,.85vh,10px)}#orderPanel .patience{width:80%;height:4%;margin:2% 0 0;background:#fff8e5}#orderPanel.single-meal{left:53%;width:24%}#orderPanel.single-meal .customer-request{max-width:80%;padding:10% 6% 5%}#orderPanel.single-meal #orderMeals{height:91%}.customer-request.completed{opacity:.78}.pack .comp{pointer-events:auto;cursor:pointer}.pack .comp>*{pointer-events:none}.pack.ready{box-shadow:inset 0 0 0 2px #65e74a}.pack.selected{box-shadow:inset 0 0 0 3px #ffe235}
#quickControls{position:absolute;left:1.5%;top:2.7%;width:26%;height:4.4%;display:flex;align-items:center;gap:4%;z-index:9}#quickControls button{padding:0;position:relative;width:30.66%;height:100%;flex-shrink:0;border:2px solid #ffe0a0;border-radius:30%;background:linear-gradient(#43b5ef,#166dc3);box-shadow:0 2px 0 #693311;color:#fff;display:grid;place-items:center}#quickControls button:active{transform:translateY(2px)}#quickControls svg{position:absolute;width:72%;height:72%;fill:#fff8d8;stroke:#fff8d8;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}#quickControls .sound-waves,#quickControls .sound-slash{fill:none}.sound-slash{display:none}.muted-music .sound-slash{display:block;stroke:#b63032!important;stroke-width:3!important}.muted-music .sound-waves{display:none}#quickControls button:focus-visible{outline:3px solid #fff}

#orderPanel{left:49%;width:35%}#orderMeals{gap:7%}.customer-request{max-width:47%}#orderPanel.single-meal{left:58%;width:22%}

.side-art{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.request-side{display:block;width:100%;height:100%;padding:4%}.side-food .side-art{max-height:100%;min-height:0}

/* Leave the serving packs unobstructed; selection is held in game state. */
.pack.selected,.pack.ready{box-shadow:none!important;animation:none;outline:none}.pack:focus-visible{outline:2px solid #2587cb;outline-offset:1px}.cup-indicator{display:none!important}

/* All kitchen controls precede the earnings frame; the cross opens Pause. */
#pauseButton{background:linear-gradient(#ed7954,#bd3e34)!important}#quickControls #pauseButton svg{fill:none;stroke-width:3}


/* Deep newspaper bowls are separate interactive layers on a clear countertop. */
#packs{left:27.7%;top:53.4%;width:46.7%;height:21%;column-gap:2%;row-gap:3%}
#packs .pack{padding:0;border:0;background:transparent;border-radius:12%;filter:none;overflow:visible;isolation:isolate}
.paper-bowl,.bowl-front{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.paper-bowl{z-index:0;filter:drop-shadow(0 2px 2px #4c2c1777)}
.pack-food{position:absolute;inset:0;z-index:2;pointer-events:none;clip-path:polygon(7% 8%,93% 8%,97% 61%,90% 72%,10% 72%,3% 61%)}
.bowl-front{z-index:4;clip-path:polygon(0 52%,5% 57%,15% 59%,85% 59%,95% 57%,100% 52%,100% 100%,0 100%)}
#packs .pack .comp.first{left:10%;width:38%;top:13%;bottom:auto;height:53%;overflow:visible;pointer-events:none}
#packs .pack .comp.second{left:52%;width:37%;top:12%;bottom:auto;height:54%;overflow:visible;pointer-events:none}
#packs .plated-akara .akara-art{width:68%;height:65%;object-fit:contain;filter:drop-shadow(0 2px 1px #68371177)}
#packs .plated-akara.count-3 .akara-art:nth-child(1){left:16%;top:0;transform:rotate(-8deg);z-index:1}
#packs .plated-akara.count-3 .akara-art:nth-child(2){left:-5%;top:37%;transform:rotate(8deg);z-index:2}
#packs .plated-akara.count-3 .akara-art:nth-child(3){left:38%;top:39%;transform:rotate(-5deg);z-index:3}
#packs .plated-akara.count-1 .akara-art{left:16%;top:24%;width:68%;height:65%;transform:rotate(-8deg)}
#packs .plated-akara.count-2 .akara-art{top:25%;width:62%;height:65%}
#packs .plated-akara.count-2 .akara-art:nth-child(1){left:-5%;transform:rotate(8deg)}
#packs .plated-akara.count-2 .akara-art:nth-child(2){left:43%;transform:rotate(-5deg)}
#packs .side-food{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(1px 2px 1px #68422066)}
#packs .side-food .side-art{width:100%;height:100%;object-fit:contain;max-height:none}
#packs .side-food.bread{top:-2%;height:106%;transform:rotate(-3deg)}
#packs .side-food.eko{top:12%;height:90%;transform:rotate(4deg)}
#packs .pack .comp.second.pap{left:52%;width:37%;top:7%;height:64%}
#packs .pack-cup{inset:0 7%;filter:drop-shadow(1px 2px 1px #62564077)}
#packs .pack-cup .reference-cup{left:0;right:0;width:100%;height:100%}
#packs .pack-cup .cup-shell{object-fit:fill}
#packs .pack-index{left:12%;top:77%;bottom:auto;z-index:5;color:#67462f;text-shadow:0 1px #fff9;font-size:clamp(8px,1.15vh,13px)}
#packs .pack.locked{background:none;border:0}
#packs .pack.locked:after{display:none}
#packs .pack.locked .paper-bowl,#packs .pack.locked .bowl-front{filter:grayscale(.7) brightness(.52)}
.pack-lock{position:absolute;left:38%;top:31%;width:24%;height:30%;z-index:6;display:grid;place-items:center;font-size:clamp(18px,3vh,32px);pointer-events:none}

/* Keep playing area clear; spoken status feedback has no visible popup. */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.customer-request.request-cleared{visibility:hidden;pointer-events:none;background:none;box-shadow:none}
.customer-request.request-cleared:after{display:none}
#orderPanel.large-party{left:31%;top:23.5%;width:68%;height:12%;padding:0}
#orderPanel.large-party #orderMeals{gap:3%;height:91%;align-items:stretch}
#orderPanel.large-party .customer-request{max-width:none;min-width:0;flex:1;padding:2% 2% 1%;border-radius:20% / 16%}
#orderPanel.large-party .request-item{width:76%;height:44%}
#orderPanel.large-party .item-quantity{right:-5%;bottom:0;font-size:clamp(8px,1.25vh,14px)}
#orderPanel.large-party .order-milk-note{right:-9%;font-size:clamp(5px,.7vh,9px);padding:1px 3px}
#orderPanel.large-party .patience{height:3.5%;margin:1% 0 0;width:86%}
#customerCar.large-car{top:32.2%}
/* Three earned stars fly into their outlines, one at a time. */
.congrats-title{font-size:clamp(24px,3.5vh,39px)!important;line-height:1.1!important}
.completion-label{font-weight:900;letter-spacing:.12em;color:#906026;margin:8px 0 0}
.completion-stars{height:clamp(76px,12vh,132px);display:flex;align-items:center;justify-content:center;gap:5%;margin:14px 0 4px}
.star-slot{position:relative;display:block;width:26%;height:80%;max-width:110px}
.star-slot:nth-child(2){height:94%;width:29%;transform:translateY(-8%)}
.star-slot svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;stroke-linejoin:round}
.star-outline{fill:#e5d9bc;stroke:#c0ac7c;stroke-width:1.1}
.earned-star{stroke:#d58a14;stroke-width:.8;filter:drop-shadow(0 4px 1px #a5652344);animation:star-arrive .65s cubic-bezier(.2,.8,.25,1.15) var(--star-delay) both}
@keyframes star-arrive{0%{opacity:0;transform:translateY(-100px) rotate(-35deg) scale(.12)}55%{opacity:1;transform:translateY(4px) rotate(9deg) scale(1.15)}80%{transform:translateY(-3px) rotate(-4deg) scale(.96)}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.earned-star{animation:none;opacity:1;transform:none}}

/* Dedicated portrait splash, then restaurant selection. */
.overlay[data-mode="splash"]{padding:0;background:#26180e;backdrop-filter:none}
.overlay[data-mode="splash"] .modal{position:relative;width:100%;height:100%;max-height:100%;overflow:hidden;padding:0;border:0;border-radius:0;background:#39261a;box-shadow:none;display:flex;flex-direction:column;justify-content:flex-end}
.splash-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.splash-actions{position:relative;z-index:1;padding:3% 13% 5%;background:linear-gradient(transparent,#3f240fa6);display:flex;flex-direction:column;gap:1.4vh}
.splash-actions button{margin:0;width:100%;min-height:clamp(42px,6vh,64px);border:2px solid #ffe7a1;box-shadow:0 5px #8a3f12;font-size:clamp(18px,2.6vh,29px)}
.splash-actions button.secondary{background:linear-gradient(#45b9eb,#1a76b1);box-shadow:0 5px #114e79;color:white;text-shadow:0 1px #17415b}
.splash-actions button.splash-shop{min-height:0;border:0;box-shadow:none;background:none;color:#fff8df;text-shadow:0 2px 3px #2a150b;padding:3px 0;font-size:clamp(10px,1.5vh,17px)}
.restaurant-card{overflow:hidden;border:2px solid #d8aa69;border-radius:16px;background:#fffdf7;margin:14px 0;text-align:left;box-shadow:0 3px 0 #dbb884}
.restaurant-card>img{display:block;width:100%;height:clamp(80px,15vh,170px);object-fit:cover;object-position:center 55%}
.restaurant-details{padding:12px 14px}.restaurant-details h3{margin:5px 0;color:#67301c;font-size:clamp(17px,2.5vh,28px)}.restaurant-details p{margin:5px 0;color:#896943;font-size:90%}.restaurant-details button{margin:10px 0 4px}
.restaurant-tag{display:inline-block;padding:3px 8px;border-radius:20px;background:#daf2d0;color:#2d6b28;font-size:clamp(8px,1.15vh,13px);font-weight:900;letter-spacing:.07em}
.upcoming .restaurant-tag{background:#eee2cc;color:#8c6d46}.upcoming>img{filter:saturate(.65)}
/* Raw yam beside the batter shares the fryer from Level 6. */
.ingredient-station{position:absolute;left:75%;top:84.6%;width:24.5%;height:7.8%;z-index:7;border:2px solid #65ddff;border-radius:9%;padding:4px;background:linear-gradient(100deg,#0c6499,#23a9ef 18%,#0b71b8 80%,#073b79);box-shadow:inset 0 1px 1px #c7faff,0 2px 1px #07336e}
.ingredient-station button{position:relative;display:block;width:100%;height:100%;padding:3%;border:1px solid #86dfff;border-radius:7%;background:linear-gradient(#084b74,#042b47);overflow:hidden}
.ingredient-station img{display:block;width:100%;height:89%;object-fit:contain;filter:drop-shadow(0 2px 1px #25190b88);pointer-events:none}
.ingredient-station span{position:absolute;bottom:0;left:0;width:100%;color:#fff6ca;font-size:clamp(6px,1vh,11px);font-weight:900;text-shadow:0 1px #07336e;pointer-events:none}
.ingredient-station.locked img{filter:grayscale(1) brightness(.5)}.ingredient-station button:disabled{cursor:default}
#packs .side-food.yam{top:10%;height:92%;transform:rotate(-3deg)}

/* A separate raw-yam tray leaves the eko tray completely visible. */
.ingredient-station .raw-yam-pile{position:absolute;inset:2% 3% 15%;width:auto;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0 4%;align-items:center}
.ingredient-station .raw-yam-pile img{position:static;display:block;width:100%;height:100%;min-height:0;object-fit:contain;transform:rotate(-3deg);filter:grayscale(1) brightness(1.65) drop-shadow(0 2px 1px #20170788)}
.raw-yam-pile img:nth-child(even){transform:rotate(3deg)}
.ingredient-station.locked .raw-yam-pile{opacity:.4}
.akara-piece.yam .yam-art{object-fit:contain;transform:rotate(-9deg)}
.akara-piece.yam.raw .yam-art{filter:grayscale(1) brightness(1.65) drop-shadow(0 2px 1px #71320980)}
.akara-piece.yam.burnt .yam-art{filter:brightness(.25) saturate(.4)}

/* Two horizontal ingredient trays: batter above, raw yam below. */
.batter-station{z-index:7;border:2px solid #65ddff;border-radius:9%;padding:3px;background:linear-gradient(100deg,#0c6499,#23a9ef 18%,#0b71b8 80%,#073b79);box-shadow:inset 0 1px 1px #c7faff,0 2px 1px #07336e}
.batter-tray{display:block;border-radius:7%;background-image:url('assets/kitchen-akara-coins.png');background-repeat:no-repeat;background-size:333.333% 555.556%;background-position:100% 91.463%;border:1px solid #86dfff;padding:0}
.batter-tray:active{background-image:url('assets/kitchen-akara-coins.png');background-size:333.333% 555.556%;background-position:100% 91.463%;filter:brightness(1.15)}

/* Aligned ingredient trays with real white raw yam. */
.batter-station{--x:75.5%!important;--y:75.7%!important;--w:23.5%!important;--h:8%!important;padding:2px;border-radius:8%}
.ingredient-station{left:75.5%;top:84.3%;width:23.5%;height:8%;padding:2px;border-radius:8%}
.ingredient-station .raw-yam-pile{inset:3% 5% 15%;gap:2% 6%}
.ingredient-station .raw-yam-pile img{filter:drop-shadow(0 2px 1px #20170766)}
.ingredient-station.locked .raw-yam-pile{opacity:.85}
.akara-piece.yam.raw .yam-art{filter:drop-shadow(0 2px 1px #71320980)}
/* The cup rises above its compartment; only its base sits behind the front wall. */
#packs .standing-pap{position:absolute;left:51%;top:-8%;width:40%;height:72%;z-index:3;pointer-events:none;filter:drop-shadow(1px 2px 1px #54452c66)}
#packs .standing-pap .reference-cup{inset:0;width:100%;height:100%;transform:none}
#packs .standing-pap .cup-shell{object-fit:fill}
.customer-request.akara-only{justify-content:center}
.customer-request.akara-only .request-item{height:65%}
/* Dustbin rests beneath the counter, clear of payment coins. */
#dustbin{position:absolute;left:78%;top:94%;width:13%;height:5.8%;z-index:12;border:0;background:transparent;padding:0;filter:drop-shadow(0 3px 2px #462a1688)}
.bin-body{position:absolute;left:14%;top:22%;width:72%;height:72%;border:1px solid #243b3b;border-radius:7% 7% 20% 20%;background:linear-gradient(90deg,#324f50,#688b89 30%,#537976 75%,#263f40);display:flex;justify-content:space-evenly;padding:10% 10%}
.bin-body i{height:90%;width:5%;background:#1e3a3d77;border-radius:3px;box-shadow:1px 0 #9db6ae66}
.bin-lid{position:absolute;left:7%;top:12%;width:86%;height:17%;border:1px solid #243b3b;border-radius:35% 35% 12% 12%;background:linear-gradient(#7d9c94,#314d50);z-index:1}
.bin-lid:before{content:'';position:absolute;left:35%;top:-45%;width:30%;height:40%;border:2px solid #34514e;border-bottom:0;border-radius:40% 40% 0 0}
#dustbin:active .bin-lid{transform:rotate(-15deg);transform-origin:left bottom}
#dustbin:focus-visible{outline:2px solid #fff8a1;border-radius:10%}
.discard-flight{position:absolute;z-index:15;width:7%;height:4%;object-fit:contain;pointer-events:none;filter:brightness(.25);animation:food-to-bin .5s ease-in forwards}
@keyframes food-to-bin{from{left:var(--from-x);top:var(--from-y);opacity:1}to{left:82%;top:96%;transform:scale(.15) rotate(60deg);opacity:0}}
/* One original ingredient bay, divided across its middle. */
#prepTray{position:absolute;left:74.8%;top:75.2%;width:25%;height:17.3%;z-index:7;border:2px solid #62d8ff;border-radius:8%;padding:3px;background:linear-gradient(100deg,#0878b4,#49c7fa 13%,#0873ac 87%,#073c72);box-shadow:inset 0 2px 2px #d9fbff,0 2px 2px #173e65}
#prepTray:after{content:'';position:absolute;left:3%;right:3%;top:49%;height:3%;background:linear-gradient(#bcefff,#158ec6,#075582);box-shadow:0 1px 1px #03385e;pointer-events:none}
#prepTray .batter-station{left:4%!important;top:3%!important;width:92%!important;height:44%!important;border:0;padding:0;box-shadow:none;background:none;border-radius:6%;z-index:1}
#prepTray .batter-tray{border:1px solid #8edcff;border-radius:6%;background-size:390% 590%;background-position:100% 90.5%}
#prepTray .ingredient-station{left:4%;top:54%;width:92%;height:43%;border:0;padding:0;box-shadow:none;background:none;z-index:1}
#prepTray .ingredient-station button{border:1px solid #75d5ed;border-radius:6%;background:linear-gradient(105deg,#527b88,#a5c4c7 30%,#7c9da6 70%,#395766)}
#prepTray .raw-yam-pile{inset:2% 5% 16%;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0 5%}
#prepTray .raw-yam-pile img{transform:none;filter:drop-shadow(0 1px 1px #233d4277)}
#prepTray #yamLabel{color:#fff;font-size:clamp(7px,1.1vh,12px);line-height:1.1;text-shadow:0 1px 2px #152b38}
#prepTray .locked button:after{content:'🔒';position:absolute;right:2%;bottom:1%;font-size:clamp(7px,1.2vh,13px)}
.modal{position:relative}.modal button.modal-close{position:absolute;right:3%;top:2%;width:32px;height:32px;min-height:0;border-radius:50%;margin:0;padding:0;font:900 26px/1 Arial;background:#c24e37;color:#fff;border:2px solid #ffdfac;box-shadow:0 2px #873323;text-shadow:none;z-index:4}
.splash-links{display:flex;gap:7%}.splash-links button{flex:1;min-width:0;font-size:clamp(11px,1.8vh,20px)}
/* A continuing Nigerian street route, twenty levels per section. */
.overlay[data-mode="levels"]{padding:0;background:#cde2b5;backdrop-filter:none}
.overlay[data-mode="levels"] .modal{width:100%;height:100%;max-height:100%;border:0;border-radius:0;padding:0;background:#d9e9b8;display:flex;flex-direction:column;overflow:hidden;box-shadow:none}
.map-heading{position:relative;flex-shrink:0;padding:5% 7% 3%;background:linear-gradient(#fff7d3,#f7e6b5);border-bottom:3px solid #71976a;color:#315b42;box-shadow:0 3px 9px #46734b33;z-index:2;text-align:left}
.map-eyebrow{display:block;color:#b46420;font-size:clamp(8px,1.2vh,13px);font-weight:900;letter-spacing:.1em;margin-bottom:7px}
.map-heading h2{font-size:clamp(22px,3.5vh,38px);color:#315b42;line-height:1.05;width:85%;margin:0 0 12px}
.map-legend{display:flex;gap:7%;font-size:clamp(8px,1.25vh,14px);font-weight:bold;color:#647a4b}
.map-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;background:radial-gradient(ellipse at 15% 28%,#afd0a5 0 8%,transparent 8.5%),radial-gradient(ellipse at 85% 68%,#b3ce8e 0 13%,transparent 13.5%),linear-gradient(#deedc3,#d3e2a4);padding-top:14px}
.map-sign{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;width:78%;margin:0 auto;padding:12px;border:3px solid #f6d69c;border-radius:12px;background:linear-gradient(#8b512b,#61391f);color:#fff1c1;box-shadow:0 3px 0 #456748;text-align:center}
.map-sign span{font-size:10px;letter-spacing:.15em;color:#eed08f;font-weight:900}.map-sign b{font-size:clamp(17px,2.6vh,27px)}.map-sign small{font-size:12px}
.street-map{position:relative;height:1830px;width:100%;max-width:480px;margin:auto;isolation:isolate}
.map-road{position:absolute;inset:0;width:100%;height:100%;z-index:-1;filter:drop-shadow(0 3px 0 #839b68)}
.modal button.level-stop{position:absolute;left:var(--stop-x);top:var(--stop-y);transform:translate(-50%,-50%);width:clamp(52px,13vw,74px);height:clamp(52px,13vw,74px);padding:0;margin:0;border-radius:50%;border:4px solid #fff6c7;background:linear-gradient(#ffdd66,#efa12e);box-shadow:0 5px 0 #ad7130,0 7px 5px #44684d55;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;filter:none;opacity:1;color:#75431c;text-shadow:0 1px #ffedb4}
.level-stop b{font-size:26px;line-height:1}.level-stop span{position:absolute;bottom:-17px;white-space:nowrap;font-size:16px;color:#ffbd1b;text-shadow:0 1px 1px #735123;letter-spacing:1px;font-weight:900}
.modal button.level-stop.current{background:linear-gradient(#47bbcd,#168193);border-color:#f7ffff;box-shadow:0 5px #115f70,0 0 0 7px #ffffff66;color:#fff;text-shadow:0 1px #14617a}
.level-stop.current span{font-size:10px;color:#fff;background:#187c8b;letter-spacing:.05em;padding:3px 10px;border-radius:12px;bottom:-16px}
.modal button.level-stop.future{background:linear-gradient(#b8c5ba,#879e96);border-color:#dce8cc;box-shadow:0 4px #687e72;color:#60756e;cursor:default}
.level-stop.future b{font-size:19px}.level-stop.future span{font-size:12px;color:#52705b;bottom:-20px;text-shadow:none}
.map-landmark{position:absolute;pointer-events:none}.map-landmark.palm{font-size:74px;text-shadow:0 3px #7c965d44}.palm.one{left:2%;top:440px}.palm.two{right:1%;top:1330px}
.kiosk{left:4%;top:910px;width:80px;height:62px;border:3px solid #8d472c;border-radius:5px;background:#f4d79a;box-shadow:0 5px #8c9d6966}
.kiosk i{position:absolute;left:-8%;top:-14%;width:116%;height:25%;background:repeating-linear-gradient(90deg,#bf4b37 0 13px,#fff2c5 13px 26px);transform:skew(-7deg);border-bottom:3px solid #843425}
.kiosk b{position:absolute;top:26%;left:5%;width:90%;font-size:12px;color:#8b3f25;background:#fff2c9;letter-spacing:1px;border-bottom:14px solid #5c4638}
.danfo{right:3%;top:190px;width:85px;height:52px;border:3px solid #97641b;border-radius:12px 13px 8px 8px;background:linear-gradient(#ffd94a 65%,#564731 66% 73%,#edb62b 74%);display:flex;gap:3px;padding:8px 5px 22px;transform:rotate(-8deg);box-shadow:0 4px 2px #63835955}
.danfo i{flex:1;background:linear-gradient(145deg,#b6e2df,#4b808e);border:1px solid #775c2a;border-radius:2px}.danfo b{position:absolute;font-size:7px;bottom:2px;left:26%;color:#55431d;letter-spacing:1px}.danfo:before,.danfo:after{content:'';position:absolute;bottom:-7px;width:14px;height:14px;background:#3c403a;border-radius:50%;border:3px solid #575f53}.danfo:before{left:8px}.danfo:after{right:8px}
.map-note{color:#567548;font-size:12px;margin:0;padding:0 0 18px;font-weight:bold}
.map-paging{display:flex;align-items:center;justify-content:space-around;gap:8px;flex-shrink:0;background:#fff3d2;border-top:2px solid #8eac72;padding:10px 5%;color:#51704f;font-size:13px;font-weight:900}
.map-paging button{margin:0;width:auto;min-width:38px;padding:8px;font-size:15px;border-radius:10px;box-shadow:0 3px #9b5b1c}.map-paging #currentSection{font-size:10px;padding:11px}
/* Taller order bubbles with each passenger's timer on its own right edge. */
#orderPanel{left:49%;top:13.5%;width:35%;height:22%;gap:0}
#orderPanel.single-meal{left:58%;top:13.5%;width:22%;height:22%}
#orderPanel.large-party{left:44%;top:14%;width:55%;height:21.5%;padding:0}
#orderPanel #orderMeals,#orderPanel.single-meal #orderMeals,#orderPanel.large-party #orderMeals{height:100%;gap:5%;align-items:stretch}
#orderPanel .customer-request,#orderPanel.single-meal .customer-request,#orderPanel.large-party .customer-request{max-width:none;padding:9% 10% 8% 4%;border-radius:22% / 9%;justify-content:space-around;overflow:visible}
#orderPanel .request-item,#orderPanel.large-party .request-item{width:94%;height:41%;min-height:0}
#orderPanel .akara-only .request-item{height:48%}
#orderPanel .request-cup{width:82%;height:100%}
#orderPanel .request-item .order-milk-note{right:0;bottom:-3%;font-size:clamp(5px,.75vh,9px)}
.request-patience{position:absolute;right:3%;top:9%;height:79%;width:clamp(4px,.65vh,7px);border:1px solid #d6c6a5;border-radius:10px;background:#e9e4d9;overflow:hidden;box-shadow:inset 0 1px 2px #816a4933}
.request-patience i{position:absolute;left:0;bottom:0;width:100%;border-radius:8px;transition:height .15s linear,background .3s}
#orderPanel .request-cleared .request-patience{display:none}
/* One continuous motor-park page. New level stops extend on scroll. */
.map-scroll{background:#c9b38b;touch-action:pan-y}
.park-welcome{position:relative;display:flex;flex-direction:column;gap:4px;align-items:center;padding:15px 12px;background:#fff4d8e8;color:#69502d;border-bottom:2px solid #b89e72}
.park-welcome b{font-size:clamp(16px,2.4vh,25px)}.park-welcome span{font-size:clamp(10px,1.4vh,15px);color:#917247}
.continuous-route{position:relative;isolation:isolate;width:100%;background-image:url('assets/motor-park-map.png');background-size:100% auto;background-repeat:repeat-y}
.park-route-segment{position:relative;width:100%;height:1780px;isolation:isolate}
.park-route-segment .map-road{z-index:-1;filter:drop-shadow(0 3px 1px #333a3655)}
.map-scroll .map-note{background:#d9c5a2;margin:0;padding:14px;color:#705d40}
#orderPanel .customer-request,#orderPanel.single-meal .customer-request,#orderPanel.large-party .customer-request{padding:clamp(8px,1.5vh,16px) clamp(10px,1.6vh,18px) clamp(8px,1.5vh,16px) clamp(4px,.7vh,8px)}
/* Neutral steel ingredient bay without a blue outline. */
#prepTray{border:0;background:linear-gradient(100deg,#606a6d,#bec7c5 13%,#8e999a 87%,#505b5d);box-shadow:inset 0 1px 2px #edf1e8,0 2px 2px #25333466}
#prepTray:after{background:linear-gradient(#e0e6df,#929f9f,#596769);box-shadow:0 1px 1px #354647}
#prepTray .batter-tray,#prepTray .ingredient-station button{border:0;box-shadow:none}
#prepTray .batter-tray,#prepTray .batter-tray:active{background-size:555.556% 1000%;background-position:97% 87%;border-radius:6%}

/* High contrast level numbers remain readable over the motor park. */
.level-stop b{color:#111;text-shadow:none}
.level-stop.current b{color:#fff;text-shadow:0 1px 2px #174953}
.level-stop.future span{color:#111;background:#fff;border-radius:9px;padding:2px 7px;text-shadow:none;line-height:1.1;bottom:-22px}

/* Flat CTA edges: remove the orange stroke and coloured bottom rim. */
.modal button:not(.level-stop):not(.modal-close){border:0;box-shadow:0 3px 8px #213b3e30}
.modal button:not(.level-stop):not(.modal-close):active{box-shadow:0 1px 3px #213b3e30}
.splash-actions button{border:0!important}
/* A first-visit walkthrough pauses the kitchen while highlighting each area. */
.overlay[data-mode="guide"]{padding:0;background:none;backdrop-filter:none}
.overlay[data-mode="guide"] .modal{position:relative;width:100%;height:100%;max-height:100%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:hidden}
.guide-focus{position:absolute;border:3px solid #fff5b7;border-radius:12px;box-shadow:0 0 0 200vmax #0c1c20c9;pointer-events:none}
.guide-card{position:absolute;left:7%;width:86%;padding:5%;border-radius:20px;background:#fff9e9;color:#3a4c43;box-shadow:0 5px 20px #071a2377;text-align:left}
.guide-count{display:block;color:#437b80;font-size:clamp(9px,1.35vh,15px);font-weight:900;letter-spacing:.1em;margin-bottom:10px}
.guide-card h2{color:#315c5c;font-size:clamp(20px,3vh,32px);line-height:1.12;margin:0 0 10px}
.guide-card p{font-size:clamp(12px,1.8vh,20px);line-height:1.45;margin:0 0 14px}
.guide-buttons{display:flex;gap:10px}.guide-buttons button{flex:1;margin:0;padding:11px}
.guide-card button.guide-skip{font-size:clamp(9px,1.3vh,14px);margin:12px 0 0;padding:4px;background:none;box-shadow:none!important;color:#5e7773;text-shadow:none}

.guide-order-demo{display:flex;justify-content:center;align-items:center}.guide-example{position:relative;width:42%;height:94%;padding:8% 6%;background:#fffdf4;border-radius:15%;display:flex;flex-direction:column;align-items:center;gap:12%}.guide-example-akara{display:flex;height:42%;width:100%;position:relative}.guide-example-akara img{width:55%;height:100%;position:absolute}.guide-example-akara img:nth-child(1){left:0;top:20%}.guide-example-akara img:nth-child(2){left:42%;top:20%}.guide-example-akara img:nth-child(3){left:22%;top:-15%}.guide-example>img{width:85%;height:42%;object-fit:contain}.guide-example>i{position:absolute;right:4%;top:10%;width:5%;height:80%;border-radius:5px;background:#65bf65}
/* Ingredients fill the bay directly, with no outer rim or separator stroke. */
#prepTray{border:0;padding:0;background:none;box-shadow:none;outline:none}
#prepTray:after{display:none}
#prepTray .batter-station{left:0!important;top:0!important;width:100%!important;height:50%!important;border-radius:0}
#prepTray .ingredient-station{left:0;top:50%;width:100%;height:50%;border-radius:0}
#prepTray .batter-tray,#prepTray .batter-tray:active,#prepTray .ingredient-station button{border:0;border-radius:0;box-shadow:none}
#prepTray .ingredient-station button{background:#345866}
/* Approved recessed service pans: food sits below the lip in both wells. */
#prepTray{background-image:url('assets/prep-tray-approved.png');background-size:147.95% 228.73%;background-position:100% 81.3%;background-repeat:no-repeat;border-radius:5%;overflow:hidden}
#prepTray .batter-tray,#prepTray .batter-tray:active,#prepTray .ingredient-station button{background:none;border:0;box-shadow:none}
#prepTray .raw-yam-pile{display:none}
#prepTray .batter-station{height:47%!important}
#prepTray .ingredient-station{top:47%;height:53%}
#prepTray .ingredient-station.locked:before{content:'';position:absolute;inset:0;background:#12313b36;pointer-events:none;z-index:1}
#prepTray #yamLabel{bottom:1%;z-index:2;text-shadow:0 1px 3px #172934,0 0 3px #172934}
/* Raised CTA bases match the reference: darker colour beneath each face. */
.modal button:not(.level-stop):not(.modal-close){--cta-base:#b85b12;border:0!important;box-shadow:0 6px 0 var(--cta-base),0 9px 7px #152c3630;transition:transform .1s,box-shadow .1s}
.modal button.secondary:not(.level-stop){--cta-base:#17666d}
.splash-actions button.secondary{--cta-base:#115783}
.modal button:not(.level-stop):not(.modal-close):active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 var(--cta-base),0 4px 3px #152c3630}
.guide-card button.guide-skip{border:0!important;box-shadow:none!important;transform:none!important}
/* Straight, upright preparation bay with a level divider. */
#prepTray{background-image:url('assets/prep-tray-straight.png');background-size:108% 105%;background-position:50% 50%;border-radius:7px;border:1px solid #b5babe;box-shadow:inset 0 0 0 1px #e4e6e7;transform:none}
#prepTray .batter-station{height:48%!important}
#prepTray .ingredient-station{top:48%;height:52%}

/* Two main splash actions; restaurant selection is a corner shop icon. */
.modal button.splash-restaurant-icon.secondary{position:relative;width:clamp(42px,6.2vh,58px);height:clamp(40px,5.8vh,54px);padding:9px;margin:0;border-radius:13px;background:linear-gradient(#45b9eb,#1a76b1);--cta-base:#115783;z-index:3}
.splash-restaurant-icon svg{display:block;width:100%;height:100%;fill:none;stroke:#fff9e9;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.splash-shortcuts{position:absolute;right:5%;top:3%;display:flex;gap:12px;z-index:3}
#tableCoins{border-radius:10px;gap:4%;font-size:clamp(11px,1.7vh,19px)}
#tableCoins small{font-size:clamp(6px,.8vh,9px)}

.overlay[data-mode="account"] .modal{max-height:93%;overflow-y:auto;padding:30px 22px;color:#533222}
.account-symbol{font-size:42px;line-height:1.2;color:#167faf}
.account-status{padding:10px 12px;background:#e7f5f5;border-radius:12px;color:#236473;font-size:clamp(11px,1.5vh,15px);line-height:1.5}
.account-note{font-size:clamp(10px,1.35vh,14px);line-height:1.6;color:#725d4a;margin-top:18px}
.account-signin{display:block;margin:12px 0 18px;padding:15px 10px;border-radius:14px;background:linear-gradient(#46b9e8,#1978ad);color:#fff;text-decoration:none;font-size:clamp(12px,1.7vh,18px);font-weight:900;box-shadow:0 6px 0 #115783}
.account-signin:active{transform:translateY(4px);box-shadow:0 2px 0 #115783}
.modal button.account-text{background:transparent;color:#286782;font-size:13px;box-shadow:none!important;padding:10px;margin-top:12px}
.splash-shortcuts{gap:10px}

.akara-piece.is-pressed .akara-art{transform:scale(.94);filter:brightness(1.1);transition:transform .08s}
.account-form{text-align:left;margin-top:16px}.account-form label{display:block;font-size:12px;font-weight:700;margin-top:12px;color:#5b4a36}.account-form input{display:block;width:100%;padding:12px;margin-top:6px;border:1px solid #cfb992;border-radius:9px;background:#fffdf5;font:16px Arial,sans-serif;color:#3e352a}.account-form small{display:block;font-size:11px;line-height:1.5;color:#796e5b;margin:6px 0}.recovery-code{display:block;background:white;color:#183f37;overflow-wrap:anywhere;padding:16px;border-radius:10px;font:14px monospace;user-select:all}
.recovery-check{display:flex;gap:10px;align-items:center;text-align:left;font-size:13px;line-height:1.5;margin:16px 0;color:#4b5844}.recovery-check input{width:20px;height:20px;flex-shrink:0}

.splash-shortcuts{display:block}
.splash-menu[hidden]{display:none}
.splash-menu{position:absolute;right:0;top:calc(100% + 15px);width:clamp(180px,25vh,250px);padding:8px;border:2px solid #efcc8d;border-radius:17px;background:#fff6df;box-shadow:0 7px 0 #9c6b30,0 12px 20px #26120850;display:flex;flex-direction:column;gap:5px}
.modal .splash-menu button.splash-menu-item{display:flex;align-items:center;gap:14px;width:100%;padding:12px 13px;margin:0;border-radius:10px;background:transparent;color:#244b57;font-size:clamp(13px,1.8vh,19px);font-weight:800;text-align:left;box-shadow:none!important;transform:none!important}
.modal .splash-menu button.splash-menu-item:hover,.modal .splash-menu button.splash-menu-item:focus-visible{background:#dfedf0;outline:2px solid #3185a4;outline-offset:-2px}
.splash-menu-item svg{display:block;width:27px;height:27px;flex-shrink:0;fill:none;stroke:#247d9e;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.account-switch{font-size:clamp(11px,1.5vh,15px);color:#706550;margin:16px 0 6px}.account-switch a{color:#216d86;font-weight:700;text-decoration:underline;text-underline-offset:3px}.account-switch a:focus-visible{outline:2px solid #216d86;outline-offset:4px;border-radius:2px}