updated: app/ui-tarot-card.js

app/styles.css

@@ -1255,6 +1255,7 @@
 
     .tarot-frame-panel {
       --frame-grid-zoom-scale: 1;
+      --frame-card-overlay-scale: clamp(1, calc(0.92 + ((var(--frame-grid-zoom-scale) - 1) * 0.14)), 2.3);
       --frame-base-cell-width: clamp(32px, 2.6vw, 46px);
       --frame-cell-width: calc(var(--frame-base-cell-width) * var(--frame-grid-zoom-scale));
       --frame-cell-height: calc(var(--frame-cell-width) * 1.5);
@@ -1946,14 +1947,14 @@
 
     .tarot-frame-card-badge {
       position: absolute;
-      left: 4px;
-      right: 4px;
-      bottom: 4px;
-      padding: 4px 5px;
-      border-radius: 8px;
+      left: calc(4px * var(--frame-card-overlay-scale));
+      right: calc(4px * var(--frame-card-overlay-scale));
+      bottom: calc(4px * var(--frame-card-overlay-scale));
+      padding: calc(4px * var(--frame-card-overlay-scale)) calc(5px * var(--frame-card-overlay-scale));
+      border-radius: calc(8px * var(--frame-card-overlay-scale));
       background: rgba(2, 6, 23, 0.84);
       color: #f8fafc;
-      font-size: clamp(8px, 0.72vw, 10px);
+      font-size: calc(clamp(8px, 0.72vw, 10px) * var(--frame-card-overlay-scale));
       font-weight: 700;
       line-height: 1.15;
       letter-spacing: 0.02em;

app/ui-tarot-frame.js

@@ -48,9 +48,9 @@
     pisces: "02-19"
   };
   const MASTER_GRID_SIZE = 14;
-  const FRAME_GRID_ZOOM_STEPS = [1, 1.2, 1.4, 1.7, 2, 2.4, 3, 3.6, 4.2];
+  const FRAME_GRID_ZOOM_STEPS = [1, 1.2, 1.4, 1.7, 2, 2.4, 3, 3.6, 4.2, 5.2, 6.4, 8, 10, 12, 14];
   const FRAME_GRID_MIN_SCALE = 0.8;
-  const FRAME_GRID_MAX_SCALE = 5.2;
+  const FRAME_GRID_MAX_SCALE = 14;
   const FRAME_CUSTOM_LAYOUTS_STORAGE_KEY = "tarot-frame-custom-layouts-v1";
   const FRAME_ACTIVE_LAYOUT_STORAGE_KEY = "tarot-frame-active-layout-v1";
   const FRAME_CARD_PICKER_QUERY_STORAGE_KEY = "tarot-frame-card-picker-query-v1";
@@ -201,6 +201,7 @@
     },
     suppressClick: false,
     showInfo: true,
+    layoutGuideVisible: false,
     settingsOpen: false,
     layoutMenuOpen: false,
     gridFocusMode: false,
@@ -736,6 +737,15 @@
     }
   }
 
+  function applyLayoutGuideUi() {
+    const { tarotFrameOverviewEl } = getElements();
+    if (!(tarotFrameOverviewEl instanceof HTMLElement)) {
+      return;
+    }
+
+    tarotFrameOverviewEl.hidden = !state.layoutGuideVisible;
+  }
+
   function applyGridFocusModeUi() {
     const {
       tarotFrameSectionEl,
@@ -2335,6 +2345,20 @@
     saveButtonEl.disabled = Boolean(state.exportInProgress);
     tarotFrameLayoutPanelEl.appendChild(saveButtonEl);
 
+    const guideToggleEl = document.createElement("label");
+    guideToggleEl.className = "tarot-frame-toggle";
+    guideToggleEl.setAttribute("for", "tarot-frame-layout-guide-visible");
+    const guideToggleInputEl = document.createElement("input");
+    guideToggleInputEl.id = "tarot-frame-layout-guide-visible";
+    guideToggleInputEl.type = "checkbox";
+    guideToggleInputEl.checked = Boolean(state.layoutGuideVisible);
+    guideToggleInputEl.disabled = Boolean(state.exportInProgress);
+    guideToggleInputEl.dataset.layoutGuideVisible = "true";
+    const guideToggleLabelEl = document.createElement("span");
+    guideToggleLabelEl.textContent = "Show layout guide + notes";
+    guideToggleEl.append(guideToggleInputEl, guideToggleLabelEl);
+    tarotFrameLayoutPanelEl.appendChild(guideToggleEl);
+
     const builtInHeadingEl = document.createElement("div");
     builtInHeadingEl.className = "tarot-frame-layout-section-title";
     builtInHeadingEl.textContent = "Built-in Layouts";
@@ -2874,6 +2898,7 @@
     tarotFrameBoardEl.replaceChildren();
 
     tarotFrameOverviewEl.appendChild(createOverview(layoutPreset, cards));
+    applyLayoutGuideUi();
 
     const panelEl = document.createElement("section");
     panelEl.className = "tarot-frame-panel tarot-frame-panel--master";
@@ -3965,6 +3990,17 @@
     }
 
     if (tarotFrameLayoutPanelEl) {
+      tarotFrameLayoutPanelEl.addEventListener("change", (event) => {
+        event.stopPropagation();
+        const target = event.target;
+        if (!(target instanceof HTMLInputElement) || target.dataset.layoutGuideVisible !== "true") {
+          return;
+        }
+
+        state.layoutGuideVisible = Boolean(target.checked);
+        applyLayoutGuideUi();
+      });
+
       tarotFrameLayoutPanelEl.addEventListener("click", (event) => {
         event.stopPropagation();
         const target = event.target;