Memory Card Game

Improved prompt:

Design and implement a visually engaging memory matching card game using HTML5, CSS3, and JavaScript. The game should feature:

1. Card Design: Create 12 unique card designs with visually distinct front faces and matching back faces. Ensure ample color contrast and clean typography for accessibility.

2. Flip Animations: Implement smooth CSS-based flipping animations when cards are turned over. Use transitions for a polished user experience.

3. Difficulty Levels: Offer three difficulty levels:

   • Easy: 4x4 grid with 8 pairs of cards
   • Medium: 6x6 grid with 18 pairs of cards
   • Hard: 8x8 grid with 32 pairs of cards
     Each level should have a unique set of card designs.

4. Scoring Mechanics: Add a move counter that increments with each card flip and a timer that starts when the first card is turned over. Provide visual feedback for both elements.

5. Audio Effects: Include sound effects for the following actions:

   • A soft "click" or "swipe" sound when a card is flipped.
   • A distinctive "match found" sound when two matching cards are revealed.
   • A "game over" sound when the player fails to find all matches within the time limit.
   • A "theme change" sound when the user switches between card themes.

6. Leaderboard: Implement a local leaderboard that stores the top 10 high scores for each difficulty level. Use Web Storage for persistent data storage. Display the leaderboard with player names and scores in descending order.

7. Theme Selection: Allow the user to choose between three different card themes, each with its own set of designs and color schemes. Update the game display immediately upon theme selection.

8. Multiplayer Mode: Add a two-player hotseat mode where players take turns finding matches on the same device. Implement a clear visual indication of whose turn it is.

9. Responsive Design: Ensure the game layout adapts seamlessly to different screen sizes and aspect ratios on both desktop and mobile browsers. Use CSS media queries to adjust grid sizes and font sizes.

10. Accessibility: Add keyboard navigation support so users can play the game using only their keyboard:

• Use the arrow keys to move focus between cards.
• Press the spacebar or enter key to flip the focused card.
• Implement tab navigation for menu items and leaderboard.

11. Progressive Difficulty: For the "Hard" difficulty level, introduce a progressive difficulty increase after every 10 successful matches. Reduce the time limit by 10 seconds and increase the number of card pairs by 2 for each subsequent level.

12. Performance Optimization: Optimize the code for smooth performance on a wide range of devices. Use lazy loading techniques to defer non-critical resource loading. Minimize repainting by using requestAnimationFrame for animations.

Please provide a step-by-step implementation plan, including the main JavaScript objects, functions, and event handlers needed to create a modular and maintainable game.