:root {
  --apostar-safe-top: env(safe-area-inset-top, 0px);
  --apostar-safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 820px) {
  html.pwa-standalone .site-header {
    height: calc(64px + var(--apostar-safe-top));
    padding-top: calc(8px + var(--apostar-safe-top));
  }

  html.pwa-standalone .mobile-menu {
    padding-top: calc(20px + var(--apostar-safe-top));
  }

  html.pwa-standalone .game-shell-bar {
    padding-top: calc(8px + var(--apostar-safe-top));
  }

  html.pwa-standalone body {
    padding-bottom: calc(66px + var(--apostar-safe-bottom));
  }

  html.pwa-standalone .mobile-bottom-nav {
    height: calc(66px + var(--apostar-safe-bottom));
  }
}

@media (display-mode: standalone) and (max-width: 820px) {
  .site-header {
    height: calc(64px + var(--apostar-safe-top));
    padding-top: calc(8px + var(--apostar-safe-top));
  }

  .mobile-menu {
    padding-top: calc(20px + var(--apostar-safe-top));
  }

  .game-shell-bar {
    padding-top: calc(8px + var(--apostar-safe-top));
  }

  body {
    padding-bottom: calc(66px + var(--apostar-safe-bottom));
  }

  .mobile-bottom-nav {
    height: calc(66px + var(--apostar-safe-bottom));
  }
}