<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>Juego de Memoria – Elementos Químicos</title>
<style>
body{font-family:Arial,Helvetica,sans-serif;background:#f0f8ff;display:flex;flex-direction:column;align-items:center;padding:30px}
h1{color:#005792}
#board{display:grid;grid-template-columns:repeat(4,110px);gap:12px;margin-top:20px}
.card{width:110px;height:110px;background:#0077b6;color:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;user-select:none;transition:background .3s}
.card.matched{background:#2a9d8f;cursor:default}
.card.flipped{background:#fff;color:#005792;border:2px solid #0077b6}
</style>
</head>
<body>
<h1>🧪 Juego de Memoria – Elementos Químicos</h1>
<p>Encuentra la pareja símbolo ↔ nombre</p>
<div id="board"></div>
<script>
const elementos=[{s:"H",n:"Hidrógeno"},{s:"He",n:"Helio"},{s:"C",n:"Carbono"},{s:"N",n:"Nitrógeno"},{s:"O",n:"Oxígeno"},{s:"Na",n:"Sodio"},{s:"Fe",n:"Hierro"},{s:"Au",n:"Oro"}];
let cartas=[];elementos.forEach(e=>{cartas.push({tipo:"s",valor:e.s,pareja:e.n});cartas.push({tipo:"n",valor:e.n,pareja:e.s})});
cartas.sort(()=>Math.random()-.5);
const board=document.getElementById("board");let primero=null,bloqueo=false;
cartas.forEach((c,i)=>{
const d=document.createElement("div");d.className="card";
d.dataset.indice=i;d.dataset.tipo=c.tipo;d.dataset.valor=c.valor;d.dataset.pareja=c.pareja;
d.textContent="?";d.addEventListener("click",voltear);board.appendChild(d);
});
function voltear(e){
const c=e.target;if(bloqueo||c.classList.contains("matched")||c.classList.contains("flipped"))return;
c.textContent=c.dataset.valor;c.classList.add("flipped");
if(!primero){primero=c}else{
bloqueo=true;
if(primero.dataset.pareja===c.dataset.valor){
primero.classList.add("matched");c.classList.add("matched");
primero.classList.remove("flipped");c.classList.remove("flipped");
primero=null;bloqueo=false;victoria();
}else{
setTimeout(()=>{primero.textContent="?";c.textContent="?";primero.classList.remove("flipped");c.classList.remove("flipped");primero=null;bloqueo=false},1000);
}
}
}
function victoria(){if(document.querySelectorAll(".matched").length===cartas.length)setTimeout(()=>alert("🎉 ¡Has ganado!"),300)}
</script>
</body>
</html>