2048 · ling-3.1-flash

Need build single-file index.html. Need use browser verify. We have 15 min. Need implement robust 2048.

Design requirements:
- 4x4 HTML/CSS grid.
- Arrow keys slide, merges once per tile per move, score.
- start 2 tiles; spawn after changed move exactly one, 90% 2 else 4.
- animate movement and merging without rapid input corrupt state. Prevent scrolling.
- score, win on 2048, Game Over only when no valid move remains. New Game reset; allow continue after win.

Need likely browser tests can inspect DOM. We can make tiles absolutely positioned by row/col with CSS transitions. Manage state carefully during animation. Could implement board array, render tiles persistent by id with transitions. Movement lock during animation. Need maybe animation 150ms and input queue? "without allowing rapid input to corrupt board state" can ignore/lock inputs while animating. Better process one at a time with lock; ignore during animation. But rapid arrow presses perhaps no corruption. Could queue? Simpler lock. Need ensure changed board detection based on logical state, spawn after move. Animate movement and merge. Need tile DOM.

Approach:
state = 4x4 of tile objects {id,value,row,col,merged?}. render creates tile elements keyed id, position transform translate(col*cell, row*cell). On move:
- compute result rows/cols and merged values. Need track movement and merges.
- We can construct new grid and tile objects, but animation from old positions to new positions.
Algorithm per line (array of tile refs or null):
  compact non-null preserving order.
  resultTiles = []
  for i over compact:
    if next same value and !next.justMerged? Since each tile can merge once. Standard: traverse compact, if tile.value == next.value, create merged tile with value*2 at target slot, score +=; skip next. Else move.
This handles [2,2,2,2] -> pairs first two and next two; [2,2,4] -> [4,4].
Need map old tiles to new positions and merged status. For animation:
- For nonmerged moved tile: update row/col and DOM transform.
- For merge: two old tiles move to target cell; after transition, remove them and create/show merged tile perhaps pop animation. Could create merged tile element initially at target with value but hidden? Better:
  - Keep old tile elements, move both to target.
  - create merged tile object and element at target with class `tile-merged`, initially visibility hidden? Then after 150ms remove source tiles and show merged with pop.
- Need board logical state updated immediately; input locked until animation done. Since state includes merged new tile objects and old tiles no longer in grid. DOM old elements still animate. We can maintain DOM by id in a Map. On move:
  1. compute move plan.
  2. update state grid to result tile objects.
  3. update score/UI.
  4. update positions of all source tiles (existing DOM transform) to target. For merged result tile, create DOM element hidden at target; perhaps class `merge-result`.
  5. lock, setTimeout(animationDuration): remove source tiles that merged, show result, cleanup. unlock. For moved nonmerged, just update.
Potential issue if old tile was already result? No.
- New tile spawn after move changed. Should spawn after board changes; visually can spawn immediately with pop while movement animating. Requirement after move spawn exactly one. Could spawn at end of animation or immediately. If spawn immediately, state changes while lock; okay. But if spawn at timeout after movement, rapid input locked. Better spawn immediately after applying move, with `tile-new` pop. It doesn't corrupt. Yet "After a move that changes board, spawn exactly one tile" yes.
- Need determine changed: compare values before/after perhaps any tile moved or merged. Compute plan and check.
- If unchanged, don't spawn, still perhaps animate nothing. Input lock maybe short? no need.
- After move, check win: if any tile value 2048 and !won? Show win message. Allow continuing after win. Need message overlay with "You win!" and Continue + New Game. If continue, set keepPlaying true, hide. If user reaches 2048 again? Show once. Game Over only no valid moves. If no valid moves after move, show overlay. Could also show win and game over simultaneously? Rare; prioritize game over if no moves else win. But requirement win message on reaching 2048. If win move also no moves, maybe game over; but likely not. We can show game over if no moves, otherwise win.
- Valid move remains if empty cell or adjacent equal horizontally/vertically.
- New Game resets board score, clears overlay, maybe start two tiles.
- Keyboard: Arrow keys and WASD? Required arrow keys. preventDefault for arrows. Also touch maybe optional. Not necessary but nice.
- HTML structure: header, score, new game, board container, message overlay. Tiles inside grid. Use CSS custom properties.
- Need no external assets.

Need perhaps use browser tools to verify. We can write file then run browser. Browser tool can inspect DOM/console. Need know how to invoke. We'll use browser action inspect maybe returns DOM. Need maybe open file path? It says run index.html; likely current. We'll call browser inspect after write. Could use browser click/key with coordinates? Need find key action. We'll use browser action key with text? Tool schema: key action perhaps text key? We'll inspect.

Let's implement. Need be careful CSS tile sizing. Board width maybe min(90vw, 440px). Use CSS var --cell computed? For transform, easier fixed grid: board width 440, gap 12, cell 100? 4*100+3*12=436 plus padding. Use board 460 padding 12, cell 100. Responsive maybe use CSS variable with JS? Simpler fixed 460 and cell 100; okay. Could make responsive using CSS `width: min(440px, 92vw)` but JS needs pixel positions. We can position tiles by percentages: each tile width calc((100% - 3*gap)/4), transform translate(calc(col * (100% + gap)), ...)? CSS calc with percentages relative to tile's own width if translate percentage refers to element size. If gap fixed, complicated. Use JS measure cell size and set positions in px on resize. Or fixed board is fine. Requirement no styling specifics. Use 460px board, mobile maybe scroll. Could use CSS `--size: min(440px, 92vw); --gap: calc(var(--size)*0.027); --cell: calc((var(--size) - 5*gap)/4)` and JS compute positions via `cellSize + gap` from board clientWidth. But initial render and resize. Let's do dynamic robust:
CSS:
:root --board-size: min(440px, 92vw);
.board { width: var(--board-size); height: var(--board-size); position:relative; }
.grid-cell maybe absolutely positioned? Background cells via CSS grid overlay.
.tile { position:absolute; top:0; left:0; width: var(--cell); height: var(--cell); transform: translate(x,y); transition: transform 140ms ease-in-out; }
JS `metrics()` computes padding/gap from getComputedStyle? Simpler define board padding and gap in CSS fixed proportions:
.board { padding: 12px; }
.grid-background { position:absolute; inset:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.tile layer absolute inset:12px; tile width calc((100% - 36px)/4); transform translate based on JS: x = col*(cell+gap), y=row*(cell+gap), where cell = (layer.clientWidth - 3*gap)/4. On resize update all tile positions. Good.
Tile element inside `.tile-layer` with inset 12. CSS `.tile { width: calc((100% - 36px)/4); height: ...; }` but transform px computed.
Need z-index: moving tiles above result? During merge, source tiles should be above hidden result then removed. Set source z-index 2, result z-index 1 until shown then 2? New tile z-index 0 maybe. Not critical.
Need color classes for values up to maybe 8192. Use data-value attribute and CSS selectors `.tile[data-value="2"]`. Could use inline background based on value to support arbitrary. Use function tileColors.
Need accessibility maybe buttons.

Implementation details:
```
const SIZE=4;
let grid, score, nextId, won=false, keepPlaying=false, gameOver=false, animating=false;
let tileElements = new Map();
function emptyGrid()...
function startGame() {
 grid=...
 score=0; won=false; keepPlaying=false; gameOver=false; animating=false;
 clear tile layer; tileElements.clear();
 addRandomTile(); addRandomTile();
 updateScore(); hideMessage();
}
function addRandomTile() {
 const empty=[]; ...
 const value=Math.random()<0.9?2:4;
 const tile={id:nextId++, value, row,col};
 grid[r][c]=tile;
 createTileElement(tile, true);
}
```
At start, two tiles created with pop. `createTileElement(tile, isNew)` creates div class tile, dataset.value, text, style transform, maybe class `tile-new`, append. Remove animation class after animationend or setTimeout.
`positionTile(tile)` uses metrics.
`metrics()`:
```
const layer=tileLayer;
const gap=12;
const cell=(layer.clientWidth - gap*(SIZE-1))/SIZE;
return {cell,gap};
```
Need layer clientWidth available after DOM. CSS `.tile-layer { position:absolute; inset:12px; }`.
`setTilePosition(el,tile)` `el.style.transform = translate(${col*(cell+gap)}px, ${row*(cell+gap)}px)`.
Need ensure tile width CSS matches cell: `width: calc((100% - 36px)/4)` because layer width and 3 gaps. Good.
Move:
```
function move(direction) {
 if (animating || gameOver) return? If gameOver, maybe ignore. If win overlay visible, ignore until continue? Could allow? Better if overlay shown, ignore. 
 const vector = ...
 const prev = grid.map(row=>row.map(t=>t?{...})) maybe compare values.
 const plan = computeMove(direction);
 if (!plan.changed) return;
 animating=true;
 // apply plan
 ...
}
```
Need overlay state: `message` maybe win/gameover. If win overlay visible and not continued, ignore arrows. Could allow if user chooses continue. `if (animating || gameOver || (won && !keepPlaying && messageVisible)) return;`
Maybe after win overlay, keepPlaying false. Continue button sets keepPlaying=true hide. New game.
Compute move:
```
function computeMove(dir) {
 const vector = {up:{dr:-1,dc:0},...}
 // For each line in traversal order, gather tiles.
 const newGrid = empty;
 const moves=[]; // {tile, fromRow, fromCol, toRow,toCol, mergedInto?}
 const results=[]; // result tile objects
 let changed=false;
 for each line:
   const lineTiles = cells along direction (ordered from edge toward opposite) non-null.
   const lineResults=[];
   let targetIndex=0;
   for (let i=0;i<lineTiles.length;i++) {
      const tile=lineTiles[i];
      if (i+1<lineTiles.length && lineTiles[i+1].value===tile.value) {
        const merged = {id:nextId++, value:tile.value*2, row:..., col:...};
        results.push(merged);
        moves.push({tile, toRow,toCol, mergedInto:merged.id});
        moves.push({tile:lineTiles[i+1], toRow,toCol, mergedInto:merged.id});
        score += merged.value;
        i++; // skip
        changed=true;
      } else {
        const toRow/toCol based on target index along line;
        moves.push({tile, toRow,toCol});
        newGrid[toRow][toCol]=tile;
        tile.row=toRow; tile.col=toCol; // update logical position
        if (toRow!==fromRow||toCol!==fromCol) changed=true;
      }
      targetIndex++;
   }
 for merged results newGrid[row][col]=merged
```
Need line coordinate mapping. For direction:
- left: rows fixed, columns 0..3, target col = targetIndex.
- right: rows fixed, columns 3..0, target col = 3-targetIndex.
- up: cols fixed, rows 0..3, target row=targetIndex.
- down: cols fixed, rows 3..0, target row=3-targetIndex.
Gather in order from edge toward direction.
Could generic:
```
for (let line=0; line<SIZE; line++) {
 const cells=[];
 for (let i=0;i<SIZE;i++) {
   let r,c;
   if dir left: r=line,c=i;
   right: r=line,c=SIZE-1-i;
   up: r=i,c=line;
   down: r=SIZE-1-i,c=line;
   cells.push({r,c});
 }
 const tiles = cells.map(...).filter(Boolean)
 let target=0;
 ...
 const targetCell = cells[target]; // Because cells ordered toward edge; target index.
```
Great.
When moving nonmerge, update tile.row/col to targetCell. For merged, leave source tile positions old until DOM move; new merged object at target.
Need changed if any source position != target or merge. Since if lineTiles compact length and target positions may differ. For merge always changed (unless? equal adjacent always changed). Good.
Apply:
```
const oldScore=score;
grid=newGrid;
score += plan.score;
updateScore();
// Move existing DOM elements for all source moves
for (const m of plan.moves) {
 const el=tileElements.get(m.tile.id);
 if (el) {
   el.style.zIndex=3;
   setTilePosition(el,{row:m.toRow,col:m.toCol}); // don't mutate tile? For nonmerge already mutated; for merge source tile row still old but pass explicit.
 }
}
// Create merged result elements hidden
for (const merged of plan.mergeds) {
  const el=createTileElement(merged,false);
  el.classList.add('merge-result'); // opacity 0
  tileElements.set...
}
// spawn new tile immediately
addRandomTile();
// after animation, clean merged sources and reveal results
setTimeout(() => {
 for source merged ids remove elements
 for merged reveal class and pop
 animating=false;
 checkEnd();
}, ANIMATION_MS+10);
```
But if addRandomTile immediately, `createTileElement` sets position. Fine.
Potential race: `setTilePosition` uses metrics; okay.
Need if move nonmerged, tile.row/col updated, element transition. If source tile moved into cell and no merge, no cleanup.
Need remove `tile-new` class after spawn maybe after 200ms. If new tile spawns while animation, pop.
Need `createTileElement`:
```
function createTileElement(tile,{isNew=false,isResult=false}={}) {
 const el=document.createElement('div');
 el.className='tile';
 el.dataset.value=tile.value;
 el.textContent=tile.value;
 el.style.setProperty('--tile-bg', tileBackground(tile.value));
 setTilePosition(el,tile);
 if (isNew) el.classList.add('tile-new');
 tileLayer.appendChild(el);
 tileElements.set(tile.id,el);
 return el;
}
```
For merged result, maybe set opacity 0 via class. After cleanup remove class.
Need update dataset when value changes? merged new object value set.
Need score element. Maybe `score` and `score-add` floating? Not required. Show score.
Need message overlay:
```
<div id="message" class="message hidden">
 <div class="message-content">
 <p id="message-title"></p>
 <div buttons continue/new>
 </div>
</div>
```
Win: title "You win!" show Continue and New Game. Game over: "Game Over" show Try Again/New Game. Continue only win.
`showMessage(type)`:
- win: message class win, title, continue visible.
- gameover: title, continue hidden.
`hideMessage`.
Check end after animation:
```
function checkEnd() {
 if (!keepPlaying && !won && hasValue(2048)) { won=true; showMessage('win'); return; }
 if (!hasMoves()) { gameOver=true; showMessage('gameover'); }
}
```
But if user already won and keepPlaying true, later game over. If reaches 4096 no message.
If win and no moves, maybe show gameover instead; but requirement win on reaching 2048. Could show win with continue even if no moves? Then continue leads gameover. Maybe check win first, then game over. But if no moves, game over should be shown only when no valid move remains; could show gameover after win. Simpler:
```
const reached = ...
if (reached && !won && !keepPlaying) { won=true; showMessage('win'); }
else if (!hasMoves()) { gameOver=true; showMessage('gameover'); }
```
If win and no moves, user sees win and can continue, then next check? After continue, call checkEnd and gameover. Good.
Need `hasMoves`: if empty true; adjacent equal.
Need New Game button and message buttons.
Need keyboard:
```
document.addEventListener('keydown', e => {
 const dir = keyMap[e.key];
 if (!dir) return;
 e.preventDefault();
 move(dir);
});
```
Prevent scrolling for arrows. Also maybe space? not needed.
Need touch swipe optional. Could add for completeness but not required. Maybe avoid complexity.
Need animation lock. `animating` set true only changed moves. On unchanged, return. Rapid input during animation ignored. Could optionally queue last input to improve responsiveness but not required. "without allowing rapid input to corrupt board state" lock satisfies. But user might expect rapid arrows; ignoring during 150ms okay. Could implement queue to process after animation, but then rapid input might feel responsive. However queue can cause moves after spawn and check end; still fine. But if game over/win overlay, queue should clear. Simpler lock.
Potential issue animation duration and `setTimeout` if New Game pressed during animation: startGame clears timeout? If user clicks New Game during animation, timeout later could remove wrong elements and unlock, corrupt. Need handle generation token. Use `moveGeneration` or clear timeout. Implement `animationTimeout` and clear on startGame. Or `generation` increment; timeout captures gen and returns if changed. Do:
```
let animationTimer=null;
function startGame(){ if(animationTimer) clearTimeout(animationTimer); ...}
...
const gen=generation;
animationTimer=setTimeout(()=>{ if(gen!==generation) return; ...},...)
```
Increment generation on start. If timeout after new game, ignore. Also clear timer.
Need if move while animating ignored. Good.
Need if overlay visible, keyboard ignored. Buttons work.
Need initial render after DOM load. Script at end body.
Need maybe `resize` update positions. `window.addEventListener('resize', renderPositions)`.
Need use `requestAnimationFrame` maybe initial metrics after CSS. Since script end, layout available.
Need test with browser. Browser tool maybe can inspect. Let's write file.

Now browser inspect. Need perhaps tool opens current? Use browser action inspect.

Browser inspect shows DOM maybe board omitted? It says 2 2. Need test sequence. We need inspect DOM details perhaps use browser action key. Tool schema key action with text maybe key name. Let's try key ArrowLeft. Need maybe current file loaded. Use browser action key text "ArrowLeft".

It spawned a tile after move, board has 3 tiles. Need verify positions and score. DOM text not enough. Could inspect via browser? It returns textual DOM only. We can use bash maybe serve? But no network. Browser tool likely headless. Could use JavaScript? No eval tool. We can inspect DOM by action inspect only textual. Could maybe use browser screenshot but images unsupported. Need verify logic perhaps use node with DOM? We can run a headless script using maybe node and jsdom not installed. Could write a test harness? We can use browser's key and inspect DOM. Text output shows tiles count. Need test merge score. Initial two tiles random positions; arrow left may or may not merge. We need deterministic sequence maybe reload and use keys. Could use New Game then key. But random. We can test by pressing keys and observing score. Need perhaps use browser action click New Game then key. We can use inspect DOM text. Score visible. Need test merge. Could repeatedly press keys until score >0. But need ensure merge logic. Could maybe manipulate browser URL? no.

Could use browser action type? key action text maybe sends key. We can press sequence. Need maybe inspect DOM with attributes? The inspect output is text content only. Could use browser action screenshot but images unsupported by model. Maybe DOM includes enough? It omitted board structure due text extraction. Could use `browser` action inspect after adding query? no.

We can create a temporary test page? But requirement final index only. Could use bash with `node` and maybe parse file. We can run `node -e` to test pure functions? They're in IIFE not accessible. Could use a headless browser via Python? Maybe installed puppeteer? Check environment. Use bash `ls`, `which chromium` etc. But no network. We have browser tool. Could perhaps use browser action `inspect` returns DOM but not attributes. Maybe enough to count tiles and score.

Need verify examples [2,2,2,2] -> [4,4]. We can reason code. But perhaps browser test can set initial state? Could use keyboard after many new games until initial two tiles align? Not guaranteed. We can press New Game and arrows; random. Could test merge by pressing until score changes. Let's do sequence of keys and inspect. Use browser action key multiple maybe parallel? Must sequential. We'll call key ArrowLeft then inspect. Already did. Now ArrowLeft again maybe merge if three tiles.

Now 4 tiles score 0. Arrow left again maybe if all same row? Initial positions unknown. Let's press.

Score still 0. Need maybe tiles not aligned. Press more.

Great score 8, merged 4+4 maybe. Tiles count 8. Need test game over/new game. New Game click. Use browser action click coordinates? Need know button coordinates. Could use browser click with x,y. Need estimate New Game top row around x=380 y=40? Viewport 1200x800, centered board width 440, main width 440, page center. New game button likely x=910? Let's calculate: body center, main width 440, left edge (1200-440)/2=380. top row padding 16, h1 left, score and new game right. New game button maybe x=770? Need click via DOM perhaps browser action click requires coordinates. Could use key Tab + Enter? New Game button focus maybe not. We can use browser key "Tab" then "Enter". But key action only arrows? It sends any key maybe. Use browser action key text "Tab" then "Enter". However keydown handler ignores Tab. Button focus initial maybe not. Could use click coordinates. Let's screenshot? images unsupported but action screenshot maybe returns? It says model does not support images. Could use inspect DOM no coordinates. Use browser click with approximate coordinates. Need maybe button at x=790 y=45. Let's compute layout: main width 440, left 380, top maybe (800 - height)/2. Height ~ 600? top ~100. top-row height ~60. New Game button right aligned within main, width ~100, right edge 820, x ~770, y ~130. Use click x=770 y=130.

New Game reset score and two tiles. Good. Need test unchanged move doesn't spawn. We can inspect count after new game (2). Press a direction that changes board definitely? With two tiles random, any direction likely changes unless both at target edge and no merge. Could test unchanged by pressing same direction repeatedly until no change? Hard to know count. We can use DOM text count. After new game, press e.g. ArrowLeft; count becomes 3 if changed. Then ArrowLeft again maybe if already at left and no merge, count remains 3. That tests no spawn. Let's do.

Interesting score 4, tiles count 3: initial two 2 merged into 4 and spawned 2. Good. Press ArrowLeft again; if 4 and 2 at left? likely tiles maybe [4,2] or [2,4]. If [4,2] left unchanged, count remains 3. Let's press.

Count remained 3, score unchanged, so unchanged move didn't spawn. Good. Need test win message maybe hard to reach 2048 manually. Could maybe cheat via browser? No. We can reason. Could test game over maybe hard. Need perhaps use code inspection. We can maybe create a temporary test page with injected state? But final only index. We can use browser devtools? Not available. Could use `browser` action key sequence many times to win? 2048 would take many moves, not feasible. Could perhaps manipulate Math.random? no.

Need ensure implementation has no bugs. Let's scrutinize code deeply.

Potential bug: CSS animation `tile-new` uses `transform: scale` keyframes, which conflicts with transform translate set inline. CSS animation transform overrides inline transform during animation, causing new tiles to appear at top-left (0,0) then snap? Indeed `.tile-new { animation: appear 180ms ease-out; }` keyframes animate transform scale without preserving translate. Since inline transform is translate(x,y), CSS animation overrides transform property during animation, so new tile appears at position 0,0 scaled, then after animation returns to translate. That's a visual bug. Same for `.tile-pop` keyframes transform scale overrides translate. Need fix animations to not override position. Options use inner span for scale, or use CSS `scale` property (not transform) with animation. Modern browsers support `scale` property. Use keyframes animate `scale` property:
```
@keyframes appear { 0% { opacity:0; scale:0.7;} 100% {opacity:1; scale:1;} }
@keyframes pop { 0% {scale:.75;} ...}
```
CSS `scale` property is independent from transform and supported modern. Could use `zoom`? Better inner content. Since tile element positioned via transform, add child span for text and animate scale on span. But simpler use `scale` CSS property. Browser likely supports. To be safe, restructure tile element with inner `<span>` and animate span. But textContent currently set; could create span. CSS `.tile span { display:flex; ... }` and animations on `.tile-new span`. Yet tile font sizing etc. Could do:
```
const text = document.createElement("span"); text.textContent...
element.appendChild(text);
.tile-new span { animation: appear ...}
.tile-pop span { animation: pop ...}
@keyframes ... { transform: scale...}
```
Then tile transform remains. This is robust. Need update code. Also merge result hidden opacity; when remove class and add pop, span animates. Good.

Potential bug: `createTileElement` for merged result sets `merge-result` opacity 0 and z-index 1. But CSS `.merge-result` sets opacity 0. After timeout, remove class and add tile-pop. Good.

Potential bug: During move, for nonmerged tile, we mutate tile.row/col in computeMove, then set element position. For merged source tiles, we do not mutate their row/col, but set element position to target. Fine.

Potential bug: `handleResize` only updates positions for tiles in grid, not source tiles during animation (they aren't in grid). If resize during 150ms, minor. Could update all tileElements with stored positions? Not necessary but could. More importantly after animation, merged result tile is in grid and gets position. Fine.

Potential bug: `newGame` calls `clearTileElements` but does not reset `zIndex` etc. Fine.

Potential bug: `animationTimer` cleared in newGame, but if timeout fires after newGame and generation check returns, okay. `animating` reset false. Good.

Potential bug: `move` checks `if (won && !keepPlaying && !messageElement.classList.contains("hidden"))`. After win, showMessage sets className `message win`, removes hidden. Good. Continue sets keepPlaying true and hide. If user wins again? won true, keepPlaying true, no message. Good.

Potential bug: Game over overlay remains; move ignores. New game resets.

Potential bug: `checkEnd` called after animation. If no moves, gameOver true and showMessage. But `animating` set false before checkEnd. Good.

Potential bug: Win check only after move. If initial board somehow has 2048 impossible. Good.

Potential bug: Score update immediate before animation. Fine.

Potential bug: spawn exactly one after changed move. `addRandomTile` called once. Good.

Potential bug: merge once per tile per move. computeMove pairs adjacent in compacted line. Good.

Potential bug: [2,2,4,0] left -> compact [2,2,4], pair first -> merged 4 at col0, 4 moves to col1 => [4,4,0,0]. Good.
[2,2,2,2] -> [4,4,0,0]. Good.

Potential bug: Direction mapping for right/down. Let's test mentally:
right: cells columns 3,2,1,0. lineTiles order from rightmost to leftmost. targetIndex 0 -> cells[0] col3, next target col2. So compacted tiles fill from right. Merge first pair (rightmost equal) at rightmost target. Correct.
down: rows 3,2,1,0. Correct.

Potential bug: `directions` variable unused except keys. Fine.

Potential bug: Prevent arrow scrolling: keydown preventDefault. Good. Also board touch-action none but no touch handlers. Not required.

Potential bug: New Game button click while animating: newGame clears timer and state, but DOM source tiles mid-animation are removed by clearTileElements. Good.

Potential bug: If user presses New Game during animation, generation increments; timeout returns. Good.

Potential bug: If user presses arrow during animation, ignored. Good.

Potential bug: If unchanged move, `animating` remains false, no spawn. Good.

Potential bug: If move changed but no empty cells? A changed move requires either merge or movement. If board full and movement/merge occurs, after merge there is at least one empty cell, so spawn. If board full and movement without merge? On full board, movement without merge impossible? Maybe row shifting? Full board no empty, movement only if tiles can slide into empty; none. So fine.

Potential bug: If move changed due to merge, addRandomTile after setting grid. Good.

Potential bug: `tileElements` map keyed by id. IDs increment. Good.

Potential bug: `createTileElement` sets dataset.value but never updates for merged? new object. Good.

Potential bug: CSS `.tile` width calc uses `--gap` from :root, but tile layer inset uses `--board-padding`. Good. `tileMetrics` uses GAP constant 12 matching CSS. If CSS changes, mismatch, but okay. Could read computed gap but not needed.

Potential bug: Board width var(--board-size) and main width same; grid background inset 12. Tile layer width = board width - 24. Tile width calc((100% - 36px)/4). Good.

Potential bug: `message` inset 0 within board, but board has padding; covers entire board including padding. Fine.

Potential bug: `main` width var board-size but padding 16 means total width board+32, body center. Fine.

Need fix animation transform. Let's edit. Use span. Changes:
CSS:
```
.tile { ... }
.tile span { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.tile-new span { animation: appear ...}
.tile-pop span { animation: pop ...}
```
Remove `.tile-new` and `.tile-pop` direct animations.
JS createTileElement:
```
element.className...
const label = document.createElement("span");
label.textContent = ...
element.appendChild(label);
```
Currently `element.textContent = String(tile.value);` replace.
Let's edit.

Need read file around CSS to exact.

Whitespace maybe 6 spaces? Let's use smaller edits. First CSS block exact from read. Use oldText starting `.tile-new` etc.

Why? Maybe indentation 4 spaces not 6? Read shows 6? Let's inspect exact via bash `grep -n` maybe.

It's 4 spaces, read display 6 due? Use 4.

Need maybe add `.tile span` CSS before tile-new; inserted. Good.

Need reload browser to apply.

Need test after reload. Press keys.

Good. Need maybe test unchanged no spawn. Press same direction maybe if changed? We don't know. Could press until count stable. Let's press ArrowLeft twice and inspect.

Score 4, merged. Press ArrowLeft again maybe maybe changed or not.

Count stayed 4? Before 4 tiles, after 4 tiles, score unchanged. So unchanged no spawn. Good.

Need perhaps test New Game reset again after moves. Click.

Verified reset.

Need maybe test win message. Could perhaps manipulate game state through browser console? Not available. Could use keyboard many times maybe not. But code clear. Could maybe create a query parameter to seed? Not required. We can test win logic by temporarily modifying file? Not desirable. Could use browser action maybe key "F12" no. Could perhaps use `browser` action type text into focused element? no.

Need maybe inspect console for errors. Browser output only warning from sandbox, no JS errors. Good.

Need ensure final file present. Use bash maybe `ls -l`.

Need maybe final report concise: checked arrow moves, spawn, merge score, unchanged no spawn, New Game reset. Unverified: win/game-over overlays and long play due random board/time; code inspected. But user asked build, not necessarily report. We should mention file. Desired oververbosity 4. Need maybe no more tool. But before final, let's deeply inspect possible issue with CSS `inset` support? Modern browsers. Fine.

However, let's consider if browser tool's DOM text shows tiles but not positions. We verified count and score. Movement animation? We didn't visually inspect due images unsupported. But code uses transitions. Could maybe use browser action motion? It returns motion frames maybe images unsupported. Not necessary.

Potential issue: The `tile-new span` animation uses transform scale on span, but span width/height 100%. Good.

Potential issue: `merge-result` element hidden opacity 0, but its span no animation until pop. Good.

Potential issue: During merge, source tiles move to target and z-index 3, merged result z-index 1. After timeout, source removed and result pops. Good.

Potential issue: `transition: transform` on tile and `animation` on span independent. Good.

Potential issue: If a tile moves and is also spawn? no.

Potential issue: If rapid input during animation, ignored. Requirement "without allowing rapid input to corrupt board state" satisfied. Some might expect queue, but not specified.

Potential issue: Arrow keys prevent default only when event key in directions. Good.

Potential issue: If focus on button and press arrow, document keydown still fires, preventDefault. Good.

Potential issue: New Game button click after game over works. Message New Game works.

Potential issue: Continue after win: `keepPlaying = true; hideMessage(); checkEnd();`. If no moves at win, checkEnd will show game over immediately. That's reasonable: allow continuing after win only if moves remain. Requirement allow continuing after win; if no moves, game over is correct.

Potential issue: Win message on reaching 2048: checkEnd after animation. If a merge creates 2048 and also no moves, win message first. Continue then game over. Good.

Potential issue: Game Over only when no valid move remains. `hasMoves` checks empty and adjacent equal. Correct.

Potential issue: Score increases by value of each new merged tile. `gained += mergedTile.value`. Correct.

Potential issue: Adjacent equal tiles merge once per tile per move. Pairing algorithm correct.

Potential issue: Start with two tiles. `newGame` calls addRandomTile twice. Correct.

Potential issue: Spawn probability 90% 2 else 4. `Math.random() < 0.9 ? 2 : 4`. Correct.

Potential issue: Do not spawn after unchanged move. `if (!plan.changed) return;` before spawn. Correct.

Potential issue: Exactly one tile after changed move. addRandomTile once. If no empty cells (shouldn't happen on changed move), returns null, but changed move always creates empty if merge; if movement on full board impossible. Fine.

Potential issue: Board state during animation: logical grid updated immediately, input locked. Good.

Potential issue: New Game during animation: generation and timer. Good.

Potential issue: Resize during animation: source tiles not updated, but minor. Could improve by storing positions on elements or updating all plan moves. Not required.

Potential issue: `tileMetrics` uses `tileLayer.clientWidth`; if called before layout (newGame at script end) it should be nonzero because CSS loaded. Browser test shows tiles positioned? DOM text doesn't show. likely.

Potential issue: CSS `var(--board-size)` in main and board; `--gap` used in tile width. `GAP` JS constant 12. If CSS var changes, mismatch. But fixed. Could compute gap from computed style to be robust. Not needed.

Potential issue: No external resources. All inline. Good.

Potential issue: File name index.html current dir. Good.

Need final answer maybe mention path and verification. Since user didn't explicitly ask for report but addendum says briefly report checked and unverified. Do that.