feat(ux): scan-to-cash-out, first-run walkthrough, plain language

Cashing out was the least approachable thing here: open your wallet,
create an invoice for exactly the right amount, copy it, come back, paste
it. That is the step people abandon, leaving sats behind.

LNURL-withdraw replaces it with a scan. The arcade shows a code, the
wallet pulls the funds, and the player never handles an invoice or types
an amount. The paste path is kept for wallets without LNURL support, but
folded away.

The withdraw token is a bearer instrument, so it is random, single-use,
bound to one account and one amount, and expires in five minutes. Sixteen
goroutines racing one code yield exactly one payment. Funds are debited
when the code is issued — otherwise a player could cash out and bet the
same sats before the wallet claimed them — and a sweep refunds any code
that is never scanned.

bech32 is verified against the BIP-173 vectors, including the invalid
ones. Getting this wrong produces codes that silently fail to scan with
no useful error for the player.

Adds a three-card first-run walkthrough, an explanation of what a
multiplier target means, and a one-time confirmation before a player's
first real-money action — the interface is deliberately frictionless, and
that is the one place a moment of friction is worth it.

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

cmd/arcade/static/app.js

@@ -143,6 +143,7 @@ async function signIn() {
   connect(currentGame);
   loadScratch();
   detectLightning();
+  startTour();
 }
 
 /* ---------------- api ---------------- */
@@ -390,6 +391,11 @@ async function onAction() {
   hint.className = 'hint';
   try {
     if (snapshot.state === 'betting_open' && !myBet) {
+      if (!(await confirmRealMoney(`Bet ${sats(stake)} sats?`,
+          'Rounds are played with real satoshis. If the game crashes before ' +
+          'you cash out, the stake is lost.'))) {
+        return;
+      }
       const r = await api('POST', '/api/bet', {
         game: currentGame, stake_msat: stake, nickname,
         auto_cashout: autoTarget(),
@@ -666,7 +672,59 @@ function startDepositPolling() {
   }, 5000);
 }
 
-async function withdraw() {
+/* Cash out by showing a code the player's wallet pulls from. The invoice-paste
+ * path stays available for wallets that cannot scan LNURL, but it is folded
+ * away because it is the step most people give up on. */
+async function withdrawByCode() {
+  const hint = $('wd-hint');
+  hint.textContent = '';
+  hint.className = 'hint';
+
+  let amount = Math.floor(Number($('wd-amt').value));
+  if (!Number.isFinite(amount) || amount < 1) {
+    hint.textContent = 'Pick an amount first.';
+    hint.className = 'hint bad';
+    return;
+  }
+
+  if (!(await confirmRealMoney(`Cash out ${amount.toLocaleString()} sats?`,
+      'This sends real satoshis to your wallet and removes them from your ' +
+      'arcade balance.'))) {
+    return;
+  }
+
+  let res;
+  try {
+    res = await api('POST', '/api/withdraw/code', { amount_sats: amount });
+  } catch (e) {
+    hint.textContent = e.message;
+    hint.className = 'hint bad';
+    return;
+  }
+
+  setBalance(res.balance_msat);
+
+  const wrap = $('wd-qr');
+  clear(wrap);
+  const matrix = qr.encode(res.lnurl);
+  if (matrix) {
+    wrap.appendChild(qr.render(matrix, { foreground: '#ffb000' }));
+  } else {
+    wrap.textContent = 'Could not render the code — copy it instead.';
+  }
+  $('wd-code').hidden = false;
+  $('wd-copy').dataset.code = res.lnurl;
+  $('wd-expiry').textContent =
+    `Scan within ${Math.round(res.expires_in / 60)} minutes. ` +
+    'If you do not, the sats come back to your balance.';
+
+  hint.className = 'hint good';
+  hint.textContent = 'Scan with your Lightning wallet.';
+  loadHistory();
+}
+
+/* The manual path, for wallets without LNURL support. */
+async function withdrawToInvoice() {
   const hint = $('wd-hint');
   hint.textContent = '';
   hint.className = 'hint';
@@ -679,20 +737,22 @@ async function withdraw() {
     return;
   }
   if (!Number.isFinite(amount) || amount < 1) {
-    hint.textContent = 'Enter an amount in sats.';
+    hint.textContent = 'Enter the amount the invoice is for.';
     hint.className = 'hint bad';
     return;
   }
+  if (!(await confirmRealMoney(`Send ${amount.toLocaleString()} sats?`,
+      'This pays the invoice you pasted with real satoshis.'))) {
+    return;
+  }
 
   try {
-    const res = await api('POST', '/api/withdraw',
-      { bolt11, amount_sats: amount });
+    const res = await api('POST', '/api/withdraw', { bolt11, amount_sats: amount });
     hint.className = 'hint good';
     hint.textContent = res.status === 'needs_approval'
-      ? 'Queued for operator approval — large withdrawals are reviewed.'
-      : 'Queued. It will be paid within about fifteen seconds.';
+      ? 'Queued for approval — large cash-outs are reviewed.'
+      : 'Queued. It should arrive within about fifteen seconds.';
     $('wd-bolt11').value = '';
-    $('wd-amt').value = '';
     await refreshBalance();
     loadHistory();
   } catch (e) {
@@ -701,6 +761,94 @@ async function withdraw() {
   }
 }
 
+/* ---------------- real-money confirmation ----------------
+ *
+ * Shown once, the first time a player moves real value. The interface is
+ * deliberately frictionless, and the one thing worth a moment of friction is
+ * someone not registering that the sats are real. */
+
+const CONFIRMED_KEY = 'quantum-arcade-understands-real-money';
+
+function confirmRealMoney(title, body) {
+  if (localStorage.getItem(CONFIRMED_KEY) === '1') return Promise.resolve(true);
+
+  return new Promise((resolve) => {
+    const overlay = $('tour');
+    overlay.classList.add('confirm');
+    overlay.hidden = false;
+    $('tour-step').textContent = 'Real satoshis';
+    $('tour-title').textContent = title;
+    $('tour-body').textContent = body;
+    clear($('tour-dots'));
+    $('tour-next').textContent = 'I understand';
+    $('tour-skip').textContent = 'Cancel';
+
+    const finish = (ok) => {
+      overlay.hidden = true;
+      overlay.classList.remove('confirm');
+      $('tour-skip').textContent = 'Skip';
+      if (ok) localStorage.setItem(CONFIRMED_KEY, '1');
+      resolve(ok);
+    };
+    $('tour-next').onclick = () => finish(true);
+    $('tour-skip').onclick = () => finish(false);
+  });
+}
+
+/* ---------------- first-run walkthrough ---------------- */
+
+const TOUR_KEY = 'quantum-arcade-tour-done';
+
+const TOUR = [
+  {
+    title: 'You are already signed in',
+    body: 'No account, no password. This device made a key that is your ' +
+          'identity. Keep the device, keep the balance.',
+  },
+  {
+    title: 'Bet, then get out',
+    body: 'The number climbs. Tap Cash out before it crashes and you keep ' +
+          'the multiple. Wait too long and the stake is gone.',
+  },
+  {
+    title: 'Nobody can rig it',
+    body: 'The result is sealed before betting opens and mixed with every ' +
+          'player\'s key. Tap Verify after any round to check it yourself.',
+  },
+];
+
+function startTour() {
+  if (localStorage.getItem(TOUR_KEY) === '1') return;
+
+  let i = 0;
+  const overlay = $('tour');
+  overlay.hidden = false;
+
+  const render = () => {
+    const step = TOUR[i];
+    $('tour-step').textContent = `Step ${i + 1} of ${TOUR.length}`;
+    $('tour-title').textContent = step.title;
+    $('tour-body').textContent = step.body;
+    $('tour-next').textContent = i === TOUR.length - 1 ? 'Play' : 'Got it';
+
+    const dots = $('tour-dots');
+    clear(dots);
+    TOUR.forEach((_, n) => dots.appendChild(el('span', { class: n === i ? 'on' : '' })));
+  };
+
+  const finish = () => {
+    overlay.hidden = true;
+    localStorage.setItem(TOUR_KEY, '1');
+  };
+
+  $('tour-next').onclick = () => {
+    if (++i >= TOUR.length) finish();
+    else render();
+  };
+  $('tour-skip').onclick = finish;
+  render();
+}
+
 /* ---------------- wallet ---------------- */
 
 async function loadHistory() {
@@ -861,7 +1009,17 @@ async function init() {
   $('auto-target').oninput = refreshAutoRow;
 
   $('do-deposit').onclick = createDeposit;
-  $('do-withdraw').onclick = withdraw;
+  $('do-withdraw').onclick = withdrawByCode;
+  $('do-withdraw-manual').onclick = withdrawToInvoice;
+  $('wd-copy').onclick = (e) =>
+    navigator.clipboard.writeText(e.currentTarget.dataset.code || '');
+  document.querySelectorAll('[data-wd]').forEach((b) => {
+    b.onclick = () => {
+      $('wd-amt').value = b.dataset.wd === 'all'
+        ? Math.floor(balanceMsat / 1000)
+        : b.dataset.wd;
+    };
+  });
   $('dep-copy').onclick = () =>
     navigator.clipboard.writeText($('dep-bolt11').textContent);
   $('dep-check').onclick = async () => {