Fix mobile header layout, add resumable progress + coin wallet

Header nav was splitting into three lines on mobile (logo / nav /
logout floating right with a big gap) — applied the same order-last
wrap pattern already proven in top-tickets/project-claude, so nav
drops to its own scrollable row instead.

Bigger feature: player progress now survives closing the tab, for all
three templates, not just Clicker. Each Phaser scene reports its state
through the same registry-callback pattern already used for onFinish
(onProgress), and reads an initialState to resume instead of always
starting fresh. Autosave fires every 10 minutes for free; an instant
manual save costs coins.

New coin economy (src/lib/wallet/): a wallet + transaction ledger per
user, atomic grant/spend via db.transaction() so two concurrent spends
against a low balance can't both succeed (verified with a real race
test — exactly one wins, balance never goes negative). New accounts
get a 20-coin signup bonus so manual save is testable before any real
payment method exists.

Real-money purchases are scaffolded but deliberately not wired to a
provider yet — user hasn't picked one. /api/wallet/purchase creates a
pending order and returns a clean "not configured" error, same shape
as the AI/LDAP not-configured responses elsewhere in this project. The
payment abstraction (src/lib/payments/provider.ts) is the one seam a
real adapter needs to fill in later.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QcXH24ky6zjk2UyK5oZUPH

src/lib/games/scenes/clicker-scene.ts

@@ -1,5 +1,5 @@
 import Phaser from "phaser";
-import type { ClickerDefinition, ClickerUpgrade, GameResult } from "../types";
+import type { ClickerDefinition, ClickerUpgrade, ClickerProgress, GameResult } from "../types";
 
 const COLORS = {
   bg: 0x14162a,
@@ -19,6 +19,7 @@ interface UpgradeRow {
 export class ClickerScene extends Phaser.Scene {
   private definition!: ClickerDefinition;
   private onFinish?: (result: GameResult) => void;
+  private onProgress?: (state: ClickerProgress) => void;
   private score = 0;
   private pointsPerClick = 1;
   private pointsPerSecond = 0;
@@ -34,10 +35,16 @@ export class ClickerScene extends Phaser.Scene {
   create() {
     this.definition = this.registry.get("definition");
     this.onFinish = this.registry.get("onFinish");
-    this.score = 0;
-    this.pointsPerClick = this.definition.startingPointsPerClick;
-    this.pointsPerSecond = 0;
-    this.ownedUpgrades = new Set();
+    this.onProgress = this.registry.get("onProgress");
+
+    const initialState = this.registry.get("initialState") as ClickerProgress | undefined;
+    const validUpgradeIndices = (initialState?.ownedUpgradeIndices ?? []).filter(
+      (i) => i >= 0 && i < this.definition.upgrades.length,
+    );
+    this.score = initialState?.score ?? 0;
+    this.pointsPerClick = initialState?.pointsPerClick ?? this.definition.startingPointsPerClick;
+    this.pointsPerSecond = initialState?.pointsPerSecond ?? 0;
+    this.ownedUpgrades = new Set(validUpgradeIndices);
     this.upgradeRows = [];
     this.finished = false;
 
@@ -97,6 +104,13 @@ export class ClickerScene extends Phaser.Scene {
   }
 
   private refresh() {
+    this.onProgress?.({
+      score: this.score,
+      pointsPerClick: this.pointsPerClick,
+      pointsPerSecond: this.pointsPerSecond,
+      ownedUpgradeIndices: Array.from(this.ownedUpgrades),
+    });
+
     this.scoreText.setText(
       `${Math.floor(this.score)} / ${this.definition.targetScore}\n+${this.pointsPerClick}/клик  +${this.pointsPerSecond}/сек`,
     );