How to Build a Word Game with Lovable

Build a word scramble game with the following features:

GAME MECHANICS:
- Display scrambled letters of a word in large, individual letter tiles
- Player types their guess in an input field below the tiles
- Submit guess with Enter key or a "Submit" button
- If correct, show a green "Correct!" message and advance to the next word after 1.5 seconds
- If wrong, shake the input field and show "Try again" in red
- Include a word bank of at least 50 common English words (4-8 letters)
- Shuffle the word order each game session

DIFFICULTY LEVELS:
- Start screen with three buttons: Easy (4-5 letter words, 30 seconds), Medium (5-6 letter words, 20 seconds), Hard (6-8 letter words, 15 seconds)
- Show selected difficulty in the top bar during gameplay

TIMER:
- Countdown timer displayed prominently above the word
- Timer bar that visually shrinks as time runs out
- Timer turns red in the last 5 seconds
- If time runs out, show the correct answer, mark it wrong, and advance after 2 seconds

HINTS:
- "Hint" button that reveals one random unrevealed letter in its correct position
- Maximum 2 hints per word
- Show remaining hints: "Hints: 2/2"
- Revealed letters should appear highlighted in the scrambled display

SCORING AND STREAKS:
- Track current streak (consecutive correct answers without hints or timeout)
- Show streak counter with a fire emoji when streak is 3+
- Track total score: +10 points per correct answer, +5 bonus for no hints used, +3 bonus for answering in under half the time
- After 10 words, show a results screen with total score, best streak, and accuracy percentage

UI DESIGN:
- Playful, colorful design with a gradient background (blue to purple)
- Letter tiles should be white rounded squares with bold letters, spaced apart
- Large, clear fonts throughout
- Responsive design that works on mobile and desktop
- Smooth animations for correct/wrong feedback

Replace the text input with interactive letter tiles. The scrambled letters are clickable tiles at the top. Clicking a tile moves it down to an "answer row" below. Clicking a tile in the answer row moves it back to the scrambled row. The player builds their answer by clicking tiles in order. Add a "Clear" button to reset the answer row. Add a "Shuffle" button to re-scramble the remaining tiles. Keep the Enter key shortcut to submit when all tiles are placed in the answer row.

Add these animations: when the answer is correct, the answer tiles should briefly turn green and do a wave animation (each tile bounces up sequentially). When wrong, tiles turn red and shake horizontally. When a hint is used, the revealed letter should pulse with a yellow glow. Add a smooth slide animation when tiles move between the scrambled row and answer row. The streak fire emoji should grow in size as the streak increases (small at 3, medium at 5, large at 10).

Add word categories to the game. Include these categories on the start screen: Animals, Food, Countries, Technology, and Random (mix of all). Each category should have at least 20 words. Show the current category name in the top bar. On the results screen, add a "Try Another Category" button alongside "Play Again." Highlight the category buttons with different colors: Animals (green), Food (orange), Countries (blue), Technology (purple), Random (gray).

Add sound effects using the Web Audio API (no external files needed). Play a satisfying click when placing a letter tile, a cheerful chime for correct answers, a dull buzz for wrong answers, a subtle whoosh for hints, a ticking sound in the last 5 seconds of the timer, and a celebration sound when the player gets a streak of 5 or more. Add a mute toggle (speaker icon) in the top right. Sounds should be muted by default.

Optimize for mobile screens under 768px: make letter tiles at least 48px square with 8px gaps for easy tapping, stack the timer above the scrambled letters vertically, increase the Hint and Shuffle buttons to full-width, move the streak and score display to a compact bar below the timer, and ensure no horizontal scrolling. Add touch feedback: tiles should briefly scale down when tapped. Test that the layout works in both portrait and landscape orientation.

Add three sub-difficulty options within each category: Common Words (4-5 letters, well-known), Uncommon Words (6-7 letters, less familiar), and Challenge Words (7-8 letters, difficult vocabulary). Show a word difficulty indicator during gameplay with 1-3 stars.

Add a "Speed Round" mode alongside the normal mode. In Speed Round, the player gets 60 seconds total (not per word) to solve as many words as possible. Words are shorter (4-5 letters) and there are no hints. Show words solved and a running timer. Display a final score at the end with words per minute.

Add a particle burst effect when the player answers correctly: small colorful dots explode from the answer tiles. For streaks of 5+, make the background gradient pulse briefly. Add a smooth counter animation for the score (numbers roll up instead of jumping). Add a confetti rain effect on the results screen if accuracy is above 80%.

Save the top 5 scores per difficulty level and category to localStorage. Show a "High Scores" button on the start screen that opens a table with rank, score, accuracy, and date. If the player sets a new high score, show a "New High Score!" banner on the results screen with their rank.

Add a "Daily Challenge" mode that uses the same 10 words for everyone each day (use the date as a seed for word selection). The player gets one attempt per day. Show a countdown to the next daily challenge. Track daily challenge streaks (consecutive days played) and display a calendar view of completed days.