Wall-segment 'tokens' retire; the gallery shows edges as the maze draws them

The game has never used token art for edge effects — created walls,
doors and their lock states, fire walls, illusions are all vector edge
treatments. The ten unreferenced file pairs (wall, wall-2, door,
fire-wall, illusion-wall, destroy-wall, jam-lock, lock-gone,
redirection-a/b) are gone from both art sets, and the Token Workshop
gains 'Walls & doors — as the maze draws them': every edge state
(locked, ajar, held, removed, jammed), the standing fire, and both
faces of an illusion, rendered by the same EdgeGlyph / FirewallEdge /
IllusionShimmer components the board mounts. EdgeGlyph is newly
extracted from Board so the display cannot drift.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0138A8CjeQRpvzKxuMfz1Bqc

packages/web/src/Board.svelte

@@ -5,6 +5,7 @@
   import type { BoardFx } from "./fx";
   import { colorIndexOf as sharedColorIndex, wizardColor } from "./colors";
   import { CREATURE_ART, objectArt, TERRAIN_ART, tokenArt } from "./art";
+  import EdgeGlyph from "./EdgeGlyph.svelte";
   import FirewallEdge from "./FirewallEdge.svelte";
   import IllusionShimmer from "./IllusionShimmer.svelte";
   import SightTraceOverlay from "./SightTraceOverlay.svelte";
@@ -388,24 +389,14 @@
     {#if e.state === "firewall"}
       <FirewallEdge x={e.x} y={e.y} kind={e.kind === "V" ? "V" : "H"} />
     {:else}
-      {@const cls = e.state === "door" ? `door${e.lock ? ` ${e.lock}` : ""}` : "wall"}
       {@const lockTitle = e.lock === "removed" ? "lock removed — swings free"
         : e.lock === "jammed" ? "lock jammed — sealed for good"
         : e.lock === "held" ? "held open by a standing wizard"
         : e.lock === "ajar" ? "unlocked until end of turn" : null}
-      {#if e.kind === "V"}
-        <rect
-          x={(e.x + 1) * CELL - WALL / 2} y={e.y * CELL - WALL / 2}
-          width={WALL} height={CELL + WALL}
-          class={cls}
-        >{#if lockTitle}<title>{lockTitle}</title>{/if}</rect>
-      {:else}
-        <rect
-          x={e.x * CELL - WALL / 2} y={(e.y + 1) * CELL - WALL / 2}
-          width={CELL + WALL} height={WALL}
-          class={cls}
-        >{#if lockTitle}<title>{lockTitle}</title>{/if}</rect>
-      {/if}
+      <EdgeGlyph x={e.x} y={e.y} kind={e.kind === "V" ? "V" : "H"}
+        state={e.state === "door" ? "door" : "wall"}
+        lock={(e.lock ?? null) as "removed" | "jammed" | "held" | "ajar" | null}
+        title={lockTitle} />
     {/if}
   {/each}
 
@@ -675,25 +666,6 @@
     cursor: pointer;
   }
   .floor:hover { fill: #efe8d2; }
-  .wall {
-    fill: #f2ecd8;
-    stroke: #2b2218;
-    stroke-width: 1.6;
-  }
-  .door {
-    fill: #8b5a2b;
-    stroke: #2b2218;
-    stroke-width: 1.4;
-    rx: 2;
-  }
-  /* Lock removed: pale, an open doorway forever. */
-  .door.removed { fill: #d4bd8e; }
-  /* Lock jammed: near-black, sealed. */
-  .door.jammed { fill: #3a2a18; stroke: #14100b; }
-  /* Picked or keyed open until end of turn. */
-  .door.ajar { fill: #d4bd8e; stroke-dasharray: 5 3; }
-  /* Held open: a wizard stands propping it. */
-  .door.held { fill: #d4bd8e; stroke: #2e7d32; }
   .stone { fill: #6a6458; stroke: #3a362e; stroke-width: 2; }
   .bush { fill: #2e7d32; stroke: #1b4d1e; stroke-width: 2; }
   .rose { fill: #2e7d32; stroke: #b0245a; stroke-width: 3; }