Create a fully functional, highly engaging gamified habit tracker web application named "Pixel Quest Habit" using React, Tailwind CSS, and Lucide React icons.
Visual & Theme Requirements:
- Aesthetic: Retro 8-bit / Pixel Art style. Dark mode background (
#121214) with vibrant neon/retro accent colors (e.g., Pixel Green, Retro Purple, Gold).
- Font: Use the Google Font 'Press Start 2P' or a similar retro monospace pixel font for titles and badges.
- Responsiveness: Mobile-first layout with smooth transitions and clean spacing.
Core Mechanics & Features:
- Gamified Avatar & Progress Header:
- Display a pixel avatar/pet at the top (can use SVG shapes, pixel emojis, or css-rendered pixel blocks).
- Show User Level, XP Bar (Progress bar to next level), and Health/HP Bar (starts at 100%).
- Show a "Streak Counter" (Flame icon) for consecutive days active.
- Level Up Logic: Every habit completed grants 15 XP. Reaching 100 XP levels up the avatar and resets the XP bar.
- Habit Management:
- Add new habits (with custom title, category tags like 'Health', 'Learning', 'Fitness', and optional icon/emoji).
- Mark habits as complete for today. Completing a habit triggers a visual particle animation/confetti and increases XP + Streak.
- Delete or edit existing habits.
- Show a daily completion progress percentage (e.g., "3 of 5 completed today").
- Unlocks & Rewards Tab/Section:
- A dedicated area showing locked/unlocked pixel badges or character skins based on Level and Streak milestones.
- Data Persistence & Audio:
- Save all habits, XP, level, and streaks in
localStorage so data persists on refresh.
- Include a toggle for retro sound effects (using Web Audio API for simple 8-bit chiptune bleeps on checkmark and level-up).
Provide a complete, production-ready, clean single-file component code that includes all UI elements, state
management, and animations.