/* Keep the approved phone layout when an invitation is opened on a wide screen. */
.invitation-portrait-shell {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: #17141c;
}
.invitation-portrait-shell > .invitation-portrait-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  margin-inline: auto;
  overflow: hidden;
  isolation: isolate;
  /* Opening overlays using fixed positioning stay inside the portrait canvas. */
  transform: translateZ(0);
}
.invitation-portrait-shell > .invitation-portrait-canvas > .video-invitation {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  inset: 0 !important;
}
/* Portrait phones keep their full usable width, including browser toolbar changes. */
@media (min-width: 601px), (orientation: landscape) {
  /* React sizes the unscaled canvas to 390x844; zoom preserves text/art proportions. */
  /* Fixed plaque padding otherwise consumes the heading width on short desktops. */
  .invitation-portrait-canvas .vi-night.vi-pearl.vi-story .pearl-scene-4 > .pearl-title {
    padding-inline: 30px !important;
    font-size: clamp(16px, calc(var(--paper-width) * .054), 21px) !important;
    line-height: 1.2 !important;
  }
}