<!doctype html>
<html lang="pt-BR">
<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Neon Drift</title>
<style>
- *{box-sizing:border-box} html,body{margin:0;height:100%;overflow:hidden;background:#080a1c;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#fff;touch-action:none}
- #game{position:relative;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 0%,#332276 0,#101330 44%,#070818 100%)}
- #stars{position:absolute;inset:0;background-image:radial-gradient(#fff8 1px,transparent 1.5px);background-size:26px 36px;opacity:.38;animation:fall 5s linear infinite}
- @keyframes fall{to{background-position:0 36px}}
- #hud{position:absolute;top:0;left:0;right:0;padding:calc(20px + env(safe-area-inset-top)) 20px 12px;display:flex;justify-content:space-between;z-index:5;text-shadow:0 2px 8px #000}
- .label{font-size:11px;letter-spacing:1.8px;color:#b8c1ff;font-weight:800}.value{font-size:30px;font-weight:900;line-height:1}
- #track{position:absolute;inset:0 8%;border-left:1px solid #8c7dff44;border-right:1px solid #8c7dff44;background:linear-gradient(90deg,transparent 33.1%,#8c7dff24 33.3%,#8c7dff24 33.7%,transparent 33.9%,transparent 66.1%,#8c7dff24 66.3%,#8c7dff24 66.7%,transparent 66.9%)}
- #player{position:absolute;width:48px;height:62px;bottom:70px;left:calc(50% - 24px);border-radius:22px 22px 13px 13px;background:linear-gradient(135deg,#fff 0,#54efff 35%,#5956ff 100%);box-shadow:0 0 14px #4defff,0 0 35px #6b4dff;z-index:3;transition:left .12s ease}
- #player:before{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:#142050;top:11px;left:15px;box-shadow:0 0 9px #64faff}
+*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#070817;color:white;font-family:system-ui,sans-serif;touch-action:none}#game{height:100%;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 0,#3a237b,#11132e 48%,#070817)}#stars{position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1.5px);background-size:27px 39px;opacity:.35;animation:stars 4s linear infinite}@keyframes stars{to{background-position:0 39px}}#road{position:absolute;inset:0 9%;border-left:1px solid #9388ff55;border-right:1px solid #9388ff55;background:linear-gradient(90deg,transparent 33%,#a798ff33 33.2%,#a798ff33 33.7%,transparent 34%,transparent 66%,#a798ff33 66.2%,#a798ff33 66.7%,transparent 67%)}#hud{position:absolute;inset:0 0 auto;z-index:4;padding:22px 20px;display:flex;justify-content:space-between;text-shadow:0 2px 7px #000}.tag{font-size:10px;letter-spacing:1.7px;font-weight:800;color:#b7c3ff}.number{font-size:30px;font-weight:900;line-height:1}.right{text-align:right}#ship{position:absolute;z-index:3;bottom:64px;width:48px;height:62px;border-radius:23px 23px 13px 13px;background:linear-gradient(135deg,#fff,#53f0ff 38%,#5c57ff);box-shadow:0 0 16px #4fefff,0 0 36px #7250ff;transition:left .12s ease}#ship:before{content:"";position:absolute;top:11px;left:15px;width:17px;height:17px;border-radius:50%;background:#142052;box-shadow:0 0 9px #61fbff}#ship:after{content:"";position:absolute;bottom:-5px;left:9px;width:30px;height:9px;border-radius:50%;background:#ff5bd7;filter:blur(3px)}.block,.orb{position:absolute;z-index:2}.block{width:49px;height:49px;border-radius:13px;background:linear-gradient(135deg,#ff9a7d,#ed256d);box-shadow:0 0 16px #ff3370}.block:after{content:"×";display:grid;place-items:center;height:100%;font-size:38px;color:#fff9}.orb{width:27px;height:27px;border-radius:50%;background:#ffff98;box-shadow:0 0 12px #fff16b,0 0 30px #fff16b;animation:pulse .7s alternate infinite}@keyframes pulse{to{transform:scale(1.2)}}#screen{position:absolute;z-index:9;inset:0;display:grid;place-items:center;padding:28px;text-align:center;background:#070817d9}#card{max-width:300px}.logo{font-size:14px;letter-spacing:5px;font-weight:900;color:#74f6ff}.title{font-size:50px;font-weight:950;line-height:.92;letter-spacing:-2px;margin:13px 0 17px;background:linear-gradient(135deg,#fff,#829dff 55%,#ff74d9);-webkit-background-clip:text;color:transparent}.copy{color:#d3d8fb;font-size:16px;line-height:1.5;margin-bottom:25px}button{cursor:pointer;border:0;border-radius:999px;padding:16px 30px;background:linear-gradient(90deg,#5c5cff,#ed50b9);color:#fff;font-weight:900;font-size:15px;letter-spacing:.5px;box-shadow:0 8px 27px #785dff77}button:active{transform:scale(.96)}.hint{font-size:12px;color:#abb4df;margin-top:18px}
-<body>
-<div id="game">
- <div id="stars"></div><div id="track"></div>
- <div id="hud"><div><div class="label">PONTOS</div><div id="score" class="value">0</div></div><div style="text-align:right"><div class="label">RECORDE</div><div id="best" class="value">0</div></div></div>
- <div id="player"></div>
- <div id="message"><div id="card"><div class="logo">NEON DRIFT</div><div class="title">CORRA<br>PELA LUZ</div><div id="copy" class="copy">Desvie dos blocos rosas e toque nas esferas de energia. Deslize para trocar de faixa.</div><button id="start">COMEÇAR</button><div class="hint">Arraste para esquerda ou direita</div></div></div>
-</div>
+<body><main id="game"><div id="stars"></div><div id="road"></div><div id="hud"><div><div class="tag">PONTOS</div><div id="score" class="number">0</div></div><div class="right"><div class="tag">RECORDE</div><div id="best" class="number">0</div></div></div><div id="ship"></div><section id="screen"><div id="card"><div class="logo">NEON DRIFT</div><div class="title">CORRA<br>PELA LUZ</div><div id="copy" class="copy">Desvie dos blocos rosas e colete energia.<br>No desktop, use ← → ou A / D.</div><button id="play" type="button">COMEÇAR</button><div class="hint">Arraste para os lados no celular</div></div></section></main>
-(() => {
- const game=document.querySelector('#game'), player=document.querySelector('#player'), overlay=document.querySelector('#message'), start=document.querySelector('#start'), copy=document.querySelector('#copy'), scoreEl=document.querySelector('#score'), bestEl=document.querySelector('#best');
- const lanes=[22,50,78]; let lane=1,score=0,best=+localStorage.neonDriftBest||0,running=false,items=[],last=0,spawnGap=700,speed=3.8,startX=0;
- bestEl.textContent=best;
- function positionPlayer(){player.style.left='calc('+lanes[lane]+'% - 24px)'}
- function clearItems(){items.forEach(x=>x.el.remove());items=[]}
- function spawn(){
- const orb=Math.random()<.28,el=document.createElement('div'); el.className=orb?'orb':'obstacle';
- const item={el,orb,lane:Math.floor(Math.random()*3),y:-65}; el.style.left='calc('+lanes[item.lane]+'% - '+(orb?'13.5':'24.5')+'px)';el.style.top=item.y+'px';game.appendChild(el);items.push(item);
- }
- function collide(a,b){return a.left<b.right&&a.right>b.left&&a.top<b.bottom&&a.bottom>b.top}
- function end(){
+(function(){
+var game=document.getElementById("game"),ship=document.getElementById("ship"),screen=document.getElementById("screen"),play=document.getElementById("play"),scoreEl=document.getElementById("score"),bestEl=document.getElementById("best"),copy=document.getElementById("copy");
+var lanes=[22,50,78],lane=1,score=0,best=0,running=false,things=[],lastTime=0,nextSpawn=0,startX=0;
+function setShip(){ship.style.left="calc("+lanes[lane]+"% - 24px)"}setShip();bestEl.textContent=best;
+function removeAll(){things.forEach(function(x){x.el.remove()});things=[]}
+function addThing(){var isOrb=Math.random()<.28,el=document.createElement("div"),x={el:el,lane:Math.floor(Math.random()*3),y:-60,orb:isOrb};el.className=isOrb?"orb":"block";el.style.left="calc("+lanes[x.lane]+"% - "+(isOrb?"13.5":"24.5")+"px)";el.style.top=x.y+"px";game.appendChild(el);things.push(x)}
+function hit(a,b){return a.left<b.right&&a.right>b.left&&a.top<b.bottom&&a.bottom>b.top}
+function finish(){running=false;if(score>best){best=score;bestEl.textContent=best}copy.innerHTML="Sua pontuação: <b>"+score+"</b><br>Use as setas ou A / D para tentar de novo.";play.textContent="JOGAR DE NOVO";screen.style.display="grid";removeAll()}
+function frame(time){if(!running)return;var dt=Math.min(35,lastTime?time-lastTime:16);lastTime=time;var speed=3.8+score/65;if(time>=nextSpawn){addThing();nextSpawn=time+Math.max(360,700-score*3)}var shipBox=ship.getBoundingClientRect();things=things.filter(function(x){x.y+=speed*dt/16;x.el.style.top=x.y+"px";var box=x.el.getBoundingClientRect();if(hit(shipBox,box)){x.el.remove();if(x.orb){score+=12;scoreEl.textContent=score;return false}finish();return false}if(x.y>window.innerHeight+70){x.el.remove();if(!x.orb){score++;scoreEl.textContent=score}return false}return true});requestAnimationFrame(frame)}