Replace star background with gates image and reposition UI elements for improved layout

This commit replaces the custom star background with a gates image asset for a more thematic appearance. The UI elements have been repositioned to improve visual alignment and spacing:
- Added loading of the new 'bg-gates' image asset
- Replaced star background with stretched gates image
- Adjusted title text positioning to be left-aligned with padding
- Centered the slot machine vertically to match the Reckoning panel
- Updated text origins to maintain proper alignment
- Maintained all existing functionality while improving visual presentation

scenes/BootScene.js

@@ -5,6 +5,7 @@ export default class BootScene extends Phaser.Scene {
 
   preload() {
     this.load.spritesheet('symbols', 'assets/symbol_sprites.png', { frameWidth: 200, frameHeight: 100 });
+    this.load.image('bg-gates', 'assets/gates.png');
   }
 
   create() {

scenes/GameScene.js

@@ -10,80 +10,28 @@ export default class GameScene extends Phaser.Scene {
   }
 
   create() {
-    // Background gradient-ish
+    // Background image — stretched to fill the canvas
-    const bg = this.add.graphics();
+    this.add.image(800, 450, 'bg-gates').setDisplaySize(1600, 900);
-    bg.fillGradientStyle(0x1a0a2e, 0x1a0a2e, 0x2a0a4e, 0x2a0a4e, 1);
-    bg.fillRect(0, 0, 1600, 900);
 
-    // Decorative stars — floating, twinkling, pulsing
+    // Title above the machine — left aligned with padding
-    const starColors = [0xffffff, 0xffffff, 0xffffff, 0xffe8a0, 0xd0c8ff];
+    this.add.text(40, 150, 'VIRTUE SLOTS', {
-    for (let i = 0; i < 70; i++) {
-      const x = Phaser.Math.Between(0, 1600);
-      const y = Phaser.Math.Between(120, 760);
-      const r = Phaser.Math.Between(1, 3);
-      const baseAlpha = Phaser.Math.FloatBetween(0.2, 0.75);
-      const color = starColors[Math.floor(Math.random() * starColors.length)];
-
-      const starGfx = this.add.graphics();
-      starGfx.fillStyle(color, 1);
-      starGfx.fillCircle(0, 0, r);
-      starGfx.setPosition(x, y);
-      starGfx.setAlpha(baseAlpha);
-
-      // Gentle drift — each star wanders a small random distance
-      this.tweens.add({
-        targets: starGfx,
-        x: x + Phaser.Math.Between(-18, 18),
-        y: y + Phaser.Math.Between(-12, 12),
-        duration: Phaser.Math.Between(3500, 8000),
-        yoyo: true,
-        repeat: -1,
-        ease: 'Sine.easeInOut',
-        delay: Phaser.Math.Between(0, 5000),
-      });
-
-      // Twinkle — alpha fades in and out independently
-      this.tweens.add({
-        targets: starGfx,
-        alpha: { from: baseAlpha * 0.15, to: baseAlpha },
-        duration: Phaser.Math.Between(600, 2800),
-        yoyo: true,
-        repeat: -1,
-        ease: 'Sine.easeInOut',
-        delay: Phaser.Math.Between(0, 3000),
-      });
-
-      // Scale pulse — grows and shrinks on its own rhythm
-      this.tweens.add({
-        targets: starGfx,
-        scale: Phaser.Math.FloatBetween(1.4, 3.2),
-        duration: Phaser.Math.Between(1200, 4500),
-        yoyo: true,
-        repeat: -1,
-        ease: 'Sine.easeInOut',
-        delay: Phaser.Math.Between(0, 4000),
-      });
-    }
-
-    // Title above the machine
-    this.add.text(710, 150, 'VIRTUE SLOTS', {
       fontSize: '42px',
       fontFamily: 'Georgia, serif',
       color: '#ffd700',
       stroke: '#5a3000',
       strokeThickness: 4,
       shadow: { offsetX: 2, offsetY: 2, color: '#000', blur: 6, fill: true }
-    }).setOrigin(0.5, 0.5);
+    }).setOrigin(0, 0.5);
 
-    this.add.text(710, 195, '✝  May Fortune Favor the Faithful  ✝', {
+    this.add.text(40, 195, '✝  May Fortune Favor the Faithful  ✝', {
       fontSize: '18px',
       fontFamily: 'Georgia, serif',
       color: '#c8a87e',
       alpha: 0.8
-    }).setOrigin(0.5, 0.5);
+    }).setOrigin(0, 0.5);
 
-    // Slot machine at center of play area
+    // Slot machine — vertically centered to match The Reckoning panel (y=202–690)
-    this.slotMachine = new SlotMachine(this, 710, 490);
+    this.slotMachine = new SlotMachine(this, 710, 446);
 
     this.winAnim = new WinAnimation();
     this.lossAnim = new LossAnimation();