Build a Memory Card Game with AI

Build a single-page memory card matching game as a static HTML/CSS/JS site. Use a dark theme with background #0f0f17, card surfaces #1a1a2a, and accent color #a855f7 (purple). Center the game board on the page with a header area for controls and stats. The game starts with a menu screen where the player selects a theme and difficulty level. Provide three themes using emoji: Animals (dog, cat, lion, elephant, penguin, dolphin, butterfly, owl, fox, rabbit, turtle, octopus), Flags (US, UK, Japan, Brazil, France, Germany, Italy, Spain, Canada, Australia, India, Mexico), and Food (pizza, burger, sushi, taco, ice cream, donut, cake, cookie, apple, banana, strawberry, watermelon). Each theme needs at least 12 unique emoji so that the 6x6 grid (18 pairs) works. Difficulty levels change the grid size: Easy is 4x4 (8 pairs), Medium is 4x5 (10 pairs), and Hard is 6x6 (18 pairs). Render the grid using CSS Grid with equal-sized square cards that have rounded corners (8px). Each card has a front face (showing a question mark or decorative pattern) and a back face (showing the emoji). Implement the flip animation using CSS 3D transforms with perspective (1000px) and rotateY, transitioning over 0.4 seconds with an ease-in-out curve. The card front and back should use backface-visibility: hidden. When a card is face-up, apply a subtle glow effect matching the accent color. Game logic: clicking a card flips it to reveal the emoji. When two cards are face-up, compare them after a 0.6-second delay. If they match, keep both face-up and add a brief scale-up pulse animation to celebrate. If they don't match, flip both back. Prevent clicking a third card while two are being compared, and prevent clicking an already-matched card or the same card twice. Display a move counter (each pair flip counts as one move), a running timer that starts on the first card click (format MM:SS), and the number of pairs found out of total. When all pairs are matched, show a win celebration: a modal overlay with confetti animation (CSS keyframes with colored dots falling), final stats (time, moves, a star rating based on moves — 3 stars if under 1.5x pairs, 2 stars if under 2.5x, 1 star otherwise), and buttons for "Play Again" and "Change Theme." Implement high score tracking in localStorage: store the top 5 scores per difficulty level, sorted by fewest moves (time as tiebreaker). Show a "High Scores" button on the menu that opens a modal with a tab for each difficulty. Highlight if the player just set a new record. Make it fully responsive: on mobile, cards should be smaller (min 60px) and the grid should fit the viewport width with appropriate gaps (6px). Add touch support — tapping a card flips it. Include a restart button (circular arrow icon) in the header that resets the current game. Add a mute toggle for optional click/match/win sound effects using the Web Audio API (short synthesized tones, no audio files needed). Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].