/* Constrain the whole viewer, including the download control, to the viewport. */
#card-modal {
  --tarot-viewer-top: 0px;
  --tarot-content-height: calc(100dvh - var(--tarot-viewer-top) - 80px);
  inset: var(--tarot-viewer-top) 0 0 !important;
  max-height: calc(100dvh - var(--tarot-viewer-top)) !important;
  padding: 16px !important;
  align-items: start;
  overflow: hidden;
  overscroll-behavior: contain;
}

#card-modal .card-panel {
  display: block;
  min-height: 0;
  max-height: calc(100dvh - var(--tarot-viewer-top) - 32px) !important;
  padding: 44px 0 0 !important;
}

#card-modal .card-close { top: 0; right: 0; }

#card-modal .card-full-view {
  width: 100%;
  max-height: var(--tarot-content-height) !important;
  min-height: 0;
  overscroll-behavior: contain;
}

#card-modal .card-art-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-height: var(--tarot-content-height);
  min-height: 0;
}

#card-modal .full-card-art-button {
  flex: 0 1 auto;
  min-height: 0;
  height: auto !important;
  max-height: calc(var(--tarot-content-height) - 54px) !important;
  padding: 0;
}

#card-modal .full-card-image {
  width: 100%;
  height: auto;
  min-height: 0;
  max-width: 100% !important;
  max-height: calc(var(--tarot-content-height) - 54px) !important;
  object-fit: contain;
}

#card-modal .popup-card-download {
  flex: 0 0 auto;
  min-height: 44px;
  margin: 0;
}

#card-modal .card-meaning-overlay {
  width: 100%;
  max-height: var(--tarot-content-height) !important;
  padding-right: 16px !important;
  overscroll-behavior: contain;
}

@media (max-width: 520px) {
  #card-modal .card-full-view { overflow: auto; }
  #card-modal .full-card-image {
    max-height: min(50dvh, calc(var(--tarot-content-height) - 54px)) !important;
  }
  #card-modal .card-meaning-overlay { max-height: none !important; }
}

/* Clip the baked-in black corners to the parchment edge in light mode. */
html[data-theme="light"] img:is([src*="/alchemists-marseille/"], [src*="/engraved-smith/"]) {
  aspect-ratio: auto;
  clip-path: inset(0 round 6% / 4%);
}
html[data-theme="light"] .card-art-wrap:has(img:is([src*="/alchemists-marseille/"], [src*="/engraved-smith/"])) {
  background: transparent;
}