para mi momio

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Una misión para Jostin 💚</title>
<style>
*{box-sizing:border-box}
body{
  margin:0; font-family:Arial,sans-serif; background:#10151a; color:#eef5f0;
  min-height:100vh; display:flex; justify-content:center; align-items:center;
  padding:18px;
}
.card{
  width:min(760px,100%); background:#182127; border:2px solid #6fa88a;
  border-radius:22px; padding:22px; box-shadow:0 0 30px #0008;
}
h1{margin:4px 0 8px;text-align:center;color:#a8e6c2;font-size:28px}
.sub{text-align:center;color:#b8c8bf;margin-bottom:22px}
.progress{height:9px;background:#303b40;border-radius:20px;overflow:hidden;margin-bottom:20px}
.bar{height:100%;width:0;background:#79c99b;transition:.4s}
.stage{display:none;animation:appear .35s ease}
.stage.active{display:block}
@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.box{background:#202b31;border-radius:16px;padding:18px;margin:12px 0;border:1px solid #3d5248}
.code{font-size:25px;letter-spacing:4px;text-align:center;color:#c4f5d7;padding:18px}
input{
 width:100%;padding:13px;border-radius:12px;border:1px solid #698072;
 background:#11181c;color:white;font-size:16px;margin:8px 0
}
button{
 border:0;border-radius:13px;padding:12px 17px;background:#79c99b;color:#102018;
 font-weight:bold;cursor:pointer;margin:6px 4px;font-size:15px
}
button:hover{transform:scale(1.03)}
.feedback{min-height:25px;color:#f2c77b;font-weight:bold}
.memory{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mem{
 height:75px;font-size:30px;background:#11191d;color:transparent;
 border:1px solid #496255;border-radius:13px;cursor:pointer
}
.mem.open{color:white;background:#294338}
.symbols{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.sym{width:52px;height:52px;border-radius:50%;background:#11191d;color:#a8e6c2;border:1px solid #587060}
.sym.done{background:#79c99b;color:#102018}
.radar{
 width:260px;height:260px;border:2px solid #6fa88a;border-radius:50%;
 margin:15px auto;position:relative;overflow:hidden;background:
 radial-gradient(circle,#243b30 0 2px,transparent 3px),
 repeating-radial-gradient(circle,transparent 0 38px,#355142 39px 40px);
}
.radar:after{content:"";position:absolute;left:50%;top:50%;width:50%;height:2px;background:#79c99b;transform-origin:left;animation:sweep 2s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.signal{position:absolute;width:15px;height:15px;border-radius:50%;background:#8ff2b0;box-shadow:0 0 12px #8ff2b0;cursor:pointer}
.archive{text-align:center}
.final{text-align:center;background:#15261d;border-color:#75b891}
.final h2{color:#a8e6c2}
.small{font-size:13px;color:#9eb0a5}
</style>
</head>
<body>
<div class="card">
<h1>💚 Una pequeña misión para Jostin</h1>
<div class="sub">La hice yo, así que por favor llega hasta el final 🥺</div>
<div class="progress"><div class="bar" id="bar"></div></div>

<section class="stage active" id="s1">
<div class="box">
<h2>🔐 1. Un mensaje escondido</h2>
<p>Encontré este mensaje, pero está escrito con un código.</p>
<div class="code">PH VLHQWR PDB PDO</div>
<p><b>Pista:</b> cada letra está 3 posiciones después. Muévelas 3 hacia atrás.</p>
<input id="a1" placeholder="Escribe lo que dice el mensaje">
<button onclick="check1()">Descifrar</button>
<div class="feedback" id="f1"></div>
</div>
</section>

<section class="stage" id="s2">
<div class="box">
<h2>🧠 2. Un poquito de memoria</h2>
<p>Encuentra las 3 parejas. No te preocupes, yo tampoco soy buena para esto 😂</p>
<div class="memory" id="memory"></div>
<div class="feedback" id="f2"></div>
</div>
</section>

<section class="stage" id="s3">
<div class="box">
<h2>✨ 3. Sigue la secuencia</h2>
<p>Primero mira el orden de los símbolos. Después intenta repetirlo.</p>
<div class="symbols" id="symbols"></div>
<p class="small">Secuencia: <span id="sequence"></span></p>
<button onclick="newSequence()">Empezar</button>
<div class="feedback" id="f3"></div>
</div>
</section>

<section class="stage" id="s4">
<div class="box">
<h2>📡 4. Encuentra las señales</h2>
<p>Hay 7 señales escondidas. Tócalas antes de que desaparezcan.</p>
<div class="radar" id="radar"></div>
<div class="feedback" id="f4"></div>
</div>
</section>

<section class="stage" id="s5">
<div class="box archive">
<h2>🔒 5. Última pista</h2>
<p>Completa esta palabra:</p>
<h2>V _ L O R A R</h2>
<p>Es lo que debí hacer más y que ahora quiero aprender a hacer mejor.</p>
<input id="a5" placeholder="Escribe la palabra">
<button onclick="check5()">Abrir archivo</button>
<div class="feedback" id="f5"></div>
</div>
</section>

<section class="stage" id="s6">
<div class="box final">
<h2>📨 Mensaje desbloqueado</h2>
<p>Jostin…</p>
<p>No sabía muy bien cómo decirte todo esto, así que hice esta pequeña misión jajaja.</p>
<p><b>Me siento muy mal. Perdóname por no valorarte.</b></p>
<p>Sé que tú no eres el culpable. Yo soy la que quería encontrar una forma diferente de pedirte perdón y decirte que de verdad me importa lo que pasó.</p>
<p>Gracias por llegar hasta aquí. 🥺💚🫂</p>
<button onclick="alert('Mensaje recibido 💚🥺')">💚 Recibir mensaje</button>
<button onclick="location.reload()">↻ Jugar otra vez</button>
</div>
</section>
</div>

<script>
let current=1;
function next(){
 document.getElementById('s'+current).classList.remove('active');
 current++;
 document.getElementById('s'+current).classList.add('active');
 document.getElementById('bar').style.width=((current-1)/5*100)+'%';
}
function check1(){
 let x=document.getElementById('a1').value.toLowerCase().trim().replace(/[.,!?]/g,'');
 if(x==='me siento muy mal'){document.getElementById('f1').textContent='💚 Correcto. Ya sabes por dónde va esto...';setTimeout(next,500)}
 else document.getElementById('f1').textContent='Casi 😅 Recuerda: 3 letras hacia atrás.';
}

let cards=['💚','💚','🫂','🫂','✨','✨'], first=null, lock=false, found=0;
cards.sort(()=>Math.random()-.5);
const mem=document.getElementById('memory');
cards.forEach((v,i)=>{
 let b=document.createElement('button'); b.className='mem'; b.dataset.v=v; b.textContent=v;
 b.onclick=()=>flip(b);
 mem.appendChild(b);
});
function flip(b){
 if(lock||b.classList.contains('open'))return;
 b.classList.add('open');
 if(!first){first=b;return}
 if(first.dataset.v===b.dataset.v){
   found++; first=null;
   if(found===3){document.getElementById('f2').textContent='💚 ¡Encontraste todas!';setTimeout(next,700)}
 }else{
   lock=true;let old=first;first=null;
   setTimeout(()=>{old.classList.remove('open');b.classList.remove('open');lock=false},650);
 }
}

const syms=['▲','●','◆','★','■'];
let order=[],click=0;
function newSequence(){
 order=[...syms].sort(()=>Math.random()-.5);click=0;
 document.getElementById('sequence').textContent=order.join(' → ');
 const box=document.getElementById('symbols');box.innerHTML='';
 syms.forEach(s=>{
   let b=document.createElement('button');b.className='sym';b.textContent=s;
   b.onclick=()=>{
     if(s===order[click]){
       b.classList.add('done');click++;
       if(click===5){document.getElementById('f3').textContent='✨ Secuencia correcta. ¡Bien!';setTimeout(next,700)}
     }else{
       click=0;document.querySelectorAll('.sym').forEach(x=>x.classList.remove('done'));
       document.getElementById('f3').textContent='😅 Se reinició. Mira el orden otra vez.';
     }
   };box.appendChild(b);
 });
}
newSequence();

let signals=0;
const radar=document.getElementById('radar');
function addSignal(){
 if(signals>=7)return;
 let d=document.createElement('div');d.className='signal';
 d.style.left=(15+Math.random()*75)+'%';d.style.top=(15+Math.random()*75)+'%';
 d.onclick=()=>{d.remove();signals++;document.getElementById('f4').textContent='Señales encontradas: '+signals+'/7';
   if(signals===7){setTimeout(next,500)}
 };
 radar.appendChild(d);
}
for(let i=0;i<7;i++)addSignal();

function check5(){
 let x=document.getElementById('a5').value.toLowerCase().trim();
 if(x==='valorar'||x==='valorarla'){document.getElementById('f5').textContent='🔓 Archivo desbloqueado...';setTimeout(next,600)}
 else document.getElementById('f5').textContent='Mmm... mira las letras que faltan 😉';
}
</script>
</body>
</html>