fix(ludo): center pawns in home, fix center triangles geometry

- Home bases: positions at grid 1.5/3.5 (exact quadrant centers)
- Center: 4 triangles now form a proper square (top=red, right=blue,
  bottom=green, left=yellow) with white border — like real Ludo boards
- Removed weird angle-based triangle calculation
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/js/modules/ludo/logic/board-map.js

@@ -35,13 +35,16 @@ export const HOME_ENTRY = [0, 13, 26, 39]; // The square just before home column
 // Safe squares (stars) — pieces can't be captured here
 export const SAFE_SQUARES = [0, 8, 13, 21, 26, 34, 39, 47];
 
-// Home base positions (where pieces sit before entering the board)
-// Centered within the 6x6 home zone with proper spacing
+// Home base positions — 4 pieces in 2x2 grid, centered in each home zone
+// gridToPixel adds cellSize/2 to convert grid coords to pixel center
+// So grid pos 2 → pixel at 2*cs + cs/2 = 2.5*cs from board edge
+// Home zone 0-5: quadrant centers at grid 1.5 and 3.5 (pixel 2cs and 4cs)
+// Home zone 9-14: quadrant centers at grid 10.5 and 12.5
 export const HOME_BASES = [
-  [[1.8,1.8],[4.2,1.8],[1.8,4.2],[4.2,4.2]],           // Red (top-left)
-  [[9.8,1.8],[12.2,1.8],[9.8,4.2],[12.2,4.2]],         // Blue (top-right)
-  [[9.8,9.8],[12.2,9.8],[9.8,12.2],[12.2,12.2]],       // Green (bottom-right)
-  [[1.8,9.8],[4.2,9.8],[1.8,12.2],[4.2,12.2]],         // Yellow (bottom-left)
+  [[1.5,1.5],[3.5,1.5],[1.5,3.5],[3.5,3.5]],           // Red (top-left)
+  [[10.5,1.5],[12.5,1.5],[10.5,3.5],[12.5,3.5]],       // Blue (top-right)
+  [[10.5,10.5],[12.5,10.5],[10.5,12.5],[12.5,12.5]],   // Green (bottom-right)
+  [[1.5,10.5],[3.5,10.5],[1.5,12.5],[3.5,12.5]],       // Yellow (bottom-left)
 ];
 
 // Convert a board grid position [col,row] to pixel coordinates

public/js/modules/ludo/scenes/game.js

@@ -191,9 +191,23 @@ function drawBoard() {
   // Safe squares
   SAFE_SQUARES.forEach(idx => { const [col,row] = SHARED_PATH[idx]; ctx.fillStyle = '#FFF9C4'; ctx.fillRect(col*cs+1,row*cs+1,cs-2,cs-2); ctx.fillStyle = '#F9A825'; ctx.font = `${cs*0.45}px sans-serif`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('★', col*cs+cs/2, row*cs+cs/2); });
 
-  // Center triangles
-  const cx = 7.5*cs, cy = 7.5*cs;
-  for (let i = 0; i < 4; i++) { ctx.fillStyle = COLORS[i]; ctx.beginPath(); const a = i*Math.PI/2 - Math.PI/4; ctx.moveTo(cx,cy); ctx.lineTo(cx+Math.cos(a-0.7)*cs*2, cy+Math.sin(a-0.7)*cs*2); ctx.lineTo(cx+Math.cos(a+0.7)*cs*2, cy+Math.sin(a+0.7)*cs*2); ctx.closePath(); ctx.fill(); }
+  // Center — 4 colored triangles forming a square (finish area)
+  const cx = 7.5*cs, cy = 7.5*cs, hs = 1.5*cs;
+  // Red triangle (top)
+  ctx.fillStyle = COLORS[0]; ctx.beginPath();
+  ctx.moveTo(cx-hs, cy-hs); ctx.lineTo(cx+hs, cy-hs); ctx.lineTo(cx, cy); ctx.closePath(); ctx.fill();
+  // Blue triangle (right)
+  ctx.fillStyle = COLORS[1]; ctx.beginPath();
+  ctx.moveTo(cx+hs, cy-hs); ctx.lineTo(cx+hs, cy+hs); ctx.lineTo(cx, cy); ctx.closePath(); ctx.fill();
+  // Green triangle (bottom)
+  ctx.fillStyle = COLORS[2]; ctx.beginPath();
+  ctx.moveTo(cx+hs, cy+hs); ctx.lineTo(cx-hs, cy+hs); ctx.lineTo(cx, cy); ctx.closePath(); ctx.fill();
+  // Yellow triangle (left)
+  ctx.fillStyle = COLORS[3]; ctx.beginPath();
+  ctx.moveTo(cx-hs, cy+hs); ctx.lineTo(cx-hs, cy-hs); ctx.lineTo(cx, cy); ctx.closePath(); ctx.fill();
+  // Center border
+  ctx.strokeStyle = '#fff'; ctx.lineWidth = 1.5;
+  ctx.strokeRect(cx-hs, cy-hs, hs*2, hs*2);
 
   // Start position colored squares
   const startColors = [[6,1,'#FFCDD2'],[8,13,'#C8E6C9'],[1,8,'#FFF9C4'],[13,6,'#BBDEFB']];