/* Load after page styles. Browser geometry is unchanged while these insets are zero. */
:root {
  --pwa-safe-top: 0px;
  --pwa-safe-right: 0px;
  --pwa-safe-bottom: 0px;
  --pwa-safe-left: 0px;
  --pwa-tabbar-bottom: max(env(safe-area-inset-bottom, 0px), var(--pwa-safe-bottom));
}

html.pwa-standalone {
  --pwa-safe-top: env(safe-area-inset-top, 0px);
  --pwa-safe-right: env(safe-area-inset-right, 0px);
  --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pwa-safe-left: env(safe-area-inset-left, 0px);
  --pwa-viewport-height: 100dvh;
}

@media (display-mode: fullscreen), (display-mode: standalone) {
  :root {
    --pwa-safe-top: env(safe-area-inset-top, 0px);
    --pwa-safe-right: env(safe-area-inset-right, 0px);
    --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
    --pwa-safe-left: env(safe-area-inset-left, 0px);
    --pwa-viewport-height: 100dvh;
  }
}

/* Keep every page's own padding and the measured --site-header-height intact.
   The flow boundary and fixed header top each move by T, without adding T to header height. */
body {
  border: 0 solid var(--bg, #141414);
  border-top-width: var(--pwa-safe-top);
  border-right-width: var(--pwa-safe-right);
  border-left-width: var(--pwa-safe-left);
}

body:not(:has(.mobile-tabbar)) {
  border-bottom-width: var(--pwa-safe-bottom);
}

/* Above the mobile breakpoint the TabBar stays in the DOM but no longer owns the inset. */
@media (min-width: 769px) {
  body:has(.mobile-tabbar) {
    border-bottom-width: var(--pwa-safe-bottom);
  }
}

/* A fixed status strip keeps scrolling artwork away from a translucent iOS status bar. */
body::before {
  content: "";
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--pwa-safe-top);
  background: var(--bg, #141414);
  pointer-events: none;
}

.site-header,
.page-subheader,
.topic-detail-hero .page-subheader {
  top: var(--pwa-safe-top);
}

.site-header {
  padding-left: max(var(--pwa-safe-left), calc((100% - var(--page-width)) / 2));
  padding-right: max(var(--pwa-safe-right), calc((100% - var(--page-width)) / 2));
}

.page-subheader {
  padding-left: calc(12px + var(--pwa-safe-left));
  padding-right: calc(12px + var(--pwa-safe-right));
}

.site-toast {
  top: calc(16px + var(--pwa-safe-top));
}

.drawer__panel {
  padding: var(--pwa-safe-top) var(--pwa-safe-right) var(--pwa-safe-bottom) var(--pwa-safe-left);
}

html.pwa-standalone .drawer__panel {
  overflow-y: auto;
  overscroll-behavior: contain;
}

html.pwa-standalone .drawer__panel > * {
  flex-shrink: 0;
}

/* Fixed overlays are viewport children; the body's flow boundary does not protect them. */
.eighteen,
.login-pop,
.register-pop,
.download-pop,
.setting-password-pop,
.recharge-modal,
.play-coin,
.dialog-ad-mask {
  --pwa-dialog-gap: 24px;
  padding: calc(var(--pwa-dialog-gap) + var(--pwa-safe-top))
    calc(var(--pwa-dialog-gap) + var(--pwa-safe-right))
    calc(var(--pwa-dialog-gap) + var(--pwa-safe-bottom))
    calc(var(--pwa-dialog-gap) + var(--pwa-safe-left));
}

html.pwa-standalone :is(.eighteen__dialog, .login-pop__panel, .register-pop__panel,
  .download-pop__panel, .setting-password-pop__panel, .recharge-modal__panel,
  .play-coin__panel, .dialog-ad-panel) {
  max-height: calc(100vh - 2 * var(--pwa-dialog-gap, 24px) - var(--pwa-safe-top) - var(--pwa-safe-bottom));
  max-height: calc(100dvh - 2 * var(--pwa-dialog-gap, 24px) - var(--pwa-safe-top) - var(--pwa-safe-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 768px) {
  .site-header {
    padding-left: calc(12px + var(--pwa-safe-left));
    padding-right: calc(12px + var(--pwa-safe-right));
  }

  /* The same bottom inset drives the TabBar and spacer once, including ordinary Safari. */
  body:has(.mobile-tabbar) {
    padding-bottom: calc(56px + var(--pwa-tabbar-bottom));
  }

  .mobile-tabbar {
    height: calc(56px + var(--pwa-tabbar-bottom));
    padding-bottom: var(--pwa-tabbar-bottom);
    padding-left: var(--pwa-safe-left);
    padding-right: var(--pwa-safe-right);
  }

  .login-pop,
  .register-pop,
  .setting-password-pop {
    --pwa-dialog-gap: 16px;
  }

  .install-guide,
  .download-pop,
  .recharge-modal,
  .play-coin {
    --pwa-dialog-gap: 0px;
    padding: var(--pwa-safe-top) var(--pwa-safe-right) 0 var(--pwa-safe-left);
  }

  html.pwa-standalone :is(.install-guide__sheet, .download-pop__panel,
    .recharge-modal__panel, .play-coin__panel) {
    max-height: calc(100vh - var(--pwa-safe-top));
    max-height: calc(100dvh - var(--pwa-safe-top));
  }

  /* Download/install sheets already have bottom env(); only the two missing sheets need it. */
  html.pwa-standalone :is(.recharge-modal__panel, .play-coin__panel) {
    padding-bottom: max(24px, var(--pwa-tabbar-bottom));
  }

  html.pwa-standalone :is(.login-page, .register-page, .mobile-search) {
    min-height: calc(var(--pwa-viewport-height, 100vh) - var(--pwa-safe-top) - var(--pwa-safe-bottom));
  }
}

html.pwa-standalone .nav-page {
  min-height: calc(100vh - var(--pwa-safe-top) - var(--pwa-safe-bottom));
  min-height: calc(100dvh - var(--pwa-safe-top) - var(--pwa-safe-bottom));
}