+<style>
+  html,body{height:100%;margin:0}
+  body{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#eff6ff,#fef2f2);font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#1e293b}
+  #wrap{width:100%;max-width:330px;padding:1.25rem;text-align:center}
+  h2{margin:.2rem 0;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#3b82f6}
+  #score{font-size:.8rem;color:#C8765A;font-weight:700;margin-bottom:.8rem}
+  #q{font-size:1.15rem;font-weight:700;margin-bottom:1rem;min-height:2.6em}
+  .opt{display:block;width:100%;margin:.4rem 0;padding:.75rem 1rem;border:2px solid #e2e8f0;border-radius:.9rem;background:#fff;font-size:.95rem;font-weight:600;color:#1e293b;cursor:pointer}
+  .opt.right{background:#16a34a;color:#fff;border-color:#16a34a}
+  .opt.wrong{background:#dc2626;color:#fff;border-color:#dc2626}
+  #next{margin-top:1rem;padding:.65rem 1.5rem;border:0;border-radius:9999px;background:#3b82f6;color:#fff;font-weight:700;cursor:pointer;display:none}
+  #emoji{font-size:4rem}#fin{font-size:1.3rem;font-weight:800;margin:.3rem 0}
+</style>
+<div id="wrap">
+  <h2>USA Trivia</h2>
+  <div id="score"></div>
+  <div id="game">
+    <div id="q"></div>
+    <div id="opts"></div>
+    <button id="next">Next →</button>
+  </div>
+  <div id="result" style="display:none">
+    <div id="emoji"></div>
+    <div id="fin"></div>
+    <button id="again" class="opt" style="border-color:#3b82f6;color:#3b82f6">Play again</button>
+  </div>
+</div>
+<script>
+  var Q=[
+    {q:"How many states are in the USA?",a:["48","50","52","60"],c:1},
+    {q:"What is the capital of the USA?",a:["New York","Los Angeles","Washington, D.C.","Chicago"],c:2},
+    {q:"Who was the first US president?",a:["Abraham Lincoln","George Washington","Thomas Jefferson","John Adams"],c:1},
+    {q:"Which ocean borders California?",a:["Atlantic","Indian","Arctic","Pacific"],c:3},
+    {q:"What is the US national bird?",a:["Bald eagle","Turkey","Robin","Hawk"],c:0},
+    {q:"How many stripes are on the US flag?",a:["12","13","15","50"],c:1},
+    {q:"Which state is the 'Sunshine State'?",a:["California","Texas","Florida","Arizona"],c:2},
+    {q:"In what year did the USA declare independence?",a:["1492","1776","1812","1900"],c:1}
+  ];
+  var i=0,score=0,answered=false;
+  function showScore(){document.getElementById('score').textContent='Score: '+score+' / '+Q.length;}
+  function showQ(){
+    answered=false;
+    var item=Q[i];
+    document.getElementById('q').textContent=item.q;
+    var box=document.getElementById('opts');box.innerHTML='';
+    item.a.forEach(function(text,idx){
+      var b=document.createElement('button');b.className='opt';b.textContent=text;
+      b.onclick=function(){answer(idx,b,item);};
+      box.appendChild(b);
+    });
+    document.getElementById('next').style.display='none';
+    showScore();
+  }
+  function answer(idx,btn,item){
+    if(answered)return;answered=true;
+    var buttons=document.getElementById('opts').children;
+    if(idx===item.c){btn.className='opt right';score++;}
+    else{btn.className='opt wrong';buttons[item.c].className='opt right';}
+    showScore();
+    document.getElementById('next').style.display='inline-block';
+  }
+  function finish(){
+    document.getElementById('game').style.display='none';
+    document.getElementById('result').style.display='block';
+    var pct=score/Q.length;
+    document.getElementById('emoji').textContent=pct===1?'🏆':pct>=0.6?'🎉':'📚';
+    document.getElementById('fin').textContent='You scored '+score+' / '+Q.length;
+  }
+  document.getElementById('next').onclick=function(){i++;if(i<Q.length)showQ();else finish();};
+  document.getElementById('again').onclick=function(){i=0;score=0;document.getElementById('result').style.display='none';document.getElementById('game').style.display='block';showQ();};
+  showQ();
+</script>