Aethelgard

Act as an elite frontend engineer and game designer. Your goal is to write a fully complete, production-ready, beautifully polished HTML/CSS/JS game. The game is a turn-based monster-collection and battling RPG inspired by classic retro handheld games, but reimagined with a modern, clean, glassmorphic UI. It must contain at least 1 hour of compelling gameplay, a deep combat system, a functional world progression, and an integrated local save state. CRITICAL: Do not use placeholders, "TODO" comments, or truncated code. Write every line of CSS, JSON data, and JavaScript logic completely. --- ### 1. THEME & LORE (Legally Distinct) - World Setting: Aethelgard, a world vibrating with elemental energy. - Creatures: "Resonants" — spirits manifested from elemental frequencies. - Trainers: "Conductors" — people who use harmonic tuning devices to capture and direct Resonants. - Capture Device: "Aether Prisms" — crystalline geometric matrices that harmonize with a Resonant's energy to store them safely. - Elements: * Pyro (Fire) - strong against Flora, weak against Hydro * Hydro (Water) - strong against Pyro, weak against Flora * Flora (Nature) - strong against Hydro, weak against Pyro * Zephyr (Wind) - strong against Earth, weak against Volt * Earth (Terra) - strong against Volt, weak against Zephyr * Volt (Electric) - strong against Zephyr, weak against Earth * Cosmos (Neutral/Void) - no type advantages/disadvantages --- ### 2. VISUAL DESIGN & UI SYSTEM Implement a highly polished, responsive interface using Tailwind CSS (via CDN) and custom CSS injected in a `<style>` block. - Aesthetics: Dark mode by default. Deep slate/violet background, frosted glass cards (backdrop-filter: blur), vibrant element-themed neon borders and glow effects (e.g., Pyro glows reddish-orange, Volt glows cyan/yellow). - Screen Transitions: Smooth sliding or fading transitions between the Main Menu, Overworld Navigation, Battle Screen, and Conductors Dex (Encyclopaedia). - Animations: - Screen shake effect when taking critical damage. - Flash effects for successful hits. - Particle drift for elemental status effects. - Bounce animations for active Resonants in battles. - Sound System: Write a lightweight Web Audio API synthesizer class to generate retro 8-bit sound effects directly in JS. Implement sounds for: UI Hover, Select, Hit (Physical), Hit (Elemental/Super Effective), Level Up, and Capture Success. --- ### 3. GAMEPLAY ENGINE & SYSTEMS #### A. Overworld & Exploration Map Instead of a complex 2D physics engine, design a gorgeous, interactive "Zone-based Node Map." - Zones: Players must unlock and progress through 4 distinct zones: 1. The Verdant Canopy (Levels 1-5, Flora/Zephyr heavy) 2. The Sunken Grotto (Levels 5-10, Hydro/Earth heavy) 3. The Obsidian Crags (Levels 10-15, Pyro/Volt heavy) 4. The Apex Pillar (Level 15+, Final Boss Gauntlet) - Mechanics: Within each zone, the player clicks nodes on a visual trail. Nodes can be: - Wild Encounters (Tall Grass) - Mystery Caches (Items, Currencies) - Wandering Conductors (NPC Battles) - Healing Springs (Restores team health) - Zone Gatekeeper (Boss battle required to open the next zone) #### B. The Combat System A tactical, turn-based 1v1 battle system: - Interface: Show both Resonants' level, HP bar (with color transitions from green -> yellow -> red), XP progress, status effects, and beautiful vector sprites/icons (constructed using styled SVG elements dynamically rendered based on the monster class). - Actions: - Attack: Choose from 4 unique moves dynamically unlocked via leveling. - Prisms: Attempt to capture wild Resonants (capture rate based on current HP remaining, status, and Prism tier). - Exchange: Swap the active Resonant with a conscious party member (up to 3 in active party). - Inventory: Use items (Vitals Elixir, Status Cleanser, Prism Boosters). - Combat Math: - Damage = (((2 * Level / 5 + 2) * MovePower * (Attack / Defense)) / 50 + 2) * TypeModifier * Random(0.85, 1.00) - Critical Hits: 10% chance to deal 1.5x damage. #### C. Database of Resonants Include exactly 18 fully budgeted Resonants (6 elemental families, each with a 3-tier evolutionary line). For example: - Emberkit (Pyro, Level 1) -> Pyrowolf (Pyro, Level 8) -> Ignisaur (Pyro, Level 15) - Droplet (Hydro, Level 1) -> Geoxus (Hydro, Level 8) -> Neptunian (Hydro, Level 15) - Seedling (Flora, Level 1) -> Thornback (Flora, Level 8) -> Bloomgoliath (Flora, Level 15) - Sparky (Volt, Level 1) -> Boltsaber (Volt, Level 8) -> Stormlord (Volt, Level 15) - Gusty (Zephyr, Level 1) -> Slipstream (Zephyr, Level 8) -> Zephyrus (Zephyr, Level 15) - Pebble (Earth, Level 1) -> Obsidian (Earth, Level 8) -> Terrasunder (Earth, Level 15) Each database entry must have: - Name, Type, Base Stats (HP, Attack, Defense, Speed), Sprite SVG parameters, Evolution Level, and an array of unlockable Moves (Move Name, Power, Accuracy, Element, Unlock Level). --- ### 4. PROGRESSION & SAVING - Leveling: Defeating wild Resonants or Conductors yields XP. Reaching XP thresholds increases stats and evolves the Resonant at level 8 and 15. - Economy & Shop: Earn "Aether Shards" from battles. Spend them at the Camp Shop to buy: - Harmonizer Prism (Basic Catch) - Hyper-Conductive Prism (High Catch Rate) - Core Restorer (Restores 50% HP) - Resonance Elixir (Heals all status conditions) - Save File: Automatically save state parsing the entire Player profile (Active party, inventory, unlocked zones, shards, and completed boss battles) to `localStorage` on every change. Offer a "Reset Progress" button in the menu. --- ### 5. EXECUTION & CODE ARCHITECTURE Structure guidelines: 1. 2. `<head>`: Tailwind CDN, Google Fonts (e.g., 'Inter', 'Press Start 2P' for retro headings), custom styled-components inside `<style>`. 3. `<body>`: Wrapper with dark-mode background and layout containers. 4. UI screens inside `<div id="app">` hidden/shown using JS state controllers (e.g., swapping classes like `hidden`). 5. JavaScript `<script>` block at the bottom: - Synth Manager class (Web Audio API) - Resonants Database array - Player Profile object (State) - Game Loop Engine (Handling map navigation, combat cycles, UI rendering, math, and Save/Load logic). DO NOT truncate any arrays. DO NOT use comments like `// insert all other monsters here`. Generate the complete code containing all 18 monsters, 3 zones, unique dialog for the 4 major bosses, and full HTML templates. Make the SVGs look premium, utilizing paths, polylines, gradients, and distinct features per element type.