Targeting dims out-of-reach squares; Speedstone pays out immediately

Selecting an L.O.S. card now drops every square you cannot see into
shadow, leaving eligible targets lit — computed by the engine's own
hasLineOfSight over the player's VIEW, so illusion walls you still
believe in block your aim, stone and bushes and the Big Man block
everyone's, and Around The Corner widens the light one bend when
attached. ADJACENT cards light just your square and its four
neighbors. The shade paints over tokens and wizards alike, and
switches off while arming an ambush, since ambushes aim at the
future. A new sightedCellsFor lives in the engine view module so the
client can never disagree with the rules.

Speedstone, meanwhile, only took effect at next turn's allowance
recompute — displaying it mid-turn granted nothing, as playtesting
found. It now bumps the current allowance by one on display (a delta,
so number-card movement already played survives), unless SLOW or a
zeroed allowance says otherwise. Test covers the immediate grant and
the persistence into later turns.

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

packages/web/src/Board.svelte

@@ -15,6 +15,7 @@
     onCreatureClick,
     onWarpClick,
     markedCell = null,
+    litCells = null,
   }: {
     view: GameView;
     edgeSelectMode?: boolean;
@@ -26,6 +27,8 @@
     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;
+    /** When set, squares NOT in this set dim — the targeting aid. */
+    litCells?: Set<string> | null;
   } = $props();
 
   const PLAYER_COLORS = ["#1a9c46", "#d3352b", "#c9308f", "#3a3ac0", "#2ab0c9", "#c9a72a"];
@@ -431,6 +434,16 @@
       onkeydown={() => {}}
     />
   {/each}
+  <!-- targeting aid: ineligible squares fall into shadow -->
+  {#if litCells}
+    {#each Object.keys(view.board.cells) as key (key)}
+      {#if !litCells.has(key)}
+        {@const dx = Number(key.split(",")[0])}
+        {@const dy = Number(key.split(",")[1])}
+        <rect x={dx * CELL} y={dy * CELL} width={CELL} height={CELL} class="dim-cell" />
+      {/if}
+    {/each}
+  {/if}
 </svg>
 
 <style>
@@ -519,6 +532,10 @@
     fill: #6a5c44;
     pointer-events: none;
   }
+  .dim-cell {
+    fill: rgba(12, 9, 5, 0.55);
+    pointer-events: none;
+  }
   .marked-cell {
     fill: rgba(211, 133, 43, 0.18);
     stroke: #d3852b;
@@ -540,7 +557,11 @@
     50% { opacity: 0.35; }
   }
   @media (prefers-reduced-motion: reduce) {
-    .marked-cell {
+    .dim-cell {
+    fill: rgba(12, 9, 5, 0.55);
+    pointer-events: none;
+  }
+  .marked-cell {
     fill: rgba(211, 133, 43, 0.18);
     stroke: #d3852b;
     stroke-width: 2.5;