-*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#76cddd;font-family:system-ui,sans-serif;touch-action:none}canvas{display:block}#hud{position:fixed;z-index:3;top:0;left:0;right:0;padding:18px;color:#fff;display:flex;justify-content:space-between;text-shadow:0 2px 6px #155a6d;pointer-events:none}.lab{font-size:10px;font-weight:1000;letter-spacing:1.8px}.num{font-size:28px;font-weight:1000}.lives{color:#ffdf66;font-size:19px;letter-spacing:2px}#boss{position:fixed;z-index:3;top:69px;left:18%;right:18%;display:none;text-align:center;color:white;font-size:10px;font-weight:1000;letter-spacing:2px}#meter{height:9px;border:2px solid white;background:#5b2337;border-radius:5px;overflow:hidden;margin-top:5px}#meter i{display:block;height:100%;background:linear-gradient(90deg,#ffdd50,#ff4d68);width:100%}.controls{position:fixed;z-index:4;bottom:17px;left:0;right:0;padding:0 14px;display:flex;justify-content:space-between;align-items:end}.group{display:flex;gap:9px}.controls button{border:2px solid white;color:white;font-weight:1000;box-shadow:0 4px 11px #16485b8a;cursor:pointer}.group button{width:53px;height:53px;border-radius:15px;background:#1687a4ce;font-size:23px}.group.action button{width:62px;height:62px;border-radius:50%;font-size:11px}.j{background:#8e55ce!important}.f{background:#ee7543!important}.controls button:active{transform:scale(.94)}#cover{position:fixed;z-index:9;inset:0;display:grid;place-items:center;padding:27px;text-align:center;color:white;background:linear-gradient(155deg,#006e8ee8,#1765a3df 48%,#f47b4cc4)}#card{max-width:325px}.tag{font-size:11px;letter-spacing:4px;font-weight:1000;color:#fff0a3}.title{font-size:56px;line-height:.78;letter-spacing:-4px;font-weight:1000;margin:18px 0 21px;text-shadow:4px 4px 0 #075775}.title span{color:#ffdd61}.copy{font-size:16px;line-height:1.5;color:#effdff;margin:0 0 27px}#start{border:3px solid #fff0a3;border-radius:5px;background:#ef7245;color:white;padding:15px 28px;font-weight:1000;font-size:14px;letter-spacing:1px;box-shadow:0 5px 0 #9b3d3f;cursor:pointer}.hint{font-size:12px;color:#eaffff;margin-top:18px}
-</style></head><body>
-<div id="hud"><div><div class="lab">SECTOR</div><div class="num">01</div></div><div style="text-align:right"><div class="lab">LIVES</div><div id="lives" class="lives">● ● ●</div></div></div><div id="boss">IRON COLOSSUS<div id="meter"><i id="bossFill"></i></div></div>
-<div class="controls"><div class="group"><button id="moveLeft">←</button><button id="moveRight">→</button></div><div class="group action"><button id="jumpButton" class="j">JUMP</button><button id="fireButton" class="f">BLAST</button></div></div>
-<div id="cover"><div id="card"><div class="tag">3D RUN & BLAST</div><div class="title">BOLT<br><span>RUNNER</span></div><p id="copy" class="copy">Dash through the skyworks, leap over danger, and blast the machines guarding the core.</p><button id="start">POWER UP</button><div class="hint">Move, jump and blast · Keyboard: A/D, W, Space</div></div></div>
-<script type="module">
-import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js";
-const scene=new THREE.Scene();scene.background=new THREE.Color(0x7bd1e1);scene.fog=new THREE.Fog(0x7bd1e1,18,68);
-const camera=new THREE.PerspectiveCamera(55,innerWidth/innerHeight,.1,140);camera.position.set(2,3.3,10);camera.lookAt(2,1,0);
-const renderer=new THREE.WebGLRenderer({antialias:true});renderer.setPixelRatio(Math.min(devicePixelRatio,2));renderer.setSize(innerWidth,innerHeight);renderer.outputColorSpace=THREE.SRGBColorSpace;document.body.appendChild(renderer.domElement);
-scene.add(new THREE.HemisphereLight(0xffffff,0x236a85,2.7));const sun=new THREE.DirectionalLight(0xffecae,2.4);sun.position.set(-10,15,8);scene.add(sun);
-const floor=new THREE.Mesh(new THREE.BoxGeometry(150,.45,5),new THREE.MeshStandardMaterial({color:0x216c77,roughness:.8}));floor.position.set(45,-.27,0);scene.add(floor);for(let n=0;n<43;n++){const h=2+Math.random()*8,b=new THREE.Mesh(new THREE.BoxGeometry(1.5,h,1.7),new THREE.MeshStandardMaterial({color:n%2?0x207b95:0x415f9b,roughness:.7}));b.position.set(-8+n*3.2,h/2,-5);scene.add(b)}
-function robot(){const g=new THREE.Group(),turq=new THREE.MeshStandardMaterial({color:0x46cfc3}),gold=new THREE.MeshStandardMaterial({color:0xffcb57}),dark=new THREE.MeshStandardMaterial({color:0x1b4867});let m=new THREE.Mesh(new THREE.BoxGeometry(.65,.82,.34),turq);m.position.y=1.1;g.add(m);m=new THREE.Mesh(new THREE.BoxGeometry(.62,.54,.5),turq);m.position.y=1.78;g.add(m);m=new THREE.Mesh(new THREE.BoxGeometry(.48,.16,.03),dark);m.position.set(0,1.8,-.27);g.add(m);[-1,1].forEach(s=>{const leg=new THREE.Mesh(new THREE.BoxGeometry(.2,.58,.24),turq);leg.position.set(s*.19,.38,0);g.add(leg)});m=new THREE.Mesh(new THREE.CylinderGeometry(.16,.19,.68,10),gold);m.rotation.z=Math.PI/2;m.position.set(.58,1.22,0);g.add(m);return g}
-const player=robot();player.position.set(0,.02,0);scene.add(player);
-const platforms=[];function makePlatform(x,y,w){const m=new THREE.Mesh(new THREE.BoxGeometry(w,.24,2.2),new THREE.MeshStandardMaterial({color:0x694da1,roughness:.6}));m.position.set(x,y,0);scene.add(m);platforms.push({x,y,w})}[[9,1.5,3],[17,2.2,3.5],[27,1.5,4],[37,2.5,3.4]].forEach(a=>makePlatform(a[0],a[1],a[2]));
-const enemies=[],bolts=[];function makeDrone(x){const g=new THREE.Group(),red=new THREE.MeshStandardMaterial({color:0xf46561}),dark=new THREE.MeshStandardMaterial({color:0x332646});let m=new THREE.Mesh(new THREE.SphereGeometry(.42,12,9),red);m.scale.z=.65;g.add(m);m=new THREE.Mesh(new THREE.SphereGeometry(.13,8,6),new THREE.MeshBasicMaterial({color:0xffff89}));m.position.z=-.28;g.add(m);[-1,1].forEach(s=>{const w=new THREE.Mesh(new THREE.BoxGeometry(.65,.09,.24),dark);w.position.set(s*.43,0,.03);g.add(w)});g.position.set(x,.66,0);scene.add(g);enemies.push({g,hp:3,boss:false,next:0})}
-function makeBoss(){const g=new THREE.Group(),red=new THREE.MeshStandardMaterial({color:0x92355b}),dark=new THREE.MeshStandardMaterial({color:0x33213e});let m=new THREE.Mesh(new THREE.BoxGeometry(1.8,2.1,.7),red);m.position.y=1.16;g.add(m);m=new THREE.Mesh(new THREE.BoxGeometry(1.35,.7,.7),dark);m.position.y=2.52;g.add(m);[-1,1].forEach(s=>{const a=new THREE.Mesh(new THREE.BoxGeometry(.52,1.35,.6),red);a.position.set(s*1.15,1.2,0);g.add(a)});g.position.set(52,.02,0);scene.add(g);enemies.push({g,hp:35,max:35,boss:true,next:0});bossOn=true;el.boss.style.display="block";el.fill.style.width="100%"}[6,13,21,32,41].forEach(makeDrone);
-function makeBolt(isPlayer,x,y){const m=new THREE.Mesh(new THREE.BoxGeometry(.5,.1,.1),new THREE.MeshBasicMaterial({color:isPlayer?0xfff18a:0xff5a84}));m.position.set(x,y,0);scene.add(m);bolts.push({m,player:isPlayer})}
-const el={lives:document.getElementById("lives"),cover:document.getElementById("cover"),copy:document.getElementById("copy"),start:document.getElementById("start"),boss:document.getElementById("boss"),fill:document.getElementById("bossFill"),left:document.getElementById("moveLeft"),right:document.getElementById("moveRight"),jump:document.getElementById("jumpButton"),fire:document.getElementById("fireButton")};
-let running=false,lives=3,dir=0,velocity=0,firing=false,nextShot=0,last=0,bossOn=false;
-function showLives(){el.lives.textContent=Array(lives).fill("●").join(" ")||"—"}function damage(){lives--;showLives();if(lives<=0){running=false;el.copy.innerHTML="The skyworks pushed back.<br>Recharge and clear the sector!";el.start.textContent="REBOOT";el.cover.style.display="grid";el.boss.style.display="none"}}function doJump(){if(running&&Math.abs(velocity)<.002&&player.position.y<.04)velocity=.011}
-function removeEnemy(i){const e=enemies[i];scene.remove(e.g);enemies.splice(i,1);if(e.boss){running=false;el.copy.innerHTML="<b>Sector cleared!</b><br>You defeated the Iron Colossus.";el.start.textContent="PLAY AGAIN";el.cover.style.display="grid";el.boss.style.display="none"}}
-function hold(button,value){button.addEventListener("pointerdown",e=>{e.preventDefault();dir=value});["pointerup","pointerleave","pointercancel"].forEach(t=>button.addEventListener(t,()=>dir=0))}hold(el.left,-1);hold(el.right,1);el.jump.addEventListener("click",doJump);el.fire.addEventListener("pointerdown",e=>{e.preventDefault();firing=true});["pointerup","pointerleave","pointercancel"].forEach(t=>el.fire.addEventListener(t,()=>firing=false));el.start.addEventListener("click",()=>{lives=3;showLives();running=true;el.cover.style.display="none";last=0});
-addEventListener("keydown",e=>{const k=e.key.toLowerCase();if(k==="a"||k==="arrowleft")dir=-1;if(k==="d"||k==="arrowright")dir=1;if(k==="w"||k==="arrowup")doJump();if(k===" ")firing=true;if(k==="enter"&&!running)el.start.click()});addEventListener("keyup",e=>{const k=e.key.toLowerCase();if(k==="a"||k==="arrowleft"||k==="d"||k==="arrowright")dir=0;if(k===" ")firing=false});
-function loop(t){requestAnimationFrame(loop);const dt=Math.min(35,last?t-last:16);last=t;if(running){player.position.x=Math.max(-4,Math.min(53,player.position.x+dir*dt*.005));const oldY=player.position.y;velocity-=dt*.000035;player.position.y+=velocity*dt;if(player.position.y<=.02){player.position.y=.02;velocity=0}for(const p of platforms){if(velocity<=0&&Math.abs(player.position.x-p.x)<p.w/2-.12&&oldY>=p.y+.17&&player.position.y<=p.y+.17){player.position.y=p.y+.17;velocity=0}}if(!bossOn&&player.position.x>45&&enemies.length===0)makeBoss();if(firing&&t>nextShot){makeBolt(true,player.position.x+.9,player.position.y+1.25);nextShot=t+220}for(const e of enemies){if(player.position.x>e.g.position.x-6&&t>e.next){makeBolt(false,e.g.position.x-.8,e.g.position.y+1);e.next=t+(e.boss?700:1500)}}for(let i=bolts.length-1;i>=0;i--){const b=bolts[i];b.m.position.x+=b.player?dt*.045:-dt*.03;if(b.player){for(let j=enemies.length-1;j>=0;j--){const e=enemies[j];if(Math.abs(b.m.position.x-e.g.position.x)<(e.boss?1.45:.55)&&Math.abs(b.m.position.y-e.g.position.y-1)<(e.boss?1.5:.65)){e.hp--;scene.remove(b.m);bolts.splice(i,1);if(e.boss)el.fill.style.width=e.hp/e.max*100+"%";if(e.hp<=0)removeEnemy(j);break}}}else if(Math.abs(b.m.position.x-player.position.x)<.5&&Math.abs(b.m.position.y-player.position.y-1)<.65){scene.remove(b.m);bolts.splice(i,1);damage();continue}if(b.m.position.x>62||b.m.position.x<-7){scene.remove(b.m);bolts.splice(i,1)}}camera.position.x+=(player.position.x+2-camera.position.x)*.06;camera.lookAt(player.position.x+3,1.2,0)}renderer.render(scene,camera)}
-addEventListener("resize",()=>{camera.aspect=innerWidth/innerHeight;camera.updateProjectionMatrix();renderer.setSize(innerWidth,innerHeight)});showLives();loop(0);