diff --git a/src/style.css b/src/style.css
index ee8ae4a..57368e4 100644
--- a/src/style.css
+++ b/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;
diff --git a/src/ui.ts b/src/ui.ts
index 68b099a..44617bc 100644
--- a/src/ui.ts
+++ b/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;
-    if (cell) {
-      const size = cell.getBoundingClientRect().width;
-      (container.querySelector('.tile-layer') as HTMLElement).style.setProperty('--cs', `${size}px`);
+  // Measure actual cell size (forces layout synchronously)
+  const cell = container.querySelector('.cell') as HTMLElement | null;
+  if (cell) {
+    const size = cell.getBoundingClientRect().width;
+    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;