Stage 17 round 6 (#11/#12): quick-game variant plaques with rules, flag, and move-limit

Each auto-match variant is now a lobby-style plaque: the display name with a flag on the
right (🇺🇸 / 🇷🇺; Erudit uses a bundled minimalist USSR flag SVG) and a one-line rules
summary below — bag size, the ё rule, and bonus differences, sourced from the engine
rulesets (Scrabble 100 · Скрэббл 104, ё a letter · Эрудит 131, ё=е, no centre ×2, +15).
The move-time limit (24h auto-match clock) is shown under the buttons. e2e locks it.

(Multiple-words-per-move is the same for every variant, so it is described in About/landing
rather than repeated on each button.)

ui/e2e/game.spec.ts

@@ -29,6 +29,14 @@ test('placing a tile and confirming via ✅ commits the move', async ({ page })
   await expect(page.locator('.make')).toBeHidden();
 });
 
+test('new game: variant buttons show a rules summary and the move-limit', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('button', { name: /guest/i }).click();
+  await page.getByRole('button', { name: /New/ }).click(); // lobby tab bar -> auto-match
+  await expect(page.locator('.vrules').first()).toBeVisible(); // per-variant rules summary
+  await expect(page.locator('.movelimit')).toBeVisible(); // turn-time under the buttons
+});
+
 test('a pending tile recalls on double-tap, not on a single tap', async ({ page }) => {
   await openGame(page);
   await page.locator('.rack .tile').first().click();

ui/public/flag-ussr.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 16" role="img" aria-label="СССР">
+  <rect width="24" height="16" fill="#cc0000"/>
+  <g fill="#ffd700">
+    <!-- five-pointed star -->
+    <path d="M6 1.9l.9 1.83 2.02.29-1.46 1.42.35 2.01L6 6.5l-1.81.94.35-2.01L3.08 4.01l2.02-.29z"/>
+    <!-- sickle (crescent blade) -->
+    <path d="M4.4 6.2A3.3 3.3 0 1 0 8 9.8 2.4 2.4 0 1 1 4.4 6.2Z"/>
+    <!-- hammer (handle + head) -->
+    <path d="M6.1 7.1l1.5 1.5-2.8 2.8-1.5-1.5zM6.9 6.0l1.9 1.9-.95.95-1.9-1.9z"/>
+  </g>
+</svg>

ui/src/lib/i18n/en.ts

@@ -45,6 +45,10 @@ export const en = {
   'new.erudit': 'Erudite',
   'new.find': 'Find a game',
   'new.searching': 'Looking for an opponent…',
+  'new.rulesEnglish': '100 tiles · bingo +50',
+  'new.rulesRussian': '104 tiles · ё is a letter · bingo +50',
+  'new.rulesErudit': '131 tiles · ё = е · no centre ×2 · bonus +15',
+  'new.moveLimit': 'Move time: {n} h 00 min',
 
   'game.bag': '{n} in the bag',
   'game.bagEmpty': 'Bag is empty',

ui/src/lib/i18n/ru.ts

@@ -46,6 +46,10 @@ export const ru: Record<MessageKey, string> = {
   'new.erudit': 'Эрудит',
   'new.find': 'Найти игру',
   'new.searching': 'Ищем соперника…',
+  'new.rulesEnglish': '100 фишек · бинго +50',
+  'new.rulesRussian': '104 фишки · ё — отдельная буква · бинго +50',
+  'new.rulesErudit': '131 фишка · ё = е · центр не удваивает · бонус +15',
+  'new.moveLimit': 'Время на ход: {n} ч. 00 мин.',
 
   'game.bag': '{n} в мешке',
   'game.bagEmpty': 'Мешок пуст',

ui/src/lib/variants.ts

@@ -28,6 +28,22 @@ export function variantNameKey(v: Variant): MessageKey {
   return ALL_VARIANTS.find((o) => o.id === v)?.label ?? 'new.english';
 }
 
+// VARIANT_RULES is the i18n key for each variant's one-line rules summary on the New Game
+// buttons (bag size, the ё rule, bonus differences), sourced from the engine rulesets.
+export const VARIANT_RULES: Record<Variant, MessageKey> = {
+  english: 'new.rulesEnglish',
+  russian_scrabble: 'new.rulesRussian',
+  erudit: 'new.rulesErudit',
+};
+
+// VARIANT_FLAG is the flag shown on a variant button: an emoji for the Scrabble variants;
+// Erudit uses the bundled USSR flag SVG (public/flag-ussr.svg), so its entry is empty.
+export const VARIANT_FLAG: Record<Variant, string> = {
+  english: '🇺🇸',
+  russian_scrabble: '🇷🇺',
+  erudit: '',
+};
+
 // VARIANT_LANGUAGE maps each variant to its game language. en -> English;
 // ru -> Russian + Эрудит.
 export const VARIANT_LANGUAGE: Record<Variant, 'en' | 'ru'> = { english: 'en', russian_scrabble: 'ru', erudit: 'ru' };

ui/src/screens/NewGame.svelte

@@ -6,7 +6,10 @@
   import { navigate } from '../lib/router.svelte';
   import { t, type MessageKey } from '../lib/i18n/index.svelte';
   import type { AccountRef, Variant } from '../lib/model';
-  import { availableVariants } from '../lib/variants';
+  import { availableVariants, VARIANT_FLAG, VARIANT_RULES } from '../lib/variants';
+
+  // The auto-match move clock (mirrors backend game.DefaultTurnTimeout = 24h).
+  const AUTO_MATCH_HOURS = 24;
 
   // The offered variants are gated by the languages the sign-in service supports
   // (Stage 15); the auto-match list and the friend-invite picker both use this.
@@ -141,9 +144,20 @@
         <p class="subtitle">{t('new.subtitle')}</p>
         <div class="variants">
           {#each variants as v (v.id)}
-            <button class="variant" onclick={() => find(v.id)}>{t(v.label)}</button>
+            <button class="variant" onclick={() => find(v.id)}>
+              <span class="vmain">
+                <span class="vname">{t(v.label)}</span>
+                {#if VARIANT_FLAG[v.id]}
+                  <span class="vflag">{VARIANT_FLAG[v.id]}</span>
+                {:else}
+                  <img class="vflag-img" src="flag-ussr.svg" alt="" />
+                {/if}
+              </span>
+              <span class="vrules">{t(VARIANT_RULES[v.id])}</span>
+            </button>
           {/each}
         </div>
+        <p class="movelimit">{t('new.moveLimit', { n: AUTO_MATCH_HOURS })}</p>
       {:else if friends.length === 0}
         <p class="subtitle">{t('new.noFriends')}</p>
       {:else}
@@ -207,15 +221,48 @@
     flex-direction: column;
     gap: 10px;
   }
+  /* A plaque per variant (like the lobby game cards): the name with its flag on the right,
+     and a one-line rules summary below. */
   .variant {
-    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 12px 14px;
     border: 1px solid var(--border);
     background: var(--surface);
     color: var(--text);
     border-radius: var(--radius);
+    text-align: left;
+    user-select: none;
+  }
+  .vmain {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+  .vname {
     font-size: 1.05rem;
     font-weight: 600;
-    user-select: none;
+  }
+  .vflag {
+    font-size: 1.3rem;
+    line-height: 1;
+  }
+  .vflag-img {
+    width: 1.6rem;
+    height: auto;
+    border-radius: 2px;
+  }
+  .vrules {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+  }
+  .movelimit {
+    margin: 0;
+    text-align: center;
+    color: var(--text-muted);
+    font-size: 0.85rem;
   }
   .seg {
     display: flex;