Card preview: clicking empty space beside the info tile closes it

src/components.tsx

@@ -1364,6 +1364,7 @@ function ClickPreviewModal({
   const shownImage = showBack && hasBack ? card.back_image_uri : card.image_uri;
   const backdropRef = useRef<HTMLDivElement>(null);
   const modalRef = useRef<HTMLDivElement>(null);
+  const facesRef = useRef<HTMLDivElement>(null);
   const infoRef = useRef<HTMLDivElement>(null);
   // Compact mode: when the full layout (art + info tile) would be taller than
   // the viewport — i.e. on phones, where the tile wraps below the art — show
@@ -1441,9 +1442,15 @@ function ClickPreviewModal({
         ]
           .filter(Boolean)
           .join(" ")}
-        onClick={(e) => e.stopPropagation()}
+        onClick={(e) => {
+          e.stopPropagation();
+          // The modal's box spans the tallest child, so beside a short info
+          // tile (or between side-by-side DFC faces) there's empty space that
+          // is still "off the card" — treat a click there like the backdrop.
+          if (e.target === e.currentTarget || e.target === facesRef.current) onClose();
+        }}
       >
-        <div className="preview-modal-faces">
+        <div className="preview-modal-faces" ref={facesRef}>
           {/* Only the front face can be horizontal (Battles) — a transformed
               Battle's back face is always a normal, correctly-oriented
               creature card, per `CardRef.horizontal`'s doc comment. */}

src/styles.css

@@ -2100,7 +2100,10 @@ tbody tr:hover {
 .preview-modal {
   position: relative;
   margin: auto;
-  cursor: default;
+  /* Its empty space (e.g. below a short info tile) closes the modal like the
+     backdrop does — see ClickPreviewModal — so only the actual content gets
+     the default cursor. */
+  cursor: zoom-out;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
@@ -2111,6 +2114,10 @@ tbody tr:hover {
 .preview-modal-faces {
   position: relative;
 }
+.preview-modal > :not(.preview-modal-faces),
+.preview-modal-faces > * {
+  cursor: default;
+}
 /* Sized explicitly (Scryfall "normal" images are 488x680) rather than from
    the image's intrinsic size, so the box is already its final size before the
    image loads — ClickPreviewModal measures the layout on mount to decide on