+<style>
+  html,body{height:100%;margin:0}
+  body{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#fcefe9,#f7f4ee);font-family:system-ui,-apple-system,Segoe UI,sans-serif}
+  #w{width:100%;max-width:340px;padding:1.1rem;text-align:center}
+  h2{margin:.2rem 0 .5rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#C8765A}
+  #lives{font-size:1.3rem;letter-spacing:.1em;height:1.5rem}
+  #word{font-size:2rem;font-weight:700;letter-spacing:.25em;margin:.6rem 0;min-height:2.4rem}
+  #msg{font-weight:600;min-height:1.4em;margin:.2rem 0 .4rem}
+  .keys{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem}
+  .k{padding:.5rem 0;border:0;border-radius:.5rem;background:#fff;border:1px solid #e5e7eb;font-weight:600;cursor:pointer}
+  .k:disabled{opacity:.3}
+  #again{margin-top:.6rem;padding:.5rem 1.2rem;border:0;border-radius:9999px;background:#C8765A;color:#fff;font-weight:600;cursor:pointer;display:none}
+</style>
+<div id="w">
+  <h2>Hangman · Animals</h2>
+  <div id="lives"></div>
+  <div id="word"></div>
+  <div id="msg"></div>
+  <div class="keys" id="keys"></div>
+  <button id="again">Play again</button>
+</div>
+<script>
+  var animals=["tiger","panda","whale","eagle","horse","snake","koala","zebra","camel","otter","mouse","shark"];
+  var word,guessed,lives,over;
+  var lv=document.getElementById("lives"),we=document.getElementById("word"),msg=document.getElementById("msg"),keys=document.getElementById("keys"),again=document.getElementById("again");
+  function draw(){
+    lv.textContent=Array(lives).fill("❤️").join("")+Array(6-lives).fill("🤍").join("");
+    we.textContent=word.split("").map(function(c){return guessed.indexOf(c)>=0?c:"_";}).join(" ");
+  }
+  function start(){
+    word=animals[Math.floor(Math.random()*animals.length)];guessed=[];lives=6;over=false;msg.textContent="";again.style.display="none";
+    keys.innerHTML="";"abcdefghijklmnopqrstuvwxyz".split("").forEach(function(l){
+      var b=document.createElement("button");b.className="k";b.textContent=l;b.onclick=function(){
+        if(over)return;b.disabled=true;
+        if(word.indexOf(l)>=0){guessed.push(l);if(word.split("").every(function(c){return guessed.indexOf(c)>=0;})){msg.style.color="#16a34a";msg.textContent="🎉 You got it!";finish();}}
+        else{lives--;if(lives<=0){msg.style.color="#dc2626";msg.textContent="The word was “"+word+"”";finish();}}
+        draw();
+      };keys.appendChild(b);
+    });
+    draw();
+  }
+  function finish(){over=true;again.style.display="inline-block";[].forEach.call(keys.children,function(b){b.disabled=true;});}
+  again.onclick=start;start();
+</script>