/* Zählwiese Memory v218 — functional illustrated selection, not a screenshot overlay.
   All touch targets are actual buttons; all art is raster pencil illustration. */
#app .memory127-page.memory127-select.memory218-select{
 position:relative!important;
 display:block!important;
 width:100%!important;height:100%!important;min-height:0!important;
 padding:0!important;margin:0!important;overflow:hidden!important;
 background:#91cb9c url('/home-v126/background-portrait.webp') center / 100% 100% no-repeat!important;
 isolation:isolate!important;
}
#app .memory218-select .memory218-title{
 position:absolute!important;z-index:5!important;
 top:3%!important;left:17%!important;width:65%!important;height:9.2%!important;
 display:grid!important;place-items:center!important;
 margin:0!important;padding:4px 10px!important;
 min-width:0!important;min-height:0!important;max-width:none!important;
 border:0!important;border-radius:0!important;
 background:transparent url('/home-paint-v78/wood-plaque.webp') center / 100% 100% no-repeat!important;
 box-shadow:none!important;filter:drop-shadow(0 3px 2px #58412765)!important;
 font-family:'Monotype Corsiva','Segoe Script','Georgia',serif!important;
 font-style:italic!important;font-weight:700!important;
 font-size:clamp(31px,8.4vw,48px)!important;
 line-height:1.05!important;color:#6a3d25!important;
 text-shadow:1px 1px 0 #fff1c6bb!important;
 letter-spacing:.4px!important;
}
#app .memory218-select .memory218-title::before,
#app .memory218-select .memory218-title::after{
 content:''!important;position:absolute!important;
 top:5%!important;width:clamp(15px,5vw,25px)!important;height:90%!important;
 background:url('/bakery-v140/flower-gold.webp') center/contain no-repeat!important;
 opacity:.85!important;pointer-events:none!important;
}
#app .memory218-select .memory218-title::before{left:4%!important;transform:rotate(-18deg)!important}
#app .memory218-select .memory218-title::after{right:4%!important;transform:rotate(20deg)!important}
#app .memory218-select .memory218-heroes{
 position:absolute!important;z-index:4!important;
 top:17%!important;left:2%!important;width:96%!important;height:31%!important;
 margin:0!important;max-width:none!important;
 display:flex!important;gap:0!important;align-items:flex-end!important;
 justify-content:space-between!important;overflow:visible!important;
}
#app .memory218-select .memory218-hero{
 all:unset!important;display:block!important;position:relative!important;
 flex:0 0 50%!important;width:50%!important;height:100%!important;
 text-align:center!important;cursor:pointer!important;
 user-select:none!important;touch-action:manipulation!important;
 -webkit-tap-highlight-color:transparent!important;
}
#app .memory218-select .memory218-hero img.memory218-character{
 display:block!important;width:100%!important;height:100%!important;
 object-fit:contain!important;object-position:center bottom!important;
 max-width:none!important;max-height:none!important;
 filter:drop-shadow(1px 4px 3px #59483372)!important;
 transform-origin:center 82%!important;
 animation:zw218-breathe 3.3s ease-in-out infinite alternate!important;
}
#app .memory218-select .memory218-hero:first-child img.memory218-character{
 transform:scale(1.2) rotate(-4deg)!important;
 animation-name:zw218-breathe-left!important;
}
#app .memory218-select .memory218-hero:last-child img.memory218-character{
 transform:scale(1.16) rotate(4deg)!important;
 animation-name:zw218-breathe-right!important;
 animation-delay:-1.4s!important;
}
@keyframes zw218-breathe-left{
 0%{transform:scale(1.17) translateY(2px) rotate(-5deg)}
 100%{transform:scale(1.2) translateY(-3px) rotate(-3deg)}
}
@keyframes zw218-breathe-right{
 0%{transform:scale(1.14) translateY(2px) rotate(3deg)}
 100%{transform:scale(1.17) translateY(-2px) rotate(5deg)}
}
#app .memory218-select .memory218-hero:focus-visible{
 outline:3px solid #ffd975!important;outline-offset:2px!important;border-radius:40%!important;
}
#app .memory218-select .memory218-hero:active img.memory218-character{
 filter:drop-shadow(1px 4px 3px #59483372) brightness(1.1)!important;
}
#app .memory218-select .memory218-hero-effects{
 position:absolute!important;z-index:15!important;inset:0!important;
 pointer-events:none!important;overflow:visible!important;
}
#app .memory218-select .memory218-hero-effects img{
 position:absolute!important;display:block!important;
 width:clamp(18px,5vw,29px)!important;height:clamp(18px,5vw,29px)!important;
 object-fit:contain!important;pointer-events:none!important;
 animation:zw218-tap-heart 1.4s ease-out both!important;
}
@keyframes zw218-tap-heart{
 0%{opacity:0;transform:translate3d(0,18px,0) scale(.2) rotate(-12deg)}
 23%{opacity:1;transform:translate3d(0,-8px,0) scale(1.06) rotate(6deg)}
 77%{opacity:.95;transform:translate3d(var(--drift),-48px,0) scale(.9) rotate(-6deg)}
 100%{opacity:0;transform:translate3d(var(--drift),-83px,0) scale(.4) rotate(12deg)}
}
/* Three substantial round painted mode choices, with centered raster art & embedded labels. */
#app .memory218-select .memory218-choices{
 position:absolute!important;z-index:8!important;
 top:55.5%!important;left:2%!important;width:96%!important;height:25.4%!important;
 display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
 gap:clamp(2px,1vw,9px)!important;
 align-items:center!important;justify-items:center!important;
 margin:0!important;padding:0!important;
 max-width:none!important;
}
#app .memory218-select .memory218-choices .memory218-choice{
 all:unset!important;display:grid!important;place-items:center!important;
 position:relative!important;cursor:pointer!important;
 width:100%!important;height:100%!important;
 max-width:none!important;margin:0!important;padding:0!important;
 border-radius:28px!important;
 touch-action:manipulation!important;-webkit-tap-highlight-color:transparent!important;
}
#app .memory218-select .memory218-choice img{
 width:100%!important;height:100%!important;
 max-width:100%!important;max-height:100%!important;
 object-fit:contain!important;object-position:center center!important;
 display:block!important;
 filter:drop-shadow(0 3px 3px #60473270)!important;
 transition:transform .2s cubic-bezier(.19,.8,.3,1.25),filter .2s ease!important;
 transform-origin:50% 50%!important;
}
#app .memory218-select .memory218-choice:active img{
 transform:scale(.92) rotate(-3deg)!important;
 filter:drop-shadow(0 1px 1px #60473260) brightness(1.08)!important;
}
#app .memory218-select .memory218-choice:focus-visible{outline:4px solid #ffdd83!important;outline-offset:2px!important}
#app .memory218-select .memory218-hint{
 position:absolute!important;z-index:6!important;
 bottom:6.8%!important;left:50%!important;top:auto!important;
 transform:translateX(-50%)!important;
 margin:0!important;padding:9px 16px!important;
 width:max-content!important;max-width:94%!important;min-width:0!important;
 color:#6b3a21!important;text-align:center!important;
 background:#ffe6aeed!important;
 border:3px solid #ac7046!important;
 border-radius:24px 29px 23px 27px!important;
 box-shadow:0 3px 2px #6a513b70,inset 0 0 0 1px #fff1bd!important;
 font-family:'Segoe Print','Comic Neue',cursive!important;
 font-size:clamp(13px,3.45vw,20px)!important;
 font-weight:900!important;line-height:1.2!important;
 white-space:nowrap!important;
}
/* Landscape distributes controls without shrinking them into narrow columns. */
@media(orientation:landscape){
 #app .memory127-page.memory218-select{background-image:url('/home-v126/background-landscape.webp')!important;}
 #app .memory218-select .memory218-title{
  top:0.2%!important;left:39%!important;width:40%!important;height:18%!important;
  font-size:clamp(24px,5.2vh,40px)!important;
 }
 #app .memory218-select .memory218-heroes{
  left:1.5%!important;top:18%!important;width:38%!important;height:67%!important;
 }
 #app .memory218-select .memory218-hero:first-child img.memory218-character{animation-duration:3.1s!important}
 #app .memory218-select .memory218-choices{
  left:40%!important;top:21%!important;width:58%!important;height:62%!important;
  gap:3px!important;
 }
 #app .memory218-select .memory218-hint{
  left:69%!important;bottom:2.8%!important;
  font-size:clamp(12px,2.6vh,17px)!important;
  padding:5px 12px!important;
 }
}
@media(orientation:portrait) and (max-height:650px){
 #app .memory218-select .memory218-title{top:2%!important;height:10%!important;font-size:clamp(25px,7.2vw,35px)!important}
 #app .memory218-select .memory218-heroes{top:15%!important;height:31%!important}
 #app .memory218-select .memory218-choices{top:53%!important;height:28.5%!important}
 #app .memory218-select .memory218-hint{bottom:4.5%!important;padding:5px 9px!important}
}
@media(prefers-reduced-motion:reduce){
 #app .memory218-select .memory218-hero img.memory218-character{animation:none!important;}
 #app .memory218-select .memory218-hero-effects img{animation-duration:.25s!important;}
}
/* Game: more obvious soft nuzzle with real expression-frame drawings. */
#app .memory127-page .zw212-cuddle.zw215-hug .zw195-cuddle-left{
 animation:zw218-hug-left 2.6s cubic-bezier(.37,.05,.24,1) both!important;
}
#app .memory127-page .zw212-cuddle.zw215-hug .zw195-cuddle-right{
 animation:zw218-hug-right 2.6s cubic-bezier(.37,.05,.24,1) both!important;
}
@keyframes zw218-hug-left{
 0%{transform:translate3d(-43%,10px,0) rotate(-10deg) scale(.91)}
 24%{transform:translate3d(5%,0,0) rotate(-1deg) scale(1)}
 36%{transform:translate3d(32%,0,0) rotate(14deg) scale(1.06)}
 46%{transform:translate3d(27%,-11px,0) rotate(3deg) scale(1.04)}
 55%{transform:translate3d(35%,6px,0) rotate(17deg) scale(1.08)}
 65%{transform:translate3d(27%,-10px,0) rotate(4deg) scale(1.04)}
 74%{transform:translate3d(34%,5px,0) rotate(15deg) scale(1.07)}
 83%{transform:translate3d(28%,-7px,0) rotate(6deg) scale(1.05)}
 94%,100%{transform:translate3d(32%,0,0) rotate(11deg) scale(1.05)}
}
@keyframes zw218-hug-right{
 0%{transform:translate3d(43%,10px,0) scaleX(-1) rotate(-10deg) scale(.91)}
 24%{transform:translate3d(-5%,0,0) scaleX(-1) rotate(-1deg) scale(1)}
 36%{transform:translate3d(-32%,0,0) scaleX(-1) rotate(14deg) scale(1.06)}
 46%{transform:translate3d(-27%,11px,0) scaleX(-1) rotate(3deg) scale(1.04)}
 55%{transform:translate3d(-35%,-6px,0) scaleX(-1) rotate(17deg) scale(1.08)}
 65%{transform:translate3d(-27%,10px,0) scaleX(-1) rotate(4deg) scale(1.04)}
 74%{transform:translate3d(-34%,-5px,0) scaleX(-1) rotate(15deg) scale(1.07)}
 83%{transform:translate3d(-28%,7px,0) scaleX(-1) rotate(6deg) scale(1.05)}
 94%,100%{transform:translate3d(-32%,0,0) scaleX(-1) rotate(11deg) scale(1.05)}
}
@media(prefers-reduced-motion:reduce){
 #app .memory127-page .zw212-cuddle.zw215-hug .zw195-cuddle-left{
  animation:none!important;transform:translateX(31%) rotate(9deg)!important;
 }
 #app .memory127-page .zw212-cuddle.zw215-hug .zw195-cuddle-right{
  animation:none!important;transform:translateX(-31%) scaleX(-1) rotate(9deg)!important;
 }
}