Build a Trivia Quiz Game with AI

Build a single-page trivia quiz game as a static HTML/CSS/JS site. Use a dark theme with background #0f0f17, card surfaces #1a1a2a, and accent color #a855f7 (purple). The layout should be centered on the page with a max-width of 700px. Start with a category selection screen. Display five category cards in a grid: Science (atom emoji), History (scroll emoji), Geography (globe emoji), Pop Culture (star emoji), and Sports (trophy emoji). Each card should have the category name, emoji, and a subtitle showing total questions available. Hovering a card scales it slightly and adds a purple border glow. Clicking a category starts a 10-question round from that category. Each category must have at least 30 hardcoded questions (150+ total across all categories). Each question object has: question text, four answer options (shuffled each time), the correct answer index, and a difficulty rating (easy, medium, hard). Questions should be factual, interesting, and varied in difficulty. For each round, randomly select 10 questions from the chosen category without repeats. The question screen displays: a progress bar at the top showing question N of 10, the category name and emoji, a 30-second countdown timer (circular progress ring that depletes, turning red under 10 seconds), the question text in large font, and four answer buttons in a 2x2 grid. Answer buttons have letter prefixes (A, B, C, D) and change color on hover. When the player selects an answer, immediately highlight the correct answer in green and the wrong answer (if chosen) in red. Show a brief "Correct!" or "Wrong!" indicator with the right answer. Auto-advance to the next question after 1.5 seconds. If the timer runs out, mark it wrong and show the correct answer. Implement two lifelines, each usable once per round. Display them as buttons below the timer. "50/50" removes two incorrect answers (gray them out and disable clicking). "Skip" skips the current question without penalty (does not count as wrong, but no points awarded). Gray out each lifeline after use. Add a subtle animation when a lifeline is activated. Scoring: award 100 base points for a correct answer plus a time bonus (remaining seconds multiplied by 10). Display a running score counter in the header that animates upward when points are added. Track streak — consecutive correct answers — and show a streak multiplier (x2 after 3 in a row, x3 after 5). After the 10th question, show an end-of-round summary screen with: total score with breakdown, correct/total count, average response time, longest streak, a performance rating (S/A/B/C/D/F based on score thresholds), and a list of all questions showing which were right (green check) and wrong (red X) with the correct answers. Include buttons for "Play Again" (same category), "Change Category," and "View Leaderboard." Implement a leaderboard in localStorage: store the top 10 scores across all categories with player name (prompted on new high score), score, category, date, and correct count. Show the leaderboard in a modal accessible from the main menu, with filtering by category. Make it fully responsive: on mobile, answer buttons stack vertically instead of 2x2. Category cards use a single column. Touch-friendly tap targets (min 48px height). Add keyboard support: 1-4 to select answers, H for 50/50, S for skip. 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].

Open the trivia quiz game HTML file at the deployed site. Find the question database arrays for each category (Science, History, Geography, Pop Culture, Sports). Add 20 new questions to each category (100 new questions total). Each question must follow the existing format: an object with "question" (string), "options" (array of 4 strings), "correct" (index 0-3 of the right answer), and "difficulty" (string: "easy", "medium", or "hard"). Ensure the new questions are factual, verified, and do not duplicate any existing questions. Mix difficulty levels roughly evenly. For Pop Culture and Sports, include questions about recent events from 2025-2026 to keep the content fresh and current. After adding the questions, verify that no two questions in the same category have identical question text. Do not modify any game logic, styling, or other code — only append to the question arrays. 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].