:root{--cream:#fff1cf;--gold:#ffdb87;--dark:#210c3a;--mint:#8cfbdd;--pink:#fa94cf}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#100821;color:var(--cream);font-family:'Trebuchet MS',Verdana,sans-serif;user-select:none}button{font:inherit;cursor:pointer;touch-action:manipulation;color:inherit}button:focus-visible{outline:4px solid #87ffe6;outline-offset:2px}
#stage{position:absolute;top:50%;left:50%;width:1600px;height:900px;transform:translate(-50%,-50%) scale(var(--fit,1));transform-origin:center;overflow:hidden;background:#100924;isolation:isolate}
.view{position:absolute;inset:0;display:none;overflow:hidden}.view.show{display:block}.art{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat}
/* Art assets */
.art-0{background-image:url('../assets/art-0.webp')}
.art-1{background-image:url('../assets/art-1.webp')}
.art-2{background-image:url('../assets/art-2.webp');background-size:124% auto;background-position:43% 38%}
.art-3{background-image:url('../assets/art-3.webp')}
.art-4{background-image:url('../assets/art-4.webp')}
.art-5{background-image:url('../assets/art-5.webp')}
.art-6{background-image:url('../assets/art-6.webp')}
#cover::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 18%,#1d073519 60%,#1c0a32a6 100%);pointer-events:none}
#coverCard{position:absolute;bottom:44px;left:50%;transform:translateX(-50%);z-index:4;width:680px;text-align:center;padding:20px 26px 26px;border:5px solid #f7bd64;border-radius:34px;background:linear-gradient(145deg,#562b78f6,#261442fa);box-shadow:0 12px 0 #170a24,0 22px 44px #000a}
#coverCard h1{margin:0 0 7px;font-size:38px;color:#ffdda1;text-shadow:0 4px #85395b;line-height:1.1}#coverCard p{font-size:20px;line-height:1.28;margin:0 0 17px}
.wood{font-weight:900;font-size:23px;border-radius:21px;padding:13px 25px;color:#4a2138;background:linear-gradient(#ffe2a2,#efa65c);border:4px solid #fff0ba;box-shadow:0 7px 0 #89502f,0 12px 26px #0009;transition:filter .14s,transform .14s}.wood:hover,.buttonPurple:hover,.choice:hover,.crate:hover,.hotspot:hover,.jump:hover{filter:brightness(1.14);transform:translateY(-3px)}.wood:active,.buttonPurple:active,.choice:active,.crate:active{transform:translateY(2px)}
.buttonPurple{background:linear-gradient(#8752a0,#4d2472);border:3px solid #d8b0fa;border-radius:17px;padding:10px 19px;font-weight:900;font-size:23px;box-shadow:0 6px 0 #26103b,0 11px 22px #0008;transition:transform .17s,filter .17s}
#mapHUD{position:absolute;right:24px;top:17px;z-index:8;display:flex;gap:10px;align-items:center;background:#24103edc;border:3px solid #ffd990;border-radius:22px;padding:7px 10px;box-shadow:0 6px 24px #0008}
.stat{border:2px solid #d89d69;border-radius:16px;background:#2e194b;padding:10px 14px;font-size:22px;font-weight:900;color:#fff0bd;min-width:98px;text-align:center}
.mini{font-size:24px;padding:8px 12px;min-width:49px}.hotspot{position:absolute;background:transparent;border:3px solid transparent;border-radius:28px;z-index:4;transition:filter .2s,transform .2s}.hotspot:hover{border-color:#ffcb69aa;box-shadow:0 0 28px #ffc65277;transform:scale(1.018)}.hotspot:focus-visible{border-color:#c4fff0}
#freeLabel{position:absolute;left:590px;top:824px;z-index:6;border-radius:25px;background:#241035e8;padding:8px 23px;border:3px solid #ffd57d;color:#fff0b3;font-size:19px;font-weight:900;box-shadow:0 5px 14px #0006;pointer-events:none}
.mapBadge{position:absolute;z-index:5;border-radius:50%;width:100px;height:90px;display:grid;place-items:center;pointer-events:none;filter:drop-shadow(0 6px 8px #140322)}
.mapBadge::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 35% 25%,#ffe1a0,#ff913d 65%,#bd4e35);border:5px solid #ffecac;border-radius:50%;box-shadow:inset 0 -8px 0 #8c3735,0 0 17px #ffe6778a}.mapBadge span{position:relative;font-size:34px;text-shadow:0 3px #742329}
#ambient{position:absolute;inset:0;z-index:3;pointer-events:none}.lanternGlow{position:absolute;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,#ffb83e59,transparent 69%);animation:lantern 3.5s infinite alternate}@keyframes lantern{to{opacity:.28;transform:scale(.86)}}
.bat{position:absolute;top:120px;left:-90px;animation:batFly 17s linear infinite;font-size:37px;filter:drop-shadow(0 1px 2px black)}@keyframes batFly{0%{transform:translate(-50px,20px)}45%{transform:translate(790px,-85px)}100%{transform:translate(1750px,10px)}}
.flyWitch{position:absolute;top:102px;left:-260px;width:210px;height:130px;animation:witchFly 22s linear infinite;filter:drop-shadow(0 7px 5px #120825)}@keyframes witchFly{0%{transform:translateX(-230px) translateY(25px)}48%{transform:translateX(850px) translateY(-55px)}100%{transform:translateX(1900px) translateY(20px)}}
.crawler{position:absolute;top:83%;left:-40px;width:54px;height:54px;animation:spiderWalk 19s linear infinite}@keyframes spiderWalk{to{transform:translateX(1750px) rotate(10deg)}}
#mission{background:#1a102d}#mission .art{animation:enterBG .65s ease-out both}@keyframes enterBG{from{transform:scale(1.09);filter:brightness(.55) blur(2px)}to{transform:scale(1);filter:none}}
#missionNav{position:absolute;top:11px;left:12px;right:15px;height:76px;display:flex;gap:12px;align-items:center;justify-content:space-between;z-index:22;padding:0 7px;background:linear-gradient(#29113eca,#29113eb0);border-radius:19px;border:2px solid #ffdc9275;box-shadow:0 6px 16px #0007}
#levelName{font-size:25px;font-weight:900;color:#ffe5aa;text-shadow:0 3px #421936;background:linear-gradient(#663c70,#341b54);border:3px solid #efc486;border-radius:19px;padding:13px 30px;letter-spacing:1px}
#progress{border-radius:19px;border:3px solid #edc17f;background:#231238dd;display:flex;gap:14px;align-items:center;padding:10px 13px;font-weight:900;font-size:23px}
#progressTrack{width:166px;height:15px;border:2px solid #e3b77b;border-radius:20px;overflow:hidden;background:#2b183f}#progressFill{height:100%;width:0%;background:linear-gradient(90deg,#7dffdd,#ffe093);transition:width .3s}
#quickNav{display:flex;gap:6px}#quickNav button{font-size:18px;font-weight:900;border:2px solid #ffe1a0;background:#4e2a72;border-radius:12px;width:38px;height:39px;box-shadow:0 3px #210d39}#quickNav button.active{background:#dd8c3b;color:#351738}#quickNav button.done::after{content:'✓';font-size:12px;position:absolute;margin:-12px 0 0 -1px;color:#a7ffc2}
#sceneWorld{position:absolute;inset:0;z-index:5;overflow:hidden;pointer-events:none}#sceneWorld button,#sceneWorld [data-action],#sceneWorld [tabindex]{pointer-events:auto}
/* In-world interactive furniture: each game has its own layout, not a modal */
.woodSign{background:linear-gradient(#ffebba,#f3ca88);border:5px solid #ce884b;border-radius:28px;color:#572f4b;box-shadow:inset 0 4px #fff4d2,0 8px 0 #7e4351,0 12px 26px #0008;display:grid;place-items:center;text-align:center;padding:18px;font-weight:900}
.scenePrompt{position:absolute;right:95px;top:146px;width:620px;min-height:210px;max-height:248px;font-size:36px;line-height:1.16;z-index:7}
.scenePrompt small{display:block;font-size:16px;letter-spacing:3px;color:#a45741;margin-bottom:14px}.scenePrompt p{margin:0}.scenePrompt .foodArt{width:84px;height:80px}
.choiceDeck{position:absolute;z-index:8;right:90px;top:410px;width:630px;display:flex;justify-content:center;gap:14px;align-items:stretch;pointer-events:auto}
.choice{font-weight:900;font-size:23px;min-height:107px;min-width:0;flex:1;border-radius:23px;border:4px solid #ffe0a1;box-shadow:0 7px 0 #3d194e,0 14px 28px #0008;background:linear-gradient(#7e4da4,#4c216d);color:white;text-shadow:0 2px #4a2052;transition:filter .17s,transform .17s;display:grid;place-items:center;line-height:1.15;padding:12px;touch-action:manipulation}
.choice svg{width:52px;height:48px}.choice.good{background:#288a67!important}.choice.bad{animation:shake .35s}.choice:disabled{opacity:.85;cursor:default}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-12px)}75%{transform:translateX(12px)}}
#zoneTitle{position:absolute;left:27px;bottom:26px;max-width:560px;border-radius:20px;background:#28123bcb;border:3px solid #efb86c;color:#ffe4af;padding:12px 18px;font-weight:900;font-size:21px;z-index:7;text-shadow:0 2px #2e123b}
/* Delivery game: draggable ingredient into genuinely interactive sorting crates */
.deliveryBoard{position:absolute;left:643px;top:132px;width:660px;height:110px;font-size:29px;z-index:8}
#cargoFood{position:absolute;left:765px;top:285px;width:350px;height:213px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;z-index:12;background:linear-gradient(145deg,#ffefbd,#eebf78);border-radius:27px;border:5px solid #fff5cb;box-shadow:0 9px 0 #6c3c45,0 22px 32px #0009;touch-action:none;cursor:grab;transition:filter .2s;pointer-events:auto}
#cargoFood .foodArt{height:122px;width:155px}#cargoFood strong{color:#54275a;font-size:33px}#cargoFood:active{cursor:grabbing}
.crates{position:absolute;left:550px;right:80px;bottom:55px;height:206px;display:flex;gap:32px;justify-content:space-around;align-items:end;z-index:9;pointer-events:auto}
.crate{position:relative;flex:1;height:178px;border:7px ridge #c98448;border-radius:17px 17px 24px 24px;background:repeating-linear-gradient(0deg,#91502f,#91502f 35px,#a65c31 36px,#a65c31 55px);box-shadow:0 15px 0 #5c2b24,0 23px 26px #000b;color:#ffedae;font-size:32px;font-weight:900;text-shadow:0 4px #5a281f;pointer-events:auto;transition:transform .16s,filter .16s}.crate:before{content:'';position:absolute;inset:15px;border:4px solid #d39c57;border-radius:11px;pointer-events:none}.crate.hit{filter:brightness(1.6);box-shadow:0 0 28px #fcec73}
/* Witch kitchen: bubbling cauldron and animated chosen ingredient */
#brewPot{position:absolute;left:480px;top:490px;width:330px;height:280px;z-index:8;pointer-events:none}#brewPot:before{content:'';position:absolute;left:27px;top:45px;width:280px;height:112px;border-radius:50%;background:radial-gradient(ellipse,#b5ff66,#35d949 58%,#224220 69%);box-shadow:0 0 50px #a7ff5380,inset 0 0 24px #ffffbb;animation:bubble 1.2s ease-in-out infinite alternate}@keyframes bubble{to{transform:scale(1.05) translateY(-5px);filter:hue-rotate(18deg)}}
.brewBubble{position:absolute;border-radius:50%;border:2px solid #e6ffa2;background:#a4ffb85e;animation:rise 3s linear infinite}@keyframes rise{from{transform:translateY(95px) scale(.5);opacity:0}20%{opacity:1}to{transform:translateY(-150px) scale(1.3);opacity:0}}
#witchWand{position:absolute;top:505px;left:346px;font-size:70px;transform-origin:80% 95%;animation:stir 2s ease-in-out infinite alternate;filter:drop-shadow(0 0 10px #f9ff96)}@keyframes stir{to{transform:rotate(19deg)}}
/* Monster café: order tray fills, monster responds, plate delivery animation */
#monsterFace{position:absolute;left:78px;top:250px;width:520px;height:420px;z-index:9;pointer-events:none;border-radius:50%;animation:monsterIdle 3s ease-in-out infinite alternate}@keyframes monsterIdle{to{transform:translateY(-8px) scale(1.035)}}
#serveCounter{position:absolute;left:215px;top:655px;width:610px;height:118px;border-radius:50% 50% 28px 28px;background:linear-gradient(#8c4d2c,#48281f);border:12px solid #b76d40;box-shadow:0 11px #271525,0 22px 24px #0008;display:flex;gap:12px;align-items:center;justify-content:center;pointer-events:none}
.plate{height:72px;width:85px;border-radius:50%;background:radial-gradient(ellipse,#faf9d7 44%,#ae6c9a 49%,#e9c5f2 60%,#5a2d62 65%);display:grid;place-items:center;animation:platePop .35s ease-out}.plate svg{height:58px;width:65px}@keyframes platePop{from{transform:scale(0)}to{transform:scale(1)}}
/* Cursed truck: weighing device and order-ticket interaction */
#truckScale{position:absolute;left:285px;top:612px;width:465px;height:128px;border-radius:15px;background:linear-gradient(#be7740,#6a3b39);border:9px solid #edac62;box-shadow:0 15px 12px #160a22ad;z-index:7;display:flex;align-items:center;justify-content:space-around;color:#ffedc1;font-size:24px;font-weight:900;pointer-events:none}#scaleDial{width:94px;height:94px;border-radius:50%;border:6px solid #ffe29f;background:#e6c58e;display:grid;place-items:center;position:relative;color:#482a47}#needle{position:absolute;height:41px;width:6px;background:#b5353f;bottom:44px;left:38px;transform-origin:bottom center;transition:transform .55s}.scaleShake{animation:shake .4s}
/* final: interactive potion cauldron and assembled recipe */
#finalCauldron{position:absolute;left:365px;bottom:100px;width:480px;height:270px;z-index:8;pointer-events:none}#finalCauldron .brewLiquid{position:absolute;top:20px;left:65px;width:350px;height:105px;background:radial-gradient(ellipse,#fcff88,#a13aeb 70%,#6b1b82);border-radius:50%;border:10px solid #3a183d;box-shadow:0 0 60px #cb5affae;animation:bubble .8s infinite alternate}#finalCauldron .potBody{position:absolute;top:69px;left:80px;width:330px;height:205px;background:radial-gradient(ellipse at 45% 20%,#6f487e,#241338 68%);border:12px solid #673871;border-radius:30% 30% 44% 44%;box-shadow:inset -14px -10px #140c29,0 16px 17px #0009}
#recipeProgress{position:absolute;bottom:41px;right:132px;width:440px;display:flex;gap:12px;justify-content:center;z-index:10;pointer-events:none}.recipeDot{width:30px;height:30px;border-radius:50%;background:#3b204e;border:3px solid #fad48b;box-shadow:0 4px #24122e}.recipeDot.done{background:#a6ffd3;box-shadow:0 0 17px #baff9f}
/* generic gameplay feedback, celebratory pop ups */
#feedback{position:absolute;left:50%;bottom:35px;transform:translateX(-50%);z-index:18;min-width:240px;max-width:700px;text-align:center;font-weight:900;font-size:26px;color:#fff5be;text-shadow:0 3px 5px #2a1533;background:#39154ccc;border:2px solid #ffe4a1;border-radius:999px;padding:10px 21px;opacity:0;transition:opacity .16s;pointer-events:none}#feedback.show{opacity:1}
#victory{position:absolute;z-index:45;inset:0;display:none;place-items:center;background:radial-gradient(ellipse,#251044cc,#110822ed);backdrop-filter:blur(4px)}#victory.show{display:grid}
#victoryCard{width:790px;min-height:450px;border-radius:35px;background:linear-gradient(145deg,#783e8b,#3c205e);border:8px solid #ffda8b;box-shadow:0 17px 0 #160721,0 26px 44px #0009;padding:35px 45px;text-align:center}#victoryCard h2{margin:10px 0 4px;color:#ffe29e;font-size:53px;text-shadow:0 5px #7a365d}#victoryCard p{font-size:27px;line-height:1.35;margin:9px 0 28px}#victoryCard .bigStar{font-size:92px;animation:twirl 2.4s infinite alternate}@keyframes twirl{to{transform:rotate(15deg) scale(1.12)}}
#helpOverlay{position:absolute;z-index:55;inset:0;display:none;place-items:center;background:#0e052bcc}#helpOverlay.show{display:grid}#helpInner{border-radius:33px;border:6px solid #ffda8b;background:linear-gradient(#70428e,#341b60);padding:44px 60px;width:870px;text-align:center;box-shadow:0 20px 50px #0009}#helpInner h2{margin:0 0 15px;font-size:42px;color:#ffdfa5}#helpInner p{font-size:25px;line-height:1.45}
/* Match the in-world parchment already painted into each scene; cover the static text/controls underneath. */
#mission .scenePrompt{top:97px;right:50px;width:704px;min-height:314px;max-height:314px;padding:24px 28px;background:linear-gradient(155deg,#fff2d3,#f2c98e);border:7px solid #dca567;box-shadow:0 8px 0 #87554e,0 16px 30px #0008,inset 0 0 0 6px #fff0c8;}
#mission .scenePrompt small{font-size:18px;margin-bottom:14px}
#mission .choiceDeck{top:427px;right:49px;width:705px;gap:13px;padding:9px 0 4px;min-height:151px;background:linear-gradient(#391c50e5,#391c50e5);border-radius:22px;box-shadow:0 6px 18px #0008;}
#mission .choice{min-height:133px;font-size:26px;margin:0 4px;}
/* Give each location small moving environmental life, without obscuring the task. */
#mission:has(.cafeChoices) #monsterFace{animation:monsterIdle 2s ease-in-out infinite alternate;}
#fx{position:absolute;inset:0;pointer-events:none;z-index:50}
.throwing{position:absolute;z-index:49;pointer-events:none;filter:drop-shadow(0 7px 10px #0008);transform-origin:center}.throwing svg{width:110px;height:98px}

/* ── Monster Café, in-world interaction redesign ────────────── */
#mission.cafeScene #missionNav{
 top:auto;bottom:11px;height:59px;left:19px;right:19px;
 background:linear-gradient(90deg,#2c1039e8,#491b60ed,#2c1039e8);
 border:2px solid #ffc474b8;box-shadow:0 5px 18px #0008;border-radius:18px;
}
#mission.cafeScene #missionNav .buttonPurple{font-size:19px;padding:7px 14px}
#mission.cafeScene #levelName{font-size:19px;padding:8px 14px;letter-spacing:.4px;border-radius:12px}
#mission.cafeScene #quickNav{display:flex;gap:7px}
#mission.cafeScene #progress{font-size:20px;padding:6px 12px}
#mission.cafeScene #zoneTitle{display:none}
#mission.cafeScene #feedback{top:89px}
#mission.cafeScene #missionBackdrop{filter:saturate(1.09) contrast(1.04);}
#mission.cafeScene #sceneWorld{isolation:isolate}
.cafeWorldLights{position:absolute;inset:0;pointer-events:none;z-index:1}
.cafeWorldLights i{position:absolute;display:block;width:5px;height:5px;border-radius:50%;background:#ffe595;
 box-shadow:0 0 12px 5px #ffca5378;animation:cafeFirefly 5s ease-in-out infinite alternate}
.cafeWorldLights i:nth-child(1){left:48%;top:31%;animation-delay:-1s}
.cafeWorldLights i:nth-child(2){left:60%;top:66%;animation-delay:-3s}
.cafeWorldLights i:nth-child(3){left:92%;top:47%;animation-delay:-4s}
.cafeWorldLights i:nth-child(4){left:83%;top:82%;animation-delay:-2s}
.cafeWorldLights i:nth-child(5){left:36%;top:22%;animation-delay:-5s}
@keyframes cafeFirefly{from{transform:translate(0,0);opacity:.18}to{transform:translate(20px,-27px);opacity:.86}}
.cafeOrderStage{
 position:absolute;left:865px;top:174px;width:650px;height:320px;
 z-index:8;pointer-events:none;animation:cafeBoardIn .6s cubic-bezier(.2,1.4,.3,1) both;
}
@keyframes cafeBoardIn{from{transform:translateY(-55px) rotate(-3deg);opacity:0}to{transform:translateY(0) rotate(0);opacity:1}}
.cafeHangingCord{position:absolute;top:-86px;width:5px;height:112px;border-radius:4px;
 background:repeating-linear-gradient(135deg,#9c6335 0 5px,#e9ae5f 6px 8px);filter:drop-shadow(2px 2px 2px #0008)}
.cafeHangingCord.left{left:60px}.cafeHangingCord.right{right:60px}
.cafeWoodBoard{position:relative;width:100%;height:100%;border:11px solid #905022;border-radius:22px;
 box-shadow:inset 0 0 0 4px #f6c274,0 14px 0 #472037,0 22px 25px #15041dd9;
 background:linear-gradient(90deg,#8f4a20,#d68d3c 6%,#b16b32 13%,#dca55c 52%,#ab632c 89%,#d38c42 96%);
 display:flex;align-items:center;justify-content:center;padding:16px;overflow:visible}
.cafeWoodBoard:before,.cafeWoodBoard:after{content:'';position:absolute;width:16px;height:16px;border-radius:100%;
 background:radial-gradient(circle at 35% 25%,#fff6bf 0 15%,#b57228 38%,#653415 90%);top:10px;box-shadow:0 0 2px #000}
.cafeWoodBoard:before{left:12px}.cafeWoodBoard:after{right:12px}
.cafeOrderPaper{position:relative;width:100%;height:100%;background:
 radial-gradient(circle at 20% 12%,#fff8df 0,#ffedbf 54%,#ebcb8f 100%);border-radius:12px;
 box-shadow:inset 0 0 0 3px #fdf6d8, inset 0 0 0 6px #dfa85f,0 4px 13px #432018;
 color:#4e2344;padding:20px 30px 16px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.cafeOrderPaper:before,.cafeOrderPaper:after{content:'✦';position:absolute;color:#b17038;font-size:24px;top:12px}
.cafeOrderPaper:before{left:15px}.cafeOrderPaper:after{right:15px}
.cafeOrderHeading{font-size:16px;letter-spacing:3px;font-weight:900;color:#9d5837;padding-bottom:8px}
.cafeOrderSentence{font-size:36px;line-height:1.22;font-weight:1000;max-width:550px;text-wrap:balance;text-shadow:0 1px #fff4df}
.cafeOrderFooter{font-size:14px;letter-spacing:1.4px;color:#a76c44;font-weight:800;margin-top:13px}
.cafeOrderStage.stamped .cafeWoodBoard{animation:cafeStamp .45s ease-out}
@keyframes cafeStamp{40%{transform:scale(1.045) rotate(-1deg);filter:brightness(1.2)}100%{transform:scale(1)}}
.cafeChooseLabel{position:absolute;left:880px;top:513px;width:615px;text-align:center;color:#ffeda9;
 font-size:19px;font-weight:1000;letter-spacing:2px;text-shadow:0 3px 6px #180723,1px 2px #411b40;z-index:8}
.cafeChoiceDeck{position:absolute;left:870px;top:555px;width:645px;display:grid;grid-template-columns:repeat(2,1fr);
 gap:17px;z-index:9;pointer-events:auto;}
.cafeServingChoice{position:relative;height:139px;border-radius:19px;background:linear-gradient(#eabf6a 0%,#be7b36 8%,#79411f 85%,#613019 100%);
 border:6px solid #f5d18a;color:#fff6d9;box-shadow:inset 0 0 0 3px #713d23,0 8px 0 #33182b,0 13px 18px #11081ac9;
 display:flex;align-items:center;justify-content:center;gap:12px;transition:transform .16s ease,filter .16s ease;cursor:pointer;
 font-size:31px;font-weight:1000;letter-spacing:1px;text-shadow:0 3px #54253a;}
.cafeServingChoice:hover{transform:translateY(-8px) rotate(-1deg);filter:brightness(1.18) saturate(1.12)}
.cafeServingChoice:focus-visible{outline:5px solid #a6ffef;outline-offset:5px}
.cafeServingChoice:active{transform:translateY(0) scale(.985)}
.cafeServingChoice .clocheIcon{width:69px;height:62px;filter:drop-shadow(0 4px 2px #28111baa)}
.cafeServingChoice .clocheIcon path{stroke:#532c35;stroke-width:3;stroke-linejoin:round}
.cafeServingChoice.good{background:linear-gradient(#8bdd89,#42aa67 70%,#237044)}
.cafeServingChoice.bad{animation:shake .35s}
.cafeServingChoice:disabled{cursor:default}
.cafeSceneProgress{position:absolute;right:107px;top:735px;color:#ffe7b5;z-index:9;font-weight:900;font-size:17px;
 background:#301534d6;padding:10px 16px;border:2px solid #ffc474;border-radius:14px;box-shadow:0 4px 12px #0007}
#cafeTableTreats{position:absolute;left:270px;top:684px;min-width:160px;max-width:440px;height:90px;z-index:8;display:flex;
 align-items:center;gap:0;pointer-events:none;transform-origin:center;}
.cafeTreat{width:89px;height:75px;flex-shrink:0;display:grid;place-items:center;background:radial-gradient(ellipse,#fff8e0 0 34%,#e7a8b3 39%,#77436b 57%,transparent 60%);animation:platePop .35s ease-out both;filter:drop-shadow(0 5px 5px #0008);margin-left:-6px}
.cafeTreat svg{width:66px;height:61px}
.cafeCustomerBubble{position:absolute;left:460px;top:205px;background:#fff5d4;border:5px solid #ad733d;border-radius:22px 22px 22px 3px;
 color:#47214b;font-weight:1000;font-size:28px;padding:12px 21px;z-index:11;pointer-events:none;
 box-shadow:0 9px 18px #1d0a25ab;animation:bubbleHello .65s cubic-bezier(.22,1.55,.3,1) both}
@keyframes bubbleHello{0%{transform:scale(.1) rotate(-12deg);opacity:0}100%{transform:scale(1);opacity:1}}
.cafeMagicalStamp{position:absolute;right:155px;top:275px;border:7px double #43a968;color:#328957;
 font-size:41px;font-weight:1000;padding:12px 25px;transform:rotate(-12deg);z-index:19;pointer-events:none;
 border-radius:12px;text-shadow:0 1px white;animation:cafeStampAppear .75s ease both}
@keyframes cafeStampAppear{0%{opacity:0;transform:rotate(-35deg) scale(2.5)}50%{opacity:1;transform:rotate(-12deg) scale(.88)}100%{opacity:1;transform:rotate(-12deg) scale(1)}}


/* ═══════════════ V8 · SHARED MISSION DESIGN SYSTEM ═══════════════ */
#mission { --panel-x:850px; --panel-width:676px; --cream2:#fff5d9; --ink:#492448; font-family:'Trebuchet MS',Verdana,sans-serif; }
#missionNav, #mission.cafeScene #missionNav {
  top:14px !important; bottom:auto !important; left:25px; right:25px; height:73px;
  padding:8px 14px; z-index:30; gap:12px;
  background:linear-gradient(180deg,rgba(42,19,65,.96),rgba(35,14,57,.94));
  border:2px solid #f4c878; border-radius:21px;
  box-shadow:0 8px 0 #1c0b2c83,0 13px 22px #0007;
}
#mission #goMap, #mission.cafeScene #goMap {
  border:2px solid #e6c0fd; border-radius:13px;
  background:linear-gradient(180deg,#7c48ab 0%,#58307f 90%);
  color:#fff8df; font-size:20px; font-weight:900;
  min-width:130px; height:48px; padding:7px 16px; box-shadow:0 4px #311746;
}
#mission #levelName, #mission.cafeScene #levelName {
  flex:0 1 auto; max-width:525px; min-width:0;
  border-radius:13px; padding:10px 17px;
  font-size:21px; white-space:nowrap; letter-spacing:.5px;
  background:linear-gradient(180deg,#704277,#4c2a65); border:2px solid #ffda88;
  color:#ffefbe; text-shadow:0 2px #33172e;
}
#mission #quickNav, #mission.cafeScene #quickNav {display:flex;gap:8px;margin-left:auto;flex-shrink:0;}
#mission #quickNav button, #mission.cafeScene #quickNav button {
  width:42px;height:42px;border-radius:12px;
  background:linear-gradient(#58377a,#402358);
  border:2px solid #ffe5aa;color:#fff4d6;font-size:18px;
  font-family:inherit;font-weight:900;box-shadow:0 3px 0 #291234;
  transition:transform .16s,filter .16s;
}
#mission #quickNav button.active{background:linear-gradient(#ffc467,#e88e38);color:#4b273c;box-shadow:0 3px 0 #a35b27}
#mission #quickNav button:hover{filter:brightness(1.2);transform:translateY(-2px)}
#mission #progress, #mission.cafeScene #progress {
  min-width:216px;height:50px;display:flex;align-items:center;justify-content:center;
  border-radius:14px;border:2px solid #eec581;background:#29143d;
  font-size:20px;font-family:inherit;font-weight:900;color:#fff3cc;padding:7px 10px;gap:13px;
}
#mission #progressTrack{width:117px;height:13px;background:#170d28;border:2px solid #bb90a9;}
#mission #zoneTitle, #mission.cafeScene #zoneTitle {
  display:block;top:auto;bottom:21px;left:25px;max-width:560px;
  background:rgba(32,14,46,.88);border:2px solid #ffcf81;
  border-radius:16px;padding:9px 17px;color:#ffe9b8;
  font-size:18px;font-weight:800;line-height:1.2;text-shadow:0 2px #210d30;
}
/* Key fix: old cafe rules set top AND bottom causing a giant vertical TRY AGAIN capsule. */
#mission #feedback, #mission.cafeScene #feedback {
  position:absolute;left:50%;top:102px !important;bottom:auto !important;
  transform:translateX(-50%);width:auto;min-width:200px;max-width:620px;
  border-radius:18px;font-size:22px;line-height:1.15;padding:10px 25px;
  background:#402352ef;color:#fff6d5;border:2px solid #ffe0a5;
  box-shadow:0 9px 22px #1b082d7a;white-space:nowrap;
  height:auto !important;min-height:0 !important;
  z-index:28;pointer-events:none;
}
#mission #sceneWorld {isolation:isolate;}
/* A single parchment component for every question, same typographic hierarchy. */
#mission .scenePrompt,
#mission.cafeScene .scenePrompt,
#mission .deliveryBoard {
  position:absolute;left:var(--panel-x);right:auto;top:166px;
  width:var(--panel-width);min-height:226px;max-height:226px;height:226px;
  z-index:12;margin:0;padding:28px 36px 24px;
  border:8px solid #a66436;border-radius:25px;
  background:linear-gradient(145deg,#fff4d8 0%,#ffe0a4 70%,#f2bd7d 100%);
  box-shadow:inset 0 0 0 4px #fff5ce,0 8px 0 #67384a,0 15px 25px #0007;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#502c4e;
  font-size:35px;font-weight:900;line-height:1.2;
  text-shadow:none;
  animation:uiCardEnter .35s cubic-bezier(.2,1.1,.4,1) both;
}
#mission .scenePrompt>div {width:100%;}
#mission .scenePrompt small,
#mission .deliveryBoard small {
  display:block;font-size:17px;font-weight:900;letter-spacing:2.4px;
  text-transform:uppercase;color:#9e5535;margin:0 0 15px;line-height:1.15;
}
#mission .scenePrompt p, #mission .deliveryBoard p {margin:0;font-size:35px;line-height:1.18;font-weight:900;color:#4f2a4b;}
#mission .choiceDeck, #mission.cafeScene .choiceDeck {
  position:absolute;left:var(--panel-x);right:auto;top:412px;width:var(--panel-width);
  display:flex;align-items:stretch;gap:15px;padding:0;margin:0;
  height:124px;min-height:124px;max-height:124px;
  background:transparent;border:none;box-shadow:none;z-index:13;pointer-events:auto;
}
#mission .choice, #mission.cafeScene .choice,
#mission .cafeServingChoice {
  position:relative;min-width:0;min-height:124px;height:124px;flex:1;
  border:5px solid #ffdb94;border-radius:22px;
  background:linear-gradient(180deg,#a468b6 0%,#744396 49%,#5b2e7b 100%);
  box-shadow:inset 0 4px 0 #ffffff52,inset 0 -7px 0 #492165,0 8px 0 #31183c,0 14px 19px #0008;
  color:#fff6db;font-size:27px;font-weight:900;font-family:inherit;line-height:1.12;
  text-shadow:0 3px 0 #4e2866;letter-spacing:.3px;
  padding:15px 13px;margin:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  transition:transform .15s,filter .15s,box-shadow .15s;cursor:pointer;touch-action:manipulation;
}
#mission .choice:hover,#mission .cafeServingChoice:hover{
  filter:brightness(1.2) saturate(1.08);transform:translateY(-6px) scale(1.018);
  box-shadow:inset 0 3px 0 #ffffff65,0 13px 0 #31183c,0 21px 25px #0008;
}
#mission .choice:active,#mission .cafeServingChoice:active{transform:translateY(3px) scale(.99);}
#mission .choice.good,#mission .cafeServingChoice.good {background:linear-gradient(#7bdb9c,#2b9467)!important;border-color:#e3ffd7;}
#mission .choice.bad,#mission .cafeServingChoice.bad{animation:shake .33s;}
#mission .choice:focus-visible,#mission .crate:focus-visible{outline:5px solid #9bffdf;outline-offset:3px}
@keyframes uiCardEnter {from {opacity:0;transform:translateY(15px) scale(.975)}to {opacity:1;transform:none}}
/* Delivery zone uses the SAME question and button look, with a slightly different spatial game mechanic. */
#mission.deliveryScene .deliveryBoard {height:136px;max-height:136px;min-height:136px;top:149px;}
#mission.deliveryScene .deliveryBoard p{font-size:30px;}
#mission.deliveryScene #cargoFood {
 left:991px;top:306px;width:396px;height:190px;
 background:linear-gradient(150deg,#fff9e2,#ffdda0);
 border:6px solid #fff1cb;border-radius:24px;
 box-shadow:inset 0 0 0 4px #e3b877,0 8px 0 #805448,0 18px 25px #0008;
 z-index:14;gap:0;animation:uiCardEnter .3s both;
}
#mission.deliveryScene #cargoFood .foodArt {height:112px;width:146px;max-width:146px;flex-shrink:0}
#mission.deliveryScene #cargoFood strong {font:900 31px 'Trebuchet MS',Verdana,sans-serif;color:#4f2a4b;letter-spacing:.3px}
#mission.deliveryScene .crates {
 left:757px;right:auto;bottom:106px;width:761px;height:155px;
 display:flex;gap:16px;align-items:stretch;justify-content:center;
 z-index:13;
}
#mission.deliveryScene .crate {
 position:relative;height:151px;flex:1;min-width:0;
 background:linear-gradient(180deg,#9b669b,#713e85 65%,#552d68);
 border:5px solid #f9d28d;border-radius:21px;
 box-shadow:inset 0 4px 0 #fff5cb45,inset 0 -6px #4b255b,0 8px 0 #331c3d,0 16px 18px #0007;
 font:900 24px 'Trebuchet MS',Verdana,sans-serif;
 text-shadow:0 2px #552457;color:#fff0ca;letter-spacing:.15px;
 transition:transform .15s,filter .15s,box-shadow .15s;
}
#mission.deliveryScene .crate::before {content:'';position:absolute;inset:10px;border:2px dashed #ffe4a37a;border-radius:13px;pointer-events:none;}
#mission.deliveryScene .crate:hover {transform:translateY(-6px);filter:brightness(1.2);}
#mission.deliveryScene .crate.hit {box-shadow:0 0 28px #d9ff9d;}
/* Avoid duplicate cartoon overlays: character / cauldrons are already present in the illustrations. */
#mission #witchWand,#mission #brewPot,#mission #monsterFace,#mission #serveCounter,
#mission #truckScale,#mission #finalCauldron {display:none!important;}
/* Tiny live-world effects remain, but stay outside text/answer zones. */
.worldSparkles {position:absolute;left:20px;top:140px;width:760px;height:620px;z-index:6;pointer-events:none;overflow:hidden;}
.worldSparkles i {position:absolute;border-radius:50%;width:7px;height:7px;background:#f9efaa;
 box-shadow:0 0 10px 4px #ffe6a38a;animation:worldTwinkle 3.8s ease-in-out infinite alternate;}
@keyframes worldTwinkle {from {transform:translate(0,8px) scale(.55);opacity:.2}to {transform:translate(21px,-22px) scale(1.1);opacity:.95}}
/* Completion counts are small and consistent; never placed over the navigation. */
#mission #recipeProgress {position:absolute;left:962px;top:587px;bottom:auto;right:auto;width:455px;gap:10px;justify-content:center;pointer-events:none;}
#mission .recipeDot {width:32px;height:32px;}
#mission .questDecorTag {position:absolute;left:var(--panel-x);top:556px;width:var(--panel-width);text-align:center;
 color:#fff0c8;font-size:19px;font-weight:900;letter-spacing:1px;text-shadow:0 2px 6px #180720;pointer-events:none;}
#mission #cafeTableTreats {left:226px;top:698px;width:420px;max-width:420px;height:74px;}
#mission .cafeTreat {width:73px;height:63px;}
#mission .cafeTreat svg {width:56px;height:51px;}
#mission .orderTicker {position:absolute;left:var(--panel-x);top:555px;width:var(--panel-width);
 text-align:center;color:#ffe9ac;text-shadow:0 2px #291029;font-weight:900;font-size:19px;}
#mission .scenePrompt:has(.orderStars) small {color:#a15b3b;}
@media(prefers-reduced-motion:reduce){
 #mission .scenePrompt,#mission #cargoFood,.worldSparkles i{animation:none!important}
 #mission .choice,#mission .crate {transition:none!important}
}


/* ========== V9: Balanced, consistent 16:9 stage composition ========== */
/* Every scene reserves the left ~55% for the illustrated character and
   places a unified, vertically-centered activity zone on the right. */
#mission {
  --panel-x:892px;
  --panel-width:622px;
  --ui-ink:#4c2b50;
  --ui-cream:#fff1cf;
}
#mission .scenePrompt,
#mission.cafeScene .scenePrompt {
  left:var(--panel-x);
  right:auto;
  top:282px;
  width:var(--panel-width);
  height:198px;
  min-height:198px;
  max-height:198px;
  padding:23px 29px 21px;
  border-width:6px;
  border-radius:24px;
  box-shadow:inset 0 0 0 3px #fff8db,0 7px 0 #744553,0 14px 23px #12071972;
}
#mission .scenePrompt small,
#mission.cafeScene .scenePrompt small {
  font-family:'Trebuchet MS',Verdana,sans-serif;
  font-size:15px;
  font-weight:900;
  letter-spacing:2px;
  margin-bottom:13px;
  line-height:1.1;
}
#mission .scenePrompt p,
#mission.cafeScene .scenePrompt p {
  font-family:'Trebuchet MS',Verdana,sans-serif;
  font-size:32px;
  font-weight:900;
  line-height:1.23;
  overflow-wrap:break-word;
  color:var(--ui-ink);
}
#mission .choiceDeck,
#mission.cafeScene .choiceDeck {
  left:var(--panel-x);
  right:auto;
  top:505px;
  width:var(--panel-width);
  height:116px;
  min-height:116px;
  max-height:116px;
  gap:13px;
}
#mission .choice,
#mission.cafeScene .choice,
#mission .cafeServingChoice {
  min-height:116px;
  height:116px;
  padding:12px 11px;
  border-radius:20px;
  border-width:4px;
  font-family:'Trebuchet MS',Verdana,sans-serif;
  font-size:25px;
  box-shadow:inset 0 3px 0 #ffffff52,inset 0 -6px 0 #492165,0 7px 0 #31183c,0 13px 18px #0007;
}
#mission .questDecorTag,
#mission .orderTicker {
  left:var(--panel-x);
  top:646px;
  width:var(--panel-width);
  font-family:'Trebuchet MS',Verdana,sans-serif;
  font-size:17px;
  line-height:1.2;
  letter-spacing:.3px;
}
#mission #recipeProgress {
  left:var(--panel-x);
  top:649px;
  width:var(--panel-width);
  right:auto;
  justify-content:center;
  gap:11px;
}
#mission .recipeDot {width:29px;height:29px;}
#mission #cafeTableTreats {left:210px;top:694px;}
/* Delivery is taller because its answer item moves into real sorting zones. */
#mission.deliveryScene .deliveryBoard {
  left:var(--panel-x);
  top:198px;
  width:var(--panel-width);
  height:144px;
  max-height:144px;
  min-height:144px;
  padding:17px 25px;
  border-width:6px;
  border-radius:23px;
}
#mission.deliveryScene .deliveryBoard small {font-size:14px;letter-spacing:2px;margin-bottom:10px;}
#mission.deliveryScene .deliveryBoard p {font-size:27px;line-height:1.16;}
#mission.deliveryScene #cargoFood {
  left:1024px;
  top:361px;
  width:358px;
  height:176px;
  border-width:5px;
  border-radius:22px;
  gap:0;
  box-shadow:inset 0 0 0 3px #e3b877,0 6px 0 #805448,0 13px 21px #0008;
}
#mission.deliveryScene #cargoFood .foodArt {height:105px;width:139px;max-width:139px;}
#mission.deliveryScene #cargoFood strong {font-size:27px;line-height:1.2;}
#mission.deliveryScene .crates {
  left:var(--panel-x);
  top:570px;
  bottom:auto;
  right:auto;
  width:var(--panel-width);
  height:135px;
  gap:15px;
  align-items:stretch;
}
#mission.deliveryScene .crate {
  height:132px;
  border-width:4px;
  border-radius:19px;
  font-family:'Trebuchet MS',Verdana,sans-serif;
  font-size:23px;
  box-shadow:inset 0 3px 0 #fff5cb45,inset 0 -5px #4b255b,0 7px 0 #331c3d,0 13px 17px #0007;
}
#mission.deliveryScene .crate:before {inset:9px;border-width:2px;}
#mission.deliveryScene .questDecorTag {top:721px;font-size:16px;}
/* Short navigation and notices never collide with the activity. */
#mission #feedback,#mission.cafeScene #feedback {top:101px!important;font-size:19px;max-width:560px;}
#mission #zoneTitle,#mission.cafeScene #zoneTitle {bottom:19px;left:23px;max-width:550px;font-size:17px;}
@media(prefers-reduced-motion:reduce){
 #mission .scenePrompt,#mission .deliveryBoard,#mission #cargoFood{animation:none!important}
}


/* ═════ HALLOWEEN 10 — STORY MODE / TEACHER MODE ═════ */
#coverCard{width:700px;bottom:32px;padding:20px 28px 24px;}
#coverCard h1{font-size:35px}
#coverCard p{font-size:20px;line-height:1.32}
.modeRibbon{display:inline-flex;gap:9px;align-items:center;border:2px solid #ffd895;border-radius:999px;
  background:#361c56ed;padding:8px 18px;margin-bottom:12px;letter-spacing:1.2px;
  color:#fff5c9;font-size:16px;font-weight:1000;box-shadow:0 5px 10px #0007}
.modeRibbon.student{background:#5c295c}.modeRibbon.teacher{background:#23596c}
#freeLabel{font-size:18px;padding:9px 19px;left:50%;transform:translateX(-50%);top:833px;white-space:nowrap;}
#mapHUD .modeChip{border-radius:14px;padding:11px 14px;background:linear-gradient(#754c91,#39215b);
  border:2px solid #ffdf9e;font-size:17px;font-weight:1000;letter-spacing:.6px;color:#fff5d7;}
#mapHUD .fxMapToggle{font-size:20px;min-width:46px}
#map .hotspot.isLocked{cursor:pointer;}
#map .hotspot.isLocked:hover{border:3px solid #ffce80a8;background:rgba(36,10,51,.09)}
#map .levelSeal{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:6px;min-width:103px;height:109px;border-radius:26px;
  color:#fff2c7;font-weight:1000;font-size:15px;letter-spacing:.9px;
  background:linear-gradient(150deg,#5d3279ee,#2b163feF);border:4px solid #f5cf8e;
  box-shadow:inset 0 3px #ffffff45,0 9px 0 #241032,0 15px 24px #100520bb;pointer-events:none;
  animation:sealBreathe 2.7s ease-in-out infinite alternate}
#map .levelSeal svg{width:43px;height:47px;filter:drop-shadow(0 4px 3px #1e1027)}
@keyframes sealBreathe{to{filter:brightness(1.13);transform:translate(-50%,-50%) scale(1.03)}}
#map .hotspot.justUnlocked::after{content:'UNLOCKED!';position:absolute;left:50%;top:25%;transform:translateX(-50%);
  background:#fff0c9;border:4px solid #efa44e;color:#5e2863;padding:9px 14px;border-radius:15px;
  font-size:23px;font-weight:1000;white-space:nowrap;animation:unlockSplash 2.5s ease both;pointer-events:none}
@keyframes unlockSplash{0%{opacity:0;transform:translate(-50%,30px) scale(.2)}15%{opacity:1;transform:translate(-50%,-6px) scale(1.1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-43px)}}
#mapNotice{position:absolute;left:50%;top:105px;transform:translateX(-50%);display:none;
  color:#fff1cf;background:linear-gradient(#704081,#3d1a60);border:3px solid #ffe59c;border-radius:19px;
  box-shadow:0 12px 20px #160825bd;padding:14px 25px;white-space:nowrap;font-weight:900;font-size:22px;z-index:17;}
#mapNotice.active{display:block;animation:noticeBop 2s ease both;}
@keyframes noticeBop{0%{opacity:0;transform:translate(-50%,-25px)}15%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-12px)}}
#missionNav #quickNav button.lockedNav{opacity:.43;filter:grayscale(1);cursor:not-allowed}
#missionNav #quickNav button.lockedNav:hover{transform:none;filter:grayscale(1)}
#missionNav #quickNav button.done{border-color:#b5ffbd}
/* The teacher toolbar is part of the fixed-size stage, never a scrolled panel. */
#teacherTools{position:absolute;right:29px;bottom:19px;z-index:24;display:none;align-items:center;
  gap:9px;width:955px;height:65px;padding:8px 11px;border:3px solid #ffe0a5;border-radius:18px;
  background:linear-gradient(160deg,#442466ef,#221435fa);box-shadow:0 8px 18px #0b0615b9;}
.teacherMode #teacherTools{display:flex}
.teacherMode #mission #zoneTitle{bottom:33px;max-width:560px;font-size:17px}
#teacherTools button,#teacherTools select{height:44px;background:linear-gradient(#81509d,#4c286c);
  color:#fff3ca;border:2px solid #f6ca90;border-radius:11px;font-weight:900;font-size:17px;
  padding:6px 12px;box-shadow:0 3px 0 #1b0d2d;white-space:nowrap}
#teacherTools button:hover,#teacherTools select:hover{filter:brightness(1.2)}
#teacherTools button:disabled{opacity:.42;cursor:default}
#teacherTools select{max-width:263px;width:260px;text-overflow:ellipsis}
#teacherTools option{color:#20152c;background:#fff3db}
#teacherTools .teacherCaption{font-size:15px;font-weight:1000;color:#ffe2a4;line-height:1.1;text-align:center;white-space:nowrap}
#teacherTools .tealControl{background:linear-gradient(#279982,#176555);border-color:#adffd4}
/* Every environment has its own small optional discoverable interactions. */
#sceneLife{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.worldSecret{display:none!important;position:absolute;place-items:center;width:73px;height:74px;pointer-events:none;
  background:radial-gradient(circle,#fff1bc55 0 23%,#ffcc5340 38%,transparent 69%);border:0;
  border-radius:50%;color:#fff6bb;text-shadow:0 5px 12px #28173c;
  font-size:45px;filter:drop-shadow(0 4px 3px #28153d);animation:secretBob 3s ease-in-out infinite alternate;
  transition:transform .2s;z-index:4;}
.worldSecret:hover{transform:scale(1.16) rotate(7deg);filter:brightness(1.3) drop-shadow(0 3px 11px #ffd457)}
/* Stationary hit target for mouse and classroom smart boards; only the sparkle halo moves. */
.worldSecret{animation:none!important}.worldSecret::after{content:'';position:absolute;inset:-10px;border-radius:50%;border:2px solid #ffe29291;animation:secretRing 2.8s ease-in-out infinite alternate;pointer-events:none}@keyframes secretRing{to{transform:scale(1.12);opacity:.24}}
.worldSecret.found{opacity:.65;filter:saturate(.7)}
@keyframes secretBob{to{translate:0 -13px;filter:drop-shadow(0 3px 13px #e9b0ff)}}
.secretPop{position:absolute;z-index:25;background:#fff2cb;color:#58334e;border:5px solid #e2a05d;
  border-radius:21px;font-size:23px;font-weight:1000;box-shadow:0 12px 15px #160b29a8;
  padding:13px 20px;pointer-events:none;animation:secretAppears 1.5s ease both;max-width:370px;text-align:center}
@keyframes secretAppears{0%{opacity:0;scale:.3;translate:0 30px}18%{opacity:1;scale:1.05;translate:0 -8px}75%{opacity:1}100%{opacity:0;translate:0 -23px}}
.sceneFirefly{position:absolute;width:9px;height:9px;box-shadow:0 0 14px 4px #f9e993b5;
  border-radius:50%;background:#fff9c4;animation:fireflyRoam 5s ease-in-out infinite alternate}
@keyframes fireflyRoam{to{transform:translate(35px,-30px);opacity:.22}}
.sceneSpider{display:none!important;position:absolute;left:-100px;bottom:100px;width:65px;height:65px;
  animation:miniSpider 25s linear infinite;opacity:.8}
.sceneSpider svg{width:100%;height:100%}
@keyframes miniSpider{to{transform:translateX(1800px) rotate(15deg)}}
.sceneHeroReaction{position:absolute;left:270px;top:275px;z-index:21;pointer-events:none;
  background:linear-gradient(#fff5d7,#f8d9a9);color:#593256;border-radius:20px 20px 20px 4px;
  border:5px solid #b36a35;padding:13px 22px;font-size:25px;font-weight:1000;max-width:370px;
  box-shadow:0 9px 17px #0009;animation:reactionPop .88s ease both;}
@keyframes reactionPop{0%{opacity:0;transform:scale(.12) translateY(80px)}19%{opacity:1;transform:scale(1.1) translateY(-8px)}65%{opacity:1}100%{opacity:0;transform:scale(1) translateY(-25px)}}
.sceneRewardBox{position:absolute;left:630px;top:585px;display:grid;place-items:center;pointer-events:none;
  color:#fff6ca;text-shadow:0 2px #541a3b;font-size:38px;font-weight:900;z-index:22;
  animation:parcelWhoosh .86s ease-in forwards;}
.sceneRewardBox svg{width:124px;height:114px;filter:drop-shadow(0 12px 8px #160725)}
@keyframes parcelWhoosh{0%{transform:translate(370px,82px) scale(.5) rotate(5deg);opacity:0}20%{opacity:1}55%{transform:translate(10px,-110px) scale(1.25) rotate(-12deg)}100%{transform:translate(-320px,-190px) scale(.2) rotate(25deg);opacity:0}}
.sceneBell{position:absolute;left:690px;bottom:97px;z-index:18;pointer-events:none;animation:bellShake .6s ease both;font-size:85px;filter:drop-shadow(0 4px 5px #000b)}
@keyframes bellShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-17deg)}55%{transform:rotate(19deg)}75%{transform:rotate(-11deg)}}
.sceneRecipeLeaf{position:absolute;bottom:170px;left:500px;z-index:20;pointer-events:none;
  font-size:80px;animation:recipeFly .9s ease-in forwards;filter:drop-shadow(0 8px 12px #1a0a33)}
@keyframes recipeFly{0%{opacity:0;transform:translate(450px,-70px) scale(1.3) rotate(20deg)}40%{opacity:1}100%{opacity:0;transform:translate(0,0) scale(.3) rotate(260deg)}}
/* Doorway/camera transition: original artwork stays in-world; transition animates viewport. */
#travelFX{position:absolute;inset:0;z-index:75;pointer-events:none;opacity:0;display:none;overflow:hidden;
 background:radial-gradient(ellipse at center,#ad6494 0%,#502475db 58%,#170a2dea 100%);}
#travelFX.play{display:grid;place-items:center;animation:travelPulse .8s ease-in-out both;}
#travelCard{text-align:center;color:#fff1c6;font-weight:1000;filter:drop-shadow(0 8px 4px #0009);
 animation:travelTitle .8s ease-in-out both;}
#travelIcon{font-size:90px;display:block;margin-bottom:12px}
#travelTitle{font-size:39px;color:#ffe3a1;letter-spacing:2px;text-shadow:0 5px #62265b}
#travelTag{font-size:19px;letter-spacing:2px;margin-top:10px;color:#dfffe9}
@keyframes travelPulse{0%{opacity:0;clip-path:circle(4% at 50% 55%)}22%{opacity:1;clip-path:circle(120% at 50% 55%)}62%{opacity:1;clip-path:circle(120% at 50% 55%)}100%{opacity:0;clip-path:circle(5% at 50% 55%)}}
@keyframes travelTitle{0%{opacity:0;transform:scale(.7) translateY(50px)}35%{opacity:1;transform:scale(1.04)}70%{opacity:1}100%{opacity:0;transform:scale(1.25) translateY(-30px)}}
/* Five-key ending takes over the map with a clear celebration sequence. */
#grandFinale{position:absolute;inset:0;z-index:80;display:none;place-items:center;isolation:isolate;
 overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#9c58b84a 0%,#1e0d2bcf 68%,#10071bdc 100%);}
#grandFinale.show{display:grid}
#grandFinale:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,#ffe29c33,transparent 55%);animation:finaleGlow 2s ease-in-out infinite alternate}
@keyframes finaleGlow{to{opacity:.35;transform:scale(1.2)}}
#finaleBoard{position:relative;z-index:3;width:835px;padding:40px 50px 39px;border-radius:40px;text-align:center;
 background:linear-gradient(145deg,#6b3088f4,#32174df5);border:8px solid #ffda82;
 box-shadow:0 17px 0 #1c0b2c,0 28px 65px #000a;color:#fff1cb;
 animation:finaleEntrance .75s cubic-bezier(.2,1.3,.3,1) both}
@keyframes finaleEntrance{from{opacity:0;transform:translateY(140px) scale(.75) rotate(-3deg)}to{opacity:1;transform:translateY(0) scale(1)}}
#finaleBoard h2{font-size:52px;line-height:1.03;color:#ffdb77;text-shadow:0 5px #873f60;margin:10px 0}
#finaleBoard .fiveKeys{font-size:58px;letter-spacing:15px;margin:12px 0;filter:drop-shadow(0 5px 7px #140322)}
#finaleBoard p{font-size:24px;margin:8px 0 26px;line-height:1.35}
#finaleBoard .heroEmblems{font-size:80px;display:flex;justify-content:space-evenly;animation:emblemHop 1.1s ease-in-out infinite alternate}
@keyframes emblemHop{to{transform:translateY(-13px)}}
#finaleBoard button{margin:0 9px}
#finaleSparks{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#finaleSparks i{position:absolute;width:14px;height:21px;border-radius:4px;top:-35px;
 background:var(--paper);animation:fallSparks var(--duration) linear infinite;animation-delay:var(--delay);}
@keyframes fallSparks{0%{transform:translateY(-45px) rotate(0);opacity:1}100%{transform:translateY(1050px) rotate(950deg);opacity:.3}}
.effectsOff #travelFX{display:none!important}
.effectsOff #fx{visibility:hidden}
.effectsOff :is(.lanternGlow,.bat,.flyWitch,.crawler,.sceneFirefly,.sceneSpider,.worldSecret,.sceneRewardBox,.sceneRecipeLeaf,.sceneHeroReaction,#finaleSparks i){animation:none!important}
.effectsOff .art{animation:none!important}
@media (prefers-reduced-motion:reduce){.worldSecret,.sceneSpider,.sceneFirefly{animation:none}}

/* Halloween Food Truck Night — creator credit */
.authorCredit{position:absolute;z-index:32;display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border:2px solid #ffde9c;border-radius:999px;
  font-family:'Trebuchet MS',Verdana,sans-serif;font-size:17px;font-weight:900;
  letter-spacing:.15px;line-height:1;color:#fff2cf;text-decoration:none;
  background:linear-gradient(130deg,#52296ddf,#22113ddf);box-shadow:0 5px 13px #12051d9e;
  white-space:nowrap;transition:transform .18s,filter .18s;}
.authorCredit:hover{filter:brightness(1.15);transform:translateY(-2px)}
.authorCredit:focus-visible{outline:3px solid #7bf4cc;outline-offset:3px}
#coverAuthor{left:23px;bottom:22px}
#mapAuthor{left:24px;bottom:22px}
#missionAuthor{right:24px;top:100px}
#finalAuthor{position:relative;top:auto;left:auto;right:auto;display:inline-flex;margin-top:21px;font-size:18px}

/* Single-file dual mode selection UI */
#coverCard{width:744px;bottom:28px;padding:16px 24px 20px}
#coverCard h1{font-size:33px}
#coverCard p{font-size:18px;margin-bottom:11px}
#modeCover{margin-bottom:8px}
.coverModeSwitch{display:flex;gap:12px;justify-content:center;margin:10px auto 15px;max-width:590px}
.coverModeSwitch button{flex:1;height:51px;border:3px solid #e8c6a0;border-radius:16px;
 background:linear-gradient(#4a2c69,#2f1a48);box-shadow:0 5px #1d0c2d;color:#ffe8bd;
 font-size:19px;font-weight:1000;transition:transform .16s,filter .16s}
.coverModeSwitch button.selected{background:linear-gradient(#ef9a53,#cf643c);color:#fff9e8;border-color:#ffe5a1;box-shadow:0 5px #6a2d46}
.coverModeSwitch button:hover{transform:translateY(-2px);filter:brightness(1.15)}
#coverCard #start{font-size:22px;padding:10px 24px}
#modeMap{cursor:pointer;min-width:154px;white-space:nowrap}
#modeMap:hover{filter:brightness(1.25)}
#missionMode{font-size:18px;font-weight:1000;padding:8px 12px;border-radius:14px;min-width:145px;
 border:2px solid #ffdf9e;color:#ffe9b7;background:linear-gradient(#6a3a87,#42235a);white-space:nowrap}
#missionMode:hover{filter:brightness(1.2);transform:translateY(-1px)}
#modeDialogue{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
 background:#100820cd;backdrop-filter:blur(7px);z-index:110}
#modeDialogue.open{display:flex}
.modeDialogPanel{position:relative;width:740px;max-height:86%;text-align:center;border:6px solid #ffe0a4;
 border-radius:32px;padding:32px 30px 28px;background:linear-gradient(155deg,#623b81,#2e1549);box-shadow:0 24px 65px #000c}
.modeDialogPanel h2{font-size:39px;color:#ffe3a2;margin:0 0 8px}
.modeDialogPanel p{font-size:18px;color:#f9eacb;line-height:1.4;margin:0 auto 22px;max-width:615px}
.modeChoices{display:flex;gap:15px}
.modeChoices button{flex:1;min-height:145px;border:3px solid #f4c782;border-radius:23px;
 background:linear-gradient(#6a3c8b,#45235d);color:#fff7de;padding:15px;
 box-shadow:0 7px #1b0a32;display:flex;flex-direction:column;gap:11px;align-items:center;justify-content:center}
.modeChoices button:hover{background:linear-gradient(#8655a4,#5b2f7d);transform:translateY(-2px)}
.modeChoices button b{font-size:27px}
.modeChoices button small{font-size:15px;line-height:1.35;color:#fff0cf}
.modeClose{margin-top:22px;border:2px solid #ffe0a0;border-radius:13px;padding:9px 21px;
 background:#482763;color:#ffeed0;font-size:19px;font-weight:900}


/* ======================= V12 · HANDS-ON MINI-GAMES ======================= */
#mission #sceneWorld{z-index:15;}
#mission .questBoard{position:absolute;right:60px;top:145px;width:690px;height:625px;z-index:16;display:flex;flex-direction:column;gap:10px;pointer-events:none;font-family:'Trebuchet MS',Verdana,sans-serif;}
#mission .questBoard *{box-sizing:border-box;}
#mission .questHead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 6px;color:#ffe7a9;text-shadow:0 3px 6px #3a173d;font-size:18px;font-weight:1000;letter-spacing:1px;min-height:32px;}
#mission .questType{color:#c4ffe8;font-size:14px;padding:5px 12px;border:1px solid #a7efcf9c;border-radius:999px;background:#28133cb8;white-space:nowrap;}
#mission .questPrompt{display:grid;place-items:center;text-align:center;min-height:92px;max-height:135px;padding:12px 30px;border:5px solid #ffe9ba;border-radius:23px;box-shadow:0 7px 0 #995b3e,0 13px 21px #1e0a2a90,inset 0 0 0 3px #dfb27a;background:linear-gradient(150deg,#fff7df,#f7d29d);color:#532c4b;font-size:clamp(22px,2.2vw,30px);font-weight:1000;line-height:1.17;text-wrap:balance;pointer-events:none;}
#mission .questPrompt.compact{min-height:74px;}
#mission .questPlay{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:7px 9px 6px;background:linear-gradient(#2a1436cb,#38144eab);border:2px solid #eabd7999;border-radius:25px;box-shadow:0 10px 26px #1a0b2288;pointer-events:none;}
#mission .questPlay button{pointer-events:auto;}
#mission .questBottom{height:51px;display:flex;justify-content:center;align-items:center;gap:12px;color:#ffe5b4;font-size:18px;font-weight:900;text-shadow:0 2px 3px #110a1d;pointer-events:none;}
#mission .questBottom button{pointer-events:auto;}
#mission .gameBtn{min-height:66px;min-width:110px;border-radius:17px;border:3px solid #ffdf95;background:linear-gradient(#9658af,#63377c);color:#fff6d1;font-size:22px;font-weight:1000;box-shadow:0 6px 0 #2e1541,0 9px 12px #1b0a25b0;transition:transform .15s,filter .15s;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;padding:10px 15px;}
#mission .gameBtn:hover{transform:translateY(-3px);filter:brightness(1.12);}
#mission .gameBtn:active{transform:translateY(2px);}
#mission .gameBtn:disabled{opacity:.48;cursor:default;filter:saturate(.35);transform:none;}
#mission .gameBtn.primary{background:linear-gradient(#ffbf64,#db7942);color:#492044;border-color:#ffe5a5;}
#mission .gameBtn.success{background:linear-gradient(#67dcac,#249a7b);border-color:#baffda;color:#133e3f;}
#mission .gameBtn.selected{background:linear-gradient(#96ffe0,#3cba9b);color:#244849;border-color:#f6ffbf;box-shadow:0 0 0 3px #c7ffbd,0 6px 0 #196f69;}
#mission .gameBtn.bad{animation:shake .35s;}
#mission .gameFood{display:grid;place-items:center;gap:0;padding:9px 13px;background:linear-gradient(#fff5d5,#efbe7d);border:4px solid #ffeac8;border-radius:23px;box-shadow:0 8px 0 #6a385b;color:#572b4e;font-size:24px;font-weight:1000;pointer-events:auto;}
#mission .gameFood .foodArt{width:130px;height:112px;}
#mission .gameFood.dragging{z-index:35;filter:brightness(1.1);cursor:grabbing;}
#mission .sortStage{width:100%;height:100%;display:grid;grid-template-rows:1fr 120px;align-items:center;gap:12px;}
#mission .sortStage .gameFood{width:245px;justify-self:center;cursor:grab;touch-action:none;}
#mission .sortTargets{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
#mission .sortTargets button{min-width:0;font-size:22px;min-height:112px;border:5px solid #eabb79;background:repeating-linear-gradient(0deg,#94552e,#94552e 27px,#a86638 28px,#a86638 47px);color:#fff6cf;text-shadow:0 3px #532c31;border-radius:17px;box-shadow:0 7px 0 #47232e;}
#mission .sortTargets button.dropHover{filter:brightness(1.32);outline:4px solid #fff4a1;}
#mission .taskNote{font-size:21px;color:#fff1cb;text-align:center;text-shadow:0 3px #251237;padding:6px 12px;border-radius:13px;background:#382044c9;min-width:60%;}
#mission .tileGrid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;pointer-events:none;}
#mission .tileGrid .gameBtn{min-width:0;min-height:82px;font-size:19px;padding:9px 7px;line-height:1.1;}
#mission .tileGrid .foodLabel{display:flex;gap:6px;align-items:center;justify-content:center;}
#mission .tinyFood{width:50px;height:49px;flex-shrink:0;}
#mission .platePreview{width:100%;min-height:90px;display:flex;justify-content:center;align-items:center;gap:8px;color:#fff3c8;text-align:center;font-weight:1000;font-size:18px;}
#mission .plateChip{border:2px solid #ffdca3;border-radius:10px;padding:9px 13px;color:#3d2343;background:#fff1cc;box-shadow:0 4px #8b5c4a;font-size:19px;font-weight:900;}
#mission .potionBar{display:flex;justify-content:center;gap:12px;width:100%;}
#mission .potionBar button{flex:1;min-width:0;}
#mission .cauldronPreview{position:relative;height:100px;width:178px;border:7px solid #613872;border-radius:22% 22% 45% 45%;background:radial-gradient(ellipse at 50% 0%,#b6ff76 0 23%,#4cba5e 24% 30%,#321d47 32% 100%);box-shadow:0 0 28px #7bff9699,0 12px #23132e;display:grid;place-items:center;color:#ffeeb1;font-size:22px;font-weight:1000;pointer-events:none;}
#mission .cauldronPreview.celebrate{animation:potWiggle .5s ease-in-out 2;}
@keyframes potWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg) translateY(-8px)}75%{transform:rotate(7deg)}}
#mission .countStepper{display:flex;align-items:center;gap:22px;}
#mission .countStepper button{width:78px;min-width:78px;height:74px;font-size:40px;}
#mission .countValue{width:145px;height:100px;background:#ffe6b9;border:5px solid #ffeacb;border-radius:23px;display:grid;place-items:center;font-size:62px;color:#572349;font-weight:1000;box-shadow:0 7px 0 #764b53;}
#mission .tokenShelf{width:100%;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:9px;min-height:84px;}
#mission .wordTile{background:linear-gradient(#fff9df,#eac58c);color:#522746;border:3px solid #fff2d2;box-shadow:0 5px 0 #815257;border-radius:14px;min-width:65px;min-height:58px;padding:7px 12px;font-size:22px;font-weight:1000;}
#mission .wordTile:hover{transform:translateY(-3px);filter:brightness(1.05);}
#mission .wordTile.used{opacity:.28;pointer-events:none;}
#mission .sentenceRail{width:100%;min-height:95px;border:3px dashed #ffda91b0;background:#fff1ca20;border-radius:17px;display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;padding:12px;}
#mission .sentenceRail .wordTile{background:#c1ffe5;border-color:#a4ffda;font-size:22px;min-height:49px;}
#mission .orderStep{display:flex;gap:11px;align-items:center;justify-content:center;color:#ffe8bc;font-size:19px;font-weight:1000;width:100%;}
#mission .stepDot{width:31px;height:31px;border:3px solid #ffe09e;background:#472859;border-radius:50%;display:grid;place-items:center;font-size:16px;}
#mission .stepDot.done{background:#79efb0;color:#153e40;}
#mission .burgerBuild{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;width:205px;max-height:128px;}
#mission .burgerBun{height:27px;width:190px;background:linear-gradient(#ffca6c,#ba7235);border:3px solid #8a4e2e;border-radius:95px 95px 11px 11px;box-shadow:inset 0 5px #ffdf9a;}
#mission .burgerBun.base{height:20px;border-radius:10px 10px 30px 30px;background:#f5bd60;}
#mission .burgerFill{height:15px;border:2px solid #75493c;width:175px;border-radius:10px;}
#mission .burgerFill.cheese{background:#f7d857;transform:skew(-10deg)}
#mission .burgerFill.tomatoes{background:#f1594e}
#mission .burgerFill.mushrooms{background:#c99862}
#mission .burgerFill.eggs{background:#fff3d0}
#mission .burgerPatty{height:24px;width:176px;background:#7e4630;border:3px solid #563321;border-radius:20px;}
#mission .repairLine{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:10px 12px;}
#mission .repairWord{border:2px solid transparent;border-radius:12px;background:#fff1cd;color:#4f2845;font-size:23px;font-weight:900;padding:9px 9px;min-width:52px;}
#mission .repairWord:hover{outline:3px solid #ffd379;}
#mission .repairWord.active{background:#ffd27b;border-color:#a95b38;}
#mission .repairWord.fixed{background:#bcf3c6;color:#1c5445;}
#mission .repairChoices{display:flex;gap:13px;justify-content:center;min-height:66px;}
#mission .repairChoices button{min-width:180px;}
#mission .seqRow{width:96%;display:flex;justify-content:space-between;align-items:center;background:#ffedc8;border:3px solid #ffe6b6;border-radius:15px;color:#482640;font-weight:900;font-size:18px;padding:9px 11px;gap:11px;box-shadow:0 4px 0 #965b52;pointer-events:auto;}
#mission .seqRow .seqText{flex:1;}
#mission .seqRow button{width:36px;height:36px;min-width:36px;font-size:23px;padding:0;border-radius:9px;background:#6e408b;border:2px solid #a87dd3;color:#fff;}
#mission .seqRow button:disabled{opacity:.25;}
#mission .questBoard .mistakeHelp{font-size:15px;color:#fff0b8;opacity:.93;text-align:center;}
#mission .questStageHint{font-size:18px;color:#e8ffd4;font-weight:800;text-align:center;max-width:560px;}
#mission .questStageHint[aria-live]{min-height:24px;}
#teacherMethod{position:absolute;left:30px;top:106px;z-index:30;background:#fff0c8;color:#56335b;border:2px solid #b97e50;border-radius:18px;padding:12px 17px;width:420px;display:none;font-size:19px;line-height:1.25;box-shadow:0 9px 18px #0008;}
.teacherMode #teacherMethod.visible{display:block;}
#teacherMethodButton{display:none;}
.teacherMode #teacherMethodButton{display:inline-flex;}
body.effectsOff #mission .cauldronPreview{box-shadow:0 7px 0 #25192f;animation:none;}
@media (prefers-reduced-motion: reduce){#mission .questBoard button,#mission .questBoard *{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

/* Educational interaction polish: unified, uncluttered controls */
.questBoard[data-kind="scale"] .magicScaleVisual{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:440px;max-width:100%;margin:2px auto 8px;min-height:145px}
.questBoard[data-kind="scale"] .scalePlate{width:380px;min-height:95px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;padding:8px 15px;border-radius:50% 50% 22px 22px;background:linear-gradient(#f9d7a0,#cf905a);border:5px solid #7d4781;box-shadow:0 7px 0 #603657,0 10px 12px #24112a30}
.questBoard[data-kind="scale"] .scaleUnit{display:inline-flex;width:58px;height:57px;align-items:center;justify-content:center}
.questBoard[data-kind="scale"] .scaleUnit svg{width:52px;height:52px}
.questBoard[data-kind="scale"] .scalePedestal{min-width:145px;text-align:center;padding:5px 16px;border-radius:0 0 18px 18px;background:#704477;color:#ffebb9;font-size:20px;font-weight:900}
.questBoard[data-kind="scale"] .scaleEmpty{font-size:21px;font-weight:800;color:#754b66}
.questBoard[data-kind="scale"] .scaleStepper{margin-top:2px}
.questBoard .recipeAdded{display:flex;justify-content:center;align-items:center;gap:7px;max-width:95%;min-height:55px;flex-wrap:wrap;color:#764677;font-size:16px;font-weight:900}
.questBoard .ingredientChip{background:#ffe6af;border:2px solid #ca965e;border-radius:14px;padding:5px 8px;display:flex;align-items:center;gap:5px}
.questBoard .ingredientChip svg{width:27px;height:25px}
.questBoard .recipeInstruction{min-height:44px;line-height:1.3}
.questBoard .repairWord{transition:transform .16s,background .16s}
.questBoard .repairWord:focus-visible{outline:4px solid #f7bc63}
.questBoard .gameBtn[aria-pressed="true"]{background:linear-gradient(#b3eace,#6cc5a0);color:#284b52}