feat: add video background with scanlines to menu scenes

Replaces static backgrounds in CollectionScene, DeckBuilderScene, FusionScene, and StoreScene with a looping "corridors" video. Adds a dark tint overlay (55% opacity) and CRT-style scanlines for visual consistency. Implements state persistence by saving and restoring the video playback time via the scene registry to maintain continuity across scene transitions.

src/scenes/CollectionScene.js

@@ -47,13 +47,38 @@ const TERMINAL_PAD = 20;
 export class CollectionScene extends Phaser.Scene {
   constructor() { super('CollectionScene'); }
 
+  preload() {
+    this.load.video('corridors', 'assets/video/corridors.mp4');
+  }
+
   create() {
     this.cardManager = this.registry.get('cardManager');
     this.save = this.registry.get('save');
     const { width, height } = this.scale;
 
-    // Background
-    this.add.rectangle(width / 2, height / 2, width, height, 0x0d1b2a);
+    // Video background
+    const bg = this.add.video(width / 2, height / 2, 'corridors');
+    bg.setMute(true);
+    bg.on('created', () => {
+      if (!bg.scene) return;
+      bg.setDisplaySize(width, height);
+      const t = this.registry.get('corridors_time');
+      if (t > 0) bg.setCurrentTime(t);
+    });
+    bg.play(true);
+    this.events.on('shutdown', () => {
+      if (bg.scene) this.registry.set('corridors_time', bg.getCurrentTime());
+    });
+
+    // Dark tint overlay
+    this.add.rectangle(width / 2, height / 2, width, height, 0x000000, 0.55);
+
+    // Scanlines
+    const scanlines = this.add.graphics();
+    for (let y = 0; y < height; y += 3) {
+      scanlines.fillStyle(0x000000, 0.22);
+      scanlines.fillRect(0, y, width, 1);
+    }
 
     // Divider line between panels
     this.add.rectangle(LEFT_PANEL_W, height / 2, 2, height, 0x222244);

src/scenes/DeckBuilderScene.js

@@ -5,9 +5,37 @@ import { CardObject } from '../objects/CardObject.js';
 export class DeckBuilderScene extends Phaser.Scene {
   constructor() { super('DeckBuilderScene'); }
 
+  preload() {
+    this.load.video('corridors', 'assets/video/corridors.mp4');
+  }
+
   create() {
     const { width, height } = this.scale;
-    this.add.rectangle(width / 2, height / 2, width, height, 0x0d1b2a);
+
+    // Video background
+    const bg = this.add.video(width / 2, height / 2, 'corridors');
+    bg.setMute(true);
+    bg.on('created', () => {
+      if (!bg.scene) return;
+      bg.setDisplaySize(width, height);
+      const t = this.registry.get('corridors_time');
+      if (t > 0) bg.setCurrentTime(t);
+    });
+    bg.play(true);
+    this.events.on('shutdown', () => {
+      if (bg.scene) this.registry.set('corridors_time', bg.getCurrentTime());
+    });
+
+    // Dark tint overlay
+    this.add.rectangle(width / 2, height / 2, width, height, 0x000000, 0.55);
+
+    // Scanlines
+    const scanlines = this.add.graphics();
+    for (let y = 0; y < height; y += 3) {
+      scanlines.fillStyle(0x000000, 0.22);
+      scanlines.fillRect(0, y, width, 1);
+    }
+
     this.add.text(width / 2, 36, 'Deck Builder', { fontSize: '38px', color: '#d4af37' }).setOrigin(0.5);
 
     const save = this.registry.get('save');

src/scenes/FusionScene.js

@@ -44,6 +44,7 @@ export class FusionScene extends Phaser.Scene {
 
   preload() {
     this.load.video('forge_idle', 'assets/video/forge.mp4');
+    this.load.video('corridors', 'assets/video/corridors.mp4');
   }
 
   create() {
@@ -63,8 +64,29 @@ export class FusionScene extends Phaser.Scene {
     this._scrollY = 0;
     this._maxScroll = 0;
 
-    // Background
-    this.add.rectangle(width / 2, height / 2, width, height, 0x0d1b2a);
+    // Video background
+    const bg = this.add.video(width / 2, height / 2, 'corridors');
+    bg.setMute(true);
+    bg.on('created', () => {
+      if (!bg.scene) return;
+      bg.setDisplaySize(width, height);
+      const t = this.registry.get('corridors_time');
+      if (t > 0) bg.setCurrentTime(t);
+    });
+    bg.play(true);
+    this.events.on('shutdown', () => {
+      if (bg.scene) this.registry.set('corridors_time', bg.getCurrentTime());
+    });
+
+    // Dark tint overlay
+    this.add.rectangle(width / 2, height / 2, width, height, 0x000000, 0.55);
+
+    // Scanlines
+    const scanlines = this.add.graphics();
+    for (let y = 0; y < height; y += 3) {
+      scanlines.fillStyle(0x000000, 0.22);
+      scanlines.fillRect(0, y, width, 1);
+    }
 
     this._buildHeader();
     this._buildStacksArea();

src/scenes/StoreScene.js

@@ -3,12 +3,38 @@ import { SaveManager } from '../managers/SaveManager.js';
 export class StoreScene extends Phaser.Scene {
   constructor() { super('StoreScene'); }
 
+  preload() {
+    this.load.video('corridors', 'assets/video/corridors.mp4');
+  }
+
   create() {
     const { width, height } = this.scale;
     const save = this.registry.get('save');
     const packManager = this.registry.get('packManager');
 
-    this.add.rectangle(width / 2, height / 2, width, height, 0x0d1b2a);
+    // Video background
+    const bg = this.add.video(width / 2, height / 2, 'corridors');
+    bg.setMute(true);
+    bg.on('created', () => {
+      if (!bg.scene) return;
+      bg.setDisplaySize(width, height);
+      const t = this.registry.get('corridors_time');
+      if (t > 0) bg.setCurrentTime(t);
+    });
+    bg.play(true);
+    this.events.on('shutdown', () => {
+      if (bg.scene) this.registry.set('corridors_time', bg.getCurrentTime());
+    });
+
+    // Dark tint overlay
+    this.add.rectangle(width / 2, height / 2, width, height, 0x000000, 0.55);
+
+    // Scanlines
+    const scanlines = this.add.graphics();
+    for (let y = 0; y < height; y += 3) {
+      scanlines.fillStyle(0x000000, 0.22);
+      scanlines.fillRect(0, y, width, 1);
+    }
     this.add.text(width / 2, 45, 'Card Store', { fontSize: '42px', color: '#d4af37' }).setOrigin(0.5);
     this.add.text(width / 2, 90, 'Buy packs to expand your collection', {
       fontSize: '20px', color: '#888888'