feat: add custom backgrounds for Bejeweled and Peggle games

- Add background images for Bejeweled Blitz and Peggle menu screens
- Update asset manifest with new bg-bejeweled and bg-peggle-menu textures
- Bejeweled: use new background with fallback to existing bj-bg
- Peggle: replace title/subtitle text with custom background image
- Adjust Peggle progress text position to top-right corner

src/data/assetManifest.js

@@ -78,6 +78,7 @@ export const MANIFEST = {
   ],
   risk: [image('risk-board', 'assets/images/risk-board.png')],
   jewelquest: [image('bg-jewelquest-battle', 'assets/images/background-jewelquest.png')],
+  bejeweled: [image('bg-bejeweled', 'assets/images/background-bejeweledblitz.png')],
   dominion: [
     // Dominion card art. One 270×390 cell per card (art fills the top ~60%;
     // the title/icon band is drawn at runtime). Optional — the scene falls
@@ -158,6 +159,7 @@ export const MANIFEST = {
   },
   peggle: [
     sheet('peggle-sprites', 'assets/images/peggle-sprites.png', 64, 64),
+    image('bg-peggle-menu', 'assets/images/background-peggle.png'),
     // One board background per master, named by opponent id
     // (assets/images/peggle/<masterId>.png, 1200×900).
     (scene) => {

src/games/bejeweled/BejeweledGame.js

@@ -246,7 +246,8 @@ export default class BejeweledGame extends Phaser.Scene {
   // ── Cosmic backdrop ───────────────────────────────────────────────────────
 
   buildBackground() {
-    this.add.image(0, 0, 'bj-bg').setOrigin(0).setDisplaySize(GAME_WIDTH, GAME_HEIGHT).setDepth(D.bg);
+    const bgKey = this.textures.exists('bg-bejeweled') ? 'bg-bejeweled' : 'bj-bg';
+    this.add.image(0, 0, bgKey).setOrigin(0).setDisplaySize(GAME_WIDTH, GAME_HEIGHT).setDepth(D.bg);
 
     const nebulas = [
       { x: 420, y: 280, tint: 0x6633ff, alpha: 0.17, scale: 9 },

src/games/peggle/PeggleGame.js

@@ -275,13 +275,10 @@ export default class PeggleGame extends Phaser.Scene {
     this.clearLayer();
     const cx = GAME_WIDTH / 2;
 
-    const title = this.add.text(cx, 90, 'PEGGLE', {
+    if (this.textures.exists('bg-peggle-menu')) {
-      fontFamily: 'Righteous', fontSize: '72px', color: COLORS.goldHex,
+      this.layer.add(this.add.image(GAME_WIDTH / 2, GAME_HEIGHT / 2, 'bg-peggle-menu')
-    }).setOrigin(0.5);
+        .setDisplaySize(GAME_WIDTH, GAME_HEIGHT));
-    const sub = this.add.text(cx, 152, 'Clear all 25 orange pegs. A friend joins every level — hit their green pegs to fire their power!', {
+    }
-      fontFamily: '"Julius Sans One"', fontSize: '22px', color: COLORS.mutedHex,
-    }).setOrigin(0.5);
-    this.layer.add([title, sub]);
 
     if (!this.manifest.length) {
       const msg = this.add.text(cx, 480, 'No levels found.\nRun: node tools/genPeggleLevels.js', {
@@ -293,9 +290,9 @@ export default class PeggleGame extends Phaser.Scene {
     }
 
     const nextLevel = Math.min(this.levelsCompleted + 1, this.manifest.length);
-    const prog = this.add.text(cx, 208, `Completed ${this.levelsCompleted} / ${this.manifest.length}`, {
+    const prog = this.add.text(GAME_WIDTH - 40, 208, `Completed ${this.levelsCompleted} / ${this.manifest.length}`, {
       fontFamily: 'Righteous', fontSize: '26px', color: COLORS.textHex,
-    }).setOrigin(0.5);
+    }).setOrigin(1, 0.5);
     this.layer.add(prog);
 
     // One row per friend: portrait + name + power on the left, that friend's