.passport-offer-dialog {
  width: min(660px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  color: #312722;
  background: radial-gradient(ellipse at 50% 50%, #f6e3ae, #cfaa6e);
  border: 1px solid #5d4637;
  box-shadow: 6px 8px 0 #100e0c66;
}
.passport-offer-dialog::backdrop { background: #0d1019d9; backdrop-filter: blur(6px); }
.passport-offer-dialog[open] { animation: gift-reveal .35s ease-out both; }
.passport-offer-dialog .journey-intro-stage { min-height: 0; padding: 30px 20px 24px; align-content: start; }
.passport-offer-dialog .journey-intro-stage > .journey-kicker { position: relative; top: auto; color: #674b37; }
.passport-offer-dialog .paw-pair { inset: 12px 0 auto; height: 130px; }
.passport-offer-dialog .paw-pair img { top: 0; width: clamp(90px, 23vw, 166px); }
.passport-offer-dialog .paw-left { left: 5%; }
.passport-offer-dialog .paw-right { right: 5%; }
.passport-offer-dialog .passport-book { width: 100%; margin: 58px 0 0; transform: rotate(-1deg); }
.passport-offer-dialog .passport-pages h2 { margin: 6px 0; font: 800 clamp(24px, 5vw, 41px)/1.25 var(--play-display); }
.journey-dialog-close {
  position: absolute;
  z-index: 4;
  top: 8px;
  right: 8px;
  min-width: 42px;
  min-height: 42px;
  border: 1px solid currentColor;
  background: #fff3d9;
  color: #3e2b20;
  font-size: 23px;
  line-height: 1;
}
.gift-unopened {
  display: grid;
  grid-template-columns: minmax(80px, .75fr) minmax(135px, 1fr);
  align-items: center;
  gap: clamp(14px, 4vw, 35px);
  padding: 12px 8px 25px;
}
.gift-unopened[hidden], [data-gift-reward][hidden] { display: none; }
.gift-unopened .gift-box { width: min(80%, 175px); }
.gift-unopened.is-opened .gift-lid { transform: translate(-6%, -96%) rotate(-19deg); }
.gift-unopened [data-gift-open]:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 500px) {
  .passport-offer-dialog .journey-intro-stage { padding: 26px 10px 16px; }
  .passport-offer-dialog .passport-book { grid-template-columns: minmax(68px, .38fr) 1fr; }
  .passport-offer-dialog .passport-pages .button { gap: 8px; padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .passport-offer-dialog[open] { animation: none; }
}