The user wants me to build a playable Snake game as a single HTML file. Let me plan this out:

1. HTML structure with a canvas element
2. CSS for styling (in a <style> tag)
3. JavaScript for game logic (in a <script> tag)

Game features needed:
- Canvas-based rendering
- Arrow key controls
- Growing tail when eating food
- Food spawning randomly
- Score tracking
- Game over state (when hitting walls or self)
- Restart functionality

Let me write this as a single self-contained index.html file.

I've created a complete Snake game in a single HTML file. Let me verify it was created successfully.

I've created a complete Snake game in a single self-contained `index.html` file. The game includes:

**Features:**
- **Canvas-based rendering** with a 20x20 grid
- **Arrow key controls** (↑↓←→) with input buffering to prevent 180° turns
- **Growing tail** - snake grows by 1 segment each time it eats food
- **Food spawning** - randomly placed food that respawns when eaten (never on the snake)
- **Score tracking** - 10 points per food item, displayed at the top
- **Game over state** - triggers when hitting walls or the snake's own body
- **Restart functionality** - "Play Again" button to restart after game over

**Visual polish:**
- Gradient background with modern styling
- Glowing effects on snake head and food
- Gradient coloring from head to tail
- Snake eyes that follow the direction of movement
- Subtle grid pattern on the canvas
- Smooth game over overlay transition

**Game mechanics:**
- Snake starts with 3 segments moving right
- Food spawns as a glowing red circle
- Collision detection for walls and self
- Input queueing to prevent quick-reverse crashes

The game is fully self-contained with no external dependencies - just open `index.html` in a browser to play!