Watch the whole game from the deal

The seed + command log has been the whole game all along; now it can
be watched. Finished games offer "⟲ Watch the whole game" beside the
face-up hands: the server replays every command from seq 0 through
the same redacted catch-up pipeline (the 200-step window remains a
live-game courtesy; full replays wait for the game to finish), and
the reel plays it titled "The whole tale, from the deal" with new
1×/2×/4× speed controls for the long tellings. Each viewer rewatches
from their own seat — hidden information stays hidden in the retelling
exactly as it was at the table.

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

packages/web/src/Replay.svelte

@@ -13,6 +13,7 @@
 
   let idx = $state(0);
   let playing = $state(true);
+  let speed = $state(1);
   const step = $derived(steps[Math.min(idx, steps.length - 1)]!);
   const lines = $derived(
     step.events.map(humanize).filter((l): l is string => l !== null),
@@ -24,7 +25,7 @@
     const t = setInterval(() => {
       if (idx < steps.length - 1) idx += 1;
       else playing = false;
-    }, 1500);
+    }, 1500 / speed);
     return () => clearInterval(t);
   });
 
@@ -41,7 +42,7 @@
 <div class="replay-scrim">
   <div class="replay" role="dialog" aria-modal="true" aria-label="what happened while you were away">
     <header class="replay-head">
-      <span class="replay-title">While you were away</span>
+      <span class="replay-title">{steps[0]?.seq === 0 ? "The whole tale, from the deal" : "While you were away"}</span>
       <span class="replay-count">move {idx + 1} of {steps.length}</span>
       <button class="replay-skip" onclick={onclose}>{atEnd ? "back to the game" : "skip to now"}</button>
     </header>
@@ -59,6 +60,9 @@
         {playing ? "❚❚" : "▶"}
       </button>
       <button onclick={() => { playing = false; idx = Math.min(steps.length - 1, idx + 1); }} aria-label="next move">▶</button>
+      {#each [1, 2, 4] as x (x)}
+        <button class="speed" class:current={speed === x} onclick={() => (speed = x)}>{x}×</button>
+      {/each}
     </div>
   </div>
 </div>
@@ -129,6 +133,11 @@
     line-height: 1.45;
     min-height: 3.4rem;
   }
+  .replay-controls .speed {
+    font-size: 0.75rem;
+    opacity: 0.7;
+  }
+  .replay-controls .speed.current { opacity: 1; text-decoration: underline; }
   .replay-controls {
     display: flex;
     justify-content: center;