The art refresh: textures, tokens, conjurations, and cel flourishes

Eric repainted the maze. The first-person materials are painterly
sandstone, flagstone, and iron; the hand-drawn token set is redrawn
with matching chests and hats; the standing conjurations — hedges,
jello, dust, safe, warp light — and the effect billboards are redone
in the same hand; and the board's flourishes trade their filters and
gradients for flat cel silhouettes cut from five shared shapes, which
read better against the counters and cost a phone nothing. Thirty
scene goldens re-blessed against the new walls.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG

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

@@ -1,29 +1,20 @@
 <script lang="ts">
   import type { FxOf } from "../fx";
-  import { center } from "./geom";
+  import { center, impact, drop } from "./geom";
 
   let { fx }: { fx: FxOf<"burst"> } = $props();
-  const uid = $props.id();
   const c = $derived(center(fx.at));
   const EMBERS = [15, 80, 145, 210, 275, 340];
 </script>
 
-<defs>
-  <radialGradient id={`burst-fire-${uid}`}>
-    <stop offset="0" stop-color="#fffde0" />
-    <stop offset="0.3" stop-color="#ffd34e" />
-    <stop offset="0.65" stop-color="#ff8c1a" stop-opacity="0.85" />
-    <stop offset="1" stop-color="#ef3b08" stop-opacity="0" />
-  </radialGradient>
-</defs>
-
-<circle cx={c.x} cy={c.y} r="16" fill={`url(#burst-fire-${uid})`} class="bloom" />
-<circle cx={c.x} cy={c.y} r="6" class="shockwave" />
+<g class="bloom" style={`transform-origin: ${c.x}px ${c.y}px`}>
+  <path d={`M ${c.x-14} ${c.y+3} q -10 -12 1 -14 q -1 7 6 5 q -7 -16 4 -16 q -2 8 5 9 q 6 -11 12 -3 q -8 1 -3 7 q 14 -3 12 7 q -7 -5 -10 2 q 8 10 -2 13 q 0 -8 -6 -7 q -7 10 -13 3 q 6 -1 3 -6 q -11 7 -13 0 Z`} fill="#d55224" stroke="#833521" stroke-width="0.6" />
+  <path d={impact(c.x,c.y,15)} fill="#ffb83f" />
+  <path d={impact(c.x,c.y,7)} fill="#fff0b8" />
+</g>
+<path d={`M ${c.x-6} ${c.y-1} q 2 -6 7 -4 M ${c.x+5} ${c.y+1} q -2 5 -6 4`} class="shockwave" />
 {#each EMBERS as deg (deg)}
-  <circle
-    cx={c.x + 13 * Math.cos((deg * Math.PI) / 180)}
-    cy={c.y + 13 * Math.sin((deg * Math.PI) / 180)}
-    r={deg % 2 === 0 ? 2 : 1.5}
+  <path d={drop(c.x + 13 * Math.cos((deg * Math.PI) / 180), c.y + 13 * Math.sin((deg * Math.PI) / 180), deg % 2 === 0 ? 2 : 1.5)}
     class="ember"
     style={`transform-origin: ${c.x}px ${c.y}px`}
   />
@@ -31,8 +22,6 @@
 
 <style>
   .bloom {
-    transform-box: fill-box;
-    transform-origin: center;
     animation: bloom 0.5s ease-out forwards;
   }
   .shockwave {