:root{--pink:#ff769b;--dark:#493c69;--peach:#fff1eb;--gold:#ffc766;--cream:#fffaf4;--mint:#65d4b2}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#ffd8dd;color:#514360;font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif}button{font-family:inherit;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.43;cursor:default}#app{width:100%;height:100vh;height:100dvh;display:grid;grid-template-rows:52px minmax(0,1fr) 42px;background:linear-gradient(135deg,#fff4e4 0,#ffd6e8 48%,#decafb 100%)}.topbar{background:#fffaf5ef;border-bottom:3px solid #eeacc0;display:flex;align-items:center;gap:7px;padding:4px 11px;min-width:0;box-shadow:0 3px 9px #eb9eb82c;z-index:3}.brand{font-size:clamp(13px,1.8vw,23px);font-weight:850;color:#e24f85;letter-spacing:-.5px;white-space:nowrap}.stats{margin-left:auto;display:flex;gap:5px;min-width:0}.stats span{font-size:clamp(10px,1.1vw,15px);font-weight:800;background:#f7e6ff;padding:7px 9px;border-radius:14px;white-space:nowrap}.topbtn{border:2px solid #edb7c7;border-radius:12px;background:white;color:#9d4788;font-weight:950;min-width:33px;min-height:32px;font-size:18px}.board{display:grid;grid-template-columns:minmax(0,41fr) minmax(0,59fr);gap:9px;padding:9px;min-height:0;min-width:0}.guestSide,.kitchen{min-height:0;min-width:0;border:3px solid white;border-radius:22px;background:#fffaf6;box-shadow:0 8px 20px #9b657228;overflow:hidden}.guestSide{display:grid;grid-template-rows:minmax(0,1fr) auto}.room{position:relative;min-height:0;background:linear-gradient(#e4f2ff 0 65%,#ffefda 65%);isolation:isolate;overflow:hidden}.room:after{content:'';position:absolute;bottom:0;width:100%;height:23%;background:repeating-linear-gradient(120deg,#ffcba7 0 18px,#f7b59f 18px 20px,#ffd8b7 20px 38px);z-index:-1}.garland{position:absolute;top:5px;left:12px;color:#e277a2;font-size:25px;letter-spacing:3px}.window{position:absolute;top:17%;left:7%;width:34%;height:42%;border:9px solid #fcf7ea;border-radius:22px;background:linear-gradient(#95d9ed,#b7f4dc);box-shadow:4px 4px #e7b6ab;overflow:hidden}.window:before{content:'';position:absolute;left:50%;top:0;height:100%;width:5px;background:white}.window:after{content:'';position:absolute;top:53%;width:100%;height:6px;background:white}.sun{position:absolute;top:15%;left:15%;font-size:31px}.flower{position:absolute;bottom:0;right:5%;font-size:25px}.shelf{position:absolute;right:5%;top:21%;background:#f8c8ad;border-bottom:8px solid #e7a28d;padding:4px 12px;border-radius:7px;font-size:clamp(12px,2.7vw,30px)}.avatar{position:absolute;bottom:13%;left:50%;transform:translateX(-50%);width:min(58%,310px);height:min(78%,260px);animation:guest-bob 2.5s ease-in-out infinite}.avatar svg{width:100%;height:100%;filter:drop-shadow(0 6px 3px #ac8b9659)}@keyframes guest-bob{50%{transform:translate(-50%,-5px)}}.reaction{position:absolute;top:12%;right:6%;font-size:clamp(24px,6vw,70px);opacity:0;pointer-events:none}.reaction.show{animation:reaction 1.4s both}@keyframes reaction{15%{opacity:1;transform:scale(1.2) rotate(-8deg)}70%{opacity:1;transform:translateY(-8px)}100%{opacity:0;transform:translateY(-30px)}}.room.angry{animation:room-shake .13s linear 7;background:#ffd6d1}@keyframes room-shake{50%{filter:hue-rotate(20deg);transform:translateX(-4px)}}.counter{position:absolute;bottom:0;left:0;right:0;height:18%;min-height:19px;background:linear-gradient(#ffdeac,#eab6a0);border-top:7px solid #e9a18e;display:flex;align-items:center;justify-content:space-around;font-size:clamp(13px,2.9vw,34px)}.guestCard{background:#fff8ff;padding:9px 13px;z-index:1;min-width:0}.guestLine{display:flex;justify-content:space-between;gap:6px;font-size:clamp(12px,1.5vw,18px);color:#b84e81}.guestLine span{font-weight:750;color:#725b9e}.guestCard p{margin:4px 0 8px;line-height:1.25;font-size:clamp(12px,1.5vw,17px);font-weight:650}.customerButtons{display:flex;gap:7px}.btn{border:none;border-radius:13px;padding:10px 11px;font-size:clamp(10px,1.3vw,16px);font-weight:900;white-space:normal;min-height:39px;box-shadow:0 4px #d4a3b2;transition:transform .09s,filter .1s}.btn:active{transform:translateY(3px);box-shadow:0 1px #d4a3b2}.btn.primary{color:white;background:linear-gradient(130deg,#fb5b91,#e64d83)}.btn.ghost{background:#ffe5e5;color:#aa6570}.btn.secondary{background:#d6eefb;color:#467e9d}.btn.serve{background:linear-gradient(120deg,#ffbb54,#ffe09b);color:#765029}.customerButtons .btn:first-child{flex:2}.customerButtons .btn:last-child{flex:1}.kitchen{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;background:#fffdfb;}.recipeCard{background:linear-gradient(120deg,#ffe8cf,#fff5f6);padding:8px 12px;border-bottom:2px dashed #eeb1b8}.recipeHeader{display:flex;justify-content:space-between;font-size:clamp(13px,1.7vw,21px);color:#c34f85;gap:8px}.recipeHeader span{color:#9c6b4a;font-size:clamp(11px,1.4vw,17px)}.recipeChain{display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-height:24px;margin-top:4px}.need{font-size:clamp(10px,1.15vw,14px);border-radius:10px;background:white;padding:4px 6px;border:1px solid #eeabbf;font-weight:800;color:#8b7086}.need.ok{background:#def9e8;border-color:#88d9ad}.need.missing{background:#ffe1db;border-color:#f2a5a2}.methodHint{font-size:clamp(10px,1.1vw,13px);color:#ab7b7d;margin-top:2px}.plateBar{display:flex;align-items:center;gap:7px;padding:5px 8px;min-height:43px;background:#f1efff;border-bottom:1px solid #dbcaea}.plateEmoji{font-size:26px}.plateContents{min-width:0;flex:1;display:flex;align-items:center;gap:5px;overflow-x:auto;scrollbar-width:thin;font-size:clamp(11px,1.1vw,14px);white-space:nowrap;color:#a27b92}.chip{border-radius:18px;background:#fff;padding:4px 7px;color:#6a4a72;display:inline-block;border:1px solid #d9a9d1;cursor:pointer}.microbtn{border:1px solid #dba5bf;border-radius:10px;background:white;font-size:20px;color:#b06491}.tabs{display:flex;gap:3px;padding:5px 6px 1px;overflow-x:auto;scrollbar-width:thin;white-space:nowrap}.tab{border-radius:10px;padding:5px 9px;background:#f4e9f4;color:#9d6586;border:1px solid #eacde0;font-weight:800;font-size:clamp(10px,1.1vw,13px);white-space:nowrap}.tab.current{background:#e779a4;color:white;border-color:#da6a9a}.ingredientGrid{min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(67px,auto);align-content:start;gap:7px;padding:8px 9px;scrollbar-color:#e8aac6 #fff6f3}.ingredient{border:2px solid #f3d6dc;border-radius:14px;background:linear-gradient(180deg,#ffffff,#fff1f4);color:#87596f;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:5px 3px;font-size:clamp(10px,1.1vw,13px);font-weight:750;position:relative}.ingredient:not(:disabled):active{transform:scale(.94)}.ingredient .emoji{font-size:clamp(20px,2.8vw,34px)}.ingredient .qty{font-weight:900;color:#e35c92}.ingredient.empty{background:#f4f2f2;border-color:#ded7d7;filter:grayscale(.45)}.cookButtons{display:grid;grid-template-columns:1fr 1fr .7fr;gap:7px;padding:8px 9px;background:#fff2ee;border-top:2px solid #f3d0cb}footer{border-top:2px solid #efbece;background:#fffbf8;display:flex;gap:9px;align-items:center;padding:5px 11px;font-size:clamp(10px,1.25vw,14px);font-weight:800;white-space:nowrap}.shiftMeter{display:flex;align-items:center;gap:7px;min-width:0}.meter{width:clamp(55px,10vw,160px);height:10px;background:#f3d3dc;border-radius:20px;overflow:hidden}.meter>div{height:100%;width:0;background:#6ec9a8}.shiftMeter span{color:#9d6896}#eventText{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:#ba668f}#timeStat{font-variant-numeric:tabular-nums;color:#a15a86;font-size:14px}.overlay{position:fixed;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;background:linear-gradient(130deg,#8f4678a8,#6653a5a2);backdrop-filter:blur(6px);padding:9px}.overlay.hidden{display:none}.dialog{width:min(580px,100%);max-height:calc(100dvh - 18px);overflow-y:auto;background:#fffaf4;border:5px solid #ffdd99;border-radius:24px;padding:clamp(12px,2.5vh,23px);box-shadow:0 20px 70px #48305766;text-align:center}.dialog h1{font-size:clamp(24px,5.2vw,49px);margin:0 0 8px;line-height:1.04;color:#ea6698;text-shadow:2px 3px #f6d5e5}.dialog h2{font-size:clamp(20px,3.5vw,28px);margin:4px 0 10px;color:#b85b95}.dialog p{margin:7px 0;font-size:clamp(12px,1.5vw,16px);line-height:1.36;color:#75516f}.dialog .hero{width:min(95%,390px);height:clamp(70px,23vh,185px);background:linear-gradient(#fff2dc55,#fdd0df55),url('cover.webp') center 42%/cover;border:4px solid white;border-radius:17px;box-shadow:0 8px 15px #a97e8f33;margin:auto}.overlayButtons{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:10px 0 0}.overlayButtons .btn{min-width:110px}.shopGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:9px 0}.shopItem{border:1px solid #eed3b1;background:#fff1e5;border-radius:14px;padding:9px;text-align:left;font-size:13px;display:grid;gap:4px}.shopItem b{color:#b95c83}.shopItem .btn{min-height:32px;font-size:12px}.infoLine{display:flex;justify-content:space-around;background:#f9e9fa;border-radius:14px;padding:7px;gap:5px;font-weight:850;flex-wrap:wrap}.badge{display:inline-block;background:#ffdf8b;color:#a45c6c;padding:4px 7px;border-radius:14px;font-weight:850}.awardGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;text-align:left}.award{padding:7px;background:#fff0e5;border-radius:10px;font-size:13px}.award.locked{filter:grayscale(1);opacity:.5}#toast{position:fixed;bottom:50px;left:50%;transform:translateX(-50%);background:#683f73ef;color:#fff;border-radius:12px;font-weight:800;padding:9px 13px;z-index:30;opacity:0;pointer-events:none;max-width:90vw;text-align:center;transition:opacity .2s}#toast.show{opacity:1}.comic{display:inline-block;animation:pop .7s ease infinite alternate}@keyframes pop{to{transform:rotate(9deg) scale(1.13)}}
@media(max-width:700px){#app{grid-template-rows:42px minmax(0,1fr) 34px}.topbar{padding:3px 5px;gap:4px}.brand{font-size:clamp(11px,3.1vw,16px)}.stats{gap:3px}.stats span{font-size:10px;padding:5px 4px;border-radius:8px}.topbtn{min-width:29px;min-height:29px;font-size:16px}.board{display:flex;flex-direction:column;gap:5px;padding:5px}.guestSide{flex:none;height:clamp(112px,32%,188px);display:grid;grid-template-columns:39% 61%;grid-template-rows:1fr;border-radius:15px}.room{height:100%}.garland{font-size:10px}.window{border-width:3px;border-radius:9px}.shelf{font-size:10px;padding:1px}.avatar{width:85%;height:80%;bottom:13%}.counter{border-top-width:3px}.guestCard{padding:5px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}.guestLine{font-size:11px}.guestCard p{font-size:clamp(10px,2.6vw,13px);margin:2px 0;overflow:hidden;max-height:3.2em}.customerButtons{gap:3px}.customerButtons .btn{padding:5px 3px;font-size:clamp(9px,2.15vw,11px);min-height:30px;line-height:1.08}.kitchen{flex:1;border-radius:15px;grid-template-rows:auto auto auto minmax(0,1fr) auto}.recipeCard{padding:4px 6px}.recipeHeader{font-size:12px}.recipeHeader span{font-size:11px}.recipeChain{gap:2px;margin-top:3px;min-height:16px}.need{padding:2px 4px;font-size:10px}.methodHint{font-size:10px;margin-top:1px}.plateBar{min-height:30px;padding:2px 4px}.plateEmoji{font-size:20px}.plateContents{font-size:11px}.tabs{padding:3px 4px 1px}.tab{padding:3px 7px;font-size:11px}.ingredientGrid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(57px,auto);padding:4px;gap:4px}.ingredient{border-width:1px;border-radius:9px;padding:3px 1px;font-size:10px}.ingredient .emoji{font-size:22px}.cookButtons{padding:4px;gap:4px}.cookButtons .btn{min-height:36px;padding:5px 3px;font-size:clamp(10px,2.6vw,13px)}footer{padding:3px 5px;gap:4px}.shiftMeter{gap:3px}.meter{width:40px}#eventText{font-size:10px}#timeStat{font-size:12px}.dialog{border-width:3px;border-radius:15px;padding:10px}.overlayButtons .btn{min-width:85px;padding:8px 10px;font-size:12px}.shopGrid{gap:4px}.shopItem{padding:6px;font-size:11px}}
@media(max-height:500px){#app{grid-template-rows:34px minmax(0,1fr) 28px}.brand{font-size:13px}.topbar{padding:2px 5px}.stats span{padding:3px 5px}.topbtn{min-height:25px}.board{gap:3px;padding:3px}.guestCard{padding:4px}.guestCard p{max-height:2.6em}.customerButtons .btn{min-height:26px;padding:4px}.recipeCard{padding:3px 7px}.methodHint{display:none}.recipeChain{min-height:14px}.need{padding:1px 4px}.plateBar{min-height:27px}.tabs{padding:1px}.tab{padding:2px 6px}.ingredientGrid{grid-auto-rows:minmax(48px,auto);padding:3px}.ingredient .emoji{font-size:19px}.cookButtons{padding:3px}.cookButtons .btn{min-height:30px;padding:4px;font-size:11px}.dialog .hero{height:75px}.dialog p{margin:3px 0}.dialog h1{font-size:27px}.overlayButtons{margin-top:5px}.shopItem{padding:5px}}
@media(max-width:700px) and (max-height:500px){.guestSide{height:clamp(69px,29%,105px)}.guestCard p{font-size:10px;max-height:2.5em}.guestLine{font-size:10px}.avatar{height:90%}.kitchen .recipeCard{min-height:45px}.ingredientGrid{grid-auto-rows:minmax(45px,auto)}.plateEmoji{font-size:16px}.plateBar{min-height:25px}.shopGrid{grid-template-columns:repeat(2,1fr)}}
/* Compact iframe: primary actions must remain on screen, without a forced scroll. */
@media(max-height:430px){.dialog .hero{display:none}.dialog h1{font-size:clamp(21px,4vw,28px);margin-bottom:4px}.dialog #overlayContent>p:first-of-type{font-size:11px;line-height:1.2;max-height:2.6em;overflow:hidden;margin:3px 0}.dialog #overlayContent>p:last-of-type{display:none}.dialog .infoLine{font-size:10px;padding:4px;gap:3px}.dialog .overlayButtons{gap:4px;margin-top:5px}.dialog .overlayButtons .btn{min-width:0;min-height:29px;padding:5px 7px;font-size:10px}.dialog .shopGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.dialog .shopItem{font-size:11px}.dialog .award{font-size:11px}}
.room.angry .shelf{animation:spill-shelf .75s ease-in-out forwards}.room.angry .counter span:first-child{animation:spill-cake .8s ease-in forwards}.room.angry .counter span:last-child{animation:spill-cake .95s ease-in forwards}@keyframes spill-shelf{45%{transform:rotate(-6deg) translateX(-8px)}70%{transform:rotate(9deg) translateY(8px)}100%{transform:rotate(0deg)}}@keyframes spill-cake{40%{transform:rotate(20deg) translateY(-13px)}80%{transform:rotate(-18deg) translateX(12px)}100%{transform:rotate(0deg)}}