feat(bingo): add cream-colored backgrounds to game UI elements

- Add cream white background behind the player's bingo card
- Add cream white background behind opponent mini-cards
- Add cream white background behind the called numbers board
- Adjust player card header position (HEADER_Y, ROW0_Y) to accommodate new layout

public/src/games/bingo/BingoGame.js

@@ -21,7 +21,7 @@ const SPIN_FORCE = 0.0011;            // tangential force keeping the balls circ
 const REVEAL_X = 235, REVEAL_Y = 655, REVEAL_R = 86;
 
 // Center: human card
-const CARD_CX = 960, CELL = 104, CGAP = 10, HEADER_Y = 120, ROW0_Y = 210;
+const CARD_CX = 960, CELL = 104, CGAP = 10, HEADER_Y = 100, ROW0_Y = 190;
 const colX = (c) => CARD_CX - (5 * CELL + 4 * CGAP) / 2 + CELL / 2 + c * (CELL + CGAP); // 732 + 114c
 const rowY = (r) => ROW0_Y + r * (CELL + CGAP);                                          // 210 + 114r
 
@@ -200,6 +200,11 @@ export default class BingoGame extends Phaser.Scene {
   // ── Player card ──────────────────────────────────────────────────────────────
 
   buildPlayerCardFrame() {
+    // Cream white background behind the card (letters + grid)
+    const cardBg = this.add.graphics().setDepth(D.card - 1);
+    cardBg.fillStyle(0xe4e2b3, 0.95);
+    cardBg.fillRoundedRect(CARD_CX - 310, 400 - 330, 620, 660, 5);
+
     for (let c = 0; c < 5; c++) {
       this.add.text(colX(c), HEADER_Y, LETTERS[c], {
         fontFamily: 'Righteous', fontSize: '64px', color: COLORS.goldHex,
@@ -302,6 +307,12 @@ export default class BingoGame extends Phaser.Scene {
       const opp = this.activeOpponents[i];
 
       this.add.rectangle(px, py, PW, PH, 0x000000, 0.6).setStrokeStyle(1, 0x8a7050).setDepth(D.panel);
+
+      // Cream white background behind the mini bingo card
+      const miniW = 125, miniH = 125;
+      this.add.rectangle(px + 54.5, py + 34.5, miniW, miniH, 0xe4e2b3, 0.95)
+        .setDepth(D.panel + 1);
+
       this.add.text(px, py - PH / 2 + 16, opp.name ?? `Player ${i + 1}`, {
         fontFamily: '"Julius Sans One"', fontSize: '17px', color: COLORS.textHex,
       }).setOrigin(0.5).setDepth(D.panel + 4);
@@ -335,6 +346,11 @@ export default class BingoGame extends Phaser.Scene {
   // ── Called-numbers board ────────────────────────────────────────────────────────
 
   buildCalledBoard() {
+    // Cream white background behind the called numbers board
+    const boardBg = this.add.graphics().setDepth(D.board - 1);
+    boardBg.fillStyle(0xecebe7, 0.95);
+    boardBg.fillRoundedRect(970 - 490, 892 - 150, 980, 300, 5);
+
     this.add.text(CB_LETTER_X - 24, 762, 'Called Numbers', {
       fontFamily: '"Julius Sans One"', fontSize: '20px', color: COLORS.mutedHex,
     }).setOrigin(0, 0.5).setDepth(D.ui);