How to Build a Card Game with Lovable

Build a "War" card game (player vs computer) with these features:

1. DECK: Use a standard 52-card deck with 4 suits (Hearts, Diamonds, Clubs, Spades) and 13 values (2-10, Jack, Queen, King, Ace). Ace is highest. Shuffle the deck and split it evenly — 26 cards to the player, 26 to the computer.

2. GAMEPLAY: The player clicks a "Draw Card" button to play a round. Both the player and computer reveal their top card simultaneously. The higher card wins — the winner takes both cards and adds them to the bottom of their deck. Display which card each side played.

3. WAR: When both cards have the same value, trigger "War!" — each side places 3 cards face-down and draws a 4th face-up card. The higher 4th card wins all 10 cards. If there's another tie during War, repeat the War process. If a player doesn't have enough cards for War, they lose.

4. WIN CONDITION: The game ends when one player has all 52 cards (they win) or runs out of cards (they lose). Show a victory or defeat screen with total rounds played.

5. CARD DISPLAY: Show cards as styled rectangles (rounded corners, white background, colored suit symbols). Hearts and Diamonds in red, Clubs and Spades in black. Show the card value and suit symbol in the top-left and bottom-right corners. The card back should be a solid dark blue with a diamond pattern.

6. LAYOUT: Player's card area at the bottom, computer's card area at the top, a battle zone in the middle where cards are compared. Show each player's remaining card count as a deck pile with the count displayed.

7. VISUAL STYLE: Dark green felt background (like a card table). Cards should have a slight drop shadow. Use a clean, casino-inspired aesthetic with gold accents for text and borders.

8. ANIMATIONS: Cards should flip from face-down to face-up with a CSS 3D flip animation. The winning card should glow briefly. Cards sliding to the winner should animate smoothly.

9. CONTROLS: Single "Draw Card" button centered below the battle zone. Disable the button during animations. Show "Play Again" button on the win/lose screen.

Improve the card design:
- Use proper Unicode suit symbols: ♥ ♦ ♣ ♠ displayed prominently on each card
- Show the card value in both top-left and bottom-right corners (bottom-right rotated 180°)
- For face cards (Jack, Queen, King), show the letter (J, Q, K) in a larger font with a decorative border
- For Aces, show a large centered suit symbol
- Add a subtle linen texture to the card face background
- Make the card back design more detailed: a repeating geometric pattern in navy blue and gold
- Cards should be sized proportionally (2.5:3.5 ratio) and large enough to read easily

Add round feedback:
- After each draw, display a large text announcement in the center: "You Win!" (green), "You Lose!" (red), or "WAR!" (gold, with a dramatic scaling animation)
- Add a round counter showing "Round 14 of ?"
- Show a brief history log of the last 5 rounds at the bottom: "Round 12: Your K♠ beat their 7♥"
- Add a running win/loss/war counter: "Wins: 8 | Losses: 5 | Wars: 2"
- When a War is triggered, show all face-down cards as card backs in a row before revealing the final card
- Add a subtle screen flash (green for win, red for loss) lasting 200ms on each round result

Make the War sequence more dramatic:
- When War triggers, show a large "⚔️ WAR! ⚔️" banner that shakes and pulses
- Deal the 3 face-down cards one at a time with a 300ms delay between each, stacking them in the center
- Add a brief drumroll-style buildup (pulsing border around the battle zone) before the 4th card is revealed
- The 4th card should flip with a slower, more dramatic flip animation
- If you win the War, all captured cards should fan out briefly before sliding to your deck with a satisfying sweep animation
- Show how many cards were at stake: "10 cards at stake!" during War
- If War triggers during War (double War), show "DOUBLE WAR!!" with an even bigger animation

Add sound effects using the Web Audio API (no audio files needed):
- Card flip: short "snap" sound (white noise burst, 30ms)
- Win round: bright ascending chime (400Hz to 800Hz, 100ms)
- Lose round: soft descending tone (400Hz to 200Hz, 100ms)
- War triggered: dramatic low boom (80Hz, 200ms) followed by a rising sweep
- Game won: triumphant three-note fanfare (C-E-G, 150ms each)
- Game lost: descending three-note sequence (G-E-C, 200ms each)
- Add a mute/unmute toggle button in the top-right corner
- Save mute preference to localStorage

Make the card game fully responsive for mobile:
- On screens under 768px, scale cards down proportionally to fit the screen width
- Replace the "Draw Card" button with a "Tap anywhere to draw" mechanic on mobile
- Stack the layout vertically: opponent's deck and card on top, battle zone in the middle, your deck and card on the bottom
- Make the round history a collapsible section on mobile to save space
- Ensure card text (values and suits) remains readable at the smaller card size
- Add a subtle haptic-style visual pulse on tap (since we can't do real haptics)
- The win/loss banner should be sized appropriately for mobile screens

Add three difficulty modes that change the computer's behavior: "Fair" (pure random, default), "Lucky" (the computer wins ties 60% of the time during War), and "Unlucky" (the player wins ties 70% of the time during War — easy mode for kids). Show the selected mode on screen.

Add a speed round timer option. When enabled, the player has 3 seconds to click "Draw Card" or their turn is automatically played. Show a shrinking timer bar above the draw button. Track the fastest complete game time and display it as a record.

Add card dealing animations at the start of each game: cards fly from a central deck to each player's side one at a time with a 50ms delay between each card. Add a shuffle animation before dealing (the deck visually riffles 3 times). When the game ends, the winning pile fans out across the screen in a cascade.

Track these statistics in localStorage: games played, games won, games lost, win percentage, longest win streak, most cards won in a single War, fastest game (by rounds), and total Wars triggered. Show a "Statistics" panel accessible from a button on the title screen.

Add a game mode selector with two options: "Classic War" (current game) and "Speed War" (both cards auto-play every 1.5 seconds, no clicking needed — pure spectator mode with a fast-forward button for 3x speed). Add a "Casino War" variant where before each round, the player can bet 1-5 bonus points on whether they'll win.