:root {
  --modal-safe-top:max(env(safe-area-inset-top,0px),var(--safe-top,0px));
  --modal-safe-bottom:max(env(safe-area-inset-bottom,0px),var(--safe-bottom,0px));
  --modal-safe-left:max(env(safe-area-inset-left,0px),var(--safe-left,0px));
  --modal-safe-right:max(env(safe-area-inset-right,0px),var(--safe-right,0px));
}
.safe-modal-overlay {
  box-sizing:border-box!important;
  top:var(--modal-viewport-top,0px)!important;
  left:var(--modal-viewport-left,0px)!important;
  right:auto!important;bottom:auto!important;
  width:var(--modal-viewport-width,100%)!important;
  height:var(--modal-viewport-height,100dvh)!important;
  padding:calc(12px + var(--modal-safe-top)) calc(12px + var(--modal-safe-right)) calc(12px + var(--modal-safe-bottom)) calc(12px + var(--modal-safe-left))!important;
  overflow:hidden!important;
  align-items:center!important;justify-content:center!important;
}
.safe-modal-overlay:not(#profile-modal-bg):not(#merchant-chest-reward-modal):not(#custom-modal-bg[data-variant="reward"]) > :first-child:not(.pwa-backdrop):not(#safe-modal-unused-id),
.safe-modal-overlay > .pwa-card:not(#safe-modal-unused-id) {
  box-sizing:border-box!important;
  max-width:100%!important;min-width:0!important;
  max-height:100%!important;
  overflow-y:auto!important;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  margin-top:0!important;margin-bottom:0!important;
}
/* The profile is a full-screen page: keep its parchment background edge to edge.
   Insets belong inside the scrolling page, rather than around its dark backdrop. */
#profile-modal-bg.safe-modal-overlay {
  padding:0!important;
}
#profile-modal-bg.safe-modal-overlay > #profile-modal-window {
  box-sizing:border-box;
  width:100%;height:100%;max-width:100%;min-height:0;
  padding:var(--modal-safe-top) var(--modal-safe-right) var(--modal-safe-bottom) var(--modal-safe-left);
}
/* Reward coins intentionally extend beyond the card. Scroll the whole layer
   on short screens, reserving space above the card for the coin and animation. */
#merchant-chest-reward-modal.safe-modal-overlay,
#custom-modal-bg.safe-modal-overlay[data-variant="reward"] {
  flex-direction:column;
  justify-content:flex-start!important;
  padding-top:calc(56px + var(--modal-safe-top))!important;
  overflow-y:auto!important;overscroll-behavior:contain;
  scroll-padding-top:calc(56px + var(--modal-safe-top));
  scroll-padding-bottom:calc(12px + var(--modal-safe-bottom));
}
#merchant-chest-reward-modal.safe-modal-overlay > #merchant-chest-reward-window,
#custom-modal-bg.safe-modal-overlay[data-variant="reward"] > #custom-modal-window {
  flex-shrink:0;max-width:100%;max-height:none;
  overflow:visible;margin:auto!important;
}
#custom-modal-bg.safe-modal-overlay[data-variant="reward"] > #custom-modal-window {
  box-sizing:border-box!important;max-width:100%!important;min-width:0!important;
}
#merchant-chest-reward-window .merchant-reward-track {flex-wrap:wrap;}
#pwa-install-modal.safe-modal-overlay.is-open {display:flex;}
#pwa-install-modal.safe-modal-overlay > .pwa-card {
  position:relative!important;left:auto!important;top:auto!important;
  transform:none!important;animation:none!important;
}
#mock-beta-window {
  display:flex;flex-direction:column;
  overflow:hidden!important;
}
.mock-beta-body {min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.mock-beta-actions {flex-shrink:0;padding-top:10px;background:#fffdf5;}
#mock-beta-ok {min-height:48px;max-width:100%;}
.mock-draft-status {font:0.88rem/1.4 system-ui,sans-serif;padding:8px 12px;color:#46633e;}
.mock-draft-status[data-problem="true"] {color:#854b14;}
.mock-draft-resolve {min-height:44px;margin:5px 8px 5px 0;}
@media (prefers-reduced-motion:reduce) {
  .safe-modal-overlay > :first-child {animation:none!important;transition:none!important;}
}