/* Keep immersive card and rune viewers inside the viewport below the global banner. */
.image-modal,
.card-modal,
.full-rune-modal {
  inset:var(--alchemysterium-header-height) 0 0 0 !important;
  height:auto !important;
  max-height:calc(100dvh - var(--alchemysterium-header-height));
}

.wyrd-page .modal {
  inset:var(--alchemysterium-header-height) 0 0 0 !important;
  height:auto !important;
  max-height:calc(100dvh - var(--alchemysterium-header-height));
  padding:18px !important;
}
.wyrd-page .modal-panel {
  max-height:calc(100dvh - var(--alchemysterium-header-height) - 56px) !important;
  overflow:auto;
}
.wyrd-page .modal-symbol-large {
  box-sizing:border-box;
  font-size:clamp(4rem,18vw,9rem);
  cursor:pointer !important;
}
.wyrd-page .modal-symbol-large,
.wyrd-page .modal-symbol-large.durer-deck {
  width:min(100%,260px) !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  aspect-ratio:2 / 3;
  align-self:start;
  justify-self:center;
}

.lenormand-page #modal {
  inset:var(--alchemysterium-header-height) 0 0 0 !important;
  height:auto !important;
  max-height:calc(100dvh - var(--alchemysterium-header-height));
  padding:18px !important;
}
.lenormand-page .modalbox {
  grid-template-columns:minmax(220px,.72fr) minmax(300px,1fr) !important;
  width:min(100%,900px) !important;
  max-height:calc(100dvh - var(--alchemysterium-header-height) - 56px) !important;
  padding:0 !important;
}
.lenormand-page .modalbox > img {
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:calc(100dvh - var(--alchemysterium-header-height) - 56px) !important;
  object-fit:contain;
}
.lenormand-page .modaltext { max-height:calc(100dvh - var(--alchemysterium-header-height) - 56px) !important; }

.card-modal .card-panel { width:min(100%,900px) !important; }
.card-modal .card-full-view { grid-template-columns:minmax(220px,.72fr) minmax(300px,1fr) !important; gap:16px; align-items:start; }
.card-modal[data-mode="art"] .card-meaning-overlay { display:grid !important; }
.card-modal[data-mode="meaning"] .full-card-art-button { display:grid !important; }
.card-modal .full-card-art-button,.card-modal .card-meaning-overlay { max-height:calc(100dvh - var(--alchemysterium-header-height) - 56px) !important; }
.card-modal .full-card-art-button {
  box-sizing:border-box;
  padding-right:4px;
}
.card-modal .card-meaning-overlay { padding-right:76px !important; }
.card-modal .full-card-image {
  box-sizing:border-box;
  max-width:100% !important;
  max-height:calc(100dvh - var(--alchemysterium-header-height) - 56px) !important;
}

.image-stage {
  height:calc(100dvh - var(--alchemysterium-header-height)) !important;
  padding:18px !important;
}
.image-stage img {
  max-width:calc(100vw - 36px) !important;
  max-height:calc(100dvh - var(--alchemysterium-header-height) - 56px) !important;
}

.card-modal { padding:16px !important; }
.card-panel {
  max-height:calc(100dvh - var(--alchemysterium-header-height) - 56px) !important;
  padding:0 !important;
}
.card-full-view,
.full-card-art-button {
  max-height:calc(100dvh - var(--alchemysterium-header-height) - 56px) !important;
}
.full-card-image {
  max-width:calc(100vw - 32px) !important;
  max-height:calc(100dvh - var(--alchemysterium-header-height) - 56px) !important;
}

.full-rune-modal { padding:18px !important; }
.full-rune-symbol {
  width:min(100%,720px) !important;
  height:min(calc(100dvh - var(--alchemysterium-header-height) - 56px),640px) !important;
  max-height:calc(100dvh - var(--alchemysterium-header-height) - 56px);
}
.wyrd-page .full-rune-symbol,
.wyrd-page .full-rune-symbol.durer-deck {
  box-sizing:border-box;
  font-size:clamp(6rem,30vw,18rem);
  width:min(500px,55dvh,calc(100vw - 48px)) !important;
  height:auto !important;
  max-height:calc(100dvh - var(--alchemysterium-header-height) - 64px) !important;
  aspect-ratio:2 / 3;
  align-self:center;
  justify-self:center;
}
.full-rune-actions { top:calc(var(--alchemysterium-header-height) + 12px) !important; }

@media (max-width:680px) {
  .wyrd-page .modal { padding:10px !important; }
  .wyrd-page .modal-panel { max-height:calc(100dvh - var(--alchemysterium-header-height) - 20px) !important; }
  .wyrd-page .modal-symbol-large,
  .wyrd-page .modal-symbol-large.durer-deck {
    width:min(100%,230px) !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
  }
  .image-stage { padding:10px !important; }
  .image-stage img { max-width:calc(100vw - 20px) !important; max-height:calc(100dvh - var(--alchemysterium-header-height) - 20px) !important; }
  .card-modal { padding:10px !important; }
  .card-panel,.card-full-view,.full-card-art-button,.full-card-image { max-height:calc(100dvh - var(--alchemysterium-header-height) - 20px) !important; }
  .full-rune-modal { padding:10px !important; }
  .full-rune-symbol { height:calc(100dvh - var(--alchemysterium-header-height) - 20px) !important; max-height:calc(100dvh - var(--alchemysterium-header-height) - 20px); }
  .wyrd-page .full-rune-symbol,
  .wyrd-page .full-rune-symbol.durer-deck {
    width:min(56dvh,calc(100vw - 28px)) !important;
    height:auto !important;
    max-height:calc(100dvh - var(--alchemysterium-header-height) - 36px) !important;
  }
  .full-rune-actions { top:calc(var(--alchemysterium-header-height) + 8px) !important; right:8px !important; }
  .lenormand-page #modal { padding:10px !important; }
  .lenormand-page .modalbox { grid-template-columns:minmax(0,.72fr) minmax(0,1fr) !important; gap:10px; max-height:calc(100dvh - var(--alchemysterium-header-height) - 20px) !important; }
  .lenormand-page .modalbox > img,.lenormand-page .modaltext { max-height:calc(100dvh - var(--alchemysterium-header-height) - 20px) !important; }
  .card-modal .card-full-view { grid-template-columns:minmax(0,.72fr) minmax(0,1fr) !important; gap:10px; }
}

@media (max-width:520px) {
  .lenormand-page .modalbox,.card-modal .card-full-view { grid-template-columns:1fr !important; overflow:auto; }
  .lenormand-page .modalbox > img { max-height:38dvh !important; }
  .lenormand-page .modaltext { max-height:none !important; }
  .card-modal .full-card-art-button { height:38dvh; min-height:240px; }
  .card-modal .card-meaning-overlay { max-height:none !important; }
  .card-modal .card-meaning-overlay { padding-right:58px !important; }
}