+<style>
+  html,body{height:100%;margin:0}
+  body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:#0b1220;color:#fff}
+  #wrap{height:100%;display:flex;flex-direction:column}
+  #hud{display:flex;justify-content:space-between;padding:.8rem 1rem;font-weight:700;font-size:.95rem}
+  #hud span{color:#fbbf24}
+  #area{position:relative;flex:1;margin:0 .6rem .6rem;border-radius:1rem;background:radial-gradient(circle at 50% 30%,#1e293b,#0b1220);overflow:hidden}
+  #star{position:absolute;font-size:2.2rem;cursor:pointer;user-select:none;transition:transform .05s;display:none}
+  #star:active{transform:scale(.8)}
+  #overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;background:rgba(11,18,32,.85)}
+  #overlay h3{margin:.2rem 0;font-size:1.4rem}
+  #overlay p{margin:.2rem 0 1rem;opacity:.85;font-size:.95rem}
+  #go{padding:.7rem 1.6rem;border:0;border-radius:9999px;background:#fbbf24;color:#0b1220;font-weight:800;font-size:1rem;cursor:pointer}
+</style>
+<div id="wrap">
+  <div id="hud"><div>Score: <span id="score">0</span></div><div>Time: <span id="time">30</span>s</div></div>
+  <div id="area">
+    <div id="star">⭐</div>
+    <div id="overlay">
+      <h3>Catch the Star ⭐</h3>
+      <p>Tap the star as many times as you can in 30 seconds.</p>
+      <button id="go">Start</button>
+    </div>
+  </div>
+</div>
+<script>
+  var area=document.getElementById('area'),star=document.getElementById('star'),overlay=document.getElementById('overlay');
+  var scoreEl=document.getElementById('score'),timeEl=document.getElementById('time'),go=document.getElementById('go');
+  var score=0,time=30,running=false,best=0,tick=null,ac=null;
+  function actx(){try{ac=ac||new (window.AudioContext||window.webkitAudioContext)();if(ac.state==='suspended')ac.resume();}catch(e){}return ac;}
+  function tone(freq,dur,when,vol){var c=actx();if(!c)return;var o=c.createOscillator(),g=c.createGain();o.type='triangle';o.frequency.value=freq;o.connect(g);g.connect(c.destination);var s=c.currentTime+(when||0);g.gain.setValueAtTime(0.0001,s);g.gain.exponentialRampToValueAtTime(vol||0.3,s+0.01);g.gain.exponentialRampToValueAtTime(0.0001,s+(dur||0.12));o.start(s);o.stop(s+(dur||0.12)+0.03);}
+  function blip(){tone(740+Math.min(score*14,560),0.08,0,0.25);}
+  function startSound(){tone(523,0.1,0,0.3);tone(784,0.13,0.09,0.3);}
+  function endSound(){[523,659,784,1047].forEach(function(f,i){tone(f,0.2,i*0.12,0.32);});}
+  function move(){
+    var w=area.clientWidth-44,h=area.clientHeight-44;
+    star.style.left=Math.max(4,Math.random()*w)+'px';
+    star.style.top=Math.max(4,Math.random()*h)+'px';
+  }
+  function start(){
+    score=0;time=30;running=true;scoreEl.textContent='0';timeEl.textContent='30';
+    overlay.style.display='none';star.style.display='block';move();startSound();
+    tick=setInterval(function(){time--;timeEl.textContent=time;if(time<=0)end();},1000);
+  }
+  function end(){
+    running=false;clearInterval(tick);star.style.display='none';endSound();
+    var isBest=score>best&&score>0;if(score>best)best=score;
+    var emoji=score>=30?'🏆':score>=15?'🌟':score>=5?'⭐':'🌙';
+    overlay.querySelector('h3').textContent=emoji+' '+score+' stars';
+    overlay.querySelector('p').textContent=(isBest?'🎉 New best! · ':'Best this session: '+best+' · ')+'tap to play again';
+    go.textContent='Play again';overlay.style.display='flex';
+  }
+  star.onclick=function(){if(!running)return;score++;scoreEl.textContent=score;blip();move();};
+  go.onclick=start;
+</script>