Got it, let's build a Snake game in a single index.html file. First, I need to structure the HTML with a canvas element, then add CSS to style it nicely, then the JavaScript to handle the game logic.

First, the HTML structure: a container for the game, a score display, the canvas, and a restart button that shows up when game over. Then CSS to center everything, style the canvas, make it look clean. Then the JS:

First, set up the canvas context, define the grid size (like 20x20 cells, each 20px so canvas is 400x400). The snake starts as a few segments, moving right. Food is spawned randomly, not on the snake. Arrow keys to change direction, can't reverse immediately (like if moving right, can't go left directly). 

Game loop: every frame, move the snake head, check if it ate food (if so, don't remove the tail, increment score, spawn new food). If it hits the wall or itself, game over. Show the restart button, stop the loop. When restart is clicked, reset all variables, start the loop again.

Wait, let's outline the steps:

1. Create index.html with all parts. Start with the basic HTML5 boilerplate.
2. Add a <style> tag to style the page: center the game, style the score, canvas, game over overlay.
3. In the body, have a div that holds the score, canvas, and a hidden game-over message with restart button.
4. The JavaScript:
   - Get canvas and context, set its size.
   - Define grid: cell size 20, grid width/height 20 (so 400x400 canvas).
   - Snake variables: snake array (each element is {x, y}), direction, next direction (to prevent input lag issues).
   - Food position.
   - Score variable.
   - Game loop interval, game over flag.
   - Spawn food function: generates random x/y, checks it's not on any snake segment.
   - Reset game function: resets snake to starting position, direction right, score 0, spawn food, hide game over, start loop.
   - Keydown event listener for arrow keys: update direction only if it's not the opposite of current direction.
   - Game loop function: every 100ms, update the snake head, check collisions. If game over, stop loop, show game over. Otherwise, if food is eaten, grow, update score, spawn new food. Otherwise, remove the last tail segment. Redraw everything each frame.
   - Draw function: clear canvas, draw snake segments (green), draw food (red), draw score.

Let's put that all together. Make sure everything is self-contained, no external resources. Let's write the code now.

The Snake game is now fully implemented in the single index.html file. Let's verify that all requirements are met:
- Canvas-based gameplay
- Arrow key controls with direction locking (can't reverse)
- Growing tail when eating food
- Random food spawning
- Score tracking
- Game over state with restart functionality
- All code is self-contained in one file with no external resources
- Styled properly with a modern dark theme, clear game over screen, and controls hint.

The game starts automatically when the file is opened, uses a 20x20 grid (400x400 canvas), runs at 10FPS for smooth gameplay, and handles all collision detection for walls and self. Perfect, the task is complete.