From beaae4a0a4f51c122584e4f8f6e86afa03753668 Mon Sep 17 00:00:00 2001
From: Eric Wagoner <ewagoner@gmail.com>
Date: Sun, 30 Aug 2026 15:55:21 -0400
Subject: [PATCH] The selected-card preview zooms to the full reading modal on
 a click
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Selecting a hand card must not throw a modal over the board — the aim
comes next — so the corner preview becomes the doorway: click it and
the card opens at tile-peek size, close it and the selection stands.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015RCWSTnb1KYTPyL4GmhGnF
---
 packages/web/src/App.svelte | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/App.svelte b/packages/web/src/App.svelte
index 6d9f051..be91f5b 100644
--- a/packages/web/src/App.svelte
+++ b/packages/web/src/App.svelte
@@ -2630,11 +2630,12 @@
       </div>
 
       {#if selectedCard && !inspectorHidden}
-        <div class="inspector" role="img" aria-label="selected card, enlarged">
+        <div class="inspector">
           <button class="inspector-close" onclick={() => (inspectorHidden = true)} aria-label="hide enlarged card">×</button>
-          <div class="inspector-card">
+          <button class="inspector-card" title="read it full size"
+            onclick={() => (peekCard = selectedCard)}>
             <Card card={selectedCard} onfaq={(id) => (faqCardId = id)} />
-          </div>
+          </button>
         </div>
       {/if}
 
@@ -3735,6 +3736,10 @@
     transform: scale(1.55);
     transform-origin: bottom right;
     filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.65));
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: zoom-in;
   }
   .inspector-card :global(.card) {
     cursor: default;