feat(ui): landscape two-column game layout, board fitted by height

When the viewport is wider than tall (matchMedia orientation: landscape) the
game screen switches from the portrait stack to a two-column layout: the board
fills the right column as the largest square that fits the height (no zoom,
shrinking by width when cramped — lowest priority), while the left panel stacks
the rack (+ make), the status line, the score plaques, the always-open docked
history and the controls. Board zoom, the history slide-drawer gestures and the
growing nav bar are gated off in landscape; the portrait layout is unchanged and
both render from the same snippets so behaviour stays single-sourced.

The mock e2e now defaults to a portrait viewport (the mobile-first app the
gesture/zoom/history specs are written for); landscape.spec.ts covers the wide
layout in its own viewport.

ui/playwright.config.ts

@@ -31,8 +31,11 @@ export default defineConfig({
   // exercised in both rendering/JS engines. Note: desktop WebKit on Linux does not
   // reproduce iOS Safari's text auto-inflation, so the `text-size-adjust` guard in
   // app.css is not regression-covered here — but engine-level CSS/JS differences are.
+  // The mock e2e exercises the mobile-first app, so it runs in a portrait viewport by default —
+  // the layout the gesture/zoom/history-drawer specs are written for. The wide landscape layout
+  // (Game.svelte's two-column branch) has its own spec that overrides the viewport (landscape.spec.ts).
   projects: [
-    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
-    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
+    { name: 'chromium', use: { ...devices['Desktop Chrome'], viewport: { width: 390, height: 844 } } },
+    { name: 'webkit', use: { ...devices['Desktop Safari'], viewport: { width: 390, height: 844 } } },
   ],
 });