How to Build Tic Tac Toe with Bolt

Build a Tic Tac Toe game with the following specifications:

Board:
- 3x3 grid centered on the page
- Each cell is a large clickable square (at least 120px)
- Grid lines are thick and dark gray
- Clean white background inside each cell

Gameplay:
- Player is X and always goes first
- AI opponent plays as O
- Player clicks an empty cell to place their X
- AI responds automatically after a 400ms delay
- Implement the minimax algorithm so the AI plays optimally and never loses
- Only empty cells should be clickable

Win detection:
- Check for 3 in a row horizontally, vertically, and diagonally after every move
- When someone wins, draw a line through the winning 3 cells (a colored line that crosses through them)
- X wins: green line, O wins: red line
- Show a message above the board: "You Win!", "AI Wins!", or "It's a Draw!"
- Detect draws when all 9 cells are filled with no winner

Score tracking:
- Show a scoreboard above the board: "You: [X] — AI: [O] — Draws: [D]"
- Scores persist across rounds until the page is refreshed

Controls:
- "Play Again" button appears after each game ends
- "Reset Scores" button to clear the scoreboard
- Style buttons with rounded corners and a blue background

Styling:
- Modern, minimal design
- X marks in blue, O marks in red
- Use a large bold font for X and O (font-size: 64px)
- Centered layout with max-width of 450px
- Responsive for mobile screens

Add a difficulty selector with three options displayed as buttons above the board: Easy, Medium, and Hard.

- Easy: The AI picks a random empty cell 70% of the time, and uses minimax 30% of the time
- Medium: The AI uses minimax 70% of the time and picks randomly 30% of the time
- Hard: The AI always uses minimax (current behavior, unbeatable)

Highlight the currently selected difficulty button. Default to Medium. Reset the board when difficulty is changed but keep the scores.

Add animations to the game:
- When X is placed, animate it drawing in with a stroke animation (the lines of the X draw from center outward, 300ms)
- When O is placed, animate it drawing in as a circle stroke (draws clockwise, 300ms)
- When a game ends in a win, animate the winning line drawing across the three cells (400ms)
- When "Play Again" is clicked, fade out all marks simultaneously (200ms) before clearing the board
- Add a subtle scale-up effect on cells when hovered (1.05 scale, only on empty cells)
- Add a slight bounce animation to the result message when it appears

Add a game history section below the board. After each game, record:
- Game number (1, 2, 3, etc.)
- Result (Win, Loss, or Draw)
- Difficulty level
- Number of moves played

Display as a compact list showing the last 10 games. Each entry should be color-coded: green for wins, red for losses, gray for draws. Add a "Clear History" button at the bottom. Store history in localStorage so it persists on refresh.

Add sound effects using the Web Audio API (generate programmatically, no audio files):
- Place X: crisp tap sound (short sine wave at 600Hz, 60ms)
- Place O: slightly deeper tap (sine wave at 400Hz, 60ms)
- Player wins: happy ascending chime (C5, E5, G5 played quickly)
- AI wins: descending tone (G4, E4, C4 played quickly)
- Draw: single neutral tone (A4, 200ms)
- Invalid click (on occupied cell): very short buzz (100Hz, 30ms)
- Add a mute toggle button (speaker icon) in the top-right corner

Optimize the game for mobile devices:
- On screens under 500px wide, make the grid cells fill the available width (90vw max, cells as squares)
- Increase the touch target size — each cell should be at least 90px on mobile
- Add 16px padding around the game container
- Make sure the scoreboard and buttons stack vertically on small screens
- Prevent double-tap zoom on iOS by adding touch-action: manipulation to the game area
- Test that tapping cells works reliably (use touchstart events alongside click events)

Add a "2 Player" mode toggle next to the difficulty buttons. In 2 Player mode, two humans take turns clicking cells (no AI). Show "Player 1 (X)" and "Player 2 (O)" labels. Track scores separately for the 2 Player mode. Switch the turn indicator above the board to show whose turn it is.

Add a move timer. Each player has 10 seconds to make a move. Show a countdown timer above the board that resets after each move. If time runs out, that player forfeits the round. Display the timer as a circular progress ring that depletes. In AI mode, only apply the timer to the human player.

Add a "5x5 Mode" option. In this mode, the board is 5x5 and players need 4 in a row to win instead of 3. Adjust the AI to work on the larger board (use minimax with depth limit of 4 for performance). Show which mode is active. Adjust cell sizes so the larger board fits on screen.

Track a win streak counter — how many games in a row the player has won. Show the current streak and the best-ever streak above the scoreboard. Save the best streak to localStorage. When the player beats their best streak, show a "New Record!" message with a brief gold flash animation.

Add a theme picker with 3 options: Classic (current black and white), Neon (dark background with glowing cyan X and magenta O), and Chalk (textured beige background with hand-drawn looking marks). Each theme should change the grid lines, mark colors, and background. Save the selected theme to localStorage.