/* Zählwiese V226 — two genuinely SIDE-ON hand illustrations clap together.
   One reusable reward for Finger Memory + Finger Rechnen. Images only: no Canvas/SVG. */
body .zw222-celebration .zw226-clap,
#app .zw223-finger .zw226-clap{
  position:absolute!important;
  left:50%!important;
  top:48%!important;
  width:clamp(220px,78%,350px)!important;
  max-width:92%!important;
  height:clamp(150px,27vh,252px)!important;
  transform:translate(-50%,-50%)!important;
  isolation:isolate!important;
  pointer-events:none!important;
  overflow:visible!important;
  z-index:170!important;
  opacity:1!important;
  contain:layout style!important;
}
#app .zw223-finger .zw226-clap{
  top:50%!important;
  width:min(85%,370px)!important;
  height:clamp(170px,29vh,265px)!important;
  z-index:34!important;
}
body .zw222-celebration .zw226-clap::before,
#app .zw223-finger .zw226-clap::before{
  content:''!important;
  position:absolute!important;inset:0!important;
  z-index:-1!important;
  background:radial-gradient(ellipse at 50% 60%,#fff4cc9b,transparent 70%)!important;
  border-radius:50%!important;
  pointer-events:none!important;
}
body .zw222-celebration .zw226-clap .zw226-hand,
#app .zw223-finger .zw226-clap .zw226-hand{
  position:absolute!important;
  width:44%!important;
  height:98%!important;
  max-width:none!important;
  max-height:none!important;
  display:block!important;
  top:0!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform-origin:50% 88%!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
  filter:drop-shadow(0 2px 2px #6b44385c)!important;
  animation:none!important;
  will-change:auto!important;
}
body .zw222-celebration .zw226-clap .zw226-left,
#app .zw223-finger .zw226-clap .zw226-left{
  left:3%!important;right:auto!important;z-index:3!important;
  transform:translateX(-35%) rotate(-7deg);
}
body .zw222-celebration .zw226-clap .zw226-right,
#app .zw223-finger .zw226-clap .zw226-right{
  right:3%!important;left:auto!important;z-index:2!important;
  transform:translateX(35%) rotate(7deg);
}
body .zw222-celebration .zw226-clap.zw226-play,
#app .zw223-finger .zw226-clap.zw226-play{
  animation:zw226-stage 1.9s linear both!important;
}
body .zw222-celebration .zw226-clap.zw226-play .zw226-left,
#app .zw223-finger .zw226-clap.zw226-play .zw226-left{
  animation:zw226-left-clap 1.9s linear both!important;
  will-change:transform!important;
}
body .zw222-celebration .zw226-clap.zw226-play .zw226-right,
#app .zw223-finger .zw226-clap.zw226-play .zw226-right{
  animation:zw226-right-clap 1.9s linear both!important;
  will-change:transform!important;
}
@keyframes zw226-stage{
  0%{opacity:0}8%,88%{opacity:1}100%{opacity:0}
}
/* Palms physically collide three times. The fingers stay UPRIGHT, not waving. */
@keyframes zw226-left-clap{
  0%{transform:translateX(-39%) rotate(-7deg)}
  18%{transform:translateX(-28%) rotate(-3deg)}
  31%{transform:translateX(14%) rotate(2deg)}
  40%{transform:translateX(-36%) rotate(-6deg)}
  51%{transform:translateX(16%) rotate(2deg)}
  61%{transform:translateX(-36%) rotate(-6deg)}
  71%{transform:translateX(16%) rotate(2deg)}
  82%{transform:translateX(-30%) rotate(-5deg)}
  92%,100%{transform:translateX(-11%) rotate(-2deg)}
}
@keyframes zw226-right-clap{
  0%{transform:translateX(39%) rotate(7deg)}
  18%{transform:translateX(28%) rotate(3deg)}
  31%{transform:translateX(-14%) rotate(-2deg)}
  40%{transform:translateX(36%) rotate(6deg)}
  51%{transform:translateX(-16%) rotate(-2deg)}
  61%{transform:translateX(36%) rotate(6deg)}
  71%{transform:translateX(-16%) rotate(-2deg)}
  82%{transform:translateX(30%) rotate(5deg)}
  92%,100%{transform:translateX(11%) rotate(2deg)}
}
body .zw222-celebration .zw226-clap .zw226-contact,
#app .zw223-finger .zw226-clap .zw226-contact{
  position:absolute!important;
  left:50%!important;top:39%!important;
  transform:translate(-50%,-50%) scale(.2)!important;
  width:clamp(25px,7vw,43px)!important;
  height:clamp(25px,7vw,43px)!important;
  object-fit:contain!important;
  z-index:8!important;
  opacity:0!important;
  pointer-events:none!important;
  animation:none!important;
}
body .zw222-celebration .zw226-clap.zw226-play .zw226-contact,
#app .zw223-finger .zw226-clap.zw226-play .zw226-contact{
  animation:zw226-impact .31s ease-out var(--contact-delay) both!important;
}
@keyframes zw226-impact{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-11deg)}
  23%{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(8deg)}
  70%{opacity:.85;transform:translate(-50%,-50%) scale(.94) rotate(1deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.51) rotate(16deg)}
}
/* Disable old finger-counting "waving" on the counting assets. They remain static
   so the new independent reward truly reads as applause. */
#app .zw223-finger.zw223-result .zw223-hand-slot .zw223-hand-image{
  animation:none!important;
  transform:none!important;
}
@media(orientation:landscape) and (max-height:530px){
 #app .zw223-finger .zw226-clap{
   left:50%!important;top:50%!important;
   width:min(34%,310px)!important;
   height:min(62%,220px)!important;
 }
 body .zw222-celebration .zw226-clap{
   left:54%!important;top:48%!important;
   width:min(60%,310px)!important;
   height:min(57%,207px)!important;
 }
}
/* Reduced-motion keeps three tiny local presses so the reward is still meaningful. */
@keyframes zw226-soft-left{
  0%,19%,41%,61%,82%,100%{transform:translateX(-22%) rotate(-2deg)}
  31%,51%,71%{transform:translateX(12%) rotate(0)}
}
@keyframes zw226-soft-right{
  0%,19%,41%,61%,82%,100%{transform:translateX(22%) rotate(2deg)}
  31%,51%,71%{transform:translateX(-12%) rotate(0)}
}
@media(prefers-reduced-motion:reduce){
  body .zw222-celebration .zw226-clap.zw226-play .zw226-left,
  #app .zw223-finger .zw226-clap.zw226-play .zw226-left{
    animation:zw226-soft-left 1.9s linear both!important;
  }
  body .zw222-celebration .zw226-clap.zw226-play .zw226-right,
  #app .zw223-finger .zw226-clap.zw226-play .zw226-right{
    animation:zw226-soft-right 1.9s linear both!important;
  }
  body .zw222-celebration .zw226-clap .zw226-contact,
  #app .zw223-finger .zw226-clap .zw226-contact{
    animation:none!important;opacity:.35!important;
  }
}