/* Zählwiese v196 — genuine wax-crayon paint splashes in BOTH connect games. */
#app .zw94-connect .zw94-pot,
#app .zw192-shapes .zw192-pot{
 display:flex!important;align-items:center!important;justify-content:center!important;
 position:relative!important;
 width:clamp(52px,15.7vw,78px)!important;
 height:clamp(52px,15.7vw,78px)!important;
 min-width:48px!important;min-height:48px!important;
 border:0!important;border-radius:50%!important;
 background:transparent!important;
 touch-action:manipulation!important;
 -webkit-tap-highlight-color:transparent!important;
 filter:drop-shadow(0 3px 2px #6450394c)!important;
 transition:transform .18s cubic-bezier(.2,.68,.22,1),filter .18s ease!important;
}
#app .zw94-connect .zw94-pot img,
#app .zw192-shapes .zw192-pot img{
 display:block!important;width:100%!important;height:100%!important;
 object-fit:contain!important;
 transform:scale(1.16)!important;
 filter:drop-shadow(0 1px 1px #fff3d8b8) drop-shadow(0 2px 1px #533f3470)!important;
 border:0!important;border-radius:0!important;
 pointer-events:none!important;user-select:none!important;
}
#app .zw94-connect .zw94-pot.active,
#app .zw192-shapes .zw192-pot.active{
 transform:translateY(-5px) scale(1.13)!important;
 filter:drop-shadow(0 0 7px #fff5b8) drop-shadow(0 3px 3px #56402d84)!important;
 z-index:3!important;
}
#app .zw94-connect .zw94-pot.active::after,
#app .zw192-shapes .zw192-pot.active::after{
 content:"";position:absolute!important;inset:6%!important;
 border:3px dashed #fff2bd!important;border-radius:46% 53% 47% 52%!important;
 box-shadow:0 0 0 2px #8b582b66,0 0 7px #fff3c0af!important;
 transform:rotate(-13deg)!important;
 pointer-events:none!important;
 animation:zw196-paint-glow 2s ease-in-out infinite!important;
}
@keyframes zw196-paint-glow{
 0%,100%{opacity:.75;scale:1}
 50%{opacity:1;scale:1.04}
}
#app .zw94-connect .zw94-pot:active,
#app .zw192-shapes .zw192-pot:active{
 transform:translateY(-2px) scale(.94)!important;
}
#app .zw94-connect .zw94-pot:focus-visible,
#app .zw192-shapes .zw192-pot:focus-visible{
 outline:4px solid #ffe9a0!important;outline-offset:2px!important;
}
#app .zw192-shapes .zw192-palette,
#app .zw94-connect .zw94-palette{
 gap:0!important;overflow:visible!important;
}
/* Small iPhones: keep real 48px+ finger targets, not cramped 36px thumbnails. */
@media(max-width:355px) and (orientation:portrait){
 #app .zw192-shapes .zw192-pot,
 #app .zw94-connect .zw94-pot{
  width:51px!important;height:51px!important;min-width:48px!important;min-height:48px!important;
 }
}
/* Landscape keeps a 4x2 grid with tap-safe spacing beside the painting board. */
@media(orientation:landscape) and (max-height:650px){
 #app .zw192-shapes .zw192-pot,
 #app .zw94-connect .zw94-pot{
  width:clamp(45px,13.2vh,69px)!important;
  height:clamp(45px,13.2vh,69px)!important;
  min-width:44px!important;min-height:44px!important;
 }
}
/* Illustrated completed figures replace the former plain fills. The drawn outline
   remains visible above the watercolor/crayon artwork until next is pressed. */
#app .zw192-shapes .zw195-painted-motif{
 animation:zw196-paint-reveal 1.15s cubic-bezier(.17,.77,.28,1) both!important;
 filter:saturate(1.16) contrast(1.05)!important;
}
@keyframes zw196-paint-reveal{
 0%{opacity:0;transform:scale(.90);filter:saturate(.42)}
 40%{opacity:.9;transform:scale(1.012);filter:saturate(1.19)}
 100%{opacity:1;transform:scale(1);filter:saturate(1.16) contrast(1.05)}
}
@media(prefers-reduced-motion:reduce){
 #app .zw94-connect .zw94-pot.active::after,
 #app .zw192-shapes .zw192-pot.active::after{
 animation:none!important;
 }
 #app .zw192-shapes .zw195-painted-motif{animation-duration:.25s!important}
}