Stage 7 (wip): UI shell, libs, mock transport, screens (lobby->game), e2e smoke

- plain Svelte 5 + TS + Vite (no SvelteKit); CSS-token design system (Telegram-ready), hash router, IndexedDB session
- pure libs: domain model, premium/value maps ported from solver, board replay, placement state machine, i18n en/ru
- in-memory mock transport + seed data; pnpm start runs lobby->active game->board with no backend
- board: pointer-drag + tap placement, MakeMove (popup / 1s-hold commit), two-state zoom, blank chooser, exchange, hint, word-check, chat
- Playwright smoke (mock) green; svelte-check clean; mock bundle ~37 KB gzip

ui/src/components/Header.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { navigate } from '../lib/router.svelte';
+
+  let { title, back, menu }: { title: string; back?: string; menu?: Snippet } = $props();
+</script>
+
+<header class="topbar">
+  {#if back}
+    <button class="icon" onclick={() => back && navigate(back)} aria-label="Back">◄</button>
+  {:else}
+    <span class="spacer"></span>
+  {/if}
+  <h1>{title}</h1>
+  <div class="end">{#if menu}{@render menu()}{/if}</div>
+</header>
+
+<style>
+  .topbar {
+    display: flex;
+    align-items: center;
+    gap: var(--gap);
+    padding: 10px var(--pad);
+    background: var(--bg-elev);
+    border-bottom: 1px solid var(--border);
+    position: sticky;
+    top: 0;
+    z-index: 5;
+  }
+  h1 {
+    font-size: 1.05rem;
+    margin: 0;
+    flex: 1;
+    text-align: center;
+    font-weight: 600;
+  }
+  .icon,
+  .spacer,
+  .end {
+    width: 40px;
+    height: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .end {
+    width: auto;
+    min-width: 40px;
+  }
+  .icon {
+    background: none;
+    border: none;
+    font-size: 1.1rem;
+    color: var(--text);
+    border-radius: var(--radius-sm);
+  }
+  .icon:hover {
+    background: var(--surface-2);
+  }
+</style>

ui/src/components/Modal.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let {
+    title = '',
+    onclose,
+    children,
+  }: { title?: string; onclose?: () => void; children?: Snippet } = $props();
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="backdrop" onclick={() => onclose?.()}>
+  <div class="sheet" role="dialog" aria-modal="true" tabindex="-1" onclick={(e) => e.stopPropagation()}>
+    {#if title}<h2>{title}</h2>{/if}
+    {@render children?.()}
+  </div>
+</div>
+
+<style>
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+    z-index: 40;
+  }
+  .sheet {
+    background: var(--surface);
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    padding: var(--pad);
+    width: min(94vw, 420px);
+    max-height: 86vh;
+    overflow: auto;
+  }
+  h2 {
+    margin: 0 0 10px;
+    font-size: 1.05rem;
+  }
+</style>

ui/src/components/Toast.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { app } from '../lib/app.svelte';
+</script>
+
+{#if app.toast}
+  <div class="toast {app.toast.kind}" role="status" aria-live="polite">{app.toast.text}</div>
+{/if}
+
+<style>
+  .toast {
+    position: fixed;
+    left: 50%;
+    bottom: 24px;
+    transform: translateX(-50%);
+    max-width: min(92vw, 420px);
+    padding: 10px 16px;
+    border-radius: var(--radius);
+    background: var(--surface);
+    color: var(--text);
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow);
+    z-index: 50;
+    text-align: center;
+  }
+  .error {
+    border-color: var(--danger);
+    color: var(--danger);
+  }
+</style>