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/e2e/social.spec.ts

@@ -19,9 +19,10 @@ test('friends: issue a code, accept an incoming request, redeem a code', async (
   await loginLobby(page);
   await openFriends(page);
 
-  // Issue a one-time code — it is shown to share.
+  // Issue a one-time code — it is shown to share, with a copy control.
   await page.getByRole('button', { name: /Show my code/i }).click();
   await expect(page.getByTestId('friend-code')).toContainText('246813');
+  await expect(page.getByRole('button', { name: 'Copy' })).toBeVisible();
 
   // The seeded incoming request (Rick) can be accepted; the requests section clears.
   await expect(page.getByText('Friend requests')).toBeVisible();
@@ -73,3 +74,15 @@ test('GCG export is hidden for an active game', async ({ page }) => {
   await page.locator('.burger').first().click();
   await expect(page.getByRole('button', { name: /Export GCG/ })).toHaveCount(0);
 });
+
+test('finished game draws an inert footer and trims the live-only menu', async ({ page }) => {
+  await loginLobby(page);
+  await page.getByRole('button', { name: /Kaya/ }).click(); // finished game vs Kaya
+  await expect(page.locator('[data-cell]').first()).toBeVisible();
+  // The footer (tab bar) is drawn but its controls are disabled in a finished game.
+  await expect(page.locator('.tab').first()).toBeDisabled();
+  // The menu drops Check word and Drop game once the game is over.
+  await page.locator('.burger').first().click();
+  await expect(page.getByRole('button', { name: 'Check word' })).toHaveCount(0);
+  await expect(page.getByRole('button', { name: 'Drop game' })).toHaveCount(0);
+});

ui/src/components/Menu.svelte

@@ -6,6 +6,7 @@
     label: string;
     onclick: () => void;
     badge?: number;
+    disabled?: boolean;
   }
   let { items, badge = 0 }: { items: MenuItem[]; badge?: number } = $props();
   let open = $state(false);
@@ -27,7 +28,7 @@
     <div class="backdrop" onclick={() => (open = false)}></div>
     <div class="dropdown">
       {#each items as it (it.label)}
-        <button onclick={() => pick(it.onclick)}>
+        <button onclick={() => pick(it.onclick)} disabled={it.disabled}>
           <span>{it.label}</span>
           {#if it.badge}<span class="idot">{it.badge}</span>{/if}
         </button>
@@ -82,7 +83,7 @@
     text-align: center;
     font-weight: 700;
   }
-  .burger span {
+  .burger span:not(.dot) {
     display: block;
     height: 3px;
     background: var(--text);
@@ -120,7 +121,11 @@
     user-select: none;
     -webkit-user-select: none;
   }
-  .dropdown button:hover {
+  .dropdown button:hover:not(:disabled) {
     background: var(--surface-2);
   }
+  .dropdown button:disabled {
+    color: var(--text-muted);
+    opacity: 0.6;
+  }
 </style>

ui/src/game/Chat.svelte

@@ -46,8 +46,8 @@
       bind:value={text}
       onkeydown={(e) => e.key === 'Enter' && send()}
     />
-    <button onclick={send} disabled={busy}>{t('chat.send')}</button>
-    <button class="nudge" onclick={onnudge} disabled={busy}>{t('chat.nudge')}</button>
+    <button class="iconbtn" onclick={send} disabled={busy} aria-label={t('chat.send')}>⬆️</button>
+    <button class="iconbtn" onclick={onnudge} disabled={busy} aria-label={t('chat.nudge')}>🛎️</button>
   </div>
 </div>
 
@@ -95,18 +95,21 @@
   }
   .input input {
     flex: 1;
+    min-width: 0;
     padding: 10px;
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     background: var(--bg);
     color: var(--text);
   }
-  .input button {
-    padding: 10px 12px;
+  .iconbtn {
+    flex: 0 0 auto;
+    padding: 8px 12px;
     border: 1px solid var(--border);
     background: var(--surface);
     color: var(--text);
     border-radius: var(--radius-sm);
-    font-weight: 600;
+    font-size: 1.25rem;
+    line-height: 1;
   }
 </style>

ui/src/game/Game.svelte

@@ -66,7 +66,7 @@
   // Highlight the last word with a dark tile bg; while placing, only the pending tiles
   // are highlighted. It flashes when the opponent just moved and it is now our turn.
   const highlight = $derived(
-    placement.pending.length > 0 || !lastPlay
+    placement.pending.length > 0 || !lastPlay || (!!view && view.game.status !== 'active')
       ? new Set<string>()
       : new Set(lastPlay.tiles.map((tt) => `${tt.row},${tt.col}`)),
   );
@@ -378,9 +378,13 @@
     }
   }
 
+  let requested = $state(new Set<string>());
+  const noop = () => {};
+
   async function addFriend(accountId: string) {
     try {
       await gateway.friendRequest(accountId);
+      requested = new Set([...requested, accountId]);
       showToast(t('friends.requestSent'));
     } catch (e) {
       handleError(e);
@@ -391,15 +395,21 @@
     view ? view.game.seats.filter((s) => s.accountId !== app.session?.userId) : [],
   );
 
+  // In a finished game the menu drops Check word and Drop game, gains Export GCG, and
+  // an "add to friends" item flips to a disabled "request sent" once tapped.
   const menuItems = $derived([
     { label: t('game.history'), onclick: () => (historyOpen = true) },
     { label: t('game.chat'), onclick: openChat },
-    { label: t('game.checkWord'), onclick: openCheck },
+    ...(gameOver ? [] : [{ label: t('game.checkWord'), onclick: openCheck }]),
     ...(view?.game.status === 'finished' ? [{ label: t('game.exportGcg'), onclick: exportGcg }] : []),
     ...(!app.profile?.isGuest
-      ? opponents.map((s) => ({ label: `${t('friends.addFromGame')}: ${s.displayName}`, onclick: () => addFriend(s.accountId) }))
+      ? opponents.map((s) =>
+          requested.has(s.accountId)
+            ? { label: t('game.requestSent'), onclick: noop, disabled: true }
+            : { label: `${t('friends.addFromGame')}: ${s.displayName}`, onclick: () => addFriend(s.accountId) },
+        )
       : []),
-    { label: t('game.dropGame'), onclick: () => (resignOpen = true) },
+    ...(gameOver ? [] : [{ label: t('game.dropGame'), onclick: () => (resignOpen = true) }]),
   ]);
 </script>
 
@@ -454,7 +464,7 @@
           locale={app.locale}
           {focus}
           oncell={onCell}
-          ontogglezoom={() => (zoomed = !zoomed)}
+          ontogglezoom={() => { if (!gameOver) zoomed = !zoomed; }}
         />
       </div>
     </div>
@@ -471,28 +481,28 @@
       </span>
     </div>
 
-    {#if !gameOver}
-      <div class="rack-row">
-        <div class="rack-wrap">
-          <Rack {slots} {variant} {selected} ondown={onRackDown} />
-        </div>
-        {#if placement.pending.length > 0}
-          <HoldConfirm triggerClass="make" onhold={commit}>
-            {#snippet trigger()}<span class="flag">🏁</span>{/snippet}
-            {#snippet popover(close)}
-              <button class="pop go" onclick={() => { close(); commit(); }}>{t('game.makeMove')} ✅</button>
-              <button class="pop rs" onclick={() => { close(); resetPlacement(); }}>{t('game.reset')} ❌</button>
-            {/snippet}
-          </HoldConfirm>
-        {/if}
+    <!-- The footer is drawn even when the game is over (rack + tab bar), but inert:
+         a finished game shows the final rack greyed out and the controls disabled. -->
+    <div class="rack-row" class:inert={gameOver}>
+      <div class="rack-wrap">
+        <Rack {slots} {variant} {selected} ondown={onRackDown} />
       </div>
-    {/if}
+      {#if !gameOver && placement.pending.length > 0}
+        <HoldConfirm triggerClass="make" onhold={commit}>
+          {#snippet trigger()}<span class="flag">🏁</span>{/snippet}
+          {#snippet popover(close)}
+            <button class="pop go" onclick={() => { close(); commit(); }}>{t('game.makeMove')} ✅</button>
+            <button class="pop rs" onclick={() => { close(); resetPlacement(); }}>{t('game.reset')} ❌</button>
+          {/snippet}
+        </HoldConfirm>
+      {/if}
+    </div>
   {:else}
     <p class="loading">{t('common.loading')}</p>
   {/if}
 
   {#snippet tabbar()}
-    {#if view && !gameOver}
+    {#if view}
       <TabBar>
         <button class="tab" disabled={busy || !isMyTurn || bagEmpty} onclick={openExchange}>
           <span class="sq">🔄</span><span class="lbl">{t('game.draw')}</span>
@@ -508,7 +518,7 @@
           {/snippet}
           {#snippet popover(close)}<button class="pop go" onclick={() => { close(); doHint(); }}>{t('game.confirm')} ✅</button>{/snippet}
         </HoldConfirm>
-        <button class="tab" disabled={busy || placement.pending.length > 0} onclick={shuffle}>
+        <button class="tab" disabled={busy || gameOver || placement.pending.length > 0} onclick={shuffle}>
           <span class="sq">🔀</span>
         </button>
       </TabBar>
@@ -697,6 +707,10 @@
     align-items: stretch;
     padding: 0 var(--pad) 6px;
   }
+  .rack-row.inert {
+    pointer-events: none;
+    opacity: 0.55;
+  }
   .rack-wrap {
     flex: 1;
     min-width: 0;

ui/src/lib/i18n/en.ts

@@ -178,6 +178,8 @@ export const en = {
   'friends.enterCode': 'Have a code? Add a friend',
   'friends.codePlaceholder': '6-digit code',
   'friends.redeem': 'Add',
+  'friends.copy': 'Copy',
+  'friends.codeCopied': 'Code copied.',
   'friends.added': 'Added {name}.',
   'friends.blockedList': 'Blocked players',
   'friends.unblock': 'Unblock',
@@ -212,6 +214,7 @@ export const en = {
 
   'game.exportGcg': 'Export GCG',
   'game.gcgActiveOnly': 'Available once the game is finished.',
+  'game.requestSent': 'Request sent',
 
   'time.minutes': '{n} min',
   'time.hours': '{n} h',

ui/src/lib/i18n/ru.ts

@@ -179,6 +179,8 @@ export const ru: Record<MessageKey, string> = {
   'friends.enterCode': 'Есть код? Добавить друга',
   'friends.codePlaceholder': 'Код из 6 цифр',
   'friends.redeem': 'Добавить',
+  'friends.copy': 'Копировать',
+  'friends.codeCopied': 'Код скопирован.',
   'friends.added': 'Добавлен(а) {name}.',
   'friends.blockedList': 'Заблокированные',
   'friends.unblock': 'Разблокировать',
@@ -213,6 +215,7 @@ export const ru: Record<MessageKey, string> = {
 
   'game.exportGcg': 'Экспорт GCG',
   'game.gcgActiveOnly': 'Доступно после завершения игры.',
+  'game.requestSent': 'Запрос отправлен',
 
   'time.minutes': '{n} мин',
   'time.hours': '{n} ч',

ui/src/lib/profileValidation.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import { awayDurationOk, browserOffset, isOffsetZone, validDisplayName, validEmail } from './profileValidation';
+
+describe('validDisplayName', () => {
+  it.each([
+    ['Kaya', true],
+    ['Кая', true],
+    ['Name_P. Last', true],
+    ['Mr.Smith', true],
+    ['Mr. Smith', true],
+    ['  Kaya  ', true],
+    ['Name P._Last', false],
+    ['Name  Last', false],
+    ['_Name', false],
+    ['Name.', false],
+    ['Name2', false],
+    ['', false],
+    ['a'.repeat(33), false],
+  ])('%s -> %s', (name, ok) => {
+    expect(validDisplayName(name)).toBe(ok);
+  });
+});
+
+describe('validEmail', () => {
+  it('accepts a normal address', () => expect(validEmail('you@example.com')).toBe(true));
+  it('rejects a missing domain', () => expect(validEmail('you@')).toBe(false));
+  it('rejects spaces', () => expect(validEmail('a b@x.com')).toBe(false));
+});
+
+describe('awayDurationOk', () => {
+  it.each([
+    ['22:00', '06:00', true],
+    ['00:00', '12:00', true],
+    ['08:00', '21:00', false],
+    ['07:00', '07:00', true],
+    ['20:00', '09:00', false],
+  ])('%s-%s -> %s', (s, e, ok) => expect(awayDurationOk(s, e)).toBe(ok));
+});
+
+describe('timezone helpers', () => {
+  it('detects offset zones', () => {
+    expect(isOffsetZone('+03:00')).toBe(true);
+    expect(isOffsetZone('Europe/Moscow')).toBe(false);
+  });
+  it('formats the browser offset as ±HH:MM', () => {
+    expect(browserOffset()).toMatch(/^[+-]\d{2}:\d{2}$/);
+  });
+});

ui/src/lib/profileValidation.ts

@@ -0,0 +1,79 @@
+// Profile-edit validation, mirroring the backend (account/profile.go,
+// account/timezone.go) so the form can disable Save and flag fields before a round
+// trip. Pure and unit-tested.
+
+/** maxDisplayName caps the editable display name in runes. */
+export const maxDisplayName = 32;
+
+/** maxAwayMinutes bounds the daily away window's length (12 h). */
+export const maxAwayMinutes = 12 * 60;
+
+// Unicode letters joined by single space / "." / "_" separators, where a "." or "_"
+// may be followed by a single space. No leading/trailing separator and no adjacent
+// separators except "<dot|underscore> <space>". Same rule as the Go displayNameRe.
+const displayNameRe = /^\p{L}+(?:(?:[._] ?| )\p{L}+)*$/u;
+
+/** displayNameError returns true when the trimmed name is a valid display name. */
+export function validDisplayName(raw: string): boolean {
+  const name = raw.trim();
+  return name.length > 0 && [...name].length <= maxDisplayName && displayNameRe.test(name);
+}
+
+// A pragmatic email check (the backend re-validates with net/mail). Rejects spaces
+// and requires a local part, an @, and a dotted domain.
+const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+/** validEmail reports whether email is a plausible address. */
+export function validEmail(email: string): boolean {
+  return emailRe.test(email.trim());
+}
+
+/** toMinutes parses an "HH:MM" time-of-day into minutes since midnight, or null. */
+export function toMinutes(hhmm: string): number | null {
+  const m = /^(\d{2}):(\d{2})$/.exec(hhmm);
+  if (!m) return null;
+  const h = Number(m[1]);
+  const min = Number(m[2]);
+  if (h > 23 || min > 59) return null;
+  return h * 60 + min;
+}
+
+/** awayDurationOk reports whether the away window (wrapping midnight) is <= 12 h. */
+export function awayDurationOk(start: string, end: string): boolean {
+  const s = toMinutes(start);
+  const e = toMinutes(end);
+  if (s === null || e === null) return false;
+  let d = e - s;
+  if (d < 0) d += 24 * 60;
+  return d <= maxAwayMinutes;
+}
+
+/** The real-world set of unique UTC offsets, for the timezone dropdown. */
+export const timezoneOffsets: string[] = [
+  '-12:00', '-11:00', '-10:00', '-09:30', '-09:00', '-08:00', '-07:00', '-06:00',
+  '-05:00', '-04:00', '-03:30', '-03:00', '-02:00', '-01:00', '+00:00', '+01:00',
+  '+02:00', '+03:00', '+03:30', '+04:00', '+04:30', '+05:00', '+05:30', '+05:45',
+  '+06:00', '+06:30', '+07:00', '+08:00', '+08:45', '+09:00', '+09:30', '+10:00',
+  '+10:30', '+11:00', '+12:00', '+12:45', '+13:00', '+14:00',
+];
+
+/** isOffsetZone reports whether a stored timezone is a "±HH:MM" offset. */
+export function isOffsetZone(tz: string): boolean {
+  return /^[+-]\d{2}:\d{2}$/.test(tz);
+}
+
+/** browserOffset returns the client's current UTC offset as "±HH:MM". */
+export function browserOffset(): string {
+  const mins = -new Date().getTimezoneOffset(); // getTimezoneOffset is minutes behind UTC
+  const sign = mins < 0 ? '-' : '+';
+  const abs = Math.abs(mins);
+  const hh = String(Math.floor(abs / 60)).padStart(2, '0');
+  const mm = String(abs % 60).padStart(2, '0');
+  return `${sign}${hh}:${mm}`;
+}
+
+/** Hour options "00".."23" for the away-window pickers. */
+export const awayHours: string[] = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
+
+/** Minute options on a 10-minute step. */
+export const awayMinutes: string[] = ['00', '10', '20', '30', '40', '50'];

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;

ui/src/screens/Profile.svelte

@@ -3,35 +3,70 @@
   import { app, handleError, logout, showToast } from '../lib/app.svelte';
   import { gateway } from '../lib/gateway';
   import { t } from '../lib/i18n/index.svelte';
-  import type { ProfileUpdate } from '../lib/model';
+  import {
+    awayDurationOk,
+    awayHours,
+    awayMinutes,
+    browserOffset,
+    isOffsetZone,
+    timezoneOffsets,
+    validDisplayName,
+    validEmail,
+  } from '../lib/profileValidation';
 
   let editing = $state(false);
-  let form = $state<ProfileUpdate>(blankForm());
+  let dn = $state('');
+  let tz = $state('+00:00');
+  let startH = $state('00');
+  let startM = $state('00');
+  let endH = $state('07');
+  let endM = $state('00');
+  let blockChat = $state(false);
+  let blockFriendRequests = $state(false);
   let emailInput = $state('');
   let codeInput = $state('');
   let emailSent = $state(false);
 
-  function blankForm(): ProfileUpdate {
-    const p = app.profile;
-    return {
-      displayName: p?.displayName ?? '',
-      preferredLanguage: p?.preferredLanguage ?? 'en',
-      timeZone: p?.timeZone ?? 'UTC',
-      awayStart: p?.awayStart ?? '00:00',
-      awayEnd: p?.awayEnd ?? '07:00',
-      blockChat: p?.blockChat ?? false,
-      blockFriendRequests: p?.blockFriendRequests ?? false,
-    };
+  function defaultTz(): string {
+    const b = browserOffset();
+    return timezoneOffsets.includes(b) ? b : '+00:00';
+  }
+  function splitTime(hhmm: string): [string, string] {
+    const m = /^(\d{2}):(\d{2})$/.exec(hhmm);
+    if (!m) return ['00', '00'];
+    return [m[1], awayMinutes.includes(m[2]) ? m[2] : '00'];
   }
 
   function startEdit() {
-    form = blankForm();
+    const p = app.profile!;
+    dn = p.displayName;
+    tz = isOffsetZone(p.timeZone) && timezoneOffsets.includes(p.timeZone) ? p.timeZone : defaultTz();
+    [startH, startM] = splitTime(p.awayStart);
+    [endH, endM] = splitTime(p.awayEnd);
+    blockChat = p.blockChat;
+    blockFriendRequests = p.blockFriendRequests;
     editing = true;
   }
 
+  const awayStart = $derived(`${startH}:${startM}`);
+  const awayEnd = $derived(`${endH}:${endM}`);
+  const nameOk = $derived(validDisplayName(dn));
+  const awayOk = $derived(awayDurationOk(awayStart, awayEnd));
+  const formValid = $derived(nameOk && awayOk);
+  const emailOk = $derived(validEmail(emailInput));
+
   async function save() {
+    if (!formValid) return;
     try {
-      app.profile = await gateway.profileUpdate(form);
+      app.profile = await gateway.profileUpdate({
+        displayName: dn.trim(),
+        preferredLanguage: app.profile!.preferredLanguage, // language lives in Settings
+        timeZone: tz,
+        awayStart,
+        awayEnd,
+        blockChat,
+        blockFriendRequests,
+      });
       editing = false;
       showToast(t('profile.saved'));
     } catch (e) {
@@ -40,12 +75,11 @@
   }
 
   async function requestEmail() {
-    const email = emailInput.trim();
-    if (!email) return;
+    if (!emailOk) return;
     try {
-      await gateway.emailBindRequest(email);
+      await gateway.emailBindRequest(emailInput.trim());
       emailSent = true;
-      showToast(t('profile.emailSent', { email }));
+      showToast(t('profile.emailSent', { email: emailInput.trim() }));
     } catch (e) {
       handleError(e);
     }
@@ -75,37 +109,45 @@
         <form class="edit" onsubmit={(e) => { e.preventDefault(); void save(); }}>
           <label>
             <span>{t('profile.displayName')}</span>
-            <input bind:value={form.displayName} maxlength="64" />
+            <input class:invalid={!nameOk} bind:value={dn} maxlength="40" />
           </label>
           <label>
             <span>{t('profile.timezone')}</span>
-            <input bind:value={form.timeZone} />
+            <select bind:value={tz}>
+              {#each timezoneOffsets as o (o)}<option value={o}>{o}</option>{/each}
+            </select>
           </label>
-          <fieldset class="away">
+          <fieldset class="away" class:invalid={!awayOk}>
             <legend>{t('profile.awayWindow')}</legend>
             <div class="times">
-              <label><span>{t('profile.from')}</span><input type="time" bind:value={form.awayStart} /></label>
-              <label><span>{t('profile.to')}</span><input type="time" bind:value={form.awayEnd} /></label>
+              <span class="tlabel">{t('profile.from')}</span>
+              <select bind:value={startH}>{#each awayHours as h (h)}<option>{h}</option>{/each}</select>
+              <span class="colon">:</span>
+              <select bind:value={startM}>{#each awayMinutes as m (m)}<option>{m}</option>{/each}</select>
+            </div>
+            <div class="times">
+              <span class="tlabel">{t('profile.to')}</span>
+              <select bind:value={endH}>{#each awayHours as h (h)}<option>{h}</option>{/each}</select>
+              <span class="colon">:</span>
+              <select bind:value={endM}>{#each awayMinutes as m (m)}<option>{m}</option>{/each}</select>
             </div>
             <p class="muted">{t('profile.awayHint')}</p>
           </fieldset>
           <label class="check">
-            <input type="checkbox" bind:checked={form.blockChat} />
+            <input type="checkbox" bind:checked={blockChat} />
             <span>{t('profile.blockChat')}</span>
           </label>
           <label class="check">
-            <input type="checkbox" bind:checked={form.blockFriendRequests} />
+            <input type="checkbox" bind:checked={blockFriendRequests} />
             <span>{t('profile.blockFriendRequests')}</span>
           </label>
           <div class="formacts">
-            <button type="submit" class="btn">{t('common.save')}</button>
+            <button type="submit" class="btn" disabled={!formValid}>{t('common.save')}</button>
             <button type="button" class="ghost" onclick={() => (editing = false)}>{t('common.cancel')}</button>
           </div>
         </form>
       {:else}
         <dl>
-          <dt>{t('profile.language')}</dt>
-          <dd>{p.preferredLanguage}</dd>
           <dt>{t('profile.timezone')}</dt>
           <dd>{p.timeZone}</dd>
           <dt>{t('profile.awayWindow')}</dt>
@@ -123,12 +165,23 @@
             <h3>{t('profile.bindEmail')}</h3>
             {#if !emailSent}
               <div class="addrow">
-                <input bind:value={emailInput} placeholder={t('login.emailPlaceholder')} type="email" />
-                <button class="ghost" onclick={requestEmail}>{t('login.sendCode')}</button>
+                <input
+                  class:invalid={emailInput.length > 0 && !emailOk}
+                  bind:value={emailInput}
+                  placeholder={t('login.emailPlaceholder')}
+                  type="email"
+                />
+                <button class="ghost" onclick={requestEmail} disabled={!emailOk}>{t('login.sendCode')}</button>
               </div>
             {:else}
               <div class="addrow">
-                <input bind:value={codeInput} placeholder={t('profile.emailCode')} inputmode="numeric" maxlength="6" />
+                <input
+                  class="codein"
+                  bind:value={codeInput}
+                  placeholder={t('profile.emailCode')}
+                  inputmode="numeric"
+                  maxlength="6"
+                />
                 <button class="btn" onclick={confirmEmail}>{t('common.ok')}</button>
               </div>
             {/if}
@@ -183,26 +236,33 @@
     flex-direction: column;
     gap: 14px;
   }
-  .edit label {
+  .edit > label {
     display: flex;
     flex-direction: column;
     gap: 4px;
     font-size: 0.9rem;
     color: var(--text-muted);
   }
-  .edit input:not([type]),
-  .edit input[type='time'] {
+  .edit input:not([type='checkbox']),
+  .edit select {
+    min-width: 0;
     padding: 9px 11px;
     border: 1px solid var(--border);
     background: var(--surface);
     color: var(--text);
     border-radius: var(--radius-sm);
   }
+  .invalid {
+    border-color: var(--danger, #c0392b) !important;
+  }
   .away {
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     padding: 10px 12px;
     margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
   }
   .away legend {
     color: var(--text-muted);
@@ -211,10 +271,16 @@
   }
   .times {
     display: flex;
-    gap: 12px;
+    align-items: center;
+    gap: 8px;
   }
-  .times label {
-    flex: 1;
+  .tlabel {
+    min-width: 2.5em;
+    color: var(--text-muted);
+    font-size: 0.85rem;
+  }
+  .colon {
+    font-weight: 700;
   }
   .check {
     flex-direction: row !important;
@@ -226,6 +292,9 @@
     display: flex;
     gap: 10px;
   }
+  .btn:disabled {
+    opacity: 0.5;
+  }
   .emailbox h3 {
     margin: 0 0 8px;
     font-size: 0.95rem;
@@ -237,12 +306,17 @@
   }
   .addrow input {
     flex: 1;
+    min-width: 0;
     padding: 9px 11px;
     border: 1px solid var(--border);
     background: var(--surface);
     color: var(--text);
     border-radius: var(--radius-sm);
   }
+  .addrow input.codein {
+    letter-spacing: 0.3em;
+    font-size: 1.1rem;
+  }
   .btn {
     align-self: flex-start;
     padding: 9px 14px;
@@ -258,6 +332,9 @@
     color: var(--text);
     border-radius: var(--radius-sm);
   }
+  .ghost:disabled {
+    opacity: 0.5;
+  }
   .logout {
     margin-top: 8px;
     align-self: flex-start;