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