fix: Ludo dice visibility, dot alignment, and piece centering

- Dice: white background with gold border, shadow for contrast against dark panel
- Dice dots: fixed-size black circles with proper centering using margin:auto
- Dice: removed gap, increased padding so dots align in clean 3x3 grid like real dice
- Base inner circle: white background instead of dark, proper shadow depth
- Piece positions: recentered within base quadrants (was offset toward top-left)
- Pieces: slightly larger, white border + highlight shadow for better visibility
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/css/ludo.css

@@ -147,22 +147,24 @@
 
 /* Inner base circle (where pieces sit initially) */
 .ludo-base-inner {
-  width: 75%;
-  height: 75%;
-  background: var(--ludo-board-bg);
+  width: 72%;
+  height: 72%;
+  background: #f8f8f0;
   border-radius: 50%;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
-  gap: 8%;
-  padding: 15%;
+  gap: 12%;
+  padding: 16%;
+  box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);
 }
 
 .ludo-base-slot {
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  background: rgba(255,255,255,0.15);
+  background: rgba(0,0,0,0.12);
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
 }
 
 /* Center home (3x3) */
@@ -222,16 +224,16 @@
 
 .ludo-piece {
   position: absolute;
-  width: 5.2%;
-  height: 5.2%;
+  width: 5.5%;
+  height: 5.5%;
   border-radius: 50%;
-  border: 2px solid rgba(0,0,0,0.3);
+  border: 2px solid rgba(255,255,255,0.5);
   transform: translate(-50%, -50%);
   transition: top 0.15s var(--ease), left 0.15s var(--ease);
   z-index: 2;
   pointer-events: auto;
   cursor: default;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 -2px 3px rgba(0,0,0,0.2);
+  box-shadow: 0 2px 5px rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.3), inset 0 -2px 3px rgba(0,0,0,0.2);
 }
 
 .ludo-piece--p1 { background: var(--ludo-p1); }
@@ -278,17 +280,18 @@
 }
 
 .ludo-dice {
-  width: 56px;
-  height: 56px;
-  background: var(--ludo-dice-bg);
-  border: 2px solid var(--border-strong);
-  border-radius: var(--radius-sm);
+  width: 64px;
+  height: 64px;
+  background: #f8f4ec;
+  border: 3px solid #c8b88a;
+  border-radius: 10px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
-  padding: 8px;
-  gap: 2px;
+  padding: 10px;
+  gap: 0;
   transition: transform 0.1s;
+  box-shadow: 0 3px 8px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,255,255,0.5);
 }
 
 .ludo-dice--rolling {
@@ -305,11 +308,13 @@
 }
 
 .ludo-dice-dot {
-  width: 100%;
-  height: 100%;
+  width: 10px;
+  height: 10px;
   border-radius: 50%;
-  background: var(--ludo-dice-dot);
+  background: #1a1a1a;
   display: none;
+  margin: auto;
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
 }
 
 .ludo-dice-dot--visible {

public/js/ludo-constants.js

@@ -106,29 +106,29 @@ var LudoConstants = (function() {
     404: [9, 7],
     405: [8, 7],
 
-    // 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]
+    // P1 Base positions (bottom-left quadrant, center at 3.5, 12.5)
+    500: [2.4, 11.4],
+    501: [4.6, 11.4],
+    502: [2.4, 13.6],
+    503: [4.6, 13.6],
+
+    // P2 Base positions (top-left quadrant, center at 3.5, 3.5)
+    600: [2.4, 2.4],
+    601: [4.6, 2.4],
+    602: [2.4, 4.6],
+    603: [4.6, 4.6],
+
+    // P3 Base positions (top-right quadrant, center at 12.5, 3.5)
+    700: [11.4, 2.4],
+    701: [13.6, 2.4],
+    702: [11.4, 4.6],
+    703: [13.6, 4.6],
+
+    // P4 Base positions (bottom-right quadrant, center at 12.5, 12.5)
+    800: [11.4, 11.4],
+    801: [13.6, 11.4],
+    802: [11.4, 13.6],
+    803: [13.6, 13.6]
   };
 
   var BASE_POSITIONS = {