Every flourish gets its own file, and a workshop to watch them in

The effects move out of Board.svelte into src/fx-sprites/ — one
component per flourish, markup and animation CSS together, so editing
the fireball means opening Fireball.svelte and nothing else. A
registry (index.ts) maps kind to sprite; Board renders through it.
The event mapping stays in fx.ts.

And a viewer: /?fx opens the Flourish Workshop — every sprite on a
labeled parchment tile, replaying on a 2.2-second beat. Under the dev
server, editing any sprite file hot-reloads the gallery mid-loop.

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

packages/web/src/fx-sprites/Fireworks.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { FxOf } from "../fx";
+  import { center } from "./geom";
+  let { fx }: { fx: FxOf<"fireworks"> } = $props();
+  const c = $derived(center(fx.at));
+  const COLORS = ["#e74c3c", "#f1c40f", "#3b8dd6", "#7ac47e"];
+</script>
+
+<g class="fireworks" style={`transform-origin: ${c.x}px ${c.y}px`}>
+  {#each [0, 45, 90, 135, 180, 225, 270, 315] as deg (deg)}
+    <circle
+      cx={c.x + 18 * Math.cos((deg * Math.PI) / 180)}
+      cy={c.y + 18 * Math.sin((deg * Math.PI) / 180)}
+      r="3" fill={COLORS[(deg / 45) % 4]}
+    />
+  {/each}
+</g>
+
+<style>
+  .fireworks { animation: boom 1.1s ease-out forwards; }
+  @keyframes boom {
+    0% { opacity: 0; transform: scale(0.1); }
+    25% { opacity: 1; }
+    100% { opacity: 0; transform: scale(2.4) rotate(30deg); }
+  }
+</style>