/* 刘海屏与底部横条. Both pages use viewport-fit=cover, so the browser keeps nothing out of the notch, the status bar or
   the home indicator for us. Every modal dialog is laid out inside the safe area: a card stays centred in it, a sheet
   that fills a phone's screen fills exactly it (the backdrop runs under the notch), and none is ever taller or wider
   than it. On a screen without insets env() is 0 and nothing changes. Loaded last. */
:root {
  --sa-safe-t: env(safe-area-inset-top, 0px);
  --sa-safe-r: env(safe-area-inset-right, 0px);
  --sa-safe-b: env(safe-area-inset-bottom, 0px);
  --sa-safe-l: env(safe-area-inset-left, 0px);
}
dialog:modal:not(.sap-sheet):not(.sa-nav-menu) {
  inset: var(--sa-safe-t) var(--sa-safe-r) var(--sa-safe-b) var(--sa-safe-l) !important;
}
/* on a phone (either way up) no dialog is wider or taller than the safe area */
@media (max-width: 600px), (max-height: 500px) {
  dialog:modal:not(.sap-sheet):not(.sa-nav-menu) {
    max-width: calc(100vw - var(--sa-safe-l) - var(--sa-safe-r)) !important;
    max-height: calc(100dvh - var(--sa-safe-t) - var(--sa-safe-b)) !important;
  }
}
/* the music sheet and the menu already keep clear of the top and bottom themselves: only the sides, in landscape */
dialog.sap-sheet {
  padding-left: var(--sa-safe-l) !important;
  padding-right: var(--sa-safe-r) !important;
}
.sa-nav-menu {
  padding-left: calc(var(--pad-x, 22px) + var(--sa-safe-l)) !important;
  padding-right: calc(var(--pad-x, 22px) + var(--sa-safe-r)) !important;
}
/* the wish page's draw bar is fixed to the screen, not the dialog: its sides clear the notch too */
#saGacha .sg9-footer {
  padding-left: calc(14px + var(--sa-safe-l)) !important;
  padding-right: calc(14px + var(--sa-safe-r)) !important;
}
/* the hall (multiplayer) on a phone held sideways: its bar and its floating controls clear the notch on either side */
@media (orientation: landscape) and (max-height: 500px) {
  body > header {
    padding-left: calc(16px + var(--sa-safe-l)) !important;
    padding-right: calc(16px + var(--sa-safe-r)) !important;
  }
  .in-room .room-voice,
  .in-room .scene-camera-controls {
    translate: calc(-1 * var(--sa-safe-r)) 0;
  }
  .in-room .music {
    max-width: calc(100% - 24px - var(--sa-safe-l) - var(--sa-safe-r)) !important;
  }
  .in-room #status {
    left: calc(24px + var(--sa-safe-l)) !important;
    right: calc(24px + var(--sa-safe-r)) !important;
  }
}