Fix tile positioning: split html/body flex, use measured cell size

Applying display:flex to both html and body caused body to shrink-wrap
as a flex item of html, making cells ~53px instead of ~102px. Split the
rule so only body gets the flex centering. Also measure actual cell size
synchronously after initUI mounts and use it for tile translate calculations
so tiles align correctly regardless of container width.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/style.css

@@ -25,7 +25,11 @@
 
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
-html, body {
+html {
+  background: var(--bg);
+}
+
+body {
   background: var(--bg);
   color: var(--text);
   font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

src/ui.ts

@@ -1,9 +1,9 @@
 import type { Grid } from './engine.ts';
 
-const CELL_SIZE = 100; // px — must match CSS logic
 const GAP = 10;
 const PADDING = 10;
-const STEP = CELL_SIZE + GAP;
+let CELL_SIZE = 100;
+let STEP = CELL_SIZE + GAP;
 
 interface TileState {
   el: HTMLElement;
@@ -59,14 +59,15 @@ export function initUI(container: HTMLElement): void {
   bestEl = container.querySelector('#best')!;
   scoreWrap = container.querySelector('#score-wrap')!;
 
-  // Measure cell size from grid-bg after layout
-  requestAnimationFrame(() => {
-    const cell = container.querySelector('.cell') as HTMLElement;
+  // Measure actual cell size (forces layout synchronously)
+  const cell = container.querySelector('.cell') as HTMLElement | null;
   if (cell) {
     const size = cell.getBoundingClientRect().width;
-      (container.querySelector('.tile-layer') as HTMLElement).style.setProperty('--cs', `${size}px`);
+    if (size > 0) {
+      CELL_SIZE = size;
+      STEP = size + GAP;
+    }
   }
-  });
 }
 
 function tileTranslate(row: number, col: number): string {
@@ -81,6 +82,9 @@ function createTileEl(value: number, row: number, col: number): HTMLElement {
   el.className = 'tile';
   el.dataset['v'] = String(value);
   el.style.cssText = `
+    position: absolute;
+    top: 0;
+    left: 0;
     width: ${CELL_SIZE}px;
     height: ${CELL_SIZE}px;
     font-size: inherit;