+<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.25rem;text-align:center}
+  h2{margin:.2rem 0 .8rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#C8765A}
+  #build{min-height:3rem;border:2px dashed #e5b8a6;border-radius:.9rem;padding:.6rem;display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;align-items:center;color:#9ca3af}
+  #pool{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:1rem}
+  .chip{padding:.5rem .8rem;border:0;border-radius:.7rem;background:#fff;border:1px solid #e5e7eb;font-size:1rem;font-weight:600;cursor:pointer}
+  #build .chip{background:#fdece6;border-color:#e5b8a6}
+  #fb{min-height:1.4em;font-weight:600;margin:.7rem 0}
+  #next{padding:.55rem 1.3rem;border:0;border-radius:9999px;background:#18181b;color:#fff;font-weight:600;cursor:pointer}
+</style>
+<div id="w">
+  <h2>Sentence Scramble</h2>
+  <div id="build" data-empty="tap words to build the sentence"></div>
+  <div id="pool"></div>
+  <div id="fb"></div>
+  <button id="next">Check / Next →</button>
+</div>
+<script>
+  var sentences=["I would like a cup of coffee","She is going to the market","They have lived here for years","Can you help me with this","We are learning English together","He always wakes up early"];
+  var si=Math.floor(Math.random()*sentences.length),target,build=[],pool=[];
+  var buildEl=document.getElementById("build"),poolEl=document.getElementById("pool"),fb=document.getElementById("fb");
+  function shuffle(a){for(var k=a.length-1;k>0;k--){var j=Math.floor(Math.random()*(k+1));var t=a[k];a[k]=a[j];a[j]=t;}return a;}
+  function paintBuild(){buildEl.innerHTML="";if(build.length===0){buildEl.textContent=buildEl.getAttribute("data-empty");return;}
+    build.forEach(function(wd,idx){var c=document.createElement("button");c.className="chip";c.textContent=wd;c.onclick=function(){pool.push(build.splice(idx,1)[0]);paint();};buildEl.appendChild(c);});}
+  function paintPool(){poolEl.innerHTML="";pool.forEach(function(wd,idx){var c=document.createElement("button");c.className="chip";c.textContent=wd;c.onclick=function(){build.push(pool.splice(idx,1)[0]);paint();};poolEl.appendChild(c);});}
+  function paint(){paintBuild();paintPool();}
+  function load(){target=sentences[si].split(" ");build=[];pool=shuffle(target.slice());fb.textContent="";paint();}
+  document.getElementById("next").onclick=function(){
+    if(build.join(" ")===target.join(" ")){fb.style.color="#16a34a";fb.textContent="✓ Perfect!";si=(si+1)%sentences.length;setTimeout(load,900);}
+    else{fb.style.color="#dc2626";fb.textContent="Not quite — keep trying.";}
+  };
+  load();
+</script>