How to Build a Puzzle Game with Lovable

Build a classic 15-puzzle (sliding tile puzzle) game.

Grid:
- 4x4 grid with tiles numbered 1-15 and one empty space
- Tiles are square with rounded corners, displayed in a centered container
- Each tile has a large, bold number in the center
- Tiles have a subtle shadow and a light blue background
- The empty space is clearly visible as a darker recessed area

Mechanics:
- Only tiles adjacent to the empty space can be clicked to slide
- Clicking a valid tile slides it smoothly into the empty space (200ms animation)
- Invalid clicks should do nothing (no error, just ignore)
- Tiles should only move horizontally or vertically, never diagonally

Game controls:
- "Shuffle" button that randomly shuffles the board with an animation (tiles move one at a time quickly)
- The shuffle must produce a solvable configuration
- "Reset" button that returns tiles to the solved state

Tracking:
- Move counter that increments with each valid slide
- Timer that starts counting up when the first tile is moved after a shuffle
- Both displayed above the grid in a clean header bar

Win condition:
- When tiles are arranged 1-15 in order (left to right, top to bottom), show a congratulations message
- Display the total moves and time taken
- Show a "Play Again" button that reshuffles the board

Styling:
- Clean, modern design with a white background
- Centered layout with max-width of 500px
- Use a sans-serif font (Inter or similar)
- Responsive — works on mobile screens

Add a difficulty selector above the game board with three options: Easy (3x3 grid, tiles 1-8), Medium (4x4 grid, tiles 1-15, current default), and Hard (5x5 grid, tiles 1-24). When the player selects a difficulty, regenerate the grid at that size and reset the move counter and timer. Style the selector as three buttons where the active one is highlighted in blue.

Add a toggle button labeled "Image Mode" above the grid. When activated:
- Replace numbered tiles with pieces of an image. Use a built-in gradient pattern as the default image (a colorful CSS gradient split into grid pieces so each tile shows a portion).
- Each tile displays its corresponding portion of the image using CSS background-position.
- The empty space should show a subtle outline of where its piece belongs.
- Add a "Show Preview" button that displays the complete image as a reference overlay.
- When switching back to "Number Mode", show the numbered tiles again.
- The toggle should preserve the current board state (don't reshuffle).

Improve the visual design:
- Add a smooth slide animation when tiles move (ease-out, 200ms)
- When the player wins, add a confetti animation that plays over the board (colorful falling particles for 3 seconds)
- Add a subtle hover effect on clickable tiles (slight scale up to 1.05 and brighter background)
- Tiles that cannot be moved should have a slightly dimmer appearance
- Add a subtle bounce animation to the move counter each time it increments
- Style the header area with a gradient background (light blue to light purple)
- Add rounded corners and a shadow to the overall game container

Add sound effects using the Web Audio API (generate sounds programmatically, no audio files):
- Tile slide: soft click sound (short sine wave at 800Hz, 50ms duration)
- Invalid click: subtle low thud (sine wave at 200Hz, 30ms)
- Puzzle solved: ascending victory melody (play notes C5, E5, G5, C6 in sequence, 150ms each)
- Shuffle start: rapid clicking sounds
- Add a mute toggle button (speaker icon) in the top-right corner

Add a best scores section below the game board. Track the best (lowest) move count and best (fastest) time for each difficulty level using localStorage. Display them in a small table:
- Columns: Difficulty, Best Moves, Best Time
- Rows: Easy, Medium, Hard
- Highlight a cell in green when the player beats their previous best
- Show "—" for difficulties not yet completed
- Add a "Clear Records" button at the bottom of the table

Add a "Hint" button that highlights the next tile the player should move to get closer to the solution. Highlight the suggested tile with a pulsing green border. Limit hints to 3 per game and show remaining hints on the button.

Add a "Time Attack" mode. The player has 60 seconds to solve the puzzle (90 seconds for 5x5). Show a countdown timer in red. If time runs out, show a "Time's Up!" message with how many tiles were in the correct position. Add a progress bar that depletes as time passes.

Add a shuffle animation where tiles visibly slide around the board one at a time rapidly (50ms each move, 100 random moves). Add a "solving" animation when the player wins where each tile briefly flashes gold in order from 1 to 15.

Save a history of the last 10 completed games to localStorage. Show a "History" tab below the board with a table listing: date, difficulty, moves, and time. Sort by most recent first.

Add an "Upload Image" button that lets the player upload their own photo for image mode. Use a file input to accept JPG or PNG, crop it to a square using a centered crop, then split it into grid tiles. Store the uploaded image in a data URL so it persists during the session.