body{background:#fff4e0}.cooking{background:linear-gradient(90deg,#ffffffb3 3px,#0000 3px) 0 0/64px 64px,linear-gradient(#ffffffb3 3px,#0000 3px) 0 0/64px 64px,#fff4e0;grid-template-rows:1fr auto;display:grid;position:absolute;inset:0;overflow:hidden}.stage{min-height:0;padding-top:calc(76px + env(safe-area-inset-top));place-items:center;display:grid;position:relative}.pot{aspect-ratio:1;width:min(90vw,100%,100dvh - 306px);min-width:180px;margin-bottom:4%;position:relative}.pot-svg{width:100%;height:100%;position:absolute;inset:0}.soup{fill:var(--soup)}.steam{height:36%;opacity:calc(.15 + var(--steam) * .85);pointer-events:none;justify-content:space-around;transition:opacity 1s;display:flex;position:absolute;top:-10%;left:20%;right:20%}.steam i{aspect-ratio:1;background:radial-gradient(circle at 42% 40%,#fff 0 52%,#dee2e6 66%,#dee2e600 70%);border-radius:50%;align-self:flex-end;width:28%;animation:2.4s ease-in infinite steam}.steam i:nth-child(2){animation-delay:-.8s}.steam i:nth-child(3){animation-delay:-1.6s}@keyframes steam{0%{opacity:0;transform:translateY(30%)scale(.5)}35%{opacity:1}to{opacity:0;transform:translateY(-140%)scale(1.4)}}.floating,.effects,.eat{pointer-events:none;position:absolute;inset:0}.ladle{aspect-ratio:1/2;transform-origin:50% 80%;opacity:0;pointer-events:none;width:26%;position:absolute;top:48%;left:66%;translate:-50% -80%;rotate:18deg}.shelf{padding:12px max(12px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-bottom));background:#d9a066;grid-template-columns:repeat(4,1fr);gap:8px;display:grid;box-shadow:inset 0 8px #b97f4a}.item{aspect-ratio:1;touch-action:none;background:#fff8ec;border:none;border-radius:20px;justify-self:center;width:100%;max-width:96px;max-height:96px;padding:2%;transition:opacity .3s,transform .15s;box-shadow:0 5px #b97f4a}.item svg{pointer-events:none;width:100%;height:100%;display:block}@media (orientation:landscape){.shelf{grid-template-columns:repeat(8,1fr);padding-top:8px}.item{max-width:min(80px,18dvh);max-height:min(80px,18dvh)}.pot{width:min(56vw,100dvh - 186px)}}.hint{opacity:0;pointer-events:none;position:absolute;top:0;left:0}.item.is-used,.item.is-lifted{opacity:.3}.shelf.is-closed .item{opacity:.3;transform:scale(.92)}.carrying{width:var(--size);height:var(--size);pointer-events:none;z-index:5;filter:drop-shadow(0 6px 4px #3b335540);position:fixed;translate:-50% -50%;scale:1.15}.carrying svg{width:100%;height:100%;display:block}.carrying.is-returning{transition:left .3s ease-out,top .3s ease-out,scale .3s;scale:1}.carrying.is-flying{transition:left .4s linear,top .4s cubic-bezier(.5,-.9,.7,1),scale .4s;scale:.8}.float-item{aspect-ratio:1;width:30%;transition:left 50ms linear,top 50ms linear;position:absolute;translate:-50% -72%}.float-item svg{width:100%;height:100%;animation:1.6s ease-in-out infinite alternate bob;display:block}.float-item:nth-child(2) svg{animation-delay:-.5s}.float-item:nth-child(3) svg{animation-delay:-1s}@keyframes bob{0%{transform:translateY(-4%)rotate(-6deg)}to{transform:translateY(4%)rotate(6deg)}}.pot.is-sinking .pot-svg,.pot.is-sinking .floating{animation:.3s ease-out sink}@keyframes sink{40%{transform:translateY(3%)scaleY(.97)}}.splash{aspect-ratio:2;border:6px solid #fff;border-radius:50%;width:34%;max-width:180px;animation:.6s ease-out forwards ripple;position:absolute;translate:-50% -50%}.splash:before,.splash:after{content:"";background:#fff;border-radius:50%;width:14px;height:14px;margin:-7px;animation:.6s ease-out forwards drop-l;position:absolute;top:30%;left:50%}.splash:after{animation-name:drop-r}@keyframes ripple{0%{opacity:1;scale:.3}to{opacity:0;scale:1.4}}@keyframes drop-l{50%{transform:translate(-60px,-60px)}to{opacity:0;transform:translate(-80px,-10px)}}@keyframes drop-r{50%{transform:translate(60px,-70px)}to{opacity:0;transform:translate(80px,-10px)}}.ladle svg{width:100%;height:100%;display:block}.ladle.is-waiting{opacity:1;transition:opacity .3s;animation:1.2s ease-in-out infinite alternate wave}.ladle.is-stirring{opacity:1;animation:none}@keyframes wave{0%{rotate:6deg}to{rotate:30deg}}.pot{transition:scale .35s ease-out,opacity .35s}.pot.is-away{opacity:0;scale:.3}.puff{background:radial-gradient(circle,#fff 0 45%,#dee2e6 60%,#dee2e600 70%);border-radius:50%;width:160px;height:160px;animation:.6s ease-out forwards puff;position:absolute;translate:-50% -50%}@keyframes puff{0%{opacity:1;scale:.2}to{opacity:0;scale:1.8}}.confetti{border-radius:3px;width:12px;height:18px;margin:-9px -6px;animation:1.4s cubic-bezier(.2,.7,.4,1) forwards confetti;position:absolute}@keyframes confetti{to{transform:translate(var(--dx), calc(var(--dy) + 260px)) rotate(540deg);opacity:0}}.dish{width:var(--size);height:var(--size);animation:.45s cubic-bezier(.3,1.6,.6,1) both dish-in;position:absolute;translate:-50% -50%}.dish>svg{width:100%;height:100%;display:block}.dish .food{transform-box:fill-box;transform-origin:50% 75%;transform:scale(calc(.45 + .55 * var(--left)));opacity:min(1, calc(var(--left) * 3));transition:transform .3s ease-out,opacity .3s}.dish .food.is-pieces{opacity:1;transform:none}.dish .bite{transition:opacity .25s}.dish .bite-1{opacity:clamp(0, calc((var(--left) - .67) * 100), 1)}.dish .bite-2{opacity:clamp(0, calc((var(--left) - .34) * 100), 1)}.dish .bite-3{opacity:clamp(0, calc(var(--left) * 100), 1)}.dish .food.is-drink{transform-origin:50% 100%;transform:scaleY(var(--left));opacity:1}.dish.is-leaving{animation:.5s ease-in forwards dish-out}@keyframes dish-in{0%{opacity:0;scale:.2}}@keyframes dish-out{to{opacity:0;scale:.2}}.animal{width:var(--size);height:var(--size);transition:left 1s ease-in-out;position:absolute;translate:-50% -50%}.animal-body,.animal-body svg{width:100%;height:100%;display:block}.animal-body{transform-origin:50% 90%}.animal.is-walking .animal-body{animation:.25s ease-in-out infinite alternate walk}.animal.is-munching .animal-body{animation:.4s ease-in-out munch}.animal.is-happy .animal-body{animation:.4s ease-out 2 happy}@keyframes walk{0%{transform:translateY(0)rotate(-4deg)}to{transform:translateY(-8%)rotate(4deg)}}@keyframes munch{50%{transform:rotate(-14deg)scale(1.05,.95)}}@keyframes happy{50%{transform:translateY(-30%)scale(1.08)}}.hint{z-index:4;width:0;height:0}.hint.is-visible{animation:4s ease-in-out infinite hint-move}.hint-orbit{position:absolute}.hint.is-visible .hint-orbit{animation:4s linear infinite hint-orbit}.hint-hand,.lid-hand{filter:drop-shadow(0 3px 4px #3b335559);width:72px;height:90px;position:absolute;top:-5px;left:-34px;overflow:visible}.hint-hand path,.lid-hand path{fill:#fff;stroke:#3b3355;stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round}@keyframes hint-move{0%{transform:translate(var(--from-x), var(--from-y));opacity:0}8%{transform:translate(var(--from-x), var(--from-y));opacity:1}37.5%,87.5%{transform:translate(var(--to-x), var(--to-y));opacity:1}to{transform:translate(var(--to-x), var(--to-y));opacity:0}}@keyframes hint-orbit{0%,37.5%{transform:rotate(0)translate(0)rotate(0)}42%{transform:rotate(0turn) translateX(var(--r)) rotate(0turn)}87.5%{transform:rotate(2turn) translateX(var(--r)) rotate(-2turn)}to{transform:rotate(2turn) translateX(var(--r)) rotate(-2turn)}}.lid{cursor:pointer;background:0 0;border:none;padding:0;transition:translate .7s cubic-bezier(.3,1.4,.6,1),rotate .7s ease-out,opacity .5s ease-in .2s;position:absolute;inset:0}.lid>svg{width:100%;height:100%;display:block}.lid.is-opening{opacity:0;pointer-events:none;translate:18% -45%;rotate:24deg}.lid-hint{pointer-events:none;width:0;height:0;transition:opacity .15s;position:absolute;top:30%;left:58%}.lid.is-opening .lid-hint{opacity:0}.lid-hand{animation:1.6s ease-in-out infinite lid-tap}@keyframes lid-tap{0%,to{transform:translate(18px,28px)rotate(-12deg)}35%{transform:translate(0)rotate(-12deg)}45%{transform:translate(0)rotate(-12deg)scale(.88)}55%{transform:translate(0)rotate(-12deg)}}
