Stage 17 round 6 (#13/About): About screen content + app version from git describe

- About screen: prominent localized title (Scrabble / Эрудит (Скрэббл)), a rules link
  (en/ru Wikipedia), and the Random-game / Game-with-friends sections; copy lives in a
  shared aboutContent module (the landing will reuse it). The random-game move limit
  inlines the 24h auto-match clock.
- App version: Vite define __APP_VERSION__ from VITE_APP_VERSION (default 'dev'), wired as
  a Docker build-arg sourced from `git describe --tags --always` in the deploy step — no
  manual version bumps. The fallback keeps a plain/local build working.

ui/src/lib/aboutContent.ts

@@ -0,0 +1,62 @@
+// Localised "About" / landing copy, shared by the About screen and the public landing
+// page (Stage 17). Kept out of the flat i18n catalog because it is structured (a heading,
+// a rules link, two bulleted sections) and only used in these two long-form places.
+
+import type { Locale } from './i18n/index.svelte';
+
+export interface AboutContent {
+  /** Prominent heading: "Scrabble" / "Эрудит (Скрэббл)". */
+  title: string;
+  rulesUrl: string;
+  /** Text before the rules link. */
+  rulesPrefix: string;
+  /** The rules link label. */
+  rulesLink: string;
+  randomTitle: string;
+  /** The "respect the opponent's time" note (rendered with a ❗️ prefix). */
+  randomRespect: string;
+  random: string[];
+  friendsTitle: string;
+  friends: string[];
+}
+
+/**
+ * aboutContent returns the localised About/landing copy. hours is the auto-match move clock
+ * (backend game.DefaultTurnTimeout), inlined into the random-game time-limit bullet.
+ */
+export function aboutContent(locale: Locale, hours: number): AboutContent {
+  if (locale === 'ru') {
+    return {
+      title: 'Эрудит (Скрэббл)',
+      rulesUrl: 'https://ru.wikipedia.org/wiki/Скрэббл',
+      rulesPrefix: 'Основные ',
+      rulesLink: 'правила игры',
+      randomTitle: 'Случайная игра',
+      randomRespect: 'Уважайте личное время соперника, будьте терпеливы.',
+      random: [
+        'В игре двое соперников.',
+        'Каждому доступна 1 подсказка в новой партии.',
+        `Лимит времени на ход: ${hours} ч. 00 минут.`,
+        'Время отсутствия задаётся в профиле и продлевает лимит.',
+      ],
+      friendsTitle: 'Игра с друзьями',
+      friends: ['До 4-х участников.', 'Количество подсказок регулируется.', 'Произвольный лимит времени.'],
+    };
+  }
+  return {
+    title: 'Scrabble',
+    rulesUrl: 'https://en.wikipedia.org/wiki/Scrabble',
+    rulesPrefix: 'Basic ',
+    rulesLink: 'game rules',
+    randomTitle: 'Random game',
+    randomRespect: "Respect your opponent's time, be patient.",
+    random: [
+      'Two opponents per game.',
+      'Each player gets 1 hint per new game.',
+      `Move time limit: ${hours} h 00 min.`,
+      'An away window set in your profile extends the limit.',
+    ],
+    friendsTitle: 'Game with friends',
+    friends: ['Up to 4 players.', 'The number of hints is configurable.', 'A custom time limit.'],
+  };
+}

ui/src/screens/About.svelte

@@ -1,14 +1,37 @@
 <script lang="ts">
   import Screen from '../components/Screen.svelte';
   import { t } from '../lib/i18n/index.svelte';
+  import { app } from '../lib/app.svelte';
+  import { aboutContent } from '../lib/aboutContent';
 
-  const version = '0.7.0';
+  // The auto-match move clock (mirrors backend game.DefaultTurnTimeout = 24h).
+  const AUTO_MATCH_HOURS = 24;
+  const version = __APP_VERSION__;
+  const c = $derived(aboutContent(app.locale, AUTO_MATCH_HOURS));
 </script>
 
 <Screen title={t('about.title')} back="/">
   <div class="page">
-    <h2>{t('app.title')}</h2>
-    <p>{t('about.description')}</p>
+    <h1>{c.title}</h1>
+    <p>
+      {c.rulesPrefix}<a href={c.rulesUrl} target="_blank" rel="noopener noreferrer">{c.rulesLink}</a>.
+    </p>
+
+    <section>
+      <h2>{c.randomTitle}</h2>
+      <p class="respect">❗️{c.randomRespect}</p>
+      <ul>
+        {#each c.random as item (item)}<li>{item}</li>{/each}
+      </ul>
+    </section>
+
+    <section>
+      <h2>{c.friendsTitle}</h2>
+      <ul>
+        {#each c.friends as item (item)}<li>{item}</li>{/each}
+      </ul>
+    </section>
+
     <p class="muted">{t('about.version', { v: version })}</p>
   </div>
 </Screen>
@@ -16,8 +39,41 @@
 <style>
   .page {
     padding: var(--pad);
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+  h1 {
+    margin: 0;
+    font-size: 1.5rem;
+  }
+  h2 {
+    margin: 0 0 6px;
+    font-size: 1.05rem;
+    color: var(--text-muted);
+  }
+  section {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  ul {
+    margin: 0;
+    padding-left: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  a {
+    color: var(--accent);
+  }
+  .respect {
+    margin: 0;
+    font-weight: 600;
   }
   .muted {
     color: var(--text-muted);
+    font-size: 0.9rem;
+    margin: 0;
   }
 </style>

ui/src/vite-env.d.ts

@@ -9,3 +9,6 @@ interface ImportMetaEnv {
 interface ImportMeta {
   readonly env: ImportMetaEnv;
 }
+
+/** App version string, injected by Vite's define from `git describe` at build time. */
+declare const __APP_VERSION__: string;