Stage 8 polish: profile validation, finished-game UI, badge + Safari fixes

Owner-review follow-up on the Stage 8 branch:
- Friend code is copyable (📋 + toast). The lobby notification badge is fixed —
  it had inherited the hamburger-bar style — into a proper round count dot.
- Safari: min-width:0 on flex text inputs (friend code, profile, chat) so they
  shrink instead of pushing the adjacent button off-screen.
- Profile editing is validated on both the UI and the backend: display-name format
  (letters joined by single space/./_ separators, no leading/trailing/adjacent
  separators, <=32 runes), a UTC-offset timezone picker (account.ResolveZone parses
  ±HH:MM or a legacy IANA name), a 10-minute away grid capped at 12h (wrap-aware),
  and email format; Save is disabled and invalid fields red-bordered until valid.
  Language stays in Settings.
- In a game, an "add to friends" menu item flips to a disabled "request sent"; chat
  send/nudge became ⬆️/🛎️ icon buttons.
- A finished game drops its last-word highlight, hides Check word / Drop game,
  disables zoom, and draws an inert (greyed) footer instead of hiding it.

Tests: account validators (name/away/zone), UI profileValidation, e2e for the
finished-game footer/menu and the copy control. Docs (PLAN, ARCHITECTURE,
FUNCTIONAL +ru, UI_DESIGN) updated for the display-name rule, UTC-offset timezone
and the 12h away window.

ui/src/screens/Friends.svelte

@@ -67,6 +67,16 @@
   function codeTime(unix: number): string {
     return new Date(unix * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
   }
+
+  async function copyCode() {
+    if (!code) return;
+    try {
+      await navigator.clipboard.writeText(code.code);
+      showToast(t('friends.codeCopied'));
+    } catch {
+      // Clipboard may be unavailable (insecure context); leave the code on screen.
+    }
+  }
 </script>
 
 <Screen title={t('friends.title')} back="/">
@@ -88,7 +98,10 @@
         </div>
         {#if code}
           <div class="code" data-testid="friend-code">
-            <span class="codeval">{code.code}</span>
+            <div class="coderow">
+              <button class="codeval" onclick={copyCode}>{code.code}</button>
+              <button class="copy" onclick={copyCode} aria-label={t('friends.copy')}>📋</button>
+            </div>
             <span class="codehint">
               {t('friends.codeHint')} · {t('friends.codeExpires', { time: codeTime(code.expiresAtUnix) })}
             </span>
@@ -167,6 +180,7 @@
   }
   .codein {
     flex: 1;
+    min-width: 0;
     padding: 10px 12px;
     border: 1px solid var(--border);
     background: var(--surface);
@@ -184,10 +198,31 @@
     flex-direction: column;
     gap: 4px;
   }
+  .coderow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
   .codeval {
     font-size: 1.8rem;
     font-weight: 700;
     letter-spacing: 0.3em;
+    background: none;
+    border: none;
+    color: var(--text);
+    padding: 0;
+    cursor: pointer;
+    text-align: left;
+    font-family: inherit;
+  }
+  .copy {
+    flex: 0 0 auto;
+    background: none;
+    border: none;
+    font-size: 1.4rem;
+    padding: 4px;
+    cursor: pointer;
   }
   .codehint {
     font-size: 0.8rem;