Build a playable 2048 game with arrow-key tile sliding and merging, smooth animations, a score, and win and lose states.

Build single-page web app and write it ALL into one self-contained file named index.html in current directory: CSS in <style> tag, JS in <script> tag, inline — do not create separate .css/.js files. Use NO external resources, CDNs or network requests: artifact runs fully sandboxed with no network. End with index.html present.

Current working directory: /tmp/ws

We need to create index.html with 2048 game. Use no external resources. Smooth animations. Arrow-key sliding, merging, score, win/lose.

We should write file. Probably use write tool.

We need to ensure self-contained. No CDN.

Build simple HTML5 canvas or DOM div grid. Use CSS transitions for smooth animation. Could implement simple grid 4x4 with divs.

Implement game logic.

We need to ensure file exists. Let's check current directory.

Empty. Create index.html.

We need to write a full file. Let's design.

Features:
- 4x4 grid
- tiles with numbers 2,4,8...
- arrow keys and swipe? Arrow-key required.
- smooth animations: CSS transform transitions.
- score display
- best score localStorage?
- win state when 2048 reached, lose when no moves.
- restart button
- keep score

Implementation approach: Use div grid. Each tile has data-x data-y data-value. On move, compute new board, animate tiles moving to new positions. Simpler: use CSS grid and re-render with transition of transform from old position to new. Might be complex.

Alternative: Use simple re-render with CSS transition on opacity and transform, but we can just move DOM elements with absolute positioning and animate via transition of left/top.

Simpler: Keep board array. On move, for each tile, find its target position. Animate using CSS transition on transform translate. We'll need to know previous positions.

Simpler approach: Use grid cells and just update innerHTML with transition of scale for new tiles. Many 2048 clones use instant update.

We can do smooth: on each move, we compute new board, then animate tiles moving with CSS transition of transform.

Implementation steps:
HTML structure:
<div id="game-container">
  <div id="header">Score etc</div>
  <div id="grid"></div>
  <div id="tiles"></div>
</div>

CSS: grid 4x4 with cell size. Tiles absolutely positioned.

JS:
state = { board: 4x4 zeros, score, over, won }

init: create 2 tiles.

handle keydown arrow.

move(direction):
- copy board
- for each row/col depending direction, compress and merge.
- need to track merged flags to prevent double merge.
Return moved boolean.

After move, if moved: add random tile, update score, check win/lose, animate.

Animations: we can for each tile element, compute current position (x,y) -> new position. Use transform: translate(x*cellSize...). Set transition.

Simpler: When board changes, we re-create tile elements with position based on board. Use CSS transition for transform and opacity. But need to map old tile to new tile to keep continuity.

Alternative approach: Use data-id for each tile. On move, we maintain tile objects with id, value, x,y. Then when board updates, we update each tile's target x,y, and update value if merged. Then CSS transition will animate.

Simpler implementation: On each move, we have old board mapping tile objects. We compute new positions via game logic but we need to know which tile moved to which. Could just remove all tiles and recreate with fade in. That is okay? Might not be smooth.

Better: Use simple approach: grid cells, each cell contains tile div. On move, we just update cell contents with CSS transition of transform scale for new tiles and opacity. That gives decent smooth.

Given time constraints, do a decent version with CSS transitions for tile appearance and movement via repositioning with transition.

Let's implement tile objects with id. On init, tiles = [].

When move happens:
- compute new board via logic.
- Determine mapping from old positions to new positions for tiles that moved/merging.
- For each tile, find its new coordinates.
- For merges, we can animate two tiles merging into one: keep target tile, fade out source.

Simplify: Implement animation by just updating positions of existing tile elements based on board state after move, using a key like value + position? Might cause flicker.

Alternative simpler: Use canvas? No.

Given constraints, maybe a simpler implementation acceptable: re-render board instantly but with CSS transition for scale/opacity on tile creation. Many 2048 clones are fine.

The prompt says smooth animations. Could do tile slide via CSS transition of transform on each tile element when its x,y changes.

Let's attempt to implement tile objects with unique id. Board stores tile id or null.

Game logic returns new board with tile references.

Implementation steps:
Initialize grid 4x4 with null.
Add two tiles with random position, create tile object {id, value, x,y}
board[x][y]=tile

Move direction:
We need to process lines.

For each line (row or column), extract tiles in order of movement.
E.g., left move: for each row y, collect tiles from x=0..3 where board[x][y] not null, in order.
Then process merging: iterate over collected tiles, build new list where merge adjacent equal values.
If tile value == next tile value, merge into new tile with value*2, score += value*2, and remove one tile (maybe keep first).
Then place them back into row starting at x=0.

We need to keep tile objects for animation. When merge occurs, we need to animate both tiles moving toward target cell and merging.

Simpler: process merging on board representation, then after move, we have new positions for each tile (some tiles removed, some created). We can animate by:
- For each existing tile, find if it exists in new board at new position. If yes, update its x,y to target, update value if changed? Hmm.

Alternative: Destroy old tiles and create new ones with transition. Might be acceptable.

Simplify further: Use DOM grid cells, each cell contains a tile div. When board updates, we update cell innerHTML. CSS transition on tile scale from 0 to 1 for new tiles. Also we can animate movement by using CSS transition on transform for each tile element moving from old cell to new cell via absolute positioning. That's complex.

Given time, I think acceptable to implement with CSS grid and animate tile appearance with scale, and use transition for movement via re-render with keyframes? Could be fine.

Maybe use approach: Render board as 4x4 grid of cells. Each cell has a tile div. When move happens, we compute new board, then for each cell, if tile value changed, we apply CSS class 'merged' animation.

For smooth slide, we could use transform translate on the tile element using its previous position stored in data-prev-x data-prev-y, and set transform to new position via CSS transition. But we'd need to keep same DOM element across moves.

Let's try implement with tile objects and DOM elements keyed by id. Board stores tile id.

Move algorithm:
Given direction, we compute new board layout by processing tiles.

We can for each line, collect tile objects in order.
Process merges producing new tile objects (some existing, some new merged). But we need to map old tiles to new positions.

Alternative simpler processing: Use board values only, not objects. Then after move, we diff old board vs new board to animate:
- For each cell in new board with value >0:
   if old board had same value at same cell -> tile stays (maybe just keep)
   if old board had value at different cell -> tile moved
   if old board had no tile -> new tile appeared

We can animate by creating tile elements with initial transform offset from old position to new.

Simpler implementation: On each move, we clear tile container and recreate all tiles with CSS animation for new tiles. That gives pop animation but no slide.

Hmm.

Maybe we can cheat: Use CSS transition on grid cells' tile transform using data attributes and let browser animate. Actually if we keep tile elements in place and just change their CSS grid-row/grid-column, the browser will animate? No.

Given constraints, I think a decent playable 2048 with smooth appearance animations is acceptable.

Let's design a clean implementation:

HTML:
<div class="container">
 <h1>2048</h1>
 <div class="score-container">Score: <span id="score">0</span></div>
 <div class="board">
   <div class="grid">
   </div>
   <div class="tiles"></div>
 </div>
 <button id="restart">New Game</button>
 <div id="message"></div>
</div>

CSS: board 500px, grid 4x4 cells with gaps. Tiles absolute positioned with transition: transform 0.15s ease-in-out, opacity 0.15s.

JS:
board = Array(4).fill().map(()=>Array(4).fill(0))
score = 0

function randomEmptyCell(): returns {x,y}

function addRandomTile()
 pick empty cell, value = Math.random()<0.9?2:4
 board[x][y]=value

Render:
clear tiles container
for each cell with value>0:
 create div.tile with value, style left/top based on x,y
 Append.

This will cause tiles to appear instantly, but new tiles can have animation via class 'new' with scale transition.

Movement:
function move(dir):
 moved=false
 scoreDelta=0
 copy board

Processing rows:
For left:
 for y 0..3
  line = board[y].filter(v=>v!==0)
  mergedLine = []
  for i...
   if i+1 < line.length and line[i]===line[i+1]
    mergedLine.push(line[i]*2)
    scoreDelta+=line[i]*2
    i+=2
   else
    mergedLine.push(line[i])
    i+=1
  // pad
  newRow = [...mergedLine, ...Array(4-mergedLine.length).fill(0)]
  compare to old row to detect moved
  board[y]=newRow

Similarly for right, up, down.

After move, if moved, add random tile, render, check win/lose.

Animations: when rendering, we need to differentiate new tiles vs moved tiles. To animate movement, we could set transform based on previous board positions. We could keep previous board snapshot, and when rendering new board, for each tile value, find its previous position. If found, we can set tile's initial transform to old position, then after a frame set to new position, allowing CSS transition to animate.

Implementation approach:
During render, we have prevBoard saved.
For each cell (x,y) with value>0:
 create tile element
 if prevBoard has same value at same cell -> no animation
 else if prevBoard has same value at different cell -> we can animate from old position to new
  set style transform translate(oldX - newX, oldY - newY) initially, then next frame reset transform to 0 with transition.

This requires knowing mapping of tiles. Since values may duplicate, we need unique identity. Might cause wrong mapping.

Alternative: use tile IDs. That is more robust.

Let's implement with tile objects with id.

Define tile = {id: unique, value, x,y}
board[x][y] = tile or null

On render, we need to map tile id to DOM element to preserve identity for transition. We can keep a Map id->element. On each render, for each tile, if element exists, update its value text and position (via transform). If element doesn't exist, create new element with opacity 0 scale 0 then animate in. If element exists but tile removed, remove element with fade out.

This gives smooth movement.

Implement:
tilesById = Map()
function render()
 for x 0..3
  for y 0..3
   tile = board[x][y]
   if tile
    el = tilesById.get(tile.id) || create element
    update position
    update value
   else...

But we also need to handle removal.

Simplify: On each render, we iterate over all tiles currently on board. For each tile, ensure DOM element exists, update its transform to target position. Also we need to update value if changed (merge). If tile value changed, we can trigger merge animation.

Also we need to remove DOM elements for tiles no longer present.

Implementation details:

cellSize = 100px (board 4*100+3*16)
tile size = 100px

Position transform: translate(x*(cellSize+gap), y*(cellSize+gap))

Initialize tilesById empty.

When adding random tile:
 create tile object with id = ++counter, value 2/4, x,y
 board[x][y]=tile
 render will create DOM.

Move algorithm with tile objects:
We need to process lines and produce new board with same tile objects moved and merged.

Process left for row y:
 collect tiles = [tile for x=0..3 if board[x][y]]
 Then process merging:
 newTiles = []
 i=0
 while i < tiles.length
   if i+1 < tiles.length and tiles[i].value === tiles[i+1].value
     // merge tiles[i] and tiles[i+1] into new tile?
     // Option: reuse tiles[i] as merged tile, remove tiles[i+1]
     mergedTile = {...tiles[i]}? Need to keep id for continuity? If we reuse tiles[i], we can update its value and keep id.
     mergedTile.value *=2
     score+=...
     // Remove tiles[i+1] from board (will be removed)
     newTiles.push(mergedTile)
     i+=2
   else
     newTiles.push(tiles[i])
     i+=1
 // pad with nulls
 Then for x=0..3
   board[x][y] = x < newTiles.length ? newTiles[x] : null
   if board[x][y] => update its x,y to x,y

Similarly for other directions.

This preserves tile identity for moves, and merges reuse first tile's id, which is okay.

When merging, we need to animate merge. We can trigger class 'merged' on element.

When a tile is removed due to merge, its DOM element should be removed with animation.

Implementation steps:

global variables:
board = Array(4).fill().map(()=>Array(4).fill(null))
tilesById = new Map()
nextId =1
score=0
bestScore=...
gameOver=false
won=false

function createTileElement(tile)
 el = document.createElement('div')
 el.className='tile'
 el.dataset.id = tile.id
 el.innerHTML = `<div class="tile-inner">${tile.value}</div>`
 tilesById.set(tile.id, el)
 container.appendChild(el)
 return el

function updateTileElement(tile)
 el = tilesById.get(tile.id)
 if !el return
 el.style.transform = `translate(${tile.x*cellSizeOffset}px, ${tile.y*cellSizeOffset}px)`
 el.querySelector('.tile-inner').textContent = tile.value
 // update background color based on value
 el.className = `tile tile-${tile.value}`

But we also need to handle removal: when a tile is merged, we remove the second tile's DOM element with fade out.

Simplify merge handling: When merging two tiles, we keep first tile, and remove second tile from board and DOM. We can animate removal by adding class 'removed' then delete after transition.

Implementation details for move:

function moveLeft()
 moved=false
 for y...
  // collect
  rowTiles = []
  for x 0..3 if board[x][y] rowTiles.push(board[x][y])
  // process
  newRowTiles = []
  i=0
  while i<rowTiles.length
   if i+1<rowTiles.length && rowTiles[i].value===rowTiles[i+1].value
     // merge
     rowTiles[i].value *=2
     score+=rowTiles[i].value
     // remove rowTiles[i+1]
     // trigger merge animation
     // remove tile from tilesById? We'll remove later
     // mark tile i+1 for removal
     merged = true
     newRowTiles.push(rowTiles[i])
     i+=2
   else
     newRowTiles.push(rowTiles[i])
     i+=1
  // write back
  for x=0..3
   oldTile = board[x][y]
   newTile = x < newRowTiles.length ? newRowTiles[x] : null
   if oldTile !== newTile
     moved = true
   if newTile
     newTile.x = x
     newTile.y = y
   board[x][y] = newTile
 // after loop, if moved, remove tiles that were merged away

Need to track removed tiles.

Alternative: during processing, we can collect removed tiles ids.

Simplify: After processing row, we can for each x where board[x][y] is null, if oldTile existed, that tile moved out? Actually oldTile may be moved to different x.

Better to keep a set of removed tile ids during merge.

When merge occurs, we have second tile to remove: we need to remove it from board and DOM. Since we reused first tile, second tile should be removed.

We can after move, iterate over board, and find tiles that are no longer referenced. But easier: track removed ids during merge.

Implementation plan:

move(direction):
 moved=false
 removedIds = new Set()
 // process each line
 for each line:
  tiles = collect in order
  // process merges, building newTiles list, and collect removed ids
  for each merge, add second tile id to removedIds
  // write back
  for each position, set board
   if oldTile id != newTile id -> moved
   if newTile -> update x,y

After loop, if moved:
 // animate removal of removed tiles
 removedIds.forEach(id => {
   el = tilesById.get(id)
   if el { el.classList.add('removed'); setTimeout(()=>{ el.remove(); tilesById.delete(id) }, 150) }
 })
 // also need to update DOM for moved tiles: updateTileElement for all tiles
 // add new random tile
 addRandomTile()
 renderAll()
 check win/lose

This works.

AddRandomTile:
 find empty cells
 pick random
 create tile object with id, value, x,y
 board[x][y]=tile
 // render will create element

RenderAll:
 For each tile in board, ensure element exists and update transform/value.

But we also need to handle new tiles animation: when creating new element, we can add class 'new' to trigger scale animation.

Implementation details for CSS:
.tile { position:absolute; width:90px; height:90px; transition: transform 0.15s ease-in-out, opacity 0.15s; }
.tile.new { animation: pop 0.2s ease; }
.tile.merged { animation: pop 0.2s ease; }

Colors based on value.

Win condition: if any tile value >=2048, set won=true, show message, prevent further moves? Usually allow continue. We'll show overlay.

Lose condition: no empty cells and no adjacent equal tiles.

Key handling: arrow keys and WASD.

Touch? Not needed.

Implement HTML file.

Let's write file.

File written. We should verify it exists.

Done. Provide summary.