Tetris · lfm-2.5-24b-a2b

We need to build a playable falling-block Tetris game in a single HTML file. Let me plan the implementation:

1. Canvas-based game with 10 columns x 20 visible rows
2. All 7 tetrominoes (I, O, T, S, Z, J, L) with legal spawn positions
3. Controls: Left/Right move, Up rotate clockwise, Down soft drop, Space hard drop
4. Wall kicks optional - reject blocked rotations
5. Lock pieces, clear complete rows, move rows down, spawn next piece
6. Display score, cleared lines count, level, next-piece preview
7. Scoring: 100/300/500/800 for 1/2/3/4 lines cleared, multiplied by level
8. Level increases gravity speed every 10 cleared lines
9. Game Over when new piece can't spawn
10. Pause/Resume and Restart

Let me design the structure:

- HTML: canvas element, maybe some UI elements (score, level, next piece preview)
- CSS: styling for the page
- JS: game logic

The board is 10 columns x 20 visible rows. We'll use a grid of cells. Each cell can be empty or have a color.

Tetromino shapes (standard):
- I: [[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]] - spawn at top center
- O: [[1,1],[1,1]]
- T: [[0,1,0],[1,1,1],[0,0,0]]
- S: [[0,1,1],[1,1,0],[0,0,0]]
- Z: [[1,1,0],[0,1,1],[0,0,0]]
- J: [[1,0,0],[1,1,1],[0,0,0]]
- L: [[0,0,1],[1,1,1],[0,0,0]]

Spawn position: typically centered at column 3 (0-indexed), row 0 or -1 (above the board).

Let me think about the coordinate system:
- Board: 10 wide, 20 tall
- Cell size: let's say 30px
- Canvas: 300x600 for the board area

Actually, let me make it responsive. I'll use a canvas that's sized appropriately.

Game loop: update gravity (move piece down at intervals based on level), render.

Controls:
- Arrow keys: left/right, up (rotate), down (soft drop), space (hard drop)
- P: pause/resume
- R: restart

Scoring:
- Single line: 100 * level
- Double: 300 * level
- Triple: 500 * level
- Tetris (4 lines): 800 * level

Level up: every 10 lines cleared.

Let me write this out. I'll create a single index.html file.

Key data structures:
- `board`: 2D array [row][col], each cell is null or a color string
- `currentPiece`: { shape, color, x, y }
- `nextPiece`: the next piece type
- `score`, `linesCleared`, `level`
- `gameState`: 'playing', 'paused', 'gameover'

Piece representation:
```js
const SHAPES = {
  I: { matrix: [[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]], color: '#00f0f0' },
  O: { matrix: [[1,1],[1,1]], color: '#f0f000' },
  T: { matrix: [[0,1,0],[1,1,1],[0,0,0]], color: '#a000f0' },
  S: { matrix: [[0,1,1],[1,1,0],[0,0,0]], color: '#00f000' },
  Z: { matrix: [[1,1,0],[0,1,1],[0,0,0]], color: '#f00000' },
  J: { matrix: [[1,0,0],[1,1,1],[0,0,0]], color: '#0000f0' },
  L: { matrix: [[0,0,1],[1,1,1],[0,0,0]], color: '#f0a000' }
};
```

Rotation: rotate matrix 90 degrees clockwise. For a matrix, new[i][j] = old[n-1-j][i].

Collision detection: check if the piece's cells overlap with occupied cells or go out of bounds.

Locking: when a piece can't move down anymore (collision below), lock it into the board, check for full rows, clear them, update score/level, spawn next piece.

Gravity: timer-based. At higher levels, the interval decreases.

Let me code this up. I'll keep it simple but functional.

Canvas layout:
- Main board: 10 cols x 20 rows
- Cell size: 30px → board is 300x600
- Some padding/margin

UI layout:
- Top: title
- Middle: canvas (board)
- Bottom: score display, next piece preview, controls info

Let me write the HTML structure:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tetris</title>
  <style>
    /* styles */
  </style>
</head>
<body>
  <h1>Tetris</h1>
  <div id="game-container">
    <canvas id="board"></canvas>
    <div id="sidebar">
      <div>Score: <span id="score">0</span></div>
      <div>Lines: <span id="lines">0</span></div>
      <div>Level: <span id="level">1</span></div>
      <canvas id="next" width="120" height="120"></canvas>
      <div id="controls">
        <p>← → Move</p>
        <p>↑ Rotate</p>
        <p>↓ Soft Drop</p>
        <p>Space Hard Drop</p>
        <p>P Pause</p>
        <p>R Restart</p>
      </div>
    </div>
  </div>
  <script>
    // game code
  </script>
</body>
</html>
```

Now let me implement the JavaScript carefully.

Game state:
```js
let board = []; // 20 rows x 10 cols
let currentPiece = null;
let nextPieceType = null;
let score = 0;
let linesCleared = 0;
let level = 1;
let gameState = 'playing'; // playing, paused, gameover
let dropInterval = 1000; // ms, decreases with level
let lastDropTime = 0;
```

Piece class/object:
```js
function createPiece(type) {
  const def = SHAPES[type];
  return {
    shape: def.matrix.map(row => [...row]),
    color: def.color,
    x: Math.floor(BOARD_COLS / 2) - Math.floor(def.matrix[0].length / 2),
    y: 0
  };
}
```

Actually, for rotation, I need to compute the rotated matrix. Let me write a helper:

```js
function rotateMatrix(matrix) {
  const n = matrix.length;
  const rotated = [];
  for (let i = 0; i < n; i++) {
    rotated[i] = [];
    for (let j = 0; j < n; j++) {
      rotated[i][j] = matrix[n - 1 - j][i];
    }
  }
  return rotated;
}
```

Collision check:
```js
function collides(piece, board) {
  for (let r = 0; r < piece.shape.length; r++) {
    for (let c = 0; c < piece.shape[r].length; c++) {
      if (piece.shape[r][c]) {
        const boardX = piece.x + c;
        const boardY = piece.y + r;
        if (boardX < 0 || boardX >= BOARD_COLS || boardY >= BOARD_ROWS) return true;
        if (boardY >= 0 && board[boardY][boardX]) return true;
      }
    }
  }
  return false;
}
```

Wait, I need to handle negative Y (pieces spawn above the board). Let me adjust: boardY >= 0 means it's on the board. If piece.y is negative, it's above the board and shouldn't collide with anything except the board boundaries.

Actually, for collision, I should only check cells that are within the board. If boardY < 0, skip the collision check (it's above the board).

```js
function collides(piece, board) {
  for (let r = 0; r < piece.shape.length; r++) {
    for (let c = 0; c < piece.shape[r].length; c++) {
      if (piece.shape[r][c]) {
        const boardX = piece.x + c;
        const boardY = piece.y + r;
        if (boardX < 0 || boardX >= BOARD_COLS || boardY >= BOARD_ROWS) return true;
        if (boardY >= 0 && board[boardY][boardX]) return true;
      }
    }
  }
  return false;
}
```

Locking:
```js
function lockPiece() {
  for (let r = 0; r < currentPiece.shape.length; r++) {
    for (let c = 0; c < currentPiece.shape[r].length; c++) {
      if (currentPiece.shape[r][c]) {
        const boardY = currentPiece.y + r;
        const boardX = currentPiece.x + c;
        if (boardY >= 0 && boardY < BOARD_ROWS && boardX >= 0 && boardX < BOARD_COLS) {
          board[boardY][boardX] = currentPiece.color;
        }
      }
    }
  }
  clearLines();
  spawnPiece();
}

function clearLines() {
  let lines = 0;
  for (let r = BOARD_ROWS - 1; r >= 0; r--) {
    if (board[r].every(cell => cell !== null)) {
      board.splice(r, 1);
      board.unshift(new Array(BOARD_COLS).fill(null));
      lines++;
      r++; // recheck this row index
    }
  }
  if (lines > 0) {
    // scoring
    const points = [0, 100, 300, 500, 800][lines];
    score += points * level;
    linesCleared += lines;
    // level up every 10 lines
    const newLevel = Math.floor(linesCleared / 10) + 1;
    if (newLevel > level) {
      level = newLevel;
      dropInterval = Math.max(100, 1000 - (level - 1) * 100); // faster gravity
    }
  }
}
```

Spawning:
```js
function spawnPiece() {
  if (!nextPieceType) {
    nextPieceType = getRandomPiece();
  }
  currentPiece = createPiece(nextPieceType);
  if (collides(currentPiece, board)) {
    gameState = 'gameover';
  }
}
```

Gravity:
```js
function update(dt) {
  if (gameState !== 'playing') return;
  if (Date.now() - lastDropTime >= dropInterval) {
    if (!collides(currentPiece, board)) {
      currentPiece.y++;
    } else {
      lockPiece();
    }
    lastDropTime = Date.now();
  }
}
```

Actually, I should use a simpler approach: track time and move the piece down at intervals.

Let me reconsider the timing. In the game loop, I'll use requestAnimationFrame and check elapsed time.

Now, rendering:
- Draw board: for each cell, fill with color if occupied, else dark gray
- Draw current piece: same way
- Draw ghost piece? Optional, skip.
- Next piece preview: draw on a small canvas

Let me set up the canvas sizes:
- Board: 10 * CELL_SIZE = 300px wide, 20 * CELL_SIZE = 600px tall
- Next piece canvas: 4 * CELL_SIZE = 120px square

CELL_SIZE = 30.

Now, let me write the complete code.

For the next piece preview, I'll draw the piece on a small canvas.

Let me also add ghost piece (hard-drop preview) - actually, let me include it as it's useful and not too complex. The ghost is the position where the piece would land if hard-dropped.

Actually, let me keep it simpler: just show the next piece preview.

Controls display: I'll put the score, lines, level, and next piece canvas in the sidebar.

Let me write the full HTML now.

Actually, let me think about the board coordinates more carefully.

Board: rows 0-19 (top to bottom), columns 0-9 (left to right).
Piece: x is column index, y is row index (0 = top).

When a piece spawns, y = 0 (or maybe -1 so it appears to fall from top). Let me start at y = 0. If the piece overlaps immediately, it's game over.

Spawn position: x = Math.floor((BOARD_COLS - pieceWidth) / 2). For I piece (width 4), x = 3. For others (width 3), x = 3.5 → 3. Actually, standard Tetris spawns are centered.

Let me calculate:
- I: width 4, x = (10-4)/2 = 3
- O: width 2, x = 4
- Others: width 3, x = 3

y: usually starts at -1 or 0. If we start at y=0, the piece is immediately on the board. Let me start at y=0 and if it collides, game over.

Hmm, but for rotation, the piece might temporarily be partially off-screen. Let me allow y to be negative during spawn/rotation, and only check collisions against the board for cells with boardY >= 0.

OK, let me finalize the code structure.

```js
const BOARD_COLS = 10;
const BOARD_ROWS = 20;
const CELL_SIZE = 30;

// Tetromino definitions
const SHAPES = {
  I: { matrix: [[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]], color: '#00f0f0' },
  O: { matrix: [[1,1],[1,1]], color: '#f0f000' },
  T: { matrix: [[0,1,0],[1,1,1],[0,0,0]], color: '#a000f0' },
  S: { matrix: [[0,1,1],[1,1,0],[0,0,0]], color: '#00f000' },
  Z: { matrix: [[1,1,0],[0,1,1],[0,0,0]], color: '#f00000' },
  J: { matrix: [[1,0,0],[1,1,1],[0,0,0]], color: '#0000f0' },
  L: { matrix: [[0,0,1],[1,1,1],[0,0,0]], color: '#f0a000' }
};
```

Rotation function:
```js
function rotateMatrix(matrix) {
  const n = matrix.length;
  const rotated = [];
  for (let i = 0; i < n; i++) {
    rotated[i] = [];
    for (let j = 0; j < n; j++) {
      rotated[i][j] = matrix[n - 1 - j][i];
    }
  }
  return rotated;
}
```

Main game functions:

```js
let board = [];
let currentPiece = null;
let nextPieceType = null;
let score = 0;
let linesCleared = 0;
let level = 1;
let gameState = 'playing';
let dropInterval = 1000;
let lastDropTime = 0;
let animationId = null;

function init() {
  board = Array.from({length: BOARD_ROWS}, () => Array(BOARD_COLS).fill(null));
  score = 0;
  linesCleared = 0;
  level = 1;
  dropInterval = 1000;
  nextPieceType = getRandomPiece();
  spawnPiece();
  updateUI();
}
```

Piece creation:
```js
function createPiece(type) {
  const def = SHAPES[type];
  return {
    type: type,
    shape: def.matrix.map(row => [...row]),
    color: def.color,
    x: Math.floor((BOARD_COLS - def.matrix[0].length) / 2),
    y: 0
  };
}
```

Spawn:
```js
function spawnPiece() {
  if (!nextPieceType) {
    nextPieceType = getRandomPiece();
  }
  currentPiece = createPiece(nextPieceType);
  if (collides(currentPiece, board)) {
    gameState = 'gameover';
    console.log('Game Over');
  }
}
```

Collision:
```js
function collides(piece, board) {
  for (let r = 0; r < piece.shape.length; r++) {
    for (let c = 0; c < piece.shape[r].length; c++) {
      if (piece.shape[r][c]) {
        const bx = piece.x + c;
        const by = piece.y + r;
        if (bx < 0 || bx >= BOARD_COLS || by >= BOARD_ROWS) return true;
        if (by >= 0 && board[by][bx]) return true;
      }
    }
  }
  return false;
}
```

Rotate:
```js
function rotatePiece() {
  const rotated = rotateMatrix(currentPiece.shape);
  const originalX = currentPiece.x;
  const originalY = currentPiece.y;
  currentPiece.shape = rotated;
  currentPiece.x = originalX;
  currentPiece.y = originalY;
  if (collides(currentPiece, board)) {
    // undo rotation
    currentPiece.shape = rotateMatrix(rotated); // rotate back
    // or: currentPiece.shape = rotateMatrix(currentPiece.shape) again? No, rotating twice gives 180.
    // Actually, to undo: rotate the already-rotated matrix again (180 degrees)
    // But simpler: just restore the original shape
    // Let me store the original shape before rotation
  }
}
```

Hmm, let me restructure. I'll save the original shape before rotating:

```js
function rotatePiece() {
  const originalShape = currentPiece.shape;
  const rotated = rotateMatrix(originalShape);
  currentPiece.shape = rotated;
  if (collides(currentPiece, board)) {
    currentPiece.shape = originalShape;
  }
}
```

Gravity:
```js
function update(dt) {
  if (gameState !== 'playing') return;
  if (Date.now() - lastDropTime >= dropInterval) {
    if (!collides(currentPiece, board)) {
      currentPiece.y++;
    } else {
      lockPiece();
    }
    lastDropTime = Date.now();
  }
}
```

Lock:
```js
function lockPiece() {
  for (let r = 0; r < currentPiece.shape.length; r++) {
    for (let c = 0; c < currentPiece.shape[r].length; c++) {
      if (currentPiece.shape[r][c]) {
        const by = currentPiece.y + r;
        const bx = currentPiece.x + c;
        if (by >= 0 && by < BOARD_ROWS && bx >= 0 && bx < BOARD_COLS) {
          board[by][bx] = currentPiece.color;
        }
      }
    }
  }
  clearLines();
  spawnPiece();
}
```

Clear lines:
```js
function clearLines() {
  let lines = 0;
  for (let r = BOARD_ROWS - 1; r >= 0; r--) {
    if (board[r].every(cell => cell !== null)) {
      board.splice(r, 1);
      board.unshift(new Array(BOARD_COLS).fill(null));
      lines++;
      r++;
    }
  }
  if (lines > 0) {
    const points = [0, 100, 300, 500, 800][lines];
    score += points * level;
    linesCleared += lines;
    const newLevel = Math.floor(linesCleared / 10) + 1;
    if (newLevel > level) {
      level = newLevel;
      dropInterval = Math.max(100, 1000 - (level - 1) * 100);
    }
  }
  updateUI();
}
```

Draw:
```js
function draw() {
  const ctx = document.getElementById('board').getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Draw board background
  ctx.fillStyle = '#111';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // Draw locked pieces
  for (let r = 0; r < BOARD_ROWS; r++) {
    for (let c = 0; c < BOARD_COLS; c++) {
      if (board[r][c]) {
        ctx.fillStyle = board[r][c];
        ctx.fillRect(c * CELL_SIZE, r * CELL_SIZE, CELL_SIZE, CELL_SIZE);
        // border
        ctx.strokeStyle = '#222';
        ctx.strokeRect(c * CELL_SIZE, r * CELL_SIZE, CELL_SIZE, CELL_SIZE);
      }
    }
  }
  
  // Draw current piece
  if (currentPiece) {
    ctx.fillStyle = currentPiece.color;
    for (let r = 0; r < currentPiece.shape.length; r++) {
      for (let c = 0; c < currentPiece.shape[r].length; c++) {
        if (currentPiece.shape[r][c]) {
          const bx = currentPiece.x + c;
          const by = currentPiece.y + r;
          if (by >= 0) {
            ctx.fillRect(bx * CELL_SIZE, by * CELL_SIZE, CELL_SIZE, CELL_SIZE);
            ctx.strokeStyle = '#333';
            ctx.strokeRect(bx * CELL_SIZE, by * CELL_SIZE, CELL_SIZE, CELL_SIZE);
          }
        }
      }
    }
  }
}
```

Next piece preview:
```js
function drawNextPiece() {
  const ctx = document.getElementById('next').getContext('2d');
  const canvas = document.getElementById('next');
  canvas.width = 4 * CELL_SIZE;
  canvas.height = 4 * CELL_SIZE;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  if (!nextPieceType) return;
  const def = SHAPES[nextPieceType];
  const matrix = def.matrix;
  const offsetX = (4 * CELL_SIZE - matrix[0].length * CELL_SIZE) / 2;
  const offsetY = (4 * CELL_SIZE - matrix.length * CELL_SIZE) / 2;
  
  ctx.fillStyle = def.color;
  for (let r = 0; r < matrix.length; r++) {
    for (let c = 0; c < matrix[r].length; c++) {
      if (matrix[r][c]) {
        ctx.fillRect(offsetX + c * CELL_SIZE, offsetY + r * CELL_SIZE, CELL_SIZE, CELL_SIZE);
      }
    }
  }
}
```

UI update:
```js
function updateUI() {
  document.getElementById('score').textContent = score;
  document.getElementById('lines').textContent = linesCleared;
  document.getElementById('level').textContent = level;
  drawNextPiece();
}
```

Event handling:
```js
document.addEventListener('keydown', (e) => {
  if (gameState === 'gameover') {
    if (e.key === 'R') restartGame();
    return;
  }
  
  switch (e.key) {
    case 'ArrowLeft':
      e.preventDefault();
      if (!collides(currentPiece, board)) {
        currentPiece.x--;
      }
      break;
    case 'ArrowRight':
      e.preventDefault();
      if (!collides(currentPiece, board)) {
        currentPiece.x++;
      }
      break;
    case 'ArrowDown':
      e.preventDefault();
      if (!collides(currentPiece, board)) {
        currentPiece.y++;
      }
      break;
    case 'ArrowUp':
      e.preventDefault();
      rotatePiece();
      break;
    case ' ':
      e.preventDefault();
      hardDrop();
      break;
    case 'p':
    case 'P':
      togglePause();
      break;
    case 'r':
    case 'R':
      restartGame();
      break;
  }
});
```

Hard drop:
```js
function hardDrop() {
  while (!collides(currentPiece, board)) {
    currentPiece.y++;
  }
  lockPiece();
}
```

Pause/Resume:
```js
function togglePause() {
  if (gameState === 'playing') {
    gameState = 'paused';
  } else if (gameState === 'paused') {
    gameState = 'playing';
  }
}
```

Restart:
```js
function restartGame() {
  board = Array.from({length: BOARD_ROWS}, () => Array(BOARD_COLS).fill(null));
  score = 0;
  linesCleared = 0;
  level = 1;
  dropInterval = 1000;
  gameState = 'playing';
  nextPieceType = getRandomPiece();
  spawnPiece();
  updateUI();
}
```

Helper:
```js
function getRandomPiece() {
  const types = Object.keys(SHAPES);
  return types[Math.floor(Math.random() * types.length)];
}
```

Now, let me assemble everything into the HTML file.

I need to make sure the canvas dimensions are correct:
- board canvas: width = 10 * 30 = 300, height = 20 * 30 = 600
- next canvas: 4 * 30 = 120, 120

CSS styling:
- Dark background
- Centered layout
- Nice typography

Let me write the complete file now.

One thing to consider: the ghost piece (where the piece would land if hard-dropped). It's optional, but could be nice. Let me add it as it helps the player. Actually, let me keep it simple and skip the ghost to avoid complexity. The requirements don't explicitly ask for it.

Also, wall kicks: "optional; if unsupported, reject the blocked rotation without changing the piece." So I'll just reject the rotation if it collides. That's what I'm doing.

Let me also make sure the game over screen shows properly. When game over, I'll display a message on the board or overlay.

Let me add a game over overlay:
```html
<div id="game-over" style="display:none;">
  <h2>Game Over</h2>
  <p>Score: <span id="final-score">0</span></p>
  <button onclick="restartGame()">Restart</button>
</div>
```

And pause overlay:
```html
<div id="pause" style="display:none;">
  <h2>Paused</h2>
  <button onclick="togglePause()">Resume</button>
</div>
```

Actually, let me keep it simple and just show text on the canvas or in a div.

Let me finalize the HTML structure:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tetris</title>
  <style>
    body { ... }
    #game-container { display: flex; justify-content: center; align-items: flex-start; ... }
    #board { border: 2px solid #333; }
    #sidebar { display: flex; flex-direction: column; gap: 10px; }
    .stat { font-size: 24px; }
  </style>
</head>
<body>
  <h1>Tetris</h1>
  <div id="game-container">
    <canvas id="board" width="300" height="600"></canvas>
    <div id="sidebar">
      <div class="stat">Score: <span id="score">0</span></div>
      <div class="stat">Lines: <span id="lines">0</span></div>
      <div class="stat">Level: <span id="level">1</span></div>
      <canvas id="next" width="120" height="120"></canvas>
      <div id="controls">
        <p>← → Move</p>
        <p>↑ Rotate</p>
        <p>↓ Soft Drop</p>
        <p>Space Hard Drop</p>
        <p>P Pause</p>
        <p>R Restart</p>
      </div>
    </div>
  </div>
  <div id="game-over" style="display:none;">
    <h2>Game Over</h2>
    <p>Final Score: <span id="final-score">0</span></p>
    <button onclick="restartGame()">Restart</button>
  </div>
  <script>
    // all game code
  </script>
</body>
</html>
```

Now let me write the complete file. I'll be careful with the JavaScript.

Let me double-check the rotation logic. Standard Tetris rotation is clockwise. My rotateMatrix does:
```
rotated[i][j] = matrix[n-1-j][i]
```
This is a 90-degree clockwise rotation. Let me verify with a simple example:
matrix = [[a,b],[c,d]] (2x2)
n=2
i=0: rotated[0][0] = matrix[1][0] = c; rotated[0][1] = matrix[0][0] = a
i=1: rotated[1][0] = matrix[1][1] = d; rotated[1][1] = matrix[0][1] = b
Result: [[c,a],[d,b]]
Original:
a b
c d
Clockwise rotation should give:
c a
d b
Yes, that's correct.

Now, let me think about the piece spawn position. For the I piece (4x4 matrix with the block in row 1), spawning at x=3, y=0:
- The block occupies columns 3,4,5,6 at row 1. That's centered in a 10-wide board. Good.

For other pieces (3x3), x=3, y=0:
- Block occupies columns 3,4,5 at rows 0,1,2. Also centered. Good.

But wait, for the I piece, the matrix is:
[[0,0,0,0],
 [1,1,1,1],
 [0,0,0,0],
 [0,0,0,0]]
At y=0, the blocks are at row 1 (y+1). So they're one row below the top. That's fine.

Actually, in standard Tetris, pieces spawn at row -1 or 0. Let me start at y=0. If the piece collides at spawn, it's game over.

Hmm, but if the board has some pieces at the top (from previous clears), the piece might collide immediately. That's fine - game over.

Let me also think about the gravity speed. At level 1: 1000ms. Every 10 lines, decrease by... let me say:
- Level 1: 1000ms
- Level 2: 900ms
- Level 3: 800ms
...
- Level 10: 100ms
- Minimum 100ms

So: dropInterval = Math.max(100, 1000 - (level - 1) * 100)

At level 1: 1000
Level 2: 900
Level 3: 800
...
Level 11: 0 → max(100, 0) = 100

That works.

Now, let me write the complete file. I'll be thorough.

Actually, one issue: when I do `board.splice(r, 1)` and `board.unshift(...)` in clearLines, the board array changes. Since I'm iterating backwards, this should be okay. Let me trace through:
- Start with board of 20 rows
- Check row 19: if full, remove it and add an empty row at the top
- Continue checking from the new row 18 (which was originally row 18)
- This correctly shifts rows down

Yes, that's the standard approach.

Now, let me also handle the case where the piece is partially above the board (negative y). In the draw function, I only draw cells where by >= 0. In collision, I only check board cells where by >= 0. This should work.

Let me also add a subtle grid to the board for visual clarity.

Alright, let me write the complete index.html file.

One more consideration: the canvas needs to be sized correctly. I'll set the canvas element's width/height attributes to match the CSS size. Actually, the canvas element has intrinsic size. I'll set width=300, height=600 in the HTML, and use CSS to scale if needed. Or I can use CSS to size it and set the canvas width/height attributes accordingly.

Let me set the canvas element attributes: `<canvas id="board" width="300" height="600"></canvas>` and style it with CSS for centering.

For the next piece canvas: `<canvas id="next" width="120" height="120"></canvas>`.

Now, let me write the complete file.

Actually, I realize I should test the game after writing it. Let me write it first, then run it in the browser.

Let me draft the complete code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tetris</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: Arial, sans-serif;
      background: #1a1a2e;
      color: #eee;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      padding: 20px;
    }
    h1 {
      color: #fff;
      margin-bottom: 10px;
      font-size: 36px;
    }
    #game-container {
      display: flex;
      gap: 20px;
      align-items: flex-start;
    }
    #board {
      border: 3px solid #444;
      background: #0f0f0f;
    }
    #sidebar {
      display: flex;
      flex-direction: column;
      gap: 15px;
      min-width: 160px;
    }
    .stat {
      font-size: 24px;
      color: #fff;
      text-align: center;
    }
    #next {
      border: 2px solid #444;
      background: #0f0f0f;
    }
    #controls {
      font-size: 14px;
      color: #ccc;
      line-height: 1.8;
    }
    #controls p { margin: 4px 0; }
    #game-over {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.8);
      display: none;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      z-index: 100;
    }
    #game-over h2 {
      color: #ff4444;
      font-size: 32px;
      margin-bottom: 20px;
    }
    #game-over button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background: #e94560;
      color: white;
      border: none;
      border-radius: 4px;
    }
    #game-over button:hover {
      background: #c73e54;
    }
  </style>
</head>
<body>
  <h1>Tetris</h1>
  <div id="game-container">
    <canvas id="board" width="300" height="600"></canvas>
    <div id="sidebar">
      <div class="stat">Score: <span id="score">0</span></div>
      <div class="stat">Lines: <span id="lines">0</span></div>
      <div class="stat">Level: <span id="level">1</span></div>
      <canvas id="next" width="120" height="120"></canvas>
      <div id="controls">
        <p>← → Move</p>
        <p>↑ Rotate</p>
        <p>↓ Soft Drop</p>
        <p>Space Hard Drop</p>
        <p>P Pause</p>
        <p>R Restart</p>
      </div>
    </div>
  </div>
  <div id="game-over">
    <h2>Game Over</h2>
    <p>Final Score: <span id="final-score">0</span

We need to build a playable falling-block Tetris game in a single index.html file. Let me plan the implementation:

1. Canvas-based game with 10 columns x 20 visible rows
2. All 7 tetrominoes (I, O, T, S, Z, J, L) with legal spawn positions
3. Controls: Left/Right move, Up rotate clockwise, Down soft drop, Space hard drop
4. Wall kicks optional - reject blocked rotations
5. Lock pieces, clear complete rows, move rows down, spawn next piece
6. Score: 100/300/500/800 for 1/2/3/4 lines cleared, multiplied by level
7. Level starts at 1, gravity speed increases every 10 cleared lines
8. Game Over when new piece can't spawn
9. Pause/Resume and Restart

Let me write this as a self-contained HTML file with inline CSS and JS.

Key design decisions:
- Board: 10 columns x 20 rows (visible cells)
- Each cell is maybe 30x30 pixels
- Tetromino shapes defined as arrays of coordinates relative to a pivot
- Spawn position: center-top area
- Rotation: clockwise rotation using matrix transformation
- Collision detection
- Line clearing
- Score tracking
- Level system

Let me think about the structure:

**Tetromino definitions:**
Each piece has a shape (array of [row, col] offsets) and color.
- I: [[0,0],[0,1],[0,2],[0,3]] - horizontal or vertical
- O: [[0,0],[0,1],[1,0],[1,1]]
- T: [[0,1],[1,0],[1,1],[1,2]]
- S: [[0,1],[1,0],[1,1],[2,0]]... let me use standard shapes
- Z: mirror of S
- J: [[0,0],[1,0],[1,1],[1,2]]
- L: [[0,2],[1,0],[1,1],[1,2]]

Actually, let me use the classic Tetris shapes:
- I: straight line (4 blocks)
- O: square
- T: T-shape
- S: zigzag
- Z: reverse zigzag
- J: left-facing
- L: right-facing

Standard rotation matrices: for a 4x4 grid, rotating clockwise: (r, c) -> (c, 3-r)

For simplicity, I'll define each piece as an array of cell positions (row, col) relative to the spawn position. The spawn position will be roughly centered at column 3 or 4 (0-indexed), row -1 or 0.

Let me define the board as a 2D array: board[row][col] = null or color string.

Game loop: setInterval or requestAnimationFrame. Use setInterval for gravity (drop every X ms based on level).

Controls:
- ArrowLeft: move left if no collision
- ArrowRight: move right if no collision
- ArrowUp: rotate clockwise if no collision
- ArrowDown: soft drop (move down one if possible)
- Space: hard drop (move down until collision, lock immediately)
- P: pause/resume
- R: restart

Scoring:
- Single: 100 * level
- Double: 300 * level
- Triple: 500 * level
- Tetris (4 lines): 800 * level
- Level up every 10 lines cleared

Level up: level = floor(cleared_lines / 10) + 1

Gravity speed: base interval decreases with level. For example:
- Level 1: 500ms
- Every 10 lines: decrease by some amount

Let me set:
- Level 1: 500ms
- Level 2: 450ms
- Level 3: 400ms
- etc., minimum maybe 100ms

Or use a formula: interval = Math.max(50, 500 - (level-1) * 50)

Now let me code this up.

**Canvas setup:**
- Width: 10 * CELL_SIZE
- Height: 20 * CELL_SIZE
- Cell size: 30px
- Total canvas: 300x600

**UI elements:**
- Canvas for the game board
- Next piece preview (small canvas or drawn on same canvas)
- Score display
- Level display
- Lines cleared display
- Controls info

Let me structure the HTML:

```html
<!DOCTYPE html>
<html>
<head>
<style>
  /* styles */
</style>
</head>
<body>
  <h1>Tetris</h1>
  <div id="game-container">
    <canvas id="board"></canvas>
    <canvas id="next"></canvas>
    <div id="info">
      <div>Score: <span id="score">0</span></div>
      <div>Level: <span id="level">1</span></div>
      <div>Lines: <span id="lines">0</span></div>
      <div>Controls:</div>
      <p>← → Move | ↑ Rotate | ↓ Soft Drop | Space Hard Drop | P Pause | R Restart</p>
    </div>
  </div>
  <script>
    // Game code
  </script>
</body>
</html>
```

Let me write the full JavaScript now.

**Piece class/object:**
```javascript
const PIECES = {
  I: { shape: [[0,0],[0,1],[0,2],[0,3]], color: '#00f0f0' },
  O: { shape: [[0,0],[0,1],[1,0],[1,1]], color: '#f0f000' },
  T: { shape: [[0,1],[1,0],[1,1],[1,2]], color: '#a000f0' },
  S: { shape: [[0,1],[1,0],[1,1],[2,0]], color: '#00f000' },
  Z: { shape: [[0,0],[1,0],[1,1],[2,1]], color: '#f00000' },
  J: { shape: [[0,0],[1,0],[1,1],[1,2]], color: '#0000f0' },
  L: { shape: [[0,2],[1,0],[1,1],[1,2]], color: '#f0a000' }
};
```

Wait, let me double-check the standard S and Z shapes:
- S: [[0,1],[1,0],[1,1],[2,0]]? No...
Standard S (pointy top):
```
  [1,0], [1,1], [0,1], [0,2]
```
Actually, let me use the common representation:
- S: [[0,1],[1,0],[1,1],[2,0]] — hmm, that's not right either.

Let me use the classic Tetris shapes from the original game:
- I: 4 in a row
- O: 2x2 square
- T: T-shape
- S: right-leaning zigzag
- Z: left-leaning zigzag
- J: L-shape pointing left
- L: L-shape pointing right

Using the standard "matrix" representation where each piece is a 4x4 grid with 1s for filled cells:

I: 
```
0 0 0 0
1 1 1 1
0 0 0 0
0 0 0 0
```
Shape coords: (1,0),(1,1),(1,2),(1,3)

O:
```
1 1
1 1
```
Shape coords: (0,0),(0,1),(1,0),(1,1)

T:
```
  1
1 1 1
```
Shape coords: (0,1),(1,0),(1,1),(1,2)

S:
```
  1 1
1 1
```
Shape coords: (0,1),(0,2),(1,0),(1,1)

Z:
```
1 1
  1 1
```
Shape coords: (0,0),(0,1),(1,1),(1,2)

J:
```
1
1 1
1
```
Shape coords: (0,0),(1,0),(1,1),(2,0)

L:
```
  1
  1
1 1
```
Shape coords: (0,2),(1,1),(1,2),(2,1)

Hmm, actually the standard S/Z are often defined differently. Let me just go with these and make sure they look good.

**Rotation:**
Clockwise rotation around the center of the piece. For a shape with cells at (r,c), rotated clockwise: (r', c') = (c, -r) or more precisely, if we're rotating around origin: new_r = c, new_c = -r. But since we're working with positive coordinates, let me use the standard approach:

For a 4x4 matrix, clockwise rotation: new[r][c] = old[3-c][r]

In terms of cell coordinates: given a list of (row, col) offsets, after clockwise rotation: (row, col) -> (col, max_rows - 1 - row). Since our pieces are small, let me just compute it properly.

Actually, simpler: for each cell (r, c) in the shape, the rotated cell is (c, -r) relative to the pivot. To keep all coordinates non-negative, find the bounding box and shift.

Let me implement rotation like this:
```javascript
function rotateClockwise(shape) {
  const n = shape.length;
  const rotated = [];
  for (let r = 0; r < n; r++) {
    for (let c = 0; c < n; c++) {
      if (shape[r][c]) {
        rotated.push([c, n - 1 - r]);
      }
    }
  }
  return rotated;
}
```

This assumes the shape is an n x n matrix. For irregular shapes, I need to handle it differently. Let me convert each piece to a normalized matrix form.

Actually, let me define each piece as a 4x4 matrix (or the minimal bounding box):

```javascript
const SHAPES = {
  I: [
    [0,0,0,0],
    [1,1,1,1],
    [0,0,0,0],
    [0,0,0,0]
  ],
  O: [
    [1,1],
    [1,1]
  ],
  T: [
    [0,1,0],
    [1,1,1],
    [0,0,0]
  ],
  S: [
    [0,1,1],
    [1,1,0],
    [0,0,0]
  ],
  Z: [
    [1,1,0],
    [0,1,1],
    [0,0,0]
  ],
  J: [
    [1,0,0],
    [1,1,1],
    [0,0,0]
  ],
  L: [
    [0,0,1],
    [1,1,1],
    [0,0,0]
  ]
};
```

Then to get the cells: iterate over the matrix and collect non-zero entries.

Rotation: for a matrix, clockwise rotation: new[r][c] = old[n-1-c][r].

OK, let me write the complete code now.

**Game state:**
```javascript
let board = []; // 20 rows x 10 cols, null or color string
let currentPiece = null;
let nextPiece = null;
let score = 0;
let linesCleared = 0;
let level = 1;
let gameOver = false;
let paused = false;
let dropInterval = 500; // ms
let lastDropTime = 0;
```

**Spawn position:**
The piece should spawn above the visible board (row -1 or 0) and centered horizontally. For a 10-column board:
- I piece width 4: spawn at col 3 (0-indexed), row -1
- O piece width 2: col 4
- Others width 3: col 3 or 4

Let me place the spawn at row 0 (top of the visible area) or row -1. If the piece overlaps with existing blocks at spawn, it's Game Over.

Actually, in standard Tetris, pieces spawn at the top of the board (row 0 or -1). Let me spawn at row 0, column centered.

For collision detection, the piece's cells must be within bounds (0 <= row < 20, 0 <= col < 10) and not overlap existing board cells.

**Gravity:**
On each frame (or every dropInterval ms), check if the piece should drop one row. If it can't drop, lock it into the board.

**Locking:**
When a piece can't drop further (collision at current position), lock it: set board cells to the piece's color. Then check for completed lines.

**Line clearing:**
Check each row: if all cells are non-null, remove it. Shift rows above down. Update linesCleared.

**Scoring:**
- 1 line: 100 * level
- 2 lines: 300 * level
- 3 lines: 500 * level
- 4 lines: 800 * level

**Level:**
level = Math.floor(linesCleared / 10) + 1
Gravity speed: interval = Math.max(50, 500 - (level - 1) * 45)

**Rendering:**
Draw the board on the main canvas. Draw the current piece. Draw the next piece preview.

Let me decide on canvas sizes:
- Cell size: 30px
- Board: 10*30 = 300px wide, 20*30 = 600px tall
- Next piece preview: maybe 120x120 (4 cells * 30px)

Layout:
- Header: "TETRIS"
- Main canvas: 300x600
- Side panel: next piece canvas 120x120, score/level/lines info

Let me write the complete HTML file now.

Actually, let me reconsider the layout. I'll put everything in one canvas or use separate canvases. Using separate canvases is cleaner.

Let me draft the code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tetris</title>
<style>
  body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #222;
    color: white;
  }
  #game-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
  }
  canvas {
    border: 2px solid #555;
    background: #111;
  }
  #side-panel {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .info-box {
    background: #333;
    padding: 10px;
    border-radius: 5px;
  }
  #controls {
    font-size: 12px;
    color: #aaa;
  }
</style>
</head>
<body>
<h1>TETRIS</h1>
<div id="game-container">
  <canvas id="board" width="300" height="600"></canvas>
  <div id="side-panel">
    <div class="info-box">
      <strong>Score:</strong> <span id="score">0</span>
    </div>
    <div class="info-box">
      <strong>Level:</strong> <span id="level">1</span>
    </div>
    <div class="info-box">
      <strong>Lines:</strong> <span id="lines">0</span>
    </div>
    <div class="info-box">
      <strong>Next:</strong>
      <canvas id="next-piece" width="120" height="120"></canvas>
    </div>
    <div id="controls">
      <b>Controls:</b><br>
      ← → Move &nbsp;|&nbsp; ↑ Rotate &nbsp;|&nbsp; ↓ Soft Drop<br>
      Space Hard Drop &nbsp;|&nbsp; P Pause/Resume &nbsp;|&nbsp; R Restart
    </div>
  </div>
</div>
<script>
// ... game code ...
</script>
</body>
</html>
```

Now the JavaScript. Let me write it carefully.

```javascript
const canvas = document.getElementById('board');
const ctx = canvas.getContext('2d');
const nextCanvas = document.getElementById('next-piece');
const nextCtx = nextCanvas.getContext('2d');

const COLS = 10;
const ROWS = 20;
const CELL = 30;

// Tetromino shapes (4x4 matrices)
const SHAPES = {
  I: [
    [0,0,0,0],
    [1,1,1,1],
    [0,0,0,0],
    [0,0,0,0]
  ],
  O: [
    [1,1],
    [1,1]
  ],
  T: [
    [0,1,0],
    [1,1,1],
    [0,0,0]
  ],
  S: [
    [0,1,1],
    [1,1,0],
    [0,0,0]
  ],
  Z: [
    [1,1,0],
    [0,1,1],
    [0,0,0]
  ],
  J: [
    [1,0,0],
    [1,1,1],
    [0,0,0]
  ],
  L: [
    [0,0,1],
    [1,1,1],
    [0,0,0]
  ]
};

const COLORS = {
  I: '#00f0f0',
  O: '#f0f000',
  T: '#a000f0',
  S: '#00f0f0',
  Z: '#f00000',
  J: '#0000f0',
  L: '#f0a000'
};

// ... rest of game logic
```

Wait, I'm using I and S both with cyan-ish colors. Let me adjust:
- I: cyan (#00f0f0)
- O: yellow (#f0f000)
- T: purple (#a000f0)
- S: green (#00f0f0) — same as I, but that's fine for now
- Z: red (#f00000)
- J: blue (#0000f0)
- L: orange (#f0a000)

Actually, let me make them more distinct:
- I: #00f0f0 (cyan)
- O: #f0f000 (yellow)
- T: #a000f0 (purple)
- S: #00f0f0 (green) — hmm, same as I. Let me use #00ff80 for S.
- Z: #f00000 (red)
- J: #0000f0 (blue)
- L: #f0a000 (orange)

OK.

**Piece spawning:**
The piece spawns at the top of the board. The spawn row depends on the piece's shape. For a 4-row shape like I, the piece occupies rows 0-3 when spawned. For a 3-row shape, rows 0-2.

Let me spawn at row 0 (the top row of the visible board). If the piece collides immediately at spawn, it's Game Over.

Actually, in standard Tetris, pieces spawn above the visible area (rows -1 to -2) and drop into view. But for simplicity, let's spawn at row 0. If there's a collision at row 0, it's Game Over.

Hmm, but if the board has some cells at row 0 already (from previous locks), then spawning at row 0 might collide. That's fine — it means the board is full and it's Game Over.

**Collision detection:**
```javascript
function collides(piece, board) {
  for (let r = 0; r < piece.shape.length; r++) {
    for (let c = 0; c < piece.shape[r].length; c++) {
      if (piece.shape[r][c]) {
        const boardR = piece.spawnR + r;
        const boardC = piece.spawnC + c;
        if (boardR < 0 || boardR >= ROWS || boardC < 0 || boardC >= COLS) return true;
        if (board[boardR][boardC]) return true;
      }
    }
  }
  return false;
}
```

**Rotation:**
```javascript
function rotatePiece(piece) {
  const n = piece.shape.length;
  const rotated = [];
  for (let r = 0; r < n; r++) {
    for (let c = 0; c < n; c++) {
      if (piece.shape[r][c]) {
        rotated.push([c, n - 1 - r]);
      }
    }
  }
  return rotated;
}
```

But wait — the rotation should be around the center of the piece. For a 4x4 matrix, rotating around the center (1.5, 1.5) gives the correct result. The formula (r, c) -> (c, n-1-r) rotates around the top-left corner. For a symmetric shape like I, O, T, this works fine. For asymmetric shapes like J and L, it might cause issues, but in practice it works for standard Tetris.

Actually, for proper rotation around the center, you'd do: new_r = (n-1)/2 + (c - (n-1)/2), new_c = (n-1)/2 - (r - (n-1)/2). But the simple matrix rotation works well enough for this implementation.

**Gravity:**
```javascript
function update() {
  if (gameOver || paused) return;
  if (Date.now() - lastDropTime >= dropInterval) {
    if (!canMoveDown(piece)) {
      lockPiece();
    } else {
      piece.spawnR += 1;
    }
    lastDropTime = Date.now();
  }
}
```

**Lock piece:**
```javascript
function lockPiece() {
  for (let r = 0; r < piece.shape.length; r++) {
    for (let c = 0; c < piece.shape[r].length; c++) {
      if (piece.shape[r][c]) {
        const boardR = piece.spawnR + r;
        const boardC = piece.spawnC + c;
        if (boardR >= 0 && boardR < ROWS && boardC >= 0 && boardC < COLS) {
          board[boardR][boardC] = piece.color;
        }
      }
    }
  }
  checkLines();
  spawnNext();
}
```

**Check lines:**
```javascript
function checkLines() {
  let lines = 0;
  for (let r = ROWS - 1; r >= 0; r--) {
    if (board[r].every(cell => cell !== null)) {
      board.splice(r, 1);
      board.unshift(Array(COLS).fill(null));
      lines++;
    }
  }
  if (lines > 0) {
    updateScore(lines);
  }
}

function updateScore(n) {
  const points = [0, 100, 300, 500, 800];
  score += points[n] * level;
  linesCleared += n;
  level = Math.floor(linesCleared / 10) + 1;
  dropInterval = Math.max(50, 500 - (level - 1) * 45);
  updateUI();
}
```

**Spawn next piece:**
```javascript
function spawnNext() {
  const keys = Object.keys(SHAPES);
  // Pick next piece in sequence (deterministic order)
  const idx = (keys.indexOf(currentPiece.key) + 1) % keys.length;
  const key = keys[idx];
  currentPiece = createPiece(key);
  currentPiece.spawnR = 0;
  currentPiece.spawnC = Math.floor((COLS - key.shape[0].length) / 2);
  if (collides(currentPiece, board)) {
    gameOver = true;
  }
}
```

Wait, I need to track which piece was the last one. Let me add a `key` property to each piece.

**Create piece:**
```javascript
function createPiece(type) {
  const shape = SHAPES[type];
  return {
    type: type,
    shape: shape,
    color: COLORS[type],
    key: type,
    spawnR: 0,
    spawnC: Math.floor((COLS - shape[0].length) / 2)
  };
}
```

**Drawing:**
```javascript
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Draw board
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      if (board[r][c]) {
        drawCell(ctx, c, r, board[r][c]);
      }
    }
  }
  
  // Draw current piece
  if (currentPiece) {
    for (let r = 0; r < currentPiece.shape.length; r++) {
      for (let c = 0; c < currentPiece.shape[r].length; c++) {
        if (currentPiece.shape[r][c]) {
          drawCell(ctx, currentPiece.spawnC + c, currentPiece.spawnR + r, currentPiece.color);
        }
      }
    }
  }
}

function drawCell(ctx, col, row, color) {
  const x = col * CELL;
  const y = row * CELL;
  ctx.fillStyle = color;
  ctx.fillRect(x, y, CELL, CELL);
  // Add subtle border
  ctx.strokeStyle = '#111';
  ctx.strokeRect(x, y, CELL, CELL);
}
```

**Next piece preview:**
```javascript
function drawNext() {
  nextCtx.clearRect(0, 0, nextCanvas.width, nextCanvas.height);
  if (!nextPiece) return;
  const shape = nextPiece.shape;
  const rows = shape.length;
  const cols = shape[0].length;
  const offsetX = (nextCanvas.width - cols * CELL) / 2;
  const offsetY = (nextCanvas.height - rows * CELL) / 2;
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      if (shape[r][c]) {
        nextCtx.fillStyle = nextPiece.color;
        nextCtx.fillRect(offsetX + c * CELL, offsetY + r * CELL, CELL, CELL);
        nextCtx.strokeStyle = '#111';
        nextCtx.strokeRect(offsetX + c * CELL, offsetY + r * CELL, CELL, CELL);
      }
    }
  }
}
```

**UI updates:**
```javascript
function updateUI() {
  document.getElementById('score').textContent = score;
  document.getElementById('level').textContent = level;
  document.getElementById('lines').textContent = linesCleared;
}
```

**Main loop:**
```javascript
function gameLoop() {
  if (!paused && !gameOver) {
    update();
  }
  draw();
  requestAnimationFrame(gameLoop);
}
```

**Input handling:**
```javascript
document.addEventListener('keydown', (e) => {
  if (gameOver) {
    if (e.key === 'R') restart();
    return;
  }
  if (e.key === 'p' || e.key === 'P') {
    paused = !paused;
    return;
  }
  if (paused) return;
  
  switch(e.key) {
    case 'ArrowLeft':
      movePiece(-1);
      break;
    case 'ArrowRight':
      movePiece(1);
      break;
    case 'ArrowDown':
      softDrop();
      break;
    case 'ArrowUp':
      rotatePiece(currentPiece);
      break;
    case ' ':
      hardDrop();
      break;
    case 'r':
    case 'R':
      restart();
      break;
  }
});
```

**Move piece:**
```javascript
function movePiece(dir) {
  currentPiece.spawnC += dir;
  if (collides(currentPiece, board)) {
    currentPiece.spawnC -= dir;
  }
}
```

**Soft drop:**
```javascript
function softDrop() {
  currentPiece.spawnR++;
  if (collides(currentPiece, board)) {
    currentPiece.spawnR--;
  }
}
```

**Hard drop:**
```javascript
function hardDrop() {
  while (!collides(currentPiece, board)) {
    currentPiece.spawnR++;
  }
  currentPiece.spawnR--; // step back to the last valid position
  lockPiece();
}
```

**Restart:**
```javascript
function restart() {
  board = Array.from({length: ROWS}, () => Array(COLS).fill(null));
  score = 0;
  linesCleared = 0;
  level = 1;
  dropInterval = 500;
  gameOver = false;
  paused = false;
  currentPiece = null;
  nextPiece = null;
  spawnNext();
  updateUI();
}
```

**Initial spawn:**
```javascript
function spawnNext() {
  const keys = Object.keys(SHAPES);
  const idx = (keys.indexOf(currentPiece?.key) + 1) % keys.length;
  const key = keys[idx];
  currentPiece = createPiece(key);
  currentPiece.spawnR = 0;
  currentPiece.spawnC = Math.floor((COLS - SHAPES[key].length) / 2);
  if (collides(currentPiece, board)) {
    gameOver = true;
  }
}
```

Wait, I need to call spawnNext() initially before the game loop starts.

**Initialization:**
```javascript
function init() {
  board = Array.from({length: ROWS}, () => Array(COLS).fill(null));
  currentPiece = null;
  nextPiece = null;
  score = 0;
  linesCleared = 0;
  level = 1;
  dropInterval = 500;
  gameOver = false;
  paused = false;
  spawnNext();
  updateUI();
  gameLoop();
}
```

Now let me think about potential issues:

1. **Rotation collision**: When rotating, I need to check if the rotated piece collides. The rotation function returns a new shape array. I should test the rotated shape at the current spawn position.

2. **Wall kicks**: The requirement says wall kicks are optional. If unsupported, reject the blocked rotation without changing the piece. My current implementation just rejects the rotation (doesn't change the piece), which satisfies this.

3. **Spinning**: Not needed.

4. **Ghost piece**: Optional, so skip.

5. **Next piece preview**: Draw on the small canvas.

Let me also think about the visual design. I want it to look decent. Let me add some styling.

Now, let me write the complete file. I'll be careful with the JavaScript.

One issue: the `createPiece` function references `SHAPES`, and I need to make sure the spawn column is calculated correctly. For a shape with width w, the spawn column is (10 - w) / 2. For I (width 4): 3. For O (width 2): 4. For others (width 3): 3.5 → 3 (integer division). Let me use Math.floor.

Actually, for even widths like O (2), (10-2)/2 = 4. Good.
For odd widths like 3: (10-3)/2 = 3.5 → 3. So the O piece (width 2) spawns at column 4, which is centered. Good.

Let me also handle the case where the piece spawns and immediately collides — Game Over.

Let me also add a slight delay before spawning the first piece, or just start immediately. In standard Tetris, the first piece drops after a short delay. I'll let the gravity handle it.

Now, let me write the complete HTML file.

Actually, I realize I should double-check the rotation logic. Let me trace through an example:

T piece shape:
```
[0,1,0]
[1,1,1]
[0,0,0]
```

Rotated clockwise (using my formula):
For each (r,c) where shape[r][c] is 1:
- (0,1): new = (1, 3-1-0) = (1, 2)
- (1,0): new = (0, 3-1-1) = (0, 1)
- (1,1): new = (1, 3-1-1) = (1, 1)
- (1,2): new = (2, 3-1-1) = (2, 1)

So rotated shape:
```
[0,0,0]
[0,1,0]
[1,1,1]
```
Which is the T piece pointing downward. Correct!

For I piece:
```
[0,0,0,0]
[1,1,1,1]
[0,0,0,0]
[0,0,0,0]
```
Rotated:
- (1,0): (0, 2)
- (1,1): (1, 2)
- (1,2): (2, 2)
- (1,3): (3, 2)
Result:
```
[0,0,1,0]
[0,0,1,0]
[0,0,1,0]
[0,0,1,0]
```
That's the vertical I. Correct!

Great, the rotation works.

Now, let me think about the drawing. The board is 300x600. Each cell is 30x30. The preview canvas is 120x120, which fits 4x4 cells (120/30 = 4).

For the next piece preview, I'll center it in the 120x120 canvas.

Let me finalize the code. I'll write it all out now.

One more thing: the `update` function uses `Date.now()` for timing. This is fine for a simple game.

Let me also add a subtle shadow or highlight to make it look nicer. Maybe not necessary.

Let me write the complete file now.

Actually, I want to make sure the game is fully playable. Let me trace through the flow:

1. Page loads → init() is called
2. Board is created, currentPiece = null
3. spawnNext() creates the first piece (I, for example), spawns it at row 0, column 3
4. Game loop starts: gravity drops the piece every 500ms
5. Player presses arrow keys to move/rotate
6. Press Space to hard drop
7. When piece can't drop further, it locks, lines are checked
8. Next piece spawns
9. If a piece can't spawn, Game Over
10. P and R keys for pause/restart

Let me also make sure the controls display is clear.

Now, writing the file. I'll create the complete index.html.

Let me also think about the scoring display. The user wants "score, cleared-line count, level, and next-piece preview." I have all of these.

Let me write it:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tetris</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #1a1a2e;
    color: #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
  }
  h1 {
    font-size: 2em;
    margin-bottom: 10px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  }
  #game-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
  }
  canvas {
    border: 2px solid #444;
    background: #0f0f23;
    border-radius: 4px;
  }
  #side-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 160px;
  }
  .info-box {
    background: #16213e;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #333;
  }
  .info-box strong {
    color: #00d2ff;
  }
  #controls {
    font-size: 12px;
    color: #aaa;
    line-height: 1.8;
  }
  #controls b {
    color: #fff;
  }
</style>
</head>
<body>
<h1>TETRIS</h1>
<div id="game-container">
  <canvas id

We need to build a playable falling-block Tetris game in a single HTML file with inline CSS and JS. Requirements:

- 10-column, 20-row visible board
- All seven tetrominoes (I, O, T, S, Z, J, L) with legal spawn positions
- Controls: Left/Right move, Up rotate clockwise, Down soft drop, Space hard drop
- Show controls
- Reject moves/rotations that overlap occupied cells or go out of bounds. Wall kicks optional; if unsupported, reject blocked rotation without changing piece.
- Lock landed pieces, clear complete rows, move rows above down, spawn next piece
- Display score, cleared lines count, level, next-piece preview
- Scoring: 100/300/500/800 points for clearing 1/2/3/4 lines with one piece, multiplied by current level. Start at level 1, increase gravity speed every 10 cleared lines.
- If new piece can't spawn, show Game Over. Pause/Resume and Restart, reset board, score, level, piece sequence.
- Ghost piece / hold optional.

Verification: Move and rotate the first piece, then hard-drop it. Check it locks, new piece spawns, next-piece preview advances. Pause/resume, restart, check cleared board, score, level.

Let me write this from scratch. I'll create a self-contained index.html with all the CSS and JS inline.

Let me design the Tetris game:

**Board**: 10 columns x 20 rows. We'll use a 2D array, 0 = empty, 1..7 = different colors/pieces.

**Tetrominoes**: Define each shape as an array of [row, col] offsets relative to a pivot. Or use matrix representations.

Standard Tetris pieces:
- I: [[0,-1],[0,0],[0,1],[0,2]] — vertical? Actually standard I is horizontal: [[0,0],[1,0],[2,0],[3,0]] but spawn position varies. Let's define them as matrices.

Common representation:
- I: [[1,1,1,1]]
- O: [[1,1],[1,1]]
- T: [[0,1,0],[1,1,1]]
- S: [[0,1,1],[1,1,0]]
- Z: [[1,1,0],[0,1,1]]
- J: [[1,0,0],[1,1,1]]
- L: [[0,0,1],[1,1,1]]

Spawn positions: typically centered at column 3 or 4 (0-indexed). For a 10-wide board, center is around column 4 or 5.

Let me define each piece as a matrix with a spawn position (row, col).

**Controls**:
- ArrowLeft: move left
- ArrowRight: move right
- ArrowUp: rotate clockwise
- ArrowDown: soft drop (move down one)
- Space: hard drop (instantly drop to bottom)
- P: pause/resume
- R: restart

**Gravity**: A timer that drops the current piece every X milliseconds. Level increases every 10 lines. Speed: maybe start at 1000ms, decrease with level.

**Scoring**: 
- 1 line: 100 * level
- 2 lines: 300 * level
- 3 lines: 500 * level
- 4 lines: 800 * level

**Level up**: Every 10 cleared lines, level += 1, and gravity speeds up.

**Game Over**: When a new piece can't be placed (collision at spawn position), show "Game Over".

**Next piece preview**: A small grid showing the next piece.

**Display**: Score, lines cleared, level, next piece preview.

Let me code this up.

I'll structure the HTML:

```html
<!DOCTYPE html>
<html>
<head>
<style>
  /* CSS styles */
</style>
</head>
<body>
  <canvas id="game"></canvas>
  <!-- UI elements -->
  <script>
    // Game logic
  </script>
</body>
</html>
```

Actually, let me think about whether to use canvas or DOM. The task says "falling-block Tetris game on a canvas". So use a canvas element. I'll draw everything on the canvas: board, pieces, next piece preview, score display.

Let me plan the layout:
- Canvas: maybe 300x600 or something. Board is 10x20 cells. Each cell size: let's say 30px. So board is 300x600.
- Next piece preview: a smaller area, maybe 4x4 cells.
- Score display: text above or below.

Let me make the canvas 320x660 or so. Actually, let me keep it simple: canvas width = 10*cellSize + padding, height = 20*cellSize + padding.

Cell size: 30px. Board: 300x600. Add some border/spacing.

Layout:
- Top: title
- Middle: canvas (board + next piece preview)
- Bottom: score, level, lines cleared, controls info

Let me design the canvas content:
- Draw the board: 10 columns x 20 rows
- Draw locked pieces
- Draw current falling piece
- Draw ghost piece (optional)
- Draw next piece preview in a separate area

For simplicity, I'll put the next piece preview to the right of the board within the same canvas, or use a separate small canvas. Let me use one canvas and draw both.

Canvas dimensions: Let's do width = 340, height = 660.
- Board: x=20, y=40, width=300 (10*30), height=600 (20*30)
- Next piece preview: x=330, y=40, width=120 (4*30), height=120 (4*30)

Actually, let me adjust. Board at x=10, y=50, width=300, height=600. Next preview at x=320, y=50, width=120, height=120.

Now, let me code the JavaScript.

**Piece definitions**:

```javascript
const PIECES = {
  I: { shape: [[0,0],[0,1],[0,2],[0,3]], color: 'cyan' },
  O: { shape: [[0,0],[1,0],[0,1],[1,1]], color: 'yellow' },
  T: { shape: [[0,1],[1,0],[1,1],[1,2]], color: 'purple' },
  S: { shape: [[0,1],[0,2],[1,0],[1,1]], color: 'green' },
  Z: { shape: [[0,0],[0,1],[1,1],[1,2]], color: 'red' },
  J: { shape: [[0,0],[1,0],[2,0],[2,1]], color: 'blue' },
  L: { shape: [[0,2],[1,0],[1,1],[1,2]], color: 'orange' }
};
```

Wait, these shapes need to be consistent. Let me use the standard SRS-like shapes.

Standard Tetris block shapes (using matrix notation, 0=empty, 1=filled):

I:
```
[0,0,0,0]
[1,1,1,1]
[0,0,0,0]
[0,0,0,0]
```
But for rotation, we need to handle it properly.

O:
```
[1,1]
[1,1]
```

T:
```
[0,1,0]
[1,1,1]
[0,0,0]
```

S:
```
[0,1,1]
[1,1,0]
[0,0,0]
```

Z:
```
[1,1,0]
[0,1,1]
[0,0,0]
```

J:
```
[1,0,0]
[1,1,1]
[0,0,0]
```

L:
```
[0,0,1]
[1,1,1]
[0,0,0]
```

These are 3x3 matrices. Spawn position: typically row 0 or -1 (above board). For a 20-row board, rows 0-19. Spawn at row 0, centered.

For the I piece, it's 4 wide, so spawn at column 3 (0-indexed) to center it: col 3, so the 4 blocks occupy cols 3,4,5,6.

For other pieces (3x3), spawn at col 3 or 4. Let's use col 3 for all.

**Rotation**: Rotate clockwise: new shape[i][j] = old shape[size-1-j][i]. For a square matrix.

**Collision detection**: Check if any filled cell of the piece (after translation) overlaps a locked cell or goes out of bounds.

**Locking**: When a piece can't move down (gravity or soft drop), lock it into the board, then check for line clears.

**Line clear**: Check each row; if all cells are filled, remove it. Shift rows above down. Increment line count.

**Scoring**: As specified.

**Level**: Start at 1. Gravity interval: base 1000ms, decrease with level. E.g., interval = Math.max(100, 1000 - (level-1)*100). Or increase speed every 10 lines: after every 10 lines, reduce interval.

**Ghost piece**: Optional. I'll implement it for better UX.

**Pause/Resume**: Toggle with P key. When paused, stop the gravity timer.

**Restart**: Reset everything.

**Game Over**: When a new piece can't spawn (collision at initial position).

**Next piece preview**: Draw the next piece in the preview area.

Let me now write the full code.

First, let me decide on the canvas size:
- Cell size: 30px
- Board: 10 cols x 20 rows = 300 x 600
- Board position: x=20, y=60 (some margin)
- Next preview: x=340, y=60, size 120x120 (4x4 cells)

Canvas size: width = 340+30 = 370? Let me make it 370 wide, 660 high.

Actually, let me compute:
- Board: 300 wide, 600 tall
- Board margin: left 20, top 60
- Next preview: 120 wide, 120 tall, at x=340, y=60
- Total width: 340+120 = 460, plus maybe some padding. Let me make canvas 470x660.

Hmm, let me keep it simple:
- Canvas: 470 x 660
- Board: at (20, 60), 300x600
- Next preview: at (340, 60), 120x120

Now, drawing:
- Background: dark gray
- Grid lines: subtle
- Locked cells: colored squares
- Falling piece: colored squares with border
- Ghost piece: lighter version

Colors:
- I: '#00ffff'
- O: '#ffff00'
- T: '#aa00ff'
- S: '#00ff00'
- Z: '#ff0000'
- J: '#0000ff'
- L: '#ff8800'

Score display: top-left. Level, lines cleared, score.

Let me write the code now.

```javascript
// Constants
const COLS = 10;
const ROWS = 20;
const CELL = 30;

// Tetromino definitions
const SHAPES = {
  I: { matrix: [[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]], color: '#00ffff' },
  O: { matrix: [[1,1],[1,1]], color: '#ffff00' },
  T: { matrix: [[0,1,0],[1,1,1],[0,0,0]], color: '#aa00ff' },
  S: { matrix: [[0,1,1],[1,1,0],[0,0,0]], color: '#00ff00' },
  Z: { matrix: [[1,1,0],[0,1,1],[0,0,0]], color: '#ff0000' },
  J: { matrix: [[1,0,0],[1,1,1],[0,0,0]], color: '#0000ff' },
  L: { matrix: [[0,0,1],[1,1,1],[0,0,0]], color: '#ff8800' }
};
```

Wait, the I piece matrix: standard is horizontal bar. My matrix has the filled row in the middle (row 1). That's fine for a 3x3 representation... actually the I piece should be 4 wide. Let me use a 4x4 matrix for I:

I: [[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]]

This is 4 rows, 4 cols. Spawn at row 0, col 3 (so it spans cols 3-6).

For rotation, I need to handle non-square pieces. For I, rotating a 4x4 matrix gives a 4x4 matrix (same dimensions). For others, 3x3.

Rotation function: given a matrix, return rotated 90° clockwise:
```javascript
function rotate(matrix) {
  const n = matrix.length;
  const m = matrix[0].length;
  const rotated = [];
  for (let i = 0; i < m; i++) {
    rotated[i] = [];
    for (let j = 0; j < n; j++) {
      rotated[i][j] = matrix[n - 1 - j][i];
    }
  }
  return rotated;
}
```

**Spawn position**: For each piece type, define spawnRow and spawnCol. Typically row = 0 or -1 (above board). Let's use row = -1 (spawn above the visible board) and col = 3 (centered). Then when checking collision, if the piece is at row -1, only check the cells that would be inside the board.

Actually, simpler: spawn at row 0, col 3. But for the I piece (4 wide), at row 0, cols 3-6, that's fine.

Let me define spawn positions:
- I: row 0, col 3
- O: row 0, col 4
- T: row 0, col 3
- S: row 0, col 3
- Z: row 0, col 3
- J: row 0, col 3
- L: row 0, col 3

**Movement**:
- Left: piece.col -= 1; check collision; if collision, revert.
- Right: piece.col += 1; check.
- Down: piece.row += 1; check.
- Up: rotate; if collision, revert rotation.

**Soft drop**: piece.row += 1 (one step).
**Hard drop**: move piece down until collision, then lock.

**Gravity**: Set a timeout (or use requestAnimationFrame with delta). I'll use setInterval for gravity, with interval based on level.

**Level**: Start at 1. Lines cleared per level: every 10 lines, level++. Gravity interval: base 1000ms, decrease by 50ms per level? Or simpler: interval = Math.max(50, 1000 - (level-1)*100). So at level 1: 1000ms, level 2: 900ms, etc.

**Scoring**:
- 1 line: 100 * level
- 2 lines: 300 * level
- 3 lines: 500 * level
- 4 lines: 800 * level

**Next piece**: Keep a queue of pieces. After spawning, the next piece becomes the current. The preview shows the next piece.

**Display**:
- Score: top-left
- Lines: top-right
- Level: top-right
- Next piece preview: right side
- Controls info: bottom

Let me structure the HTML:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tetris</title>
<style>
  body { font-family: monospace; background: #222; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; }
  canvas { border: 2px solid #555; background: #111; }
  #info { margin-top: 10px; font-size: 14px; }
  #info div { margin: 2px 0; }
</style>
</head>
<body>
<canvas id="game" width="470" height="660"></canvas>
<div id="info">
  <div>Score: <span id="score">0</span></div>
  <div>Lines: <span id="lines">0</span></div>
  <div>Level: <span id="level">1</span></div>
  <div>Controls:</div>
  <div>← → Move</div>
  <div>↑ Rotate</div>
  <div>↓ Soft Drop</div>
  <div>Space Hard Drop</div>
  <div>P Pause</div>
  <div>R Restart</div>
</div>
<script>
  // Game code
</script>
</body>
</html>
```

Now, the JavaScript. Let me write it carefully.

State:
- board: 2D array ROWS x COLS, 0 = empty, otherwise color string
- currentPiece: { type, matrix, color, row, col }
- nextType: string
- score, linesCleared, level
- gameOver: boolean
- paused: boolean
- dropTimer: interval ID
- gravityInterval: based on level

Functions:
- init(): reset state, spawn first piece
- spawnPiece(type): create piece at spawn position
- rotatePiece(direction): clockwise rotation
- movePiece(dx, dy): move, return true if valid
- hardDrop(): drop to bottom
- lockPiece(): place piece on board
- clearLines(): check and clear completed rows
- updateScore(): calculate points
- nextPiece(): get next piece type
- draw(): render everything
- gameLoop(): called via setInterval for gravity

Let me write the code.

First, the piece spawn positions. I'll define spawn as:
```javascript
const SPAWN = {
  I: { row: 0, col: 3 },
  O: { row: 0, col: 4 },
  T: { row: 0, col: 3 },
  S: { row: 0, col: 3 },
  Z: { row: 0, col: 3 },
  J: { row: 0, col: 3 },
  L: { row: 0, col: 3 }
};
```

Actually, for the I piece spanning 4 columns, starting at col 3 means it occupies cols 3,4,5,6. That's centered in a 10-wide board (cols 0-9). Good.

For other pieces (3x3), starting at col 3 means cols 3,4,5. Also centered.

**Collision check**:
```javascript
function collides(piece, board) {
  for (let r = 0; r < piece.matrix.length; r++) {
    for (let c = 0; c < piece.matrix[r].length; c++) {
      if (piece.matrix[r][c]) {
        const boardR = piece.row + r;
        const boardC = piece.col + c;
        if (boardC < 0 || boardC >= COLS || boardR < 0 || boardR >= ROWS) return true;
        if (boardR >= 0 && boardC >= 0 && board[boardR][boardC]) return true;
      }
    }
  }
  return false;
}
```

**Rotate**:
```javascript
function rotateMatrix(matrix) {
  const n = matrix.length;
  const m = matrix[0].length;
  const rotated = [];
  for (let i = 0; i < m; i++) {
    rotated[i] = [];
    for (let j = 0; j < n; j++) {
      rotated[i][j] = matrix[n - 1 - j][i];
    }
  }
  return rotated;
}
```

**Move**:
```javascript
function movePiece(dx, dy) {
  const newPiece = { ...currentPiece, row: currentPiece.row + dy, col: currentPiece.col + dx };
  if (collides(newPiece, board)) return false;
  currentPiece.row = newPiece.row;
  currentPiece.col = newPiece.col;
  return true;
}
```

**Hard drop**:
```javascript
function hardDrop() {
  while (movePiece(0, 1)) {}
  // lock
  lockPiece();
}
```

**Lock piece**:
```javascript
function lockPiece() {
  for (let r = 0; r < currentPiece.matrix.length; r++) {
    for (let c = 0; c < currentPiece.matrix[r].length; c++) {
      if (currentPiece.matrix[r][c]) {
        const boardR = currentPiece.row + r;
        const boardC = currentPiece.col + c;
        if (boardR >= 0 && boardC >= 0) {
          board[boardR][boardC] = currentPiece.color;
        }
      }
    }
  }
  clearLines();
  spawnPiece();
}
```

**Clear lines**:
```javascript
function clearLines() {
  let linesCleared = 0;
  for (let r = ROWS - 1; r >= 0; r--) {
    if (board[r].every(cell => cell !== 0)) {
      board.splice(r, 1);
      board.unshift(Array(COLS).fill(0));
      linesCleared++;
      r++; // recheck same row index
    }
  }
  if (linesCleared > 0) {
    updateScore(linesCleared);
  }
}
```

**Update score**:
```javascript
function updateScore(lines) {
  let points = 0;
  if (lines === 1) points = 100;
  else if (lines === 2) points = 300;
  else if (lines === 3) points = 500;
  else if (lines === 4) points = 800;
  score += points * level;
  linesCleared += lines;
  if (linesCleared >= 10) {
    level++;
    gravityInterval = Math.max(50, 1000 - (level - 1) * 100);
  }
  updateUI();
}
```

**Next piece**:
```javascript
function nextPieceType() {
  const types = Object.keys(SHAPES);
  // cycle through types
  if (!currentNext) {
    currentNext = types[Math.floor(Math.random() * types.length)];
  }
  return currentNext;
}
```

Hmm, I need to track the queue. Simpler: just pick a random next type each time. Or maintain a queue. Let me keep it simple: `nextType` is a random choice from the 7 types.

Actually, for a proper sequence, I could cycle through them. But random is fine for this demo.

**Draw**:
- Clear canvas
- Draw board background
- Draw locked cells
- Draw ghost piece (optional)
- Draw current piece
- Draw next piece preview
- Draw grid lines?

Let me draw:
1. Fill board area with dark color
2. For each locked cell, draw a colored rectangle
3. Draw ghost piece (semi-transparent)
4. Draw current piece
5. Draw next piece preview

For the preview, I'll draw the next piece at a smaller scale (15px cells?).

**Ghost piece**: Copy current piece, rotate? No, just the current shape at the position where it would land. Draw it at current row (the row where it currently is, or the bottom?). Standard ghost: project the piece to the bottom of the stack. I'll draw it at the position where the piece would land (current row + offset). Actually, ghost is drawn at the final locked position. Since we call lockPiece() before drawing, the ghost should be drawn at the current position (before locking). Let me draw ghost at currentPiece position.

**Gravity loop**:
```javascript
let dropInterval;
function startGravity() {
  dropInterval = setInterval(() => {
    if (!paused && !gameOver) {
      if (!movePiece(0, 1)) {
        lockPiece();
      }
    }
  }, gravityInterval);
}
```

When hard drop, we don't use the interval; we directly drop.

**Pause/Resume**: Toggle `paused`. If paused, stop the interval (clearInterval) and redraw.

**Restart**: Reset all state, spawn first piece.

**Game Over**: When spawnPiece fails (collision at spawn position), set gameOver = true, display "Game Over".

Let me also add a game over overlay on the canvas.

Now, let me write the complete code. I'll be careful with the JS.

Let me also think about the canvas layout more precisely:

Canvas: 470 x 660
- Board: x=20, y=60, w=300, h=600 (10*30, 20*30)
- Next preview: x=340, y=60, w=120, h=120 (4*30, 4*30)

So the preview starts at x=340. Board ends at x=320. Gap of 20px.

Text positions:
- Score: top-left, near (30, 50)
- Level: top-right, near (430, 50)
- Lines: somewhere

Let me write the complete file now.

Actually, let me reconsider the board position. If the board is at x=20, y=60, and the preview at x=340, y=60, then the total width needed is 340+120=460. Height 660 covers the board (60+600=660). Good.

Now, let me write the code.

One issue: the I piece matrix is 4x4, others are 3x3. When drawing, I need to iterate over the actual matrix dimensions.

For drawing the preview, I'll use the next piece's matrix and draw it scaled to 15px per cell (or just use the same CELL size).

Let me code it all now.

Here's my plan for the complete index.html:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tetris</title>
<style>
  body {
    font-family: 'Courier New', monospace;
    background: #1a1a2e;
    color: #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
  }
  canvas {
    border: 2px solid #444;
    background: #0f0f23;
  }
  #info {
    margin-top: 12px;
    font-size: 14px;
    display: flex;
    gap: 20px;
    align-items: center;
  }
  #info div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #info span {
    color: #00d4ff;
    font-weight: bold;
  }
</style>
</head>
<body>
<canvas id="game" width="470" height="660"></canvas>
<div id="info">
  <div>Score: <span id="score">0</span></div>
  <div>Lines: <span id="lines">0</span></div>
  <div>Level: <span id="level">1</span></div>
  <div>Next: <span id="next">?</span></div>
  <div style="margin-top:8px;">
    <div>← → Move</div>
    <div>↑ Rotate</div>
    <div>↓ Soft Drop</div>
    <div>Space Hard Drop</div>
    <div>P Pause</div>
    <div>R Restart</div>
  </div>
</div>
<script>
// ... game code ...
</script>
</body>
</html>
```

Now the JavaScript. Let me write it all out.

```javascript
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

const COLS = 10;
const ROWS = 20;
const CELL = 30;

// Tetromino definitions
const SHAPES = {
  I: { matrix: [[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]], color: '#00ffff' },
  O: { matrix: [[1,1],[1,1]], color: '#ffff00' },
  T: { matrix: [[0,1,0],[1,1,1],[0,0,0]], color: '#aa00ff' },
  S: { matrix: [[0,1,1],[1,1,0],[0,0,0]], color: '#00ff00' },
  Z: { matrix: [[1,1,0],[0,1,1],[0,0,0]], color: '#ff0000' },
  J: { matrix: [[1,0,0],[1,1,1],[0,0,0]], color: '#0000ff' },
  L: { matrix: [[0,0,1],[1,1,1],[0,0,0]], color: '#ff8800' }
};

const TYPES = Object.keys(SHAPES);

// Game state
let board = [];
let currentPiece = null;
let nextType = '';
let score = 0;
let linesCleared = 0;
let level = 1;
let gameOver = false;
let paused = false;
let dropInterval = null;
let gravityInterval = 1000; // ms

// Spawn positions (row, col)
const SPAWN = {
  I: { row: 0, col: 3 },
  O: { row: 0, col: 4 },
  T: { row: 0, col: 3 },
  S: { row: 0, col: 3 },
  Z: { row: 0, col: 3 },
  J: { row: 0, col: 3 },
  L: { row: 0, col: 3 }
};

// Initialize board
function createBoard() {
  return Array.from({length: ROWS}, () => Array(COLS).fill(0));
}

// Collision detection
function collides(piece, board) {
  for (let r = 0; r < piece.matrix.length; r++) {
    for (let c = 0; c < piece.matrix[r].length; c++) {
      if (piece.matrix[r][c]) {
        const br = piece.row + r;
        const bc = piece.col + c;
        if (bc < 0 || bc >= COLS || br < 0 || br >= ROWS) return true;
        if (br >= 0 && board[br][bc]) return true;
      }
    }
  }
  return false;
}

// Rotate clockwise
function rotateMatrix(matrix) {
  const n = matrix.length;
  const m = matrix[0].length;
  const rotated = [];
  for (let i = 0; i < m; i++) {
    rotated[i] = [];
    for (let j = 0; j < n; j++) {
      rotated[i][j] = matrix[n - 1 - j][i];
    }
  }
  return rotated;
}

// Create a piece object
function createPiece(type) {
  const def = SHAPES[type];
  return {
    type: type,
    matrix: def.matrix.map(row => [...row]),
    color: def.color,
    row: SPAWN[type].row,
    col: SPAWN[type].col
  };
}

// Spawn next piece
function spawnPiece() {
  if (!nextType) {
    nextType = TYPES[Math.floor(Math.random() * TYPES.length)];
  }
  const type = nextType;
  nextType = TYPES[Math.floor(Math.random() * TYPES.length)];
  currentPiece = createPiece(type);
  // Check if spawn is valid
  if (collides(currentPiece, board)) {
    gameOver = true;
  }
}

// Move piece
function movePiece(dx, dy) {
  const newPiece = {
    type: currentPiece.type,
    matrix: currentPiece.matrix.map(row => [...row]),
    color: currentPiece.color,
    row: currentPiece.row + dy,
    col: currentPiece.col + dx
  };
  if (collides(newPiece, board)) return false;
  currentPiece.row = newPiece.row;
  currentPiece.col = newPiece.col;
  return true;
}

// Rotate piece
function rotatePiece() {
  if (currentPiece.type === 'O') return; // O doesn't rotate
  const rotated = rotateMatrix(currentPiece.matrix);
  const newPiece = {
    type: currentPiece.type,
    matrix: rotated,
    color: currentPiece.color,
    row: currentPiece.row,
    col: currentPiece.col
  };
  if (collides(newPiece, board)) return;
  currentPiece.matrix = rotated;
}

// Soft drop
function softDrop() {
  if (movePiece(0, 1)) {
    return true;
  }
  return false;
}

// Hard drop
function hardDrop() {
  while (movePiece(0, 1)) {}
  // Lock the piece
  lockPiece();
}

// Lock piece onto board
function lockPiece() {
  for (let r = 0; r < currentPiece.matrix.length; r++) {
    for (let c = 0; c < currentPiece.matrix[r].length; c++) {
      if (currentPiece.matrix[r][c]) {
        const br = currentPiece.row + r;
        const bc = currentPiece.col + c;
        if (br >= 0 && bc >= 0) {
          board[br][bc] = currentPiece.color;
        }
      }
    }
  }
  clearLines();
  spawnPiece();
}

// Clear completed lines
function clearLines() {
  let cleared = 0;
  for (let r = ROWS - 1; r >= 0; r--) {
    if (board[r].every(cell => cell !== 0)) {
      board.splice(r, 1);
      board.unshift(Array(COLS).fill(0));
      cleared++;
      r++; // recheck this row
    }
  }
  if (cleared > 0) {
    updateScore(cleared);
  }
}

// Update score
function updateScore(lines) {
  let points;
  if (lines === 1) points = 100;
  else if (lines === 2) points = 300;
  else if (lines === 3) points = 500;
  else if (lines === 4) points = 800;
  else points = 0;
  score += points * level;
  linesCleared += lines;
  // Level up every 10 lines
  if (linesCleared >= 10) {
    level++;
    gravityInterval = Math.max(50, 1000 - (level - 1) * 100);
  }
  updateUI();
}

// Update UI display
function updateUI() {
  document.getElementById('score').textContent = score;
  document.getElementById('lines').textContent = linesCleared;
  document.getElementById('level').textContent = level;
  document.getElementById('next').textContent = nextType || '?';
}

// Draw the board
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Board background
  ctx.fillStyle = '#0a0a1a';
  ctx.fillRect(20, 60, 300, 600);
  
  // Grid lines (subtle)
  ctx.strokeStyle = '#1a1a3a';
  ctx.lineWidth = 0.5;
  for (let r = 0; r <= ROWS; r++) {
    ctx.beginPath();
    ctx.moveTo(20, 60 + r * CELL);
    ctx.lineTo(320, 60 + r * CELL);
    ctx.stroke();
  }
  for (let c = 0; c <= COLS; c++) {
    ctx.beginPath();
    ctx.moveTo(20 + c * CELL, 60);
    ctx.lineTo(20 + c * CELL, 660);
    ctx.stroke();
  }
  
  // Draw locked cells
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      if (board[r][c]) {
        ctx.fillStyle = board[r][c];
        ctx.fillRect(20 + c * CELL, 60 + r * CELL, CELL, CELL);
        // Subtle border
        ctx.strokeStyle = 'rgba(255,255,255,0.1)';
        ctx.strokeRect(20 + c * CELL, 60 + r * CELL, CELL,