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/game/Chat.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import type { ChatMessage } from '../lib/model';
+  import { t } from '../lib/i18n/index.svelte';
+
+  let {
+    messages,
+    myId,
+    busy,
+    onsend,
+    onnudge,
+  }: {
+    messages: ChatMessage[];
+    myId: string;
+    busy: boolean;
+    onsend: (text: string) => void;
+    onnudge: () => void;
+  } = $props();
+
+  let text = $state('');
+
+  function send() {
+    const v = text.trim();
+    if (!v) return;
+    onsend(v);
+    text = '';
+  }
+</script>
+
+<div class="chat">
+  <div class="list">
+    {#if messages.length === 0}
+      <p class="empty">{t('chat.empty')}</p>
+    {/if}
+    {#each messages as m (m.id)}
+      {#if m.kind === 'nudge'}
+        <div class="note">{t('chat.nudge')}</div>
+      {:else}
+        <div class="msg" class:mine={m.senderId === myId}>{m.body}</div>
+      {/if}
+    {/each}
+  </div>
+  <div class="input">
+    <input
+      maxlength="60"
+      placeholder={t('chat.placeholder')}
+      bind:value={text}
+      onkeydown={(e) => e.key === 'Enter' && send()}
+    />
+    <button onclick={send} disabled={busy}>{t('chat.send')}</button>
+    <button class="nudge" onclick={onnudge} disabled={busy}>{t('chat.nudge')}</button>
+  </div>
+</div>
+
+<style>
+  .chat {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    height: 56vh;
+  }
+  .list {
+    flex: 1;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 4px;
+  }
+  .empty {
+    color: var(--text-muted);
+    text-align: center;
+    margin: auto;
+  }
+  .msg {
+    align-self: flex-start;
+    max-width: 80%;
+    padding: 7px 11px;
+    border-radius: 12px;
+    background: var(--surface-2);
+  }
+  .msg.mine {
+    align-self: flex-end;
+    background: var(--accent);
+    color: var(--accent-text);
+  }
+  .note {
+    align-self: center;
+    font-size: 0.82rem;
+    color: var(--text-muted);
+    font-style: italic;
+  }
+  .input {
+    display: flex;
+    gap: 6px;
+  }
+  .input input {
+    flex: 1;
+    padding: 10px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--bg);
+    color: var(--text);
+  }
+  .input button {
+    padding: 10px 12px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--text);
+    border-radius: var(--radius-sm);
+    font-weight: 600;
+  }
+</style>