/* Finger Rechner 2.4: board-free hand-focused layout, original illustrated WebP assets.
   No Canvas, SVG-generated fingers or baked-in UI text. */
#app .main-content.zw223-finger.zw227-finger .zw227-stage {
  grid-template-rows:12% 4.5% 8% 46% 17% 12.5%!important;
  grid-template-columns:minmax(0,1fr)!important;
}
#app .zw227-finger .zw227-sumline {
  grid-row:3!important;grid-column:1!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  align-self:stretch!important;justify-self:center!important;
  gap:clamp(6px,3vw,18px)!important;
  width:100%!important;min-width:0!important;
  color:#62442d!important;
  font:900 clamp(28px,8vw,52px)/1 'Chalkboard SE','Marker Felt','Segoe Print',system-ui,sans-serif!important;
  letter-spacing:-.035em!important;
  white-space:nowrap!important;
  text-shadow:1px 1px #fff5d7,-1px -1px #fff3d6,0 2px 2px #faf1d9c7!important;
  pointer-events:none!important;
}
#app .zw227-finger .zw227-sumline b{
  font:inherit!important;font-weight:900!important;color:#96643a!important;
}
#app .zw227-finger .zw227-sumline strong{
  font:inherit!important;font-size:1.12em!important;color:#b46d43!important;
  text-shadow:1px 1px #fff4d9,-1px -1px #fff4d9,0 2px 2px #8a6c4b55!important;
}
#app .zw227-finger.zw223-result .zw227-sumline strong{
  color:#297348!important;
}
#app .zw227-finger .zw227-hands,
#app .zw227-finger .zw226-hands {
  grid-row:4!important;grid-column:1!important;
  justify-content:space-around!important;align-items:center!important;
  gap:0!important;height:100%!important;
}
#app .zw227-finger .zw227-hands .zw223-hand-slot,
#app .zw227-finger .zw226-hands .zw223-hand-slot {
  flex:0 0 47%!important;
  height:98%!important;
  min-width:0!important;max-width:none!important;
  position:relative!important;padding:0!important;
  border:0!important;box-shadow:none!important;background:transparent!important;
  overflow:visible!important;
}
#app .zw227-finger .zw223-hands.zw223-one-hand .zw223-hand-slot{
  flex-basis:70%!important;max-width:365px!important;
}
#app .zw227-finger .zw223-hands .zw223-paper{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  object-fit:fill!important;pointer-events:none!important;
  background:transparent!important;
}
#app .zw227-finger .zw227-hand-art{
  position:absolute!important;z-index:5!important;
  inset:3% 2% 4%!important;
  display:block!important;overflow:visible!important;
  pointer-events:none!important;
  transform-origin:50% 75%;
  animation:zw223-breathe 3.5s ease-in-out infinite;
}
#app .zw227-finger .zw227-hand-image,
#app .zw227-finger .zw227-hand-art .zw223-hand-image{
  position:absolute!important;left:0!important;top:0!important;
  width:100%!important;height:100%!important;
  max-height:none!important;max-width:none!important;
  object-fit:contain!important;object-position:center center!important;
  transform:none!important;animation:none!important;
  filter:drop-shadow(0 2px 2px #926c4d35)!important;
  pointer-events:none!important;
}
#app .zw227-finger .zw227-hand-number{
  position:absolute!important;left:50%!important;top:60%!important;
  z-index:10!important;display:flex!important;align-items:center!important;justify-content:center!important;
  transform:translate(-50%,-50%) rotate(-5deg)!important;
  width:clamp(38px,11vw,65px)!important;height:clamp(38px,11vw,65px)!important;
  padding:0!important;background:transparent!important;border:0!important;
  border-radius:0!important;box-shadow:none!important;
  color:#6b432c!important;
  font:900 clamp(29px,8vw,47px)/1 'Chalkboard SE','Segoe Print','Marker Felt',system-ui,sans-serif!important;
  text-shadow:
    1px 1px 0 #fff2d8,-1px -1px 0 #fff2d8,1px -1px 0 #fff2d8,
    -1px 1px 0 #fff2d8,0 2px 2px #754e3559!important;
  -webkit-text-stroke:.4px #fff0d7!important;
  pointer-events:none!important;
}
#app .zw227-finger .zw227-hand-art.zw227-hand-5 .zw227-hand-number{
  top:59%!important;
}
#app .zw227-finger .zw227-hand-art.zw227-hand-1 .zw227-hand-number{
  top:59%!important;
}
#app .zw227-finger .zw223-plus{
  width:clamp(33px,10%,59px)!important;top:53%!important;z-index:8!important;
}
#app .zw227-finger .zw227-answers,
#app .zw227-finger .zw226-answers{
  grid-row:5!important;grid-column:1!important;
  display:flex!important;
  width:100%!important;height:100%!important;min-height:0!important;
}
#app .zw227-finger .zw227-footer,
#app .zw227-finger .zw226-footer{
  grid-row:6!important;grid-column:1!important;
  height:100%!important;min-height:0!important;
}
#app .zw227-finger .zw223-footer .zw223-friend{height:96%!important}
#app .zw227-finger.zw223-result .zw223-hand-slot:first-child .zw227-hand-art{
  animation:zw224-three-clap-left 1.95s cubic-bezier(.28,.65,.38,1) both!important;
}
#app .zw227-finger.zw223-result .zw223-hand-slot:last-child .zw227-hand-art{
  animation:zw224-three-clap-right 1.95s cubic-bezier(.28,.65,.38,1) both!important;
}
#app .zw227-finger.zw223-result .zw223-one-hand .zw227-hand-art{
  animation:zw224-one-hand-cheer 1.1s ease-in-out both!important;
}
/* Legacy clap and breathe transforms must not separate the drawn number from its hand. */
#app .zw227-finger.zw223-result .zw223-hand-slot .zw227-hand-image,
#app .zw227-finger .zw223-hand-slot.zw223-touched .zw227-hand-image{
  animation:none!important;transform:none!important;
}
#app .zw227-finger .zw223-hand-slot.zw223-touched .zw227-hand-art{
  animation:zw223-hand-tap .55s ease-out both!important;
}
#app .zw227-finger .zw227-sumline:has(+ .zw227-hands){
  margin:0!important;
}
@media(orientation:landscape){
  #app .main-content.zw223-finger.zw227-finger .zw227-stage{
    grid-template-columns:24% 50% 26%!important;
    grid-template-rows:17% 66% 17%!important;
  }
  #app .zw227-finger .zw227-sumline {
    grid-column:1!important;grid-row:2!important;
    font-size:clamp(29px,3.9vw,51px)!important;
    gap:clamp(3px,.8vw,12px)!important;
    height:100%!important;
  }
  #app .zw227-finger .zw227-hands,
  #app .zw227-finger .zw226-hands{
    grid-column:2!important;grid-row:2!important;
    width:100%!important;height:100%!important;
  }
  #app .zw227-finger .zw227-hands .zw223-hand-slot,
  #app .zw227-finger .zw226-hands .zw223-hand-slot{
    flex-basis:48%!important;height:97%!important;
  }
  #app .zw227-finger .zw223-hands.zw223-one-hand .zw223-hand-slot{
    flex-basis:64%!important;max-width:320px!important;
  }
  #app .zw227-finger .zw227-hand-number{
    width:clamp(34px,4.2vw,56px)!important;height:clamp(34px,4.2vw,56px)!important;
    font-size:clamp(25px,3.6vw,42px)!important;
  }
  #app .zw227-finger .zw227-answers,
  #app .zw227-finger .zw226-answers{
    grid-column:3!important;grid-row:2!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    align-items:center!important;justify-items:center!important;
    gap:1% 3%!important;
  }
  #app .zw227-finger .zw227-footer,
  #app .zw227-finger .zw226-footer{
    grid-column:2/4!important;grid-row:3!important;
  }
  #app .zw227-finger .zw223-progress{
    grid-column:1!important;grid-row:3!important;
  }
}
@media(orientation:portrait) and (max-height:630px){
  #app .main-content.zw223-finger.zw227-finger .zw227-stage{
    grid-template-rows:11% 4% 7% 48% 18% 12%!important;
  }
}
@media(prefers-reduced-motion:reduce){
  #app .zw227-finger .zw227-hand-art{
    animation:none!important;transition:none!important;
  }
}


/* The shared v226 hand-clap is a dedicated, properly drawn overlay.
   Keep the counting hands still during applause; numbers stay on their palms. */
#app .zw227-finger.zw223-result .zw227-hand-art,
#app .zw227-finger.zw223-result .zw223-one-hand .zw227-hand-art {
  animation:none!important;transform:none!important;
}