The art workshop's side door

The hand-drawn SVG token set wires in behind deliberately
undocumented query params — svgPlayers, svgCreatures, svgTerrain,
svgObjects, each =true — swapping that category's art everywhere it
draws: board tokens, lobby standees, roster. public/tokens-svg
symlinks research/tokens-svg, so under the dev server an edit to the
source art shows on the next refresh, and the production build copies
real files through the link. Nobody finds the door unless handed the
key; the photographed set remains the face of the game.

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

packages/web/src/App.svelte

@@ -8,6 +8,7 @@
   import Replay from "./Replay.svelte";
   import FxGallery from "./FxGallery.svelte";
   import { fxForEvents, fxTtl, type BoardFx } from "./fx";
+  import { tokenArt } from "./art";
   import { local } from "./local.svelte";
   import { allCardDefs, cardDef, isNumberCard, SIDES, stepTarget, cellKey, isMovableObject, sightedCellsFor, type GameView, eligibleCellsFor } from "@wizwar/engine";
   import type { CardInstance, Side } from "@wizwar/engine";
@@ -1076,7 +1077,7 @@
               onclick={() => (setupColor = c)}
               aria-label={`wizard color ${c + 1}${taken ? " (taken)" : ""}`}
             >
-              <img src={`/tokens/wizard-${c}.png`} alt="" />
+              <img src={tokenArt(`wizard-${c}`, "players")} alt="" />
             </button>
           {/each}
         </div>
@@ -1211,7 +1212,7 @@
             {@const chosen = net.roomColors[p]}
             <li>
               {#if chosen !== undefined}
-                <img class="roster-standee" src={`/tokens/wizard-${chosen}.png`} alt="" />
+                <img class="roster-standee" src={tokenArt(`wizard-${chosen}`, "players")} alt="" />
               {:else}
                 <span class="dot" style:background="#b3a687"></span>
               {/if}
@@ -1231,7 +1232,7 @@
               onclick={() => net.pickColor(c)}
               aria-label={`wizard color ${c + 1}${takenBy && takenBy !== net.you ? ` (taken by ${takenBy})` : ""}`}
             >
-              <img src={`/tokens/wizard-${c}.png`} alt="" />
+              <img src={tokenArt(`wizard-${c}`, "players")} alt="" />
             </button>
           {/each}
         </div>