src/scenes/UIScene.ts

@@ -127,14 +127,16 @@ export class UIScene extends Phaser.Scene {
   /** Creates the stockpile panel in the top-right corner with item rows and population count. */
   private createStockpilePanel(): void {
     const x = this.scale.width - 178, y = 10
-    this.stockpilePanel = this.add.rectangle(x, y, 168, 187, 0x000000, 0.72).setOrigin(0, 0).setScrollFactor(0).setDepth(100)
+    // 7 items × 22px + 26px header + 12px gap + 18px popText row + 10px bottom = 210px
+    this.stockpilePanel = this.add.rectangle(x, y, 168, 210, 0x000000, this.uiOpacity).setOrigin(0, 0).setScrollFactor(0).setDepth(100)
     this.stockpileTitleText = this.add.text(x + 10, y + 7, '⚡ STOCKPILE', { fontSize: '11px', color: '#aaaaaa', fontFamily: 'monospace' }).setScrollFactor(0).setDepth(101)
     const items = ['wood','stone','wheat_seed','carrot_seed','tree_seed','wheat','carrot'] as const
     items.forEach((item, i) => {
       const t = this.add.text(x + 10, y + 26 + i * 22, `${ITEM_ICONS[item]} ${item}: 0`, { fontSize: '13px', color: '#88dd88', fontFamily: 'monospace' }).setScrollFactor(0).setDepth(101)
       this.stockpileTexts.set(item, t)
     })
-    this.popText = this.add.text(x + 10, y + 167, '👥 Nisse: 0 / 0', { fontSize: '11px', color: '#aaaaaa', fontFamily: 'monospace' }).setScrollFactor(0).setDepth(101)
+    // last item (i=6) bottom edge ≈ y+190 → popText starts at y+192 with 8px gap
+    this.popText = this.add.text(x + 10, y + 192, '👥 Nisse: 0 / 0', { fontSize: '11px', color: '#aaaaaa', fontFamily: 'monospace' }).setScrollFactor(0).setDepth(101)
   }
 
   /** Refreshes all item quantities and colors in the stockpile panel. */
@@ -570,7 +572,8 @@ export class UIScene extends Phaser.Scene {
       { label: '⚙️  Settings',   action: () => this.doSettings() },
       { label: '🆕  New Game',   action: () => this.doNewGame() },
     ]
-    const menuH = 16 + entries.length * (btnH + 8) + 8
+    // 32px header + entries × (btnH + 8px gap) + 8px bottom padding
+    const menuH = 32 + entries.length * (btnH + 8) + 8
     const mx = this.scale.width  / 2 - menuW / 2
     const my = this.scale.height / 2 - menuH / 2
 
@@ -677,7 +680,7 @@ export class UIScene extends Phaser.Scene {
     minusBtn.on('pointerdown', () => {
       this.uiOpacity = Math.max(0.4, Math.round((this.uiOpacity - 0.1) * 10) / 10)
       this.saveUISettings()
-      this.updateDebugPanelBackground()
+      this.updateStaticPanelOpacity()
       this.buildSettings()
     })
     this.settingsGroup.add(minusBtn)
@@ -702,7 +705,7 @@ export class UIScene extends Phaser.Scene {
     plusBtn.on('pointerdown', () => {
       this.uiOpacity = Math.min(1.0, Math.round((this.uiOpacity + 0.1) * 10) / 10)
       this.saveUISettings()
-      this.updateDebugPanelBackground()
+      this.updateStaticPanelOpacity()
       this.buildSettings()
     })
     this.settingsGroup.add(plusBtn)
@@ -753,10 +756,12 @@ export class UIScene extends Phaser.Scene {
   }
 
   /**
-   * Applies the current uiOpacity to the debug panel text background.
+   * Applies the current uiOpacity to all static UI elements that are not
-   * Called whenever uiOpacity changes so the debug panel stays in sync.
+   * rebuilt on open (stockpile panel, debug panel background).
+   * Called whenever uiOpacity changes.
    */
-  private updateDebugPanelBackground(): void {
+  private updateStaticPanelOpacity(): void {
+    this.stockpilePanel.setAlpha(this.uiOpacity)
     const hexAlpha = Math.round(this.uiOpacity * 255).toString(16).padStart(2, '0')
     this.debugPanelText.setStyle({ backgroundColor: `#000000${hexAlpha}` })
   }