2048 · particle-1

Let me build the game.

Implement 2048. Board 4x4 using absolutely positioned tiles with transform translate for animation. Keep model grid and tile objects.

Design approach: tiles as DOM elements positioned via CSS transitions. Each tile object {id, value, row, col, el, merged}. On move, compute new positions and merges, animate, then spawn new tile.

Simpler robust approach: keep tile objects in array; each move compute for each line order, produce new positions. Use CSS transitions on transform.

Implementation:

Grid model: grid[r][c] = tile object or null.

Tile: {value, r, c, el, id}.

move(dir): build order lines. For each line, gather tiles in traversal order. Then compact: iterate; for each tile, target position (compressed) ; if previous placed tile has same value and not already merged -> merge.

Track animations: each tile's new r,c. For merged-away tile, move it to target location then remove after transition, and create merged tile at target after? Standard approach: the surviving tile moves to target and value updates after animation (scale pop).

Let me write:

function move(dir):
 if animating/gameover return
 compute vector.
 build lines: for each of 4 rows/cols, list of cells in order of movement direction.
 changed=false
 moves = [] // {tile, r, c, mergeInto?}
 newGrid empty.
 For each line:
   tiles = cells.map(grid) filter
   // traversing from the far edge
   let outIdx=0; 
   process tiles sequentially (tiles are ordered from the destination edge first).
   Actually to merge correctly: iterate tiles in order from the edge toward the direction. e.g. left: index 0..3. Place tile at outIdx if possible. Compare with last placed tile in this line: if same value and last wasn't merged -> merge.
   
   let placed = [] // {tile, value, merged}
   for tile of tiles:
     if placed.length && placed[last].value === tile.value && !placed[last].merged:
        placed[last].merged = true;
        moves.push({tile, targetCell: placed[last].cell, mergeInto: placed[last].tile})
        // mark tile for removal
        tile.value *= 2 handled later...
     else:
        cell = cells[placed.length]
        placed.push({tile, value: tile.value, merged:false, cell})
        newGrid[cell] = tile
  
 For merge, the resulting value = value*2, score += that.

 Then apply tile positions. For merged tiles, animation: moving tile moves to the target cell and gets removed; surviving tile stays at target then updates value.

 Hmm, keep it simple: For merging pair, the absorbed tile moves to target cell and disappears after transition, the surviving tile updates value immediately? For visual, better update value after ~120ms.

I'll implement: each tile has el with transform translate(r*.., c*..). On move, set new transforms for all tiles including absorbed ones (they go to target cell), add 'merging' class maybe z-index below. After transitionend/timeout, remove absorbed elements, update surviving values, spawn new tile.

Score update: immediately on merge animate score.

Let's define cell size responsive: use CSS var --cell and gap. Board padding. Use percentage? Easier with fixed px based on --size. Let's use board width computed in JS? Use CSS grid for background cells and absolute tiles positioned with calc from CSS vars.

Set board size via CSS: .board { width: min(92vw, 420px); aspect-ratio: 1; padding: var(--gap); } cell size computed in JS via getBoundingClientRect on a background cell. On resize, reposition all tiles. That's most robust.

Let's do: board has position relative, padding 8px, display grid 4x4 gap 8px with background cells. Tiles absolutely positioned inside board, top-left 0 with transform translate(x,y) where x = padding + c*(cell+gap).

Compute metrics: const rect = cellEls[0].getBoundingClientRect(); boardRect; gap from computed style. offsetX = cellRect.left - boardRect.left.

On resize, recalc and set transforms without transition.

Tile element: absolutely positioned, width/height = cell size, transition transform 100ms ease. Font size relative to size.

Keyboard handling: preventDefault on arrow keys. Use a queue? Input lock: ignore input while animating (animating flag set during 110ms). Better: queue one pending move? Requirement: "without allowing rapid input to corrupt board state" — input lock is fine. But rapid input ignoring might feel laggy. Use short animation 100ms and allow queueing: store pending direction, process after animation. I'll do simple: if busy, store last pending dir; after animation completes, if pending, execute.

Actually the game state updates immediately in model; only DOM cleanup is async. Key risk is spawning tiles twice. I'll implement model update synchronous including spawn (spawn after animation completes makes animation nicer but model corruption risk). Let's do: model complete immediately (including spawn) but new tile element gets 'new' class and appears with delay after animation? Simpler: do everything after animation completes with lock. Animation 120ms is fine.

Plan:
- busy flag.
- on key: if gameover or won-and-not-continued? game continues. If busy, set queued = dir (only keep latest).
- performMove(dir): compute; if no change -> busy=false, return false. Else busy=true, animate, setTimeout(finish, 130).

finish: remove absorbed tiles, update values of surviving tiles (with pop animation), spawn new tile, update score display, check win/gameover, busy=false, if queued: process.

Win detection: when a 2048 tile exists and !won: show win overlay with "Keep Going" button; won=true. Continue button hides overlay. Ensure gameover not triggered while overlay shown? Game goes on. Overlay display just message with continue button; block input while overlay visible? Yes—win overlay with keep going button, input blocked while overlay is shown, that's fine and keeps state clean.

Game over: no valid moves.

Score: current + best? Show score. Maybe also best in localStorage—no network, fine, but localStorage may be blocked in sandboxed iframe (opaque origin throws). Wrap try/catch. I'll skip best score to be safe? Could include with try/catch. I'll include Best with try/catch.

New Game button resets.

Let's write code.

HTML structure:

<div class="app">
  <header>
    <h1>2048</h1>
    <div class="scores"><div class="score-box"><span>SCORE</span><strong id="score">0</strong></div> ...</div>
  </header>
  <div class="subhead"><p>Join the tiles, get to <b>2048!</b></p><button id="new">New Game</button></div>
  <div class="board" id="board">
    <div class="grid" id="grid"></div>  // background cells
    <div class="tiles" id="tiles"></div>
    <div class="overlay" id="overlay"><div class="overlay-card"><h2 id="ov-title"></h2><p id="ov-sub"></p><div class="ov-buttons"><button id="ov-main">New Game</button><button id="ov-continue" class="secondary">Keep Going</button></div></div></div>
  </div>
  <p class="hint">Use arrow keys to play</p>
</div>

Tile colors for 2..2048, beyond: dark.

CSS variables for cell size set in JS: --cell.

Let me carefully write JS.

```js
const SIZE=4;
let grid, score, won, over, busy, queued, tiles, nextId;

function makeEmpty(){return Array.from({length:4},()=>Array(4).fill(null));}
```

metrics:
```js
let cellSize=0, gap=0, boardPad=0;
function measure(){
  const board=document.getElementById('board');
  const first=document.querySelector('.cell');
  const br=board.getBoundingClientRect();
  const cr=first.getBoundingClientRect();
  cellSize=cr.width;
  gap=parseFloat(getComputedStyle(board).gap)||0; // gap on .grid, not board
  ...
}
```
Hmm .grid is inset by padding of board. Let's define board padding via CSS var --pad, and .grid absolute inset var(--pad) with gap var(--gap). Then offset = pad + i*(cell+gap). cell = (boardInner - 3*gap)/4.

Simplest: compute from cells: cell = cr.width, gap = (second cell left - first cell left) - cell. offsetX = cr.left - br.left. Good, works regardless.

relayout(animate=false): for each tile set transform.

positionTile(t, animate): 
t.el.style.transform = `translate(${ox + t.c*(cell+gap)}px, ${oy + t.r*(cell+gap)}px)`;
and el.style.width/height = cell px, fontSize = cell*0.42.

Set via CSS var? Just set inline width/height.

Tile creation:
```js
function createTile(r,c,value){
 const t={id:nextId++, r,c,value};
 const el=document.createElement('div');
 el.className='tile';
 el.dataset.value=value;
 el.innerHTML='';
 const inner=document.createElement('div'); inner.className='tile-inner'; inner.textContent=value;
 el.appendChild(inner);
 el.style.width=el.style.height=cellSize+'px';
 ... font size
 el.style.transform=...;
 tilesEl.appendChild(el);
 t.el=el; t.inner=inner;
 grid[r][c]=t;
 tiles.push(t);
 return t;
}
```

Set data-value for colors; values >2048 chunk, use v2048 class beyond.

updateTileValue(t, value): t.value=value; t.inner.textContent=value; t.el.dataset.value = value<=2048?value:'super'; pop animation class.

Move logic:

```js
const VEC={left:[0,-1],right:[0,1],up:[-1,0],down:[1,0]};
function getLines(dir){
  // returns array of arrays of [r,c] ordered from the edge in movement direction
}
```
For left: for each row r, cols 0..3. right: cols 3..0. up: for each col c, rows 0..3. down: rows 3..0.

Move:
```js
function computeMove(dir){
  const lines=getLines(dir);
  const moves=[]; // {tile, r, c}
  const merges=[]; // {survivor, absorbed, value, r, c}
  const newGrid=makeEmpty();
  let gained=0;
  let changed=false;
  for(const line of lines){
    const seq=[];
    for(const [r,c] of line){ if(grid[r][c]) seq.push(grid[r][c]); }
    let out=0;
    let last=null; // {tile, value, merged}
    for(const tile of seq){
      if(last && last.value===tile.value && !last.merged){
        const cell=line[out-1]; // hmm need cell of last
        ...
      }
    }
  }
}
```
Careful: last.cell.

```js
    for(const tile of seq){
      if(last && !last.merged && last.value===tile.value){
        last.merged=true;
        const cell=last.cell;
        const val=tile.value*2;
        last.value=val;
        merges.push({survivor:last.tile, absorbed:tile, value:val, r:cell[0], c:cell[1]});
        gained+=val;
        moves.push({tile, r:cell[0], c:cell[1]});
        changed=true;
        // survivor stays at cell in newGrid
        if(last.tile.r!==cell[0]||last.tile.c!==cell[1]) changed=true;
        last.tile.r=cell[0]; last.tile.c=cell[1];
        moves.push({tile:last.tile, r:cell[0], c:cell[1]});
      } else {
        const cell=line[out++];
        last={tile, value:tile.value, merged:false, cell};
        newGrid[cell[0]][cell[1]]=tile;
        if(tile.r!==cell[0]||tile.c!==cell[1]) changed=true;
        tile.r=cell[0]; tile.c=cell[1];
        moves.push({tile, r:cell[0], c:cell[1]});
      }
    }
```
Wait survivor must occupy newGrid cell: set newGrid when placing. In merge case newGrid already has survivor at that cell from when it was placed. Yes.

Note moves may contain duplicate entries for a survivor; fine since applying transform twice identical.

If !changed: return false (grid unchanged; but we mutated tile.r/c? Only if changed. If no change, positions unchanged; newGrid equals grid. Fine.)

If changed: grid=newGrid; score+=gained.

Apply: set transforms for all moves; absorbed tiles get class 'absorbed' z-index lower. After 120ms: remove absorbed elements, update survivors values with pop.

Careful: multiple merges may chain to survivor? last.merged prevents double merge at same target. Correct for [2,2,2,2] left: 
seq 2,2,2,2. tile1 placed cell0, last={v2,tile1,cell0}. tile2: last.value 2 equal, not merged -> merge into tile1: last.value=4, merged=true. tile3: last.value 4 !== 2 -> placed cell1 {v2, merged false}. tile4: equal 2, not merged -> merge into tile3 -> v4. Result [4,4] ✓.
[2,2,4,0]: tile1 cell0, tile2 merges -> v4, tile3 value4, last.value=4 and merged=true so no merge -> placed cell1 value4. Result [4,4] ✓. 

[4,2,2,0]: t1 cell0 v4. t2 cell1 v2. t3: last v2 equal → merge into cell1 → v4. Result [4,4,0,0], score+4 ✓ (not 8 since merged flag).

Score accumulation. Good.

Spawn: pick random empty cell in grid, value 2 (90%) else 4, create tile with class 'new' pop.

Win check: after finishing, if any tile value>=2048 && !won -> won=true, show overlay "You Win!" with continue.

Game over: no empty cells and no adjacent equal.

Input handling:
```js
document.addEventListener('keydown', e=>{
  const dirs={ArrowLeft:'left',ArrowRight:'right',ArrowUp:'up',ArrowDown:'down',a:'left',...};
  if(dirs[e.key]) { e.preventDefault(); handleInput(dirs[e.key]); }
});
```
Prevent default for arrow keys always, even when busy.

handleInput(dir): if over or overlayVisible(win pending) return; if busy {queued=dir; return;} doMove(dir).

doMove(dir): compute; if !changed { return; } busy=true; render move transforms; setTimeout(()=>{ finalize(); busy=false; if(queued){const q=queued; queued=null; doMove(q);} }, 130).

Hmm but finalize includes spawn and gameover; then if queued doMove — could get over check. Fine.

Also keyboard focus: buttons may take focus; arrow keys still trigger document listener. Also prevent button activation by space etc. fine.

Also support touch/swipe? Not required but nice. Keep brief — maybe add swipe. Not necessary; skip to save time? Add simple pointer swipe, low risk. I'll add it.

New Game: reset grid, score, won, over, tiles, overlay hidden, spawn two.

Measure: need cellSize before first render. Call measure() after DOM built. On resize: measure(); tiles.forEach(relayout without transition) — temporarily disable transitions by adding class 'no-anim' to board.

CSS:

body dark background? Use classic 2048 colors: beige background #faf8ef, board #bbada0.

Tile colors:
2 #eee4da text #776e65
4 #ede0c8
8 #f2b179 white text
16 #f59563
32 #f67c5f
64 #f65e3b
128 #edcf72
256 #edcc61
512 #edc850
1024 #edc53f
2048 #edc22e
super #3c3a32

Use [data-value="2"] etc.

Board sizing: .board { width: min(90vw, 440px); aspect-ratio:1; position:relative; background:#bbada0; border-radius:8px; padding: var(--pad); } But .grid inset padding with gap.

Simpler: .board { position: relative; width:...; aspect-ratio: 1; padding: 10px; background: #bbada0; border-radius: 10px; box-sizing: border-box; }
.grid { position:absolute; inset:10px; display:grid; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(4,1fr); gap:10px; }
.cell { background: rgba(238,228,218,0.35); border-radius:6px; }
.tiles { position:absolute; inset:10px; } — but tiles positioned via translate from tiles container origin: ox = cellRect.left - tilesRect.left. Simplify: make .tiles inset:0 relative to board and compute ox from boardRect. I'll use .tiles { position:absolute; inset:0; } and compute offsets from board rect, so tiles can be positioned anywhere. But overflow hidden needed on board so tiles don't spill outside—they won't.

Actually with tiles inset:0 and tile absolute at top:0 left:0 with translate, the board needs position:relative and tiles container is a pass-through. Fine.

Set tile transition: transform 110ms ease-in-out.

Pop animation: keyframes pop scale(1.18)->1 applied to inner. Since outer handles transform, animate inner element. New tile: inner animation appear 110ms.

Tile inner fills: .tile-inner { width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:6px; font-weight:700; transition: background-color .1s; }

Set on outer el data-value, inner styled by .tile[data-value="2"] .tile-inner.

Font sizes: JS sets fontSize = cell*0.45, and for 4-digit values smaller (value>=1000 → cell*0.36; >=10000 → 0.3).

Overlay: absolute over board, hidden by default with opacity/visibility; when shown flex center with backdrop rgba(238,228,218,0.73).

Let's write the file.

Also add aria-live for score? Fine.

Write now.

Note: measure() is called on initial state before spawn; but measure uses tiles (empty array) fine. Also place() sets transition none for initial, so spawned tiles have transition none set inline — later place(tile, true) resets transition = '' so fine.

Potential issue: newGame calls measure() then spawn tiles which place with animate false setting transition none. Fine.

Another issue: measure() at initial after spawning sets place(tile,false) which sets transition none — then next move animate resets it. Good.

But after no-anim resize, transition remains inline-none until next place with animate true. Yes place sets transition='' for animate.

Let me test with browser.

Initial state good, two tiles. Now test moves. I'll use keyboard via browser tool and inspect state. Also test edge case [2,2,2,2] via programmatic test? The hook only exposes move/newGame; no state setup. I can test logic via node? Hard since inline. But I could evaluate in browser console? The browser tool has no eval action. I can add a temporary test by embedding a test script in the page? Better: create a separate test file copy with logic? Simpler: write a node script that extracts computeMove logic... not trivial.

Alternative: simulate many random moves and verify invariants (count tiles, score merges consistency). Could implement a reference simulation in node and compare via state snapshots, but driving moves requires calling window.__game2048.move from page. The browser tool only clicks/keys. However I can dispatch keydown to keys.

I'll do a short sequence of key presses and inspect state. Also verify [2,2,2,2] behavior by adding a debug hook in page? I could temporarily add a `__game2048.setGrid` debug function... I could add it permanently (tiny) — not harmful, but exposing internals fine. Let me instead use a temporary copy test.html with injected setup to test move logic, separate from final index.html. But copying full file and modifying is extra. Easier: in index.html, extend the debug hook with an optional `_load(values)` — it's a debug hook, acceptable. Actually adding test-only API is fine but may confuse. I'll add `_setGrid` secret for verification then possibly keep (harmless).

Let me add it quickly.

Now I need a way to execute JS in the page. The browser tool doesn't have eval. But I can test the pure movement logic by extracting the script and running in node with a DOM shim? Heavy.

Alternative: create a test page test.html that includes index.html's script plus a test harness in iframe? Same-origin file? The browser serves the directory perhaps. I can write a test.html that loads index.html in an iframe and calls iframe.contentWindow.__game2048 — file:// iframes may be blocked by origin policy. But the harness likely serves over http. Let's check by writing a test harness page that imports index.html into iframe, runs assertions using _load/move and a promise delay, prints results to DOM. Then screenshot/inspect.

Wait, but _load is in index.html and iframe access should be same-origin if served http. Let's try.

First simple key test with real moves. Fresh reload then left/up moves.

Hmm: after ArrowLeft, the row1 tile at c3 stayed at c3 and row2 tile moved from c1 to c0. That's correct — moving left doesn't change top-right tile at col3 (no tile to its left), and middle-left tile was already at col0. Board changed? No! Those tiles were already in their leftmost positions, so move didn't change. Wait initial was top row c3 and row1(second row) c1. Left move: top tile c3 → c0 should have moved. But screenshot shows top tile still at col 3... Hmm the screenshot after shows top tile at col 3 still with larger tile? Actually image shows top tile at col3 with bigger size (width 97?) and second row tile at col0. Looks like it rendered c0? No top tile is at x≈700-795 which is col3. So top tile didn't move left. That's a bug!

Wait maybe the screenshot was captured mid-animation? No, top tile appears at col3. And second-row tile at c1... initial second row tile at c1 (x=410-487). After: x=390-487, slightly wider? Hmm the tiles look bigger in second screenshot — maybe mid-animation scale? Both tiles appear at same positions but bigger. That suggests animation frame captured at start? Actually the tile widths: first screenshot cell ~97 wide, second screenshot tile ~97. Hmm.

Maybe this is a mid-animation frame captured right at start of move (0ms after key). The tiles appear at original positions but bigger because of appear animation finishing? The initial screenshot new tiles with appear animation might have been at scale ~0.5 at capture. Actually first frame showed small tiles (78px) and second frame shows full size 97px. So capture happened shortly after first reload, mid appear animation.

So the key press likely registered but screenshot captured at 0ms mid-move (at start of transition). Let me wait and inspect state. Is there a way to wait? The browser tool doesn't have an evaluate. I can add a debug info element? Simpler: press multiple keys with pauses (each tool call takes time) then screenshot.

Let me inspect DOM text: score is 0, tile count 2. If move happened, a tile should have spawned → 3 tiles. DOM says "2\n2" only, score 0. Hmm the dom text after key press still shows exactly two "2" — but DOM was captured at 0ms before finishMove spawn. Right.

Wait, but after ArrowLeft from initial state, top-right tile at c3 moves to c0, row1 c1 also goes to c0? No, they're in different rows: top tile in row0, second in row1. So both move to c0. Then spawn adds one → 3 tiles. Let's take a screenshot now (should be done).

Now 3 tiles, both leftmost, plus new tile at row3 c1. Good.

Now test merge: move left again? Row0 c0 and row1 c0 not same row. Let's press ArrowUp: they would collide at col0 rows0,1 -> merge to 4, score 4, plus spawn. Press up and inspect.

Score updated to 4 immediately at start of animation (this screenshot is frame 0?). DOM says 3 tiles (2 2 2) — but should be 4 2 plus new? The DOM captured at 0ms again. Score updated, showing 4. Tiles still show 2,2 — pre-finish.

Potential issue: score updates immediately then renderScore updates best, okay. But if board merges... fine.

Let me inspect again to see final state.

Merge produced 4, spawned 2,2 at top right?? Wait, top row now: 4 at c0, 2 at c1, 2 at c2 — that's 3 tiles in a row but we only had one spawn. Hmm! After move: tile at row0c0 (2) and row1c0 (2) merged → 4 at row0c0. Existing row3c1 (2) moved up to row0c1. Then spawn added one (2). That's 3 tiles total: 4, 2(moved from row3c1), 2(new). Correct. Great.

Wait but the 2 at c2 — new spawn could be anywhere. Yes.

Score 4 ✓ (merged 2+2=4).

Now test new game, and the tricky [2,2,2,2] test. I need a way to run _load. I could create a test harness page in same dir. Let's do test.html with iframe? Might be blocked file://. Instead, since I have _load, I could use a URL hash to trigger? Not implemented. Alternative: temporary modify index.html to run a self-test on load if ?selftest, then revert? Risky with time but doable and reliable.

Actually simpler: write a node test harness replicating computeMove? Duplicating logic doesn't test real code (but algorithm identical copy). The key logic risk is merge handling; I've reasoned it. Visual test already confirms single merge.

Better: add a self-test query param path in index.html? That adds test code to final artifact — undesirable but harmless. Instead create test2048.html that copies the whole game script? Time.

Another approach: use browser to click New Game, verify reset, and play a few moves to see chained merges appear naturally. Chained [2,2,2,2] specifically might occur.

Could I invoke _load via a javascript: URL? The browser tool has no navigate. Hmm.

Let me use a temporary self-test in index.html: add a snippet at end of script that checks location.search for 'selftest' and runs assertions writing to document.title / console. Then open via URL? The browser tool only reloads current index.html, can't set query. Unless I create a separate file index-test.html that redirects? Redirect to index.html?selftest — browser tool loads index.html by default; can't point to other file.

Alternative: temporarily add unconditional self-test code, reload, inspect, then remove. That tests the real logic in real page. Do that: after init, run a series of _load + move + assert with fake timing? Moves are async (130ms). I'd need to await/queue. Could write a test routine using setTimeout chain and log results to console; then inspect console.

Simpler: since computeMove is synchronous and pure-ish (mutates tile r/c), I can call computeMove directly after _load and read newGrid + gained, without animation. Perfect — no async. Test the exact merge logic.

Add temporary block at end of script before closing IIFE (needs access to computeMove/_load). Expose computeMove in hook temporarily.

Let me add test code (temporary) that logs to console:
- _load([[2,2,2,2],...]) then computeMove('left'), log values and gained.
- [[2,2,4,0]], left.
- [[2,2,2,0]], left → [4,2].
- [[4,4,4,4]], left → [8,8], gained 16.
- [[2,0,2,4]], right.
- vertical cases.

After computing, compare JSON and log 'PASS'/'FAIL'. Note computeMove mutates grid tile objects but not grid variable itself; fine, then reload.

Need hook access: store functions in a global for test: temporarily add at end:
```
window.__test = function(){...}
```
and use setTimeout to call? Console captured. Let me just run tests immediately at load after init, inside try/catch logging results.

Do it.

Interesting: the gains are correct but the resulting grid shows old values at wrong positions — because the test snapshot reads grid[r][c].value of tile objects, and survivor tile values are only updated in finishMove via setTileValue. computeMove updates `last.value` (the local record), not the tile object's value. So the model doesn't hold the updated value until finishMove. That means during animation, grid values stale, but busy lock prevents moves. In real gameplay finishMove updates correctly.

However the snapshot positions: for 2222 left, after compute: absorbed tiles moved to cell0/1 with the survivor; but absorbed tile still occupies grid? In computeMove, newGrid has survivor at cell0, absorbed tile not added to newGrid — but absorbed tile.r/c mutated to (0,0), and it's absent from newGrid. Wait snapshot read [[2,2,0,0]] because newGrid[0][0] = tile1 (value2, stale until finish), newGrid[0][1] = tile3. So values stale but positions right. So test needs to account for merge values by applying merges. The algorithm is likely correct; snapshot mismatch is only stale values.

To properly verify, update tile.value in computeMove for survivors? Better design: have computeMove also write value into survivor tile object (tile.value = newVal) and absorb removal. But setTileValue in finishMove uses result value; if we update tile.value early, that's fine (rendering still old until finish). Actually then mutate value immediately would cause absorbed tile checks? last.value used, tile.value of survivor changes to newVal immediately, but `last.value` also set. Could affect subsequent comparisons? `last.value` is independent. However for grid snapshot correctness, set last.tile.value = newVal in computeMove. Then finishMove's setTileValue(survivor, value) same value. Also absorbed tile's value irrelevant.

Let's do that: after computing newVal, set last.tile.value = newVal. And in test, snapshot after computeMove should then show 4s.

But careful: finishMove's merges update setTileValue uses same value and triggers pop. Fine.

Also note absorbed tile's el still shows old value until removed—it's behind.

Let me apply that change and rerun tests.

All movement/merge tests pass. Now remove the temporary self-test and test helper? Keep _load helper maybe; remove self-test. Also test win overlay, game over, new game reset, no spawn on unchanged move, spawn after change. Some can be tested with temp harness again, but time budget.

I can test win/game over with a temp harness that calls _load with values and move, then waits. Let's do it before removing the helper.

Test plan in temp harness (async with setTimeout):
1. _load([[1024,1024,0,0],...]) then move left → after 300ms check board and overlay visible, won true. Then click continue → overlay hidden, then move right and ensure game continues.
2. _load full board with no merges ([[2,4,2,4],[4,2,4,2],[2,4,2,4],[4,2,4,2]]) and move left → unchanged → no spawn, no score change, gameOver false? Actually canMove false → game over should be shown only when no valid move remains. But since move unchanged, finishMove isn't called, so game over isn't detected. Hmm requirement: Game Over only when no valid move remains. Typically after the move that fills the board. If board becomes full without valid moves after spawn, finishMove checks canMove. Our check occurs in finishMove. If a move is attempted but unchanged on a dead board, game over won't display. Edge case: dead board occurs after spawn in finishMove, so it will display. So acceptable. But if _load dead board artificially, no overlay.

Better also check game over in handleInput when move not changed and !canMove: trigger gameOver. Add in doMove: if !changed { if (!canMove()) {gameOver=true; showOverlay(...)} return; }. Good robust.

Let's implement, then test win flow and game over flow and unchanged-move no spawn.

Temp test harness async chain:

```
function t1(){ _load([[1024,1024,0,0],Z,Z,Z]); handleInput('left'); setTimeout(check...) }
```
I need access to _load internally — the hook calls existing functions. Inside the script I can call internal functions directly in test block.

Simplest write new temporary test block using setTimeout, logging results and ending with newGame.

Test win: _load [[1024,1024,0,0],...]; doMove('left'); after 250ms: expect won=true, overlayVisible=true, tiles count = 2 (merged 2048 + spawned). Then hideOverlay(); score check = 2048; then doMove('right') works? Could check busy false and overlay hidden. Then game over test.

Test no-change: _load [[2,4,8,16],[4,8,16,32],[8,16,32,64],[16,32,64,128]] (checkerboard-ish with no adjacent equals?) Let's ensure no vertical equal too. Use [[2,4,2,4],[4,2,4,2],[2,4,2,4],[4,2,4,2]] fill dead. Move left → no change → tiles count remains 16, score 0, overlay shows Game Over. But is it dead? adjacent horizontal: 2,4 alternate; vertical: 2/4 alternate. Yes dead.

Test spawn after change: _load [[2,0,0,0],...], move right → count 2 and score 0.

Chain with 300ms gaps.

Now replace the self-test block with a win/gameover flow test.

Interesting: the screenshot seems mid-test at various stages. Console empty? Reload probably happened and the async tests take 1.3s, console not yet flushed. Also screenshot shows two 1024 tiles merged? It shows one 1024 at c0 and another 1024? DOM shows "1024\n1024" two tiles. Wait the _load placed 1024 at c0 and c1; handleInput left triggers animation; screenshot frame 0 shows... positions? tile at c0 only visible? Hmm, two tiles should show. Maybe second tile's transform.. both at c0 overlapping? Not yet.

Wait, console empty is odd—tests should have logged by now. The tool returns immediately after reload; then screenshot later. Let me inspect.

All flow tests pass. Now remove the temporary self-test block and the _load/_test helpers? Keep hook minimal (getState/move/newGame) — remove _load? It's harmless and useful for debugging, but final artifact should be clean. I'll remove the whole self-test and the _load helper (keep getState/move/newGame for convenience). Actually removing _load means I can't retest win flow; already tested.

Restore from backup? Backup lacks the tile.value fix and unchanged game-over fix. I'll remove test block via edit and keep improvements.

Also consider the reduced-motion CSS: no transitions means moves snap instantly but still 130ms lock; fine.

One more check: resize handling and rapid inputs. Rapid input test: press many keys quickly → queued only latest, no corruption. Hard to observe but lock/queue implemented.

Remove self-test block.

Remove the _load helper too for cleanliness (or keep). I'll keep it—it's a debug hook and harmless. But it's named with underscore; fine.

Now final reload and play a quick real-move sequence checking visuals animate (motion). Use browser reload, key presses, motion capture maybe. Also verify arrow keys prevent page scroll — page doesn't scroll anyway, but preventDefault called.

Let me test rapid keys: reload then send 4 rapid keys; check no console errors and tile count/score sane.

Now send rapid sequence: Down, Left, Up, Right in quick succession (each call has delays anyway). Then check state. Then click New Game.

Hmm! Pressing Down from initial (two tiles in col1 rows0,1) merged them to 4, score=4. Screenshot was captured at animation frame 0 (both still 2s). But wait, after finish it should show 4 and a spawned tile. The score 4 immediately is fine. Screenshot timing is just early. But note that tiles should have slid down—screenshot at frame 0 shows original positions. Fine.

Wait score 4 for down move: 2+2 merged = 4 ✓. Let me inspect final state.

Board: 4 at row3 c1, new 2 at row1 c2, score 4. Correct.

Now New Game click and check reset to two tiles score 0.

New Game reset score to 0, two tiles (DOM says 2/2, screenshot at animation start so tiles invisible due to appear animation frame 0). Fine.

Now verify animation visually via motion frames.

Motion captured four frames but tiles didn't move and DOM still 2 tiles. The motion action with text "ArrowLeft" may type text rather than press keys? The "motion" action likely runs a script? It says "see screenshots or motion frames". Unsure. DOM unchanged: tiles at c1 rows1,2 (positions c1) — left move should shift them to c0 and spawn a tile. It didn't happen. Maybe motion text isn't key presses.

Earlier the key action worked. So ignore.

Frames show tiles at column 1, rows1 and 2. Good.

Let me do a key ArrowLeft then immediately take screenshot to see animation mid-flight? Timing unreliable. The earlier tests prove movement.

Continuity check now: press ArrowLeft, wait, inspect.

Screenshot at frame 0 shows tiles at original positions; focus ring now on New Game button (from the earlier click). Board unchanged at capture time. Let's inspect after time passes.

Concern: after clicking New Game, the button has focus. Arrow keys still handled at document level. Does the button consume ArrowLeft? Buttons don't respond to arrow keys by default. Fine.

Inspect final.

Tiles moved to col0, spawned third at row3 col0. Good.

Note visual: spawned row3c0 is adjacent below row2c0 (both 2). Fine.

Now quick check rapid input: send ArrowUp then immediately ArrowRight, then inspect eventually for consistent state (no duplicate spawn weirdness). Hard to assert exactly, but no console errors and tile counts.

Also check page doesn't scroll on arrow keys: page height fits viewport? body height ~600 < 800 so no scroll anyway; preventDefault is coded.

Let's test rapid.

Score 4 now (2+2 merged upward). Screenshot frame 0 shows 2s. Inspect final.

This screenshot shows the state after the right move: 4 at row0c1, 2 at row1c1, 2 at row3c1 (spawn). Score 4 — right move caused no merge (row0 had 4, row2 had 2, row1? no) correct.

Visual check good; fonts/colors look right. One issue: SCORE box shows 4, BEST 4.

Everything works. Final file cleanup: remove leftover unused backup file index.backup.html? Task says end with index.html present; extra file probably harmless but remove backup to be tidy. Also verify no external resources (grep for http).

Also check aria/HTML basic validity.

No external references. Remove the _load debug hook? It's fine but let's keep the hook minimal without _load to avoid confusion. Actually harmless; leaving it doesn't affect gameplay. I'd rather keep code clean: remove _load block. But then re-verify final page loads (reload, no console errors). Let me remove and reload.

Also one more consideration: finishMove's win overlay blocks input; the "Keep Going" works. Tested.

Another consideration: after win overlay shows, if board also dead? If 2048 reached and no moves, both overlays: gameOver overlay overwrites title to Game Over with New Game only — acceptable.

Remove _load.

Screenshot caught at appear animation start (tiles scaled small). Fine — CSS appear animation plays. Two tiles present.

Final quick real-move check after cleanup: press right and inspect.

Right move works: both tiles slid right, one new tile spawned (row3 c1 still in appear animation). No console errors.

Done. Final file exists. Report checks and unverified items.