/* Zählwiese · iPhone/iPad PWA status-bar illustration continuity v243.
 * The OS must render a translucent status bar so artwork may appear behind
 * clock, reception and battery. Do not move any game control relative to its
 * existing scene: only the full app frame is shifted down by the safe inset.
 *
 * On ordinary Safari tabs and desktop browsers, this file is a no-op. */
:root{
 --zw-status-top: env(safe-area-inset-top, 0px);
 --zw-status-cap-image: url('/safe-area-v243/cap-home-v126-background-portrait.webp');
}
html.zw-status-extended{
 background-color:#62b7dc!important;
}
html.zw-status-extended body{
 box-sizing:border-box!important;
 margin:0!important;
 min-height:100dvh!important;
 height:100dvh!important;
 background-color:#62b7dc!important;
 background-image:var(--zw-status-cap-image)!important;
 background-position:center top!important;
 background-repeat:no-repeat!important;
 background-size:100% var(--zw-status-top)!important;
}
/* iPhone portrait: 100dvh grows when the native status bar becomes
 * translucent. Subtract exactly that new inset and place the existing app
 * immediately below it. All previous element positions are preserved. */
@media (max-width:679px) and (orientation:portrait){
 html.zw-status-extended body{
  padding-top:var(--zw-status-top)!important;
  overflow:hidden!important;
 }
 html.zw-status-extended #app.device{
  box-sizing:border-box!important;
  margin:0!important;
  height:calc(100dvh - var(--zw-status-top))!important;
  min-height:calc(100dvh - var(--zw-status-top))!important;
  max-height:calc(100dvh - var(--zw-status-top))!important;
  overflow:hidden!important;
 }
 html.zw-status-extended #app.device>section{
  box-sizing:border-box!important;
  height:100%!important;
  min-height:100%!important;
  max-height:100%!important;
 }
}
/* Landscape on iPhone: preserve the existing layout and corner controls.
 * On modern iOS the notch inset moves to the left or right; we do not
 * introduce a new top offset in landscape. */
@media (max-width:679px) and (orientation:landscape){
 html.zw-status-extended body{
  padding-top:0!important;
 }
}
/* Never let this painted strip become a tap target or a focus target. */

/* Preserve viewport-relative measurements after iOS exposes the top inset. */
@media (max-width:679px) and (orientation:portrait){
 html.zw-status-extended #app.device section.zw209{
  top:var(--zw-status-top)!important;
  bottom:0!important;
  height:calc(100dvh - var(--zw-status-top))!important;
  min-height:calc(100dvh - var(--zw-status-top))!important;
  max-height:calc(100dvh - var(--zw-status-top))!important;
 }
 html.zw-status-extended #app.device section.memory127-page.memory127-game{
  height:calc(100% - 8px)!important;
  min-height:calc(100% - 8px)!important;
  max-height:calc(100% - 8px)!important;
 }
 html.zw-status-extended #app .zw241-finger-start #zw241FingerPreview{
  height:min(calc(40dvh - var(--zw-status-comp40, 0px)),385px)!important;
 }
 html.zw-status-extended #app .zw241-finger-start #zw170Play.zw241-finger-play{
  bottom:clamp(26px,calc(6dvh - var(--zw-status-comp06, 0px)),65px)!important;
 }
 html.zw-status-extended #app .zw209 #homeBtn.zw209-home{
  top:calc(var(--zw-status-top) + 7px)!important;
 }
}
@media (max-width:679px) and (orientation:portrait) and (max-height:700px){
 html.zw-status-extended #app .zw241-finger-start #zw170Play.zw241-finger-play{
  bottom:calc(3dvh - var(--zw-status-comp03, 0px))!important;
 }
 html.zw-status-extended #app .zw170-launch[data-game-start="animals"] .zw170-title,
 html.zw-status-extended #app .zw170-launch[data-game-start="cooking"] .zw170-title,
 html.zw-status-extended #app .zw170-launch[data-game-start="feeding"] .zw170-title{
  height:calc(15dvh - var(--zw-status-comp15, 0px))!important;
 }
}

/* Keep the kitchen's absolute Home control inside its newly offset scene.
 * A second status inset here would move it down twice. */
@media(max-width:679px) and (orientation:portrait){
 html.zw-status-extended #app.device>section.zw209 #homeBtn.zw209-home{
   top:7px!important;
 }
 /* The animal book intentionally has eight pixels less stage height. */
 html.zw-status-extended #app.device>section.zw-animal-book-v63{
   height:calc(100% - 8px)!important;
   min-height:calc(100% - 8px)!important;
   max-height:calc(100% - 8px)!important;
 }
}

@media(max-width:679px) and (orientation:portrait) and (max-height:700px){
 html.zw-status-extended #app .zw170-launch[data-game-start="maze"] .zw170-title{
  height:calc(15dvh - var(--zw-status-comp15, 0px))!important;
 }
}

/* Tiere Zählen 2.0 has an eight-pixel inner-world margin in its newer
 * zw242 layout; preserve that margin when the iOS viewport grows. */
@media(max-width:679px) and (orientation:portrait){
 html.zw-status-extended #app.device > section.zw242-game{
  height:calc(100% - 8px)!important;
  min-height:calc(100% - 8px)!important;
  max-height:calc(100% - 8px)!important;
 }
}