📝 update CHANGELOG for Issue #16 overlay opacity

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

CHANGELOG.md

@@ -7,6 +7,25 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 
+### 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
+
+### Added
+- **Unified Tile System** (Issue #14):
+  - Tree seedlings: player plants `tree_seed` on grass/dark-grass via the F-key farming tool; seedling grows through two stages (sprout → sapling → young tree, ~1 min each); on maturity it becomes a FOREST tile with a harvestable tree resource
+  - Tile recovery: when a Nisse chops a tree, the resulting DARK_GRASS tile starts a 5-minute recovery timer and reverts to GRASS automatically, with the terrain canvas updated in real time
+  - Three new procedural seedling textures (`seedling_0/1/2`) generated in BootScene
+  - `tree_seed` added to stockpile display (default 5 at game start) and to the farming tool cycle
+  - `WorldSystem.refreshTerrainTile()` updates the terrain canvas for a single tile without regenerating the full background
+  - New `TreeSeedlingSystem` manages seedling sprites, growth ticking, and maturation
+
+### Added
+- **Nisse Info Panel** (Issue #9): clicking a Nisse opens a top-left panel with name, AI status, energy bar, active job, job priority buttons, and a live work log (last 10 of 20 runtime entries); closes with ESC, ✕ button, or by clicking another Nisse
+- Work log tracks: walking to job, hauling to stockpile, going to sleep, waking up, chopped/mined/farmed results, deposited at stockpile
+- **ESC Menu** (Issue #7): pressing ESC when no overlay is open shows a pause menu with Save Game, Load Game, Settings (placeholder), and New Game; New Game requires confirmation before wiping the save
+- ESC key now follows a priority stack: confirmation dialog → context menu → build menu → villager panel → Nisse info panel → ESC menu → (build/farm mode handled by their systems) → open ESC menu
+
 ### Added
 - **F3 Debug View**: toggleable overlay showing FPS, tile type and contents under the cursor, Nisse count by AI state, active jobs by type, and pathfinding visualization (cyan lines in world space)
 

src/StateManager.ts

@@ -1,5 +1,6 @@
-import { SAVE_KEY, WORLD_TILES, CROP_CONFIGS } from './config'
+import { SAVE_KEY, WORLD_TILES, CROP_CONFIGS, TREE_SEEDLING_STAGE_MS, TILE_RECOVERY_MS } from './config'
 import type { GameStateData, GameAction, PlayerState, WorldState, ItemId } from './types'
+import { TileType } from './types'
 
 const DEFAULT_PLAYER: PlayerState = {
   id: 'player1',
@@ -15,13 +16,15 @@ function makeEmptyWorld(seed: number): WorldState {
     buildings: {},
     crops: {},
     villagers: {},
-    stockpile: { wood: 10, stone: 5, wheat_seed: 10, carrot_seed: 5, wheat: 0, carrot: 0 },
+    stockpile: { wood: 10, stone: 5, wheat_seed: 10, carrot_seed: 5, wheat: 0, carrot: 0, tree_seed: 5 },
+    treeSeedlings: {},
+    tileRecovery: {},
   }
 }
 
 function makeDefaultState(): GameStateData {
   return {
-    version: 4,
+    version: 5,
     world: makeEmptyWorld(Math.floor(Math.random() * 999999)),
     player: { ...DEFAULT_PLAYER, inventory: { ...DEFAULT_PLAYER.inventory } },
   }
@@ -146,6 +149,26 @@ class StateManager {
         if (v) v.priorities = { ...action.priorities }
         break
       }
+
+      case 'PLANT_TREE_SEED': {
+        w.treeSeedlings[action.seedling.id] = { ...action.seedling }
+        w.stockpile.tree_seed = Math.max(0, (w.stockpile.tree_seed ?? 0) - 1)
+        // Cancel any tile recovery on this tile
+        delete w.tileRecovery[`${action.seedling.tileX},${action.seedling.tileY}`]
+        break
+      }
+
+      case 'REMOVE_TREE_SEEDLING':
+        delete w.treeSeedlings[action.seedlingId]
+        break
+
+      case 'SPAWN_RESOURCE':
+        w.resources[action.resource.id] = { ...action.resource }
+        break
+
+      case 'TILE_RECOVERY_START':
+        w.tileRecovery[`${action.tileX},${action.tileY}`] = TILE_RECOVERY_MS
+        break
     }
   }
 
@@ -163,6 +186,47 @@ class StateManager {
     return advanced
   }
 
+  /**
+   * Advances all tree-seedling growth timers.
+   * Returns IDs of seedlings that have reached stage 2 (ready to mature into a tree).
+   * @param delta - Frame delta in milliseconds
+   * @returns Array of seedling IDs that are now mature
+   */
+  tickSeedlings(delta: number): string[] {
+    const advanced: string[] = []
+    for (const s of Object.values(this.state.world.treeSeedlings)) {
+      s.stageTimerMs -= delta
+      if (s.stageTimerMs <= 0) {
+        s.stage = Math.min(s.stage + 1, 2)
+        s.stageTimerMs = TREE_SEEDLING_STAGE_MS
+        advanced.push(s.id)
+      }
+    }
+    return advanced
+  }
+
+  /**
+   * Ticks tile-recovery timers.
+   * Returns keys ("tileX,tileY") of tiles that have now recovered back to GRASS.
+   * @param delta - Frame delta in milliseconds
+   * @returns Array of recovered tile keys
+   */
+  tickTileRecovery(delta: number): string[] {
+    const recovered: string[] = []
+    const rec = this.state.world.tileRecovery
+    for (const key of Object.keys(rec)) {
+      rec[key] -= delta
+      if (rec[key] <= 0) {
+        delete rec[key]
+        recovered.push(key)
+        // Update tiles array directly (DARK_GRASS → GRASS)
+        const [tx, ty] = key.split(',').map(Number)
+        this.state.world.tiles[ty * WORLD_TILES + tx] = TileType.GRASS
+      }
+    }
+    return recovered
+  }
+
   save(): void {
     try { localStorage.setItem(SAVE_KEY, JSON.stringify(this.state)) } catch (_) {}
   }
@@ -172,10 +236,12 @@ class StateManager {
       const raw = localStorage.getItem(SAVE_KEY)
       if (!raw) return null
       const p = JSON.parse(raw) as GameStateData
-      if (p.version !== 4) return null
-      if (!p.world.crops)    p.world.crops    = {}
-      if (!p.world.villagers) p.world.villagers = {}
-      if (!p.world.stockpile) p.world.stockpile = {}
+      if (p.version !== 5) return null
+      if (!p.world.crops)          p.world.crops          = {}
+      if (!p.world.villagers)      p.world.villagers      = {}
+      if (!p.world.stockpile)      p.world.stockpile      = {}
+      if (!p.world.treeSeedlings)  p.world.treeSeedlings  = {}
+      if (!p.world.tileRecovery)   p.world.tileRecovery   = {}
       // Reset in-flight AI states to idle on load so runtime timers start fresh
       for (const v of Object.values(p.world.villagers)) {
         if (v.aiState === 'walking' || v.aiState === 'working') v.aiState = 'idle'

src/config.ts

@@ -46,5 +46,14 @@ export const VILLAGER_NAMES = [
   'Orla','Pike','Quinn','Rook','Sera','Tull','Uma','Vex',
 ]
 
-export const SAVE_KEY = 'tg_save_v4'
+export const SAVE_KEY = 'tg_save_v5'
 export const AUTOSAVE_INTERVAL = 30_000
+
+/** localStorage key for UI settings (opacity etc.) — separate from the game save. */
+export const UI_SETTINGS_KEY = 'tg_ui_settings'
+
+/** Milliseconds for one tree-seedling stage to advance (two stages = full tree). */
+export const TREE_SEEDLING_STAGE_MS = 60_000   // 1 min per stage → 2 min total
+
+/** Milliseconds before a bare DARK_GRASS tile (after tree felling) reverts to GRASS. */
+export const TILE_RECOVERY_MS = 300_000        // 5 minutes

src/scenes/BootScene.ts

@@ -20,6 +20,7 @@ export class BootScene extends Phaser.Scene {
     this.buildResourceTextures()
     this.buildPlayerTexture()
     this.buildCropTextures()
+    this.buildSeedlingTextures()
     this.buildUITextures()
     this.buildVillagerAndBuildingTextures()
     this.generateWorldIfNeeded()
@@ -287,6 +288,40 @@ export class BootScene extends Phaser.Scene {
     g3.generateTexture('crop_carrot_3', W, H); g3.destroy()
   }
 
+  // ─── Tree seedling textures (3 growth stages) ────────────────────────────
+
+  /**
+   * Generates textures for the three tree-seedling growth stages:
+   *   seedling_0 – small sprout
+   *   seedling_1 – sapling with leaves
+   *   seedling_2 – young tree (about to mature into a FOREST tile)
+   */
+  private buildSeedlingTextures(): void {
+    // Stage 0: tiny sprout
+    const g0 = this.add.graphics()
+    g0.fillStyle(0x6D4C41); g0.fillRect(10, 20, 4, 10)
+    g0.fillStyle(0x66BB6A); g0.fillEllipse(12, 16, 12, 8)
+    g0.fillStyle(0x4CAF50); g0.fillEllipse(12, 13, 8, 6)
+    g0.generateTexture('seedling_0', 24, 32); g0.destroy()
+
+    // Stage 1: sapling
+    const g1 = this.add.graphics()
+    g1.fillStyle(0x6D4C41); g1.fillRect(9, 15, 5, 16)
+    g1.fillStyle(0x4CAF50); g1.fillCircle(12, 12, 8)
+    g1.fillStyle(0x66BB6A, 0.7); g1.fillCircle(7, 16, 5); g1.fillCircle(17, 16, 5)
+    g1.fillStyle(0x81C784); g1.fillCircle(12, 8, 5)
+    g1.generateTexture('seedling_1', 24, 32); g1.destroy()
+
+    // Stage 2: young tree (mature, ready to become a resource)
+    const g2 = this.add.graphics()
+    g2.fillStyle(0x000000, 0.15); g2.fillEllipse(12, 28, 16, 6)
+    g2.fillStyle(0x6D4C41); g2.fillRect(9, 14, 6, 14)
+    g2.fillStyle(0x2E7D32); g2.fillCircle(12, 9, 10)
+    g2.fillStyle(0x388E3C); g2.fillCircle(7, 13, 7); g2.fillCircle(17, 13, 7)
+    g2.fillStyle(0x43A047); g2.fillCircle(12, 6, 7)
+    g2.generateTexture('seedling_2', 24, 32); g2.destroy()
+  }
+
   // ─── UI panel texture ─────────────────────────────────────────────────────
 
   private buildUITextures(): void {

src/scenes/GameScene.ts

@@ -1,5 +1,6 @@
 import Phaser from 'phaser'
 import { AUTOSAVE_INTERVAL, TILE_SIZE } from '../config'
+import { TileType } from '../types'
 import type { BuildingType } from '../types'
 import { stateManager } from '../StateManager'
 import { LocalAdapter } from '../NetworkAdapter'
@@ -10,6 +11,7 @@ import { BuildingSystem } from '../systems/BuildingSystem'
 import { FarmingSystem } from '../systems/FarmingSystem'
 import { VillagerSystem } from '../systems/VillagerSystem'
 import { DebugSystem } from '../systems/DebugSystem'
+import { TreeSeedlingSystem } from '../systems/TreeSeedlingSystem'
 
 export class GameScene extends Phaser.Scene {
   private adapter!: LocalAdapter
@@ -20,6 +22,7 @@ export class GameScene extends Phaser.Scene {
   private farmingSystem!: FarmingSystem
   villagerSystem!: VillagerSystem
   debugSystem!: DebugSystem
+  private treeSeedlingSystem!: TreeSeedlingSystem
   private autosaveTimer = 0
   private menuOpen = false
 
@@ -37,9 +40,10 @@ export class GameScene extends Phaser.Scene {
     this.resourceSystem = new ResourceSystem(this, this.adapter)
     this.buildingSystem = new BuildingSystem(this, this.adapter)
     this.farmingSystem  = new FarmingSystem(this, this.adapter)
-    this.villagerSystem = new VillagerSystem(this, this.adapter, this.worldSystem)
+    this.villagerSystem      = new VillagerSystem(this, this.adapter, this.worldSystem)
     this.villagerSystem.init(this.resourceSystem, this.farmingSystem)
-    this.debugSystem    = new DebugSystem(this, this.villagerSystem, this.worldSystem)
+    this.treeSeedlingSystem  = new TreeSeedlingSystem(this, this.adapter, this.worldSystem)
+    this.debugSystem         = new DebugSystem(this, this.villagerSystem, this.worldSystem)
 
     this.worldSystem.create()
     this.renderPersistentObjects()
@@ -57,11 +61,16 @@ export class GameScene extends Phaser.Scene {
     }
 
     this.farmingSystem.create()
-    this.farmingSystem.onMessage    = (msg)         => this.events.emit('toast', msg)
-    this.farmingSystem.onToolChange = (tool, label) => this.events.emit('farmToolChanged', tool, label)
+    this.farmingSystem.onMessage     = (msg)         => this.events.emit('toast', msg)
+    this.farmingSystem.onToolChange  = (tool, label) => this.events.emit('farmToolChanged', tool, label)
+    this.farmingSystem.onPlantTreeSeed = (tileX, tileY, tile) =>
+      this.treeSeedlingSystem.plantSeedling(tileX, tileY, tile)
+
+    this.treeSeedlingSystem.create()
 
     this.villagerSystem.create()
-    this.villagerSystem.onMessage = (msg) => this.events.emit('toast', msg)
+    this.villagerSystem.onMessage    = (msg) => this.events.emit('toast', msg)
+    this.villagerSystem.onNisseClick = (id)  => this.events.emit('nisseClicked', id)
 
     this.debugSystem.create()
 
@@ -69,6 +78,8 @@ export class GameScene extends Phaser.Scene {
     this.adapter.onAction = (action) => {
       if (action.type === 'CHANGE_TILE') {
         this.worldSystem.setTile(action.tileX, action.tileY, action.tile)
+      } else if (action.type === 'SPAWN_RESOURCE') {
+        this.resourceSystem.spawnResourcePublic(action.resource)
       }
     }
 
@@ -101,9 +112,17 @@ export class GameScene extends Phaser.Scene {
 
     this.resourceSystem.update(delta)
     this.farmingSystem.update(delta)
+    this.treeSeedlingSystem.update(delta)
     this.villagerSystem.update(delta)
     this.debugSystem.update()
 
+    // Tick tile-recovery timers; refresh canvas for any tiles that reverted to GRASS
+    const recovered = stateManager.tickTileRecovery(delta)
+    for (const key of recovered) {
+      const [tx, ty] = key.split(',').map(Number)
+      this.worldSystem.refreshTerrainTile(tx, ty, TileType.GRASS)
+    }
+
     this.events.emit('cameraMoved', this.cameraSystem.getCenterTile())
     this.buildingSystem.update()
 
@@ -143,6 +162,7 @@ export class GameScene extends Phaser.Scene {
     this.resourceSystem.destroy()
     this.buildingSystem.destroy()
     this.farmingSystem.destroy()
+    this.treeSeedlingSystem.destroy()
     this.villagerSystem.destroy()
   }
 }

src/scenes/UIScene.ts

@@ -3,10 +3,11 @@ import type { BuildingType, JobPriorities } from '../types'
 import type { FarmingTool } from '../systems/FarmingSystem'
 import type { DebugData } from '../systems/DebugSystem'
 import { stateManager } from '../StateManager'
+import { UI_SETTINGS_KEY } from '../config'
 
 const ITEM_ICONS: Record<string, string> = {
   wood: '🪵', stone: '🪨', wheat_seed: '🌱', carrot_seed: '🥕',
-  wheat: '🌾', carrot: '🧡',
+  wheat: '🌾', carrot: '🧡', tree_seed: '🌲',
 }
 
 export class UIScene extends Phaser.Scene {
@@ -31,6 +32,25 @@ export class UIScene extends Phaser.Scene {
   private inFarmMode = false
   private debugPanelText!: Phaser.GameObjects.Text
   private debugActive = false
+  private escMenuGroup!: Phaser.GameObjects.Group
+  private escMenuVisible = false
+  private confirmGroup!: Phaser.GameObjects.Group
+  private confirmVisible = false
+  private nisseInfoGroup!: Phaser.GameObjects.Group
+  private nisseInfoVisible = false
+  private nisseInfoId: string | null = null
+  private nisseInfoDynamic: {
+    statusText: Phaser.GameObjects.Text
+    energyBar:  Phaser.GameObjects.Graphics
+    energyPct:  Phaser.GameObjects.Text
+    jobText:    Phaser.GameObjects.Text
+    logTexts:   Phaser.GameObjects.Text[]
+  } | null = null
+
+  /** Current overlay background opacity (0.4–1.0, default 0.8). Persisted in localStorage. */
+  private uiOpacity = 0.8
+  private settingsGroup!: Phaser.GameObjects.Group
+  private settingsVisible = false
 
   constructor() { super({ key: 'UI' }) }
 
@@ -39,6 +59,7 @@ export class UIScene extends Phaser.Scene {
    * keyboard shortcuts (B, V, F3, ESC).
    */
   create(): void {
+    this.loadUISettings()
     this.createStockpilePanel()
     this.createHintText()
     this.createToast()
@@ -64,8 +85,14 @@ export class UIScene extends Phaser.Scene {
 
     this.scale.on('resize', () => this.repositionUI())
 
+    gameScene.events.on('nisseClicked', (id: string) => this.openNisseInfoPanel(id))
+
     this.input.mouse!.disableContextMenu()
     this.contextMenuGroup = this.add.group()
+    this.escMenuGroup     = this.add.group()
+    this.confirmGroup     = this.add.group()
+    this.nisseInfoGroup   = this.add.group()
+    this.settingsGroup    = this.add.group()
 
     this.input.on('pointerdown', (ptr: Phaser.Input.Pointer) => {
       if (ptr.rightButtonDown()) {
@@ -78,7 +105,7 @@ export class UIScene extends Phaser.Scene {
     })
 
     this.input.keyboard!.addKey(Phaser.Input.Keyboard.KeyCodes.ESC)
-      .on('down', () => this.hideContextMenu())
+      .on('down', () => this.handleEsc())
   }
 
   /**
@@ -92,6 +119,7 @@ export class UIScene extends Phaser.Scene {
     this.updateToast(delta)
     this.updatePopText()
     if (this.debugActive) this.updateDebugPanel()
+    if (this.nisseInfoVisible) this.refreshNisseInfoPanel()
   }
 
   // ─── Stockpile ────────────────────────────────────────────────────────────
@@ -99,14 +127,14 @@ 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, 165, 0x000000, 0.72).setOrigin(0, 0).setScrollFactor(0).setDepth(100)
+    this.stockpilePanel = this.add.rectangle(x, y, 168, 187, 0x000000, 0.72).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','wheat','carrot'] as const
+    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 + 145, '👥 Nisse: 0 / 0', { fontSize: '11px', color: '#aaaaaa', fontFamily: 'monospace' }).setScrollFactor(0).setDepth(101)
+    this.popText = this.add.text(x + 10, y + 167, '👥 Nisse: 0 / 0', { fontSize: '11px', color: '#aaaaaa', fontFamily: 'monospace' }).setScrollFactor(0).setDepth(101)
   }
 
   /** Refreshes all item quantities and colors in the stockpile panel. */
@@ -176,7 +204,7 @@ export class UIScene extends Phaser.Scene {
       { kind: 'stockpile_zone', label: '📦 Stockpile',   cost: 'free  (workers deliver here)' },
     ]
     const menuX = this.scale.width / 2 - 150, menuY = this.scale.height / 2 - 140
-    const bg = this.add.rectangle(menuX, menuY, 300, 280, 0x000000, 0.88).setOrigin(0,0).setScrollFactor(0).setDepth(200)
+    const bg = this.add.rectangle(menuX, menuY, 300, 280, 0x000000, this.uiOpacity).setOrigin(0,0).setScrollFactor(0).setDepth(200)
     this.buildMenuGroup.add(bg)
     this.buildMenuGroup.add(this.add.text(menuX + 150, menuY + 14, 'BUILD MENU  [B/ESC]', { fontSize: '11px', color: '#aaaaaa', fontFamily: 'monospace' }).setOrigin(0.5,0).setScrollFactor(0).setDepth(201))
 
@@ -243,7 +271,7 @@ export class UIScene extends Phaser.Scene {
     const px        = this.scale.width  / 2 - panelW / 2
     const py        = this.scale.height / 2 - panelH / 2
 
-    const bg = this.add.rectangle(px, py, panelW, panelH, 0x0a0a0a, 0.92).setOrigin(0,0).setScrollFactor(0).setDepth(210)
+    const bg = this.add.rectangle(px, py, panelW, panelH, 0x0a0a0a, this.uiOpacity).setOrigin(0,0).setScrollFactor(0).setDepth(210)
     this.villagerPanelGroup.add(bg)
 
     this.villagerPanelGroup.add(
@@ -363,10 +391,11 @@ export class UIScene extends Phaser.Scene {
 
   /** Creates the debug panel text object (initially hidden). */
   private createDebugPanel(): void {
+    const hexAlpha = Math.round(this.uiOpacity * 255).toString(16).padStart(2, '0')
     this.debugPanelText = this.add.text(10, 80, '', {
       fontSize: '12px',
       color: '#cccccc',
-      backgroundColor: '#000000cc',
+      backgroundColor: `#000000${hexAlpha}`,
       padding: { x: 8, y: 6 },
       lineSpacing: 2,
       fontFamily: 'monospace',
@@ -443,7 +472,7 @@ export class UIScene extends Phaser.Scene {
     const mx = Math.min(x, this.scale.width  - menuW - 4)
     const my = Math.min(y, this.scale.height - menuH - 4)
 
-    const bg = this.add.rectangle(mx, my, menuW, menuH, 0x000000, 0.88)
+    const bg = this.add.rectangle(mx, my, menuW, menuH, 0x000000, this.uiOpacity)
       .setOrigin(0, 0).setScrollFactor(0).setDepth(300)
     this.contextMenuGroup.add(bg)
 
@@ -488,6 +517,492 @@ export class UIScene extends Phaser.Scene {
     this.scene.get('Game').events.emit('uiMenuClose')
   }
 
+  // ─── ESC key handler ──────────────────────────────────────────────────────
+
+  /**
+   * Handles ESC key presses with a priority stack:
+   * confirm dialog → context menu → build menu → villager panel →
+   * esc menu → build/farm mode (handled by their own systems) → open ESC menu.
+   */
+  private handleEsc(): void {
+    if (this.confirmVisible)      { this.hideConfirm();         return }
+    if (this.contextMenuVisible)  { this.hideContextMenu();     return }
+    if (this.buildMenuVisible)    { this.closeBuildMenu();      return }
+    if (this.villagerPanelVisible){ this.closeVillagerPanel();  return }
+    if (this.nisseInfoVisible)    { this.closeNisseInfoPanel(); return }
+    if (this.settingsVisible)     { this.closeSettings();       return }
+    if (this.escMenuVisible)      { this.closeEscMenu();        return }
+    // Build/farm mode: let BuildingSystem / FarmingSystem handle their own ESC key.
+    // We only skip opening the ESC menu while those modes are active.
+    if (this.inBuildMode || this.inFarmMode) return
+    this.openEscMenu()
+  }
+
+  // ─── ESC Menu ─────────────────────────────────────────────────────────────
+
+  /** Opens the ESC pause menu (New Game / Save / Load / Settings). */
+  private openEscMenu(): void {
+    if (this.escMenuVisible) return
+    this.escMenuVisible = true
+    this.scene.get('Game').events.emit('uiMenuOpen')
+    this.buildEscMenu()
+  }
+
+  /** Closes and destroys the ESC menu. */
+  private closeEscMenu(): void {
+    if (!this.escMenuVisible) return
+    this.escMenuVisible = false
+    this.escMenuGroup.destroy(true)
+    this.escMenuGroup = this.add.group()
+    this.scene.get('Game').events.emit('uiMenuClose')
+  }
+
+  /** Builds the ESC menu UI elements. */
+  private buildEscMenu(): void {
+    if (this.escMenuGroup) this.escMenuGroup.destroy(true)
+    this.escMenuGroup = this.add.group()
+
+    const menuW = 240
+    const btnH  = 40
+    const entries: { label: string; action: () => void }[] = [
+      { label: '💾  Save Game',  action: () => this.doSaveGame() },
+      { label: '📂  Load Game',  action: () => this.doLoadGame() },
+      { label: '⚙️  Settings',   action: () => this.doSettings() },
+      { label: '🆕  New Game',   action: () => this.doNewGame() },
+    ]
+    const menuH = 16 + entries.length * (btnH + 8) + 8
+    const mx = this.scale.width  / 2 - menuW / 2
+    const my = this.scale.height / 2 - menuH / 2
+
+    const bg = this.add.rectangle(mx, my, menuW, menuH, 0x0a0a0a, this.uiOpacity)
+      .setOrigin(0, 0).setScrollFactor(0).setDepth(400)
+    this.escMenuGroup.add(bg)
+    this.escMenuGroup.add(
+      this.add.text(mx + menuW / 2, my + 12, 'MENU  [ESC] close', {
+        fontSize: '11px', color: '#666666', fontFamily: 'monospace',
+      }).setOrigin(0.5, 0).setScrollFactor(0).setDepth(401)
+    )
+
+    entries.forEach((entry, i) => {
+      const by = my + 32 + i * (btnH + 8)
+      const btn = this.add.rectangle(mx + 12, by, menuW - 24, btnH, 0x1a1a2e, 0.9)
+        .setOrigin(0, 0).setScrollFactor(0).setDepth(401).setInteractive()
+      btn.on('pointerover', () => btn.setFillStyle(0x2a2a4e, 0.9))
+      btn.on('pointerout',  () => btn.setFillStyle(0x1a1a2e, 0.9))
+      btn.on('pointerdown', entry.action)
+      this.escMenuGroup.add(btn)
+      this.escMenuGroup.add(
+        this.add.text(mx + 24, by + btnH / 2, entry.label, {
+          fontSize: '14px', color: '#dddddd', fontFamily: 'monospace',
+        }).setOrigin(0, 0.5).setScrollFactor(0).setDepth(402)
+      )
+    })
+  }
+
+  /** Saves the game and shows a toast confirmation. */
+  private doSaveGame(): void {
+    stateManager.save()
+    this.closeEscMenu()
+    this.showToast('Game saved!')
+  }
+
+  /** Reloads the page to load the last save from localStorage. */
+  private doLoadGame(): void {
+    this.closeEscMenu()
+    window.location.reload()
+  }
+
+  /** Opens the Settings overlay. */
+  private doSettings(): void {
+    this.closeEscMenu()
+    this.openSettings()
+  }
+
+  // ─── Settings overlay ─────────────────────────────────────────────────────
+
+  /** Opens the settings overlay if it is not already open. */
+  private openSettings(): void {
+    if (this.settingsVisible) return
+    this.settingsVisible = true
+    this.scene.get('Game').events.emit('uiMenuOpen')
+    this.buildSettings()
+  }
+
+  /** Closes and destroys the settings overlay. */
+  private closeSettings(): void {
+    if (!this.settingsVisible) return
+    this.settingsVisible = false
+    this.settingsGroup.destroy(true)
+    this.settingsGroup = this.add.group()
+    this.scene.get('Game').events.emit('uiMenuClose')
+  }
+
+  /**
+   * Builds the settings overlay with an overlay-opacity row (step buttons).
+   * Destroying and recreating this method is used to refresh the displayed value.
+   */
+  private buildSettings(): void {
+    if (this.settingsGroup) this.settingsGroup.destroy(true)
+    this.settingsGroup = this.add.group()
+
+    const panelW = 280
+    const panelH = 130
+    const px = this.scale.width  / 2 - panelW / 2
+    const py = this.scale.height / 2 - panelH / 2
+
+    // Background
+    const bg = this.add.rectangle(px, py, panelW, panelH, 0x0a0a0a, this.uiOpacity)
+      .setOrigin(0, 0).setScrollFactor(0).setDepth(450)
+    this.settingsGroup.add(bg)
+
+    // Title
+    this.settingsGroup.add(
+      this.add.text(px + panelW / 2, py + 14, '⚙️  SETTINGS  [ESC close]', {
+        fontSize: '11px', color: '#666666', fontFamily: 'monospace',
+      }).setOrigin(0.5, 0).setScrollFactor(0).setDepth(451)
+    )
+
+    // Opacity label
+    this.settingsGroup.add(
+      this.add.text(px + 16, py + 58, 'Overlay opacity:', {
+        fontSize: '13px', color: '#cccccc', fontFamily: 'monospace',
+      }).setOrigin(0, 0.5).setScrollFactor(0).setDepth(451)
+    )
+
+    // Minus button
+    const minusBtn = this.add.rectangle(px + 170, py + 47, 26, 22, 0x1a1a2e, 0.9)
+      .setOrigin(0, 0).setScrollFactor(0).setDepth(451).setInteractive()
+    minusBtn.on('pointerover', () => minusBtn.setFillStyle(0x2a2a4e, 0.9))
+    minusBtn.on('pointerout',  () => minusBtn.setFillStyle(0x1a1a2e, 0.9))
+    minusBtn.on('pointerdown', () => {
+      this.uiOpacity = Math.max(0.4, Math.round((this.uiOpacity - 0.1) * 10) / 10)
+      this.saveUISettings()
+      this.updateDebugPanelBackground()
+      this.buildSettings()
+    })
+    this.settingsGroup.add(minusBtn)
+    this.settingsGroup.add(
+      this.add.text(px + 183, py + 58, '−', {
+        fontSize: '15px', color: '#ffffff', fontFamily: 'monospace',
+      }).setOrigin(0.5, 0.5).setScrollFactor(0).setDepth(452)
+    )
+
+    // Value display
+    this.settingsGroup.add(
+      this.add.text(px + 215, py + 58, `${Math.round(this.uiOpacity * 100)}%`, {
+        fontSize: '13px', color: '#aaaaaa', fontFamily: 'monospace',
+      }).setOrigin(0.5, 0.5).setScrollFactor(0).setDepth(451)
+    )
+
+    // Plus button
+    const plusBtn = this.add.rectangle(px + 242, py + 47, 26, 22, 0x1a1a2e, 0.9)
+      .setOrigin(0, 0).setScrollFactor(0).setDepth(451).setInteractive()
+    plusBtn.on('pointerover', () => plusBtn.setFillStyle(0x2a2a4e, 0.9))
+    plusBtn.on('pointerout',  () => plusBtn.setFillStyle(0x1a1a2e, 0.9))
+    plusBtn.on('pointerdown', () => {
+      this.uiOpacity = Math.min(1.0, Math.round((this.uiOpacity + 0.1) * 10) / 10)
+      this.saveUISettings()
+      this.updateDebugPanelBackground()
+      this.buildSettings()
+    })
+    this.settingsGroup.add(plusBtn)
+    this.settingsGroup.add(
+      this.add.text(px + 255, py + 58, '+', {
+        fontSize: '15px', color: '#ffffff', fontFamily: 'monospace',
+      }).setOrigin(0.5, 0.5).setScrollFactor(0).setDepth(452)
+    )
+
+    // Close button
+    const closeBtnRect = this.add.rectangle(px + panelW / 2 - 50, py + 92, 100, 28, 0x1a1a2e, 0.9)
+      .setOrigin(0, 0).setScrollFactor(0).setDepth(451).setInteractive()
+    closeBtnRect.on('pointerover', () => closeBtnRect.setFillStyle(0x2a2a4e, 0.9))
+    closeBtnRect.on('pointerout',  () => closeBtnRect.setFillStyle(0x1a1a2e, 0.9))
+    closeBtnRect.on('pointerdown', () => this.closeSettings())
+    this.settingsGroup.add(closeBtnRect)
+    this.settingsGroup.add(
+      this.add.text(px + panelW / 2, py + 106, 'Close', {
+        fontSize: '13px', color: '#dddddd', fontFamily: 'monospace',
+      }).setOrigin(0.5, 0.5).setScrollFactor(0).setDepth(452)
+    )
+  }
+
+  /**
+   * Loads UI settings from localStorage and applies the stored opacity value.
+   * Falls back to the default (0.8) if no setting is found.
+   */
+  private loadUISettings(): void {
+    try {
+      const raw = localStorage.getItem(UI_SETTINGS_KEY)
+      if (raw) {
+        const parsed = JSON.parse(raw) as { opacity?: number }
+        if (typeof parsed.opacity === 'number') {
+          this.uiOpacity = Math.max(0.4, Math.min(1.0, parsed.opacity))
+        }
+      }
+    } catch (_) {}
+  }
+
+  /**
+   * Persists the current UI settings (opacity) to localStorage.
+   * Stored separately from the game save so New Game does not wipe it.
+   */
+  private saveUISettings(): void {
+    try {
+      localStorage.setItem(UI_SETTINGS_KEY, JSON.stringify({ opacity: this.uiOpacity }))
+    } catch (_) {}
+  }
+
+  /**
+   * Applies the current uiOpacity to the debug panel text background.
+   * Called whenever uiOpacity changes so the debug panel stays in sync.
+   */
+  private updateDebugPanelBackground(): void {
+    const hexAlpha = Math.round(this.uiOpacity * 255).toString(16).padStart(2, '0')
+    this.debugPanelText.setStyle({ backgroundColor: `#000000${hexAlpha}` })
+  }
+
+  /** Shows a confirmation dialog before starting a new game. */
+  private doNewGame(): void {
+    this.closeEscMenu()
+    this.showConfirm(
+      'Start a new game?\nAll progress will be lost.',
+      () => { stateManager.reset(); window.location.reload() },
+    )
+  }
+
+  // ─── Confirm dialog ───────────────────────────────────────────────────────
+
+  /**
+   * Shows a modal confirmation dialog with OK and Cancel buttons.
+   * @param message   - Message to display (newlines supported)
+   * @param onConfirm - Callback invoked when the user confirms
+   */
+  private showConfirm(message: string, onConfirm: () => void): void {
+    this.hideConfirm()
+    this.confirmVisible = true
+    this.scene.get('Game').events.emit('uiMenuOpen')
+
+    const dialogW = 280
+    const dialogH = 130
+    const dx = this.scale.width  / 2 - dialogW / 2
+    const dy = this.scale.height / 2 - dialogH / 2
+
+    const bg = this.add.rectangle(dx, dy, dialogW, dialogH, 0x0a0a0a, this.uiOpacity)
+      .setOrigin(0, 0).setScrollFactor(0).setDepth(500)
+    this.confirmGroup.add(bg)
+
+    this.confirmGroup.add(
+      this.add.text(dx + dialogW / 2, dy + 20, message, {
+        fontSize: '13px', color: '#cccccc', fontFamily: 'monospace',
+        align: 'center', wordWrap: { width: dialogW - 32 },
+      }).setOrigin(0.5, 0).setScrollFactor(0).setDepth(501)
+    )
+
+    const btnY = dy + dialogH - 44
+    // Cancel button
+    const cancelBtn = this.add.rectangle(dx + 16, btnY, 110, 30, 0x333333, 0.9)
+      .setOrigin(0, 0).setScrollFactor(0).setDepth(501).setInteractive()
+    cancelBtn.on('pointerover', () => cancelBtn.setFillStyle(0x555555, 0.9))
+    cancelBtn.on('pointerout',  () => cancelBtn.setFillStyle(0x333333, 0.9))
+    cancelBtn.on('pointerdown', () => this.hideConfirm())
+    this.confirmGroup.add(cancelBtn)
+    this.confirmGroup.add(
+      this.add.text(dx + 71, btnY + 15, 'Cancel', {
+        fontSize: '13px', color: '#aaaaaa', fontFamily: 'monospace',
+      }).setOrigin(0.5, 0.5).setScrollFactor(0).setDepth(502)
+    )
+
+    // OK button
+    const okBtn = this.add.rectangle(dx + dialogW - 126, btnY, 110, 30, 0x4a1a1a, 0.9)
+      .setOrigin(0, 0).setScrollFactor(0).setDepth(501).setInteractive()
+    okBtn.on('pointerover', () => okBtn.setFillStyle(0x8a2a2a, 0.9))
+    okBtn.on('pointerout',  () => okBtn.setFillStyle(0x4a1a1a, 0.9))
+    okBtn.on('pointerdown', () => { this.hideConfirm(); onConfirm() })
+    this.confirmGroup.add(okBtn)
+    this.confirmGroup.add(
+      this.add.text(dx + dialogW - 71, btnY + 15, 'OK', {
+        fontSize: '13px', color: '#ff8888', fontFamily: 'monospace',
+      }).setOrigin(0.5, 0.5).setScrollFactor(0).setDepth(502)
+    )
+  }
+
+  /** Closes and destroys the confirmation dialog. */
+  private hideConfirm(): void {
+    if (!this.confirmVisible) return
+    this.confirmVisible = false
+    this.confirmGroup.destroy(true)
+    this.confirmGroup = this.add.group()
+    this.scene.get('Game').events.emit('uiMenuClose')
+  }
+
+  // ─── Nisse Info Panel ─────────────────────────────────────────────────────
+
+  /**
+   * Opens (or switches to) the Nisse info panel for the given Nisse ID.
+   * If another Nisse's panel is already open, it is replaced.
+   * @param villagerId - ID of the Nisse to display
+   */
+  private openNisseInfoPanel(villagerId: string): void {
+    this.nisseInfoId = villagerId
+    this.nisseInfoVisible = true
+    this.buildNisseInfoPanel()
+  }
+
+  /** Closes and destroys the Nisse info panel. */
+  private closeNisseInfoPanel(): void {
+    if (!this.nisseInfoVisible) return
+    this.nisseInfoVisible = false
+    this.nisseInfoId = null
+    this.nisseInfoGroup.destroy(true)
+    this.nisseInfoGroup = this.add.group()
+  }
+
+  /**
+   * Builds the static skeleton of the Nisse info panel (background, name, close
+   * button, labels, priority buttons) and stores references to the dynamic parts
+   * (status text, energy bar, job text, work log texts).
+   */
+  private buildNisseInfoPanel(): void {
+    this.nisseInfoGroup.destroy(true)
+    this.nisseInfoGroup  = this.add.group()
+    this.nisseInfoDynamic = null
+
+    const id = this.nisseInfoId
+    if (!id) return
+
+    const state = stateManager.getState()
+    const v     = state.world.villagers[id]
+    if (!v) { this.closeNisseInfoPanel(); return }
+
+    const LOG_ROWS = 10
+    const panelW   = 280
+    const panelH   = 120 + LOG_ROWS * 14 + 16
+    const px = 10, py = 10
+
+    // Background
+    this.nisseInfoGroup.add(
+      this.add.rectangle(px, py, panelW, panelH, 0x050510, this.uiOpacity)
+        .setOrigin(0, 0).setScrollFactor(0).setDepth(250)
+    )
+
+    // Name
+    this.nisseInfoGroup.add(
+      this.add.text(px + 10, py + 10, v.name, {
+        fontSize: '14px', color: '#ffffff', fontFamily: 'monospace',
+      }).setScrollFactor(0).setDepth(251)
+    )
+
+    // Close button
+    const closeBtn = this.add.text(px + panelW - 12, py + 10, '✕', {
+      fontSize: '13px', color: '#888888', fontFamily: 'monospace',
+    }).setOrigin(1, 0).setScrollFactor(0).setDepth(251).setInteractive()
+    closeBtn.on('pointerover', () => closeBtn.setStyle({ color: '#ffffff' }))
+    closeBtn.on('pointerout',  () => closeBtn.setStyle({ color: '#888888' }))
+    closeBtn.on('pointerdown', () => this.closeNisseInfoPanel())
+    this.nisseInfoGroup.add(closeBtn)
+
+    // Dynamic: status text
+    const statusTxt = this.add.text(px + 10, py + 28, '', {
+      fontSize: '11px', color: '#aaaaaa', fontFamily: 'monospace',
+    }).setScrollFactor(0).setDepth(251)
+    this.nisseInfoGroup.add(statusTxt)
+
+    // Dynamic: energy bar + pct
+    const energyBar = this.add.graphics().setScrollFactor(0).setDepth(251)
+    this.nisseInfoGroup.add(energyBar)
+    const energyPct = this.add.text(px + 136, py + 46, '', {
+      fontSize: '10px', color: '#888888', fontFamily: 'monospace',
+    }).setScrollFactor(0).setDepth(251)
+    this.nisseInfoGroup.add(energyPct)
+
+    // Dynamic: job text
+    const jobTxt = this.add.text(px + 10, py + 60, '', {
+      fontSize: '11px', color: '#cccccc', fontFamily: 'monospace',
+    }).setScrollFactor(0).setDepth(251)
+    this.nisseInfoGroup.add(jobTxt)
+
+    // Static: priority label + buttons
+    const jobKeys: Array<{ key: string; icon: string }> = [
+      { key: 'chop', icon: '🪓' }, { key: 'mine', icon: '⛏' }, { key: 'farm', icon: '🌾' },
+    ]
+    jobKeys.forEach((j, i) => {
+      const pri = v.priorities[j.key as keyof typeof v.priorities]
+      const label = pri === 0 ? `${j.icon} OFF` : `${j.icon} P${pri}`
+      const bx = px + 10 + i * 88
+      const btn = this.add.text(bx, py + 78, label, {
+        fontSize: '11px', color: pri === 0 ? '#555555' : '#ffffff',
+        fontFamily: 'monospace', backgroundColor: pri === 0 ? '#1a1a1a' : '#1a3a1a',
+        padding: { x: 5, y: 3 },
+      }).setScrollFactor(0).setDepth(252).setInteractive()
+      btn.on('pointerover', () => btn.setStyle({ backgroundColor: '#2d6a4f' }))
+      btn.on('pointerout',  () => btn.setStyle({ backgroundColor: pri === 0 ? '#1a1a1a' : '#1a3a1a' }))
+      btn.on('pointerdown', () => {
+        const newPri = (v.priorities[j.key as keyof typeof v.priorities] + 1) % 5
+        const newPriorities = { ...v.priorities, [j.key]: newPri }
+        this.scene.get('Game').events.emit('updatePriorities', id, newPriorities)
+        // Rebuild panel so priority buttons reflect the new values immediately
+        this.buildNisseInfoPanel()
+      })
+      this.nisseInfoGroup.add(btn)
+    })
+
+    // Static: work log header
+    this.nisseInfoGroup.add(
+      this.add.text(px + 10, py + 98, '── Work Log ──────────────────', {
+        fontSize: '10px', color: '#555555', fontFamily: 'monospace',
+      }).setScrollFactor(0).setDepth(251)
+    )
+
+    // Dynamic: log text rows (pre-allocated)
+    const logTexts: Phaser.GameObjects.Text[] = []
+    for (let i = 0; i < LOG_ROWS; i++) {
+      const t = this.add.text(px + 10, py + 112 + i * 14, '', {
+        fontSize: '10px', color: '#888888', fontFamily: 'monospace',
+      }).setScrollFactor(0).setDepth(251)
+      this.nisseInfoGroup.add(t)
+      logTexts.push(t)
+    }
+
+    this.nisseInfoDynamic = { statusText: statusTxt, energyBar, energyPct, jobText: jobTxt, logTexts }
+    this.refreshNisseInfoPanel()
+  }
+
+  /**
+   * Updates only the dynamic parts of the Nisse info panel (status, energy,
+   * job, work log) without destroying and recreating the full group.
+   * Called every frame while the panel is visible.
+   */
+  private refreshNisseInfoPanel(): void {
+    const dyn = this.nisseInfoDynamic
+    if (!dyn || !this.nisseInfoId) return
+
+    const state = stateManager.getState()
+    const v     = state.world.villagers[this.nisseInfoId]
+    if (!v) { this.closeNisseInfoPanel(); return }
+
+    const gameScene  = this.scene.get('Game') as any
+    const workLog    = (gameScene.villagerSystem?.getWorkLog(this.nisseInfoId) ?? []) as string[]
+    const statusStr  = (gameScene.villagerSystem?.getStatusText(this.nisseInfoId) ?? '—') as string
+
+    dyn.statusText.setText(statusStr)
+
+    // Energy bar
+    const px = 10, py = 10
+    dyn.energyBar.clear()
+    dyn.energyBar.fillStyle(0x333333); dyn.energyBar.fillRect(px + 10, py + 46, 120, 7)
+    const col = v.energy > 60 ? 0x4CAF50 : v.energy > 30 ? 0xFF9800 : 0xF44336
+    dyn.energyBar.fillStyle(col); dyn.energyBar.fillRect(px + 10, py + 46, 120 * (v.energy / 100), 7)
+    dyn.energyPct.setText(`${Math.round(v.energy)}%`)
+
+    // Job
+    dyn.jobText.setText(`Job: ${v.job ? `${v.job.type} → (${v.job.tileX}, ${v.job.tileY})` : '—'}`)
+
+    // Work log rows
+    dyn.logTexts.forEach((t, i) => {
+      t.setText(workLog[i] ?? '')
+    })
+  }
+
   // ─── Resize ───────────────────────────────────────────────────────────────
 
   /**
@@ -515,8 +1030,12 @@ export class UIScene extends Phaser.Scene {
 
     // Close centered panels — their position is calculated on open, so they
     // would be off-center if left open during a resize
-    if (this.buildMenuVisible)    this.closeBuildMenu()
-    if (this.villagerPanelVisible) this.closeVillagerPanel()
-    if (this.contextMenuVisible)   this.hideContextMenu()
+    if (this.buildMenuVisible)     this.closeBuildMenu()
+    if (this.villagerPanelVisible)  this.closeVillagerPanel()
+    if (this.contextMenuVisible)    this.hideContextMenu()
+    if (this.escMenuVisible)        this.closeEscMenu()
+    if (this.settingsVisible)       this.closeSettings()
+    if (this.confirmVisible)        this.hideConfirm()
+    if (this.nisseInfoVisible)      this.closeNisseInfoPanel()
   }
 }

src/systems/FarmingSystem.ts

@@ -5,15 +5,16 @@ import type { CropKind, CropState, ItemId } from '../types'
 import { stateManager } from '../StateManager'
 import type { LocalAdapter } from '../NetworkAdapter'
 
-export type FarmingTool = 'none' | 'hoe' | 'wheat_seed' | 'carrot_seed' | 'water'
+export type FarmingTool = 'none' | 'hoe' | 'wheat_seed' | 'carrot_seed' | 'tree_seed' | 'water'
 
-const TOOL_CYCLE: FarmingTool[] = ['none', 'hoe', 'wheat_seed', 'carrot_seed', 'water']
+const TOOL_CYCLE: FarmingTool[] = ['none', 'hoe', 'wheat_seed', 'carrot_seed', 'tree_seed', 'water']
 
 const TOOL_LABELS: Record<FarmingTool, string> = {
   none:        '— None',
   hoe:         '⛏  Hoe  (till grass)',
   wheat_seed:  '🌾 Wheat Seeds',
   carrot_seed: '🥕 Carrot Seeds',
+  tree_seed:   '🌲 Tree Seeds (plant on grass)',
   water:       '💧 Watering Can',
 }
 
@@ -30,6 +31,14 @@ export class FarmingSystem {
   onToolChange?: (tool: FarmingTool, label: string) => void
   /** Emitted for toast notifications */
   onMessage?: (msg: string) => void
+  /**
+   * Called when the player uses the tree_seed tool on a tile.
+   * @param tileX - Target tile column
+   * @param tileY - Target tile row
+   * @param underlyingTile - The tile type at that position
+   * @returns true if planting succeeded, false if validation failed
+   */
+  onPlantTreeSeed?: (tileX: number, tileY: number, underlyingTile: TileType) => boolean
 
   constructor(scene: Phaser.Scene, adapter: LocalAdapter) {
     this.scene = scene
@@ -87,9 +96,27 @@ export class FarmingSystem {
     const state = stateManager.getState()
     const tile = state.world.tiles[tileY * 512 + tileX] as TileType
 
-    if (this.currentTool === 'hoe')         this.tillSoil(tileX, tileY, tile)
-    else if (this.currentTool === 'water')  this.waterTile(tileX, tileY, tile)
-    else                                    this.plantCrop(tileX, tileY, tile, this.currentTool.replace('_seed', '') as CropKind)
+    if (this.currentTool === 'hoe')            this.tillSoil(tileX, tileY, tile)
+    else if (this.currentTool === 'water')     this.waterTile(tileX, tileY, tile)
+    else if (this.currentTool === 'tree_seed') this.plantTreeSeed(tileX, tileY, tile)
+    else                                       this.plantCrop(tileX, tileY, tile, this.currentTool.replace('_seed', '') as CropKind)
+  }
+
+  /**
+   * Delegates tree-seedling planting to the registered callback (TreeSeedlingSystem).
+   * Only works on GRASS or DARK_GRASS tiles. Shows a toast on success or failure.
+   * @param tileX - Target tile column
+   * @param tileY - Target tile row
+   * @param tile  - Current tile type at that position
+   */
+  private plantTreeSeed(tileX: number, tileY: number, tile: TileType): void {
+    if (tile !== TileType.GRASS && tile !== TileType.DARK_GRASS) {
+      this.onMessage?.('Plant tree seeds on grass!')
+      return
+    }
+    const ok = this.onPlantTreeSeed?.(tileX, tileY, tile)
+    if (ok === false) this.onMessage?.('No tree seeds, or tile is occupied!')
+    else if (ok)      this.onMessage?.('Tree seed planted! 🌱 (~2 min to grow)')
   }
 
   private tillSoil(tileX: number, tileY: number, tile: TileType): void {

src/systems/ResourceSystem.ts

@@ -76,6 +76,16 @@ export class ResourceSystem {
     this.removeSprite(id)
   }
 
+  /**
+   * Spawns a sprite for a resource that was created at runtime
+   * (e.g. a tree grown from a seedling). The resource must already be
+   * present in the game state when this is called.
+   * @param node - The resource node to render
+   */
+  public spawnResourcePublic(node: ResourceNodeState): void {
+    this.spawnSprite(node)
+  }
+
   /** Called when WorldSystem changes a tile (e.g. after tree removed) */
   syncTileChange(tileX: number, tileY: number, worldSystem: { setTile: (x: number, y: number, type: TileType) => void }): void {
     const state = stateManager.getState()

src/systems/TreeSeedlingSystem.ts

@@ -0,0 +1,131 @@
+import Phaser from 'phaser'
+import { TILE_SIZE, TREE_SEEDLING_STAGE_MS } from '../config'
+import { TileType, PLANTABLE_TILES } from '../types'
+import type { TreeSeedlingState } from '../types'
+import { stateManager } from '../StateManager'
+import type { LocalAdapter } from '../NetworkAdapter'
+import type { WorldSystem } from './WorldSystem'
+
+export class TreeSeedlingSystem {
+  private scene: Phaser.Scene
+  private adapter: LocalAdapter
+  private worldSystem: WorldSystem
+  private sprites = new Map<string, Phaser.GameObjects.Image>()
+
+  /**
+   * @param scene       - The Phaser scene this system belongs to
+   * @param adapter     - Network adapter for dispatching state actions
+   * @param worldSystem - Used to refresh the terrain canvas when a seedling matures
+   */
+  constructor(scene: Phaser.Scene, adapter: LocalAdapter, worldSystem: WorldSystem) {
+    this.scene = scene
+    this.adapter = adapter
+    this.worldSystem = worldSystem
+  }
+
+  /** Spawns sprites for all seedlings that exist in the saved state. */
+  create(): void {
+    const state = stateManager.getState()
+    for (const s of Object.values(state.world.treeSeedlings)) {
+      this.spawnSprite(s)
+    }
+  }
+
+  /**
+   * Ticks all seedling growth timers and handles stage changes.
+   * Stage 0→1: updates the sprite to the sapling texture.
+   * Stage 1→2: removes the seedling, spawns a tree resource, and updates the terrain canvas.
+   * @param delta - Frame delta in milliseconds
+   */
+  update(delta: number): void {
+    const advanced = stateManager.tickSeedlings(delta)
+    for (const id of advanced) {
+      const state = stateManager.getState()
+      const seedling = state.world.treeSeedlings[id]
+      if (!seedling) continue
+
+      if (seedling.stage === 2) {
+        // Fully mature: become a FOREST tile and a real tree resource
+        const { tileX, tileY } = seedling
+        this.removeSprite(id)
+        this.adapter.send({ type: 'REMOVE_TREE_SEEDLING', seedlingId: id })
+        this.adapter.send({ type: 'CHANGE_TILE', tileX, tileY, tile: TileType.FOREST })
+        this.worldSystem.refreshTerrainTile(tileX, tileY, TileType.FOREST)
+
+        const resourceId = `tree_grown_${tileX}_${tileY}_${Date.now()}`
+        this.adapter.send({
+          type: 'SPAWN_RESOURCE',
+          resource: { id: resourceId, tileX, tileY, kind: 'tree', hp: 3 },
+        })
+      } else {
+        // Stage 0→1: update sprite to sapling
+        const sprite = this.sprites.get(id)
+        if (sprite) sprite.setTexture(`seedling_${seedling.stage}`)
+      }
+    }
+  }
+
+  /**
+   * Attempts to plant a tree seedling on a grass tile.
+   * Validates that the stockpile has at least one tree_seed, the tile type is
+   * plantable (GRASS or DARK_GRASS), and no other object occupies the tile.
+   * @param tileX          - Target tile column
+   * @param tileY          - Target tile row
+   * @param underlyingTile - The current tile type (stored on the seedling for later restoration)
+   * @returns true if the seedling was planted, false if validation failed
+   */
+  plantSeedling(tileX: number, tileY: number, underlyingTile: TileType): boolean {
+    const state = stateManager.getState()
+
+    if ((state.world.stockpile.tree_seed ?? 0) <= 0) return false
+    if (!PLANTABLE_TILES.has(underlyingTile)) return false
+
+    const occupied =
+      Object.values(state.world.resources).some(r => r.tileX === tileX && r.tileY === tileY) ||
+      Object.values(state.world.buildings).some(b => b.tileX === tileX && b.tileY === tileY) ||
+      Object.values(state.world.crops).some(c => c.tileX === tileX && c.tileY === tileY) ||
+      Object.values(state.world.treeSeedlings).some(s => s.tileX === tileX && s.tileY === tileY)
+
+    if (occupied) return false
+
+    const id = `seedling_${tileX}_${tileY}_${Date.now()}`
+    const seedling: TreeSeedlingState = {
+      id, tileX, tileY,
+      stage: 0,
+      stageTimerMs: TREE_SEEDLING_STAGE_MS,
+      underlyingTile,
+    }
+
+    this.adapter.send({ type: 'PLANT_TREE_SEED', seedling })
+    this.spawnSprite(seedling)
+    return true
+  }
+
+  /**
+   * Creates and registers the sprite for a seedling.
+   * @param s - Seedling state to render
+   */
+  private spawnSprite(s: TreeSeedlingState): void {
+    const x = (s.tileX + 0.5) * TILE_SIZE
+    const y = (s.tileY + 0.5) * TILE_SIZE
+    const key = `seedling_${Math.min(s.stage, 2)}`
+    const sprite = this.scene.add.image(x, y, key)
+      .setOrigin(0.5, 0.85)
+      .setDepth(5)
+    this.sprites.set(s.id, sprite)
+  }
+
+  /**
+   * Destroys the sprite for a seedling and removes it from the registry.
+   * @param id - Seedling ID
+   */
+  private removeSprite(id: string): void {
+    const s = this.sprites.get(id)
+    if (s) { s.destroy(); this.sprites.delete(id) }
+  }
+
+  /** Destroys all seedling sprites and clears the registry. */
+  destroy(): void {
+    for (const id of [...this.sprites.keys()]) this.removeSprite(id)
+  }
+}

src/systems/VillagerSystem.ts

@@ -11,6 +11,8 @@ import type { FarmingSystem } from './FarmingSystem'
 
 const ARRIVAL_PX = 3
 
+const WORK_LOG_MAX = 20
+
 interface VillagerRuntime {
   sprite: Phaser.GameObjects.Image
   nameLabel: Phaser.GameObjects.Text
@@ -20,6 +22,8 @@ interface VillagerRuntime {
   destination: 'job' | 'stockpile' | 'bed' | null
   workTimer: number
   idleScanTimer: number
+  /** Runtime-only activity log; not persisted. Max WORK_LOG_MAX entries. */
+  workLog: string[]
 }
 
 export class VillagerSystem {
@@ -35,6 +39,7 @@ export class VillagerSystem {
   private nameIndex = 0
 
   onMessage?: (msg: string) => void
+  onNisseClick?: (villagerId: string) => void
 
   /**
    * @param scene        - The Phaser scene this system belongs to
@@ -139,13 +144,21 @@ export class VillagerSystem {
     // Carrying items? → find stockpile
     if (v.job?.carrying && Object.values(v.job.carrying).some(n => (n ?? 0) > 0)) {
       const sp = this.nearestBuilding(v, 'stockpile_zone')
-      if (sp) { this.beginWalk(v, rt, sp.tileX, sp.tileY, 'stockpile'); return }
+      if (sp) {
+        this.addLog(v.id, '→ Hauling to stockpile')
+        this.beginWalk(v, rt, sp.tileX, sp.tileY, 'stockpile')
+        return
+      }
     }
 
     // Low energy → find bed
     if (v.energy < 25) {
       const bed = this.findBed(v)
-      if (bed) { this.beginWalk(v, rt, bed.tileX, bed.tileY, 'bed'); return }
+      if (bed) {
+        this.addLog(v.id, '→ Going to sleep (low energy)')
+        this.beginWalk(v, rt, bed.tileX, bed.tileY, 'bed')
+        return
+      }
     }
 
     // Find a job
@@ -156,6 +169,7 @@ export class VillagerSystem {
         type: 'VILLAGER_SET_JOB', villagerId: v.id,
         job: { type: job.type, targetId: job.targetId, tileX: job.tileX, tileY: job.tileY, carrying: {} },
       })
+      this.addLog(v.id, `→ Walking to ${job.type} at (${job.tileX}, ${job.tileY})`)
       this.beginWalk(v, rt, job.tileX, job.tileY, 'job')
     } else {
       // No job available — wait before scanning again
@@ -218,10 +232,12 @@ export class VillagerSystem {
         this.adapter.send({ type: 'VILLAGER_DEPOSIT', villagerId: v.id })
         this.adapter.send({ type: 'VILLAGER_SET_AI', villagerId: v.id, aiState: 'idle' })
         rt.idleScanTimer = 0  // scan for a new job immediately after deposit
+        this.addLog(v.id, '✓ Deposited at stockpile')
         break
 
       case 'bed':
         this.adapter.send({ type: 'VILLAGER_SET_AI', villagerId: v.id, aiState: 'sleeping' })
+        this.addLog(v.id, '💤 Sleeping...')
         break
 
       default:
@@ -260,7 +276,10 @@ export class VillagerSystem {
         this.adapter.send({ type: 'VILLAGER_HARVEST_RESOURCE', villagerId: v.id, resourceId: job.targetId })
         // Clear the FOREST tile so the area becomes passable for future pathfinding
         this.adapter.send({ type: 'CHANGE_TILE', tileX: res.tileX, tileY: res.tileY, tile: TileType.DARK_GRASS })
+        // Start recovery timer so DARK_GRASS reverts to GRASS after 5 minutes
+        this.adapter.send({ type: 'TILE_RECOVERY_START', tileX: res.tileX, tileY: res.tileY })
         this.resourceSystem.removeResource(job.targetId)
+        this.addLog(v.id, '✓ Chopped tree (+2 wood)')
       }
     } else if (job.type === 'mine') {
       const res = state.world.resources[job.targetId]
@@ -269,6 +288,7 @@ export class VillagerSystem {
         // Clear the ROCK tile so the area becomes passable for future pathfinding
         this.adapter.send({ type: 'CHANGE_TILE', tileX: res.tileX, tileY: res.tileY, tile: TileType.GRASS })
         this.resourceSystem.removeResource(job.targetId)
+        this.addLog(v.id, '✓ Mined rock (+2 stone)')
       }
     } else if (job.type === 'farm') {
       const crop = state.world.crops[job.targetId]
@@ -276,6 +296,7 @@ export class VillagerSystem {
         this.adapter.send({ type: 'VILLAGER_HARVEST_CROP', villagerId: v.id, cropId: job.targetId })
         this.farmingSystem.removeCropSpritePublic(job.targetId)
         this.adapter.send({ type: 'CHANGE_TILE', tileX: crop.tileX, tileY: crop.tileY, tile: 9 as any })
+        this.addLog(v.id, `✓ Farmed ${crop.kind}`)
       }
     }
 
@@ -304,6 +325,7 @@ export class VillagerSystem {
     if (v.energy >= 100) {
       rt.sprite.setAngle(0)
       this.adapter.send({ type: 'VILLAGER_SET_AI', villagerId: v.id, aiState: 'idle' })
+      this.addLog(v.id, '✓ Woke up (energy full)')
     }
   }
 
@@ -467,7 +489,10 @@ export class VillagerSystem {
     const energyBar = this.scene.add.graphics().setDepth(12)
     const jobIcon   = this.scene.add.text(v.x, v.y - 18, '', { fontSize: '10px' }).setDepth(13)
 
-    this.runtime.set(v.id, { sprite, nameLabel, energyBar, jobIcon, path: [], destination: null, workTimer: 0, idleScanTimer: 0 })
+    sprite.setInteractive()
+    sprite.on('pointerdown', () => this.onNisseClick?.(v.id))
+
+    this.runtime.set(v.id, { sprite, nameLabel, energyBar, jobIcon, path: [], destination: null, workTimer: 0, idleScanTimer: 0, workLog: [] })
   }
 
   /**
@@ -486,6 +511,21 @@ export class VillagerSystem {
     g.fillStyle(col);      g.fillRect(x - W/2, y - 28, W * (energy / 100), H)
   }
 
+  // ─── Work log ─────────────────────────────────────────────────────────────
+
+  /**
+   * Prepends a message to the runtime work log for the given Nisse.
+   * Trims the log to WORK_LOG_MAX entries. No-ops if the Nisse is not found.
+   * @param villagerId - Target Nisse ID
+   * @param msg        - Log message to prepend
+   */
+  private addLog(villagerId: string, msg: string): void {
+    const rt = this.runtime.get(villagerId)
+    if (!rt) return
+    rt.workLog.unshift(msg)
+    if (rt.workLog.length > WORK_LOG_MAX) rt.workLog.length = WORK_LOG_MAX
+  }
+
   // ─── Public API ───────────────────────────────────────────────────────────
 
   /**
@@ -506,6 +546,15 @@ export class VillagerSystem {
     return '💭 Idle'
   }
 
+  /**
+   * Returns a copy of the runtime work log for the given Nisse (newest first).
+   * @param villagerId - The Nisse's ID
+   * @returns Array of log strings, or empty array if not found
+   */
+  getWorkLog(villagerId: string): string[] {
+    return [...(this.runtime.get(villagerId)?.workLog ?? [])]
+  }
+
   /**
    * Returns the current world position and remaining path for every Nisse
    * that is currently in the 'walking' state. Used by DebugSystem for

src/systems/WorldSystem.ts

@@ -21,6 +21,7 @@ export class WorldSystem {
   private tileset!: Phaser.Tilemaps.Tileset
   private bgImage!: Phaser.GameObjects.Image
   private builtLayer!: Phaser.Tilemaps.TilemapLayer
+  private bgCanvasTexture!: Phaser.Textures.CanvasTexture
 
   /** @param scene - The Phaser scene this system belongs to */
   constructor(scene: Phaser.Scene) {
@@ -35,10 +36,8 @@ export class WorldSystem {
     const state = stateManager.getState()
 
     // --- Canvas background (1px per tile, scaled up, LINEAR filtered) ---
-    const canvas = document.createElement('canvas')
-    canvas.width = WORLD_TILES
-    canvas.height = WORLD_TILES
-    const ctx = canvas.getContext('2d')!
+    const canvasTexture = this.scene.textures.createCanvas('terrain_bg', WORLD_TILES, WORLD_TILES) as Phaser.Textures.CanvasTexture
+    const ctx = canvasTexture.context
 
     for (let y = 0; y < WORLD_TILES; y++) {
       for (let x = 0; x < WORLD_TILES; x++) {
@@ -48,12 +47,14 @@ export class WorldSystem {
       }
     }
 
-    this.scene.textures.addCanvas('terrain_bg', canvas)
+    canvasTexture.refresh()
+    this.bgCanvasTexture = canvasTexture
+
     this.bgImage = this.scene.add.image(0, 0, 'terrain_bg')
       .setOrigin(0, 0)
       .setScale(TILE_SIZE)
       .setDepth(0)
-    this.scene.textures.get('terrain_bg').setFilter(Phaser.Textures.FilterMode.LINEAR)
+    canvasTexture.setFilter(Phaser.Textures.FilterMode.LINEAR)
 
     // --- Built tile layer (sparse — only FLOOR, WALL, TILLED_SOIL, WATERED_SOIL) ---
     this.map = this.scene.make.tilemap({
@@ -157,6 +158,21 @@ export class WorldSystem {
     return state.world.tiles[tileY * WORLD_TILES + tileX] as TileType
   }
 
+  /**
+   * Updates a single tile's pixel on the background canvas and refreshes the GPU texture.
+   * Used when a natural tile changes at runtime (e.g. DARK_GRASS → GRASS after recovery,
+   * or GRASS → FOREST when a seedling matures).
+   * @param tileX - Tile column
+   * @param tileY - Tile row
+   * @param type  - New tile type to reflect visually
+   */
+  refreshTerrainTile(tileX: number, tileY: number, type: TileType): void {
+    const color = BIOME_COLORS[type] ?? '#0a2210'
+    this.bgCanvasTexture.context.fillStyle = color
+    this.bgCanvasTexture.context.fillRect(tileX, tileY, 1, 1)
+    this.bgCanvasTexture.refresh()
+  }
+
   /** Destroys the tilemap and background image. */
   destroy(): void {
     this.map.destroy()

src/types.ts

@@ -20,7 +20,10 @@ export const IMPASSABLE = new Set<number>([
   TileType.WALL,
 ])
 
-export type ItemId = 'wood' | 'stone' | 'wheat_seed' | 'carrot_seed' | 'wheat' | 'carrot'
+/** Tiles on which tree seedlings may be planted. */
+export const PLANTABLE_TILES = new Set<TileType>([TileType.GRASS, TileType.DARK_GRASS])
+
+export type ItemId = 'wood' | 'stone' | 'wheat_seed' | 'carrot_seed' | 'wheat' | 'carrot' | 'tree_seed'
 
 export type BuildingType = 'floor' | 'wall' | 'chest' | 'bed' | 'stockpile_zone'
 
@@ -90,6 +93,18 @@ export interface PlayerState {
   inventory: Partial<Record<ItemId, number>>
 }
 
+export interface TreeSeedlingState {
+  id: string
+  tileX: number
+  tileY: number
+  /** Growth stage: 0 = sprout, 1 = sapling, 2 = mature (converts to resource). */
+  stage: number
+  /** Time remaining until next stage advance, in milliseconds. */
+  stageTimerMs: number
+  /** The tile type that was under the seedling when planted (GRASS or DARK_GRASS). */
+  underlyingTile: TileType
+}
+
 export interface WorldState {
   seed: number
   tiles: number[]
@@ -98,6 +113,13 @@ export interface WorldState {
   crops: Record<string, CropState>
   villagers: Record<string, VillagerState>
   stockpile: Partial<Record<ItemId, number>>
+  /** Planted tree seedlings, keyed by ID. */
+  treeSeedlings: Record<string, TreeSeedlingState>
+  /**
+   * Recovery timers for DARK_GRASS tiles, keyed by "tileX,tileY".
+   * Value is remaining milliseconds until the tile reverts to GRASS.
+   */
+  tileRecovery: Record<string, number>
 }
 
 export interface GameStateData {
@@ -123,3 +145,7 @@ export type GameAction =
   | { type: 'VILLAGER_HARVEST_CROP';    villagerId: string; cropId: string }
   | { type: 'VILLAGER_DEPOSIT';         villagerId: string }
   | { type: 'UPDATE_PRIORITIES';        villagerId: string; priorities: JobPriorities }
+  | { type: 'PLANT_TREE_SEED';         seedling: TreeSeedlingState }
+  | { type: 'REMOVE_TREE_SEEDLING';    seedlingId: string }
+  | { type: 'SPAWN_RESOURCE';          resource: ResourceNodeState }
+  | { type: 'TILE_RECOVERY_START';     tileX: number; tileY: number }