/* shared/iframe-overlay/iframe-overlay.css — pin: iframe-overlay-1.0.0
 *
 * Stab 134. Canonical cross-origin iframe overlay chassis. Used by apex,
 * every game, and (future) credit-card payment iframes. The .open class
 * drives the fade-in + slide-in transition; consumer JS adds .open after
 * a forced reflow so the transition runs from initial to final state
 * instead of jumping.
 *
 * Replaces three byte-identical local copies that existed prior to
 * Stab 134:
 *   - _staging/main-domain/assets/css/game.css :1444-1471
 *   - _staging/games/3dice/assets/css/style.css :1306-1333
 *   - _staging/games/7x3/assets/css/game.css :2024-2051
 * Those copies had no transition rules — appearance was an instant
 * snap. The animation here mirrors shared/modal/modal.css's
 * .gam-modal-ov / .gam-modal-card pattern so /auth/ iframe overlays
 * read the same as the platform's other modals.
 *
 * Class name renamed from .auth-iframe-overlay to .iframe-overlay
 * since this module accommodates non-auth iframes (PSP payment pages)
 * going forward. The auth-overlay-open / iframe-overlay-open body
 * class is renamed accordingly.
 */

.iframe-overlay {
  position: fixed;
  inset: 0;
  /* Stab 134f: stronger dimmer (0.6 → 0.8) + backdrop blur. The pre-
     134f 0.6 alpha was insufficient to fully occlude 7X3's bright
     gold-on-cobalt header gradient, leaving the header visually
     distinguishable behind the overlay. 0.8 + blur(8px) saturate(0.9)
     matches shared/modal/modal.css's .gam-modal-backdrop pattern and
     produces visually identical occlusion across all games. */
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(8px) saturate(0.9);
          backdrop-filter: blur(8px) saturate(0.9);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top:    max(16px, env(safe-area-inset-top));
  padding-right:  max(16px, env(safe-area-inset-right));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left:   max(16px, env(safe-area-inset-left));
  box-sizing: border-box;

  /* Stab 134: fade-in. Initial state opacity 0; .open transitions to 1.
     pointer-events: none on initial state so a half-faded overlay can't
     swallow clicks meant for the page underneath. */
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.iframe-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.iframe-overlay iframe {
  border: 0;
  width: 100%;
  height: 100%;
  max-width: 560px;
  max-height: 720px;
  background: transparent;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);

  /* Stab 134: slide-in from above. Mirrors shared/modal/modal.css's
     .gam-modal-card transition (line 109): same easing curve, similar
     duration. The card "drops down" while the backdrop fades up. */
  transform: translateY(-40px);
  transition: transform 0.28s cubic-bezier(.18, .9, .25, 1);
}
.iframe-overlay.open iframe {
  transform: translateY(0);
}

html.iframe-overlay-open,
body.iframe-overlay-open {
  overflow: hidden;
}