/* ZÄHLWIESE · BACKSTUBE 209 — entirely new layout built from separately drawn
   wax / coloured-pencil artwork in the *exact* approved Zahlenjagd meadow.
   No CSS gradient, emojis, browser-default button, 3D or flattened mockup. */
#app .zw209{
 position:fixed!important;inset:0!important;z-index:500!important;
 width:100%!important;height:100dvh!important;min-height:0!important;
 padding:0!important;margin:0!important;overflow:hidden!important;
 background:#8bc960 url('/hunt-v189/meadow-portrait.webp') left center/cover no-repeat!important;
 isolation:isolate!important;
 font-family:'Trebuchet MS','Arial Rounded MT Bold',Arial,sans-serif!important;
 user-select:none!important;-webkit-user-select:none!important;
 touch-action:manipulation!important;
}
#app .zw209 *,#app .zw209 *::before,#app .zw209 *::after{
 box-sizing:border-box!important;-webkit-tap-highlight-color:transparent!important;
}
#app .zw209 img{display:block;max-width:100%;user-select:none;-webkit-user-drag:none}
#app .zw209 button{
 margin:0;border:0;padding:0;background:none;box-shadow:none;
 font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;
}
#app .zw209 button:focus-visible{outline:4px dashed #ffed9b!important;outline-offset:2px!important}
#app .zw209-top{position:absolute!important;inset:0 0 auto!important;height:24%!important;z-index:11!important;pointer-events:none!important}
#app .zw209-title{
 position:absolute!important;width:84%!important;max-width:470px!important;
 height:auto!important;left:50%!important;top:35%!important;
 transform:translateX(-50%)!important;object-fit:contain!important;
 filter:drop-shadow(0 4px 3px #6440276b)!important;pointer-events:none!important;
}
#app .zw209 .zw209-home,#app .zw209 .zw209-reset{
 position:absolute!important;right:max(11px,env(safe-area-inset-right))!important;
 width:clamp(50px,14vw,73px)!important;height:clamp(50px,14vw,73px)!important;
 border-radius:50%!important;display:grid!important;place-items:center!important;
 pointer-events:auto!important;
 filter:drop-shadow(0 3px 3px #68483474)!important;
}
#app .zw209 .zw209-home{top:max(10px,env(safe-area-inset-top))!important}
#app .zw209 .zw209-reset{top:calc(max(10px,env(safe-area-inset-top)) + clamp(51px,14vw,75px))!important;width:clamp(39px,10vw,53px)!important;height:clamp(39px,10vw,53px)!important;right:max(18px,calc(env(safe-area-inset-right) + 7px))!important}
#app .zw209 .zw209-home img,#app .zw209 .zw209-reset img{width:100%!important;height:100%!important;object-fit:contain!important}
#app .zw209 .zw209-home:active,#app .zw209 .zw209-reset:active{transform:scale(.93)!important}
#app .zw209-stage-sign{
 position:absolute!important;left:50%!important;top:23%!important;
 width:min(81%,340px)!important;height:10.5%!important;
 transform:translateX(-50%)!important;z-index:10!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 filter:drop-shadow(0 3px 3px #79472f60)!important;pointer-events:none!important;
}
#app .zw209-stage-sign img{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 object-fit:contain!important;
}
#app .zw209-stage-sign span{
 position:relative!important;z-index:1!important;
 font-size:clamp(17px,5.8vw,27px)!important;font-weight:1000!important;
 letter-spacing:-.6px!important;white-space:nowrap!important;
 color:#7e3d25!important;text-shadow:1px 1px #fff4b8,-1px -1px #f6db9b!important;
 -webkit-text-stroke:.3px #633a2b!important;
}
#app .zw209-table{
 position:absolute!important;left:0!important;right:0!important;bottom:-2%!important;
 height:30%!important;z-index:2!important;pointer-events:none!important;
 background:url('/bakery-v210/counter.webp') center center / cover no-repeat!important;
 filter:drop-shadow(0 -5px 5px #74552b67)!important;
}
#app .zw209-friends{position:absolute!important;inset:0!important;pointer-events:none!important;z-index:5!important}
#app .zw209 .zw209-friend{
 position:absolute!important;width:clamp(83px,26vw,140px)!important;
 height:auto!important;aspect-ratio:1!important;
 bottom:20.3%!important;z-index:5!important;
 pointer-events:auto!important;
 filter:drop-shadow(0 4px 4px #365a2777)!important;
 transition:transform .35s cubic-bezier(.19,.73,.3,1.2)!important;
}
#app .zw209 .zw209-moritz{left:0.5%!important}
#app .zw209 .zw209-igor{right:0.5%!important}
#app .zw209 .zw209-friend img{width:100%!important;height:100%!important;object-fit:contain!important}
#app .zw209 .zw209-friend.zw209-fed{animation:zw209-celebrate .65s ease-in-out 1!important}
#app .zw209 .zw209-friend:active{transform:scale(1.055)!important}
@keyframes zw209-celebrate{
 0%,100%{transform:rotate(0) translateY(0)}
 25%{transform:rotate(-5deg) translateY(-9px)}
 55%{transform:rotate(6deg) translateY(-12px)}
}
/* Illustrated food selection. No card wrapper or hard-edged container. */
#app .zw209-choices{
 position:absolute!important;left:9%!important;top:34%!important;width:82%!important;
 height:41%!important;z-index:9!important;
 display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
 grid-template-rows:repeat(2,minmax(0,1fr))!important;
 gap:clamp(9px,2vw,18px)!important;align-items:center!important;justify-items:center!important;
}
#app .zw209 .zw209-choice{
 width:min(100%,clamp(78px,25vw,137px))!important;height:auto!important;
 aspect-ratio:1!important;min-width:72px!important;min-height:72px!important;
 display:grid!important;place-items:center!important;border-radius:50%!important;
 background:none!important;
 filter:drop-shadow(0 4px 3px #59492f77)!important;
 animation:zw209-choice-bob 3.2s ease-in-out infinite!important;
}
#app .zw209-choice:nth-child(2n){animation-delay:-1.4s!important}
#app .zw209-choice:nth-child(3n){animation-delay:-2.1s!important}
#app .zw209-choice img{width:100%!important;height:100%!important;object-fit:contain!important;filter:saturate(1.14) contrast(1.055)!important}
#app .zw209-choice:active{transform:scale(.9)!important;animation:none!important}
@keyframes zw209-choice-bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
/* The ingredient request appears only as large pictures; no reading required. */
#app .zw209-clue{
 position:absolute!important;top:32.5%!important;left:17%!important;width:66%!important;height:13%!important;
 z-index:9!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
 background:url('/bakery-v210/stage-wood.webp') center/100% 100% no-repeat!important;
 filter:drop-shadow(0 2px 2px #764b3061)!important;
}
#app .zw209-clue-icons{height:76%!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:1px!important;min-width:0!important}
#app .zw209-clue-icons img{height:100%!important;width:clamp(40px,12vw,68px)!important;object-fit:contain!important;transition:opacity .23s ease,transform .23s ease!important}
#app .zw209-clue-icons img.zw209-added{opacity:.25!important;transform:scale(.8)!important}
#app .zw209-clue-arrow{width:17%!important;height:65%!important}
#app .zw209-clue-arrow img{width:100%!important;height:100%!important;object-fit:contain!important}
/* Real object placement zone, same original handpainted blue bowl in each stage. */
#app .zw209-work{
 position:absolute!important;z-index:6!important;
 left:21%!important;top:46%!important;width:58%!important;height:24%!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 pointer-events:auto!important;
}
#app .zw209-work .zw209-bowl{width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 7px 4px #3a663c65)!important}
#app .zw209-drop{position:absolute!important;inset:17% 10% 13% 10%!important;z-index:5!important;border-radius:50%!important;pointer-events:none!important;transition:filter .15s ease!important}
#app .zw209-drop.zw209-drop-hover{outline:7px dashed #fff4be!important;outline-offset:5px!important;filter:drop-shadow(0 0 14px #f3eaa9)!important}
#app .zw209-drop.zw209-invite{animation:zw209-invite 1s ease-in-out infinite!important}
@keyframes zw209-invite{50%{filter:drop-shadow(0 0 15px #fff0b4)}}
#app .zw209-tray{
 position:absolute!important;left:15%!important;bottom:2.1%!important;width:70%!important;height:22%!important;
 z-index:9!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
 grid-template-rows:repeat(2,minmax(0,1fr))!important;
 gap:3px 6px!important;justify-items:center!important;align-items:center!important;
}
#app .zw209 .zw209-ing{
 display:grid!important;place-items:center!important;
 width:clamp(47px,15.2vw,78px)!important;height:clamp(47px,15.2vw,78px)!important;
 min-width:45px!important;min-height:45px!important;border-radius:50%!important;
 background:rgba(255,247,209,.78)!important;
 border:3px solid #b67740!important;outline:2px dashed rgba(255,237,175,.84)!important;
 filter:drop-shadow(0 3px 3px #583a2568)!important;
 touch-action:none!important;
}
#app .zw209-ing img{width:94%!important;height:94%!important;object-fit:contain!important;pointer-events:none!important}
#app .zw209-ing.zw209-needed{animation:zw209-needed 1.3s ease-in-out infinite!important;border-color:#e9b44a!important;z-index:2!important}
#app .zw209-ing.zw209-wrong{animation:zw209-wrong .48s ease 1!important}
#app .zw209-ing.zw209-dragging{opacity:.6!important}
@keyframes zw209-needed{50%{filter:drop-shadow(0 0 10px #fff6b8) drop-shadow(0 3px 3px #583a2568);scale:1.06}}
@keyframes zw209-wrong{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}
#app .zw209-mix .zw209-work,#app .zw209-bake .zw209-work{
 top:42%!important;height:29%!important;width:64%!important;left:18%!important;
}
#app .zw209 .zw209-whisk-in{
 position:absolute!important;z-index:7!important;left:50%!important;top:24%!important;
 width:25%!important;height:51%!important;object-fit:contain!important;
 transform:translate(calc(-50% + var(--wx,0px)),var(--wy,0px)) rotate(var(--wa,-14deg))!important;
 filter:drop-shadow(0 3px 2px #65503c59)!important;pointer-events:none!important;
}
#app .zw209-swirl-ring{
 position:absolute!important;inset:16% 19%!important;z-index:6!important;
 border:6px dashed #fff3ab!important;opacity:0!important;border-radius:50%!important;
 transform:rotate(-20deg)!important;pointer-events:none!important;
}
#app .zw209-mix-work.zw209-ready .zw209-swirl-ring{opacity:.8!important;animation:zw209-ring 2.8s linear infinite!important}
@keyframes zw209-ring{to{transform:rotate(340deg)}}
#app .zw209-pips{
 position:absolute!important;top:72%!important;left:50%!important;transform:translateX(-50%)!important;
 z-index:10!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:13px!important;
}
#app .zw209-pips span,.zw209-served-pips span{
 display:block!important;width:24px!important;height:24px!important;border-radius:50%!important;
 border:4px solid #aa6c3d!important;background:#fff0c4!important;
 box-shadow:0 2px 2px #62422d67!important;
 transition:background .2s ease,scale .2s ease!important;
}
#app .zw209-pips span.complete,.zw209-served-pips span.done{
 background:#77bb6c!important;border-color:#397e51!important;scale:1.14!important;
 filter:drop-shadow(0 0 7px #fff0b1)!important;
}
#app .zw209 .zw209-tool{
 position:absolute!important;left:50%!important;bottom:4%!important;
 transform:translateX(-50%)!important;z-index:12!important;
 width:clamp(98px,29vw,143px)!important;height:clamp(98px,29vw,143px)!important;
 border-radius:50%!important;touch-action:none!important;
 filter:drop-shadow(0 5px 4px #60432b76)!important;
 animation:zw209-tool-bob 2.1s ease-in-out infinite!important;
}
#app .zw209-tool img{width:100%!important;height:100%!important;object-fit:contain!important;pointer-events:none!important}
#app .zw209-tool.zw209-dragging{opacity:.55!important}
@keyframes zw209-tool-bob{50%{filter:drop-shadow(0 0 11px #fff1ba) drop-shadow(0 5px 4px #60432b76);translate:0 -4px}}
#app .zw209 .zw209-oven-work{top:39%!important;height:34%!important;left:23%!important;width:54%!important}
#app .zw209 .zw209-oven{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 object-fit:contain!important;filter:drop-shadow(0 5px 3px #7550367f)!important;z-index:4!important;
}
#app .zw209-oven-food{
 position:absolute!important;z-index:5!important;left:32%!important;top:53%!important;
 width:37%!important;height:23%!important;opacity:0!important;transform:scale(.45) translateY(12px)!important;
 transition:opacity .45s ease,transform .5s ease!important;
 filter:saturate(1.1) brightness(.85)!important;pointer-events:none!important;
}
#app .zw209-oven-food img{width:100%!important;height:100%!important;object-fit:contain!important}
#app .zw209-heat-1 .zw209-oven-food{opacity:.45!important;transform:scale(.65) translateY(6px)!important}
#app .zw209-heat-2 .zw209-oven-food{opacity:.75!important;transform:scale(.85) translateY(2px)!important}
#app .zw209-heat-3 .zw209-oven-food{opacity:1!important;transform:scale(1) translateY(0)!important}
#app .zw209-oven-work.zw209-baking{filter:drop-shadow(0 0 9px #ffc779)!important}
#app .zw209-bake-pips{top:74%!important}
#app .zw209-oven-smoke{position:absolute!important;left:30%!important;top:17%!important;width:40%!important;height:30%!important;pointer-events:none!important}
#app .zw209-baking .zw209-oven-smoke{animation:zw209-vapor 1.5s ease-in-out infinite!important;border-radius:50%!important;box-shadow:0 -8px 21px #ffe2ab8a!important}
@keyframes zw209-vapor{50%{opacity:.8;transform:translateY(-6px)}100%{opacity:.2;transform:translateY(-16px)}}
#app .zw209 .zw209-serve-work{
 top:42%!important;height:29%!important;left:23%!important;width:54%!important;
}
#app .zw209-serving-plate{
 position:absolute!important;inset:25% 4% 0!important;
 border-radius:50%!important;background:rgba(255,249,218,.88)!important;
 outline:7px solid #deb06e!important;box-shadow:0 4px 4px #66502e75!important;pointer-events:none!important;
}
#app .zw209 .zw209-serving{
 position:absolute!important;inset:0!important;z-index:7!important;
 display:grid!important;place-items:center!important;touch-action:none!important;
 filter:drop-shadow(0 5px 3px #7550356e)!important;
}
#app .zw209-serving img{width:100%!important;height:100%!important;object-fit:contain!important;pointer-events:none!important}
#app .zw209-served-pips{
 position:absolute!important;top:75%!important;left:50%!important;
 transform:translateX(-50%)!important;display:flex!important;gap:16px!important;z-index:10!important;
}
#app .zw209 .zw209-next{
 position:absolute!important;left:50%!important;bottom:3%!important;
 transform:translateX(-50%)!important;
 width:clamp(94px,26vw,136px)!important;height:auto!important;aspect-ratio:1!important;
 z-index:11!important;display:grid!important;justify-items:center!important;align-items:center!important;
 filter:drop-shadow(0 5px 3px #744d356f)!important;
}
#app .zw209-next img{width:100%!important;height:100%!important;object-fit:contain!important}
#app .zw209-next span{display:none!important}
.zw209-ghost{
 position:fixed!important;z-index:99998!important;
 width:clamp(65px,16vw,100px)!important;height:clamp(65px,16vw,100px)!important;
 object-fit:contain!important;transform:translate(-50%,-50%)!important;
 filter:drop-shadow(0 5px 4px #6a482a80)!important;
 pointer-events:none!important;touch-action:none!important;
}
.zw209-burst{
 position:fixed!important;z-index:99999!important;width:clamp(13px,4vw,22px)!important;height:clamp(13px,4vw,22px)!important;
 object-fit:contain!important;pointer-events:none!important;
 animation:zw209-confetti .75s ease-out both!important;
}
@keyframes zw209-confetti{
 from{opacity:0;transform:translate(-50%,-50%) scale(.2)}
 20%{opacity:1;transform:translate(-50%,-50%) scale(1)}
 to{opacity:0;transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) rotate(32deg) scale(.4)}
}
/* On a wide iPhone the illustrated background switches to Zahlenjagd's own
   landscape painting; proportions and the tactile objects remain independent. */
@media(orientation:landscape){
 #app .zw209{background-image:url('/hunt-v189/meadow-landscape.webp')!important;background-position:center center!important}
 #app .zw209-top{height:25%!important}
 #app .zw209-title{
  top:1%!important;width:36%!important;max-width:360px!important;
  transform:translateX(-50%)!important;
 }
 #app .zw209 .zw209-home{
  width:clamp(46px,11dvh,65px)!important;height:clamp(46px,11dvh,65px)!important;
  right:max(9px,env(safe-area-inset-right))!important;top:5px!important;
 }
 #app .zw209 .zw209-reset{
  width:clamp(37px,9dvh,49px)!important;height:clamp(37px,9dvh,49px)!important;
  top:calc(8px + clamp(45px,11dvh,65px))!important;
 }
 #app .zw209-stage-sign{top:19%!important;width:42%!important;height:17%!important}
 #app .zw209-stage-sign span{font-size:clamp(16px,5dvh,24px)!important}
 #app .zw209-table{height:34%!important}
 #app .zw209 .zw209-friend{width:clamp(108px,31dvh,164px)!important;bottom:12%!important}
 #app .zw209 .zw209-moritz{left:12%!important}
 #app .zw209 .zw209-igor{right:10%!important}
 #app .zw209-choices{
  top:35%!important;left:32%!important;width:36%!important;height:57%!important;
  gap:2px 9px!important;
 }
 #app .zw209 .zw209-choice{width:clamp(72px,23dvh,105px)!important;min-width:67px!important;min-height:67px!important}
 #app .zw209-clue{
  top:34%!important;left:38%!important;width:26%!important;height:20%!important;
 }
 #app .zw209-clue-icons img{width:clamp(33px,10dvh,57px)!important}
 #app .zw209-work,
 #app .zw209-mix .zw209-work,
 #app .zw209-bake .zw209-work{
  top:35%!important;left:38%!important;width:24%!important;height:47%!important;
 }
 #app .zw209-collect .zw209-work{top:47%!important;height:37%!important}
 #app .zw209-tray{
  left:34%!important;bottom:1%!important;width:32%!important;height:31%!important;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;grid-template-rows:1fr!important;
  gap:2px!important;
 }
 #app .zw209 .zw209-ing{width:clamp(39px,11dvh,61px)!important;height:clamp(39px,11dvh,61px)!important;min-width:37px!important;min-height:37px!important;border-width:2px!important}
 #app .zw209-mix .zw209-work{top:40%!important;height:43%!important}
 #app .zw209-pips{top:79%!important;gap:7px!important}
 #app .zw209-pips span{width:18px!important;height:18px!important;border-width:3px!important}
 #app .zw209 .zw209-tool{
  left:83%!important;bottom:7%!important;
  width:clamp(78px,25dvh,105px)!important;height:clamp(78px,25dvh,105px)!important;
 }
 #app .zw209 .zw209-oven-work{top:37%!important;left:40%!important;width:20%!important;height:50%!important}
 #app .zw209-bake-pips{top:80%!important}
 #app .zw209 .zw209-serve-work{top:38%!important;left:40%!important;width:20%!important;height:49%!important}
 #app .zw209-served-pips{top:85%!important}
 #app .zw209 .zw209-next{
  left:83%!important;bottom:6%!important;width:clamp(77px,24dvh,112px)!important;
 }
}
@media(orientation:portrait) and (max-height:610px){
 #app .zw209-title{top:33%!important;width:76%!important}
 #app .zw209-stage-sign{top:24%!important;height:10%!important}
 #app .zw209-choices{top:34%!important;height:41%!important}
 #app .zw209 .zw209-choice{width:clamp(70px,24vw,91px)!important;min-width:65px!important;min-height:65px!important}
 #app .zw209-tray{height:23%!important}
 #app .zw209 .zw209-ing{width:clamp(44px,14vw,60px)!important;height:clamp(44px,14vw,60px)!important;min-width:43px!important;min-height:43px!important}
 #app .zw209 .zw209-tool{bottom:1%!important;width:clamp(76px,24vw,108px)!important;height:clamp(76px,24vw,108px)!important}
}
@media(prefers-reduced-motion:reduce){
 #app .zw209 *{animation-duration:.01ms!important;transition-duration:.01ms!important}
 .zw209-burst{display:none!important}
}/* v209 precision layout refinements after full in-browser visual inspection. */
#app .zw209 .zw209-choice{
 animation:none!important;
}
#app .zw209 .zw209-choice img{
 animation:zw209-choice-bob 3.2s ease-in-out infinite!important;
}
#app .zw209 .zw209-choice:nth-child(2n) img{animation-delay:-1.4s!important}
#app .zw209 .zw209-choice:nth-child(3n) img{animation-delay:-2.1s!important}
#app .zw209 .zw209-friend{
 width:clamp(119px,34vw,158px)!important;
 bottom:17.5%!important;
}
#app .zw209 .zw209-table{height:25%!important}
#app .zw209-stage-sign span{
 font-size:clamp(17px,5.4vw,25px)!important;
}
@media(orientation:landscape){
 #app .zw209 .zw209-friend{
  width:clamp(115px,35dvh,160px)!important;
  bottom:10%!important;
 }
 #app .zw209 .zw209-table{height:30%!important}
 #app .zw209-stage-sign span{font-size:clamp(17px,4.8dvh,24px)!important}
}
@media(prefers-reduced-motion:reduce){
 #app .zw209 .zw209-choice img{animation:none!important}
}/* Stable child-sized touch surfaces; animate the crayon pictures, not hitboxes. */
#app .zw209 .zw209-ing.zw209-needed{animation:none!important;scale:1!important}
#app .zw209 .zw209-ing.zw209-needed img{
 animation:zw209-needed-art 1.45s ease-in-out infinite!important;
}
@keyframes zw209-needed-art{
 0%,100%{transform:scale(1)}
 50%{transform:scale(1.07)}
}
@media(prefers-reduced-motion:reduce){
 #app .zw209 .zw209-ing.zw209-needed img{animation:none!important}
}/* v209 landscape corrections: no sign overlap, no controls on Igor, 3-year-old hit targets. */
@media(orientation:landscape){
 #app .zw209-title{width:27%!important;max-width:248px!important;top:1%!important}
 #app .zw209-stage-sign{top:22%!important;width:34%!important;height:16%!important}
 #app .zw209 .zw209-tool{
  left:27%!important;bottom:5%!important;
  width:clamp(82px,24dvh,108px)!important;height:clamp(82px,24dvh,108px)!important;
 }
 #app .zw209 .zw209-next{
  left:68%!important;bottom:5%!important;
  width:clamp(72px,21dvh,96px)!important;
 }
 #app .zw209-tray{
  left:31%!important;bottom:0%!important;width:38%!important;height:29%!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;gap:1px 5px!important;
 }
 #app .zw209 .zw209-ing{
  width:clamp(47px,13.2dvh,60px)!important;height:clamp(47px,13.2dvh,60px)!important;
  min-width:46px!important;min-height:46px!important;
 }
 #app .zw209-collect .zw209-work{
  top:38%!important;height:36%!important;
 }
 #app .zw209-clue{
  top:36%!important;height:16%!important;
 }
}
@media(orientation:landscape) and (max-height:375px){
 #app .zw209 .zw209-ing{width:46px!important;height:46px!important;min-width:44px!important;min-height:44px!important}
 #app .zw209-stage-sign span{font-size:17px!important}
}/* Final landscape collect composition: separate wood labels and bowl,
   keep all eight ingredient buttons inside the safe-area. */
@media(orientation:landscape){
 #app .zw209-collect .zw209-stage-sign{top:16%!important;height:14%!important}
 #app .zw209-collect .zw209-clue{top:32%!important;height:16%!important}
 #app .zw209-collect .zw209-work{top:49%!important;height:27%!important}
 #app .zw209-collect .zw209-tray{bottom:4.5%!important;height:27%!important}
}/* Small phones: Moritz and Igor stay visible below the recipe artwork. */
@media(orientation:portrait) and (max-height:650px){
 #app .zw209-choose .zw209-friend{
  width:clamp(103px,31vw,118px)!important;
  bottom:5.5%!important;
 }
 #app .zw209-choose .zw209-choices{
  top:33.5%!important;height:38%!important;
 }
}
/* v210: Hand-drawn art always fully inside toddler-sized buttons. */
#app .zw209 .zw209-choice{
  padding:4%!important;box-sizing:border-box!important;overflow:visible!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
#app .zw209 .zw209-choice img{
  width:100%!important;height:100%!important;object-fit:contain!important;
  object-position:center center!important;display:block!important;
}
#app .zw209 .zw209-ing{padding:5%!important;box-sizing:border-box!important;overflow:visible!important}
#app .zw209 .zw209-ing img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important}
#app .zw209 .zw209-tool{padding:7%!important;box-sizing:border-box!important;overflow:visible!important}
#app .zw209 .zw209-tool img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important}
#app .zw209 .zw209-mix-work{touch-action:none!important;user-select:none!important;-webkit-user-select:none!important}
#app .zw209 .zw209-whisk-in{
  position:absolute!important;z-index:7!important;left:50%!important;top:25%!important;
  width:67%!important;height:63%!important;object-fit:contain!important;
  transform:translate(calc(-50% + var(--wx,0px)),var(--wy,0px)) rotate(var(--zw210-spin,-23deg))!important;
  transform-origin:50% 59%!important;
  filter:drop-shadow(0 4px 2px #65503c59)!important;pointer-events:none!important;
}
#app .zw209-ready:not(.zw210-stirring):not(.zw210-finished) .zw209-whisk-in{
  animation:zw210-whisk-wiggle 1.65s ease-in-out infinite!important;
}
@keyframes zw210-whisk-wiggle{
  0%,100%{rotate:-13deg;translate:0 0}
  50%{rotate:19deg;translate:0 -3px}
}
#app .zw210-stirring .zw209-whisk-in{animation:none!important}
#app .zw210-finished .zw209-whisk-in{
  animation:zw210-whisk-celebrate .5s ease-in-out 1!important;
}
@keyframes zw210-whisk-celebrate{50%{scale:1.16;rotate:85deg}}
#app .zw209-baking .zw209-oven{
  animation:zw210-oven-bake .84s ease-in-out 4!important;
}
@keyframes zw210-oven-bake{0%,100%{translate:0 0;scale:1}50%{translate:0 -3px;scale:1.025}}
#app .zw209-heat-1 .zw209-oven-food,
#app .zw209-heat-2 .zw209-oven-food,
#app .zw209-heat-3 .zw209-oven-food{animation:zw210-food-rise 1.2s ease-in-out infinite alternate!important}
@keyframes zw210-food-rise{to{translate:0 -6px;scale:1.07}}
@media(orientation:portrait){
  #app .zw209-choose .zw209-choices{top:31%!important;height:36%!important}
}
@media(orientation:landscape){
  #app .zw209-choose .zw209-choices{top:30%!important;height:45%!important}
}
@media(prefers-reduced-motion:reduce){
  #app .zw209 .zw209-whisk-in,#app .zw209 .zw209-oven,
  #app .zw209 .zw209-oven-food{animation:none!important}
}

/* v210 touch target stability: animate the artwork, never the button's hitbox. */
#app .zw209 .zw209-tool{animation:none!important;translate:0 0!important}
#app .zw209 .zw209-tool img{animation:zw210-tool-picture 2.1s ease-in-out infinite!important}
@keyframes zw210-tool-picture{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-3px) rotate(-5deg)}}
#app .zw209 .zw209-tool.zw209-dragging img{animation:none!important}
@media(prefers-reduced-motion:reduce){#app .zw209 .zw209-tool img{animation:none!important}}

/* v210 measured in rendered iPhone screenshots: prevent percentage padding shrinking artwork. */
#app .zw209 .zw209-choice{padding:2px!important}
#app .zw209 .zw209-ing{padding:3px!important}
#app .zw209 .zw209-tool{padding:3px!important}
#app .zw209 .zw209-tool img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important}

/* v210 landscape: recipe drawings stay below the wooden stage sign. */
@media(orientation:landscape){
 #app .zw209-choose .zw209-choices{top:36%!important;height:35%!important}
 #app .zw209-choose .zw209-choice{width:clamp(64px,18dvh,76px)!important;min-width:62px!important;min-height:62px!important}
}