/* safe-area.css — keep games clear of the notch, Dynamic Island, rounded
   corners and home indicator on iPhones.
   Loaded LAST in every game page's <head>, alongside viewport-fit=cover in the
   page's viewport meta. Without cover, iOS letterboxes the page inside the
   "safe" rectangle (black bars beside the notch in landscape); with cover the
   page fills the screen, and THIS file is what stops controls from sitting
   underneath the hardware.
   env(safe-area-inset-*) is 0 on anything without a cutout — desktop, Android,
   iPhones in portrait Safari (the browser's own bars already account for it) —
   so on those nothing below changes. */

@supports (padding: env(safe-area-inset-top)) {
  /* Flow layout: pad the page itself. border-box so a body that is exactly
     100vw / 100dvh wide/tall doesn't overflow by the padding. */
  body {
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
  }

  /* position:fixed corner controls ignore the body's padding (they're placed
     against the viewport), so each is nudged in by the inset with a margin —
     margin shifts a fixed element without disturbing the top/left/right the
     page's own CSS chose. */
  .back-home-link,
  .persistent-back-btn {
    margin-top: env(safe-area-inset-top, 0px);
    margin-left: env(safe-area-inset-left, 0px);
  }
  .persistent-room-code,
  .persistent-team-roster,
  .settings-gear {
    margin-top: env(safe-area-inset-top, 0px);
    margin-right: env(safe-area-inset-right, 0px);
  }
  /* Bottom-anchored toasts, so they don't land on the home indicator. */
  .toast,
  #toast,
  #share-toast,
  .friend-toast {
    margin-bottom: env(safe-area-inset-bottom, 0px);
  }
  .friend-toast { margin-right: env(safe-area-inset-right, 0px); }
  /* Top-anchored toast layer. */
  #toast-layer { margin-top: env(safe-area-inset-top, 0px); }
}

/* ---------------------------------------------------------------------------
   Menus and dialogs that must never be cut off at the top or bottom.

   The problem: a full-screen overlay centres its panel (align-items:center).
   When the panel is taller than the room the browser really has — on an iPhone
   the visible area shrinks when Safari/Brave show their toolbars, while `vh`
   still means the tall, toolbars-hidden height — centring pushes the panel past
   BOTH edges at once, and the overflow above the top can never be scrolled to.

   The fix ("safe centring"), for every dialog family the games use:
     • the overlay itself scrolls (overflow-y:auto) and keeps its scroll to
       itself (overscroll-behavior:contain);
     • the panel gets margin-top/bottom:auto — centred when it fits, and when it
       doesn't, the auto margins collapse to 0 so it starts at the top and
       scrolls, instead of spilling off both ends;
     • vertical padding keeps it clear of the notch / home indicator.
   No vh and no % heights, so it does not depend on which toolbar is showing.
   Only vertical padding is set, so each game keeps its own side padding.
   (`html ` in front of each selector is only there to out-rank the games' own
   single-class rules without needing !important.)
   .tbl-modal-overlay (Settings / How to Play) is fixed in table-theme.css.
   --------------------------------------------------------------------------- */
html :is(.alert-overlay, .confirm-overlay, .dialog-overlay, .fi-dialog-overlay,
         .guess-prompt-overlay, .spin-overlay, .item-popup-backdrop) {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 16px;
  padding-bottom: 16px;
}
html :is(.alert-overlay, .confirm-overlay, .dialog-overlay, .fi-dialog-overlay,
         .guess-prompt-overlay, .spin-overlay, .item-popup-backdrop) > * {
  margin-top: auto;
  margin-bottom: auto;
}
/* Spitshooter's item popup also capped its own card at 85vh. With the overlay
   scrolling, the card just takes the height it needs. */
html .item-popup-backdrop > .item-popup-card {
  max-height: none;
  overflow-y: visible;
}
/* Bottom sheet (Fade In): stays glued to the bottom edge; if it is taller than
   the screen it starts at the top and scrolls. It has its own bottom padding. */
html .fi-sheet-overlay {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 16px;
}
html .fi-sheet-overlay > * {
  margin-top: auto;
}
@supports (padding: env(safe-area-inset-top)) {
  html :is(.alert-overlay, .confirm-overlay, .dialog-overlay, .fi-dialog-overlay,
           .guess-prompt-overlay, .spin-overlay, .item-popup-backdrop) {
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }
  html .fi-sheet-overlay {
    padding-top: max(16px, env(safe-area-inset-top, 0px));
  }
}