/* Picknick 2.9: retain hand-painted buttons, improve tactility and readability.
   No new Canvas or SVG graphics. */
#app .zw107 .zw107-food-button{
 transform-origin:50% 58%!important;
 -webkit-tap-highlight-color:transparent!important;
}
#app .zw107 .zw107-food-button.zw251-collected,
#app .zw107 .zw107-food-button:disabled{
 opacity:.43!important;
 filter:grayscale(.15) saturate(.72) drop-shadow(0 1px 1px #73563d65)!important;
 cursor:default!important;
 animation:none!important;
 pointer-events:none!important;
}
#app .zw107 .zw107-food-button.zw251-collected img,
#app .zw107 .zw107-food-button:disabled img{
 animation:none!important;
 transform:none!important;
}
#app .zw107 .zw107-food-button.zw251-touched:not(:disabled){
 animation:zw251-food-press .42s cubic-bezier(.2,.74,.26,1)!important;
}
#app .zw107 .zw233-goal.zw251-progressed .zw233-number-hand{
 animation:zw251-finger-pop .48s cubic-bezier(.15,.75,.3,1)!important;
 transform-origin:50% 84%!important;
}
#app .zw107 .zw233-goal.zw251-progressed .zw233-progress i.yes{
 box-shadow:0 0 7px #fff0a7!important;
}
#app .zw107 .zw251-spark{
 position:absolute!important;
 display:block!important;pointer-events:none!important;
 object-fit:contain!important;z-index:171!important;
 animation:zw251-particle 1.1s cubic-bezier(.15,.61,.25,1) both!important;
 will-change:transform,opacity!important;
}
#app .zw107 .zw107-basket-target.zw107-accepted{
 animation:zw251-basket-yes .48s ease-out!important;
 transform-origin:50% 87%!important;
}
@keyframes zw251-food-press{
 0%,100%{transform:scale(1) rotate(0deg)}
 32%{transform:scale(.91) rotate(-3deg)}
 65%{transform:scale(1.06) rotate(2deg)}
}
@keyframes zw251-finger-pop{
 0%,100%{transform:scale(1) rotate(0deg)}
 30%{transform:scale(.94) rotate(-3deg)}
 65%{transform:scale(1.08) rotate(3deg)}
}
@keyframes zw251-basket-yes{
 0%,100%{transform:scale(1) rotate(0)}
 30%{transform:translateY(-6px) scale(1.04) rotate(-2deg)}
 60%{transform:translateY(1px) scale(.985) rotate(2deg)}
}
@keyframes zw251-particle{
 0%{opacity:0;transform:translate(-50%,-50%) scale(.32) rotate(-12deg)}
 23%{opacity:.93;transform:translate(-50%,-50%) scale(1) rotate(7deg)}
 88%{opacity:.83}
 100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,-65px))) scale(.7) rotate(var(--rot,45deg))}
}
/* The numbered hands from Backstube must be legible from frame one,
   rather than starting faint and half-size. */
#app .zw107 .zw233-number-hand img.zw233-hand-art{
 opacity:1!important;
 animation:none!important;
 transform:none!important;
}
#app .zw107 .zw233-number-hand{
 min-width:0!important;
 align-self:center!important;
}
#app .zw107 .zw233-ingredient img{
 object-fit:contain!important;
}
/* Keep the food basket tray hit targets inside the screen on narrow iPhones. */
@media(max-width:375px) and (orientation:portrait){
 #app .zw107 .zw107-food-grid{gap:3px 6px!important}
 #app .zw107 .zw107-food-button{min-height:0!important}
}
@media(prefers-reduced-motion:reduce){
 #app .zw107 .zw251-spark{display:none!important}
 #app .zw107 .zw107-food-button.zw251-touched,
 #app .zw107 .zw233-goal.zw251-progressed .zw233-number-hand,
 #app .zw107 .zw107-basket-target.zw107-accepted{animation:none!important}
}