/* V63 Zählwiese – same hand-drawn game book as Finger zählen.
   Visual-first counting, hand-drawn animals, original painted cards. */
.zw-animal-book-v63 .zw-book-art{
 background-image:url('/animal-scene-v63.webp')!important;
}
.zw-animal-book-v63 .zw-animal-pair{
 align-items:center!important;
 pointer-events:auto!important;
}
.zw-animal-book-v63 .zw-animal-panel{
 display:flex!important;
 position:relative!important;
 align-items:center!important;
 justify-content:center!important;
 flex:0 0 47%!important;
 width:47%!important;
 height:100%!important;
 min-width:0!important;
 margin:0!important;
 padding:5px!important;
 border:0!important;
 border-radius:20px!important;
 background:transparent!important;
 box-shadow:none!important;
 color:inherit!important;
 overflow:visible!important;
 cursor:pointer!important;
 touch-action:manipulation!important;
}
.zw-animal-book-v63 .zw-animal-panel:focus-visible{
 outline:3px solid #e8b95e!important;
 outline-offset:-4px!important;
}
.zw-animal-book-v63 .zw-animal-grid{
 display:grid!important;
 grid-template-columns:repeat(var(--cols),minmax(0,1fr))!important;
 grid-auto-rows:minmax(0,1fr)!important;
 align-content:center!important;
 justify-content:center!important;
 align-items:center!important;
 justify-items:center!important;
 gap:1px!important;
 width:95%!important;
 height:96%!important;
 max-height:100%!important;
 pointer-events:none!important;
}
.zw-animal-book-v63 .zw-animal-figure{
 position:relative!important;
 display:grid!important;
 place-items:center!important;
 width:100%!important;
 height:100%!important;
 margin:0!important;
 padding:0!important;
 min-width:0!important;
 min-height:0!important;
 border:0!important;
 background:transparent!important;
 box-shadow:none!important;
 overflow:visible!important;
 transform-origin:50% 85%;
}
.zw-animal-book-v63 .zw-animal-figure img{
 position:relative!important;
 display:block!important;
 width:100%!important;
 height:100%!important;
 max-width:100%!important;
 max-height:100%!important;
 object-fit:contain!important;
 object-position:center center!important;
 background:transparent!important;
 filter:drop-shadow(1px 3px 1px rgba(102,80,55,.25))!important;
 animation:zw-animal-sway 3.2s ease-in-out infinite!important;
 animation-delay:calc(var(--animal-index)*-.26s)!important;
 transform-origin:50% 80%;
 will-change:transform;
 pointer-events:none!important;
}
.zw-animal-book-v63 .zw-animal-panel[style*="--count:1"] .zw-animal-grid{width:85%!important;height:85%!important}
.zw-animal-book-v63 .zw-animal-panel[style*="--count:2"] .zw-animal-grid{width:100%!important;height:83%!important}
.zw-animal-book-v63 .zw-animal-panel[style*="--count:3"] .zw-animal-grid,
.zw-animal-book-v63 .zw-animal-panel[style*="--count:4"] .zw-animal-grid{width:99%!important;height:98%!important}
.zw-animal-book-v63 .zw-animal-panel[style*="--count:7"] .zw-animal-grid,
.zw-animal-book-v63 .zw-animal-panel[style*="--count:8"] .zw-animal-grid,
.zw-animal-book-v63 .zw-animal-panel[style*="--count:9"] .zw-animal-grid{gap:0!important}
@keyframes zw-animal-sway{
 0%,65%,100%{transform:translate3d(0,0,0) rotate(0)}
 72%{transform:translate3d(0,-3px,0) rotate(-3deg)}
 82%{transform:translate3d(0,-6px,0) rotate(3deg)}
 90%{transform:translate3d(0,-2px,0) rotate(-2deg)}
}
.zw-animal-book-v63 .zw-animal-panel.zw-animal-wave .zw-animal-figure{
 animation:zw-animal-tap .63s ease-out 1!important;
 animation-delay:calc(var(--animal-index)*.045s)!important;
}
@keyframes zw-animal-tap{
 0%,100%{transform:translateY(0) rotate(0deg)}
 37%{transform:translateY(-9px) rotate(-4deg)}
 70%{transform:translateY(-3px) rotate(5deg)}
}
.zw-animal-book-v63.zw-book-success .zw-animal-figure{
 animation:zw-animal-happy 1.1s ease-out both!important;
 animation-delay:calc(var(--animal-index)*.09s)!important;
}
@keyframes zw-animal-happy{
 0%{transform:translateY(5px) scale(.87);opacity:.6}
 30%{transform:translateY(-10px) scale(1.09);opacity:1}
 55%{transform:translateY(0) rotate(4deg)}
 73%{transform:translateY(-6px) rotate(-4deg)}
 100%{transform:none;opacity:1}
}
.zw-animal-book-v63 .zw-book-answer-row .zw-answer-ink{
 font:inherit!important;
 line-height:1!important;
}
.zw-animal-book-v63 .zw-animal-care-actions{
 display:grid!important;
 grid-template-columns:repeat(4,minmax(0,1fr))!important;
 position:absolute!important;
 top:84.1%!important;left:6%!important;
 width:88%!important;height:13.5%!important;
 z-index:16!important;
 gap:clamp(3px,2vw,10px)!important;
 align-items:center!important;
 justify-items:center!important;
 padding:0!important;
 pointer-events:auto!important;
}
.zw-animal-book-v63 .zw-animal-care-button{
 display:grid!important;
 place-items:center!important;
 width:clamp(58px,19vw,90px)!important;
 height:clamp(58px,19vw,90px)!important;
 max-width:100%!important;max-height:100%!important;
 min-width:0!important;min-height:0!important;
 border:3px solid #9c7652!important;
 border-radius:50%!important;
 background:radial-gradient(circle at 30% 25%,#fff5d6,#efd3a0 66%,#d7aa72)!important;
 box-shadow:inset 0 0 0 2px #fff8d2,0 3px 0 #6c573d88!important;
 padding:7%!important;
 touch-action:manipulation!important;
 transition:transform .13s ease-out!important;
 cursor:pointer!important;
}
.zw-animal-book-v63 .zw-animal-care-button:nth-child(1){background:radial-gradient(circle at 30% 25%,#ffefd3,#f8d5a1 66%,#d59e66)!important}
.zw-animal-book-v63 .zw-animal-care-button:nth-child(2){background:radial-gradient(circle at 30% 25%,#e6f9ff,#a8dbe6 69%,#7db8c9)!important}
.zw-animal-book-v63 .zw-animal-care-button:nth-child(3){background:radial-gradient(circle at 30% 25%,#fff0f0,#f3c2ca 69%,#d69aab)!important}
.zw-animal-book-v63 .zw-animal-care-button:nth-child(4){background:radial-gradient(circle at 30% 25%,#fbf8dd,#dbdfaf 69%,#a1b178)!important}
.zw-animal-book-v63 .zw-animal-care-button img{
 display:block!important;
 width:86%!important;
 height:86%!important;
 object-fit:contain!important;
 filter:drop-shadow(1px 2px 0 #815e3b30)!important;
 pointer-events:none!important;
}
.zw-animal-book-v63 .zw-animal-care-button:active{transform:scale(.91)!important}
.zw-animal-book-v63 .zw-animal-care-button:focus-visible{outline:4px solid #ffe499!important;outline-offset:1px!important}
.zw-animal-book-v63 .zw-animal-next{
 background:radial-gradient(circle at 32% 27%,#f8e6b7,#e4b877 78%,#b98751)!important;
 border:3px solid #8c6541!important;
 box-shadow:inset 0 0 0 3px #fff5cf,0 4px 1px #6c503b77!important;
 display:grid!important;
 place-items:center!important;
}
.zw-animal-book-v63 .zw-animal-next:after{
 content:'➜';font-family:'Trebuchet MS',system-ui,sans-serif!important;
 color:#815734;font-size:clamp(28px,8vw,56px)!important;
 font-weight:900!important;line-height:1!important;
}
.zw-animal-book-v63 .zw-animal-love{
 position:absolute!important;top:84%!important;left:25%!important;
 width:18%!important;height:11%!important;z-index:9!important;
 animation:zw-love-float 1s ease-in-out infinite alternate!important;
 pointer-events:none!important;
}
.zw-animal-book-v63 .zw-animal-love svg{width:100%;height:100%}
@keyframes zw-love-float{to{transform:translateY(-12px) rotate(8deg)}}
.zw-animal-book-v63.zw-animal-care-done .zw-animal-figure,
.zw-animal-book-v63.zw-animal-care-done .zw-animal-figure img{animation:none!important}
.zw-animal-book-v63.zw-animal-care-done .zw-animal-next{
 left:58%!important;
}
@media(max-width:350px) and (orientation:portrait){
 .zw-animal-book-v63 .zw-animal-panel{padding:2px!important}
 .zw-animal-book-v63 .zw-animal-care-button{width:54px!important;height:54px!important;padding:6px!important}
}
@media(orientation:landscape) and (max-height:620px){
 .zw-animal-book-v63 .zw-book-art{background-image:url('/animal-scene-land-v63.webp')!important}
 .zw-animal-book-v63 .zw-animal-grid{height:93%!important;width:96%!important}
 .zw-animal-book-v63 .zw-animal-panel{padding:3px!important}
 .zw-animal-book-v63 .zw-animal-care-actions{
  top:81%!important;left:25%!important;width:52%!important;height:17%!important;
 }
 .zw-animal-book-v63 .zw-animal-care-button{width:clamp(42px,8.6vw,72px)!important;height:clamp(42px,8.6vw,72px)!important;padding:5px!important}
 .zw-animal-book-v63 .zw-animal-next{top:73%!important;left:89%!important}
 .zw-animal-book-v63 .zw-animal-next:after{font-size:clamp(26px,4vw,40px)!important}
 .zw-animal-book-v63 .zw-animal-love{top:81%!important;left:78%!important;width:7%!important;height:13%!important}
 .zw-animal-book-v63.zw-animal-care-done .zw-animal-next{left:90%!important}
}
@media(prefers-reduced-motion:reduce){
 .zw-animal-book-v63 .zw-animal-figure,.zw-animal-book-v63 .zw-animal-figure img{animation:none!important}
 .zw-animal-book-v63 .zw-animal-love{animation:none!important}
}

/* Isolate the new painted-card result layout from the legacy animal care flex layout. */
.zw-animal-book-v63 .zw-animal-pair.animal-care-stage{
 position:absolute!important;
 inset:39.2% 7.5% auto 7.5%!important;
 top:39.2%!important;left:7.5%!important;
 display:flex!important;
 flex-direction:row!important;
 align-items:center!important;
 justify-content:space-between!important;
 gap:5%!important;
 width:85%!important;
 height:24.9%!important;
 min-height:0!important;
 max-width:none!important;
 margin:0!important;padding:0!important;
 overflow:visible!important;
}
.zw-animal-book-v63 .zw-animal-pair.animal-care-stage .zw-animal-panel.result-animals{
 position:relative!important;
 display:flex!important;
 flex:0 0 47%!important;
 flex-direction:row!important;
 flex-wrap:nowrap!important;
 align-content:center!important;
 justify-content:center!important;
 align-items:center!important;
 width:47%!important;
 height:100%!important;
 min-height:0!important;
 max-height:none!important;
 max-width:none!important;
 padding:5px!important;
 margin:0!important;
 gap:0!important;
}
.zw-animal-book-v63 .zw-animal-pair.animal-care-stage .zw-animal-panel.result-animals .zw-animal-grid{
 display:grid!important;
 grid-template-columns:repeat(var(--cols),minmax(0,1fr))!important;
 width:95%!important;
 height:96%!important;
 max-height:100%!important;
 padding:0!important;
 margin:0!important;
 flex:none!important;
}
.zw-animal-book-v63 .zw-animal-pair.animal-care-stage .zw-animal-panel.result-animals .animal-card{
 position:relative!important;
 display:grid!important;
 place-items:center!important;
 flex:none!important;
 width:100%!important;
 height:100%!important;
 min-width:0!important;
 min-height:0!important;
 max-width:100%!important;
 max-height:100%!important;
 margin:0!important;
 padding:0!important;
 gap:0!important;
}
@media(orientation:landscape) and (max-height:620px){
 .zw-animal-book-v63 .zw-animal-pair.animal-care-stage{
  inset:auto!important;
  left:49.1%!important;top:19.8%!important;
  width:48.2%!important;height:32.8%!important;
  min-height:0!important;gap:1.7%!important;
 }
 .zw-animal-book-v63 .zw-animal-pair.animal-care-stage .zw-animal-panel.result-animals{
  flex:0 0 49.15%!important;
  width:49.15%!important;
  padding:3px!important;
 }
}

/* Final artwork fit: prevent portrait animal PNG aspect ratio from spilling out
   of its assigned paper card, especially in short landscape layouts. */
.zw-animal-book-v63 .zw-animal-figure{
 position:relative!important;
 overflow:hidden!important;
}
.zw-animal-book-v63 .zw-animal-figure img,
.zw-animal-book-v63 .zw-animal-pair.animal-care-stage .zw-animal-figure img{
 position:absolute!important;
 inset:0!important;
 left:0!important;top:0!important;
 display:block!important;
 width:100%!important;height:100%!important;
 max-width:100%!important;max-height:100%!important;
 min-width:0!important;min-height:0!important;
 object-fit:contain!important;
 object-position:center center!important;
}
.zw-animal-book-v63 .zw-animal-next{
 left:50%!important;
 top:85.5%!important;
 width:clamp(61px,18vw,85px)!important;
 height:clamp(61px,18vw,85px)!important;
 min-width:0!important;min-height:0!important;
 aspect-ratio:1 / 1!important;
 transform:translateX(-50%)!important;
 border-radius:50%!important;
}
.zw-animal-book-v63 .zw-animal-next:active{
 transform:translateX(-50%) scale(.94)!important;
}
.zw-animal-book-v63.zw-animal-care-done .zw-animal-next{
 left:66%!important;
}
@media(orientation:landscape) and (max-height:620px){
 .zw-animal-book-v63 .zw-animal-next{
  left:93%!important;top:73%!important;
  width:clamp(45px,8vw,66px)!important;
  height:clamp(45px,8vw,66px)!important;
 }
 .zw-animal-book-v63.zw-animal-care-done .zw-animal-next{left:93%!important}
}