The Sundered Sanctum

Hey there! I'm looking to build an incredibly detailed, highly polished 3D web game in a single file (HTML/CSS/JS), and I want you to be my lead developer and technical partner for this. We're going to create a magic-themed roguelike survival game using Three.js. Let me walk you through my vision for this project.
First, let's talk about the environment. I want the backdrop to be a breathtaking, stationary 3D scene of an ancient, ruined magic sanctuary. Think glowing magical crystals, shattered stone pillars, subtle volumetric fog, and really moody, mysterious lighting. Even though the scene is stationary, I'd love for the player to be able to look around and explore the arena using WASD and Mouse Look (a standard first or third-person camera style). Also, lighting is crucial for the vibe, so let's add a sleek UI slider directly on the screen so the player can adjust the global brightness dynamically.
Now, let's turn this beautiful scene into a deep roguelike experience. The player needs to feel a strong sense of progression. I'm thinking of a gorgeous, RPG-style HUD. We need dynamic bars for Health (HP) and Mana (MP), an XP bar at the bottom, and a Level indicator. Under the hood, keep track of stats like Attack Damage, Movement Speed, and Critical Strike Chance. And for that "juicy" combat feel, we absolutely need floating combat text—damage numbers popping up when hitting or getting hit!
The core of any good roguelike is the loot and builds, so let's go deep here. I want a full Inventory and Powerup system that the player can toggle by pressing 'I'. When enemies die, they should drop glowing orbs. Picking these up grants powerups. Let's give the player an active hotbar (Keys 1, 2, 3) for magic attacks—maybe a Basic Fireball, an Ice Freeze AoE, and a Lightning Dash. Alongside that, we need a grid for passive items. If I pick up a "Vampiric Ring" (grants lifesteal), "Boots of Haste" (+speed), or "Arcane Focus" (-Mana cost), I want to see them in my inventory, complete with nice hover tooltips explaining what they do.
For the enemies, let's spawn them in progressive waves. I'd love to see three distinct types to keep the player on their toes:

1. Zombieoid Grunts: Slow, melee-focused, they just try to swarm you.
2. Humanoid Cultists: These guys keep their distance and shoot slow-moving dark magic projectiles.
3. Monsterfied Brutes: Huge, tanky enemies that deal massive melee damage but have obvious telegraphed attacks. When we hit them with magic, let's use Three.js particles for awesome explosive impacts. They should flash red on hit and dissolve when defeated.
To bring it all to life, let's synthesize some audio using the Web Audio API (so we don't need external assets). A low, eerie ambient drone for the background, whooshes and zaps for casting spells, thuds for impacts, and a really satisfying chime when the player levels up.
Finally, we need to respect the player's time. Let's wire up the browser's localStorage to save the game. It should save their Level, Max HP, current XP, collected passives, and the highest wave reached. When you first load the page, it should show a slick Main Menu with "New Run" and "Continue Run". If the player dies, hit them with a cool Game Over screen detailing their run's stats, wipe the current save, and offer a restart button.
I know this is a massive project, but I trust your coding skills! Please write the complete code (HTML, embedded CSS for the beautiful UI, and modern ES6+ JS). Feel free to structure the JS cleanly and add comments so I can learn how you integrated the Three.js combat, the inventory, and the save system. Let's make something impressive!