/* Zählwiese · Memory start v216: hand-drawn playground from approved assets,
   balanced three-mode selector and interactive two-card animal demonstration. */
#app .memory127-page.memory127-select{
 position:relative!important;display:block!important;
 padding:0!important;gap:0!important;
 background:#9bd2b5 url('/home-v126/background-portrait.webp') center center/100% 100% no-repeat!important;
 overflow:hidden!important;
}
#app .memory127-select .memory127-title{
 position:absolute!important;z-index:3!important;
 top:2.7%!important;left:17%!important;
 width:65%!important;height:8.8%!important;
 min-width:0!important;min-height:0!important;
 margin:0!important;
 padding:5px 16px!important;
 border:4px solid #945930!important;
 border-radius:35% 32% 35% 34%/24% 24% 22% 22%!important;
 display:grid!important;place-items:center!important;
 background:#f6d6a8 url('/home-paint-v78/wood-plaque.webp') center / 100% 100% no-repeat!important;
 font-family:'Bradley Hand','Segoe Print','Comic Neue',cursive!important;
 font-weight:900!important;font-size:clamp(29px,8vw,45px)!important;
 color:#70432b!important;letter-spacing:.2px!important;
 text-shadow:1px 1px #fff1c9!important;
 box-shadow:0 3px 3px #593a2866!important;
 filter:none!important;
}
#app .memory127-select .memory127-heroes{
 position:absolute!important;z-index:2!important;
 top:17%!important;left:4%!important;width:92%!important;
 height:23.7%!important;max-width:none!important;
 display:flex!important;align-items:flex-end!important;justify-content:space-between!important;
 overflow:visible!important;
}
#app .memory127-select .memory127-heroes img{
 width:49%!important;height:100%!important;max-height:100%!important;
 object-fit:contain!important;object-position:center bottom!important;
 filter:drop-shadow(0 3px 2px #5c442d6f)!important;
}
#app .memory127-select .memory127-heroes img:first-child{transform:rotate(-5deg) translateY(3px)!important}
#app .memory127-select .memory127-heroes img:last-child{transform:rotate(4deg) translateY(2px)!important}
#app .memory127-select .zw216-preview{
 position:absolute!important;z-index:5!important;
 top:40.5%!important;left:50%!important;
 width:min(59%,270px)!important;height:19%!important;max-width:270px!important;
 transform:translateX(-50%)!important;
 isolation:isolate!important;pointer-events:auto!important;
}
#app .memory127-select .zw216-preview-cards{
 position:absolute!important;inset:0!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 gap:clamp(11px,3vw,24px)!important;
}
#app .memory127-select .zw216-preview-card{
 all:unset!important;display:block!important;position:relative!important;
 width:min(43%,100px)!important;height:min(96%,151px)!important;
 flex:0 0 auto!important;
 cursor:pointer!important;touch-action:manipulation!important;
 border-radius:13px!important;box-shadow:0 4px 4px #624a3875!important;
 -webkit-tap-highlight-color:transparent!important;
 perspective:750px!important;
}
#app .memory127-select .zw216-preview-card:active{
 filter:brightness(1.13)!important;
}
#app .memory127-select .zw216-preview-card:focus-visible{
 outline:4px solid #ffe391!important;outline-offset:4px!important;
}
#app .memory127-select .zw216-preview-face{
 position:absolute!important;inset:0!important;display:grid!important;
 place-items:center!important;overflow:hidden!important;
 background:#f5e2b9!important;
 border:4px solid #a76445!important;border-radius:12px!important;
 box-shadow:inset 0 0 0 2px #fff1c4ad!important;
 backface-visibility:visible!important;-webkit-backface-visibility:visible!important;
 transform-origin:center center!important;
}
#app .memory127-select .zw216-preview-face img{
 width:100%!important;height:100%!important;display:block!important;
 object-fit:fill!important;pointer-events:none!important;-webkit-user-drag:none!important;
}
#app .memory127-select .zw216-preview-front img{object-fit:contain!important;background:#fff5d6!important}
#app .memory127-select .zw216-preview-back{
 opacity:1!important;visibility:visible!important;
 transform:perspective(800px) rotateY(0deg)!important;
 transition:transform .21s ease-in,opacity .02s .18s,visibility 0s 0s!important;
}
#app .memory127-select .zw216-preview-front{
 opacity:0!important;visibility:hidden!important;
 transform:perspective(800px) rotateY(-90deg)!important;
 transition:transform .21s .2s ease-out,opacity .02s .2s,visibility 0s .2s!important;
}
#app .memory127-select .zw216-preview-card.zw216-is-open .zw216-preview-back{
 opacity:0!important;visibility:hidden!important;
 transform:perspective(800px) rotateY(90deg)!important;
 transition:transform .21s ease-in,opacity .02s .19s,visibility 0s .2s!important;
}
#app .memory127-select .zw216-preview-card.zw216-is-open .zw216-preview-front{
 opacity:1!important;visibility:visible!important;
 transform:perspective(800px) rotateY(0deg)!important;
 transition:transform .21s .2s ease-out,opacity .02s .2s,visibility 0s .2s!important;
}
#app .memory127-select .zw216-preview-embrace{
 position:absolute!important;z-index:7!important;inset:-9% -17% -2%!important;
 opacity:0!important;visibility:hidden!important;pointer-events:none!important;
}
#app .memory127-select .zw216-preview.zw216-is-hugging .zw216-preview-embrace{
 opacity:1!important;visibility:visible!important;
 animation:zw216-stage-in 2.55s ease-in-out both!important;
}
#app .memory127-select .zw216-preview-embrace::before{
 content:'';position:absolute;inset:15% 3% -7%;
 background:radial-gradient(ellipse at center,#fff8cddd 0%,#fff4ce80 43%,transparent 75%);
 opacity:.9;
}
#app .memory127-select .zw216-snuggle{
 position:absolute!important;z-index:2!important;
 bottom:4%!important;top:auto!important;
 width:58%!important;height:94%!important;
 object-fit:contain!important;object-position:center bottom!important;
 will-change:transform!important;
 filter:drop-shadow(1px 3px 2px #58423255)!important;
 transform-origin:50% 88%!important;
}
#app .memory127-select .zw216-snuggle-left{left:0%!important}
#app .memory127-select .zw216-snuggle-right{right:0%!important}
#app .memory127-select .zw216-is-hugging .zw216-snuggle-left{
 animation:zw216-lean-left 2.55s linear both!important;
}
#app .memory127-select .zw216-is-hugging .zw216-snuggle-right{
 animation:zw216-lean-right 2.55s linear both!important;
}
@keyframes zw216-stage-in{
 0%{opacity:0;scale:.86}
 12%{opacity:1;scale:1}
 85%{opacity:1;scale:1}
 100%{opacity:0;scale:.97}
}
@keyframes zw216-lean-left{
 0%{transform:translate3d(-28%,5px,0) rotate(-10deg) scale(.92)}
 23%{transform:translate3d(10%,0,0) rotate(1deg) scale(1)}
 35%{transform:translate3d(33%,0,0) rotate(10deg) scale(1.045)}
 44%{transform:translate3d(29%,-5px,0) rotate(5deg) scale(1.04)}
 52%{transform:translate3d(35%,2px,0) rotate(13deg) scale(1.04)}
 61%{transform:translate3d(28%,-4px,0) rotate(5deg) scale(1.04)}
 70%{transform:translate3d(34%,2px,0) rotate(12deg) scale(1.04)}
 79%{transform:translate3d(29%,-2px,0) rotate(6deg) scale(1.04)}
 90%,100%{transform:translate3d(33%,0,0) rotate(9deg) scale(1.04)}
}
@keyframes zw216-lean-right{
 0%{transform:translate3d(28%,5px,0) scaleX(-1) rotate(-10deg) scale(.92)}
 23%{transform:translate3d(-10%,0,0) scaleX(-1) rotate(1deg) scale(1)}
 35%{transform:translate3d(-33%,0,0) scaleX(-1) rotate(10deg) scale(1.045)}
 44%{transform:translate3d(-29%,5px,0) scaleX(-1) rotate(5deg) scale(1.04)}
 52%{transform:translate3d(-35%,-2px,0) scaleX(-1) rotate(13deg) scale(1.04)}
 61%{transform:translate3d(-28%,4px,0) scaleX(-1) rotate(5deg) scale(1.04)}
 70%{transform:translate3d(-34%,-2px,0) scaleX(-1) rotate(12deg) scale(1.04)}
 79%{transform:translate3d(-29%,2px,0) scaleX(-1) rotate(6deg) scale(1.04)}
 90%,100%{transform:translate3d(-33%,0,0) scaleX(-1) rotate(9deg) scale(1.04)}
}
#app .memory127-select .zw216-preview-gifts{position:absolute!important;inset:0!important;pointer-events:none!important;z-index:8!important}
#app .memory127-select .zw216-preview-gifts img{
 position:absolute!important;left:calc(45% + (var(--i) - 3)*13%)!important;
 top:calc(43% + (var(--i) - 3)*3%)!important;
 width:clamp(16px,5vw,31px)!important;height:clamp(16px,5vw,31px)!important;
 opacity:0;pointer-events:none!important;
 animation:none!important;
}
#app .memory127-select .zw216-is-hugging .zw216-preview-gifts img{
 animation:zw216-gifts 2.4s ease-out calc(.36s + var(--i)*.1s) both!important;
}
@keyframes zw216-gifts{
 0%{opacity:0;transform:translate3d(0,10px,0) scale(.2) rotate(-14deg)}
 28%{opacity:1;transform:translate3d(0,-18px,0) scale(1.04) rotate(10deg)}
 65%{opacity:.98;transform:translate3d(calc((var(--i) - 3)*5px),-70px,0) scale(.95) rotate(-8deg)}
 100%{opacity:0;transform:translate3d(calc((var(--i) - 3)*9px),-110px,0) scale(.5) rotate(14deg)}
}
#app .memory127-select .memory127-choices{
 position:absolute!important;z-index:8!important;
 top:63.3%!important;left:4%!important;width:92%!important;height:23.3%!important;
 margin:0!important;padding:0!important;max-width:none!important;
 display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
 gap:clamp(7px,2vw,16px)!important;
 align-items:center!important;justify-items:center!important;
}
#app .memory127-select .memory127-choice{
 width:100%!important;max-width:185px!important;height:100%!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 margin:0!important;padding:0!important;
 transform-origin:50% 70%!important;
}
#app .memory127-select .memory127-choice img{
 width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
 aspect-ratio:auto!important;object-fit:contain!important;
 filter:drop-shadow(0 3px 2px #583e336e)!important;
}
#app .memory127-select .memory127-choice span{display:none!important}
#app .memory127-select .memory127-choice:active img{transform:scale(.92) rotate(-4deg)!important}
#app .memory127-select .memory127-hint{
 position:absolute!important;z-index:7!important;
 bottom:5%!important;top:auto!important;left:50%!important;
 transform:translateX(-50%)!important;
 width:max-content!important;max-width:90%!important;
 margin:0!important;padding:8px 15px!important;
 border-radius:28px!important;border:3px solid #bb8254!important;
 box-shadow:0 3px 3px #5d423a55!important;
 font:900 clamp(13px,3.7vw,20px)/1.05 'Bradley Hand','Segoe Print',cursive!important;
 white-space:nowrap!important;
 color:#75452f!important;background:#fbe3b3ec!important;
}
@media(orientation:portrait) and (max-height:620px){
 #app .memory127-select .memory127-title{top:2%!important;height:9%!important;font-size:clamp(25px,7vw,34px)!important}
 #app .memory127-select .memory127-heroes{top:15%!important;height:24%!important}
 #app .memory127-select .zw216-preview{top:39.2%!important;height:19.5%!important}
 #app .memory127-select .memory127-choices{top:62%!important;height:24.5%!important}
 #app .memory127-select .memory127-hint{bottom:3%!important;padding:5px 8px!important}
}
@media(orientation:landscape){
 #app .memory127-page.memory127-select{
  background-image:url('/home-v126/background-landscape.webp')!important;
  background-size:100% 100%!important;
 }
 #app .memory127-select .memory127-title{
  left:32%!important;top:1%!important;width:38%!important;height:17%!important;
  font-size:clamp(23px,5vh,38px)!important;
 }
 #app .memory127-select .memory127-heroes{
  left:2%!important;top:22%!important;width:35%!important;height:62%!important;
 }
 #app .memory127-select .memory127-heroes img{width:52%!important}
 #app .memory127-select .zw216-preview{
  left:51%!important;top:22%!important;width:29%!important;height:57%!important;
 }
 #app .memory127-select .zw216-preview-card{height:min(91%,175px)!important;width:min(43%,100px)!important}
 #app .memory127-select .memory127-choices{
  left:78%!important;top:21%!important;width:20%!important;height:68%!important;
  display:flex!important;flex-direction:column!important;gap:1%!important;
 }
 #app .memory127-select .memory127-choice{height:33%!important;min-height:0!important}
 #app .memory127-select .memory127-choice img{height:100%!important}
 #app .memory127-select .memory127-hint{
  bottom:4%!important;left:48%!important;font-size:clamp(12px,2.7vh,17px)!important;
  padding:4px 11px!important;
 }
}
@media(prefers-reduced-motion:reduce){
 #app .memory127-select .zw216-preview-embrace,
 #app .memory127-select .zw216-snuggle,
 #app .memory127-select .zw216-preview-gifts img{
  animation-duration:.01ms!important;
 }
 #app .memory127-select .zw216-preview-face{transition-duration:.01ms!important}
}

/* Final visual refinement: two DISTINCT animals touch cheeks; cards do not become one beige block. */
#app .memory127-select .zw216-preview.zw216-is-hugging .zw216-preview-cards{
 opacity:0!important;transition:opacity .23s ease!important;
}
#app .memory127-select .zw216-preview-embrace::before{
 background:radial-gradient(ellipse at center,#fff8c278 0%,#fff4ce3b 39%,transparent 75%)!important;
}
#app .memory127-select .zw216-snuggle{
 width:48%!important;height:90%!important;
 object-fit:contain!important;object-position:center bottom!important;
}
#app .memory127-select .zw216-is-hugging .zw216-snuggle-left{
 animation:zw216-lean-left-polished 2.55s linear both!important;
}
#app .memory127-select .zw216-is-hugging .zw216-snuggle-right{
 animation:zw216-lean-right-polished 2.55s linear both!important;
}
@keyframes zw216-lean-left-polished{
 0%{transform:translate3d(-38%,5px,0) rotate(-10deg) scale(.93)}
 23%{transform:translate3d(-8%,0,0) rotate(-1deg)}
 35%{transform:translate3d(12%,0,0) rotate(8deg) scale(1.04)}
 44%{transform:translate3d(10%,-5px,0) rotate(4deg) scale(1.03)}
 52%{transform:translate3d(15%,1px,0) rotate(10deg) scale(1.04)}
 61%{transform:translate3d(10%,-4px,0) rotate(4deg) scale(1.03)}
 70%{transform:translate3d(14%,1px,0) rotate(9deg) scale(1.04)}
 79%{transform:translate3d(10%,-3px,0) rotate(5deg) scale(1.03)}
 90%,100%{transform:translate3d(13%,0,0) rotate(7deg) scale(1.04)}
}
@keyframes zw216-lean-right-polished{
 0%{transform:translate3d(38%,5px,0) scaleX(-1) rotate(-10deg) scale(.93)}
 23%{transform:translate3d(8%,0,0) scaleX(-1) rotate(-1deg)}
 35%{transform:translate3d(-12%,0,0) scaleX(-1) rotate(8deg) scale(1.04)}
 44%{transform:translate3d(-10%,5px,0) scaleX(-1) rotate(4deg) scale(1.03)}
 52%{transform:translate3d(-15%,-1px,0) scaleX(-1) rotate(10deg) scale(1.04)}
 61%{transform:translate3d(-10%,4px,0) scaleX(-1) rotate(4deg) scale(1.03)}
 70%{transform:translate3d(-14%,-1px,0) scaleX(-1) rotate(9deg) scale(1.04)}
 79%{transform:translate3d(-10%,3px,0) scaleX(-1) rotate(5deg) scale(1.03)}
 90%,100%{transform:translate3d(-13%,0,0) scaleX(-1) rotate(7deg) scale(1.04)}
}