/* Zählwiese Memory 214: picture-led progress, gentler interactions, hand-painted details. */
#app .memory127-page .memory214-progress{
 display:grid!important;grid-template-columns:repeat(5, minmax(0,1fr))!important;
 grid-template-rows:repeat(2, minmax(0,1fr))!important;
 align-items:center!important;justify-items:center!important;
 width:clamp(104px,30vw,133px)!important;height:52px!important;
 min-width:100px!important;flex:0 0 auto!important;
 gap:1px 2px!important;padding:4px 6px!important;
 border-radius:18px 22px 18px 20px!important;
 background:#fff5d9df url('/memory-v127/card-cream.webp') center / 100% 100% no-repeat!important;
 border:2px solid #b47b4fa8!important;
 box-shadow:0 2px 4px #68533e4a!important;
}
#app .memory127-page .memory214-progress .memory214-token{
 display:block!important;width:100%!important;height:100%!important;
 background:transparent!important;box-shadow:none!important;border:0!important;
 margin:0!important;padding:0!important;min-width:0!important;
}
#app .memory127-page .memory214-progress .memory214-token img{
 width:100%!important;height:100%!important;display:block!important;object-fit:contain!important;
 filter:grayscale(.73) sepia(.16) opacity(.67)!important;
 transform:scale(.94)!important;
 transition:filter .24s ease,transform .28s cubic-bezier(.16,.9,.25,1.22)!important;
}
#app .memory127-page .memory214-progress .memory214-token.is-done img{
 filter:drop-shadow(0 1px 1px #8b644656)!important;
 transform:scale(1)!important;
}
#app .memory127-page .memory214-progress .memory214-token.is-new img{
 animation:zw214-stamp .6s cubic-bezier(.22,1.3,.35,1) both!important;
}
@keyframes zw214-stamp{
 0%{opacity:.35;transform:scale(.55) rotate(-13deg)}
 52%{opacity:1;transform:scale(1.25) rotate(7deg)}
 100%{opacity:1;transform:scale(1) rotate(0deg)}
}
/* Fast enough for little hands, without a harsh card snap. */
#app .memory127-page .memory127-card .memory127-inner{
 transition:transform .36s cubic-bezier(.16,.73,.27,1)!important;
 will-change:auto!important;
}
#app .memory127-page .memory127-card.is-flipped .memory127-inner{
 will-change:transform!important;
}
#app .memory127-page .memory214-enter .memory127-card:not(.is-matched){
 animation:zw214-deal .38s cubic-bezier(.17,.8,.26,1) both!important;
 animation-delay:calc(var(--deal-index,0) * 15ms)!important;
}
@keyframes zw214-deal{
 0%{opacity:.15;transform:translateY(12px) rotate(2deg) scale(.93)}
 70%{opacity:1;transform:translateY(-2px) rotate(-.5deg) scale(1.015)}
 100%{opacity:1;transform:none}
}
#app .memory127-page .memory127-card.is-matched{
 animation:zw214-match-pop .52s cubic-bezier(.2,.75,.22,1) both!important;
}
@keyframes zw214-match-pop{
 0%{transform:scale(1)}
 48%{transform:scale(1.055) rotate(-1deg)}
 80%{transform:scale(.985) rotate(1deg)}
 100%{transform:none}
}
#app .memory127-page .memory127-card.is-matched::after{
 content:''!important;position:absolute!important;z-index:15!important;
 top:3px!important;right:3px!important;
 width:clamp(15px,3.5vw,24px)!important;height:clamp(15px,3.5vw,24px)!important;
 background:url('/animal-feeding-v85/heart.webp') center / contain no-repeat!important;
 filter:drop-shadow(0 1px 1px #6e4c4180)!important;
 pointer-events:none!important;
 animation:zw214-stamp .43s .12s both!important;
}
#app .memory127-page .memory127-card.is-matched .memory127-front{
 filter:saturate(1.09) brightness(1.04)!important;
}
/* Round illustrated controls; avoid close-to-edge hit areas. */
#app .memory127-page .memory127-controls{
 gap:clamp(20px,6vw,35px)!important;min-height:58px!important;
 padding:2px 5px 4px!important;
}
#app .memory127-page .memory127-round{
 width:clamp(52px,14vw,63px)!important;height:clamp(52px,14vw,63px)!important;
 flex-shrink:0!important;transition:transform .18s ease,filter .18s ease!important;
}
#app .memory127-page .memory127-round:active{transform:scale(.91) rotate(-6deg)!important;filter:brightness(1.1)!important}
/* Portrait: progress lives in the clear garden space below the buttons, never behind Home. */
@media(orientation:portrait){
 #app .memory127-page .memory214-progress{
  position:absolute!important;left:50%!important;top:auto!important;
  bottom:max(8px,env(safe-area-inset-bottom,0px))!important;
  transform:translateX(-50%)!important;
  width:clamp(139px,43vw,178px)!important;height:40px!important;
  z-index:4!important;
 }
}
@media(orientation:portrait) and (min-height:690px){
 #app .memory127-page .memory214-progress{
  bottom:max(14px,env(safe-area-inset-bottom,0px))!important;
  height:46px!important;
 }
}
@media(orientation:landscape) and (max-height:450px){
 #app .memory127-page .memory214-progress{height:39px!important;width:112px!important;padding:2px 6px!important}
 #app .memory127-page .memory127-controls{min-height:45px!important}
 #app .memory127-page .memory127-round{width:clamp(42px,10vh,51px)!important;height:clamp(42px,10vh,51px)!important}
}
@media(orientation:portrait) and (max-height:640px){
 #app .memory127-page .memory214-progress{height:38px!important}
 #app .memory127-page .memory127-controls{min-height:45px!important;padding:1px 4px!important}
 #app .memory127-page .memory127-round{width:46px!important;height:46px!important}
}
@media(prefers-reduced-motion:reduce){
 #app .memory127-page .memory214-enter .memory127-card,
 #app .memory127-page .memory127-card.is-matched,
 #app .memory127-page .memory214-progress .memory214-token.is-new img{
 animation:none!important;
 }
 #app .memory127-page .memory127-card .memory127-inner{transition:none!important}
}

/* Reliable two-face card flip in Safari and Chromium.
   Earlier preserve-3d implementation showed the front even while unflipped. */
#app .memory127-page .memory127-card .memory127-inner{
 transform:none!important;transform-style:flat!important;transition:none!important;
}
#app .memory127-page .memory127-card .memory127-back,
#app .memory127-page .memory127-card .memory127-front{
 backface-visibility:visible!important;-webkit-backface-visibility:visible!important;
 transform-origin:center center!important;
}
#app .memory127-page .memory127-card .memory127-back{
 transform:perspective(700px) rotateY(0deg)!important;
 opacity:1!important;visibility:visible!important;
 transition:transform .18s ease-in,opacity .03s .15s linear,visibility 0s 0s!important;
}
#app .memory127-page .memory127-card .memory127-front{
 transform:perspective(700px) rotateY(-90deg)!important;
 opacity:0!important;visibility:hidden!important;
 transition:transform .18s .16s ease-out,opacity .03s .16s linear,visibility 0s .16s!important;
}
#app .memory127-page .memory127-card.is-flipped .memory127-back,
#app .memory127-page .memory127-card.is-matched .memory127-back{
 transform:perspective(700px) rotateY(90deg)!important;
 opacity:0!important;visibility:hidden!important;
 transition:transform .18s ease-in,opacity .03s .16s linear,visibility 0s .17s!important;
}
#app .memory127-page .memory127-card.is-flipped .memory127-front,
#app .memory127-page .memory127-card.is-matched .memory127-front{
 transform:perspective(700px) rotateY(0deg)!important;
 opacity:1!important;visibility:visible!important;
 transition:transform .18s .16s ease-out,opacity .03s .16s linear,visibility 0s .16s!important;
}
@media(prefers-reduced-motion:reduce){
 #app .memory127-page .memory127-card .memory127-front,
 #app .memory127-page .memory127-card .memory127-back{transition:none!important}
}