From 0317d1c14fa783e13c2efa1203961a03fc1de003 Mon Sep 17 00:00:00 2001
From: Brian Fertig <brianfertig@hotmail.com>
Date: Sun, 7 Jun 2026 15:23:53 -0600
Subject: [PATCH] Fix video overlay

---
 public/src/games/monopoly/MonopolyGame.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/public/src/games/monopoly/MonopolyGame.js b/public/src/games/monopoly/MonopolyGame.js
index 54bf724..f92c645 100644
--- a/public/src/games/monopoly/MonopolyGame.js
+++ b/public/src/games/monopoly/MonopolyGame.js
@@ -406,6 +406,9 @@ export default class MonopolyGame extends Phaser.Scene {
   reg(o)      { this.dyn.push(o); return o; }
   clearDyn()  { this.dyn.forEach(o => { try { o.destroy(); } catch {} }); this.dyn = []; }
 
+  hidePortraits() { this.portraits.forEach(p => { if (p?.hide) p.hide(); }); }
+  showPortraits() { this.portraits.forEach(p => { if (p?.show) p.show(); }); }
+
   render() {
     this.clearDyn();
     this.drawHousesHotels();
@@ -415,6 +418,9 @@ export default class MonopolyGame extends Phaser.Scene {
     if (this.gs.pendingCard) this.drawCardPopup();
     if (this.gs.phase === 'auction' && this.gs.pendingAuction) this.drawAuctionPanel();
     if (this.modalActive && this.gs.phase === 'buy') this.drawModalBuyButtons();
+    // DOM video portraits always render above canvas — hide them during any overlay
+    if (this.gs.pendingCard || this.modalActive) this.hidePortraits();
+    else this.showPortraits();
   }
 
   drawHousesHotels() {
@@ -1411,6 +1417,9 @@ export default class MonopolyGame extends Phaser.Scene {
     const scaleStart = geo.w / MODAL_W;
     const rotStart   = -geo.rotation;
 
+    // Hide DOM portraits immediately — they render above canvas regardless of depth
+    this.hidePortraits();
+
     // Dim overlay
     this.modalOverlay = this.add.rectangle(GAME_WIDTH/2, GAME_HEIGHT/2, GAME_WIDTH, GAME_HEIGHT, 0x000000, 0)
       .setDepth(DEPTH.popup - 2).setInteractive();