/* Picknick 2.7 — spacious painted meadow picnic and real mouth-bound eating.
   Character originals stay untouched; only localized coloured-pencil mouth patches move. */
#app .zw107.zw117-arrived .zw117-reward{
 position:absolute!important;left:3%!important;top:26%!important;
 width:94%!important;height:55%!important;
 z-index:42!important;overflow:visible!important;isolation:isolate!important;
 transform:none!important;
}
#app .zw107 .zw117-reward .zw117-reward-blanket{
 position:absolute!important;left:0!important;bottom:7%!important;
 width:100%!important;height:40%!important;object-fit:fill!important;
 z-index:1!important;filter:drop-shadow(0 5px 3px #576d4555)!important;
}
#app .zw107 .zw117-reward .zw117-reward-basket{
 position:absolute!important;left:34%!important;bottom:35%!important;
 width:32%!important;height:50%!important;
 object-fit:contain!important;object-position:center bottom!important;
 z-index:4!important;
 filter:drop-shadow(0 5px 4px #624e2f55)!important;
}
#app .zw107 .zw117-reward .zw229-reward-plate{
 position:absolute!important;left:27%!important;bottom:5%!important;
 width:46%!important;height:27%!important;object-fit:contain!important;
 object-position:center center!important;z-index:8!important;
 filter:drop-shadow(0 4px 2px #61463077)!important;
 transform-origin:50% 70%!important;animation:zw237-plate-appear .6s ease-out both!important;
}
#app .zw107 .zw117-reward .zw117-reward-foods{
 position:absolute!important;left:32%!important;bottom:9%!important;
 width:36%!important;height:17%!important;z-index:10!important;
 display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
 grid-template-rows:repeat(2,minmax(0,1fr))!important;
 justify-content:center!important;justify-items:center!important;align-content:center!important;
 align-items:center!important;gap:1px 2px!important;
 pointer-events:none!important;overflow:visible!important;
}
#app .zw107 .zw117-reward .zw117-reward-food{
 display:flex!important;justify-content:center!important;align-items:center!important;
 position:relative!important;max-height:100%!important;max-width:100%!important;
 height:100%!important;width:100%!important;min-width:0!important;flex:none!important;
 transform:none!important;
 animation:zw237-meal-item .52s calc(.13s * var(--order,0)) ease-out both!important;
 filter:drop-shadow(0 2px 1px #604e3677)!important;
}
#app .zw107 .zw117-reward .zw117-reward-food img{
 display:block!important;width:100%!important;height:100%!important;
 max-width:100%!important;max-height:100%!important;object-fit:contain!important;
 animation:none!important;transform:none!important;
}
#app .zw107 .zw117-reward .zw117-reward-food.zw237-eaten{
 opacity:.06!important;animation:none!important;
 transition:opacity .28s ease!important;transform:scale(.55)!important;
}
#app .zw107 .zw117-reward .zw237-figure{
 position:absolute!important;display:block!important;
 bottom:17%!important;width:47%!important;height:85%!important;
 max-width:none!important;min-width:0!important;
 z-index:12!important;overflow:visible!important;pointer-events:none!important;
 transform-origin:50% 85%!important;
 filter:drop-shadow(0 5px 3px #4d5b3455)!important;
 animation:zw237-body-breathe 3.8s ease-in-out infinite alternate!important;
}
#app .zw107 .zw117-reward .zw237-figure.zw237-moritz{
 left:-5%!important;right:auto!important;
}
#app .zw107 .zw117-reward .zw237-figure.zw237-igor{
 right:-5%!important;left:auto!important;animation-delay:-1.7s!important;
}
#app .zw107 .zw237-artframe{
 position:absolute!important;bottom:0!important;left:0!important;
 width:100%!important;height:auto!important;aspect-ratio:410/360!important;
 overflow:visible!important;
}
#app .zw107 .zw237-artframe .zw237-body{
 position:absolute!important;inset:0!important;
 width:100%!important;height:100%!important;max-width:none!important;
 object-fit:contain!important;object-position:center center!important;
 pointer-events:none!important;user-select:none!important;
}
#app .zw107 .zw237-artframe .zw237-mouth{
 position:absolute!important;display:block!important;z-index:3!important;
 object-fit:fill!important;max-width:none!important;max-height:none!important;
 opacity:0!important;pointer-events:none!important;
 transition:opacity .10s linear!important;
}
#app .zw107 .zw237-artframe .zw237-mouth.zw237-mouth-visible{
 opacity:1!important;
}
#app .zw107 .zw237-figure.zw237-reaching{
 animation:zw237-reach .8s ease-in-out infinite alternate!important;
}
#app .zw107 .zw237-figure.zw237-biting{
 animation:zw237-bite .32s ease-in-out infinite alternate!important;
}
#app .zw107 .zw237-figure.zw237-satisfied{
 animation:zw237-savor 1.0s ease-in-out 1!important;
}
#app .zw107.zw237-full .zw237-figure.zw237-joy{
 animation:zw237-finale .73s ease-in-out 3 alternate!important;
}
#app .zw107 .zw237-flying-food{
 position:absolute!important;z-index:170!important;object-fit:contain!important;
 pointer-events:none!important;transform-origin:50% 50%!important;
 filter:drop-shadow(0 2px 2px #5e42317a)!important;
}
#app .zw107 .zw237-sparkle{
 position:absolute!important;z-index:160!important;
 display:block!important;object-fit:contain!important;pointer-events:none!important;
}
#app .zw107.zw237-eating .zw229-party,
#app .zw107.zw237-full .zw229-party{
 display:none!important;
}
#app .zw107.zw237-eating .zw231-joy,
#app .zw107.zw237-full .zw231-joy{display:none!important}
#app .zw107.zw237-eating .zw117-reward-food:not(.zw237-eaten){
 filter:drop-shadow(0 2px 1px #604e3677)!important;
}
@keyframes zw237-body-breathe{
 from{transform:translateY(2px) rotate(-1.5deg) scale(.99)}
 to{transform:translateY(-4px) rotate(1.5deg) scale(1.012)}
}
@keyframes zw237-reach{
 from{transform:translate(-2px,2px) rotate(-3deg)}
 to{transform:translate(6px,-7px) rotate(3deg) scale(1.03)}
}
@keyframes zw237-bite{
 from{transform:translateY(-3px) rotate(-3deg)}
 to{transform:translateY(3px) rotate(4deg) scale(1.018,.978)}
}
@keyframes zw237-savor{
 0%{transform:translateY(0) rotate(0)}
 40%{transform:translateY(-10px) rotate(-4deg) scale(1.045)}
 100%{transform:translateY(0) rotate(0)}
}
@keyframes zw237-finale{
 0%,100%{transform:translateY(0) rotate(-2deg) scale(1)}
 45%{transform:translateY(-10px) rotate(5deg) scale(1.045)}
}
@keyframes zw237-plate-appear{
 from{opacity:0;transform:translateY(8px) scale(.92)}
 to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes zw237-meal-item{
 from{opacity:0;transform:translateY(-14px) scale(.4) rotate(-10deg)}
 to{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}
}
@media (min-aspect-ratio:6/5){
 #app .zw107.zw117-arrived .zw117-reward{
  top:19%!important;left:19%!important;width:62%!important;height:65%!important;
 }
 #app .zw107 .zw117-reward .zw237-figure{
  height:86%!important;bottom:15%!important;width:44%!important;
 }
 #app .zw107 .zw117-reward .zw117-reward-basket{
  height:58%!important;bottom:31%!important;width:31%!important;left:34.5%!important;
 }
 #app .zw107 .zw117-reward .zw229-reward-plate{
  bottom:2%!important;height:34%!important;width:42%!important;left:29%!important;
 }
 #app .zw107 .zw117-reward .zw117-reward-foods{
  bottom:9%!important;height:21%!important;width:34%!important;left:33%!important;
 }
}
@media (max-width:360px) and (orientation:portrait){
 #app .zw107.zw117-arrived .zw117-reward{
  left:1%!important;width:98%!important;top:26%!important;height:55%!important;
 }
 #app .zw107 .zw117-reward .zw237-figure{width:46%!important}
 #app .zw107 .zw117-reward .zw117-reward-foods{left:32%!important;width:36%!important}
}
@media (prefers-reduced-motion:reduce){
 #app .zw107 .zw237-figure,#app .zw107 .zw117-reward .zw117-reward-food,
 #app .zw107 .zw229-reward-plate{
  animation:none!important;transition:none!important;
 }
}

/* A gentle illustrated heart on the empty dish shows that everybody has eaten. */
#app .zw107 .zw117-reward .zw237-plate-heart{
 position:absolute!important;left:46%!important;bottom:12%!important;
 width:9%!important;height:13%!important;object-fit:contain!important;
 z-index:12!important;opacity:0!important;pointer-events:none!important;
 transform:translateY(7px) scale(.45)!important;
 filter:drop-shadow(0 2px 2px #8a5e5780)!important;
}
#app .zw107 .zw117-reward .zw237-plate-heart.zw237-heart-show{
 opacity:1!important;transform:translateY(0) scale(1)!important;
 transition:opacity .35s ease,transform .5s cubic-bezier(.1,.8,.2,1.3)!important;
 animation:zw237-plate-heart .75s 2 alternate ease-in-out!important;
}
@keyframes zw237-plate-heart{
 from{translate:0 0;rotate:-5deg}
 to{translate:0 -5px;rotate:5deg}
}

/* Handpainted basket opens when the meal is served, closes once everyone has eaten. */
#app .zw107 .zw117-reward-basket.zw237-basket-open{
 transform-origin:50% 86%!important;
 animation:zw237-basket-unfold .58s cubic-bezier(.22,.75,.3,1) 1!important;
}
#app .zw107 .zw117-reward-basket.zw237-basket-closed{
 transform-origin:50% 86%!important;
 animation:zw237-basket-fold .7s cubic-bezier(.22,.75,.3,1) 1!important;
}
@keyframes zw237-basket-unfold{
 0%{transform:translateY(7px) scale(.92);opacity:.7}
 52%{transform:translateY(-5px) rotate(-3deg) scale(1.06);opacity:1}
 100%{transform:translateY(0) rotate(0) scale(1);opacity:1}
}
@keyframes zw237-basket-fold{
 0%{transform:rotate(4deg) scale(1.05)}
 50%{transform:rotate(-2deg) scale(.97)}
 100%{transform:rotate(0) scale(1)}
}
@media(prefers-reduced-motion:reduce){
 #app .zw107 .zw117-reward-basket.zw237-basket-open,
 #app .zw107 .zw117-reward-basket.zw237-basket-closed{animation:none!important}
}
