Aethelgard

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aether Resonants — Aethelgard Chronicles</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
:root{--pyro:#ff6b35;--hydro:#4fc3f7;--flora:#66bb6a;--volt:#ffeb3b;--zephyr:#b39ddb;--earth:#a1887f;--accent:#8b5cf6}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0a0a1a;font-family:Inter,sans-serif;color:#e2e8f0}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .45s,transform .45s;opacity:0;transform:translateX(50px);pointer-events:none;z-index:0}
.screen.active{opacity:1;transform:translateX(0);pointer-events:auto;z-index:10}
.glass{background:rgba(15,23,42,.72);backdrop-filter:blur(18px);border:1px solid rgba(139,92,246,.25);border-radius:16px}
.glass-sm{background:rgba(15,23,42,.58);backdrop-filter:blur(12px);border:1px solid rgba(139,92,246,.18);border-radius:12px}
.btn-action{position:relative;overflow:hidden;transition:all .2s;cursor:pointer;border:none;color:#e2e8f0;font-family:inherit}
.btn-action:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(139,92,246,.3)}
.btn-action:active{transform:translateY(0) scale(.97)}
.hp-bar-bg{height:14px;background:rgba(0,0,0,.4);border-radius:7px;overflow:hidden}
.hp-bar-fill{height:100%;border-radius:7px;transition:width .6s}
.type-badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.type-pyro{background:rgba(255,69,0,.25);color:var(--pyro);border:1px solid rgba(255,69,0,.4)}
.type-hydro{background:rgba(79,195,247,.25);color:var(--hydro);border:1px solid rgba(79,195,247,.4)}
.type-flora{background:rgba(102,187,106,.25);color:var(--flora);border:1px solid rgba(102,187,106,.4)}
.type-volt{background:rgba(255,235,59,.25);color:var(--volt);border:1px solid rgba(255,235,59,.4)}
.type-zephyr{background:rgba(179,157,219,.25);color:var(--zephyr);border:1px solid rgba(179,157,219,.4)}
.type-earth{background:rgba(161,136,127,.25);color:var(--earth);border:1px solid rgba(161,136,127,.4)}
.type-cosmos{background:rgba(224,224,224,.15);color:var(--cosmos);border:1px solid rgba(255,255,255,.25)}
@keyframes pulse{0%,100%{box-shadow:0 0 8px rgba(139,92,246,.4)}50%{box-shadow:0 0 25px rgba(139,92,246,.6)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes flash{0%,100%{opacity:1}25%,75%{opacity:.15}}
@keyframes bounce{0%{transform:translateY(-25px);opacity:0}70%{transform:translateY(8px);opacity:1}100%{transform:translateY(0)}}
@keyframes slideup{from{transform:translateY(15px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes drift{0%{transform:translateY(0) scale(1);opacity:.8}100%{transform:translateY(-80px) scale(0);opacity:0}}
@keyframes glow{0%,100%{text-shadow:0 0 20px rgba(139,92,246,.5)}50%{text-shadow:0 0 40px rgba(139,246,173,.7)}}
.pulse-ani{animation:pulse 2.5s ease-in-out infinite}
.shake-ani{animation:shake .5s ease-in-out}
.flash-ani{animation:flash .4s}
.bounce-ani{animation:bounce .5s ease-out}
.slide-ani{animation:slideup .4s ease-out}
.fade-in{animation:fadeIn .4s ease-out}
.title-glow{animation:glow 3s ease-in-out infinite}
.node-el{cursor:pointer;transition:transform .15s,opacity .15s}
.node-el:hover{transform:scale(1.15)}
.node-locked{opacity:.25;cursor:not-allowed;filter:saturate(.3)}
.node-vis{opacity:.5;filter:saturate(.3)}
.dex-e{transition:all .2s;cursor:pointer}
.dex-e:hover{transform:scale(1.03);box-shadow:0 4px 20px rgba(139,92,246,.25)}
.dex-caught{border-color:rgba(34,197,94,.5)}
#battle-log{max-height:90px;overflow-y:auto;font-size:.72rem}
.battle-entry{padding:2px 6px;border-bottom:1px solid rgba(139,92,246,.1);color:#cbd5e1}
.battle-entry sup{color:#fbbf24;font-weight:600}
#particles-layer{position:fixed;inset:0;pointer-events:none;z-index:999}
.particle{position:absolute;width:8px;height:8px;border-radius:50%;animation:drift 1.2s ease-out forwards}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:rgba(139,92,246,.3);border-radius:2px}
</style>
</head>
<body>
<div id="particles-layer"></div>
<div id="app">

<!-- MENU -->
<div id="screen-menu" class="screen active">
<div class="text-center">
<h1 class="text-4xl font-black mb-2 title-glow" style="font-family:'Press Start 2P',monospace;background:linear-gradient(135deg,#8b5cf6,#4fc3f7,#66bb6a);-webkit-background-clip:text;-webkit-text-fill-color:transparent">AETHER RESONANTS</h1>
<p class="text-sm text-slate-400 mb-8 tracking-widest uppercase">Aethelgard Chronicles</p>
<div class="flex flex-col gap-3 w-56 mx-auto">
<button class="btn-action glass px-6 py-3 text-center font-semibold text-sm tracking-wide" onclick="Game.newGame()">New Journey</button>
<button id="btn-cont" class="btn-action glass px-6 py-3 text-center font-semibold text-sm tracking-wide hidden" onclick="Game.loadGame()">Continue</button>
<button class="btn-action glass px-6 py-3 text-center font-semibold text-sm tracking-wide text-slate-500" onclick="toggleCredits()">Credits</button>
</div>
<p id="credits-text" class="text-xs text-slate-500 mt-6 hidden">Built with love &amp; Web Audio API</p>
</div>
</div>

<!-- MAP -->
<div id="screen-map" class="screen">
<div class="absolute top-0 left-0 w-full p-3 flex justify-between items-center z-20">
<div class="glass-sm px-4 py-2 flex items-center gap-3">
<span class="text-xs font-bold text-violet-400">Conductor</span>
<span class="text-xs text-slate-400">&#128154; <span id="m-shards">0</span></span>
<span id="m-zone" class="text-xs text-slate-400"></span>
</div>
<div class="flex gap-2">
<button class="btn-action glass-sm px-3 py-1 text-xs" onclick="Game.openShop()">&#127957;</button>
<button class="btn-action glass-sm px-3 py-1 text-xs" onclick="Game.openDex()">&#128215;</button>
<button class="btn-action glass-sm px-3 py-1 text-xs" onclick="Game.openInv()">&#128230;</button>
<button class="btn-action glass-sm px-3 py-1 text-xs" onclick="Game.toMenu()">&#127968;</button>
</div>
</div>
<div class="slide-ani"><h2 id="z-name" class="text-2xl font-bold mb-1"></h2><p id="z-desc" class="text-xs text-slate-400"></p></div>
<div id="z-map" class="flex-1 w-full max-w-2xl flex items-center justify-center"></div>
<div id="z-dlg" class="hidden max-w-md mx-4 mb-4 p-4" style="background:rgba(15,23,42,.88);backdrop-filter:blur(12px);border:1px solid rgba(139,92,246,.2);border-radius:12px">
<p id="z-dlg-t" class="text-sm"></p>
<button class="btn-action glass-sm mt-3 px-4 py-2 text-xs" onclick="Game.closeDlg()">Continue</button>
</div>
</div>

<!-- BATTLE -->
<div id="screen-battle" class="screen">
<div class="w-full max-w-3xl px-4 py-2 flex justify-between items-center z-20">
<span id="b-type" class="type-badge type-pyro">Wild Encounter</span>
<button class="btn-action glass-sm px-3 py-1 text-xs" onclick="Game.fleeBattle()">&#127941; Flee</button>
</div>
<div class="flex-1 flex items-center gap-6 w-full max-w-4xl px-4" style="min-height:260px">
<div id="enemy-panel" class="glass p-5 w-58 flex flex-col items-center bounce-ani">
<div id="e-sprite" class="w-28 h-28 flex items-center justify-center mb-2"></div>
<div id="e-name" class="font-bold text-base mb-1">???</div>
<span id="e-type" class="type-badge type-pyro mb-2">Pyro</span>
<div class="w-full"><div class="text-xs text-slate-400 mb-1 flex justify-between"><span>HP</span><span id="e-hp">0/0</span></div><div class="hp-bar-bg"><div id="e-hp-bar" class="hp-bar-fill" style="width:100%;background:linear-gradient(90deg,#4ade80,#22c55e)"></div></div></div>
<div class="w-full mt-2"><div class="text-xs text-slate-500 mb-1">XP</div><div class="hp-bar-bg"><div id="e-xp-bar" class="hp-bar-fill" style="width:100%;background:var(--accent)"></div></div></div>
<div id="e-st" class="text-xs mt-2 text-red-400"></div>
</div>
<div class="text-2xl font-black animate-pulse text-slate-600" style="font-family:'Press Start 2P',monospace">VS</div>
<div id="player-panel" class="glass p-5 w-58 flex flex-col items-center bounce-ani" style="animation-delay:.15s">
<div id="p-sprite" class="w-28 h-28 flex items-center justify-center mb-2"></div>
<div id="p-name" class="font-bold text-base mb-1">???</div>
<span id="p-type" class="type-badge type-pyro mb-2">Pyro</span>
<div class="w-full"><div class="text-xs text-slate-400 mb-1 flex justify-between"><span>HP</span><span id="p-hp">0/0</span></div><div class="hp-bar-bg"><div id="p-hp-bar" class="hp-bar-fill" style="width:100%;background:linear-gradient(90deg,#4ade80,#22c55e)"></div></div></div>
<div class="w-full mt-2"><div class="text-xs text-slate-500 mb-1">Level <span id="p-lv">1</span></div><div class="hp-bar-bg"><div id="p-xp-bar" class="hp-bar-fill" style="width:0%;background:var(--accent)"></div></div></div>
<div id="p-st" class="text-xs mt-2 text-red-400"></div>
</div>
</div>
<div class="glass w-full max-w-3xl mx-4 mb-4 p-4">
<div id="b-main" class="flex gap-2 flex-wrap">
<button class="btn-action glass-sm flex-1 px-4 py-2 text-sm font-semibold min-w-0" onclick="Battle.showMoves()">&#9876; Fight</button>
<button class="btn-action glass-sm flex-1 px-4 py-2 text-sm font-semibold min-w-0" onclick="Battle.showCatch()">&#10023; Prism</button>
<button class="btn-action glass-sm flex-1 px-4 py-2 text-sm font-semibold min-w-0" onclick="Battle.showSwap()">&#128256; Swap</button>
<button class="btn-action glass-sm flex-1 px-4 py-2 text-sm font-semibold min-w-0" onclick="Battle.showItems()">&#129302; Items</button>
</div>
<div id="b-moves" class="hidden grid grid-cols-2 gap-2 mt-3"></div>
<div id="b-catch" class="hidden mt-3 flex gap-2 flex-wrap justify-center">
<button class="btn-action glass-sm px-4 py-2 text-sm" onclick="Battle.catchPrism('basic')">&#9675; Harmonizer (<span id="n-basic">3</span>)</button>
<button class="btn-action glass-sm px-4 py-2 text-sm" onclick="Battle.catchPrism('hyper')">&#10022; Hyper (<span id="n-hyper">0</span>)</button>
<button class="btn-action glass-sm px-4 py-2 text-sm text-red-400" onclick="Battle.hideMenus()">Cancel</button>
</div>
<div id="b-swap" class="hidden mt-3 flex gap-2 flex-wrap justify-center"></div>
<div id="b-items" class="hidden mt-3 flex gap-2 flex-wrap justify-center"></div>
<div id="battle-log" class="mt-3 p-2 glass-sm max-h-24 overflow-y-auto"><div class="battle-entry" style="color:var(--accent)">A wild encounter begins!</div></div>
</div>
</div>

<!-- DEX -->
<div id="screen-dex" class="screen">
<div class="absolute top-0 left-0 w-full p-4 flex justify-between items-center z-20">
<h2 class="text-xl font-bold text-violet-400">Resonants Dex</h2>
<button class="btn-action glass-sm px-3 py-1 text-xs" onclick="Game.closeDex()">&#10005; Close</button>
</div>
<div id="dex-grid" class="w-full max-w-4xl mx-auto overflow-y-auto p-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3" style="max-height:75vh"></div>
</div>

<!-- INVENTORY -->
<div id="screen-inv" class="screen">
<div class="absolute top-0 left-0 w-full p-4 flex justify-between items-center z-20">
<h2 class="text-xl font-bold text-violet-400">Inventory</h2>
<button class="btn-action glass-sm px-3 py-1 text-xs" onclick="Game.closeInv()">&#10005; Close</button>
</div>
<div id="inv-grid" class="w-full max-w-2xl mx-auto overflow-y-auto p-4 grid grid-cols-2 gap-3" style="max-height:75vh"></div>
</div>

<!-- SHOP -->
<div id="screen-shop" class="screen">
<div class="absolute top-0 left-0 w-full p-4 flex justify-between items-center z-20">
<h2 class="text-xl font-bold text-violet-400">&#127957; Camp Shop</h2>
<button class="btn-action glass-sm px-3 py-1 text-xs" onclick="Game.closeShop()">&#10005; Close</button>
</div>
<div id="shop-grid" class="w-full max-w-2xl mx-auto overflow-y-auto p-4 grid grid-cols-2 gap-3" style="max-height:75vh"></div>
</div>

<!-- VICTORY -->
<div id="screen-win" class="screen">
<div class="glass max-w-md p-8 text-center fade-in">
<h2 class="text-2xl font-bold mb-4 title-glow">&#9876; Victory! &#9876;</h2>
<p id="win-text" class="text-sm text-slate-300 mb-4"></p>
<p id="win-info" class="text-xs text-violet-400 mb-2"></p>
<p id="win-shards" class="text-xs text-amber-400 mb-4"></p>
<button class="btn-action glass-sm px-6 py-2 text-sm" onclick="Game.endWin()">Continue</button>
</div>
</div>

</div>
</body>
</html>