/* Zählwiese v123 — newly composed pencil-illustrated homepage.
   9 real games; accessible finger-sized buttons; animated articulated seesaw.
   Independent from legacy zw80/zw108 styling, preserves user-approved drawings. */
html:has(.zw123-home),body:has(.zw123-home){
 margin:0!important;padding:0!important;width:100%!important;height:100dvh!important;
 overflow:hidden!important;overscroll-behavior:none!important;
}
#app:has(>.zw123-home){
 position:relative!important;isolation:isolate!important;
 box-sizing:border-box!important;width:100%!important;max-width:none!important;
 height:100dvh!important;max-height:100dvh!important;min-height:100dvh!important;
 padding:0!important;margin:0!important;overflow:hidden!important;
 border:0!important;border-radius:0!important;
 background:#99ca89!important;box-shadow:none!important;transform:none!important;
}
#app:has(>.zw123-home)::before,#app:has(>.zw123-home)::after{display:none!important}
#app>.zw123-home,#app>.zw123-home *{box-sizing:border-box}
#app>.zw123-home{
 --zw123-paper:#f7e8c3;
 position:absolute!important;inset:0!important;display:block!important;
 width:100%!important;height:100%!important;
 padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px)
         env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)!important;
 overflow:hidden!important;
 background:#b8dfdf url('/home-v123/background-portrait.webp') center/100% 100% no-repeat!important;
 user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none!important;
}
#app>.zw123-home img{
 display:block;object-fit:contain;pointer-events:none;-webkit-user-drag:none;
 user-select:none;-webkit-user-select:none;
}
#app .zw123-home button{
 -webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer;
}
#app .zw123-home button:focus-visible{
 outline:4px solid #ffe38c!important;outline-offset:3px!important;
}
#app .zw123-home .zw123-scene{
 display:grid!important;
 grid-template-rows:minmax(0,40%) minmax(0,54%) minmax(0,6%)!important;
 grid-template-columns:minmax(0,1fr)!important;
 align-items:stretch!important;justify-items:center!important;
 position:relative!important;width:100%!important;height:100%!important;min-height:0!important;
 gap:0!important;margin:0 auto!important;padding:0 clamp(3px,.9vw,15px)!important;
 max-width:730px;
}
#app .zw123-home .zw123-hero{
 position:relative!important;grid-row:1;grid-column:1;overflow:visible!important;
 width:100%!important;height:100%!important;isolation:isolate!important;
}
#app .zw123-home .zw123-title{
 position:absolute;z-index:7;top:0.2%;left:13%;width:77%;height:33%;
 object-fit:contain!important;
 filter:drop-shadow(0 3px 3px #74603d58);
 animation:zw123-title-arrive .8s ease-out both;
}
#app .zw123-home .zw123-settings{
 all:unset;box-sizing:border-box;position:absolute!important;z-index:22;
 left:max(7px,1%);top:max(7px,1.3%);
 width:clamp(56px,13.8vw,77px)!important;height:clamp(56px,13.8vw,77px)!important;
 background:transparent!important;border:0!important;border-radius:50%!important;
 filter:drop-shadow(0 3px 2px #6f522e7b)!important;
 cursor:pointer!important;
}
#app .zw123-home .zw123-settings img{
 display:block;width:100%;height:100%;object-fit:contain;
}
#app .zw123-home .zw123-playground{
 position:absolute;left:5%;top:25%;width:90%;height:74%;
 isolation:isolate;
}
#app .zw123-home .zw123-stand{
 position:absolute;z-index:3;left:45%;top:48%;width:11%;height:45%;
 object-fit:contain!important;object-position:bottom center!important;
 filter:drop-shadow(0 5px 3px #4b58375d);
}
#app .zw123-home .zw123-seesaw{
 all:unset;box-sizing:border-box;position:absolute!important;z-index:8;inset:0;
 border:0!important;border-radius:24%!important;background:transparent!important;
 cursor:pointer!important;touch-action:manipulation!important;
}
#app .zw123-home .zw123-lever{
 position:absolute;z-index:4;inset:0;display:block;
 transform-origin:50% 66%;transform:rotate(-4deg);
 animation:zw123-gentle 5.5s ease-in-out infinite;
 will-change:transform;
}
#app .zw123-home .zw123-beam{
 position:absolute;left:3%;top:62%;width:94%;height:15%;
 object-fit:fill!important;filter:drop-shadow(0 3px 2px #564b356b);
}
#app .zw123-home .zw123-moritz{
 position:absolute;left:3%;top:4%;width:41%;height:68%;z-index:6;
 object-fit:contain!important;object-position:bottom center!important;
 filter:drop-shadow(0 2px 2px #5f513740);
}
#app .zw123-home .zw123-igor{
 position:absolute;right:2%;top:8%;width:40%;height:66%;z-index:6;
 object-fit:contain!important;object-position:bottom center!important;
 filter:drop-shadow(0 2px 2px #5f513740);
}
#app .zw123-home .zw123-pivot{
 position:absolute;z-index:12;left:46.5%;top:62%;width:7%;height:13%;
 object-fit:contain!important;pointer-events:none;
 filter:drop-shadow(0 2px 2px #75583876);
}
#app .zw123-home .zw123-seesaw.zw-seesaw-tapped .zw123-lever{
 animation:zw123-ride 3.7s cubic-bezier(.35,.57,.25,.95) both!important;
}
#app .zw123-home .zw123-seesaw:active .zw123-lever{filter:brightness(1.03)}
#app .zw123-home .zw123-joy{
 position:absolute;inset:-10% -5%;z-index:19;pointer-events:none;overflow:visible;
}
#app .zw123-home .zw123-joy-particle{
 position:absolute;display:block;width:var(--size,16px);height:var(--size,16px);
 left:var(--x);top:var(--y);
 background-size:contain;background-repeat:no-repeat;background-position:center;
 opacity:0;pointer-events:none;
 animation:zw123-celebrate var(--dur,3.6s) ease-out var(--delay,0s) both;
 filter:drop-shadow(0 2px 1px #66503653);
}
#app .zw123-home .zw123-joy-particle.heart{background-image:url('/animal-feeding-v85/heart.webp')}
#app .zw123-home .zw123-joy-particle.balloon{background-image:url('/storybook-games-v91/balloon-rose.webp')}
#app .zw123-home .zw123-joy-particle.star{background-image:url('/picnic-v109/star.webp')}
#app .zw123-home .zw123-board{
 grid-row:2;grid-column:1;position:relative;overflow:visible;
 width:100%;height:100%;min-height:0;
 background:transparent url('/home-v123/game-board.webp') center/100% 100% no-repeat;
 padding:3.8% 4.4% 3.2%;margin:0;
}
#app .zw123-home .zw123-grid{
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 grid-template-rows:repeat(3,minmax(0,1fr));
 column-gap:1.4%;row-gap:1.6%;
 align-items:center;justify-items:center;
 width:100%;height:100%;min-height:0;min-width:0;
}
#app .zw123-home .zw123-tile{
 all:unset;box-sizing:border-box;position:relative;
 display:flex;align-items:center;justify-content:center;
 width:100%;height:100%;min-height:0;min-width:0;
 margin:0;padding:0;background:transparent!important;
 border:0!important;border-radius:28%!important;
 cursor:pointer;touch-action:manipulation!important;
 opacity:1;animation:zw123-tile-appear .54s cubic-bezier(.2,.9,.3,1) both;
 animation-delay:calc(var(--idx)*55ms);
 transition:filter .18s ease,transform .18s cubic-bezier(.2,.85,.3,1)!important;
}
#app .zw123-home .zw123-tile img{
 width:100%;height:100%;
 max-width:100%;max-height:100%;
 object-fit:contain!important;
 filter:drop-shadow(0 3px 2px #6c51356b);
}
#app .zw123-home .zw123-tile:active{
 transform:translateY(3px) rotate(-3deg) scale(.88)!important;
 filter:brightness(1.07)!important;
}
@media(hover:hover){
 #app .zw123-home .zw123-tile:hover{
  transform:translateY(-4px) rotate(1deg) scale(1.045);
  filter:saturate(1.1);
 }
}
#app .zw123-home .zw123-footer{
 grid-row:3;grid-column:1;display:flex;justify-content:center;align-items:center;
 width:100%;height:100%;padding:0 12%;
}
#app .zw123-home .zw123-footer img{
 width:min(100%,365px);height:85%;object-fit:contain;
 filter:drop-shadow(0 2px 2px #64492f5e);
}
#app .zw123-home .zw123-sr{
 position:absolute!important;width:1px!important;height:1px!important;
 padding:0!important;margin:-1px!important;overflow:hidden!important;
 clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
@keyframes zw123-gentle{
 0%,100%{transform:rotate(-3deg)}
 50%{transform:rotate(2deg)}
}
@keyframes zw123-ride{
 0%{transform:rotate(-3deg)}
 15%{transform:rotate(11deg)}
 31%{transform:rotate(-11deg)}
 48%{transform:rotate(10deg)}
 64%{transform:rotate(-8deg)}
 83%{transform:rotate(5deg)}
 100%{transform:rotate(-3deg)}
}
@keyframes zw123-tile-appear{
 0%{opacity:0;transform:translateY(13px) scale(.87)}
 75%{opacity:1;transform:translateY(-2px) scale(1.025)}
 100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes zw123-title-arrive{
 from{opacity:0;transform:translateY(-12px) scale(.96)}
 to{opacity:1;transform:none}
}
@keyframes zw123-celebrate{
 0%{opacity:0;transform:translate(0,18px) rotate(-9deg) scale(.5)}
 14%{opacity:1}
 75%{opacity:.95}
 100%{opacity:0;transform:translate(var(--dx,0px),var(--dy,-100px)) rotate(var(--rotate,15deg)) scale(1.05)}
}
@media (orientation:portrait) and (max-height:650px){
 #app .zw123-home .zw123-scene{grid-template-rows:minmax(0,37%) minmax(0,57%) minmax(0,6%)!important}
 #app .zw123-home .zw123-settings{width:clamp(50px,12vw,60px)!important;height:clamp(50px,12vw,60px)!important}
 #app .zw123-home .zw123-title{height:31%}
}
@media (orientation:portrait) and (max-width:355px){
 #app .zw123-home .zw123-scene{grid-template-rows:minmax(0,38%) minmax(0,56%) minmax(0,6%)!important}
 #app .zw123-home .zw123-board{padding:4.2% 4.1% 3.4%}
 #app .zw123-home .zw123-grid{gap:.9% .6%}
 #app .zw123-home .zw123-title{left:13%;width:83%}
 #app .zw123-home .zw123-playground{left:1%;width:98%}
}
@media (orientation:landscape){
 #app>.zw123-home{background-image:url('/home-v123/background-landscape.webp')!important}
 #app .zw123-home .zw123-scene{
  display:grid!important;width:100%!important;max-width:1440px!important;
  grid-template-columns:minmax(0,47%) minmax(0,53%)!important;
  grid-template-rows:minmax(0,91%) minmax(0,9%)!important;
  gap:0!important;padding:0 clamp(5px,1vw,20px)!important;
 }
 #app .zw123-home .zw123-hero{
  grid-column:1;grid-row:1;width:100%;height:100%;
 }
 #app .zw123-home .zw123-title{
  left:17%;top:1%;width:76%;height:29%;
 }
 #app .zw123-home .zw123-settings{
  left:max(4px,1%);top:max(4px,1%);
  width:clamp(44px,12vh,67px)!important;height:clamp(44px,12vh,67px)!important;
 }
 #app .zw123-home .zw123-playground{
  top:29%;height:69%;left:1%;width:98%;
 }
 #app .zw123-home .zw123-board{
  grid-column:2;grid-row:1;width:100%;height:100%;
  padding:2.9% 3.9% 2.8%;
 }
 #app .zw123-home .zw123-grid{
  gap:1% .6%;
 }
 #app .zw123-home .zw123-footer{
  grid-column:1/3;grid-row:2;width:100%;height:100%;
 }
 #app .zw123-home .zw123-footer img{height:92%;width:min(46%,310px)}
}
@media (prefers-reduced-motion:reduce){
 #app .zw123-home .zw123-lever{animation:none!important;transform:rotate(-2deg)!important}
 #app .zw123-home .zw123-seesaw.zw-seesaw-tapped .zw123-lever{animation:zw123-ride 5.5s ease-in-out 1!important}
 #app .zw123-home .zw123-tile,#app .zw123-home .zw123-title{animation:none!important}
 #app .zw123-home .zw123-joy-particle{animation-duration:.85s!important}
}