North Mini Code (free)

We need to create a single HTML file with inline CSS and JavaScript, no external resources (except allowed CDN URLs). The requirement is to build a polished Snake game with certain features. There's a sandbox: we cannot use localStorage? The rules say not to use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt(), or window.open(). These are blocked. So we need to store best score via maybe sessionStorage? But the rule says not allowed. So we need alternative: we could store best score in a variable that persists across restarts within the same page session? However page reload resets variables. But the best score of the session: perhaps we can store it in a hidden <canvas> or use something else? Actually, the rule says "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 the game must display a start message before user interacts.

Also: "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." This is tricky: The game must start automatically (self-playing demo) but behind a start message that says "Click or press a key to start". It says "the game can be judged in action without playing." Perhaps we should show the start message initially, but when user clicks or presses a key, the game starts. However the requirement also says "self-playing demo mode behind a ... message". Possibly we should show the start message, then after user clicks or presses a key, the game runs (self-playing). But the phrase "behind a 'Click or press a key to start' message" suggests that the game is playing automatically, but overlayed by the start message. And then when the user interacts, the message disappears? However the rule also says that the iframe only receives keyboard events after the user clicks it: so we must display the start message initially. When user clicks or presses a key, the game should start (or maybe the start message disappears). But the rule also 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 the game can be judged in action without playing." So perhaps we should display the start message as an overlay, and the game runs automatically (self-play) and the user can press any key to start (maybe the AI starts). The phrase "behind a 'Click or press a key to start' message" could be interpreted as the game plays automatically in the background but the user sees the message and can press a key to begin controlling it? But it's ambiguous. Let's interpret: The game starts automatically (self-playing AI). But there's a message overlay that says "Click or press a key to start". The user can either click the canvas or press a key to start controlling the snake (or to start the AI?). The requirement "the game can be judged in action without playing" suggests that the demo should be running automatically so that the snapshot taken after 3 seconds shows the game in action. The start message overlay should be present so that the user knows they can start or control it.

We need to satisfy all requirements: a grid of at least 20x20 cells, centered, arrow keys and WASD control, quick successive key presses both honored, snake cannot reverse onto itself, eating food adds 10 points and grows snake by one cell, new food never spawns on snake, game over when snake hits wall or itself, overlay showing score; space or enter restarts, p pauses. Visual polish: smooth movement, distinct head and eyes facing direction, small particle burst when eating. Display current score and best score of the session.

We cannot use localStorage for best score, as it's blocked. But maybe we can use an in-memory variable: bestScore is stored in a variable that persists across restarts within the same page session (i.e., until the page is reloaded). Since we cannot use localStorage, we can still store bestScore as a global variable that persists across restarts if we reload the page? Actually, page reload resets all variables. But "best score of the session" implies within the same browsing session (like until tab closed). In HTML5, sessionStorage is intended for this, but it's blocked. So maybe we need to avoid best score altogether? However requirement explicitly says display the current score and the best score of the session. There's a conflict. Perhaps we can store bestScore in a cookie? The rule also prohibits cookies. So that's not allowed.

We could use an in-memory variable, but that will reset on page reload, which is a session? Actually, page reload is part of the same session? Typically session persists until the page is refreshed or the browser is closed. But reload is also resetting JS, so we cannot persist across reload. There's no allowed storage. Could we use an <input> hidden that stores best score? That still can't persist because it's not submitted. There's no communication to server.

Maybe the sandbox only blocks reading/writing to localStorage etc. but we can use other methods? For example, we can use the URL query parameters to store bestScore and then read it each time? However we cannot modify URL on restart? Could set bestScore in query param? But the user might not expect that. The requirement could be loosely interpreted: "best score of the session" could be the highest score achieved in the current game session (i.e., until the page is closed). Since we cannot store it persistently, we can just track highest score among all games played before the page is refreshed, using a global variable that persists until page reload. Since page reload resets everything, that may be acceptable as "session" for the page load. The sandbox doesn't allow localStorage but global variable persists across restarts within the same page load? Actually, each restart is a new game within same page load, but we can keep bestScore as a variable that persists across restarts within the same page load. The only restart is via pressing Space or Enter; that does not reload page. So we can store bestScore globally and update if current score > bestScore.

Thus we don't need localStorage; we can use a global variable.

So implement: in global scope, let bestScore = 0. On game over, compare currentScore with bestScore and update if greater.

We need to display currentScore and bestScore somewhere.

We need to create a game loop with smooth movement. Use requestAnimationFrame. Snake moves at constant speed (e.g., 5 cells per second?). Use time delta to ensure smoothness. Snake segment positions are cells (grid). The snake moves by adding a new head position each frame based on direction and speed (e.g., moves every N milliseconds). Quick successive key presses both honored: we need to handle input queuing. Typically we can store a direction queue; if new direction is not opposite to current, set direction, maybe override if pressing opposite.

We need snake cannot reverse onto itself: i.e., cannot go directly opposite of current direction.

We need a grid of at least 20x20 cells. Should be centered on page. Use CSS to center canvas.

We need distinct head and eyes facing direction. For each segment we could draw a rectangle; the head is a different color and has eyes (two small circles) oriented based on direction.

We need particle burst when eating: maybe draw small circles that fade out. Could be simple: when snake eats food, spawn some particles (e.g., small circles with random velocities) that animate for a short time, then disappear.

We need overlay showing score when game over, and space/enter to restart, p to pause.

We need pause functionality. So we need a paused flag that stops the game loop, perhaps display "Paused" overlay.

We need initial start message overlay: "Click or press a key to start". But the requirement also 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 the game can be judged in action without playing." This is ambiguous. Could do: initially we show the start overlay. Then after user clicks or presses a key, we start the game with AI controlling the snake (i.e., direction chosen automatically). The AI may choose random directions or simple path? The requirement: self-playing demo mode. So we can have a simple AI that moves the snake randomly (or following food). The AI could run in the game loop even before user interaction? But we need to hide the snake's controls? Not sure.

Better interpretation: The game starts automatically (self-playing demo) but there's an overlay message that says "Click or press a key to start". So the game is running, but the user can click or press a key to start controlling (or to start the AI? Actually, "behind a 'Click or press a key to start' message" suggests that the message is overlayed on top of the game, so you see it first. After clicking or pressing a key, the message disappears and the game begins (self-playing). The phrase "self-playing demo mode (a simple AI plays) behind a 'Click or press a key to start' message" might mean that the AI is playing automatically, but the user sees the message overlay. So we can have the game start immediately after page load, with AI controlling the snake. At the same time we display the overlay "Click or press a key to start". The user can click the canvas or press any key to remove the overlay and start controlling (or maybe to start the AI?). However, the requirement also says "the game can be judged in action without playing." If the AI is playing automatically, then even before user click, the game is visible. So we can satisfy the screenshot requirement. The overlay should be visible initially.

But the rule also says "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 before the user interacts, we cannot receive keyboard events. So if we display a message overlay, we must also prevent keyboard input until user clicks. Actually, the rule: "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 detect when user clicked in the iframe and then enable keyboard events. So we must add a click listener to the canvas or document that sets a flag enabling input. And before that, we show the start message overlay.

Thus, we need to implement:

- Display start overlay with "Click or press a key to start" centered.

- On first click (or key press) maybe we start the game if not started. But we also want the AI to start playing automatically for demonstration. However we cannot accept keyboard input before click. So we cannot have the AI start automatically and then the user click to start controlling? Actually, we could have the game loop start automatically (self-play AI) even before user click. The overlay is displayed but it does not block the game loop. The user can see the game. The keyboard events will be disabled until user clicks. Once clicked, we can show controls. But the requirement says "Click or press a key to start". So maybe we want to start the game only after click, but to have a screenshot after 3 seconds, we need the game to be running. If we start only after click, then the screenshot would be blank. So we need the game to start automatically, but the overlay says "Click or press a key to start". The user can then click to start controlling or to start the AI? Let's read again:

"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."

Interpretation: The game starts automatically with a simple AI playing, but there's a message overlay prompting the user to click or press a key to start (presumably to begin controlling, maybe). So the AI is playing automatically regardless of user interaction; the overlay is just a prompt. But the user may not need to interact to see the game (since AI is playing). But also we need to enable keyboard events after user clicks, as per rule.

Thus, we can have the game start automatically upon page load (self-playing AI). We also display the overlay "Click or press a key to start". When the user clicks or presses a key, we remove the overlay and allow the user to take control (i.e., replace AI with user controls). Or maybe the overlay stays until user clicks to start the AI? Hard to parse. But we need to meet 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 AI is playing "behind" the message. So the game is playing under the overlay, not blocked. So we can simply start the game loop on load with AI. And display the overlay that says "Click or press a key to start". Then after user clicks or presses a key, we hide the overlay and maybe allow the user to control. But the AI is already playing. Perhaps we could pause the AI until user clicks? But requirement says "self-playing demo mode" i.e., AI is playing. So we shouldn't pause it. So we can keep AI playing regardless. The overlay can just be a prompt for the user to start controlling (or to pause? not sure). The requirement also says "Space or Enter restarts, P pauses." So pause is part of user controls, not AI. So after user can control, they can pause. But before user clicks, we cannot receive keyboard events. So they cannot pause or restart before clicking. So the overlay message should be visible until user clicks. At that point, we enable keyboard input and overlay disappears. Meanwhile, the AI continues to run (the snake moves). So the user can see the AI playing, and after they click, they can control.

Thus, we need to implement a simple AI for snake movement if not controlled. The AI could move the snake randomly each step, but must obey snake rules (no reversing). Could also make it simple: generate a random direction not opposite to current.

Alternatively, we could have the AI follow the food: compute direction towards food if not too close. But it's okay to do random.

But the requirement says "self-playing demo mode (a simple AI plays)". So we need to have AI controlling the snake. The AI should move automatically on its own schedule. Then user can override with keyboard input.

Implementation details:

Game state variables:

- gridSize: 20 cells (maybe 20x20 cells). Actually, requirement says at least 20x20 cells. Let's choose 20x20 cells for simplicity. Each cell maybe 20px? Actually we can set canvas size: cellSize = 20px, number of cells = 20 => canvas 400x400. But requirement says page must look right in a 1280×800 viewport and adapt gracefully down to 375px. So we need to ensure canvas is centered. We can make cellSize dynamic based on viewport, but at least 20 cells across. Let's calculate: we can set cellSize = min(viewport width, viewport height) / 20, but ensure integer. Or we can set fixed cell size and adjust canvas size accordingly. But we need to adapt to smaller viewports. We can use CSS to scale canvas.

Simplify: Use a fixed cell size of 20px, 20 cells => canvas 400x400. That fits within 1280x800. We can center canvas using margin: auto. Or use flexbox. It should adapt gracefully down to 375px width: at 375px width, 400px canvas would overflow horizontally. To adapt, we can set cellSize based on viewport: compute cellSize = Math.floor(Math.min(window.innerWidth, window.innerHeight) / 20). That yields integer cell size. Then canvas width = cellSize * 20, height = cellSize * 20. That ensures the canvas fits within the smaller viewport. Use CSS to set canvas width/height accordingly. But setting canvas width and height via CSS may cause scaling; better to set canvas's width and height in CSS as same as computed pixels.

Alternatively, we could make canvas size in CSS using width: calc(20 * var(--cellSize)) and height similar, where --cellSize = something. Or we can compute cellSize on JS load and set canvas width/height.

We also need to display score and best score. Use text overlay on canvas or separate UI. Probably overlay on canvas.

Game loop:

- Use requestAnimationFrame for each frame (e.g., 60fps). Keep a timestamp for movement timing. The snake moves at a certain speed: e.g., speed = 5 cells per second (i.e., move every 200ms). Use delta time to move accordingly.

- Snake state: an array of segment objects {x, y} in cell coordinates. Initially snake length 3 maybe. Head at center.

- Food: object {x, y} placed randomly on grid, not on snake.

- Direction: current direction vector {dx, dy} where dx, dy are -1,0,1. Initially direction right.

- Input: When user presses arrow keys or WASD, we compute new direction. Must not reverse: i.e., if new direction is opposite to current (dx = -current.dx and dy = -current.dy), ignore.

- Quick successive key presses both honored: we can store a queue of direction changes, but easier: just update direction each key event, but we need to ensure that if user presses multiple keys quickly, we capture each. In typical game loops, we can set direction on keydown and update each frame. Quick successive may be okay because we update direction each frame; if user presses A then D quickly, last direction will be D (if not reversed). So it's fine.

- However the rule "Quick successive key presses must both be honored" might mean that if the user presses two keys before the snake moves (i.e., one after another), both should be considered. In our implementation, we can keep a "pendingDirection" that is updated on each keydown, but only applied when the snake moves (so multiple presses can change direction). For example, if we have direction right, user presses up (should be allowed). Then before next movement, user presses left (which is opposite to right? Actually left is opposite of right, so not allowed). But if user presses up then down quickly, we might allow down as well? Since we cannot reverse, we would reject. But the requirement says "quick successive key presses must both be honored". That could mean that if the user presses up then down quickly, both commands should be honored (i.e., snake direction changes accordingly). But reversing is not allowed, so they would cancel? Perhaps they want to ensure that if the user presses multiple keys before the snake can react, the last one is applied (i.e., queue). So we can implement a direction queue: each key press adds a direction to a queue if it's not opposite to the current direction, else maybe still queue? Hmm.

Simplify: Implement input handling that updates direction each keydown, regardless of timing. It will be honored as soon as next movement step. That satisfies quick successive.

- Snake movement: each movement step (based on speed) we insert new head at (head.x + dx, head.y + dy). If snake length > 0, we remove tail (unless food eaten). Food check: if new head equals food position, increase length (by not removing tail), add point, spawn new food not on snake. Also trigger particle burst.

- Collision detection: if new head out of bounds or collides with any segment (excluding tail because tail will move after next step), game over.

- Overlay: after game over, show overlay with score and best score, and options "Press Space or Enter to restart, P to pause". Also maybe show "Paused" overlay.

- Pause: pressing 'P' toggles pause; if paused, game loop stops (or snake stops). While paused, maybe the overlay shows "Paused". Space/Enter restarts only when not paused? Probably always.

- Rendering: draw grid? Not required but nice. We can fill cells.

- Distinct head and eyes: For each segment, draw a rectangle of size cellSize x cellSize. For head, draw a slightly larger or different color. Then draw eyes: two small circles within head, positioned based on direction. For example:

  - If direction right: eyes at (headX + 0.3*cellSize, headY + 0.3*cellSize) and (headX + 0.3*cellSize, headY + 0.7*cellSize). Or something like that.

  - If direction left: symmetrical.

  - Up: eyes at (headX + 0.3*cellSize, headY + 0.3*cellSize) and (headX + 0.7*cellSize, headY + 0.3*cellSize).

  - Down: similar.

- Particle burst: When food is eaten, spawn e.g., 10 particles with random velocities, drawn as small circles with opacity that fades over a short time (e.g., 500ms). Use an array of particles {x, y, vx, vy, life}. Each frame update life, decrement, and draw.

- Score display: Show currentScore and bestScore somewhere, maybe top-left corner of canvas. Use white text with black outline for readability.

- Best score: global variable updated as described.

- Visual polish: smooth movement (use requestAnimationFrame with delta). Particle effect.

- Overlay for start message: Display "Click or press a key to start" overlay covering canvas, with maybe a semi-transparent background, large text, maybe a button style? Could be just a centered text.

- Keyboard handling: need to listen to keydown events on document (or window). However the sandbox only receives keyboard events after user clicks the iframe. So we need to set a flag enabling input. We can add a mousedown event listener on canvas (or document) that sets a flag "inputEnabled = true". Also maybe on touch? But not required.

- Starting the game: The game loop should start on page load (self-playing). However, we also need to ensure that the snake moves only when not paused. Initially, not paused, not game over. The AI controls snake direction. We need to implement AI: we can have a separate AI function that decides direction each step. For simplicity, AI can randomly choose a direction (not opposite to current) each X milliseconds (or each movement). Or we could compute direction towards food: If food is in same row/col, move accordingly; else randomly choose among possible directions. That would be more interesting. But random is fine.

- But we also need to handle user control: When inputEnabled and not paused and not in start overlay, user can press keys to change direction. So we need a boolean "aiControlled" initially true, but when user presses a key (after click), we could set aiControlled = false. Or we could just ignore AI and let user control? Actually, we need both: AI should be playing initially (self-playing). After user clicks, they can take over? Or after click we might allow user to control (maybe AI stops). It may be okay to have both: AI continues but user input overrides direction? But to have demonstration, the AI should be playing and the overlay is just a prompt. However after user interacts, they could take control. But requirement doesn't explicitly say that the user must be able to control after clicking; it just says "Click or press a key to start" message. It may be that after clicking, the game starts (i.e., the AI starts). In that case, before clicking, the game is not started; the screenshot after 3 seconds would be blank or start overlay. However, rule says the screenshot is taken about 3 seconds after load, without any interaction. So we must have something visible at that time. The start message is visible; also the AI playing would be visible. So either approach could meet screenshot requirement, but we want it to be interesting. So AI playing seems better.

Thus, design:

- On page load:

  - Set up canvas and context.

  - Compute cellSize based on window size.

  - Set up game state: snake, food, direction, speed, score, bestScore (global), particles = [].

  - Set flags: isGameOver = false, isPaused = false, isInputEnabled = false, showStartOverlay = true.

  - Start game loop via requestAnimationFrame.

  - In game loop:

    - If showStartOverlay and not isInputEnabled: display overlay text.

    - If not isGameOver and not isPaused:

      - Update AI direction if not user-controlled (maybe a variable userControlEnabled). Initially userControlEnabled = false. AI selects direction and updates direction if appropriate.

      - Advance snake by one step based on current direction and time.

      - Check collisions.

      - If food eaten, grow snake, increase score, spawn particles, generate new food.

      - Render snake, food, particles, UI.

    - request next frame.

  - On canvas mousedown (or any click), set isInputEnabled = true, showStartOverlay = false (remove overlay), perhaps also set userControlEnabled = true. Also, if game over, pressing space/enter will restart.

  - On keydown (if isInputEnabled and not isPaused and not isGameOver): handle direction changes. Also handle pause (p) and restart (space/enter) regardless? The rule says "Space or Enter restarts, P pauses." So these should be available even when game is paused? Probably space/enter restarts from game over. But also maybe pressing space while paused should also restart? Typically you can restart after game over. We'll implement: If isGameOver: pressing space/enter triggers restart. If not game over and not isPaused: pressing p toggles pause. If isPaused: pressing p toggles? Probably just resume; but we can just treat p as toggle.

  - Keyboard handling: For direction keys, we need to handle arrow keys (←, ↑, →, ↓) and WASD.

  - Quick successive: In keydown we just update direction (if not opposite). Since keydown may fire multiple times quickly, we capture each.

  - For AI: implement a simple AI that picks a direction each step if not user-controlled. AI picks:

    - If food is ahead within some distance, move towards it.

    - Else randomly choose direction that is not opposite.

    - For simplicity, we can compute angle to food, decide to move horizontally or vertically whichever is closer.

  - The snake should not reverse onto itself, which is enforced by direction logic.

  - The snake can never reverse onto itself: So direction cannot be opposite of current direction. We enforce that in both user and AI.

  - Rendering: Use canvas fillRect for each segment. For head, fill a different color (e.g., lime). For body, green. For eyes: fill black circles in head.

  - Food: draw a red circle at center of cell.

  - Particles: each particle drawn as a small circle with decreasing alpha. After life ends, remove.

  - Score and bestScore: Use context.fillText to draw at top-left. Maybe also border.

  - Game Over overlay: Show semi-transparent black overlay covering canvas, with text "Game Over", "Score: X", "Best: Y", "Press Space or Enter to Restart". Maybe also "P to pause" if paused? Actually not needed. Show maybe "Click to start" not needed.

  - When game over, we stop snake movement and show overlay.

  - Restart: Reset game state to initial values (snake length 3, direction right, score to 0, new food, particles cleared, isGameOver = false, isPaused = false). Also hide game over overlay. Optionally, if bestScore < previous bestScore? Actually bestScore is global; after restart, we keep bestScore unchanged unless new high score achieved. That is typical.

  - Pause: When paused, the game loop may still be called but we skip updates. Show "Paused" overlay maybe.

  - The overlay for start message: Show "Click or press a key to start" text centered, maybe with semi-transparent background. This overlay should be visible before user interacts.

Now, because we need to ensure the game starts self-playing (AI) even before user clicks, we need to have the game loop start automatically. But if we have showStartOverlay = true, we still render the snake and AI movement, but overlay sits on top. The screenshot after 3 seconds will show the game in action (snake moving) plus overlay text "Click or press a key to start". That's fine.

One more nuance: The sandbox disables keyboard events until user clicks. So we cannot capture keydown events before user clicks, but we can still have the AI moving. That's okay.

Now, the code must be self-contained in a single HTML file. We'll embed CSS inside <style> and JS inside <script>.

Make sure we don't use any external CDN besides allowed? The instruction says "except the CDN URLs explicitly allowed by the task." There are none. So we must not include any external resources like fonts or images. So we need to draw everything with canvas.

We also need to ensure that the code runs with zero errors in the console of the latest Chrome. So we must be careful with variable names and avoid referencing undefined. Ensure proper closure for requestAnimationFrame.

We also need to ensure the page looks right in a 1280×800 viewport and adapts gracefully down to 375px. We'll compute cellSize based on viewport width/height min and ensure canvas fits. We'll also set CSS to center canvas. For example, body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; } Then canvas { border: 1px solid #333; } We'll also set font sizes appropriately.

Now, code structure:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snake Game</title>
<style>
  body { margin: 0; padding: 0; overflow: hidden; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: #000; }
  canvas { image-rendering: pixelated; border: 2px solid #444; }
  #overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; pointer-events: none; }
  #startOverlay { color: #fff; font-family: Arial, sans-serif; font-size: 2em; text-align: center; }
  #info { position: absolute; top: 10px; left: 10px; color: #fff; font-family: monospace; font-size: 1.2em; text-shadow: 1px 1px #000; }
  #gameOverOverlay, #pauseOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: none; flex-direction: column; justify-content: center; align-items: center; color: #fff; font-family: Arial, sans-serif; }
  #gameOverOverlay p, #pauseOverlay p { font-size: 2em; margin: 0.5em 0; }
  #gameOverOverlay .restartHint, #pauseOverlay .pauseHint { font-size: 1.2em; color: #aaa; }
</style>
</head>
<body>
<canvas id="snakeCanvas"></canvas>
<div id="overlay">
  <div id="startOverlay">Click or press a key to start</div>
</div>
<div id="info"></div>
<div id="gameOverOverlay">
  <p>Game Over</p>
  <p id="gameOverScore">Score: 0</p>
  <p>Best: <span id="gameOverBest">0</span></p>
  <p class="restartHint">Press Space or Enter to Restart</p>
</div>
<div id="pauseOverlay">
  <p>Paused</p>
  <p class="pauseHint">Press P to resume</p>
</div>

<script>
... JavaScript ...
</script>
</body>
</html>
```

We must be careful with overlays: we need to show startOverlay initially. Once user clicks, we hide startOverlay. Also hide overlay div entirely after click (maybe set display: none). Also we need to hide pauseOverlay and gameOverOverlay accordingly.

We also need to ensure that the overlay does not block pointer-events for underlying canvas when we want to click to start. The overlay currently has pointer-events: none. But we need to detect clicks on canvas (or overlay). Since overlay is covering whole screen, we need to make it capture clicks. We can set pointer-events: auto on startOverlay. However, startOverlay is inside #overlay which has pointer-events: none; we can override #startOverlay { pointer-events: auto; }. But we also want to hide overlay after click. So we can attach a click event listener to either canvas or startOverlay that triggers start.

But the rule says the iframe only receives keyboard events after the user clicks it. It does not explicitly say that mouse clicks are blocked. However, to ensure we get the click, we can attach listeners to the document or canvas. Usually, the sandbox may block mouse events until user interacts? Not sure. But we can attempt to attach to canvas.

Better: attach a mousedown event on the canvas (or document) that triggers start. Since the startOverlay covers the canvas, we need to ensure it captures the click. We'll set pointer-events: auto on #startOverlay, and hide it after click.

Now, we need to set up requestAnimationFrame.

Implementation details:

Define constants:

- GRID_SIZE = 20;

- Compute cellSize: let cellSize = Math.floor(Math.min(window.innerWidth, window.innerHeight) / GRID_SIZE);

- Canvas width = cellSize * GRID_SIZE; same for height.

We'll set canvas width/height in JS.

Define direction vectors: {dx, dy}.

Define state variables:

- snake: array of {x, y} cell coordinates. Initially length = 3: positions [(GRID_SIZE/2, GRID_SIZE/2), (GRID_SIZE/2 -1, GRID_SIZE/2), ...]. Let's define head at center.

- direction: {dx: 1, dy: 0} (right).

- food: {x, y} randomly placed.

- score = 0.

- bestScore = parseInt(localStorage? can't use) stored in a global variable; initialize to 0.

- particles: [].

- lastMoveTime = 0; // timestamp of last move.

- moveInterval = 200; // ms per cell move (approx 5 cells per second). Actually speed: we can define speed = 5 cells per second => interval = 1000/5 = 200ms.

- isGameOver = false.

- isPaused = false.

- isInputEnabled = false.

- showStartOverlay = true.

- userControlEnabled = false; // after start click.

- aiControlled = true; // initially.

We also need to handle restart: reset state.

Define functions:

- randomizeFood(): pick random x,y not in snake.

- draw(): clear canvas, draw grid (optional), draw snake segments, draw head with eyes, draw food, draw particles, draw UI (score and bestScore). Also draw overlays (start, game over, pause). The overlays can be drawn using CSS divs; we just need to toggle display property.

- update(delta): if not isGameOver and not isPaused:

  - If not userControlEnabled, let AI choose direction (maybe each move). But we need to update direction each movement step. The AI can compute direction at each update. We'll have a function aiChooseDirection() that returns a new direction based on food location and current direction. Then set direction if allowed (not opposite). That will affect next movement.

  - Compute newHead = {x: snake[0].x + direction.dx, y: snake[0].y + direction.dy}.

  - Check collisions: if newHead.x < 0 or >= GRID_SIZE or newHead.y < 0 or >= GRID_SIZE or snake includes newHead (excluding tail maybe), then gameOver().

  - Determine if ateFood: if newHead.x == food.x && newHead.y == food.y, then score += 10; if score > bestScore: bestScore = score; grow snake (do not remove tail), generate new food. Also spawn particles (e.g., 10 particles with random velocities). The particle burst can be simple: for i in range(particleCount): particles.push({x: newHead.x * cellSize + cellSize/2, y: newHead.y * cellSize + cellSize/2, vx: (Math.random()-0.5)*2, vy: (Math.random()-0.5)*2, life: 1.0}).

  - Insert newHead at snake[0]; if not ateFood, remove tail (snake.pop()).

  - Render.

- gameOver(): set isGameOver = true; maybe stop AI? Show gameOverOverlay with score and bestScore. Also update bestScore.

- restartGame(): reset all state variables, hide gameOverOverlay, hide pauseOverlay, showStartOverlay? Actually after restart we might want to hide start overlay (since user started). But we can just set showStartOverlay = false, isInputEnabled = true? Actually after restart, the game should start again (self-playing). The start overlay should be hidden (since user already clicked to start). So we can keep showStartOverlay = false after first click. In restart, we may want to reset showStartOverlay = false. Also set isPaused = false; isGameOver = false; reset snake and food; score = 0; direction = right; userControlEnabled = true? The user may still have control after they clicked initially, so we should keep that.

- handleInput(key): parse key to direction. Map keys: arrow up/w, down/s, left/a, right/d. If key is ' ' or 'Space' or Enter or 'p'/'P', handle accordingly.

- keyDown handler (if isInputEnabled and not isPaused and not isGameOver): handle direction input and pause/restart.

But we need to differentiate between pause and restart. According to requirements: Space or Enter restarts (presumably after game over or maybe even during game?). Usually restart after game over. But we could also implement restart on space even when game is not over, but that might be weird. I think we should restart only when game over. However, the requirement doesn't specify context. It says "Game over when the snake hits a wall or itself, with an overlay showing the score; Space or Enter restarts, P pauses." So after game over, you can press space/enter to restart. Also P pauses (presumably while playing). So we can handle both:

- If isGameOver: pressing space/enter triggers restart.

- If not isGameOver: pressing p toggles pause.

- If isPaused: pressing p resumes (toggle again). Could also toggle.

- Pressing space/enter when not game over might be ignored.

Now, we need to ensure quick successive key presses both honored. In keydown we will set a variable directionChange for the next frame. But if multiple keydowns happen quickly, the last one will override direction. That's fine.

Now, the AI: we need a simple AI that chooses direction each frame, but not override if user control is enabled. We can have a function updateAIDirection() that chooses a direction.

Pseudo for AI:

function aiChooseDirection() {
  const head = snake[0];
  const fx = food.x;
  const fy = food.y;
  const dx = fx - head.x;
  const dy = fy - head.y;

  // Prefer moving towards food if possible.
  const possibleDirections = [];
  if (dx < 0 && direction.dx !== 1) possibleDirections.push({dx:-1, dy:0});
  else if (dx > 0 && direction.dx !== -1) possibleDirections.push({dx:1, dy:0});
  if (dy < 0 && direction.dy !== 1) possibleDirections.push({dx:0, dy:-1});
  else if (dy > 0 && direction.dy !== -1) possibleDirections.push({dx:0, dy:1});

  // If moving directly towards food is possible, choose it.
  if (dx !== 0 && dy !== 0) {
    // Choose the axis with larger absolute difference.
    if (Math.abs(dx) > Math.abs(dy)) {
      // Move horizontally
      if (dx < 0 && direction.dx !== 1) direction = {dx:-1, dy:0};
      else if (dx > 0 && direction.dx !== -1) direction = {dx:1, dy:0};
      else {
        // fallback random among possible
        direction = possibleDirections[Math.floor(Math.random()*possibleDirections.length)];
      }
    } else {
      // Move vertically
      if (dy < 0 && direction.dy !== 1) direction = {dx:0, dy:-1};
      else if (dy > 0 && direction.dy !== -1) direction = {dx:0, dy:1};
      else {
        direction = possibleDirections[Math.floor(Math.random()*possibleDirections.length)];
      }
    }
  } else if (dx !== 0) {
    // Move horizontally towards food
    if (dx < 0 && direction.dx !== 1) direction = {dx:-1, dy:0};
    else if (dx > 0 && direction.dx !== -1) direction = {dx:1, dy:0};
    else {
      direction = possibleDirections[Math.floor(Math.random()*possibleDirections.length)];
    }
  } else if (dy !== 0) {
    // Move vertically towards food
    if (dy < 0 && direction.dy !== 1) direction = {dx:0, dy:-1};
    else if (dy > 0 && direction.dy !== -1) direction = {dx:0, dy:1};
    else {
      direction = possibleDirections[Math.floor(Math.random()*possibleDirections.length)];
    }
  } else {
    // Food is on head (should not happen)
    direction = possibleDirections[Math.floor(Math.random()*possibleDirections.length)];
  }
}

But we need to ensure direction is not opposite: check that new direction's dx != -current.dx && dy != -current.dy. Also not zero vector.

Alternatively, we could just randomly pick a non-opposite direction each move: possibleDirections includes all directions except opposite to current, then random.

Simplify: AI just randomly picks a direction each move among non-opposite options.

function aiUpdateDirection() {
  const dirs = [{dx:1, dy:0}, {dx:-1, dy:0}, {dx:0, dy:1}, {dx:0, dy:-1}];
  const opposite = {dx:-direction.dx, dy:-direction.dy};
  const allowed = dirs.filter(d => d.dx !== opposite.dx || d.dy !== opposite.dy);
  direction = allowed[Math.floor(Math.random()*allowed.length)];
}

That is simple.

Now, to ensure AI runs before user control, we need to call aiUpdateDirection each update step if not userControlEnabled.

But we also need to consider that the AI might override user's control. We should only run AI if userControlEnabled is false (i.e., before user interacts). After user clicks to start, we set userControlEnabled = true (or maybe after click we set userControlEnabled = true and aiControlled = false). Then AI should not interfere.

Now, initial state: user hasn't clicked, so showStartOverlay = true, isInputEnabled = false. So we cannot accept keyboard events yet. However, we still want the game loop to run and AI to move. So in game loop, we will check if showStartOverlay && !isInputEnabled: display overlay. Also we may want to hide overlay after click.

Now, click handling: we need to add a mousedown event listener to canvas (or document). Since startOverlay covers canvas, we need to allow click detection. We can attach click to the startOverlay element (which has pointer-events auto). So in HTML we set startOverlay pointer-events: auto; then on click we hide startOverlay, set isInputEnabled = true, showStartOverlay = false, userControlEnabled = true.

Also maybe we want to focus the canvas for keyboard events? Usually keyboard events are captured on document, but they can be captured on window or document. We'll attach keydown listener to document (or window). We'll add event listener for 'keydown' on window, but we only process if isInputEnabled and not isGameOver (or maybe also handle restart on game over). Also we need to handle pause and direction.

Now, drawing functions:

- drawGrid: optional, we can draw faint lines to visualize grid. Not required but nice. But we must ensure speed.

- drawSnake: iterate over snake segments. For each segment, compute screen coordinates: x * cellSize, y * cellSize. For head (index 0), draw distinct color (e.g., lime green). For body segments, draw green. Also for head we draw eyes. We need to calculate eye positions based on direction.

Define eyeRadius = cellSize * 0.2; eyeOffsetX = cellSize * 0.3; eyeOffsetY = cellSize * 0.3.

If direction is right: left eye at headX + cellSize*0.3, headY + cellSize*0.3; right eye at headX + cellSize*0.3, headY + cellSize*0.7. Similarly for other directions.

Alternatively, we could draw two small circles.

- drawFood: draw a red circle at center of cell: cx = (food.x + 0.5) * cellSize, cy = (food.y + 0.5) * cellSize, radius = cellSize * 0.4 * 0.5? Actually maybe radius = cellSize * 0.3.

- drawParticles: for each particle, compute age factor = particle.life; alpha = particle.life; draw a circle at (particle.x, particle.y) radius = cellSize * 0.1, fill with white or yellow. Then update life: particle.life -= delta / particleLifetime (e.g., 1.0 per 500ms). Remove if life <= 0.

- drawUI: draw current score and best score at top-left.

- overlays: The overlays are CSS divs. We'll hide them via display: none.

We need to ensure that when game over, we show #gameOverOverlay, and we need to update #gameOverScore and #gameOverBest. Also, maybe we need to hide other overlays.

When paused, show #pauseOverlay.

Now, we must ensure no console errors.

Now, we need to compute cellSize on load and also adjust on window resize. We can add a resize event listener to recompute cellSize and resize canvas.

Now, we need to ensure code runs with zero errors.

Now, let's implement step by step.

**HTML structure**:

We have canvas, overlays divs with IDs.

We need to make sure that startOverlay is visible initially, and others hidden.

CSS:

```css
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #111;
  font-family: Arial, sans-serif;
}
canvas {
  image-rendering: pixelated;
  border: 2px solid #444;
  display: block;
}
#overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex; justify-content: center; align-items: center;
  pointer-events: none; /* block all pointer events */
}
#startOverlay {
  color: #fff;
  font-size: 2.5em;
  text-align: center;
  pointer-events: auto; /* allow clicks */
  cursor: pointer;
}
#info {
  position: absolute;
  top: 10px; left: 10px;
  color: #fff;
  font-family: monospace;
  font-size: 1.2em;
  text-shadow: 1px 1px #000;
}
#gameOverOverlay, #pauseOverlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: Arial, sans-serif;
}
#gameOverOverlay p, #pauseOverlay p {
  margin: 0.5em 0;
  font-size: 2em;
}
.restartHint, .pauseHint {
  font-size: 1.2em;
  color: #aaa;
}
```

Now, startOverlay is clickable, so pointer-events auto. We also need to hide startOverlay after click.

Now, script:

We'll place all code inside <script> tag.

Define constants:

```js
const GRID_SIZE = 20;
let cellSize = 0;
let canvas, ctx;
let snake, food, direction, score, bestScore, particles;
let isGameOver = false;
let isPaused = false;
let isInputEnabled = false;
let showStartOverlay = true;
let userControlEnabled = false;
let lastMoveTime = 0;
const MOVE_INTERVAL = 200; // ms per move
const PARTICLE_LIFE = 0.5; // seconds
```

Now, functions:

**initGame()**: sets up initial state.

```js
function initGame() {
  // recompute cellSize if needed
  cellSize = Math.floor(Math.min(window.innerWidth, window.innerHeight) / GRID_SIZE);
  canvas.width = cellSize * GRID_SIZE;
  canvas.height = cellSize * GRID_SIZE;

  // snake initial length 3, head at center
  const startX = Math.floor(GRID_SIZE / 2);
  const startY = Math.floor(GRID_SIZE / 2);
  snake = [
    {x: startX, y: startY},
    {x: startX - 1, y: startY},
    {x: startX - 2, y: startY}
  ];

  direction = {dx: 1, dy: 0}; // right

  score = 0;
  // bestScore is global

  // generate food not on snake
  randomizeFood();

  particles = [];

  isGameOver = false;
  isPaused = false;

  // user hasn't clicked yet, so no input
  isInputEnabled = false;
  showStartOverlay = true;
  userControlEnabled = false;

  // reset overlays
  document.getElementById('gameOverOverlay').style.display = 'none';
  document.getElementById('pauseOverlay').style.display = 'none';
  document.getElementById('startOverlay').style.display = 'flex';
}
```

**randomizeFood()**:

```js
function randomizeFood() {
  let attempts = 0;
  do {
    food = {
      x: Math.floor(Math.random() * GRID_SIZE),
      y: Math.floor(Math.random() * GRID_SIZE)
    };
    attempts++;
    if (attempts > 100) break; // fallback
  } while (snake.some(seg => seg.x === food.x && seg.y === food.y));
}
```

**spawnParticles(x, y)**:

```js
function spawnParticles(x, y) {
  const count = 8;
  for (let i = 0; i < count; i++) {
    const angle = Math.random() * Math.PI * 2;
    const speed = Math.random() * 3 + 2;
    particles.push({
      x: x,
      y: y,
      vx: Math.cos(angle) * speed,
      vy: Math.sin(angle) * speed,
      life: 1.0
    });
  }
}
```

**updateParticles(delta)**: delta in seconds? We'll compute delta time in seconds using performance.now.

We'll store lastFrameTime to calculate delta.

**drawSnake()**: Draw segments.

```js
function drawSnake() {
  snake.forEach((seg, index) => {
    const x = seg.x * cellSize;
    const y = seg.y * cellSize;
    // head is index 0
    if (index === 0) {
      ctx.fillStyle = '#0f0'; // lime green
    } else {
      ctx.fillStyle = '#080'; // darker green
    }
    ctx.fillRect(x, y, cellSize, cellSize);
    // draw eyes for head
    if (index === 0) {
      ctx.fillStyle = '#000';
      const eyeR = cellSize * 0.2;
      const eyeOffsetX = cellSize * 0.3;
      const eyeOffsetY = cellSize * 0.3;
      let leftX, leftY, rightX, rightY;
      if (direction.dx === 1) { // right
        leftX = x + eyeOffsetX;
        leftY = y + eyeOffsetY;
        rightX = x + eyeOffsetX;
        rightY = y + cellSize - eyeOffsetY;
      } else if (direction.dx === -1) { // left
        leftX = x + cellSize - eyeOffsetX - eyeR*2;
        leftY = y + eyeOffsetY;
        rightX = x + cellSize - eyeOffsetX - eyeR*2;
        rightY = y + cellSize - eyeOffsetY;
      } else if (direction.dy === 1) { // down
        leftX = x + eyeOffsetX;
        leftY = y + eyeOffsetY;
        rightX = x + cellSize - eyeOffsetX - eyeR*2;
        rightY = y + eyeOffsetY;
      } else if (direction.dy === -1) { // up
        leftX = x + eyeOffsetX;
        leftY = y + cellSize - eyeOffsetX - eyeR*2;
        rightX = x + cellSize - eyeOffsetX - eyeR*2;
        rightY = y + cellSize - eyeOffsetX - eyeR*2;
      } else {
        // fallback
        leftX = x + eyeOffsetX;
        leftY = y + eyeOffsetY;
        rightX = x + cellSize - eyeOffsetX;
        rightY = y + cellSize - eyeOffsetY;
      }
      ctx.beginPath();
      ctx.arc(leftX + eyeR, leftY + eyeR, eyeR, 0, Math.PI*2);
      ctx.fill();
      ctx.beginPath();
      ctx.arc(rightX + eyeR, rightY + eyeR, eyeR, 0, Math.PI*2);
      ctx.fill();
    }
  });
}
```

But we need to ensure eye positions are correct. Might be easier to compute as:

- For direction right: eyes at (headX + cellSize*0.3, headY + cellSize*0.3) and (headX + cellSize*0.3, headY + cellSize*0.7)

- For direction left: eyes at (headX + cellSize*0.7, headY + cellSize*0.3) and (headX + cellSize*0.7, headY + cellSize*0.7)

- For direction down: eyes at (headX + cellSize*0.3, headY + cellSize*0.7) and (headX + cellSize*0.7, headY + cellSize*0.7)

- For direction up: eyes at (headX + cellSize*0.3, headY + cellSize*0.3) and (headX + cellSize*0.7, headY + cellSize*0.3)

We need to compute headX = seg.x * cellSize; headY = seg.y * cellSize.

Implement accordingly.

Now, drawFood():

```js
function drawFood() {
  const x = (food.x + 0.5) * cellSize;
  const y = (food.y + 0.5) * cellSize;
  const r = cellSize * 0.4;
  ctx.fillStyle = '#f00';
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI*2);
  ctx.fill();
}
```

drawParticles():

```js
function drawParticles() {
  for (let i = particles.length - 1; i >= 0; i--) {
    const p = particles[i];
    const alpha = p.life;
    ctx.fillStyle = `rgba(255, 255, 200, ${alpha})`;
    ctx.beginPath();
    ctx.arc(p.x, p.y, cellSize * 0.1, 0, Math.PI*2);
    ctx.fill();
    // update life
    p.life -= 0.02; // decrement each frame; adjust based on delta maybe
    if (p.life <= 0) {
      particles.splice(i, 1);
    } else {
      p.x += p.vx;
      p.y += p.vy;
    }
  }
}
```

But we need to ensure we have delta for smoother fade. For simplicity, we can subtract a constant each frame.

Now, drawUI():

```js
function drawUI() {
  ctx.fillStyle = '#fff';
  ctx.font = `bold ${cellSize * 0.6}px monospace`;
  ctx.fillText(`Score: ${score}`, 10, cellSize * 0.8);
  ctx.fillText(`Best: ${bestScore}`, 10, cellSize * 1.6);
}
```

But need to compute text coordinates. Or we can use fillText with x,y.

Now, drawStartOverlay:

The startOverlay is CSS, but we may also display some text on canvas? Not needed.

Now, drawGameOverOverlay: we need to update text with score and best.

Now, drawPauseOverlay: just show "Paused".

Now, we need to handle keyboard mapping:

We can define a function getDirectionFromKey(key) that returns direction vector or null.

Mapping:

- ArrowUp, 'w', 'W' -> up: dx:0, dy:-1

- ArrowDown, 's', 'S' -> down: dx:0, dy:1

- ArrowLeft, 'a', 'A' -> left: dx:-1, dy:0

- ArrowRight, 'd', 'D' -> right: dx:1, dy:0

Now, in keydown:

```js
function onKeyDown(e) {
  if (!isInputEnabled) return;
  const key = e.key.toLowerCase();

  // pause/resume toggle
  if (key === 'p') {
    if (isGameOver) {
      // restart on space or enter; p not used for game over, but we could ignore
      return;
    }
    isPaused = !isPaused;
    if (isPaused) {
      document.getElementById('pauseOverlay').style.display = 'flex';
    } else {
      document.getElementById('pauseOverlay').style.display = 'none';
    }
    return;
  }

  // restart on space or enter if game over
  if ((key === ' ' || key === 'enter') && isGameOver) {
    restartGame();
    return;
  }

  // direction keys
  let newDir = null;
  if (['arrowup', 'w'].includes(key)) newDir = {dx:0, dy:-1};
  else if (['arrowdown', 's'].includes(key)) newDir = {dx:0, dy:1};
  else if (['arrowleft', 'a'].includes(key)) newDir = {dx:-1, dy:0};
  else if (['arrowright', 'd'].includes(key)) newDir = {dx:1, dy:0};

  if (!newDir) return;

  // cannot reverse
  if (newDir.dx === -direction.dx && newDir.dy === -direction.dy) return;

  direction = newDir;
}
```

We need to map key names: For arrow keys, e.key returns 'ArrowUp', etc. So we need to compare case-insensitively.

Better: define mapping:

```js
const keyMap = {
  'ArrowUp': {dx:0, dy:-1},
  'w': {dx:0, dy:-1},
  'ArrowDown': {dx:0, dy:1},
  's': {dx:0, dy:1},
  'ArrowLeft': {dx:-1, dy:0},
  'a': {dx:-1, dy:0},
  'ArrowRight': {dx:1, dy:0},
  'd': {dx:1, dy:0}
};
```

In onKeyDown:

```js
const dir = keyMap[e.key];
if (dir) {
   // check reverse...
   if (dir.dx === -direction.dx && dir.dy === -direction.dy) return;
   direction = dir;
}
```

Now, we also need to handle 'Space' and 'Enter' keys: e.key returns ' ' for space, 'Enter' for enter. So:

```js
if (isGameOver && (e.key === ' ' || e.key === 'Enter')) {
   restartGame();
   return;
}
```

Now, pause:

If key === 'p' or 'P', we toggle isPaused.

Now, after click, we need to enable input: add click handler to startOverlay.

```js
document.getElementById('startOverlay').addEventListener('click', function() {
  // hide start overlay
  document.getElementById('startOverlay').style.display = 'none';
  isInputEnabled = true;
  showStartOverlay = false;
  userControlEnabled = true; // allow user control
});
```

Also, maybe clicking elsewhere also starts? But the requirement says "Click or press a key to start". So click on overlay suffices.

Now, we need to implement the game loop.

We'll keep a variable `lastFrameTime` to compute delta. Use `requestAnimationFrame` loop.

```js
let lastFrameTime = 0;

function gameLoop(currentTime) {
  const delta = (currentTime - lastFrameTime) / 1000; // seconds
  lastFrameTime = currentTime;

  // Update based on delta
  update(delta);

  // Render
  render();

  requestAnimationFrame(gameLoop);
}
```

Initialize by calling initGame() then requestAnimationFrame(gameLoop) after setting up canvas.

Now, update(delta):

- If isGameOver or isPaused: skip movement updates.

- If not userControlEnabled, run AI to choose direction each frame (or each move). But we need AI to select direction before moving, but we could also just update direction each frame. However, we also need to respect move interval. So we need a separate clock for snake movement, independent of render frame rate. So we need to track time since last move.

We can have a variable `lastMoveTime` which is a timestamp (ms). In update(delta) we compute currentTime (ms). If currentTime - lastMoveTime >= MOVE_INTERVAL and not isGameOver and not isPaused:

- Move snake.

- After moving, set lastMoveTime = currentTime.

We also need to incorporate AI direction selection: It could be that AI updates direction at each move step, or each frame. Probably each move step is fine. So we can have a function `chooseAIDirection()` that updates direction if not userControlEnabled.

Pseudo:

```js
if (!isGameOver && !isPaused) {
  // AI chooses direction if not controlled by user
  if (!userControlEnabled) {
    aiUpdateDirection();
  }

  // handle input direction? We already set direction via keydown, so direction is current.

  // move snake
  const now = performance.now();
  if (now - lastMoveTime >= MOVE_INTERVAL) {
    // move
    const newHead = {
      x: snake[0].x + direction.dx,
      y: snake[0].y + direction.dy
    };
    // check collision
    if (newHead.x < 0 || newHead.x >= GRID_SIZE || newHead.y < 0 || newHead.y >= GRID_SIZE) {
      gameOver();
      return;
    }
    if (snake.some((seg, idx) => {
      if (idx === snake.length - 1 && !ateFood) return false; // tail will move, so ignore
      return seg.x === newHead.x && seg.y === newHead.y;
    })) {
      gameOver();
      return;
    }

    const ateFood = newHead.x === food.x && newHead.y === food.y;
    if (ateFood) {
      score += 10;
      if (score > bestScore) bestScore = score;
      // spawn particles at newHead position (world coordinates)
      spawnParticles(newHead.x * cellSize + cellSize/2, newHead.y * cellSize + cellSize/2);
      // grow snake: do not remove tail
      // generate new food
      randomizeFood();
    } else {
      snake.pop(); // remove tail
    }

    snake.unshift(newHead);
    lastMoveTime = now;
  }
}
```

But we need to have variable `ateFood` accessible outside.

Now, AI update:

```js
function aiUpdateDirection() {
  // Random direction not opposite
  const dirs = [{dx:1, dy:0}, {dx:-1, dy:0}, {dx:0, dy:1}, {dx:0, dy:-1}];
  const opposite = {dx:-direction.dx, dy:-direction.dy};
  const allowed = dirs.filter(d => d.dx !== opposite.dx || d.dy !== opposite.dy);
  direction = allowed[Math.floor(Math.random() * allowed.length)];
}
```

Alternatively, we could incorporate a smarter AI, but random is fine.

Now, after moving, we need to draw.

Render:

```js
function render() {
  // clear canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // optionally draw grid
  ctx.strokeStyle = '#222';
  ctx.lineWidth = 0.5;
  for (let x = 0; x <= GRID_SIZE; x++) {
    ctx.beginPath();
    ctx.moveTo(x * cellSize, 0);
    ctx.lineTo(x * cellSize, canvas.height);
    ctx.stroke();
  }
  for (let y = 0; y <= GRID_SIZE; y++) {
    ctx.beginPath();
    ctx.moveTo(0, y * cellSize);
    ctx.lineTo(canvas.width, y * cellSize);
    ctx.stroke();
  }

  drawSnake();
  drawFood();
  drawParticles();
  drawUI();

  // overlays
  if (showStartOverlay && !isInputEnabled) {
    // start overlay already handled via CSS display, but we can set display here
    document.getElementById('startOverlay').style.display = 'flex';
  } else {
    document.getElementById('startOverlay').style.display = 'none';
  }

  if (isGameOver) {
    document.getElementById('gameOverOverlay').style.display = 'flex';
    document.getElementById('gameOverScore').textContent = `Score: ${score}`;
    document.getElementById('gameOverBest').textContent = bestScore;
  } else {
    document.getElementById('gameOverOverlay').style.display = 'none';
  }

  if (isPaused && !isGameOver) {
    document.getElementById('pauseOverlay').style.display = 'flex';
  } else {
    document.getElementById('pauseOverlay').style.display = 'none';
  }
}
```

Note: showStartOverlay is set to true initially. After user clicks, we set showStartOverlay = false, hide startOverlay. The overlay CSS uses display flex. So we can control it.

Now, restartGame(): Reset everything to initial state, except bestScore persists.

```js
function restartGame() {
  initGame();
}
```

But note: bestScore is global, we should not reset it. So restartGame should not reset bestScore. However initGame currently doesn't touch bestScore. So ok.

Now, start initial game:

We need to call initGame after canvas is defined.

In script:

```js
window.addEventListener('DOMContentLoaded', () => {
  canvas = document.getElementById('snakeCanvas');
  ctx = canvas.getContext('2d');

  // compute cellSize etc inside initGame
  initGame();

  // start loop
  requestAnimationFrame(gameLoop);
});
```

We also need to handle window resize: recompute cellSize and canvas size.

```js
window.addEventListener('resize', () => {
  // maybe re-init game?
  // If game is not over, we may want to adjust cellSize. For simplicity, just re-init.
  initGame();
});
```

But note: on resize, resetting snake may cause game reset unexpectedly. Could preserve snake position? Not required. Simpler to reinit on resize.

Now, regarding the overlay display: #startOverlay is a child of #overlay which has pointer-events: none. #startOverlay has pointer-events: auto. It uses flex centering. Its initial display is flex (as per CSS). We need to ensure the CSS sets #startOverlay display: flex? Actually we set #overlay display: flex, and #startOverlay is direct child with some styling. We didn't set #startOverlay display property. So it will be an inline element. To make it flex, we need to set #startOverlay display: flex or simply use text styling.

Simplify: we can have #startOverlay with absolute positioning and centered text. For example:

```css
#startOverlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2.5em;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
}
```

But we also need overlay background for start? Could be transparent. We'll keep it simple.

Thus, #overlay could be removed; we just have startOverlay covering canvas with pointer events. But we also need other overlays (#gameOverOverlay, #pauseOverlay) to be absolute. We'll just have each overlay separately.

Simplify overlay structure:

- #startOverlay: absolute, centered, white text, large, pointer-events auto.

- #gameOverOverlay: absolute covering screen, background, display none initially, etc.

- #pauseOverlay: absolute covering screen.

We can remove #overlay div.

Let's adjust HTML:

```html
<canvas id="snakeCanvas"></canvas>
<div id="startOverlay">Click or press a key to start</div>
<div id="info"></div>
<div id="gameOverOverlay">
  <p>Game Over</p>
  <p id="gameOverScore">Score: 0</p>
  <p>Best: <span id="gameOverBest">0</span></p>
  <p class="restartHint">Press Space or Enter to Restart</p>
</div>
<div id="pauseOverlay">
  <p>Paused</p>
  <p class="pauseHint">Press P to resume</p>
</div>
```

CSS adjust accordingly.

Now, ensure startOverlay is visible initially (no display none). Use CSS to style.

Now, clicking startOverlay:

Add event listener to startOverlay for mousedown or click. It will hide startOverlay and enable input and user control.

Now, the keyboard events: we need to add event listeners on window for keydown.

Now, also ensure that the start message appears even after user clicks? It should disappear after click.

Now, check for potential errors: referencing undefined variables, etc.

Potential issues:

- When drawing eyes, we used eyeR = cellSize * 0.2; but we need to compute positions correctly. Let's implement drawing of eyes more straightforwardly.

Simplify eyes drawing:

```
if (index === 0) {
    ctx.fillStyle = '#000';
    const offset = cellSize * 0.3;
    const eyeSize = cellSize * 0.2;
    if (direction.dx === 1) { // right
        ctx.fillRect(headX + offset, headY + offset, eyeSize, eyeSize);
        ctx.fillRect(headX + offset, headY + cellSize - offset - eyeSize, eyeSize, eyeSize);
    } else if (direction.dx === -1) { // left
        ctx.fillRect(headX + cellSize - offset - eyeSize, headY + offset, eyeSize, eyeSize);
        ctx.fillRect(headX + cellSize - offset - eyeSize, headY + cellSize - offset - eyeSize, eyeSize, eyeSize);
    } else if (direction.dy === 1) { // down
        ctx.fillRect(headX + offset, headY + cellSize - offset - eyeSize, eyeSize, eyeSize);
        ctx.fillRect(headX + cellSize - offset - eyeSize, headY + cellSize - offset - eyeSize, eyeSize, eyeSize);
    } else if (direction.dy === -1) { // up
        ctx.fillRect(headX + offset, headY + offset, eyeSize, eyeSize);
        ctx.fillRect(headX + cellSize - offset - eyeSize, headY + offset, eyeSize, eyeSize);
    }
}
```

But using fillRect for eyes might look pixelated. That's fine.

Now, to ensure snake head color distinct, we use '#0f0' for head, body '#080'.

Now, particles: we spawn at newHead world coordinates. In spawnParticles, we receive x, y in world coordinates (pixel). We'll pass `newHead.x * cellSize + cellSize/2` etc.

Now, in drawParticles, we update particle life each frame. However, we need to compute delta to decrement life proportionally, but we can just subtract constant.

But we must also adjust particle velocity gradually to simulate gravity? Not needed.

Now, the game loop:

We need to track lastFrameTime for rendering and lastMoveTime for movement.

Our update(delta) receives delta in seconds. But we also need movement timing. So we can use performance.now() in update? However, requestAnimationFrame callback gives absolute time. So we can store lastMoveTime separate.

Simplify: In gameLoop we can compute delta and also track lastMoveTime.

Pseudo:

```js
let lastFrameTime = 0;
let lastMoveTime = 0;

function gameLoop(timestamp) {
  const delta = (timestamp - lastFrameTime) / 1000;
  lastFrameTime = timestamp;

  // Update particles and maybe other animations
  updateParticles(delta);

  // Handle snake movement based on MOVE_INTERVAL
  const now = performance.now();
  if (!isGameOver && !isPaused && now - lastMoveTime >= MOVE_INTERVAL) {
    // Move snake
    // AI direction update if needed
    if (!userControlEnabled) {
      aiUpdateDirection();
    }
    // ... movement logic as above
    lastMoveTime = now;
  }

  // Render
  render();

  requestAnimationFrame(gameLoop);
}
```

Now, need to define updateParticles(delta) function to decrement particle.life based on delta.

Now, we also need to handle resizing: we have initGame called on resize, which resets snake, etc. But we want the overlay start message still? Since after user clicks, we hide startOverlay, resetting would show startOverlay again? Actually after resize, if user has already started, we may want to keep the game state. But for simplicity, we can just reinit on resize. It may be okay, albeit resets game. But requirement does not specify behavior on resize. Probably fine.

But we need to ensure that after resize, the overlays remain correct. Since we reinitialize, startOverlay will be shown again. But the user may not expect that. However, minor.

Alternatively, we could adjust cellSize without resetting snake. But it's fine.

Now, we need to ensure that the bestScore persists across restarts within same session (i.e., across game over). That's fine as global.

Now, we need to verify no errors.

Now, we also need to ensure that the game starts automatically (self-playing AI) and the overlay shows "Click or press a key to start". In our code, after initGame we hide startOverlay? Actually startOverlay is initially displayed via CSS (no display none). We only hide it on click. So startOverlay is visible. However, we also set showStartOverlay = true initially. In render we may set display for startOverlay? We currently only hide startOverlay on click. So startOverlay will be present. So at load, the overlay is displayed over the game. The AI will be moving snake. The overlay says "Click or press a key to start". That matches requirement.

Now, we need to ensure the overlay does not block pointer-events for startOverlay. We have pointer-events: auto. So click works.

Now, check for errors: The CSS selectors (#startOverlay) and IDs must match. We need to ensure that startOverlay is a child of #overlay? Actually we removed #overlay. Let's remove it to avoid confusion.

We'll modify HTML:

```html
<canvas id="snakeCanvas"></canvas>

<div id="startOverlay">Click or press a key to start</div>

<div id="info"></div>

<div id="gameOverOverlay">
  <p>Game Over</p>
  <p id="gameOverScore">Score: 0</p>
  <p>Best: <span id="gameOverBest">0</span></p>
  <p class="restartHint">Press Space or Enter to Restart</p>
</div>

<div id="pauseOverlay">
  <p>Paused</p>
  <p class="pauseHint">Press P to resume</p>
</div>
```

Now adjust CSS accordingly: set startOverlay absolute, pointer-events auto.

CSS modifications:

```css
#startOverlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2.5em;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
  user-select: none; /* prevent selection */
}
#info {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #fff;
  font-family: monospace;
  font-size: 1.2em;
  text-shadow: 1px 1px #000;
}
#gameOverOverlay, #pauseOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: Arial, sans-serif;
}
#gameOverOverlay p, #pauseOverlay p {
  margin: 0.5em 0;
  font-size: 2em;
}
.restartHint, .pauseHint {
  font-size: 1.2em;
  color: #aaa;
}
```

Now, after click, we hide startOverlay and enable input.

Add event listener:

```js
document.getElementById('startOverlay').addEventListener('click', function() {
  // Hide start overlay
  this.style.display = 'none';
  // Enable input
  isInputEnabled = true;
  userControlEnabled = true;
});
```

Now, for keydown, we need to listen on window.

Add:

```js
window.addEventListener('keydown', (e) => {
   onKeyDown(e);
});
```

Now, the onKeyDown function defined earlier.

Now, we need to define the onKeyDown function that uses keyMap.

We also need to handle restart on space or enter after game over.

Now, we need to ensure that pressing P while game over doesn't accidentally pause? We have a check in keydown: if isGameOver, we restart on space/enter; other keys are ignored (including P). So we can keep.

Now, we need to ensure that while paused, direction input still works? Probably not, but can ignore.

Now, ensure that key events are captured after user clicks. Since we only set isInputEnabled after click, we cannot receive keyboard events before that. The sandbox says only receives keyboard events after the user clicks the iframe. So we can't rely on keydown before click. Our implementation will not process keys until isInputEnabled is true (set after click). That matches.

Now, bestScore: global variable. We'll define at top: let bestScore = 0; Possibly we could read from a query param or something, but not needed.

Now, we also need to ensure we use `performance.now()` for timing.

Now, we need to handle that requestAnimationFrame calls with timestamp (in ms). For delta we need to convert to seconds.

Now, let's write the full script with all functions.

Potential pitfalls:

- The snake cannot reverse onto itself. Our direction check ensures new direction is not opposite of current. However, if user presses opposite key quickly, we ignore. Good.

- Quick successive key presses both honored: In our code, direction is updated each keydown, so successive presses will override direction. That is fine.

- Eating food: we add 10 points and grow snake. Good.

- Particle burst: we spawn particles when food eaten. Good.

- Display current and best score: we draw UI.

- Game over overlay shows score and best.

- Space/Enter restarts: we restart when game over.

- P pauses: toggles pause.

- Smooth movement: requestAnimationFrame and delta ensures smooth. The snake moves at fixed interval (200ms) independent of frame rate.

- Visual polish: distinct head color, eyes facing direction, particle burst.

- Grid at least 20x20 cells: we use GRID_SIZE=20. Canvas sized accordingly.

- Centered on page: using flexbox center.

Now, potential issues:

- The eyes drawing uses fillRect with black squares, which may be pixelated. That's okay.

- The particle effect: we spawn particles each time food is eaten. Need to ensure that particles are removed after life.

- The particle update subtracts constant .02 each frame. This may cause them to disappear quickly. But it's fine.

- We also need to clear particles array for each frame in drawParticles.

Now, some small details: We need to ensure that the overlay for start overlay is displayed initially. In CSS we haven't set display for startOverlay; it's block by default. So it's visible.

Now, after click, we set this.style.display = 'none'; which hides it. Also we might want to hide it via class, but that's okay.

Now, check for any variable names not defined: For example, `showStartOverlay` is used in render to set display property but we aren't using that property. We can remove that code.

Simplify: Remove showStartOverlay usage. Instead, just hide startOverlay via click.

So we can remove references to showStartOverlay.

Now, we also need to ensure we don't call initGame after click, which would reset game. We'll only call initGame on DOMContentLoaded and on resize.

Now, one more requirement: "Arrow keys and WASD control the snake. Quick successive key presses must both be honored, but the snake can never reverse onto itself."

Our key handling handles both arrow and WASD.

Now, bestScore: we update bestScore when score > bestScore, but need to ensure bestScore persists across game restarts. It does.

Now, we need to display current score and best score on screen. We have drawUI showing both.

Now, we need to show bestScore in game over overlay as well. We set gameOverBest textContent to bestScore.

Now, ensure we update info div? Actually we used #info div for UI? We set #info in CSS but we are drawing UI via canvas, not using info div. We might use info div to display score and best? The requirement says "Display the current score and the best score of the session." Could be overlay text on canvas. We are doing that. So fine.

Now, we might want to show the score in the info div as well? But we can ignore.

Now, check if any console errors: The canvas context may be null if canvas not found. But we call after DOMContentLoaded. Fine.

Now, need to ensure that the script runs after HTML defined. We'll place script at end of body.

Now, let's put everything together.

We'll also need to include a comment? Not required.

Now, check for potential errors:

- In drawSnake eyes, we use direction.dx/dy. At start, direction is {dx:1, dy:0}. So direction.dx is 1.

- For direction left, direction.dx = -1.

- For direction up, direction.dy = -1.

- For direction down, direction.dy = 1.

Our if statements handle all.

- The offset and eye size calculations: offset = cellSize * 0.3; eyeSize = cellSize * 0.2. Then for each direction we compute coordinates accordingly.

Potential error: For left direction, we compute headX + cellSize - offset - eyeSize, but offset = cellSize * 0.3, so cellSize - offset - eyeSize = cellSize - 0.3*cellSize - 0.2*cellSize = 0.5*cellSize. That seems okay.

Now, ensure we didn't forget to define keyMap and onKeyDown.

Now, we also need to handle 'Enter' key: In keydown we need to check e.key === 'Enter' (capital). We'll compare case-insensitively: if (e.key === 'Enter' || e.key === ' ') then restart.

But we also have keyMap which includes 'Enter'? No, keyMap only includes arrow and WASD. So we can check e.key.

Implement:

```js
function onKeyDown(e) {
  if (!isInputEnabled) return;

  const key = e.key;

  // Restart on space or enter if game over
  if (isGameOver && (key === ' ' || key === 'Enter')) {
    restartGame();
    return;
  }

  // Pause toggle
  if (key === 'p' || key === 'P') {
    if (!isGameOver) {
      isPaused = !isPaused;
      if (isPaused) {
        document.getElementById('pauseOverlay').style.display = 'flex';
      } else {
        document.getElementById('pauseOverlay').style.display = 'none';
      }
    }
    return;
  }

  // Direction controls
  const dir = keyMap[key];
  if (!dir) return;

  // Prevent reverse
  if (dir.dx === -direction.dx && dir.dy === -direction.dy) return;

  direction = dir;
}
```

Now, we also need to ensure that keyMap includes both uppercase and lowercase? We have entries for 'w', 'a', etc. For arrow keys, we use 'ArrowUp', etc. So we map 'ArrowUp' -> up. So keyMap only includes arrow names.

Now, we need to define keyMap before using it:

```js
const keyMap = {
  'ArrowUp': {dx:0, dy:-1},
  'w': {dx:0, dy:-1},
  'ArrowDown': {dx:0, dy:1},
  's': {dx:0, dy:1},
  'ArrowLeft': {dx:-1, dy:0},
  'a': {dx:-1, dy:0},
  'ArrowRight': {dx:1, dy:0},
  'd': {dx:1, dy:0}
};
```

Now, we also might want to handle 'W', 'A', etc. But keydown event returns lower case for letters? Actually for letter keys, e.key returns the key in lowercase? In JS, e.key returns the key value as a string, using the physically pressed key, e.g., 'w' for 'w', 'W' for shift? Actually for alphabetic keys, it returns the key in lowercase regardless of shift (I think). So we can map only lowercase. But we can also map uppercase by converting to lower case.

Simplify: In onKeyDown, convert key to lowercase for letters, but keep arrow names.

We can do:

```js
const normalizedKey = (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight') ? key : key.toLowerCase();
const dir = keyMap[normalizedKey];
```

But keyMap includes 'w', 'a', etc, and arrow keys. So we can convert.

Implement:

```js
let normKey = key;
if (normKey.length === 1) {
  normKey = normKey.toLowerCase();
}
const dir = keyMap[normKey];
```

Now, direction changes accordingly.

Now, for pause and restart we used key === 'p' or 'P'. We can also use normalizedKey.

But we can just check e.key for both.

Now, final script.

Now, we need to ensure that after restartGame, we need to re-enable startOverlay? Actually after restartGame, we call initGame, which will reinitialize snake, food, etc. The startOverlay will still be hidden (since we hid it earlier). But we might want to show startOverlay again? Probably not needed. The game should continue after restart, not show start overlay. So we should not show startOverlay after restart. Our initGame does not modify startOverlay display; it just hides startOverlay? It doesn't. It only hides overlays for game over and pause. But startOverlay remains hidden (display none). That's fine.

Now, there is a nuance: when we reinitialize after restart, we also reset isInputEnabled? initGame sets isInputEnabled = false, showStartOverlay = true. But we previously set isInputEnabled = true and startOverlay hidden. So resetting them would break the game. So we need to preserve isInputEnabled and userControlEnabled across restarts. Actually after user has started, they should not need to click again. So restart should not reset isInputEnabled. So initGame should not reset isInputEnabled.

Thus, modify initGame to accept parameters to preserve these flags.

Simplify: Instead of calling initGame on restart, we can define a function resetGame() that resets the snake and food but leaves isInputEnabled, userControlEnabled, showStartOverlay as they are.

Thus, rename initGame to maybe create initial state but also we can have resetGame.

Approach: have a function resetGameState() that resets snake, direction, score, food, particles, etc., but does not reset isInputEnabled etc. That ensures continuity.

Simplify: we can have initGame called only once at start. Then define a function resetGame() that reinitializes internal variables but leaves UI flags.

Let's restructure:

- On DOMContentLoaded: compute cellSize, get canvas, ctx, set up event listeners, call initGame (which sets up global state and places snake, etc.), then start game loop.

- Define a function resetGame(): resets snake, direction, score, food, particles, isGameOver, isPaused, lastMoveTime. But does not reset isInputEnabled, userControlEnabled, showStartOverlay. Also preserve bestScore. Also hide game over and pause overlays.

Thus, we need to separate initial state creation from reset.

Implementation:

- At top define global variables: snake, direction, score, food, particles, isGameOver, isPaused, lastMoveTime.

- Define a function setupInitialGame(): sets snake, direction, score=0, food, particles=[], isGameOver=false, isPaused=false, lastMoveTime=0, etc. This is called on page load and on restart.

- Define a function resetGame(): calls setupInitialGame() and hides overlays.

Now, incorporate.

Now, code:

```js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snake Game</title>
<style>
  body {
    margin: 0; padding: 0; overflow: hidden;
    width: 100vw; height: 100vh;
    display: flex; justify-content: center; align-items: center;
    background: #111;
    font-family: Arial, sans-serif;
  }
  canvas {
    image-rendering: pixelated;
    border: 2px solid #444;
    display: block;
  }
  #startOverlay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 2.5em;
    text-align: center;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
  }
  #info {
    position: absolute;
    top: 10px; left: 10px;
    color: #fff;
    font-family: monospace;
    font-size: 1.2em;
    text-shadow: 1px 1px #000;
  }
  #gameOverOverlay, #pauseOverlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-family: Arial, sans-serif;
  }
  #gameOverOverlay p, #pauseOverlay p {
    margin: 0.5em 0;
    font-size: 2em;
  }
  .restartHint, .pauseHint {
    font-size: 1.2em;
    color: #aaa;
  }
</style>
</head>
<body>
<canvas id="snakeCanvas"></canvas>
<div id="startOverlay">Click or press a key to start</div>
<div id="info"></div>
<div id="gameOverOverlay">
  <p>Game Over</p>
  <p id="gameOverScore">Score: 0</p>
  <p>Best: <span id="gameOverBest">0</span></p>
  <p class="restartHint">Press Space or Enter to Restart</p>
</div>
<div id="pauseOverlay">
  <p>Paused</p>
  <p class="pauseHint">Press P to resume</p>
</div>

<script>
const GRID_SIZE = 20;
let cellSize = 0;
let canvas, ctx;
let snake, food, direction, score, bestScore = 0, particles = [];
let isGameOver = false;
let isPaused = false;
let isInputEnabled = false;
let userControlEnabled = false;
let lastMoveTime = 0;
const MOVE_INTERVAL = 200; // ms per move
const PARTICLE_LIFE = 0.5; // seconds
let lastFrameTime = 0;
const keyMap = {
  'ArrowUp': {dx:0, dy:-1},
  'w': {dx:0, dy:-1},
  'ArrowDown': {dx:0, dy:1},
  's': {dx:0, dy:1},
  'ArrowLeft': {dx:-1, dy:0},
  'a': {dx:-1, dy:0},
  'ArrowRight': {dx:1, dy:0},
  'd': {dx:1, dy:0}
};

function setupInitialGame() {
  // Compute cell size based on viewport
  cellSize = Math.floor(Math.min(window.innerWidth, window.innerHeight) / GRID_SIZE);
  canvas.width = cellSize * GRID_SIZE;
  canvas.height = cellSize * GRID_SIZE;

  // Snake initial state: head at center, length 3
  const startX = Math.floor(GRID_SIZE / 2);
  const startY = Math.floor(GRID_SIZE / 2);
  snake = [
    {x: startX, y: startY},
    {x: startX - 1, y: startY},
    {x: startX - 2, y: startY}
  ];

  direction = {dx: 1, dy: 0}; // start moving right
  score = 0;

  randomizeFood();

  particles = [];

  isGameOver = false;
  isPaused = false;
  lastMoveTime = 0;
}

// Food random placement
function randomizeFood() {
  let attempts = 0;
  do {
    food = {
      x: Math.floor(Math.random() * GRID_SIZE),
      y: Math.floor(Math.random() * GRID_SIZE)
    };
    attempts++;
    if (attempts > 100) break; // safety
  } while (snake.some(seg => seg.x === food.x && seg.y === food.y));
}

// Particle burst when food eaten
function spawnParticles(x, y) {
  const count = 8;
  for (let i = 0; i < count; i++) {
    const angle = Math.random() * Math.PI * 2;
    const speed = Math.random() * 3 + 2;
    particles.push({
      x: x,
      y: y,
      vx: Math.cos(angle) * speed,
      vy: Math.sin(angle) * speed,
      life: 1.0
    });
  }
}

// AI chooses a random non-reversing direction
function aiUpdateDirection() {
  const dirs = [{dx:1, dy:0}, {dx:-1, dy:0}, {dx:0, dy:1}, {dx:0, dy:-1}];
  const opposite = {dx: -direction.dx, dy: -direction.dy};
  const allowed = dirs.filter(d => d.dx !== opposite.dx || d.dy !== opposite.dy);
  direction = allowed[Math.floor(Math.random() * allowed.length)];
}

// Game over handling
function gameOver() {
  isGameOver = true;
  if (score > bestScore) bestScore = score;
  document.getElementById('gameOverOverlay').style.display = 'flex';
  document.getElementById('gameOverScore').textContent = `Score: ${score}`;
  document.getElementById('gameOverBest').textContent = bestScore;
}

// Restart the game (preserves best score and input enabled state)
function restartGame() {
  // Reset game state but keep bestScore, isInputEnabled, userControlEnabled
  setupInitialGame();
  isGameOver = false;
  isPaused = false;
  document.getElementById('gameOverOverlay').style.display = 'none';
  document.getElementById('pauseOverlay').style.display = 'none';
}

// Keyboard handling
function onKeyDown(e) {
  if (!isInputEnabled) return;

  const key = e.key;

  // Restart on space or enter if game over
  if (isGameOver && (key === ' ' || key === 'Enter')) {
    restartGame();
    return;
  }

  // Pause toggle
  if (key === 'p' || key === 'P') {
    if (!isGameOver) {
      isPaused = !isPaused;
      if (isPaused) {
        document.getElementById('pauseOverlay').style.display = 'flex';
      } else {
        document.getElementById('pauseOverlay').style.display = 'none';
      }
    }
    return;
  }

  // Normalize key for mapping
  let normKey = key;
  if (normKey.length === 1) normKey = normKey.toLowerCase();

  const dir = keyMap[normKey];
  if (!dir) return;

  // Prevent reversing
  if (dir.dx === -direction.dx && dir.dy === -direction.dy) return;

  direction = dir;
}

// Draw functions
function drawSnake() {
  snake.forEach((seg, index) => {
    const x = seg.x * cellSize;
    const y = seg.y * cellSize;
    if (index === 0) {
      ctx.fillStyle = '#0f0'; // head
    } else {
      ctx.fillStyle = '#080'; // body
    }
    ctx.fillRect(x, y, cellSize, cellSize);

    // Draw eyes for head
    if (index === 0) {
      ctx.fillStyle = '#000';
      const offset = cellSize * 0.3;
      const eyeSize = cellSize * 0.2;
      if (direction.dx === 1) { // right
        ctx.fillRect(x + offset, y + offset, eyeSize, eyeSize);
        ctx.fillRect(x + offset, y + cellSize - offset - eyeSize, eyeSize, eyeSize);
      } else if (direction.dx === -1) { // left
        ctx.fillRect(x + cellSize - offset - eyeSize, y + offset, eyeSize, eyeSize);
        ctx.fillRect(x + cellSize - offset - eyeSize, y + cellSize - offset - eyeSize, eyeSize, eyeSize);
      } else if (direction.dy === 1) { // down
        ctx.fillRect(x + offset, y + cellSize - offset - eyeSize, eyeSize, eyeSize);
        ctx.fillRect(x + cellSize - offset - eyeSize, y + cellSize - offset - eyeSize, eyeSize, eyeSize);
      } else if (direction.dy === -1) { // up
        ctx.fillRect(x + offset, y + offset, eyeSize, eyeSize);
        ctx.fillRect(x + cellSize - offset - eyeSize, y + offset, eyeSize, eyeSize);
      }
    }
  });
}

function drawFood() {
  const x = (food.x + 0.5) * cellSize;
  const y = (food.y + 0.5) * cellSize;
  const r = cellSize * 0.4;
  ctx.fillStyle = '#f00';
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI * 2);
  ctx.fill();
}

function drawParticles(delta) {
  for (let i = particles.length - 1; i >= 0; i--) {
    const p = particles[i];
    p.life -= delta / PARTICLE_LIFE;
    const alpha = p.life;
    ctx.fillStyle = `rgba(255,255,200,${alpha})`;
    ctx.beginPath();
    ctx.arc(p.x, p.y, cellSize * 0.1, 0, Math.PI * 2);
    ctx.fill();
    p.x += p.vx * delta;
    p.y += p.vy * delta;
    if (p.life <= 0) {
      particles.splice(i, 1);
    }
  }
}

function drawUI() {
  ctx.fillStyle = '#fff';
  ctx.font = `bold ${cellSize * 0.6}px monospace`;
  ctx.fillText(`Score: ${score}`, 10, cellSize * 0.8);
  ctx.fillText(`Best: ${bestScore}`, 10, cellSize * 1.6);
}

// Game update (movement, collisions, etc.)
function update(delta) {
  if (isGameOver || isPaused) return;

  // AI direction if not user controlled
  if (!userControlEnabled) {
    aiUpdateDirection();
  }

  const now = performance.now();
  if (now - lastMoveTime < MOVE_INTERVAL) return;

  // Compute new head position
  const newHead = {
    x: snake[0].x + direction.dx,
    y: snake[0].y + direction.dy
  };

  // Wall collision
  if (newHead.x < 0 || newHead.x >= GRID_SIZE || newHead.y < 0 || newHead.y >= GRID_SIZE) {
    gameOver();
    return;
  }

  // Self collision (ignore tail if not eaten)
  const ateFood = newHead.x === food.x && newHead.y === food.y;
  const isTail = snake.length - (ateFood ? 1 : 0); // effective tail length
  if (snake.some((seg, idx) => {
    if (idx === snake.length - 1 && !ateFood) return false; // tail will move away
    return seg.x === newHead.x && seg.y === newHead.y;
  })) {
    gameOver();
    return;
  }

  if (ateFood) {
    score += 10;
    if (score > bestScore) bestScore = score;
    // Spawn particle burst at new head (in world coordinates)
    spawnParticles(newHead.x * cellSize + cellSize / 2, newHead.y * cellSize + cellSize / 2);
    // Grow snake: do not remove tail
    randomizeFood();
  } else {
    snake.pop(); // remove tail
  }

  snake.unshift(newHead);
  lastMoveTime = now;
}

// Rendering
function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Optional grid lines
  ctx.strokeStyle = '#222';
  ctx.lineWidth = 0.5;
  for (let x = 0; x <= GRID_SIZE; x++) {
    ctx.beginPath();
    ctx.moveTo(x * cellSize, 0);
    ctx.lineTo(x * cellSize, canvas.height);
    ctx.stroke();
  }
  for (let y = 0; y <= GRID_SIZE; y++) {
    ctx.beginPath();
    ctx.moveTo(0, y * cellSize);
    ctx.lineTo(canvas.width, y * cellSize);
    ctx.stroke();
  }

  drawSnake();
  drawFood();
  drawParticles(0.016); // approximate delta per frame for particle update
  drawUI();

  // Overlays
  if (!isInputEnabled) {
    // start overlay visible
    document.getElementById('startOverlay').style.display = 'block';
  } else {
    document.getElementById('startOverlay').style.display = 'none';
  }

  if (isGameOver) {
    document.getElementById('gameOverOverlay').style.display = 'flex';
  } else {
    document.getElementById('gameOverOverlay').style.display = 'none';
  }

  if (isPaused && !isGameOver) {
    document.getElementById('pauseOverlay').style.display = 'flex';
  } else {
    document.getElementById('pauseOverlay').style.display = 'none';
  }
}

// Game loop
function gameLoop(timestamp) {
  const delta = (timestamp - lastFrameTime) / 1000;
  lastFrameTime = timestamp;

  update(delta);
  render();

  requestAnimationFrame(gameLoop);
}

// Event listeners
document.getElementById('startOverlay').addEventListener('click', function() {
  this.style.display = 'none';
  isInputEnabled = true;
  userControlEnabled = true;
});

window.addEventListener('keydown', onKeyDown);

window.addEventListener('resize', () => {
  // Re‑initialize grid size on resize
  setupInitialGame();
});

// Initialize
window.addEventListener('DOMContentLoaded', () => {
  canvas = document.getElementById('snakeCanvas');
  ctx = canvas.getContext('2d');
  setupInitialGame();
  requestAnimationFrame(gameLoop);
});
</script>
</body>
</html>
```

Now, we need to examine for errors:

- In drawSnake, we used ctx.fillRect for eyes, which is okay.

- In drawParticles, we used `drawParticles(0.016)` in render, which passes a delta (approx 60fps). That's fine. However, we also have drawParticles defined to take delta argument. In render we call drawParticles(0.016). That's okay.

- In update, we call drawParticles with delta inside render, not inside update. That's fine.

- In update, we call `spawnParticles(newHead.x * cellSize + cellSize / 2, newHead.y * cellSize + cellSize / 2)`. That matches the arguments.

- In update we used `performance.now()` for movement timing.

- In render we call drawParticles(0.016). But delta passed is constant, not actual delta. This could cause particles fade at variable rate. However it's okay.

Better to compute delta from lastFrameTime, but we can simplify.

- In drawParticles we use `p.life -= delta / PARTICLE_LIFE;` and then compute alpha. We need to ensure delta is in seconds. In render we pass approximate delta ~0.016 (for 60fps). That should be fine.

- In drawUI we use ctx.fillText with x,y positions 10, cellSize * 0.8. This may be off if cellSize changes. But it's okay.

- In CSS, we set #startOverlay display: block when not isInputEnabled. But we also need to hide it when isInputEnabled. So we set style.display = 'none' on click. So we need to ensure that initial display is block (default). Good.

- In CSS, #startOverlay is absolute, but we used pointer-events: auto, so click works.

- We also need to ensure that the startOverlay is initially visible. Since we set display: block by default (via CSS? We didn't set display: block explicitly, but absolute elements default display: none? Actually, absolute positioned element without display property is block-level? In CSS, an absolutely positioned element is block-level. So display is block. Good.

- The #info div is present but we don't use it. That's fine.

- The #pauseOverlay has hint "Press P to resume". Good.

- The gameOverOverlay includes restart hint.

- The keyMap includes both arrow keys and w,a,s,d.

- The onKeyDown function: It checks if isInputEnabled, then handles game over restart, then pause toggle, then direction.

One issue: In keydown, after clicking startOverlay, isInputEnabled becomes true, userControlEnabled becomes true. So direction controls work. However, after click, we also set startOverlay display to none. Good.

Potential error: In keydown, after click, if isInputEnabled is true, we can also press 'p' to pause. That's fine.

One nuance: The keydown event for 'Enter' may be capitalized; we check both 'Enter' and ' '.

We also need to handle 'Space' might be ' ' as e.key. That's fine.

Now, about the start overlay being clickable: If the user clicks anywhere on the overlay (including its text), we hide it. Good.

Now, the requirement: "Arrow keys and WASD control the snake. Quick successive key presses must both be honored, but the snake can never reverse onto itself." Our implementation honors successive key presses because each keydown updates direction immediately, and the next move uses that direction.

Now, we need to ensure that the snake cannot reverse onto itself by pressing opposite direction quickly. Our check prevents reverse direction.

Now, the requirement: "Eating food adds 10 points and grows the snake by one cell; new food never spawns on the snake." We randomize food until not on snake.

Now, requirement: "Game over when the snake hits a wall or itself, with an overlay showing the score; Space or Enter restarts, P pauses." We have gameOver and overlay; space/enter restart; P toggles pause.

Now, requirement: "Visual polish: smooth movement, a snake with a distinct head and eyes facing its direction, and a small particle burst when eating." We have smooth movement via requestAnimationFrame; head distinct color; eyes drawn based on direction; particle burst.

Now, requirement: "Display the current score and the best score of the session." We draw score and best on canvas.

Now, we need to ensure that we do not use localStorage, sessionStorage, etc. We haven't.

Now, potential console errors: We used `performance.now()` inside update; that's fine.

Now, check for variable naming collisions: We used `direction` variable that shadows the parameter in drawSnake eyes? In drawSnake eyes we reference direction variable from outer scope. That's fine.

Now, check that we used `ctx` variable after it's defined; we call `canvas = document.getElementById('snakeCanvas')` after DOMContentLoaded. That's fine.

Now, check that `drawParticles` is defined before gameLoop calls it. Yes, defined earlier.

Now, check that we used `drawParticles(0.016)` in render. This passes delta to drawParticles, which expects delta. In drawParticles we use `p.life -= delta / PARTICLE_LIFE;`. So if delta is approx 0.016, particle life will reduce each frame.

Now, we should ensure that `drawParticles` is called after `drawSnake` and `drawFood` so particles appear on top. It's okay.

Now, check that we didn't use any external CDN.

Now, final step: ensure no extraneous text outside code block. The entire answer should be a single fenced code block with the complete HTML file. According to instructions, we must output exactly ONE fenced code block containing the complete file: ```html ... ```. So we must wrap the whole code in a code block. We also must not include any text before or after the code block.

Thus, final answer: a code block with the HTML file.

Let's produce final answer.