2048 · deepseek-v4-flash

The user wants me to build a 2048 game in a single HTML file. Let me create a complete implementation with all the required features.

Let me plan the implementation:

1. 4x4 grid with HTML/CSS
2. JavaScript game logic:
   - Board state management
   - Tile movement (slide + merge)
   - Tile spawning (2 with 90%, 4 with 10%)
   - Score tracking
   - Win/loss detection
   - Animation support
   - Keyboard input with prevention of rapid input
   - New Game button

Let me think about the animation approach. I'll use CSS transitions for smooth movement. The key challenge is animating tiles without allowing rapid input to corrupt state.

For animation, I'll:
1. Track tile positions and values
2. Use a flag `isAnimating` to block input during animation
3. Use CSS transitions with `transform` for sliding

Let me design the tile representation:
- Each tile has: id, value, row, col, previousRow, previousCol (for animation)
- The board is a 4x4 array of tile references

Let me write the full implementation:

Actually, let me think more carefully about animation. A common approach for 2048 in the browser is:

1. Keep a grid array of tile objects (or null)
2. When moving, calculate new positions and merges
3. Apply CSS transitions on tile elements

Let me think about the data model more carefully:

Grid: 4x4 array where each cell is either null or a tile {id, value}

For movement:
- For each row/column in the movement direction:
  - Compact (slide tiles together)
  - Merge adjacent equal tiles
  - Compact again

For animation, I need to:
1. Before updating the grid, capture each tile's current position
2. Calculate where each tile should move to
3. Update tile elements with transform transitions
4. After animation completes, update the grid and spawn new tiles

Let me implement a simpler but effective animation approach:

I'll use a flag `moving` that blocks input during animation. Tiles will use CSS transitions on their `transform` property. When a move happens:

1. Calculate the new positions for all tiles
2. Move tile elements with CSS transforms
3. Wait for transition to complete (~200ms)
4. Then update the DOM to match the new grid state

Let me code this up.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2048</title>
<style>
/* styles */
</style>
</head>
<body>
<!-- HTML structure -->
<script>
// Game logic
</script>
</body>
</html>
```

Let me write the full implementation now.

Here's my plan for the JavaScript:

```javascript
class Game {
  constructor() {
    this.grid = Array(4).fill(null).map(() => Array(4).fill(null));
    this.score = 0;
    this.gameOver = false;
    this.won = false;
    this.continuing = false;
    this.moving = false;
    this.tileId = 0;
    this.start();
  }

  start() {
    this.grid = Array(4).fill(null).map(() => Array(4).fill(null));
    this.score = 0;
    this.gameOver = false;
    this.won = false;
    this.continuing = false;
    this.tileId = 0;
    this.spawnTile();
    this.spawnTile();
    this.render();
  }

  spawnTile() {
    const emptyCells = [];
    for (let r = 0; r < 4; r++) {
      for (let c = 0; c < 4; c++) {
        if (!this.grid[r][c]) emptyCells.push([r, c]);
      }
    }
    if (emptyCells.length === 0) return null;
    const [r, c] = emptyCells[Math.floor(Math.random() * emptyCells.length)];
    const value = Math.random() < 0.9 ? 2 : 4;
    const tile = { id: this.tileId++, value, row: r, col: c };
    this.grid[r][c] = tile;
    return tile;
  }

  canMove() {
    // Check for empty cells
    for (let r = 0; r < 4; r++) {
      for (let c = 0; c < 4; c++) {
        if (!this.grid[r][c]) return true;
      }
    }
    // Check for adjacent equal values
    for (let r = 0; r < 4; r++) {
      for (let c = 0; c < 3; c++) {
        if (this.grid[r][c].value === this.grid[r][c+1].value) return true;
      }
    }
    for (let r = 0; r < 3; r++) {
      for (let c = 0; c < 4; c++) {
        if (this.grid[r][c].value === this.grid[r+1][c].value) return true;
      }
    }
    return false;
  }

  move(direction) {
    if (this.moving) return false;
    if (this.gameOver) return false;
    if (this.won && !this.continuing) return false;

    const oldGrid = this.grid.map(row => row.map(tile => tile ? { ...tile } : null));
    
    let moved = false;
    let scoreGain = 0;
    const mergedTiles = [];

    // Process based on direction
    // For left/up, process rows/columns from 0 to 3
    // For right/down, process from 3 to 0

    const getLine = (r, c, dir) => {
      // ... get tiles in a line
    };

    // Process one line
    const processLine = (tiles) => {
      // Filter out nulls
      let values = tiles.filter(t => t !== null);
      // Merge adjacent equal values
      for (let i = 0; i < values.length - 1; i++) {
        if (values[i].value === values[i+1].value) {
          values[i].value *= 2;
          mergedTiles.push(values[i]);
          scoreGain += values[i].value;
          values.splice(i+1, 1);
        }
      }
      // Pad with nulls
      while (values.length < 4) values.push(null);
      return values;
    };
  }
}
```

Let me write a cleaner implementation now.

Actually, let me think about how to animate properly. The key approach:

For each move:
1. Calculate where tiles should go (their target positions)
2. Calculate merges
3. Animate tiles sliding to their target positions using CSS transitions
4. After animation completes, remove merged tiles and update DOM
5. After that, spawn new tile with animation

Let me implement this step by step.

I'll track tiles by their DOM elements, and use a tile map for quick lookup.

Let me write the complete file now. I'll be thorough.

```javascript
const SIZE = 4;
let grid = []; // 2D array of tile objects or null
let score = 0;
let gameOver = false;
let won = false;
let continuing = false;
let moving = false;
let tileIdCounter = 0;
let bestScore = parseInt(localStorage.getItem('best2048') || '0');

function createTile(value, row, col) {
  return { id: tileIdCounter++, value, row, col, mergedFrom: false };
}
```

Let me think about the animation more carefully.

When moving tiles:
1. I compute the "compressed" line after merging
2. For each tile in the original line, I determine where it ends up
3. I animate by setting transform on the DOM element

Approach for each line in the movement direction:

Take line: [tileA, null, tileB, tileC]
compact: [tileA, tileB, tileC]
merge: if adjacent equal, merge into one (double value), mark as merged
compact again: slide remaining tiles back

For animation, I need to track where each tile moves FROM and TO.

Actually, let me think about an even simpler approach. Since this is a single-page app with CSS transitions, let me:

1. Position tiles absolutely within the grid container
2. Each tile has a div with position absolute, top/left based on row/col
3. On move, calculate new positions and merges
4. Set CSS transitions on transform (or top/left)
5. Update positions, wait for animation
6. Then handle merges (remove old tiles, show new merged tile)
7. Then spawn new tile

Let me structure the DOM:

```html
<div id="game-container">
  <div id="header">
    <h1>2048</h1>
    <div id="score-container">...</div>
  </div>
  <div id="grid-container">
    <!-- Background grid cells -->
    <div class="grid-cell" data-row="0" data-col="0"></div>
    ... (16 cells)
    <!-- Tiles will be added dynamically as children -->
  </div>
  <div id="message"></div>
  <button id="new-game">New Game</button>
</div>
```

Let me write this out now. I'll make it clean and well-structured.

For the tile container approach:
- The grid container has `position: relative`
- Grid cells (background) are arranged in a 4x4 grid
- Tiles are positioned absolutely using `top` and `left` based on row/col
- Each tile div has `position: absolute`, `transition: top 0.15s, left 0.15s`
- When moving, I change the top/left CSS properties and the transition handles the animation

Here's my complete implementation plan:

Grid cells are positioned using CSS Grid or absolute positioning.

Let me use a simpler approach:
- Grid container: position relative, fixed width/height
- Background cells: positioned with grid or absolute
- Tiles: positioned absolutely with top/left calculated from row/col

Let me code this up now.

For the grid, I'll use a container with a CSS grid for the background cells, and overlay tiles with absolute positioning.

Actually, let me use a simpler approach where all cells and tiles are in a container and positioned absolutely:

```
grid cell size: 100px
gap: 10px
container size: 4*100 + 3*10 = 430px
tile position: left = gap + col*(cellSize + gap), top = gap + row*(cellSize + gap)
```

Let me go with this approach.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2048</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #faf8ef;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
}
#container {
  width: 500px;
}
#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
h1 {
  font-size: 48px;
  color: #776e65;
  font-weight: bold;
}
#scores {
  display: flex;
  gap: 10px;
}
.score-box {
  background: #bbada0;
  border-radius: 3px;
  padding: 10px 20px;
  text-align: center;
  color: white;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
}
.score-box span {
  display: block;
  font-size: 22px;
  margin-top: 2px;
}
#grid-container {
  position: relative;
  width: 500px;
  height: 500px;
  background: #bbada0;
  border-radius: 6px;
  padding: 10px;
}
.grid-cell {
  position: absolute;
  width: 110px;
  height: 110px;
  background: rgba(238, 228, 218, 0.35);
  border-radius: 3px;
}
.tile {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  font-weight: bold;
  color: #776e65;
  transition: top 0.15s ease, left 0.15s ease;
  z-index: 10;
}
.tile-new {
  animation: appear 0.2s ease;
}
.tile-merged {
  animation: pop 0.2s ease;
}
@keyframes appear {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.tile-2 { background: #eee4da; }
.tile-4 { background: #ede0c8; }
.tile-8 { background: #f2b179; color: #f9f6f2; }
.tile-16 { background: #f59563; color: #f9f6f2; }
.tile-32 { background: #f67c5f; color: #f9f6f2; }
.tile-64 { background: #f65e3b; color: #f9f6f2; }
.tile-128 { background: #edcf72; color: #f9f6f2; font-size: 35px; }
.tile-256 { background: #edcc61; color: #f9f6f2; font-size: 35px; }
.tile-512 { background: #edc850; color: #f9f6f2; font-size: 35px; }
.tile-1024 { background: #edc53f; color: #f9f6f2; font-size: 30px; }
.tile-2048 { background: #edc22e; color: #f9f6f2; font-size: 30px; }
.tile-super { background: #3c3a32; color: #f9f6f2; font-size: 30px; }

#message {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(238, 228, 218, 0.73);
  z-index: 100;
  border-radius: 6px;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
#message.show {
  opacity: 1;
  pointer-events: auto;
}
#message h2 {
  font-size: 48px;
  color: #776e65;
}
#message p {
  font-size: 18px;
  color: #776e65;
}
#controls {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
button {
  background: #8f7a66;
  border: none;
  border-radius: 3px;
  padding: 12px 24px;
  color: #f9f6f2;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  text-transform: uppercase;
}
button:hover {
  background: #9f8b77;
}
</style>
</head>
<body>
<div id="container">
  <div id="header">
    <h1>2048</h1>
    <div id="scores">
      <div class="score-box">Score<span id="score">0</span></div>
      <div class="score-box">Best<span id="best">0</span></div>
    </div>
  </div>
  <div id="grid-container">
    <div id="message">
      <h2 id="msg-title"></h2>
      <p id="msg-sub"></p>
    </div>
  </div>
  <div id="controls">
    <button id="new-game-btn">New Game</button>
  </div>
</div>
<script>
// Game logic
</script>
</body>
</html>
```

Now let me write the JavaScript. I need to be very careful with the move logic.

Let me think about the move algorithm:

For a move to the LEFT:
- Process each row independently
- For each row:
  1. Extract non-null tiles in order from left to right
  2. Merge adjacent equal tiles (once per tile)
  3. Place results back from left to right, padding with nulls

For a move to the RIGHT:
- Process each row from right to left
- Or: reverse the row, apply left logic, reverse back

For UP: process each column from top to bottom
For DOWN: process each column from bottom to top

Let me write a clean implementation:

```javascript
function moveLeft(row) {
  // row is array of tile objects or null
  // Returns { newRow, score, merged } where merged indicates which tiles merged
  
  // Step 1: Compact - remove nulls
  let tiles = row.filter(t => t !== null);
  let merged = [];
  
  // Step 2: Merge adjacent equal values
  for (let i = 0; i < tiles.length - 1; i++) {
    if (tiles[i] && tiles[i+1] && tiles[i].value === tiles[i+1].value) {
      tiles[i] = { ...tiles[i], value: tiles[i].value * 2 };
      merged.push(tiles[i].id);
      tiles.splice(i+1, 1);
      // Don't increment i again for this merge
    }
  }
  
  let score = 0;
  let result = [];
  for (let t of tiles) {
    if (merged.includes(t.id)) score += t.value;
    result.push(t);
  }
  
  // Step 3: Pad with nulls
  while (result.length < 4) result.push(null);
  
  return { newRow: result, score };
}
```

Wait, the issue is that I need to track the original tile objects' positions for animation. Let me think about this differently.

Instead of operating on tile objects abstractly, I need to:

1. For each line (row or column), get the tiles in order
2. Calculate where each tile should move to (its new index in the line)
3. Apply the movement to the grid
4. Animate tiles to their new positions
5. Handle merges (remove merged tiles, create new merged tiles)
6. Spawn new tile

Let me do this more carefully.

For each direction, I'll:
1. Iterate over lines
2. For each line, build a sequence of tiles in the move direction
3. Compact and merge
4. Record new positions for each tile
5. Update the grid

Here's my approach:

```javascript
function move(direction) {
  if (moving || gameOver || (won && !continuing)) return;
  
  let moved = false;
  let totalScore = 0;
  let tilesToRemove = [];
  let tilesToAdd = [];
  
  // Iterate over lines (rows for left/right, columns for up/down)
  for (let i = 0; i < 4; i++) {
    // Get the line of tiles
    let line = getLine(i, direction);
    
    // Process the line
    let { newLine, lineMoved, lineScore, removed, added } = processLine(line);
    
    if (lineMoved) moved = true;
    totalScore += lineScore;
    tilesToRemove.push(...removed);
    tilesToAdd.push(...added);
    
    // Update the grid
    setLine(i, direction, newLine);
  }
  
  if (!moved) return;
  
  // Animation phase...
  moving = true;
  
  // Update DOM positions for existing tiles that moved
  // Remove merged tiles from DOM
  // Add new merged tiles to DOM
  
  setTimeout(() => {
    // Spawn new tile
    spawnTile();
    moving = false;
    
    // Check game over
    if (!canMove()) {
      gameOver = true;
      showMessage('Game Over!');
    }
  }, 150);
}
```

Hmm, this is getting complex. Let me think about a simpler concrete approach.

I think the cleanest way is to use a "tiles" array that holds all tile objects, and each tile has a row, col, and DOM element. The grid is derived from these tiles.

Actually, let me just go with a straightforward implementation that works. I'll use the approach where:

1. The grid is a 2D array of tile objects (or null)
2. Each tile has: id, value, row, col, element (DOM), merged (boolean for animation)

For each move:
- Iterate through lines appropriately
- For each line, determine new positions and merges
- Update the grid
- Animate tiles

Let me write it all out now. I'll try to keep it clean but functional.

Actually, I'll implement it in a more straightforward way. Let me go with a simpler animation approach:

When a move happens:
1. Calculate the new grid state (where tiles end up, merges)
2. Update DOM elements with new positions (CSS transitions handle animation)
3. After transition, handle merged tiles (show merged tile, remove old tiles)
4. Spawn new tile

Let me write this:

```javascript
const CELL_SIZE = 110;
const GAP = 10;
const PADDING = 10;

function getPos(row, col) {
  return {
    top: PADDING + row * (CELL_SIZE + GAP),
    left: PADDING + col * (CELL_SIZE + GAP)
  };
}
```

OK let me just write the whole thing now. I'll be careful.

Here's my JavaScript logic:

```javascript
const SIZE = 4;
let grid = [];
let tiles = []; // flat array of all tile objects with {id, value, row, col, element}
let score = 0;
let best = parseInt(localStorage.getItem('best2048') || '0');
let gameOver = false;
let won = false;
let continuing = false;
let moving = false;
let tileIdCounter = 0;

const CELL_SIZE = 110;
const GAP = 10;
const PADDING = 10;

function tilePos(row, col) {
  return {
    top: PADDING + row * (CELL_SIZE + GAP),
    left: PADDING + col * (CELL_SIZE + GAP)
  };
}

function createTileElement(value, row, col) {
  const el = document.createElement('div');
  el.className = `tile tile-${value}`;
  const pos = tilePos(row, col);
  el.style.top = pos.top + 'px';
  el.style.left = pos.left + 'px';
  el.textContent = value;
  document.getElementById('grid-container').appendChild(el);
  return el;
}

function spawnTile() {
  const empty = [];
  for (let r = 0; r < SIZE; r++) {
    for (let c = 0; c < SIZE; c++) {
      if (!grid[r][c]) empty.push({r, c});
    }
  }
  if (empty.length === 0) return null;
  const {r, c} = empty[Math.floor(Math.random() * empty.length)];
  const value = Math.random() < 0.9 ? 2 : 4;
  const el = createTileElement(value, r, c);
  el.classList.add('tile-new');
  const tile = {id: tileIdCounter++, value, row: r, col: c, element: el};
  grid[r][c] = tile;
  tiles.push(tile);
  return tile;
}

function init() {
  grid = Array.from({length: SIZE}, () => Array(SIZE).fill(null));
  tiles = [];
  score = 0;
  gameOver = false;
  won = false;
  continuing = false;
  moving = false;
  tileIdCounter = 0;
  document.getElementById('grid-container').querySelectorAll('.tile').forEach(el => el.remove());
  document.getElementById('message').classList.remove('show');
  spawnTile();
  spawnTile();
  updateScore();
}

function updateScore() {
  document.getElementById('score').textContent = score;
  if (score > best) {
    best = score;
    localStorage.setItem('best2048', best);
  }
  document.getElementById('best').textContent = best;
}

// Move logic
// Returns array of {tile, toRow, toCol, mergedFrom} for each tile that moved or merged
function getMoves(direction) {
  const moves = [];
  
  for (let i = 0; i < SIZE; i++) {
    // Get the line
    let lineIndices = [];
    for (let j = 0; j < SIZE; j++) {
      let r, c;
      switch (direction) {
        case 'left': r = i; c = j; break;
        case 'right': r = i; c = SIZE - 1 - j; break;
        case 'up': r = j; c = i; break;
        case 'down': r = SIZE - 1 - j; c = i; break;
      }
      lineIndices.push({r, c});
    }
    
    // Get tiles in this line (in order)
    let lineTiles = lineIndices.map(idx => grid[idx.r][idx.c]).filter(t => t !== null);
    
    // Compact: remove gaps - tiles move to fill empty spaces
    // We need to track where each tile ends up
    
    // Actually, let's do this differently:
    // Start with an empty line, merge as we go
    
    let newLine = []; // array of {tile, isNew} where isNew means it's a merged result
    
    for (let tile of lineTiles) {
      let last = newLine[newLine.length - 1];
      if (last && !last.isNew && last.tile.value === tile.value) {
        // Merge: combine with previous
        const newValue = last.tile.value * 2;
        const mergedTile = {id: tileIdCounter++, value: newValue, row: -1, col: -1};
        // We'll create this tile later
        newLine[newLine.length - 1] = {tile: mergedTile, isNew: true, mergedFrom: [last.tile, tile]};
      } else {
        newLine.push({tile, isNew: false});
      }
    }
    
    // Now place newLine back into the grid positions (from the start of the line direction)
    for (let j = 0; j < SIZE; j++) {
      const idx = lineIndices[j];
      if (j < newLine.length) {
        const entry = newLine[j];
        const oldTile = grid[idx.r][idx.c];
        const newTile = entry.isNew ? entry.tile : entry.tile;
        
        if (entry.isNew) {
          // A merge happened
          moves.push({type: 'merge', tile: oldTile || entry.mergedFrom[0], toRow: idx.r, toCol: idx.c, mergedTile: entry.tile, mergedFrom: entry.mergedFrom});
        } else if (!oldTile || oldTile.id !== entry.tile.id) {
          // Tile moved here
          moves.push({type: 'move', tile: entry.tile, toRow: idx.r, toCol: idx.c});
        }
      } else {
        if (grid[idx.r][idx.c]) {
          moves.push({type: 'remove', tile: grid[idx.r][idx.c]});
        }
      }
    }
  }
  
  return moves;
}
```

This is getting messy. Let me take a completely different approach and think more cleanly.

Let me use a simpler model where I just track tiles by id and their positions.

Actually, let me just write the complete working implementation. I'll keep it clean.

Here's the approach I'll use:

1. The grid is a 4x4 array holding tile references (or null)
2. Each tile has {id, value, row, col, element}
3. For movement:
   a. For each line in the move direction, compute the final state
   b. Track which existing tiles move to which positions
   c. Track merges (which tiles merge into which new tiles)
4. Apply movement:
   a. Update DOM positions (CSS transitions handle animation)
   b. After animation (setTimeout), handle merges and spawn new tile
5. Block input during animation

Let me write this more carefully.

```javascript
function performMove(direction) {
  if (moving || gameOver || (won && !continuing)) return;
  
  let changed = false;
  let mergeResults = []; // {pos, value, sourceIds}
  let tileMovements = []; // {tile, toRow, toCol}
  let scoreGain = 0;
  
  // For each line
  const lines = [];
  for (let i = 0; i < 4; i++) {
    const indices = [];
    for (let j = 0; j < 4; j++) {
      if (direction === 'left') indices.push({r: i, c: j});
      else if (direction === 'right') indices.push({r: i, c: 3 - j});
      else if (direction === 'up') indices.push({r: j, c: i});
      else if (direction === 'down') indices.push({r: 3 - j, c: i});
    }
    lines.push(indices);
  }
  
  const newGrid = Array.from({length: 4}, () => Array(4).fill(null));
  
  for (const indices of lines) {
    // Get tiles in order
    const lineTiles = indices.map(idx => grid[idx.r][idx.c]).filter(t => t !== null);
    
    if (lineTiles.length === 0) continue;
    
    // Compact + merge
    const result = [];
    const mergedThisLine = [];
    
    let i = 0;
    while (i < lineTiles.length) {
      if (i + 1 < lineTiles.length && lineTiles[i].value === lineTiles[i+1].value) {
        // Merge
        const newValue = lineTiles[i].value * 2;
        const mergedTile = {id: null, value: newValue, row: -1, col: -1};
        result.push(mergedTile);
        mergedThisLine.push({index: result.length - 1, sourceTiles: [lineTiles[i], lineTiles[i+1]], value: newValue});
        i += 2;
      } else {
        result.push(lineTiles[i]);
        i += 1;
      }
    }
    
    // Check if this line changed
    const oldCount = indices.filter(idx => grid[idx.r][idx.c] !== null).length;
    if (oldCount !== result.length) changed = true;
    else {
      for (let j = 0; j < indices.length; j++) {
        const idx = indices[j];
        const oldTile = grid[idx.r][idx.c];
        const newTile = result[j] || null;
        if ((oldTile === null) !== (newTile === null)) changed = true;
        else if (oldTile && newTile && oldTile.id !== newTile.id) changed = true;
      }
    }
    
    // Place results back
    for (let j = 0; j < indices.length; j++) {
      const idx = indices[j];
      if (j < result.length) {
        const tile = result[j];
        const mergeInfo = mergedThisLine.find(m => m.index === j);
        if (mergeInfo) {
          // This is a merged tile
          tile.row = idx.r;
          tile.col = idx.c;
          tile.id = tileIdCounter++;
          newGrid[idx.r][idx.c] = tile;
          mergeResults.push({tile, pos: idx, sources: mergeInfo.sourceTiles});
          scoreGain += mergeInfo.value;
          changed = true;
        } else {
          // Existing tile moved here
          if (tile.row !== idx.r || tile.col !== idx.c) {
            tileMovements.push({tile, toRow: idx.r, toCol: idx.c});
            changed = true;
          }
          tile.row = idx.r;
          tile.col = idx.c;
          newGrid[idx.r][idx.c] = tile;
        }
      } else {
        newGrid[idx.r][idx.c] = null;
      }
    }
  }
  
  if (!changed) return;
  
  // Apply changes
  moving = true;
  
  // Move existing tiles
  for (const m of tileMovements) {
    const pos = tilePos(m.toRow, m.toCol);
    m.tile.element.style.top = pos.top + 'px';
    m.tile.element.style.left = pos.left + 'px';
    m.tile.row = m.toRow;
    m.tile.col = m.toCol;
  }
  
  setTimeout(() => {
    // Handle merges
    for (const mr of mergeResults) {
      // Remove source tile elements
      for (const src of mr.sources) {
        if (src.element && src.element.parentNode) {
          src.element.remove();
        }
      }
      // Create merged tile element
      const el = createTileElement(mr.tile.value, mr.tile.row, mr.tile.col);
      el.classList.add('tile-merged');
      mr.tile.element = el;
      
      // Update grid reference
      grid[mr.tile.row][mr.tile.col] = mr.tile;
    }
    
    // Update grid
    grid = newGrid;
    
    score += scoreGain;
    updateScore();
    
    // Check win
    if (!won && !continuing) {
      for (let r = 0; r < 4; r++) {
        for (let c = 0; c < 4; c++) {
          if (grid[r][c] && grid[r][c].value >= 2048) {
            won = true;
            showWinMessage();
            break;
          }
        }
        if (won) break;
      }
    }
    
    // Spawn new tile
    spawnTile();
    
    // Check game over
    if (!canMove()) {
      gameOver = true;
      showGameOverMessage();
    }
    
    moving = false;
  }, 150);
}
```

Wait, there's an issue. The newGrid variable I'm building needs to properly track tiles. Let me rethink this.

Actually, let me rebuild the grid more carefully. The issue is that I'm creating new tiles for merges but also trying to update the grid. Let me handle this differently.

Let me just track everything with IDs and rebuild the grid from scratch.

OK let me just write the whole thing. I've been overthinking this.

Let me write a complete, clean implementation that handles all the requirements.

Key points:
1. Track grid as 2D array of tile objects
2. Each tile has id, value, row, col, element (DOM)
3. Move logic: for each line, compact then merge adjacent equals
4. Animation: CSS transitions on top/left, setTimeout for sequencing
5. Score: increment by merged value
6. Win: show message when >= 2048 reached
7. Game over: only when no moves left (no empty cells and no adjacent equal values)
8. New Game: reset everything
9. Continue after win: allow playing

Let me write a clean implementation.

```javascript
let grid, tiles, score, gameOver, won, continuing, moving, tileId;
const CELL = 110, GAP = 10, PAD = 10;

function pos(r, c) {
  return { top: PAD + r * (CELL + GAP), left: PAD + c * (CELL + GAP) };
}

function el(value, r, c) {
  const d = document.createElement('div');
  d.className = `tile tile-${value <= 2048 ? value : 'super'}`;
  const p = pos(r, c);
  d.style.top = p.top + 'px';
  d.style.left = p.left + 'px';
  d.textContent = value;
  return d;
}

function init() {
  document.querySelectorAll('.tile').forEach(e => e.remove());
  document.getElementById('message').classList.remove('show');
  
  grid = Array.from({length: 4}, () => Array(4).fill(null));
  tiles = new Map();
  score = 0; gameOver = false; won = false; continuing = false; moving = false; tileId = 0;
  updateScore();
  spawn(); spawn();
}

function spawn() {
  const empty = [];
  for (let r = 0; r < 4; r++)
    for (let c = 0; c < 4; c++)
      if (!grid[r][c]) empty.push([r, c]);
  if (!empty.length) return;
  const [r, c] = empty[Math.random() * empty.length | 0];
  const v = Math.random() < 0.9 ? 2 : 4;
  const id = tileId++;
  const tile = { id, v, r, c };
  tile.e = el(v, r, c);
  tile.e.classList.add('tile-new');
  document.getElementById('gc').appendChild(tile.e);
  tiles.set(id, tile);
  grid[r][c] = tile;
}

function canMove() {
  for (let r = 0; r < 4; r++)
    for (let c = 0; c < 4; c++) {
      if (!grid[r][c]) return true;
      if (c < 3 && grid[r][c].v === grid[r][c+1].v) return true;
      if (r < 3 && grid[r][c].v === grid[r+1][c].v) return true;
    }
  return false;
}

function move(dir) {
  if (moving || gameOver || (won && !continuing)) return;
  
  // Define line traversal
  const getLine = (i) => {
    const indices = [];
    for (let j = 0; j < 4; j++) {
      switch(dir) {
        case 0: indices.push([i, j]); break;     // left
        case 1: indices.push([i, 3-j]); break;    // right
        case 2: indices.push([j, i]); break;      // up
        case 3: indices.push([3-j, i]); break;    // down
      }
    }
    return indices;
  };
  
  const newGrid = Array.from({length: 4}, () => Array(4).fill(null));
  let changed = false, scoreGain = 0;
  const mergeActions = []; // {pos, value, sourceIds}
  const moveActions = []; // {id, toR, toC}
  
  for (let i = 0; i < 4; i++) {
    const line = getLine(i);
    const lineTiles = line.map(([r, c]) => grid[r][c]).filter(t => t !== null);
    
    if (lineTiles.length === 0) continue;
    
    // Check if this line changes
    const origLine = line.map(([r, c]) => grid[r][c]);
    
    // Compact + merge
    const result = [];
    let j = 0;
    while (j < lineTiles.length) {
      if (j + 1 < lineTiles.length && lineTiles[j].v === lineTiles[j+1].v) {
        const mergedV = lineTiles[j].v * 2;
        result.push({ merged: true, v: mergedV, src1: lineTiles[j], src2: lineTiles[j+1] });
        j += 2;
      } else {
        result.push({ merged: false, tile: lineTiles[j] });
        j += 1;
      }
    }
    
    // Check if changed
    let oldIdx = 0;
    for (let k = 0; k < 4; k++) {
      const [r, c] = line[k];
      const oldTile = grid[r][c];
      if (k < result.length) {
        const entry = result[k];
        if (entry.merged) {
          if (!oldTile || oldTile.v !== entry.v) changed = true;
          // Record merge
          const newId = tileId++;
          const newTile = { id: newId, v: entry.v, r, c };
          mergeActions.push({ tile: newTile, pos: [r, c], src1: entry.src1, src2: entry.src2 });
          newGrid[r][c] = newTile;
          scoreGain += entry.v;
        } else {
          if (!oldTile || oldTile.id !== entry.tile.id) changed = true;
          if (oldTile && (oldTile.r !== r || oldTile.c !== c)) {
            moveActions.push({ id: entry.tile.id, toR: r, toC: c });
          }
          newGrid[r][c] = entry.tile;
        }
      } else {
        if (oldTile) changed = true;
        newGrid[r][c] = null;
      }
    }
  }
  
  if (!changed) return;
  
  moving = true;
  
  // Animate moves
  for (const ma of moveActions) {
    const tile = tiles.get(ma.id);
    const p = pos(ma.toR, ma.toC);
    tile.e.style.top = p.top + 'px';
    tile.e.style.left = p.left + 'px';
  }
  
  setTimeout(() => {
    // Handle merges
    for (const ma of mergeActions) {
      // Remove source elements
      ma.src1.e.remove();
      ma.src2.e.remove();
      tiles.delete(ma.src1.id);
      tiles.delete(ma.src2.id);
      
      // Create merged element
      const p = pos(ma.pos[0], ma.pos[1]);
      const d = el(ma.tile.v, ma.pos[0], ma.pos[1]);
      d.classList.add('tile-merged');
      document.getElementById('gc').appendChild(d);
      ma.tile.e = d;
      tiles.set(ma.tile.id, ma.tile);
    }
    
    // Update grid
    grid = newGrid;
    
    score += scoreGain;
    updateScore();
    
    // Check win
    if (!won && !continuing) {
      for (let r = 0; r < 4 && !won; r++)
        for (let c = 0; c < 4 && !won; c++)
          if (grid[r][c] && grid[r][c].v >= 2048) { won = true; showWin(); }
    }
    
    // Spawn
    spawn();
    
    // Check game over
    if (!canMove()) { gameOver = true; showGameOver(); }
    
    moving = false;
  }, 150);
}
```

Hmm, this still has issues. Let me trace through the logic more carefully.

The problem with the move logic is that when I calculate `changed`, I'm comparing the old grid to what I'm building, but the old grid might have nulls that I'm filling and vice versa.

Also, there's a subtle bug: when building `result`, I need to handle the case where merged tiles need new IDs and their position in the result.

Let me think about the example: [2, 2, 2, 2] left should produce [4, 4, 0, 0].

Step through:
- lineTiles = [tileA(v=2), tileB(v=2), tileC(v=2), tileD(v=2)]
- j=0: tileA.v === tileB.v → merge, result[0] = {merged, v=4, src1=tileA, src2=tileB}, j=2
- j=2: tileC.v === tileD.v → merge, result[1] = {merged, v=4, src1=tileC, src2=tileD}, j=4
- result = [{merged, v=4}, {merged, v=4}]
- Place in grid positions:
  - line[0] gets result[0] (merged tile v=4)
  - line[1] gets result[1] (merged tile v=4)
  - line[2] gets null
  - line[3] gets null
✓ Correct

Another example: [2, 2, 4, 0] left → [4, 4, 0, 0]
- lineTiles = [tileA(v=2), tileB(v=2), tileC(v=4)]
- j=0: tileA.v === tileB.v → merge, result[0] = {merged, v=4, src1=tileA, src2=tileB}, j=2
- j=2: tileC.v (4) has no next, so result[1] = {merged: false, tile: tileC}, j=3
- result = [{merged, v=4}, {tileC(v=4)}]
- Place:
  - line[0] → merged v=4
  - line[1] → tileC(v=4)
  - line[2] → null
  - line[3] → null
✓ Correct

Example: [2, 2, 2, 4] left → [4, 2, 4, 0]
Wait, is that right? Let me think... 
[2, 2, 2, 4] left:
- lineTiles = [tileA(v=2), tileB(v=2), tileC(v=2), tileD(v=4)]
- j=0: tileA.v === tileB.v → merge, result[0]={merged, v=4, src1=tileA, src2=tileB}, j=2
- j=2: tileC.v(2) !== tileD.v(4), so result[1]={tileC}, j=3
- j=3: tileD.v(4) has no next, result[2]={tileD}, j=4
- result = [{merged, v=4}, {tileC, v=2}, {tileD, v=4}]
- Place:
  - line[0] → merged v=4
  - line[1] → tileC(v=2)
  - line[2] → tileD(v=4)
  - line[3] → null
So: [4, 2, 4, 0] ✓ Correct!

Looks good. Let me also verify the win/continue logic makes sense.

OK I think I have a good enough understanding. Let me write the complete file now.

Wait, I also need to handle the `changed` detection properly. Let me simplify: after computing the result, I'll compare it to the original line to determine if anything changed.

```javascript
// Check if line changed
let origCompact = line.map(([r,c]) => grid[r][c]).filter(t => t !== null);
if (origCompact.length !== result.length) changed = true;
else {
  for (let k = 0; k < result.length; k++) {
    const entry = result[k];
    const orig = origCompact[k];
    if (entry.merged && orig.v !== entry.v) changed = true;
    if (!entry.merged && orig.id !== entry.tile.id) changed = true;
  }
}
```

This should work. Let me finalize and write the complete file.

One more thing: for the "continue after win" feature, I need to:
1. Show a win message with a "Continue" option
2. When user clicks continue, hide the message and set `continuing = true`
3. Also add a "Keep Going" button or similar

Let me write the complete file now. I'll include everything.

Oh also, I need to handle the case where a tile slides but doesn't merge - even if the values are the same at the end. For example, [2, 0, 0, 2] left → [2, 2, 0, 0] should NOT merge! Wait, actually [0, 2, 0, 2] left → [2, 2, 0, 0]. Hmm, these are NOT equal values adjacent after compacting.

Wait: [0, 2, 0, 2] → compact removes nulls → [2, 2] → adjacent equals merge → [4] → pad → [4, 0, 0, 0].

Actually wait, the rule says: "Adjacent equal tiles merge once per tile per move". And "For example, moving [2, 2, 2, 2] left produces [4, 4, 0, 0], not [8, 0, 0, 0]. Moving [2, 2, 4, 0] left produces [4, 4, 0, 0]."

So [0, 2, 0, 2] left: compact → [2, 2] → merge → [4] → pad → [4, 0, 0, 0].

That means my algorithm should handle this correctly because I compact first (remove nulls), then merge adjacent equals.

Let me verify: [0, 2, 0, 2] left:
- lineIndices = [(r,0), (r,1), (r,2), (r,3)]
- lineTiles = [tileB(v=2, at col=1), tileD(v=2, at col=3)]  (filtered nulls)
- j=0: tileB.v === tileD.v → merge, result[0] = {merged, v=4, src1=tileB, src2=tileD}, j=2
- result = [{merged, v=4}]
- Place:
  - line[0] → merged v=4
  - line[1] → null
  - line[2] → null
  - line[3] → null
✓ Correct!

OK let me write the final complete file now.

I also realize I need to handle the animation of removal for the tiles that were occupying positions that get "compacted" away. Actually, in my model, when tiles move, the old grid cell becomes null. The tiles that were in those cells have their DOM elements moved to new positions via the move actions.

For merged tiles, both source tiles need to be removed from DOM and a new tile appears in place.

Let me also think about the case where tiles don't move but the line changes (e.g., a tile is removed from the back due to being merged into the front). Actually, in that case, the tile disappears from its position and appears as part of a merged tile elsewhere. The tile elements for merged sources are removed.

So the flow is:
1. Compute new grid state
2. For existing tiles that moved: animate their elements to new positions
3. For merged sources: their elements will be removed after animation
4. After animation timeout:
   a. Remove merged source elements
   b. Create merged tile elements (with pop animation)
   c. Update grid reference
   d. Update score
   e. Check win/game over
   f. Spawn new tile
   g. Set moving = false

I think I need to handle one more thing: when a tile element needs to be removed because its position is now null but it wasn't merged. This happens when a tile gets "pushed out" by a merge that results in fewer tiles in the line.

Example: [2, 2, 0, 0] left → [4, 0, 0, 0]
- lineTiles = [tileA(v=2, at col=0), tileB(v=2, at col=1)]
- j=0: merge, result[0] = {merged, v=4}, j=2
- result length = 1
- Place:
  - line[0] → merged v=4
  - line[1] → null (but tileB was here!)
  - line[2] → null
  - line[3] → null

So tileB's element needs to animate to... where? It disappears because it was merged. So tileB's element should be removed after the animation.

Actually, since tileB is a source of a merge, it's already tracked in mergeActions. So tileB's element will be removed. But what about tile B moving? tileB was at col=1, and the merged tile ends up at col=0. So tileB needs to "slide" to col=0 to merge with tileA.

So the animation should be:
1. Both tileA and tileB slide to col=0
2. After animation, both tileA and tileB elements are removed
3. A new merged tile (v=4) appears at col=0

Hmm, but my current code doesn't handle this correctly. I have tileA at col=0 and tileB at col=1, and the merged result goes to col=0. The move actions only track non-merged tiles. For merged tiles, I need the source tiles to also move to the merge position.

Let me revise: for merged tiles, I should animate both source tiles to the merge position, then after animation, remove them and show the merged tile.

So I need to add move actions for merge source tiles too!

Let me revise the logic:

```javascript
if (entry.merged) {
  // Both sources move to merge position
  moveActions.push({ id: entry.src1.id, toR: r, toC: c });
  moveActions.push({ id: entry.src2.id, toR: r, toC: c });
  // Record merge
  mergeActions.push({ tile: newTile, pos: [r, c], src1: entry.src1, src2: entry.src2 });
  newGrid[r][c] = newTile;
  scoreGain += entry.v;
}
```

This way, both source tiles animate to the merge position, then are removed and replaced by the merged tile.

OK, now let me also handle the case where tiles need to be removed from the back of a line because merging resulted in fewer tiles. For example:

[2, 2, 4, 0] left → [4, 4, 0, 0]
Line indices for left: [(r,0), (r,1), (r,2), (r,3)]
lineTiles = [tileA(v=2, at 0), tileB(v=2, at 1), tileC(v=4, at 2)]
- j=0: merge A+B, result[0]={merged, v=4, src1=A, src2=B}, j=2
- j=2: tileC(v=4), result[1]={tileC}, j=3
result = [{merged, v=4}, {tileC(v=4)}]

Place:
- line[0] (r,0) → merged v=4. But old grid[r][0] = tileA. Since this is merged, tileA moves to (r,0) and tileB also moves to (r,0).
- line[1] (r,1) → tileC(v=4). tileC was at (r,2). So tileC moves to (r,1).
- line[2] (r,2) → null. Was tileC here. Since tileC moved, this is fine.
- line[3] (r,3) → null. Already null.

So no tiles need to be "removed" from the back since the tiles that were there moved elsewhere.

But what about [4, 2, 2, 0] left? 
lineTiles = [tileA(v=4, at 0), tileB(v=2, at 1), tileC(v=2, at 2)]
- j=0: tileA(v=4) ≠ tileB(v=2), result[0]={tileA}, j=1
- j=1: tileB(v=2) === tileC(v=2), merge, result[1]={merged, v=4, src1=B, src2=C}, j=3
result = [{tileA(v=4)}, {merged, v=4}]

Place:
- line[0] (r,0) → tileA. Already at (r,0). No move needed.
- line[1] (r,1) → merged v=4. tileB moves from (r,1) to (r,1) (stays!). tileC moves from (r,2) to (r,1).
- line[2] (r,2) → null. Was tileC, but tileC moved to (r,1). Fine.
- line[3] (r,3) → null. Already null.

So in this case tileC slides from col 2 to col 1, and tileB stays at col 1.

OK I think my logic handles all cases properly. Let me also make sure I handle the `changed` detection correctly.

Actually, I think I'll simplify the change detection. Instead of complex comparison, I'll just check after computing the new grid vs old grid.

Let me just write the complete file now. I'll handle edge cases as I go.

One thing I realize: for the `changed` detection, I should just compare the new grid state to the old grid state after computing it. If any tile's position changed, or any tile's value changed (due to merge), then `changed = true`.

Let me write the final implementation now.

Let me also be mindful about:
- `grid` is the current 2D array of tile references
- After computing `newGrid`, I compare them
- For non-merge tiles that stay in place, they remain the same object reference
- For merged tiles, I create new tile objects

Here's my final approach for changed detection:

```javascript
// After computing newGrid, compare with old grid
let changed = false;
for (let r = 0; r < 4 && !changed; r++)
  for (let c = 0; c < 4 && !changed; c++)
    if (grid[r][c] !== newGrid[r][c]) changed = true;
```

Wait, this won't work correctly because for tiles that moved, grid[r][c] will be null and newGrid[r][c] will have the tile. And vice versa. But the tile objects themselves are the same references (for non-merged tiles), so comparing with === should work. For merged tiles, newGrid has new objects, which won't equal the old ones. So this should work.

Actually let me think more carefully. After computing newGrid:
- For a tile that moved from (r1,c1) to (r2,c2): old grid has tile at (r1,c1), new grid has null at (r1,c1) and tile at (r2,c2). So grid[r1][c1] !== newGrid[r1][c1] (tile !== null) and grid[r2][c2] !== newGrid[r2][c2] (null !== tile). Changed = true. ✓
- For a tile that stayed: grid[r][c] === newGrid[r][c] (same ref). ✓ Not changed.
- For merged: old grid has sources, new grid has merged tile (new object). Changed = true. ✓

Actually wait, there's a subtle issue. When I compute newGrid, for tiles that moved, I set newGrid at the destination to the tile object. But I also need to set the source to null in newGrid. Let me check: in my code above, I initialize newGrid with all nulls, then fill in the computed values. So sources where tiles moved from will be null, which is correct.

But what about tiles that don't move but are in a line that had a merge at a different position? Actually, the line processing handles each position in the line independently, so non-merged tiles at their original positions will have the same reference in newGrid as in grid.

OK, I think this works. Let me just write it.

I realize I need to also consider: for tile objects that are sources of merges, oldGrid has them at their original positions, newGrid has them... not at all (they're replaced by the merged tile at the merge position). So the comparison grid[r][c] !== newGrid[r][c] will catch this.

Alright, let me finalize and write the file. I'll be thorough but efficient.

Let me also handle keyboard events properly:
- Prevent default for arrow keys to avoid scrolling
- Use a flag `moving` to block rapid input
- Handle the "continue after win" with a button or key

Here's my final plan for the HTML structure:

```
container
├── header
│   ├── h1: 2048
│   └── scores
│       ├── Score: number
│       └── Best: number
├── grid-container (id="gc")
│   ├── 16 background cells (positioned)
│   ├── tiles (added dynamically)
│   └── message overlay
├── controls
│   ├── New Game button
│   └── (optional) Continue button in message
```

Let me write it all now.

Let me also make the size responsive. I'll use a cell size that's reasonable. Let's say 100px cells with 10px gaps and 10px padding. Container = 4*100 + 3*10 + 2*10 = 450px.

Actually, let me make it 500px total: (500 - 20) / 4 - 10 = 480/4 - 10 = 110px cells? No...

Let me use: container width = 500px, padding = 10px, gap = 10px, cell = (500 - 2*10 - 3*10) / 4 = 450/4 = 112.5px. Let me use 112px cells. Actually let me use 100px for simplicity.

Container = 2*10 + 3*10 + 4*100 = 20 + 30 + 400 = 450px. That's fine.

Background cells: each 100x100, positioned at:
- cell (r,c): top = 10 + r*(100+10), left = 10 + c*(100+10)

OK let me finalize and write the complete file. I'll aim for a clean, well-commented implementation.

Let me write it now. I'll be concise.

Actually, let me think about whether 500px or 450px is better. I'll go with something in the middle. Let me use:
- padding: 10px (so 20px total horizontal)
- gap: 10px (so 30px total horizontal gaps)
- cell width: (container - 20 - 30) / 4 = (container - 50) / 4

With container = 490px: cell = 440/4 = 110px. That's nice.

Let me use container = 490px, padding = 10px, gap = 10px, cell = 110px.

Grid background area: 4*110 + 3*10 + 2*10 = 440 + 30 + 20 = 490. ✓

Actually let me just keep it simple with round numbers:
- Grid container: 500px x 500px
- Padding: 15px
- Gap: 10px
- Cell: (500 - 30 - 30) / 4 = 440/4 = 110px

Hmm, padding 15 means 30px horizontal, 3 gaps = 30px, so cells = (500-30-30)/4 = 110px. That works!

Let me go with that. I'll write the complete file now. Time to execute.

Now let me open the browser and test it.

The browser tool doesn't have an "open" action. Let me use the available actions - inspect, screenshot, etc. But first I need to get the browser to open the file. Let me check what actions are available.

From the tool definition, the available actions are:
- reload
- inspect
- screenshot
- motion
- click
- drag
- key
- type
- scroll

There's no "open" or "navigate". Let me see if I can start with a screenshot or something. Maybe the browser is already open or I need to use reload.

Actually, let me just try to reload and see if it works.

The page is loaded. I can see:
- 2048 title
- Score: 0, Best: 0
- Two tiles: 4 and 2
- New Game button

Let me interact with the game by pressing arrow keys, then inspect the console and DOM to see if things are working.

Let me try pressing the ArrowRight key to move tiles.

It seems the arrow key press didn't change anything visible yet, or the tiles may have moved to the right but since there's already a gap on the right side, the 4 and 2 might have just slid right. Let me inspect the DOM more carefully.

Actually wait - the DOM output shows the same thing. Let me try inspecting the tile elements to see their positions.

After pressing ArrowRight, there are now 3 tiles showing: 4, 2, 2. This means:
- The original tiles (4 and 2) slid to the right
- A new tile (2) was spawned

This looks correct! The move happened, tiles moved, and a new tile appeared. Let me keep testing.

Let me try more moves to see if merging works.

Hmm, it looks like the left arrow didn't change the display. Let me try again - maybe the tiles are arranged such that left doesn't change much, or the animation timing is blocking it.

Wait, actually the problem might be that the "moving" flag is set to true and the next key press arrives during the animation (150ms timeout). But that should be fine since I'm pressing keys one at a time.

Let me try pressing Left again after a short delay, or check more carefully.

Actually, looking again: the two 2s should be mergeable. If the two 2s are in the same row and adjacent after sliding, moving left should merge them.

Let me try pressing left again and check more carefully.

There's an error: "Cannot read properties of null (reading 'v')". This is likely happening in the canMove() check or the movement logic. Also, now we have 4 tiles: 4, 2, 2, 2. So a new tile was spawned, but the error occurred.

Let me find the bug. The error is "Cannot read properties of null (reading 'v')" - some null tile is being accessed. Let me look at the canMove function which checks `grid[r][c] && grid[r][c].v === grid[r][c+1].v` - this should be safe because of the `grid[r][c] &&` guard. Let me check the move function.

Actually, the error could be in the line comparison logic:

```javascript
if(entry.merged){if(!old||old.v!==entry.v||old.id!==entry.src1.id)lineChanged=true}
```

Wait, `entry.merged` entries don't have a `tile` property - they have `src1`. So `entry.src1` should exist. But what about the case where `old` is null? `!old` catches that... hmm.

Actually wait, let me re-examine the change detection more carefully:

```javascript
if(origCount!==result.length)lineChanged=true;
else for(let k=0;k<result.length;k++){
  const [r,c]=line[k];
  const old=grid[r][c];
  const entry=result[k];
  if(entry.merged){if(!old||old.v!==entry.v||old.id!==entry.src1.id)lineChanged=true}
  else if(old!==entry.tile)lineChanged=true;
}
```

For `entry.merged`, if `old` is null, then `!old` is true, so `lineChanged = true`. That seems fine.

But the error is "Cannot read properties of null (reading 'v')" which means somewhere I'm accessing `.v` on null. Let me search for places where I access `.v` without null-checking.

In move function:
- `if(j+1<lineTiles.length&&lineTiles[j].v===lineTiles[j+1].v)` - lineTiles is filtered to non-null, so this is safe.
- Wait, but `lineTiles[j].v` - lineTiles contains tile objects from grid, which should be non-null because of the filter.

Actually, the error might be happening in canMove():
```javascript
function canMove(){
  for(let r=0;r<S;r++)for(let c=0;c<S;c++){
    if(!grid[r][c])return true;
    if(c<S-1&&grid[r][c].v===grid[r][c+1].v)return true;
    if(r<S-1&&grid[r][c].v===grid[r+1][c].v)return true;
  }
  return false;
}
```

Wait, this looks fine - it checks `!grid[r][c]` first.

Hmm, it could also be in the line comparison in move() - let me trace through more carefully.

Actually, let me look at the problem more carefully. The error happened on ArrowDown. Let me think about what the board looks like after the previous moves.

After init: tiles at random positions.
After ArrowRight: tiles slid right, new tile spawned.
After ArrowLeft (didn't seem to change much?): 
After ArrowDown: error.

Let me think about what might cause the null error. Let me look at the execution of `move(dir)` more carefully.

In the move function, after the setTimeout callback:
```javascript
// Check win
if(!won&&!continuing){
  for(let r=0;r<S&&!won;r++)
    for(let c=0;c<S&&!won;c++)
      if(grid[r][c]&&grid[r][c].v>=2048){won=true;...}
}
```

This accesses grid[r][c].v with a null check - safe.

Then:
```javascript
spawn();
if(!canMove()){gameOver=true;...}
```

Wait, `spawn()` and `canMove()` run AFTER the setTimeout (in the callback), but after the timeout, `moving` is set to false at the end. So it shouldn't be an issue.

Actually wait, looking at the flow again. The error might be happening *during* the move calculation (before the setTimeout). Let me look more carefully.

Actually, I think the issue might be in the tile positioning. When we press ArrowDown, the tiles need to move down. But if there's a null in the grid where I'm trying to read `v`...

Hmm, actually let me re-check. The `grid` is a 2D array of tiles or null. `lineTiles` filters out nulls. So `lineTiles[j]` should never be null. Let me check that the filter is correct:

```
const lineTiles=line.map(([r,c])=>grid[r][c]).filter(t=>t!==null);
```

This should be fine.

Wait, maybe the issue is after the merge, when we compare: `if(!old||old.v!==entry.v||old.id!==entry.src1.id)`. Here `entry.src1` is from `lineTiles` which was filtered, so it's non-null. `old` comes from `grid[r][c]`. Let me check if this is the issue.

Actually, I think the issue might be simpler - perhaps the error occurs because when calling canMove() after a merge, I'm reading a tile that was already removed from the grid but is still referenced?

Let me just look at the actual line of the error. Unfortunately I can't see the stack trace, only "Cannot read properties of null (reading 'v')".

Let me think about this differently. Let me reproduce the issue more carefully.

After the first ArrowRight:
- Tiles moved right, new tile spawned
- The page shows: 4, 2, 2 (3 tiles)

After ArrowLeft:
- Should slide left
- If two 2's are in the same row, they merge
- If not, they just slide
- New tile spawns

After ArrowDown:
- The DOM shows: 4, 2, 2, 2 (4 tiles)
- Error occurs

Let me look at the timing. The move function sets `moving=true`, then does animation with setTimeout(150ms). But I pressed ArrowLeft before checking, and it might have been during the animation. Similarly for ArrowDown. But since the DOM changed (we see new tiles), the moves did execute.

Wait, but the DOM shows the tiles but doesn't show their positions. The tiles might be overlapping in ways that don't make sense.

Let me actually try to read the inline styles of the tiles to see their positions.

Actually, let me just try to inspect the tile elements inline styles.

Let me think about what might cause the error. In canMove():
```javascript
if(c<S-1&&grid[r][c].v===grid[r][c+1].v)return true;
```

This is after checking `if(!grid[r][c])return true;` so if grid[r][c] is null, it returns true early. If grid[r][c] is non-null but grid[r][c+1] is null, the comparison would be `value === undefined`, which would be false but not an error... wait, no. I'm accessing grid[r][c+1].v, and if grid[r][c+1] is null, that would throw "Cannot read properties of null (reading 'v')".

AH, there it is! In canMove(), line:
```javascript
if(c<S-1&&grid[r][c].v===grid[r][c+1].v)return true;
```

If `grid[r][c]` is non-null but `grid[r][c+1]` is null, the comparison `grid[r][c].v === grid[r][c+1].v` would try to access `.v` on null.

I need to add null checks for both. Let me fix this.

Similarly for the vertical check:
```javascript
if(r<S-1&&grid[r][c].v===grid[r+1][c].v)return true;
```

Same issue - if grid[r+1][c] is null, it would crash.

Let me fix the canMove function.

Also, let me check the line comparison code again:
```javascript
if(entry.merged){if(!old||old.v!==entry.v||old.id!==entry.src1.id)lineChanged=true}
```

Here `old` is `grid[r][c]` which could be null. The check `!old` would catch that. But `entry.src1` is from lineTiles which was filtered, so non-null. `entry.v` is the merged value. This seems fine.

And:
```javascript
else if(old!==entry.tile)lineChanged=true;
```

For non-merged entries, `entry.tile` is a tile object and `old` could be null. If old is null and entry.tile is non-null, then `null !== tile` is true, so `lineChanged=true`. That's correct. No `.v` access here.

So the bug is definitely in canMove(). Let me fix it.

Now I also need to fix the same issue in the line comparison part of the move function. Let me check that code again.

Actually, looking at the change detection:
```javascript
if(entry.merged){if(!old||old.v!==entry.v||old.id!==entry.src1.id)lineChanged=true}
```

Here `old` is `grid[r][c]`, which could be null. But `!old` check protects against that. And `old.v` wouldn't be accessed if old is null because of short-circuit evaluation.

Wait, actually the issue is: `!old || old.v !== entry.v || old.id !== entry.src1.id`. If old is null, `!old` is true, so it short-circuits and doesn't evaluate `old.v`. That's correct.

But what about `entry.src1`? It's from `lineTiles` which was filtered... hmm wait, `lineTiles` is built from `line.map(([r,c])=>grid[r][c]).filter(t=>t!==null)`. So it's non-null.

But here's the problem: between the time we build `lineTiles` and the time we access `grid[r][c]` for comparison (in the `old` variable), the grid hasn't changed yet. So this should be fine.

Let me also check: in the move function, when a tile moves, we update `entry.tile.r` and `entry.tile.c` but not the original grid. The original grid is still the old state. Then we set `newGrid[r][c] = entry.tile`. At the end, we replace `grid = newGrid`. So during computation, the old grid is unchanged. That's correct.

Let me also think about another issue: when I do `grid[r][c]` in the change detection loop, could I be reading a tile that was already moved? No, because the old grid is still intact.

Let me reload and test again.

Now the game reloaded with two 2's. Let me test arrow key moves.

Hmm, it seems like the left arrow didn't change anything. The two 2's might be in the same row or different rows. Let me try a few more moves to see what happens. Maybe the tiles are already on the leftmost side so they can't move left.

Let me try moving right.

Now we have three 2's. The tiles moved right, and a new 2 spawned. Let me try to get them to merge by moving again.

Excellent! Score is now 4! This means two 2's merged into a 4 and the score increased by 4. The board shows 2, 4, 2 - which looks correct (the merged 4, plus a new spawned 2, plus the other original 2).

Let me keep testing. Let me try to merge again, and also test the New Game button. 

Let me try pressing a few more keys to continue playing.

A new tile spawned after ArrowUp. The board now has 2, 4, 2, 2. Let me continue testing. Let me try to merge those two 2's at the bottom.

We now have 5 tiles: 2, 4, 2, 2, 2. The tiles slid left and a new tile spawned. But I don't see any merge happening. Let me try right to bring them together.

Score went from 4 to 12, meaning a gain of 8. That means 4+4 merged (two 2's merged into a 4, and another pair merged). Actually wait - two 2's merging would give score +4, and if the resulting 4 merged with an existing 4, that would be +8. So total score gain is 12... no, score went from 4 to 12, so gain is 8. 

Let me think about what happened. The board was: 2, 4, 2, 2, 2. After moving right:
- The two rightmost 2's merged into a 4 (+4 score)
- The other 2 and the existing 4 are in different rows/columns so they don't merge
- A new 2 spawned
- Total: 4+4=8 + existing 4 = three 4's and a 2? 

Wait, the result shows: 4, 4, 4, 2 (4 tiles). So one merge happened (two 2's became a 4), giving +4. But score went from 4 to 12 → gain of 8. 

Hmm, that doesn't add up. Unless two separate merges happened.

Board before: 2, 4, 2, 2, 2 (5 tiles)
Let's say one row had [2, 2, 0, 0] and another had [4, 2, 0, 0]... Hard to know exactly.

Anyway, the merge + score update is working. Let me now test the New Game button.

It looks like I didn't click the New Game button properly. Let me find the exact coordinates for the button. The button is in #bottom, after the grid container. Let me calculate the position.

The grid container is 500px tall. The bottom section is below it with 16px margin. So the button is roughly at y = 500 + 16 + ~10px padding = ~526px for the bottom area. The button is "NEW GAME" text.

Actually let me look at the layout more carefully. The "NEW GAME" button is inside a flex container (#bottom) with justify-content: space-between. The button is on the right side.

Let me try to click on the "NEW GAME" text. The grid container ends at y=500 (since it's 500px height). The bottom div has margin-top: 16px. The button has padding: 10px 22px. So the button area starts around y = 500 + 16 = 516px.

Let me try clicking at approximately (430, 525).

Still didn't click the button. Let me check the DOM element positions. The "New Game" button is at id="new-game" inside `#bottom`. Let me try to click it by finding the exact coordinates. The text "NEW GAME" is visible in the DOM output, but the click might not be hitting it.

Let me try more coordinates. The container is 500px wide. The scores are on the right side of the header. The grid is 500x500. Below the grid is the bottom section.

Let me try around (440, 540) or even try the text "NEW GAME" which should be at various positions.

Actually, let me check if maybe the click target needs to be on the text itself. Let me look at the DOM output more carefully. The button text says "NEW GAME". Let me try clicking around different positions.

Actually, maybe I should just trigger the click via JavaScript directly.

Let me try a few more positions or just try to eval the click via console. Actually, looking at the layout more carefully:

The #container is 500px wide (inner width). The #gc (grid container) is 500px x 500px. After that, #bottom has margin-top: 16px. The button #new-game is inside #bottom, on the right side (flex with justify-content: space-between).

The button has padding 10px 22px, so it's about 22+text+22 wide and 10+text+10 tall.

The text "NEW GAME" is ~80px wide (8 chars * ~10px). So total button width is ~124px.

The #container is 500px wide. The #new-game button is on the right side. Let's say it's at x=500-124-0 (right side of the container) = 376px to 500px.

But actually, depends on padding of the #bottom div. There's no explicit padding on #bottom. The button might be at the far right.

Let me try x=450, y=540 or try to trigger it programmatically.

Actually, let me just use a script to trigger the button click.

Let me try to find the button location by looking at the layout. The #container is a flex column. Let me try clicking at the bottom-right corner of the viewport.

Actually, 1200x800 is the viewport. The container is centered. Let me calculate:
- Container width: 500px
- Centered in 1200px viewport: container starts at (1200-500)/2 = 350px
- Container is at x=350, width=500, so right edge at x=850
- Button is right-aligned in #bottom

Actually wait, I need to think about this differently. The page has `body { display: flex; justify-content: center; }` so the container is centered horizontally. 

Container left edge ≈ (1200-500)/2 = 350px
Container right edge ≈ 350+500 = 850px

The #bottom is inside the container, full width (500px). With `justify-content: space-between`, the button is on the right side of #bottom. Since #bottom has no padding, the button's right edge aligns with the container's right edge at x=850, minus the button's width.

Button width ≈ 22px padding + ~90px text + 22px padding = ~134px
Button is at x ≈ 850-134 = 716, width ≈ 134px

Button y position: #gc is 500px tall starting at the top of the container (below header). The header is about 60px. So #gc starts at y ≈ 60+20 (margin-bottom) ≈ 80px. #gc is 500px so it ends at y ≈ 580px. #bottom has margin-top 16px, so it starts at y ≈ 596px.

Button vertical center ≈ 596 + button height/2. Button padding is 10px vertically, text is ~15px, so height ≈ 35px. Button center at y ≈ 596 + 17 = 613px.

So I should click at approximately x=760, y=613.

Wait, but the body has padding: 20px. So the container top-left is at (350+20, 20?) No, body padding pushes inward. But with flex and centering, the container is centered in the available space.

Let me just try a wider range of coordinates.

Hmm, the button click isn't working. Let me try the `inspect` action to see the actual button coordinates, or try to invoke the click with JavaScript.

Actually, the coordinates I'm using might be wrong because the viewport coordinates are relative to the browser viewport (1200x800), not relative to the page. And the container is centered in the viewport.

Let me try to use the key approach. Actually, the text "NEW GAME" is in the DOM but I need to figure out where it's rendered.

Let me try clicking at the very bottom-right area of the page or use keyboard shortcuts. Or let me try different coordinates.

Actually, let me look at the page layout more carefully. The container is:

```
<div id="container">
  <div id="header">   <- ~60px height
    <h1>2048</h1>     <- 48px font
    <div id="scores"> <- score boxes
  </div>
  <div id="gc">        <- 500px height, starts at about y=100
    ...
  </div>
  <div id="bottom">    <- ~40px height, starts at about y=600
    <p>...</p>
    <button id="new-game">NEW GAME</button>
  </div>
</div>
```

Total container height ≈ 60 + 20(margin) + 500 + 16(margin) + 40 ≈ 636px

The container is centered in the viewport (1200x800). So:
- Container top y ≈ (800 - 636) / 2 = 82px
- Container bottom y ≈ 82 + 636 = 718px

#bottom y position ≈ 82 + 60 + 20 + 500 + 16 = 678px
Button center y ≈ 678 + 20 = 698px (just guessing button height of ~40px)

Container left x ≈ (1200 - 500) / 2 = 350px
Button is on the right side of #bottom, so button center x ≈ 350 + 500 - 67 = 783px (roughly)

Actually wait, the container starts at x=350, and the button is right-aligned. So the button's right edge aligns with the container's right edge at x=850. Let me try x=790, y=690.

Actually let me try multiple approaches. Let me first try the exact center of the button area.

Hold on, maybe I should just try to use click with a wider range or use JavaScript evaluation.

The New Game button worked! Score reset to 0, Best stayed at 12, and the board shows two tiles: 2 and 4. The game has been properly reset.

Now let me test a few more things:
1. Try to verify win/loss conditions (hard to test fully without playing for a long time)
2. Test the animation (already working based on the DOM updates)
3. Test that spawn only happens after valid moves

Let me also check if there are any errors in the console.

Hmm, ArrowDown didn't seem to change anything. Maybe the tiles were already at the bottom and couldn't move down, so no new tile was spawned. Let me try ArrowUp.

ArrowUp worked! Now we have 3 tiles: 2, 4, 2. Let me keep testing merges.

Score went from 0 to 4, meaning two 2's merged into a 4. The board shows: 4, 4, 2 (three tiles). This is correct!

Let me also test - if two tiles are adjacent and equal, do they merge? Let me try.

Actually, let me verify the specific examples from the requirements:
- [2, 2, 2, 2] left → [4, 4, 0, 0] (not [8, 0, 0, 0])
- [2, 2, 4, 0] left → [4, 4, 0, 0]

Let me try to create a test scenario. I can't easily set up specific board states through the browser, but the merge behavior is already working correctly.

Let me also make sure that:
1. No tile spawns when board doesn't change
2. Game Over is detected correctly
3. Continue after win works

Let me play a few more moves and verify.

Score went from 4 to 12, a gain of 8. Two 4's merged into an 8 (score +8). Board shows: 2, 8, 4 (3 tiles). This is correct!

Let me keep playing and also check the "no spawn on unchanged move" behavior. Let me try to create a situation where a move doesn't change the board.

Actually, I'm running low on time. Let me check the key behaviors:

1. ✅ Arrow keys slide tiles
2. ✅ Valid move adds a tile
3. ✅ Merge updates score by merged value
4. ✅ New Game resets board and score
5. Need to verify: no spawn on unchanged move
6. Need to verify: Game Over only when no valid move
7. Need to verify: win message on 2048
8. Need to verify: continue after win

Let me also check: when tiles can't move (e.g., pressing left when tiles are already at the left), no new tile spawns.

Let me press ArrowLeft again after the current state to see if the board doesn't change and no new tile spawns:

ArrowLeft spawned a new 2 (the board has 4 tiles now: 2, 8, 4, 2). So the move was valid (tiles slid left, possibly shifting positions).

Let me try to see if there's a case where a move doesn't change the board. Let me look at the current board state. If the two 2's are at the edges and can't move further, left might not change anything.

Actually, let me instead check the behavior by pressing multiple times. Let me try pressing the same direction again and see if the board changes.

But actually, I don't have full visibility into the positions. Let me just keep playing a few moves to verify everything works smoothly.

Let me also verify that no errors occur in the console.

Score went from 12 to 16, gain of 4. Two 2's merged into a 4 somewhere. The board shows: 8, 4, 4, 4 (4 tiles). 

Let me do a few more quick checks. I want to verify:
1. Multiple merges in one move - e.g., if [2, 2, 4, 4] moves left → should produce [4, 8, 0, 0]
2. Game over detection
3. Continue after win

Actually, let me also check the specific case [2, 2, 2, 2] moving left → [4, 4, 0, 0]. This is harder to verify without seeing the actual positions.

Let me play a bit more to try to get a merge-heavy move.

Actually, I realize I should also check the [2, 2, 4, 0] → [4, 4, 0, 0] example. Let me try to get some merges going.

Let me just press a sequence of keys to build up the board and then verify a merge.

The board is getting full. Let me make a few more moves and see what happens. Let me press ArrowRight to try to merge some 4's.

No merge happened with ArrowRight, just a new tile spawned. The board has: 8, 4, 4, 4, 2, 2 (6 tiles total - only 2 empty cells left).

Let me try to merge some of those 4's or 2's.

Score went from 16 to 24 (gain of 8). Two 4's merged into an 8. Board: 8, 4, 2, 2, 8, 2 (6 tiles).

Everything is working correctly. Let me now check a few more edge cases and then finalize.

Let me also verify that the "no spawn on unchanged move" works. I'll try pressing a key where the board doesn't change. Based on the current board, let me try ArrowDown and see if it changes.

Actually, before that, let me check that there are no console errors.

Wait, I used inspect but the console shows no errors (just the iframe sandbox warning which is unrelated to our code). Also the board grew (7 tiles now: 8, 4, 2, 2, 8, 2, 2). That must have been from a key press I made.

Actually, looking at the inspect action, it doesn't actually trigger a page action - it just reads the current state. The extra tiles must have appeared from a move.

Let me try to check if there's a case where pressing a key doesn't change the board. I need to find a direction where tiles can't move and no merges are possible.

At this point the board is getting full. Let me try pressing a direction and see if nothing happens.

ArrowRight didn't change the board and no new tile spawned. This could mean that either:
1. The tiles were already at the rightmost edge and no merge was possible, so the board didn't change → no new tile spawned ✓
2. Or there was a merge and a new tile spawned but the DOM display didn't update (unlikely)

This is correct behavior! When the board doesn't change, no new tile should spawn.

Let me try another direction to see if a move is still possible.

ArrowLeft added a new 2. So the board changed (tiles slid left, or a merge happened, or both). There are now 8 tiles.

Let me also verify the edge case: after a move that doesn't change the board, no new tile spawns. I'll test this by pressing ArrowLeft again when tiles are already at the left edge (but they might not be at the left edge in this case). Actually, there are 8 tiles in a 4x4 grid, so there are 8 empty cells. Tiles can definitely move around.

Let me try pressing the same direction and checking behavior. Actually, let me try pressing a direction that results in no change. Looking at the board, there are 8 tile values visible but I don't know their positions.

Let me try ArrowDown to see what happens.

ArrowDown changed the board, a new tile 4 spawned. Board now has 9 tiles.

Let me keep playing until either game over or we can verify the game over / win conditions.

Actually, I have limited time. Let me do a key sequence to fill the board and then test the game over detection. Or better, let me verify that the existing behaviors work correctly and move on.

Let me check a few things I haven't verified:
1. No spawn on unchanged move ✅ (confirmed with ArrowRight above)
2. Game Over detection
3. Continue after win

Let me try to force a game over by filling the board. Let me play a few more moves.

Score went from 24 to 32 (gain of 8). Some 4's merged into 8's. Board: 8, 4, 2, 8, 4, 4, 4, 2 (8 tiles).

Let me continue playing to see if we can reach game over.

Score went from 32 to 56 (gain of 24). Multiple merges! There was likely a chain merge - some 4's merged into 8's, and possibly an 8 merged with another 8 to form a 16 (worth +8, or +16?). Let me think: four 4's merging into two 8's would give +4+4=8, and those two 8's merging into a 16 would give +16, total +24. Or other combinations. The board now shows: 2, 4, 4, 2, 8, 16, 2 (only 7 tiles - a merge reduced the count).

Let me do a New Game and quickly verify everything works.

Actually, let me quickly verify one more behavior: the "continue after win" feature and the game over screen. But reaching 2048 or game over would take many moves. Instead, let me verify the existing behavior is all correct and finalize.

Let me check: does the `canMove()` function correctly return false when no valid moves remain? And does the game over screen appear?

Let me try to fill the board more.

ArrowRight didn't allow a merge, but tiles moved and a new 2 spawned. Board: 2, 4, 4, 2, 8, 16, 2, 2 (8 tiles).

Let me continue playing more aggressively to fill the board.

Score 56→60 (gain of 4). Two 2's merged. Board: 4, 4, 2, 8, 16, 2, 4, 2 (8 tiles).

Let me try to fill the board by playing more conservatively.

Score 60→68 (gain of 8). 4's merged into 8. Board: 4, 2, 8, 16, 2, 2, 8, 2 (8 tiles).

Let me try to get more merges and fill the board. I'll focus on moves that consolidate tiles.

ArrowRight added a 2. Board: 4, 2, 8, 16, 2, 2, 8, 2, 2 (9 tiles). Let me try to merge those 2's.

Score 68→72 (gain of 4). Two 2's merged. Board: 4, 8, 16, 2, 2, 8, 2, 4, 2 (9 tiles).

Let me try to fill the board by focusing on one direction multiple times.

Score 72→76 (gain of 4). Two 2's merged. Board has 9 tiles. Let me keep going to try to get a game over scenario, or at least verify more merging behavior.

Let me try to focus on getting as many merges as possible by being more strategic. Let me play a rapid sequence.

Actually, I'm running low on time. Let me finalize by doing one final check - verify New Game works properly and there are no console errors. Then I'll report.

Actually, let me do something more useful: let me verify that the `canMove()` function works correctly by filling the board more.

Board has 10 tiles now. 6 empty cells left. Let me try to merge more.

Score 76→84 (gain of 8). Some merges happened, reducing tile count to 8. Board: 4, 8, 16, 8, 4, 4, 4, 4, 2 (9 tiles... wait, let me count: 4, 8, 16, 8, 4, 4, 4, 4, 2 = 9 tiles).

Let me try to merge those 4's.

ArrowDown added a new 2. Board: 4, 8, 16, 8, 4, 4, 4, 4, 2, 2 (10 tiles). Let me try to merge those 2's and 4's.

Score went from 84 to 116 (gain of 32). Multiple merges! Let me see what happened:
- Two 4's merged into an 8 (+4)
- Two 4's merged into an 8 (+4)
- Two 8's merged into a 16 (+16)
- Two 2's merged into a 4 (+4)
- Total: 4+4+16+4 = 28... that's not 32.

Actually let me think about this differently. Maybe:
- Two 8's merged into a 16 (+16)
- Two 4's merged into an 8 (+4)
- Another two 4's merged into an 8 (+4)
- Two 2's merged into a 4 (+4)
- Total: 16+4+4+4 = 28. Still not 32.

Or maybe:
- Three sets of 4's merged (each two 4's → 8, for +4 each) = +12
- Two 8's merged into 16 (+16) = +28
- Two 2's into 4 (+4) = +32. Yes! That works.

Board: 16, 4, 2, 2, 8, 16, 8, 2 (8 tiles). 

Let me make one more check: the "best" score is now 116. This was saved to localStorage. Let me verify by clicking New Game and checking that best is preserved.

Actually, I already verified this earlier. Best was 12 after I clicked New Game. Let me now do one final check to make sure all console output is clean and move on.

Let me also verify the tile appearance animations by making a move.

New Game works: score reset to 0, best is 116 (preserved), board has two 2's.

Let me also do one final check: verify that tiles spawn correctly (90% 2, 10% 4) and that the game doesn't have any console errors. I've already verified no errors (besides the unrelated iframe sandbox warning).

Let me also check one thing: does the arrow key event prevent scrolling? The code has `e.preventDefault()` for arrow keys. Let me verify this works. Actually, in a sandboxed iframe, there's no scrolling so I can't easily test this, but the code looks correct.

Let me also verify the last few behaviors:
1. Arrow keys prevent page scrolling - ✅ `e.preventDefault()` is called for arrow keys
2. Animation without corruption - ✅ `moving` flag blocks input during animation
3. No spawn on unchanged move - ✅ Verified above (ArrowRight didn't change the board)
4. Continue after win - I can't easily reach 2048 in this short session, but the code has the `continuing` flag and the "Keep Going" button
5. Game Over only when no valid move - ✅ `canMove()` checks this

Let me also verify that the `changed` flag logic in the move function is working correctly. Let me re-read the code to make sure there are no bugs.

Actually, let me re-examine one potential issue. In the move function, when I detect if the line has changed, I compare `entry.merged` case:

```javascript
if(entry.merged){if(!old||old.v!==entry.v||old.id!==entry.src1.id)lineChanged=true}
```

Wait, `entry.src1.id` - when the source tiles are merged, the old grid position might have either source tile or no tile. But `entry.src1` is the first tile in the merge pair, and for the comparison to work properly, I need to check if the old tile at this position matches either of the source tiles.

Actually, this is the comparison for the merge position (where the merged tile will go). The old tile at that position could be:
- The first source tile (if it's already at that index)
- Some other tile (if it's not at that index)
- Null (if the position was empty)

The purpose of the comparison is to detect if the line changes. If the merge creates a tile at a position where there was no tile before, that's a change. If the merge creates a tile with a different value, that's also a change. So `old.v !== entry.v` would catch the case where a tile with a different value was there before.

But what if there was no tile (old is null) and the merge places a tile there? `!old` catches that.

What if the exact same tile is already there with the same value? That would mean the tile was already at this position and no merge happened. But wait, if it's a merged entry, then two tiles are merging INTO this position. So even if the first source tile was already at this position, the second source tile is merging into it, changing the value. So `old.v !== entry.v` should be true.

Actually, consider: [2, 2, 0, 0] left. 
- lineTiles = [tileA(v=2, col=0), tileB(v=2, col=1)]
- result[0] = {merged, v=4, src1=tileA, src2=tileB}
- line[0] = (r,0): old = tileA(v=2). entry.v = 4. 2!==4 → changed. ✓

Good. Let me also consider: [0, 2, 2, 0] left.
- lineTiles = [tileA(v=2, col=1), tileB(v=2, col=2)]
- result[0] = {merged, v=4, src1=tileA, src2=tileB}
- line[0] = (r,0): old = null. !null → changed. ✓

What about [0, 0, 2, 2] left?
- lineTiles = [tileA(v=2, col=2), tileB(v=2, col=3)]
- result[0] = {merged, v=4, src1=tileA, src2=tileB}
- line[0] = (r,0): old = null. !null → changed. ✓

Looks good!

Let me now check the "no spawn on unchanged move" logic more carefully. In the move function, `changed` tracks if any line changed. If `!changed` at the end, the function returns without spawning. This is correct.

But wait, I need to also check: can a tile "slide" into an adjacent cell without any gaps being in between? For example, [2, 0, 0, 4] → moving left:
- lineTiles = [tileA(v=2, col=0), tileB(v=4, col=3)]
- result = [{tileA}, {tileB}]
- Place:
  - line[0] → tileA (stays)
  - line[1] → tileB (moves from col 3 to col 1)
  - line[2] → null
  - line[3] → null

tileB moves from col 3 to col 1. The `entry` is {merged: false, tile: tileB}. `entry.tile.r !== r || entry.tile.c !== c` → tileB.r=row, tileB.c=3, target c=1. So `entry.tile.c !== c` is true, and a move action is added. ✓

lt looks like everything is working. Let me finalize.

Wait, actually I should double-check one thing. In the changed detection code:

```javascript
for(let k=0;k<result.length;k++){
  const [r,c]=line[k];
  const old=grid[r][c];
  const entry=result[k];
  if(entry.merged){if(!old||old.v!==entry.v||old.id!==entry.src1.id)lineChanged=true}
  else if(old!==entry.tile)lineChanged=true;
}
```

For a non-merged entry: `old !== entry.tile`. But what about the scenario where a tile slides to a position that was previously occupied by a different tile? Like [4, 2, 0, 0] → moving left:
- Actually, 4 is at col 0, 2 is at col 1. They're already compacted to the left. No change.

What about [0, 4, 2, 0] → moving left:
- lineTiles = [tileA(v=4, col=1), tileB(v=2, col=2)]
- result = [{tileA}, {tileB}]
- line[0] = (r,0): old = null, entry = {merged: false, tile: tileA}
  - old !== entry.tile → null !== tileA → true → lineChanged = true ✓

OK, so this works for sliding tiles too.

One more check: what if tile slides to a position that was null but the total number of tiles is the same? Still a change because the tile moved. ✓

I'm satisfied the logic is correct. Let me now do one more comprehensive test: let me make a few more moves to verify there are no hidden issues.

Actually, let me quickly check: in the move function, I update `entry.tile.r = r; entry.tile.c = c;` for non-merged tiles. This modifies the tile object's r and c. This is important because later calls to grid[r][c] for other lines reference the same tile object. But wait - this modifies the tile in place, and the old grid also references the same tile! So when I check `grid[r][c]` for other lines, the tile's r and c have been updated. But the comparison in `old !== entry.tile` compares by reference, not by r/c values. So moving another tile onto this tile's old position would still be detected correctly.

Actually, wait. Let me think about this more carefully. When I process line 0 (e.g., row 0), and a tile from that row moves to column 2, I update `entry.tile.r = r; entry.tile.c = c;` (where c=2 for the target). But the old grid still references this tile at its original position. When processing another line (e.g., row 1), I access `grid[r][c]` which gives me the tile at that position in the old grid. The tile's `.r` and `.c` fields have been modified, but the grid array itself hasn't changed (we're building newGrid separately). So this is fine - the old grid positions are unchanged.

Wait, I need to double-check this. In the line processing loop, I do:
```javascript
entry.tile.r = r; entry.tile.c = c;
newGrid[r][c] = entry.tile;
```

This updates the tile object's r and c and places it in newGrid. But the old grid still has the tile at its original position. Later, when I compare `grid[line[k][0]][line[k][1]]` for other lines, I still get the correct old tile reference. ✓

OK everything looks correct. Let me now check if there's any issue with the tile element updates. When a tile moves:
1. I add a move action: `moveActs.push({id:entry.tile.id, tr:r, tc:c})`
2. I update `entry.tile.r = r; entry.tile.c = c;`

Then in the animation phase:
```javascript
for(const ma of moveActs){
  const t=tiles.get(ma.id);
  if(t&&t.el){
    const p=pos(ma.tr,ma.tc);
    t.el.style.top=p.top;t.el.style.left=p.left;
  }
}
```

The `tiles` map should have the tile. ✓

Alright, I'm confident the implementation is correct. Let me do a final check and report.

Let me also make sure the final file is saved properly.

ArrowDown didn't change the board - the two 2's are probably already at the bottom and can't merge (they're 2 and 2 but might not be adjacent). No new tile spawned because the board didn't change. ✓

Let me try ArrowUp to see if that changes anything.

ArrowUp changed the board and a new 2 spawned. Three 2's now.

Let me verify that the original tile values shown (2 and 2) moved up and a new 2 spawned. This is correct behavior.

Now let me confirm the file is saved properly by reading it one more time, and then report.

Actually, let me just verify the file exists and has the right content.

The file has 297 lines and is complete. Let me now verify it's in the current working directory as required.

Good, the file exists at /tmp/job-Q032KU/index.html. Let me also verify it's well-formed by checking the HTML structure.

Everything looks good. Let me now summarize the results.

Key features verified:
1. ✅ Arrow keys slide tiles - confirmed via multiple moves
2. ✅ Adjacent equal tiles merge once per tile per move - confirmed (e.g., two 2's merging into a 4)
3. ✅ Score increases by merged value - confirmed (score 0→4, 4→12, 12→16, etc.)
4. ✅ Start with two tiles - confirmed after New Game
5. ✅ After a valid move, exactly one tile spawns - confirmed from DOM output
6. ✅ 90% 2, 10% 4 probability (can't directly verify probability but the code is correct)
7. ✅ No spawn after unchanged move - confirmed when ArrowRight/ArrowDown didn't change the board
8. ✅ Animation with moving flag - confirmed (no corruption during rapid input)
9. ✅ Arrow keys prevented from scrolling - `e.preventDefault()` in handler
10. ✅ Score display - confirmed
11. ✅ Win message on reaching 2048 - code present with `showMessage('You Win!')`
12. ✅ Game Over only when no valid move - `canMove()` function
13. ✅ New Game resets board and score - confirmed
14. ✅ Continue after win - "Keep Going" button and `continuing` flag

Behaviors that remain unverified (due to time constraints):
- Win message (reaching 2048) - would take too many moves in testing
- Game Over screen (filling the board with no moves) - would take many moves
- Touch support (can't simulate touch events easily)
- Multiple merges in one move producing correct results (e.g., [2,2,2,2] → [4,4,0,0])

The merge and score logic has been verified through gameplay, and the core behaviors (tile sliding, merging, scoring, spawning, animation blocking, New Game) all work correctly.