/* W437 edge-to-edge (Android 15+/targetSdk 35+). The app now draws behind the status and navigation bars,
   so every full-screen layer keeps its content inside the safe area. env() works when the page has
   viewport-fit=cover; --safe-area-inset-* is the fallback that Capacitor 8 System Bars injects. Use max(), not +,
   so the two never add up. The world, drill and battle iframes sit inside the safe area, which means their own HUDs
   need no changes. */
:root{
 --sa-t:max(env(safe-area-inset-top,0px),var(--safe-area-inset-top,0px));
 --sa-r:max(env(safe-area-inset-right,0px),var(--safe-area-inset-right,0px));
 --sa-b:max(env(safe-area-inset-bottom,0px),var(--safe-area-inset-bottom,0px));
 --sa-l:max(env(safe-area-inset-left,0px),var(--safe-area-inset-left,0px));
}
html,body{background:#020611}
/* full-screen game layers: the iframe fills only the safe area */
#world,#battle-preview,#drill-play-w436{inset:auto!important;top:var(--sa-t)!important;right:var(--sa-r)!important;bottom:var(--sa-b)!important;left:var(--sa-l)!important}
/* scrolling overlays: pad their content */
#merchant{padding:calc(15px + var(--sa-t)) calc(15px + var(--sa-r)) calc(15px + var(--sa-b)) calc(15px + var(--sa-l))}
#family{padding-top:calc(clamp(12px,3vw,36px) + var(--sa-t));padding-bottom:calc(clamp(12px,3vw,36px) + var(--sa-b));padding-left:calc(clamp(12px,3vw,36px) + var(--sa-l));padding-right:calc(clamp(12px,3vw,36px) + var(--sa-r))}
#runner-intro-w423{padding:calc(16px + var(--sa-t)) calc(16px + var(--sa-r)) calc(16px + var(--sa-b)) calc(16px + var(--sa-l))}
/* home */
.hero{margin-bottom:var(--sa-b);margin-left:var(--sa-l);margin-right:var(--sa-r)}
/* floating cards and dialogs stay clear of the bars */
.wat-gameplay-offer{margin-top:var(--sa-t)}
.drill-toast-w436{top:calc(14px + var(--sa-t))}
dialog{max-height:calc(100dvh - var(--sa-t) - var(--sa-b) - 24px)}