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/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>