Pick your standee: hotseat wizards choose their color while naming

The naming round now shows the six real wizard standees; each player
taps theirs before typing their name, claimed standees gray out, and
the next player defaults to the first free one. The choice travels as
an optional colors array in the engine config, the view exposes each
player's colorIndex, and the board, score sheet, treasure chests, and
wizard art all follow the chosen color instead of seat order —
persisting through hotseat saves. Verified: Alice claimed the yellow
standee and marched onto the board as the yellow wizard with yellow
treasure chests. (Online rooms still assign by seat order; a lobby
color picker can reuse the same config field later.)

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

packages/web/src/Board.svelte

@@ -49,17 +49,18 @@
     return null;
   }
   function wizardArt(id: string): string {
-    const idx = view.players.findIndex((p) => p.id === id);
-    return `/tokens/wizard-${((idx % 6) + 6) % 6}.png`;
+    return `/tokens/wizard-${colorIndexOf(id) % 6}.png`;
   }
   function treasureArt(owner: string): string {
-    const idx = view.players.findIndex((p) => p.id === owner);
-    return `/tokens/treasure-${((idx % 6) + 6) % 6}.png`;
+    return `/tokens/treasure-${colorIndexOf(owner) % 6}.png`;
   }
 
+  function colorIndexOf(id: string): number {
+    const p = view.players.find((p) => p.id === id);
+    return p?.colorIndex ?? Math.max(0, view.players.findIndex((q) => q.id === id));
+  }
   function playerColor(id: string): string {
-    const idx = view.players.findIndex((p) => p.id === id);
-    return PLAYER_COLORS[idx % PLAYER_COLORS.length]!;
+    return PLAYER_COLORS[colorIndexOf(id) % PLAYER_COLORS.length]!;
   }
 
   const cells = $derived(