/* The illustrated frame is scoped to Mystery Hangar and its own dialogs. */
body[data-page="mint"] .mint-panel { margin-top: calc(40px / var(--game-ui-scale, 1)); }
.hangar-frame {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: min(100%, 670px);
  min-height: 108px;
  padding: 22px 110px;
  margin: 0 auto 22px;
  text-align: center;
  color: #050e3b;
  font-family: Cartoon, sans-serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  filter: drop-shadow(0 4px 3px #183b4930);
}
.hangar-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hangar-frame > span { position: relative; }
body[data-page="mint"] .mint-panel > .hangar-frame { margin-top: -76px; margin-bottom: 24px; transform: translateY(calc(-20px / var(--game-ui-scale, 1))); }
.dialog.hangar-popup { border: 6px solid #a8b8c6; box-shadow: 0 0 0 2px #3b556b, inset 0 0 0 2px #fffefa, inset 0 0 0 5px #929ca3, inset 0 0 0 7px #e1d5bb, 0 8px 16px #092e4560; border-radius: 28px; padding: 58px 28px 28px; }
.hangar-popup .hangar-frame { width: 100%; min-height: 92px; padding: 20px 17%; font-size: 27px; margin: 0 auto 20px; }
.hangar-popup .processing { padding-top: 0; }
.hangar-popup .processing .hangar-frame { font-size: 27px; }
/* Confirmation uses the top-mounted title of the approved popup layout. */
.dialog.mint-confirm-dialog {
  overflow: visible;
  margin-top: 44px;
  padding: 50px 30px 28px;
}
.mint-confirm-dialog > .hangar-frame {
  width: calc(100% - 90px);
  min-height: 88px;
  margin: -96px auto 26px;
  padding: 20px 16%;
  font-size: 28px;
}
.mint-confirm-dialog > .intro {
  max-width: 470px;
  margin: 0 auto 18px;
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
}
body[data-page="mint"] .mint-confirm-dialog > .price {
  max-width: 180px;
  margin: 16px auto 10px;
  font-size: 30px;
  line-height: 42px;
  gap: 10px;
}
.mint-confirm-dialog .modal-actions { margin: 24px 0 18px; gap: 16px; }
.mint-confirm-dialog > .intro:last-child { font-size: 15px; margin-bottom: 0; }
@media(max-width:760px) {
  body[data-page="mint"] .mint-panel > .hangar-frame { margin-top: -54px; margin-bottom: 14px; min-height: 74px; padding: 17px 17%; font-size: clamp(16px, 3.5vw, 25px); }
  .dialog.hangar-popup { padding: 51px 17px 22px; }
  .hangar-popup .hangar-frame, .hangar-popup .processing .hangar-frame { font-size: 20px; min-height: 80px; padding: 18px 17%; }
  .dialog.mint-confirm-dialog { padding: 45px 18px 22px; }
  .mint-confirm-dialog > .hangar-frame { width: calc(100% - 42px); min-height: 70px; margin: -82px auto 25px; padding: 18px 16%; font-size: 20px; }
  .mint-confirm-dialog > .intro { font-size: 16px; }
}
@media(max-height:600px) {
  .dialog.mint-confirm-dialog { margin-top: 0; overflow: auto; padding-top: 50px; }
  .mint-confirm-dialog > .hangar-frame { margin-top: 0; }
}

/* A single top-mounted title for every popup in the crate-opening flow. */
.dialog.hangar-popup {
  overflow: visible;
  margin-top: 48px;
  padding: 64px 28px 26px;
}
.dialog.hangar-popup > .hangar-frame {
  position: absolute;
  left: 50%;
  top: -46px;
  transform: translateX(-50%);
  width: calc(100% - 120px);
  min-height: 92px;
  margin: 0;
  padding: 18px 16%;
  font-size: 26px;
}
.dialog.hangar-popup > .reveal {
  max-height: calc((100dvh - 200px) / var(--game-ui-scale, 1));
  overflow-y: auto;
  padding: 0 7px 9px;
}
.dialog.hangar-popup > .processing { padding: 10px 15px 15px; }
.dialog.hangar-popup .modal-actions { justify-content: center; gap: 16px; }
.dialog.hangar-popup .modal-actions > .btn { flex: 0 1 190px; width: 190px; padding-left: 14px; padding-right: 14px; }
.dialog.hangar-popup .reveal > .btn {
  display: flex;
  width: min(100%, 360px);
  margin: 20px auto 0;
  padding-left: 20px;
  padding-right: 20px;
}
body[data-page="mint"] .mint-info > .btn { width: min(100%, 245px); }
@media(max-width:760px) {
  .dialog.hangar-popup { padding: 55px 17px 22px; margin-top: 40px; }
  .dialog.hangar-popup > .hangar-frame { top: -40px; min-height: 80px; width: calc(100% - 100px); padding: 16px 14%; font-size: 18px; }
  .dialog.hangar-popup .modal-actions { gap: 10px; }
  .dialog.hangar-popup .modal-actions > .btn { flex-basis: 145px; width: 145px; font-size: 17px; }
  .dialog.hangar-popup .reveal > .btn { width: min(100%, 290px); font-size: 19px; }
  body[data-page="mint"] .mint-info > .btn { width: min(100%, 220px); }
}

/* Approved upper-edge overlap, shared by the Mint panel and its dialogs. */
body[data-page="mint"] .mint-panel { position: relative; }
body[data-page="mint"] .mint-panel > .hangar-frame {
  position: absolute; left: 50%; top: -76px;
  transform: translateX(-50%); margin: 0;
  width: min(670px, calc(100% - 100px));
}
.dialog.hangar-popup > .hangar-frame { top: -65px; }
.dialog.hangar-popup .reveal-art {
  display: grid; place-items: center;
  width: 100%; max-width: 440px;
  margin: 6px auto 0; padding: 12px 24px;
  overflow: visible;
}
.dialog.hangar-popup .reveal-art img.reveal-plane {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  max-width: 380px; object-fit: contain; object-position: center;
  mix-blend-mode: normal; mask-image: none; clip-path: none;
  animation: aircraft-appear .45s ease-out both;
}
.dialog.hangar-popup .reveal h3 {
  max-width: 100%; overflow-wrap: anywhere;
  font-size: clamp(23px, 3vw, 34px); line-height: 1.15;
}
@keyframes aircraft-appear { from {opacity:0} to {opacity:1} }
.propeller-loader { position: relative; display: block; width:88px; height:88px; margin:0 auto 30px; animation:spin 3s linear infinite; }
.dialog .propeller-loader .loading-propeller { width:100%; height:100%; margin:0; animation:none; }
.propeller-loader::after { content:""; position:absolute; inset:16%; border:2px solid transparent; border-left-color:#30e9fc; border-radius:50%; transform:rotate(20deg); pointer-events:none; }
@media(max-width:760px) {
  body[data-page="mint"] .mint-panel > .hangar-frame { top:-52px; margin:0; width:calc(100% - 44px); }
  .dialog.hangar-popup > .hangar-frame { top:-56px; }
  .dialog.hangar-popup .reveal-art { max-width:330px; padding:10px 18px; }
  .propeller-loader { width:73px; height:73px; margin-bottom:25px; }
}
@media(prefers-reduced-motion:reduce) {
  .propeller-loader, .dialog.hangar-popup .reveal-art img.reveal-plane { animation:none; }
}

/* Requested offsets are in screen pixels, including the compact UI scale. */
.dialog.hangar-popup .reveal > .badge { position:relative; top:calc(-10px / var(--game-ui-scale, 1)); }
.dialog.hangar-popup .reveal > h3 { position:relative; top:calc(10px / var(--game-ui-scale, 1)); }

/* Uniform title typography across Mystery Hangar and all its framed popups. */
body[data-page="mint"] .mint-panel > .hangar-frame,
.dialog.hangar-popup > .hangar-frame {
  font-size:31px;
  font-family:Cartoon,sans-serif;
  font-weight:400;
  line-height:1.1;
  letter-spacing:0;
  padding-left:16%;
  padding-right:16%;
}
.hangar-frame > span { white-space:nowrap; text-align:center; }
.dialog.hangar-popup .reveal > .intro {
  position:relative;
  top:calc(10px / var(--game-ui-scale, 1));
}
.dialog.hangar-popup .reveal > .badge::after { content:" ✦"; }
/* The new artwork contains all three wind strokes; remove the old extra arc. */
.propeller-loader::after { content:none; }
.dialog .propeller-loader .loading-propeller { transform:translateY(-3.4%); }
@media(max-width:760px) {
  body[data-page="mint"] .mint-panel > .hangar-frame,
  .dialog.hangar-popup > .hangar-frame {
    font-size:clamp(13px,4.2vw,22px);
    padding-left:15%; padding-right:15%;
  }
  .dialog.hangar-popup > .hangar-frame { width:calc(100% - 32px); }
}

/* Narrow the main Hangar panel by 25 screen pixels, with equal side margins. */
@media(min-width:761px) {
  body[data-page="mint"] .mint-panel {
    width:calc(100% - 25px / var(--game-ui-scale,1));
    max-width:calc(1240px - 25px / var(--game-ui-scale,1));
    margin-left:auto;
    margin-right:auto;
  }
}