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/screens/Settings.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import Header from '../components/Header.svelte';
+  import { app, setLocalePref, setReduceMotion, setTheme } from '../lib/app.svelte';
+  import { t, type Locale, type MessageKey } from '../lib/i18n/index.svelte';
+  import type { ThemePref } from '../lib/theme';
+
+  const themes: ThemePref[] = ['auto', 'light', 'dark'];
+  const themeLabel: Record<ThemePref, MessageKey> = {
+    auto: 'settings.themeAuto',
+    light: 'settings.themeLight',
+    dark: 'settings.themeDark',
+  };
+  const locales: Locale[] = ['en', 'ru'];
+</script>
+
+<Header title={t('settings.title')} back="/" />
+<main class="page">
+  <section>
+    <h3>{t('settings.theme')}</h3>
+    <div class="seg">
+      {#each themes as th (th)}
+        <button class="opt" class:active={app.theme === th} onclick={() => setTheme(th)}>
+          {t(themeLabel[th])}
+        </button>
+      {/each}
+    </div>
+  </section>
+
+  <section>
+    <h3>{t('settings.language')}</h3>
+    <div class="seg">
+      {#each locales as lc (lc)}
+        <button class="opt" class:active={app.locale === lc} onclick={() => setLocalePref(lc)}>
+          {t(lc === 'en' ? 'lang.en' : 'lang.ru')}
+        </button>
+      {/each}
+    </div>
+  </section>
+
+  <section>
+    <label class="row">
+      <span>{t('settings.reduceMotion')}</span>
+      <input
+        type="checkbox"
+        checked={app.reduceMotion}
+        onchange={(e) => setReduceMotion(e.currentTarget.checked)}
+      />
+    </label>
+  </section>
+</main>
+
+<style>
+  .page {
+    padding: var(--pad);
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  h3 {
+    margin: 0 0 8px;
+    font-size: 0.95rem;
+    color: var(--text-muted);
+  }
+  .seg {
+    display: flex;
+    gap: 8px;
+  }
+  .opt {
+    flex: 1;
+    padding: 10px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--text);
+    border-radius: var(--radius-sm);
+  }
+  .opt.active {
+    background: var(--accent);
+    color: var(--accent-text);
+    border-color: var(--accent);
+  }
+  .row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+</style>