update app/ui-tarot-lightbox.js

app/ui-tarot-lightbox.js

@@ -8,6 +8,8 @@
   let settingsPanelEl = null;
   let helpButtonEl = null;
   let helpPanelEl = null;
+  let helpTitleEl = null;
+  let helpListEl = null;
   let compareButtonEl = null;
   let deckCompareButtonEl = null;
   let mobileInfoButtonEl = null;
@@ -115,6 +117,50 @@
     return Number(window.innerWidth) <= 900;
   }
 
+  function getLightboxHelpTitle() {
+    return isCompactLightboxLayout() ? "Lightbox Gestures" : "Lightbox Shortcuts";
+  }
+
+  function getLightboxHelpLines() {
+    if (isCompactLightboxLayout()) {
+      return [
+        "Pinch the card: zoom in or out",
+        "Drag while zoomed: pan around the card",
+        "Tap the side arrows: move between cards, or move the overlay card in compare mode",
+        "Tap Overlay: choose a second card to compare",
+        "Tap Compare: show the same card from other registered decks",
+        "Tap outside the card or use Close Lightbox to exit"
+      ];
+    }
+
+    return [
+      "Click card: toggle zoom at the clicked point",
+      "Left / Right: move cards, or move overlay card in compare mode",
+      "Overlay: pick a second card to compare",
+      "Compare: show the same card from other registered decks",
+      "Space: swap base and overlay cards",
+      "R: rotate base card, or rotate overlay card in compare mode",
+      "+ / -: zoom in or out in steps",
+      "W A S D: pan while zoomed",
+      "Escape or backdrop click: close"
+    ];
+  }
+
+  function syncHelpContent() {
+    if (!helpTitleEl || !helpListEl) {
+      return;
+    }
+
+    helpTitleEl.textContent = getLightboxHelpTitle();
+    helpListEl.replaceChildren();
+
+    getLightboxHelpLines().forEach((line) => {
+      const lineEl = document.createElement("div");
+      lineEl.textContent = line;
+      helpListEl.appendChild(lineEl);
+    });
+  }
+
   function hasSequenceNavigation() {
     return Array.isArray(lightboxState.sequenceIds)
       && lightboxState.sequenceIds.length > 1
@@ -2065,6 +2111,8 @@
       return;
     }
 
+    syncHelpContent();
+
     const canShow = lightboxState.isOpen && !zoomed;
     helpButtonEl.style.display = canShow ? "inline-flex" : "none";
     helpPanelEl.style.display = canShow && lightboxState.helpOpen ? "flex" : "none";
@@ -2688,32 +2736,18 @@
     helpPanelEl.style.pointerEvents = "auto";
     helpPanelEl.style.zIndex = "2";
 
-    const helpTitleEl = document.createElement("div");
+    helpTitleEl = document.createElement("div");
     helpTitleEl.textContent = "Lightbox Shortcuts";
     helpTitleEl.style.font = "700 13px/1.3 sans-serif";
 
-    const helpListEl = document.createElement("div");
+    helpListEl = document.createElement("div");
     helpListEl.style.display = "flex";
     helpListEl.style.flexDirection = "column";
     helpListEl.style.gap = "6px";
     helpListEl.style.font = "500 12px/1.4 sans-serif";
     helpListEl.style.color = "rgba(226, 232, 240, 0.92)";
 
-    [
-      "Click card: toggle zoom at the clicked point",
-      "Left / Right: move cards, or move overlay card in compare mode",
-      "Overlay: pick a second card to compare",
-      "Compare: show the same card from other registered decks",
-      "Space: swap base and overlay cards",
-      "R: rotate base card, or rotate overlay card in compare mode",
-      "+ / -: zoom in or out in steps",
-      "W A S D: pan while zoomed",
-      "Escape or backdrop click: close"
-    ].forEach((line) => {
-      const lineEl = document.createElement("div");
-      lineEl.textContent = line;
-      helpListEl.appendChild(lineEl);
-    });
+    syncHelpContent();
 
     helpPanelEl.append(helpTitleEl, helpListEl);
 
@@ -2852,6 +2886,22 @@
     exportButtonEl.style.cursor = "pointer";
     exportButtonEl.style.backdropFilter = "blur(12px)";
 
+    const closeLightboxButtonEl = document.createElement("button");
+    closeLightboxButtonEl.type = "button";
+    closeLightboxButtonEl.textContent = "Close Lightbox";
+    closeLightboxButtonEl.style.display = "inline-flex";
+    closeLightboxButtonEl.style.alignItems = "center";
+    closeLightboxButtonEl.style.justifyContent = "center";
+    closeLightboxButtonEl.style.width = "100%";
+    closeLightboxButtonEl.style.border = "1px solid rgba(248, 250, 252, 0.18)";
+    closeLightboxButtonEl.style.background = "rgba(127, 29, 29, 0.72)";
+    closeLightboxButtonEl.style.color = "#f8fafc";
+    closeLightboxButtonEl.style.borderRadius = "999px";
+    closeLightboxButtonEl.style.padding = "10px 14px";
+    closeLightboxButtonEl.style.font = "600 13px/1.1 sans-serif";
+    closeLightboxButtonEl.style.cursor = "pointer";
+    closeLightboxButtonEl.style.backdropFilter = "blur(12px)";
+
     deckComparePanelEl = document.createElement("div");
     deckComparePanelEl.style.position = "fixed";
     deckComparePanelEl.style.top = "24px";
@@ -2963,7 +3013,8 @@
       exportButtonEl,
       helpButtonEl,
       zoomControlEl,
-      opacityControlEl
+      opacityControlEl,
+      closeLightboxButtonEl
     );
     toolbarEl.append(settingsButtonEl);
 
@@ -3535,6 +3586,11 @@
       event.stopPropagation();
       await exportCurrentLightboxView();
     });
+    closeLightboxButtonEl.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      close();
+    });
     opacitySliderEl.addEventListener("change", restoreLightboxFocus);
     opacitySliderEl.addEventListener("pointerup", restoreLightboxFocus);
     mobilePrevButtonEl.addEventListener("click", (event) => {

index.html

@@ -1331,7 +1331,7 @@
   <script src="app/data-service.js?v=20260601-now-polling-03"></script>
   <script src="app/calendar-events.js"></script>
   <script src="app/card-images.js?v=20260527-tarot-deck-gallery-01"></script>
-  <script src="app/ui-tarot-lightbox.js?v=20260608-tarot-lightbox-mobile-nav-03"></script>
+  <script src="app/ui-tarot-lightbox.js?v=20260608-tarot-lightbox-mobile-help-04"></script>
   <script src="app/ui-tarot-house.js?v=20260401-house-top-date-01"></script>
   <script src="app/ui-tarot-relations.js"></script>
   <script src="app/ui-now-helpers.js?v=20260314-now-planets-grid-01"></script>