2048 · qwen3.8-flash

Let me start by looking at the working directory.

I'll build a 2048 game in a single index.html file. Let me write it carefully with animations, input locking, etc.

Key design:
- Grid model: 4x4 array of tile objects {value, id, row, col, mergedFrom, isNew}.
- Render tiles as absolutely positioned divs with CSS transform translate.
- On move: compute new positions, animate with transitions, then after animation spawn tile.
- Lock input during animation.

Let me write it.

Implementation approach (common well-known): maintain `board` as array of tile objects. Use a `tiles` map for DOM elements keyed by id. On move, update tile row/col and re-render with CSS transitions. Merged tiles get new tile with merged value, and the two source tiles move to same cell then get removed.

Let me design carefully.

Data: grid[r][c] = tile or null. Tile = {id, value, row, col, isNew, merged}.

move(direction):
- Build traversal order.
- For each tile in traversal order, find farthest empty position in direction; check next cell beyond: if same value and not already merged this move, then merge: create new tile at target with value*2, mark merged; remove the tile that was at target and the moving tile, but keep them for animation (they move to target position, then removed on next render).
- Track if board changed.

Then render: draw all tiles; tiles that were merged-away are placed at destination cell for animation and removed after.

Simpler approach: Use DOM elements keyed by tile id; on each render, create elements for new tiles, update transform for moved tiles, and after animation remove "toRemove" tiles.

Let me write the algorithm.

I'll keep `grid` = 4x4 of tile objects. Tile: {id, value, row, col, mergedFrom: [tile, tile] | null, isNew: bool}.

move logic:

function move(dir) {
  const vecs = {left:{dr:0,dc:-1}, right:{0,1}, up:{-1,0}, down:{1,0}}
  changed = false
  // clear flags
  forEach tile: tile.mergedFrom=null; tile.isNew=false; (keep in a set of all tiles for removal)
  
  // We'll produce newGrid.
  // Traversal: for left, columns from left to right; rows any; for right, cols from right to left; up: rows top to bottom; down: bottom to top.

  const toRemove = []
  for each cell in traversal order:
    tile = grid[r][c]; if !tile continue
    // find farthest
    let nr=r, nc=c
    while (inBounds(nr+dr, nc+dc) && grid[nr+dr][nc+dc] == null) { nr+=dr; nc+=dc }
    // check merge target
    const tr=nr+dr, tc=nc+dc
    if (inBounds(tr,tc) && grid[tr][tc] && grid[tr][tc].value === tile.value && !grid[tr][tc].mergedFrom) {
       // merge
       const target = grid[tr][tc]
       const merged = {id: nextId++, value: tile.value*2, row: tr, col: tc, mergedFrom: [tile, target], isNew:false}
       grid[tr][tc] = merged
       grid[r][c] = null
       // animate: tile moves to (tr,tc), target stays at (tr,tc) but is popped out; both removed after render
       toRemove.push(tile)   // target still rendered via merged.mergedFrom
       changed = true
    } else if (nr!==r || nc!==c) {
       grid[r][c]=null; tile.row=nr; tile.col=nc; grid[nr][nc]=tile; changed=true
    }
  
Hmm, careful: the moving tile slides onto target position; the target tile also needs to appear to slide there? Target is already at (tr,tc). Standard 2048: both move to target cell, merged tile appears with pop animation. The source tiles get removed after animation.

For rendering, I'll render merged tile after animation delay, and render the two sources moving to the destination. Actually the classic implementation renders everything at once: sources get transform updated (move animation), and merged tile is added with a slight delay via `pop` animation class.

Approach: 
1. Render pass: for all surviving tiles + the merged sources (which are moved to destination), set their transforms. Add source tiles to DOM if not there (they're already there).
2. After transition duration (~120ms), re-render: remove the source tiles, add merged tiles with pop animation. That's the classic claires implementation which does a single render and uses CSS animation delays.

Actually classic 2048 (gabrielecirulli) uses a single render: tiles with `tile-merged` class get an "pop" animation, and merged-from tiles are rendered at the destination position (with `tile-ghost`) then removed after one animation frame? Actually in cirulli's version, the merged tile is rendered as a `tile-ghost` overlay with pop animation, and the original tiles slide into the cell with the transition. All within the same container, and ghosts are removed on next render (next move) — they use `.tile-ghost` with animation delay 100ms.

I'll do: render once with all tiles (moved positions), plus ghost overlay for merged tiles with animation delay ~120ms (translate in with pop), and source tiles removed after 130ms via JS. Simpler: I'll do it with setTimeout.

Plan:
- Render: update DOM. For tiles that moved, set transform (CSS transition handles slide). For merged: create the merged tile element at destination but with visibility hidden / scale 0 until after slide; also keep the two source tiles (marked `merging`) positioned at destination and removed after slide.
- After 130ms: remove merging source elements, show merged element with pop animation.
- Then spawn new tile with appear animation.

Timing: input lock until spawn done (~150ms total).

Let's simplify with a queue: if a move is requested while animating, ignore it (or buffer one). I'll ignore but keep lock short (~110ms slide + 40ms). Actually to feel responsive, lock ~120ms. Also buffer up to 2 pending moves? Requirement says "Animate movement and merging without allowing rapid input to corrupt board state." Simplest: ignore input while animating. Maybe buffer one move for feel. I'll ignore extra input while animating — safe and clear.

Actually let's use a small buffer queue of max 1 for responsiveness but that complicates. Just ignore.

Score: increase by merged value.

Win: reaching 2048 tile -> show win message, allow "Keep playing" (continue). Track `won` so message shows once.

Game over: no empty cells and no adjacent equal pairs.

New Game button: reset board & score to 0, spawn 2 tiles.

Also touch/swipe support? Not required, but nice — could add pointer swipe. Keep it but optional. I'll add simple swipe handling for mobile. Low cost.

Also display best score with localStorage? localStorage might be restricted in sandbox; wrap in try/catch. Fine.

Let me write the HTML/CSS: board with grid cells background, tile layer absolutely positioned. Use CSS variables for cell size computed from container width. Use fixed pixel sizes with responsive scale? Simplest: board is a fixed size, e.g. width: min(92vw, 460px). Position tiles using percentage-based transforms: cell size = (100% - gaps)/4. Using `calc` with percentages in translate is relative to element's own size, which is tricky. Better approach: use CSS custom property --cell as a fraction: tile width: calc((var(--board) - 5*var(--gap))/4)? Let's define board size in px via JS? Alternative: use percentage positioning with `left`/`top` percentages and CSS transitions on transform+left/top... transitions on left/top are less smooth but fine.

Cleanest: container is `position: relative` with width W. Tiles `position:absolute; width:22%; height:22%;` and translate by percentage of tile's own size: translate(x%, y%) where each cell step = 100/22 * ... hmm. Tile width = 22% of board. Step between cell left positions: with padding p and gap g... Let's compute: board content = W. Use padding: 2.5% of W? Let's define: board width W (square). padding = g, gaps between cells = g. Cell size C = (W - 5g)/4. If g = W/20 (5%), then C = (W - W/4)/4 = 3W/16 = 18.75% of W.

Tile element width = 18.75% of board (percentage of container's width for width property works). Height: same in % of board's height (board is square, so 18.75% height = same px). Left = 5%, top = 5%. Transform: translate(x, y) where x = col * (C+g) = col * (18.75% + 5%) of W... but translate percentages refer to the element's own size (tile width = 18.75% W). So (C+g)/C = 23.75/18.75 = 1.2667 → 126.6667% per step. That's exact: translateX(calc(col * 126.6667%)). Since tiles are square and board is square, % of own width works for both axes. 

So: tile left/top = 5% (padding), width/height = 18.75%, transform: translate(calc(var(--x) * 126.6667%), calc(var(--y) * 126.6667%)).

Grid background cells: same layout — use a CSS grid inside board with padding 5% and gap 2.5%? gap: g = 5% of W. In CSS grid, gap percentage resolves against the grid's content box width... gap % in grid is relative to the corresponding dimension of the grid's content area. Board content area = W - 2*padding = W - 0.1W = 0.9W. We need gap = 0.05W = 5.5556% of content. And cell = 0.1875W = 20.8333% of content → 4 cells + 3 gaps = 4*20.8333 + 3*5.5556 = 83.33+16.67=100 ✓. Use grid-template-columns: repeat(4, 1fr) with gap 5.5556% — 1fr then computes to correct size. 

Actually simpler: define board with padding: 5%; display:grid; grid-template: repeat(4, 1fr)/repeat(4,1fr); gap: 5.5556%; cells background rgba. Then tiles positioned absolutely with left/top computed = padding(5%) + i*(cell+gap) in % of W: cell+gap = 18.75+5 = 23.75%. left = calc(5% + var(--x)*23.75%). And transitions on left/top... but transform is smoother. Let's just use transform with the 126.6667% trick — it's clean and GPU-friendly.

Hmm, careful: transform percentage relative to the element's border box size, which is 18.75% of W in both axes. 23.75/18.75 = 1.266666... ✓.

Font sizes: use clamp or % of board? Tile font size: use `cqw`? Container query units may not be supported everywhere. Use vmin-based clamp: font-size: clamp(18px, 6.5vmin, 40px). Board width: min(92vw, 460px) — also relate to vmin. I'll set board width: min(92vw, 88vh, 480px)? For simplicity: width: min(92vw, 460px) and font-size using `calc(var(--size)*...)`. Could set --board size on a wrapper via JS-free CSS: `--board: min(92vw, 60vh, 440px)`. Then font-size: calc(var(--board) * 0.085). Good, and tiles can use px calc too. Let's use CSS custom property --board on :root and size everything from it.

Let's write:
:root { --board: min(92vw, 44vh, 460px); --gap: calc(var(--board)/20); --cell: calc((var(--board) - 5*var(--gap))/4); }

Then tiles positioned with left: calc(var(--gap) + var(--x)*(var(--cell)+var(--gap))); top similar; width/height var(--cell). And transform for smooth movement? Transitions on left/top work but jankier. Alternative: position all tiles at left:var(--gap); top:var(--gap); and transform: translate(calc(var(--x)*(var(--cell)+var(--gap))), calc(var(--y)*(var(--cell)+var(--gap)))). Here --x/--y are unitless numbers 0..3, and translate uses px calc — that's exact and transitions smoothly. 

So each tile element gets style.setProperty('--x', col), ('--y', row). CSS: transform: translate(calc(var(--x) * (var(--cell) + var(--gap))), calc(var(--y) * (...)));  Note calc with multiplication of number by length works.

Grid cells: use 16 divs in a CSS grid with padding var(--gap) and gap var(--gap).

Colors: classic-ish palette. Dark background page, warm board.

Animations:
- .tile { transition: transform 120ms ease-in-out } — but new tiles created with transform already at final position, so no transition on creation (fine, they get appear animation).
- .tile-new: animation: appear 200ms ease (scale 0 -> 1) with delay? Spawn happens after slide, so immediate.
- .tile-merged: animation: pop 200ms ease (scale 1 -> 1.18 -> 1) after slide.

Merged sources: keep them in DOM until slide ends, then remove; but if we remove them at the same moment merged appears, it looks fine — the merged tile is at the destination, sources underneath also at destination. Since merged tile is created after slide (~120ms) with pop, and sources removed at same time. Actually simpler: create merged tile element immediately at destination with `visibility:hidden`, then at 120ms swap: make visible + pop class, remove sources.

Hmm, but z-order: merged tile over sources anyway.

Let me code the JS structure:

const state = { grid: [[...]], score, best, won, over, animating }
tiles: DOM elements stored on tile object as tile.el.

Implementation with "render" that syncs DOM from model:

I'll do a straightforward approach:

function setupNew() { clear tile layer; grid = empty; addTile x2; }

function addRandomTile() {
  const cells = empty cells; pick random; value = rand<0.9?2:4;
  const tile = {id, value, row, col, el: null, isNew: true}
  grid[row][col]=tile; createEl(tile); // with class tile-new
}

function moveTileDom(tile, row, col) { tile.row=row; tile.col=col; tile.el.style.setProperty('--x',col); setProperty('--y',row) }

move(dir):
  if animating or over: return (unless continuing)
  compute:
  - flatten list of tiles in traversal order
  - for each: find target, merge or slide
  - build `moves` (tile -> new pos), `merges` (list of {sources:[a,b], value, pos, mergedTile})
  if no change: return (no spawn, no animation)
  animating = true
  apply DOM: for slides: set pos. For merges: set both source positions to destination, create merged tile element hidden at destination? Actually create it after.
  
  after SLIDE_MS:
   - for merges: remove source els, create merged tile object+el with pop, place in grid
   Actually the model grid should already hold merged tiles during the slide so that... no, we need grid to be consistent only after animation, and input is locked, so fine. But simpler: update the model grid immediately (that's the logic result), and keep separate lists for DOM animation. The DOM update to final positions happens in two phases. Let's do:

  phase 1 (immediately):
   - For each merged pair: move both source elements to destination, and create merged element at destination hidden (or with class 'pending' scale 0? ) I'll create merged tile el with `opacity:0` and reveal at phase 2.
   - For each slide: move el.
  phase 2 (after SLIDE_MS = 120ms):
   - remove source els, reveal merged els with pop animation.
   - spawn new tile (appear animation)
   - check game over / win
   - animating = false after SPAWN? Set animating=false right after spawn (120ms) so input is fast; the pop/appear animations play concurrently. But if a new move comes immediately, the pop classes may still be on elements — moving them is fine (transform transition continues). To be safe: clear animation classes on next render.

Let me use a slightly longer lock: 110ms slide, then unlock. Fine.

Edge: merged tile created with the same id scheme.

Let me now write the code.

Also keyboard: keydown handler with preventDefault for arrows, also WASD maybe. Space/enter for new game? Not needed.

Score popup animation "+4" floating. Nice touch.

Game over overlay: show message with "Game Over" and New Game button. Win: overlay with "You win! 2048" and buttons "Keep going" / "New game". Also keep playing after win (won=true, don't show again).

Also add a "best" score.

Accessibility: aria-live for status. Keep simple.

Let me write the file.

Colors for tiles:
2: #eee4da text #776e65
4: #ede0c8
8: #f2b179 text white
16: #f59563
32: #f67c5f
64: #f65e3b
128: #edcf72
256: #edcc61
512: #edc850
1024: #edc53f
2048: #edc22e
super (>2048): #3c3a32

Font sizes shrink for larger numbers: use classes tile-2 ... tile-1024 with data-length attribute for size. I'll set font-size based on digits: .tile[data-d="3"] {font-size: ...}.

Let me write it now.

Also handle resize: everything is calc-based, no JS needed.

Touch: pointerdown/pointerup on board, compute dx, dy, threshold 24px, direction from larger axis, call move.

Let me write out the full file.

Code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2048</title>
<style>...</style>
</head>
<body>
<main class="wrap">
  <header class="head">
    <h1>2048</h1>
    <div class="scores">
      <div class="score-box"><span class="label">Score</span><span id="score">0</span></div>
      <div class="score-box"><span class="label">Best</span><span id="best">0</span></div>
    </div>
  </header>
  <div class="bar">
    <p class="hint">Join the tiles, get to <b>2048!</b></p>
    <button id="new">New Game</button>
  </div>
  <div class="board-wrap">
    <div id="board" class="board">
      <div class="grid" id="grid"></div>
      <div class="tiles" id="tiles"></div>
    </div>
    <div class="overlay" id="overlay" hidden>
      <div class="msg">
        <p id="msg-title">Game Over!</p>
        <div class="msg-btns">
          <button id="keep">Keep going</button>
          <button id="again">Try again</button>
        </div>
      </div>
    </div>
  </div>
  <p class="keys">Use arrow keys or swipe. Adjacent equal tiles merge once per move.</p>
  <div id="live" class="sr" aria-live="polite"></div>
</main>
<script>...</script>
</body>
</html>
```

Overlay must be positioned over the board — put it inside .board-wrap with absolute.

Now the JS.

```js
(function(){
const SIZE=4;
const SLIDE=110;
const board=document.getElementById('board');
const tilesEl=document.getElementById('tiles');
...
let grid, score, best, won, over, animating, idc;

function emptyGrid(){return [[null,null,null,null],...]}
function eachCell(cb){for r,c cb(r,c)}
function inBounds(r,c){return r>=0&&r<4&&c>=0&&c<4}

function createTileEl(tile){
  const el=document.createElement('div');
  el.className='tile tile-'+tile.value...
```

For values > 2048 use class 'tile-super'. Use dataset for digits count.

Set el.style.setProperty('--x', tile.col) etc.

Tile text = value.

Let me write functions:

function placeTile(tile){ tile.el.style.setProperty('--x', tile.col); tile.el.style.setProperty('--y', tile.row); }

function setValue(tile){ tile.el.textContent=tile.value; tile.el.className='tile tile-'+(tile.value<=2048?tile.value:'super'); tile.el.dataset.d=String(tile.value).length; }

move:

const VECTORS={ArrowUp:{r:-1,c:0},...};

function move(dir){
 if(animating||over) return;
 const v=VECTORS[dir];
 const dr=v.r, dc=v.c;
 // traversal order
 const rows=[0,1,2,3], cols=[0,1,2,3];
 if(dr===1) rows.reverse(); if(dc===1) cols.reverse();
 let changed=false;
 const slides=[]; // el -> new pos (just update)
 const merges=[]; // {a,b,value,row,col}
 // clear grid into moving model: we operate on grid directly
 for(const r of rows) for(const c of cols){
   const tile=grid[r][c];
   if(!tile) continue;
   let nr=r,nc=c;
   while(inBounds(nr+dr,nc+dc) && !grid[nr+dr][nc+dc]){nr+=dr;nc+=dc}
   const tr=nr+dr, tc=nc+dc;
   const nxt=inBounds(tr,tc)?grid[tr][tc]:null;
   if(nxt && nxt.value===tile.value && !nxt.merged){
     // merge
     const merged={id:idc++,value:tile.value*2,row:tr,col:tc,merged:true,el:null};
     grid[tr][tc]=merged; grid[r][c]=null;
     nxt.merged=true;
     merges.push({merged, sources:[nxt, tile]});
     changed=true;
   } else if(nr!==r||nc!==c){
     grid[r][c]=null; grid[nr][nc]=tile; tile.row=nr; tile.col=nc; changed=true;
   }
 }
 if(!changed){ /* nudge? */ return; }
 animating=true;
 // phase1 DOM
 for(const m of merges){
   // create merged el hidden at destination
   createTileEl(m.merged, 'pending');
   for(const s of m.sources){ s.row=m.merged.row; s.col=m.merged.col; placeTile(s); }
 }
 // slides: place all tiles (positions already updated)
 forEachTile(placeTile) — but merged tiles already placed.
 // score
 ...
 setTimeout(()=>{
   for(const m of merges){
     m.sources.forEach(s=>{ if(s.el) s.el.remove(); grid... they're no longer in grid });
     revealTile(m.merged); // remove pending, add tile-merged pop
   }
   spawnTile();
   animating=false;
   updateStatus();
   checkState();
 }, SLIDE);
}
```

Wait: `nxt.merged` flag — merged tiles created during this move have `merged:true` and are in grid; when the traversal reaches them? Traversal goes in order from the direction edge, so a tile at (tr,tc) is processed before (r,c) in the order we iterate (since we iterate from the target edge outward). Actually for left: cols reversed? For dc=-1 (left), we want to process columns leftmost first → cols=[0,1,2,3]. A tile can only merge into a cell closer to the edge, which was processed earlier. The merged result is at (tr,tc) which is closer to the edge; it won't be visited again since we already passed that cell. Good. But careful: when we later process tile at (r,c), the merged tile sitting at (tr,tc) has merged=true so it won't merge again. And the while loop skipping: grid[nr+dr][nc+dc] is the merged tile → blocks. ✓

Also sources tiles (nxt and tile) are no longer in the grid — they exist only in DOM for animation. That's fine since we only iterate grid.

Important: `nxt` may itself be a tile that was created as merged? No, merged is blocked by flag. But nxt could be a source-removed? No.

Edge: [2,2,2,2] left: process (0,0) tile A: farthest = (0,0), nxt=(0,1)=B equal → merge → C(4) at (0,1), grid[0][0]=null. process (0,2)=D: slide: while grid[0][1] is C (occupied) → stop nr=0,nc=... wait: D at (0,2): while inBounds && !grid → grid[0][1]=C occupied so nr stays 2. nxt = grid[0][1] = C, value 4 vs D 2 → not equal. So D stays at (0,2)? That's wrong! Expected [4,4,0,0] for left: A+B → 4 at col 0, C+D → 4 at col 1.

Hmm, in classic 2048, [2,2,2,2] → [4,4,0,0]. My traversal merged A into B producing 4 at col1, which is wrong — the merged tile should land at the farthest position. In cirulli's implementation: for tile moving from (0,0) rightward check: it computes next = first non-empty in direction; the merged cell position is `next` position. Let's re-derive: A at col0 tries to move left: farthest empty = col0 itself, next cell col-1 out of bounds. Hmm with direction left, dc=-1: from (0,0): nr=0,nc=0 (can't move), tr=0,tc=-1 out of bounds. So no merge. Then B at (0,1): moves while grid[0][0] — it's null now (A removed)? No, A is still there: we process col0 first, A didn't move and stays. So B: farthest empty in direction... grid[0][0] = A occupied → nr stays 1. nxt = A equal, A not merged → merge into A at col0. Result: merged 4 at col0, grid[0][1]=null. ✓ Good, I made an error above: the merge target position is `nxt`'s position (tr,tc) and the moving tile is the one further from the edge. So in my code grid[tr][tc] = merged, grid[r][c] = null — that's what I have. Let me redo [2,2,2,2] left:

- col0: A at (0,0), nr=0,nc=0, tr=0,tc=-1 out → no merge, no move. 
- col1: B at (0,1). while: check (0,0) occupied → stop. nxt=grid[0][0]=A, equal, !A.merged → merged C(4) at (0,0); grid[0][1]=null; A.merged=true. changed ✓
- col2: D at (0,2). while: (0,1) empty → nr=0,nc=1; next (0,0) occupied stop. nxt=grid[0][0]=C value 4 ≠ 2 → place D at (0,1). ✓
- col3: E at (0,3). while (0,2) now empty → nc=2; (0,1) occupied → nxt=D value2 equal, D.merged false → merge F(4) at (0,1). 

Result: [4,4,0,0] ✓ 

[2,2,4,0] left: col0: A(2) no move. col1: B(2) → nxt A equal → merge C(4) at col0. col2: D(4): while (col1) empty → nc=1; next (col0) = C occupied, value 4 equal but C.merged → blocked → D placed at col1. Result [4,4,0,0] ✓ 

Merged sources DOM: for merge, both A (stays at (0,0)) and B move to (0,0). merged at (0,0).

Note: sources positions — the merged tile position is (tr,tc), which equals nxt's current position, so nxt doesn't move; B moves onto it. In my code I set both source row/col to merged position and call placeTile — nxt gets placed at same spot (no visual change). ✓ But careful: nxt might have been moved earlier in this same traversal? nxt is at grid[tr][tc] which we found by scanning; if nxt had moved it would have been removed from that cell. So nxt is at (tr,tc). ✓

But one bug: when I set s.row/s.col for the merged tile's destination, I need m.merged.row/col = tr,tc. Yes.

Now for slides: after the loop, all tiles in grid have correct row/col; I place all tiles via forEach over grid. The sources are no longer in grid, so I must place them explicitly (done in merges loop).

Score: for each merge: score += merged.value.

Spawn: after animation.

checkState: if any cell 2048 and !won → show win overlay. if !movesAvailable() → over=true, show game over overlay.

movesAvailable: any null cell OR any adjacent equal pair.

Add a subtle "shake" for invalid move? Optional: add class to board for invalid move. Let's include a tiny shake animation — cheap. Actually requirement says "Do not spawn after an unchanged move" — that's satisfied.

Score float popup: element added near score box showing +N.

Let's write the CSS.

```css
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh; background:#0f1115 (or radial); color:#f7f6f3;
  font-family: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  display:flex; align-items:center; justify-content:center; padding:24px 12px;
}
:root{ --board:min(92vw, 440px, 60vh); --gap:calc(var(--board)/22); --cell:calc((var(--board) - 5*var(--gap))/4); --slide:110ms; }
```

Careful: --board using min with vw/vh fine.

.wrap{width:var(--board); max-width:100%}

Board: .board{position:relative;width:var(--board);height:var(--board);background:#54504a / #1b2430;border-radius:10px}
.grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:var(--gap);padding:var(--gap)}
.grid span{background:rgba(255,255,255,.07);border-radius:6px}
Wait grid rows: content box = board - 2*gap; each cell = (board - 5gap)/4 ✓ with 1fr and gap.

.tiles{position:absolute;inset:0;padding:var(--gap)}? Tiles are absolutely positioned with left/top = var(--gap) and transform translate. Since .tiles has inset:0 and tiles position:absolute with left:var(--gap);top:var(--gap) relative to .tiles box (which is the padding box? For absolutely positioned elements, offsets are relative to the padding box of the containing block... percentages resolve against padding box; `inset:0` with padding would give padding box). Simpler: .tiles{position:absolute;inset:0;} no padding; tile left/top = var(--gap).

.tile{position:absolute;left:var(--gap);top:var(--gap);width:var(--cell);height:var(--cell);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:calc(var(--board)*0.11);transform:translate(calc(var(--x)*(var(--cell) + var(--gap))),calc(var(--y)*(var(--cell)+var(--gap))));transition:transform var(--slide) ease-in-out;background:#b8b4ac;color:#3c3a32}

Hmm: transform with default --x/--y unset → need fallback: use `--x:0;--y:0` in :root or in .tile. Set `.tile{--x:0;--y:0}`.

calc(var(--x) * (var(--cell) + var(--gap))) — multiplication of number by length: valid in modern CSS. Should work in Chrome.

Digit sizing: .tile[data-d="3"]{font-size:calc(var(--board)*0.09)} [data-d="4"]{0.072} [data-d="5"]{0.058} default 0.11.

Colors per value.

Animations:
@keyframes appear{from{opacity:0;transform:...scale(.1)} } — problem: transform includes translate; can't easily animate scale on the same property since translate is set. Solution: nested inner element for scale! Put the visual tile inside a wrapper: .tile (positioning + transition) > .face (background, text, animations of scale). That's cleaner.

So .tile is the mover; inside .face fills it with background, border-radius, and pop animation.

.tile.pending .face{opacity:0}
.tile.merged .face{animation:pop 200ms ease var(--slide? no) } — we reveal at phase 2 so animation starts then; just apply class at phase2 with animation: pop 180ms ease-out.
.tile.new .face{animation:appear 200ms ease-out}
Movers: when a new tile is created for a slide/merge we place it at final position without transition (initial creation sets left/top/transform before insertion → no transition because it's initial value... Actually transitions don't run on first style computation after insertion if set before insertion. We set --x/--y before appending. ✓)

Also to avoid the "pop" animation applying on later moves, remove class names when needed. Since we create new elements per merged/new, fine.

Let's write .face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:8px;background:...;transition:none}

Colors: define on .tile-2 .face? Use `.tile-2 .face{background:#eee4da;color:#776e65}`.

Overlay: .board-wrap{position:relative} .overlay{position:absolute;inset:0;background:rgba(20,22,28,.72);backdrop-filter:blur(2px);display:flex;...;border-radius:10px;z-index:5} [hidden]{display:none}

Buttons styled.

Score boxes.

Now the aria-live status.

Also prevent page scroll: on keydown for ArrowUp/Down/Left/Right/Space? just arrows → e.preventDefault().

Also handle window blur? not needed.

Let me also add "best" persisted in localStorage with try/catch.

Now write the file. Also add keyboard shortcuts: N for new game.

I'll now write the complete code.

Then test with browser tool: check initial render, simulate moves via keyboard? The browser tool supports key action — need to check syntax: action 'key' with text? Params: text field exists for type/click? Let me just use action:"key" with text:"ArrowLeft". I'll also verify via JS evaluation... there's no evaluate action listed. Hmm, actions: reload, inspect, screenshot, motion, click, drag, key, type, scroll. No direct JS eval. I can use inspect to see DOM/console. So to verify board logic, I'd need to read DOM through inspect. That might show the DOM structure.

Alternative: I can test the logic headlessly with node by extracting the script? Better: write the pure logic in a way I can test in node — e.g., temporarily copy the move function into a test file. Let me do: put game logic (grid move) in a function that's self-contained and expose it on window for testing? I can't eval in browser. But I can run node tests by extracting the script and stubbing DOM... too complex.

Simplest verification: write the file, then create a small node test file that duplicates the move algorithm to verify [2,2,2,2] and [2,2,4,0] behavior — but that tests a copy, not the real code. Better: structure the logic as a pure function `computeMove(gridValues, dir)` that operates on a plain array of numbers, and use it in the DOM layer. Then in node, extract that function from index.html via regex and run it on the test cases. That gives real verification of the algorithm. Good plan.

Design: tiles have ids for DOM. Pure function operates on grid of tile objects though (needs ids). I could make `computeMove(grid, dir)` where grid is 4x4 of {value,id} or null, returning {grid, changed, merges:[[idA,idB,newId,value,row,col]], moves:[[id,row,col]]}. Testable in node with plain objects. Yes! Let's do that, defined as a top-level function `function computeMove(grid, dir){...}` with no DOM refs. Then in node, extract with a marker comment: put it between `/*LOGIC-START*/` and `/*LOGIC-END*/` and export via `if (typeof module!=='undefined')`? Simpler: read index.html, extract script content, and use regex to slice from 'function computeMove' to '/*LOGIC-END*/', then eval in node with `new Function`. Good.

But careful about the id assignment — need nextId from state. Make computeMove take a counter function? Or return merges with new tile id undefined and caller assigns. I'll pass `nextId` as a param and return updated id counter... Cleaner: computeMove(grid, dir, idBase) where merged ids are idBase + mergeIndex. Then caller sets idCounter += mergeCount. Fine.

Grid tile objects: {id, value, row, col}. computeMove works on copies: it builds a new grid array; tiles are the same object references but with row/col updated (mutating is fine and simpler). Actually for testability, let it operate on the given grid, mutating row/col, and return the new grid.

Let's write:

function computeMove(grid, dir, nextId){
  const dr = dir==='up'?-1:dir==='down'?1:0;
  const dc = dir==='left'?-1:dir==='right'?1:0;
  const rows=[0,1,2,3], cols=[0,1,2,3];
  if(dr>0) rows.reverse();
  if(dc>0) cols.reverse();
  const out = grid.map(row=>row.slice());  // shallow copy of arrays
  const moves=[], merges=[];
  let changed=false, id=nextId;
  for(const r of rows) for(const c of cols){
    const tile=out[r][c]; if(!tile) continue;
    let nr=r,nc=c;
    while(true){ const tr=nr+dr, tc=nc+dc; if(tr<0||tr>3||tc<0||tc>3||out[tr][tc]) break; nr=tr; nc=tc; }
    const tr=nr+dr, tc=nc+dc;
    const nxt = (tr>=0&&tr<4&&tc>=0&&tc<4)?out[tr][tc]:null;
    if(nxt && nxt.value===tile.value && !nxt.justMerged){
      const merged={id:id++, value:tile.value*2, row:tr, col:tc, justMerged:true};
      out[tr][tc]=merged; out[r][c]=null;
      tile.row=tr; tile.col=tc;
      moves.push([tile.id,tr,tc]);  // for animation of the moving source
      merges.push({merged, from:[nxt.id, tile.id], score:merged.value});
      changed=true;
    } else if(nr!==r||nc!==c){
      out[r][c]=null; out[nr][nc]=tile; tile.row=nr; tile.col=nc;
      moves.push([tile.id,nr,nc]);
      changed=true;
    }
  }
  return {grid:out, changed, moves, merges};
}

Note: nxt doesn't need to move (already at tr,tc). ✓

Then DOM layer: 
- maintain a map id→el.
- For merges: hide nothing; create merged el now with class pending (so it doesn't show until phase2? Actually the merged el at destination would be on top of the sources and visible immediately, hiding the slide. Use `.pending .face{opacity:0}` then reveal.)
- After SLIDE: remove source els & from map; reveal merged.

Also the grid model for the game is `out`.

Testing with node: build a grid from a row of values, run computeMove, print resulting values. Let me write the extract-and-test script.

Now write everything.

Also spawnTile after move; also initial two tiles.

Also `movesAvailable(grid)`: check nulls & adjacency. Pure too (nice for tests).

Let me write the file now.

Regarding the win check: after merges, if merged.value===2048 && !won → show win. Also if user continues, set won=true so it doesn't re-show.

Game over check: after spawn. If no moves available → over=true, show overlay.

Also handle: overlay "keep going" hides overlay.

New game: clear els, score 0, reset.

I'll write it.

Also the score float animation: element `.float` in score box showing +N with animation.

Let's write final HTML.

For console errors, careful with `hidden` attribute + display flex: use `.overlay[hidden]{display:none}`.

Write now.

For the `pending` merged tile, also I should ensure the transition doesn't apply — created at final position.

Timing constants: SLIDE = 120ms in JS matching CSS var --slide: 120ms. Use 120.

Also for responsiveness with rapid input: animating lock 120ms. Also allow queueing? I'll implement a tiny buffer: if animating, store pending direction only if not already stored, and process after animation. Hmm risk of confusion with game over states; it's fine and improves feel. Actually simpler and safer: just ignore. Requirement mentions not corrupting state on rapid input. Ignoring is safe. I'll ignore but the lock is short.

Let me write.

One more: keyboard handling for arrows should also work when focus is on a button (New Game) — arrows still handled since we listen on window and preventDefault. Fine.

Write the file.

Empty directory. Node is available for logic tests. Let me write index.html.

There's a bug: `el.__merged` is never set. In phase 1, for merges I move the source elements via `m.from`, and then `result.moves` includes the moving source tile (which is already handled). Setting it again is harmless. But `el.__merged` check is meaningless — remove or leave. Actually the merged tile itself is NOT in moves, so no conflict. The duplicate placement is identical values, fine. I'll simplify by removing that check.

Also potential bug: `hasMoveLeft` iterates assuming grid[r][c] non-null; it's only called when no empty cells... Actually it's called always — if emptyCells.length is nonzero we return true early. If zero, all cells non-null. ✓

Another: `els` map keyed by tile id — merged source tile ids deleted. New tiles get ids. But tile.el reference is unused now (I use els map). Fine.

Bug: `reset()` while animating — animating=false set, but pending setTimeout from prior move could fire and mutate stale elements (removed from DOM). Its `result.merges` refers to old els; `els[tid]` would be undefined after reset (new els object) → the forEach guards with `if (el)`. But `addRandomTile` would add an extra tile to the new game (making 3 tiles) and could set over/won. Need to guard with a move generation counter. Let's add `epoch` incremented in reset; in the timeout, return early if epoch changed.

Also `window.__2048` exposes state; the `tiles` count uses Object.keys(els).length. Note merged pending tiles in els count too... after phase 2 they're removed so fine.

Let me apply these fixes, then run node logic tests, then browser check.

Wait — the merges' source tile elements also get placed by result.moves (the moving tile is in moves AND in m.from). Same destination, harmless.

Now write a node test harness that extracts the logic block and tests the required examples plus spawn/score behavior simulation.

Note: `posOk` uses `cOf(row,t)` defined after use via function declaration hoisting — fine.

Run it.