From 30aa1e778df465978c68ab1cd939a87ea9573dbe Mon Sep 17 00:00:00 2001
From: Eric Wagoner <ewagoner@gmail.com>
Date: Sun, 16 Aug 2026 01:06:18 -0400
Subject: [PATCH] Tap-to-inspect: selecting a card floats an enlarged, readable
 copy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Selecting any card in hand now also shows a 1.55x (1.3x on phones)
enlarged rendering floating at the corner — full card text readable
without pinch-zooming — with a dismiss button, auto-reset when the
selection changes, and the board left clear for choosing a target.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 packages/web/src/App.svelte | 52 +++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/packages/web/src/App.svelte b/packages/web/src/App.svelte
index 70c4f4e..38b1718 100644
--- a/packages/web/src/App.svelte
+++ b/packages/web/src/App.svelte
@@ -15,6 +15,12 @@
   let claimPhrase = $state("");
   let showHelp = $state(false);
   let hotseatNames = $state("");
+  /** Tap-to-inspect: hide the enlarged card for the current selection. */
+  let inspectorHidden = $state(false);
+  $effect(() => {
+    void selectedCard?.instanceId;
+    inspectorHidden = false;
+  });
   let drawCount = $state(2);
   let withExpansion = $state(true);
   /** Your creature selected for movement/attacks. */
@@ -772,6 +778,15 @@
         {/if}
       </div>
 
+      {#if selectedCard && !inspectorHidden}
+        <div class="inspector" role="img" aria-label="selected card, enlarged">
+          <button class="inspector-close" onclick={() => (inspectorHidden = true)} aria-label="hide enlarged card">×</button>
+          <div class="inspector-card">
+            <Card card={selectedCard} />
+          </div>
+        </div>
+      {/if}
+
       <div class="hand" aria-label="your hand">
         {#each view.yourHand as card (card.instanceId)}
           <Card
@@ -1197,6 +1212,43 @@
   .actions { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; min-height: 2rem; }
   .draw-pick { color: #a49c86; font-size: 0.9rem; }
 
+  .inspector {
+    position: fixed;
+    right: 0.9rem;
+    bottom: 0.9rem;
+    z-index: 35;
+  }
+  .inspector-card {
+    transform: scale(1.55);
+    transform-origin: bottom right;
+    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.65));
+  }
+  .inspector-card :global(.card) {
+    cursor: default;
+  }
+  .inspector-card :global(.card:hover) {
+    transform: none;
+  }
+  .inspector-close {
+    position: absolute;
+    top: -2.05rem;
+    right: -0.4rem;
+    z-index: 2;
+    background: #2b2218;
+    color: #e9e1cb;
+    border: 1px solid #6b5a41;
+    border-radius: 50%;
+    width: 1.7rem;
+    height: 1.7rem;
+    font-size: 1rem;
+    line-height: 1;
+    cursor: pointer;
+  }
+  @media (max-width: 900px) {
+    .inspector { right: 0.5rem; bottom: 0.5rem; }
+    .inspector-card { transform: scale(1.3); }
+  }
+
   .hand {
     display: flex;
     gap: 0.45rem;