/* Keep iPhone Safari's exposed canvas continuous with the forest background. */
@supports (-webkit-touch-callout: none) {
  html:root {
    min-height: 100%;
    min-height: 100svh;
    background: #14251e url("/static/img/forestbg.png") center / cover no-repeat fixed;
    scroll-padding-top: env(safe-area-inset-top, 0px);
    scroll-padding-right: env(safe-area-inset-right, 0px);
    scroll-padding-bottom: env(safe-area-inset-bottom, 0px);
    scroll-padding-left: env(safe-area-inset-left, 0px);
  }

  html:root body {
    /* Reserve content space without insetting the document canvas. */
    border-style: solid;
    border-color: transparent;
    border-width: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }

  /* Outrank component font overrides without restricting manual page zoom. */
  html:root body :is(input, textarea, select, [contenteditable="true"], [contenteditable=""]) {
    font-size: max(16px, 1em) !important;
  }
}

@media (max-width: 900px), (pointer: coarse) {
  html:root {
    background: #14251e url("/static/img/forestbg.png") center / cover no-repeat fixed;
  }

  html:root body {
    /* Safari samples the actual page canvas for its surrounding system UI. */
    background: #14251e url("/static/img/forestbg.png") center / cover no-repeat fixed !important;
  }

  html:root body:has(> .login_scene) {
    min-height: 100dvh;
  }

  html:root body:has(> .login_scene) > .firefly-layer {
    contain: paint;
    overflow: clip;
  }

  /* Apply to every floating window, including Shop and Lernen, not only iframes. */
  html:root :is(.payday-window, [data-item-transfer-window], #dashboardGroupWindow, .quickslot-editor) {
    position: fixed !important;
    inset: var(--app-window-top, calc(env(safe-area-inset-top, 0px) + 8px)) auto auto
      var(--app-window-left, calc(env(safe-area-inset-left, 0px) + 8px)) !important;
    width: var(--app-window-width, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 16px)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: var(--app-window-height, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px)) !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    transform: none !important;
  }

  html:root :is(.payday-window--large, .payday-window--a4, [data-item-transfer-window], #dashboardGroupWindow, .quickslot-editor) {
    height: var(--app-window-height, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px)) !important;
  }

  html:root .payday-window > .payday-window__body {
    min-height: 0;
    max-height: calc(var(--app-window-height, 100dvh) - var(--sheet-window-frame-band, 28px)) !important;
    overflow-y: auto;
  }
}