+<style>
+  html, body { height:100%; margin:0; overflow:hidden; font-family:system-ui,-apple-system,Segoe UI,sans-serif; }
+  .card { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:1rem; padding:2rem; text-align:center; background:{{bg}}; color:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform 0.1s; }
+  .card:active { transform:scale(0.98); }
+  h1 { margin:0; font-size:2rem; line-height:1.15; text-shadow:0 2px 8px rgba(0,0,0,0.25); }
+  p { margin:0; font-size:1.05rem; max-width:26ch; opacity:0.95; }
+  .hint { margin-top:0.4rem; font-size:0.8rem; opacity:0.7; letter-spacing:0.03em; }
+  .confetti { position:fixed; top:-12vh; font-size:1.6rem; pointer-events:none; will-change:transform; animation:fall linear forwards; }
+  @keyframes fall { to { transform:translateY(125vh) rotate(540deg); opacity:0; } }
+</style>
+<div class="card" id="card">
+  <h1>{{title}}</h1>
+  <p>{{message}}</p>
+  <span class="hint">Tap the card 🎉</span>
+</div>
+<script>
+(function(){
+  var card = document.getElementById('card');
+  var EMOJI = ['🎉','✨','🎈','🎊','💫','⭐','🥳'];
+  function burst(){
+    for (var i = 0; i < 26; i++) {
+      var s = document.createElement('span');
+      s.className = 'confetti';
+      s.textContent = EMOJI[Math.floor(Math.random() * EMOJI.length)];
+      s.style.left = (Math.random() * 100) + 'vw';
+      s.style.animationDuration = (1.6 + Math.random() * 1.6) + 's';
+      s.style.animationDelay = (Math.random() * 0.35) + 's';
+      document.body.appendChild(s);
+      (function(el){ setTimeout(function(){ el.remove(); }, 3800); })(s);
+    }
+  }
+  card.addEventListener('click', burst);
+})();
+</script>