feat: Add Pause system, User Profile Dashboard, and shift grid with neighbour fence

- Implement in-game pause with Space/KeyP hotkeys and pause banner overlay
- Split Auth modal into clean Profile Dashboard (stats, coins, cloud save status) and Guest Login
- Shift lawn startY to 108 to make top-row zombie HP bars 100% visible
- Render decorative wooden neighbour fence above top row

game/js/systems/grid.js

@@ -4,7 +4,7 @@ window.GridSystem = class GridSystem {
     this.biome = 'day'; // 'day', 'night', 'pool'
     this.cols = 9;
     this.startX = 120;
-    this.startY = 90;
+    this.startY = 108; // Shifted down so zombie HP bars in top row are fully visible under HUD
     this.cellW = 80;
 
     this.graves = [];
@@ -15,7 +15,7 @@ window.GridSystem = class GridSystem {
   initBiome(biome = 'day') {
     this.biome = biome;
     this.rows = (biome === 'pool' || biome === 'fog') ? 6 : 5;
-    this.cellH = (biome === 'pool' || biome === 'fog') ? 83 : 100;
+    this.cellH = (biome === 'pool' || biome === 'fog') ? 80 : 96;
 
     this.grid = [];
     for (let r = 0; r < this.rows; r++) {
@@ -246,6 +246,9 @@ window.GridSystem = class GridSystem {
       ctx.fillRect(rightEdge, this.startY, 900 - rightEdge, this.rows * this.cellH);
     }
 
+    // 2b. Decorative Neighbour Fence along top edge (y: 86..108)
+    this.drawNeighbourFence(ctx);
+
     // 4. Draw Gravestones in Night Mode
     for (const grave of this.graves) {
       const bounds = this.getCellBounds(grave.col, grave.row);
@@ -425,4 +428,78 @@ window.GridSystem = class GridSystem {
 
     ctx.restore();
   }
+
+  drawNeighbourFence(ctx) {
+    if (this.biome === 'roof') return; // Roof has shingles/gutters instead
+
+    const fenceY = 88;
+    const fenceH = 20;
+
+    ctx.save();
+
+    // 1. Shadow under fence on the lawn
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.28)';
+    ctx.fillRect(0, fenceY + fenceH - 2, 900, 4);
+
+    // 2. Dirt/Base Strip
+    ctx.fillStyle = (this.biome === 'night' || this.biome === 'fog') ? '#1a0f07' : '#3e2723';
+    ctx.fillRect(0, fenceY + fenceH - 4, 900, 4);
+
+    // 3. Horizontal Support Rails
+    const isNight = this.biome === 'night' || this.biome === 'fog';
+    const isWinter = this.theme === 'winter';
+    const isCyber = this.theme === 'cyberpunk';
+
+    let railColor = isNight ? '#4e342e' : '#8d6e63';
+    let picketColor = isNight ? '#5d4037' : '#d7ccc8';
+    let picketTopColor = isNight ? '#795548' : '#efebe9';
+
+    if (isWinter) {
+      picketColor = '#eceff1';
+      picketTopColor = '#ffffff';
+      railColor = '#b0bec5';
+    } else if (isCyber) {
+      picketColor = '#21083a';
+      picketTopColor = '#00e5ff';
+      railColor = '#e91e63';
+    }
+
+    // Top & Bottom Horizontal Rails
+    ctx.fillStyle = railColor;
+    ctx.fillRect(0, fenceY + 4, 900, 3);
+    ctx.fillRect(0, fenceY + 12, 900, 3);
+
+    // 4. Vertical Pickets (Wooden Fence Slats)
+    const picketWidth = 8;
+    const picketGap = 16;
+    for (let x = 4; x < 900; x += picketGap) {
+      // Picket Body
+      ctx.fillStyle = picketColor;
+      ctx.fillRect(x, fenceY + 2, picketWidth, fenceH - 4);
+
+      // Pointy Picket Cap
+      ctx.fillStyle = picketTopColor;
+      ctx.beginPath();
+      ctx.moveTo(x, fenceY + 2);
+      ctx.lineTo(x + picketWidth / 2, fenceY - 2);
+      ctx.lineTo(x + picketWidth, fenceY + 2);
+      ctx.closePath();
+      ctx.fill();
+
+      // Nail / Wood detail
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
+      ctx.fillRect(x + 3, fenceY + 5, 2, 2);
+      ctx.fillRect(x + 3, fenceY + 13, 2, 2);
+
+      // Winter snow cap
+      if (isWinter) {
+        ctx.fillStyle = '#ffffff';
+        ctx.beginPath();
+        ctx.arc(x + picketWidth / 2, fenceY - 2, 3, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+
+    ctx.restore();
+  }
 };