Dino Egg Hunt

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{margin:0;background:#eef0dc;color:#354b34;font-family:Arial,sans-serif;text-align:center;padding:22px}
h1{font-size:clamp(26px,6vw,38px)}
p{font-size:18px}
.eggs{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:30px auto;max-width:500px}
.egg{font-size:clamp(48px,12vw,70px);background:#fff6df;border:3px solid #d8c69b;border-radius:22px;padding:18px 12px;cursor:pointer;min-width:76px}
.egg:focus{outline:3px solid #71885b}
button#again{background:#55734a;color:white;border:0;border-radius:14px;padding:13px 22px;font-size:17px;cursor:pointer}
#result{font-weight:bold;font-size:21px;min-height:54px}
</style>
</head>
<body>
<h1>🦕 Dino Egg Hunt 🥚</h1>
<p>Three eggs are hiding a surprise.<br>Tap an egg to find the golden dino egg!</p>
<div class="eggs" id="eggs"></div>
<p id="result" aria-live="polite">Choose your egg, little explorer!</p>
<button id="again">Play Again ↻</button>
<script>
let winner=0,finished=false;
const area=document.getElementById('eggs');
const result=document.getElementById('result');
function start(){
 winner=Math.floor(Math.random()*3);
 finished=false;
 result.textContent="Choose your egg, little explorer!";
 area.innerHTML="";
 for(let i=0;i<3;i++){
  const b=document.createElement('button');
  b.className='egg';b.textContent='🥚';
  b.setAttribute('aria-label','Choose egg '+(i+1));
  b.onclick=()=>{
   if(finished)return;
   b.textContent=i===winner?'🌟':'🦴';
   if(i===winner){
    finished=true;
    result.textContent='🎉 You found the golden dino egg! ROAR-some job!';
    [...area.children].forEach(x=>x.disabled=true);
   }else{
    b.disabled=true;
    result.textContent='Not this one! Try another egg 🦕';
   }
  };
  area.appendChild(b);
 }
}
document.getElementById('again').onclick=start;
start();
</script>
</body>
</html>