Nemotron 3.5 Lightning (free)

We need to produce a single HTML file with vanilla JS and canvas, meeting all requirements.

Constraints:

- Output only a fenced code block with html (or svg). So output should be just ```html ...``` and nothing else before or after.

- Must be self-contained: CSS inline <style>, JS inline <script>. No external files, images, fonts, or network requests except CDN URLs explicitly allowed. But we can embed assets? But must not request network. Could use data URIs? Might be okay but safer to avoid. We can use system fonts, but we can just use default.

- Must look right in 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar. So responsive layout.

- Something meaningful visible on first paint: screenshot taken after 3s. So initial paint should show something, maybe start screen with "Click or press a key to start".

- Something meaningful must be visible within first seconds: nothing hidden behind high score, etc.

- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.

- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.

- Code must run with zero errors in the console of the latest Chrome.

- Requirements:

   - Grid of at least 20x20 cells, centered on the page.

   - Arrow keys and WASD control the snake. Quick successive key presses must both be honored, but snake can never reverse onto itself.

   - Eating food adds 10 points and grows snake by one cell; new food never spawns on the snake.

   - Game over when snake hits a wall or itself, with overlay showing score; Space or Enter restarts, P pauses.

   - Visual polish: smooth movement, a snake with a distinct head and eyes facing its direction, and a small particle burst when eating.

   - Display the current score and the best score of the session.

- Additional: "Games must start in a self-playing demo mode (a simple AI plays) behind a 'Click or press a key to start' message, so the game can be judged in action without playing."

Thus we need an initial demo mode where the snake AI moves automatically; after user clicks or presses key, the game starts with player control. Also need to display "Click or press a key to start".

- The iframe only receives keyboard events after the user clicks it: So we need to show click message and maybe bind click on canvas to enable keyboard.

- Must not use alert, confirm, prompt.

- Need to show score and best score; best score of session could be stored in localStorage? But localStorage is blocked. So we can just keep best score in memory; it will reset on reload but that's okay. Or we could use a cookie but not allowed. So just keep best score variable.

- Visual polish: snake with distinct head and eyes facing direction. Particle burst on eating.

- Smooth movement: maybe using requestAnimationFrame and moving snake each tick.

Implement:

- Canvas size: We'll make grid of 20x20 cells. Determine cell size based on viewport. For responsiveness: maybe min( width/20, height/20 ) but ensure fits. We'll set canvas width/height based on cells * cellSize. Center it.

- We'll have a start screen overlay with "Click or press a key to start". While in demo mode, AI controls snake.

- After user interaction, we switch to player control.

- The demo AI: simple: snake moves towards food randomly or straight? We'll have basic AI: move in current direction, but if can turn towards food.

Simplify: The demo just continues moving straight, turning randomly when hitting wall? But must be visible. Maybe just have the snake move in a pattern: every few seconds change direction randomly, but avoid reversing.

- The game over overlay: semi-transparent dark background, score text, Restart (Space/Enter) and P to pause.

- Pause: press P toggles pause; during pause, game stops.

- Quick successive key presses honored: we need to queue direction changes. We'll have a direction vector and a pending direction that can be set but not allowed to reverse.

- We'll track last direction and pending direction.

- Food spawn: random cell not occupied by snake.

- Particle burst: on eating, create few small circles that fade and disappear.

- Smooth movement: we can move snake by updating position each frame based on a timer or speed.

Implementation plan:

HTML:

- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Snake</title>
  <style>
    body { margin:0; overflow-x:hidden; font-family:sans-serif; }
    canvas { display:block; margin:auto; }
    .overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; }
    .overlay h1 { font-size:2rem; margin-bottom:1rem; }
    .overlay p { margin:0.5rem 0; }
    #score, #bestScore { font-size:1.2rem; }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <div id="startOverlay" class="overlay">
    <h1>Snake</h1>
    <p>Click or press a key to start</p>
    <p id="demoInfo">Watch the AI play!</p>
  </div>
  <div id="scoreBoard" style="position:absolute; top:10px; left:10px; color:#fff; font-size:1rem;">Score: <span id="currentScore">0</span> | Best: <span id="bestScore">0</span></div>
  <div id="pauseOverlay" class="overlay" style="display:none;">Press P to pause</div>

  <script>
    // all JS here
  </script>
</body>
</html>

But need to meet responsive.

Implement JS:

Variables:

- const GRID_SIZE = 20;
- let cellSize; computed on window resize.
- canvas width = GRID_SIZE * cellSize; height same.

- Snake: array of {x,y} coordinates, each cell index.

- Direction: {dx, dy} current movement direction.

- Pending direction: maybe same structure, to be applied on next tick if not opposite.

- Food: {x,y}.

- Score: number, bestScore: number.

- Game state: 'start', 'play', 'gameOver', 'paused'.

- Particles array for burst.

Event handling:

- keydown: if game state 'start', we transition to play (demo or player). If game state 'play' or 'paused', we update pending direction.

- But keyboard only after canvas click. So we can set a flag `inputEnabled` false initially, set true on first click on canvas or keydown (but we need to allow key to start). Actually requirement: "The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear 'Click or press a key to start' message." So we can listen for click on canvas, then enable keyboard.

Thus initially, click on canvas enables input.

- For demo mode: after input enabled, we start demo AI; but maybe we can just start player control after click. However requirement: "Games must start in a self-playing demo mode (a simple AI plays) behind a 'Click or press a key to start' message, so the game can be judged in action without playing." Means initially the game should auto-play demo; after user interaction, maybe take over? Or maybe the demo plays, and after clicking, the game switches to player control? The phrase "behind a 'Click or press a key to start' message" suggests the demo is hidden behind that message; you click to start the demo? Actually reading: "Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing." So we need to show a start message; clicking or pressing a key starts the demo AI playing. After that, maybe the game continues in demo mode; but also allow player control after? The requirement of arrow/WASD control implies after start, player can control. But they also want demo mode for judging. Possibly we can have two phases: initial click starts demo AI; after some time or another click, player takes over. But spec: "Games must start in a self-playing demo mode ... so the game can be judged in action without playing." So we need to have demo mode initially; after user interaction, we can either keep demo mode or switch to player. But also requirement of arrow keys control; maybe after clicking, player can control. But they also say "so the game can be judged in action without playing." Means observer can watch demo; but the player could also play. I'd implement: On first click or keypress, we start the demo AI playing; the UI shows "Click or press a key to start". Once clicked, the demo begins; the player can still use arrow keys to take over? To keep simple, after click, we switch to player control; but then there is no demo AI. However they said "behind a 'Click or press a key to start' message". So perhaps the demo auto-plays without needing click to start; the message appears and once clicked, the demo starts. So I think: initially show start overlay; on click, hide overlay, start demo AI; after that, the game runs with AI control; but the player can also take over using keys? Could but not required. Simpler: after click, start demo AI; and also enable keyboard; if user presses arrow keys, they override AI direction (maybe). But requirement: "Quick successive key presses must both be honored, but the snake can never reverse onto itself." That implies player control. Maybe we can have both: after click, the demo AI runs; but if user presses a key, player takes control. That would be interesting.

Simplify: We'll implement: On first click or keypress, start demo AI; but also enable keyboard; if user presses a direction key, we switch control to player (set playerControl = true) and the AI stops. Or we could just let player control from start after click; but then there is no demo mode. But the requirement says "Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message". That could be interpreted that the demo mode is the initial state behind the message; after clicking, the demo starts. So we need to show demo AI playing. So we should implement demo AI that runs automatically, and after user clicks, the demo starts; maybe the player can't control afterwards, but it's okay because they can watch. However arrow key control is required; but maybe it's only needed for when player takes over, but not mandatory if demo runs. The requirement list includes arrow keys and WASD control; but maybe they expect the game to be playable, but demo mode also uses those keys? The demo AI could also respond to keys? Not needed.

I'll implement: After click, demo AI starts; the snake moves automatically; the keyboard is enabled; if the user presses a key, we switch to player control (disabling AI). That satisfies both.

But need to be careful about "The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear 'Click or press a key to start' message." So we need to show the message, and after click, keyboard works. We'll do that.

Implementation steps:

- On load: compute cellSize based on inner width/height, but ensure at least e.g., 20 cells fit. We'll set canvas size = Math.min(innerWidth, innerHeight) * 0.8 / GRID_SIZE maybe. Let's decide: We'll make canvas width = GRID_SIZE * cellSize, height same. cellSize = Math.min(innerWidth, innerHeight) / GRID_SIZE * 0.9 maybe. But must adapt down to 375px width. So we'll set canvas width = Math.min(innerWidth, 1280) etc. Simpler: set canvas size via CSS: width: 90%; max-width: 600px; and then compute cellSize based on canvas width. But need to ensure no horizontal scroll. We'll use CSS to make canvas responsive: set width: 90% of container, max-width: 600px; height: auto maintain aspect ratio. Then JS can get canvas.clientWidth to compute cellSize.

Better: In HTML, set canvas style: `width: 90%; max-width: 600px; height: auto; margin: 0 auto; display: block;`. Then in JS, `const cellSize = canvas.clientWidth / GRID_SIZE;` but height may differ; we can ensure canvas is square.

We'll set canvas height same as width via JS on resize: `canvas.height = canvas.width;`. That ensures square grid.

- startOverlay: block element centered.

- scoreBoard: fixed top-left.

- pauseOverlay: similar.

Now the game loop:

- Use `let lastTime = 0;` and `function animate(time){ ... requestAnimationFrame(animate); }` inside start after input enabled.

- Movement speed: e.g., 150 ms per cell. We'll track `let accumulator = 0;` and `const INTERVAL = 150;` inside animate, accumulate delta time, when enough, move snake.

- Movement: add new head in direction, check collision with walls and self. If food eaten: increment score, grow snake (don't pop tail), spawn food, trigger particle burst. Else: pop tail (remove last segment) to maintain length.

- Direction handling: We'll keep `direction` vector and `nextDirection` pending. On key press, if not opposite, set `nextDirection = newDir`. The snake will apply nextDirection on next move tick.

- Quick successive keys: we allow multiple pending directions? Actually snake can only have one direction at a time; but quick successive presses could change direction rapidly. To honor both, we could queue up to, say, 2 direction changes. But typical snake allows only one direction change per tick; but requirement "Quick successive key presses must both be honored" maybe means if user presses Right then Left quickly, both should be processed but cannot reverse onto itself. Actually they likely mean that pressing Right then Up should allow turning, not being ignored. So we just need to ensure that if two keys pressed in succession, the later one is considered if not opposite. We'll just use a pending direction that gets applied each tick; if a new key pressed while pending, we can update pending to new direction unless it's opposite of current. That should satisfy.

We need to track last direction to prevent reverse. So condition: if `nextDirection.dx !== -direction.dx || nextDirection.dy !== -direction.dy` i.e., not opposite.

- Food spawn: random cell not in snake array.

- Particle burst: on eating, create e.g., 8 particles with random small velocities, color maybe snake color, fade out over 0.5s. We'll store particles as objects {x, y, vx, vy, life, maxLife, size}. In animate, update and draw them; remove when life <=0.

- Game over: when collision detected, set state to 'gameOver', show overlay with score, best score. Keep bestScore = Math.max(bestScore, score). Display.

- Restart: Space or Enter key restarts game; we need to handle keydown for Space/Enter. On restart, reset snake, score, food, particles, state to 'start' maybe or directly to 'play' with demo? Actually after game over, user can press Space/Enter to restart. Should the restart go to demo mode or player mode? Probably restart starts a new game with player control after click? But the initial click already happened; we can just reset and start in player control mode. Or we could keep demo mode? Probably better to restart with player control, as they may want to play. We'll set state to 'start' and show start overlay again? But requirement: "Space or Enter restarts, P pauses." So after game over, pressing Space/Enter should restart the game. We can just reset everything and hide game over overlay, start with player control (since user already clicked). We'll set state = 'play' with player control.

- Pause: Press P toggles pause state; during pause, game loop stops; overlay appears.

Implementation details:

We'll define global variables at top of script.

We'll use `const` for colors etc.

Now implement.

Potential pitfalls:

- No external libraries.

- Must not use alert/confirm/prompt.

- Must not use localStorage.

- Console must have zero errors.

- Must handle window resize gracefully; but we can just recompute cellSize on resize.

- The canvas click to enable input: we need to listen for `canvas.addEventListener('click', startGame);` and also `canvas.addEventListener('keydown', startGame);` but only after click? Actually requirement: "The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message." Means we should not allow keyboard before a click. So we can set a flag `inputEnabled = false;` initially. On canvas click, set `inputEnabled = true;` and hide start overlay. Also we can listen for keydown anywhere, but only process if `inputEnabled`. However, to start demo, we may need to allow keypress to start even without click? But spec says keyboard only after click. So we will enforce click first.

Thus initial state: start overlay visible, inputEnabled false. On canvas click, we hide overlay, set inputEnabled true, start demo AI.

But also we might want to allow key press to start if user presses a key before clicking? Spec says keyboard events after click only. So we enforce click.

Thus: On canvas click, we transition to demo mode.

Now demo AI: we need simple AI. We'll have snake moving in current direction; every few seconds change direction randomly towards food or just random. We'll implement: In each move tick, after moving, if snake hasn't eaten food for a while, choose new direction random but not opposite. Or we can have AI direction towards food: compute sign of food.x - snake.head.x, etc., and set direction accordingly, but ensure not reverse.

Simplify: The demo AI will just move forward; every time it hits a wall or itself (shouldn't happen if map enough space) it will pick a new random direction. But since we have food, AI will try to go towards food: compute direction vector towards food (sign of diff). If that direction is opposite of current, choose another random direction. This will make snake navigate towards food.

We'll implement AI direction selection each move: If food exists, compute desired direction: `dx = food.x - snake[0].x; dy = food.y - snake[0].y;` then normalize to unit step (sign). If desired direction is not opposite of current direction, set `nextDirection = {dx, dy}`. Else, choose a random direction that is not opposite.

But we need to be careful: The snake moves cell by cell; the AI may turn gradually.

We'll implement AI each tick: after moving, we call `chooseAIDirection()`.

Now incorporate particle burst: on eating, create particles at food position. Each particle has x, y (center of food cell), vx, vy random small values, life 30 frames, maxLife 30, size maybe 3. In animate loop, we update particle life and draw as filled circle with alpha fading.

Now score display: we have `#currentScore` and `#bestScore` elements.

Now best score: keep in variable `bestScore`; initial 0. Update on game over.

Now overlay for game over: we have `#gameOverOverlay` maybe not predefined; we can create dynamically or use existing overlay and modify content. We'll have a `div id="gameOverOverlay"` hidden initially, with similar style. On game over, set innerHTML to `Score: ${score}<br>Best: ${bestScore}<br><br>Press Space or Enter to restart`. We'll show it.

Similarly pause overlay: `#pauseOverlay` we already have.

Now ensure no horizontal scroll: set `html, body {overflow-x: hidden;}`.

Now responsive: we will set canvas width via CSS: `width: 90%; max-width: 600px; margin: 0 auto;` and height auto but we set JS to set canvas.height = canvas.width. That will keep square.

But need to ensure grid centered: the canvas itself centered via auto margin.

Now start overlay: we will have `#startOverlay` with `position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.7); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;`. That will cover canvas.

But we need to hide it after click.

Now the code structure:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Snake</title>
  <style>
    body {margin:0; overflow-x:hidden; font-family:sans-serif;}
    canvas {display:block; width:90%; max-width:600px; margin:0 auto; background:#111;}
    #startOverlay, #gameOverOverlay, #pauseOverlay {
      position:absolute; top:0; left:0; width:100%; height:100%;
      background:rgba(0,0,0,0.7); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;
    }
    #scoreBoard {position:absolute; top:10px; left:10px; color:#fff; font-size:1rem;}
    h1 {margin:0; font-size:2rem;}
    p {margin:0.5rem 0;}
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <div id="startOverlay">
    <h1>Snake</h1>
    <p>Click or press a key to start</p>
    <p id="demoInfo">Watch the AI play!</p>
  </div>
  <div id="scoreBoard">Score: <span id="currentScore">0</span> | Best: <span id="bestScore">0</span></div>
  <div id="pauseOverlay" style="display:none;">Press P to pause</div>
  <div id="gameOverOverlay" style="display:none;"></div>

  <script>
    // JS code
  </script>
</body>
</html>
```

Now the JS:

We'll encapsulate in onload or just run after DOM? Since we need canvas, we can run after DOMContentLoaded. We'll just write script at bottom, but ensure canvas exists.

We'll compute cellSize after window resize; we can set up event listener `window.addEventListener('resize', resizeCanvas);`. But we need to be careful about infinite loops; fine.

Implementation steps in JS:

- variables:

```
const GRID_SIZE = 20;
let cellSize = 0;
let canvas, ctx;
let snake = [];
let direction = {dx: 1, dy: 0}; // start moving right
let nextDirection = null;
let food = {x:0, y:0};
let score = 0;
let bestScore = 0;
let gameState = 'start'; // start, play, gameOver, paused
let particles = [];
let lastTime = 0;
let moveAccumulator = 0;
const MOVE_INTERVAL = 150; // ms
```

- init function:

```
function init() {
  canvas = document.getElementById('gameCanvas');
  ctx = canvas.getContext('2d');
  resizeCanvas();
  // start overlay click listener
  const startOverlay = document.getElementById('startOverlay');
  const gameCanvas = canvas;
  gameCanvas.addEventListener('click', startGame);
  // key listener globally but only after input enabled
  let inputEnabled = false;
  document.addEventListener('keydown', (e) => {
    if (!inputEnabled) return;
    // handle start or control
    if (gameState === 'start') {
      // start demo
      startDemo();
    } else if (gameState === 'play' || gameState === 'paused') {
      handlePlayerInput(e);
    } else if (gameState === 'gameOver') {
      if (e.code === 'Space' || e.code === 'Enter') restartGame();
    }
  });
  // also allow restart via space/enter elsewhere
}
```

But careful: The requirement "The iframe only receives keyboard events after the user clicks it". So we should not allow keydown before click. So the keydown listener should be registered after click. So we can register keydown after click.

Thus restructure:

- On canvas click, set `inputEnabled = true;` and hide start overlay, then possibly start demo.

- Then add document keydown listener at that time, or just use a single listener that checks `inputEnabled`.

Simplify: We'll have a global keydown listener that checks `if (!inputEnabled) return;`. Initially `inputEnabled = false`. On canvas click, set `inputEnabled = true;` and also start demo (or start player?). According to requirement, after click, demo starts. So on click:

```
function startGame() {
  inputEnabled = true;
  startOverlay.style.display = 'none';
  // start demo mode
  startDemo();
  // add keydown listener (if not already)
  if (!keydownListenerAdded) {
    document.addEventListener('keydown', handleKeydown);
    keydownListenerAdded = true;
  }
}
```

But we also need to handle start overlay maybe also key press before click? Not allowed. So fine.

Now handleKeydown:

```
function handleKeydown(e) {
  if (gameState === 'start') {
    // should not happen because startDemo already called
    startDemo();
  } else if (gameState === 'play') {
    // player input
    const key = e.key; // but we need code: ArrowUp, ArrowDown, ArrowLeft, ArrowRight, KeyW, KeyA, KeyS, KeyD
    // map to direction change
    let newDir = null;
    if (e.code === 'ArrowUp' || e.code === 'KeyW') newDir = {dx:0, dy:-1};
    else if (e.code === 'ArrowDown' || e.code === 'KeyS') newDir = {dx:0, dy:1};
    else if (e.code === 'ArrowLeft' || e.code === 'KeyA') newDir = {dx:-1, dy:0};
    else if (e.code === 'ArrowRight' || e.code === 'KeyD') newDir = {dx:1, dy:0};
    if (newDir) {
      // prevent reverse
      if (newDir.dx !== -direction.dx || newDir.dy !== -direction.dy) {
        nextDirection = newDir;
      }
    }
  } else if (gameState === 'gameOver') {
    if (e.code === 'Space' || e.code === 'Enter') {
      restartGame();
    }
  } else if (gameState === 'paused') {
    if (e.code === 'KeyP') togglePause(); // but P already toggles pause maybe via same key
  }
}
```

But we need to ensure that while paused, pressing P resumes. We'll implement pause toggle logic.

Now demo AI:

```
function startDemo() {
  gameState = 'play';
  // reset game state
  resetGame();
  // main loop
  lastTime = 0;
  animate();
}

function resetGame() {
  score = 0;
  updateScoreDisplay();
  // create snake at center
  const startX = Math.floor(GRID_SIZE / 2);
  const startY = Math.floor(GRID_SIZE / 2);
  snake = [];
  for (let i = 0; i < 3; i++) {
    snake.push({x: startX - i, y: startY});
  }
  direction = {dx: 1, dy: 0}; // start moving right
  nextDirection = null;
  // spawn food
  spawnFood();
  particles = [];
  // game state play
  gameState = 'play';
}

function spawnFood() {
  let valid = false;
  while (!valid) {
    food.x = Math.floor(Math.random() * GRID_SIZE);
    food.y = Math.floor(Math.random() * GRID_SIZE);
    valid = !snake.some(seg => seg.x === food.x && seg.y === food.y);
  }
}
```

AI direction choose:

```
function chooseAIDirection() {
  // if food exists, try to move towards it
  let targetDir = null;
  if (food) {
    const dx = food.x - snake[0].x;
    const dy = food.y - snake[0].y;
    // determine sign
    const signX = dx > 0 ? 1 : dx < 0 ? -1 : 0;
    const signY = dy > 0 ? 1 : dy < 0 ? -1 : 0;
    // we want to move either horizontally or vertically; if both non-zero, pick one.
    // simple: if abs(dx) > abs(dy) move horizontally else vertically.
    if (Math.abs(dx) > Math.abs(dy)) {
      targetDir = {dx: signX, dy: 0};
    } else {
      targetDir = {dx: 0, dy: signY};
    }
  }
  // if targetDir is opposite of current direction, choose random valid direction
  if (targetDir && (targetDir.dx === -direction.dx && targetDir.dy === -direction.dy)) {
    targetDir = null;
  }
  if (!targetDir) {
    // random direction not opposite
    const possible = [
      {dx:1,dy:0},{dx:-1,dy:0},{dx:0,dy:1},{dx:0,dy:-1}
    ].filter(d => !(d.dx === -direction.dx && d.dy === -direction.dy));
    targetDir = possible[Math.floor(Math.random() * possible.length)];
  }
  nextDirection = targetDir;
}
```

We'll call `chooseAIDirection()` each time we move (or at start). But we need to ensure direction changes gradually; we can call it each move tick.

Now movement logic:

In animate loop:

```
function animate(time) {
  const dt = time - lastTime;
  lastTime = time;
  moveAccumulator += dt;
  while (moveAccumulator >= MOVE_INTERVAL) {
    moveAccumulator -= MOVE_INTERVAL;
    moveSnake();
  }
  // update particles
  updateParticles();
  // draw
  draw();
  requestAnimationFrame(animate);
}
```

But we also need to handle pause: we can set a boolean `isPaused` and skip movement accumulation.

Simplify: We'll have `let isPaused = false;` and in animate, if isPaused, we just draw and return.

Now moveSnake function:

```
function moveSnake() {
  // apply nextDirection if set
  if (nextDirection) {
    // check not reverse
    if (!(nextDirection.dx === -direction.dx && nextDirection.dy === -direction.dy)) {
      direction = { ...nextDirection };
    }
    nextDirection = null; // consumed
  }
  // compute new head
  const head = {x: snake[0].x + direction.dx, y: snake[0].y + direction.dy};
  // check wall collision
  if (head.x < 0 || head.x >= GRID_SIZE || head.y < 0 || head.y >= GRID_SIZE) {
    gameOver();
    return;
  }
  // self collision
  if (snake.some(seg => seg.x === head.x && seg.y === head.y)) {
    gameOver();
    return;
  }
  // add new head
  snake.unshift(head);
  // check food
  if (head.x === food.x && head.y === food.y) {
    // eat
    score += 10;
    updateScoreDisplay();
    // spawn new food (ensuring not on snake)
    spawnFood();
    // particle burst
    createParticleBurst(food.x, food.y);
    // do not pop tail (snake grows)
  } else {
    // remove tail
    snake.pop();
  }
  // AI direction choose (maybe each move)
  chooseAIDirection();
}
```

But we need to be careful: In demo mode, we call chooseAIDirection each move, which sets nextDirection. However, if we just set nextDirection each tick, it may override previous. That's okay.

But we need to ensure that the snake doesn't reverse instantly. The condition in moveSnake prevents reverse when setting direction from nextDirection. But we also have the initial direction.

Now particle burst:

```
function createParticleBurst(cellX, cellY) {
  const centerX = (cellX + 0.5) * cellSize;
  const centerY = (cellY + 0.5) * cellSize;
  const count = 8;
  for (let i = 0; i < count; i++) {
    const angle = (Math.PI * 2 * i) / count;
    const speed = 2 + Math.random() * 2;
    const vx = Math.cos(angle) * speed;
    const vy = Math.sin(angle) * speed;
    particles.push({
      x: centerX,
      y: centerY,
      vx: vx,
      vy: vy,
      life: 30,
      maxLife: 30,
      size: 3 + Math.random() * 2
    });
  }
}
```

Update particles:

```
function updateParticles() {
  for (let i = particles.length - 1; i >= 0; i--) {
    const p = particles[i];
    p.x += p.vx;
    p.y += p.vy;
    p.life--;
    if (p.life <= 0) {
      particles.splice(i, 1);
    }
  }
}
```

Draw particles:

In draw function, after drawing snake and food, draw particles with alpha:

```
function drawParticles() {
  for (const p of particles) {
    const alpha = p.life / p.maxLife;
    ctx.save();
    ctx.globalAlpha = alpha;
    ctx.fillStyle = '#0f0'; // green
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
  }
}
```

Now draw everything:

```
function draw() {
  // clear canvas
  ctx.fillStyle = '#111';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // draw grid optionally? maybe not needed.
  
  // draw food
  ctx.fillStyle = '#ff0000';
  const foodX = food.x * cellSize + cellSize / 2;
  const foodY = food.y * cellSize + cellSize / 2;
  const foodRadius = cellSize / 3;
  ctx.beginPath();
  ctx.arc(foodX, foodY, foodRadius, 0, Math.PI * 2);
  ctx.fill();
  
  // draw snake
  ctx.fillStyle = '#0f0';
  snake.forEach((seg, idx) => {
    const x = seg.x * cellSize;
    const y = seg.y * cellSize;
    // determine if head
    if (idx === 0) {
      // head: draw with eyes
      // draw body rectangle
      ctx.fillRect(x, y, cellSize, cellSize);
      // eyes
      const eyeSize = cellSize / 6;
      // eye position based on direction
      let eye1x, eye1y, eye2x, eye2y;
      if (direction.dx === 1) { // right
        eye1x = x + cellSize - eyeSize; eye1y = y + eyeSize;
        eye2x = x + cellSize - eyeSize; eye2y = y + cellSize - eyeSize;
      } else if (direction.dx === -1) { // left
        eye1x = x + eyeSize; eye1y = y + eyeSize;
        eye2x = x + eyeSize; eye2y = y + cellSize - eyeSize;
      } else if (direction.dy === -1) { // up
        eye1x = x + eyeSize; eye1y = y + eyeSize;
        eye2x = x + cellSize - eyeSize; eye2y = y + eyeSize;
      } else { // down
        eye1x = x + eyeSize; eye1y = y + cellSize - eyeSize;
        eye2x = x + cellSize - eyeSize; eye2y = y + cellSize - eyeSize;
      }
      ctx.fillStyle = '#000';
      ctx.beginPath();
      ctx.arc(eye1x + cellSize/4, eye1y, eyeSize/2, 0, Math.PI * 2);
      ctx.arc(eye2x + cellSize/4, eye2y, eyeSize/2, 0, Math.PI * 2);
      ctx.fill();
    } else {
      // body segment: just a rect maybe rounded? we'll just fill rect
      ctx.fillRect(x, y, cellSize, cellSize);
    }
  });
  
  // draw particles
  drawParticles();
}
```

But we need to compute cellSize before drawing; we set canvas height/width. In resizeCanvas:

```
function resizeCanvas() {
  const maxWidth = Math.min(window.innerWidth, 1280);
  const maxHeight = Math.min(window.innerHeight, 800);
  // ensure canvas fits grid of 20x20 with some margin
  let newCellSize = Math.min(maxWidth / GRID_SIZE, maxHeight / GRID_SIZE) * 0.9;
  // limit minimum cell size maybe 10px
  newCellSize = Math.max(newCellSize, 10);
  cellSize = newCellSize;
  canvas.width = GRID_SIZE * cellSize;
  canvas.height = GRID_SIZE * cellSize;
  // redraw maybe
  if (gameState !== 'start') draw();
}
```

But we need to call on load and resize.

We'll set up `window.addEventListener('resize', resizeCanvas);`

Now overlay handling:

Start overlay: initially visible. On click hide and start demo.

Game over overlay: we have `#gameOverOverlay` div initially empty style display:none. On game over, we set innerHTML and display:flex? We'll set display block with position absolute covering.

We'll create function gameOver():

```
function gameOver() {
  gameState = 'gameOver';
  bestScore = Math.max(bestScore, score);
  updateScoreDisplay();
  const goOverlay = document.getElementById('gameOverOverlay');
  goOverlay.innerHTML = `<h2>Game Over</h2><p>Score: ${score}</p><p>Best: ${bestScore}</p><p>Press Space or Enter to restart</p>`;
  goOverlay.style.display = 'flex';
}
```

But we need to style the overlay to cover canvas; it's already absolute full size. We'll set its background etc via CSS. We'll add some style for gameOverOverlay: maybe same as startOverlay. We'll add CSS rule `#gameOverOverlay { ... }`. In the head we can add a rule.

We already have style for startOverlay; we can reuse.

Similarly pause overlay: `#pauseOverlay` already style; we will toggle display.

Now pause logic:

We'll have a keydown handler that toggles pause when 'KeyP' pressed while gameState === 'play'. We'll set `isPaused = !isPaused;` and show/hide pause overlay.

But our animate loop must skip movement when paused. We'll have a global `isPaused` variable.

In animate:

```
function animate(time) {
  if (isPaused) {
    // just draw maybe? but we can stop requestAnimationFrame? We'll still draw to update particles? but particles maybe stop. We'll just draw and return.
    draw();
    requestAnimationFrame(animate);
    return;
  }
  // else normal
  ...
}
```

But we also need to handle the pause overlay display: show when paused, hide when resumed.

In handleKeydown, if e.code === 'KeyP' and gameState === 'play', toggle pause.

```
function handleKeydown(e) {
  if (e.code === 'KeyP' && gameState === 'play') {
    isPaused = !isPaused;
    const pauseOverlay = document.getElementById('pauseOverlay');
    pauseOverlay.style.display = isPaused ? 'flex' : 'none';
  }
  // rest of handling...
}
```

But need to ensure that while paused, the keydown still processes other keys? maybe not needed.

Now restart game after game over:

In handleKeydown, if gameState === 'gameOver' and (e.code === 'Space' || e.code === 'Enter') restartGame().

restartGame():

```
function restartGame() {
  const goOverlay = document.getElementById('gameOverOverlay');
  goOverlay.style.display = 'none';
  resetGame(); // this sets gameState to 'play' and starts demo? Actually resetGame currently sets gameState to 'play' after calling startDemo? Let's design: resetGame will reset all state but not start demo; we will then start demo or player control depending on context. Since user already clicked to start, we can just start player control. But requirement: after game over, Space/Enter restarts. It could restart with player control. We'll just reset and set gameState = 'play' and inputEnabled already true, so player can control. We'll not start demo automatically. But the spec says "Games must start in a self-playing demo mode ... behind a 'Click or press a key to start' message". That is only for initial start. After that, restart can be player mode. So fine.

  // after reset, we need to ensure demo AI not running; we can set a flag `playerControl = true;` but not necessary; we can just let direction be controlled by player input.

  // reset game state:
  gameState = 'play';
  isPaused = false;
  pauseOverlay.style.display = 'none';
  // reset snake etc via resetGame
  resetGame();
}
```

But resetGame currently sets direction and calls startDemo? Let's separate: We'll have a function `resetGameForRestart()` that resets snake, food, score, particles, and sets `gameState = 'play'` but does NOT start demo AI; it leaves direction initial and player can control. However we need an initial direction; we can set to right.

But we must ensure that after restart, the snake doesn't instantly reverse. We'll set direction = {dx:1, dy:0} and nextDirection = null.

Now, we need to incorporate the demo AI only for initial start. So we can have `startDemo()` function that sets a flag `isDemo = true;` and in moveSnake, if isDemo, we call chooseAIDirection; else we ignore nextDirection from player input? Actually player input will set nextDirection regardless. We could have a variable `let isDemo = false;` and in moveSnake, if isDemo, we call chooseAIDirection to set nextDirection; else we allow player input to set nextDirection via handleKeydown. But handleKeydown already sets nextDirection based on key presses. So we need to differentiate. Perhaps simpler: In demo mode, we don't allow player input until they press a key; but after they press, we switch to player control. The requirement: "Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing." So demo mode is only for initial viewing; after click, we can switch to player control. But they also want the game to be judged in action without playing; maybe they just want to see demo AI play; but they didn't say you can't take over. I'd implement: On first click, start demo AI; after that, if user presses any arrow key, we switch to player control (disabling AI). That would satisfy both: demo plays initially; user can take over.

Simplify further: We can just start demo AI and not allow player control; but then arrow keys are useless except maybe pause. But requirement says arrow keys and WASD control the snake. That suggests the game must be playable with those keys. So we need player control at some point.

Thus: Initially show start overlay. On click, we start demo AI, and also enable keyboard. The demo AI runs; if the user presses a direction key, we switch control to player (set `playerControl = true;` and stop AI). We'll need to track if AI is active.

Simplify: We'll have a variable `let aiControl = true;` initially after start. In moveSnake, if `aiControl` is true, we call `chooseAIDirection()` to set `nextDirection`. If `aiControl` is false, we leave `nextDirection` as is (maybe set by player input). Player input via keydown sets `nextDirection` as well. So we can just toggle `aiControl` when a key is pressed.

Implementation:

- After click, set `aiControl = true;`
- In moveSnake start: if (aiControl) { chooseAIDirection(); } else { // player direction already set by keydown; maybe do nothing }.

- In handleKeydown, when a direction key is pressed, after setting nextDirection, we also set `aiControl = false;` so subsequent moves use player direction.

- But we must ensure that the first key press both starts demo and then switches to player. So on first key press (or click), we start demo; then if user presses a key, we switch.

But the spec says "Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message". So perhaps the click starts demo; the player can still take over later. That seems fine.

Now we must also handle the "Click or press a key to start" message; but keyboard only after click. So we need click first. The message will be displayed; on canvas click, we hide it and start demo.

Now ensure that the canvas click also sets inputEnabled = true; but we also need to allow key press to start demo? Actually we can start demo on click; but also allow key press to start if user prefers. But spec: keyboard after click only. So we enforce click.

Thus flow:

1. Page loads: start overlay visible, inputEnabled false.
2. User clicks canvas -> startGame() called: hide overlay, set inputEnabled true, startDemo(), set aiControl true.
3. Demo AI starts moving.
4. User can press arrow keys; if pressed, handleKeydown runs (since inputEnabled true). It will set nextDirection and also set aiControl = false, so subsequent moves use player direction.
5. If user doesn't press keys, demo continues.

Thus the game can be judged in demo mode, but also player can take over.

Now we must ensure that the "Click or press a key to start" message is clear. We'll display it.

Now we need to make sure the game runs with zero console errors. We'll be careful with variable names, avoid using reserved words, etc.

Now we also need to display current score and best score. We'll update the spans.

Now we need to handle the case where the snake eats food and particles burst; we need to make sure particles don't cause errors.

Now we need to ensure smooth movement: The MOVE_INTERVAL of 150ms yields about 6.66 updates per second, which is okay.

Now we need to ensure that the canvas adapts down to 375px width. Our resizeCanvas function uses `maxWidth = Math.min(window.innerWidth, 1280);` and `maxHeight = Math.min(window.innerHeight, 800);`. But for small width like 375, cellSize will be computed as min(maxWidth/GRID_SIZE, maxHeight/GRID_SIZE) * 0.9. That will give a small cell size, but still okay.

We need to ensure no horizontal scroll: we set `overflow-x: hidden` on body.

Now we also need to consider that the canvas is centered; we have `margin: 0 auto;` on canvas and it's block-level.

Now we must not use any external URLs. We'll not include any <link> or <script src>. All CSS and JS inline.

Now we should produce the final HTML file as a single fenced code block with ```html.

Now let's write the complete code.

We'll need to be careful with the particle drawing: ctx.arc uses coordinates; we need to ensure particle positions are within canvas.

Now compile code.

Potential issues:

- The canvas click listener: we need to ensure that click event fires even if overlay is on top; we have click on canvas; the overlay is absolute and may capture click. We need to set pointer-events: none on overlay when we want clicks to go to canvas. But the overlay is initially on top; we can set `startOverlay` style `pointer-events: none;` until we want to block. But requirement: "The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear 'Click or press a key to start' message." So we need to capture click on canvas to enable keyboard. The overlay is just text; we can make it not intercept clicks by giving it `pointer-events: none;` or we can make the canvas full-size and the overlay inside but with `pointer-events: none;` so clicks go through to canvas. However, the overlay is inside body; click on canvas might be blocked by overlay if overlay has default pointer events. To avoid, we can set `startOverlay.style.pointerEvents = 'none';` initially. But then click anywhere on canvas works. However the spec says "display a clear 'Click or press a key to start' message." It doesn't say it must block clicks. So we can make it non-interceptive.

Thus set `startOverlay.style.pointerEvents = 'none';` in CSS or inline.

But also we need to ensure that after click, we can still receive clicks? Not needed.

Better: In CSS, set `pointer-events: none;` for `#startOverlay`. That will let clicks pass through to canvas. But then the overlay is not clickable, which is fine because we want user to click canvas.

But the message says "Click or press a key to start". If overlay has pointer-events none, clicking on the text does nothing; but user can click anywhere on canvas. That's okay.

But the spec might expect that clicking the message starts the game; but it's not strict. However to be safe, we could make the overlay clickable and also listen for click on overlay to start game. But then we need to ensure click on overlay does not block canvas click. We can listen on both canvas and overlay. But requirement: "The iframe only receives keyboard events after the user clicks it". It doesn't say where to click; could be anywhere. So we can listen for click on overlay as well.

Simplify: We'll not use pointer-events none; instead, we'll have the start overlay cover the canvas, and we'll attach click event to the overlay element itself. When user clicks overlay, we start game. That's simplest. The overlay is full-size; clicking anywhere on canvas will be on overlay because overlay covers entire screen. So we need to listen on overlay click.

Thus: startOverlay click event hides overlay and starts demo. That's fine.

But then keyboard events only after that click. So we need to ensure that before click, keydown events are ignored. We'll have `inputEnabled` flag and initially false. The click on overlay sets inputEnabled true and starts demo.

But we also need to allow key press before click? Not allowed. So okay.

Thus we'll have click on startOverlay.

But the spec: "The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear 'Click or press a key to start' message." It may refer to clicking the canvas, but overlay click is okay.

We'll make startOverlay clickable.

Now about the "Click or press a key to start" message: we can also allow key press to start if user presses any key while overlay is visible, but since keyboard events are blocked before click, we need to enable after click. But the message says "Click or press a key to start". Possibly they expect that after clicking, you can also press a key to start, but the initial action is click. We'll just do click to start; but also we can listen for any keydown after click to start demo if not already started. But we already start on click.

But the phrase "or press a key" suggests either click or key press can start. However the later rule "The iframe only receives keyboard events after the user clicks it" suggests that keyboard events are disabled until a click occurs. So to satisfy both, we can have the click enable keyboard, and then a key press can also start if not started? But click already started. If we want to allow key press to start before click, we cannot because keyboard blocked. So we will just have click to start; the message says "Click or press a key to start" but we only implement click. Might be okay. But to be safe, we can have the overlay listen for both click and keydown, but keydown will be ignored until click occurs; after click, keydown can also start if not started. But we already started on click; so redundant.

I think it's fine to have click only.

Now the initial click: we'll attach `startOverlay.addEventListener('click', startGame);`.

But we also need to ensure that the canvas click maybe also works; but not necessary.

Now implement startGame:

```
function startGame() {
  startOverlay.style.display = 'none';
  inputEnabled = true;
  startDemo();
}
```

But we also need to add the global keydown listener after click. We'll add `document.addEventListener('keydown', handleKeydown);` inside startGame, but only once.

We'll have a boolean `keydownListenerAdded = false;` and check.

Now about the demo AI: we need to ensure snake doesn't get stuck. We'll implement AI as described.

Now also need to handle the case where the snake length grows; the tail removal logic: if food eaten, we don't pop; else pop.

Now, about the score display: we have `#currentScore` and `#bestScore` spans. We'll update them.

Now the best score: we store in `bestScore` variable; initial 0. On game over, we update bestScore = Math.max(bestScore, score); then update display.

Now the pause: we have `#pauseOverlay` with style display none initially. We'll toggle.

Now the game over overlay: we have `#gameOverOverlay` initially empty and display none. We'll set innerHTML and display flex.

Now let's write the full code.

We need to careful about variable scoping; we'll keep all at top level.

Now implement the resizeCanvas: We'll call on window load and resize.

But note: The canvas size set via JS will affect cellSize; but CSS width of canvas is set to 90% max-width 600px; but we also set canvas.width and canvas.height programmatically; that will override the CSS width? Actually setting `canvas.width` property sets the internal drawing surface size, while CSS width controls display size. If we set both, the canvas may be displayed at CSS width but drawing surface larger/smaller. To have consistent cell size, we should set canvas width/height via CSS and then compute cellSize based on canvas.clientWidth. But easier: we set canvas width/height via CSS and then in JS, `cellSize = canvas.clientWidth / GRID_SIZE;` and `canvas.height = canvas.width;` to keep square. And we set CSS `width: 90%; max-width: 600px; height: auto;`. That way the canvas size adapts to viewport, and cellSize computed from client width. We'll not set canvas.width/height via JS; just rely on CSS. However, we need to ensure that the grid cells are square; we can compute cellSize as min(clientWidth/GRID_SIZE, clientHeight/GRID_SIZE) maybe. But since canvas is square, clientHeight will equal clientWidth. So cellSize = canvas.clientWidth / GRID_SIZE.

Thus:

- CSS: `#gameCanvas { width: 90%; max-width: 600px; height: auto; margin: 0 auto; display: block; background:#111; }`

- In JS on load: `cellSize = canvas.clientWidth / GRID_SIZE;` and maybe also set `canvas.height = canvas.width;` but CSS height auto will maintain aspect ratio? Actually with width:90% and height:auto, the height will be based on content? For an empty canvas, height might be 0? Usually replaced elements with auto height will have some default? Safer: we set canvas height via JS after load: `canvas.height = canvas.width;` after setting width via CSS? But CSS width is percentage; we can't set height automatically to match. We'll instead set canvas size via JS: `canvas.width = innerWidth * 0.9;` etc, and also set CSS `width: auto;` maybe. But requirement: "The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide." So we need responsive.

Simplest: Use JS to set canvas size: `canvas.width = Math.min(window.innerWidth, 1280) * 0.9 / GRID_SIZE * GRID_SIZE;` Actually we want cell size to be something like min(innerWidth, innerHeight) / GRID_SIZE * 0.9. And set canvas width = GRID_SIZE * cellSize, height = same. Then we can set CSS `display: block; margin: 0 auto;` without width percentage. But then the canvas will be full width up to some max. We can limit max width via CSS max-width.

Simplify: We'll set canvas size via JS on window resize, and also set CSS `max-width: 1200px; margin: 0 auto;`. And we set `canvas.style.width = '100%';` maybe not needed.

Better: We'll compute cellSize based on viewport and set canvas width/height attributes directly, and not rely on CSS width. Then the canvas will be block-level and centered using `margin: 0 auto;` if we set `width` attribute but not CSS width; it will be full width of parent? Actually if we set `<canvas width="..." height="...">` without CSS width, the canvas will be its attributed size and be a block-level element, default width is 300px? Actually default width is 300px, height 150px. To center, we can give it `margin: 0 auto;` and set `display: block;`. So we can set canvas dimensions via HTML attributes or JS. That's easiest.

Thus:

- In HTML: `<canvas id="gameCanvas"></canvas>` no width/height attributes.

- In JS on load: `resizeCanvas()` sets `canvas.width = GRID_SIZE * cellSize;` `canvas.height = canvas.width;` and also `canvas.style.display = 'block'; canvas.style.margin = '0 auto';`.

- cellSize computed as `Math.min(window.innerWidth, window.innerHeight) / GRID_SIZE * 0.9;` but also ensure minimum cell size maybe 10px.

- On resize, we call `resizeCanvas()` again.

- We also need to recalc cellSize and redraw.

- The overlay and score board positions: we can use fixed positions relative to viewport; they should remain visible.

Now implement resizeCanvas:

```
function resizeCanvas() {
  const maxDim = Math.min(window.innerWidth, window.innerHeight);
  let cs = maxDim / GRID_SIZE * 0.9;
  cs = Math.max(cs, 10); // minimum cell size
  cellSize = cs;
  canvas.width = GRID_SIZE * cellSize;
  canvas.height = canvas.width;
  // redraw if game started
  if (gameState !== 'start') draw();
}
```

Now initial call on window load: `window.addEventListener('load', resizeCanvas);`

Now about the score board: It's fixed position absolute top-left; it should remain visible.

Now about the start overlay: It's absolute covering; we set display none on click.

Now about the game over overlay: absolute covering; we set innerHTML and display flex.

Now about the pause overlay: absolute covering; we toggle display.

Now about keydown listener: We'll add after click.

Now implement the demo AI: `chooseAIDirection` function; we need to call it each move when aiControl true.

We'll have `let aiControl = false;` Initially after startGame we set `aiControl = true;`. In moveSnake, at the beginning:

```
if (aiControl) {
  chooseAIDirection();
}
```

But note: chooseAIDirection sets nextDirection. However if player later presses a key, handleKeydown will set nextDirection and also set `aiControl = false;`. So subsequent moves will not call chooseAIDirection.

But we need to ensure that the initial direction is set; we set direction = {dx:1, dy:0} initially.

Now about the food spawn: we need to ensure food not on snake; we have spawnFood.

Now about particle burst: we create particles at food position; we need to pass cell coordinates; we have food object with x,y.

Now about drawing snake head eyes: we need to compute eye positions based on direction. We'll do as described.

Now ensure that we draw particles after snake, with globalAlpha.

Now about the game loop: we'll use requestAnimationFrame; but we also have MOVE_INTERVAL based accumulator. The animate function will be called each frame.

We must take care that the animate function does not cause infinite loop if something goes wrong; but fine.

Now compile code.

Potential errors: Using `e.code` may return strings like "ArrowUp", "KeyW". That's fine.

Now check for any usage of `alert`, `confirm`, `prompt`. We won't use.

Now check for `localStorage`, `sessionStorage`, cookies, IndexedDB: not used.

Now check for network requests: none.

Now ensure no horizontal scroll: `body {overflow-x: hidden;}`.

Now ensure the page adapts down to 375px wide: our resizeCanvas uses min of innerWidth and innerHeight; will work.

Now ensure smooth movement: The MOVE_INTERVAL 150ms yields ~6.6 updates per second; might be a bit jerky but okay. Could decrease to 100ms for smoother. We'll use 120ms.

Now ensure particle burst appears when eating; we create particles at food location.

Now ensure that the snake has distinct head and eyes facing direction: implemented.

Now ensure that eating food adds 10 points and grows snake by one cell; new food never spawns on snake: implemented.

Now ensure game over overlay shows score; Space or Enter restarts; P pauses.

Now ensure best score of session displayed.

Now ensure that something meaningful visible on first paint: On load, start overlay with "Click or press a key to start" is visible; also maybe the grid? But grid not drawn until game starts. But the spec: "Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction." So first paint should show something; the start overlay with text is meaningful. So okay.

Now ensure that everything that makes the demo interesting must be visible within first seconds: the start overlay and maybe the AI demo starts after click; but first paint shows start message.

Now ensure games must start in a self-playing demo mode behind a "Click or press a key to start" message. We'll implement that.

Now ensure iframe only receives keyboard events after user clicks it: we have click on start overlay to enable keyboard; after that, keydown listener added.

Now ensure code runs with zero errors in console: we'll be careful.

Now produce the final HTML.

Let's write the code step by step.

We'll create the HTML:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snake</title>
<style>
  body {margin:0; overflow-x:hidden; font-family:sans-serif;}
  canvas {display:block; margin:0 auto;}
  #startOverlay, #pauseOverlay, #gameOverOverlay {
    position:absolute; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.7); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;
    pointer-events: none; /* allow canvas clicks */
  }
  #scoreBoard {position:absolute; top:10px; left:10px; color:#fff; font-size:1rem;}
  h1 {margin:0; font-size:2rem;}
  p {margin:0.5rem 0;}
</style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <div id="startOverlay">
    <h1>Snake</h1>
    <p>Click or press a key to start</p>
    <p id="demoInfo">Watch the AI play!</p>
  </div>
  <div id="scoreBoard">Score: <span id="currentScore">0</span> | Best: <span id="bestScore">0</span></div>
  <div id="pauseOverlay" style="display:none;">Press P to pause</div>
  <div id="gameOverOverlay" style="display:none;"></div>

  <script>
    // ----- Configuration -----
    const GRID_SIZE = 20;
    let cellSize = 0;
    let canvas, ctx;
    let snake = [];
    let direction = {dx: 1, dy: 0};
    let nextDirection = null;
    let food = {x:0, y:0};
    let score = 0;
    let bestScore = 0;
    let gameState = 'start'; // start, play, gameOver, paused
    let particles = [];
    let lastTime = 0;
    let moveAccumulator = 0;
    const MOVE_INTERVAL = 120; // ms
    let aiControl = false;
    let inputEnabled = false;
    let keydownListenerAdded = false;

    // ----- DOM elements -----
    const startOverlay = document.getElementById('startOverlay');
    const scoreBoard = document.getElementById('scoreBoard');
    const currentScoreSpan = document.getElementById('currentScore');
    const bestScoreSpan = document.getElementById('bestScore');
    const pauseOverlay = document.getElementById('pauseOverlay');
    const gameOverOverlay = document.getElementById('gameOverOverlay');

    // ----- Initialise canvas -----
    function initCanvas() {
      canvas = document.getElementById('gameCanvas');
      ctx = canvas.getContext('2d');
      resizeCanvas();
      window.addEventListener('resize', resizeCanvas);
    }

    function resizeCanvas() {
      const maxDim = Math.min(window.innerWidth, window.innerHeight);
      let cs = maxDim / GRID_SIZE * 0.9;
      cs = Math.max(cs, 10);
      cellSize = cs;
      canvas.width = GRID_SIZE * cellSize;
      canvas.height = canvas.width;
      if (gameState !== 'start') draw();
    }

    // ----- Start game -----
    function startGame() {
      startOverlay.style.display = 'none';
      inputEnabled = true;
      startDemo();
      // add keydown listener if not added
      if (!keydownListenerAdded) {
        document.addEventListener('keydown', handleKeydown);
        keydownListenerAdded = true;
      }
    }

    // ----- Demo mode -----
    function startDemo() {
      gameState = 'play';
      aiControl = true;
      resetGame();
      lastTime = 0;
      moveAccumulator = 0;
      particles = [];
      requestAnimationFrame(animate);
    }

    function resetGame() {
      score = 0;
      updateScoreDisplay();
      // create initial snake at center, length 3
      const startX = Math.floor(GRID_SIZE / 2);
      const startY = Math.floor(GRID_SIZE / 2);
      snake = [];
      for (let i = 0; i < 3; i++) {
        snake.push({x: startX - i, y: startY});
      }
      direction = {dx: 1, dy: 0};
      nextDirection = null;
      spawnFood();
      particles = [];
      gameState = 'play';
      aiControl = true;
    }

    function updateScoreDisplay() {
      currentScoreSpan.textContent = score;
      bestScoreSpan.textContent = bestScore;
    }

    // ----- Input handling -----
    function handleKeydown(e) {
      if (!inputEnabled) return;
      // direction change
      let newDir = null;
      if (e.code === 'ArrowUp' || e.code === 'KeyW') newDir = {dx:0, dy:-1};
      else if (e.code === 'ArrowDown' || e.code === 'KeyS') newDir = {dx:0, dy:1};
      else if (e.code === 'ArrowLeft' || e.code === 'KeyA') newDir = {dx:-1, dy:0};
      else if (e.code === 'ArrowRight' || e.code === 'KeyD') newDir = {dx:1, dy:0};

      if (newDir) {
        // prevent reverse
        if (!(newDir.dx === -direction.dx && newDir.dy === -direction.dy)) {
          nextDirection = newDir;
        }
        // switch from AI to player control
        aiControl = false;
      }

      // pause
      if (e.code === 'KeyP' && gameState === 'play') {
        isPaused = !isPaused;
        pauseOverlay.style.display = isPaused ? 'flex' : 'none';
      }

      // restart on game over
      if (gameState === 'gameOver' && (e.code === 'Space' || e.code === 'Enter')) {
        restartGame();
      }
    }

    // We need isPaused variable; define at top
    let isPaused = false;

    // ----- Game loop -----
    function animate(time) {
      if (isPaused) {
        draw();
        requestAnimationFrame(animate);
        return;
      }
      const dt = time - lastTime;
      lastTime = time;
      moveAccumulator += dt;
      while (moveAccumulator >= MOVE_INTERVAL) {
        moveAccumulator -= MOVE_INTERVAL;
        moveSnake();
      }
      updateParticles();
      draw();
      requestAnimationFrame(animate);
    }

    // ----- Snake movement -----
    function moveSnake() {
      if (aiControl) {
        chooseAIDirection();
      }
      // apply nextDirection if set (may be from player or AI)
      if (nextDirection) {
        // safeguard reverse (already prevented in input, but double check)
        if (!(nextDirection.dx === -direction.dx && nextDirection.dy === -direction.dy)) {
          direction = { ...nextDirection };
        }
        nextDirection = null;
      }
      // new head
      const head = {
        x: snake[0].x + direction.dx,
        y: snake[0].y + direction.dy
      };
      // wall collision
      if (head.x < 0 || head.x >= GRID_SIZE || head.y < 0 || head.y >= GRID_SIZE) {
        gameOver();
        return;
      }
      // self collision
      if (snake.some(seg => seg.x === head.x && seg.y === head.y)) {
        gameOver();
        return;
      }
      // add head
      snake.unshift(head);
      // check food
      if (head.x === food.x && head.y === food.y) {
        score += 10;
        updateScoreDisplay();
        spawnFood();
        createParticleBurst(food.x, food.y);
        // snake grows: do not pop tail
      } else {
        // remove tail
        snake.pop();
      }
      // AI direction choose already called at top if aiControl
    }

    // ----- Food spawn -----
    function spawnFood() {
      let valid = false;
      while (!valid) {
        food.x = Math.floor(Math.random() * GRID_SIZE);
        food.y = Math.floor(Math.random() * GRID_SIZE);
        valid = !snake.some(seg => seg.x === food.x && seg.y === food.y);
      }
    }

    // ----- AI direction choice -----
    function chooseAIDirection() {
      // try to move towards food
      let targetDir = null;
      const dx = food.x - snake[0].x;
      const dy = food.y - snake[0].y;
      if (Math.abs(dx) > Math.abs(dy)) {
        targetDir = {dx: dx > 0 ? 1 : dx < 0 ? -1 : 0, dy: 0};
      } else {
        targetDir = {dx: 0, dy: dy > 0 ? 1 : dy < 0 ? -1 : 0};
      }
      // if target direction is opposite current direction, pick random
      if (targetDir && (targetDir.dx === -direction.dx && targetDir.dy === -direction.dy)) {
        const possible = [
          {dx:1,dy:0},{dx:-1,dy:0},{dx:0,dy:1},{dx:0,dy:-1}
        ].filter(d => !(d.dx === -direction.dx && d.dy === -direction.dy));
        targetDir = possible[Math.floor(Math.random() * possible.length)];
      }
      nextDirection = targetDir;
    }

    // ----- Particles -----
    function createParticleBurst(cellX, cellY) {
      const centerX = (cellX + 0.5) * cellSize;
      const centerY = (cellY + 0.5) * cellSize;
      const count = 8;
      for (let i = 0; i < count; i++) {
        const angle = (Math.PI * 2 * i) / count;
        const speed = 2 + Math.random() * 2;
        const vx = Math.cos(angle) * speed;
        const vy = Math.sin(angle) * speed;
        particles.push({
          x: centerX,
          y: centerY,
          vx: vx,
          vy: vy,
          life: 30,
          maxLife: 30,
          size: 3 + Math.random() * 2
        });
      }
    }

    function updateParticles() {
      for (let i = particles.length - 1; i >= 0; i--) {
        const p = particles[i];
        p.x += p.vx;
        p.y += p.vy;
        p.life--;
        if (p.life <= 0) {
          particles.splice(i, 1);
        }
      }
    }

    function drawParticles() {
      for (const p of particles) {
        const alpha = p.life / p.maxLife;
        ctx.save();
        ctx.globalAlpha = alpha;
        ctx.fillStyle = '#0f0';
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
      }
    }

    // ----- Drawing -----
    function draw() {
      // clear
      ctx.fillStyle = '#111';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      // draw food
      ctx.fillStyle = '#ff0000';
      const foodX = food.x * cellSize + cellSize / 2;
      const foodY = food.y * cellSize + cellSize / 2;
      const foodRadius = cellSize / 3;
      ctx.beginPath();
      ctx.arc(foodX, foodY, foodRadius, 0, Math.PI * 2);
      ctx.fill();

      // draw snake
      ctx.fillStyle = '#0f0';
      snake.forEach((seg, idx) => {
        const x = seg.x * cellSize;
        const y = seg.y * cellSize;
        if (idx === 0) {
          // head
          ctx.fillRect(x, y, cellSize, cellSize);
          // eyes
          const eyeSize = cellSize / 6;
          let eye1x, eye1y, eye2x, eye2y;
          if (direction.dx === 1) { // right
            eye1x = x + cellSize - eyeSize; eye1y = y + eyeSize;
            eye2x = x + cellSize - eyeSize; eye2y = y + cellSize - eyeSize;
          } else if (direction.dx === -1) { // left
            eye1x = x + eyeSize; eye1y = y + eyeSize;
            eye2x = x + eyeSize; eye2y = y + cellSize - eyeSize;
          } else if (direction.dy === -1) { // up
            eye1x = x + eyeSize; eye1y = y + eyeSize;
            eye2x = x + cellSize - eyeSize; eye2y = y + eyeSize;
          } else { // down
            eye1x = x + eyeSize; eye1y = y + cellSize - eyeSize;
            eye2x = x + cellSize - eyeSize; eye2y = y + cellSize - eyeSize;
          }
          ctx.fillStyle = '#000';
          ctx.beginPath();
          ctx.arc(eye1x + cellSize/4, eye1y, eyeSize/2, 0, Math.PI * 2);
          ctx.arc(eye2x + cellSize/4, eye2y, eyeSize/2, 0, Math.PI * 2);
          ctx.fill();
        } else {
          // body
          ctx.fillRect(x, y, cellSize, cellSize);
        }
      });

      // particles
      drawParticles();
    }

    // ----- Game Over -----
    function gameOver() {
      gameState = 'gameOver';
      bestScore = Math.max(bestScore, score);
      updateScoreDisplay();
      gameOverOverlay.innerHTML = `
        <h2>Game Over</h2>
        <p>Score: ${score}</p>
        <p>Best: ${bestScore}</p>
        <p>Press Space or Enter to restart</p>
      `;
      gameOverOverlay.style.display = 'flex';
    }

    // ----- Restart -----
    function restartGame() {
      const goOverlay = gameOverOverlay;
      goOverlay.style.display = 'none';
      resetGame();
      // after restart, aiControl will be true; but we may want player control.
      // Since user already clicked to start, we can keep aiControl false? 
      // Actually resetGame sets aiControl = true; but we could set it false to allow player.
      // Let's set aiControl = false so player can control immediately.
      aiControl = false;
      isPaused = false;
      pauseOverlay.style.display = 'none';
    }

    // ----- Pause handling -----
    // We already handled KeyP in handleKeydown, but we need isPaused variable; we defined it.

    // ----- Initialisation on load -----
    function init() {
      initCanvas();
      // click on start overlay starts game
      startOverlay.addEventListener('click', startGame);
      // also allow canvas click? Not needed.
    }

    window.addEventListener('load', init);
  </script>
</body>
</html>
```

Now check for errors:

- In handleKeydown, we reference `isPaused` but we defined `let isPaused = false;` at top after `keydownListenerAdded`. That's fine.

- In `startDemo`, we call `requestAnimationFrame(animate);` but animate expects time parameter; first call will pass time.

- In `animate`, we have `if (isPaused) { draw(); requestAnimationFrame(animate); return; }` okay.

- In `moveSnake`, we call `chooseAIDirection()` if `aiControl`. But we also have `if (nextDirection) { ... }` later. That's fine.

- In `chooseAIDirection`, we use `food` object; need to ensure food exists; it does after spawnFood.

- In `draw`, we draw particles after snake; but we need to ensure ctx.globalAlpha is reset; we use ctx.save/restore.

- In `drawParticles`, we set `ctx.globalAlpha = alpha;` but we also set `ctx.fillStyle = '#0f0';` maybe overwritten; fine.

- In `draw`, we draw food with `ctx.fillStyle = '#ff0000';` then draw snake with `ctx.fillStyle = '#0f0';` okay.

- In `draw` for head eyes, we compute eye positions; we need to ensure eye arcs are within cell; fine.

- In `gameOverOverlay.innerHTML`, we use backticks; okay.

- In `restartGame`, we set `aiControl = false;` after resetGame which set aiControl = true; that's okay.

- In `handleKeydown`, we have `if (e.code === 'KeyP' && gameState === 'play')` but we also have `isPaused` toggle; we need to ensure that the pause overlay display toggles correctly. We set `pauseOverlay.style.display = isPaused ? 'flex' : 'none';`. But we also have `pauseOverlay` initial style `display:none;`. Good.

- However, in `handleKeydown`, we also have `if (e.code === 'KeyP' && gameState === 'play')` but the `gameState` may be 'play' or 'paused'? Actually we toggle; but we also need to handle pause when already paused? The code toggles each press; fine.

- But we also have `if (gameState === 'gameOver' && (e.code === 'Space' || e.code === 'Enter'))` restart.

- In `handleKeydown`, we have `if (!inputEnabled) return;` at start. Good.

- In `startGame`, we set `inputEnabled = true;` and then add keydown listener. But the keydown listener will be added after click; okay.

- In `resizeCanvas`, we set `canvas.width` and `canvas.height`; but we also have CSS `display:block; margin:0 auto;` set in init? Actually we didn't set those in CSS; we set `canvas.style.display = 'block'; canvas.style.margin = '0 auto';` maybe not. In `init()`, we only call `initCanvas();` which gets canvas and ctx, and sets up resize listener. We didn't set style for canvas. But default canvas is block? Actually canvas is inline-block by default? It's a replaced element, default display is inline? I think canvas is inline-block? Actually according to spec, canvas is a replaced element, default display is inline? But we can set `canvas.style.display = 'block';` in init. Let's add that.

In `initCanvas` we can set `canvas.style.display = 'block'; canvas.style.margin = '0 auto';`. But we also have CSS `canvas {display:block; margin:0 auto;}` in style block. That's already there. Good.

- In `style` we have `canvas {display:block; margin:0 auto;}`. That will make it centered.

- However, we also set `canvas.width` and `canvas.height` attributes; those set drawing surface size; CSS width/height not set, so canvas will be displayed at its attribute size. That's fine.

- But we have `max-width: none`? Not needed.

- The start overlay `pointer-events: none;` in CSS may prevent click events from reaching the overlay; but we attach click listener to `startOverlay` element; if pointer-events is none, clicks on it won't trigger. So we need to remove `pointer-events: none;` or set it to `auto` for the overlay. Actually we want clicks on overlay to start game. So we should not have `pointer-events: none` on startOverlay. We can set it to `auto` or just remove. Let's set `pointer-events: auto;` or remove. In CSS we wrote `pointer-events: none; /* allow canvas clicks */`. That comment suggests we want to allow canvas clicks, but that also disables overlay click. We need to differentiate: we can set `pointer-events: none` on canvas? Actually we want clicks on overlay to trigger startGame; clicks on canvas (if any) to also maybe start? But overlay covers whole screen; we want click anywhere on overlay to start. So we should not have `pointer-events: none` on startOverlay. We can remove that line, or set `pointer-events: auto;`. Let's just set `pointer-events: auto;` or remove. We'll set `pointer-events: auto;` in CSS for startOverlay, pauseOverlay, gameOverOverlay. But pause overlay and game over overlay also need to be clickable? Pause overlay has "Press P to pause" text; but pause is handled by key presses, not click. Game over overlay has restart via key press; click could also restart but not required. But we can keep pointer-events auto.

Thus modify CSS:

```
#startOverlay, #pauseOverlay, #gameOverOverlay {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.7); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events: auto;
}
```

But we also need to allow canvas clicks? Not needed.

Now about the start overlay click: we have `startOverlay.addEventListener('click', startGame);`. That will work.

Now check for any other issues:

- In `handleKeydown`, we have `if (e.code === 'KeyP' && gameState === 'play')` but `gameState` might be 'play' when not paused; but we also have pause overlay toggling; okay.

- However, we also have `isPaused` variable; we need to ensure it's declared at top; we have `let isPaused = false;` after `keydownListenerAdded`. Good.

- In `animate`, we check `if (isPaused)` and then draw and return; but we also need to avoid moving snake; fine.

- In `moveSnake`, we have `if (aiControl) { chooseAIDirection(); }` but we also have `if (nextDirection) { ... }` later. That's fine.

- In `chooseAIDirection`, we use `food.x` and `food.y`; but food may be spawned; okay.

- In `draw`, we draw particles with `ctx.arc`. However, we set `ctx.globalAlpha = alpha;` but we also set `ctx.fillStyle = '#0f0';` earlier for snake; but we restore after each particle, so okay.

- In `draw`, we draw snake head eyes: we compute eye positions; but we need to ensure that the eye arcs are within the cell; the `arc` method uses radius eyeSize/2; we set `ctx.arc(eye1x + cellSize/4, eye1y, eyeSize/2, 0, Math.PI * 2);`. The center offset cellSize/4 may be okay.

But note: The eye positions we computed earlier: e.g., for right direction: `eye1x = x + cellSize - eyeSize; eye1y = y + eyeSize;` Then we add `cellSize/4` to x for arc center. That seems okay.

But we need to ensure that the eye positions are correct for all directions. Let's double-check.

Head at (x,y) top-left of cell. cellSize size.

Eyes are small circles.

Directions:

- Right (dx=1, dy=0): eyes on right side of head, vertical aligned. We set eye1x = x + cellSize - eyeSize (right edge minus eye width), eye1y = y + eyeSize (mid vertical). eye2x same, eye2y = y + cellSize - eyeSize (bottom). That places eyes on right side, vertically centered-ish. Then we draw arcs with center at eye1x + cellSize/4, eye1y. That shifts eye center leftwards by quarter cell, which may place iris inside head. Fine.

- Left (dx=-1): eye1x = x + eyeSize (left edge plus eye width), eye1y = y + eyeSize; eye2x same, eye2y = y + cellSize - eyeSize. Good.

- Up (dy=-1): eye1x = x + eyeSize, eye1y = y + eyeSize; eye2x = x + cellSize - eyeSize, eye2y = y + eyeSize. Good.

- Down (dy=1): eye1x = x + eyeSize, eye1y = y + cellSize - eyeSize; eye2x = x + cellSize - eyeSize, eye2y = y + cellSize - eyeSize. Good.

Now arcs: `ctx.arc(eye1x + cellSize/4, eye1y, eyeSize/2, 0, Math.PI * 2);`. This adds quarter cell to x, which for right direction moves eye further right maybe outside; but okay.

Maybe we don't need the offset; we could just use eye1x, eye1y directly. But adding offset might be fine.

Simplify: just use eye1x, eye1y as center: `ctx.arc(eye1x, eye1y, eyeSize/2, 0, Math.PI * 2);`. That would place iris at the eye position. Let's do that to avoid confusion.

I'll modify draw head eyes to use eye1x, eye1y directly.

Thus:

```
ctx.beginPath();
ctx.arc(eye1x, eye1y, eyeSize/2, 0, Math.PI * 2);
ctx.arc(eye2x, eye2y, eyeSize/2, 0, Math.PI * 2);
ctx.fill();
```

That should be okay.

Now check for usage of `ctx.arc` with radius eyeSize/2; eyeSize = cellSize/6, so radius ~ cellSize/12, fine.

Now about the score board: It's `div id="scoreBoard"` with position absolute top-left; we set CSS `top:10px; left:10px;`. Good.

Now about the demo info paragraph: `<p id="demoInfo">Watch the AI play!</p>` inside start overlay; fine.

Now about the `startDemo` function: It sets `gameState = 'play';` and then `resetGame();` which also sets `gameState = 'play';`. That's fine.

Now about the `resizeCanvas` function: It uses `maxDim = Math.min(window.innerWidth, window.innerHeight);`. This will give square canvas size based on smaller dimension. For 1280x800, maxDim = 800, cellSize = 800/20*0.9 = 36px, canvas size 720x720 centered. For 375px width (portrait), maxDim = min(375, maybe height?) But the viewport may be 375 wide and maybe 667 tall; maxDim = 375, cellSize ~ 16.875, okay.

Now ensure no horizontal scroll: `body {overflow-x: hidden;}`.

Now check for any usage of `window.open`, `alert`, etc. None.

Now check for any usage of `localStorage`. None.

Now ensure the code runs with zero errors: need to ensure that the `handleKeydown` function references `inputEnabled` which is set after startGame; but the keydown listener is added after startGame; okay.

But there is a subtle issue: In `handleKeydown`, we have `if (!inputEnabled) return;` at the top. However, the keydown listener is added after startGame, which sets `inputEnabled = true;`. So after click, it's enabled. Before click, there is no listener, so no keydown events processed. Good.

But what about the initial `keydownListenerAdded` flag; we add listener in `startGame`. However, `startGame` is called on click of startOverlay. At that point, we set `inputEnabled = true;` and add listener. But what if the user presses a key before clicking? The keydown listener is not added, so the key press is ignored. That's fine.

Now about the demo AI: In `startDemo`, we call `resetGame()` which sets `aiControl = true;`. Then we call `requestAnimationFrame(animate)`. The animate loop will start.

Now in `animate`, we have `if (isPaused)` check; but `isPaused` initially false.

Now in `moveSnake`, we have `if (aiControl) { chooseAIDirection(); }`. That will set `nextDirection`. Then `if (nextDirection) { ... direction = ... }`. That will set direction to chosen AI direction. But we also have initial direction set to right. So first move will use AI direction (towards food). Good.

Now after player presses a key, `aiControl` becomes false, and `nextDirection` is set from key; subsequent moves use player direction.

Now about the `chooseAIDirection` function: It uses `food.x - snake[0].x` etc. That's fine.

Now about the particle burst: We call `createParticleBurst(food.x, food.y);` after eating. The function uses `cellSize` which is global; okay.

Now about the `drawParticles` function: It iterates over particles and draws them. However, we also set `ctx.globalAlpha = alpha;` but we didn't reset `ctx.globalAlpha` after; but we use `ctx.save()` and `ctx.restore()` around each particle, which saves and restores the entire context state, including transform and alpha. However, we also set `ctx.globalAlpha = alpha;` after save? Actually we do:

```
ctx.save();
ctx.globalAlpha = alpha;
ctx.fillStyle = '#0f0';
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
```

That's fine; save/restore will restore the alpha to whatever it was before save. But we set it after save; that's okay.

But note: In the `draw` function, we may have previously set `ctx.globalAlpha` elsewhere; but save/restore isolates.

Now about the `draw` function: We draw snake, food, particles. The particles draw with alpha fading.

Now about the `gameOver` function: It sets `gameOverOverlay.innerHTML` with template literal; that's fine.

Now about the `restartGame` function: It sets `aiControl = false;` after `resetGame()`. But `resetGame()` sets `aiControl = true;`. So we override to false, allowing player control immediately. That's okay.

Now about the `handleKeydown` pause logic: We have `if (e.code === 'KeyP' && gameState === 'play') { isPaused = !isPaused; pauseOverlay.style.display = isPaused ? 'flex' : 'none'; }`. However, `gameState` could be 'play' but the game might be paused already; toggling works.

But we also need to ensure that when paused, the `animate` loop stops updating snake; we have `if (isPaused) { draw(); requestAnimationFrame(animate); return; }`. That's fine.

Now about the `handleKeydown` also handling restart on game over: `if (gameState === 'gameOver' && (e.code === 'Space' || e.code === 'Enter')) { restartGame(); }`. That's okay.

Now about the `startOverlay` click: we have `startOverlay.addEventListener('click', startGame);`. However, the start overlay has `pointer-events: auto;` so click works.

Now about the `demoInfo` paragraph: It's inside start overlay; fine.

Now about the `bestScore` display: Initially 0; after game over, updated.

Now about the `updateScoreDisplay` function: It sets `currentScoreSpan.textContent = score;` and `bestScoreSpan.textContent = bestScore;`. Good.

Now about the `resizeCanvas` function: It recomputes `cellSize` and sets canvas width/height; but we also need to ensure that the score board and overlays remain positioned correctly; they are using absolute positions relative to viewport, not canvas, so fine.

Now check for any potential errors:

- In `handleKeydown`, we have `if (e.code === 'KeyP' && gameState === 'play')` but `gameState` variable may be 'play' when not paused. However, we also have `isPaused` separate; toggling works.

- But we also have `if (e.code === 'KeyP' && gameState === 'play')` inside `handleKeydown`. However, `handleKeydown` is called only when `inputEnabled` is true. After startGame, inputEnabled true. So okay.

- But there is a scenario: After game over, `gameState` becomes 'gameOver'; then restart resets to 'play'. So okay.

Now check for usage of `e.code` with capital K etc; fine.

Now about the `startDemo` function: It sets `gameState = 'play';` then `resetGame();` which also sets `gameState = 'play';`. That's redundant but fine.

Now check for scenario where the snake hits itself instantly due to initial direction? Starting direction right, snake length 3, center. Should be fine.

Now check for the `chooseAIDirection` function: The `possible` array filtering uses `d.dx === -direction.dx && d.dy === -direction.dy`. That's correct.

Now check for edge case where food is placed such that AI may get stuck in loop; but okay.

Now about the `moveSnake` function: We have `if (aiControl) { chooseAIDirection(); }`. Then `if (nextDirection) { ... }`. But what if `nextDirection` was already set from previous move and `aiControl` sets it again? That's okay; we overwrite.

But there is a nuance: In `moveSnake`, after we apply `nextDirection` and set `direction`, we then compute new head using `direction`. However, if `aiControl` set `nextDirection` to some value, and then we apply it, `nextDirection` becomes null. Then next move, `aiControl` will call `chooseAIDirection` again, which will set a new `nextDirection`. That's fine.

But what if the player presses a key while `aiControl` is true? In `handleKeydown`, we set `aiControl = false;` and set `nextDirection`. Then in subsequent `moveSnake`, `aiControl` is false, so `chooseAIDirection` not called; `nextDirection` from key press will be applied. Good.

Now about the `handleKeydown` function: It also handles pause with `KeyP`. However, we also have `if (e.code === 'KeyP' && gameState === 'play')` but what if `gameState` is 'paused'? The spec says P pauses; pressing P again resumes. Our code toggles `isPaused` each press regardless of current state, but we only allow toggle when `gameState === 'play'`. However, if gameState is 'paused' (we don't have that state; we have 'play' and we toggle isPaused). Actually we don't have a separate state 'paused'; we just have `isPaused` boolean and `gameState` stays 'play'. That's okay. So the condition `gameState === 'play'` will always be true during normal play; after pause, gameState remains 'play', isPaused becomes true. So pressing P again will toggle isPaused back to false. That's fine.

But we have `if (e.code === 'KeyP' && gameState === 'play')` – this will always trigger because gameState is 'play' unless game over. Good.

Now about the `pauseOverlay` display: Initially `style="display:none;"`. When paused, we set `display = 'flex'`. When resumed, `display = 'none'`. Good.

Now about the `gameOverOverlay` display: Initially `style="display:none;"`. When game over, we set `display = 'flex'`. When restart, we set `display = 'none'`. Good.

Now about the `startOverlay` display: Initially `display` not set; it's block by default? We have CSS `position:absolute; top:0; left:0; width:100%; height:100%; ...;` it will be displayed as block? Actually div is block by default. So it covers screen.

Now about the `startOverlay` click: we have `startOverlay.addEventListener('click', startGame);`. However, the start overlay has `pointer-events: auto;` (we set). So click works.

Now about the `canvas` click: Not needed.

Now about the `keydown` listener: We add it in `startGame`. But we also have `if (!keydownListenerAdded)` check. However, `startGame` is called only once (on click). So listener added once.

Now about the `inputEnabled` flag: We set it true in `startGame`. But the keydown listener checks `if (!inputEnabled) return;` at top. So before click, no listener; after click, listener present and inputEnabled true. Good.

Now about the `resizeCanvas` function: It sets `canvas.width` and `canvas.height`. However, the CSS `canvas {display:block; margin:0 auto;}` will center it. But the canvas size is set via attributes; the CSS width/height not set, so canvas displayed at attribute size. That's okay.

Now about the `max-dim` calculation: For very small viewport like 320x480, maxDim = 320, cellSize = 320/20*0.9 = 14.4, min 10, okay.

Now about the `draw` function: We clear canvas with `ctx.fillRect(0,0, canvas.width, canvas.height)`. That's fine.

Now about the `draw` function drawing snake body: For body segments, we just fill rect; that's okay.

Now about the `drawParticles` function: We set `ctx.globalAlpha = alpha;` but we also set `ctx.fillStyle = '#0f0';`. However, `ctx.fillStyle` may persist; but we set it each iteration; okay.

Now about the `ctx.save()` and `ctx.restore()`: In `drawParticles`, we do `ctx.save(); ctx.globalAlpha = alpha; ... ctx.restore();`. This will restore the context state, including any transformations. But we didn't set any transforms, so fine.

Now about the `draw` function: We draw particles after snake; but we didn't reset `ctx.globalAlpha` before drawing particles; but particles function sets its own alpha via save/restore, so it's fine.

Now about the `gameOver` function: It sets `gameOverOverlay.innerHTML` with template literal; but we need to ensure that the `bestScore` variable is updated correctly. It is.

Now about the `restartGame` function: It calls `resetGame()` which resets score to 0, updates display, resets snake, food, particles, sets `aiControl = true;`. Then we set `aiControl = false;` after. So after restart, player control immediate. That's okay.

But we also need to reset `isPaused` to false; we do that.

Now about the `startDemo` function: It calls `requestAnimationFrame(animate);` but `animate` expects time; first call passes time. However, we also set `lastTime = 0;` before; then in animate, `dt = time - lastTime;` will be first time value (maybe ~timestamp). That's fine.

Now about the `moveAccumulator` initial value: set to 0 in `startDemo` and `resetGame`. Good.

Now check for any undefined variable references:

- `isPaused` defined at top after `keydownListenerAdded`. Yes.

- `aiControl` defined at top. Yes.

- `inputEnabled` defined at top. Yes.

- `keydownListenerAdded` defined at top. Yes.

- `ctx` set in `initCanvas`. Yes.

- `canvas` set in `initCanvas`. Yes.

- `cellSize` initial 0; `resizeCanvas` sets it.

- `GRID_SIZE` constant 20.

Now check for any use of `e` in `handleKeydown` but not passed? It's passed as parameter; we have `function handleKeydown(e)`.

Now check for usage of `window.addEventListener('load', init);` at bottom. Good.

Now check for any `break` or `continue` missing.

Now ensure that the HTML structure is valid.

Now produce final answer with code block.

One more thing: The requirement "Display the current score and the best score of the session." We have that.

Now verify that the code doesn't use any prohibited functions.

Now final output: just the fenced code block with html.

We'll output exactly:

```
```html
... full html ...
```
```

Make sure no text before or after.

Let's produce final answer.