/* Zählwiese Finger Rechner — genuine illustrated pictures, no canvas graphics. */
/* Neither the 941x1672 portrait nor the 1600x900 landscape is stretched. */
#app .main-content.zw170-launch.zw241-finger-start{
  position:relative!important;
  display:block!important;
  isolation:isolate!important;
  box-sizing:border-box!important;
  width:100%!important;height:100dvh!important;
  min-height:0!important;max-height:100dvh!important;
  margin:0!important;padding:0!important;overflow:hidden!important;
  background:#82bba3 url('/home-v126/background-portrait.webp') left top/cover no-repeat!important;
  background-size:cover!important;background-position:left top!important;
  touch-action:manipulation!important;
}
#app .zw241-finger-start .zw241-finger-title{
  position:absolute!important;
  left:3%!important;top:clamp(95px,12.6dvh,148px)!important;
  width:94%!important;height:clamp(95px,14dvh,136px)!important;
  min-height:0!important;max-height:none!important;
  object-fit:contain!important;filter:drop-shadow(0 4px 3px #573d3061)!important;
  z-index:12!important;
}
#app .zw241-finger-start #zw241FingerPreview{
  display:block!important;
  position:absolute!important;
  left:50%!important;top:29.1%!important;
  width:min(72vw,340px)!important;
  height:min(40dvh,385px)!important;
  max-width:none!important;min-height:0!important;
  border:0!important;padding:0!important;margin:0!important;
  background:transparent!important;box-shadow:none!important;
  transform:translateX(-50%)!important;z-index:13!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent!important;
  touch-action:manipulation!important;
  filter:drop-shadow(0 5px 4px #604b3859)!important;
}
#app .zw241-finger-start #zw241FingerPreview>img{
  display:block!important;width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;
  object-fit:contain!important;object-position:center!important;
  background:transparent!important;
  pointer-events:none!important;user-select:none!important;
}
#app .zw241-finger-start #zw241FingerPreview.zw241-tap>img{
  animation:zw241-card-tap .32s ease-out both!important;
}
@keyframes zw241-card-tap{
  0%,100%{transform:scale(1)}45%{transform:scale(1.055) rotate(-1.3deg)}
}
#app .zw241-finger-start .zw241-friends{
  position:absolute!important;z-index:11!important;left:2%!important;right:2%!important;
  bottom:clamp(35px,7dvh,75px)!important;
  height:clamp(138px,20dvh,220px)!important;
  display:flex!important;align-items:flex-end!important;justify-content:space-between!important;
  pointer-events:none!important;
}
#app .zw241-finger-start .zw241-friends img{
  display:block!important;
  width:27%!important;height:100%!important;max-width:155px!important;
  object-fit:contain!important;object-position:center bottom!important;
  filter:drop-shadow(0 3px 2px #574d4061)!important;pointer-events:none!important;
}
#app .zw241-finger-start #zw170Play.zw241-finger-play{
  position:absolute!important;
  left:50%!important;bottom:clamp(26px,6dvh,65px)!important;
  top:auto!important;right:auto!important;
  width:clamp(126px,39vw,186px)!important;
  height:clamp(126px,39vw,186px)!important;
  max-width:none!important;max-height:none!important;
  margin:0!important;padding:0!important;
  transform:translateX(-50%)!important;
  z-index:15!important;
}
#app .zw241-finger-start #zw170Play.zw241-finger-play:active{
  transform:translateX(-50%) scale(.94)!important;
}
#app .zw241-finger-start #homeBtn.zw170-home{
  z-index:20!important;
  top:max(7px,env(safe-area-inset-top))!important;
  right:max(7px,env(safe-area-inset-right))!important;
  left:auto!important;
  width:clamp(76px,24vw,100px)!important;
  height:clamp(76px,24vw,100px)!important;
}
#app .zw241-finger-start #zw241FingerPreview:focus-visible,
#app .zw241-finger-start #zw170Play:focus-visible{
  outline:4px solid #ffedaa!important;outline-offset:3px!important;border-radius:24px!important;
}
/* Share the same highly detailed pencil-painted world with gameplay. */
#app .main-content.zw223-finger.zw227-finger .zw223-world{
  background:#83c8ad url('/home-v126/background-portrait.webp') left top/cover no-repeat!important;
  background-size:cover!important;background-position:left top!important;
}
@media (orientation:portrait) and (max-height:700px){
  #app .zw241-finger-start .zw241-finger-title{
    top:clamp(65px,12dvh,105px)!important;height:clamp(80px,13dvh,110px)!important;
  }
  #app .zw241-finger-start #zw241FingerPreview{
    top:27%!important;height:40dvh!important;width:min(66vw,310px)!important;
  }
  #app .zw241-finger-start .zw241-friends{height:18dvh!important;bottom:5dvh!important}
  #app .zw241-finger-start #zw170Play.zw241-finger-play{
    width:clamp(108px,31vw,145px)!important;height:clamp(108px,31vw,145px)!important;
    bottom:3dvh!important;
  }
}
@media (orientation:landscape){
  #app .main-content.zw170-launch.zw241-finger-start{
    display:block!important;
    background-image:url('/home-v126/background-landscape.webp')!important;
    background-position:center center!important;background-size:cover!important;
  }
  #app .zw241-finger-start .zw241-finger-title{
    top:2%!important;left:22%!important;width:56%!important;height:23%!important;
  }
  #app .zw241-finger-start #zw241FingerPreview{
    left:46%!important;top:24%!important;
    width:min(25vw,240px)!important;height:71dvh!important;
  }
  #app .zw241-finger-start .zw241-friends{
    left:2%!important;right:auto!important;
    width:82%!important;height:48dvh!important;
    bottom:4%!important;
  }
  #app .zw241-finger-start .zw241-friends img{
    height:100%!important;width:22%!important;
    max-width:none!important;
  }
  #app .zw241-finger-start #zw170Play.zw241-finger-play{
    left:85%!important;bottom:13%!important;top:auto!important;
    width:min(31dvh,140px)!important;height:min(31dvh,140px)!important;
  }
  #app .zw241-finger-start #homeBtn.zw170-home{
    top:4px!important;right:6px!important;
    width:clamp(64px,21dvh,90px)!important;height:clamp(64px,21dvh,90px)!important;
  }
  #app .main-content.zw223-finger.zw227-finger .zw223-world{
    background-image:url('/home-v126/background-landscape.webp')!important;
    background-position:center!important;background-size:cover!important;
  }
}
@media(prefers-reduced-motion:reduce){
  #app .zw241-finger-start #zw241FingerPreview>img{animation:none!important}
}
/* The game entry has no active level to restart. Never cover the painted sun. */
#app:has(.zw241-finger-start)>#zw95Restart,
#app:has(.zw241-finger-start)>button[id*="Restart"]{
  display:none!important;
}
@media (orientation:portrait) and (min-height:701px){
 #app .zw241-finger-start .zw241-friends{
   height:clamp(160px,23dvh,235px)!important;
 }
 #app .zw241-finger-start .zw241-friends img{
   width:30%!important;max-width:160px!important;
 }
}
@media(orientation:landscape) and (max-width:1099px){
 #app .zw241-finger-start .zw241-friends{
   width:70%!important;
 }
}
/* The desktop site displays a portrait phone-shaped app even inside a wide
   browser window. Match the app container's portrait aspect, not the browser. */
@media (min-width:1100px){
 #app .main-content.zw170-launch.zw241-finger-start{
   background-image:url('/home-v126/background-portrait.webp')!important;
   background-position:left top!important;background-size:cover!important;
 }
 #app .zw241-finger-start .zw241-finger-title{
   top:13%!important;left:3%!important;width:94%!important;height:14%!important;
 }
 #app .zw241-finger-start #zw241FingerPreview{
   left:50%!important;top:29%!important;
   width:min(72%,340px)!important;height:40%!important;
 }
 #app .zw241-finger-start .zw241-friends{
   left:2%!important;right:2%!important;width:96%!important;
   height:22%!important;bottom:7%!important;
 }
 #app .zw241-finger-start .zw241-friends img{
   width:30%!important;height:100%!important;max-width:155px!important;
 }
 #app .zw241-finger-start #zw170Play.zw241-finger-play{
   left:50%!important;bottom:6%!important;
   width:clamp(126px,39%,186px)!important;
   height:clamp(126px,39%,186px)!important;
 }
 #app .zw241-finger-start #homeBtn.zw170-home{
   top:max(7px,env(safe-area-inset-top))!important;
   right:max(7px,env(safe-area-inset-right))!important;
   width:clamp(76px,24%,100px)!important;
   height:clamp(76px,24%,100px)!important;
 }
}

/* The shared Restart control is for an active round, not for the intro. */
#app:has(.zw241-finger-start) #zw240Restart{
 display:none!important;visibility:hidden!important;pointer-events:none!important;
}
/* While counting, put the drawn restart icon under the sun, not on its face. */
@media(orientation:portrait){
 #app:has(.zw227-finger) #zw240Restart{
   top:max(115px,14dvh)!important;
   left:clamp(9px,2vw,17px)!important;
   right:auto!important;
   width:clamp(52px,14vw,72px)!important;
   height:clamp(52px,14vw,72px)!important;
 }
}
@media(orientation:landscape) and (max-width:1099px){
 #app:has(.zw227-finger) #zw240Restart{
   top:clamp(65px,19dvh,92px)!important;
   left:9px!important;
 }
}