+<style>
+  *{box-sizing:border-box}
+  html,body{height:100%;margin:0}
+  body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:radial-gradient(120% 120% at 50% 0%,#f9f4ec 0%,#f0e6d4 100%);color:#16110d;overflow:hidden}
+  .orb{position:fixed;border-radius:9999px;filter:blur(50px);opacity:.5;pointer-events:none}
+  .o1{width:240px;height:240px;background:#c7b6ff;top:-70px;left:-55px}
+  .o2{width:220px;height:220px;background:#ffc4a0;bottom:-60px;right:-45px}
+  .wrap{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;text-align:center}
+  .eyebrow{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#7a5bd6;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:.5em}
+  .card{width:100%;max-width:340px;background:rgba(255,255,255,.74);backdrop-filter:blur(6px);border:1px solid rgba(0,0,0,.06);border-radius:28px;box-shadow:0 18px 44px rgba(80,50,140,.15);padding:32px 22px;cursor:pointer;user-select:none;transition:transform .12s}
+  .card:active{transform:scale(.985)}
+  .ga{font-family:Georgia,"Times New Roman",serif;font-size:2.7rem;line-height:1.12;font-weight:600;letter-spacing:-.01em}
+  .say{margin-top:10px;color:#b3a690;font-size:1rem;font-style:italic;letter-spacing:.01em}
+  .reveal{margin-top:18px}
+  .en{font-size:1.6rem;font-weight:800;color:#6a3df0;letter-spacing:-.01em}
+  .ph{margin-top:6px;color:#8a7f72;font-size:1rem;font-style:italic}
+  .hint{margin-top:18px;color:#9a8f80;font-size:.82rem}
+  .nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px}
+  .navbtn{padding:.72rem 1.15rem;border-radius:9999px;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.72);color:#16110d;font-weight:700;font-size:.92rem;cursor:pointer;line-height:1}
+  .navbtn:active{transform:scale(.95)}
+  .pos{min-width:62px;text-align:center;font-size:.85rem;color:#8a7f72;font-variant-numeric:tabular-nums;letter-spacing:.02em}
+  .hide{display:none}
+  .foot{position:fixed;bottom:9px;left:0;right:0;text-align:center;font-size:.66rem;color:#b3a690;padding:0 16px}
+</style>
+<div class="orb o1"></div><div class="orb o2"></div>
+<div class="wrap">
+  <div class="eyebrow"><span>Gaeilge</span><span>&rarr;</span><span>English</span></div>
+  <div class="card" id="card">
+    <div class="ga" id="ga"></div>
+    <div class="say" id="say"></div>
+    <div class="reveal hide" id="reveal">
+      <div class="en" id="en"></div>
+    </div>
+    <div class="hint" id="hint">Tap the card to reveal the English</div>
+  </div>
+  <div class="nav">
+    <button class="navbtn" id="prev" aria-label="Previous word">&lsaquo; Prev</button>
+    <div class="pos" id="pos"></div>
+    <button class="navbtn" id="next" aria-label="Next word">Next &rsaquo;</button>
+  </div>
+</div>
+<div class="foot">The pronunciation guide under each word shows how to say it.</div>
+<script>
+(function(){
+  // ph = phonetic respelling shown as the pronunciation guide.
+  var WORDS=[
+    {ga:"Dia duit",en:"Hello",ph:"DEE-ah gwitch"},
+    {ga:"Sl\u00e1n",en:"Goodbye",ph:"slawn"},
+    {ga:"Go raibh maith agat",en:"Thank you",ph:"guh rev moh AH-gut"},
+    {ga:"Le do thoil",en:"Please",ph:"leh duh hull"},
+    {ga:"Sl\u00e1inte",en:"Cheers / Health",ph:"SLAWN-cheh"},
+    {ga:"F\u00e1ilte",en:"Welcome",ph:"FAWL-cheh"},
+    {ga:"Cara",en:"Friend",ph:"KAH-rah"},
+    {ga:"Gr\u00e1",en:"Love",ph:"graw"},
+    {ga:"Uisce",en:"Water",ph:"ISH-keh"},
+    {ga:"Bia",en:"Food",ph:"BEE-ah"},
+    {ga:"Bainne",en:"Milk",ph:"BAHN-yeh"},
+    {ga:"Ar\u00e1n",en:"Bread",ph:"ah-RAWN"},
+    {ga:"Madra",en:"Dog",ph:"MAH-drah"},
+    {ga:"Cat",en:"Cat",ph:"kot"},
+    {ga:"Capall",en:"Horse",ph:"KOP-ul"},
+    {ga:"\u00c9an",en:"Bird",ph:"AY-un"},
+    {ga:"Teach",en:"House",ph:"chahkh"},
+    {ga:"Leabhar",en:"Book",ph:"LYOW-er"},
+    {ga:"L\u00e1",en:"Day",ph:"law"},
+    {ga:"O\u00edche",en:"Night",ph:"EE-heh"},
+    {ga:"Grian",en:"Sun",ph:"GREE-un"},
+    {ga:"Gealach",en:"Moon",ph:"GYAL-ukh"},
+    {ga:"Crann",en:"Tree",ph:"krawn"},
+    {ga:"Muir",en:"Sea",ph:"mwir"},
+    {ga:"Gaeilge",en:"Irish (the language)",ph:"GWAYL-geh"}
+  ];
+  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;}
+  var order=shuffle(WORDS.slice()),idx=0,cur=order[0],revealed=false;
+  var ga=document.getElementById("ga"),en=document.getElementById("en"),say=document.getElementById("say"),
+      reveal=document.getElementById("reveal"),hint=document.getElementById("hint"),pos=document.getElementById("pos");
+  function render(){ga.textContent=cur.ga;say.textContent="/ "+cur.ph+" /";en.textContent=cur.en;reveal.classList.add("hide");hint.classList.remove("hide");revealed=false;pos.textContent=(idx+1)+" / "+order.length;}
+  function flip(){revealed=!revealed;if(revealed){reveal.classList.remove("hide");hint.classList.add("hide");}else{reveal.classList.add("hide");hint.classList.remove("hide");}}
+  function go(d){idx=(idx+d+order.length)%order.length;cur=order[idx];render();}
+  document.getElementById("card").addEventListener("click",function(){flip();});
+  document.getElementById("prev").addEventListener("click",function(){go(-1);});
+  document.getElementById("next").addEventListener("click",function(){go(1);});
+  render();
+})();
+</script>