feat(offline): PIN lock primitives + Apple-style keypad

Groundwork for offline pass-and-play (hotseat) seat/host PIN locks:
- lib/pin.ts: salted SHA-256 PinLock (newSalt/hashPin/newLock/verifyPin);
  a social lock for a shared device (documented, not cryptography).
- components/PinPad.svelte: 4-digit keypad (set/verify/change), auto-submit
  on the 4th digit, shake on mismatch, hardware-keyboard support.
- i18n: pin.* keys (en + ru).

Engine/source/UI wiring follows.

ui/src/components/PinPad.svelte

@@ -0,0 +1,262 @@
+<script lang="ts">
+  // Apple-lock-screen-style 4-digit PIN pad for offline pass-and-play (hotseat) games.
+  // Modes:
+  //   set     — enter a PIN, then repeat it to confirm; emits { kind: 'set', lock }.
+  //   verify  — enter a PIN; auto-checks against `lock` on the 4th digit; emits
+  //             { kind: 'verified' } or shakes + clears on a wrong PIN.
+  //   change  — verify the current PIN (against `lock`), then offer "set a new PIN"
+  //             (the set flow) or, when allowRemove, "remove PIN" ({ kind: 'removed' }).
+  // The pad never shows an OK button: entering the 4th digit is the action. PIN storage
+  // is a social lock, not cryptography — see lib/pin.ts.
+  import Modal from './Modal.svelte';
+  import { t } from '../lib/i18n/index.svelte';
+  import { newLock, verifyPin, type PinLock } from '../lib/pin';
+
+  /** PinResult is the outcome handed to onresult when the pad completes. */
+  export type PinResult =
+    | { kind: 'set'; lock: PinLock }
+    | { kind: 'verified' }
+    | { kind: 'removed' };
+
+  let {
+    mode,
+    title = '',
+    lock,
+    allowRemove = false,
+    onclose,
+    onresult,
+  }: {
+    mode: 'set' | 'verify' | 'change';
+    title?: string;
+    lock?: PinLock;
+    allowRemove?: boolean;
+    onclose?: () => void;
+    onresult: (r: PinResult) => void;
+  } = $props();
+
+  const LEN = 4;
+
+  // 'old' verifies the existing PIN (change); 'menu' offers set-new / remove (change);
+  // 'enter' collects a PIN; 'confirm' re-enters it (set / change→new). `mode` is fixed
+  // for the pad's lifetime (callers mount a fresh pad per operation), so capturing its
+  // initial value here is intentional.
+  // svelte-ignore state_referenced_locally
+  let phase = $state<'old' | 'menu' | 'enter' | 'confirm'>(mode === 'change' ? 'old' : 'enter');
+  let buffer = $state('');
+  let first = $state(''); // the first entry, awaiting confirmation
+  let error = $state(false); // drives the error prompt + shake
+  let shakeSeq = $state(0); // bumped on each error to replay the shake animation
+  let busy = $state(false); // guards the async check between the 4th digit and the outcome
+
+  function promptText(): string {
+    if (error) return phase === 'confirm' ? t('pin.mismatch') : t('pin.wrong');
+    switch (phase) {
+      case 'old':
+        return t('pin.enterCurrent');
+      case 'confirm':
+        return t('pin.repeat');
+      default:
+        return mode === 'verify' ? t('pin.enter') : t('pin.create');
+    }
+  }
+
+  function fail(): void {
+    buffer = '';
+    error = true;
+    shakeSeq += 1;
+  }
+
+  async function commit(): Promise<void> {
+    busy = true;
+    try {
+      if (phase === 'old') {
+        if (lock && (await verifyPin(buffer, lock))) {
+          buffer = '';
+          error = false;
+          phase = 'menu';
+        } else fail();
+      } else if (phase === 'enter' && mode === 'verify') {
+        if (lock && (await verifyPin(buffer, lock))) onresult({ kind: 'verified' });
+        else fail();
+      } else if (phase === 'enter') {
+        first = buffer;
+        buffer = '';
+        error = false;
+        phase = 'confirm';
+      } else if (phase === 'confirm') {
+        if (buffer === first) onresult({ kind: 'set', lock: await newLock(buffer) });
+        else {
+          first = '';
+          phase = 'enter';
+          fail();
+        }
+      }
+    } finally {
+      busy = false;
+    }
+  }
+
+  function press(d: string): void {
+    if (busy || phase === 'menu' || buffer.length >= LEN) return;
+    error = false;
+    buffer += d;
+    if (buffer.length === LEN) void commit();
+  }
+
+  function back(): void {
+    if (busy || phase === 'menu') return;
+    buffer = buffer.slice(0, -1);
+  }
+
+  function startNew(): void {
+    error = false;
+    first = '';
+    buffer = '';
+    phase = 'enter';
+  }
+
+  function onkey(e: KeyboardEvent): void {
+    if (e.key >= '0' && e.key <= '9') {
+      press(e.key);
+      e.preventDefault();
+    } else if (e.key === 'Backspace') {
+      back();
+      e.preventDefault();
+    } else if (e.key === 'Escape') {
+      onclose?.();
+    }
+  }
+
+  const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
+  const slots = Array.from({ length: LEN }, (_, i) => i);
+</script>
+
+<svelte:window onkeydown={onkey} />
+
+<Modal {title} {onclose} overlayKeyboard>
+  <div class="pad">
+    {#if phase === 'menu'}
+      <div class="menu">
+        <button class="opt" onclick={startNew}>{t('pin.setNew')}</button>
+        {#if allowRemove}
+          <button class="opt danger" onclick={() => onresult({ kind: 'removed' })}>
+            {t('pin.remove')}
+          </button>
+        {/if}
+      </div>
+    {:else}
+      <p class="prompt" class:err={error}>{promptText()}</p>
+      {#key shakeSeq}
+        <div class="dots" class:shake={error} aria-hidden="true">
+          {#each slots as i}
+            <span class="dot" class:on={i < buffer.length}></span>
+          {/each}
+        </div>
+      {/key}
+      <div class="grid">
+        {#each keys as k}
+          <button class="key" onclick={() => press(k)} aria-label={k}>{k}</button>
+        {/each}
+        <span class="key spacer"></span>
+        <button class="key" onclick={() => press('0')} aria-label="0">0</button>
+        <button class="key back" onclick={back} aria-label="⌫" disabled={buffer.length === 0}>⌫</button>
+      </div>
+    {/if}
+  </div>
+</Modal>
+
+<style>
+  .pad {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    padding-top: 4px;
+  }
+  .prompt {
+    margin: 0;
+    font-size: 0.95rem;
+    color: var(--muted, var(--text));
+    min-height: 1.2em;
+  }
+  .prompt.err {
+    color: var(--danger);
+  }
+  .dots {
+    display: flex;
+    gap: 16px;
+  }
+  .dot {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    border: 1.5px solid var(--text);
+    box-sizing: border-box;
+  }
+  .dot.on {
+    background: var(--text);
+  }
+  .shake {
+    animation: shake 0.32s ease;
+  }
+  @keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    20% { transform: translateX(-7px); }
+    40% { transform: translateX(7px); }
+    60% { transform: translateX(-5px); }
+    80% { transform: translateX(5px); }
+  }
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+  }
+  .key {
+    width: 62px;
+    height: 62px;
+    border-radius: 50%;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--text);
+    font-size: 1.4rem;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .key:active {
+    background: var(--accent);
+    color: var(--accent-text);
+  }
+  .key.back {
+    border-color: transparent;
+    background: transparent;
+    font-size: 1.2rem;
+  }
+  .key.back:disabled {
+    opacity: 0.3;
+  }
+  .key.spacer {
+    border: none;
+    background: none;
+    pointer-events: none;
+  }
+  .menu {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+  }
+  .opt {
+    padding: 14px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--text);
+    border-radius: var(--radius);
+    font-weight: 600;
+  }
+  .opt.danger {
+    border-color: var(--danger);
+    color: var(--danger);
+  }
+</style>

ui/src/lib/i18n/en.ts

@@ -389,6 +389,15 @@ export const en = {
   'error.game_active': 'Available only after the game is finished.',
   'error.invalid_profile': 'Some profile fields are invalid.',
   'error.already_confirmed': 'This email is already confirmed.',
+
+  'pin.enter': 'Enter PIN',
+  'pin.create': 'Create a PIN',
+  'pin.repeat': 'Repeat the PIN',
+  'pin.enterCurrent': 'Enter current PIN',
+  'pin.mismatch': "PINs don't match",
+  'pin.wrong': 'Wrong PIN',
+  'pin.setNew': 'Set a new PIN',
+  'pin.remove': 'Remove PIN',
 } as const;
 
 export type MessageKey = keyof typeof en;

ui/src/lib/i18n/ru.ts

@@ -389,4 +389,13 @@ export const ru: Record<MessageKey, string> = {
   'error.game_active': 'Доступно только после завершения игры.',
   'error.invalid_profile': 'Некоторые поля профиля некорректны.',
   'error.already_confirmed': 'Эта почта уже подтверждена.',
+
+  'pin.enter': 'Введите PIN',
+  'pin.create': 'Придумайте PIN',
+  'pin.repeat': 'Повторите PIN',
+  'pin.enterCurrent': 'Введите текущий PIN',
+  'pin.mismatch': 'PIN не совпадает',
+  'pin.wrong': 'Неверный PIN',
+  'pin.setNew': 'Задать новый PIN',
+  'pin.remove': 'Удалить пароль',
 };

ui/src/lib/pin.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest';
+import { hashPin, newLock, newSalt, verifyPin } from './pin';
+
+describe('hashPin', () => {
+  it('is deterministic for the same pin and salt', async () => {
+    const salt = 'fixedsalt';
+    expect(await hashPin('1234', salt)).toBe(await hashPin('1234', salt));
+  });
+
+  it('differs when the salt differs', async () => {
+    expect(await hashPin('1234', 'saltA')).not.toBe(await hashPin('1234', 'saltB'));
+  });
+
+  it('differs when the pin differs', async () => {
+    const salt = 'fixedsalt';
+    expect(await hashPin('1234', salt)).not.toBe(await hashPin('4321', salt));
+  });
+});
+
+describe('newSalt', () => {
+  it('returns a non-empty value', () => {
+    expect(newSalt().length).toBeGreaterThan(0);
+  });
+
+  it('returns a fresh value each call', () => {
+    expect(newSalt()).not.toBe(newSalt());
+  });
+});
+
+describe('newLock / verifyPin', () => {
+  it('produces a lock that verifies its own pin', async () => {
+    const lock = await newLock('1234');
+    expect(lock.hash.length).toBeGreaterThan(0);
+    expect(lock.salt.length).toBeGreaterThan(0);
+    expect(await verifyPin('1234', lock)).toBe(true);
+  });
+
+  it('rejects a wrong pin', async () => {
+    const lock = await newLock('1234');
+    expect(await verifyPin('0000', lock)).toBe(false);
+  });
+
+  it('salts each lock independently (same pin, different hashes)', async () => {
+    const a = await newLock('1234');
+    const b = await newLock('1234');
+    expect(a.salt).not.toBe(b.salt);
+    expect(a.hash).not.toBe(b.hash);
+  });
+});

ui/src/lib/pin.ts

@@ -0,0 +1,45 @@
+// Seat / host PIN locks for offline pass-and-play (hotseat) games.
+//
+// A PinLock is a salted SHA-256 digest of a 4-digit PIN. This is a SOCIAL lock for a
+// shared device — not cryptographic protection. A 4-digit PIN has only 10^4
+// combinations and the whole game runs on the client, so a determined peek reads the
+// racks straight from memory regardless. The salt only keeps the PIN itself out of a
+// casual devtools glance and defeats precomputed tables; it does not make the PIN
+// brute-force resistant.
+
+/** PinLock is a stored, salted SHA-256 digest of a PIN (see the file header caveat). */
+export interface PinLock {
+  hash: string;
+  salt: string;
+}
+
+// b64url encodes bytes as base64url without padding (matches the idiom in vkid.ts).
+function b64url(bytes: Uint8Array): string {
+  let s = '';
+  for (const b of bytes) s += String.fromCharCode(b);
+  return btoa(s).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+
+/** newSalt returns a fresh random base64url salt for a PinLock. */
+export function newSalt(): string {
+  const a = new Uint8Array(16);
+  crypto.getRandomValues(a);
+  return b64url(a);
+}
+
+/** hashPin returns the base64url SHA-256 digest binding salt to pin. */
+export async function hashPin(pin: string, salt: string): Promise<string> {
+  const digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(`${salt}:${pin}`));
+  return b64url(new Uint8Array(digest));
+}
+
+/** newLock builds a PinLock for pin with a fresh salt. */
+export async function newLock(pin: string): Promise<PinLock> {
+  const salt = newSalt();
+  return { salt, hash: await hashPin(pin, salt) };
+}
+
+/** verifyPin reports whether pin matches the digest stored in lock. */
+export async function verifyPin(pin: string, lock: PinLock): Promise<boolean> {
+  return (await hashPin(pin, lock.salt)) === lock.hash;
+}