fix: chess board green theme + polished piece styling

Board colors changed to Chess.com-style green:
- Light squares: #EBECD0 (cream/beige)
- Dark squares: #779556 (olive green)
- Selected: yellow highlight
- Last move: yellow tint

Board frame:
- Dark border (3px #3d3d3d)
- Deeper shadow for elevation
- 6px border-radius

Pieces:
- Larger font-size (62px max)
- Drop-shadow filter for 3D depth
- Hover scale effect (1.05x)
- Removed pulsing animation on legal moves (static dots like Chess.com)

Highlights:
- Stronger check glow (red inset shadow)
- Clean static legal move dots (no pulse)
- Capture ring slightly larger (88%)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/css/app.css

@@ -68,13 +68,13 @@
   --text-section: clamp(12px, 0.5vw + 10px, 14px);
   --text-body: clamp(13px, 0.5vw + 11px, 15px);
 
-  /* Board Theme */
-  --board-light: #E8EDF9;
-  --board-dark: #7195D1;
-  --board-selected: rgba(21, 215, 255, 0.45);
-  --board-legal: rgba(0, 0, 0, 0.18);
-  --board-last-move: rgba(255, 199, 40, 0.35);
-  --board-check: rgba(239, 68, 68, 0.55);
+  /* Board Theme — Chess.com green */
+  --board-light: #EBECD0;
+  --board-dark: #779556;
+  --board-selected: rgba(255, 255, 50, 0.5);
+  --board-legal: rgba(0, 0, 0, 0.15);
+  --board-last-move: rgba(255, 255, 50, 0.4);
+  --board-check: rgba(255, 0, 0, 0.6);
   --board-premove: rgba(21, 180, 240, 0.3);
   --board-highlight-green: rgba(21, 180, 90, 0.4);
   --board-highlight-red: rgba(220, 50, 50, 0.4);

public/css/chessboard.css

@@ -120,12 +120,13 @@
   grid-template-rows: repeat(8, 1fr);
   width: 100%;
   height: 100%;
-  border-radius: var(--radius-sm);
+  border-radius: 6px;
   overflow: hidden;
   user-select: none;
   touch-action: none;
   direction: ltr;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
+  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
+  border: 3px solid #3d3d3d;
 }
 
 .square {
@@ -144,29 +145,26 @@
 .square.legal-move::after {
   content: '';
   position: absolute;
-  width: 30%;
-  height: 30%;
+  width: 28%;
+  height: 28%;
   border-radius: 50%;
   background: var(--board-legal);
-  animation: legal-pulse 1.2s ease-in-out infinite;
 }
 .square.legal-capture::after {
   content: '';
   position: absolute;
-  width: 85%;
-  height: 85%;
+  width: 88%;
+  height: 88%;
   border-radius: 50%;
-  border: 3.5px solid var(--board-legal);
+  border: 4px solid var(--board-legal);
   background: transparent;
-  animation: legal-pulse 1.2s ease-in-out infinite;
 }
 
-@keyframes legal-pulse {
-  0%, 100% { opacity: 0.7; }
-  50% { opacity: 1; }
-}
 .square.last-move { background: var(--board-last-move) !important; }
-.square.in-check { background: var(--board-check) !important; box-shadow: inset 0 0 8px var(--board-check); }
+.square.in-check {
+  background: var(--board-check) !important;
+  box-shadow: inset 0 0 12px rgba(255,0,0,0.6);
+}
 .square.premove-from { background: var(--board-premove) !important; }
 .square.premove-to { background: var(--board-premove) !important; }
 .square.highlight-green { background: var(--board-highlight-green) !important; }
@@ -177,7 +175,7 @@
 .piece {
   width: 100%;
   height: 100%;
-  font-size: min(11vw, 58px);
+  font-size: min(11vw, 62px);
   line-height: 1;
   display: flex;
   align-items: center;
@@ -185,7 +183,12 @@
   cursor: grab;
   z-index: 1;
   user-select: none;
-  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
+  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4));
+  transition: transform 0.1s ease;
+}
+
+.piece:hover {
+  transform: scale(1.05);
 }
 
 .piece:active { cursor: grabbing; }