/* ZAEHLWIESE PICKNICK 2.0 - genuine pencil / wax-pencil raster illustrations.
   Scoped to Picknick only. There are no browser Canvas graphics. */
#app .zw107.main-content{
 background:#a8d5a1!important;overflow:hidden!important;isolation:isolate!important;
 user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none!important;
}
#app .zw107 .zw229-scene{
 position:absolute;inset:0;z-index:0;pointer-events:none;
 background:url('/picnic-v229/scene-portrait.webp') center/100% 100% no-repeat!important;
}
#app .zw107 .zw107-title{
 position:absolute!important;top:1.4%!important;left:19%!important;
 width:53%!important;height:10.2%!important;z-index:60!important;
 background:url('/picnic-v229/title.webp') center/contain no-repeat!important;
 box-shadow:none!important;filter:drop-shadow(0 3px 2px #6b442777)!important;
 transform:none!important;
}
#app .zw107 .zw107-title svg{display:none!important}
#app:has(.zw107) .app-header .header-tools{left:2%!important;top:8px!important;z-index:160!important}
#app:has(.zw107) .app-header button.zw-go-home{
 width:clamp(55px,8vw,78px)!important;min-width:55px!important;height:clamp(55px,8vw,78px)!important;
 background:transparent url('/picnic-v229/home.webp') center/contain no-repeat!important;
 border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;
 filter:drop-shadow(0 3px 2px #6c4f3377);
}
#app:has(.zw107) .app-header button.zw-go-home svg,
#app:has(.zw107) .app-header button.zw-go-home img{opacity:0!important}
#app .zw107 .zw107-controls{top:1.1%!important;right:1%!important;gap:3px!important;z-index:100!important}
#app .zw107 button.zw107-roundbtn{
 flex:0 0 auto!important;width:clamp(50px,7.5vw,69px)!important;height:clamp(50px,7.5vw,69px)!important;
 padding:0!important;border:0!important;outline:0!important;border-radius:0!important;
 box-shadow:none!important;filter:drop-shadow(0 3px 3px #63472b8a)!important;
 background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important;
 transition:transform .17s ease,filter .17s ease!important;
}
#app .zw107 .zw107-help{background-image:url('/picnic-v118/btn-hint.webp')!important;background-color:transparent!important}
#app .zw107 .zw107-restart{background-image:url('/picnic-v229/restart.webp')!important;background-color:transparent!important}
#app .zw107 .zw107-roundbtn svg{display:none!important}
#app .zw107 button.zw107-roundbtn:active{transform:scale(.9)!important}
#app .zw107 .zw107-order{
 left:4%!important;right:4%!important;top:12.7%!important;height:17.2%!important;
 z-index:25!important;background:transparent url('/picnic-v229/order-board.webp') center/100% 100% no-repeat!important;
 border:0!important;outline:0!important;border-radius:0!important;box-shadow:none!important;
 padding:clamp(16px,4.2vw,34px) clamp(27px,6.5vw,60px) clamp(15px,2.8vw,26px)!important;
 display:flex!important;align-items:stretch!important;justify-content:center!important;
 gap:4px!important;transform:none!important;
}
#app .zw107 .zw107-goal{
 position:relative!important;flex:1 1 0!important;min-width:0!important;
 border:0!important;border-radius:0!important;background:transparent!important;
 gap:0!important;transform:none!important;box-shadow:none!important;
}
#app .zw107 .zw107-goal+.zw107-goal{border-left:2px dashed #965c3399!important}
#app .zw107 .zw107-goal-food{height:79%!important;width:100%!important;gap:0!important;overflow:visible!important}
#app .zw107 .zw107-goal-piece{height:100%!important;max-width:50px!important;overflow:visible!important}
#app .zw107 .zw107-goal-piece img.zw229-food{
 position:static!important;width:100%!important;height:100%!important;object-fit:contain!important;
 filter:drop-shadow(0 2px 1px #64361e66)!important;
}
#app .zw107 .zw107-goal-piece.done img{filter:drop-shadow(0 0 4px #fff5a8)!important}
#app .zw107 .zw107-goal-dots{height:18%!important;min-height:6px!important;gap:3px!important}
#app .zw107 .zw107-goal-dots i{
 width:clamp(6px,1.4vw,12px)!important;height:clamp(6px,1.4vw,12px)!important;
 border:2px solid #7f522c!important;background:#fef0c9!important;box-shadow:none!important;
}
#app .zw107 .zw107-goal-dots i.yes{background:#a8cc77!important;border-color:#5c8a46!important}
#app .zw107 .zw109-round-flowers{top:28.2%!important;height:2.5%!important;opacity:.95!important;z-index:24!important}
#app .zw107 .zw107-garden{
 left:2%!important;width:96%!important;top:30%!important;height:39%!important;
 align-items:flex-end!important;gap:0!important;z-index:16!important;
 transform:none!important;transform-origin:center bottom!important;pointer-events:none!important;
}
#app .zw107 .zw107-friend{
 flex:0 0 29%!important;width:29%!important;height:100%!important;
 overflow:visible!important;display:flex!important;align-items:flex-end!important;
 justify-content:center!important;pointer-events:auto!important;
 filter:drop-shadow(0 5px 2px #695b3566)!important;
 animation:zw229-idle 3.1s ease-in-out infinite alternate!important;
}
#app .zw107 .zw107-igor{animation-delay:-1.4s!important}
#app .zw107 .zw229-character{
 display:block!important;position:relative!important;flex:none!important;
 max-width:none!important;width:174%!important;height:92%!important;
 object-fit:contain!important;object-position:center bottom!important;pointer-events:none!important;
}
#app .zw107 .zw107-friend.zw109-joy .zw229-character,
#app .zw107 .zw107-friend.zw229-dance .zw229-character{
 animation:zw229-friend-cheer .75s ease-in-out 2!important;
}
#app .zw107 .zw107-basket-target{
 flex:0 0 43%!important;width:43%!important;height:97%!important;
 z-index:12!important;filter:drop-shadow(0 7px 4px #71522d77)!important;
 transform-origin:50% 80%!important;pointer-events:auto!important;
}
#app .zw107 .zw107-basket-illustration{inset:0!important;overflow:visible!important}
#app .zw107 .zw108-basket-img{
 object-fit:contain!important;filter:drop-shadow(0 3px 2px #5d462960)!important;
}
#app .zw107 .zw108-basket-lid-img{filter:drop-shadow(0 3px 2px #5d462960)!important}
#app .zw107 .zw109-closed-basket{width:100%!important;height:100%!important;object-fit:contain!important}
#app .zw107 .zw107-basket-target.zw107-hover{
 transform:scale(1.08)!important;filter:drop-shadow(0 0 13px #ffed85) drop-shadow(0 7px 5px #59422177)!important;
}
#app .zw107 .zw107-basket-target.zw107-accepted{animation:zw229-basket-bump .4s ease-out!important}
#app .zw107 .zw107-basket-filled{display:flex!important;z-index:5!important;inset:37% 13% 36%!important;flex-wrap:wrap!important}
#app .zw107 .zw107-collected{height:47%!important;flex:0 0 22%!important}
#app .zw107 .zw107-collected img{height:100%!important;width:100%!important;object-fit:contain!important}
#app .zw107 .zw107-tray{
 position:absolute!important;bottom:-1%!important;left:0!important;right:0!important;
 width:100%!important;height:32.3%!important;z-index:23!important;
 border:0!important;outline:0!important;border-radius:0!important;box-shadow:none!important;
 background:transparent url('/picnic-v229/table.webp') center/100% 100% no-repeat!important;
 padding:0!important;transform:none!important;overflow:visible!important;
}
#app .zw107 .zw107-tray::before,
#app .zw107 .zw107-tray-seam{display:none!important}
#app .zw107 .zw107-food-grid{
 display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
 grid-template-rows:repeat(2,minmax(0,1fr))!important;
 position:relative!important;width:100%!important;height:100%!important;
 align-items:center!important;justify-items:center!important;
 gap:3px 2px!important;padding:clamp(37px,6.1vh,60px) 7px 10px!important;
}
#app .zw107 .zw107-food-button{
 position:relative!important;display:grid!important;place-items:center!important;
 width:100%!important;height:100%!important;max-width:100px!important;max-height:115px!important;
 min-width:0!important;min-height:40px!important;padding:0!important;
 border:none!important;outline:0!important;border-radius:50%!important;
 background:transparent url('/picnic-v229/token-1.webp') center/100% 100% no-repeat!important;
 box-shadow:none!important;filter:drop-shadow(0 3px 2px #6b482c88)!important;
 transform:none!important;will-change:auto!important;cursor:grab!important;touch-action:none!important;
}
#app .zw107 .zw107-food-button:nth-child(4n+2){background-image:url('/picnic-v229/token-2.webp')!important}
#app .zw107 .zw107-food-button:nth-child(4n+3){background-image:url('/picnic-v229/token-3.webp')!important}
#app .zw107 .zw107-food-button:nth-child(4n+4){background-image:url('/picnic-v229/token-4.webp')!important}
#app .zw107 .zw107-food-button img.zw229-food{
 position:absolute!important;inset:10%!important;width:80%!important;height:80%!important;
 max-width:80%!important;max-height:80%!important;object-fit:contain!important;
 pointer-events:none!important;filter:drop-shadow(0 2px 2px #5c3a2180)!important;
}
#app .zw107 .zw107-food-button.zw107-hintglow{animation:zw229-hint 1.1s ease-in-out 3!important}
#app .zw107 .zw107-food-button.zw229-touch{animation:zw229-tap .38s ease!important}
#app .zw107 .zw107-food-button.zw107-lift{opacity:.45!important}
#app .zw107 .zw107-next{
 width:clamp(64px,11vw,90px)!important;height:clamp(64px,11vw,90px)!important;
 background:transparent url('/picnic-v117/next-arrow.webp') center/contain no-repeat!important;border:0!important;
}
#app .zw107 .zw107-next-wrap{top:73%!important;right:9%!important}
#app .zw107 .zw229-butterfly{
 position:absolute!important;z-index:9!important;width:clamp(27px,7vw,70px)!important;
 height:auto!important;object-fit:contain!important;pointer-events:none!important;
 filter:drop-shadow(0 2px 2px #7a69425b)!important;
}
#app .zw107 .zw229-fly-1{top:31%!important;left:5%!important;animation:zw229-flutter 8.5s ease-in-out infinite!important}
#app .zw107 .zw229-fly-2{top:40%!important;right:4%!important;animation:zw229-flutter 10.5s -3s ease-in-out infinite reverse!important}
#app .zw107 .zw229-flower{
 position:absolute!important;z-index:7!important;width:clamp(26px,5vw,68px)!important;pointer-events:none!important;
 filter:drop-shadow(0 1px 2px #5f603e55)!important;animation:zw229-sway 5s ease-in-out infinite alternate!important;
}
#app .zw107 .zw229-flower-1{left:5%!important;top:61%!important}
#app .zw107 .zw229-flower-2{right:3%!important;top:61%!important;animation-delay:-2s!important}
#app .zw107.zw107-win .zw229-character{animation:zw229-friend-cheer .82s ease-in-out 3!important}
#app .zw107 .zw117-reward{
 z-index:40!important;left:3%!important;top:36%!important;width:94%!important;height:43%!important;
 overflow:visible!important;isolation:isolate!important;
}
#app .zw107 .zw117-reward-blanket{
 left:0!important;width:100%!important;bottom:2%!important;height:40%!important;object-fit:fill!important;z-index:1!important;
}
#app .zw107 .zw117-reward-moritz{left:0!important;width:44%!important;height:88%!important;bottom:15%!important;z-index:5!important}
#app .zw107 .zw117-reward-igor{right:0!important;width:44%!important;height:88%!important;bottom:15%!important;z-index:5!important}
#app .zw107 .zw117-reward-basket{left:32%!important;width:36%!important;height:66%!important;bottom:28%!important;z-index:4!important}
#app .zw107 .zw229-reward-plate{
 position:absolute!important;left:26%!important;bottom:3%!important;width:48%!important;height:25%!important;
 object-fit:contain!important;z-index:6!important;filter:drop-shadow(0 3px 2px #68513966)!important;
}
#app .zw107 .zw117-reward-foods{bottom:8%!important;left:27%!important;width:46%!important;height:16%!important;z-index:7!important}
#app .zw107 .zw117-reward-food img{height:100%!important;width:100%!important;object-fit:contain!important}
#app .zw107.zw117-arrived .zw117-reward-moritz{animation:zw229-party-a .8s ease-in-out infinite alternate!important}
#app .zw107.zw117-arrived .zw117-reward-igor{animation:zw229-party-b .85s ease-in-out infinite alternate!important}
#app .zw107.zw117-arrived .zw117-reward-food{animation:zw229-foodjoy .9s ease-in-out infinite alternate!important}
#app .zw107.zw117-arrived .zw117-reward-food:nth-child(2n){animation-delay:-.4s!important}
#app .zw107 .zw229-party{position:absolute;inset:-12% -4%;z-index:15;pointer-events:none;overflow:visible!important}
#app .zw107 .zw229-party img{
 position:absolute;width:clamp(19px,6vw,53px);height:auto;bottom:20%;left:calc(50% + var(--offset));
 animation:zw229-balloon 3.6s calc(var(--i)*-.31s) ease-in-out infinite!important;
 filter:drop-shadow(0 2px 2px #6d563a66);
}
#app .zw107.zw117-arrived .zw107-order,
#app .zw107.zw117-arrived .zw107-tray,
#app .zw107.zw117-arrived .zw109-round-flowers{display:none!important}
#app .zw107.zw117-arrived .zw107-next-wrap{top:78%!important;right:9%!important}
#app .zw107.zw117-arrived .zw229-flower{opacity:1!important}
@keyframes zw229-idle{from{transform:translateY(1px) rotate(-1.8deg)}to{transform:translateY(-5px) rotate(2deg)}}
@keyframes zw229-friend-cheer{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-14px) rotate(-9deg)}65%{transform:translateY(-3px) rotate(9deg)}}
@keyframes zw229-basket-bump{0%,100%{transform:scale(1)}42%{transform:scale(1.08) rotate(-3deg)}72%{transform:scale(.96) rotate(2deg)}}
@keyframes zw229-hint{50%{filter:drop-shadow(0 0 12px #fff58c);transform:scale(1.12)}}
@keyframes zw229-tap{0%,100%{transform:scale(1)}50%{transform:scale(.87) rotate(-5deg)}}
@keyframes zw229-flutter{0%,100%{transform:translate3d(0,0,0) rotate(5deg)}28%{transform:translate3d(16px,-17px,0) rotate(-12deg)}64%{transform:translate3d(-5px,-10px,0) rotate(14deg)}}
@keyframes zw229-sway{from{transform:rotate(-10deg)}to{transform:rotate(12deg)}}
@keyframes zw229-party-a{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-16px) rotate(8deg)}}
@keyframes zw229-party-b{from{transform:translateY(-12px) rotate(7deg)}to{transform:translateY(0) rotate(-6deg)}}
@keyframes zw229-foodjoy{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-7px) rotate(5deg)}}
@keyframes zw229-balloon{
 0%{transform:translate3d(0,22px,0) rotate(-9deg) scale(.65);opacity:0}
 17%{opacity:1}
 75%{opacity:1}
 100%{transform:translate3d(calc((var(--i) - 4)*7px),-240px,0) rotate(17deg) scale(1.1);opacity:0}
}
/* Consistent home entrance, title and play button with the Backstube. */
#app .zw170-launch[data-game-start="picnic"].zw229-intro{
 background:#acd3ac url('/picnic-v229/scene-portrait.webp') center/100% 100% no-repeat!important;
}
#app .zw170-launch[data-game-start="picnic"] .zw170-title{
 object-fit:contain!important;max-height:19%!important;filter:drop-shadow(0 4px 3px #73512a68)!important;
}
#app .zw170-launch[data-game-start="picnic"] .zw170-scene{
 object-fit:contain!important;filter:drop-shadow(0 5px 3px #77572b80)!important;
}
#app .zw170-launch[data-game-start="picnic"] .zw170-play img{width:100%!important;height:100%!important;object-fit:contain!important}
@media(min-aspect-ratio:6/5){
 #app .zw107 .zw229-scene{background-image:url('/picnic-v229/scene-landscape.webp')!important}
 #app .zw107 .zw107-title{left:33%!important;width:34%!important;top:0!important;height:15%!important}
 #app .zw107 .zw107-controls{top:1%!important;right:1%!important}
 #app .zw107 .zw107-order{top:12.5%!important;left:19%!important;right:19%!important;height:20%!important;padding:12px 33px!important}
 #app .zw107 .zw109-round-flowers{top:30.2%!important;left:50%!important}
 #app .zw107 .zw107-garden{top:31%!important;left:18%!important;width:64%!important;height:37%!important}
 #app .zw107 .zw107-tray{height:31%!important;bottom:-2%!important}
 #app .zw107 .zw107-food-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;padding:16px 15% 4px!important}
 #app .zw107 .zw107-food-button{max-width:72px!important;min-height:34px!important}
 #app .zw107 .zw229-butterfly.zw229-fly-1{left:15%!important}
 #app .zw107 .zw229-butterfly.zw229-fly-2{right:15%!important}
 #app .zw107 .zw229-flower-1{left:16%!important}
 #app .zw107 .zw229-flower-2{right:16%!important}
 #app .zw107 .zw117-reward{left:22%!important;width:56%!important;top:32%!important;height:50%!important}
 #app .zw107 .zw107-next-wrap{top:69%!important;right:17%!important}
 #app .zw170-launch[data-game-start="picnic"].zw229-intro{background-image:url('/picnic-v229/scene-landscape.webp')!important}
}
@media(max-width:410px) and (orientation:portrait){
 #app .zw107 .zw107-title{left:19%!important;width:53%!important;top:1.2%!important}
 #app .zw107 .zw107-order{left:1%!important;right:1%!important;top:12.5%!important;height:17.5%!important;padding:15px 26px!important}
 #app .zw107 .zw107-garden{left:0!important;width:100%!important;top:30%!important;height:40%!important}
 #app .zw107 .zw107-friend{width:29%!important;flex-basis:29%!important}
 #app .zw107 .zw107-tray{height:32%!important}
 #app .zw107 .zw107-food-grid{padding:clamp(26px,5vh,45px) 5px 7px!important}
 #app .zw107 .zw107-food-button{min-height:39px!important}
 #app .zw107 .zw109-round-flowers{top:28%!important}
}
@media(max-height:450px) and (orientation:landscape){
 #app:has(.zw107) .app-header button.zw-go-home{width:52px!important;min-width:52px!important;height:52px!important}
 #app .zw107 button.zw107-roundbtn{height:46px!important;width:46px!important}
 #app .zw107 .zw107-title{height:13%!important}
 #app .zw107 .zw107-order{height:20%!important;top:12%!important;padding:6px 38px!important}
 #app .zw107 .zw107-garden{height:35%!important;top:31%!important}
 #app .zw107 .zw107-tray{height:33%!important}
 #app .zw107 .zw107-food-grid{padding:14px 12% 1px!important}
 #app .zw107 .zw107-food-button{max-height:58px!important;min-height:31px!important}
 #app .zw107 .zw107-goal-dots{display:none!important}
}
@media(prefers-reduced-motion:reduce){
 #app .zw107 .zw229-character,#app .zw107 .zw229-butterfly,
 #app .zw107 .zw229-flower,#app .zw107 .zw229-party img,
 #app .zw107 .zw117-reward-friend{animation:none!important}
}

/* v229.1 visual QA corrections: centered basket and SIX fully visible food choices. */
#app .zw107 .zw107-garden > .zw107-basket-target{
 left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
 margin:0!important;order:2!important;
}
#app .zw107 .zw107-garden > .zw107-moritz{order:1!important}
#app .zw107 .zw107-garden > .zw107-igor{order:3!important}
#app .zw107 .zw107-garden{justify-content:space-between!important}
#app .zw107 .zw229-character{
 width:212%!important;height:120%!important;max-width:none!important;max-height:none!important;
 object-fit:contain!important;object-position:center bottom!important;
}
#app .zw107 .zw107-goal-piece img.zw229-food{transform:scale(1.2)!important}
#app .zw107 .zw107-food-grid{left:0!important;right:auto!important;top:0!important;bottom:auto!important;transform:none!important}
#app .zw107 .zw107-food-grid:has(.zw107-food-button:nth-child(6):last-child){
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 grid-template-rows:repeat(2,minmax(0,1fr))!important;
 padding:39px 13px 9px!important;
 gap:1px 6px!important;
}
#app .zw107 .zw107-food-grid:has(.zw107-food-button:nth-child(6):last-child) .zw107-food-button{
 width:100%!important;height:100%!important;max-width:103px!important;max-height:100px!important;
 min-height:44px!important;
}
#app .zw107 .zw117-reward-basket{bottom:14%!important}
@media(min-aspect-ratio:6/5){
 #app .zw107 .zw107-food-grid:has(.zw107-food-button:nth-child(6):last-child){
   grid-template-columns:repeat(6,minmax(0,1fr))!important;
   grid-template-rows:minmax(0,1fr)!important;
   padding:7px 20% 5px!important;
 }
 #app .zw107 .zw107-food-grid:has(.zw107-food-button:nth-child(6):last-child) .zw107-food-button{
   max-height:72px!important;max-width:78px!important;
 }
}
@media(max-height:450px) and (orientation:landscape){
 #app .zw107 .zw107-food-grid:has(.zw107-food-button:nth-child(6):last-child){padding:3px 21% 2px!important}
 #app .zw107 .zw107-food-grid:has(.zw107-food-button:nth-child(6):last-child) .zw107-food-button{max-height:67px!important}
}
@media(max-width:410px) and (orientation:portrait){
 #app .zw107 .zw107-food-grid:has(.zw107-food-button:nth-child(6):last-child){padding:39px 12px 8px!important}
 #app .zw107 .zw107-food-grid:has(.zw107-food-button:nth-child(6):last-child) .zw107-food-button{max-height:102px!important}
}
