/* Zählwiese v192 — same illustrated pencil garden, game board and paint pot vocabulary as v94. */
#app .zw192-choice.main-content,#app .zw192-shapes.main-content{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 max-width:none!important;min-height:0!important;overflow:hidden!important;
 background:#a4d2a0 url('/garden-games-v94/garden-portrait.webp') center / 100% 100% no-repeat!important;
 padding:0!important;isolation:isolate!important;
 font-family:'Trebuchet MS','Segoe Print',Arial,sans-serif!important;
}
#app .zw192-choice *,#app .zw192-shapes *{box-sizing:border-box}
#app .zw192-choice button,#app .zw192-shapes button{
 appearance:none!important;-webkit-appearance:none!important;border:none!important;
 background:transparent!important;box-shadow:none!important;padding:0!important;
 -webkit-tap-highlight-color:transparent!important;touch-action:manipulation!important;
}
#app .zw192-choice button:focus-visible,#app .zw192-shapes button:focus-visible{
 outline:4px solid #fbe8ad!important;outline-offset:4px!important;border-radius:24px!important;
}
#app .zw192-choice img,#app .zw192-shapes img{object-fit:contain;pointer-events:none!important;user-select:none!important;-webkit-user-drag:none}
#app .zw192-choice-title{
 position:absolute!important;left:12%;top:9%;width:76%;height:11%;z-index:5;
}
#app .zw192-choice-title img{width:100%;height:100%;filter:drop-shadow(0 4px 3px #664a3c66)}
#app .zw192-choice-tiles{
 position:absolute!important;left:4%;top:21%;width:92%;height:73%;
 display:grid!important;grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr));
 align-items:stretch;justify-items:stretch;gap:2.5%!important;z-index:5;
}
#app .zw192-choice .zw192-tile{
 display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-end!important;
 position:relative!important;width:100%!important;height:100%!important;min-width:0;min-height:0;
 border-radius:27px!important;
 background:transparent url('/storybook-games-v91/choice-board.webp') center/100% 100% no-repeat!important;
 filter:drop-shadow(0 4px 3px #73583e55)!important;
 overflow:hidden!important;
}
#app .zw192-choice .zw192-tile:active{transform:scale(.97)!important}
#app .zw192-choice .zw192-thumb{
 display:block!important;width:92%!important;height:65%!important;max-height:65%!important;
 object-fit:contain!important;mix-blend-mode:multiply!important;margin:0 auto!important;
}
#app .zw192-choice .zw192-tile-footer{
 display:flex!important;align-items:center!important;justify-content:center!important;
 width:96%!important;height:33%!important;gap:3%;margin:0 auto 2%;
}
#app .zw192-choice .zw192-go{
 width:clamp(72px,23vw,104px)!important;height:clamp(72px,23vw,104px)!important;
 flex:0 0 auto!important;filter:drop-shadow(0 4px 3px #684c2e5e);
}
#app .zw192-choice .zw192-plaque{
 flex:1!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
 width:100%!important;max-width:225px!important;min-height:57px!important;height:82%!important;
 background:transparent url('/hunt-v189/wood-sign.webp') center/100% 100% no-repeat!important;
 color:#813d29!important;font-family:'Trebuchet MS',Arial,sans-serif!important;
 text-align:center!important;
}
#app .zw192-choice .zw192-plaque b{
 font-weight:1000!important;line-height:1.1!important;
 font-size:clamp(19px,5.4vw,27px)!important;
 text-shadow:0 1px #fef2bf!important;
}
/* Interactive new picture puzzle */
#app .zw192-shapes .zw192-back,#app .zw94-connect .zw192-back{
 position:absolute!important;z-index:26!important;left:1.5%!important;top:1.4%!important;
 width:clamp(52px,14vw,68px)!important;height:clamp(52px,14vw,68px)!important;
 background:transparent url('/storybook-games-v91/retry.webp') center/contain no-repeat!important;
 border:0!important;pointer-events:auto!important;
}
#app .zw192-shapes .zw192-back img,#app .zw94-connect .zw192-back img{width:100%;height:100%;opacity:0}
#app .zw192-shapes .zw192-title{
 position:absolute!important;z-index:5!important;left:18%!important;top:1%!important;width:73%!important;height:10%!important;
}
#app .zw192-shapes .zw192-title img{width:100%;height:100%}
#app .zw192-shapes .zw192-progress{
 position:absolute!important;z-index:5!important;left:20%;top:11.5%;width:63%;height:8%;
 display:flex!important;justify-content:center!important;align-items:center!important;gap:3px!important;
 padding:0 12px;background:transparent url('/storybook-games-v91/choice-board.webp') center / 100% 100% no-repeat!important;
}
#app .zw192-shapes .zw192-progress i{
 display:block!important;flex:0 1 16px!important;width:clamp(8px,2.5vw,17px)!important;
 max-width:17px!important;aspect-ratio:1!important;border-radius:50%!important;
 background:#f7d4c1!important;border:2px solid #d2a188!important;box-shadow:0 1px #fff8d4!important;
 transition:transform .18s ease!important;
}
#app .zw192-shapes .zw192-progress i.is-done{
 background:#8bc67c!important;border-color:#558747!important;transform:scale(1.16)!important;
}
#app .zw192-shapes .zw192-board{
 position:absolute!important;z-index:9!important;left:4%!important;top:20.5%!important;width:92%!important;height:54%!important;
 touch-action:none!important;overscroll-behavior:none!important;
 border:5px solid #a17c5b!important;border-radius:26px!important;
 background:#f7e5bf!important;overflow:hidden!important;
 box-shadow:inset 0 0 0 3px #fff0ce,0 4px 4px #60452d51!important;
}
#app .zw192-shapes .zw192-paper{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:fill!important;
}
#app .zw192-shapes #zw192Canvas{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 z-index:2!important;pointer-events:none!important;
}
#app .zw192-shapes .zw192-dot{
 display:flex!important;position:absolute!important;z-index:6!important;
 width:clamp(46px,13.5vw,59px)!important;height:clamp(46px,13.5vw,59px)!important;
 border:0!important;border-radius:50%!important;
 align-items:center!important;justify-content:center!important;
 transform:translate(-50%,-50%)!important;
 touch-action:none!important;
 filter:drop-shadow(0 2px 2px #64573b3c)!important;
 transition:filter .15s ease,scale .15s ease!important;
}
#app .zw192-shapes .zw192-dot .zw192-circle{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
}
#app .zw192-shapes .zw192-dot .zw192-digit{
 position:relative!important;z-index:3!important;color:#593522!important;
 font-family:'Trebuchet MS',Arial,sans-serif!important;
 font-weight:1000!important;font-size:clamp(24px,7.3vw,34px)!important;line-height:1!important;
 text-shadow:1px 1px #fff6df,-1px -1px #fff4cb!important;
}
#app .zw192-shapes .zw192-dot.is-next{
 z-index:7!important;filter:drop-shadow(0 0 6px #fff6a3) drop-shadow(0 2px 2px #88663e)!important;
 animation:zw192-next-pulse 1.45s ease-in-out infinite!important;
}
#app .zw192-shapes .zw192-dot.is-linked{opacity:.88;filter:drop-shadow(0 1px 2px #436a4d55)!important}
#app .zw192-shapes .zw192-dot.zw192-nudge{animation:zw192-nudge .46s ease!important}
@keyframes zw192-next-pulse{0%,100%{filter:drop-shadow(0 0 5px #fff7a4)}50%{filter:drop-shadow(0 0 11px #ffed67)}}
@keyframes zw192-nudge{0%,100%{translate:0 0}25%{translate:-6px 0}50%{translate:6px 0}75%{translate:-3px 0}}
#app .zw192-shapes .zw192-palette{
 position:absolute!important;z-index:15!important;left:4%;top:76.5%;width:83%;height:21%;
 display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));
 align-items:center!important;justify-items:center!important;
}
#app .zw192-shapes .zw192-pot{
 display:block!important;position:relative!important;
 width:clamp(47px,14.7vw,76px)!important;height:clamp(47px,14.7vw,76px)!important;
 filter:drop-shadow(0 2px 2px #65463859)!important;border-radius:50%!important;
}
#app .zw192-shapes .zw192-pot img{width:100%;height:100%}
#app .zw192-shapes .zw192-pot.active{transform:translateY(-5px) scale(1.12)!important;filter:drop-shadow(0 0 6px #fff4be) drop-shadow(0 2px 2px #7e563e66)!important}
#app .zw192-shapes .zw192-restart,#app .zw192-shapes .zw192-next{
 position:absolute!important;z-index:19!important;right:1.5%;bottom:5%;
 width:clamp(53px,16vw,73px)!important;height:clamp(53px,16vw,73px)!important;
 border-radius:50%!important;filter:drop-shadow(0 3px 2px #71574270)!important;
}
#app .zw192-shapes .zw192-restart img,#app .zw192-shapes .zw192-next img{width:100%;height:100%}
#app .zw192-shapes .zw192-next{right:20%;animation:zw192-bob 1.5s ease-in-out infinite!important}
@keyframes zw192-bob{0%,100%{filter:drop-shadow(0 0 2px #fff29b)}50%{filter:drop-shadow(0 0 9px #ffe25a)}}
#app .zw192-shapes .zw192-confetti{
 position:absolute!important;z-index:12!important;width:18px;height:18px;pointer-events:none!important;
 animation:zw192-confetti 1.5s ease-out forwards!important;
}
@keyframes zw192-confetti{
 0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
 10%{opacity:1}
 100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) rotate(var(--rot)) scale(.5)}
}
@media(orientation:landscape) and (max-height:650px){
 #app .zw192-choice.main-content,#app .zw192-shapes.main-content{
  background-image:url('/garden-games-v94/garden-landscape.webp')!important;
 }
 #app .zw192-choice-title{left:30%!important;top:1%!important;width:40%!important;height:17%}
 #app .zw192-choice-tiles{
  left:8%!important;top:19%!important;width:84%!important;height:76%!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:1fr!important;gap:3%!important;
 }
 #app .zw192-choice .zw192-thumb{height:59%!important;max-height:59%!important}
 #app .zw192-choice .zw192-tile-footer{height:38%!important}
 #app .zw192-choice .zw192-go{width:clamp(60px,18vh,96px)!important;height:clamp(60px,18vh,96px)!important}
 #app .zw192-choice .zw192-plaque b{font-size:clamp(16px,4.5vh,24px)!important}
 #app .zw192-shapes .zw192-title{left:63%!important;top:1.5%!important;width:35%!important;height:17%}
 #app .zw192-shapes .zw192-progress{left:64%!important;top:22%!important;width:34%!important;height:15%}
 #app .zw192-shapes .zw192-progress i{width:clamp(7px,1.15vw,12px)!important;flex-basis:12px!important}
 #app .zw192-shapes .zw192-board{left:2%!important;top:7%!important;width:60%!important;height:89%!important;border-width:4px!important}
 #app .zw192-shapes .zw192-dot{width:clamp(43px,12.5vh,62px)!important;height:clamp(43px,12.5vh,62px)!important}
 #app .zw192-shapes .zw192-dot .zw192-digit{font-size:clamp(22px,7.4vh,36px)!important}
 #app .zw192-shapes .zw192-palette{left:64%!important;top:40%!important;width:34%!important;height:43%}
 #app .zw192-shapes .zw192-pot{width:clamp(43px,13vh,65px)!important;height:clamp(43px,13vh,65px)!important}
 #app .zw192-shapes .zw192-restart,#app .zw192-shapes .zw192-next{width:clamp(43px,12vh,62px)!important;height:clamp(43px,12vh,62px)!important;bottom:1%}
 #app .zw192-shapes .zw192-restart{right:13%}
 #app .zw192-shapes .zw192-next{right:24%}
 #app .zw192-shapes .zw192-back{left:1%!important;top:1%!important;width:clamp(45px,12vh,63px)!important;height:clamp(45px,12vh,63px)!important}
}
@media(orientation:portrait) and (max-width:355px){
 #app .zw192-choice-title{left:14%!important;width:72%!important;top:9.5%}
 #app .zw192-choice-tiles{top:21%!important;height:74%!important;left:3%!important;width:94%}
 #app .zw192-choice .zw192-thumb{height:62%!important;max-height:62%!important}
 #app .zw192-choice .zw192-go{width:71px!important;height:71px!important}
 #app .zw192-choice .zw192-plaque b{font-size:18px!important}
 #app .zw192-shapes .zw192-board{left:2%!important;width:96%!important;top:21%!important;height:53%}
 #app .zw192-shapes .zw192-dot{width:43px!important;height:43px!important}
 #app .zw192-shapes .zw192-dot .zw192-digit{font-size:24px!important}
 #app .zw192-shapes .zw192-palette{top:76%!important;left:3%!important;width:82%!important;height:22%}
 #app .zw192-shapes .zw192-pot{width:47px!important;height:47px!important}
 #app .zw192-shapes .zw192-restart{width:52px!important;height:52px!important;right:3%}
 #app .zw192-shapes .zw192-next{width:52px!important;height:52px!important}
}
/* Give the classic numbers mode the same return-to-two-modes button, without changing its game. */
#app .zw94-connect .zw192-back{border:0!important;position:absolute!important;z-index:100!important}

/* Child-friendly back control, with painted red Play style facing left. */
#app .zw192-shapes .zw192-back,#app .zw94-connect .zw192-back{
 left:1%!important;top:11.3%!important;
 background:transparent url('/connect-v192/back-red.webp') center / contain no-repeat!important;
 border:0!important;filter:drop-shadow(0 2px 2px #7954386e)!important;
}
#app .zw192-shapes .zw192-back img,#app .zw94-connect .zw192-back img{
 width:100%!important;height:100%!important;opacity:1!important;
}
@media (orientation:landscape) and (max-height:650px){
 #app .zw192-shapes .zw192-back,#app .zw94-connect .zw192-back{
  left:1%!important;top:1%!important;width:clamp(43px,12vh,60px)!important;height:clamp(43px,12vh,60px)!important;
 }
}
