chore(elements): <TileRow /> element (#78)

<TileRow /> element 

Closes #66

  Introduces <TileRow />, a unified element for the "compact row of text-label tiles" pattern
  that was duplicated across three character-creation screens.

  Before: HitDieOptions (step-class), ability badges (step-origin), and OriginBonusPicker's
  button grid each had their own ad-hoc markup and per-file CSS — all rendering the same visual
  primitive.

  After: a single element with two modes:
  - Read-only — role="list" + <span role="listitem"> per tile
  - Interactive — <button> per tile with aria-label, aria-pressed, aria-disabled; supports
  right-click via onUnpick

  ScorePicker is also refactored to delegate to TileRow, keeping only its toggle logic. ~220
  lines of duplicated CSS removed.

  Sprite palette work

  - Normalize all sprites to 8 colors with a shared outline and main.palette.json
  - Unify skin/leather tones and outline color across all characters
  - Reduce barbarian, druid color counts; collapse druid near-duplicates
  - Add processed barbarian sprite
  - New sprite:candidates script
  - Add sorcerer sprite

Author: manuartero

.claude/skills/reduce-global-palette/skill.md

@@ -0,0 +1,62 @@
+---
+name: reduce-global-palette
+description: Iteratively reduce the global cross-sprite palette one color at a time. Use when the user wants to unify colors across character sprites or shrink the main palette.
+version: 1.1.0
+---
+
+# Reduce Global Palette
+
+## When to use this skill
+When the user wants to shrink the total number of unique colors across all sprites.
+Always process **one color at a time** — find one candidate, apply one merge, verify, done.
+
+Invoke with: `/reduce-global-palette`
+
+---
+
+## Phase 1 — Find one color to remove
+
+```
+pnpm sprite:candidates
+```
+
+This prints a ranked table of cross-sprite color pairs sorted by RGB distance (smallest = safest):
+
+```
+dist  replace in    from-hex      →  keep in       into-hex
+9     fighter       #BEC1C8       →  rogue         #B9BBC3
+18    barbarian     #EA9364       →  sorcerer      #EA826A
+...
+```
+
+**Pick the top row** (lowest distance). That is your target.
+- Distance < 30: safe to apply directly.
+- Distance 30–50: apply and do a visual check before confirming.
+
+---
+
+## Phase 2 — Remove one color
+
+With the chosen row (`replace-in` sprite, `FROM` hex, `INTO` hex):
+
+**Step 1 — Apply the merge**
+```
+pnpm sprite:merge-colors --input public/assets/sprites/<replace-in>.png --merge FROM:INTO
+```
+
+**Step 2 — Upscale and display**
+```
+pnpm sprite:upscale --input public/assets/sprites/<replace-in>.png --scale 4
+```
+Read and display `<name>_4x.png`. Confirm no visible change.
+
+**Step 3 — Rebuild main palette**
+```
+pnpm sprite:build-palette
+```
+Report the new total unique color count from `main.palette.json`.
+
+---
+
+## Done for this round
+One color removed. Stop here and wait for the user to confirm before continuing.

.claude/skills/sprite-pipeline/SKILL.md

@@ -51,15 +51,13 @@ Show the final palette table with color roles (outline, skin, leather, cloak, et
 
 ### Step 5 — Upscale
 ```
-pnpm sprite:upscale --input <file> --scale 2
+pnpm sprite:upscale --input <file> --scale 4
 ```
-Use `--scale 2` (not 4) — AI-generated sprites arrive pre-upscaled and are already larger than the original 32×32 base. Using 4x would produce an oversized image.
-
-After upscaling, read and display the `<name>_2x.png` result image for visual confirmation.
+After upscaling, read and display the `<name>_4x.png` result image for visual confirmation.
 
 ## Output
 - `<name>.png` — processed sprite (transparent background, 10 colors)
-- `<name>_2x.png` — upscaled version (the suffix follows `_<scale>x`, e.g. `_2x` for `--scale 2`)
+- `<name>_4x.png` — upscaled version (the suffix follows `_<scale>x`, e.g. `_4x` for `--scale 4`)
 - `<name>-palette.json` — final palette
 
 ## Notes

package.json

@@ -45,6 +45,8 @@
     "sprite:merge-colors": "node scripts/reduce-palette.mjs",
     "sprite:remove-background": "node scripts/remove-background.mjs",
     "sprite:flip": "node scripts/flip-sprite.mjs",
+    "sprite:build-palette": "node scripts/build-main-palette.mjs",
+    "sprite:candidates": "node scripts/sprite-merge-candidates.mjs",
     "blue-ball": "pnpm lint && pnpm test && pnpm build",
     "postblue-ball": "pnpm test:coverage && ./.hooks/update-coverage-badge.sh"
   },

prompts/sprites/class-avatar.prompt.md

@@ -5,7 +5,7 @@
 ## Template
 
 ```
-A tiny {CLASS} character sprite in Game Boy pixel art style, 4 colors only using classic Game Boy
+A {CLASS} character sprite in Game Boy pixel art style, 4 colors only using classic Game Boy
 {CLASS} palette ({PALETTE}), 32x32 pixels, front-facing idle pose, {CLOTHING}, {WEAPON},
 {COMPANION}, chunky pixelated outlines, no background, transparent background, retro RPG handheld
 game aesthetic, 1990s portable game sprite "no anti-aliasing, hard pixel edges, low resolution
@@ -48,4 +48,11 @@ Palette order: **darkest → dark → light → lightest**
 - Rogue (2026-03-29): v2 accepted (v1 rejected — lacking leather/color, too grey).
   > A tiny tall Tiefling Rogue character sprite in Game Boy pixel art style, 32x32 pixels, front-facing idle pose, 6-color palette: dark near-black outline (#030305), deep dark blue-grey (#181820), mid blue-grey (#404058), light silver-grey (#9090a8) for the cloak and armor, warm reddish-purple (#7a2040) for tiefling skin on face and hands, warm brown (#6b3a1a) for leather chest piece and bracers, dark hooded cloak pushed back revealing small curved horns, tight leather armor with visible belt and buckle details, slender tall frame, dagger in raised hand, second dagger at belt, a tiny rat on shoulder, thin devil tail curling from cloak hem, chunky pixelated outlines, no background, transparent background, retro RPG handheld game aesthetic, 1990s portable game sprite "no anti-aliasing, hard pixel edges, low resolution dithering", character facing right (3/4 right-facing view)
 
-- Wizard (2026-03-29): prompt note — must specify character facing right (3/4 right-facing view).
+- Wizard (2026-03-29): v1 accepted. Prompt note: must specify character facing right.
+  > A tiny wizard character sprite in Game Boy pixel art style, 4 colors only using classic Game Boy wizard palette (#020810 #0c2060 #3070d0 #c0d8ff), 32x32 pixels, front-facing idle pose, long robes with star pattern trim, pointed hat, tall staff with gem on top, spellbook at side, small cat familiar or floating scroll, chunky pixelated outlines, no background, transparent background, retro RPG handheld game aesthetic, 1990s portable game sprite "no anti-aliasing, hard pixel edges, low resolution dithering", character facing right (3/4 right-facing view)
+
+- Sorcerer (2026-03-30): v1 good result, not exquisite — saved as baseline.
+  > A tiny female Aasimar Sorcerer character sprite in Game Boy pixel art style, 32x32 pixels, front-facing idle pose, 6-color palette: dark near-black outline (#080010), deep dark purple (#380868), mid purple (#9040d0), soft pink-white (#f8d0ff) for robe highlights and wing feather tips, warm light skin (#e8c490) for face and hands, bright near-white (#f4f0e8) for large feathered aasimar wings spread slightly behind her, flowing robe with arcane rune trim, arcane orb held forward no staff, large feathered wings fanned slightly behind back — NO halo, small magical purple flames flickering around her body as an arcane aura — at her feet, along her arms, framing the wings — NO animal companion, chunky pixelated outlines, no background, transparent background, retro RPG handheld game aesthetic, 1990s portable game sprite "no anti-aliasing, hard pixel edges, low resolution dithering", character facing right (3/4 right-facing view)
+
+- Sorcerer (2026-03-30): v2 accepted — red tones, aasimar wings, no halo, no animal companion.
+  > A female Aasimar Sorcerer character sprite in Game Boy pixel art style, 32x32 pixels, front-facing idle pose, 6-color palette: dark near-black outline (#080010), deep crimson-dark (#3a0010), vivid red (#c02030) for flames and clothing details, warm rose-gold (#f8a080) for robe highlights and flame tips, warm light skin (#e8c490) for face and hands, bright near-white (#f4f0e8) for large feathered aasimar wings spread slightly behind her, gorgeous elegant flowing crimson sorcerer robes with ornate gold-red trim and arcane runes, low neckline, dramatic silhouette, arcane orb held forward no staff, large feathered wings fanned slightly behind back — NO halo, vivid red magical flames flickering around her body as an arcane aura — at her feet, along her arms, framing the wings — NO animal companion, chunky pixelated outlines, no background, transparent background, retro RPG handheld game aesthetic, 1990s portable game sprite "no anti-aliasing, hard pixel edges, low resolution dithering", character facing right (3/4 right-facing view)

public/assets/sprites/barbarian-palette.json

@@ -0,0 +1,34 @@
+[
+  {
+    "hex": "#030307",
+    "pixels": 1256
+  },
+  {
+    "hex": "#832B10",
+    "pixels": 787
+  },
+  {
+    "hex": "#EA9364",
+    "pixels": 510
+  },
+  {
+    "hex": "#B64826",
+    "pixels": 390
+  },
+  {
+    "hex": "#3B1F17",
+    "pixels": 348
+  },
+  {
+    "hex": "#EFB88B",
+    "pixels": 288
+  },
+  {
+    "hex": "#BA724D",
+    "pixels": 284
+  },
+  {
+    "hex": "#FFFFFE",
+    "pixels": 16
+  }
+]

public/assets/sprites/barbarian.png

@@ -1,26 +1,22 @@
 [
+  {
+    "hex": "#030307",
+    "pixels": 624
+  },
   {
     "hex": "#8BAC0F",
-    "pixels": 489
+    "pixels": 494
   },
   {
     "hex": "#38692C",
     "pixels": 487
   },
-  {
-    "hex": "#092907",
-    "pixels": 460
-  },
   {
     "hex": "#21491F",
     "pixels": 279
   },
   {
-    "hex": "#062205",
-    "pixels": 162
-  },
-  {
-    "hex": "#433B15",
+    "hex": "#3B1F17",
     "pixels": 72
   },
   {
@@ -36,15 +32,7 @@
     "pixels": 41
   },
   {
-    "hex": "#CDFDB0",
+    "hex": "#FFFFFE",
     "pixels": 12
-  },
-  {
-    "hex": "#86A91D",
-    "pixels": 4
-  },
-  {
-    "hex": "#85AA3A",
-    "pixels": 1
   }
 ]