The user wants a Snake game built as a single-page web application. Based on the requirements, I need to implement:

1. Canvas for game rendering
2. Arrow key controls
3. Snake mechanics (a snake body that grows when eating food)
4. Food system
5. Score tracking
6. Game Over state
7. Restart functionality

This will be a complete HTML file containing all CSS and JavaScript inline, with no external dependencies.

I'll create a file named index.html with:
- Basic HTML structure
- Canvas element for the game
- Style for game aesthetics
- JavaScript implementing the Game class
- Game loop logic
- Collision detection
- Keyboard controls

Let me structure the code:

1. HTML boilerplate with canvas
2. CSS for styling
3. Game constants (grid size, tile size, etc.)
4. Game state variables
5. Setup function to initialize game
6. Game loop function
7. Drawing functions
8. Update logic
9. Collision detection
10. Keyboard event handlers
11. Game over and restart logic

The game mechanics:
- Snake moves in a direction continuously
- Arrow keys change direction (but can't reverse into itself)
- Food spawns randomly on grid
- Eating food increases score and snake length
- Collision with walls or self = game over
- Restart button to play again

I'll use a tile-based system for simplicity. Let me set grid size to 20x20 tiles, each tile being 20 pixels. The canvas will be 400x400 pixels.

For the snake, I'll use an array of positions, with the head at position [0].
Food will be a single position.
Direction will be stored as [dx, dy] pair.

This is a standard Snake implementation approach.

Perfect! I've created a fully playable Snake game with all the requested features:

## Features Implemented:

✅ **Playable Snake Game** - Complete game on HTML5 Canvas
✅ **Arrow Key Controls** - Responsive directional controls
✅ **Growing Tail** - Snake grows when eating food
✅ **Food System** - Red circular food spawns randomly
✅ **Score Tracking** - Score increases by 10 per food eaten
✅ **Game Over State** - Shows when hitting walls or self
✅ **Restart** - Button to restart after game over

## Technical Details:

**Game Mechanics:**
- 20x20 grid system (400x400px canvas)
- Snake starts with 3 segments
- Can't reverse direction (prevent self-collision)
- Speed increases every 50 points
- Food spawns only on empty cells

**Visual Design:**
- Green snake with glowing head
- Red circular food with glow effect
- Subtle grid lines for better visibility
- Retro monospace font styling
- Neon green color scheme

**Controls:**
- ↑↓←→ Arrow keys to change direction
- Click RESTART button or press it after game over

The game is fully self-contained in a single `index.html` file with inline CSS and JavaScript - no external dependencies, CDNs, or network requests needed.

You can open `index.html` in any modern web browser and start playing immediately!