/* Zählwiese Picnic 107. Completely fresh illustration system. */
#app:has(.zw107) .app-header{position:absolute!important;top:env(safe-area-inset-top,0px)!important;left:0!important;width:100%!important;height:0!important;overflow:visible!important;z-index:130!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;pointer-events:none!important}
#app:has(.zw107) .app-header .brand,#app:has(.zw107) .app-header .small-caption{display:none!important}
#app:has(.zw107) .app-header .header-tools{position:absolute!important;left:3%!important;top:12px!important;display:block!important;pointer-events:auto!important;width:max-content!important;right:auto!important;max-width:90px!important;}
#app:has(.zw107) .app-header button.zw-go-home{display:grid!important;place-items:center!important;min-width:58px!important;width:clamp(58px,8vw,80px)!important;height:clamp(58px,8vw,80px)!important;padding:12px!important;background:radial-gradient(circle at 35% 26%,#fff6dc,#f1d9a9 78%,#d1a776)!important;border:5px solid #71a5c1!important;border-radius:50%!important;box-shadow:inset 0 0 0 3px #fff8e5,0 5px 0 #517e9190,0 6px 12px #564f3766!important}
#app:has(.zw107) .app-header .zw-home-label{display:none!important}
#app:has(.zw107) .app-header button.zw-go-home svg{width:85%!important;height:85%!important}
#app .zw107.main-content{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;overflow:hidden!important;padding:0!important;margin:0!important;isolation:isolate!important;background:#9dd2c6!important;touch-action:pan-x pan-y}
.zw107,.zw107 *{box-sizing:border-box}
.zw107 .zw107-land{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;filter:saturate(1.02)}
.zw107 .zw107-title{position:absolute;z-index:5;top:1.5%;left:24%;width:52%;height:10%;pointer-events:none;filter:drop-shadow(0 4px 3px #704d2d44)}
.zw107 .zw107-title svg{width:100%;height:100%;overflow:visible}
.zw107 .zw107-controls{position:absolute;top:max(8px,2%);right:2%;z-index:60;display:flex;gap:clamp(4px,1.1vw,12px)}
.zw107 button.zw107-roundbtn{display:grid;place-items:center;width:clamp(52px,8vw,78px);height:clamp(52px,8vw,78px);border:5px solid #d7a475;border-radius:50%;padding:11px;background:radial-gradient(circle at 34% 22%,#fffaf0,#f1d7b1 72%,#cda478);box-shadow:inset 0 0 0 3px #fff8e1,0 3px 0 #937358,0 5px 10px #5e52355b;cursor:pointer;touch-action:manipulation;transition:transform .16s ease,filter .16s ease}
.zw107 button.zw107-roundbtn:hover{filter:brightness(1.08)}
.zw107 button.zw107-roundbtn:active{transform:scale(.91)}
.zw107 .zw107-help{border-color:#aa91c7!important}
.zw107 .zw107-restart{border-color:#de8985!important}
.zw107 button.zw107-roundbtn svg{width:100%;height:100%}
.zw107 .zw107-order{position:absolute;top:13%;left:14%;right:14%;height:16%;z-index:9;display:flex;justify-content:center;align-items:stretch;gap:clamp(4px,1.2vw,13px);padding:clamp(7px,1vw,12px);border:4px solid #dba663;outline:3px dashed #fff0c4;outline-offset:-10px;border-radius:36% 34% 22% 25% / 19% 17% 23% 24%;background:linear-gradient(115deg,#fef6db,#fff2d3 52%,#f5deac);box-shadow:0 6px 0 #b98553a1,0 10px 16px #8568464a;transform:rotate(-.5deg)}
.zw107 .zw107-goal{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:19px;transition:filter .3s,transform .3s;background:transparent}
.zw107 .zw107-goal+.zw107-goal{border-left:2px dashed #dbb27a}
.zw107 .zw107-goal.completed{filter:drop-shadow(0 0 6px #a6c97b);transform:scale(1.01)}
.zw107 .zw107-goal-food{width:100%;height:78%;display:flex;align-items:center;justify-content:center;gap:0;overflow:visible}
.zw107 .zw107-goal-piece{flex:1 1 0;max-width:65px;height:100%;min-width:0;transition:transform .3s,filter .3s;filter:drop-shadow(0 2px 2px #78583955)}
.zw107 .zw107-goal-piece.done{filter:brightness(1.09) drop-shadow(0 0 5px #8db75d);transform:translateY(-3px) scale(.9)}
.zw107 .zw107-foodsvg{display:block;width:100%;height:100%;overflow:visible}
.zw107 .zw107-goal-dots{display:flex;gap:8px;align-items:center;justify-content:center;flex:0 0 auto;min-height:9px}
.zw107 .zw107-goal-dots i{width:10px;height:10px;border-radius:50%;border:2px solid #b58b5b;background:#fff5db;box-shadow:inset 1px 1px 1px #fff}
.zw107 .zw107-goal-dots i.yes{background:#8ebc6f;border-color:#629152;box-shadow:0 0 6px #fff7c2}
.zw107 .zw107-garden{position:absolute;left:4%;top:30%;width:92%;height:39%;display:flex;align-items:flex-end;justify-content:space-between;z-index:6;pointer-events:none;transform-origin:center bottom}
.zw107 .zw107-friend{position:relative;width:31%;height:100%;display:flex;align-items:flex-end;justify-content:center;transform-origin:center bottom;filter:drop-shadow(0 4px 2px #4d6b3d66)}
.zw107 .zw107-friend svg{width:100%;height:100%;max-height:100%;overflow:visible;filter:drop-shadow(0 2px 0 #f9dfbf)}
.zw107 .zw107-moritz{animation:zw107-breathe 4.1s ease-in-out infinite}
.zw107 .zw107-igor{animation:zw107-breathe 3.5s .6s ease-in-out infinite}
@keyframes zw107-breathe{0%,100%{transform:rotate(-1deg) translateY(1px)}50%{transform:rotate(1deg) translateY(-5px)}}
.zw107 .zw107-basket-target{position:relative;width:42%;height:99%;pointer-events:auto;touch-action:none;transition:filter .25s;filter:drop-shadow(0 8px 4px #644b315d)}
.zw107 .zw107-basket-target.zw107-hover{filter:drop-shadow(0 0 20px #ffed98) drop-shadow(0 8px 4px #644b315d);transform:scale(1.05)}
.zw107 .zw107-basket-target.zw107-accepted{animation:zw107-pop .4s ease-out}
@keyframes zw107-pop{50%{transform:translateY(-5px) scale(1.045)}}
.zw107 .zw107-basket-illustration{position:absolute;inset:0}
.zw107 .zw107-handle{position:absolute;z-index:1;left:14%;top:9%;width:72%;height:56%;border:clamp(8px,1.6vw,19px) ridge #b87f3d;border-bottom:0;border-radius:55% 55% 0 0;box-shadow:inset 0 4px #e6b969,0 4px #794f35;transform:rotate(1deg)}
.zw107 .zw107-basket-interior{position:absolute;z-index:1;top:36%;left:9%;width:82%;height:36%;background:#7a4b2c;border:8px ridge #dca054;border-radius:50%}
.zw107 .zw107-wicker{position:absolute;z-index:5;bottom:7%;left:7%;width:86%;height:51%;border:clamp(7px,1vw,13px) ridge #d59a4d;border-radius:14% 14% 22% 22% / 16% 16% 20% 20%;background:repeating-linear-gradient(3deg,transparent 0 10px,#8d582d82 11px 13px,transparent 14px 20px),repeating-linear-gradient(90deg,#d18f3e 0 15px,#f2c46c 17px 25px,#bd803d 27px 39px);box-shadow:inset 0 4px 2px #fff3bb,0 5px 3px #77533880}
.zw107 .zw107-basket-clasp{position:absolute;top:-7%;left:45%;width:12%;height:33%;border:4px solid #8b562d;border-radius:12px;background:#a65e32;box-shadow:inset 0 3px #e8b16a}
.zw107 .zw107-basket-clasp:after{content:"";position:absolute;left:37%;top:50%;width:30%;aspect-ratio:1;border-radius:50%;background:#f6d46b}
.zw107 .zw107-lid{position:absolute;z-index:7;left:12%;top:15%;width:76%;height:36%;border:clamp(7px,1.2vw,13px) ridge #bd7a37;border-radius:48% 48% 15% 15% / 30% 30% 23% 23%;background:#da9f60;box-shadow:0 3px 2px #63472b91;transform:perspective(420px) rotateX(18deg) rotate(-2deg) translateY(-5%);transform-origin:bottom center;transition:transform 1s cubic-bezier(.2,.72,.3,1),top 1s ease}
.zw107 .zw107-lid-plaid{position:absolute;inset:6px;border-radius:inherit;border:2px dashed #fef1c8;background:repeating-linear-gradient(90deg,transparent 0 19px,#d55a4c95 20px 32px,transparent 33px 50px),repeating-linear-gradient(0deg,#fff0dc 0 17px,#d7564990 18px 31px,#fff0dc 32px 50px)}
.zw107 .zw107-lid-clasp{position:absolute;bottom:-20px;left:46%;width:10%;height:22px;border-radius:5px;background:#b46d35;border:3px solid #80552d}
.zw107 .zw107-basket-filled{position:absolute;z-index:3;inset:34% 17% 39%;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0;overflow:visible}
.zw107 .zw107-collected{flex:0 0 22%;height:46%;min-width:0;transform:rotate(var(--angle));filter:drop-shadow(0 2px 2px #583b25a0);animation:zw107-food-arrival .35s both}
.zw107 .zw107-collected svg{width:100%;height:100%}
@keyframes zw107-food-arrival{from{transform:translateY(-45px) scale(.3);opacity:.2}75%{transform:translateY(3px) scale(1.15)}to{transform:rotate(var(--angle)) scale(1);opacity:1}}
.zw107 .zw107-drop-halo{position:absolute;inset:22% 0 12%;border:5px dashed #ffeaa2;border-radius:48%;opacity:0;transition:opacity .2s;z-index:10;pointer-events:none}
.zw107 .zw107-hover .zw107-drop-halo{opacity:1}
.zw107 .zw107-tray{position:absolute;left:1.8%;right:1.8%;bottom:1.2%;height:29%;z-index:11;border:6px solid #eab977;border-radius:46px 42px 30px 28px;background:#fff2da;box-shadow:inset 0 0 0 4px #fffbed,0 5px 2px #985d4f9c,0 0 0 5px #cc777066;overflow:hidden;transform:rotate(-.2deg)}
.zw107 .zw107-tray:before{content:"";position:absolute;inset:7px;border:2px dashed #dca27c;border-radius:inherit;pointer-events:none}
.zw107 .zw107-tray-seam{position:absolute;inset:0;background:repeating-linear-gradient(17deg,transparent 0 24px,#ddc4a323 25px 26px,transparent 27px 49px);pointer-events:none}
.zw107 .zw107-food-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));align-items:center;justify-items:center;gap:0 3px;height:100%;padding:15px 12px}
.zw107 .zw107-food-button{position:relative;width:min(100%,76px);height:100%;max-height:78px;min-width:0;min-height:0;padding:2px;display:grid;place-items:center;border:0;border-radius:38%;background:transparent;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:filter .15s,transform .17s;filter:drop-shadow(0 3px 1px #b5917080)}
.zw107 .zw107-food-button svg{width:100%;height:100%;max-height:100%;pointer-events:none}
.zw107 .zw107-food-button:active,.zw107 .zw107-food-button.zw107-lift{cursor:grabbing;opacity:.36;transform:scale(.88)}
.zw107 .zw107-food-button.zw107-hintglow{animation:zw107-hint 1s ease-in-out 2}
.zw107 .zw107-food-button.zw107-incorrect{animation:zw107-shake .4s ease-in-out}
.zw107 .zw107-food-button.zw107-bounce{animation:zw107-pop .35s ease-in-out}
@keyframes zw107-hint{50%{filter:drop-shadow(0 0 9px #ffed69);transform:scale(1.17)}}
@keyframes zw107-shake{25%{transform:translateX(-7px) rotate(-7deg)}60%{transform:translateX(5px) rotate(5deg)}}
.zw107-ghost{position:fixed;top:0;left:0;width:94px;height:94px;z-index:99999;pointer-events:none;will-change:transform;filter:drop-shadow(1px 7px 7px #55432f77)}
.zw107-ghost svg{width:100%;height:100%}
.zw107 .zw107-sparkles{position:absolute;inset:0;z-index:90;pointer-events:none;overflow:hidden}
.zw107 .zw107-particle{position:absolute;width:13px;height:13px;border:2px solid #fff6cb;clip-path:polygon(50% 0,62% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 38%);animation:zw107-spark var(--t) ease-out forwards}
.zw107 .zw107-particle.zw107-red{background:#f07777!important}
@keyframes zw107-spark{0%{transform:translate(0,0) scale(.5) rotate(0);opacity:1}60%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.2) rotate(var(--rot));opacity:0}}
.zw107 .zw107-next-wrap{position:absolute;right:6%;top:53%;z-index:99;pointer-events:none;opacity:0;transform:translateY(18px) scale(.7);transition:all .5s}
.zw107 .zw107-next{border-color:#7fb865!important;width:75px!important;height:75px!important;pointer-events:auto}
.zw107.zw107-arrived .zw107-next-wrap{opacity:1;transform:none;pointer-events:auto}
.zw107 .zw107-trip{position:absolute;right:1%;top:40%;width:40%;height:30%;z-index:2;opacity:0;transform:translate(30px,10px) scale(.75);transition:opacity .9s,transform 1.5s;pointer-events:none}
.zw107 .zw107-trip-blanket{position:absolute;inset:18% 0 6%;transform:skewY(-9deg) rotate(-3deg);border:8px solid #fcf3d0;border-radius:16px;background:repeating-linear-gradient(90deg,transparent 0 19px,#db625b99 20px 37px,transparent 38px 50px),repeating-linear-gradient(0deg,#ffedda 0 18px,#d45d55a0 19px 36px,#ffedda 37px 50px);box-shadow:0 4px 7px #4c624588}
.zw107.zw107-walk .zw107-trip{opacity:1;transform:translate(0,0) scale(1)}
.zw107.zw107-win .zw107-lid{top:32%;transform:perspective(420px) rotateX(0deg) rotate(0deg) translateY(4%)}
.zw107.zw107-win .zw107-friend{animation:zw107-cheer .8s ease-in-out 2!important}
@keyframes zw107-cheer{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-26px) rotate(-7deg)}60%{transform:translateY(-15px) rotate(7deg)}}
.zw107.zw107-walk .zw107-garden{animation:zw107-travel 3s ease-in-out forwards}
@keyframes zw107-travel{0%{transform:translateX(0) scale(1)}50%{transform:translateX(7%) translateY(-16px) scale(.83)}100%{transform:translateX(25%) translateY(13%) scale(.68)}}
.zw107.zw107-walk .zw107-order{opacity:.45;transition:opacity 1s}
.zw107.zw107-walk .zw107-tray{opacity:.17;transform:translateY(105%);transition:all 1.2s}
.zw107.zw107-arrived .zw107-garden{animation:none;transform:translateX(22%) translateY(16%) scale(.71)}
.zw107.zw107-arrived .zw107-friend{animation:zw107-breathe 2s infinite!important}
@media (min-aspect-ratio: 6/5){
 .zw107 .zw107-title{top:0%;left:32%;width:36%;height:14%}
 .zw107 .zw107-order{top:13%;left:19%;right:19%;height:17%;border-radius:34px;padding:4px 11px}
 .zw107 .zw107-garden{top:29%;height:43%;left:19%;width:62%}
 .zw107 .zw107-tray{left:2%;right:2%;bottom:0%;height:29%;border-radius:32px}
 .zw107 .zw107-food-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));padding:8px 18px;gap:0 4px}
 .zw107 .zw107-food-button{width:min(100%,73px);max-height:74px}
 .zw107 .zw107-trip{right:2%;top:36%;width:30%}
 .zw107 .zw107-next-wrap{top:46%;right:7%}
 #app:has(.zw107) .app-header .header-tools{top:5px!important;left:2%!important}
}
@media (max-width:400px) and (orientation:portrait){
 .zw107 .zw107-title{left:21%;width:57%;top:2%}
 .zw107 .zw107-controls{right:1%;top:3%}
 .zw107 button.zw107-roundbtn{width:48px;height:48px;border-width:3px;padding:8px}
 .zw107 .zw107-controls{gap:4px}
 .zw107 .zw107-order{left:4%;right:4%;top:13%;height:15%;gap:1px;padding:5px 8px}
 .zw107 .zw107-goal-food{height:72%}
 .zw107 .zw107-goal-dots{gap:3px}
 .zw107 .zw107-goal-dots i{width:8px;height:8px}
 .zw107 .zw107-garden{top:29%;height:36%;left:2%;width:96%}
 .zw107 .zw107-basket-target{width:46%}
 .zw107 .zw107-friend{width:28%}
 .zw107 .zw107-tray{height:33%;bottom:.6%;border-width:4px;border-radius:35px}
 .zw107 .zw107-food-grid{padding:14px 7px}
 .zw107 .zw107-food-button{max-height:78px}
 #app:has(.zw107) .app-header button.zw-go-home{width:51px!important;min-width:51px!important;height:51px!important;border-width:3px!important}
}
@media (max-height:450px) and (orientation:landscape){
 .zw107 .zw107-title{height:13%}
 .zw107 .zw107-controls{top:1%}
 .zw107 button.zw107-roundbtn{width:49px;height:49px;padding:8px;border-width:3px}
 #app:has(.zw107) .app-header button.zw-go-home{width:52px!important;min-width:52px!important;height:52px!important;border-width:3px!important;padding:9px!important}
 .zw107 .zw107-order{top:12%;height:18%}
 .zw107 .zw107-garden{top:29%;height:43%}
 .zw107 .zw107-tray{height:29%}
 .zw107 .zw107-food-grid{padding:7px 11px}
}
@media (prefers-reduced-motion:reduce){
 .zw107 .zw107-friend{animation:none!important}
 .zw107 .zw107-particle{animation-duration:.5s!important}
 .zw107 .zw107-lid{transition-duration:.3s!important}
 .zw107.zw107-walk .zw107-garden{animation-duration:.6s!important}
}
/* Premium toddler QA corrections */
#app:has(.zw107) #zw95Restart{display:none!important}
.zw107::after{content:"";position:absolute;inset:0;z-index:110;pointer-events:none;background-image:url("/picnic-v107/paper-grain.webp");background-repeat:repeat;background-size:320px 320px;mix-blend-mode:multiply;opacity:.47}
.zw107 .zw107-garden::before{content:"";position:absolute;z-index:0;left:-4%;right:-4%;height:29%;bottom:-3%;border:5px solid #fff4df;border-radius:20% 26% 17% 20%;background:repeating-linear-gradient(90deg,transparent 0 19px,#da655f82 19px 37px,transparent 37px 55px),repeating-linear-gradient(0deg,#fff0dc 0 17px,#d65c548c 17px 36px,#fff0dc 36px 54px);box-shadow:0 5px 4px #57794955;transform:skewY(-3deg) scaleX(.88)}
.zw107 .zw107-garden>.zw107-friend,.zw107 .zw107-garden>.zw107-basket-target{z-index:1}
.zw107 .zw107-title svg,.zw107 .zw107-garden svg{filter:drop-shadow(0 0 1px #936f5580)}
@media (min-aspect-ratio:6/5){
 .zw107 .zw107-food-grid{padding:3px 13px!important}
 .zw107 .zw107-food-button{max-height:46px!important;width:min(100%,56px)!important}
 .zw107 .zw107-tray{height:31%!important}
}
@media (max-width:360px) and (orientation:portrait){
 .zw107 .zw107-food-grid{padding:8px 6px!important}
 .zw107 .zw107-food-button{max-height:51px!important;width:min(100%,58px)!important}
}
/* Keep the reward journey entirely on-screen, including on narrow iPhones. */
@keyframes zw107-travel{
  0%{transform:translateX(0) scale(1)}
  45%{transform:translateX(2%) translateY(-17px) scale(.82)}
  100%{transform:translateX(5%) translateY(7%) scale(.66)}
}
.zw107.zw107-arrived .zw107-garden{animation:none;transform:translateX(5%) translateY(7%) scale(.66)}
.zw107 .zw107-trip{right:10%;width:52%;top:42%}
@media (min-aspect-ratio:6/5){.zw107 .zw107-trip{right:12%;width:35%;top:38%}}
@media (max-width:400px) and (orientation:portrait){
 .zw107 .zw107-garden{left:5%;width:90%}
 .zw107 .zw107-basket-target{width:44%}
 .zw107 .zw107-friend{width:29%}
}