The first square of a two-square spell now shows on the board

Dimensional Warp, Trader, Redirection, and Relocate Sector all take
two clicks, but only the hint bar acknowledged the first — the board
itself sat unchanged until the second click landed. The first chosen
square now wears a pulsing amber dashed ring (same rhythm as the warp
destination ring, still under prefers-reduced-motion) until the spell
completes or is cancelled.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

packages/web/src/App.svelte

@@ -760,6 +760,7 @@
           onPlayerClick={clickPlayer}
           onCreatureClick={clickCreature}
           onWarpClick={clickWarp}
+          markedCell={tradeFrom ?? pendingSectorFrom}
         />
       </section>
 

packages/web/src/Board.svelte

@@ -14,6 +14,7 @@
     onPlayerClick,
     onCreatureClick,
     onWarpClick,
+    markedCell = null,
   }: {
     view: GameView;
     edgeSelectMode?: boolean;
@@ -23,6 +24,8 @@
     onPlayerClick?: (playerId: string) => void;
     onCreatureClick?: (creatureId: string) => void;
     onWarpClick?: (cell: { x: number; y: number }, side: Side) => void;
+    /** First square of a two-square spell: marked so the click reads as taken. */
+    markedCell?: { x: number; y: number } | null;
   } = $props();
 
   const PLAYER_COLORS = ["#1a9c46", "#d3352b", "#c9308f", "#3a3ac0", "#2ab0c9", "#c9a72a"];
@@ -326,6 +329,15 @@
     {/if}
   {/each}
 
+  <!-- first square of a two-square spell -->
+  {#if markedCell}
+    <rect
+      x={markedCell.x * CELL + 3} y={markedCell.y * CELL + 3}
+      width={CELL - 6} height={CELL - 6}
+      rx="6" class="marked-cell"
+    />
+  {/if}
+
   <!-- wizards -->
   {#each [...wizardsByCell.entries()] as [key, group] (key)}
     {#each group as p, i (p.id)}
@@ -507,6 +519,14 @@
     fill: #6a5c44;
     pointer-events: none;
   }
+  .marked-cell {
+    fill: rgba(211, 133, 43, 0.18);
+    stroke: #d3852b;
+    stroke-width: 2.5;
+    stroke-dasharray: 7 4;
+    pointer-events: none;
+    animation: warp-pulse 1.6s ease-in-out infinite;
+  }
   .warp-dest {
     fill: none;
     stroke: #2e7d32;
@@ -520,6 +540,14 @@
     50% { opacity: 0.35; }
   }
   @media (prefers-reduced-motion: reduce) {
+    .marked-cell {
+    fill: rgba(211, 133, 43, 0.18);
+    stroke: #d3852b;
+    stroke-width: 2.5;
+    stroke-dasharray: 7 4;
+    pointer-events: none;
+    animation: warp-pulse 1.6s ease-in-out infinite;
+  }
   .warp-dest { animation: none; }
   }
   .wizard { cursor: pointer; }