/* Zählwiese V84 – Numbers Picnic rebuilt as a hand-painted storybook activity.
   All visuals original assets, real touch-targets, same paper/colored-pencil universe
   as Finger zählen and Tiere zählen. Three visual modes, no written instructions. */
#app:has(.zw-picnic-world) .zw-picnic-world.main-content{
 isolation:isolate!important;
 contain:layout style!important;
 position:absolute!important;inset:0!important;
 width:100%!important;height:100%!important;
 overflow:hidden!important;
 background:#85c57e url('/picnic-story-v84/meadow-portrait.webp') center/100% 100% no-repeat!important;
 font-family:"Chalkboard SE","Segoe Print","Comic Sans MS",system-ui,sans-serif!important;
}
.zw-picnic-world .zw-pic-background{
 display:none!important;visibility:hidden!important;animation:none!important;
}
.zw-picnic-world .zw-pic-story-title{
 position:absolute;z-index:6;left:24%;top:1.1%;
 width:72%;height:10%;
 background:transparent url('/picnic-story-v84/title.webp') center/100% 100% no-repeat;
 filter:drop-shadow(0 2px 2px #6e4b344f);
 pointer-events:none;
}
.zw-picnic-world .zw-pic-modes{
 z-index:70!important;
 top:11.3%!important;left:19%!important;width:76%!important;height:9.6%!important;
 display:flex!important;align-items:center!important;justify-content:space-around!important;
 gap:clamp(7px,2.5vw,17px)!important;
}
.zw-picnic-world button.zw-pic-mode,
.zw-picnic-world button.zw-pic-mode:not(.is-current){
 position:relative!important;
 flex:0 0 auto!important;
 width:clamp(56px,17vw,77px)!important;height:clamp(56px,17vw,77px)!important;
 min-width:54px!important;min-height:54px!important;
 padding:0!important;margin:0!important;
 border:0!important;border-radius:50%!important;
 outline:0!important;
 box-shadow:none!important;
 background:transparent url('/picnic-story-v84/mode-collect.webp') center/contain no-repeat!important;
 opacity:1!important;
 filter:drop-shadow(0 3px 2px #765d4375)!important;
 transform:none!important;
 transition:transform .22s cubic-bezier(.18,1.4,.32,1),filter .22s ease!important;
 touch-action:manipulation!important;
}
.zw-picnic-world button.zw-pic-mode:nth-child(2){background-image:url('/picnic-story-v84/mode-share.webp')!important}
.zw-picnic-world button.zw-pic-mode:nth-child(3){background-image:url('/picnic-story-v84/mode-set.webp')!important}
.zw-picnic-world .zw-pic-mode-art{visibility:hidden!important}
.zw-picnic-world button.zw-pic-mode.is-current{
 transform:translate3d(0,-4px,0) scale(1.08)!important;
 filter:drop-shadow(0 0 7px #fff4a1) drop-shadow(0 3px 1px #765d4386)!important;
 outline:3px solid #fff0ae!important;outline-offset:0!important;
}
.zw-picnic-world button.zw-pic-mode:active{transform:scale(.94)!important}
.zw-picnic-world .zw-pic-wishes{
 z-index:20!important;
 top:22%!important;left:7%!important;width:86%!important;height:15.5%!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 gap:clamp(3px,1.5vw,10px)!important;
}
.zw-picnic-world button.zw-pic-wish{
 flex:1 1 0!important;min-width:0!important;max-width:240px!important;
 position:relative!important;height:100%!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 gap:clamp(2px,.8vw,6px)!important;
 padding:clamp(8px,1.2dvh,13px)!important;
 background:transparent url('/picnic-story-v84/wish.webp') center/100% 100% no-repeat!important;
 border:0!important;border-radius:24px!important;
 box-shadow:none!important;
 filter:drop-shadow(0 3px 2px #714f358c)!important;
 transform:none!important;
 touch-action:manipulation!important;
 overflow:hidden!important;
}
.zw-picnic-world .zw-pic-wish.is-current{
 filter:drop-shadow(0 0 6px #fff1aa) drop-shadow(0 4px 2px #76553f)!important;
 transform:translate3d(0,-2px,0) scale(1.025)!important;
}
.zw-picnic-world .zw-pic-wish.is-complete{
 filter:drop-shadow(0 0 5px #a9db92)!important;
}
.zw-picnic-world .zw-pic-wishes:has(.zw-pic-wish:only-child) .zw-pic-wish{
 flex:0 1 78%!important;
 max-width:310px!important;
}
.zw-picnic-world .zw-pic-wish .zw-pic-small-face{
 width:23%!important;height:61%!important;
 flex:0 0 23%!important;
 max-height:none!important;max-width:65px!important;
 object-fit:contain!important;
 mask-image:linear-gradient(#000 0 82%,transparent 100%)!important;
 -webkit-mask-image:linear-gradient(#000 0 82%,transparent 100%)!important;
}
.zw-picnic-world .zw-pic-wish .zw-pic-qty{
 display:block!important;
 font:900 clamp(23px,7vw,42px)/1 "Chalkboard SE","Comic Sans MS",system-ui,sans-serif!important;
 margin:0!important;padding:0 1px!important;
 color:#7b4935!important;
 text-shadow:0 2px #fffae0!important;
}
.zw-picnic-world .zw-pic-wish .zw-pic-picture{
 display:flex!important;flex:1 1 auto!important;
 align-content:center!important;align-items:center!important;justify-content:center!important;
 flex-wrap:wrap!important;
 min-width:0!important;max-height:100%!important;
 overflow:hidden!important;
 gap:1px!important;
}
.zw-picnic-world .zw-pic-wish .zw-pic-mini{
 display:grid!important;place-items:center!important;
 width:clamp(14px,4.1vw,30px)!important;height:clamp(14px,4.1vw,30px)!important;
 max-width:28%!important;flex:0 0 auto!important;
 filter:drop-shadow(0 1px 1px #b18e5955);
}
.zw-picnic-world .zw-pic-wishes:has(.zw-pic-wish:nth-child(3)) .zw-pic-mini{
 width:clamp(11px,3.4vw,22px)!important;height:clamp(11px,3.4vw,22px)!important;
}
.zw-picnic-world .zw-pic-wish:only-child .zw-pic-mini{width:clamp(22px,5.8vw,34px)!important;height:clamp(22px,5.8vw,34px)!important}
.zw-picnic-world .zw-pic-characters{
 z-index:8!important;
 left:0%!important;top:38%!important;width:100%!important;height:24.5%!important;
 overflow:visible!important;
 pointer-events:none!important;
}
.zw-picnic-world .zw-pic-friend{
 position:absolute!important;
 bottom:0!important;
 width:34%!important;height:100%!important;
 filter:drop-shadow(1px 4px 2px #577b3959)!important;
 transform-origin:50% 88%!important;
 animation:zw84-mascot-idle 4.6s ease-in-out infinite!important;
 will-change:transform;
}
.zw-picnic-world .zw-pic-friend img{
 width:100%!important;height:100%!important;
 object-fit:contain!important;
 mask-image:linear-gradient(#000 0 80%,transparent 100%)!important;
 -webkit-mask-image:linear-gradient(#000 0 80%,transparent 100%)!important;
}
.zw-picnic-world .zw-pic-moritz{left:2%!important;animation-delay:-1.2s!important}
.zw-picnic-world .zw-pic-igor{right:2%!important;animation-delay:-2.9s!important}
.zw-picnic-world .zw-pic-character-grass{z-index:10!important;opacity:.45!important;pointer-events:none!important}
.zw-picnic-world .zw-pic-cloth{
 z-index:9!important;left:11%!important;top:56%!important;width:78%!important;height:27%!important;
 border:0!important;border-radius:0!important;
 background:transparent url('/picnic-story-v84/blanket.webp') center/100% 100% no-repeat!important;
 transform:none!important;
 box-shadow:none!important;
 filter:drop-shadow(0 5px 3px #54703c71)!important;
}
.zw-picnic-world .zw-pic-seam{display:none!important}
.zw-picnic-world .zw-pic-plates{
 position:absolute!important;z-index:18!important;
 left:22%!important;top:63%!important;width:64%!important;height:14%!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 gap:clamp(4px,1.3vw,12px)!important;
 pointer-events:auto!important;
}
.zw-picnic-world .zw-pic-plate{
 position:relative!important;
 flex:1 1 0!important;max-width:145px!important;min-width:0!important;
 height:100%!important;min-height:0!important;
 background:transparent url('/picnic-story-v84/plate.webp') center/100% 100% no-repeat!important;
 border:0!important;border-radius:50%!important;
 box-shadow:none!important;
 filter:drop-shadow(0 3px 1px #5f604a78)!important;
 transform:none!important;
 transition:transform .25s,filter .25s!important;
}
.zw-picnic-world .zw-pic-plate:nth-child(even){transform:rotate(4deg)!important}
.zw-picnic-world .zw-pic-plate.is-target{
 filter:drop-shadow(0 0 5px #fff3ad) drop-shadow(0 3px 2px #846f5675)!important;
}
.zw-picnic-world .zw-pic-plate.is-hover{transform:scale(1.11)!important;filter:drop-shadow(0 0 12px #fff5a8)!important}
.zw-picnic-world .zw-pic-plate.is-complete{filter:drop-shadow(0 0 6px #c5ea9f)!important}
.zw-picnic-world .zw-pic-plate-inner{
 inset:9% 9% 13%!important;
 display:flex!important;align-items:center!important;justify-content:center!important;align-content:center!important;
 overflow:hidden!important;
}
.zw-picnic-world .zw-pic-placed{width:clamp(17px,5.7vw,37px)!important;height:clamp(17px,5.7vw,37px)!important}
.zw-picnic-world .zw-pic-plate-dots{bottom:7%!important}
.zw-picnic-world .zw-pic-plate-dots i{border:1px solid #a78d73!important;background:#fdf3d9!important}
.zw-picnic-world .zw-pic-plate-dots i.is-filled{background:#8dcc88!important;border-color:#6d9c61!important}
.zw-picnic-world .zw-pic-basket{
 z-index:20!important;left:1.6%!important;top:63%!important;width:25%!important;height:18%!important;
 transform:rotate(-9deg)!important;
 background:transparent url('/picnic-story-v84/basket.webp') center/contain no-repeat!important;
 filter:drop-shadow(0 4px 3px #5a59394f)!important;
 pointer-events:none!important;
}
.zw-picnic-world .zw-pic-handle,.zw-picnic-world .zw-pic-basket-lid,.zw-picnic-world .zw-pic-weave{display:none!important}
.zw-picnic-world .zw-pic-foods{
 z-index:32!important;left:5%!important;top:84%!important;width:90%!important;height:11.5%!important;
 display:flex!important;align-items:center!important;justify-content:space-around!important;
 gap:clamp(2px,1.2vw,10px)!important;
}
.zw-picnic-world button.zw-pic-food{
 position:relative!important;
 flex:0 1 clamp(56px,18.3vw,84px)!important;
 width:clamp(56px,18.3vw,84px)!important;height:clamp(56px,18.3vw,84px)!important;
 min-width:52px!important;min-height:52px!important;max-width:24%!important;
 padding:clamp(9px,2.8vw,14px)!important;
 border:0!important;border-radius:50%!important;
 background:transparent url('/picnic-story-v84/food-coin.webp') center/contain no-repeat!important;
 box-shadow:none!important;
 filter:drop-shadow(0 3px 2px #6a543f78)!important;
 touch-action:none!important;
 transition:transform .17s ease,filter .2s ease!important;
}
#app .zw-picnic-world button.zw-pic-food:nth-child(n){background:transparent url('/picnic-story-v84/food-coin.webp') center/100% 100% no-repeat!important}
.zw-picnic-world button.zw-pic-food svg{width:100%!important;height:100%!important;max-height:none!important;min-width:0!important;min-height:0!important}
.zw-picnic-world button.zw-pic-food:active{transform:translateY(2px) scale(.94)!important;filter:drop-shadow(0 0 7px #fff0a2)!important}
.zw-picnic-world button.zw-pic-food:focus-visible,.zw-picnic-world button.zw-pic-mode:focus-visible{
 outline:4px solid #fff1b0!important;outline-offset:1px!important;
}
.zw-picnic-world .zw-pic-result-actions{z-index:45!important;right:3%!important;bottom:2%!important}
.zw-picnic-world #zwPicNext{
 width:clamp(56px,15vw,72px)!important;height:clamp(56px,15vw,72px)!important;
 border:4px solid #a27c53!important;
 border-radius:50%!important;
 background:radial-gradient(circle at 36% 22%,#fff7cf,#e8bb81)!important;
 box-shadow:inset 0 0 0 2px #fff1d0,0 3px 2px #73523d75!important;
}
.zw-picnic-world .zw-pic-new-sun{display:none!important}
.zw-picnic-world .zw-pic-butterfly{
 top:40%!important;left:61%!important;z-index:10!important;
 animation:zw84-butterfly 9s ease-in-out infinite!important;
}
.zw-picnic-world .zw84-sparkles{
 position:absolute;z-index:55;inset:0;
 pointer-events:none;overflow:hidden;
 contain:layout style;
}
.zw-picnic-world .zw84-sparkle{
 position:absolute;left:var(--px);top:var(--py);
 width:var(--size);height:var(--size);
 border-radius:50%;
 pointer-events:none;
 background:radial-gradient(circle at 31% 27%,#fffef2e6 0%,var(--color,#f8bed2) 46%,#fff9e166 80%);
 border:2px solid #fff9e0b3;
 box-shadow:0 2px 2px #58583c2b;
 animation:zw84-joy var(--dur) cubic-bezier(.19,.66,.31,1) both;
 animation-delay:var(--delay,0ms);
 will-change:transform,opacity;
}
.zw-picnic-world .zw84-sparkle.is-star{
 border-radius:0;clip-path:polygon(50% 0%,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0% 50%,39% 39%);
 background:var(--color,#fff0af);
 border:0;
}
.zw-picnic-world .zw84-sparkle.is-heart{
 border-radius:0;clip-path:polygon(50% 92%,12% 54%,6% 39%,8% 23%,20% 12%,35% 12%,50% 27%,65% 12%,80% 12%,92% 23%,94% 39%,88% 54%);
 background:var(--color,#f5a1ba);
 border:0;
}
@keyframes zw84-joy{
 0%{opacity:0;transform:translate3d(0,5px,0) scale(.3) rotate(-10deg)}
 18%{opacity:1;transform:translate3d(var(--dx17),-15px,0) scale(1) rotate(5deg)}
 76%{opacity:.95;transform:translate3d(var(--dx74),var(--dy74),0) scale(.98) rotate(38deg)}
 100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(.62) rotate(65deg)}
}
@keyframes zw84-butterfly{0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}50%{transform:translate3d(-19px,-15px,0) rotate(7deg)}}
@keyframes zw84-mascot-idle{0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}50%{transform:translate3d(0,-3px,0) rotate(2.5deg)}}
.zw-picnic-world.zw-pic-eating .zw-pic-friend{animation:zw84-chew .62s ease-in-out 4!important}
.zw-picnic-world.zw-pic-sipping .zw-pic-igor{animation:zw84-sip 1.1s ease-in-out 3!important}
.zw-picnic-world.zw-pic-dance .zw-pic-friend{animation:zw84-dance 1.6s ease-in-out infinite!important}
.zw-picnic-world.zw-pic-dance .zw-pic-igor{animation-delay:-.8s!important}
@keyframes zw84-chew{0%,100%{transform:scale(1) rotate(0deg)}35%{transform:scale(1.06,.95) rotate(-3deg)}65%{transform:scale(.97,1.04) rotate(4deg)}}
@keyframes zw84-sip{0%,100%{transform:rotate(0deg)}35%{transform:rotate(-13deg) translate3d(1px,0,0)}70%{transform:rotate(5deg)}}
@keyframes zw84-dance{0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}30%{transform:translate3d(0,-16px,0) rotate(8deg)}65%{transform:translate3d(0,-5px,0) rotate(-8deg)}}
.zw-picnic-world.zw-pic-party .zw-pic-cloth{animation:zw84-blanket-bounce 1.4s ease-out 1!important}
@keyframes zw84-blanket-bounce{0%,100%{scale:1}35%{scale:1.025}70%{scale:.99}}
.zw-picnic-world.zw-pic-leaving .zw-pic-wishes,.zw-picnic-world.zw-pic-leaving .zw-pic-plates,.zw-picnic-world.zw-pic-leaving .zw-pic-foods{transition:opacity .42s,transform .42s!important;opacity:0!important}
@media(orientation:landscape) and (max-height:640px){
 #app:has(.zw-picnic-world) .zw-picnic-world.main-content{background-image:url('/picnic-story-v84/meadow-landscape.webp')!important}
 .zw-picnic-world .zw-pic-story-title{left:11%!important;top:1%!important;width:23%!important;height:17%!important}
 .zw-picnic-world .zw-pic-modes{left:35%!important;top:4%!important;width:43%!important;height:15%!important;gap:4px!important}
 #app .zw-picnic-world button.zw-pic-mode:nth-child(n){width:clamp(54px,14vh,65px)!important;height:clamp(54px,14vh,65px)!important;min-width:54px!important;min-height:54px!important}
 .zw-picnic-world .zw-pic-wishes{left:21%!important;top:21%!important;width:60%!important;height:20%!important}
 .zw-picnic-world .zw-pic-characters{left:0%!important;top:36%!important;width:100%!important;height:41%!important}
 .zw-picnic-world .zw-pic-friend{width:22%!important;height:100%!important}
 .zw-picnic-world .zw-pic-moritz{left:4%!important}
 .zw-picnic-world .zw-pic-igor{right:4%!important}
 .zw-picnic-world .zw-pic-cloth{left:26%!important;top:56%!important;width:48%!important;height:31%!important}
 .zw-picnic-world .zw-pic-plates{left:32%!important;top:63%!important;width:43%!important;height:16%!important}
 .zw-picnic-world .zw-pic-basket{left:16%!important;top:62%!important;width:15%!important;height:27%!important}
 .zw-picnic-world .zw-pic-foods{left:28%!important;top:79%!important;width:48%!important;height:13%!important;gap:5px!important}
 .zw-picnic-world button.zw-pic-food{width:clamp(50px,13vh,61px)!important;height:clamp(50px,13vh,61px)!important;flex-basis:clamp(50px,13vh,61px)!important;min-width:47px!important;min-height:47px!important;padding:9px!important}
 .zw-picnic-world .zw-pic-wish .zw-pic-qty{font-size:clamp(23px,5vh,36px)!important}
 .zw-picnic-world .zw-pic-wish .zw-pic-mini{width:clamp(14px,3vh,22px)!important;height:clamp(14px,3vh,22px)!important}
}
@media(max-width:355px) and (orientation:portrait){
 .zw-picnic-world .zw-pic-story-title{left:25%!important;width:71%!important}
 .zw-picnic-world .zw-pic-modes{left:20%!important;width:78%!important}
 .zw-picnic-world button.zw-pic-mode{width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important}
 .zw-picnic-world .zw-pic-wishes{left:5%!important;width:90%!important}
 .zw-picnic-world .zw-pic-qty{font-size:23px!important}
 .zw-picnic-world button.zw-pic-food{padding:9px!important}
}
@media(prefers-reduced-motion:reduce){
 .zw-picnic-world .zw-pic-butterfly,.zw-picnic-world .zw-pic-friend,.zw-picnic-world .zw84-sparkle{
  animation-duration:.01ms!important;animation-iteration-count:1!important;
 }
}

/* High-specificity override of old v73 green background, keeping the painted scene visible. */
#app:has(.zw-picnic-world) .zw-picnic-world.main-content{
 background-color:#84c77c!important;
 background-image:url('/picnic-story-v84/meadow-portrait.webp')!important;
 background-size:100% 100%!important;
 background-position:center center!important;
 background-repeat:no-repeat!important;
}
.zw-picnic-world .zw-pic-story-title{
 top:1.2%!important;
 height:7.5%!important;
}
.zw-picnic-world .zw-pic-modes{
 top:10%!important;
 height:9.6%!important;
}
@media(orientation:landscape) and (max-height:640px){
 #app:has(.zw-picnic-world) .zw-picnic-world.main-content{
 background-image:url('/picnic-story-v84/meadow-landscape.webp')!important;
 }
 .zw-picnic-world .zw-pic-story-title{left:10%!important;top:1.1%!important;width:22%!important;height:15%!important}
 .zw-picnic-world .zw-pic-modes{left:35%!important;top:2%!important;height:18%!important}
}

/* Last-stage refinements, override older v76 and mobile v83 rules */
#app:has(.zw-picnic-world){
 height:100dvh!important;max-height:100dvh!important;min-height:0!important;
 overflow:hidden!important;
}
#app .zw-picnic-world .zw-pic-modes{
 top:10.25%!important;
}
#app .zw-picnic-world button.zw-pic-food:nth-child(n){
 background-image:url('/picnic-story-v84/food-coin.webp')!important;
 background-size:contain!important;
 background-position:center!important;
 background-repeat:no-repeat!important;
}
.zw-picnic-world .zw84-food-art{
 width:100%!important;height:100%!important;display:block!important;
 overflow:visible!important;flex:0 0 auto!important;
 object-fit:contain!important;
 filter:drop-shadow(0 1px 1px #7b5e4460)!important;
}
.zw-picnic-world .zw84-food-art image{pointer-events:none!important}
@media(orientation:landscape) and (max-height:640px){
 #app .zw-picnic-world .zw-pic-modes{top:2.2%!important}
}

/* True circular illustrated plates; small children recognize a dish immediately. */
.zw-picnic-world .zw-pic-plate{
 flex:1 1 0!important;
 width:100%!important;
 height:auto!important;
 aspect-ratio:1!important;
 max-width:130px!important;
 max-height:100%!important;
 min-height:0!important;
 align-self:center!important;
}
/* Three wishes must still show clearly recognizable real food drawings. */
.zw-picnic-world .zw-pic-wishes:has(.zw-pic-wish:nth-child(3)) .zw-pic-mini{
 width:clamp(18px,5.4vw,25px)!important;
 height:clamp(18px,5.4vw,25px)!important;
 max-width:33%!important;
}
.zw-picnic-world .zw-pic-wishes:has(.zw-pic-wish:nth-child(3)) .zw-pic-wish{
 padding:5px 4px!important;gap:1px!important;
}
.zw-picnic-world .zw-pic-wishes:has(.zw-pic-wish:nth-child(3)) .zw-pic-wish .zw-pic-qty{
 font-size:clamp(23px,6vw,32px)!important;
}
@media(orientation:landscape) and (max-height:640px){
 .zw-picnic-world .zw-pic-plates{height:22%!important;top:60%!important}
}