feat(ui): first-run onboarding coachmarks

A one-time coachmark overlay walks a new player through the lobby and their
first game board: a light dimmed layer draws one tail-pointed hint bubble at a
time, advancing on a tap anywhere and removing itself for good after the last
hint. Two independent series (lobby: settings/stats/new game; game:
header/pass-exchange/hints/shuffle/rack), gated by a per-device persisted flag
and marked done only after the last hint, so an interrupted run replays from
the start. A deep-link into Settings -> Friends still triggers the lobby series
on the first trip back to the lobby.

Targets carry a data-coach attribute, so one positioning engine anchors the
bubble in both portrait and landscape, re-measuring each frame until the
geometry settles (route slide, hidden-banner reflow, fonts). The promo banner
hides while the overlay is up (app.coachActive); a hidden DebugPanel "Reset
visited" control replays the walk-through. Off by default in the mock build so
the Playwright smoke is unaffected; ?coach forces it on for the dedicated e2e.

Pure geometry (step lists, nextVisibleStep, placeBubble) in lib/coachmark.ts
(unit-tested); Coachmark.svelte renders. Docs: FUNCTIONAL(+ru) onboarding
story, UI_DESIGN coachmark section.

ui/src/screens/Lobby.svelte

@@ -332,13 +332,13 @@
   {#snippet tabbar()}
     <TabBar>
       <button class="tab" disabled={atGameLimit} onclick={() => navigate('/new')}>
-        <span class="sq">🎲</span><span class="lbl">{t('lobby.new')}</span>
+        <span class="sq" data-coach="lobby-new">🎲</span><span class="lbl">{t('lobby.new')}</span>
       </button>
       <button class="tab" onclick={() => navigate('/stats')}>
-        <span class="sq">✏️</span><span class="lbl">{t('lobby.stats')}</span>
+        <span class="sq" data-coach="lobby-stats">✏️</span><span class="lbl">{t('lobby.stats')}</span>
       </button>
       <button class="tab" onclick={() => navigate('/settings')}>
-        <span class="sq">⚙️{#if settingsBadge > 0}<span class="badge">{settingsBadge}</span>{/if}</span>
+        <span class="sq" data-coach="lobby-settings">⚙️{#if settingsBadge > 0}<span class="badge">{settingsBadge}</span>{/if}</span>
         <span class="lbl">{t('lobby.settings')}</span>
       </button>
     </TabBar>