/* ============================================================
   Card inspector lightbox — enlarge an item's hero image. Cards get pointer
   tilt on desktop (foil/shine removed here by request — the detail dock and
   Home Vault keep theirs); sealed/other items enlarge plain. Standalone
   overlay above everything (z 2000 > confirm modal's 1000).
   ============================================================ */
.v9-inspector-backdrop {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
  animation: v9-inspector-in 200ms var(--v9-ease, ease) both;
}
/* distinct out-keyframe (NOT a reversed reuse of the in-keyframe) so the close
   animation actually restarts — reusing the same @keyframes name leaves it in a
   finished state and it never plays. */
.v9-inspector-backdrop.is-closing { animation: v9-inspector-out 240ms var(--v9-ease, ease) forwards; }
@keyframes v9-inspector-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes v9-inspector-out { from { opacity: 1; } to { opacity: 0; } }

.v9-inspector-stage {
  perspective: 1400px;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  /* no padding: the card's own viewport caps (height min(86vh,…) / width 90vw)
     provide the breathing margin. Stage padding + a 90vw card overflowed the
     viewport on phones. */
  padding: 0;
}

/* ---- card (holo): definite 5:7 size that always fits the viewport, the inner
   tilts in 3D. height capped so the aspect-derived width never exceeds ~90vw
   (126vw = 90vw * 7/5) — keeps the ratio undistorted on phones too. ---- */
.v9-inspector-card {
  position: relative;
  /* ~1.5x the original 620px cap (930px) where the screen allows; 88vh + 126vw
     keep it fitting on shorter/narrower viewports (mobile stays width-bound). */
  height: min(88vh, 126vw, 930px);
  aspect-ratio: 5 / 7;
  transform-style: preserve-3d;
  cursor: default;
  will-change: transform;
}
.v9-inspector-inner {
  position: absolute; inset: 0;
  border-radius: var(--v9-r-md, 10px);
  transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
  transform-style: preserve-3d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.v9-inspector-art {
  position: absolute; inset: 0;
  border-radius: var(--v9-r-md, 10px);
  overflow: hidden;
  background: var(--v9-raised, #15151A);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.v9-inspector-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- plain (sealed/other): natural image, no tilt/foil ---- */
.v9-inspector-card.is-plain { height: auto; aspect-ratio: auto; will-change: auto; }
.v9-inspector-card.is-plain .v9-inspector-inner { position: static; transform: none; box-shadow: none; }
.v9-inspector-card.is-plain .v9-inspector-art {
  position: static; inset: auto; background: transparent; box-shadow: none; overflow: visible;
}
.v9-inspector-card.is-plain .v9-inspector-art img {
  /* fill like a card (height-driven to the SAME height as the Cards tab) rather
     than rendering at natural size — small images (the default placeholder, a
     small photo) were showing tiny. width follows the image's own aspect; the
     max-width + object-fit:contain guard the rare wide/landscape photo. */
  height: min(88vh, 930px); width: auto; max-width: 90vw; object-fit: contain;
  border-radius: var(--v9-r-md, 10px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ---- close (fixed top-right, receipt-style) ---- */
.v9-inspector-close {
  position: fixed; top: var(--v9-space-4, 16px); right: var(--v9-space-4, 16px); z-index: 2;
  width: 2.4rem; height: 2.4rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--v9-line, #232329); border-radius: var(--v9-r-sm, 8px);
  background: var(--v9-raised, #15151A); color: var(--v9-text-mute, #b6b6bd);
  font: 400 var(--v9-text-lg, 1.25rem)/1 var(--v9-font-ui, sans-serif); cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.v9-inspector-close:hover { color: var(--v9-text, #fff); border-color: var(--v9-line-strong, #34343c); }

@media (prefers-reduced-motion: reduce) {
  .v9-inspector-backdrop, .v9-inspector-backdrop.is-closing { animation: none; }
}