fix: domino visual overhaul — bigger tiles, compact board, readable pips

- Board tiles: 56x28 base (was 48x24), 60x30 on desktop
- Board area: max-height 400px, stops giant green void
- Pips: 4px base, 5px desktop for readability
- Hand tiles: more gap (6px), more padding
- Mobile: tiles 44x22 (was 38x19)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/css/domino.css

@@ -33,13 +33,13 @@
 }
 
 .domino-tile--small {
-    width: 48px;
-    height: 24px;
+    width: 56px;
+    height: 28px;
 }
 
 .domino-tile--small.domino-tile--vertical {
-    width: 24px;
-    height: 48px;
+    width: 28px;
+    height: 56px;
 }
 
 .domino-tile--playable {
@@ -120,8 +120,8 @@
 }
 
 .domino-tile--small .domino-pip {
-    width: 3px;
-    height: 3px;
+    width: 4px;
+    height: 4px;
 }
 
 /* ─── Game Layout ────────────────────────────────────────────────────────── */
@@ -160,7 +160,6 @@
 
 /* ─── Board Area ─────────────────────────────────────────────────────────── */
 .domino-board-area {
-    flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -171,15 +170,16 @@
     background: var(--domino-board-bg);
     border: 1px solid rgba(255,255,255,0.05);
     margin: 8px 0;
+    min-height: 200px;
+    max-height: 400px;
+    flex: 1;
 }
 
 #domino-board {
     display: flex;
     align-items: center;
     justify-content: center;
-    min-width: 100%;
-    min-height: 100%;
-    padding: 20px;
+    padding: 16px;
 }
 
 .domino-board-empty {
@@ -216,16 +216,16 @@
 
 /* ─── Player Hand ────────────────────────────────────────────────────────── */
 .domino-hand-area {
-    padding: 8px 0;
+    padding: 12px 0 8px;
     border-top: 1px solid rgba(255,255,255,0.08);
 }
 
 #domino-hand {
     display: flex;
     justify-content: center;
-    gap: 4px;
+    gap: 6px;
     flex-wrap: wrap;
-    padding: 4px;
+    padding: 4px 8px;
 }
 
 /* ─── End Buttons ────────────────────────────────────────────────────────── */
@@ -424,18 +424,22 @@
 @media (max-width: 400px) {
     .domino-tile { width: 52px; height: 26px; }
     .domino-tile--vertical { width: 26px; height: 52px; }
-    .domino-tile--small { width: 38px; height: 19px; }
-    .domino-tile--small.domino-tile--vertical { width: 19px; height: 38px; }
+    .domino-tile--small { width: 44px; height: 22px; }
+    .domino-tile--small.domino-tile--vertical { width: 22px; height: 44px; }
     .domino-pip { width: 4px; height: 4px; }
     .domino-tile--small .domino-pip { width: 3px; height: 3px; }
     #domino-hand { gap: 3px; }
+    .domino-board-area { max-height: 280px; min-height: 160px; }
 }
 
 @media (min-width: 768px) {
     .domino-tile { width: 72px; height: 36px; }
     .domino-tile--vertical { width: 36px; height: 72px; }
+    .domino-tile--small { width: 60px; height: 30px; }
+    .domino-tile--small.domino-tile--vertical { width: 30px; height: 60px; }
     .domino-pip { width: 6px; height: 6px; }
-    .domino-tile--small .domino-pip { width: 4px; height: 4px; }
+    .domino-tile--small .domino-pip { width: 5px; height: 5px; }
+    .domino-board-area { max-height: 350px; }
 }
 
 /* Reduced motion */