feat(splendor): integrate gem spritesheet for polished token and badge rendering

- Add `splendor-gems` spritesheet (6 frames, 64×64) for gem icons.
- Introduce `gemFrame` helper to map gem colors to spritesheet indices.
- Update gem rendering in player bars, card badges, and cost pips to use sprites when available.
- Add `hasGems` flag to gracefully fallback to vector circles when art is missing.
- Register new asset in PreloadScene.

public/src/games/splendor/SplendorData.js

@@ -141,3 +141,5 @@ export const NOBLES = NOBLE_REQS.map((requires, i) => ({
 export function cardFrame(card) { return (card.tier - 1) * 5 + GEMS.indexOf(card.bonus); }
 export function nobleFrame(noble) { return 15 + noble.frame; }
 export function deckBackFrame(tier) { return 25 + (tier - 1); }
+// Gem spritesheet (splendor-gems): white(0) blue(1) green(2) red(3) black(4) gold(5)
+export function gemFrame(color) { return color === GOLD ? 5 : GEMS.indexOf(color); }

public/src/games/splendor/SplendorGame.js

@@ -6,7 +6,7 @@ import { api } from '../../services/api.js';
 import { playSound, SFX } from '../../ui/Sounds.js';
 import { MusicPlayer } from '../../ui/MusicPlayer.js';
 import {
-  GEMS, GOLD, GEM_HEX, GEM_EDGE, GEM_NAME, cardFrame, nobleFrame, deckBackFrame,
+  GEMS, GOLD, GEM_HEX, GEM_EDGE, GEM_NAME, cardFrame, nobleFrame, deckBackFrame, gemFrame,
   WIN_POINTS, MAX_RESERVED, TAKE_SAME_MIN,
 } from './SplendorData.js';
 import {
@@ -52,7 +52,8 @@ export default class SplendorGame extends Phaser.Scene {
 
   create() {
     try { new MusicPlayer(this, this.cache.json.get('music')?.tracks ?? []); } catch { /* optional */ }
-    this.hasArt = this.textures.exists('splendor-cards');
+    this.hasArt  = this.textures.exists('splendor-cards');
+    this.hasGems = this.textures.exists('splendor-gems');
     this.buildBackground();
 
     const playerCount = Math.max(2, Math.min(4, 1 + this.opponents.length));
@@ -147,6 +148,10 @@ export default class SplendorGame extends Phaser.Scene {
     const bg = rp(this.add.graphics().setDepth(DEPTH.popup + 1));
     bg.fillStyle(GEM_HEX[card.bonus], 1).fillCircle(px + pw - 40, py + 36, 26);
     bg.lineStyle(3, GEM_EDGE[card.bonus], 1).strokeCircle(px + pw - 40, py + 36, 26);
+    if (this.hasGems) {
+      rp(this.add.image(px + pw - 40, py + 36, 'splendor-gems', gemFrame(card.bonus))
+        .setDisplaySize(40, 40).setDepth(DEPTH.popup + 2));
+    }
 
     // Cost pips bottom-left stacked
     const costs = GEMS.filter((c) => (card.cost[c] ?? 0) > 0);
@@ -269,6 +274,10 @@ export default class SplendorGame extends Phaser.Scene {
     const bg = this.reg(this.add.graphics().setDepth(DEPTH.card + 2));
     bg.fillStyle(GEM_HEX[card.bonus], 1).fillCircle(x + CW - 22, y + 15, 12);
     bg.lineStyle(2, GEM_EDGE[card.bonus], 1).strokeCircle(x + CW - 22, y + 15, 12);
+    if (this.hasGems) {
+      this.reg(this.add.image(x + CW - 22, y + 15, 'splendor-gems', gemFrame(card.bonus))
+        .setDisplaySize(18, 18).setDepth(DEPTH.card + 3));
+    }
     // cost pips, bottom-left stacked
     const costs = GEMS.filter((c) => (card.cost[c] ?? 0) > 0);
     costs.forEach((c, i) => {
@@ -305,6 +314,10 @@ export default class SplendorGame extends Phaser.Scene {
       const g = this.reg(this.add.graphics().setDepth(DEPTH.card));
       g.fillStyle(GEM_HEX[color], n > 0 ? 1 : 0.25).fillCircle(cx, cy, TOKEN_R);
       g.lineStyle(3, GEM_EDGE[color], 1).strokeCircle(cx, cy, TOKEN_R);
+      if (this.hasGems) {
+        this.reg(this.add.image(cx, cy, 'splendor-gems', gemFrame(color))
+          .setDisplaySize(56, 56).setAlpha(n > 0 ? 0.9 : 0.35).setDepth(DEPTH.card + 1));
+      }
       this.reg(this.add.text(cx, cy, String(n), {
         fontFamily: 'Righteous', fontSize: '26px',
         color: color === 'white' || color === 'gold' ? '#222' : '#fff',

public/src/scenes/PreloadScene.js

@@ -101,6 +101,8 @@ export default class PreloadScene extends Phaser.Scene {
     // Splendor: 28 frames at 270×390. 0-14 = tier×bonus backgrounds, 15-24 = nobles, 25-27 = deck backs.
     // Frame order documented in SplendorData.js. Optional — vectors are drawn when absent.
     this.load.spritesheet('splendor-cards', '/assets/images/splendor-cards.png', { frameWidth: 270, frameHeight: 390 });
+    // Splendor gems: 6 frames at 64×64. white(0) blue(1) green(2) red(3) black(4) gold(5).
+    this.load.spritesheet('splendor-gems', '/assets/images/splendor-gems.png', { frameWidth: 64, frameHeight: 64 });
     this.load.spritesheet('ttr-cards', '/assets/images/tickettoride-cards.png', { frameWidth: 270, frameHeight: 390 });
     this.load.spritesheet('gofish-cards', '/assets/images/gofish-cards.png', { frameWidth: 270, frameHeight: 390 });
     this.load.spritesheet('oldmaid-cards', '/assets/images/oldmaid-cards.png', { frameWidth: 270, frameHeight: 390 });