/* Zählwiese Backstube v203 — premium hand-drawn controls, small gesture animations,
   fully functional finger dragging and no accumulated ingredients in the bowl. */

/* Recipe selection — clear generous rounded tactile surfaces, same existing hand-drawn art. */
#app .zw165-choose .zw160-recipe{
 position:relative!important;overflow:visible!important;
 transform-origin:50% 65%!important;
 filter:drop-shadow(0 5px 2px #73503973)!important;
 transition:transform .18s cubic-bezier(.12,.83,.24,1.2),filter .18s ease!important;
 touch-action:manipulation!important;
}
#app .zw165-choose .zw160-recipe::after{
 content:"";position:absolute!important;pointer-events:none!important;
 inset:5%!important;border:3px solid #f8dba899!important;
 border-radius:49% 53% 47% 54%!important;
 box-shadow:0 1px 0 #815c4354,0 0 2px #fff2c6b7 inset!important;
 transform:rotate(-8deg)!important;
}
#app .zw165-choose .zw160-recipe:nth-child(2n)::after{transform:rotate(11deg)!important}
#app .zw165-choose .zw160-recipe img{
 filter:drop-shadow(0 2px 2px #815c4348)!important;
 transform-origin:50% 50%!important;
 transition:transform .17s cubic-bezier(.18,.9,.3,1)!important;
}
#app .zw165-choose .zw160-recipe:active,
#app .zw165-choose .zw160-recipe:focus-visible{
 transform:translateY(2px) scale(.945)!important;
 filter:drop-shadow(0 1px 2px #71482e8a) drop-shadow(0 0 7px #fff0ae)!important;
}
#app .zw165-choose .zw160-recipe:active img{transform:scale(.96) rotate(-3deg)!important}

/* Five original food tokens, improved contrast and unmistakable touch areas. */
#app .zw165-collect .zw160-ingredient{
 position:relative!important;
 width:100%!important;max-width:100%!important;
 min-width:48px!important;min-height:48px!important;
 transform-origin:center center!important;
 filter:drop-shadow(0 3px 2px #6f493977)!important;
 transition:transform .16s cubic-bezier(.19,1.1,.3,1),filter .15s ease!important;
 touch-action:none!important;
}
#app .zw165-collect .zw160-ingredient img{
 object-fit:contain!important;
 filter:saturate(1.15) contrast(1.035)!important;
}
#app .zw165-collect .zw160-ingredient:active,
#app .zw165-collect .zw160-ingredient.zw163-drag-origin{
 transform:translateY(-4px) scale(1.10)!important;
 filter:drop-shadow(0 5px 4px #724d338a) drop-shadow(0 0 6px #fff0b4)!important;
 z-index:5!important;
}
#app .zw165-collect .zw160-ingredient.zw160-hint{
 animation:zw203-point-hint 1.3s ease-in-out infinite!important;
}
#app .zw165-collect .zw160-ingredient.zw160-wrong{
 animation:zw203-tiny-wrong .34s ease-out 1!important;
}
@keyframes zw203-point-hint{
 0%,100%{filter:drop-shadow(0 2px 2px #64462e76)}
 50%{filter:drop-shadow(0 0 9px #fff4c8) drop-shadow(0 3px 2px #81592d76)}
}
@keyframes zw203-tiny-wrong{
 0%,100%{transform:translateX(0)}
 23%{transform:translateX(-5px) rotate(-3deg)}
 54%{transform:translateX(4px) rotate(3deg)}
 76%{transform:translateX(-2px)}
}
/* Show the completion of each instruction entirely by motion, no text. */
#app .zw165 .zw160-lesson.zw203-step-complete{
 animation:zw203-lesson-good .52s ease-out 1!important;
}
@keyframes zw203-lesson-good{
 0%,100%{filter:drop-shadow(0 3px 3px #76533a50)}
 40%{filter:drop-shadow(0 0 12px #f8d785) brightness(1.08)}
}
/* Large original hand-painted whisk and tray buttons. */
#app .zw165-mix .zw160-whisk-control,
#app .zw165-bake .zw160-tray-button{
 position:relative!important;
 width:clamp(103px,31vw,139px)!important;
 height:clamp(103px,31vw,139px)!important;
 min-width:103px!important;
 min-height:103px!important;
 aspect-ratio:1!important;
 border:0!important;border-radius:50%!important;
 background:transparent!important;
 box-shadow:none!important;
 padding:0!important;
 isolation:isolate!important;
 overflow:visible!important;
 touch-action:none!important;
 filter:drop-shadow(0 5px 3px #6e4a2f7d)!important;
 transition:transform .15s cubic-bezier(.18,.87,.3,1.2),filter .15s ease!important;
 animation:zw203-active-cta 2.1s ease-in-out infinite!important;
}
#app .zw165-mix .zw160-whisk-control img,
#app .zw165-bake .zw160-tray-button img{
 display:block!important;
 width:100%!important;height:100%!important;
 object-fit:contain!important;
 filter:saturate(1.12) contrast(1.04)!important;
}
#app .zw165-mix .zw160-whisk-control::after,
#app .zw165-bake .zw160-tray-button::after{
 content:"";position:absolute!important;
 inset:10%!important;border-radius:50%!important;
 border:3px dashed #fff1c39e!important;
 pointer-events:none!important;
 box-shadow:0 0 0 1px #9d663b52!important;
 z-index:3!important;
 transform:rotate(-6deg)!important;
}
#app .zw165-mix .zw160-whisk-control:active,
#app .zw165-bake .zw160-tray-button:active{
 animation:none!important;
 transform:scale(.92) translateY(3px)!important;
 filter:drop-shadow(0 1px 3px #77553f72)!important;
}
#app .zw165-mix .zw160-whisk-control.zw203-tool-active,
#app .zw165-bake .zw160-tray-button.zw203-tool-active{
 animation:zw203-button-work .6s ease-in-out infinite alternate!important;
 filter:drop-shadow(0 0 12px #ffdf8d) drop-shadow(0 4px 3px #7d533d69)!important;
}
@keyframes zw203-active-cta{
 0%,100%{filter:drop-shadow(0 4px 3px #76523a70)}
 50%{filter:drop-shadow(0 4px 3px #76523a70) drop-shadow(0 0 8px #fff2c4)}
}
@keyframes zw203-button-work{to{filter:drop-shadow(0 0 13px #fff1a8) drop-shadow(0 3px 2px #77523d6b)}}

/* Stage progress and mixing movement — carefully use composite-only properties. */
#app .zw165-mix .zw160-stir-progress{
 display:flex!important;justify-content:center!important;
 gap:clamp(13px,4vw,23px)!important;
 min-height:21px!important;height:22px!important;
}
#app .zw165-mix .zw160-stir-progress span{
 width:21px!important;height:21px!important;
 background:#fff0d1!important;border:3px solid #a16e3e!important;
 box-shadow:0 2px 2px #6a4a3152!important;
 transition:transform .2s ease,background .2s ease,filter .2s ease!important;
}
#app .zw165-mix .zw160-stir-progress span.done{
 background:#8fcb83!important;border-color:#5e9b60!important;
 transform:scale(1.18)!important;
 filter:drop-shadow(0 0 5px #fff2b8)!important;
}
#app .zw165-mix .zw160-bowl-unit{
 transform-origin:50% 75%!important;
}
#app .zw165-mix.zw160-stirring .zw160-whisk-actor{
 animation:zw203-whisk-stir .61s ease-in-out infinite!important;
 will-change:transform!important;
}
@keyframes zw203-whisk-stir{
 0%,100%{transform:translate(-7px,0) rotate(-13deg)}
 25%{transform:translate(2px,-6px) rotate(2deg)}
 50%{transform:translate(8px,1px) rotate(15deg)}
 75%{transform:translate(0,6px) rotate(-3deg)}
}
#app .zw165-mix.zw161-manual .zw160-whisk-actor{
 animation:none!important;
 transform:translate(var(--zw161-x,0px),var(--zw161-y,0px)) rotate(var(--zw161-angle,0deg))!important;
}
#app .zw165-mix.zw203-mix-finished .zw160-bowl-unit{
 animation:zw203-bowl-finished .52s ease-out 1!important;
}
@keyframes zw203-bowl-finished{50%{transform:scale(1.065) translateY(-4px)}}

/* Oven: natural glowing warmth around the EXISTING hand-drawn illustrated oven. */
#app .zw165-bake.zw160-baking .zw160-oven-art{
 animation:zw203-oven-warm 1.12s ease-in-out infinite alternate!important;
}
@keyframes zw203-oven-warm{
 from{filter:drop-shadow(0 0 3px #efbb7c67)}
 to{filter:drop-shadow(0 0 16px #ffca74dc) drop-shadow(0 0 5px #fbb36177)}
}
#app .zw165-bake .zw166-bake-star.zw166-baked{
 filter:drop-shadow(0 0 8px #ffda85)!important;
 animation:zw203-star-reward .46s cubic-bezier(.2,1.2,.27,1) both!important;
}
@keyframes zw203-star-reward{
 0%{transform:scale(.65) rotate(-14deg)}
 65%{transform:scale(1.20) rotate(8deg)}
 100%{transform:scale(1) rotate(0deg)}
}
#app .zw165-win .zw160-result-dish{
 filter:drop-shadow(0 6px 5px #8057357a)!important;
 animation:zw203-winning-dish 2.2s ease-in-out infinite alternate!important;
}
@keyframes zw203-winning-dish{
 from{transform:translateY(1px) scale(1)}
 to{transform:translateY(-7px) scale(1.06)}
}
/* Tiny ORIGINAL painted confetti particles, detached from layout. */
.zw203-confetti{
 position:fixed!important;z-index:99999!important;
 width:clamp(13px,3.8vw,22px)!important;height:clamp(13px,3.8vw,22px)!important;
 object-fit:contain!important;pointer-events:none!important;
 transform:translate(-50%,-50%) scale(.28);
 animation:zw203-crayon-spark 1.02s cubic-bezier(.15,.71,.32,1) both!important;
}
@keyframes zw203-crayon-spark{
 0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}
 13%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}
 75%{opacity:.9}
 100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--spin)) scale(.55)}
}
/* Keep bowl free of visibly stacked ingredients during collection. */
#app .zw165-collect .zw166-bowl-stash,
#app .zw165-collect .zw164-ingredients-in-bowl{display:none!important}
/* Landscape: action buttons dominate, but never obscure the instruction panel. */
@media(orientation:landscape){
 #app .zw165-collect .zw160-tray{
  padding:4px!important;gap:2px!important;
 }
 #app .zw165-mix .zw160-whisk-control,
 #app .zw165-bake .zw160-tray-button{
  width:clamp(82px,24dvh,120px)!important;
  height:clamp(82px,24dvh,120px)!important;
  min-width:82px!important;min-height:82px!important;
 }
 #app .zw165-mix .zw160-stir-progress span{
  width:17px!important;height:17px!important;
 }
 #app .zw165-choose .zw160-recipe{max-height:95%!important}
}
@media(orientation:portrait) and (max-height:660px){
 #app .zw165-mix .zw160-whisk-control,
 #app .zw165-bake .zw160-tray-button{
  width:clamp(85px,23dvh,105px)!important;
  height:clamp(85px,23dvh,105px)!important;
  min-width:85px!important;min-height:85px!important;
 }
}
@media(prefers-reduced-motion:reduce){
 #app .zw165 .zw160-whisk-control,
 #app .zw165 .zw160-tray-button,
 #app .zw165.zw160-stirring .zw160-whisk-actor,
 #app .zw165.zw160-baking .zw160-oven-art,
 #app .zw165-win .zw160-result-dish,
 .zw203-confetti{animation:none!important;transition:none!important}
 .zw203-confetti{display:none!important}
}