Upload the complete GuessWhat.jsx game. The logic is perfect and working. 

I need ONLY visual polish - do NOT change any game logic, state management, or data flow.

Visual upgrades needed:

1. **Hint Reveal Animation**
   - When user clicks hint button, animate hint text sliding in from right
   - Add particle effect (sparkles) around newly revealed hint
   - Use framer-motion with spring physics

2. **Correct Answer Celebration**
   - Trigger confetti burst using canvas-confetti
   - Animate score counter incrementing with easing
   - Show "+X Pearls" floating up and fading out
   - Play success sound effect

3. **Wrong Answer Feedback**
   - Shake the input field on wrong guess (vibration animation)
   - Flash red border briefly
   - Show encouraging message "Try again! Hint available"

4. **Streak Indicator Enhancement**
   - Add flame emoji 🔥 that grows bigger with higher streak
   - Pulsing glow effect for streaks >5
   - Streak break shows "broken chain" animation

5. **Loading States**
   - Skeleton loaders for idiom cards while fetching
   - Shimmer effect on pearl balance during sync
   - Smooth transitions between game states

Do NOT modify: game logic, scoring, state management, API calls, data structures.
Keep all existing functionality intact.

Optimize GuessWhat.jsx for mobile devices (320px - 428px width).

Changes needed:

1. **Touch-Friendly Targets**
   - Increase hint button size to min 48x48px
   - Add 12px spacing between interactive elements
   - Make guess input field larger on mobile (min-h-14)

2. **Typography Scaling**
   - Scale idiom text: clamp(1.25rem, 4vw, 2rem)
   - Hint text: clamp(0.875rem, 3vw, 1rem)
   - Ensure readability on small screens

3. **Layout Adjustments**
   - Stack hint buttons vertically on mobile (<640px)
   - Reduce padding: p-4 on mobile, p-6 on desktop
   - Collapse header logo to icon-only on <400px

4. **Performance**
   - Lazy load background images
   - Debounce input validation (300ms)
   - Optimize animations for 60fps on mobile

Test on: iPhone SE (375px), iPhone 14 Pro (393px), Samsung Galaxy S23 (412px).

Enhance the leaderboard display in GuessWhat.jsx.

Current: Basic table with names and scores.
Target: Engaging, competitive visual.

Add these elements:

1. **Rank Badges**
   - Top 3: Trophy icons (🥇🥈🥉) with glow effect
   - 4-10: Medal icons
   - User's row: Highlight with blue border + "You" badge

2. **Stat Cards**
   - Show: Score, Streak, Hints Used, Time
   - Mini progress bars for each stat
   - Color-coded: green (excellent), yellow (good), red (needs improvement)

3. **Animations**
   - Fade in each row sequentially (stagger 50ms)
   - Hover effect: lift + shadow on desktop
   - Pull to refresh on mobile

4. **Filters**
   - Tabs: All Time | This Week | Today
   - Difficulty filter: Easy, Medium, Hard
   - Search by username

Keep: Existing leaderboard API call and data structure.

Add audio feedback and accessibility features to GuessWhat.jsx.

1. **Sound Effects** (use WebAudioSounds class if available)
   - Hint reveal: soft "pop" sound
   - Correct guess: celebration chime
   - Wrong guess: gentle "bonk"
   - Streak milestone: triumph fanfare
   - Volume controls in settings menu

2. **Accessibility**
   - Add aria-labels to all interactive elements
   - Keyboard navigation: Tab, Enter, Escape
   - Screen reader announcements for score changes
   - High contrast mode option
   - Reduced motion mode (disable animations)

3. **Settings Panel**
   - Toggle: Sound ON/OFF
   - Toggle: Animations ON/OFF
   - Toggle: High Contrast Mode
   - Persist preferences in localStorage

Follow WCAG 2.1 AA standards.