fix: piece click offset + redesign home screen

- Canvas coords: scale CSS pixels to logical canvas coordinates properly
  (fixes the offset between where you tap and what gets selected)
- Canvas touchAction:none prevents browser gestures interfering
- Canvas width/height explicitly set in style to match logical size

Home screen redesign:
- Games as 2x2 grid of large colorful tiles (center stage)
- Tap game → bottom sheet menu slides up with:
  - Single Player (bots + local play)
  - Multiplayer (online ranked)
  - Feature chips: Leaderboard, My Matches, Puzzles (chess only)
- No more carousel that gets cut off
- Game-feel: tiles scale down on press, smooth spring animation
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/js/core/canvas.js

@@ -51,8 +51,12 @@ export function drawCircle(ctx, x, y, radius) {
 export function getCanvasCoords(canvas, e) {
   const rect = canvas.getBoundingClientRect();
   const touch = e.touches ? e.touches[0] : e;
+  const cssX = touch.clientX - rect.left;
+  const cssY = touch.clientY - rect.top;
+  const scaleX = canvas.width / (window.devicePixelRatio || 1) / rect.width;
+  const scaleY = canvas.height / (window.devicePixelRatio || 1) / rect.height;
   return {
-    x: touch.clientX - rect.left,
-    y: touch.clientY - rect.top
+    x: cssX * scaleX,
+    y: cssY * scaleY
   };
 }

public/js/modules/chess/canvas/board.js

@@ -238,7 +238,12 @@ export class ChessBoard {
     this.canvas = canvas;
     this.ctx = ctx;
     this.size = size;
-    this.canvas.style.cssText = 'display:block;border-radius:4px;box-shadow:0 4px 20px rgba(0,0,0,0.5);';
+    this.canvas.style.width = size + 'px';
+    this.canvas.style.height = size + 'px';
+    this.canvas.style.display = 'block';
+    this.canvas.style.borderRadius = '4px';
+    this.canvas.style.boxShadow = '0 4px 20px rgba(0,0,0,0.5)';
+    this.canvas.style.touchAction = 'none';
   }
 
   bindEvents() {