/* Zählwiese – original approved illustrated full-screen home, with real accessible hit targets.
   The picture is one continuous artwork; all 9 existing game buttons remain fully functional. */
body:has(.intro-content){background:#91c765!important}
body:has(.intro-content) .device{background:#91c765!important;background-image:none!important}
#app:has(.intro-content){position:relative!important;overflow:hidden!important;height:100dvh!important;max-height:100dvh!important}
#app:has(.intro-content) .app-header.home-header{position:absolute!important;inset:0 auto auto 0!important;width:100%!important;height:0!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important;z-index:45!important;pointer-events:none!important}
#app:has(.intro-content) .app-header.home-header .brand,#app:has(.intro-content) .app-header.home-header .header-tools{display:none!important}
#app:has(.intro-content) .app-header.home-header .parent-gear{display:block!important;position:absolute!important;left:3%!important;top:2dvh!important;width:16%!important;height:9dvh!important;min-width:55px!important;min-height:54px!important;opacity:0!important;pointer-events:auto!important;box-shadow:none!important;border:0!important;background:transparent!important}
#app:has(.intro-content) .intro-content{position:relative!important;display:block!important;inset:auto!important;height:100dvh!important;min-height:100dvh!important;width:100%!important;max-width:none!important;overflow:hidden!important;margin:0!important;padding:0!important;border:0!important;flex:none!important;isolation:isolate!important;background-image:url('/art-premium-home.webp')!important;background-size:100% 100%!important;background-position:center center!important;background-repeat:no-repeat!important;background-color:#83ba6c!important}
#app:has(.intro-content) .intro-content>.rainbow-title,#app:has(.intro-content) .intro-content>.welcome-subtitle,#app:has(.intro-content) .intro-content>.welcome-footer{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;margin:0!important;padding:0!important;border:0!important}
#app:has(.intro-content) .intro-scene{display:block!important;position:absolute!important;top:0!important;left:0!important;width:100%!important;height:44%!important;min-height:0!important;max-width:none!important;margin:0!important;padding:0!important;overflow:visible!important;z-index:15!important;pointer-events:none!important}
#app:has(.intro-content) .zw-hero-art.zw-slide-art{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;background:none!important;pointer-events:none!important}
#app:has(.intro-content) .zw-slide-art .zw-playground-image{display:none!important}
#app:has(.intro-content) .zw-slide-art .zw-slide-friend{position:absolute!important;z-index:12!important;top:50%!important;left:28%!important;width:28%!important;height:47%!important;min-width:0!important;background:transparent!important;border:0!important;pointer-events:auto!important;touch-action:manipulation!important;transform:none!important;filter:none!important}
#app:has(.intro-content) .zw-slide-art .zw-slide-igor{left:55%!important;top:43%!important;width:25%!important}
#app:has(.intro-content) .zw-slide-art .zw-slide-friend-name{display:none!important}
#app:has(.intro-content) .zw-slide-art .zw-slide-friend.zw-wave-moritz:after,#app:has(.intro-content) .zw-slide-art .zw-slide-friend.zw-wave-igor:after{content:"";position:absolute;right:0;top:2%;width:30%;height:30%;border:5px dotted #fff6a7;border-radius:50%;opacity:0;animation:zw-home-hello 1.15s ease-out}
@keyframes zw-home-hello{0%{transform:scale(.4);opacity:0}30%{opacity:1}100%{transform:scale(2);opacity:0}}
#app:has(.intro-content) .mode-choices{display:block!important;position:absolute!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;z-index:20!important;pointer-events:none!important;background:none!important;border:0!important}
#app:has(.intro-content) .mode-choice,#app:has(.intro-content) .mode-choice:nth-child(n){position:absolute!important;display:block!important;width:29%!important;height:15.1%!important;min-height:0!important;min-width:0!important;max-width:none!important;flex:none!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important;opacity:1!important;border-radius:35%!important;pointer-events:auto!important;touch-action:manipulation!important;transform:none!important}
#app:has(.intro-content) .mode-choice .mode-round,#app:has(.intro-content) .mode-choice .mode-label{visibility:hidden!important;opacity:0!important}
#app:has(.intro-content) .mode-choice:nth-child(3n+1){left:3.5%!important}
#app:has(.intro-content) .mode-choice:nth-child(3n+2){left:35.5%!important}
#app:has(.intro-content) .mode-choice:nth-child(3n){left:67.5%!important}
#app:has(.intro-content) .mode-choice:nth-child(-n+3){top:43.7%!important}
#app:has(.intro-content) .mode-choice:nth-child(n+4):nth-child(-n+6){top:60.2%!important}
#app:has(.intro-content) .mode-choice:nth-child(n+7){top:76.0%!important}
#app:has(.intro-content) .mode-choice:focus-visible{outline:4px solid #fff8cd!important;outline-offset:-2px!important}
#app:has(.intro-content) .mode-choice:active{background:#fff8b02c!important;box-shadow:0 0 0 6px #fff1bd4d inset!important}
/* Landscape retains the real separately laid-out icon controls for reachable touch targets. */
@media(orientation:landscape){
 body:has(.intro-content) .device{background-image:url('/home-world-v46.svg')!important;background-size:100% 100%!important}
 #app:has(.intro-content){overflow-y:auto!important;height:100dvh!important;max-height:none!important}
 #app:has(.intro-content) .app-header.home-header{height:45px!important;z-index:5!important}
 #app:has(.intro-content) .app-header.home-header .parent-gear{opacity:1!important;left:2%!important;top:5px!important;width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important}
 #app:has(.intro-content) .intro-content{display:grid!important;grid-template-columns:40% 60%!important;grid-template-rows:45px auto 1fr!important;gap:0!important;min-height:0!important;height:auto!important;padding:2px 8px!important;background-image:none!important;overflow:visible!important}
 #app:has(.intro-content) .intro-content>.rainbow-title{display:block!important;position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip-path:none!important;grid-column:1!important;grid-row:1!important;font-size:34px!important}
 #app:has(.intro-content) .intro-content>.welcome-subtitle{display:block!important;position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip-path:none!important;grid-column:2!important;grid-row:1!important;font-size:17px!important;margin:0!important}
 #app:has(.intro-content) .intro-scene{display:block!important;position:relative!important;grid-column:1!important;grid-row:2/4!important;top:auto!important;left:auto!important;width:100%!important;height:clamp(116px,42dvh,184px)!important;pointer-events:auto!important}
 #app:has(.intro-content) .zw-slide-art .zw-playground-image{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important}
 #app:has(.intro-content) .zw-slide-art .zw-slide-friend{height:55%!important;top:20%!important;left:25%!important}
 #app:has(.intro-content) .zw-slide-art .zw-slide-igor{left:56%!important}
 #app:has(.intro-content) .mode-choices{display:grid!important;position:static!important;grid-column:2!important;grid-row:2/4!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:3px!important;height:auto!important}
 #app:has(.intro-content) .mode-choice,#app:has(.intro-content) .mode-choice:nth-child(n){position:static!important;display:flex!important;flex-direction:column!important;align-items:center!important;width:100%!important;height:auto!important;border-radius:0!important;gap:1px!important}
 #app:has(.intro-content) .mode-choice .mode-round{visibility:visible!important;opacity:1!important;width:clamp(49px,8vw,70px)!important;height:clamp(49px,8vw,70px)!important}
 #app:has(.intro-content) .mode-choice .mode-label{visibility:visible!important;opacity:1!important;font-size:10px!important;min-height:15px!important;max-width:none!important}
}