Let me build a complete 2048 game in a single self-contained index.html file.

The user wants a playable 2048 game with:
- arrow-key tile sliding and merging
- smooth animations
- a score
- win and lose states

Let me create a comprehensive 2048 implementation with:
- 4x4 grid
- Arrow key controls (also WASD maybe, but arrow keys specifically)
- Smooth sliding animations using CSS transforms
- Score tracking (including merged values)
- Win state (reaching 2048) with option to continue
- Lose state (no more moves)
- New game button

Let me write the file.

I'll implement the mechanics carefully. The board state is a 4x4 array. For animations, I'll track tile movements in a DOM layer with absolutely positioned tiles that animate via CSS transitions on transform.

Let me think about the architecture:
- A game board container with tiles rendered as divs positioned absolutely.
- Each tile has a value, and a position (row, col).
- On each move: compute which tiles move, track their start and end positions, apply transforms, then after transition, update the DOM with merged tiles.

Approach: Maintain a DOM tile per actual tile. Use a "tile layer". For each tile that moves, we set transform to its target position. For merges, animate two tiles to same target then replace with a merged tile.

Let me implement a clean version.

I'll create tiles as DOM elements with data attributes. Each board cell can hold at most one tile. I'll keep a 2D grid array `grid[r][c]` holding either null or a tile object that has a DOM element.

For a move in a given direction:
1. Process rows/columns in the order of movement.
2. For each tile, compute new position, handling merges.

Simplest robust approach with animation: 
- On move, clear any existing "replaced" visual states.
- Create a list of slide animations: each existing tile gets a target position (either its final cell or a merge-partner cell).
- Apply CSS transforms to animate. 
- For merges, spawn a new tile at the target cell at the end.

Let me do it with a function `move(direction)`:

Let me define positions as row,col. 

Process direction: e.g., for "right", we process each row from right to left. For each cell, if tile, find its target.

I'll compute the target grid (a 2D array of tile objects that are the "final" state) plus movement info.

Let me structure:

```
function processMove(dir) {
  // returns { moves: [{tile, fromR, fromC, toR, toC}], merges: [{atR, atC, value}] } 
  // and a new grid array
}
```

Actually let me simulate. I'll create a helper that, given the current 2D grid of tiles, and a direction, returns:
- grid: new 2D array where each cell holds the tile object that resides there in final state (with merges producing new tile objects... but tiles are DOM elements).

Hmm, for animation I need to distinguish:
- Tiles that just slide to a new cell (their DOM node moves).
- Tiles that merge: two tiles slide to the same cell. After animation, we remove one (or both) and spawn a merged tile showing doubled value.

Let me implement concretely.

Grid representation: `grid = Array(4) each Array(4) of Tile|null`.

Tile object: `{ dom, value }`. DOM is the div element.

For animation, each time a move happens, I iterate the grid (in processing order) and for each tile compute target.

Simplest: I'll not permanently re-map grid DOM; instead each move I:
1. Compute, for the current grid of values, the resulting row/col for each tile and whether it merges.
2. Animate all tiles.
3. After animation, rebuild grid with proper tiles and values.

Let me write move logic that returns animation info:

```
function slideVector for dir
```

For "up": process columns, rows from top (0 to 3).
For "down": process columns, rows from bottom (3 to 0).
For "left": process rows, cols from left.
For "right": process rows, cols from right.

For each line, I slide the tiles together.

Let me write a line-compression that returns, for a list of tiles in movement order, the new arrangement with merge info. Actually processing line-by-line is clean.

For a given line (array of tiles or null in order from the "moving toward" end), I compress: 

```
function compressLine(line) {
  // line is tiles in order from origin (target end first? or last?)
}
```

Let me define: lines are arrays in the order they should be compacted, i.e., index 0 is closest to the moving destination.

For moving right, row processed so that we build result from right side: result = row reversed processing.

Let me just write a generic function that takes the line tiles in the direction from destination outward, meaning line[0] is the one that ends up at the destination-most cell.

Compression algorithm:
```
result = []
i=0
while i<len:
  if line[i] null: i++; continue
  tile = line[i]
  if i+1 < len and line[i+1] and line[i+1].value == tile.value:
     # merge
     result.push({merge:true, tileToKeep: line[i+1]... }) 
```

Hmm using which tile to keep for animation... Both tiles slide to the merge cell. The one that survives (the new merged tile) — but for animation continuity, keeping the tile that's closer to destination as the base and merging the other into it is cleaner.

Let me have each line element be a tile (DOM object). I'll produce:
- `targets`: array of {tile, newIndex} for each surviving tile (the tile that ends at newIndex)
- `merges`: array of {tileThatMovesInto, baseTile} pairs. Actually both move to same cell.

Let me simplify by, for each pair, marking one tile as "survivor" and the other as "merging". During animation:
- survivor tile: transform to target cell, and we update its value? No — its DOM value should animate to the doubled. We can just change the number text; but to animate value we could use a growing effect. Simpler: make surviving tile show new value after merge with a pop animation.
- merging tile: transform to the same target cell, then on completion remove it.
- survivor tile: place at target, set value to doubled, pop animation.

Actually the classic: both tiles move to destination. The "merging" (outer) tile merges into the "base" tile which is already at destination? But if base was at intermediate...

Let me just do: survivor tile's DOM element is reused and ends at target cell with doubled value. Merging tile's DOM element moves to target then gets removed.

Now computing positions: I need to track which tile goes where and what merges. Let me output a plan per tile: `{tile, toRow, toCol, merge:boolean, baseTile}`.

Then:
1. For each tile in plan, set transform based on (toRow,toCol), with transition.
2. On transitionend (or setTimeout), for merges: remove merging tiles, update survivor DOM value + add pop class.
3. Rebuild grid from resulting values.
4. Spawn a new tile (value 2 or 4, mostly 2) in a random empty cell with pop-in.
5. Check win/lose.

Let me code the move planning more concretely.

I'll represent current grid positions of tiles in a 4x4 array `board` where board[r][c] is a Tile or null. Tile has `.dom` and `.value`.

Direction vectors:
- up: dr=-1, dc=0
- down: dr=1, dc=0
- left: dr=0, dc=-1
- right: dr=0, dc=1

For each line, I extract tiles in order from destination end. For "up", destination is top (row 0), so we read column c from row 0 to 3. For "right", destination is right (col 3), read from col 3 to 0.

Let me build `getLine(dir)` returning list of tiles and mapping to (r,c). Actually I'll process with indices.

Let me write:

```
function move(dir) {
  const plan = []; // {tile, fromR,fromC, toR,toC, merge, base}
  const dr = ..., dc = ...;
  const newBoard = create empty 4x4;
  let gained = 0;

  // iterate lines
  // For each of 4 lines perpendicular to move dir, process from destination outward.

  // Number of lines: if dir horizontal (dc!==0), lines are rows 0..3; else lines are cols 0..3.
  // Within a line, iterate cells from destination end.

  const lineCount = 4;
  for (let li=0; li<lineCount; li++) {
    const tilesInLine = [];
    // fill in order from destination outward
    for (let i=0;i<4;i++){
       // compute (r,c): 
       let r,c;
       if (dr!==0) { r = dr>0 ? 3-i : i; c = li; }
       else { c = dc>0 ? 3-i : i; r = li; }
       tilesInLine.push({tile: board[r][c], r, c});
    }
    // compress tilesInLine (skip nulls)
    let outPos = 0; // index position within line in destination-outward order (i)
    for (let i=0;i<4;i++){
      const cell = tilesInLine[i];
      if (!cell.tile) continue;
      const t = cell.tile;
      if (outPos < i) {
         // moves to position outPos
         dest = positionFor(outPos)
         plan.push({tile:t, from:t.pos..., to:dest});
      } 
      // check merge: next non-null with same value
      ...
    }
  }
}
```

This is getting complex. Let me restructure with a cleaner line compression that returns result positions for each tile.

I'll write `compress(segments)` where segments is an array (length up to 4) of tile objects (or null), ordered from destination outward. Returns:
- `moves`: array of {tile, finalIndex} for tiles that move (survivors and/or merging). Also mark merges.
- The value sequence.

Let me implement:

```
function compressLine(seg) {
  // seg[i] is tile or null; index 0 closest to destination
  const moves = [];        // {tile, fromIndex, toIndex}
  const merges = [];       // {tile, into:tile, toIndex}
  const result = [];       // resulting tiles at index (the survivor tile object)
  let write = 0;
  let i = 0;
  const n = seg.length;
  while (i < n) {
    if (seg[i] === null) { i++; continue; }
    const tile = seg[i];
    if (i+1 < n && seg[i+1] !== null && seg[i+1].value === tile.value) {
      // merge tile at i+1 into tile at i
      result[write] = tile;               // survivor is tile at i (closer to destination)... 
      // hmm surviving tile is seg[i] (the one closer to destination since index smaller). Merging tile is seg[i+1].
      moves.push({tile: seg[i],   from:i, to:write});   // survivor moves to write
      merges.push({tile: seg[i+1], into: seg[i], to:write}); // merging tile moves to write
      i += 2;
    } else {
      result[write] = tile;
      moves.push({tile, from:i, to:write});
      i += 1;
    }
    write++;
  }
  return {moves, merges, result};
}
```

Wait: survivor = seg[i] means survivor is closer to destination (smaller index). The merging tile seg[i+1] moves to the same write position and its DOM removed. The survivor tile stays as the DOM for the merged value. Good — so survivor keeps its DOM, we update value to doubled, and merging tile's DOM animates in and is removed. 

But note the survivor already has the "higher index"? No. Let me reconsider which tile to keep as DOM. Keeping seg[i] (destination-closer) makes transitions look natural since seg[i+1] slides into seg[i].

Actually wait, both should move to the write position. The survivor (seg[i]) originally at index i, moves backward to write (write <= i). The merging tile seg[i+1] at index i+1 moves to write as well. Final value on survivor = tile.value * 2.

Now map index within line to (row,col). The line positions in destination-outward order: 
- For right: index 0 -> col 3, index1 -> col2, ... so col = 3 - index.
- For left: index 0 -> col 0, so col = index.
- For up: index 0 -> row 0, row = index.
- For down: index 0 -> row 3, row = 3-index.

I'll compute base row/col index function.

Let me define function indexToRC(li, index, dir): 
- if dr!==0 (up/down): c = li; r = dr<0 (up) ? index : 3-index.
- else: r = li; c = dc<0 (left) ? index : 3-index.

Great.

So overall move(dir):
```
plan = []            // for animating: {tile, toR, toC, mode:'move'|'merge', ...}
gained = 0
newBoard = empty grid (tile references placed)
for li in 0..3:
   seg = build line (tile or null) in dest-outward; also keep original r,c per index maybe
   res = compressLine(seg)
   for m in res.moves:
      (toR,toC) = indexToRC(li, m.to)
      if (m.to !== m.from) plan.push({tile:m.tile, toR,toC, mode:'move'})
      place m.tile in newBoard[toR][toC] = m.tile
   for mg in res.merges:
      (toR,toC)=indexToRC(li, mg.to)
      plan.push({tile:mg.tile, toR,toC, mode:'merge', base:mg.into})
      // survivor already placed at that cell; value doubled
      gained += mg.into.value * 2
      mg.into.value *= 2   // update value
      // but careful: merging tile shouldn't overwrite newBoard; survivor is the one in newBoard
```

Wait, order: in compressLine, for a merge the survivor tile (into) is placed at result[write] and moves there. Its value then doubled. Good. But when we processed a previous non-merged tile earlier it's placed too.

Edge: what if tile doesn't move (m.to===m.from) and is part of merge as survivor (into)? Then survivor stays, value doubles — animation: just pop. The merging tile still animates into it. That's handled: survivor move not pushed (stays), merging tile pushed as merge.

Now check if any actual movement or merge happened. If plan is empty (no moves, no merges) => no move; don't spawn tile. Else proceed.

Now, "no moves" means the board values can't change. We detect: if plan (including position changes) includes at least one move or merge. If plan empty and there are merges? A merge always involves the merging tile moving at least to write index, and write <= from, and merging from i+1 to write <= i < i+1 so it moves (write <= i < i+1), so merging tile always moves. Good. And survivor may move too. So plan non-empty iff any change. Actually survivor moving requires to!=from. Merging tile requires to (write) < from(i+1)? write could equal i, from=i+1, so write < from yes it moves. So any merge adds a merge plan entry. So plan empty iff board unchanged. 

But careful: if plan empty, we also should not even consider spawning. Fine.

Now positions: I track tile's current position for initial transform? Tiles are already at their board position from before. When animating, I just set transform to (toR,toC). Since CSS transition interpolates from current (the tile's own transform which equals its current cell), it slides. Good. So I don't need from positions in DOM.

After spawning new tile, its initial transform is off (e.g., pop-in scale). I'll add a class for pop. For moving tiles, I set transition duration ~120ms linear, set transform.

Animation flow:
1. For each plan entry: set tile.dom transform to translate(toR,toC). With transition on transform (default).
2. Also for merges: after transition, remove merging tile.dom from DOM, and on survivor add pop class (and maybe update font). Since we already updated survivor.value, need to update its DOM text.
   Actually update survivor DOM text after animation to show doubled value. Let me set survivor value doubling and DOM text right when doing the merge (during animation start we can set text but it'd reveal before slide). Better: set survivor DOM text to doubled value after the slide completes.
3. On completion (setTimeout ~ transition duration + buffer), rebuild board grid from newBoard, update DOM, spawn new tile, check win/lose.

But we set survivor.value during planning (before DOM update). Let me keep a map of tiles that merged to set their text later. Simpler: after animation completes, iterate newBoard and sync all tile DOMs with their value (set text + remove classes). Then spawn.

Hold on: the merging tile DOM still in newBoard? No, merging tiles should be removed from DOM. In newBoard we placed only survivor (m.tile for moves). Merging tile not placed. Good. So after animation, remove all plan merge tiles' DOM, then sync newBoard tiles DOM values, then spawn new tile into newBoard, assign to board = newBoard.

Let me also handle the "merge tile value doubling animation" — sync will set text to doubled value; we add a pop class for merged tiles.

For sync: iterate newBoard, for each tile set dom textContent = tile.value, add class per value (css handles colors), remove 'new', 'merged' then add appropriate.

For pops: merged tiles during planning: record set of survivor tiles. After animation add 'merged' class to them with CSS animation pop. New spawned tile gets 'new' class pop-in.

Let me now also implement win/lose:
- Win: when a tile value reaches 2048 (or the target set). Show overlay. Provide "Keep playing" and "New game".
- Lose: when no moves possible and board full. Function `hasMoves()`: check any empty cell OR any adjacent equal values.

Score: sum of merged values.

Controls: arrow keys. Also support WASD maybe. Also add swipe for touch? The requirement says arrow-key. I'll add keyboard (arrow keys + WASD). Add on-screen new game button. Maybe buttons for testing? I'll add small on-screen direction buttons too (nice for demo). Also prevent default scrolling on arrows.

Preventing arrow key page scroll: e.preventDefault on keydown when handling arrows.

Let me write the HTML/CSS.

Design: nice flat design, rounded board, colored tiles. Responsive. Score display top.

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

Board cell size ~ 106px with gap 15px, board padding 15. Total ~ 4*106+3*15+2*15 = 424+45+30=499. Let me make board 500x500.

I'll make it responsive using CSS variable cell size? Keep fixed for simplicity but add some scaling for smaller screens with media query. Keep it simpler with fixed size; it's fine.

Let me position tiles absolutely. transform: translate(col*(cell+gap), row*(cell+gap)). With padding offset.

Let me use CSS variables: `--cell: 106px; --gap: 15px; --boardpad: 15px;`.

Tile size cell, positioned within board. Tiles layer absolute inset boardpad.

Tiles: width/height cell, border-radius, font-size depends on length. Handle 3+ digit font scaling with classes.

Let me build funcitons:
- `cellPos(r,c)` returns `translate(${c*(cell+gap)}px, ${r*(cell+gap)}px)`.
- createTile(value): returns {value, dom}. dom positioned at r,c=some.
- spawn(): pick random empty cell, create tile value 2 (90%) or 4 (10%), append, set initial transform off-screen? Set transform to target with 'new' pop. Set transition none initially then set transform then add event... Actually set position with pop class that animates scale from 0.

For pop-in, use CSS animation on 'new' class: from scale 0 to 1, no transition on transform (animation handles). Set transform via inline.

Let me now write.

Font-size classes: based on number of characters or value. I'll do: if value >= 1024 (4 digits) smaller. Use class 'xd' with char count.

Let me write CSS:
```
.tile { position:absolute; width/height var(--cell); display:flex; align-items:center; justify-content:center; font-weight:bold; border-radius:6px; background:#eee4da; color:#776e65; transition: transform 120ms ease-in-out; z-index:2; }
.tile.new { animation: appear 150ms ease 0ms; }
.tile.merged { animation: pop 200ms ease 0ms; }
```

Overlay: absolutely positioned over board with semi transparent bg, shows "You win!" or "Game over!", buttons.

Layout page: header with title "2048", score box, best box, new game button, instructions, board container.

Let me include best score stored in memory (localStorage optional but no network; localStorage is fine but sandbox may block; I'll just keep in-memory best). I'll keep it simple with in-memory best.

Now write the JS fully.

Let me be careful with transitionend vs setTimeout. I'll use setTimeout with duration +30ms.

Let me set transition duration 120ms for moves; pop 200ms; new appear 150ms. For finishing, setTimeout(120+30). But merged/pop animations continue; fine.

Actually when a merge happens, the survivor's value text updates after slide then pop. The merging tile slides in — I need its transition same 120ms. After timeout remove merging tile DOM and update survivor. Let me schedule.

Let me structure move:

```
function move(dir){
  if (over) return;
  const plan=[], merges=[], gainedData=[];
  const newBoard = empty 4x4;
  let changed=false;
  ... fill plan/merges, newBoard, gained
  if (!changed) return; // no valid move
  // apply animations
  for entry in plan: tile.dom.style.transform = cellPos(entry.toR, entry.toC);
  // disable further input during animation? Let's allow but set flag.
  moving=true;
  setTimeout(()=>{
     // remove merge tiles' doms
     for mg in merges: mg.tile.dom.remove();
     // sync survivor values + add merged class
     for m in merges: m.base.dom.textContent = m.base.value; m.base.dom.classList.add('merged');
       // also if base moved, its text update
     // Actually sync all board tiles text (values unchanged except bases)
     for cells in newBoard if tile set text + value class + remove stale classes
     // spawn new tile
     spawnNow(newBoard);
     board = newBoard;
     console.log updates; update score; check win/lose
     moving=false;
  }, duration);
}
```

But careful: updates to survivor text should be to the base tile which may also be in plan moved. base.dom textContent updated. Good.

For 'merged' class, I should remove 'new' and re-add without flicker. Since adding 'merged' triggers pop animation only if not present. Add it. Fine.

For all tiles textContent = value (should already be correct except bases). Fine.

Let me write indexToRC and line building.

For building line segments from board (current positions), I use the current board array which holds tiles at their positions.

Line building:
```
function buildLineSeg(dir, li){
  const seg=[];
  for (i=0;i<4;i++){
    let r,c;
    if (dir[0]!==0){ c=li; r = dir[0]<0 ? i : 3-i; }
    else { r=li; c = dir[1]<0 ? i : 3-i; }
    seg.push(board[r][c]);
  }
  return seg; // with original positions derivable from i again
}
```

compressLine returns result tiles (survivors) and merges/moves with indices in seg ordering. indexToRC(li,index,dir) computes target.

Let me code indexToRC:
```
function idxToRC(li, idx, dr, dc){
  if (dr!==0) return {r: dr<0? idx : 3-idx, c: li};
  return {r: li, c: dc<0? idx : 3-idx};
}
```

Now gained: set of merged bases. gained += base.value * 2 (value at time of merge, before doubling). In compressLine I double base.value. Let me compute merged value = tile.value*2 before doubling survivor? survivor is seg[i] (into) value equals merging value. So merged = seg[i].value*2. Then survivor.value = seg[i].value*2. Escape max.

Let me set: gained += base.value*2; base.value *=2. But if base.value*2 could overflow 2^31; ignore.

Now let me handle the survivor's DOM text update timing. We set base.value in planning but DOM text updated after animation. Good.

Now detect win: if base.value === 2048 after a merge. Use target = 2048.

Lose check: after move completes and board full and no adjacent equal. 

hasEmptyCells(board): any null.
hasAdjacent: check.

If no win recorded yet and merged value >= target, set win overlay once (with continue button to dismiss, keep playing). Record `won=false` initially.

Let me also allow Continue button to hide overlay and set a flag `continueAfterWin` so we don't reshow.

Alright, also best score update.

Let me write the full file now.

I need to be careful about the 'new' pop animation interfering with transform initial. When creating tile I'll set its transform and add 'new' class CSS animation that scales from 0.2 to 1 — but animation overrides transform during animation; base transform is final position so fine.

Let me define spawnNew(board): pick random empty cell, create tile, position transform cellPos, append, add 'new'. Return, and also check after? do not check win for spawn.

Let me set tile font sizes in CSS by char count: I'll add data-length or class. Simpler add classes .l1..l4 by length of value string. Actually use value thresholds. Let me just compute based on value: fontSize = value<100 ? 55 : value<1000 ? 45 : value<10000 ? 34 : 28. Set inline style font-size. Simpler inline.

Let me now also make sure arrow keys don't scroll page. Add keydown handler with e.preventDefault if key in handled set.

Let me write everything.

Also initial game: two random tiles spawned.

Let me write CSS full design.

Let me produce the file.

Let me write out the full index.html.

Now for the "moving" guard: set `animating` boolean; disable inputs while animating to prevent queue weirdness. Inputs include arrow + buttons + new game (new game should reset even during animation? fine to reset).

Let me write.

I'll write the JS carefully.

Let me define durations constants: MOVE_MS=120, POP_MS=200.

board as module-level `grid`.

reset():
```
grid = empty;
for cells none dom
tileLayer.innerHTML=''; // clear all tiles
score=0; best keep? best= max(best,score)? best persists across games. update.
won=false; over=false; hide overlays; updateScore; updateBest.
spawn(); spawn();
render nothing (tiles already in dom from spawn).
```

spawn() picks random among empty cells of grid, creates tile.

Let me ensure tile creation function.

```
function makeTile(value, r, c, cls){
  const div = document.createElement('div');
  div.className='tile '+(cls||'');
  div.textContent=value;
  styleFont(div, value);
  div.style.transform = cellPos(r,c);
  div.style.zIndex = (cls==='new'?3:2);
  tileLayer.appendChild(div);
  return {value, dom:div};
}
```

spawn:
```
function spawn(){
  const empties=[];
  for r,c if !grid[r][c] empties.push([r,c]);
  if(!empties.length) return;
  const [r,c]=empties[Math.random()*empties.length|0];
  const v = Math.random()<0.9?2:4;
  grid[r][c]=makeTile(v,r,c,'new');
}
```

styleFont(div,value): set font-size based on value.

Now move planning reuses grid (current). Build newBoard as empty. Place survivors.

Let me write compressLine to also report merges so I can gather gained and base/value.

compressLine(seg) returns {moves:Array<{tile,to}>, merges:Array<{base,merging,to}>, result:Array<tile|null>}.

Let me code:

```
function compressLine(seg){
  const n=4;
  const moves=[], merges=[], result=new Array(n).fill(null);
  let write=0,i=0;
  while(i<n){
    if(seg[i]===null){i++;continue;}
    const t=seg[i];
    if(i+1<n && seg[i+1]!==null && seg[i+1].value===t.value){
      // merge: base=t (closer to dest), merging=seg[i+1]
      result[write]=t;
      if(write!==i) moves.push({tile:t,to:write});
      merges.push({base:t, merging:seg[i+1], to:write});
      i+=2;
    } else {
      result[write]=t;
      if(write!==i) moves.push({tile:t,to:write});
      i+=1;
    }
    write++;
  }
  return {moves,merges,result};
}
```

Wait, I set result[write]=t for merge using base (closer to dest). base.value doubled later. But moves for base only pushed if write!==i; if merge and base at write==i (already at merged spot), base doesn't move. Then base transform unchanged, spike pop shows doubled value. Fine.

But hold on: For merge, merges.push includes to:write. Both base and merging end at write. Merging tile animates to write. Base stays/moves to write. Good.

Now move():
```
function move(dr,dc){
  if(animating||over) return;
  // plan
  const planMoves=[], planMerges=[];
  const nb = emptyGrid();
  let gained=0, targetHit=false;
  outer:
  for(let li=0; li<4; li++){
    // build seg in destination-outward order
    const seg=[];
    for(let k=0;k<4;k++){
      let r,c;
      if(dr!==0){ c=li; r=dr<0?k:3-k; }
      else { r=li; c=dc<0?k:3-k; }
      seg.push(grid[r][c]);
    }
    const res=compressLine(seg);
    for(const m of res.moves){
      const p=idxToRC(li,m.to,dr,dc);
      planMoves.push({tile:m.tile, toR:p.r, toC:p.c});
      nb[p.r][p.c]=m.tile;
    }
    for(const mg of res.merges){
      const p=idxToRC(li,mg.to,dr,dc);
      nb[p.r][p.c]=mg.base;
      planMerges.push({base:mg.base, merging:mg.merging, toR:p.r, toC:p.c});
      const mergedValue=mg.base.value*2;
      gained+=mergedValue;
      mg.base.value=mergedValue;
      if(mergedValue===WIN_TARGET && !wonShown) targetHit=true;
    }
  }
  if(planMoves.length===0 && planMerges.length===0) return; // no change
  // animate
  animating=true;
  for(const m of planMoves){
    m.tile.dom.style.transform = cellPos(m.toR,m.toC);
  }
  for(const mg of planMerges){
    mg.merging.dom.style.transform = cellPos(mg.toR,mg.toC);
    // remove new class from merging/base? base may be 'new'? base can't be new since new spawns added after. fine.
  }
  score+=gained;
  updateScoreUI();
  setTimeout(()=>{
    // remove merging doms
    for(const mg of planMerges){ mg.merging.dom.remove(); }
    // update survivor dom text + merged class
    for(const mg of planMerges){
      mg.base.dom.textContent=mg.base.value;
      mg.base.dom.classList.remove('new');
      void mg.base.dom.offsetWidth; // restart animation? 
      mg.base.dom.classList.add('merged');
      styleFont(mg.base.dom, mg.base.value);
    }
    // recompute grid = nb
    grid=nb;
    // update any tile text (should be consistent) & best
    spawn();
    updateBest();
    checkStates();
    animating=false;
  }, MOVE_MS+40);
}
```

Wait: there's an issue — when a merged base tile in `nb` has value doubled but its DOM text updated after animation. Good. Non-merged tiles unchanged text—fine.

But also there's subtle bug: `nb` tiles are the same tile objects as current grid (survivors just repositioned). grid=nb reassigns references. Since survivors are original objects, fine. Merging tiles removed. New spawn adds new objects.

Now `wonShown` vs won. Let me define `wonReached` boolean; once true, don't retrigger win overlay. Actually show win overlay once; after user clicks keep playing, set wonDismissed=true. I'll use flag `winShown`.

Let me restructure: `winWindowShown` boolean to show overlay once per game (after continue, hide). Let me just show overlay when targetHit and not already shown this game. `targetHit` triggers showWin overlay. Keep playing hides it. If player continues and merges beyond again, we don't reshown because winShown stays true for the game (reset on new game).

Simpler: on targetHit, show win overlay (set winShown=true). Keep playing hides overlay. New game resets winShown=false.

checkStates(): 
```
if(!winShown && boardHas(target)) { winShown=true; showOverlay win; }
else if(!hasMoves()) { over=true; showOverlay lose; }
```
But note win shown immediately when merging to 2048, which is during move animation; better to show after animation to avoid popping overlay mid-animation. I call checkStates inside setTimeout after spawn, so after animation. Good. targetHit flag → after animation call checkStates which checks boardHas(WIN_TARGET). Let me drop targetHit and just check in checkStates. Cleaner.

But if player kept playing and merges another 2048 later, winShown already true, won't reshown. Good.

hasMoves(): 
```
for r,c: if grid[r][c]===null return true;
for r,c: neighbors right/down; if equal values return true;
return false;
```

boardHas(val): any tile value>=val? just ==WIN_TARGET.

checkStates after move. Also after spawn. Show overlays.

Now the CSS for overlays: absolutely positioned covering board, with backdrop. Buttons.

Let me also add small on-screen arrow buttons for accessibility (nice). They call move with vectors.

Let me finalize and write file.

cellPos(r,c): `translate(${c*(CELL+GAP)}px, ${r*(CELL+GAP)}px)`.

CELL=106, GAP=15. Board inner size = 4*106+3*15 = 424+45=469. Board padding 15 each side => 469+30=499. Set board width/height 499px, tilesLayer inset 15px.

Let me set variables and use calc. I'll hardcode numbers.

tileLayer inset:15px; top/left 15px.

Let me write CSS:

- container centered.
- header.
- board relative, background gradient (#bbada0), border-radius 10px.
- grid background cells: I'll create background using a separate layer with 16 background cells positioned. Or use board background and drop-shadow tiles. Better to show empty cells: create 16 divs .cell in a .grid layer, positioned same math, background rgba(238,228,218,0.35). Position absolute inset same as tiles layer.

Let me create grid layer div with 16 cells. Positions: left = pad + c*(cell+gap), top = pad + r*(cell+gap).

I'll generate via JS on load.

Score box: "SCORE" label + number, "BEST" box.

New Game button.

Footer instructions.

Let me handle overflow color: tiles with value>=8 white text.

Let me write styleFont:
```
function styleFont(div,v){
  let fs=56;
  if(v>=100) fs=48;
  if(v>=1000) fs=34;
  if(v>=10000) fs=26;
  div.style.fontSize=fs+'px';
}
```

Tile background/color via value classes. I'll add class `val-${v}` and CSS for each. But arbitrary large values (after continue, 4096 etc) — wildcard. Let me handle via JS setting style background/color. Define colors map in JS:
```
const COLORS = {
 2:{bg:'#eee4da',fg:'#776e65'}, ... up to 2048
};
function applyTileStyle(div,v){
  const c = COLORS[v]||{bg:'#3c3a32', fg:'#f9f6f2'};
  div.style.background=c.bg; div.style.color=c.fg;
  styleFont(div,v);
}
```

Good, no huge CSS. Use inline styles.

Now let me finalize. Also keydown:
```
document.addEventListener('keydown',e=>{
  const keys={ArrowUp:[0,-1... ]} wait dr,dc
});
```
Map:
- ArrowUp: dr=-1, dc=0
- ArrowDown: dr=1
- ArrowLeft: dc=-1
- ArrowRight: dc=1
- W/A/S/D same.
```
if(handled){ e.preventDefault(); move(dr,dc); }
```

Let me write file now.

One more: initially spawn two tiles. reset() does that.

Let me also ensure that while animating new game works: reset clears tileLayer (innerHTML=''), grid empty. Fine even if animating. Set animating=false on reset.

Now boardHas for win: check grid values.

Let me write checkStates with overlays: winOverlay and loseOverlay divs.

showWin: overlay.classList.add('show'), set text.
Keep playing button hides. newgame buttons call reset() and hide overlays (reset hides).

Let me code overlays with a message and buttons.

Now let me write everything.

Let me also consider that transition on transform uses 'transform 120ms'. The 'merged' pop uses animation, 'new' appear uses animation. Overlap fine.

Let me define animations in CSS:
```
@keyframes appear { from{transform: scale(0) ...} } 
```
But transform animation on .tile uses inline transform for position; CSS @keyframes on transform would override during animation, causing tile to lose its translate position (jump to origin) during animation. Bad!

The keyframes `from{ transform: scale(0) }` would override the inline translate. That would place tile at 0,0 while animating. Incorrect. I need to keep position.

Solution: wrap tile in a positioned container? Or set transform via CSS custom property. Better approach: set position using `top`/`left` instead of transform, and use transform only for animation (scale). Then keyframes from scale(0) works and logo position fixed via top/left.

Let me position tiles using left/top inline, and use transform only for pop scale animations. And for sliding, animate left/top? Transition on left/top is less smooth but ok; better use transform. Hmm.

Alternative: Use two elements - outer positioned div (moves via transform) and inner div (pop animation scale). That's cleaner but more DOM.

Simplest robust: position with transform but animation keyframes that include translate as part. But translate varies per cell. I'd need keyframes per position — messy.

Let me use left/top for position and transform for scale animations only.

Sliding: animate left/top with transition `left 120ms, top 120ms`. left/top transitions are fine and smooth enough with GPU? left/top cause layout though. For a small board it's fine.

Actually, to get smooth GPU compositing, transform is better. But left/top on 4x4 is negligible. I'll use left/top for positioning and transitions on left/top, and transform only for pop/new scale.

Let me set tile.style.left and top in px.

cellOffset -> left = PD + c*(CELL+GAP); top = PD + r*(CELL+GAP).

Pop animation keyframes on transform scale from 0.3 to 1. Good, no position conflict.

For slide transition use `transition: left .12s, top .12s, transform .2s`.

Let me implement moves by setting left/top. In move(), set m.tile.dom.style.left/top. Merging tile same. Rename cellPos to cellLeftTop returns [left,top].

New tile appear: set left/top final, add 'new' class animation from scale(0.2).

Merged: add 'merged' class animation from scale(1.2) shrink to 1? typical pop: from 0 to 1 with overshoot. Use scale from 0.5 to 1.15 to 1? Keep simple: from scale(0.5) to 1.

Let me define:
```
@keyframes appear{ from{ transform:scale(0.2);} to{ transform:scale(1);} }
@keyframes pop{ 0%{transform:scale(0.5);} 60%{transform:scale(1.2);} 100%{transform:scale(1);} }
.tile.new{ animation: appear .15s ease; }
.tile.merged{ animation: pop .18s ease; }
```
transform scale only; position via left/top. 

Now the survivor tile that is merged: we added 'merged' after slide. But it also might have moved (left/top changed), transitions smooth. Good.

One concern: adding 'merged' class and re-triggering animation requires the element not already have that class. When could survivor already have 'merged'? It wouldn't normally; it'd have 'new' from spawn earlier. After pop finishes, animation class stays but animation done. If later merged again, class already 'merged' → adding again won't restart. Need to restart. Use `void el.offsetWidth` then re-add? The trick: remove class, force reflow, add class. Let me do:
```
el.classList.remove('merged','new');
void el.offsetWidth;
el.classList.add('merged');
```
That restarts animation. Good. Similarly new tile only created fresh.

Now let me also update normal tile text? non-merged just slide; text same. fine.

Let me finalize gained display and best.

Write file now.

Let me also disable context menu maybe not needed.

Let me produce final code.

I'll write it carefully and then verify by maybe running node to check syntax? It's HTML/JS; I can't run browser. I'll just ensure code correctness.

Let me write.

Also add focus so keydown works on page — keydown on document works regardless.

Let me include the board grid bg cells.

Now writing.

For button clicks on-screen arrows:
```
btn.addEventListener('click',()=>moveWith(...));
```

Let me create arrow buttons array with vectors.

Final check on compressLine seg ordering for moves: For right (dc=-1? no). Let me define dir down: dr=1 → left/down? Wait for up dr=-1 dest = row0 so r = k (0..3) gives rows top to bottom in seg index increasing. idxToRC for dr<0 returns r=idx. Good mapping consistent: seg index k corresponds to r = (dr<0? k:3-k) when dr!=0, and for building seg I used same formula. Good.

For down dr=1: dest row3, building seg r = 3-k (k0→3 at row3... wait 3-k: k=0→3 top? No: dr>0 building used r = dr<0? k : 3-k → for down r=3-k. k=0→3, k=1→2,k=2→1,k=3→0. So seg[0] is bottom row (row3), seg[3] is top row(row0). Destination end = bottom (index0). compressLine moves tiles toward index0 (toward bottom). idxToRC dr>0 returns r=3-idx. matches. 

idxToRC: dr>0 → r=3-idx. Good matches building.

For left dc<0: dest col0, building r=li, c = dc<0?k:3-k → c=k. k0→col0. idxToRC dc<0 → c=idx. Good.

For right dc>0: c=3-k building; idxToRC dc>0 → c=3-idx. Good.

All consistent.

Let me write file.

The JS parses fine. Let me also quickly sanity-test the core game logic (compressLine + move) with a headless simulation to ensure merges work.

Wait, the output is wrong! `[2,2,2,2]` gave `[2,2]` but should be `[4,4]` (only the result array of tiles, not doubled values). The result array stores the tile objects (base), whose value hasn't been doubled yet (doubling happens in move()). So the result filter shows base values = 2,2 which is correct — values are doubled in the move() phase. So it's fine: base.value*2 happens in move. Good.

`[2,2,4,null]` gave `[2,4]` base values → after doubling base becomes 4. Correct → final [4,4].

`[2,null,2,4]` → merges 2,2 into base 2→4, then moves 4 → [4,4]. Correct.

`[2,4,2,null]` no merge → [2,4,2]. Correct.

`[null,4,4,null]` → merge → base 4 → doubled 8, [8]. Correct.

Great, the algorithm is correct. The values shown are the "survivor" tile values before doubling, and move() doubles them. 

The file is complete and verified. index.html exists in /workspace.