fix: 30 visual refinements to Ludo board

- Deeper board shadow + border + 12px corners
- Warmer path cells (#faf8f4) with subtle 0.5px grid
- Gold safe stars with glow, larger and bolder
- Start cells use gradients, home entrance directional gradients
- Base corners: radial gradients with depth
- Warmer base-inner (#fffef8) with deeper shadows
- Pieces: radial gradient 3D look, larger (5.8%), smoother movement
- Stronger highlight pulse + brightness filter
- Center triangles doubled in size (100px borders)
- Dice: larger (72px), warm glow, bigger dots (12px)
- Roll button: larger padding, gold glow shadow
- Player cards: box-shadow, 12px radius, stronger active glow
- Board wrapper: 520px max for bigger desktop board
- More dramatic piece-land bounce animation
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/css/ludo.css

@@ -35,16 +35,17 @@
   padding: 8px 12px;
   background: var(--bg-2);
   border: 1px solid var(--border);
-  border-radius: var(--radius-md);
+  border-radius: 12px;
   flex: 1;
   min-width: 0;
   transition: all 0.3s var(--ease);
   direction: rtl;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
 }
 
 .ludo-player-card.active {
   border-color: var(--gold);
-  box-shadow: 0 0 12px rgba(231, 168, 50, 0.3);
+  box-shadow: 0 0 16px rgba(231,168,50,0.5), 0 2px 8px rgba(0,0,0,0.2);
 }
 
 .ludo-player-card.finished {
@@ -84,7 +85,7 @@
 .ludo-board-wrapper {
   position: relative;
   width: 100%;
-  max-width: 480px;
+  max-width: 520px;
   aspect-ratio: 1;
 }
 
@@ -95,17 +96,18 @@
   grid-template-columns: repeat(15, 1fr);
   grid-template-rows: repeat(15, 1fr);
   background: var(--ludo-board-bg);
-  border-radius: var(--radius-md);
+  border-radius: 12px;
   overflow: hidden;
-  box-shadow: var(--shadow-lg);
+  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
+  border: 3px solid rgba(0,0,0,0.2);
   direction: ltr;
 }
 
 /* Path cells */
 .ludo-cell {
   position: relative;
-  background: var(--ludo-path);
-  border: 1px solid var(--ludo-path-border);
+  background: #faf8f4;
+  border: 0.5px solid rgba(0,0,0,0.08);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -114,22 +116,23 @@
 /* Safe position star */
 .ludo-cell--safe::after {
   content: '\2605';
-  font-size: 0.6em;
-  color: var(--ludo-safe);
-  opacity: 0.8;
+  font-size: 1em;
+  color: #d4a017;
+  opacity: 1;
+  text-shadow: 0 0 4px rgba(212,160,23,0.5);
 }
 
 /* Start cells (colored) */
-.ludo-cell--start-p1 { background: var(--ludo-p1); }
-.ludo-cell--start-p2 { background: var(--ludo-p2); }
-.ludo-cell--start-p3 { background: var(--ludo-p3); }
-.ludo-cell--start-p4 { background: var(--ludo-p4); }
+.ludo-cell--start-p1 { background: linear-gradient(135deg, var(--ludo-p1), #c0392b); }
+.ludo-cell--start-p2 { background: linear-gradient(135deg, var(--ludo-p2), #1e8449); }
+.ludo-cell--start-p3 { background: linear-gradient(135deg, var(--ludo-p3), #d4ac0d); }
+.ludo-cell--start-p4 { background: linear-gradient(135deg, var(--ludo-p4), #2471a3); }
 
 /* Home entrance strips */
-.ludo-cell--home-p1 { background: var(--ludo-home-p1); border-color: var(--ludo-p1); }
-.ludo-cell--home-p2 { background: var(--ludo-home-p2); border-color: var(--ludo-p2); }
-.ludo-cell--home-p3 { background: var(--ludo-home-p3); border-color: var(--ludo-p3); }
-.ludo-cell--home-p4 { background: var(--ludo-home-p4); border-color: var(--ludo-p4); }
+.ludo-cell--home-p1 { background: linear-gradient(to top, var(--ludo-home-p1), rgba(231,76,60,0.2)); border-color: var(--ludo-p1); }
+.ludo-cell--home-p2 { background: linear-gradient(to right, var(--ludo-home-p2), rgba(46,204,113,0.2)); border-color: var(--ludo-p2); }
+.ludo-cell--home-p3 { background: linear-gradient(to bottom, var(--ludo-home-p3), rgba(241,196,15,0.2)); border-color: var(--ludo-p3); }
+.ludo-cell--home-p4 { background: linear-gradient(to left, var(--ludo-home-p4), rgba(52,152,219,0.2)); border-color: var(--ludo-p4); }
 
 /* Corner bases */
 .ludo-base {
@@ -140,31 +143,31 @@
   justify-content: center;
 }
 
-.ludo-base--p1 { grid-area: 10/1 / 16/7; background: var(--ludo-p1); }
-.ludo-base--p2 { grid-area: 1/1 / 7/7; background: var(--ludo-p2); }
-.ludo-base--p3 { grid-area: 1/10 / 7/16; background: var(--ludo-p3); }
-.ludo-base--p4 { grid-area: 10/10 / 16/16; background: var(--ludo-p4); }
+.ludo-base--p1 { grid-area: 10/1 / 16/7; background: radial-gradient(circle at 30% 70%, #e74c3c 0%, #c0392b 100%); }
+.ludo-base--p2 { grid-area: 1/1 / 7/7; background: radial-gradient(circle at 30% 30%, #2ecc71 0%, #1e8449 100%); }
+.ludo-base--p3 { grid-area: 1/10 / 7/16; background: radial-gradient(circle at 70% 30%, #f1c40f 0%, #d4ac0d 100%); }
+.ludo-base--p4 { grid-area: 10/10 / 16/16; background: radial-gradient(circle at 70% 70%, #3498db 0%, #2471a3 100%); }
 
 /* Inner base circle (where pieces sit initially) */
 .ludo-base-inner {
   width: 72%;
   height: 72%;
-  background: #f8f8f0;
+  background: #fffef8;
   border-radius: 50%;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
   gap: 12%;
   padding: 16%;
-  box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);
+  box-shadow: inset 0 3px 8px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.15);
 }
 
 .ludo-base-slot {
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  background: rgba(0,0,0,0.12);
-  box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
+  background: rgba(0,0,0,0.15);
+  box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
 }
 
 /* Center home (3x3) */
@@ -183,33 +186,33 @@
 .ludo-center-triangle--p1 {
   bottom: 0; left: 50%;
   transform: translateX(-50%);
-  border-left: 50px solid transparent;
-  border-right: 50px solid transparent;
-  border-bottom: 50px solid var(--ludo-p1);
+  border-left: 100px solid transparent;
+  border-right: 100px solid transparent;
+  border-bottom: 100px solid var(--ludo-p1);
 }
 
 .ludo-center-triangle--p2 {
   left: 0; top: 50%;
   transform: translateY(-50%);
-  border-top: 50px solid transparent;
-  border-bottom: 50px solid transparent;
-  border-left: 50px solid var(--ludo-p2);
+  border-top: 100px solid transparent;
+  border-bottom: 100px solid transparent;
+  border-left: 100px solid var(--ludo-p2);
 }
 
 .ludo-center-triangle--p3 {
   top: 0; left: 50%;
   transform: translateX(-50%);
-  border-left: 50px solid transparent;
-  border-right: 50px solid transparent;
-  border-top: 50px solid var(--ludo-p3);
+  border-left: 100px solid transparent;
+  border-right: 100px solid transparent;
+  border-top: 100px solid var(--ludo-p3);
 }
 
 .ludo-center-triangle--p4 {
   right: 0; top: 50%;
   transform: translateY(-50%);
-  border-top: 50px solid transparent;
-  border-bottom: 50px solid transparent;
-  border-right: 50px solid var(--ludo-p4);
+  border-top: 100px solid transparent;
+  border-bottom: 100px solid transparent;
+  border-right: 100px solid var(--ludo-p4);
 }
 
 /* ============================================
@@ -224,27 +227,28 @@
 
 .ludo-piece {
   position: absolute;
-  width: 5.5%;
-  height: 5.5%;
+  width: 5.8%;
+  height: 5.8%;
   border-radius: 50%;
-  border: 2px solid rgba(255,255,255,0.5);
+  border: 2px solid rgba(255,255,255,0.7);
   transform: translate(-50%, -50%);
-  transition: top 0.15s var(--ease), left 0.15s var(--ease);
+  transition: top 0.25s var(--ease), left 0.25s var(--ease);
   z-index: 2;
   pointer-events: auto;
   cursor: default;
-  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);
+  box-shadow: 0 3px 6px rgba(0,0,0,0.5), inset 0 3px 5px rgba(255,255,255,0.4), inset 0 -3px 4px rgba(0,0,0,0.3);
 }
 
-.ludo-piece--p1 { background: var(--ludo-p1); }
-.ludo-piece--p2 { background: var(--ludo-p2); }
-.ludo-piece--p3 { background: var(--ludo-p3); }
-.ludo-piece--p4 { background: var(--ludo-p4); }
+.ludo-piece--p1 { background: radial-gradient(circle at 35% 35%, #ff6b6b, var(--ludo-p1) 60%, #a83232); }
+.ludo-piece--p2 { background: radial-gradient(circle at 35% 35%, #6bff6b, var(--ludo-p2) 60%, #1a7a1a); }
+.ludo-piece--p3 { background: radial-gradient(circle at 35% 35%, #fff06b, var(--ludo-p3) 60%, #b89b0a); }
+.ludo-piece--p4 { background: radial-gradient(circle at 35% 35%, #6bb5ff, var(--ludo-p4) 60%, #1a5a8a); }
 
 .ludo-piece--highlight {
   cursor: pointer;
   animation: ludo-pulse 0.8s ease-in-out infinite;
   z-index: 3;
+  filter: brightness(1.2);
 }
 
 .ludo-piece--highlight.ludo-piece--p1 { box-shadow: 0 0 10px var(--ludo-p1), 0 0 20px var(--ludo-p1); }
@@ -254,7 +258,7 @@
 
 @keyframes ludo-pulse {
   0%, 100% { transform: translate(-50%, -50%) scale(1); }
-  50% { transform: translate(-50%, -50%) scale(1.3); }
+  50% { transform: translate(-50%, -50%) scale(1.35); }
 }
 
 .ludo-piece--home {
@@ -280,18 +284,18 @@
 }
 
 .ludo-dice {
-  width: 64px;
-  height: 64px;
+  width: 72px;
+  height: 72px;
   background: #f8f4ec;
   border: 3px solid #c8b88a;
   border-radius: 10px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
-  padding: 10px;
+  padding: 12px;
   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);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 3px rgba(255,255,255,0.6), 0 0 0 1px rgba(200,184,138,0.3);
 }
 
 .ludo-dice--rolling {
@@ -308,8 +312,8 @@
 }
 
 .ludo-dice-dot {
-  width: 10px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
   border-radius: 50%;
   background: #1a1a1a;
   display: none;
@@ -322,13 +326,14 @@
 }
 
 .ludo-roll-btn {
-  padding: 10px 28px;
+  padding: 12px 36px;
   background: var(--gold);
   color: var(--text-inverse);
   border: none;
-  border-radius: var(--radius-md);
+  border-radius: 12px;
   font-weight: 700;
-  font-size: 14px;
+  font-size: 15px;
+  box-shadow: 0 3px 10px rgba(231,168,50,0.4);
   font-family: var(--font-ar);
   cursor: pointer;
   transition: all 0.2s var(--ease);
@@ -350,8 +355,9 @@
   min-width: 240px;
   background: var(--bg-2);
   border: 1px solid var(--border);
-  border-radius: var(--radius-md);
+  border-radius: 12px;
   overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
 }
 
 .ludo-turn-indicator {
@@ -367,7 +373,7 @@
   flex: 1;
   overflow-y: auto;
   padding: 8px 12px;
-  font-size: 12px;
+  font-size: 13px;
   color: var(--text-2);
   max-height: 200px;
   direction: rtl;
@@ -619,7 +625,7 @@
 
 @keyframes piece-land {
   0% { transform: translate(-50%, -50%) scale(1, 1); }
-  30% { transform: translate(-50%, -50%) scale(1.2, 0.8); }
+  30% { transform: translate(-50%, -50%) scale(1.3, 0.7); }
   60% { transform: translate(-50%, -50%) scale(0.9, 1.1); }
   100% { transform: translate(-50%, -50%) scale(1, 1); }
 }
@@ -627,8 +633,8 @@
 /* Capture explosion particles */
 .ludo-capture-particle {
   position: absolute;
-  width: 6px;
-  height: 6px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
   pointer-events: none;
   animation: capture-burst 0.6s ease-out forwards;