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/App.svelte

@@ -6,6 +6,7 @@
   import Card from "./Card.svelte";
   import Help from "./Help.svelte";
   import Replay from "./Replay.svelte";
+  import FxGallery from "./FxGallery.svelte";
   import { fxForEvents, fxTtl, type BoardFx } from "./fx";
   import { local } from "./local.svelte";
   import { allCardDefs, cardDef, isNumberCard, SIDES, stepTarget, cellKey, isMovableObject, sightedCellsFor, type GameView, eligibleCellsFor } from "@wizwar/engine";
@@ -886,6 +887,9 @@
   }
 </script>
 
+{#if new URLSearchParams(location.search).has("fx")}
+  <FxGallery />
+{:else}
 <div class="table">
   <header class="masthead">
     <span class="mast-title">Wiz-War</span>
@@ -1663,6 +1667,7 @@
     </div>
   {/if}
 </div>
+{/if}
 
 <style>
   :global(html, body) {