Merge pull request '🐛 Stockpile opacity + layout overlap + ESC menu padding' (#21) from fix/stockpile-layout-esc-margin into master

- Stockpile panel: use uiOpacity instead of hardcoded 0.72
- updateStaticPanelOpacity() replaces updateDebugPanelBackground() and also
  updates stockpilePanel.setAlpha() when opacity changes in Settings
- Stockpile panel height 187→210; popText y 167→192 (8px gap after carrot row)
- ESC menu menuH formula: 16+…+8 → 32+…+8 so last button has 16px bottom
  padding instead of 0px

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

CHANGELOG.md

@@ -7,6 +7,10 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 
+### Fixed
+- **Stockpile panel** (Issue #20): panel background now uses `uiOpacity` and updates live when Settings opacity changes; panel height increased so the Nisse count row no longer overlaps the carrot row
+- **ESC menu** (Issue #20): internal bottom padding corrected — last button now has 16px gap to panel edge instead of 0px
+
 ### Added
 - **Overlay Opacity Setting** (Issue #16): all UI overlay backgrounds (build menu, villager panel, context menu, ESC menu, confirm dialog, Nisse info panel, debug panel) now use a central `uiOpacity` value instead of hardcoded alphas
 - **Settings Screen**: ESC menu → Settings now opens a real overlay with an overlay-opacity row (− / value% / + step buttons, range 40 %–100 %, default 80 %); setting persisted in `localStorage` under `tg_ui_settings`, separate from game save so New Game does not wipe it

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.
-   * Called whenever uiOpacity changes so the debug panel stays in sync.
+   * Applies the current uiOpacity to all static UI elements that are not
+   * 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}` })
   }