Doors show the state of their locks

A lock removed, a lock jammed, and a door picked open for the turn
all looked exactly like a locked door. Now the door itself tells:
pale wood for a lock gone for good, near-black for one jammed shut,
pale with a dashed jamb for a door standing open until end of turn —
each with a hover title saying so in words.

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

packages/web/src/Board.svelte

@@ -126,7 +126,12 @@
       .map(([key, state]) => {
         const [kind, coords] = key.split(":") as [string, string];
         const [x, y] = coords.split(",").map(Number) as [number, number];
-        return { kind, x, y, state };
+        // A door's lock can be gone for good, jammed shut, or picked open
+        // for the turn — each earns its own look.
+        const lock = state === "door"
+          ? (view.doorStates[key] ?? (view.openDoorEdges.includes(key) ? "ajar" : null))
+          : null;
+        return { kind, x, y, state, lock };
       }),
   );
 
@@ -335,19 +340,22 @@
 
   <!-- walls & doors & firewalls -->
   {#each edges as e (`${e.kind}:${e.x},${e.y}`)}
-    {@const cls = e.state === "door" ? "door" : e.state === "firewall" ? "firewall" : "wall"}
+    {@const cls = e.state === "door" ? `door${e.lock ? ` ${e.lock}` : ""}` : e.state === "firewall" ? "firewall" : "wall"}
+    {@const lockTitle = e.lock === "removed" ? "lock removed — swings free"
+      : e.lock === "jammed" ? "lock jammed — sealed for good"
+      : 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}
   {/each}
 
@@ -577,6 +585,12 @@
     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; }
   .firewall {
     fill: #d0342c;
     stroke: #7c1a14;