Warden

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>The Warden's Corrosion</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Inter:wght@400;600;700&display=swap');
:root{--ink:#090e18;--panel:#111c2a;--gold:#efb95e;--ember:#ed7438;--mist:#83c7d0;--muted:#8fa0ae;--line:#304457}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% 0,#24364a,#080d16 72%);color:#e9e6d7;font-family:Inter,system-ui;overflow:hidden}#app{width:min(1200px,100vw);margin:auto;padding:18px}.top{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #334555}.brand{display:flex;align-items:center;gap:14px}.sigil{font-size:36px;color:var(--gold);filter:drop-shadow(0 0 10px #d48736)}h1{font:700 22px Cinzel,serif;letter-spacing:2px;margin:0}.sub{font-size:11px;color:#9aabb9;letter-spacing:2px;margin-top:5px;text-transform:uppercase}.stats{display:flex;gap:20px;align-items:center}.stat{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.stat b{display:block;color:#f4e4b0;font-size:17px;margin-top:3px}.bar{width:110px;height:7px;background:#26313c;border-radius:8px;overflow:hidden;margin-top:5px}.bar i{display:block;height:100%;background:linear-gradient(90deg,#d4513e,#edb45e);transition:.3s}.gamewrap{position:relative;margin-top:16px;border:1px solid #354859;box-shadow:0 20px 60px #0009;background:#0b111b}.gamewrap:before{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 80px #000b;z-index:2}canvas{display:block;width:100%;aspect-ratio:16/9;background:#0d1621}.hud{position:absolute;left:16px;top:14px;z-index:3;text-shadow:0 2px 3px #000}.zone{font:700 18px Cinzel;color:#f2d897}.objective{font-size:12px;color:#b7c5ca;margin-top:4px}.controls{position:absolute;right:16px;top:14px;z-index:3;text-align:right;font-size:11px;color:#a6b3bc;line-height:1.65}.controls kbd{border:1px solid #637281;border-radius:3px;padding:1px 5px;color:#f4dc9e;background:#162431}.bottom{height:96px;display:flex;gap:12px;align-items:center}.panel{border:1px solid #2c4252;background:linear-gradient(180deg,#142332,#101a27);padding:12px 15px}.readout{flex:1;min-width:0}.message{font-size:13px;color:#d8d7c9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.small{font-size:11px;color:#8797a3;margin-top:8px}.inventory{width:330px;display:flex;gap:7px;align-items:center}.slot{height:40px;width:48px;border:1px solid #3c5360;text-align:center;padding-top:7px;font-size:19px;position:relative;background:#0d1722}.slot span{font-size:9px;position:absolute;right:3px;bottom:1px;color:#f3db94}.slot.active{border-color:var(--gold);box-shadow:0 0 12px #d8903744}.modal{position:absolute;inset:50px 13% 40px;background:#0e1825f5;border:1px solid #60727d;z-index:8;padding:24px;display:none;box-shadow:0 15px 60px #000}.modal.open{display:block}.modal h2{font:700 23px Cinzel;color:#edcc82;margin:0 0 4px}.modal p{color:#adbbc0;font-size:13px}.items{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.item{border:1px solid #334b5a;padding:12px;background:#132332;cursor:pointer}.item:hover{border-color:var(--gold);background:#1a2d3a}.item b{font-size:12px;color:#e7d19b}.item div{font-size:11px;color:#9db0b7;margin:6px 0}.item button,.close{background:#c18a42;color:#15100a;border:0;padding:6px 10px;font-weight:700;cursor:pointer}.close{float:right;background:#334b5a;color:#e6e1d1}.toast{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:6;background:#172b35ed;border:1px solid #a17c43;padding:9px 18px;font-size:12px;opacity:0;transition:.25s;pointer-events:none}.toast.show{opacity:1}
</style></head><body><div id="app"><header class="top"><div class="brand"><div class="sigil">✦</div><div><h1>THE WARDEN'S CORROSION</h1><div class="sub">Aurelion's Sunken Observatory · Field Record 06</div></div></div><div class="stats"><div class="stat">Vitality<div id="hearts"></div></div><div class="stat">Sigils <b id="gold">0</b></div><div class="stat">Weapon <b id="weapon">Ember Blade</b></div></div></header><main class="gamewrap"><canvas id="game" width="960" height="540"></canvas><div class="hud"><div class="zone" id="zone">The Ashen Threshold</div><div class="objective" id="objective">Reach the Sanctuary Stone · Explore the ruins</div></div><div class="controls"><kbd>WASD</kbd> move · <kbd>J</kbd> strike · <kbd>K</kbd> shard<br><kbd>E</kbd> interact · <kbd>I</kbd> inventory · <kbd>R</kbd> rest</div><div class="toast" id="toast"></div><section class="modal" id="modal"><button class="close" id="close">CLOSE</button><h2>Warden's Satchel</h2><p id="invnote">Toggle accessories or consume a Vital Stem. Your discoveries alter the Warden's silhouette.</p><div class="items" id="items"></div></section></main><footer class="bottom"><div class="panel readout"><div class="message" id="message">The observatory hangs above a storm that never breaks.</div><div class="small" id="hint">A sanctuary stone glows at the entrance. Press E beside it to bind your progress.</div></div><div class="panel inventory" id="quick"></div></footer></div>
<script>
const c=document.getElementById('game'),x=c.getContext('2d'),W=960,H=540;let keys={},last=0,zone=0,player={x:105,y:390,hp:6,max:6,weapon:0,band:false,lantern:false,cloak:false},gold=0,inv={stem:0,seal:0},flags={stone:false,altar1:false,shard:false,altar2:false,heart4:false,heart5:false,shop:false,guardian:false,final:false},particles=[],enemies=[],objects=[],toastT=0,audio;
const zones=[['The Ashen Threshold','Find the first Sanctuary Stone'],['The Rusted Archives','Defeat constructs · Find the merchant'],['The Collapsed Gallery','Ignite the Ember Blade at the altar'],['The Sunken Vault','Recover the Aether Shard'],['The Twin Spire','Survive the ascent · claim the Solar Falchion'],['The Core Chamber','Strike the Beacon with everything you have']];
function snd(f=220,d=.08,type='sine'){try{audio??=new(window.AudioContext||window.webkitAudioContext)();let o=audio.createOscillator(),g=audio.createGain();o.type=type;o.frequency.value=f;g.gain.setValueAtTime(.045,audio.currentTime);g.gain.exponentialRampToValueAtTime(.001,audio.currentTime+d);o.connect(g).connect(audio.destination);o.start();o.stop(audio.currentTime+d)}catch(e){}}
function say(t,h=''){document.getElementById('message').textContent=t;if(h)document.getElementById('hint').textContent=h;toast(t)}function toast(t){let q=document.getElementById('toast');q.textContent=t;q.classList.add('show');clearTimeout(toastT);toastT=setTimeout(()=>q.classList.remove('show'),2100)}
function setup(){enemies=[];objects=[];player.x=100;player.y=390;player.hp=Math.min(player.max,player.hp); if(zone===0){objects.push({type:'stone',x:135,y:340});enemies.push({x:510,y:350,hp:2})}if(zone===1){objects.push({type:'stone',x:450,y:300},{type:'chest',x:180,y:180},{type:'shop',x:730,y:170});for(let i=0;i<3;i++)enemies.push({x:390+i*120,y:360,hp:3})}if(zone===2){objects.push({type:'altar1',x:740,y:170},{type:'heart',x:180,y:180},{type:'plate',x:490,y:310});for(let i=0;i<4;i++)enemies.push({x:350+i*110,y:350,hp:3})}if(zone===3){objects.push({type:'shard',x:770,y:160},{type:'lantern',x:650,y:360},{type:'switch',x:450,y:130});for(let i=0;i<4;i++)enemies.push({x:270+i*140,y:370,hp:4})}if(zone===4){objects.push({type:'stone',x:120,y:330},{type:'altar2',x:470,y:145},{type:'heart',x:760,y:160},{type:'cloak',x:260,y:180},{type:'seal',x:700,y:390});for(let i=0;i<6;i++)enemies.push({x:260+(i%3)*250,y:280+Math.floor(i/3)*100,hp:5})}if(zone===5){objects.push({type:'beacon',x:790,y:150},{type:'switch',x:430,y:180});for(let i=0;i<5;i++)enemies.push({x:300+i*120,y:350,hp:6})}updateUI()}
function updateUI(){document.getElementById('zone').textContent=zones[zone][0];document.getElementById('objective').textContent=zones[zone][1];document.getElementById('gold').textContent=gold;document.getElementById('weapon').textContent=['Ember Blade','Ignited Edge','Solar Falchion'][player.weapon];let hs='';for(let i=0;i<player.max/2;i++)hs+=`<span style="font-size:19px;color:${i*2<player.hp?'#e85e4d':'#39434e'}">♥</span>`;document.getElementById('hearts').innerHTML=hs;let q=document.getElementById('quick');q.innerHTML=`<div class="slot">🌿<span>${inv.stem}</span></div><div class="slot">🔷<span>${inv.seal}</span></div><div class="slot ${player.band?'active':''}">◌</div><div class="slot ${player.lantern?'active':''}">☼</div><div class="slot ${player.cloak?'active':''}">◒</div>`}
function near(o,d=58){return Math.hypot(player.x-o.x,player.y-o.y)<d}
function interact(){let o=objects.find(a=>near(a));if(!o){say('The bronze dust settles. Nothing answers your hand.');return}snd(520,.12);if(o.type==='stone'){flags.stone=true;say('Sanctuary bound. Your wounds are mended.','Press R beside any stone to rest.');player.hp=player.max}else if(o.type==='chest'){if(!player.band){player.band=true;say("Found: Warden's Band · a silver ring quickens the blade.")}else say('The hidden chest is empty.')}else if(o.type==='shop'){flags.shop=true;openInv(true)}else if(o.type==='altar1'){if(!flags.altar1){flags.altar1=true;player.weapon=1;say('IGNITED EDGE awakened. Orange embers trail every swing.')}else say('The altar is dark but warm.')}else if(o.type==='heart'){if(zone===2&&!flags.heart4){flags.heart4=true;player.max=8;player.hp=player.max;say('A hidden heart container blooms from the cracked wall. Maximum vitality increased.')}else if(zone===4&&!flags.heart5){flags.heart5=true;player.max=10;player.hp=player.max;say('The fifth heart container joins your pulse. The Warden stands whole.')}}else if(o.type==='shard'){if(!flags.shard){flags.shard=true;say('AETHER SHARD acquired. Press K to fire crystal bolts.')} }else if(o.type==='lantern'){player.lantern=true;say('PHANTOM LANTERN equipped. Hidden cracks gleam blue.')}else if(o.type==='altar2'){if(!flags.altar2){flags.altar2=true;player.weapon=2;say('SOLAR FALCHION forged. Gold light widens the stance.')} }else if(o.type==='cloak'){player.cloak=true;say('SHADOW CLOAK equipped. Trap harm will be softened.')}else if(o.type==='seal'){inv.seal++;say('Binding Seal collected. It freezes a construct for three seconds.')}else if(o.type==='beacon'){if(zone===5&&enemies.length===0){flags.final=true;say('The CORE BEACON answers. Aurelion rises through the storm.');document.getElementById('objective').textContent='Beacon restored · The Warden endures';}else say('The Beacon is hungry. Clear the chamber, then return.')}else if(o.type==='switch'){say(flags.shard?'The distant crystal switch rings bright. A bridge unfolds.':'A mechanism waits beyond reach.')}updateUI()}
function attack(ranged=false){snd(ranged?740:player.weapon===2?110:player.weapon?310:220,.13,ranged?'triangle':'sawtooth');let hit=false;enemies.forEach(e=>{let d=Math.hypot(player.x-e.x,player.y-e.y);if(d<(ranged?260:player.weapon===2?105:72)){e.hp-=ranged?2:player.weapon===2?3:2;hit=true;for(let i=0;i<8;i++)particles.push({x:e.x,y:e.y,vx:(Math.random()-.5)*3,vy:(Math.random()-.5)*3,life:25,col:player.weapon?'#ee9a45':'#d7c1a0'})}});if(hit){gold+=2;say(player.weapon===2?'Solar impact.':'The construct flinches.');}updateUI()}
function hurt(){if(player.hp<=0)return;player.hp-=1;snd(90,.18,'square');for(let i=0;i<12;i++)particles.push({x:player.x,y:player.y,vx:(Math.random()-.5)*4,vy:(Math.random()-.5)*4,life:25,col:'#ce4b49'});say('Corrosion bites. Find a Sanctuary Stone or use a Vital Stem.');updateUI()}
function useStem(){if(inv.stem&&player.hp<player.max){inv.stem--;player.hp=Math.min(player.max,player.hp+4);snd(620,.2);say('Vital Stem restores four health.');updateUI()}}
function move(dt){let vx=(keys.d?1:0)-(keys.a?1:0),vy=(keys.s?1:0)-(keys.w?1:0),m=Math.hypot(vx,vy)||1;player.x=Math.max(35,Math.min(925,player.x+vx/m*145*dt));player.y=Math.max(80,Math.min(500,player.y+vy/m*145*dt));enemies.forEach(e=>{let d=Math.hypot(player.x-e.x,player.y-e.y);if(d<230){e.x+=(player.x-e.x)/d*dt*20;e.y+=(player.y-e.y)/d*dt*20;if(d<28&&Math.random()<dt*.8)hurt()}});enemies=enemies.filter(e=>{if(e.hp<=0){gold+=8;snd(880,.06);return false}return true});particles=particles.filter(p=>(p.x+=p.vx,p.y+=p.vy,--p.life>0))}
function draw(){x.clearRect(0,0,W,H);let g=x.createLinearGradient(0,0,0,H);g.addColorStop(0,['#202e40','#26333c','#263b42','#172b35','#382c31','#171b29'][zone]);g.addColorStop(1,'#080e16');x.fillStyle=g;x.fillRect(0,0,W,H);x.strokeStyle='#344c56';x.lineWidth=2;for(let i=0;i<10;i++){x.beginPath();x.moveTo(0,70+i*45);x.lineTo(W,70+i*45);x.stroke()}for(let i=0;i<16;i++){let xx=(i*83+zone*31)%W;x.fillStyle='#c9954c33';x.fillRect(xx,70+(i*61)%390,2,2)}objects.forEach(o=>{let col={stone:'#62c4bb',chest:'#dfad54',shop:'#c77d49',altar1:'#ec713b',altar2:'#f1cf68',heart:'#e15d62',shard:'#90e9f0',lantern:'#77cddd',cloak:'#765e9e',seal:'#668eea',beacon:'#f4cd6a',switch:'#a4e7e1',plate:'#9a7850'}[o.type]||'#aaa';x.save();x.translate(o.x,o.y);x.shadowBlur=16;x.shadowColor=col;x.fillStyle=col;x.strokeStyle='#f9df9a';if(o.type==='stone'||o.type==='beacon'||o.type==='shard'||o.type==='switch'){x.beginPath();x.moveTo(0,-20);x.lineTo(18,0);x.lineTo(0,20);x.lineTo(-18,0);x.closePath();x.fill();x.stroke()}else{x.fillRect(-18,-15,36,30);x.strokeRect(-18,-15,36,30)}x.shadowBlur=0;x.fillStyle='#0b121b';x.font='11px Inter';x.textAlign='center';x.fillText({stone:'SAVE',chest:'CACHE',shop:'SHOP',altar1:'ALTAR',altar2:'ALTAR',heart:'♥',shard:'✦',lantern:'☼',cloak:'◒',seal:'◆',beacon:'CORE',switch:'AETHER',plate:'PLATE'}[o.type],0,4);x.restore()});enemies.forEach(e=>{x.save();x.translate(e.x,e.y);x.fillStyle='#7b3d35';x.strokeStyle='#d38a54';x.lineWidth=2;x.beginPath();x.arc(0,0,20,0,7);x.fill();x.stroke();x.fillStyle='#e8b54e';x.fillRect(-9,-3,5,3);x.fillRect(4,-3,5,3);x.restore()});particles.forEach(p=>{x.fillStyle=p.col;x.globalAlpha=p.life/25;x.fillRect(p.x,p.y,4,4);x.globalAlpha=1});x.save();x.translate(player.x,player.y);x.fillStyle='#101a2a';x.strokeStyle=player.weapon===2?'#f4cf67':player.weapon?'#ed783b':'#a6c3c4';x.lineWidth=3;x.beginPath();x.moveTo(0,-27);x.lineTo(20,25);x.lineTo(-20,25);x.closePath();x.fill();x.stroke();x.fillStyle='#d8b47a';x.beginPath();x.arc(0,-30,9,0,7);x.fill();x.stroke();x.strokeStyle=player.weapon===2?'#ffe49a':player.weapon?'#ef813e':'#d0d7cc';x.lineWidth=5;x.beginPath();x.moveTo(9,-5);x.lineTo(35,-33);x.stroke();if(player.lantern){x.fillStyle='#8ce5ef';x.shadowBlur=12;x.shadowColor='#8ce5ef';x.beginPath();x.arc(-18,5,6,0,7);x.fill()}x.restore()}
function openInv(shop=false){let m=document.getElementById('modal');m.classList.add('open');let arr=[['🌿 Vital Stem',`Restore 4 HP · ${shop?'50 sigils':'owned '+inv.stem}`,()=>{if(shop&&gold>=50){gold-=50;inv.stem++;say('Vital Stem purchased.');updateUI()}else if(!shop)useStem()}],['🔷 Binding Seal',`Freeze one construct · ${shop?'75 sigils':'owned '+inv.seal}`,()=>{if(shop&&gold>=75){gold-=75;inv.seal++;say('Binding Seal purchased.');updateUI()}}],['◌ Warden’s Band',player.band?'Equipped · attack speed +':'Find it in the Archives cache',()=>{}],['☼ Phantom Lantern',player.lantern?'Equipped · reveals cracks':'Find it in the Sunken Vault',()=>{}],['◒ Shadow Cloak',player.cloak?'Equipped · trap resistance':'Find it in the Twin Spire',()=>{}],['♥ Heart Container',`+2 max HP · ${flags.heart5?'claimed':'300 sigils'}`,()=>{if(shop&&!flags.heart5&&gold>=300){gold-=300;flags.heart5=true;player.max=10;player.hp=10;say('The final heart container is yours.');updateUI()}}]];document.getElementById('items').innerHTML=arr.map((a,i)=>`<div class="item"><b>${a[0]}</b><div>${a[1]}</div><button data-i="${i}">${shop&&(i<2||i===5)?'PURCHASE':'INSPECT'}</button></div>`).join('');document.querySelectorAll('.item button').forEach(b=>b.onclick=()=>arr[b.dataset.i][2]())}
document.getElementById('close').onclick=()=>document.getElementById('modal').classList.remove('open');
window.onkeydown=e=>{keys[e.key.toLowerCase()]=true;if(e.key.toLowerCase()==='j')attack();if(e.key.toLowerCase()==='k'&&flags.shard)attack(true);if(e.key.toLowerCase()==='e')interact();if(e.key.toLowerCase()==='i')openInv();if(e.key.toLowerCase()==='r'&&flags.stone){player.hp=player.max;snd(420,.3);say('The Sanctuary Stone mends the Warden.');updateUI()}if(e.key==='1')useStem()};window.onkeyup=e=>keys[e.key.toLowerCase()]=false;
function loop(t){let dt=Math.min(.04,(t-last)/1000||0);last=t;move(dt);draw();if(enemies.length===0&&zone<5&&player.x>900){zone++;setup();say('A rusted gate unlocks. The observatory descends into a new ruin.')}requestAnimationFrame(loop)}setup();requestAnimationFrame(loop);
</script></body></html>
<!-- agent-meta {"model":"openai/gpt-5.6-luna","provider":"openrouter","persona":"full","sessionId":"165db07b-2b96-4c17-a6a1-dac6db99843d","tokensIn":70441,"tokensOut":6596,"tokensTotal":77037,"cost":0.012675829999999999,"turns":6,"toolCalls":5,"failedToolCalls":0,"timestamp":"2026-09-30T21:30:43.980Z"} -->