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/Login.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  import { loginEmail, loginGuest, requestEmailCode } from '../lib/app.svelte';
+  import { t } from '../lib/i18n/index.svelte';
+
+  let email = $state('');
+  let code = $state('');
+  let stage = $state<'choose' | 'code'>('choose');
+  let busy = $state(false);
+
+  async function sendCode() {
+    if (!email.trim()) return;
+    busy = true;
+    const ok = await requestEmailCode(email.trim());
+    busy = false;
+    if (ok) stage = 'code';
+  }
+
+  async function signIn() {
+    busy = true;
+    await loginEmail(email.trim(), code.trim());
+    busy = false;
+  }
+</script>
+
+<main class="login">
+  <div class="card">
+    <h1>{t('app.title')}</h1>
+
+    <button class="primary" disabled={busy} onclick={() => loginGuest()}>
+      {t('login.guest')}
+    </button>
+
+    <div class="divider"><span>{t('login.email')}</span></div>
+
+    {#if stage === 'choose'}
+      <input
+        type="email"
+        autocomplete="email"
+        placeholder={t('login.emailPlaceholder')}
+        bind:value={email}
+      />
+      <button class="secondary" disabled={busy || !email.trim()} onclick={sendCode}>
+        {t('login.sendCode')}
+      </button>
+    {:else}
+      <p class="muted">{t('login.codeSent', { email })}</p>
+      <input
+        inputmode="numeric"
+        autocomplete="one-time-code"
+        placeholder={t('login.codePlaceholder')}
+        bind:value={code}
+      />
+      <button class="secondary" disabled={busy || !code.trim()} onclick={signIn}>
+        {t('login.signIn')}
+      </button>
+    {/if}
+  </div>
+</main>
+
+<style>
+  .login {
+    height: 100%;
+    display: grid;
+    place-items: center;
+    padding: 16px;
+  }
+  .card {
+    width: min(94vw, 360px);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  h1 {
+    margin: 0 0 8px;
+    text-align: center;
+  }
+  input {
+    padding: 11px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--bg);
+    color: var(--text);
+    font-size: 1rem;
+  }
+  button {
+    padding: 12px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border);
+    font-weight: 600;
+  }
+  .primary {
+    background: var(--accent);
+    color: var(--accent-text);
+    border-color: var(--accent);
+  }
+  .secondary {
+    background: var(--surface);
+    color: var(--text);
+  }
+  button:disabled {
+    opacity: 0.5;
+  }
+  .divider {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--text-muted);
+    font-size: 0.85rem;
+  }
+  .divider::before,
+  .divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--border);
+  }
+  .muted {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    margin: 0;
+  }
+</style>