fix: center ludo pieces on grid cells and improve sizing

Pieces were positioned at cell top-left corners instead of centers.
Added half-step offset to both top/left calculations. Increased piece
size from 4% to 5.2% for better visibility. Adjusted stacking offsets.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/css/ludo.css

@@ -222,8 +222,8 @@
 
 .ludo-piece {
   position: absolute;
-  width: 4%;
-  height: 4%;
+  width: 5.2%;
+  height: 5.2%;
   border-radius: 50%;
   border: 2px solid rgba(0,0,0,0.3);
   transform: translate(-50%, -50%);
@@ -231,7 +231,7 @@
   z-index: 2;
   pointer-events: auto;
   cursor: default;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 -2px 3px rgba(0,0,0,0.2);
 }
 
 .ludo-piece--p1 { background: var(--ludo-p1); }
@@ -261,9 +261,9 @@
 }
 
 /* Stacking offset for pieces on same cell */
-.ludo-piece[data-stack="1"] { margin-left: 1.5%; margin-top: -1%; }
-.ludo-piece[data-stack="2"] { margin-left: -1.5%; margin-top: 1%; }
-.ludo-piece[data-stack="3"] { margin-left: 1.5%; margin-top: 1%; }
+.ludo-piece[data-stack="1"] { margin-left: 2.2%; margin-top: -1.5%; }
+.ludo-piece[data-stack="2"] { margin-left: -2.2%; margin-top: 1.5%; }
+.ludo-piece[data-stack="3"] { margin-left: 2.2%; margin-top: 1.5%; }
 
 /* ============================================
    DICE

public/js/ludo-constants.js

@@ -106,29 +106,29 @@ var LudoConstants = (function() {
     404: [9, 7],
     405: [8, 7],
 
-    // P1 Base positions (bottom-left quadrant)
-    500: [1.5, 10.6],
-    501: [3.5, 10.6],
-    502: [1.5, 12.4],
-    503: [3.5, 12.4],
-
-    // P2 Base positions (top-left quadrant)
-    600: [1.5, 1.6],
-    601: [3.5, 1.6],
-    602: [1.5, 3.4],
-    603: [3.5, 3.4],
-
-    // P3 Base positions (top-right quadrant)
-    700: [10.5, 1.6],
-    701: [12.5, 1.6],
-    702: [10.5, 3.4],
-    703: [12.5, 3.4],
-
-    // P4 Base positions (bottom-right quadrant)
-    800: [10.5, 10.6],
-    801: [12.5, 10.6],
-    802: [10.5, 12.4],
-    803: [12.5, 12.4]
+    // P1 Base positions (bottom-left quadrant, center at 2.5, 11.5)
+    500: [1.6, 10.6],
+    501: [3.4, 10.6],
+    502: [1.6, 12.4],
+    503: [3.4, 12.4],
+
+    // P2 Base positions (top-left quadrant, center at 2.5, 2.5)
+    600: [1.6, 1.6],
+    601: [3.4, 1.6],
+    602: [1.6, 3.4],
+    603: [3.4, 3.4],
+
+    // P3 Base positions (top-right quadrant, center at 11.5, 2.5)
+    700: [10.6, 1.6],
+    701: [12.4, 1.6],
+    702: [10.6, 3.4],
+    703: [12.4, 3.4],
+
+    // P4 Base positions (bottom-right quadrant, center at 11.5, 11.5)
+    800: [10.6, 10.6],
+    801: [12.4, 10.6],
+    802: [10.6, 12.4],
+    803: [12.4, 12.4]
   };
 
   var BASE_POSITIONS = {

public/js/ludo-ui.js

@@ -136,8 +136,9 @@ var LudoUI = (function() {
     if (!coords) return;
 
     var el = pieceElements[player][piece];
-    el.style.top = (coords[1] * C.STEP_LENGTH) + '%';
-    el.style.left = (coords[0] * C.STEP_LENGTH) + '%';
+    var halfStep = C.STEP_LENGTH / 2;
+    el.style.top = (coords[1] * C.STEP_LENGTH + halfStep) + '%';
+    el.style.left = (coords[0] * C.STEP_LENGTH + halfStep) + '%';
 
     // Mark as home if reached final
     if (position === C.HOME_POSITIONS[player]) {