Board: the referral explainer plays on the card

A 46 second video on how the referral mission works, on the card itself rather
than on a page nobody opens. It plays in place the way the teaser does on the
home page.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

public/app.js

@@ -64,8 +64,22 @@
       + '<p style="margin-top:10px"><span class="range">' + today + ' brought today</span> '
       + '<span style="color:var(--dim);font-size:12px">· ' + total + ' all time · ' + rf.earnedPol + ' POL earned</span></p>'
       + (people ? '<div class="ref-list">' + people + '</div>' : '<p style="color:var(--dim);font-size:12px;margin-top:10px">Nobody yet. One message is all it takes.</p>')
+      + '<div class="ref-watch"><button class="btn ghost sm" type="button" id="refPlay">▶ Watch: how it works (46s)</button></div>'
       + '</div>';
   }
+  // the explainer plays in place, the way the teaser does on the home page
+  function wireRefVideo() {
+    const b = $('refPlay'); if (!b) return;
+    b.addEventListener('click', () => {
+      const host = b.parentElement;
+      const v = document.createElement('video');
+      v.controls = true; v.autoplay = true; v.playsInline = true; v.className = 'ref-video';
+      v.poster = 'https://coolify-saasytop.nyc3.digitaloceanspaces.com/training/polhunter-bring-a-hunter.jpg?v=20260923a';
+      v.src = 'https://coolify-saasytop.nyc3.digitaloceanspaces.com/training/polhunter-bring-a-hunter.mp4?v=20260923a';
+      host.innerHTML = ''; host.appendChild(v);
+      v.play().catch(() => {});
+    });
+  }
   const IAP = 'https://instantadpay.com';
   function until(ms) { const s = Math.max(0, Math.round((ms - Date.now()) / 60000)); const h = Math.floor(s / 60), m = s % 60; return h ? h + 'h ' + m + 'm' : m + 'm'; }
   // no wallet on the InstantAdPay account yet: the three steps, in place of the missions
@@ -105,6 +119,7 @@
     else $('missions').innerHTML = (pool.spent ? '<div class="notice" style="grid-column:1/-1"><b>Today\u2019s POL pool is spent.</b> No more claims today. Claims reopen at midnight Central' + (pool.resetsAt ? ', in ' + until(pool.resetsAt) : '') + '.</div>' : '')
       + (board.missions.length ? board.missions.map(card).join('') : '<div class="card"><p>No missions are open right now. Check back soon.</p></div>');
     if ($('refSlot')) $('refSlot').innerHTML = board.me.wallet ? referralCard() : '';
+    wireRefVideo();
     const rc = $('refCopy');
     if (rc) rc.addEventListener('click', async () => {
       const v = $('refLink').value;