Stage 7 polish: app shell + nav + lobby + settings (Parts A/B/C)

- Screen.svelte shell: nav bar grows, ad+content+tabbar pinned bottom (mobile feel)
- AdBanner.svelte + banner.ts rotator (params, mock long/short, linkify); Header CSS chevron + grow; Menu (bigger CSS hamburger); TabBar + HoldConfirm shared components; user-select:none
- Lobby: hide-empty sections, tab order New/Tournaments/Stats, place-based result badges (result.ts)
- Settings: Board style > Labels (beginner/classic/none) + prefs plumbing (boardlabels.ts); i18n keys + ru mirror

ui/src/screens/Settings.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
-  import Header from '../components/Header.svelte';
-  import { app, setLocalePref, setReduceMotion, setTheme } from '../lib/app.svelte';
+  import Screen from '../components/Screen.svelte';
+  import {
+    app,
+    setBoardLabels,
+    setLocalePref,
+    setReduceMotion,
+    setTheme,
+  } from '../lib/app.svelte';
   import { t, type Locale, type MessageKey } from '../lib/i18n/index.svelte';
   import type { ThemePref } from '../lib/theme';
+  import type { BoardLabelMode } from '../lib/boardlabels';
 
   const themes: ThemePref[] = ['auto', 'light', 'dark'];
   const themeLabel: Record<ThemePref, MessageKey> = {
@@ -11,43 +18,62 @@
     dark: 'settings.themeDark',
   };
   const locales: Locale[] = ['en', 'ru'];
+  const labelModes: BoardLabelMode[] = ['beginner', 'classic', 'none'];
+  const labelModeKey: Record<BoardLabelMode, MessageKey> = {
+    beginner: 'settings.labelsBeginner',
+    classic: 'settings.labelsClassic',
+    none: 'settings.labelsNone',
+  };
 </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>
+<Screen title={t('settings.title')} back="/">
+  <div 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>
+      <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>
+    <section>
+      <h3>{t('settings.boardStyle')}</h3>
+      <div class="sub">{t('settings.boardLabels')}</div>
+      <div class="seg">
+        {#each labelModes as lm (lm)}
+          <button class="opt" class:active={app.boardLabels === lm} onclick={() => setBoardLabels(lm)}>
+            {t(labelModeKey[lm])}
+          </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>
+  </div>
+</Screen>
 
 <style>
   .page {
@@ -61,6 +87,11 @@
     font-size: 0.95rem;
     color: var(--text-muted);
   }
+  .sub {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    margin-bottom: 6px;
+  }
   .seg {
     display: flex;
     gap: 8px;
@@ -72,6 +103,7 @@
     background: var(--surface);
     color: var(--text);
     border-radius: var(--radius-sm);
+    user-select: none;
   }
   .opt.active {
     background: var(--accent);