/* ZAeHLWIESE Picknick 2.0: warm colored-pencil world matching the bakery. No canvas. */
#app .zw107.main-content{
 background:#93c780!important;touch-action:none!important;
 -webkit-user-select:none!important;user-select:none!important;overscroll-behavior:none!important;
}
#app .zw107 .zw108-painting{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 background:url('/picnic-v122/meadow-portrait.webp') center center/100% 100% no-repeat!important;
 filter:saturate(.93) sepia(.055) contrast(1.02)!important;z-index:0!important;
}
#app .zw107 .zw107-land{display:none!important}
#app .zw107 .zw107-title{
 position:absolute!important;left:23%!important;width:54%!important;top:1%!important;height:10.6%!important;
 transform:rotate(-1deg)!important;filter:drop-shadow(0 5px 3px #74451b66)!important;z-index:40!important;
}
#app .zw107 .zw229-title-paint{display:block;width:100%;height:100%;object-fit:contain}
#app .zw107 .zw107-order{
 position:absolute!important;left:3%!important;right:3%!important;top:12%!important;
 width:94%!important;height:17.9%!important;display:flex!important;gap:0!important;
 border:0!important;outline:0!important;border-radius:0!important;
 padding:clamp(15px,2.7vw,25px) clamp(30px,6vw,70px)!important;
 background:transparent url('/picnic-v230/order-board.webp') center/100% 100% no-repeat!important;
 box-shadow:none!important;transform:none!important;z-index:20!important;
}
#app .zw107 .zw107-goal{flex:1;min-width:0!important;gap:0!important;position:relative!important}
#app .zw107 .zw107-goal+.zw107-goal{border-left:2px dashed #f7daa5a0!important}
#app .zw107 .zw107-goal-food{height:75%!important;overflow:visible!important;align-items:center!important}
#app .zw107 .zw107-goal-piece{display:flex;align-items:center;justify-content:center;max-width:65px!important;min-width:0}
#app .zw107 .zw107-goal-piece img{width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(1px 2px 1px #714f3278)!important}
#app .zw107 .zw107-goal-dots{height:18%!important;gap:6px!important}
#app .zw107 .zw107-goal-dots i{background:#f9dfaf!important;border:2px solid #8e613c!important;width:11px!important;height:11px!important}
#app .zw107 .zw107-goal-dots i.yes{background:#8dbb62!important;border-color:#688847!important}
#app .zw107 .zw109-round-flowers{top:29.2%!important;z-index:21!important;opacity:.84!important}
#app .zw107 .zw107-garden{
 position:absolute!important;left:0!important;top:30.5%!important;width:100%!important;
 height:37%!important;z-index:10!important;pointer-events:none!important;
}
#app .zw107 .zw107-garden .zw107-friend{pointer-events:auto!important;touch-action:manipulation!important}
#app .zw107 .zw107-moritz{left:1%!important;bottom:0!important;width:29%!important;height:78%!important;z-index:18!important}
#app .zw107 .zw107-igor{right:1%!important;bottom:0!important;width:29%!important;height:78%!important;z-index:18!important}
#app .zw107 .zw229-friend-poses{position:relative;display:block;width:100%;height:100%;transform-origin:50% 95%}
#app .zw107 .zw229-friend-poses img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;pointer-events:none}
#app .zw107 .zw229-friend-rest{opacity:1}
#app .zw107 .zw229-friend-joy{opacity:0;transform:translateY(9%) scale(.88)}
#app .zw107 .zw107-friend.zw109-joy .zw229-friend-rest,
#app .zw107 .zw107-friend.zw229-friend-happy .zw229-friend-rest{opacity:0}
#app .zw107 .zw107-friend.zw109-joy .zw229-friend-joy,
#app .zw107 .zw107-friend.zw229-friend-happy .zw229-friend-joy{
 opacity:1;animation:zw229-cheer .6s ease-in-out infinite alternate;
}
@keyframes zw229-cheer{0%{transform:translateY(4%) rotate(-3deg) scale(.96)}100%{transform:translateY(-7%) rotate(4deg) scale(1)}}
#app .zw107 .zw107-basket-target{
 left:31%!important;bottom:0!important;width:38%!important;height:79%!important;
 z-index:15!important;transform-origin:50% 93%!important;filter:drop-shadow(0 7px 3px #69563364)!important;
}
#app .zw107 .zw108-basket-img,#app .zw107 .zw108-basket-lid-img{object-fit:contain!important}
#app .zw107 .zw229-basket-ribbon{display:none}
#app .zw107 .zw107-basket-target.zw229-basket-bop{animation:zw229-basket-bop .55s cubic-bezier(.2,.8,.24,1)!important}
#app .zw107 .zw107-basket-target.zw229-basket-finale{animation:zw229-basket-happy 1.2s ease-in-out!important}
@keyframes zw229-basket-bop{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-9px) rotate(-5deg)}65%{transform:translateY(1px) rotate(3deg)}}
@keyframes zw229-basket-happy{0%,100%{transform:scale(1)}25%,75%{transform:scale(1.045) rotate(-4deg)}50%{transform:scale(.97) rotate(5deg)}}
#app .zw107 .zw107-order.zw229-order-nod{animation:zw229-order-nod .4s ease-out!important}
@keyframes zw229-order-nod{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18) drop-shadow(0 0 6px #f8dd97)}}
#app .zw107 .zw229-props{position:absolute!important;inset:0;z-index:4;pointer-events:none!important}
#app .zw107 .zw229-props img{position:absolute;object-fit:contain;pointer-events:none}
#app .zw107 .zw229-plate{bottom:-7%;left:37%;width:27%;height:22%;transform:rotate(-7deg);opacity:.97}
#app .zw107 .zw229-cup{bottom:0%;right:7%;width:11%;height:25%;animation:zw229-cup 5.5s ease-in-out infinite}
#app .zw107 .zw229-tiny-flower{bottom:0;left:5%;width:10%;height:29%;transform-origin:50% 100%;animation:zw229-sway 4s ease-in-out infinite}
#app .zw107 .zw107-tray{
 position:absolute!important;left:2%!important;right:2%!important;bottom:1%!important;
 width:96%!important;height:29.7%!important;padding:0!important;
 border:0!important;outline:0!important;border-radius:0!important;box-shadow:none!important;
 background:transparent url('/picnic-v230/picnic-cloth.webp') center/100% 100% no-repeat!important;
 transform:none!important;z-index:22!important;
}
#app .zw107 .zw107-tray::before,
#app .zw107 .zw107-tray::after,
#app .zw107 .zw107-tray-seam{content:none!important;display:none!important}
#app .zw107 .zw107-food-grid{
 position:absolute!important;left:5%!important;top:6%!important;width:90%!important;height:87%!important;
 display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
 grid-template-rows:repeat(2,minmax(0,1fr))!important;align-content:center!important;
 justify-content:center!important;justify-items:center!important;align-items:center!important;
 gap:2px 9px!important;padding:0!important;
}
#app .zw107 .zw107-food-grid:has(.zw107-food-button:nth-child(8)){
 grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
#app .zw107 .zw107-food-button,
#app .zw107 .zw107-food-button:nth-child(n){
 position:relative!important;display:block!important;width:100%!important;height:100%!important;
 min-height:0!important;min-width:0!important;max-width:105px!important;max-height:105px!important;
 margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;
 box-shadow:none!important;outline:0!important;overflow:visible!important;
 background:transparent url('/picnic-v230/food-token-0.webp') center/contain no-repeat!important;
 filter:drop-shadow(0 3px 2px #67472a83)!important;touch-action:none!important;
 transition:filter .16s ease!important;
}
#app .zw107 .zw107-food-button:nth-child(4n+2){background-image:url('/picnic-v230/food-token-1.webp')!important}
#app .zw107 .zw107-food-button:nth-child(4n+3){background-image:url('/picnic-v230/food-token-2.webp')!important}
#app .zw107 .zw107-food-button:nth-child(4n+4){background-image:url('/picnic-v230/food-token-3.webp')!important}
#app .zw107 .zw107-food-button img.zw108-foodimg{
 position:absolute!important;inset:17%!important;width:66%!important;height:66%!important;
 max-width:66%!important;max-height:66%!important;display:block!important;object-fit:contain!important;
 filter:drop-shadow(0 2px 2px #83523877)!important;pointer-events:none!important;
}
#app .zw107 .zw107-food-button:active{filter:drop-shadow(0 1px 1px #64492b) brightness(1.06)!important}
#app .zw107 .zw107-food-button:focus-visible{outline:4px solid #f4cc66!important;outline-offset:-4px!important}
#app .zw107 .zw107-basket-target.zw107-hover{filter:drop-shadow(0 0 13px #fff5a0) drop-shadow(0 4px 4px #715338)!important}
#app .zw107 .zw107-food-button.zw107-hintglow{animation:zw107-hint 1s ease-in-out 3!important}
#app .zw107 .zw107-controls{
 position:absolute!important;right:2%!important;top:1.8%!important;gap:3px!important;
 z-index:55!important;
}
#app .zw107 .zw107-roundbtn,
#app .zw107 button.zw107-roundbtn{
 width:clamp(54px,13.8vw,76px)!important;height:clamp(54px,13.8vw,76px)!important;
 min-width:52px!important;min-height:52px!important;
 border:0!important;outline:none!important;padding:0!important;border-radius:0!important;
 background:transparent!important;box-shadow:none!important;filter:drop-shadow(0 3px 2px #6c4f3380)!important;
}
#app .zw107 .zw229-control-art{width:100%;height:100%;display:block;object-fit:contain!important;pointer-events:none}
#app .zw107 .zw107-next-wrap{right:5%!important;top:35%!important;z-index:38!important}
#app:has(.zw107) .app-header button.zw-go-home{
 background:transparent url('/picnic-v229/home.webp') center/contain no-repeat!important;border:0!important;box-shadow:none!important;
 width:clamp(55px,14vw,78px)!important;height:clamp(55px,14vw,78px)!important;
 min-width:55px!important;min-height:55px!important;padding:0!important;
}
#app:has(.zw107) .app-header button.zw-go-home svg{width:85%!important;height:85%!important;filter:drop-shadow(0 3px 2px #725337)!important}
#app .zw107 .zw229-wind{position:absolute;right:4%;top:11%;width:12%;height:17%;z-index:4;pointer-events:none}
#app .zw107 .zw229-kite{width:100%;height:100%;object-fit:contain;animation:zw229-kite 9s ease-in-out infinite;filter:drop-shadow(1px 3px 2px #706c4a80)}
#app .zw107 .zw229-daisy{position:absolute;z-index:6;width:11%;height:12%;object-fit:contain;bottom:29%;pointer-events:none;transform-origin:50% 97%;animation:zw229-sway 5s ease-in-out infinite}
#app .zw107 .zw229-daisy-left{left:0}
#app .zw107 .zw229-daisy-right{right:0;animation-delay:-2.7s;transform:scale(.86)}
#app .zw107 .zw229-lemonade{position:absolute;z-index:7;right:3%;bottom:34%;width:13%;height:12%;object-fit:contain;pointer-events:none;animation:zw229-cup 5s ease-in-out infinite}
#app .zw107 .zw229-festive{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:80!important}
#app .zw107 .zw229-burst-piece{position:absolute;display:block;object-fit:contain;pointer-events:none}
@keyframes zw229-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(7deg)}}
@keyframes zw229-cup{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(4deg)}}
@keyframes zw229-kite{0%,100%{transform:translate(0,0) rotate(3deg)}35%{transform:translate(-9px,-11px) rotate(-8deg)}70%{transform:translate(7px,4px) rotate(5deg)}}
#app .zw107.zw107-walk .zw229-lemonade,#app .zw107.zw107-walk .zw229-daisy{opacity:.35;transition:opacity .6s}
#app .zw107 .zw117-reward-blanket{filter:drop-shadow(0 8px 4px #69513961)}
#app .zw107.zw107-arrived .zw117-reward-friend{animation:zw229-nibble .85s ease-in-out infinite alternate!important}
#app .zw107.zw107-arrived .zw117-reward-igor{animation-delay:-.42s!important}
@keyframes zw229-nibble{from{transform:translateY(1%) rotate(-3deg)}to{transform:translateY(-5%) rotate(3deg)}}
/* The first page uses the very same illustrated assets and play button as Bakery. */
#app .zw229-start.zw170-launch{
 background:#91c882 url('/picnic-v122/meadow-portrait.webp') center/100% 100% no-repeat!important;
 overflow:hidden!important;isolation:isolate!important;padding:0!important;
}
#app .zw229-start.zw170-launch::before,#app .zw229-start.zw170-launch::after{display:none!important;content:none!important}
#app .zw229-start .zw229-start-title{
 position:absolute!important;top:7%!important;left:9%!important;width:82%!important;height:18%!important;
 max-width:none!important;object-fit:contain!important;z-index:9!important;filter:drop-shadow(0 7px 4px #76503588);
}
#app .zw229-start .zw229-start-cloth{
 position:absolute;left:5%;bottom:12%;width:90%;height:30%;object-fit:fill;
 z-index:3;pointer-events:none;filter:drop-shadow(0 6px 4px #5c4c3780);
}
#app .zw229-start .zw229-start-basket{
 position:absolute;left:27%;top:33%;width:46%;height:34%;object-fit:contain;
 z-index:5;pointer-events:none;filter:drop-shadow(0 8px 6px #6c543b88);
 animation:zw229-basket-intro 6s ease-in-out infinite;
}
@keyframes zw229-basket-intro{0%,100%{transform:rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
#app .zw229-start .zw229-start-friend{
 position:absolute!important;top:38%;width:31%!important;height:30%!important;
 border:0!important;border-radius:0!important;background:transparent!important;
 box-shadow:none!important;z-index:7;touch-action:manipulation!important;
 filter:drop-shadow(0 5px 4px #654b3978);
}
#app .zw229-start .zw229-start-friend img{
 position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;
 pointer-events:none;
}
#app .zw229-start .zw229-start-friend .zw229-joy-pose{opacity:0}
#app .zw229-start .zw229-start-friend.zw229-start-cheer .zw229-base-pose{opacity:0}
#app .zw229-start .zw229-start-friend.zw229-start-cheer .zw229-joy-pose{
 opacity:1;animation:zw229-cheer .6s ease-in-out infinite alternate;
}
#app .zw229-start .zw229-start-moritz{left:0}
#app .zw229-start .zw229-start-igor{right:0}
#app .zw229-start .zw229-start-play{
 position:absolute!important;left:50%!important;top:auto!important;right:auto!important;
 bottom:10%!important;transform:translateX(-50%)!important;width:clamp(115px,31vw,176px)!important;
 height:clamp(115px,31vw,176px)!important;z-index:15!important;
 background:transparent!important;border:0!important;box-shadow:none!important;
}
#app .zw229-start .zw229-start-play img{display:block;width:100%;height:100%;object-fit:contain}
#app .zw229-start .zw170-home{top:max(1%,env(safe-area-inset-top))!important;left:2%!important;z-index:30!important}
#app .zw229-start .zw170-home img{width:100%;height:100%;object-fit:contain}
@media (min-aspect-ratio:6/5){
 #app .zw107 .zw108-painting{background-image:url('/picnic-v122/meadow-landscape.webp')!important}
 #app .zw107 .zw107-title{left:35%!important;width:30%!important;top:-2%!important;height:17%!important}
 #app .zw107 .zw107-order{top:10.4%!important;left:18%!important;right:18%!important;width:64%!important;height:24%!important;padding:12px 40px!important}
 #app .zw107 .zw107-garden{top:32%!important;left:24%!important;width:52%!important;height:43%!important}
 #app .zw107 .zw107-moritz{width:27%!important}
 #app .zw107 .zw107-igor{width:27%!important}
 #app .zw107 .zw107-basket-target{left:34%!important;width:32%!important;height:86%!important}
 #app .zw107 .zw107-tray{left:12%!important;right:12%!important;width:76%!important;bottom:0%!important;height:29%!important}
 #app .zw107 .zw107-food-grid{left:5%!important;width:90%!important;top:4%!important;height:89%!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;grid-template-rows:1fr!important}
 #app .zw107 .zw107-food-grid:has(.zw107-food-button:nth-child(8)){grid-template-columns:repeat(8,minmax(0,1fr))!important}
 #app .zw107 .zw107-food-button{max-width:90px!important;max-height:90px!important}
 #app .zw107 .zw109-round-flowers{top:32%!important}
 #app .zw107 .zw229-daisy{bottom:27%;height:18%;width:7%}
 #app .zw107 .zw229-lemonade{bottom:31%;right:8%;width:8%;height:20%}
 #app .zw107 .zw229-wind{top:9%;right:12%;width:8%}
 #app .zw107 .zw107-controls{top:2%!important;right:2%!important}
 #app .zw229-start.zw170-launch{background-image:url('/picnic-v122/meadow-landscape.webp')!important}
 #app .zw229-start .zw229-start-title{left:33%!important;top:1%!important;width:34%!important;height:27%!important}
 #app .zw229-start .zw229-start-cloth{left:25%;bottom:1%;width:50%;height:40%}
 #app .zw229-start .zw229-start-basket{left:41%;top:29%;width:18%;height:45%}
 #app .zw229-start .zw229-start-friend{top:30%;width:19%!important;height:52%!important}
 #app .zw229-start .zw229-start-moritz{left:25%}
 #app .zw229-start .zw229-start-igor{right:25%}
 #app .zw229-start .zw229-start-play{bottom:2%!important;width:100px!important;height:100px!important}
}
@media (max-width:420px) and (orientation:portrait){
 #app .zw107 .zw107-title{left:23%!important;width:54%!important}
 #app .zw107 .zw107-order{left:2%!important;right:2%!important;width:96%!important;padding:14px 19px!important}
 #app .zw107 .zw107-goal-piece{max-width:41px!important}
 #app .zw107 .zw107-tray{left:1%!important;right:1%!important;width:98%!important;height:31%!important}
 #app .zw107 .zw107-food-grid{left:5%!important;width:90%!important}
 #app .zw107 .zw107-food-button{max-width:100px!important;max-height:100px!important}
 #app .zw107 .zw107-moritz{left:0!important;width:32%!important}
 #app .zw107 .zw107-igor{right:0!important;width:32%!important}
 #app .zw107 .zw107-basket-target{left:30%!important;width:40%!important}
 #app .zw107 .zw229-lemonade{bottom:32%;right:0;width:16%}
 #app .zw107 .zw107-controls{top:1.7%!important;right:1%!important}
}
@media (prefers-reduced-motion:reduce){
 #app .zw107 .zw229-kite,#app .zw107 .zw229-daisy,#app .zw107 .zw229-lemonade,#app .zw107 .zw229-tiny-flower,#app .zw107 .zw229-cup,
 #app .zw229-start .zw229-start-basket{animation:none!important}
}
/* V230 visual QA: maintain independent, unobstructed illustrated controls. */
#app:has(.zw107) .app-header .header-tools{left:1%!important;right:auto!important;top:4px!important}
#app .zw107 .zw107-controls{left:auto!important;right:1%!important;top:1%!important;gap:1px!important}
#app .zw107 .zw107-order::before,#app .zw107 .zw107-order::after{content:none!important;display:none!important}
#app .zw107 .zw107-garden{justify-content:space-between!important}
#app .zw107 .zw107-tray{overflow:visible!important}
#app .zw107 .zw107-food-button{flex:0 0 auto!important;max-width:100%!important}
#app .zw107 .zw107-title{background:none!important}
#app .zw107 .zw229-scene{background-image:url('/picnic-v122/meadow-portrait.webp')!important}
@media (min-aspect-ratio:6/5){
#app .zw107 .zw229-scene{background-image:url('/picnic-v122/meadow-landscape.webp')!important}
#app .zw107 .zw107-food-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;grid-template-rows:1fr!important}
#app .zw107 .zw107-food-grid:has(.zw107-food-button:nth-child(8)){grid-template-columns:repeat(8,minmax(0,1fr))!important}
}
@media (max-width:420px) and (orientation:portrait){
#app .zw107 .zw107-title{left:26%!important;width:48%!important;top:0.5%!important;height:10%!important}
#app .zw107 .zw107-controls .zw107-roundbtn{width:53px!important;height:53px!important;min-width:53px!important;min-height:53px!important}
#app .zw107 .zw107-goal-piece{max-width:54px!important}
}

/* v230 final: fixed toddler-safe touch targets and three non-overlapping controls. */
#app:has(.zw107) #homeBtn.zw-go-home{
 position:absolute!important;top:5px!important;left:4px!important;right:auto!important;
 width:62px!important;height:62px!important;min-width:62px!important;min-height:62px!important;
 background:url('/ui-v225/home.webp') center/contain no-repeat!important;
 padding:0!important;border:0!important;box-shadow:none!important;z-index:175!important;
}
#app .zw107 .zw107-title{left:26%!important;width:45%!important}
#app .zw107 .zw107-controls{left:auto!important;right:1%!important;gap:2px!important}
#app .zw107 .zw107-garden{display:block!important;position:absolute!important}
#app .zw107 .zw107-garden>.zw107-moritz{
 position:absolute!important;left:0!important;right:auto!important;bottom:0!important;
 width:33%!important;height:90%!important;margin:0!important;flex:none!important;
}
#app .zw107 .zw107-garden>.zw107-igor{
 position:absolute!important;left:auto!important;right:0!important;bottom:0!important;
 width:33%!important;height:90%!important;margin:0!important;flex:none!important;
}
#app .zw107 .zw107-garden>.zw107-basket-target{
 position:absolute!important;left:31%!important;right:auto!important;bottom:0!important;
 width:38%!important;height:86%!important;margin:0!important;flex:none!important;
}
#app .zw107 .zw229-friend-poses{
 transform:scale(1.15)!important;transform-origin:50% 100%!important;
}
#app .zw107 .zw229-friend-rest,#app .zw107 .zw229-friend-joy{object-position:center bottom!important}
#app .zw107 .zw107-food-button.zw107-hintglow{animation:zw107-hint 1s ease-in-out 3!important}
@media (min-aspect-ratio:6/5){
 #app .zw107 .zw107-title{left:36%!important;width:28%!important}
 #app .zw107 .zw107-garden>.zw107-basket-target{left:34%!important;width:32%!important;height:89%!important}
 #app .zw107 .zw107-garden>.zw107-moritz{width:31%!important}
 #app .zw107 .zw107-garden>.zw107-igor{width:31%!important}
}

/* v230: beat earlier :has(...) rules which compressed the six starter foods. */
#app .zw107 .zw107-food-grid:has(.zw107-food-button:nth-child(6):last-child){
 position:absolute!important;left:5%!important;right:auto!important;top:6%!important;
 width:90%!important;height:87%!important;display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 grid-template-rows:repeat(2,minmax(0,1fr))!important;
 padding:0!important;gap:2px 9px!important;
 align-content:center!important;justify-content:center!important;
 justify-items:center!important;align-items:center!important;transform:none!important;
}
#app .zw107 .zw107-food-grid:has(.zw107-food-button:nth-child(6):last-child) .zw107-food-button{
 width:100%!important;height:100%!important;
 min-height:0!important;min-width:0!important;
 max-width:105px!important;max-height:105px!important;
 margin:0!important;padding:0!important;
}
@media (min-aspect-ratio:6/5){
 #app .zw107 .zw107-food-grid:has(.zw107-food-button:nth-child(6):last-child){
 left:5%!important;top:4%!important;width:90%!important;height:89%!important;
 grid-template-columns:repeat(6,minmax(0,1fr))!important;grid-template-rows:1fr!important;
 gap:5px!important;padding:0!important;
 }
 #app .zw107 .zw107-food-grid:has(.zw107-food-button:nth-child(6):last-child) .zw107-food-button{
 max-width:98px!important;max-height:100px!important;min-height:0!important;
 }
}