2048 · mimo-v2.6-flash

Let me build the game. I'll write index.html with a self-contained 2048 implementation.

Key design: HTML elements for tiles positioned absolutely with CSS transforms for animation. Board state managed in JS. Input queueing during animation to avoid corruption.

Let me write it carefully.

Plan:
- 4x4 grid, background cells rendered, tiles as absolutely positioned divs with transform translate.
- Tile objects with id, value, row, col, element. Keep a tile list for rendering positions.
- Move logic: compute new board positions, animate transforms, merge after transition, spawn new tile after.
- Lock input during animation (~100-150ms).

Implementation approach: maintain grid of tile objects (or null). On move:
1. For each line in direction, slide & merge, tracking movements.
2. Build list of move operations: {tile, toRow, toCol} and merges {removed tile, merged into}.
3. Apply transforms to DOM, then after transition end (or timeout), remove merged tiles, update values, spawn new tile.

Simpler robust approach: compute the resulting grid of values along with mapping of source tile objects to destinations. Use CSS transitions with a fixed duration, lock input for duration, then commit.

Let me write:

```js
const SIZE = 4;
let grid; // 2D array of tile or null
let score;
let won, over, continuing;
let animating = false;
let nextId = 1;
```

Move algorithm per direction: iterate lines (rows for left/right, cols for up/down), traverse in the direction of movement (i.e., from the edge toward which tiles move). For each line, get tiles in order. Then build result: compress, merge adjacent equal once.

For each tile we track target position. For merges, two tiles go to the same target; the surviving tile is the first one (front), and it gets doubled. The second tile is removed after animation.

DOM: tiles are created once per tile object with id, positioned via transform: translate(x, y) using cell size. CSS transition on transform.

Animation sequence:
- Update transforms for all moving tiles -> transition runs.
- On completion (setTimeout), remove merged tiles from DOM, update value/class of surviving tiles, spawn new tile (with pop-in animation), check win/over.
- Unlock input.

Handle rapid input: if animating, ignore (or queue last key). Ignoring is fine and safe.

Also support touch/swipe maybe — optional. Add on-screen buttons for mobile? Not required. Keep arrow keys + maybe WASD. Page scroll prevention: preventDefault on arrow keys.

Win message: when a tile with 2048 is created (first time), show overlay with "You win!" and buttons "Keep going" / "New Game". Continuing after win: set flag so it doesn't show again.

Game Over: after spawn, check if any empty cell or adjacent equal pairs. Show overlay with Game Over + New Game.

Score: increment by merged value.

Let's also add score delta popup (+4).

Colors for tile values: classic 2048 palette.

Cell size: board 4x4 with gap. Use CSS variables: --size: 400px? Let's use board 400x400 with 4 cells of 87.5px and 10px gaps... Compute: cellSize = (boardSize - gap*(SIZE+1)) / SIZE. Let's define boardSize = min(90vw, 420px) via CSS var, gap 10px. Compute positions in JS using measured cell size? Simpler: use CSS calc with variables and compute translate in JS using percentages? Transform in px computed from JS: I can read board size at runtime, or set --cell and --gap in CSS and compute positions in JS via getComputedStyle... Simpler: fixed px board size in CSS (e.g., 400px), scale down for small screens with transform scale? That could complicate pointer stuff but we don't need pointer on board.

Better: define CSS variables on .board: --gap: 10px; --pad: 10px; and cell size computed as calc((100% - 5*gap)/4)... For JS positioning, compute cell = (board.clientWidth - 5*gap)/4 dynamically on each move (read gap from computed style). Let's just read board.clientWidth and gap constant GAP=10 (set in both CSS and JS as constant). Board width: use min(92vw, 420px) via CSS, and JS reads clientWidth. Positions: x = pad + col*(cell+gap) where pad = gap.

But transitions on resize would misplace; acceptable. Also recompute on resize event -> reposition all tiles without transition.

Let me write the code.

HTML structure:

```html
<div class="wrap">
  <header>
    <h1>2048</h1>
    <div class="scores">
      <div class="box">Score <span id="score">0</span><span id="delta"></span></div>
      <div class="box">Best <span id="best">0</span></div>
    </div>
  </header>
  <div class="controls">
    <button id="newGame">New Game</button>
  </div>
  <div class="board" id="board">
    <div class="grid-cells">... 16 background cells ...</div>
    <!-- tiles injected -->
  </div>
  <p class="help">Use arrow keys to move...</p>
  <div class="overlay" id="overlay"> ... </div>
</div>
```

Overlay inside board container positioned absolute.

Tile element: `<div class="tile v2"><span>2</span></div>` positioned absolute with transform translate. Pop animation for spawn: class `spawn`. Merge animation: class `merge` (scale bounce).

Font sizes per value class.

Now JS move function:

```js
function move(dir){
  if(animating || gameOverShown) ... allow moves after game over? no.
  const vec = {left:[0,-1], right:[0,1], up:[-1,0], down:[1,0]}[dir];
  ...
}
```

Build lines: for each of 4 lines, an array of coordinates ordered from the side tiles move toward.

E.g., dir left: rows r=0..3, cols in order 0,1,2,3 (movement target toward col 0). Wait: tiles move left, so order traversal starting from leftmost: col 0,1,2,3 — the first tile encountered stays at front.

General: order coords from the edge toward the destination. For left: col ascending. For right: col descending. Up: row ascending. Down: row descending.

Process line:
```js
const tilesInLine = coords.map(c=>grid[c.r][c.c]).filter(Boolean);
let targetIdx = 0;
let prevPlaced = null; // {tile, value} placed at targetIdx-1
const moves = []; // {tile, r, c}
const removals = [];
for(const t of tilesInLine){
  if(prevPlaced && prevPlaced.value === t.value && !prevPlaced.merged){
     // merge t into prevPlaced.tile
     moves.push({tile:t, r:prevPlaced.r, c:prevPlaced.c});
     removals.push(t);
     prevPlaced.value *= 2;
     prevPlaced.merged = true;
     score += prevPlaced.value;
     mergedTiles.push(prevPlaced.tile);
  } else {
     const c = coords[targetIdx];
     moves.push({tile:t, r:c.r, c:c.c});
     prevPlaced = {tile:t, value:t.value, r:c.r, c:c.c, merged:false};
     targetIdx++;
  }
}
```

Wait — careful: prevPlaced.merged flag: a tile that has already merged in this move cannot merge again. But prevPlaced refers to the surviving tile. If placed tile merged (value doubled), further same-value tile shouldn't merge into it. Standard rule: [2,2,2,2] left: t=2 -> place at idx0. t=2 -> equal & !merged -> merge, prev value 4, merged=true. t=2 -> value 4 != 2, place at idx1. t=2 -> equal to prev(2) & !merged -> merge. Result [4,4]. Correct.

[2,2,4,0] left: 2 place idx0; 2 merge -> 4 merged; 4: value 4 === 4 but prevPlaced.merged true -> no merge; place at idx1. Result [4,4]. Correct!

Hmm but wait, that's wrong ordering check: I compare t.value with prevPlaced.value which after merge is 4, and t.value is 4 — equal, but merged flag prevents. Good, result [4,4,0,0]. Correct.

Also [4,4,8] left: 4 place idx0; 4 merge -> 8 merged; 8: equal to 8 but merged -> place idx1. [8,8]. Correct.

changed = any tile changed position or any merge happened.

New grid: build from scratch — newGrid all null, place prevPlaced tiles. Also removed tiles need to be removed from grid. Simplest: after computing, set newGrid[r][c] = tile object, update tile.r/tile.c.

Animation:
- If not changed: no animation, no spawn, just return (maybe check game over? If board unchanged and no empty... game over would already have been detected. Actually game over check happens after spawn/initial. If unchanged move, board unchanged so game over status unchanged.)
- Apply transforms for moved tiles (transition). For merged tiles, they move to same position as survivor (both animate there).
- After duration (e.g., 120ms): 
  - Remove merged tile DOM elements.
  - Update survivor tile value (class, text), add merge animation class.
  - Update grid = newGrid.
  - Spawn new tile (pop animation).
  - Update score display (+delta popup).
  - Check win (any tile value >= 2048 created this move) -> show win overlay (if not already continuing).
  - Check game over -> overlay.
  - Unlock.

If unchanged: do nothing.

Input: keydown listener; if key is arrow/WASD, preventDefault. If animating, ignore (or buffer last key — I'll buffer one pending key to make controls feel responsive? Requirement: "without allowing rapid input to corrupt board state." Simplest safe: ignore while animating. But buffered input is nicer. I'll ignore to keep it simple and safe; maybe buffer the most recent key and execute after animation. Buffering risks: user presses 4 keys quickly → we only apply one (the last buffered). That's fine. Let's implement a small queue of max 1: pendingDir. After animation completes, if pendingDir, process it. Actually could lead to chaining animations continuously — fine.

Hmm, but with queue, after unlock check pending. Let's do it: keep it simple — queue only one pending direction (overwrite).

Also touch swipe support: nice extra, optional. I'll add simple touch handlers (touchstart/touchend with threshold), preventDefault on touchmove within board to avoid scrolling. Low risk.

Game over check:
```js
function hasMoves(){
  for each cell: if null return true;
  for each cell: right/down neighbor equal -> true;
  return false;
}
```

Win: when a merged tile reaches 2048 and !won before: show win overlay with Continue and New Game. Set won=true, continuing handled.

Overlay markup: reuse with title and buttons:
```html
<div class="overlay hidden" id="overlay">
  <div class="ov-title" id="ovTitle"></div>
  <div class="ov-text" id="ovText"></div>
  <div class="ov-actions"><button id="ovPrimary"></button><button id="ovSecondary">New Game</button></div>
</div>
```

Win: title "You win!", primary "Keep going" → hide overlay, allow moves. Secondary "New Game".
Game over: title "Game over!", primary hidden? Just show "New Game" button (secondary). Or primary = "Try again" same as new game. I'll hide primary for game over.

Best score: localStorage might be sandboxed but usually works; wrap in try/catch. Optional. I'll include with try/catch.

Resize handling: reposition tiles (without transition) using current geometry.

Let me define geometry function:

```js
function geom(){
  const board = document.getElementById('board');
  const w = board.clientWidth;
  const pad = 12, gap = 10;
  const cell = (w - pad*2 - gap*3) / 4;
  return {pad, gap, cell, step: cell+gap};
}
```
But CSS must match: board padding 12px, gap 10px. I'll set these via CSS variables and read from computed style to stay in sync:

```js
const cs = getComputedStyle(board);
const pad = parseFloat(cs.paddingLeft);
const gap = parseFloat(cs.getPropertyValue('--gap'));
```
Set --gap: 10px in .board CSS. Cell = (clientWidth - 2*pad - 3*gap)/4. clientWidth includes padding (content+padding, excludes border). So content width = clientWidth - 2*pad. cell = (clientWidth - 2*pad - 3*gap)/4. Good.

Tile position: left/top via transform: translate(x, y) with tile having position absolute, left:0, top:0, width:cell, height:cell. Set width/height in JS too (style.width = cell+'px'). Since cell size may change on resize, set size on each positioning call.

Alternatively use CSS calc for tile size: width: calc((100% ... )) relative to board? Tiles are children of board; percentage width would be relative to board content box (clientWidth - padding). cell = (contentW - 3*gap)/4 = calc((100% - 3*var(--gap))/4) where 100% = content width. That works in CSS! And transform translate: x = col*(cell+gap). Can't express in CSS easily without vars per tile... could use CSS vars: style.setProperty('--c', col) and transform: translate(calc(var(--c) * (100% ... ))) — percentage in translate refers to the element's own width, so translate(calc(var(--c) * (100% + var(--gap)))) works! Because translateX % is relative to element's width = cell. So x = col*(cell + gap) = calc(var(--c)*(100% + var(--gap))). Nice but also offset by padding: position tile at left: pad, top: pad (padding offsets). Then translate as above. Clean, resize-proof.

Hmm, but does calc multiplication with percentage work? calc(var(--c) * (100% + var(--gap))) — multiplying a number by a value containing percentage: calc allows number * dimension. (100% + var(--gap)) is a length sum; number * length is valid. var(--c) must be a unitless number. Should work in modern browsers. Risky though — if it fails, tiles break. Safer: compute px in JS. I'll do JS px computation; it's straightforward and I control it. On resize, recompute and reposition without transition.

Let me write the code now.

```js
const SIZE = 4;
const ANIM = 130;
let grid = [];
let score = 0, best = 0;
let tileId = 0;
let animating = false;
let pendingDir = null;
let won = false;
let alive = true; // game not over
let overlayMode = null;
```

createTile(r, c, value, {spawn:false}) creates div, appends to board, positions it.

positionTile(tileEl, r, c, animate) sets transform.

Actually let me hold tile objects: {id, value, r, c, el}.

Rendering approach: grid holds tile objects.

spawn(r,c,value): creates tile object, appends div with class spawn.

Move steps in code:

```js
function move(dir){
  if(!alive || overlayMode==='win'...) // blocked while win overlay open
  if(animating){ pendingDir = dir; return; }
  const coordsList = getLines(dir);
  const newGrid = Array.from({length:SIZE},()=>Array(SIZE).fill(null));
  const movers = []; const merged = []; let changed=false; let gained=0;
  for(const coords of coordsList){
    const tiles = coords.map(({r,c})=>grid[r][c]).filter(Boolean);
    let slot = 0; let placed = null;
    for(const t of tiles){
      if(placed && !placed.mergedFlag && placed.value === t.value){
        const target = coords[slot-1]; // where placed is
        movers.push({t, r:target.r, c:target.c});
        placed.value *= 2; placed.mergedFlag = true;
        gained += placed.value;
        merged.push({survivor: placed.tile, absorbed: t});
        changed = true;
      } else {
        const target = coords[slot];
        newGrid[target.r][target.c] = {...} 
      }
    }
  }
}
```

Careful: `placed` entries stored as {tile, value, mergedFlag}. When placing: newGrid[target.r][target.c] = tile; tile.r=..., etc. But we shouldn't mutate tile.r before animation? Actually we need DOM transform animation, and grid bookkeeping separately. Let's keep newGrid as tile objects with updated logical r/c, and DOM transform applied in a batch.

Since merged survivor tile: its value changes only after animation completes (so text/class updates after). So don't update tile.value until commit. Use placed.value as computed value separate from tile.value.

Let me restructure:

```js
const placedList = []; // {tile, value, r, c, merged}
for each coords:
  const tiles = coords.map(...).filter(Boolean);
  let slot = 0, placed = null;
  for (const t of tiles) {
    if (placed && !placed.merged && placed.value === t.value) {
      const tgt = coords[slot-1];
      movers.push({tile:t, toR:tgt.r, toC:tgt.c});
      absorbed.push({tile:t, into:placed.tile});
      placed.value *= 2; placed.merged = true;
      gained += placed.value;
      changed = true;
    } else {
      const tgt = coords[slot];
      placed = {tile:t, value:t.value, r:tgt.r, c:tgt.c, merged:false};
      placedList.push(placed);
      movers.push({tile:t, toR:tgt.r, toC:tgt.c});
      if (t.r !== tgt.r || t.c !== tgt.c) changed = true;
      slot++;
    }
  }
```

Wait bug: when merging, absorbed tile goes to coords[slot-1]? Let's verify: placed was placed at coords[slot-1] because after placing, slot incremented. Yes when placed was created, slot was s, target coords[s], then slot = s+1. So placed is at coords[slot-1]. Correct.

Then:
```js
if(!changed) return false;
animating = true;
// new grid
newGrid = empty;
for(const p of placedList) newGrid[p.r][p.c] = p.tile;
// animate transforms
for(const m of movers) setPos(m.tile.el, m.toR, m.toC);
setTimeout(commit, ANIM);
```

commit:
```js
for(const {tile, into} of absorbed){ tile.el.remove(); }
for(const p of placedList){
  p.tile.r=p.r; p.tile.c=p.c;
  if(p.value !== p.tile.value){
    p.tile.value = p.value;
    updateTileEl(p.tile, 'merge');
  }
}
grid = newGrid;
score += gained; updateScore(gained);
// spawn
const empties = ...; if any: spawnRandom();
// win check
if(!won && any tile >= 2048){ won=true; showWin(); }
else if(!hasMoves()){ alive=false; showGameOver(); }
else if(win overlay open? no)
animating = false;
if(pendingDir){ const d=pendingDir; pendingDir=null; move(d); }
```

Win overlay shown but game continues after clicking "Keep going". While overlay open, block moves (move() returns early if overlayMode set).

Also, spawn should only happen if changed — yes handled.

Note: absorbed tiles — their el positions also updated (movers includes them) so they visually slide to the same cell, then removed at commit while survivor gets merge pop. Good.

Score delta popup: an element "+4" that animates up and fades. Add if gained>0.

updateTileEl: set class `tile v{n}` where n capped for styling (2..4096, 8192+ => vbig). Text content.

Number colors: use classes v2, v4, v8, v16, v32, v64, v128, v256, v512, v1024, v2048, vbig.

Font size adjust for 4-digit.

Initial: reset() clears board, score=0, spawn two tiles.

Spawn: pick random empty cell; value 2 with 90% else 4.

Also "Do not spawn after an unchanged move" — handled.

Game over overlay text: "No more moves available." 

Now check: after a move that changes board but leaves no moves (and no win), show game over. Also possible the spawn fills last empty and no merges possible.

Also should check game over when? After spawn. Yes.

Edge: initial board could have no moves? Two tiles random — always moves exist.

Keyboard: 
```js
const KEYS = {ArrowLeft:'left', ArrowRight:'right', ArrowUp:'up', ArrowDown:'down', a:'left', ...};
window.addEventListener('keydown', e=>{
  const dir = KEYS[e.key] || KEYS[e.key.toLowerCase()] ...
  if(dir){ e.preventDefault(); move(dir); }
  if(e.key===' '||e.key==='Enter') maybe not.
});
```
preventDefault for arrow keys prevents scrolling (page may not scroll anyway, but requirement says prevent).

Also handle when overlay open: escape? Not needed.

Let's write CSS nicely: dark theme or classic beige. Classic: background #faf8ef, board #bbada0, tiles colors. Text #776e65. Font family: system / "Helvetica Neue", sans-serif (no external fonts).

Layout: centered column, max-width 420px, board responsive width min(92vw, 420px).

Board markup: I'll generate background cells in JS or just hardcode 16 divs in HTML. Generate in JS for brevity.

Overlay: absolute over board, background rgba(238,228,218,0.73) for win, rgba(187,173,160,0.73) for game over, with fade-in.

Let's write everything.

Tile CSS:
```css
.tile{position:absolute; display:flex; align-items:center; justify-content:center; border-radius:6px; font-weight:bold; transition:transform 120ms ease-in-out; z-index:2;}
.tile.merged-z{z-index:3}
```
Spawn animation: `@keyframes pop{0%{transform:scale(0)}100%{transform:scale(1)}}` but transform is used for position! Conflict: transform holds translate. Use a wrapper? Solution: tile element positioned with `left`/`top` set via style (not transform), and transform free for scale animations. Transition on left/top? Transitions on left/top are less performant but fine for 16 tiles. Alternatively inner span for scale animation: tile has transform translate for position, inner `<span class="inner">` for scale pop. That's clean: pop/merge animation on inner span.

So structure: `<div class="tile"><span class="face">2</span></div>`, tile.style.transform = translate(x,y). face has width/height 100%, display flex center, animation on spawn/merge.

But merge bounce changes face scale — fine.

Actually simpler: put value text directly in tile and animate `scale` on the tile? No — position uses translate. Could combine: transform: translate(x,y) scale(s) — keyframes would need to preserve translate... complicated. Use inner face. 

Hmm, but face needs background color (tile bg) — put colors on .tile, face just holds text. Animation scale on face would scale text only, not the colored background. Better: face has background color and full size, tile transparent. So classes v2 etc. on face? Let's put color classes on .tile and have .face be a full-size box with background inherit? Simpler: apply color classes to the face element and make .tile transparent container.

Let's do: tile el: `position:absolute; transform:translate(...); width/height set; z-index:2;` and inside `<div class="face v2">2</div>` with `width:100%;height:100%;border-radius:6px; display:grid;place-items:center;` and animations on .face.

For merged z-index: merged tile should render above sliding tiles. Give .tile.z10{z-index:10} temporarily? The survivor keeps sliding tile beneath? Actually during merge animation, absorbed tile is removed at commit; the survivor stays at same place. z-index fine at default. Set survivor face animation `mergePop`.

Wait, absorbed tile animates to same position, so during animation two tiles overlap. At commit the absorbed is removed. Both same z-index — one covers the other, fine.

Font size classes: .v4-digit or use CSS attribute? I'll add class `d4` for 4-digit values, `d5` for 5+. font-size: for 1-2 digits 44px, 3 digits 36px, 4 digits 28px, 5+ 22px (based on board cell ~85px). Use clamp with vw? Board is responsive; cell might be ~70-90px. Use font-size relative: em of container? Could set font-size in JS based on cell size. Simpler: font-size: calc(var(--cell) * 0.4) — but --cell unknown in CSS... I can set --cell in JS on resize! Do that: JS computes cell px and sets board.style.setProperty('--cell', cell+'px'). Then CSS uses var(--cell) for tile width/height, font sizes, gap positions.

Actually then I can also position tiles in JS using cell. Set tile width/height via var too, but JS computes transform anyway. Let's set in CSS:
```css
.tile{ width:var(--cell); height:var(--cell); }
```
and font-size: calc(var(--cell)*.42) default; .d3 .face{font-size:calc(var(--cell)*.34)} etc. Good.

--gap and padding also in CSS; JS reads them.

Board background cells: 16 divs in a grid layout: 
```css
.cells{position:absolute; inset:var(--pad); display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap);}
.cell{background:rgba(238,228,218,.35); border-radius:6px;}
```
inset uses --pad. Board: padding: var(--pad); position relative. --pad: 12px? But `inset` on absolute child positions relative to padding box (border box actually — absolute positioning is relative to padding box of the containing block). Yes, absolute inset:0 covers padding box, i.e., includes padding area. So inset: var(--pad) aligns with content box. Good.

Board width: `.board{width:min(92vw, 440px); aspect-ratio:1; ...}` with box-sizing:border-box. JS: cell = (board.clientWidth - 2*pad - 3*gap)/4 where clientWidth includes padding. Good.

Set --cell on board element via JS: board.style.setProperty('--cell', cell+'px').

Now writing full file.

Score display with delta: 
```html
<div class="score-box">SCORE<span id="score">0</span><span id="scoreDelta" class="delta"></span></div>
```
delta animation: add class 'show' with text +n, use animation then clear.

Best score with localStorage try/catch.

Also add on-screen direction buttons for touch? The requirement mentions arrow keys; I'll add optional swipe + small note. Let's include swipe — low cost.

Let me also make sure keyboard blocked when typing? No inputs.

Write the file now.

Overlay logic:

```js
function openOverlay(kind){
  overlayMode = kind;
  overlay.classList.remove('hidden');
  overlay.className = ... set class 'overlay ' + kind
}
```
I'll manage: overlay element with classes `overlay`, plus `win`/`over`, and hidden toggling.

Buttons:
- ovPrimary: for win → "Keep going" (hide overlay, overlayMode=null). For game over → hidden.
- ovSecondary: "New Game" → reset.

Game over: primary button text "Try again" also reset? I'll show a single "New Game" button (hide primary).

Let me now consider the "win message on reaching 2048" — overlay with "You win!" — good.

Also keep the header showing a persistent status? Overlay suffices.

Code for hasMoves:
```js
function hasMoves(){
  for(let r=0;r<4;r++)for(let c=0;c<4;c++){
    const t=grid[r][c];
    if(!t) return true;
    if(c<3 && grid[r][c+1] && grid[r][c+1].value===t.value) return true;
    if(r<3 && grid[r+1][c] && grid[r+1][c].value===t.value) return true;
  }
  return false;
}
```

Now animation timing: ANIM = 130ms transition + small buffer? Use transitionend? Use setTimeout(ANIM+20).

Rapid input while animating: queued into pendingDir (single). Also if overlay open, ignore.

Actually one subtlety: move() checks overlayMode !== null → return. And game over (alive=false) → return.

New Game while animating: reset must cancel pending timer. Keep a token: `let runId = 0;` increment on reset; in move capture `const id = runId;` and in commit check `if(id!==runId) return;`. Good.

Also pendingDir cleared on reset.

Let me write the HTML file.

For getLines(dir):
```js
function getLines(dir){
  const lines=[];
  if(dir==='left'||dir==='right'){
    for(let r=0;r<4;r++){
      const line=[];
      for(let i=0;i<4;i++){
        const c = dir==='left'? i : 3-i;
        line.push({r,c});
      }
      lines.push(line);
    }
  } else {
    for(let c=0;c<4;c++){
      const line=[];
      for(let i=0;i<4;i++){
        const r = dir==='up'? i : 3-i;
        line.push({r,c});
      }
      lines.push(line);
    }
  }
  return lines;
}
```

setPos(el, r, c): el.style.transform = `translate(${x}px, ${y}px)` where x = pad + c*(cell+gap).

Position all function for resize.

Alright, write it.

Also score element update: score += gained; if score>best, best=score, save.

Score delta: show `+${gained}`.

Let me write the complete file now.

CSS colors:
v2 #eee4da / text #776e65
v4 #ede0c8 / #776e65
v8 #f2b179 / #f9f6f2
v16 #f59563
v32 #f67c5f
v64 #f65e3b
v128 #edcf72
v256 #edcc61
v512 #edc850
v1024 #edc53f
v2048 #edc22e
big #3c3a32 (or #edc22e) — for >2048 use dark gold; I'll use #2f2d28 with light text? Classic uses same gold. I'll make vbig background #3c3a32, text #f9f6f2.

Shadow for 128+: box-shadow 0 0 30px 10px rgba(243,215,116,.24) inset? Classic has glow. Add for >=128: class via CSS `.v128 .face`... wait color classes are on face. Glow on face.

Let me write the file.

Tile face text centered.

Let me draft HTML fully:

```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="game">
  <header class="top">
    <h1 class="logo">2048</h1>
    <div class="scoreboard">
      <div class="score-box" id="scoreBox">SCORE<span class="num" id="scoreVal">0</span><span class="delta" id="scoreDelta"></span></div>
      <div class="score-box">BEST<span class="num" id="bestVal">0</span></div>
    </div>
  </header>
  <div class="sub">
    <p class="tagline">Join the tiles, get to <b>2048!</b> Use arrow keys or swipe.</p>
    <button class="btn" id="newGameBtn">New Game</button>
  </div>
  <div class="board" id="board">
    <div class="cells" id="cells"></div>
    <div class="overlay hidden" id="overlay">
      <div class="ov-title" id="ovTitle"></div>
      <div class="ov-text" id="ovText"></div>
      <div class="ov-actions">
        <button class="btn ov-btn" id="ovPrimary"></button>
        <button class="btn ov-btn" id="ovSecondary">New Game</button>
      </div>
    </div>
  </div>
  <p class="help">...keys...</p>
</main>
<script>...</script>
</body>
</html>
```

Overlay is inside board so it scales; but buttons inside overlay need to work — yes.

Note: overlay covers board including cells; tiles under it still visible through translucent bg.

Now JS in detail. I'll write it carefully.

```js
(function(){
  'use strict';
  const SIZE = 4;
  const ANIM = 140;
  const board = document.getElementById('board');
  const cellsEl = document.getElementById('cells');
  const scoreVal = document.getElementById('scoreVal');
  const bestVal = document.getElementById('bestVal');
  const deltaEl = document.getElementById('scoreDelta');
  const overlay = document.getElementById('overlay');
  const ovTitle = document.getElementById('ovTitle');
  const ovText = document.getElementById('ovText');
  const ovPrimary = document.getElementById('ovPrimary');
  const ovSecondary = document.getElementById('ovSecondary');

  // background cells
  for(let i=0;i<SIZE*SIZE;i++){ const d=document.createElement('div'); d.className='cell'; cellsEl.appendChild(d); }

  let grid, score=0, best=0, animating=false, pendingDir=null, alive=true, won=false, overlayMode=null, runId=0;

  try{ best = parseInt(localStorage.getItem('best2048')||'0',10)||0; }catch(e){ best=0; }
  bestVal.textContent = best;

  function geom(){
    const cs = getComputedStyle(board);
    const pad = parseFloat(cs.paddingLeft)||12;
    const gap = parseFloat(cs.getPropertyValue('--gap'))||10;
    const w = board.clientWidth;
    const cell = (w - 2*pad - 3*gap)/4;
    return {pad, gap, cell};
  }
  let G = geom();
  function applyGeom(){ G = geom(); board.style.setProperty('--cell', G.cell+'px'); positionAll(); }
  function posOf(r,c){ return {x: G.pad + c*(G.cell+G.gap), y: G.pad + r*(G.cell+G.gap)}; }
  function setTilePos(el,r,c){ const p=posOf(r,c); el.style.transform = `translate(${p.x}px, ${p.y}px)`; }
  function positionAll(){ for(const row of grid) for(const t of row) if(t) setTilePos(t.el,t.r,t.c); }
```

Wait: `grid` may be undefined before init; call applyGeom after reset or guard.

Tile creation:

```js
  let uid=0;
  function makeTile(r,c,value,spawnAnim){
    const el=document.createElement('div');
    el.className='tile';
    const face=document.createElement('div');
    face.className='face';
    el.appendChild(face);
    board.appendChild(el);
    const t={id:++uid, value, r, c, el, face};
    paint(t);
    setTilePos(el,r,c);
    if(spawnAnim) face.classList.add('spawn');
    return t;
  }
  function paint(t, anim){
    t.face.className='face v'+(t.value<=2048?t.value:'big') ... 
  }
```
Better: classes: `face v${value}` if value<=2048 else `face vbig`; plus digit class d3/d4/d5; plus anim class spawn/merge.

```js
  function paint(t, animClass){
    const cls=['face'];
    cls.push(t.value>2048?'vbig':'v'+t.value);
    const digits=String(t.value).length;
    if(digits===3) cls.push('d3'); else if(digits===4) cls.push('d4'); else if(digits>=5) cls.push('d5');
    if(animClass) cls.push(animClass);
    t.face.className=cls.join(' ');
    t.face.textContent=t.value;
  }
```
Problem: adding spawn class then repainting later removes it — fine (animation done).

But spawn class removed only on repaint (e.g., when tile value changes or... it never changes if no merge). Class with animation stays but animation runs once — fine (animation-fill / one-shot). But if we later paint without animClass, class removed, no visual issue.

Actually careful: paint(t, 'spawn') sets className including spawn; subsequent paint(t) removes it. When tile merges, paint(t,'merge'). Fine.

Hmm, one issue: after spawn animation ends, if we re-add spawn class via repaint? We only pass spawn once. OK.

Spawn random:
```js
  function empties(){ const e=[]; for r,c if(!grid[r][c]) e.push({r,c}); return e; }
  function spawnRandom(){
    const e=empties(); if(!e.length) return null;
    const {r,c}=e[Math.floor(Math.random()*e.length)];
    const v=Math.random()<0.9?2:4;
    const t=makeTile(r,c,v,true);
    grid[r][c]=t;
    return t;
  }
```

reset:
```js
  function reset(){
    runId++;
    if(grid) for(const row of grid) for(const t of row) if(t) t.el.remove();
    // also remove stray tiles: safer: board.querySelectorAll('.tile').forEach(el=>el.remove())
    grid = Array.from({length:SIZE},()=>Array(SIZE).fill(null));
    score=0; scoreVal.textContent='0'; hideDelta();
    alive=true; won=false; overlayMode=null; animating=false; pendingDir=null;
    hideOverlay();
    spawnRandom(); spawnRandom();
    applyGeom();
  }
```
applyGeom needs grid defined — order: define grid first then applyGeom. In reset, grid defined before applyGeom call. But positionAll iterates grid — fine.

makeTile calls setTilePos with G — G must be current. Call applyGeom() at load before first spawn? In reset I call applyGeom after spawning; positions set at spawn time use current G. On initial load, G computed at script run (geom() reads DOM). Board CSS is loaded by then. Fine. Let's call applyGeom() first in reset before spawn for safety.

Also stray tile removal: querySelectorAll('.tile') remove all — good against leaks.

move:

```js
  function move(dir){
    if(!alive || overlayMode || animating){ 
      if(animating && alive && !overlayMode) pendingDir=dir;
      return;
    }
    const id=runId;
    const lines=getLines(dir);
    const placed=[];
    const movers=[];
    const absorbed=[];
    let changed=false, gained=0;
    for(const coords of lines){
      const tiles=[];
      for(const p of coords){ const t=grid[p.r][p.c]; if(t) tiles.push(t); }
      let slot=0, cur=null;
      for(const t of tiles){
        if(cur && !cur.merged && cur.value===t.value){
          const tgt=coords[slot-1];
          movers.push({t, r:tgt.r, c:tgt.c});
          absorbed.push({t, into:cur.tile});
          cur.value*=2; cur.merged=true;
          gained+=cur.value;
          changed=true;
        } else {
          const tgt=coords[slot];
          cur={tile:t, value:t.value, r:tgt.r, c:tgt.c, merged:false};
          placed.push(cur);
          movers.push({t, r:tgt.r, c:tgt.c});
          if(t.r!==tgt.r||t.c!==tgt.c) changed=true;
          slot++;
        }
      }
    }
    if(!changed) return;   // no spawn, no animation
    // build new grid
    const ng=Array.from({length:SIZE},()=>Array(SIZE).fill(null));
    for(const p of placed) ng[p.r][p.c]=p.tile;
    // animate
    animating=true;
    for(const m of movers) setTilePos(m.t.el, m.r, m.c);
    const timer=setTimeout(()=>{ if(id!==runId) return; commit(ng, absorbed, placed, gained); }, ANIM+30);
  }
```

Wait — issue: while animating, grid still old; positionAll on resize during anim would fight. Rare; acceptable. Actually if resize happens during anim, transition to old positions then commit sets new. Minor.

Also: pendingDir set only when animating — but if overlay open we shouldn't queue. The condition above: if animating and alive and no overlay → queue. Good.

commit:

```js
  function commit(ng, absorbed, placed, gained){
    for(const a of absorbed) a.t.el.remove();
    grid = ng;
    for(const p of placed){
      const t=p.tile;
      t.r=p.r; t.c=p.c;
      if(t.value!==p.value){ t.value=p.value; paint(t,'merge'); }
    }
    if(gained>0){ score+=gained; scoreVal.textContent=score; showDelta(gained); if(score>best){best=score; bestVal.textContent=best; try{localStorage.setItem('best2048',String(best))}catch(e){}} }
    // check win before spawn? Order doesn't matter much. spawn first then checks.
    spawnRandom();
    if(!won && hasValue(2048)){ won=true; openOverlay('win'); }
    else if(!hasMoves()){ alive=false; openOverlay('over'); }
    animating=false;
    if(pendingDir && alive && !overlayMode){ const d=pendingDir; pendingDir=null; move(d); }
  }
```

Hmm, if win overlay opens, pendingDir should be dropped. Condition handles it.

Also hasValue: any tile >= 2048 (value exactly 2048 first time; but if merged to 4096 later while won already true, skip). Use >=2048: `hasValue2048()`.

Note: if won and overlay open, and player clicks Keep going, game continues; alive stays true; game over checked on future commits. Good.

Overlay functions:

```js
  function openOverlay(kind){
    overlayMode=kind;
    overlay.classList.remove('hidden');
    overlay.classList.toggle('win', kind==='win');
    overlay.classList.toggle('over', kind==='over');
    if(kind==='win'){ ovTitle.textContent='You win!'; ovText.textContent='You reached 2048. Keep going for a higher score?'; ovPrimary.textContent='Keep going'; ovPrimary.style.display=''; ovSecondary.textContent='New Game'; }
    else { ovTitle.textContent='Game over'; ovText.textContent='No more moves are available.'; ovPrimary.style.display='none'; ovSecondary.textContent='New Game'; }
    overlay.classList.add('show'); // trigger fade animation
  }
```
Simplify: remove hidden toggles animation via CSS transition on opacity/visibility.

```css
.overlay{opacity:0; visibility:hidden; transition:opacity .3s ease; }
.overlay.show{opacity:1; visibility:visible;}
```
Use class 'show' only; drop hidden class. But then initial state has no show. Good.

hideOverlay(){ overlay.classList.remove('show'); overlayMode=null; }

Buttons: ovPrimary click: if overlayMode==='win'{ hideOverlay(); } ; ovSecondary click: reset().

newGameBtn click: reset().

Keydown:
```js
  const KEYMAP={ArrowLeft:'left',ArrowRight:'right',ArrowUp:'up',ArrowDown:'down',a:'left',d:'right',w:'up',s:'down',A:'left',D:'right',W:'up',S:'down'};
  window.addEventListener('keydown', e=>{
    if(e.ctrlKey||e.metaKey||e.altKey) return;
    const dir=KEYMAP[e.key];
    if(dir){ e.preventDefault(); move(dir); return; }
    if(e.key==='Enter'){ ...? not needed }
  }, {passive:false});
```
preventDefault on arrows: need listener not passive — keydown is not passive by default. Fine.

Touch swipe on board:
```js
  let tsx=null,tsy=null;
  board.addEventListener('touchstart',e=>{ if(e.touches.length===1){ tsx=e.touches[0].clientX; tsy=e.touches[0].clientY; } },{passive:true});
  board.addEventListener('touchend',e=>{
    if(tsx==null) return;
    const t=e.changedTouches[0]; const dx=t.clientX-tsx, dy=t.clientY-tsy;
    tsx=null;tsy=null;
    if(Math.max(Math.abs(dx),Math.abs(dy))<24) return;
    if(Math.abs(dx)>Math.abs(dy)) move(dx>0?'right':'left'); else move(dy>0?'down':'up');
  },{passive:true});
```
Also prevent scroll while swiping: add touchmove preventDefault on board with passive:false. Might interfere with page scroll; board is small. I'll add it — but then user can't scroll page by dragging on board. Page likely doesn't scroll (fits viewport mostly). I'll include touchmove preventDefault only if the gesture is horizontal? Keep simple: preventDefault always on board touchmove. Actually to be safe, skip touchmove handler; swipe still works with touchend. Page might scroll slightly during swipe on mobile but arrows are the requirement. I'll add touch-action: none on .board CSS — that's the clean modern way. `touch-action:none` on board prevents browser scrolling gestures on the board. 

Resize:
```js
  window.addEventListener('resize', ()=>{ applyGeom(); });
```
During anim, positionAll would snap tiles to old grid positions... The commit later sets them again? commit doesn't reposition non-merged placed tiles... they were positioned pre-commit by movers. If resize happened during anim, positionAll sets them to grid (old) positions computed with new geometry — then commit doesn't fix positions for unchanged tiles → wrong positions! Edge case. Fix: in commit, after updating r/c, setTilePos for all placed tiles (they should be at correct positions; re-setting transform to same target for movers, and correct for any discrepancy). Add `setTilePos(p.tile.el, p.r, p.c)` in commit loop — harmless since same values normally. 

Delta popup:
```js
  let deltaTimer=null;
  function showDelta(n){
    deltaEl.textContent='+'+n;
    deltaEl.classList.remove('show'); void deltaEl.offsetWidth; deltaEl.classList.add('show');
    clearTimeout(deltaTimer);
    deltaTimer=setTimeout(()=>deltaEl.classList.remove('show'),700);
  }
```
CSS: .delta{position:absolute; right:...; top:...; opacity:0;} .delta.show{animation: rise .7s ease forwards;}

Position score box relative.

Now CSS. Write it out.

Also .help text listing keys.

Edge: fonts — system.

Let me also double check merge example [2,2,2,2] left with algorithm: tiles=[a,b,c,d] values all 2.
- a: cur=null → place coords[0], cur={a,2,m:false}, slot=1.
- b: cur.value===2, !merged → merge: target coords[0]; movers b→(0); absorbed b→a; cur.value=4, merged=true, gained=4.
- c: cur.value=4 !== 2 → place coords[1] (slot=1), cur={c,2}, slot=2.
- d: cur.value===2 && !merged → merge into coords[slot-1]=coords[1]; absorbed d→c; cur.value=4 merged; gained+=4 → 8.
Result placed: a@0 val4, c@1 val4. Score +8. Correct: two 4s, score +4+4=8. 

[2,2,4,0]: tiles [a,b,c].
- a place coords[0].
- b merge → 4, merged.
- c value4: cur.value===4 but cur.merged → else branch: place coords[1], cur={c,4}, slot=2.
Result [4,4]. Correct.

Score for that: +4. Correct (merged tile 4).

Now, "score increases by the value of each new merged tile" ✓.

Now writing file. Also need to handle: initial `applyGeom` before grid exists — guard positionAll with `if(!grid) return`.

Board aspect-ratio: with width min(92vw,440px) and aspect-ratio 1, clientWidth = width (border-box with box-sizing border-box and no border). padding included in clientWidth. cell computed correctly.

But careful: board's clientWidth depends on --cell? No, width is min(92vw,440px). Good, no circularity.

Hmm — but if viewport very narrow (e.g., 320px), cell = (294 - 24 - 30)/4 ≈ 60px. Font sizes scale with --cell. Good.

Let me write it.

Also overlay inside board uses absolute inset 0 including padding — cover whole board: `position:absolute; inset:0;` covers padding box. Good.

Buttons in overlay: .ov-btn styles.

Write now.

One more: after game over, moves blocked (alive=false). New Game resets. ✓.

Also should we block moves while win overlay open? Yes (overlayMode truthy) — user must choose Keep going. ✓ "allow continuing after a win" ✓.

Test plan with browser:
1. Load, screenshot, console check.
2. Play arrow sequence, screenshot after each: check tiles slide, spawn added, score updates on merge.
3. Click New Game → two tiles, score 0.

To verify merges deterministically I might need luck. I can use browser key events. Let's implement and test.

I could also add a hidden debug hook: expose `window.__game = {grid, move, ...}` for testing. That helps verification (read board state). I'll expose a small API: window.game2048 = { getState: ()=>..., move, reset }. Harmless.

Let's write the file.

Let me build the game. Single file index.html. I'll write it carefully with animation via CSS transforms using absolute positioning.

Let me design:

- Grid 4x4, tiles absolutely positioned with transform translate based on row/col.
- Board state: 4x4 array of tile objects or values with ids for animation.
- Move logic: for each line, compact + merge once.
- Animation: keep tiles as DOM elements with ids; on move, update positions via transform transition; merge: both tiles move to target cell, then after transition, remove the merged source and update the target tile value with a "pop" class.
- Input queue/lock during animation (~100ms) to prevent corruption.
- Prevent arrow key scroll (preventDefault).
- Score, win banner at 2048, game over when no valid moves.
- New Game button.

Implementation plan for tiles: maintain `tiles` map id -> {id, value, row, col, el}. Grid stores id or null.

Move algorithm for a direction: process each line (array of tile refs in order toward direction). Build new positions: iterate non-null tiles, merge adjacent equal where merge flag not used. Assign new row/col.

If board unchanged (same positions and no merges), don't spawn.

Animation: apply new transform to each tile (transition). For merges: the "second" tile moves to the same cell as the first; after transition ends (or timeout), remove the absorbed tile, set the surviving tile's value to sum, update score, add pop class.

Timing: use setTimeout ~120ms for move duration. Lock input during that period. Actually queue? Simpler: ignore input during animation (or queue last key). I'll ignore to keep state consistent, but queueing the latest key feels better. I'll queue one pending direction and process after animation completes.

Score updates after merge completes (during animation end). Win message when a merged tile reaches 2048.

Game over check after spawn: no empty cells and no adjacent equal pairs.

Let me write the code.

Colors by value.

Sizing: board 400x400ish, cell gap. Use CSS variables: --size: 400px; --gap: 10px; cell = (400 - 3*10)/4 = 92.5. Position: left = col*(cell+gap), computed in JS or use calc with CSS var. I'll compute in JS: cellSize = 92.5... better use board 408 with gap 12: cell = (408 - 36)/4 = 93. Fine.

Actually simpler: board padding 12, gap 12, size 420 → inner = 396, cell = (396 - 36)/4 = 90. Good.

Position transform: translate(x, y) where x = col*(cell+gap).

Tile element: position absolute, width/height cell, line-height cell, transform translate.

Spawning: add new tile with "appear" class.

Let's write it.

Keyboard: document.addEventListener('keydown').

Also maybe touch/swipe — optional, not required. Skip or add simple swipe; not required. I'll skip to save time, maybe add simple touch later if time.

Win overlay: show message with "Keep playing" button and "New Game". Continue after win: set won=true, don't show again.

Game over overlay: message + New Game.

Write file now.

Edge details: merge logic per move:

```js
function getLines(dir){
  // returns arrays of tile ids in the order from the target edge
}
```

For left: each row, tiles from col 0..3. For right: col 3..0. For up: each col, row 0..3. For down: row 3..0.

Process line (array of tiles in travel order):
```js
function slideLine(tiles){
  const result = []; // {tile, targetIndex} merged info
  let targetPos = 0;
  let mergedDest = null;
  const out = []; // list of {id, toIndex, mergeWith: id|null}
  let i=0;
  let placed = []; // tiles placed at positions
  for(let i=0;i<tiles.length;i++){
    const cur = tiles[i];
    const next = tiles[i+1];
    if(next && next.value === cur.value && !justMerged...){
      // merge
    }
  }
}
```

Standard approach: iterate, keep pointer to last placed slot.

```js
let idx = 0;
const moves = [];
for (let i = 0; i < tiles.length; i++) {
  const t = tiles[i];
  if (idx > 0 && moves[idx-1] && moves[idx-1].merge) — hmm
}
```

Simpler:

```js
const placed = []; // {tile, mergedFrom: [tile,...] or null}
for (const t of tiles) {
  const last = placed[placed.length-1];
  if (last && !last.merged && last.tile.value === t.value) {
    last.merged = true; // mark that it already merged this move
    last.absorbed.push(t);
  } else {
    placed.push({tile: t, merged:false, absorbed: []});
  }
}
```

Then position: placed[k] goes to index k (in travel order). Wait — last.merged flag: once merged, next equal shouldn't merge again. But also the condition `last.tile.value === t.value` — after merge, the underlying tile value is still the old value until animation completes. So marking merged flag prevents [2,2,2] → 4,2 correct: placed=[2(merged from 2)], then third 2: last.merged true → push new slot. Result [4,2]. Correct.

[2,2,4,4] → first slot 2+2 merged, then 4 pushed (last.merged true but values differ anyway... last is slot with tile value 2, t=4 differ → push), then 4: last is slot 4, not merged → merge. Result [4,8]. Correct.

[4,4,4] → [8,4] correct. [4,4,4,4] → [8,8] correct.

Now animation: for each placed slot at index k: the head tile moves to position k; absorbed tiles also move to position k (on top). After transition, remove absorbed tiles' DOM, update head value ×2, score += value, pop animation.

Unchanged detection: changed if any tile moved index ≠ original or any merge occurred.

After animation end: spawn tile, check win, check game over.

But score update should probably happen as merges resolve — after transition is fine.

Lock: `busy` flag; store `pendingDir`; on keydown if busy, set pendingDir = dir (overwrite); after animation completes, if pendingDir, process.

Timing: transition 100ms; use setTimeout(110).

Let me handle value display: tile element has inner span with value text and class value-X.

Rendering: when value changes, update class and text.

Now write HTML.

Also ensure tiles render above background grid cells.

Font sizes: value >= 1000 smaller.

Let me write the file.

Also add a "Merge example" nothing. Keep it.

I'll also handle keydown for arrow keys plus WASD maybe. Requirement says arrow keys; WASD optional bonus.

Write code now.

Game over check: after spawn, board full and no adjacent equal → game over.

Win check: after merge, if value >= 2048 and !won → show win overlay, won = true, keep playing allowed.

Overlays: absolutely positioned over board, with buttons.

Let me write.

CSS:

```css
:root{--cell:90px;--gap:12px;--pad:12px;}
.board{position:relative;width:calc(4*var(--cell)+3*var(--gap)+2*var(--pad));...}
```

Simpler compute: board inner = 4*90+3*12 = 396; board width = 396+24=420.

Grid cells: background divs positioned absolutely too, or CSS grid layer beneath. I'll use a grid layer with `display:grid; grid-template-columns: repeat(4,90px); gap:12px;` positioned absolute inside board (with padding 12). Tiles layer on top absolutely positioned with translate.

Tile position: x = pad + col*(cell+gap) — but tile transform translate relative to tile layer which is inset:0 of board including padding? Easier: tile layer positioned at inset: pad (12px) with width 396. Then x = col*(90+12).

Let's do: .tile-layer{position:absolute; inset:12px;} tiles transform translate(calc(col*102px), ...). Compute in JS as px numbers.

OK write.

Score display: current score + best score (localStorage may be unavailable in sandbox — use try/catch, or just score). I'll add best with try/catch.

Let me write the full file.

For pop animation on merge: add class 'merged' → keyframes scale.

Appear: class 'new' → keyframes.

Now the JS main logic:

```js
const SIZE=4;
let grid = []; // grid[r][c] = tile object or null
let tiles = []; 
let score=0, won=false, gameOver=false, busy=false, pendingDir=null;
```

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

spawn():
```js
const empty=[]; for cells if !grid[r][c] empty.push
if(!empty.length) return null;
const {r,c}=empty[Math.floor(Math.random()*empty.length)];
const t={id:id++, value: Math.random()<0.9?2:4, r,c};
t.el=createEl; set position; add 'new'; grid[r][c]=t;
```

move(dir):
```js
if(gameOver||won blocked? no, win allows continue; overlay blocks? overlay with buttons, but key should maybe dismiss? "allow continuing after a win" — provide a Continue button. Also pressing arrow while overlay shown? I'll dismiss overlay on Continue button click; also allow arrow keys to continue (dismiss + move). Simpler: arrow key dismisses overlay and performs move.
```

Actually overlay covering board with pointer-events; when win shown, clicking continue hides it. Arrow keys: hide overlay then process move. Fine.

Move processing:

```js
function computeLines(dir){
  const lines=[];
  if(dir==='left'){for(let r=0;r<4;r++){const l=[];for(let c=0;c<4;c++)if(grid[r][c])l.push(grid[r][c]);lines.push(l);}}
  ...
}
```

But I need original indices too. Each tile has r,c so target index → position along line; compute target coords.

For left: line index k → (r, k). right → (r, 3-k). up → (k, c). down → (3-k, c).

```js
function doMove(dir){
  const lines = getLines(dir);
  let changed=false;
  const ops=[]; // {tile, tr, tc, absorbed:[...]}
  for(const line of lines){
    const placed=[];
    for(const t of line){
      const last=placed[placed.length-1];
      if(last && last.merged===false && last.tile.value===t.value){ last.merged=true; last.absorbed.push(t); }
      else placed.push({tile:t, merged:false, absorbed:[]});
    }
    placed.forEach((slot,k)=>{
      const [tr,tc]=posFor(dir, line, k); // hmm need line identity
    });
  }
}
```

Need line's base coords. Build lines as objects: {tiles, coord(k)->[r,c], along:'row' etc.} Let's build lines as arrays of {r,c} base? For left: line r fixed, tiles collected in c order 0..3. coord(k)=(r,k). I'll build lines as {fixed, coords: [[r0,c0],[r1,c1],...], tiles:[...]} where coords[k] corresponds to position k.

Simpler: build per-line arrays of coords:

```js
function buildLines(dir){
  const lines=[];
  for(let i=0;i<4;i++){
    const coords=[], tiles=[];
    for(let k=0;k<4;k++){
      let r,c;
      if(dir==='left'){r=i;c=k;} else if(dir==='right'){r=i;c=3-k;}
      else if(dir==='up'){r=k;c=i;} else {r=3-k;c=i;}
      coords.push([r,c]); if(grid[r][c]) tiles.push(grid[r][c]);
    }
    lines.push({coords, tiles});
  }
  return lines;
}
```

Then for each slot k: target coords[k].

changed detection: compare each tile's (r,c) to target; or absorbed.length>0.

Animate: set t.r=tr etc and t.el.style.transform. For absorbed tiles: set transform to target too; mark for removal.

After timeout:
- for each absorbed: remove el, grid cleanup (they're not in grid anymore? They were in grid at old positions — need to rebuild grid).
  Approach: before animating, clear grid to nulls for all tiles involved? Better: set grid = all null, then after placing: for each slot head tile, grid[tr][tc] = head tile. Absorbed tiles are not in grid. Set this at animation start (so grid reflects final layout minus spawns). But during animation DOM elements overlap — fine.

Actually grid must reflect final positions immediately after computing move so subsequent logic (spawn, gameover) works. Yes: rebuild grid at move start with head tiles at target positions. Absorbed tiles exist only in DOM until timeout.

Score: add at timeout when merging (feels responsive enough at 110ms).

Then spawn new tile, check win/game over, unlock, process pending.

Win: check during merge resolution — if any merged value >= 2048 and !won.

Also spawn could theoretically... fine.

Game over check function: any empty or any adjacent equal.

New Game: clear all tile els, reset grid, score 0, spawn 2 tiles, hide overlays.

Initial: two tiles spawned with appear animation.

Let's also prevent default scrolling: in keydown, if arrow keys, e.preventDefault().

Now write the code fully.

Overlay markup: one overlay div with win message + buttons (Keep going, New Game) and game over (Try again = new game).

Let me write.

Also mobile swipe: add touchstart/touchend basic — optional; add cheaply.

Write the file.

Font sizes: cell 90, font 40px for 1-2 digits, 32 for 3 digits (1024,2048), 24 for 4 digits (16384).

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

Board bg #bbada0, cell bg rgba(238,228,218,0.35).

Write now.

Input handling with pending queue: on keydown:
```js
if(dir){
  e.preventDefault();
  if(wonOverlayVisible) hideWin();
  if(gameOver) return;
  if(busy){ pendingDir = dir; return; }
  doMove(dir);
}
```

Hmm, but if game over, ignore. If overlay for win visible, arrow continues game (hide overlay + move).

doMove: if !changed → return (no spawn, no busy). Else busy=true, animate, setTimeout(...,130).

At end: merge resolutions already done at timeout: order — apply absorbed removals, score, pop, spawn, checks, busy=false, if pendingDir → doMove(pendingDir), pending=null.

Wait: score/pop and spawn happen in the same timeout. Fine.

Let me code `finishMove(mergedTiles)`.

Edge: rapid input queued only one dir — good.

Let's write file.

Also console check afterwards with browser tool.

One more: "Animate movement and merging without allowing rapid input to corrupt board state" — handled by busy lock + queue.

Code:

```js
const boardEl=..., tileLayerEl=...;
const CELL=90, GAP=12;
function pos(r,c){return {x:c*(CELL+GAP), y:r*(CELL+GAP)};}
```

createTileEl:
```js
function createTileEl(value){
  const el=document.createElement('div');
  el.className='tile';
  setTileValue(el,value);
  return el;
}
function setTileValue(el,v){
  el.className='tile v'+(v<=2048?v:'super') ... 
}
```

Careful: className also needs 'merged'/'new' temporarily. I'll store value class separately: `el.dataset.val` and use CSS attribute selectors? CSS can target `.tile[data-v="2048"]`. That avoids class conflicts. Use data-v and font-size rules via attribute selectors. But many selectors. Alternative: two child elements: el (position/animation) > span (value with color class). Set span.className = 't'+v (with super fallback). That's clean.

So tile el: `<div class="tile"><span class="tv v2"></span></div>`? Actually merged pop animation scales el — fine.

CSS: `.tv{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:6px;}` and el has no bg; but el width/height 90. Colors on .tv via class.

Animations: `.tile.new .tv{animation:appear...}` `.tile.merged .tv{animation:pop...}` — add/remove classes.

Ok, write.

font-size: put on .tv per class: `.v2,.v4{font-size:44px}` etc.

Now write index.html.

Game over overlay also over board.

Header: title "2048", score boxes, New Game button.

Let me produce the file.