diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..ac170ae
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,9 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import hooks from 'eslint-plugin-react-hooks';
+export default [
+ {ignores:['dist/**','node_modules/**','public/**','src/data/**','docs/**']},
+ js.configs.recommended,
+ {files:['**/*.{js,jsx,mjs}'],languageOptions:{ecmaVersion:2022,sourceType:'module',globals:{...globals.browser,...globals.node},parserOptions:{ecmaFeatures:{jsx:true}}},rules:{'no-unused-vars':['error',{argsIgnorePattern:'^_',varsIgnorePattern:'^[A-Z]',ignoreRestSiblings:true}],'no-empty':['error',{allowEmptyCatch:true}]}},
+ {files:['src/**/*.{js,jsx}'],plugins:{'react-hooks':hooks},rules:{'react-hooks/rules-of-hooks':'error','react-hooks/exhaustive-deps':'error'}},
+];
diff --git a/index.html b/index.html
index ac38228..ebc7ff0 100644
--- a/index.html
+++ b/index.html
@@ -14,163 +14,4 @@
     <link rel="icon" type="image/png" href="./icons/favicon-64.png">
     <link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
 </head>
-<body>
-<video id="camera" playsinline muted autoplay hidden></video>
-<canvas id="world"></canvas>
-<div id="loading">در حال ساختن شهر مشهد…</div>
-
-<!-- Mission briefing over the map of Iran -->
-<section id="briefing">
-    <div class="brief-map"><canvas id="iran"></canvas></div>
-    <div class="brief-panel">
-        <img class="brief-robot" src="./robot/front.webp" alt="روبات راهنمای روبات مارکت" width="136" height="223">
-        <small class="tag">عملیات ۰۱ · خراسان رضوی</small>
-        <h1>عملیات مشهد</h1>
-        <p class="sub">روبات مارکت · شکار دستگاه‌های وندینگ</p>
-        <pre id="brief-text" aria-live="polite"></pre>
-        <button id="start-mission" type="button">شروع عملیات</button>
-        <div class="brief-actions">
-            <button id="real-mode" type="button" class="ghost">📍 بازی در دنیای واقعی (GPS)</button>
-            <button id="install" type="button" class="ghost" hidden>⬇ نصب بازی روی گوشی</button>
-        </div>
-        <p class="keys">حرکت: W A S D · دویدن: Shift · دوربین: ماوس · سوار و پیاده شدن: F · خرید: E · نقشه: M</p>
-    </div>
-</section>
-
-<!-- In-game HUD -->
-<div id="hud" hidden>
-    <canvas id="compass" width="560" height="44"></canvas>
-    <button id="minimap-button" type="button" aria-label="باز کردن نقشهٔ شهر (M)">
-        <canvas id="minimap" width="220" height="220"></canvas>
-        <span class="map-hint">نقشه · M</span>
-    </button>
-    <div id="location"><span id="street">مشهد</span><small id="mode-label">پیاده</small><small id="gps-status" hidden></small></div>
-    <aside id="objectives">
-        <h2>مأموریت‌ها</h2>
-        <ol id="mission-list"></ol>
-    </aside>
-    <div id="waypoint" hidden><i></i><b id="waypoint-name"></b><span id="waypoint-distance"></span></div>
-    <div id="prompt" hidden></div>
-    <div id="subtitle" hidden><img id="subtitle-face" alt="" hidden><b id="subtitle-speaker"></b><span id="subtitle-text"></span></div>
-    <div id="awards" aria-live="polite"></div>
-    <div id="banner" hidden></div>
-    <div id="status">
-        <div class="stat"><small>بودجه</small><strong id="balance">۵۰۰</strong><span>هتومان</span></div>
-        <div class="stat"><small>ساعت</small><strong id="clock">۰۸:۳۰</strong></div>
-        <div class="stat" id="speed-stat" hidden><small>سرعت</small><strong id="speed">۰</strong><span>km/h</span></div>
-    </div>
-    <div id="rank"><b id="rank-name">تازه‌وارد</b><span id="xp">۰ XP</span><div class="bar"><i id="xp-bar"></i></div></div>
-    <div id="toolbar">
-        <button id="gps-toggle" type="button">📍 دنیای واقعی</button>
-        <button id="ar-toggle" type="button" hidden>📷 دوربین</button>
-        <button id="stable-toggle" type="button" class="on" hidden>🎯 پایدار: روشن</button>
-        <button id="sound" type="button" aria-pressed="false">صدا: خاموش</button>
-        <button id="quality" type="button">گرافیک</button>
-        <button id="restart" type="button">شروع دوباره</button>
-    </div>
-    <div id="touch" hidden>
-        <div id="stick"><i></i></div>
-        <div class="touch-buttons">
-            <button type="button" data-key="f">F</button>
-            <button type="button" data-key="e">E</button>
-            <button type="button" data-key="shift">دویدن</button>
-        </div>
-    </div>
-    <div id="crosshair"></div>
-    <small id="attribution">نقشه: © مشارکت‌کنندگان OpenStreetMap</small>
-</div>
-
-<!-- Payment at the card reader -->
-<section id="payment" hidden>
-    <small>کارت‌خوان روبات مارکت</small>
-    <h2 id="payment-title"></h2>
-    <p id="payment-step"></p>
-    <div class="actions">
-        <button id="swipe" type="button" disabled>کشیدن کارت · C</button>
-        <button id="cancel-payment" type="button" class="ghost">انصراف</button>
-    </div>
-</section>
-
-<dialog id="map-dialog">
-    <header>
-        <div class="tabs" role="tablist">
-            <button type="button" role="tab" data-tab="city" aria-selected="true">مشهد</button>
-            <button type="button" role="tab" data-tab="iran" aria-selected="false">ایران</button>
-        </div>
-        <button type="button" class="close" id="map-close" aria-label="بستن">✕</button>
-    </header>
-    <div class="map-body">
-        <div class="map-view">
-            <canvas id="fullmap"></canvas>
-            <canvas id="iran-map" hidden></canvas>
-            <p class="map-help">کشیدن: جابه‌جایی · چرخ ماوس: زوم · کلیک روی دستگاه: انتخاب</p>
-        </div>
-        <aside class="map-side">
-            <h3>دستگاه‌های روبات مارکت</h3>
-            <div id="machine-detail" hidden>
-                <h4 id="detail-name"></h4>
-                <p id="detail-address"></p>
-                <p id="detail-meta"></p>
-                <p id="detail-products"></p>
-                <button id="route-button" type="button">مسیریابی تا اینجا</button>
-            </div>
-            <ul id="machine-list"></ul>
-        </aside>
-    </div>
-</dialog>
-
-<dialog id="shop">
-    <header>
-        <div>
-            <small id="shop-category"></small>
-            <h2 id="shop-name"></h2>
-            <p id="shop-address"></p>
-        </div>
-        <button type="button" class="close" id="shop-close" aria-label="بستن">✕</button>
-    </header>
-    <p id="shop-note"></p>
-    <div id="products"></div>
-    <p class="rate">۱۰ هتومان = ۱۰۰٬۰۰۰ ریال · مبالغ نمایشی‌اند و پرداخت واقعی انجام نمی‌شود.</p>
-</dialog>
-
-<dialog id="real-intro">
-    <img src="./robot/serious.webp" alt="" width="72" height="68">
-    <h2>بازی در دنیای واقعی</h2>
-    <p>با روشن کردن این حالت، موقعیت گوشی شما (GPS) روی نقشهٔ بازی نمایش داده می‌شود. وقتی واقعاً به محل یک دستگاه روبات مارکت برسید، می‌توانید خرید کنید و ۲۰۰ امتیاز اضافه بگیرید.</p>
-    <ul>
-        <li>هنگام راه رفتن به خیابان و ماشین‌ها نگاه کنید، نه به صفحه.</li>
-        <li>بچه‌ها فقط همراه یک بزرگ‌تر بازی کنند.</li>
-        <li>هنگام رانندگی از این حالت استفاده نکنید؛ در سرعت بالا خرید غیرفعال می‌شود.</li>
-        <li>موقعیت شما فقط روی همین گوشی می‌ماند و جایی ارسال نمی‌شود.</li>
-    </ul>
-    <div class="actions">
-        <button type="button" id="real-go">قبول دارم، شروع کن</button>
-        <button type="button" id="real-cancel" class="ghost">انصراف</button>
-    </div>
-</dialog>
-
-<dialog id="ios-install">
-    <h2>نصب روی آیفون</h2>
-    <ol>
-        <li>در Safari دکمهٔ <b>Share</b> (مربع با فلش رو به بالا) را بزنید.</li>
-        <li>گزینهٔ <b>Add to Home Screen</b> را انتخاب کنید.</li>
-        <li>روبات مارکت مثل یک اپ روی صفحهٔ اصلی گوشی شما قرار می‌گیرد و آفلاین هم اجرا می‌شود.</li>
-    </ol>
-    <button type="button" id="ios-close">متوجه شدم</button>
-</dialog>
-
-<div id="update-toast" hidden>نسخهٔ جدید بازی آماده است <button type="button" id="update-reload">به‌روزرسانی</button></div>
-
-<dialog id="end">
-    <small id="end-tag">پایان عملیات</small>
-    <h2 id="end-title"></h2>
-    <p id="end-text"></p>
-    <ul id="end-stats"></ul>
-    <div class="actions">
-        <button id="again" type="button">عملیات دوباره</button>
-        <button id="continue" type="button" class="ghost">ادامهٔ گشت در شهر</button>
-    </div>
-</dialog>
-<script type="module" src="/src/main.js"></script>
-</body>
-</html>
+<body><div id="root"></div><script type="module" src="/src/main.jsx"></script></body></html>
diff --git a/package-lock.json b/package-lock.json
index b0161d8..2858657 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,7 +33,7 @@
         "prettier": "^3.9.10",
         "tailwindcss": "^3.4.19",
         "vite": "^6.4.3",
-        "vitest": "^3.2.7"
+        "vitest": "^4.1.12"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -1898,39 +1898,40 @@
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.2.7.tgz",
-      "integrity": "sha512-E8eBXaKibuvH2pSZErOjdVb5vF4PbKYcrnluBTYxEk1l/VhhwZg1kZQsdtjq+CsF5CFydf2Rdkz7jDHKSisi3w==",
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.12.tgz",
+      "integrity": "sha512-vFlTt+YEu9WBpNjdGayNmlMVzrWPi1+sv853/7t2FU7hpO5gAFBKHzQmkCq5Xjpr+evegF2994LQT3hF3mRlqQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
+        "@standard-schema/spec": "^1.1.0",
         "@types/chai": "^5.2.2",
-        "@vitest/spy": "3.2.7",
-        "@vitest/utils": "3.2.7",
-        "chai": "^5.2.0",
-        "tinyrainbow": "^2.0.0"
+        "@vitest/spy": "4.1.12",
+        "@vitest/utils": "4.1.12",
+        "chai": "^6.2.2",
+        "tinyrainbow": "^3.1.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/mocker": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.2.7.tgz",
-      "integrity": "sha512-Trr0hYO9CM3Wj6ksWHRhK9IZpIY6wTMO5u/MqXurMxT57sWBaOPEtP3Oq60ihZuh5JsiagKfz95OcxdEP6dBrA==",
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.12.tgz",
+      "integrity": "sha512-fKShNpKZzupWZuY0z7egydvL0sqW4INEZBEExMBMAa6izlENEVHwoXgdaTCaBZ5fwlr4xf2o1wXC83n9RpO+NA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "3.2.7",
+        "@vitest/spy": "4.1.12",
         "estree-walker": "^3.0.3",
-        "magic-string": "^0.30.17"
+        "magic-string": "^0.30.21"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       },
       "peerDependencies": {
         "msw": "^2.4.9",
-        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
       },
       "peerDependenciesMeta": {
         "msw": {
@@ -1942,42 +1943,42 @@
       }
     },
     "node_modules/@vitest/pretty-format": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.2.7.tgz",
-      "integrity": "sha512-KUHlwqVu0sRlhCdyPdQ/wBoTfRahjUky1MubOmYw9fWfIZy1gNoHpuaaQBPAaMaVYdQYHJLurzj8ECCj5OwTqA==",
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.12.tgz",
+      "integrity": "sha512-XW9O8+Mxx4VpCtkYdMJLZQQwsVryP9wk7cPKDxtXFfwSak6yRh5+2fep/Y0XF/ElBvJHq8bcYdi6aeuai0opZA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "tinyrainbow": "^2.0.0"
+        "tinyrainbow": "^3.1.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.2.7.tgz",
-      "integrity": "sha512-sB9y4ovltoQP+WaUPwmSxO9WIg9Ig694Di5PalVPsYHklAdE027mehpWF2SQSVq+k6sFgaivbTjTJwZLSHbedA==",
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.12.tgz",
+      "integrity": "sha512-NKlVKCr5QnCe8jijdMnmkpHHU+WTqiLFR6G0pHji9uRjXK9xJl1k1nTw6F3pOOj2PDcsDt2GKQMI7wIsaT491w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/utils": "3.2.7",
-        "pathe": "^2.0.3",
-        "strip-literal": "^3.0.0"
+        "@vitest/utils": "4.1.12",
+        "pathe": "^2.0.3"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.2.7.tgz",
-      "integrity": "sha512-7C+MwShwtBSI5Buwoyg3s/iY1eHL9PKAf+O1wVh/TdnjXUtkoL/9YQtre90i4MtNXM6edP1wJ2zOBpfCyhIS7g==",
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.12.tgz",
+      "integrity": "sha512-ko1y1Qgb/slzQ9mr+b89Cuqud8WG1TKtsPD8r7ZUBdvVOGt85Af2HwCqHujrhwJq95hs/9RM7fcAPg57o1vlzw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "3.2.7",
-        "magic-string": "^0.30.17",
+        "@vitest/pretty-format": "4.1.12",
+        "@vitest/utils": "4.1.12",
+        "magic-string": "^0.30.21",
         "pathe": "^2.0.3"
       },
       "funding": {
@@ -1985,28 +1986,25 @@
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.2.7.tgz",
-      "integrity": "sha512-Q2eQGI6d2L/hBtZ0qNuKcAGid68XK6cv1xsoaIma6PaJhHPoqcEJhYpXZ/5myCMqkNgtP6UKuBhbc0nHKnrkuQ==",
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.12.tgz",
+      "integrity": "sha512-RGq9x4JNGNTZHEJxvN0oSiJjeSCExm0n2gZKKJZHY9cX5AVA6M7VJILBT3ZJ/tJ/0J9uWT7fETV9/btoi//vSg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "tinyspy": "^4.0.3"
-      },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.2.7.tgz",
-      "integrity": "sha512-x6BDOd7dyo3PFLY3I9/HJ25X/6OurhGXk2/B9gOZNPF7XDVjeBK4k01lQE5uvDpbuheErh91qYuE1E2OEjK3Rw==",
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.12.tgz",
+      "integrity": "sha512-Q3awXrwOfEV+qc3WmO5ONyE0yO7Q1gQ9/oyHxGLZ/pl7N3NO/ZztqQwKLuwMkV+CA1JYSIeO3gkHnRDIo4AVaA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "3.2.7",
-        "loupe": "^3.1.4",
-        "tinyrainbow": "^2.0.0"
+        "@vitest/pretty-format": "4.1.12",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.1.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
@@ -2305,16 +2303,6 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
-    "node_modules/cac": {
-      "version": "6.7.14",
-      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
-      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -2370,18 +2358,11 @@
       "license": "CC-BY-4.0"
     },
     "node_modules/chai": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/chai/-/chai-5.3.3.tgz",
-      "integrity": "sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.3.0.tgz",
+      "integrity": "sha512-XWAtwJ6OHO+tj0EKCs0Y2UamnyOxseZWltU4x2U2wh8g4AigdjwvtUjvLP2tqkA/avxHEtzxNaqGq/YGNwckKg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "assertion-error": "^2.0.1",
-        "check-error": "^2.1.1",
-        "deep-eql": "^5.0.1",
-        "loupe": "^3.1.0",
-        "pathval": "^2.0.0"
-      },
       "engines": {
         "node": ">=18"
       }
@@ -2403,16 +2384,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/check-error": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.3.tgz",
-      "integrity": "sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 16"
-      }
-    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -2603,16 +2574,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/deep-eql": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
-      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2714,9 +2675,9 @@
       }
     },
     "node_modules/es-module-lexer": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
-      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.2.tgz",
+      "integrity": "sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==",
       "dev": true,
       "license": "MIT"
     },
@@ -3810,13 +3771,6 @@
         "loose-envify": "cli.js"
       }
     },
-    "node_modules/loupe": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.2.1.tgz",
-      "integrity": "sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -4029,6 +3983,20 @@
         "node": ">= 6"
       }
     },
+    "node_modules/obug": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.2.1.tgz",
+      "integrity": "sha512-XrsrhT5sybtKI6wakr2SPOlGZWWYbUXZ7a0jT8/QOeAPau+1X/bSegNe5YR75oJmEZQbKningirmGOEJCIk61Q==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -4139,16 +4107,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/pathval": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.1.tgz",
-      "integrity": "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 14.16"
-      }
-    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -4779,9 +4737,9 @@
       "license": "MIT"
     },
     "node_modules/std-env": {
-      "version": "3.10.0",
-      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
-      "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.3.0.tgz",
+      "integrity": "sha512-OtU/EgQ1kIm5KwqQpBC6ZEMXrZRui11w8zgfTWp8cdO9B8OaPsbA8bTHO2P+HNo1VlUTGMVBwPhydu6poeXiag==",
       "dev": true,
       "license": "MIT"
     },
@@ -4811,26 +4769,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/strip-literal": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.1.0.tgz",
-      "integrity": "sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "js-tokens": "^9.0.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/strip-literal/node_modules/js-tokens": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
-      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/sucrase": {
       "version": "3.35.1",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
@@ -4962,11 +4900,14 @@
       "license": "MIT"
     },
     "node_modules/tinyexec": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
-      "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.3.1.tgz",
+      "integrity": "sha512-GCvB3aoys96IuDFBMcTB46JOR6mdMtAToqwiW8JlWhsoh1mhHi/xn9ss/Dg7N555GiJyEt2qzoG/NHCwM6h1EA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
     },
     "node_modules/tinyglobby": {
       "version": "0.2.17",
@@ -4985,30 +4926,10 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
-    "node_modules/tinypool": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.1.1.tgz",
-      "integrity": "sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^18.0.0 || >=20.0.0"
-      }
-    },
     "node_modules/tinyrainbow": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-2.0.0.tgz",
-      "integrity": "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/tinyspy": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-4.0.6.tgz",
-      "integrity": "sha512-u8KszXvGfU68hVcZpRHKG28T0krMuv2G5nDhiHaMLen/gIuFEgIJhaJuO69qjnXg5paSrbPMFfx3brNuN8eVSg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.2.0.tgz",
+      "integrity": "sha512-LgO3D9yZJjApUiuUfl9iFAwrtaX4+lok3wJIqttGoKCHlWUqHqbQpnxCf82L8FjgKsh4iGo78hqJwgL8F6To2A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -5226,89 +5147,80 @@
         }
       }
     },
-    "node_modules/vite-node": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.2.4.tgz",
-      "integrity": "sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cac": "^6.7.14",
-        "debug": "^4.4.1",
-        "es-module-lexer": "^1.7.0",
-        "pathe": "^2.0.3",
-        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
-      },
-      "bin": {
-        "vite-node": "vite-node.mjs"
-      },
-      "engines": {
-        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
     "node_modules/vitest": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.2.7.tgz",
-      "integrity": "sha512-KrxIJ62Fd89gfysR4WotlgZABiz2dqFPgqGzX7s+CwsqLFomRH7777ZcrOD6+WVAh7khPQP41A+BKbpcJFrdEg==",
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.12.tgz",
+      "integrity": "sha512-5eWdz2yb3ajxWF3C8C4TjkXl7FGm3n2E/VlazALrQHzK7nYMSGFnCZto0bbPNl77AwkOZVLk0YnBAejUu0NiWA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/chai": "^5.2.2",
-        "@vitest/expect": "3.2.7",
-        "@vitest/mocker": "3.2.7",
-        "@vitest/pretty-format": "^3.2.7",
-        "@vitest/runner": "3.2.7",
-        "@vitest/snapshot": "3.2.7",
-        "@vitest/spy": "3.2.7",
-        "@vitest/utils": "3.2.7",
-        "chai": "^5.2.0",
-        "debug": "^4.4.1",
-        "expect-type": "^1.2.1",
-        "magic-string": "^0.30.17",
+        "@vitest/expect": "4.1.12",
+        "@vitest/mocker": "4.1.12",
+        "@vitest/pretty-format": "4.1.12",
+        "@vitest/runner": "4.1.12",
+        "@vitest/snapshot": "4.1.12",
+        "@vitest/spy": "4.1.12",
+        "@vitest/utils": "4.1.12",
+        "es-module-lexer": "^2.0.0",
+        "expect-type": "^1.3.0",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
         "pathe": "^2.0.3",
-        "picomatch": "^4.0.2",
-        "std-env": "^3.9.0",
+        "picomatch": "^4.0.3",
+        "std-env": "^4.0.0-rc.1",
         "tinybench": "^2.9.0",
-        "tinyexec": "^0.3.2",
-        "tinyglobby": "^0.2.14",
-        "tinypool": "^1.1.1",
-        "tinyrainbow": "^2.0.0",
-        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0",
-        "vite-node": "3.2.4",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.1.0",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
         "why-is-node-running": "^2.3.0"
       },
       "bin": {
         "vitest": "vitest.mjs"
       },
       "engines": {
-        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       },
       "peerDependencies": {
         "@edge-runtime/vm": "*",
-        "@types/debug": "^4.1.12",
-        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
-        "@vitest/browser": "3.2.7",
-        "@vitest/ui": "3.2.7",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.1.12",
+        "@vitest/browser-preview": "4.1.12",
+        "@vitest/browser-webdriverio": "^4.1.11",
+        "@vitest/coverage-istanbul": "4.1.12",
+        "@vitest/coverage-v8": "4.1.12",
+        "@vitest/ui": "4.1.12",
         "happy-dom": "*",
-        "jsdom": "*"
+        "jsdom": "*",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
       },
       "peerDependenciesMeta": {
         "@edge-runtime/vm": {
           "optional": true
         },
-        "@types/debug": {
+        "@opentelemetry/api": {
           "optional": true
         },
         "@types/node": {
           "optional": true
         },
-        "@vitest/browser": {
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/coverage-istanbul": {
+          "optional": true
+        },
+        "@vitest/coverage-v8": {
           "optional": true
         },
         "@vitest/ui": {
@@ -5319,6 +5231,9 @@
         },
         "jsdom": {
           "optional": true
+        },
+        "vite": {
+          "optional": false
         }
       }
     },
diff --git a/package.json b/package.json
index 20433de..a98e3f3 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,10 @@
     "format:check": "prettier --check \"src/**/*.{js,jsx,css,md}\" \"tests/**/*.js\" vite.config.js",
     "predev": "npm run format",
     "prebuild": "npm run format",
-    "test": "node --test tests/*.test.js"
+    "test": "npm run test:logic && npm run test:ui",
+    "test:logic": "node --test tests/*.test.js",
+    "test:ui": "vitest run",
+    "lint": "eslint . --max-warnings 0"
   },
   "keywords": [],
   "author": "",
@@ -41,6 +44,6 @@
     "prettier": "^3.9.10",
     "tailwindcss": "^3.4.19",
     "vite": "^6.4.3",
-    "vitest": "^3.2.7"
+    "vitest": "^4.1.12"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..e24d46b
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1 @@
+export default {plugins:{tailwindcss:{},autoprefixer:{}}};
diff --git a/scripts/build-buildings.mjs b/scripts/build-buildings.mjs
index dac006c..c91e09d 100644
--- a/scripts/build-buildings.mjs
+++ b/scripts/build-buildings.mjs
@@ -17,9 +17,9 @@
 import {createReadStream, readFileSync, writeFileSync, mkdirSync} from 'node:fs';
 import {createGunzip} from 'node:zlib';
 import {createInterface} from 'node:readline';
-import {toLocal} from '../src/geo.js';
-import {FACTORY} from '../src/locations.js';
-import {createCollisionWorld, blocked} from '../src/collision.js';
+import {toLocal} from '../src/utils/geo.js';
+import {FACTORY} from '../src/constants/locations.js';
+import {createCollisionWorld, blocked} from '../src/game/world/collision.js';
 
 const [source] = process.argv.slice(2);
 if (!source) {
diff --git a/scripts/build-map-data.mjs b/scripts/build-map-data.mjs
index bb8a25e..a638057 100644
--- a/scripts/build-map-data.mjs
+++ b/scripts/build-map-data.mjs
@@ -15,7 +15,7 @@
 //   poi:          nwr["railway"="station"](36.28,59.48,36.36,59.60);nwr["amenity"="university"](…);out center tags;
 // Map data © OpenStreetMap contributors (ODbL). Province outlines: Natural Earth (public domain).
 import {readFileSync, writeFileSync} from 'node:fs';
-import {ORIGIN, toLocal} from '../src/geo.js';
+import {ORIGIN, toLocal} from '../src/utils/geo.js';
 
 const args = {osm: []};
 for (let i = 2, key = null; i < process.argv.length; i++) {
diff --git a/scripts/fetch-imagery.mjs b/scripts/fetch-imagery.mjs
index c1c38b7..4ab1fc3 100644
--- a/scripts/fetch-imagery.mjs
+++ b/scripts/fetch-imagery.mjs
@@ -10,9 +10,9 @@
 // Imagery: Esri, Maxar, Earthstar Geographics, and the GIS User Community. Commercial use and
 // hosting copies require a suitable Esri licence; check Esri's terms for your use.
 import {readFileSync, writeFileSync, mkdirSync, existsSync} from 'node:fs';
-import {toLatLon} from '../src/geo.js';
-import {buildGraph, routeBetween} from '../src/routing.js';
-import {FACTORY, machineById} from '../src/locations.js';
+import {toLatLon} from '../src/utils/geo.js';
+import {buildGraph, routeBetween} from '../src/game/world/routing.js';
+import {FACTORY, machineById} from '../src/constants/locations.js';
 
 const URL_TEMPLATE = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
 const OUT = new URL('../public/imagery/', import.meta.url);
diff --git a/src/components/shared/GameNode.jsx b/src/components/shared/GameNode.jsx
new file mode 100644
index 0000000..129c4d4
--- /dev/null
+++ b/src/components/shared/GameNode.jsx
@@ -0,0 +1,41 @@
+import { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+
+/** @typedef {{as?:string, model?:object, children?:import('react').ReactNode, onAction?:function, onClose?:function}} GameNodeProps */
+/** Renders an accessible view-model node without exposing the game engine to DOM mutations.
+ * @param {GameNodeProps} props - Plain presentation properties and callbacks.
+ * @returns {import('react').ReactElement} Native element.
+ */
+export function GameNode({ as: Tag = 'div', model = {}, children, onAction, onClose, ...props }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (Tag !== 'dialog' || !ref.current) return;
+    if (model.open && !ref.current.open) ref.current.showModal();
+    if (!model.open && ref.current.open) ref.current.close();
+  }, [Tag, model.open]);
+  const activeClasses = Object.entries(model.classes ?? {})
+    .filter(([, active]) => active)
+    .map(([name]) => name);
+  const selected = model.selected ?? props['aria-selected'];
+  const hidden = model.hidden ?? props.hidden;
+  return (
+    <Tag
+      {...props}
+      ref={ref}
+      hidden={hidden}
+      disabled={model.disabled ?? props.disabled}
+      className={clsx(model.className ?? props.className, activeClasses, {
+        on: model.pressed === true,
+      })}
+      style={model.style}
+      src={model.src ?? props.src}
+      aria-pressed={model.pressed ?? props['aria-pressed']}
+      aria-selected={selected}
+      onClick={onAction}
+      onCancel={onClose}
+      onClose={Tag === 'dialog' ? onClose : undefined}
+    >
+      {model.text ?? children}
+    </Tag>
+  );
+}
diff --git a/src/locations.js b/src/constants/locations.js
similarity index 100%
rename from src/locations.js
rename to src/constants/locations.js
diff --git a/src/game/createGame.js b/src/game/createGame.js
new file mode 100644
index 0000000..38fbb0f
--- /dev/null
+++ b/src/game/createGame.js
@@ -0,0 +1,2306 @@
+import { loadWorldFiles } from '../services/worldService.js';
+import * as THREE from 'three';
+import '../styles/game.css';
+import {
+  startTracking,
+  requestCompass,
+  arrivalRadius,
+  insideWorld,
+  createStabilizer,
+  MAX_WALKING_SPEED,
+} from './device/realworld.js';
+import { createArView } from './device/ar.js';
+import data from '../data/mellat.json';
+import iran from '../data/iran.json';
+import { createCity } from './world/city.js';
+import { createImagery } from './world/imagery.js';
+import { decodeBuildings } from './world/buildingsData.js';
+import {
+  createCollisionWorld,
+  addPolygon,
+  resolveCircle,
+  clearFraction,
+} from './world/collision.js';
+import {
+  buildGraph,
+  routeBetween,
+  buildSegmentIndex,
+  nearestSegment,
+  DRIVABLE_MAX_TYPE,
+} from './world/routing.js';
+import { machines, CATEGORIES, CITY_START, FACTORY, lockedPlaces } from '../constants/locations.js';
+import {
+  createState,
+  catalog,
+  priceAt,
+  isOpen,
+  purchaseBlocker,
+  formatHetoman,
+  formatClock,
+  fa,
+  canAffordAnything,
+} from './economy/gameState.js';
+import {
+  createPayment,
+  beginPayment,
+  readyPayment,
+  swipePayment,
+  cancelPayment,
+} from './economy/payment.js';
+import {
+  awardsFor,
+  rankFor,
+  completeMissions,
+  activeMission,
+  MISSIONS,
+} from './economy/scoring.js';
+import { createFamily } from './models/characters.js';
+import { createVendingMachine } from './models/vending.js';
+import { createFactory } from './models/factory.js';
+import { createCar, stepCar, kmh } from './systems/vehicle.js';
+import { createTraffic } from './systems/traffic.js';
+import { createSportSedan } from './models/carModels.js';
+import { createMapAssets, drawMinimap, drawFullMap, drawIran } from './world/mapRender.js';
+import { bearing, formatDistance, toLocal } from '../utils/geo.js';
+export async function createGame({ root, ui, signal }) {
+  const timers = new Set();
+  const setTimeout = (callback, delay) => {
+    const timer = window.setTimeout(() => {
+      timers.delete(timer);
+      if (!signal.aborted) callback();
+    }, delay);
+    timers.add(timer);
+    return timer;
+  };
+  const clearTimeout = (timer) => {
+    timers.delete(timer);
+    window.clearTimeout(timer);
+  };
+  const listen = (target, type, handler, options = {}) =>
+    target.addEventListener(type, handler, { ...options, signal });
+  let frameId;
+
+  const $ = (s) => root.querySelector(s);
+  const canvas = $('#world');
+  let renderer;
+  try {
+    // alpha: in camera AR view the phone's camera picture shows through where nothing is drawn.
+    renderer = new THREE.WebGLRenderer({
+      canvas,
+      antialias: true,
+      alpha: true,
+      powerPreference: 'high-performance',
+    });
+  } catch {
+    ui.patch('loading', {
+      text: 'مرورگر شما گرافیک سه‌بعدی (WebGL) را اجرا نمی‌کند. شتاب‌دهی گرافیکی را فعال کنید.',
+    });
+    throw new Error('WebGL unavailable');
+  }
+  // Low quality (no shadows, 1× pixels) for weak phones; chosen with ?quality=low or the toolbar button.
+  const quality =
+    new URLSearchParams(location.search).get('quality') ??
+    (() => {
+      try {
+        return localStorage.getItem('quality');
+      } catch {
+        return null;
+      }
+    })() ??
+    (matchMedia('(pointer: coarse)').matches ? 'low' : 'high');
+  renderer.setPixelRatio(quality === 'low' ? 1 : Math.min(devicePixelRatio, 1.75));
+  renderer.shadowMap.enabled = quality !== 'low';
+  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+  renderer.outputColorSpace = THREE.SRGBColorSpace;
+  renderer.toneMapping = THREE.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = 1.05;
+  const scene = new THREE.Scene();
+  const fog = new THREE.Fog('#d8cdb4', 220, 1500);
+  scene.fog = fog;
+  const camera = new THREE.PerspectiveCamera(62, 1, 0.3, 7000);
+
+  // Morning sky over Mashhad: a gradient dome, warm haze at the horizon.
+  const sky = new THREE.Mesh(
+    new THREE.SphereGeometry(5000, 32, 16),
+    new THREE.ShaderMaterial({
+      side: THREE.BackSide,
+      depthWrite: false,
+      fog: false,
+      uniforms: {
+        top: {
+          value: new THREE.Color('#6f9fd0'),
+        },
+        horizon: {
+          value: new THREE.Color('#e6dbc3'),
+        },
+      },
+      vertexShader:
+        'varying vec3 vPos; void main(){ vPos = position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }',
+      fragmentShader:
+        'uniform vec3 top; uniform vec3 horizon; varying vec3 vPos; void main(){ float h = clamp(normalize(vPos).y * 2.2, 0.0, 1.0); gl_FragColor = vec4(mix(horizon, top, h), 1.0); }',
+    }),
+  );
+  scene.add(sky);
+  scene.add(new THREE.HemisphereLight('#fff4dc', '#7d715d', 1.6));
+  const sun = new THREE.DirectionalLight('#ffe9c2', 3.2);
+  sun.castShadow = true;
+  sun.shadow.mapSize.set(2048, 2048);
+  Object.assign(sun.shadow.camera, {
+    left: -75,
+    right: 75,
+    top: 75,
+    bottom: -75,
+    near: 10,
+    far: 700,
+  });
+  sun.shadow.bias = -0.0004;
+  sun.shadow.normalBias = 0.4;
+  scene.add(sun, sun.target);
+
+  // ---------- World data ----------
+  // Microsoft's building footprints and the satellite tile list are downloaded files, not bundled code.
+  // The game still runs without them (OSM buildings and drawn roads).
+  const [buildingsFile, imageryIndex] = await loadWorldFiles(signal);
+  if (signal.aborted) {
+    renderer.dispose();
+    return () => {};
+  }
+  // Footprints reaching into the factory compound are left out: the game's own buildings stand there.
+  const inFactory = (x, z) => {
+    const dx = x - FACTORY.center.x,
+      dz = z - FACTORY.center.z;
+    const u = dx * FACTORY.axis.x + dz * FACTORY.axis.z,
+      v = -dx * FACTORY.axis.z + dz * FACTORY.axis.x;
+    return u > -112 && u < 82 && v > -52 && v < 52;
+  };
+  const extraBuildings = (buildingsFile ? decodeBuildings(buildingsFile) : []).filter((b) => {
+    for (let i = 1; i < b.length; i += 2) if (inFactory(b[i], b[i + 1])) return false;
+    return true;
+  });
+  const collision = createCollisionWorld(
+    [...data.buildings, ...extraBuildings].map((b) => b.slice(1)),
+  );
+  const segments = buildSegmentIndex(data.roads);
+  const walkGraph = buildGraph(data.roads),
+    driveGraph = buildGraph(data.roads, {
+      drivable: true,
+    });
+  const ROAD_HALF_WIDTH = [5.5, 5, 4.5, 4, 3.2, 3, 2.5, 2];
+  const rotateLocal = (lx, lz, rot) => ({
+    x: lx * Math.cos(rot) + lz * Math.sin(rot),
+    z: -lx * Math.sin(rot) + lz * Math.cos(rot),
+  });
+
+  // The game starts inside the vending-machine factory on the Mashhad–Chenaran road.
+  const factory = createFactory(scene);
+  factory.footprints.forEach((f) => addPolygon(collision, f));
+
+  // City machines stand beside their path point, on whichever side is free, facing the path;
+  // the factory's demo machine has a fixed place inside the production hall.
+  const stations = machines.map((def) => {
+    if (def.spot) {
+      // Test points: the given coordinate is where the player stands; the machine faces the factory.
+      const front = toLocal(def.spot.lat, def.spot.lon);
+      const dx = FACTORY.center.x - front.x,
+        dz = FACTORY.center.z - front.z,
+        len = Math.hypot(dx, dz) || 1;
+      return placeStation(
+        def,
+        {
+          x: front.x - (dx / len) * 1.9,
+          z: front.z - (dz / len) * 1.9,
+        },
+        Math.atan2(dx, dz),
+      );
+    }
+    if (!def.anchor) return placeStation(def, factory.demo, factory.demo.rot);
+    const seg = nearestSegment(segments, def.anchor.x, def.anchor.z, 40) ?? {
+      dx: 1,
+      dz: 0,
+      type: 9,
+    };
+    const len = Math.hypot(seg.dx, seg.dz) || 1,
+      nx = -seg.dz / len,
+      nz = seg.dx / len;
+    const off = (seg.type <= DRIVABLE_MAX_TYPE ? ROAD_HALF_WIDTH[seg.type] : 1.2) + 2.4;
+    let pos = null;
+    for (const d of [off, -off, off + 1.5, -off - 1.5]) {
+      const x = def.anchor.x + nx * d,
+        z = def.anchor.z + nz * d;
+      if (!resolveCircle(collision, x, z, 1.4).hit) {
+        pos = {
+          x,
+          z,
+        };
+        break;
+      }
+    }
+    pos ??= {
+      x: def.anchor.x + nx * off,
+      z: def.anchor.z + nz * off,
+    };
+    return placeStation(def, pos, Math.atan2(def.anchor.x - pos.x, def.anchor.z - pos.z));
+  });
+  function placeStation(def, pos, rot) {
+    const model = createVendingMachine(def);
+    model.group.position.set(pos.x, 0, pos.z);
+    model.group.rotation.y = rot;
+    scene.add(model.group);
+    addPolygon(
+      collision,
+      [
+        [-1, -0.6],
+        [1, -0.6],
+        [1, 0.6],
+        [-1, 0.6],
+      ].flatMap(([lx, lz]) => {
+        const p = rotateLocal(lx, lz, rot);
+        return [pos.x + p.x, pos.z + p.z];
+      }),
+    );
+    const front = rotateLocal(0, 1.9, rot);
+    return {
+      def,
+      model,
+      x: pos.x,
+      z: pos.z,
+      rot,
+      front: {
+        x: pos.x + front.x,
+        z: pos.z + front.z,
+      },
+    };
+  }
+  const stationById = (id) => stations.find((s) => s.def.id === id);
+  for (const s of stations) if (s.def.test) s.model.group.visible = false;
+
+  // In real-world mode a circle on the ground marks how close counts as "at the machine".
+  for (const s of stations) {
+    s.reach = new THREE.Mesh(
+      new THREE.RingGeometry(0.96, 1, 96),
+      new THREE.MeshBasicMaterial({
+        color: '#3ee0c9',
+        transparent: true,
+        opacity: 0.55,
+        depthWrite: false,
+        fog: false,
+        side: THREE.DoubleSide,
+      }),
+    );
+    s.reach.rotation.x = -Math.PI / 2;
+    s.reach.position.set(s.front.x, 0.08, s.front.z);
+    s.reach.visible = false;
+    scene.add(s.reach);
+  }
+  function updateReachCircles() {
+    const radius = reachRadius(),
+      objective = real.on ? objectiveStation() : null;
+    for (const s of stations) {
+      s.reach.visible = real.on;
+      if (!real.on) continue;
+      s.reach.scale.setScalar(radius);
+      s.reach.material.color.set(s === objective ? '#f2c94c' : '#3ee0c9');
+    }
+  }
+  // GPS test points only take part while real-world mode is on.
+  const activeStations = () => stations.filter((s) => !s.def.test || real.on);
+  // The closest active machine whose front is within `radius` of (x, z).
+  const closestStation = (x, z, radius) =>
+    activeStations()
+      .map((s) => ({
+        s,
+        d: Math.hypot(s.front.x - x, s.front.z - z),
+      }))
+      .filter(({ d }) => d < radius)
+      .sort((a, b) => a.d - b.d)[0]?.s ?? null;
+  const imagery = createImagery(scene, imageryIndex ?? {}, {
+    lowQuality: quality === 'low',
+    anisotropy: Math.min(16, renderer.capabilities.getMaxAnisotropy()),
+  });
+  const city = createCity(scene, data, {
+    collision,
+    segments,
+    extraBuildings,
+    satellite: imagery.available,
+    lowQuality: quality === 'low',
+  });
+  if (imagery.available)
+    ui.patch('attribution', {
+      text: `نقشه: © مشارکت‌کنندگان OpenStreetMap · تصویر ماهواره‌ای: ${imageryIndex.attribution}`,
+    });
+  const traffic = createTraffic(scene, data, 28);
+  const mapAssets = createMapAssets(data, [factory.label]);
+
+  // Park gate sign at the first city machine.
+  const parkGate = new THREE.Group();
+  {
+    const start = stationById(CITY_START),
+      sign = document.createElement('canvas');
+    sign.width = 512;
+    sign.height = 128;
+    const c = sign.getContext('2d');
+    c.fillStyle = '#244d2e';
+    c.fillRect(0, 0, 512, 128);
+    c.fillStyle = '#f4efd9';
+    c.textAlign = 'center';
+    c.font = 'bold 64px Vazirmatn, Tahoma, sans-serif';
+    c.fillText('بوستان ملت', 256, 86);
+    const texture = new THREE.CanvasTexture(sign);
+    texture.colorSpace = THREE.SRGBColorSpace;
+    const gate = parkGate,
+      post = new THREE.MeshStandardMaterial({
+        color: '#6b5a49',
+      });
+    for (const side of [-1, 1]) {
+      const p = new THREE.Mesh(new THREE.BoxGeometry(0.3, 4, 0.3), post);
+      p.position.set(side * 2.6, 2, 0);
+      p.castShadow = true;
+      gate.add(p);
+    }
+    const board = new THREE.Mesh(
+      new THREE.PlaneGeometry(5.6, 1.4),
+      new THREE.MeshBasicMaterial({
+        map: texture,
+        side: THREE.DoubleSide,
+      }),
+    );
+    board.position.y = 4;
+    gate.add(board);
+    const at = rotateLocal(-4.5, 1.5, start.rot);
+    gate.position.set(start.x + at.x, 0, start.z + at.z);
+    gate.rotation.y = start.rot;
+    scene.add(gate);
+  }
+
+  // ---------- Actors ----------
+  const family = createFamily();
+  scene.add(family.group);
+  // The Robot Market guide lives inside the machines and comes out when the family arrives.
+  const guide = createFamily({
+    robot: true,
+  });
+  guide.group.visible = false;
+  scene.add(guide.group);
+  const carModel = createSportSedan('#1d3f78');
+  scene.add(carModel.group);
+  let state, payment, player, car, mode, cam, waypoint, route, routeTimer, deliveryTimer, ended;
+  const keys = new Set();
+
+  // The family car waits in the factory yard right beside them, pointing at the gate.
+  const spawnCar = () => createCar(factory.car.x, factory.car.z, factory.car.heading);
+  function reset() {
+    state = createState();
+    payment = createPayment();
+    // The family starts in the factory yard, facing the engineering office.
+    const spot = resolveCircle(collision, factory.start.x, factory.start.z, 1);
+    player = {
+      x: spot.x,
+      z: spot.z,
+      heading: factory.start.heading,
+      speed: 0,
+      gait: 0,
+    };
+    factory.reset();
+    for (const t of factory.talks) t.done = false;
+    car = spawnCar();
+    mode = 'walk';
+    // Camera yaw: the camera sits at target + (sin yaw, cos yaw) * distance, so it looks along (-sin, -cos).
+    cam = {
+      yaw: Math.atan2(-Math.cos(player.heading), Math.sin(player.heading)),
+      pitch: 0.32,
+      distance: 5.5,
+      lastMouse: -10,
+    };
+    waypoint = null;
+    route = null;
+    routeTimer = 0;
+    deliveryTimer = 0;
+    ended = false;
+    hints = {
+      closed: false,
+      car: false,
+    };
+    Object.assign(guideState, {
+      station: null,
+      t: 0,
+      greeted: new Set(),
+      arrived: 0,
+    });
+    ui.patch('payment', {
+      hidden: true,
+    });
+    for (const s of stations) {
+      s.model.delivery.visible = s.model.card.visible = false;
+      s.model.flap.rotation.x = 0;
+    }
+    for (const id of ['shop', 'map-dialog', 'end']) ui.close(id);
+    keys.clear();
+    refreshHUD();
+  }
+
+  // ---------- Input ----------
+  const isTouch = matchMedia('(pointer: coarse)').matches;
+  const anyDialogOpen = () =>
+    ui.read('shop').open ||
+    ui.read('map-dialog').open ||
+    ui.read('end').open ||
+    !ui.read('briefing').hidden;
+  // Physical key codes, so the controls also work with a Persian keyboard layout.
+  const keyName = (e) =>
+    e.code.startsWith('Key') ? e.code.slice(3).toLowerCase() : e.key.toLowerCase();
+  listen(window, 'keydown', (e) => {
+    if (e.target instanceof HTMLInputElement) return;
+    const k = keyName(e);
+    if (k === 'm' && !e.repeat && ui.read('briefing').hidden) {
+      e.preventDefault();
+      ui.read('map-dialog').open ? ui.close('map-dialog') : openMap();
+      return;
+    }
+    if (anyDialogOpen()) return;
+    if ([' ', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright', 'tab'].includes(k))
+      e.preventDefault();
+    if (e.repeat) return;
+    keys.add(k);
+    if (k === 'f') toggleCar();
+    if (k === 'e') interact();
+    if (k === 'c') swipe();
+    if (k === 'escape' && payment.phase !== 'idle') cancel();
+  });
+  listen(window, 'keyup', (e) => keys.delete(keyName(e)));
+  listen(window, 'blur', () => keys.clear());
+
+  // Pointer lock gives a shooter-style mouse look; dragging works as a fallback and on touch.
+  listen(canvas, 'click', () => {
+    if (!isTouch && !anyDialogOpen() && document.pointerLockElement !== canvas)
+      canvas.requestPointerLock?.()?.catch?.(() => {});
+  });
+  listen(document, 'mousemove', (e) => {
+    if (document.pointerLockElement !== canvas) return;
+    look(e.movementX, e.movementY, 0.0024);
+  });
+  let drag = null;
+  listen(canvas, 'pointerdown', (e) => {
+    if (document.pointerLockElement === canvas) return;
+    drag = {
+      id: e.pointerId,
+      x: e.clientX,
+      y: e.clientY,
+    };
+    canvas.setPointerCapture(e.pointerId);
+  });
+  listen(canvas, 'pointermove', (e) => {
+    if (!drag || drag.id !== e.pointerId) return;
+    look(e.clientX - drag.x, e.clientY - drag.y, 0.005);
+    drag.x = e.clientX;
+    drag.y = e.clientY;
+  });
+  listen(canvas, 'pointerup', () => (drag = null));
+  listen(canvas, 'pointercancel', () => (drag = null));
+  listen(
+    canvas,
+    'wheel',
+    (e) => {
+      cam.distance = THREE.MathUtils.clamp(cam.distance + Math.sign(e.deltaY) * 0.6, 3, 12);
+    },
+    {
+      passive: true,
+    },
+  );
+  function look(dx, dy, k) {
+    // In AR view the phone's orientation aims the camera; dragging only helps when there is no sensor.
+    if (real.on) {
+      if (arView.hasOrientation) return;
+      cam.yaw -= dx * k;
+      cam.arPitch = THREE.MathUtils.clamp((cam.arPitch ?? 0) - dy * k * 0.8, -1.2, 1.2);
+      cam.lastMouse = elapsed;
+      return;
+    }
+    cam.yaw -= dx * k;
+    cam.pitch = THREE.MathUtils.clamp(cam.pitch + dy * k * 0.8, -0.15, 1.15);
+    cam.lastMouse = elapsed;
+  }
+
+  // Touch joystick: x steers / strafes, y walks / throttles.
+  const stick = {
+    x: 0,
+    y: 0,
+    id: null,
+  };
+  if (isTouch) {
+    ui.patch('touch', {
+      hidden: false,
+    });
+    const pad = $('#stick'),
+      knob = pad.querySelector('i');
+    const move = (e) => {
+      const r = pad.getBoundingClientRect(),
+        dx = e.clientX - (r.left + r.width / 2),
+        dy = e.clientY - (r.top + r.height / 2);
+      const len = Math.min(1, Math.hypot(dx, dy) / (r.width / 2)),
+        a = Math.atan2(dy, dx);
+      stick.x = Math.cos(a) * len;
+      stick.y = -Math.sin(a) * len;
+      knob.style.transform = `translate(${stick.x * 40}px, ${-stick.y * 40}px)`;
+    };
+    listen(pad, 'pointerdown', (e) => {
+      stick.id = e.pointerId;
+      pad.setPointerCapture(e.pointerId);
+      move(e);
+    });
+    listen(pad, 'pointermove', (e) => e.pointerId === stick.id && move(e));
+    const end = () => {
+      stick.id = null;
+      stick.x = stick.y = 0;
+      knob.style.transform = '';
+    };
+    listen(pad, 'pointerup', end);
+    listen(pad, 'pointercancel', end);
+    for (const k of ['shift', 'f', 'e'])
+      ui.on(`touch-${k}`, () => {
+        if (k === 'shift') {
+          if (keys.has('shift')) keys.delete('shift');
+          else keys.add('shift');
+          ui.patch('touch-shift', {
+            pressed: keys.has('shift'),
+          });
+        }
+        if (k === 'f') toggleCar();
+        if (k === 'e') payment.phase === 'ready' ? swipe() : interact();
+      });
+  }
+  const axis = (pos, neg) =>
+    Number(pos.some((k) => keys.has(k))) - Number(neg.some((k) => keys.has(k)));
+
+  // ---------- Subtitles ----------
+  const SPEAKERS = {
+    robot: 'روبات',
+    father: 'پدر',
+    child: 'بچه',
+  };
+  // Factory staff speak under their own names.
+  for (const t of factory.talks) if (t.label) SPEAKERS[t.speaker] = t.label;
+  let lines = [],
+    lineTimer = 0,
+    talking = false;
+
+  // `face` picks the robot's expression portrait (public/robot/<face>.webp).
+  function say(speaker, text, face = 'happy', seconds = Math.max(2.6, text.length * 0.06)) {
+    if (lines.some((l) => l.text === text)) return;
+    lines.push({
+      speaker,
+      text,
+      face,
+      seconds,
+    });
+  }
+  function updateSubtitles(dt) {
+    lineTimer -= dt;
+    if (lineTimer > 0) return;
+    const next = lines.shift();
+    ui.patch('subtitle', {
+      hidden: !next,
+    });
+    talking = next?.speaker === 'robot';
+    if (!next) return;
+    ui.patch('subtitle-speaker', {
+      text: `${SPEAKERS[next.speaker]}:`,
+    });
+    ui.patch('subtitle-speaker', {
+      className: ['robot', 'father', 'child'].includes(next.speaker) ? next.speaker : 'staff',
+    });
+    ui.patch('subtitle-text', {
+      text: next.text,
+    });
+    ui.patch('subtitle-face', {
+      hidden: next.speaker !== 'robot',
+    });
+    if (next.speaker === 'robot')
+      ui.patch('subtitle-face', {
+        src: `./robot/${next.face}.webp`,
+      });
+    lineTimer = next.seconds;
+  }
+
+  // ---------- Sound ----------
+  let audio = null,
+    soundOn = false,
+    engine = null;
+  function tone(freq, duration = 0.12, volume = 0.05, type = 'sine') {
+    if (!soundOn) return;
+    const o = audio.createOscillator(),
+      g = audio.createGain();
+    o.type = type;
+    o.frequency.setValueAtTime(freq, audio.currentTime);
+    o.frequency.exponentialRampToValueAtTime(freq * 0.7, audio.currentTime + duration);
+    g.gain.setValueAtTime(volume, audio.currentTime);
+    g.gain.exponentialRampToValueAtTime(0.001, audio.currentTime + duration);
+    o.connect(g).connect(audio.destination);
+    o.start();
+    o.stop(audio.currentTime + duration);
+  }
+  ui.on('sound', async () => {
+    try {
+      audio ??= new AudioContext();
+      await audio.resume();
+      soundOn = !soundOn;
+      if (!engine) {
+        const o = audio.createOscillator(),
+          g = audio.createGain();
+        o.type = 'sawtooth';
+        g.gain.value = 0;
+        o.connect(g).connect(audio.destination);
+        o.start();
+        engine = {
+          o,
+          g,
+        };
+      }
+      ui.patch('sound', {
+        text: soundOn ? 'صدا: روشن' : 'صدا: خاموش',
+      });
+      ui.patch('sound', {
+        pressed: String(soundOn),
+      });
+      tone(700);
+    } catch {
+      ui.patch('sound', {
+        text: 'صدا در دسترس نیست',
+      });
+    }
+  });
+
+  // ---------- Car ----------
+  function toggleCar() {
+    if (payment.phase !== 'idle' || state.busy) return;
+    if (real.on) {
+      say('father', 'توی حالت دنیای واقعی پیاده راه می‌ریم؛ ماشین مجازی لازم نیست.');
+      return;
+    }
+    if (mode === 'walk') {
+      if (Math.hypot(car.x - player.x, car.z - player.z) > 4.5) return;
+      mode = 'drive';
+      cam.distance = Math.max(cam.distance, 8);
+      tone(320, 0.2, 0.05, 'square');
+      say('father', 'کمربندها رو ببندیم! مسیر طلایی روی زمین راه رو نشون می‌ده.');
+    } else {
+      if (Math.abs(car.speed) > 3) {
+        say('father', 'اول ماشین را نگه دار، بعد پیاده می‌شویم.');
+        return;
+      }
+      // Step out on the driver's (left) side, or wherever is free.
+      const left = {
+        x: -Math.sin(car.heading),
+        z: -Math.cos(car.heading),
+      };
+      const spot = resolveCircle(collision, car.x + left.x * 2.8, car.z + left.z * 2.8, 1);
+      Object.assign(player, {
+        x: spot.x,
+        z: spot.z,
+        heading: car.heading,
+      });
+      car.speed = 0;
+      mode = 'walk';
+      cam.distance = 5.5;
+      tone(260, 0.2, 0.05, 'square');
+    }
+    refreshHUD();
+  }
+
+  // ---------- Machines, shop and payment ----------
+  // In real-world mode "at the machine" is a GPS radius, because the fix itself is off by metres.
+  const reachRadius = () => (real.on && real.fix ? arrivalRadius(real.fix.accuracy) : 3.4);
+  const nearStation = () =>
+    mode === 'walk' ? closestStation(player.x, player.z, reachRadius()) : null;
+  const hoursText = (m) =>
+    m.hours[1] - m.hours[0] >= 24 * 60
+      ? 'شبانه‌روزی'
+      : `${formatClock(m.hours[0])} تا ${formatClock(m.hours[1])}`;
+  let shopStation = null;
+  function interact() {
+    const station = nearStation();
+    if (!station || state.busy || payment.phase !== 'idle' || ended) return;
+    if (real.on && (real.fix?.speed ?? 0) > MAX_WALKING_SPEED) {
+      say('father', 'داریم سریع حرکت می‌کنیم؛ اول بایستیم، بعد خرید کنیم.');
+      return;
+    }
+    if (!isOpen(station.def, state.minutes)) {
+      say(
+        guideOut() ? 'robot' : 'father',
+        `این دستگاه الان بسته است. ساعت کاری: ${hoursText(station.def)}.`,
+        'serious',
+      );
+      return;
+    }
+    shopStation = station;
+    renderShop();
+    document.exitPointerLock?.();
+    keys.clear();
+    ui.open('shop');
+    tone(750);
+  }
+  function renderShop() {
+    const def = shopStation.def;
+    ui.patch('shop-category', {
+      text: `${CATEGORIES[def.category].icon} ${CATEGORIES[def.category].label} · ساعت کاری ${hoursText(def)}`,
+    });
+    ui.patch('shop-name', {
+      text: `روبات مارکت · ${def.name}`,
+    });
+    ui.patch('shop-address', {
+      text: def.address,
+    });
+    ui.patch('shop-note', {
+      text: `${def.note} · موجودی شما: ${formatHetoman(state.balance)}`,
+    });
+    ui.patch('products', {
+      items: def.products.map((id) => ({
+        id,
+        ...catalog[id],
+        price: priceAt(def, id),
+        blocked: purchaseBlocker(state, def, id),
+      })),
+    });
+  }
+  function startPayment(productId) {
+    if (!beginPayment(state, payment, shopStation.def, productId)) return;
+    payment.station = shopStation;
+    payment.timer = 0;
+    ui.close('shop');
+    const p = catalog[productId];
+    ui.patch('payment', {
+      hidden: false,
+    });
+    ui.patch('payment-title', {
+      text: `${p.icon} ${p.name} · ${formatHetoman(priceAt(shopStation.def, productId))}`,
+    });
+    ui.patch('payment-step', {
+      text: 'در حال نزدیک شدن به کارت‌خوان…',
+    });
+    ui.patch('swipe', {
+      disabled: true,
+    });
+    ui.patch('cancel-payment', {
+      hidden: false,
+    });
+    say('child', 'بابا، کارت رو بده من بکشم!');
+  }
+  function swipe() {
+    if (!swipePayment(state, payment)) return;
+    payment.timer = 0;
+    payment.station.model.card.visible = true;
+    ui.patch('swipe', {
+      disabled: true,
+    });
+    ui.patch('cancel-payment', {
+      hidden: true,
+    });
+    ui.patch('payment-step', {
+      text: 'پرداخت موفق ✓ محصول در حال تحویل است',
+    });
+    tone(1100, 0.3);
+    refreshHUD();
+  }
+  function cancel() {
+    if (!cancelPayment(state, payment)) return;
+    ui.patch('payment', {
+      hidden: true,
+    });
+  }
+  ui.on('swipe', swipe);
+  // On phones the prompt itself is the button: tap it to buy, swipe the card, or get in/out of the car.
+  ui.on('prompt', () => {
+    if (payment.phase === 'ready') swipe();
+    else if (nearStation()) interact();
+    else toggleCar();
+  });
+  ui.on('cancel-payment', cancel);
+  ui.on('shop-close', () => ui.close('shop'));
+  function updatePayment(dt) {
+    if (payment.phase === 'idle') return;
+    payment.timer += dt;
+    const model = payment.station.model;
+    if (payment.phase === 'approaching' && payment.timer > 1) {
+      readyPayment(payment);
+      ui.patch('swipe', {
+        disabled: false,
+      });
+      ui.patch('payment-step', {
+        text: 'کارت را بکشید: دکمهٔ «کشیدن کارت» یا کلید C',
+      });
+    }
+    if (payment.phase === 'approved') {
+      const t = Math.min(1, payment.timer);
+      model.card.position.set(0.95 - t * 0.25, 1.7 - t * 0.1, 0.66);
+      if (payment.timer > 1.2) {
+        model.card.visible = false;
+        ui.patch('payment', {
+          hidden: true,
+        });
+        model.setDelivery(payment.productId);
+        deliveryTimer = 2.6;
+        payment.delivering = {
+          station: payment.station,
+          record: payment.record,
+        };
+        Object.assign(payment, createPayment());
+      }
+    }
+  }
+  function updateDelivery(dt) {
+    if (deliveryTimer <= 0) return;
+    deliveryTimer = Math.max(0, deliveryTimer - dt);
+    const { station, record } = payment.delivering,
+      model = station.model,
+      t = 2.6 - deliveryTimer;
+    const slot = record ? catalog[record.productId] : null;
+    model.delivery.visible = t < 2.4;
+    // Falls from a shelf, waits in the tray, then lifts toward the child's hands.
+    const shelf = new THREE.Vector3(
+      -0.5 + (record.price % 7) * 0.1,
+      1.2 + (record.price % 5) * 0.15,
+      0.45,
+    );
+    if (t < 0.8) model.delivery.position.lerpVectors(shelf, model.slotPoint, t / 0.8);
+    else
+      model.delivery.position
+        .copy(model.slotPoint)
+        .add(new THREE.Vector3(0, Math.max(0, t - 1.6) * 0.6, Math.max(0, t - 1.6) * 0.8));
+    model.flap.rotation.x = t > 0.7 && t < 2 ? -1 : 0;
+    if (deliveryTimer > 0) return;
+    model.flap.rotation.x = 0;
+    state.busy = false;
+    tone(980, 0.18);
+    reward(record, slot);
+  }
+  function reward(record, product) {
+    const awards = awardsFor(state.purchases.slice(0, -1), record),
+      rankBefore = rankFor(state.xp).index;
+    if (real.on)
+      awards.push({
+        label: 'خرید در دنیای واقعی',
+        points: 200,
+      });
+    const total = awards.reduce((s, a) => s + a.points, 0);
+    state.xp += total;
+    ui.patch('awards', {
+      items: awards,
+      total,
+    });
+    clearTimeout(reward.timeout);
+    reward.timeout = setTimeout(
+      () =>
+        ui.patch('awards', {
+          items: [],
+        }),
+      3200,
+    );
+    say('child', `${product.icon} ${product.name} گرفتم! مرسی بابا.`);
+    const done = completeMissions(state);
+    for (const m of done) {
+      showBanner(
+        'مأموریت انجام شد',
+        m.title,
+        `+${fa(m.xp)} XP · +${formatHetoman(m.hetoman)} پاداش`,
+      );
+      tone(660, 0.5);
+    }
+    if (rankFor(state.xp).index > rankBefore)
+      setTimeout(
+        () => showBanner('ارتقای درجه', rankFor(state.xp).name, 'دستگاه‌های بیشتری پیدا کن'),
+        done.length ? 3400 : 0,
+      );
+    const next = activeMission(state);
+    if (next) {
+      waypoint = null;
+      route = null;
+      setTimeout(
+        () => say(guideOut() ? 'robot' : 'father', `مأموریت بعدی: ${next.title}`, 'wink'),
+        1500,
+      );
+    }
+    refreshHUD();
+    checkEnd();
+  }
+  function showBanner(tag, title, sub) {
+    ui.patch('banner', {
+      tag,
+      title,
+      sub,
+      hidden: false,
+    });
+    clearTimeout(showBanner.timeout);
+    showBanner.timeout = setTimeout(
+      () =>
+        ui.patch('banner', {
+          hidden: true,
+        }),
+      3200,
+    );
+  }
+  function checkEnd() {
+    const allDone = state.missionsDone.length === MISSIONS.length;
+    if (ended || (!allDone && canAffordAnything(state, machines))) return;
+    ended = true;
+    document.exitPointerLock?.();
+    ui.patch('end-tag', {
+      text: allDone ? 'عملیات موفق' : 'پایان بودجه',
+    });
+    ui.patch('end-title', {
+      text: allDone ? 'عملیات مشهد کامل شد!' : 'بودجهٔ امروز تمام شد',
+    });
+    ui.patch('end-text', {
+      text: allDone
+        ? 'همهٔ مأموریت‌های محدودهٔ بوستان ملت انجام شد. مناطق دیگر مشهد به‌زودی باز می‌شوند.'
+        : 'دیگر نمی‌توانید از دستگاه‌ها خرید کنید. امتیاز امروز:',
+    });
+    const places = new Set(state.purchases.map((p) => p.machineId)).size;
+    ui.patch('end-stats', {
+      items: [
+        ['امتیاز', `${fa(state.xp)} XP`],
+        ['درجه', rankFor(state.xp).name],
+        ['خریدها', fa(state.purchases.length)],
+        ['مکان‌های کشف‌شده', `${fa(places)} از ${fa(machines.length)}`],
+        ['مأموریت‌ها', `${fa(state.missionsDone.length)} از ${fa(MISSIONS.length)}`],
+        ['باقی‌مانده', formatHetoman(state.balance)],
+      ],
+    });
+    ui.patch('continue', {
+      hidden: !allDone,
+    });
+    ui.open('end');
+  }
+  ui.patch('quality', {
+    text: quality === 'low' ? 'گرافیک: سبک' : 'گرافیک: کامل',
+  });
+  ui.on('quality', () => {
+    try {
+      localStorage.setItem('quality', quality === 'low' ? 'high' : 'low');
+    } catch {}
+    location.replace(location.pathname);
+  });
+  ui.on('again', reset);
+  ui.on('continue', () => ui.close('end'));
+  ui.on('restart', reset);
+
+  // ---------- Objective, route and HUD ----------
+  const objectiveStation = () => {
+    if (waypoint) return stationById(waypoint);
+    const mission = activeMission(state);
+    if (mission?.target) return stationById(mission.target);
+    // Open-ended missions point to the nearest place not bought from yet.
+    const visited = new Set(state.purchases.map((p) => p.machineId));
+    return (
+      activeStations()
+        .filter((s) => !visited.has(s.def.id))
+        .sort(
+          (a, b) =>
+            Math.hypot(a.x - player.x, a.z - player.z) - Math.hypot(b.x - player.x, b.z - player.z),
+        )[0] ?? null
+    );
+  };
+
+  // The gold route ribbon on the ground, rebuilt when the route changes.
+  const routeMaterial = new THREE.MeshBasicMaterial({
+    color: '#f2c94c',
+    transparent: true,
+    opacity: 0.75,
+    depthWrite: false,
+    polygonOffset: true,
+    polygonOffsetFactor: -12,
+    polygonOffsetUnits: -24,
+  });
+  let routeMesh = null;
+  function rebuildRouteMesh() {
+    if (routeMesh) {
+      scene.remove(routeMesh);
+      routeMesh.geometry.dispose();
+      routeMesh = null;
+    }
+    if (!route) return;
+    const pts = [],
+      pos = [],
+      idx = [];
+    let total = 0;
+    for (const p of route.points) {
+      if (pts.length) total += Math.hypot(p.x - pts.at(-1).x, p.z - pts.at(-1).z);
+      if (total > 700) break;
+      pts.push(p);
+    }
+    for (let i = 0; i < pts.length; i++) {
+      const a = pts[Math.max(0, i - 1)],
+        b = pts[Math.min(pts.length - 1, i + 1)];
+      const dx = b.x - a.x,
+        dz = b.z - a.z,
+        len = Math.hypot(dx, dz) || 1,
+        w = mode === 'drive' ? 1.1 : 0.55;
+      pos.push(
+        pts[i].x - (dz / len) * w,
+        0.14,
+        pts[i].z + (dx / len) * w,
+        pts[i].x + (dz / len) * w,
+        0.14,
+        pts[i].z - (dx / len) * w,
+      );
+      if (i) idx.push((i - 1) * 2, i * 2, (i - 1) * 2 + 1, (i - 1) * 2 + 1, i * 2, i * 2 + 1);
+    }
+    const g = new THREE.BufferGeometry();
+    g.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
+    g.setIndex(idx);
+    routeMesh = new THREE.Mesh(g, routeMaterial);
+    scene.add(routeMesh);
+  }
+  let routeTarget = null,
+    routeFrom = {
+      x: 0,
+      z: 0,
+    },
+    routeMode = null;
+  function updateRoute(dt) {
+    routeTimer -= dt;
+    const target = objectiveStation();
+    if (!target) {
+      if (route) {
+        route = null;
+        rebuildRouteMesh();
+      }
+      return;
+    }
+    const pos = mode === 'drive' ? car : player;
+    const changed = target !== routeTarget || routeMode !== mode || !route;
+    if (!changed && (routeTimer > 0 || Math.hypot(pos.x - routeFrom.x, pos.z - routeFrom.z) < 10))
+      return;
+    routeTimer = 1.2;
+    routeTarget = target;
+    routeMode = mode;
+    routeFrom = {
+      x: pos.x,
+      z: pos.z,
+    };
+    // Close targets are reached directly; the street network would detour out of buildings.
+    const direct = Math.hypot(target.front.x - pos.x, target.front.z - pos.z);
+    route =
+      direct < 60
+        ? {
+            points: [
+              {
+                x: pos.x,
+                z: pos.z,
+              },
+              {
+                x: target.front.x,
+                z: target.front.z,
+              },
+            ],
+            length: direct,
+          }
+        : routeBetween(
+            mode === 'drive' ? driveGraph : walkGraph,
+            pos.x,
+            pos.z,
+            target.front.x,
+            target.front.z,
+          );
+    rebuildRouteMesh();
+  }
+  const compass = $('#compass').getContext('2d'),
+    minimap = $('#minimap').getContext('2d');
+  function drawCompass(headingDeg, markers) {
+    const w = 560,
+      h = 44;
+    compass.clearRect(0, 0, w, h);
+    compass.fillStyle = 'rgba(10,16,14,.45)';
+    compass.fillRect(0, 10, w, 24);
+    compass.textAlign = 'center';
+    compass.textBaseline = 'middle';
+    const labels = {
+      0: 'شمال',
+      90: 'شرق',
+      180: 'جنوب',
+      270: 'غرب',
+    };
+    for (let d = -100; d <= 100; d += 5) {
+      const deg = (((Math.round(headingDeg / 5) * 5 + d) % 360) + 360) % 360,
+        x = w / 2 + ((deg - headingDeg + 540) % 360) * 2.6 - 180 * 2.6;
+      if (x < 10 || x > w - 10) continue;
+      compass.fillStyle = 'rgba(236,242,238,.8)';
+      if (labels[deg] !== undefined) {
+        compass.font = 'bold 13px Vazirmatn, sans-serif';
+        compass.fillStyle = deg === 0 ? '#f2c94c' : '#ecf2ee';
+        compass.fillText(labels[deg], x, 22);
+      } else if (deg % 15 === 0) {
+        compass.font = '10px Vazirmatn, sans-serif';
+        compass.fillText(fa(deg), x, 22);
+      } else compass.fillRect(x - 0.5, 18, 1, 8);
+    }
+    for (const m of markers) {
+      const x = w / 2 + (((m.bearing - headingDeg + 540) % 360) - 180) * 2.6;
+      if (x < 10 || x > w - 10) continue;
+      compass.save();
+      compass.translate(x, 6);
+      compass.rotate(Math.PI / 4);
+      compass.fillStyle = m.color;
+      compass.fillRect(-4, -4, 8, 8);
+      compass.restore();
+    }
+    compass.fillStyle = '#ecf2ee';
+    compass.fillRect(w / 2 - 1, 34, 2, 8);
+    compass.font = 'bold 11px Vazirmatn, sans-serif';
+    compass.fillText(fa(Math.round(headingDeg) % 360), w / 2, 6);
+  }
+  function refreshHUD() {
+    ui.patch('balance', {
+      text: fa(state.balance),
+    });
+    const rank = rankFor(state.xp);
+    ui.patch('rank-name', {
+      text: rank.name,
+    });
+    ui.patch('xp', {
+      text: rank.next ? `${fa(state.xp)} / ${fa(rank.next)} XP` : `${fa(state.xp)} XP`,
+    });
+    ui.style('xp-bar', {
+      width: `${Math.round(rank.progress * 100)}%`,
+    });
+    const active = activeMission(state);
+    ui.patch('mission-list', {
+      items: MISSIONS.map((m) => ({
+        id: m.id,
+        title: m.title,
+        done: state.missionsDone.includes(m.id),
+        active: m === active,
+      })),
+    });
+    ui.publishGame(state);
+    ui.patch('mode-label', {
+      text: mode === 'drive' ? 'در ماشین · F برای پیاده شدن' : 'پیاده',
+    });
+    ui.patch('speed-stat', {
+      hidden: mode !== 'drive',
+    });
+  }
+  function updatePrompt() {
+    let text = '';
+    const station = nearStation();
+    if (!state.busy && payment.phase === 'idle') {
+      if (station)
+        text = isOpen(station.def, state.minutes)
+          ? `E · خرید از روبات مارکت · ${station.def.name}`
+          : `دستگاه بسته است · ${hoursText(station.def)}`;
+      else if (mode === 'walk' && Math.hypot(car.x - player.x, car.z - player.z) < 4.5)
+        text = 'F · سوار ماشین شو';
+      else if (
+        mode === 'drive' &&
+        Math.abs(car.speed) < 1 &&
+        stations.some((s) => Math.hypot(s.front.x - car.x, s.front.z - car.z) < 25)
+      )
+        text = 'F · پیاده شو؛ دستگاه نزدیک است';
+    }
+    ui.patch('prompt', {
+      text,
+      hidden: !text,
+    });
+  }
+
+  // ---------- Map dialog ----------
+  const mapView = {
+      cx: 0,
+      cz: 0,
+      mpp: 2,
+    },
+    mapCanvas = $('#fullmap'),
+    iranCanvas = $('#iran-map');
+  let selected = null,
+    mapTab = 'city';
+  const markers = () => {
+    const visited = new Set(state.purchases.map((p) => p.machineId)),
+      objective = objectiveStation();
+    return activeStations().map((s) => ({
+      id: s.def.id,
+      x: s.x,
+      z: s.z,
+      visited: visited.has(s.def.id),
+      open: isOpen(s.def, state.minutes),
+      objective: s === objective,
+    }));
+  };
+  function sizeCanvas(c) {
+    const r = c.getBoundingClientRect(),
+      dpr = Math.min(devicePixelRatio, 2);
+    c.width = Math.max(1, r.width * dpr);
+    c.height = Math.max(1, r.height * dpr);
+    return dpr;
+  }
+  function renderMap() {
+    if (!ui.read('map-dialog').open) return;
+    if (mapTab === 'city') {
+      const dpr = sizeCanvas(mapCanvas);
+      const pos = mode === 'drive' ? car : player;
+      drawFullMap(mapCanvas.getContext('2d'), mapAssets, mapView, {
+        dpr,
+        markers: markers(),
+        route: route?.points,
+        selected,
+        player: {
+          x: pos.x,
+          z: pos.z,
+          heading: mode === 'drive' ? car.heading : player.heading,
+        },
+      });
+    } else {
+      const dpr = sizeCanvas(iranCanvas),
+        c = iranCanvas.getContext('2d');
+      c.setTransform(dpr, 0, 0, dpr, 0, 0);
+      drawIran(c, iran, {
+        width: iranCanvas.width / dpr,
+        height: iranCanvas.height / dpr,
+        t: elapsed,
+        cities: CITIES,
+      });
+    }
+  }
+  function renderMachineList() {
+    const pos = mode === 'drive' ? car : player;
+    const visited = new Set(state.purchases.map((p) => p.machineId));
+    const items = activeStations().map((s) => ({
+      id: s.def.id,
+      name: s.def.name,
+      icon: CATEGORIES[s.def.category].icon,
+      category: CATEGORIES[s.def.category].label,
+      visited: visited.has(s.def.id),
+      open: isOpen(s.def, state.minutes),
+      selected: s.def.id === selected,
+      distance: formatDistance(Math.hypot(s.x - pos.x, s.z - pos.z)),
+    }));
+    ui.patch('machine-list', {
+      items: [
+        ...items,
+        ...lockedPlaces.map((p) => ({
+          ...p,
+          id: p.name,
+          locked: true,
+        })),
+      ],
+    });
+  }
+  function selectMachine(id, center = false) {
+    selected = id;
+    const s = stationById(id),
+      def = s.def;
+    if (center) {
+      mapView.cx = s.x;
+      mapView.cz = s.z;
+      mapView.mpp = Math.min(mapView.mpp, 1.4);
+    }
+    ui.patch('machine-detail', {
+      hidden: false,
+    });
+    ui.patch('detail-name', {
+      text: `${CATEGORIES[def.category].icon} ${def.name}`,
+    });
+    ui.patch('detail-address', {
+      text: `📍 ${def.address}`,
+    });
+    ui.patch('detail-meta', {
+      text: `🕒 ${hoursText(def)} · ${isOpen(def, state.minutes) ? 'الان باز است' : 'الان بسته است'} · ${def.note}`,
+    });
+    ui.patch('detail-products', {
+      text: def.products
+        .map((id) => `${catalog[id].icon} ${catalog[id].name} ${fa(priceAt(def, id))}`)
+        .join(' · '),
+    });
+    ui.patch('route-button', {
+      text: waypoint === id ? 'مسیر فعال است ✓' : 'مسیریابی تا اینجا',
+    });
+    renderMachineList();
+    renderMap();
+  }
+  ui.on('route-button', () => {
+    if (!selected) return;
+    waypoint = selected;
+    route = null;
+    routeTimer = 0;
+    updateRoute(0);
+    const s = stationById(selected);
+    say(
+      'father',
+      `مسیر تا ${s.def.name} رو گذاشتم؛ ${route ? formatDistance(route.length) : ''}. دنبال خط طلایی بریم.`,
+    );
+    selectMachine(selected);
+  });
+  function openMap() {
+    if (anyDialogOpen()) return;
+    document.exitPointerLock?.();
+    keys.clear();
+    const pos = mode === 'drive' ? car : player;
+    Object.assign(mapView, {
+      cx: pos.x,
+      cz: pos.z,
+      mpp: 2.2,
+    });
+    ui.open('map-dialog');
+    selected ??= objectiveStation()?.def.id ?? null;
+    if (selected) selectMachine(selected);
+    renderMachineList();
+    renderMap();
+  }
+  ui.on('minimap-button', openMap);
+  ui.on('map-close', () => ui.close('map-dialog'));
+  for (const tab of ['city', 'iran'])
+    ui.on(`tab-${tab}`, () => {
+      mapTab = tab;
+      ui.patch('tab-city', {
+        selected: tab === 'city',
+      });
+      ui.patch('tab-iran', {
+        selected: tab === 'iran',
+      });
+      ui.patch('fullmap', { hidden: tab !== 'city' });
+      ui.patch('iran-map', { hidden: tab !== 'iran' });
+      renderMap();
+    });
+  ui.on('select-machine', (id) => selectMachine(id, true));
+  ui.on('select-product', startPayment);
+  let mapDrag = null;
+  listen(mapCanvas, 'pointerdown', (e) => {
+    mapDrag = {
+      x: e.clientX,
+      y: e.clientY,
+      moved: 0,
+    };
+    mapCanvas.setPointerCapture(e.pointerId);
+  });
+  listen(mapCanvas, 'pointermove', (e) => {
+    if (!mapDrag) return;
+    mapView.cx -= (e.clientX - mapDrag.x) * mapView.mpp;
+    mapView.cz -= (e.clientY - mapDrag.y) * mapView.mpp;
+    mapDrag.moved += Math.abs(e.clientX - mapDrag.x) + Math.abs(e.clientY - mapDrag.y);
+    mapDrag.x = e.clientX;
+    mapDrag.y = e.clientY;
+    renderMap();
+  });
+  listen(mapCanvas, 'pointerup', (e) => {
+    if (mapDrag && mapDrag.moved < 6) {
+      const r = mapCanvas.getBoundingClientRect();
+      const wx = mapView.cx + (e.clientX - r.left - r.width / 2) * mapView.mpp,
+        wz = mapView.cz + (e.clientY - r.top - r.height / 2) * mapView.mpp;
+      const hit = activeStations().find((s) => Math.hypot(s.x - wx, s.z - wz) < 14 * mapView.mpp);
+      if (hit) selectMachine(hit.def.id);
+    }
+    mapDrag = null;
+  });
+  listen(
+    mapCanvas,
+    'wheel',
+    (e) => {
+      e.preventDefault();
+      mapView.mpp = THREE.MathUtils.clamp(mapView.mpp * (e.deltaY > 0 ? 1.15 : 1 / 1.15), 0.35, 30);
+      renderMap();
+    },
+    {
+      passive: false,
+    },
+  );
+
+  // ---------- Briefing ----------
+  const CITIES = [
+    {
+      name: 'مشهد',
+      lat: 36.3,
+      lon: 59.6,
+      active: true,
+    },
+    {
+      name: 'تهران',
+      lat: 35.69,
+      lon: 51.39,
+    },
+    {
+      name: 'اصفهان',
+      lat: 32.65,
+      lon: 51.67,
+    },
+    {
+      name: 'شیراز',
+      lat: 29.59,
+      lon: 52.58,
+    },
+    {
+      name: 'تبریز',
+      lat: 38.08,
+      lon: 46.29,
+    },
+    {
+      name: 'اهواز',
+      lat: 31.32,
+      lon: 48.67,
+    },
+    {
+      name: 'کرمان',
+      lat: 30.28,
+      lon: 57.08,
+    },
+    {
+      name: 'رشت',
+      lat: 37.28,
+      lon: 49.58,
+    },
+    {
+      name: 'یزد',
+      lat: 31.9,
+      lon: 54.37,
+    },
+    {
+      name: 'زاهدان',
+      lat: 29.5,
+      lon: 60.86,
+    },
+    {
+      name: 'کرمانشاه',
+      lat: 34.31,
+      lon: 47.07,
+    },
+    {
+      name: 'بندرعباس',
+      lat: 27.18,
+      lon: 56.27,
+    },
+  ];
+  const BRIEF = [
+    `نقطهٔ شروع: ${FACTORY.name}، بزرگراه مشهد–چناران`,
+    'تیم: پدر و فرزند · روبات راهنما در دستگاه‌ها منتظر شماست',
+    'هدف: از کارخانه تا بوستان ملت و دانشگاه فردوسی (حدود ۲۰ کیلومتر) بروید و دستگاه‌های روبات مارکت را در پارک، مدرسه، دانشگاه، ایستگاه مترو و مرکز خرید پیدا کنید.',
+    'هر خرید امتیاز دارد؛ کشف مکان تازه و ترکیب نوشیدنی و خوراکی امتیاز بیشتری دارد.',
+    'بودجه: ۵۰۰ هتومان · مأموریت‌ها پاداش نقدی دارند.',
+    'رفت‌وآمد: پیاده یا با ماشین. نقشهٔ گوشهٔ صفحه را بزنید تا آدرس دستگاه‌ها را ببینید.',
+  ].join('\n');
+  let briefChars = 0;
+  function startMission() {
+    ui.patch('briefing', {
+      hidden: true,
+    });
+    ui.patch('hud', {
+      hidden: false,
+    });
+    say('child', 'بابا، اینجا همون کارخونه‌ایه که دستگاه‌های روبات مارکت رو می‌سازه؟');
+    say('father', 'آره! سالن تولید اون‌وره؛ دستگاه وندینگ هم توی دفتر فنی مهندسیه. بریم ببینیم!');
+    say('child', 'اون وانت سفیده کیه داره میاد تو؟');
+    say('father', 'آقای محمدیه، مدیر شرکت. بعداً بریم اتاقش سلام کنیم.');
+    if (!isTouch && !real.on) canvas.requestPointerLock?.()?.catch?.(() => {});
+  }
+  ui.on('start-mission', startMission);
+
+  // ---------- Real-world (GPS) mode ----------
+  // The family mirrors the phone's position on the real map of Mashhad. Walking to a real place where
+  // a machine stands lets the player buy there, with a bonus.
+  const real = {
+    on: false,
+    fix: null,
+    heading: null,
+    error: null,
+    waiting: null,
+    stop: null,
+    stabilizer: createStabilizer(),
+  };
+  function setRealMode(on) {
+    if (on === real.on) return;
+    real.stop?.();
+    Object.assign(real, {
+      on,
+      fix: null,
+      heading: null,
+      error: null,
+      waiting: null,
+      stop: null,
+    });
+    for (const s of stations) if (s.def.test) s.model.group.visible = on;
+    ui.classState('gps-toggle', 'on', on);
+    ui.patch('gps-status', {
+      hidden: !on,
+    });
+    ui.patch('ar-toggle', {
+      hidden: ui.patch('stable-toggle', {
+        hidden: !on,
+      }),
+    });
+    // Real-world mode is first person: the player is where the phone is and sees what it faces.
+    ui.classState('body', 'real', on);
+    if (!on) {
+      setArMode(false);
+      arView.stopSensors();
+      return;
+    }
+    arView.startSensors();
+    cam.arPitch = 0;
+    cam.yaw = Math.atan2(-Math.cos(player.heading), Math.sin(player.heading));
+    if (mode === 'drive') toggleCar();
+    mode = 'walk';
+    real.stop = startTracking({
+      onFix: (fix) => {
+        real.fix = fix;
+        real.error = null;
+      },
+      onHeading: (heading) => (real.heading = heading),
+      onError: (message) => (real.error = message),
+      onStatus: (message) => (real.waiting = message),
+      stabilizer: (real.stabilizer = createStabilizer()),
+    });
+    real.stabilizer.stable = stableMode;
+    say(
+      'father',
+      'حالت دنیای واقعی روشن شد؛ از چشم خودمون می‌بینیم و هر جا راه بریم، توی بازی هم همون‌جاییم.',
+    );
+    setArMode(true);
+  }
+
+  // ---------- First-person real-world view ----------
+  // The view stands at the GPS position at eye height and turns with the phone. With the camera
+  // picture on (AR) the city model is hidden and only the machines, their reach circles, the route
+  // and the robot are drawn over the real street; with it off, the 3D city is shown first person.
+  const arView = createArView($('#camera'));
+  let arMode = false,
+    stableMode = true;
+  const hiddenInAr = () => [
+    sky,
+    city.group,
+    imagery.group,
+    factory.group,
+    traffic.group,
+    carModel.group,
+    parkGate,
+  ];
+  async function setArMode(on) {
+    if (on && !arMode) {
+      const problem = await arView.start();
+      if (problem) {
+        say('father', `${problem} فعلاً شهر سه‌بعدی رو از چشم خودمون می‌بینیم.`);
+        return;
+      }
+      if (!real.on) {
+        arView.stop();
+        return;
+      }
+      say(
+        'robot',
+        'دوربین روشن شد! گوشی رو صاف جلوی خودت بگیر؛ ستون نورانی طلایی جای دستگاهه.',
+        'excited',
+      );
+      setTimeout(() => {
+        if (real.on && !arView.hasOrientation)
+          say('father', 'حسگر جهت گوشی جواب نمی‌ده؛ برای چرخیدن، صفحه رو با انگشت بکش.');
+      }, 3000);
+    } else if (!on && arMode) arView.stop();
+    else return;
+    arMode = on;
+    for (const object of hiddenInAr()) object.visible = !on;
+    scene.fog = on ? null : fog;
+    ui.classState('body', 'ar', on);
+    ui.classState('ar-toggle', 'on', on);
+  }
+  ui.on('ar-toggle', () => setArMode(!arMode));
+  ui.on('stable-toggle', () => {
+    stableMode = !stableMode;
+    real.stabilizer.stable = stableMode;
+    ui.classState('stable-toggle', 'on', stableMode);
+    ui.patch('stable-toggle', {
+      text: stableMode ? '🎯 پایدار: روشن' : '🎯 پایدار: خاموش',
+    });
+  });
+
+  // The safety notice comes first; permissions are requested from the tap on its button (iOS needs that).
+  function askRealMode(thenStart) {
+    if (real.on) {
+      setRealMode(false);
+      return;
+    }
+    ui.open('real-intro');
+    ui.on('real-go', async () => {
+      ui.close('real-intro');
+      await requestCompass();
+      setRealMode(true);
+      if (thenStart) startMission();
+    });
+  }
+  ui.on('real-mode', () => askRealMode(true));
+  ui.on('gps-toggle', () => askRealMode(false));
+  ui.on('real-cancel', () => ui.close('real-intro'));
+  function updateReal(dt) {
+    let uiStatus;
+    if (real.error) uiStatus = `⚠ ${real.error}`;
+    else if (!real.fix) uiStatus = `📍 ${real.waiting ?? 'در حال یافتن موقعیت…'}`;
+    else if (!insideWorld(data.bounds, real.fix.x, real.fix.z)) {
+      const nearest = Math.min(
+        ...activeStations().map((s) => Math.hypot(s.x - real.fix.x, s.z - real.fix.z)),
+      );
+      uiStatus = `📍 خارج از محدودهٔ بازی · ${formatDistance(nearest)} تا نزدیک‌ترین دستگاه`;
+    } else
+      uiStatus = `📍 GPS ±${fa(Math.round(real.fix.accuracy))} متر${real.fix.speed > MAX_WALKING_SPEED ? ' · حرکت سریع' : ''}`;
+    ui.patch('gps-status', {
+      text: uiStatus,
+    });
+    if (!real.fix || !insideWorld(data.bounds, real.fix.x, real.fix.z)) {
+      player.speed = 0;
+      return;
+    }
+    // Walk the avatar towards the (building-free) GPS point instead of teleporting it.
+    const target = resolveCircle(collision, real.fix.x, real.fix.z, 1);
+    const dx = target.x - player.x,
+      dz = target.z - player.z,
+      d = Math.hypot(dx, dz);
+    if (d > 150)
+      Object.assign(player, {
+        x: target.x,
+        z: target.z,
+      });
+    const speed = d > 0.5 ? Math.min(8, Math.max(1.2, d * 1.5)) : 0;
+    player.speed += (speed - player.speed) * Math.min(1, dt * 6);
+    if (d > 0.5) {
+      const step = Math.min(d, player.speed * dt);
+      player.x += (dx / d) * step;
+      player.z += (dz / d) * step;
+    }
+    const want = real.heading ?? (d > 0.5 ? Math.atan2(-dz, dx) : player.heading);
+    // Stable mode also calms the compass, which jitters near cars and metal.
+    player.heading +=
+      Math.atan2(Math.sin(want - player.heading), Math.cos(want - player.heading)) *
+      Math.min(1, dt * (stableMode ? 2 : 5));
+    player.gait += dt * player.speed * 1.9;
+  }
+
+  // ---------- Loop ----------
+  const camPos = new THREE.Vector3(),
+    camTarget = new THREE.Vector3(),
+    lookAt = new THREE.Vector3();
+  let elapsed = 0,
+    last = performance.now(),
+    hudTimer = 0,
+    streetTimer = 0;
+  // Debug runs (headless checks render ~1 fps) may simulate a whole second per frame, still in substeps.
+  const MAX_FRAME = new URLSearchParams(location.search).has('debug') ? 1 : 0.25;
+  function resize() {
+    renderer.setSize(innerWidth, innerHeight);
+    camera.aspect = innerWidth / innerHeight;
+    camera.updateProjectionMatrix();
+    renderMap();
+  }
+  listen(window, 'resize', resize);
+  function updateWalk(dt) {
+    const forward = {
+        x: -Math.sin(cam.yaw),
+        z: -Math.cos(cam.yaw),
+      },
+      right = {
+        x: Math.cos(cam.yaw),
+        z: -Math.sin(cam.yaw),
+      };
+    const iy = axis(['w', 'arrowup'], ['s', 'arrowdown']) + stick.y,
+      ix = axis(['d', 'arrowright'], ['a', 'arrowleft']) + stick.x;
+    const frozen = state.busy || payment.phase !== 'idle';
+    let dx = forward.x * iy + right.x * ix,
+      dz = forward.z * iy + right.z * ix;
+    const len = Math.hypot(dx, dz);
+    const run = keys.has('shift');
+    const target = frozen || len < 0.1 ? 0 : (run ? 6.5 : 3.4) * Math.min(1, len);
+    player.speed += (target - player.speed) * Math.min(1, dt * 8);
+    if (len > 0.1 && !frozen) {
+      dx /= len;
+      dz /= len;
+      const want = Math.atan2(-dz, dx);
+      player.heading +=
+        Math.atan2(Math.sin(want - player.heading), Math.cos(want - player.heading)) *
+        Math.min(1, dt * 9);
+    }
+    // Face the machine while buying.
+    const station = payment.station ?? payment.delivering?.station;
+    if (frozen && station) {
+      const want = Math.atan2(-(station.z - player.z), station.x - player.x);
+      player.heading +=
+        Math.atan2(Math.sin(want - player.heading), Math.cos(want - player.heading)) *
+        Math.min(1, dt * 6);
+    }
+    const mx = Math.cos(player.heading) * player.speed * dt,
+      mz = -Math.sin(player.heading) * player.speed * dt;
+    const p = resolveCircle(collision, player.x + mx, player.z + mz, 1);
+    const { minX, minZ, maxX, maxZ } = data.bounds;
+    player.x = THREE.MathUtils.clamp(p.x, minX + 15, maxX - 15);
+    player.z = THREE.MathUtils.clamp(p.z, minZ + 15, maxZ - 15);
+    player.gait += dt * player.speed * 1.9;
+  }
+
+  // Collision log for ?debug runs; trimmed so it never grows without bound.
+  const debugHits = [];
+  function updateDrive(dt) {
+    if (debugHits.length > 200) debugHits.splice(0, 100);
+    const throttle = THREE.MathUtils.clamp(
+      axis(['w', 'arrowup'], ['s', 'arrowdown']) + stick.y,
+      -1,
+      1,
+    );
+    const steer = THREE.MathUtils.clamp(
+      axis(['d', 'arrowright'], ['a', 'arrowleft']) + stick.x,
+      -1,
+      1,
+    );
+    // At top speed the car covers almost 2 m per step, so move it in short slices that can't
+    // tunnel through a thin wall or fence.
+    const slices = Math.max(1, Math.ceil((Math.abs(car.speed) * dt) / 0.6));
+    for (let i = 0; i < slices; i++) {
+      stepCar(
+        car,
+        {
+          throttle,
+          steer,
+          handbrake: keys.has(' '),
+        },
+        dt / slices,
+      );
+      // Two collision circles along the body keep the nose and tail out of buildings.
+      for (const along of [1.3, -1.3]) {
+        const cx = car.x + Math.cos(car.heading) * along,
+          cz = car.z - Math.sin(car.heading) * along;
+        const p = resolveCircle(collision, cx, cz, 1.05);
+        if (p.hit) {
+          debugHits.push({
+            kind: 'building',
+            x: Math.round(cx),
+            z: Math.round(cz),
+            v: +car.speed.toFixed(1),
+          });
+          car.x += p.x - cx;
+          car.z += p.z - cz;
+          if (Math.abs(car.speed) > 4) tone(90, 0.2, 0.08, 'square');
+          car.speed *= 0.35;
+        }
+      }
+    }
+    // Bumping a traffic car slows you down but never throws you backwards. If you stay pressed
+    // against one, it pulls away (respawns out of sight) so you can never get stuck behind it.
+    for (const npc of traffic.cars) {
+      const dx = car.x - npc.x,
+        dz = car.z - npc.z,
+        d = Math.hypot(dx, dz);
+      if (d >= 3.4 || d === 0) {
+        if (npc.contact) npc.contact = 0;
+        continue;
+      }
+      debugHits.push({
+        kind: 'traffic',
+        x: Math.round(car.x),
+        z: Math.round(car.z),
+        v: +car.speed.toFixed(1),
+        npcDir: npc.dir,
+      });
+      car.x = npc.x + (dx / d) * 3.4;
+      car.z = npc.z + (dz / d) * 3.4;
+      const towards =
+        (Math.cos(car.heading) * -dx - Math.sin(car.heading) * -dz) * Math.sign(car.speed) > 0;
+      if (towards && Math.abs(car.speed) > 4) tone(110, 0.25, 0.08, 'square');
+      if (towards) car.speed *= 0.4;
+      npc.contact = (npc.contact ?? 0) + dt;
+      if (npc.contact > 0.8) {
+        npc.contact = 0;
+        traffic.remove(npc);
+      }
+    }
+    const { minX, minZ, maxX, maxZ } = data.bounds;
+    car.x = THREE.MathUtils.clamp(car.x, minX + 15, maxX - 15);
+    car.z = THREE.MathUtils.clamp(car.z, minZ + 15, maxZ - 15);
+    Object.assign(player, {
+      x: car.x,
+      z: car.z,
+      heading: car.heading,
+    });
+    // Chase camera swings back behind the car when the mouse is idle.
+    if (elapsed - cam.lastMouse > 1.4 && Math.abs(car.speed) > 1) {
+      const want =
+        Math.atan2(-Math.cos(car.heading), Math.sin(car.heading)) + (car.speed < 0 ? Math.PI : 0);
+      cam.yaw +=
+        Math.atan2(Math.sin(want - cam.yaw), Math.cos(want - cam.yaw)) * Math.min(1, dt * 2.2);
+      cam.pitch += (0.28 - cam.pitch) * Math.min(1, dt * 1.5);
+    }
+    if (engine && soundOn) {
+      engine.o.frequency.setTargetAtTime(
+        45 + Math.abs(car.speed) * 5 + Math.max(0, throttle) * 15,
+        audio.currentTime,
+        0.1,
+      );
+      engine.g.gain.setTargetAtTime(0.025, audio.currentTime, 0.2);
+    }
+  }
+  function updateCamera(dt) {
+    const station = payment.station;
+    if (station && payment.phase !== 'idle') {
+      // Close-up of the card reader during payment.
+      const reader = station.model.readerPoint.clone();
+      station.model.group.localToWorld(reader);
+      const side = rotateLocal(1.2, 1.9, station.rot);
+      camTarget.set(reader.x + side.x, reader.y + 0.4, reader.z + side.z);
+      lookAt.lerp(reader, 1 - Math.exp(-dt * 6));
+    } else {
+      const driving = mode === 'drive',
+        height = driving ? 1.6 : 1.75;
+      const focus = new THREE.Vector3(player.x, height, player.z);
+      // Over-the-shoulder offset to the right, like a third-person shooter.
+      const shoulder = driving ? 0 : 0.75;
+      focus.x += Math.cos(cam.yaw) * shoulder;
+      focus.z += -Math.sin(cam.yaw) * shoulder;
+      let distance = cam.distance;
+      const ox = Math.sin(cam.yaw) * Math.cos(cam.pitch),
+        oz = Math.cos(cam.yaw) * Math.cos(cam.pitch);
+      const free = clearFraction(
+        collision,
+        focus.x,
+        focus.z,
+        focus.x + ox * distance,
+        focus.z + oz * distance,
+        0.8,
+      );
+      if (cam.pitch < 0.9) distance = Math.max(1.6, distance * free - 0.7);
+      camTarget.set(
+        focus.x + ox * distance,
+        Math.max(0.6, focus.y + Math.sin(cam.pitch) * distance),
+        focus.z + oz * distance,
+      );
+      lookAt.lerp(focus, 1 - Math.exp(-dt * 14));
+    }
+    camPos.lerp(camTarget, 1 - Math.exp(-dt * 12));
+    camera.position.copy(camPos);
+    camera.lookAt(lookAt);
+  }
+  function updateHUD(dt) {
+    const pos = mode === 'drive' ? car : player;
+    ui.patch('clock', {
+      text: formatClock(state.minutes),
+    });
+    if (mode === 'drive')
+      ui.patch('speed', {
+        text: fa(kmh(car)),
+      });
+    // Where the camera actually looks: the orbit camera, or the phone itself in AR view.
+    const look3 = camera.getWorldDirection(new THREE.Vector3()),
+      flat = Math.hypot(look3.x, look3.z);
+    const forward =
+      flat > 0.05
+        ? {
+            x: look3.x / flat,
+            z: look3.z / flat,
+          }
+        : {
+            x: -Math.sin(cam.yaw),
+            z: -Math.cos(cam.yaw),
+          };
+    const headingDeg = bearing(forward.x, forward.z);
+    const objective = objectiveStation();
+    drawCompass(
+      headingDeg,
+      objective
+        ? [
+            {
+              bearing: bearing(objective.x - pos.x, objective.z - pos.z),
+              color: '#f2c94c',
+            },
+          ]
+        : [],
+    );
+    drawMinimap(minimap, mapAssets, {
+      size: 220,
+      x: pos.x,
+      z: pos.z,
+      heading: mode === 'drive' ? car.heading : player.heading,
+      camForward: forward,
+      radius: mode === 'drive' ? 650 : 200,
+      markers: markers(),
+      route: route?.points,
+    });
+    // Objective marker above the machine, clamped to the screen edge when off-screen.
+    ui.patch('waypoint', {
+      hidden: !objective,
+    });
+    if (objective) {
+      const d = Math.hypot(objective.x - pos.x, objective.z - pos.z),
+        p = new THREE.Vector3(objective.x, 3.4, objective.z).project(camera);
+      let sx = (p.x * 0.5 + 0.5) * innerWidth,
+        sy = (-p.y * 0.5 + 0.5) * innerHeight;
+      if (p.z > 1) {
+        sx = innerWidth - sx;
+        sy = innerHeight - 60;
+      }
+      ui.style('waypoint', {
+        left: `${THREE.MathUtils.clamp(sx, 60, innerWidth - 60)}px`,
+      });
+      ui.style('waypoint', {
+        top: `${THREE.MathUtils.clamp(sy, 90, innerHeight - 130)}px`,
+      });
+      ui.patch('waypoint-name', {
+        text: objective.def.name,
+      });
+      ui.patch('waypoint-distance', {
+        text: formatDistance(d),
+      });
+      ui.patch('waypoint', {
+        hidden: d < 6,
+      });
+      for (const s of stations) {
+        const isObjective = s === objective;
+        s.model.beacon.material.color.set(isObjective ? '#f2c94c' : '#3ee0c9');
+        s.model.beacon.material.opacity =
+          (isObjective ? 0.32 : 0.14) * Math.min(1, Math.hypot(s.x - pos.x, s.z - pos.z) / 40);
+      }
+    }
+    streetTimer -= dt;
+    if (streetTimer <= 0) {
+      streetTimer = 0.6;
+      const street = nearestSegment(segments, pos.x, pos.z, 35, (s) => s[5] >= 0);
+      const inFactory = Math.hypot(pos.x - FACTORY.center.x, pos.z - FACTORY.center.z) < 130;
+      ui.patch('street', {
+        text: inFactory
+          ? `کارخانهٔ ${FACTORY.name}`
+          : street
+            ? `مشهد · ${data.names[street.name]}`
+            : 'حومهٔ مشهد',
+      });
+    }
+    updatePrompt();
+  }
+  let hints = {
+    closed: false,
+    car: false,
+  };
+
+  // People in the factory say their lines once, when the family walks up to them.
+  function updateTalks() {
+    if (mode !== 'walk' || real.on || lines.length > 2) return;
+    for (const t of factory.talks) {
+      if (t.done || (t.ready && !t.ready())) continue;
+      const p = t.pos();
+      if (Math.hypot(p.x - player.x, p.z - player.z) > t.radius) continue;
+      t.done = true;
+      for (const text of t.lines) say(t.speaker, text);
+      return;
+    }
+  }
+
+  // ---------- Robot guide ----------
+  // When the family walks up to a machine the robot pops out of it, greets them and explains what to
+  // do; when they leave it goes back inside. It is never a walking companion.
+  const guideState = {
+    station: null,
+    t: 0,
+    greeted: new Set(),
+    arrived: 0,
+  };
+  const guideOut = () => guideState.t >= 1;
+  const easeOutBack = (t) => 1 + 2.2 * (t - 1) ** 3 + 1.2 * (t - 1) ** 2;
+  function greet(station) {
+    const def = station.def,
+      first = !guideState.greeted.has(def.id);
+    guideState.greeted.add(def.id);
+    if (def.id === 'factory' && first) {
+      say(
+        'robot',
+        'سلام! من روبات راهنمای روبات مارکتم؛ تو دستگاه دفتر فنی زندگی می‌کنم!',
+        'excited',
+      );
+      say(
+        'robot',
+        `به ${FACTORY.name} خوش اومدین. بچه‌های همین دفتر نرم‌افزار دستگاه‌ها رو می‌نویسن.`,
+        'happy',
+      );
+      say('robot', 'اول از همین دستگاه یه چیزی بخرین؛ کلید E رو بزنین.', 'wink');
+      say(
+        'robot',
+        'ماشینتون جلوی همین ساختمونه. با F سوار شین و برین بوستان ملت؛ من توی همهٔ دستگاه‌ها منتظرتونم!',
+        'love',
+      );
+      return;
+    }
+    if (!isOpen(def, state.minutes)) {
+      say(
+        'robot',
+        `سلام! متأسفم، این دستگاه الان بسته است. ساعت کاری: ${hoursText(def)}.`,
+        'serious',
+      );
+      return;
+    }
+    if (first) {
+      say('robot', `سلام دوباره! به دستگاه ${def.name} خوش اومدین.`, 'excited');
+      say('robot', `${def.note}. برای خرید E رو بزنین.`, 'happy');
+    } else say('robot', 'باز هم خوش اومدین! برای خرید E رو بزنین.', 'wink');
+  }
+  function updateGuide(dt) {
+    const near =
+      mode === 'walk' ? closestStation(player.x, player.z, Math.max(9, reachRadius())) : null;
+    // The robot only moves to another machine after it has gone back into the previous one.
+    if (near && !guideState.station) guideState.station = near;
+    const s = guideState.station,
+      wasOut = guideOut();
+    if (!s) return;
+    guideState.t = THREE.MathUtils.clamp(guideState.t + (near === s ? dt : -dt) / 1.1, 0, 1);
+    if (guideOut() && !wasOut) {
+      guideState.arrived = elapsed;
+      greet(s);
+      tone(990, 0.15);
+      tone(1320, 0.2);
+    }
+    if (wasOut && near !== s) say('robot', 'خداحافظ! مسیر طلایی رو دنبال کنین.', 'happy');
+    if (!guideState.t) {
+      guideState.station = null;
+      guide.group.visible = false;
+      return;
+    }
+    // From inside the machine front out to its left side (the card reader is on the right).
+    const e = easeOutBack(guideState.t),
+      from = {
+        x: -0.2,
+        y: 0.9,
+        z: 0.2,
+      },
+      to = {
+        x: -1.7,
+        y: 0,
+        z: 1.3,
+      };
+    const local = rotateLocal(from.x + (to.x - from.x) * e, from.z + (to.z - from.z) * e, s.rot);
+    guide.group.visible = true;
+    guide.group.position.set(s.x + local.x, from.y + (to.y - from.y) * e, s.z + local.z);
+    guide.group.scale.setScalar(0.15 + 0.85 * Math.min(1, e));
+    // Face the family (the rig looks along its local +X).
+    guide.group.rotation.y = Math.atan2(
+      -(player.z - guide.group.position.z),
+      player.x - guide.group.position.x,
+    );
+    if (!state.busy && payment.phase === 'idle')
+      s.model.flap.rotation.x = guideState.t < 1 ? -1 : 0;
+    guide.update({
+      dt,
+      time: elapsed,
+      gait: 0,
+      moving: false,
+      talking,
+      wave: elapsed - guideState.arrived < 2.5 || !guideOut(),
+      point: talking && guideOut(),
+    });
+  }
+  function updateHints() {
+    const target = objectiveStation();
+    if (target && !isOpen(target.def, state.minutes) && !hints.closed) {
+      hints.closed = true;
+      say(
+        'robot',
+        `${target.def.name} الان بسته است (${hoursText(target.def)}). از نقشه مقصد دیگری انتخاب کن.`,
+      );
+    }
+    if (route && route.length > 900 && mode === 'walk' && !hints.car) {
+      hints.car = true;
+      say('father', 'راه طولانیه؛ بهتره با ماشین بریم.');
+    }
+  }
+  function frame() {
+    const now = performance.now();
+    frameId = requestAnimationFrame(frame);
+    // The first rAF timestamp can predate `last`, so never let time run backwards. Long frames are
+    // simulated in short substeps, so slow devices keep real-time speed without unstable physics.
+    const dt = THREE.MathUtils.clamp((now - last) / 1000, 0, MAX_FRAME);
+    last = now;
+    elapsed += dt;
+    const playing = ui.read('briefing').hidden;
+    const paused =
+      !playing ||
+      ui.read('shop').open ||
+      ui.read('map-dialog').open ||
+      ui.read('end').open ||
+      document.hidden;
+    const steps = Math.max(1, Math.ceil(dt / (1 / 30))),
+      step = dt / steps;
+    if (!playing) {
+      // Briefing: animate Iran, type the orders, slowly orbit the start point behind the overlay.
+      const ic = $('#iran'),
+        dpr = sizeCanvas(ic),
+        c = ic.getContext('2d');
+      c.setTransform(dpr, 0, 0, dpr, 0, 0);
+      drawIran(c, iran, {
+        width: ic.width / dpr,
+        height: ic.height / dpr,
+        t: elapsed,
+        cities: CITIES,
+      });
+      briefChars = Math.min(BRIEF.length, briefChars + dt * 55);
+      ui.patch('brief-text', {
+        text: BRIEF.slice(0, Math.floor(briefChars)) + (briefChars < BRIEF.length ? '▌' : ''),
+      });
+    }
+    if (!paused) {
+      for (let i = 0; i < steps; i++) {
+        state.minutes += (step * 10) / 60;
+        if (real.on) updateReal(step);
+        else if (mode === 'drive') updateDrive(step);
+        else updateWalk(step);
+        updatePayment(step);
+        updateDelivery(step);
+        traffic.update(
+          step,
+          [
+            {
+              x: player.x,
+              z: player.z,
+            },
+            {
+              x: car.x,
+              z: car.z,
+            },
+          ],
+          player,
+        );
+      }
+      updateRoute(dt);
+      updateHints();
+      updateTalks();
+      updateGuide(dt);
+      if (Math.floor(elapsed * 2) !== Math.floor((elapsed - dt) * 2)) checkEnd();
+    } else if (engine && soundOn) engine.g.gain.setTargetAtTime(0, audio.currentTime, 0.1);
+    if (mode === 'walk' && engine && soundOn)
+      engine.g.gain.setTargetAtTime(0, audio.currentTime, 0.2);
+    updateSubtitles(dt);
+    family.group.visible = mode === 'walk' && !real.on;
+    family.group.position.set(player.x, 0, player.z);
+    family.group.rotation.y = player.heading;
+    family.update({
+      dt,
+      time: elapsed,
+      gait: player.gait,
+      moving: player.speed > 0.4,
+      shopping: state.busy || payment.phase !== 'idle',
+      delivery: deliveryTimer > 0,
+    });
+    factory.update(elapsed, paused ? 0 : dt, camera.position);
+    carModel.group.position.set(car.x, 0, car.z);
+    carModel.group.rotation.y = car.heading;
+    for (const [i, wheel] of carModel.wheels.entries()) {
+      wheel.rotation.z -= (car.speed * dt) / 0.36;
+      if (i >= 2) wheel.rotation.y = -car.steer;
+    }
+    for (const s of stations) s.model.ring.material.opacity = 0.35 + Math.sin(elapsed * 3) * 0.25;
+    updateReachCircles();
+    if (routeMesh) routeMaterial.opacity = 0.55 + Math.sin(elapsed * 4) * 0.15;
+    if (playing && real.on) {
+      // First person: the phone is the camera, at the player's GPS position and eye height.
+      camera.position.set(player.x, 1.6, player.z);
+      if (!arView.update(camera, dt, stableMode ? 5 : 10)) {
+        // No orientation sensor: face the compass or walking direction, or wherever the player drags.
+        if (real.heading != null && elapsed - cam.lastMouse > 2) {
+          const want = Math.atan2(-Math.cos(player.heading), Math.sin(player.heading));
+          cam.yaw +=
+            Math.atan2(Math.sin(want - cam.yaw), Math.cos(want - cam.yaw)) * Math.min(1, dt * 3);
+        }
+        camera.rotation.set(cam.arPitch ?? 0, cam.yaw, 0, 'YXZ');
+      }
+      camPos.copy(camera.position);
+    } else if (playing) {
+      if (camera.fov !== 62) {
+        camera.fov = 62;
+        camera.updateProjectionMatrix();
+      }
+      updateCamera(dt);
+    } else {
+      const a = elapsed * 0.08;
+      camera.position.set(player.x + Math.cos(a) * 30, 18, player.z + Math.sin(a) * 30);
+      camera.lookAt(player.x, 2, player.z);
+      camPos.copy(camera.position);
+    }
+    sun.position.set(player.x + 160, 230, player.z + 110);
+    sun.target.position.set(player.x, 0, player.z);
+    sky.position.copy(camera.position);
+    city.update(camera.position);
+    if (!arMode) imagery.update(camera.position.x, camera.position.z);
+    if (playing) {
+      hudTimer -= dt;
+      updateHUD(dt);
+      if (ui.read('map-dialog').open && hudTimer <= 0) {
+        hudTimer = 0.5;
+        renderMap();
+      }
+    }
+    renderer.render(scene, camera);
+  }
+
+  // ?debug exposes live game state in the console for development and automated checks.
+  if (new URLSearchParams(location.search).has('debug'))
+    window.game = {
+      get state() {
+        return state;
+      },
+      get player() {
+        return player;
+      },
+      get cam() {
+        return cam;
+      },
+      factory,
+      get car() {
+        return car;
+      },
+      get mode() {
+        return mode;
+      },
+      get payment() {
+        return payment;
+      },
+      get elapsed() {
+        return elapsed;
+      },
+      get route() {
+        return route;
+      },
+      setWaypoint(id) {
+        waypoint = id;
+        route = null;
+        routeTimer = 0;
+      },
+      get arMode() {
+        return arMode;
+      },
+      arView,
+      setArMode,
+      debugHits,
+      nearestRoad: (x, z) => nearestSegment(segments, x, z, 40, (s) => s[4] <= 3),
+      stations,
+      guideState,
+      real,
+      keys,
+      traffic,
+    };
+  reset();
+  resize();
+
+  ui.patch('loading', {
+    hidden: true,
+  });
+  frameId = requestAnimationFrame(frame);
+  return () => {
+    cancelAnimationFrame(frameId);
+    timers.forEach(window.clearTimeout);
+    real.stop?.();
+    arView.stop();
+    arView.stopSensors();
+    imagery.dispose?.();
+    audio?.close();
+    const geometries = new Set(),
+      materials = new Set(),
+      textures = new Set();
+    scene.traverse((object) => {
+      if (object.geometry) geometries.add(object.geometry);
+      const list = Array.isArray(object.material) ? object.material : [object.material];
+      for (const material of list) {
+        if (!material) continue;
+        materials.add(material);
+        for (const value of Object.values(material)) if (value?.isTexture) textures.add(value);
+      }
+    });
+    geometries.forEach((item) => item.dispose());
+    materials.forEach((item) => item.dispose());
+    textures.forEach((item) => item.dispose());
+    renderer.dispose();
+    if (document.pointerLockElement === canvas) document.exitPointerLock?.();
+    if (window.game) delete window.game;
+    ui.clearActions();
+  };
+}
diff --git a/src/ar.js b/src/game/device/ar.js
similarity index 100%
rename from src/ar.js
rename to src/game/device/ar.js
diff --git a/src/game/device/pwa.js b/src/game/device/pwa.js
new file mode 100644
index 0000000..62a0a68
--- /dev/null
+++ b/src/game/device/pwa.js
@@ -0,0 +1,79 @@
+/** Connects install/update lifecycle to the React interface and returns cleanup.
+ * @param {object} ui - Interface bridge.
+ * @returns {function} Releases browser event subscriptions.
+ */
+export function setupPwa(ui) {
+  const controller = new AbortController(),
+    { signal } = controller;
+  let deferred = null,
+    reloading = false,
+    disposed = false;
+  const standalone =
+    matchMedia('(display-mode: standalone), (display-mode: fullscreen)').matches ||
+    navigator.standalone;
+  const ios =
+    /iphone|ipad|ipod/i.test(navigator.userAgent) ||
+    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+  if (!standalone && ios) ui.patch('install', { hidden: false });
+  window.addEventListener(
+    'beforeinstallprompt',
+    (event) => {
+      event.preventDefault();
+      deferred = event;
+      ui.patch('install', { hidden: false });
+    },
+    { signal },
+  );
+  window.addEventListener('appinstalled', () => ui.patch('install', { hidden: true }), { signal });
+  ui.on('install', async () => {
+    if (deferred) {
+      deferred.prompt();
+      await deferred.userChoice;
+      deferred = null;
+      ui.patch('install', { hidden: true });
+    } else if (ios) ui.open('ios-install');
+  });
+  ui.on('ios-close', () => ui.close('ios-install'));
+  if ('serviceWorker' in navigator && !import.meta.env.DEV) {
+    /** Offers a version change only after a worker has installed successfully. */
+    const offer = (worker) => {
+      ui.patch('update-toast', { hidden: false });
+      ui.on('update-reload', () => worker.postMessage('skip-waiting'));
+    };
+    navigator.serviceWorker
+      .register('./sw.js')
+      .then((registration) => {
+        if (disposed) return;
+        if (registration.waiting && navigator.serviceWorker.controller) offer(registration.waiting);
+        registration.addEventListener(
+          'updatefound',
+          () => {
+            const worker = registration.installing;
+            worker?.addEventListener(
+              'statechange',
+              () => {
+                if (worker.state === 'installed' && navigator.serviceWorker.controller)
+                  offer(worker);
+              },
+              { signal },
+            );
+          },
+          { signal },
+        );
+      })
+      .catch(() => {});
+    navigator.serviceWorker.addEventListener(
+      'controllerchange',
+      () => {
+        if (reloading) return;
+        reloading = true;
+        location.reload();
+      },
+      { signal },
+    );
+  }
+  return () => {
+    disposed = true;
+    controller.abort();
+  };
+}
diff --git a/src/realworld.js b/src/game/device/realworld.js
similarity index 99%
rename from src/realworld.js
rename to src/game/device/realworld.js
index bc04e49..050e22a 100644
--- a/src/realworld.js
+++ b/src/game/device/realworld.js
@@ -1,4 +1,4 @@
-import { toLocal } from './geo.js';
+import { toLocal } from '../../utils/geo.js';
 
 // Real-world mode: the family follows the phone's GPS position. Phone GPS in a city is off by
 // 5–20 m and jumps around, so fixes are blended by their accuracy and arrival uses a wide radius.
diff --git a/src/game-state.js b/src/game/economy/gameState.js
similarity index 100%
rename from src/game-state.js
rename to src/game/economy/gameState.js
diff --git a/src/payment.js b/src/game/economy/payment.js
similarity index 95%
rename from src/payment.js
rename to src/game/economy/payment.js
index 61128d5..6d62d7a 100644
--- a/src/payment.js
+++ b/src/game/economy/payment.js
@@ -1,4 +1,4 @@
-import { purchase, purchaseBlocker } from './game-state.js';
+import { purchase, purchaseBlocker } from './gameState.js';
 
 // idle → approaching (camera moves to the reader) → ready → approved (card swiped, charged once).
 export function createPayment() {
diff --git a/src/scoring.js b/src/game/economy/scoring.js
similarity index 98%
rename from src/scoring.js
rename to src/game/economy/scoring.js
index 44beb53..adbef0d 100644
--- a/src/scoring.js
+++ b/src/game/economy/scoring.js
@@ -1,4 +1,4 @@
-import { CATEGORIES } from './locations.js';
+import { CATEGORIES } from '../../constants/locations.js';
 
 // The bonus for visiting every kind of place counts city locations, not the factory.
 const CITY_CATEGORIES = Object.keys(CATEGORIES).filter((c) => c !== 'factory' && c !== 'test');
diff --git a/src/game/interfaceBridge.js b/src/game/interfaceBridge.js
new file mode 100644
index 0000000..e2e62f6
--- /dev/null
+++ b/src/game/interfaceBridge.js
@@ -0,0 +1,42 @@
+import { publishInterface } from '../store/slices/interfaceSlice.js';
+import { publishProgress } from '../store/slices/gameSlice.js';
+
+/** Bridges the high-frequency renderer and React using serializable, batched snapshots.
+ * @param {object} store - Application Redux store.
+ * @returns {object} View publication and action registration API.
+ */
+export function createInterfaceBridge(store) {
+  let nodes = { briefing: { hidden: false }, hud: { hidden: true } },
+    actions = new Map(),
+    timer = null,
+    disposed = false;
+  /** Publishes at most ten interface frames per second, independently of WebGL FPS. */
+  function flush() {
+    timer = null;
+    if (!disposed) store.dispatch(publishInterface(structuredClone(nodes)));
+  }
+  /** Merges a node view model, scheduling only actual changes. */
+  function patch(id, values) {
+    const previous = nodes[id] ?? {};
+    if (Object.keys(values).every((key) => Object.is(previous[key], values[key]))) return;
+    nodes = { ...nodes, [id]: { ...previous, ...values } };
+    if (timer === null && !disposed) timer = setTimeout(flush, 100);
+  }
+  return {
+    patch,
+    read: (id) => nodes[id] ?? {},
+    open: (id) => patch(id, { open: true }),
+    close: (id) => patch(id, { open: false }),
+    on: (id, handler) => actions.set(id, handler),
+    emit: (id, value) => actions.get(id)?.(value),
+    style: (id, style) => patch(id, { style: { ...nodes[id]?.style, ...style } }),
+    classState: (id, name, on) => patch(id, { classes: { ...nodes[id]?.classes, [name]: on } }),
+    publishGame: (state) => store.dispatch(publishProgress(structuredClone(state))),
+    clearActions: () => actions.clear(),
+    dispose() {
+      disposed = true;
+      clearTimeout(timer);
+      actions.clear();
+    },
+  };
+}
diff --git a/src/game/interfaceBridge.test.js b/src/game/interfaceBridge.test.js
new file mode 100644
index 0000000..3b8ea1a
--- /dev/null
+++ b/src/game/interfaceBridge.test.js
@@ -0,0 +1,34 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { createAppStore } from '../store/index.js';
+import { createInterfaceBridge } from './interfaceBridge.js';
+afterEach(() => vi.useRealTimers());
+describe('renderer to React bridge', () => {
+  it('batches UI changes, retains synchronous pause state and serializes economic progress', () => {
+    vi.useFakeTimers();
+    const store = createAppStore(),
+      ui = createInterfaceBridge(store);
+    ui.open('shop');
+    expect(ui.read('shop').open).toBe(true);
+    expect(store.getState().interface.nodes.shop).toBeUndefined();
+    vi.advanceTimersByTime(100);
+    expect(store.getState().interface.nodes.shop.open).toBe(true);
+    ui.publishGame({ balance: 465, purchases: [], missionsDone: [], xp: 350, minutes: 510 });
+    expect(store.getState().game.balance).toBe(465);
+    ui.dispose();
+  });
+  it('runs registered commands and does not publish stale UI after disposal', () => {
+    vi.useFakeTimers();
+    const store = createAppStore(),
+      ui = createInterfaceBridge(store),
+      handler = vi.fn();
+    ui.on('select-product', handler);
+    ui.emit('select-product', 'water');
+    expect(handler).toHaveBeenCalledWith('water');
+    ui.patch('balance', { text: 'test' });
+    ui.dispose();
+    vi.runAllTimers();
+    expect(store.getState().interface.nodes.balance).toBeUndefined();
+    ui.emit('select-product', 'water');
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/car-models.js b/src/game/models/carModels.js
similarity index 100%
rename from src/car-models.js
rename to src/game/models/carModels.js
diff --git a/src/characters.js b/src/game/models/characters.js
similarity index 98%
rename from src/characters.js
rename to src/game/models/characters.js
index 4439748..1719b78 100644
--- a/src/characters.js
+++ b/src/game/models/characters.js
@@ -196,12 +196,11 @@ export function createFamily({ robot: robotOnly = false } = {}) {
       1.59 * scale,
       0,
     ]);
-    const seam = shape(
-      torso,
-      new THREE.BoxGeometry(0.014 * scale, 0.5 * scale, 0.014 * scale),
-      mat('#bda77f'),
-      [0, 1.2 * scale, 0.19 * scale],
-    );
+    shape(torso, new THREE.BoxGeometry(0.014 * scale, 0.5 * scale, 0.014 * scale), mat('#bda77f'), [
+      0,
+      1.2 * scale,
+      0.19 * scale,
+    ]);
     for (const side of [-1, 1]) {
       const collar = shape(
         torso,
@@ -374,7 +373,7 @@ export function createFamily({ robot: robotOnly = false } = {}) {
       );
     // With characters facing +X, father's left and child's right hands meet.
     const contact = new THREE.Vector3(0, 1.06, 0);
-    actors.forEach((actor, index) =>
+    actors.forEach((actor) =>
       actor.arms.forEach((arm, i) => {
         const side = i === 0 ? -1 : 1,
           inside = actor === father ? side === -1 : actor === child && side === 1;
diff --git a/src/factory.js b/src/game/models/factory.js
similarity index 99%
rename from src/factory.js
rename to src/game/models/factory.js
index f567af3..2ef2540 100644
--- a/src/factory.js
+++ b/src/game/models/factory.js
@@ -1,9 +1,9 @@
 import * as THREE from 'three';
 import { createVendingMachine } from './vending.js';
-import { createCarModel } from './traffic.js';
-import { createPickup, createTruck } from './car-models.js';
+import { createCarModel } from '../systems/traffic.js';
+import { createPickup, createTruck } from './carModels.js';
 import { createPerson, createCrew, nameTag } from './staff.js';
-import { FACTORY } from './locations.js';
+import { FACTORY } from '../../constants/locations.js';
 import { textTexture } from './textures.js';
 
 function stripes(c, w, h, base, line, every) {
@@ -201,8 +201,7 @@ export function createFactory(scene) {
   const steel = mat('#59646b', { metalness: 0.5 }),
     teal = mat('#0b8f88', { metalness: 0.3, roughness: 0.4 });
   const yellow = mat('#f2c94c', { roughness: 0.5 }),
-    darkSteel = mat('#3d4549', { metalness: 0.5 }),
-    silver = mat('#c4ccd0', { metalness: 0.8, roughness: 0.3 });
+    darkSteel = mat('#3d4549', { metalness: 0.5 });
   const lamp = new THREE.MeshBasicMaterial({ color: '#fffbe8' });
   const animated = [];
 
@@ -247,7 +246,6 @@ export function createFactory(scene) {
     c.fillStyle = '#f2c94c';
     c.fillText('ROBOT MARKET · VENDING MACHINES', w / 2, 270);
   });
-  const signMaterial = new THREE.MeshBasicMaterial({ map: nameSign, side: THREE.DoubleSide });
   // Two faces, so the name also reads correctly from inside the yard.
   const frontSign = new THREE.MeshBasicMaterial({ map: nameSign });
   for (const side of [1, -1]) {
diff --git a/src/staff.js b/src/game/models/staff.js
similarity index 100%
rename from src/staff.js
rename to src/game/models/staff.js
diff --git a/src/textures.js b/src/game/models/textures.js
similarity index 100%
rename from src/textures.js
rename to src/game/models/textures.js
diff --git a/src/vending.js b/src/game/models/vending.js
similarity index 99%
rename from src/vending.js
rename to src/game/models/vending.js
index c72dacb..c6bf41c 100644
--- a/src/vending.js
+++ b/src/game/models/vending.js
@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import { catalog } from './game-state.js';
+import { catalog } from '../economy/gameState.js';
 import { textTexture } from './textures.js';
 
 const PRODUCT_COLORS = {
diff --git a/src/traffic.js b/src/game/systems/traffic.js
similarity index 100%
rename from src/traffic.js
rename to src/game/systems/traffic.js
diff --git a/src/vehicle.js b/src/game/systems/vehicle.js
similarity index 100%
rename from src/vehicle.js
rename to src/game/systems/vehicle.js
diff --git a/src/buildings-data.js b/src/game/world/buildingsData.js
similarity index 100%
rename from src/buildings-data.js
rename to src/game/world/buildingsData.js
diff --git a/src/city.js b/src/game/world/city.js
similarity index 100%
rename from src/city.js
rename to src/game/world/city.js
diff --git a/src/collision.js b/src/game/world/collision.js
similarity index 100%
rename from src/collision.js
rename to src/game/world/collision.js
diff --git a/src/imagery.js b/src/game/world/imagery.js
similarity index 88%
rename from src/imagery.js
rename to src/game/world/imagery.js
index e1c38ba..dbeb107 100644
--- a/src/imagery.js
+++ b/src/game/world/imagery.js
@@ -1,6 +1,6 @@
-import { loadTileUrl } from './services/worldService.js';
+import { loadTileUrl } from '../../services/worldService.js';
 import * as THREE from 'three';
-import { toLocal } from './geo.js';
+import { toLocal } from '../../utils/geo.js';
 
 // Satellite ground: Esri World Imagery tiles (public/imagery, see scripts/fetch-imagery.mjs) laid on
 // the ground as textured quads. Detailed zoom-17 tiles load near the camera, zoom-15 tiles further
@@ -41,6 +41,8 @@ export function createImagery(
     }),
   }));
   let loads = 0;
+  let disposed = false;
+  const controller = new AbortController();
 
   async function show(level, tile) {
     if (tile.mesh || tile.loading || loads >= 6) return;
@@ -48,7 +50,10 @@ export function createImagery(
     loads++;
     let tileUrl;
     try {
-      tileUrl = await loadTileUrl(`${baseUrl}${level.z}/${tile.x}/${tile.y}.jpg`);
+      tileUrl = await loadTileUrl(
+        `${baseUrl}${level.z}/${tile.x}/${tile.y}.jpg`,
+        controller.signal,
+      );
     } catch {
       loads--;
       tile.loading = false;
@@ -61,6 +66,10 @@ export function createImagery(
         URL.revokeObjectURL(tileUrl);
         loads--;
         tile.loading = false;
+        if (disposed) {
+          texture.dispose();
+          return;
+        }
         texture.colorSpace = THREE.SRGBColorSpace;
         // Sharp at the low angles a driver sees the road from.
         texture.anisotropy = anisotropy;
@@ -109,6 +118,11 @@ export function createImagery(
   let last = null;
   return {
     group,
+    dispose() {
+      disposed = true;
+      controller.abort();
+      for (const level of levels) for (const tile of level.tiles) hide(tile);
+    },
     available: levels.some((level) => level.tiles.length),
     // Loads tiles in range of (x, z), nearest first, and releases ones well out of range.
     update(x, z) {
diff --git a/src/map-render.js b/src/game/world/mapRender.js
similarity index 100%
rename from src/map-render.js
rename to src/game/world/mapRender.js
diff --git a/src/routing.js b/src/game/world/routing.js
similarity index 100%
rename from src/routing.js
rename to src/game/world/routing.js
diff --git a/src/hooks/useGameEngine.js b/src/hooks/useGameEngine.js
new file mode 100644
index 0000000..11171a3
--- /dev/null
+++ b/src/hooks/useGameEngine.js
@@ -0,0 +1,37 @@
+import { useEffect, useRef, useState } from 'react';
+
+/** Mounts one game runtime and releases its GPU, input, sensor and timer resources.
+ * @param {object} root - React ref containing all render surfaces.
+ * @param {object} bridge - Interface publisher owned by this page.
+ * @returns {{error:string|null}} Startup failure for the accessible loading surface.
+ */
+export function useGameEngine(root, bridge) {
+  const [error, setError] = useState(null);
+  const disposeRef = useRef(null);
+  useEffect(() => {
+    const controller = new AbortController();
+    async function start() {
+      try {
+        const { createGame } = await import('@/game/createGame.js');
+        if (controller.signal.aborted) return;
+        const dispose = await createGame({
+          root: root.current,
+          ui: bridge,
+          signal: controller.signal,
+        });
+        if (controller.signal.aborted) dispose();
+        else disposeRef.current = dispose;
+      } catch (problem) {
+        if (!controller.signal.aborted) setError(problem.message);
+      }
+    }
+    start();
+    // Abort-scoped input and network work must stop before disposing graphics.
+    return () => {
+      controller.abort();
+      disposeRef.current?.();
+      disposeRef.current = null;
+    };
+  }, [root, bridge]);
+  return { error };
+}
diff --git a/src/main.js b/src/main.js
deleted file mode 100644
index 18f16e2..0000000
--- a/src/main.js
+++ /dev/null
@@ -1,1922 +0,0 @@
-import { loadWorldFiles } from './services/worldService.js';
-import * as THREE from 'three';
-import '@fontsource/vazirmatn/400.css';
-import '@fontsource/vazirmatn/600.css';
-import '@fontsource/vazirmatn/800.css';
-import './style.css';
-import { setupPwa } from './pwa.js';
-import {
-  startTracking,
-  requestCompass,
-  arrivalRadius,
-  insideWorld,
-  createStabilizer,
-  MAX_WALKING_SPEED,
-} from './realworld.js';
-import { createArView } from './ar.js';
-import data from './data/mellat.json';
-import iran from './data/iran.json';
-import { createCity } from './city.js';
-import { createImagery } from './imagery.js';
-import { decodeBuildings } from './buildings-data.js';
-import { createCollisionWorld, addPolygon, resolveCircle, clearFraction } from './collision.js';
-import {
-  buildGraph,
-  routeBetween,
-  buildSegmentIndex,
-  nearestSegment,
-  DRIVABLE_MAX_TYPE,
-} from './routing.js';
-import { machines, CATEGORIES, CITY_START, FACTORY, lockedPlaces } from './locations.js';
-import {
-  createState,
-  catalog,
-  priceAt,
-  isOpen,
-  purchaseBlocker,
-  formatHetoman,
-  formatClock,
-  fa,
-  canAffordAnything,
-} from './game-state.js';
-import {
-  createPayment,
-  beginPayment,
-  readyPayment,
-  swipePayment,
-  cancelPayment,
-} from './payment.js';
-import { awardsFor, rankFor, completeMissions, activeMission, MISSIONS } from './scoring.js';
-import { createFamily } from './characters.js';
-import { createVendingMachine } from './vending.js';
-import { createFactory } from './factory.js';
-import { createCar, stepCar, kmh } from './vehicle.js';
-import { createTraffic } from './traffic.js';
-import { createSportSedan } from './car-models.js';
-import { createMapAssets, drawMinimap, drawFullMap, drawIran } from './map-render.js';
-import { bearing, formatDistance, toLocal } from './geo.js';
-
-const $ = (s) => document.querySelector(s);
-const canvas = $('#world');
-let renderer;
-try {
-  // alpha: in camera AR view the phone's camera picture shows through where nothing is drawn.
-  renderer = new THREE.WebGLRenderer({
-    canvas,
-    antialias: true,
-    alpha: true,
-    powerPreference: 'high-performance',
-  });
-} catch {
-  $('#loading').textContent =
-    'مرورگر شما گرافیک سه‌بعدی (WebGL) را اجرا نمی‌کند. شتاب‌دهی گرافیکی را فعال کنید.';
-  throw new Error('WebGL unavailable');
-}
-// Low quality (no shadows, 1× pixels) for weak phones; chosen with ?quality=low or the toolbar button.
-const quality =
-  new URLSearchParams(location.search).get('quality') ??
-  (() => {
-    try {
-      return localStorage.getItem('quality');
-    } catch {
-      return null;
-    }
-  })() ??
-  (matchMedia('(pointer: coarse)').matches ? 'low' : 'high');
-renderer.setPixelRatio(quality === 'low' ? 1 : Math.min(devicePixelRatio, 1.75));
-renderer.shadowMap.enabled = quality !== 'low';
-renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-renderer.outputColorSpace = THREE.SRGBColorSpace;
-renderer.toneMapping = THREE.ACESFilmicToneMapping;
-renderer.toneMappingExposure = 1.05;
-
-const scene = new THREE.Scene();
-const fog = new THREE.Fog('#d8cdb4', 220, 1500);
-scene.fog = fog;
-const camera = new THREE.PerspectiveCamera(62, 1, 0.3, 7000);
-
-// Morning sky over Mashhad: a gradient dome, warm haze at the horizon.
-const sky = new THREE.Mesh(
-  new THREE.SphereGeometry(5000, 32, 16),
-  new THREE.ShaderMaterial({
-    side: THREE.BackSide,
-    depthWrite: false,
-    fog: false,
-    uniforms: {
-      top: { value: new THREE.Color('#6f9fd0') },
-      horizon: { value: new THREE.Color('#e6dbc3') },
-    },
-    vertexShader:
-      'varying vec3 vPos; void main(){ vPos = position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }',
-    fragmentShader:
-      'uniform vec3 top; uniform vec3 horizon; varying vec3 vPos; void main(){ float h = clamp(normalize(vPos).y * 2.2, 0.0, 1.0); gl_FragColor = vec4(mix(horizon, top, h), 1.0); }',
-  }),
-);
-scene.add(sky);
-scene.add(new THREE.HemisphereLight('#fff4dc', '#7d715d', 1.6));
-const sun = new THREE.DirectionalLight('#ffe9c2', 3.2);
-sun.castShadow = true;
-sun.shadow.mapSize.set(2048, 2048);
-Object.assign(sun.shadow.camera, {
-  left: -75,
-  right: 75,
-  top: 75,
-  bottom: -75,
-  near: 10,
-  far: 700,
-});
-sun.shadow.bias = -0.0004;
-sun.shadow.normalBias = 0.4;
-scene.add(sun, sun.target);
-
-// ---------- World data ----------
-// Microsoft's building footprints and the satellite tile list are downloaded files, not bundled code.
-// The game still runs without them (OSM buildings and drawn roads).
-const [buildingsFile, imageryIndex] = await loadWorldFiles();
-// Footprints reaching into the factory compound are left out: the game's own buildings stand there.
-const inFactory = (x, z) => {
-  const dx = x - FACTORY.center.x,
-    dz = z - FACTORY.center.z;
-  const u = dx * FACTORY.axis.x + dz * FACTORY.axis.z,
-    v = -dx * FACTORY.axis.z + dz * FACTORY.axis.x;
-  return u > -112 && u < 82 && v > -52 && v < 52;
-};
-const extraBuildings = (buildingsFile ? decodeBuildings(buildingsFile) : []).filter((b) => {
-  for (let i = 1; i < b.length; i += 2) if (inFactory(b[i], b[i + 1])) return false;
-  return true;
-});
-const collision = createCollisionWorld(
-  [...data.buildings, ...extraBuildings].map((b) => b.slice(1)),
-);
-const segments = buildSegmentIndex(data.roads);
-const walkGraph = buildGraph(data.roads),
-  driveGraph = buildGraph(data.roads, { drivable: true });
-const ROAD_HALF_WIDTH = [5.5, 5, 4.5, 4, 3.2, 3, 2.5, 2];
-
-const rotateLocal = (lx, lz, rot) => ({
-  x: lx * Math.cos(rot) + lz * Math.sin(rot),
-  z: -lx * Math.sin(rot) + lz * Math.cos(rot),
-});
-
-// The game starts inside the vending-machine factory on the Mashhad–Chenaran road.
-const factory = createFactory(scene);
-factory.footprints.forEach((f) => addPolygon(collision, f));
-
-// City machines stand beside their path point, on whichever side is free, facing the path;
-// the factory's demo machine has a fixed place inside the production hall.
-const stations = machines.map((def) => {
-  if (def.spot) {
-    // Test points: the given coordinate is where the player stands; the machine faces the factory.
-    const front = toLocal(def.spot.lat, def.spot.lon);
-    const dx = FACTORY.center.x - front.x,
-      dz = FACTORY.center.z - front.z,
-      len = Math.hypot(dx, dz) || 1;
-    return placeStation(
-      def,
-      { x: front.x - (dx / len) * 1.9, z: front.z - (dz / len) * 1.9 },
-      Math.atan2(dx, dz),
-    );
-  }
-  if (!def.anchor) return placeStation(def, factory.demo, factory.demo.rot);
-  const seg = nearestSegment(segments, def.anchor.x, def.anchor.z, 40) ?? { dx: 1, dz: 0, type: 9 };
-  const len = Math.hypot(seg.dx, seg.dz) || 1,
-    nx = -seg.dz / len,
-    nz = seg.dx / len;
-  const off = (seg.type <= DRIVABLE_MAX_TYPE ? ROAD_HALF_WIDTH[seg.type] : 1.2) + 2.4;
-  let pos = null;
-  for (const d of [off, -off, off + 1.5, -off - 1.5]) {
-    const x = def.anchor.x + nx * d,
-      z = def.anchor.z + nz * d;
-    if (!resolveCircle(collision, x, z, 1.4).hit) {
-      pos = { x, z };
-      break;
-    }
-  }
-  pos ??= { x: def.anchor.x + nx * off, z: def.anchor.z + nz * off };
-  return placeStation(def, pos, Math.atan2(def.anchor.x - pos.x, def.anchor.z - pos.z));
-});
-
-function placeStation(def, pos, rot) {
-  const model = createVendingMachine(def);
-  model.group.position.set(pos.x, 0, pos.z);
-  model.group.rotation.y = rot;
-  scene.add(model.group);
-  addPolygon(
-    collision,
-    [
-      [-1, -0.6],
-      [1, -0.6],
-      [1, 0.6],
-      [-1, 0.6],
-    ].flatMap(([lx, lz]) => {
-      const p = rotateLocal(lx, lz, rot);
-      return [pos.x + p.x, pos.z + p.z];
-    }),
-  );
-  const front = rotateLocal(0, 1.9, rot);
-  return { def, model, x: pos.x, z: pos.z, rot, front: { x: pos.x + front.x, z: pos.z + front.z } };
-}
-
-const stationById = (id) => stations.find((s) => s.def.id === id);
-for (const s of stations) if (s.def.test) s.model.group.visible = false;
-
-// In real-world mode a circle on the ground marks how close counts as "at the machine".
-for (const s of stations) {
-  s.reach = new THREE.Mesh(
-    new THREE.RingGeometry(0.96, 1, 96),
-    new THREE.MeshBasicMaterial({
-      color: '#3ee0c9',
-      transparent: true,
-      opacity: 0.55,
-      depthWrite: false,
-      fog: false,
-      side: THREE.DoubleSide,
-    }),
-  );
-  s.reach.rotation.x = -Math.PI / 2;
-  s.reach.position.set(s.front.x, 0.08, s.front.z);
-  s.reach.visible = false;
-  scene.add(s.reach);
-}
-
-function updateReachCircles() {
-  const radius = reachRadius(),
-    objective = real.on ? objectiveStation() : null;
-  for (const s of stations) {
-    s.reach.visible = real.on;
-    if (!real.on) continue;
-    s.reach.scale.setScalar(radius);
-    s.reach.material.color.set(s === objective ? '#f2c94c' : '#3ee0c9');
-  }
-}
-// GPS test points only take part while real-world mode is on.
-const activeStations = () => stations.filter((s) => !s.def.test || real.on);
-// The closest active machine whose front is within `radius` of (x, z).
-const closestStation = (x, z, radius) =>
-  activeStations()
-    .map((s) => ({ s, d: Math.hypot(s.front.x - x, s.front.z - z) }))
-    .filter(({ d }) => d < radius)
-    .sort((a, b) => a.d - b.d)[0]?.s ?? null;
-
-const imagery = createImagery(scene, imageryIndex ?? {}, {
-  lowQuality: quality === 'low',
-  anisotropy: Math.min(16, renderer.capabilities.getMaxAnisotropy()),
-});
-const city = createCity(scene, data, {
-  collision,
-  segments,
-  extraBuildings,
-  satellite: imagery.available,
-  lowQuality: quality === 'low',
-});
-if (imagery.available)
-  $('#attribution').textContent += ` · تصویر ماهواره‌ای: ${imageryIndex.attribution}`;
-const traffic = createTraffic(scene, data, 28);
-const mapAssets = createMapAssets(data, [factory.label]);
-
-// Park gate sign at the first city machine.
-const parkGate = new THREE.Group();
-{
-  const start = stationById(CITY_START),
-    sign = document.createElement('canvas');
-  sign.width = 512;
-  sign.height = 128;
-  const c = sign.getContext('2d');
-  c.fillStyle = '#244d2e';
-  c.fillRect(0, 0, 512, 128);
-  c.fillStyle = '#f4efd9';
-  c.textAlign = 'center';
-  c.font = 'bold 64px Vazirmatn, Tahoma, sans-serif';
-  c.fillText('بوستان ملت', 256, 86);
-  const texture = new THREE.CanvasTexture(sign);
-  texture.colorSpace = THREE.SRGBColorSpace;
-  const gate = parkGate,
-    post = new THREE.MeshStandardMaterial({ color: '#6b5a49' });
-  for (const side of [-1, 1]) {
-    const p = new THREE.Mesh(new THREE.BoxGeometry(0.3, 4, 0.3), post);
-    p.position.set(side * 2.6, 2, 0);
-    p.castShadow = true;
-    gate.add(p);
-  }
-  const board = new THREE.Mesh(
-    new THREE.PlaneGeometry(5.6, 1.4),
-    new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide }),
-  );
-  board.position.y = 4;
-  gate.add(board);
-  const at = rotateLocal(-4.5, 1.5, start.rot);
-  gate.position.set(start.x + at.x, 0, start.z + at.z);
-  gate.rotation.y = start.rot;
-  scene.add(gate);
-}
-
-// ---------- Actors ----------
-const family = createFamily();
-scene.add(family.group);
-// The Robot Market guide lives inside the machines and comes out when the family arrives.
-const guide = createFamily({ robot: true });
-guide.group.visible = false;
-scene.add(guide.group);
-const carModel = createSportSedan('#1d3f78');
-scene.add(carModel.group);
-
-let state, payment, player, car, mode, cam, waypoint, route, routeTimer, deliveryTimer, ended;
-const keys = new Set();
-
-// The family car waits in the factory yard right beside them, pointing at the gate.
-const spawnCar = () => createCar(factory.car.x, factory.car.z, factory.car.heading);
-
-function reset() {
-  state = createState();
-  payment = createPayment();
-  // The family starts in the factory yard, facing the engineering office.
-  const spot = resolveCircle(collision, factory.start.x, factory.start.z, 1);
-  player = { x: spot.x, z: spot.z, heading: factory.start.heading, speed: 0, gait: 0 };
-  factory.reset();
-  for (const t of factory.talks) t.done = false;
-  car = spawnCar();
-  mode = 'walk';
-  // Camera yaw: the camera sits at target + (sin yaw, cos yaw) * distance, so it looks along (-sin, -cos).
-  cam = {
-    yaw: Math.atan2(-Math.cos(player.heading), Math.sin(player.heading)),
-    pitch: 0.32,
-    distance: 5.5,
-    lastMouse: -10,
-  };
-  waypoint = null;
-  route = null;
-  routeTimer = 0;
-  deliveryTimer = 0;
-  ended = false;
-  hints = { closed: false, car: false };
-  Object.assign(guideState, { station: null, t: 0, greeted: new Set(), arrived: 0 });
-  $('#payment').hidden = true;
-  for (const s of stations) {
-    s.model.delivery.visible = s.model.card.visible = false;
-    s.model.flap.rotation.x = 0;
-  }
-  for (const d of ['#shop', '#map-dialog', '#end']) if ($(d).open) $(d).close();
-  keys.clear();
-  refreshHUD();
-}
-
-// ---------- Input ----------
-const isTouch = matchMedia('(pointer: coarse)').matches;
-const anyDialogOpen = () =>
-  $('#shop').open || $('#map-dialog').open || $('#end').open || !$('#briefing').hidden;
-// Physical key codes, so the controls also work with a Persian keyboard layout.
-const keyName = (e) =>
-  e.code.startsWith('Key') ? e.code.slice(3).toLowerCase() : e.key.toLowerCase();
-window.addEventListener('keydown', (e) => {
-  if (e.target instanceof HTMLInputElement) return;
-  const k = keyName(e);
-  if (k === 'm' && !e.repeat && $('#briefing').hidden) {
-    e.preventDefault();
-    $('#map-dialog').open ? $('#map-dialog').close() : openMap();
-    return;
-  }
-  if (anyDialogOpen()) return;
-  if ([' ', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright', 'tab'].includes(k))
-    e.preventDefault();
-  if (e.repeat) return;
-  keys.add(k);
-  if (k === 'f') toggleCar();
-  if (k === 'e') interact();
-  if (k === 'c') swipe();
-  if (k === 'escape' && payment.phase !== 'idle') cancel();
-});
-window.addEventListener('keyup', (e) => keys.delete(keyName(e)));
-window.addEventListener('blur', () => keys.clear());
-
-// Pointer lock gives a shooter-style mouse look; dragging works as a fallback and on touch.
-canvas.addEventListener('click', () => {
-  if (!isTouch && !anyDialogOpen() && document.pointerLockElement !== canvas)
-    canvas.requestPointerLock?.()?.catch?.(() => {});
-});
-document.addEventListener('mousemove', (e) => {
-  if (document.pointerLockElement !== canvas) return;
-  look(e.movementX, e.movementY, 0.0024);
-});
-let drag = null;
-canvas.addEventListener('pointerdown', (e) => {
-  if (document.pointerLockElement === canvas) return;
-  drag = { id: e.pointerId, x: e.clientX, y: e.clientY };
-  canvas.setPointerCapture(e.pointerId);
-});
-canvas.addEventListener('pointermove', (e) => {
-  if (!drag || drag.id !== e.pointerId) return;
-  look(e.clientX - drag.x, e.clientY - drag.y, 0.005);
-  drag.x = e.clientX;
-  drag.y = e.clientY;
-});
-canvas.addEventListener('pointerup', () => (drag = null));
-canvas.addEventListener('pointercancel', () => (drag = null));
-canvas.addEventListener(
-  'wheel',
-  (e) => {
-    cam.distance = THREE.MathUtils.clamp(cam.distance + Math.sign(e.deltaY) * 0.6, 3, 12);
-  },
-  { passive: true },
-);
-
-function look(dx, dy, k) {
-  // In AR view the phone's orientation aims the camera; dragging only helps when there is no sensor.
-  if (real.on) {
-    if (arView.hasOrientation) return;
-    cam.yaw -= dx * k;
-    cam.arPitch = THREE.MathUtils.clamp((cam.arPitch ?? 0) - dy * k * 0.8, -1.2, 1.2);
-    cam.lastMouse = elapsed;
-    return;
-  }
-  cam.yaw -= dx * k;
-  cam.pitch = THREE.MathUtils.clamp(cam.pitch + dy * k * 0.8, -0.15, 1.15);
-  cam.lastMouse = elapsed;
-}
-
-// Touch joystick: x steers / strafes, y walks / throttles.
-const stick = { x: 0, y: 0, id: null };
-if (isTouch) {
-  $('#touch').hidden = false;
-  const pad = $('#stick'),
-    knob = pad.querySelector('i');
-  const move = (e) => {
-    const r = pad.getBoundingClientRect(),
-      dx = e.clientX - (r.left + r.width / 2),
-      dy = e.clientY - (r.top + r.height / 2);
-    const len = Math.min(1, Math.hypot(dx, dy) / (r.width / 2)),
-      a = Math.atan2(dy, dx);
-    stick.x = Math.cos(a) * len;
-    stick.y = -Math.sin(a) * len;
-    knob.style.transform = `translate(${stick.x * 40}px, ${-stick.y * 40}px)`;
-  };
-  pad.addEventListener('pointerdown', (e) => {
-    stick.id = e.pointerId;
-    pad.setPointerCapture(e.pointerId);
-    move(e);
-  });
-  pad.addEventListener('pointermove', (e) => e.pointerId === stick.id && move(e));
-  const end = () => {
-    stick.id = null;
-    stick.x = stick.y = 0;
-    knob.style.transform = '';
-  };
-  pad.addEventListener('pointerup', end);
-  pad.addEventListener('pointercancel', end);
-  for (const b of document.querySelectorAll('.touch-buttons button'))
-    b.addEventListener('click', () => {
-      const k = b.dataset.key;
-      if (k === 'shift')
-        b.classList.toggle(
-          'on',
-          keys.has('shift') ? (keys.delete('shift'), false) : (keys.add('shift'), true),
-        );
-      if (k === 'f') toggleCar();
-      if (k === 'e') payment.phase === 'ready' ? swipe() : interact();
-    });
-}
-
-const axis = (pos, neg) =>
-  Number(pos.some((k) => keys.has(k))) - Number(neg.some((k) => keys.has(k)));
-
-// ---------- Subtitles ----------
-const SPEAKERS = { robot: 'روبات', father: 'پدر', child: 'بچه' };
-// Factory staff speak under their own names.
-for (const t of factory.talks) if (t.label) SPEAKERS[t.speaker] = t.label;
-let lines = [],
-  lineTimer = 0,
-  talking = false;
-
-// `face` picks the robot's expression portrait (public/robot/<face>.webp).
-function say(speaker, text, face = 'happy', seconds = Math.max(2.6, text.length * 0.06)) {
-  if (lines.some((l) => l.text === text)) return;
-  lines.push({ speaker, text, face, seconds });
-}
-
-function updateSubtitles(dt) {
-  lineTimer -= dt;
-  if (lineTimer > 0) return;
-  const next = lines.shift();
-  $('#subtitle').hidden = !next;
-  talking = next?.speaker === 'robot';
-  if (!next) return;
-  $('#subtitle-speaker').textContent = `${SPEAKERS[next.speaker]}:`;
-  $('#subtitle-speaker').className = ['robot', 'father', 'child'].includes(next.speaker)
-    ? next.speaker
-    : 'staff';
-  $('#subtitle-text').textContent = next.text;
-  $('#subtitle-face').hidden = next.speaker !== 'robot';
-  if (next.speaker === 'robot') $('#subtitle-face').src = `./robot/${next.face}.webp`;
-  lineTimer = next.seconds;
-}
-
-// ---------- Sound ----------
-let audio = null,
-  soundOn = false,
-  engine = null;
-
-function tone(freq, duration = 0.12, volume = 0.05, type = 'sine') {
-  if (!soundOn) return;
-  const o = audio.createOscillator(),
-    g = audio.createGain();
-  o.type = type;
-  o.frequency.setValueAtTime(freq, audio.currentTime);
-  o.frequency.exponentialRampToValueAtTime(freq * 0.7, audio.currentTime + duration);
-  g.gain.setValueAtTime(volume, audio.currentTime);
-  g.gain.exponentialRampToValueAtTime(0.001, audio.currentTime + duration);
-  o.connect(g).connect(audio.destination);
-  o.start();
-  o.stop(audio.currentTime + duration);
-}
-
-$('#sound').onclick = async () => {
-  try {
-    audio ??= new AudioContext();
-    await audio.resume();
-    soundOn = !soundOn;
-    if (!engine) {
-      const o = audio.createOscillator(),
-        g = audio.createGain();
-      o.type = 'sawtooth';
-      g.gain.value = 0;
-      o.connect(g).connect(audio.destination);
-      o.start();
-      engine = { o, g };
-    }
-    $('#sound').textContent = soundOn ? 'صدا: روشن' : 'صدا: خاموش';
-    $('#sound').setAttribute('aria-pressed', String(soundOn));
-    tone(700);
-  } catch {
-    $('#sound').textContent = 'صدا در دسترس نیست';
-  }
-};
-
-// ---------- Car ----------
-function toggleCar() {
-  if (payment.phase !== 'idle' || state.busy) return;
-  if (real.on) {
-    say('father', 'توی حالت دنیای واقعی پیاده راه می‌ریم؛ ماشین مجازی لازم نیست.');
-    return;
-  }
-  if (mode === 'walk') {
-    if (Math.hypot(car.x - player.x, car.z - player.z) > 4.5) return;
-    mode = 'drive';
-    cam.distance = Math.max(cam.distance, 8);
-    tone(320, 0.2, 0.05, 'square');
-    say('father', 'کمربندها رو ببندیم! مسیر طلایی روی زمین راه رو نشون می‌ده.');
-  } else {
-    if (Math.abs(car.speed) > 3) {
-      say('father', 'اول ماشین را نگه دار، بعد پیاده می‌شویم.');
-      return;
-    }
-    // Step out on the driver's (left) side, or wherever is free.
-    const left = { x: -Math.sin(car.heading), z: -Math.cos(car.heading) };
-    const spot = resolveCircle(collision, car.x + left.x * 2.8, car.z + left.z * 2.8, 1);
-    Object.assign(player, { x: spot.x, z: spot.z, heading: car.heading });
-    car.speed = 0;
-    mode = 'walk';
-    cam.distance = 5.5;
-    tone(260, 0.2, 0.05, 'square');
-  }
-  refreshHUD();
-}
-
-// ---------- Machines, shop and payment ----------
-// In real-world mode "at the machine" is a GPS radius, because the fix itself is off by metres.
-const reachRadius = () => (real.on && real.fix ? arrivalRadius(real.fix.accuracy) : 3.4);
-const nearStation = () =>
-  mode === 'walk' ? closestStation(player.x, player.z, reachRadius()) : null;
-const hoursText = (m) =>
-  m.hours[1] - m.hours[0] >= 24 * 60
-    ? 'شبانه‌روزی'
-    : `${formatClock(m.hours[0])} تا ${formatClock(m.hours[1])}`;
-let shopStation = null;
-
-function interact() {
-  const station = nearStation();
-  if (!station || state.busy || payment.phase !== 'idle' || ended) return;
-  if (real.on && (real.fix?.speed ?? 0) > MAX_WALKING_SPEED) {
-    say('father', 'داریم سریع حرکت می‌کنیم؛ اول بایستیم، بعد خرید کنیم.');
-    return;
-  }
-  if (!isOpen(station.def, state.minutes)) {
-    say(
-      guideOut() ? 'robot' : 'father',
-      `این دستگاه الان بسته است. ساعت کاری: ${hoursText(station.def)}.`,
-      'serious',
-    );
-    return;
-  }
-  shopStation = station;
-  renderShop();
-  document.exitPointerLock?.();
-  keys.clear();
-  $('#shop').showModal();
-  tone(750);
-}
-
-function renderShop() {
-  const def = shopStation.def;
-  $('#shop-category').textContent =
-    `${CATEGORIES[def.category].icon} ${CATEGORIES[def.category].label} · ساعت کاری ${hoursText(def)}`;
-  $('#shop-name').textContent = `روبات مارکت · ${def.name}`;
-  $('#shop-address').textContent = def.address;
-  $('#shop-note').textContent = `${def.note} · موجودی شما: ${formatHetoman(state.balance)}`;
-  $('#products').replaceChildren(
-    ...def.products.map((id) => {
-      const p = catalog[id],
-        price = priceAt(def, id),
-        b = document.createElement('button');
-      b.type = 'button';
-      const blocker = purchaseBlocker(state, def, id);
-      b.disabled = Boolean(blocker);
-      b.innerHTML = `<span class="icon">${p.icon}</span><b>${p.name}</b><span class="price">${formatHetoman(price)}</span>${price !== p.cost ? `<s>${formatHetoman(p.cost)}</s>` : ''}<small>${p.type === 'drink' ? 'نوشیدنی' : 'خوراکی'}${blocker === 'funds' ? ' · موجودی کافی نیست' : ''}</small>`;
-      b.onclick = () => startPayment(id);
-      return b;
-    }),
-  );
-}
-
-function startPayment(productId) {
-  if (!beginPayment(state, payment, shopStation.def, productId)) return;
-  payment.station = shopStation;
-  payment.timer = 0;
-  $('#shop').close();
-  const p = catalog[productId];
-  $('#payment').hidden = false;
-  $('#payment-title').textContent =
-    `${p.icon} ${p.name} · ${formatHetoman(priceAt(shopStation.def, productId))}`;
-  $('#payment-step').textContent = 'در حال نزدیک شدن به کارت‌خوان…';
-  $('#swipe').disabled = true;
-  $('#cancel-payment').hidden = false;
-  say('child', 'بابا، کارت رو بده من بکشم!');
-}
-
-function swipe() {
-  if (!swipePayment(state, payment)) return;
-  payment.timer = 0;
-  payment.station.model.card.visible = true;
-  $('#swipe').disabled = true;
-  $('#cancel-payment').hidden = true;
-  $('#payment-step').textContent = 'پرداخت موفق ✓ محصول در حال تحویل است';
-  tone(1100, 0.3);
-  refreshHUD();
-}
-
-function cancel() {
-  if (!cancelPayment(state, payment)) return;
-  $('#payment').hidden = true;
-}
-
-$('#swipe').onclick = swipe;
-// On phones the prompt itself is the button: tap it to buy, swipe the card, or get in/out of the car.
-$('#prompt').onclick = () => {
-  if (payment.phase === 'ready') swipe();
-  else if (nearStation()) interact();
-  else toggleCar();
-};
-$('#cancel-payment').onclick = cancel;
-$('#shop-close').onclick = () => $('#shop').close();
-
-function updatePayment(dt) {
-  if (payment.phase === 'idle') return;
-  payment.timer += dt;
-  const model = payment.station.model;
-  if (payment.phase === 'approaching' && payment.timer > 1) {
-    readyPayment(payment);
-    $('#swipe').disabled = false;
-    $('#payment-step').textContent = 'کارت را بکشید: دکمهٔ «کشیدن کارت» یا کلید C';
-  }
-  if (payment.phase === 'approved') {
-    const t = Math.min(1, payment.timer);
-    model.card.position.set(0.95 - t * 0.25, 1.7 - t * 0.1, 0.66);
-    if (payment.timer > 1.2) {
-      model.card.visible = false;
-      $('#payment').hidden = true;
-      model.setDelivery(payment.productId);
-      deliveryTimer = 2.6;
-      payment.delivering = { station: payment.station, record: payment.record };
-      Object.assign(payment, createPayment());
-    }
-  }
-}
-
-function updateDelivery(dt) {
-  if (deliveryTimer <= 0) return;
-  deliveryTimer = Math.max(0, deliveryTimer - dt);
-  const { station, record } = payment.delivering,
-    model = station.model,
-    t = 2.6 - deliveryTimer;
-  const slot = record ? catalog[record.productId] : null;
-  model.delivery.visible = t < 2.4;
-  // Falls from a shelf, waits in the tray, then lifts toward the child's hands.
-  const shelf = new THREE.Vector3(
-    -0.5 + (record.price % 7) * 0.1,
-    1.2 + (record.price % 5) * 0.15,
-    0.45,
-  );
-  if (t < 0.8) model.delivery.position.lerpVectors(shelf, model.slotPoint, t / 0.8);
-  else
-    model.delivery.position
-      .copy(model.slotPoint)
-      .add(new THREE.Vector3(0, Math.max(0, t - 1.6) * 0.6, Math.max(0, t - 1.6) * 0.8));
-  model.flap.rotation.x = t > 0.7 && t < 2 ? -1 : 0;
-  if (deliveryTimer > 0) return;
-  model.flap.rotation.x = 0;
-  state.busy = false;
-  tone(980, 0.18);
-  reward(record, slot);
-}
-
-function reward(record, product) {
-  const awards = awardsFor(state.purchases.slice(0, -1), record),
-    rankBefore = rankFor(state.xp).index;
-  if (real.on) awards.push({ label: 'خرید در دنیای واقعی', points: 200 });
-  const total = awards.reduce((s, a) => s + a.points, 0);
-  state.xp += total;
-  $('#awards').replaceChildren(
-    Object.assign(document.createElement('div'), {
-      className: 'total',
-      textContent: `+${fa(total)}`,
-    }),
-    ...awards.map((a, i) => {
-      const line = document.createElement('div');
-      line.className = 'line';
-      line.style.animationDelay = `${i * 0.12}s`;
-      line.innerHTML = `${a.label}<b>+${fa(a.points)}</b>`;
-      return line;
-    }),
-  );
-  clearTimeout(reward.timeout);
-  reward.timeout = setTimeout(() => $('#awards').replaceChildren(), 3200);
-  say('child', `${product.icon} ${product.name} گرفتم! مرسی بابا.`);
-  const done = completeMissions(state);
-  for (const m of done) {
-    showBanner('مأموریت انجام شد', m.title, `+${fa(m.xp)} XP · +${formatHetoman(m.hetoman)} پاداش`);
-    tone(660, 0.5);
-  }
-  if (rankFor(state.xp).index > rankBefore)
-    setTimeout(
-      () => showBanner('ارتقای درجه', rankFor(state.xp).name, 'دستگاه‌های بیشتری پیدا کن'),
-      done.length ? 3400 : 0,
-    );
-  const next = activeMission(state);
-  if (next) {
-    waypoint = null;
-    route = null;
-    setTimeout(
-      () => say(guideOut() ? 'robot' : 'father', `مأموریت بعدی: ${next.title}`, 'wink'),
-      1500,
-    );
-  }
-  refreshHUD();
-  checkEnd();
-}
-
-function showBanner(tag, title, sub) {
-  const b = $('#banner');
-  b.innerHTML = `<small>${tag}</small><strong>${title}</strong><span>${sub}</span>`;
-  b.hidden = false;
-  b.style.animation = 'none';
-  void b.offsetWidth;
-  b.style.animation = '';
-  clearTimeout(showBanner.timeout);
-  showBanner.timeout = setTimeout(() => (b.hidden = true), 3200);
-}
-
-function checkEnd() {
-  const allDone = state.missionsDone.length === MISSIONS.length;
-  if (ended || (!allDone && canAffordAnything(state, machines))) return;
-  ended = true;
-  document.exitPointerLock?.();
-  $('#end-tag').textContent = allDone ? 'عملیات موفق' : 'پایان بودجه';
-  $('#end-title').textContent = allDone ? 'عملیات مشهد کامل شد!' : 'بودجهٔ امروز تمام شد';
-  $('#end-text').textContent = allDone
-    ? 'همهٔ مأموریت‌های محدودهٔ بوستان ملت انجام شد. مناطق دیگر مشهد به‌زودی باز می‌شوند.'
-    : 'دیگر نمی‌توانید از دستگاه‌ها خرید کنید. امتیاز امروز:';
-  const places = new Set(state.purchases.map((p) => p.machineId)).size;
-  $('#end-stats').innerHTML = [
-    ['امتیاز', `${fa(state.xp)} XP`],
-    ['درجه', rankFor(state.xp).name],
-    ['خریدها', fa(state.purchases.length)],
-    ['مکان‌های کشف‌شده', `${fa(places)} از ${fa(machines.length)}`],
-    ['مأموریت‌ها', `${fa(state.missionsDone.length)} از ${fa(MISSIONS.length)}`],
-    ['باقی‌مانده', formatHetoman(state.balance)],
-  ]
-    .map(([k, v]) => `<li><span>${k}</span><b>${v}</b></li>`)
-    .join('');
-  $('#continue').hidden = !allDone;
-  $('#end').showModal();
-}
-
-$('#quality').textContent = quality === 'low' ? 'گرافیک: سبک' : 'گرافیک: کامل';
-$('#quality').onclick = () => {
-  try {
-    localStorage.setItem('quality', quality === 'low' ? 'high' : 'low');
-  } catch {}
-  location.replace(location.pathname);
-};
-$('#again').onclick = reset;
-$('#continue').onclick = () => $('#end').close();
-$('#restart').onclick = reset;
-
-// ---------- Objective, route and HUD ----------
-const objectiveStation = () => {
-  if (waypoint) return stationById(waypoint);
-  const mission = activeMission(state);
-  if (mission?.target) return stationById(mission.target);
-  // Open-ended missions point to the nearest place not bought from yet.
-  const visited = new Set(state.purchases.map((p) => p.machineId));
-  return (
-    activeStations()
-      .filter((s) => !visited.has(s.def.id))
-      .sort(
-        (a, b) =>
-          Math.hypot(a.x - player.x, a.z - player.z) - Math.hypot(b.x - player.x, b.z - player.z),
-      )[0] ?? null
-  );
-};
-
-// The gold route ribbon on the ground, rebuilt when the route changes.
-const routeMaterial = new THREE.MeshBasicMaterial({
-  color: '#f2c94c',
-  transparent: true,
-  opacity: 0.75,
-  depthWrite: false,
-  polygonOffset: true,
-  polygonOffsetFactor: -12,
-  polygonOffsetUnits: -24,
-});
-let routeMesh = null;
-
-function rebuildRouteMesh() {
-  if (routeMesh) {
-    scene.remove(routeMesh);
-    routeMesh.geometry.dispose();
-    routeMesh = null;
-  }
-  if (!route) return;
-  const pts = [],
-    pos = [],
-    idx = [];
-  let total = 0;
-  for (const p of route.points) {
-    if (pts.length) total += Math.hypot(p.x - pts.at(-1).x, p.z - pts.at(-1).z);
-    if (total > 700) break;
-    pts.push(p);
-  }
-  for (let i = 0; i < pts.length; i++) {
-    const a = pts[Math.max(0, i - 1)],
-      b = pts[Math.min(pts.length - 1, i + 1)];
-    const dx = b.x - a.x,
-      dz = b.z - a.z,
-      len = Math.hypot(dx, dz) || 1,
-      w = mode === 'drive' ? 1.1 : 0.55;
-    pos.push(
-      pts[i].x - (dz / len) * w,
-      0.14,
-      pts[i].z + (dx / len) * w,
-      pts[i].x + (dz / len) * w,
-      0.14,
-      pts[i].z - (dx / len) * w,
-    );
-    if (i) idx.push((i - 1) * 2, i * 2, (i - 1) * 2 + 1, (i - 1) * 2 + 1, i * 2, i * 2 + 1);
-  }
-  const g = new THREE.BufferGeometry();
-  g.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
-  g.setIndex(idx);
-  routeMesh = new THREE.Mesh(g, routeMaterial);
-  scene.add(routeMesh);
-}
-
-let routeTarget = null,
-  routeFrom = { x: 0, z: 0 },
-  routeMode = null;
-
-function updateRoute(dt) {
-  routeTimer -= dt;
-  const target = objectiveStation();
-  if (!target) {
-    if (route) {
-      route = null;
-      rebuildRouteMesh();
-    }
-    return;
-  }
-  const pos = mode === 'drive' ? car : player;
-  const changed = target !== routeTarget || routeMode !== mode || !route;
-  if (!changed && (routeTimer > 0 || Math.hypot(pos.x - routeFrom.x, pos.z - routeFrom.z) < 10))
-    return;
-  routeTimer = 1.2;
-  routeTarget = target;
-  routeMode = mode;
-  routeFrom = { x: pos.x, z: pos.z };
-  // Close targets are reached directly; the street network would detour out of buildings.
-  const direct = Math.hypot(target.front.x - pos.x, target.front.z - pos.z);
-  route =
-    direct < 60
-      ? {
-          points: [
-            { x: pos.x, z: pos.z },
-            { x: target.front.x, z: target.front.z },
-          ],
-          length: direct,
-        }
-      : routeBetween(
-          mode === 'drive' ? driveGraph : walkGraph,
-          pos.x,
-          pos.z,
-          target.front.x,
-          target.front.z,
-        );
-  rebuildRouteMesh();
-}
-
-const compass = $('#compass').getContext('2d'),
-  minimap = $('#minimap').getContext('2d');
-
-function drawCompass(headingDeg, markers) {
-  const w = 560,
-    h = 44;
-  compass.clearRect(0, 0, w, h);
-  compass.fillStyle = 'rgba(10,16,14,.45)';
-  compass.fillRect(0, 10, w, 24);
-  compass.textAlign = 'center';
-  compass.textBaseline = 'middle';
-  const labels = { 0: 'شمال', 90: 'شرق', 180: 'جنوب', 270: 'غرب' };
-  for (let d = -100; d <= 100; d += 5) {
-    const deg = (((Math.round(headingDeg / 5) * 5 + d) % 360) + 360) % 360,
-      x = w / 2 + ((deg - headingDeg + 540) % 360) * 2.6 - 180 * 2.6;
-    if (x < 10 || x > w - 10) continue;
-    compass.fillStyle = 'rgba(236,242,238,.8)';
-    if (labels[deg] !== undefined) {
-      compass.font = 'bold 13px Vazirmatn, sans-serif';
-      compass.fillStyle = deg === 0 ? '#f2c94c' : '#ecf2ee';
-      compass.fillText(labels[deg], x, 22);
-    } else if (deg % 15 === 0) {
-      compass.font = '10px Vazirmatn, sans-serif';
-      compass.fillText(fa(deg), x, 22);
-    } else compass.fillRect(x - 0.5, 18, 1, 8);
-  }
-  for (const m of markers) {
-    const x = w / 2 + (((m.bearing - headingDeg + 540) % 360) - 180) * 2.6;
-    if (x < 10 || x > w - 10) continue;
-    compass.save();
-    compass.translate(x, 6);
-    compass.rotate(Math.PI / 4);
-    compass.fillStyle = m.color;
-    compass.fillRect(-4, -4, 8, 8);
-    compass.restore();
-  }
-  compass.fillStyle = '#ecf2ee';
-  compass.fillRect(w / 2 - 1, 34, 2, 8);
-  compass.font = 'bold 11px Vazirmatn, sans-serif';
-  compass.fillText(fa(Math.round(headingDeg) % 360), w / 2, 6);
-}
-
-function refreshHUD() {
-  $('#balance').textContent = fa(state.balance);
-  const rank = rankFor(state.xp);
-  $('#rank-name').textContent = rank.name;
-  $('#xp').textContent = rank.next ? `${fa(state.xp)} / ${fa(rank.next)} XP` : `${fa(state.xp)} XP`;
-  $('#xp-bar').style.width = `${Math.round(rank.progress * 100)}%`;
-  const active = activeMission(state);
-  $('#mission-list').innerHTML = MISSIONS.map((m) => {
-    const done = state.missionsDone.includes(m.id);
-    return `<li class="${done ? 'done' : m === active ? 'active' : ''}">${m.title}</li>`;
-  }).join('');
-  $('#mode-label').textContent = mode === 'drive' ? 'در ماشین · F برای پیاده شدن' : 'پیاده';
-  $('#speed-stat').hidden = mode !== 'drive';
-}
-
-function updatePrompt() {
-  let html = '';
-  const station = nearStation();
-  // The payment panel carries its own swipe button, so no prompt while paying or collecting.
-  if (state.busy || payment.phase !== 'idle') html = '';
-  else if (station)
-    html = isOpen(station.def, state.minutes)
-      ? `<kbd>E</kbd>خرید از روبات مارکت · ${station.def.name}`
-      : `دستگاه بسته است · ${hoursText(station.def)}`;
-  else if (mode === 'walk' && Math.hypot(car.x - player.x, car.z - player.z) < 4.5)
-    html = '<kbd>F</kbd>سوار ماشین شو';
-  else if (
-    mode === 'drive' &&
-    Math.abs(car.speed) < 1 &&
-    stations.some((s) => Math.hypot(s.front.x - car.x, s.front.z - car.z) < 25)
-  )
-    html = '<kbd>F</kbd>پیاده شو؛ دستگاه نزدیک است';
-  $('#prompt').hidden = !html;
-  if ($('#prompt').innerHTML !== html) $('#prompt').innerHTML = html;
-}
-
-// ---------- Map dialog ----------
-const mapView = { cx: 0, cz: 0, mpp: 2 },
-  mapCanvas = $('#fullmap'),
-  iranCanvas = $('#iran-map');
-let selected = null,
-  mapTab = 'city';
-const markers = () => {
-  const visited = new Set(state.purchases.map((p) => p.machineId)),
-    objective = objectiveStation();
-  return activeStations().map((s) => ({
-    id: s.def.id,
-    x: s.x,
-    z: s.z,
-    visited: visited.has(s.def.id),
-    open: isOpen(s.def, state.minutes),
-    objective: s === objective,
-  }));
-};
-
-function sizeCanvas(c) {
-  const r = c.getBoundingClientRect(),
-    dpr = Math.min(devicePixelRatio, 2);
-  c.width = Math.max(1, r.width * dpr);
-  c.height = Math.max(1, r.height * dpr);
-  return dpr;
-}
-
-function renderMap() {
-  if (!$('#map-dialog').open) return;
-  if (mapTab === 'city') {
-    const dpr = sizeCanvas(mapCanvas);
-    const pos = mode === 'drive' ? car : player;
-    drawFullMap(mapCanvas.getContext('2d'), mapAssets, mapView, {
-      dpr,
-      markers: markers(),
-      route: route?.points,
-      selected,
-      player: { x: pos.x, z: pos.z, heading: mode === 'drive' ? car.heading : player.heading },
-    });
-  } else {
-    const dpr = sizeCanvas(iranCanvas),
-      c = iranCanvas.getContext('2d');
-    c.setTransform(dpr, 0, 0, dpr, 0, 0);
-    drawIran(c, iran, {
-      width: iranCanvas.width / dpr,
-      height: iranCanvas.height / dpr,
-      t: elapsed,
-      cities: CITIES,
-    });
-  }
-}
-
-function renderMachineList() {
-  const pos = mode === 'drive' ? car : player,
-    visited = new Set(state.purchases.map((p) => p.machineId));
-  const items = activeStations().map((s) => {
-    const li = document.createElement('li'),
-      b = document.createElement('button'),
-      open = isOpen(s.def, state.minutes);
-    b.type = 'button';
-    b.className = s.def.id === selected ? 'selected' : '';
-    b.innerHTML = `<span>${CATEGORIES[s.def.category].icon}</span><span>${s.def.name}${visited.has(s.def.id) ? ' ✓' : ''}<span class="meta">${CATEGORIES[s.def.category].label} · ${open ? 'باز' : 'بسته'}</span></span><span class="dist">${formatDistance(Math.hypot(s.x - pos.x, s.z - pos.z))}</span>`;
-    b.onclick = () => selectMachine(s.def.id, true);
-    li.append(b);
-    return li;
-  });
-  for (const place of lockedPlaces) {
-    const li = document.createElement('li');
-    li.innerHTML = `<button type="button" class="locked" disabled><span>🔒</span><span>${place.name}<span class="meta">${place.note}</span></span><span></span></button>`;
-    items.push(li);
-  }
-  $('#machine-list').replaceChildren(...items);
-}
-
-function selectMachine(id, center = false) {
-  selected = id;
-  const s = stationById(id),
-    def = s.def;
-  if (center) {
-    mapView.cx = s.x;
-    mapView.cz = s.z;
-    mapView.mpp = Math.min(mapView.mpp, 1.4);
-  }
-  $('#machine-detail').hidden = false;
-  $('#detail-name').textContent = `${CATEGORIES[def.category].icon} ${def.name}`;
-  $('#detail-address').textContent = `📍 ${def.address}`;
-  $('#detail-meta').textContent =
-    `🕒 ${hoursText(def)} · ${isOpen(def, state.minutes) ? 'الان باز است' : 'الان بسته است'} · ${def.note}`;
-  $('#detail-products').textContent = def.products
-    .map((id) => `${catalog[id].icon} ${catalog[id].name} ${fa(priceAt(def, id))}`)
-    .join(' · ');
-  $('#route-button').textContent = waypoint === id ? 'مسیر فعال است ✓' : 'مسیریابی تا اینجا';
-  renderMachineList();
-  renderMap();
-}
-
-$('#route-button').onclick = () => {
-  if (!selected) return;
-  waypoint = selected;
-  route = null;
-  routeTimer = 0;
-  updateRoute(0);
-  const s = stationById(selected);
-  say(
-    'father',
-    `مسیر تا ${s.def.name} رو گذاشتم؛ ${route ? formatDistance(route.length) : ''}. دنبال خط طلایی بریم.`,
-  );
-  selectMachine(selected);
-};
-
-function openMap() {
-  if (anyDialogOpen()) return;
-  document.exitPointerLock?.();
-  keys.clear();
-  const pos = mode === 'drive' ? car : player;
-  Object.assign(mapView, { cx: pos.x, cz: pos.z, mpp: 2.2 });
-  $('#map-dialog').showModal();
-  selected ??= objectiveStation()?.def.id ?? null;
-  if (selected) selectMachine(selected);
-  renderMachineList();
-  renderMap();
-}
-
-$('#minimap-button').onclick = openMap;
-$('#map-close').onclick = () => $('#map-dialog').close();
-for (const tab of document.querySelectorAll('.tabs button'))
-  tab.onclick = () => {
-    mapTab = tab.dataset.tab;
-    document
-      .querySelectorAll('.tabs button')
-      .forEach((t) => t.setAttribute('aria-selected', String(t === tab)));
-    mapCanvas.hidden = mapTab !== 'city';
-    iranCanvas.hidden = mapTab !== 'iran';
-    renderMap();
-  };
-let mapDrag = null;
-mapCanvas.addEventListener('pointerdown', (e) => {
-  mapDrag = { x: e.clientX, y: e.clientY, moved: 0 };
-  mapCanvas.setPointerCapture(e.pointerId);
-});
-mapCanvas.addEventListener('pointermove', (e) => {
-  if (!mapDrag) return;
-  mapView.cx -= (e.clientX - mapDrag.x) * mapView.mpp;
-  mapView.cz -= (e.clientY - mapDrag.y) * mapView.mpp;
-  mapDrag.moved += Math.abs(e.clientX - mapDrag.x) + Math.abs(e.clientY - mapDrag.y);
-  mapDrag.x = e.clientX;
-  mapDrag.y = e.clientY;
-  renderMap();
-});
-mapCanvas.addEventListener('pointerup', (e) => {
-  if (mapDrag && mapDrag.moved < 6) {
-    const r = mapCanvas.getBoundingClientRect();
-    const wx = mapView.cx + (e.clientX - r.left - r.width / 2) * mapView.mpp,
-      wz = mapView.cz + (e.clientY - r.top - r.height / 2) * mapView.mpp;
-    const hit = activeStations().find((s) => Math.hypot(s.x - wx, s.z - wz) < 14 * mapView.mpp);
-    if (hit) selectMachine(hit.def.id);
-  }
-  mapDrag = null;
-});
-mapCanvas.addEventListener(
-  'wheel',
-  (e) => {
-    e.preventDefault();
-    mapView.mpp = THREE.MathUtils.clamp(mapView.mpp * (e.deltaY > 0 ? 1.15 : 1 / 1.15), 0.35, 30);
-    renderMap();
-  },
-  { passive: false },
-);
-
-// ---------- Briefing ----------
-const CITIES = [
-  { name: 'مشهد', lat: 36.3, lon: 59.6, active: true },
-  { name: 'تهران', lat: 35.69, lon: 51.39 },
-  { name: 'اصفهان', lat: 32.65, lon: 51.67 },
-  { name: 'شیراز', lat: 29.59, lon: 52.58 },
-  { name: 'تبریز', lat: 38.08, lon: 46.29 },
-  { name: 'اهواز', lat: 31.32, lon: 48.67 },
-  { name: 'کرمان', lat: 30.28, lon: 57.08 },
-  { name: 'رشت', lat: 37.28, lon: 49.58 },
-  { name: 'یزد', lat: 31.9, lon: 54.37 },
-  { name: 'زاهدان', lat: 29.5, lon: 60.86 },
-  { name: 'کرمانشاه', lat: 34.31, lon: 47.07 },
-  { name: 'بندرعباس', lat: 27.18, lon: 56.27 },
-];
-const BRIEF = [
-  `نقطهٔ شروع: ${FACTORY.name}، بزرگراه مشهد–چناران`,
-  'تیم: پدر و فرزند · روبات راهنما در دستگاه‌ها منتظر شماست',
-  'هدف: از کارخانه تا بوستان ملت و دانشگاه فردوسی (حدود ۲۰ کیلومتر) بروید و دستگاه‌های روبات مارکت را در پارک، مدرسه، دانشگاه، ایستگاه مترو و مرکز خرید پیدا کنید.',
-  'هر خرید امتیاز دارد؛ کشف مکان تازه و ترکیب نوشیدنی و خوراکی امتیاز بیشتری دارد.',
-  'بودجه: ۵۰۰ هتومان · مأموریت‌ها پاداش نقدی دارند.',
-  'رفت‌وآمد: پیاده یا با ماشین. نقشهٔ گوشهٔ صفحه را بزنید تا آدرس دستگاه‌ها را ببینید.',
-].join('\n');
-let briefChars = 0;
-
-function startMission() {
-  $('#briefing').hidden = true;
-  $('#hud').hidden = false;
-  say('child', 'بابا، اینجا همون کارخونه‌ایه که دستگاه‌های روبات مارکت رو می‌سازه؟');
-  say('father', 'آره! سالن تولید اون‌وره؛ دستگاه وندینگ هم توی دفتر فنی مهندسیه. بریم ببینیم!');
-  say('child', 'اون وانت سفیده کیه داره میاد تو؟');
-  say('father', 'آقای محمدیه، مدیر شرکت. بعداً بریم اتاقش سلام کنیم.');
-  if (!isTouch && !real.on) canvas.requestPointerLock?.()?.catch?.(() => {});
-}
-
-$('#start-mission').onclick = startMission;
-
-// ---------- Real-world (GPS) mode ----------
-// The family mirrors the phone's position on the real map of Mashhad. Walking to a real place where
-// a machine stands lets the player buy there, with a bonus.
-const real = {
-  on: false,
-  fix: null,
-  heading: null,
-  error: null,
-  waiting: null,
-  stop: null,
-  stabilizer: createStabilizer(),
-};
-
-function setRealMode(on) {
-  if (on === real.on) return;
-  real.stop?.();
-  Object.assign(real, { on, fix: null, heading: null, error: null, waiting: null, stop: null });
-  for (const s of stations) if (s.def.test) s.model.group.visible = on;
-  $('#gps-toggle').classList.toggle('on', on);
-  $('#gps-status').hidden = !on;
-  $('#ar-toggle').hidden = $('#stable-toggle').hidden = !on;
-  // Real-world mode is first person: the player is where the phone is and sees what it faces.
-  document.body.classList.toggle('real', on);
-  if (!on) {
-    setArMode(false);
-    arView.stopSensors();
-    return;
-  }
-  arView.startSensors();
-  cam.arPitch = 0;
-  cam.yaw = Math.atan2(-Math.cos(player.heading), Math.sin(player.heading));
-  if (mode === 'drive') toggleCar();
-  mode = 'walk';
-  real.stop = startTracking({
-    onFix: (fix) => {
-      real.fix = fix;
-      real.error = null;
-    },
-    onHeading: (heading) => (real.heading = heading),
-    onError: (message) => (real.error = message),
-    onStatus: (message) => (real.waiting = message),
-    stabilizer: (real.stabilizer = createStabilizer()),
-  });
-  real.stabilizer.stable = stableMode;
-  say(
-    'father',
-    'حالت دنیای واقعی روشن شد؛ از چشم خودمون می‌بینیم و هر جا راه بریم، توی بازی هم همون‌جاییم.',
-  );
-  setArMode(true);
-}
-
-// ---------- First-person real-world view ----------
-// The view stands at the GPS position at eye height and turns with the phone. With the camera
-// picture on (AR) the city model is hidden and only the machines, their reach circles, the route
-// and the robot are drawn over the real street; with it off, the 3D city is shown first person.
-const arView = createArView($('#camera'));
-let arMode = false,
-  stableMode = true;
-const hiddenInAr = () => [
-  sky,
-  city.group,
-  imagery.group,
-  factory.group,
-  traffic.group,
-  carModel.group,
-  parkGate,
-];
-
-async function setArMode(on) {
-  if (on && !arMode) {
-    const problem = await arView.start();
-    if (problem) {
-      say('father', `${problem} فعلاً شهر سه‌بعدی رو از چشم خودمون می‌بینیم.`);
-      return;
-    }
-    if (!real.on) {
-      arView.stop();
-      return;
-    }
-    say(
-      'robot',
-      'دوربین روشن شد! گوشی رو صاف جلوی خودت بگیر؛ ستون نورانی طلایی جای دستگاهه.',
-      'excited',
-    );
-    setTimeout(() => {
-      if (real.on && !arView.hasOrientation)
-        say('father', 'حسگر جهت گوشی جواب نمی‌ده؛ برای چرخیدن، صفحه رو با انگشت بکش.');
-    }, 3000);
-  } else if (!on && arMode) arView.stop();
-  else return;
-  arMode = on;
-  for (const object of hiddenInAr()) object.visible = !on;
-  scene.fog = on ? null : fog;
-  document.body.classList.toggle('ar', on);
-  $('#ar-toggle').classList.toggle('on', on);
-}
-
-$('#ar-toggle').onclick = () => setArMode(!arMode);
-$('#stable-toggle').onclick = () => {
-  stableMode = !stableMode;
-  real.stabilizer.stable = stableMode;
-  $('#stable-toggle').classList.toggle('on', stableMode);
-  $('#stable-toggle').textContent = stableMode ? '🎯 پایدار: روشن' : '🎯 پایدار: خاموش';
-};
-
-// The safety notice comes first; permissions are requested from the tap on its button (iOS needs that).
-function askRealMode(thenStart) {
-  if (real.on) {
-    setRealMode(false);
-    return;
-  }
-  $('#real-intro').showModal();
-  $('#real-go').onclick = async () => {
-    $('#real-intro').close();
-    await requestCompass();
-    setRealMode(true);
-    if (thenStart) startMission();
-  };
-}
-
-$('#real-mode').onclick = () => askRealMode(true);
-$('#gps-toggle').onclick = () => askRealMode(false);
-$('#real-cancel').onclick = () => $('#real-intro').close();
-
-function updateReal(dt) {
-  const status = $('#gps-status');
-  if (real.error) status.textContent = `⚠ ${real.error}`;
-  else if (!real.fix) status.textContent = `📍 ${real.waiting ?? 'در حال یافتن موقعیت…'}`;
-  else if (!insideWorld(data.bounds, real.fix.x, real.fix.z)) {
-    const nearest = Math.min(
-      ...activeStations().map((s) => Math.hypot(s.x - real.fix.x, s.z - real.fix.z)),
-    );
-    status.textContent = `📍 خارج از محدودهٔ بازی · ${formatDistance(nearest)} تا نزدیک‌ترین دستگاه`;
-  } else
-    status.textContent = `📍 GPS ±${fa(Math.round(real.fix.accuracy))} متر${real.fix.speed > MAX_WALKING_SPEED ? ' · حرکت سریع' : ''}`;
-  if (!real.fix || !insideWorld(data.bounds, real.fix.x, real.fix.z)) {
-    player.speed = 0;
-    return;
-  }
-  // Walk the avatar towards the (building-free) GPS point instead of teleporting it.
-  const target = resolveCircle(collision, real.fix.x, real.fix.z, 1);
-  const dx = target.x - player.x,
-    dz = target.z - player.z,
-    d = Math.hypot(dx, dz);
-  if (d > 150) Object.assign(player, { x: target.x, z: target.z });
-  const speed = d > 0.5 ? Math.min(8, Math.max(1.2, d * 1.5)) : 0;
-  player.speed += (speed - player.speed) * Math.min(1, dt * 6);
-  if (d > 0.5) {
-    const step = Math.min(d, player.speed * dt);
-    player.x += (dx / d) * step;
-    player.z += (dz / d) * step;
-  }
-  const want = real.heading ?? (d > 0.5 ? Math.atan2(-dz, dx) : player.heading);
-  // Stable mode also calms the compass, which jitters near cars and metal.
-  player.heading +=
-    Math.atan2(Math.sin(want - player.heading), Math.cos(want - player.heading)) *
-    Math.min(1, dt * (stableMode ? 2 : 5));
-  player.gait += dt * player.speed * 1.9;
-}
-
-// ---------- Loop ----------
-const camPos = new THREE.Vector3(),
-  camTarget = new THREE.Vector3(),
-  lookAt = new THREE.Vector3();
-let elapsed = 0,
-  last = performance.now(),
-  hudTimer = 0,
-  streetTimer = 0;
-// Debug runs (headless checks render ~1 fps) may simulate a whole second per frame, still in substeps.
-const MAX_FRAME = new URLSearchParams(location.search).has('debug') ? 1 : 0.25;
-
-function resize() {
-  renderer.setSize(innerWidth, innerHeight);
-  camera.aspect = innerWidth / innerHeight;
-  camera.updateProjectionMatrix();
-  renderMap();
-}
-
-window.addEventListener('resize', resize);
-
-function updateWalk(dt) {
-  const forward = { x: -Math.sin(cam.yaw), z: -Math.cos(cam.yaw) },
-    right = { x: Math.cos(cam.yaw), z: -Math.sin(cam.yaw) };
-  const iy = axis(['w', 'arrowup'], ['s', 'arrowdown']) + stick.y,
-    ix = axis(['d', 'arrowright'], ['a', 'arrowleft']) + stick.x;
-  const frozen = state.busy || payment.phase !== 'idle';
-  let dx = forward.x * iy + right.x * ix,
-    dz = forward.z * iy + right.z * ix;
-  const len = Math.hypot(dx, dz);
-  const run = keys.has('shift');
-  const target = frozen || len < 0.1 ? 0 : (run ? 6.5 : 3.4) * Math.min(1, len);
-  player.speed += (target - player.speed) * Math.min(1, dt * 8);
-  if (len > 0.1 && !frozen) {
-    dx /= len;
-    dz /= len;
-    const want = Math.atan2(-dz, dx);
-    player.heading +=
-      Math.atan2(Math.sin(want - player.heading), Math.cos(want - player.heading)) *
-      Math.min(1, dt * 9);
-  }
-  // Face the machine while buying.
-  const station = payment.station ?? payment.delivering?.station;
-  if (frozen && station) {
-    const want = Math.atan2(-(station.z - player.z), station.x - player.x);
-    player.heading +=
-      Math.atan2(Math.sin(want - player.heading), Math.cos(want - player.heading)) *
-      Math.min(1, dt * 6);
-  }
-  const mx = Math.cos(player.heading) * player.speed * dt,
-    mz = -Math.sin(player.heading) * player.speed * dt;
-  const p = resolveCircle(collision, player.x + mx, player.z + mz, 1);
-  const { minX, minZ, maxX, maxZ } = data.bounds;
-  player.x = THREE.MathUtils.clamp(p.x, minX + 15, maxX - 15);
-  player.z = THREE.MathUtils.clamp(p.z, minZ + 15, maxZ - 15);
-  player.gait += dt * player.speed * 1.9;
-}
-
-// Collision log for ?debug runs; trimmed so it never grows without bound.
-const debugHits = [];
-
-function updateDrive(dt) {
-  if (debugHits.length > 200) debugHits.splice(0, 100);
-  const throttle = THREE.MathUtils.clamp(
-    axis(['w', 'arrowup'], ['s', 'arrowdown']) + stick.y,
-    -1,
-    1,
-  );
-  const steer = THREE.MathUtils.clamp(
-    axis(['d', 'arrowright'], ['a', 'arrowleft']) + stick.x,
-    -1,
-    1,
-  );
-  // At top speed the car covers almost 2 m per step, so move it in short slices that can't
-  // tunnel through a thin wall or fence.
-  const slices = Math.max(1, Math.ceil((Math.abs(car.speed) * dt) / 0.6));
-  for (let i = 0; i < slices; i++) {
-    stepCar(car, { throttle, steer, handbrake: keys.has(' ') }, dt / slices);
-    // Two collision circles along the body keep the nose and tail out of buildings.
-    for (const along of [1.3, -1.3]) {
-      const cx = car.x + Math.cos(car.heading) * along,
-        cz = car.z - Math.sin(car.heading) * along;
-      const p = resolveCircle(collision, cx, cz, 1.05);
-      if (p.hit) {
-        debugHits.push({
-          kind: 'building',
-          x: Math.round(cx),
-          z: Math.round(cz),
-          v: +car.speed.toFixed(1),
-        });
-        car.x += p.x - cx;
-        car.z += p.z - cz;
-        if (Math.abs(car.speed) > 4) tone(90, 0.2, 0.08, 'square');
-        car.speed *= 0.35;
-      }
-    }
-  }
-  // Bumping a traffic car slows you down but never throws you backwards. If you stay pressed
-  // against one, it pulls away (respawns out of sight) so you can never get stuck behind it.
-  for (const npc of traffic.cars) {
-    const dx = car.x - npc.x,
-      dz = car.z - npc.z,
-      d = Math.hypot(dx, dz);
-    if (d >= 3.4 || d === 0) {
-      if (npc.contact) npc.contact = 0;
-      continue;
-    }
-    debugHits.push({
-      kind: 'traffic',
-      x: Math.round(car.x),
-      z: Math.round(car.z),
-      v: +car.speed.toFixed(1),
-      npcDir: npc.dir,
-    });
-    car.x = npc.x + (dx / d) * 3.4;
-    car.z = npc.z + (dz / d) * 3.4;
-    const towards =
-      (Math.cos(car.heading) * -dx - Math.sin(car.heading) * -dz) * Math.sign(car.speed) > 0;
-    if (towards && Math.abs(car.speed) > 4) tone(110, 0.25, 0.08, 'square');
-    if (towards) car.speed *= 0.4;
-    npc.contact = (npc.contact ?? 0) + dt;
-    if (npc.contact > 0.8) {
-      npc.contact = 0;
-      traffic.remove(npc);
-    }
-  }
-  const { minX, minZ, maxX, maxZ } = data.bounds;
-  car.x = THREE.MathUtils.clamp(car.x, minX + 15, maxX - 15);
-  car.z = THREE.MathUtils.clamp(car.z, minZ + 15, maxZ - 15);
-  Object.assign(player, { x: car.x, z: car.z, heading: car.heading });
-  // Chase camera swings back behind the car when the mouse is idle.
-  if (elapsed - cam.lastMouse > 1.4 && Math.abs(car.speed) > 1) {
-    const want =
-      Math.atan2(-Math.cos(car.heading), Math.sin(car.heading)) + (car.speed < 0 ? Math.PI : 0);
-    cam.yaw +=
-      Math.atan2(Math.sin(want - cam.yaw), Math.cos(want - cam.yaw)) * Math.min(1, dt * 2.2);
-    cam.pitch += (0.28 - cam.pitch) * Math.min(1, dt * 1.5);
-  }
-  if (engine && soundOn) {
-    engine.o.frequency.setTargetAtTime(
-      45 + Math.abs(car.speed) * 5 + Math.max(0, throttle) * 15,
-      audio.currentTime,
-      0.1,
-    );
-    engine.g.gain.setTargetAtTime(0.025, audio.currentTime, 0.2);
-  }
-}
-
-function updateCamera(dt) {
-  const station = payment.station;
-  if (station && payment.phase !== 'idle') {
-    // Close-up of the card reader during payment.
-    const reader = station.model.readerPoint.clone();
-    station.model.group.localToWorld(reader);
-    const side = rotateLocal(1.2, 1.9, station.rot);
-    camTarget.set(reader.x + side.x, reader.y + 0.4, reader.z + side.z);
-    lookAt.lerp(reader, 1 - Math.exp(-dt * 6));
-  } else {
-    const driving = mode === 'drive',
-      height = driving ? 1.6 : 1.75;
-    const focus = new THREE.Vector3(player.x, height, player.z);
-    // Over-the-shoulder offset to the right, like a third-person shooter.
-    const shoulder = driving ? 0 : 0.75;
-    focus.x += Math.cos(cam.yaw) * shoulder;
-    focus.z += -Math.sin(cam.yaw) * shoulder;
-    let distance = cam.distance;
-    const ox = Math.sin(cam.yaw) * Math.cos(cam.pitch),
-      oz = Math.cos(cam.yaw) * Math.cos(cam.pitch);
-    const free = clearFraction(
-      collision,
-      focus.x,
-      focus.z,
-      focus.x + ox * distance,
-      focus.z + oz * distance,
-      0.8,
-    );
-    if (cam.pitch < 0.9) distance = Math.max(1.6, distance * free - 0.7);
-    camTarget.set(
-      focus.x + ox * distance,
-      Math.max(0.6, focus.y + Math.sin(cam.pitch) * distance),
-      focus.z + oz * distance,
-    );
-    lookAt.lerp(focus, 1 - Math.exp(-dt * 14));
-  }
-  camPos.lerp(camTarget, 1 - Math.exp(-dt * 12));
-  camera.position.copy(camPos);
-  camera.lookAt(lookAt);
-}
-
-function updateHUD(dt) {
-  const pos = mode === 'drive' ? car : player;
-  $('#clock').textContent = formatClock(state.minutes);
-  if (mode === 'drive') $('#speed').textContent = fa(kmh(car));
-  // Where the camera actually looks: the orbit camera, or the phone itself in AR view.
-  const look3 = camera.getWorldDirection(new THREE.Vector3()),
-    flat = Math.hypot(look3.x, look3.z);
-  const forward =
-    flat > 0.05
-      ? { x: look3.x / flat, z: look3.z / flat }
-      : { x: -Math.sin(cam.yaw), z: -Math.cos(cam.yaw) };
-  const headingDeg = bearing(forward.x, forward.z);
-  const objective = objectiveStation();
-  drawCompass(
-    headingDeg,
-    objective
-      ? [{ bearing: bearing(objective.x - pos.x, objective.z - pos.z), color: '#f2c94c' }]
-      : [],
-  );
-  drawMinimap(minimap, mapAssets, {
-    size: 220,
-    x: pos.x,
-    z: pos.z,
-    heading: mode === 'drive' ? car.heading : player.heading,
-    camForward: forward,
-    radius: mode === 'drive' ? 650 : 200,
-    markers: markers(),
-    route: route?.points,
-  });
-  // Objective marker above the machine, clamped to the screen edge when off-screen.
-  const wp = $('#waypoint');
-  wp.hidden = !objective;
-  if (objective) {
-    const d = Math.hypot(objective.x - pos.x, objective.z - pos.z),
-      p = new THREE.Vector3(objective.x, 3.4, objective.z).project(camera);
-    let sx = (p.x * 0.5 + 0.5) * innerWidth,
-      sy = (-p.y * 0.5 + 0.5) * innerHeight;
-    if (p.z > 1) {
-      sx = innerWidth - sx;
-      sy = innerHeight - 60;
-    }
-    $('#waypoint').style.left = `${THREE.MathUtils.clamp(sx, 60, innerWidth - 60)}px`;
-    $('#waypoint').style.top = `${THREE.MathUtils.clamp(sy, 90, innerHeight - 130)}px`;
-    $('#waypoint-name').textContent = objective.def.name;
-    $('#waypoint-distance').textContent = formatDistance(d);
-    wp.hidden = d < 6;
-    for (const s of stations) {
-      const isObjective = s === objective;
-      s.model.beacon.material.color.set(isObjective ? '#f2c94c' : '#3ee0c9');
-      s.model.beacon.material.opacity =
-        (isObjective ? 0.32 : 0.14) * Math.min(1, Math.hypot(s.x - pos.x, s.z - pos.z) / 40);
-    }
-  }
-  streetTimer -= dt;
-  if (streetTimer <= 0) {
-    streetTimer = 0.6;
-    const street = nearestSegment(segments, pos.x, pos.z, 35, (s) => s[5] >= 0);
-    const inFactory = Math.hypot(pos.x - FACTORY.center.x, pos.z - FACTORY.center.z) < 130;
-    $('#street').textContent = inFactory
-      ? `کارخانهٔ ${FACTORY.name}`
-      : street
-        ? `مشهد · ${data.names[street.name]}`
-        : 'حومهٔ مشهد';
-  }
-  updatePrompt();
-}
-
-let hints = { closed: false, car: false };
-
-// People in the factory say their lines once, when the family walks up to them.
-function updateTalks() {
-  if (mode !== 'walk' || real.on || lines.length > 2) return;
-  for (const t of factory.talks) {
-    if (t.done || (t.ready && !t.ready())) continue;
-    const p = t.pos();
-    if (Math.hypot(p.x - player.x, p.z - player.z) > t.radius) continue;
-    t.done = true;
-    for (const text of t.lines) say(t.speaker, text);
-    return;
-  }
-}
-
-// ---------- Robot guide ----------
-// When the family walks up to a machine the robot pops out of it, greets them and explains what to
-// do; when they leave it goes back inside. It is never a walking companion.
-const guideState = { station: null, t: 0, greeted: new Set(), arrived: 0 };
-const guideOut = () => guideState.t >= 1;
-const easeOutBack = (t) => 1 + 2.2 * (t - 1) ** 3 + 1.2 * (t - 1) ** 2;
-
-function greet(station) {
-  const def = station.def,
-    first = !guideState.greeted.has(def.id);
-  guideState.greeted.add(def.id);
-  if (def.id === 'factory' && first) {
-    say(
-      'robot',
-      'سلام! من روبات راهنمای روبات مارکتم؛ تو دستگاه دفتر فنی زندگی می‌کنم!',
-      'excited',
-    );
-    say(
-      'robot',
-      `به ${FACTORY.name} خوش اومدین. بچه‌های همین دفتر نرم‌افزار دستگاه‌ها رو می‌نویسن.`,
-      'happy',
-    );
-    say('robot', 'اول از همین دستگاه یه چیزی بخرین؛ کلید E رو بزنین.', 'wink');
-    say(
-      'robot',
-      'ماشینتون جلوی همین ساختمونه. با F سوار شین و برین بوستان ملت؛ من توی همهٔ دستگاه‌ها منتظرتونم!',
-      'love',
-    );
-    return;
-  }
-  if (!isOpen(def, state.minutes)) {
-    say(
-      'robot',
-      `سلام! متأسفم، این دستگاه الان بسته است. ساعت کاری: ${hoursText(def)}.`,
-      'serious',
-    );
-    return;
-  }
-  if (first) {
-    say('robot', `سلام دوباره! به دستگاه ${def.name} خوش اومدین.`, 'excited');
-    say('robot', `${def.note}. برای خرید E رو بزنین.`, 'happy');
-  } else say('robot', 'باز هم خوش اومدین! برای خرید E رو بزنین.', 'wink');
-}
-
-function updateGuide(dt) {
-  const near =
-    mode === 'walk' ? closestStation(player.x, player.z, Math.max(9, reachRadius())) : null;
-  // The robot only moves to another machine after it has gone back into the previous one.
-  if (near && !guideState.station) guideState.station = near;
-  const s = guideState.station,
-    wasOut = guideOut();
-  if (!s) return;
-  guideState.t = THREE.MathUtils.clamp(guideState.t + (near === s ? dt : -dt) / 1.1, 0, 1);
-  if (guideOut() && !wasOut) {
-    guideState.arrived = elapsed;
-    greet(s);
-    tone(990, 0.15);
-    tone(1320, 0.2);
-  }
-  if (wasOut && near !== s) say('robot', 'خداحافظ! مسیر طلایی رو دنبال کنین.', 'happy');
-  if (!guideState.t) {
-    guideState.station = null;
-    guide.group.visible = false;
-    return;
-  }
-  // From inside the machine front out to its left side (the card reader is on the right).
-  const e = easeOutBack(guideState.t),
-    from = { x: -0.2, y: 0.9, z: 0.2 },
-    to = { x: -1.7, y: 0, z: 1.3 };
-  const local = rotateLocal(from.x + (to.x - from.x) * e, from.z + (to.z - from.z) * e, s.rot);
-  guide.group.visible = true;
-  guide.group.position.set(s.x + local.x, from.y + (to.y - from.y) * e, s.z + local.z);
-  guide.group.scale.setScalar(0.15 + 0.85 * Math.min(1, e));
-  // Face the family (the rig looks along its local +X).
-  guide.group.rotation.y = Math.atan2(
-    -(player.z - guide.group.position.z),
-    player.x - guide.group.position.x,
-  );
-  if (!state.busy && payment.phase === 'idle') s.model.flap.rotation.x = guideState.t < 1 ? -1 : 0;
-  guide.update({
-    dt,
-    time: elapsed,
-    gait: 0,
-    moving: false,
-    talking,
-    wave: elapsed - guideState.arrived < 2.5 || !guideOut(),
-    point: talking && guideOut(),
-  });
-}
-
-function updateHints() {
-  const target = objectiveStation();
-  if (target && !isOpen(target.def, state.minutes) && !hints.closed) {
-    hints.closed = true;
-    say(
-      'robot',
-      `${target.def.name} الان بسته است (${hoursText(target.def)}). از نقشه مقصد دیگری انتخاب کن.`,
-    );
-  }
-  if (route && route.length > 900 && mode === 'walk' && !hints.car) {
-    hints.car = true;
-    say('father', 'راه طولانیه؛ بهتره با ماشین بریم.');
-  }
-}
-
-function frame() {
-  const now = performance.now();
-  requestAnimationFrame(frame);
-  // The first rAF timestamp can predate `last`, so never let time run backwards. Long frames are
-  // simulated in short substeps, so slow devices keep real-time speed without unstable physics.
-  const dt = THREE.MathUtils.clamp((now - last) / 1000, 0, MAX_FRAME);
-  last = now;
-  elapsed += dt;
-  const playing = $('#briefing').hidden;
-  const paused =
-    !playing || $('#shop').open || $('#map-dialog').open || $('#end').open || document.hidden;
-  const steps = Math.max(1, Math.ceil(dt / (1 / 30))),
-    step = dt / steps;
-  if (!playing) {
-    // Briefing: animate Iran, type the orders, slowly orbit the start point behind the overlay.
-    const ic = $('#iran'),
-      dpr = sizeCanvas(ic),
-      c = ic.getContext('2d');
-    c.setTransform(dpr, 0, 0, dpr, 0, 0);
-    drawIran(c, iran, {
-      width: ic.width / dpr,
-      height: ic.height / dpr,
-      t: elapsed,
-      cities: CITIES,
-    });
-    briefChars = Math.min(BRIEF.length, briefChars + dt * 55);
-    $('#brief-text').textContent =
-      BRIEF.slice(0, Math.floor(briefChars)) + (briefChars < BRIEF.length ? '▌' : '');
-  }
-  if (!paused) {
-    for (let i = 0; i < steps; i++) {
-      state.minutes += (step * 10) / 60;
-      if (real.on) updateReal(step);
-      else if (mode === 'drive') updateDrive(step);
-      else updateWalk(step);
-      updatePayment(step);
-      updateDelivery(step);
-      traffic.update(
-        step,
-        [
-          { x: player.x, z: player.z },
-          { x: car.x, z: car.z },
-        ],
-        player,
-      );
-    }
-    updateRoute(dt);
-    updateHints();
-    updateTalks();
-    updateGuide(dt);
-    if (Math.floor(elapsed * 2) !== Math.floor((elapsed - dt) * 2)) checkEnd();
-  } else if (engine && soundOn) engine.g.gain.setTargetAtTime(0, audio.currentTime, 0.1);
-  if (mode === 'walk' && engine && soundOn)
-    engine.g.gain.setTargetAtTime(0, audio.currentTime, 0.2);
-  updateSubtitles(dt);
-
-  family.group.visible = mode === 'walk' && !real.on;
-  family.group.position.set(player.x, 0, player.z);
-  family.group.rotation.y = player.heading;
-  family.update({
-    dt,
-    time: elapsed,
-    gait: player.gait,
-    moving: player.speed > 0.4,
-    shopping: state.busy || payment.phase !== 'idle',
-    delivery: deliveryTimer > 0,
-  });
-  factory.update(elapsed, paused ? 0 : dt, camera.position);
-  carModel.group.position.set(car.x, 0, car.z);
-  carModel.group.rotation.y = car.heading;
-  for (const [i, wheel] of carModel.wheels.entries()) {
-    wheel.rotation.z -= (car.speed * dt) / 0.36;
-    if (i >= 2) wheel.rotation.y = -car.steer;
-  }
-  for (const s of stations) s.model.ring.material.opacity = 0.35 + Math.sin(elapsed * 3) * 0.25;
-  updateReachCircles();
-  if (routeMesh) routeMaterial.opacity = 0.55 + Math.sin(elapsed * 4) * 0.15;
-
-  if (playing && real.on) {
-    // First person: the phone is the camera, at the player's GPS position and eye height.
-    camera.position.set(player.x, 1.6, player.z);
-    if (!arView.update(camera, dt, stableMode ? 5 : 10)) {
-      // No orientation sensor: face the compass or walking direction, or wherever the player drags.
-      if (real.heading != null && elapsed - cam.lastMouse > 2) {
-        const want = Math.atan2(-Math.cos(player.heading), Math.sin(player.heading));
-        cam.yaw +=
-          Math.atan2(Math.sin(want - cam.yaw), Math.cos(want - cam.yaw)) * Math.min(1, dt * 3);
-      }
-      camera.rotation.set(cam.arPitch ?? 0, cam.yaw, 0, 'YXZ');
-    }
-    camPos.copy(camera.position);
-  } else if (playing) {
-    if (camera.fov !== 62) {
-      camera.fov = 62;
-      camera.updateProjectionMatrix();
-    }
-    updateCamera(dt);
-  } else {
-    const a = elapsed * 0.08;
-    camera.position.set(player.x + Math.cos(a) * 30, 18, player.z + Math.sin(a) * 30);
-    camera.lookAt(player.x, 2, player.z);
-    camPos.copy(camera.position);
-  }
-  sun.position.set(player.x + 160, 230, player.z + 110);
-  sun.target.position.set(player.x, 0, player.z);
-  sky.position.copy(camera.position);
-  city.update(camera.position);
-  if (!arMode) imagery.update(camera.position.x, camera.position.z);
-  if (playing) {
-    hudTimer -= dt;
-    updateHUD(dt);
-    if ($('#map-dialog').open && hudTimer <= 0) {
-      hudTimer = 0.5;
-      renderMap();
-    }
-  }
-  renderer.render(scene, camera);
-}
-
-// ?debug exposes live game state in the console for development and automated checks.
-if (new URLSearchParams(location.search).has('debug'))
-  window.game = {
-    get state() {
-      return state;
-    },
-    get player() {
-      return player;
-    },
-    get cam() {
-      return cam;
-    },
-    factory,
-    get car() {
-      return car;
-    },
-    get mode() {
-      return mode;
-    },
-    get payment() {
-      return payment;
-    },
-    get elapsed() {
-      return elapsed;
-    },
-    get route() {
-      return route;
-    },
-    setWaypoint(id) {
-      waypoint = id;
-      route = null;
-      routeTimer = 0;
-    },
-    get arMode() {
-      return arMode;
-    },
-    arView,
-    setArMode,
-    debugHits,
-    nearestRoad: (x, z) => nearestSegment(segments, x, z, 40, (s) => s[4] <= 3),
-    stations,
-    guideState,
-    real,
-    keys,
-    traffic,
-  };
-reset();
-resize();
-setupPwa();
-$('#loading').remove();
-requestAnimationFrame(frame);
diff --git a/src/main.jsx b/src/main.jsx
new file mode 100644
index 0000000..85746c5
--- /dev/null
+++ b/src/main.jsx
@@ -0,0 +1,18 @@
+import React, { Suspense, lazy } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Provider } from 'react-redux';
+import { store } from '@/store/index.js';
+import '@fontsource/vazirmatn/400.css';
+import '@fontsource/vazirmatn/600.css';
+import '@fontsource/vazirmatn/800.css';
+import '@/styles/game.css';
+const GamePage = lazy(() =>
+  import('@/pages/game/GamePage.jsx').then((module) => ({ default: module.GamePage })),
+);
+createRoot(document.getElementById('root')).render(
+  <Provider store={store}>
+    <Suspense fallback={<p role="status">در حال آماده‌سازی بازی…</p>}>
+      <GamePage />
+    </Suspense>
+  </Provider>,
+);
diff --git a/src/pages/game/BriefingPanel.jsx b/src/pages/game/BriefingPanel.jsx
new file mode 100644
index 0000000..7beaa58
--- /dev/null
+++ b/src/pages/game/BriefingPanel.jsx
@@ -0,0 +1,72 @@
+import { GameNode } from '@/components/shared/GameNode.jsx';
+/** @typedef {{nodes:object,actions:object}} BriefingPanelProps */
+/** Presents the BriefingPanel view using plain models and semantic native elements.
+ * @param {BriefingPanelProps} props - Interface snapshots and callbacks.
+ * @returns {import('react').ReactElement} Game panel.
+ */
+export function BriefingPanel({ nodes, actions }) {
+  return (
+    <>
+      <GameNode as="section" id="briefing" model={nodes['briefing']}>
+        <div className="brief-map">
+          <GameNode as="canvas" id="iran" model={nodes['iran']} />
+        </div>
+        <div className="brief-panel">
+          <img
+            className="brief-robot"
+            src="./robot/front.webp"
+            alt="روبات راهنمای روبات مارکت"
+            width="136"
+            height="223"
+          />
+          <small className="tag">{'عملیات ۰۱ · خراسان رضوی'}</small>
+          <h1>{'عملیات مشهد'}</h1>
+          <p className="sub">{'روبات مارکت · شکار دستگاه‌های وندینگ'}</p>
+          <GameNode
+            as="pre"
+            id="brief-text"
+            aria-live="polite"
+            model={nodes['brief-text']}
+          ></GameNode>
+          <GameNode
+            as="button"
+            id="start-mission"
+            type="button"
+            model={nodes['start-mission']}
+            onAction={() => actions.emit('start-mission')}
+          >
+            {'شروع عملیات'}
+          </GameNode>
+          <div className="brief-actions">
+            <GameNode
+              as="button"
+              id="real-mode"
+              type="button"
+              className="ghost"
+              model={nodes['real-mode']}
+              onAction={() => actions.emit('real-mode')}
+            >
+              {'📍 بازی در دنیای واقعی (GPS)'}
+            </GameNode>
+            <GameNode
+              as="button"
+              id="install"
+              type="button"
+              className="ghost"
+              hidden
+              model={nodes['install']}
+              onAction={() => actions.emit('install')}
+            >
+              {'⬇ نصب بازی روی گوشی'}
+            </GameNode>
+          </div>
+          <p className="keys">
+            {
+              'حرکت: W A S D · دویدن: Shift · دوربین: ماوس · سوار و پیاده شدن: F · خرید: E · نقشه: M'
+            }
+          </p>
+        </div>
+      </GameNode>
+    </>
+  );
+}
diff --git a/src/pages/game/EndDialog.jsx b/src/pages/game/EndDialog.jsx
new file mode 100644
index 0000000..4c0465a
--- /dev/null
+++ b/src/pages/game/EndDialog.jsx
@@ -0,0 +1,48 @@
+import { GameNode } from '@/components/shared/GameNode.jsx';
+import { ViewLists } from './ViewLists.jsx';
+/** @typedef {{nodes:object,actions:object}} EndDialogProps */
+/** Presents the EndDialog view using plain models and semantic native elements.
+ * @param {EndDialogProps} props - Interface snapshots and callbacks.
+ * @returns {import('react').ReactElement} Game panel.
+ */
+export function EndDialog({ nodes, actions }) {
+  return (
+    <>
+      <GameNode as="dialog" id="end" model={nodes['end']} onClose={() => actions.close('end')}>
+        <GameNode as="small" id="end-tag" model={nodes['end-tag']}>
+          {'پایان عملیات'}
+        </GameNode>
+        <GameNode as="h2" id="end-title" model={nodes['end-title']}></GameNode>
+        <GameNode as="p" id="end-text" model={nodes['end-text']}></GameNode>
+        <GameNode as="ul" id="end-stats" model={nodes['end-stats']}>
+          <ViewLists
+            id="end-stats"
+            model={nodes['end-stats']}
+            onAction={(name, value) => actions.emit(name, value)}
+          />
+        </GameNode>
+        <div className="actions">
+          <GameNode
+            as="button"
+            id="again"
+            type="button"
+            model={nodes['again']}
+            onAction={() => actions.emit('again')}
+          >
+            {'عملیات دوباره'}
+          </GameNode>
+          <GameNode
+            as="button"
+            id="continue"
+            type="button"
+            className="ghost"
+            model={nodes['continue']}
+            onAction={() => actions.emit('continue')}
+          >
+            {'ادامهٔ گشت در شهر'}
+          </GameNode>
+        </div>
+      </GameNode>
+    </>
+  );
+}
diff --git a/src/pages/game/GameDialogs.jsx b/src/pages/game/GameDialogs.jsx
new file mode 100644
index 0000000..1a52034
--- /dev/null
+++ b/src/pages/game/GameDialogs.jsx
@@ -0,0 +1,21 @@
+import { PaymentPanel } from './PaymentPanel.jsx';
+import { MapDialog } from './MapDialog.jsx';
+import { ShopDialog } from './ShopDialog.jsx';
+import { RealIntroDialog } from './RealIntroDialog.jsx';
+import { InstallDialog } from './InstallDialog.jsx';
+import { UpdateNotice } from './UpdateNotice.jsx';
+import { EndDialog } from './EndDialog.jsx';
+/** Composes independently managed game dialogs. */
+export function GameDialogs(props) {
+  return (
+    <>
+      <PaymentPanel {...props} />
+      <MapDialog {...props} />
+      <ShopDialog {...props} />
+      <RealIntroDialog {...props} />
+      <InstallDialog {...props} />
+      <UpdateNotice {...props} />
+      <EndDialog {...props} />
+    </>
+  );
+}
diff --git a/src/pages/game/GameHud.jsx b/src/pages/game/GameHud.jsx
new file mode 100644
index 0000000..75fb01a
--- /dev/null
+++ b/src/pages/game/GameHud.jsx
@@ -0,0 +1,76 @@
+import { LocationStatus } from './LocationStatus.jsx';
+import { MissionList } from './MissionList.jsx';
+import { StatusBar } from './StatusBar.jsx';
+import { RankProgress } from './RankProgress.jsx';
+import { GameToolbar } from './GameToolbar.jsx';
+import { TouchControls } from './TouchControls.jsx';
+import { GameNode } from '@/components/shared/GameNode.jsx';
+import { ViewLists } from './ViewLists.jsx';
+/** @typedef {{nodes:object,actions:object}} GameHudProps */
+/** Presents the GameHud view using plain models and semantic native elements.
+ * @param {GameHudProps} props - Interface snapshots and callbacks.
+ * @returns {import('react').ReactElement} Game panel.
+ */
+export function GameHud({ nodes, actions }) {
+  return (
+    <>
+      <GameNode as="div" id="hud" hidden model={nodes['hud']}>
+        <GameNode as="canvas" id="compass" width="560" height="44" model={nodes['compass']} />
+        <GameNode
+          as="button"
+          id="minimap-button"
+          type="button"
+          aria-label="باز کردن نقشهٔ شهر (M)"
+          model={nodes['minimap-button']}
+          onAction={() => actions.emit('minimap-button')}
+        >
+          <GameNode as="canvas" id="minimap" width="220" height="220" model={nodes['minimap']} />
+          <span className="map-hint">{'نقشه · M'}</span>
+        </GameNode>
+        <LocationStatus nodes={nodes} actions={actions} />
+        <MissionList nodes={nodes} actions={actions} />
+        <GameNode as="div" id="waypoint" hidden model={nodes['waypoint']}>
+          <i></i>
+          <GameNode as="b" id="waypoint-name" model={nodes['waypoint-name']}></GameNode>
+          <GameNode as="span" id="waypoint-distance" model={nodes['waypoint-distance']}></GameNode>
+        </GameNode>
+        <GameNode
+          as="button"
+          id="prompt"
+          hidden
+          type="button"
+          aria-label="تعامل با بازی"
+          model={nodes['prompt']}
+          onAction={() => actions.emit('prompt')}
+        ></GameNode>
+        <GameNode as="div" id="subtitle" hidden model={nodes['subtitle']}>
+          <GameNode as="img" id="subtitle-face" alt="" hidden model={nodes['subtitle-face']} />
+          <GameNode as="b" id="subtitle-speaker" model={nodes['subtitle-speaker']}></GameNode>
+          <GameNode as="span" id="subtitle-text" model={nodes['subtitle-text']}></GameNode>
+        </GameNode>
+        <GameNode as="div" id="awards" aria-live="polite" model={nodes['awards']}>
+          <ViewLists
+            id="awards"
+            model={nodes['awards']}
+            onAction={(name, value) => actions.emit(name, value)}
+          />
+        </GameNode>
+        <GameNode as="div" id="banner" hidden model={nodes['banner']}>
+          <ViewLists
+            id="banner"
+            model={nodes['banner']}
+            onAction={(name, value) => actions.emit(name, value)}
+          />
+        </GameNode>
+        <StatusBar nodes={nodes} actions={actions} />
+        <RankProgress nodes={nodes} actions={actions} />
+        <GameToolbar nodes={nodes} actions={actions} />
+        <TouchControls nodes={nodes} actions={actions} />
+        <GameNode as="div" id="crosshair" model={nodes['crosshair']}></GameNode>
+        <GameNode as="small" id="attribution" model={nodes['attribution']}>
+          {'نقشه: © مشارکت‌کنندگان OpenStreetMap'}
+        </GameNode>
+      </GameNode>
+    </>
+  );
+}
diff --git a/src/pages/game/GamePage.jsx b/src/pages/game/GamePage.jsx
new file mode 100644
index 0000000..38a9c5b
--- /dev/null
+++ b/src/pages/game/GamePage.jsx
@@ -0,0 +1,56 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { useStore } from 'react-redux';
+import { useAppSelector } from '@/store/hooks.js';
+import { selectNodes } from '@/store/slices/interfaceSlice.js';
+import { createInterfaceBridge } from '@/game/interfaceBridge.js';
+import { useGameEngine } from '@/hooks/useGameEngine.js';
+import { setupPwa } from '@/game/device/pwa.js';
+import { GameSurfaces } from './GameSurfaces.jsx';
+import { BriefingPanel } from './BriefingPanel.jsx';
+import { GameHud } from './GameHud.jsx';
+import { GameDialogs } from './GameDialogs.jsx';
+
+/** Composes React views around the isolated Three.js runtime. */
+export function GamePage() {
+  const root = useRef(null),
+    store = useStore();
+  const bridge = useMemo(() => createInterfaceBridge(store), [store]);
+  const nodes = useAppSelector(selectNodes);
+  const { error } = useGameEngine(root, bridge);
+  useEffect(() => {
+    const dispose = setupPwa(bridge);
+    return () => {
+      dispose();
+      bridge.dispose();
+    };
+  }, [bridge]);
+  useEffect(() => {
+    const classes = nodes.body?.classes ?? {};
+    for (const [name, enabled] of Object.entries(classes))
+      document.body.classList.toggle(name, enabled);
+    return () => {
+      for (const name of Object.keys(classes)) document.body.classList.remove(name);
+    };
+  }, [nodes.body]);
+  const props = { nodes, actions: bridge };
+  return (
+    <main ref={root}>
+      <GameSurfaces {...props} />
+      <BriefingPanel {...props} />
+      <GameHud {...props} />
+      <GameDialogs {...props} />
+      {error && (
+        <div
+          id="engine-error"
+          role="alert"
+          className="fixed inset-0 z-[100] grid place-content-center bg-surface p-8 text-hud"
+        >
+          <p>بازی اجرا نشد: {error}</p>
+          <button type="button" onClick={() => location.reload()}>
+            تلاش دوباره
+          </button>
+        </div>
+      )}
+    </main>
+  );
+}
diff --git a/src/pages/game/GameSurfaces.jsx b/src/pages/game/GameSurfaces.jsx
new file mode 100644
index 0000000..590c988
--- /dev/null
+++ b/src/pages/game/GameSurfaces.jsx
@@ -0,0 +1,25 @@
+import { GameNode } from '@/components/shared/GameNode.jsx';
+/** @typedef {{nodes:object,actions:object}} GameSurfacesProps */
+/** Presents the GameSurfaces view using plain models and semantic native elements.
+ * @param {GameSurfacesProps} props - Interface snapshots and callbacks.
+ * @returns {import('react').ReactElement} Game panel.
+ */
+export function GameSurfaces({ nodes }) {
+  return (
+    <>
+      <GameNode
+        as="video"
+        id="camera"
+        playsInline
+        muted
+        autoPlay
+        hidden
+        model={nodes['camera']}
+      ></GameNode>
+      <GameNode as="canvas" id="world" model={nodes['world']} />
+      <GameNode as="div" id="loading" model={nodes['loading']}>
+        {'در حال ساختن شهر مشهد…'}
+      </GameNode>
+    </>
+  );
+}
diff --git a/src/pages/game/GameToolbar.jsx b/src/pages/game/GameToolbar.jsx
new file mode 100644
index 0000000..717682d
--- /dev/null
+++ b/src/pages/game/GameToolbar.jsx
@@ -0,0 +1,68 @@
+import { GameNode } from '@/components/shared/GameNode.jsx';
+import { ViewLists } from './ViewLists.jsx';
+/** @typedef {{nodes:object,actions:object}} GameToolbarProps */
+/** Presents the GameToolbar using the current interface snapshot. */
+export function GameToolbar({ nodes, actions }) {
+  return (
+    <GameNode as="div" id="toolbar" model={nodes['toolbar']}>
+      <GameNode
+        as="button"
+        id="gps-toggle"
+        type="button"
+        model={nodes['gps-toggle']}
+        onAction={() => actions.emit('gps-toggle')}
+      >
+        {'📍 دنیای واقعی'}
+      </GameNode>
+      <GameNode
+        as="button"
+        id="ar-toggle"
+        type="button"
+        hidden
+        model={nodes['ar-toggle']}
+        onAction={() => actions.emit('ar-toggle')}
+      >
+        {'📷 دوربین'}
+      </GameNode>
+      <GameNode
+        as="button"
+        id="stable-toggle"
+        type="button"
+        className="on"
+        hidden
+        model={nodes['stable-toggle']}
+        onAction={() => actions.emit('stable-toggle')}
+      >
+        {'🎯 پایدار: روشن'}
+      </GameNode>
+      <GameNode
+        as="button"
+        id="sound"
+        type="button"
+        aria-pressed="false"
+        model={nodes['sound']}
+        onAction={() => actions.emit('sound')}
+      >
+        {'صدا: خاموش'}
+      </GameNode>
+      <GameNode
+        as="button"
+        id="quality"
+        type="button"
+        model={nodes['quality']}
+        onAction={() => actions.emit('quality')}
+      >
+        {'گرافیک'}
+      </GameNode>
+      <GameNode
+        as="button"
+        id="restart"
+        type="button"
+        model={nodes['restart']}
+        onAction={() => actions.emit('restart')}
+      >
+        {'شروع دوباره'}
+      </GameNode>
+    </GameNode>
+  );
+}
diff --git a/src/pages/game/InstallDialog.jsx b/src/pages/game/InstallDialog.jsx
new file mode 100644
index 0000000..de17c37
--- /dev/null
+++ b/src/pages/game/InstallDialog.jsx
@@ -0,0 +1,44 @@
+import { GameNode } from '@/components/shared/GameNode.jsx';
+/** @typedef {{nodes:object,actions:object}} InstallDialogProps */
+/** Presents the InstallDialog view using plain models and semantic native elements.
+ * @param {InstallDialogProps} props - Interface snapshots and callbacks.
+ * @returns {import('react').ReactElement} Game panel.
+ */
+export function InstallDialog({ nodes, actions }) {
+  return (
+    <>
+      <GameNode
+        as="dialog"
+        id="ios-install"
+        model={nodes['ios-install']}
+        onClose={() => actions.close('ios-install')}
+      >
+        <h2>{'نصب روی آیفون'}</h2>
+        <ol>
+          <li>
+            {'در Safari دکمهٔ '}
+            <b>{'Share'}</b>
+            {' (مربع با فلش رو به بالا) را بزنید.'}
+          </li>
+          <li>
+            {'گزینهٔ '}
+            <b>{'Add to Home Screen'}</b>
+            {' را انتخاب کنید.'}
+          </li>
+          <li>
+            {'روبات مارکت مثل یک اپ روی صفحهٔ اصلی گوشی شما قرار می‌گیرد و آفلاین هم اجرا می‌شود.'}
+          </li>
+        </ol>
+        <GameNode
+          as="button"
+          type="button"
+          id="ios-close"
+          model={nodes['ios-close']}
+          onAction={() => actions.emit('ios-close')}
+        >
+          {'متوجه شدم'}
+        </GameNode>
+      </GameNode>
+    </>
+  );
+}
diff --git a/src/pages/game/LocationStatus.jsx b/src/pages/game/LocationStatus.jsx
new file mode 100644
index 0000000..c9cef55
--- /dev/null
+++ b/src/pages/game/LocationStatus.jsx
@@ -0,0 +1,17 @@
+import { GameNode } from '@/components/shared/GameNode.jsx';
+import { ViewLists } from './ViewLists.jsx';
+/** @typedef {{nodes:object,actions:object}} LocationStatusProps */
+/** Presents the LocationStatus using the current interface snapshot. */
+export function LocationStatus({ nodes }) {
+  return (
+    <GameNode as="div" id="location" model={nodes['location']}>
+      <GameNode as="span" id="street" model={nodes['street']}>
+        {'مشهد'}
+      </GameNode>
+      <GameNode as="small" id="mode-label" model={nodes['mode-label']}>
+        {'پیاده'}
+      </GameNode>
+      <GameNode as="small" id="gps-status" hidden model={nodes['gps-status']}></GameNode>
+    </GameNode>
+  );
+}
diff --git a/src/pages/game/MachineDetails.jsx b/src/pages/game/MachineDetails.jsx
new file mode 100644
index 0000000..6986555
--- /dev/null
+++ b/src/pages/game/MachineDetails.jsx
@@ -0,0 +1,23 @@
+import { GameNode } from '@/components/shared/GameNode.jsx';
+import { ViewLists } from './ViewLists.jsx';
+/** @typedef {{nodes:object,actions:object}} MachineDetailsProps */
+/** Presents the MachineDetails using the current interface snapshot. */
+export function MachineDetails({ nodes, actions }) {
+  return (
+    <GameNode as="div" id="machine-detail" hidden model={nodes['machine-detail']}>
+      <GameNode as="h4" id="detail-name" model={nodes['detail-name']}></GameNode>
+      <GameNode as="p" id="detail-address" model={nodes['detail-address']}></GameNode>
+      <GameNode as="p" id="detail-meta" model={nodes['detail-meta']}></GameNode>
+      <GameNode as="p" id="detail-products" model={nodes['detail-products']}></GameNode>
+      <GameNode
+        as="button"
+        id="route-button"
+        type="button"
+        model={nodes['route-button']}
+        onAction={() => actions.emit('route-button')}
+      >
+        {'مسیریابی تا اینجا'}
+      </GameNode>
+    </GameNode>
+  );
+}
diff --git a/src/pages/game/MachineList.jsx b/src/pages/game/MachineList.jsx
new file mode 100644
index 0000000..bed5a0d
--- /dev/null
+++ b/src/pages/game/MachineList.jsx
@@ -0,0 +1,15 @@
+import { GameNode } from '@/components/shared/GameNode.jsx';
+import { ViewLists } from './ViewLists.jsx';
+/** @typedef {{nodes:object,actions:object}} MachineListProps */
+/** Presents the MachineList using the current interface snapshot. */
+export function MachineList({ nodes, actions }) {
+  return (
+    <GameNode as="ul" id="machine-list" model={nodes['machine-list']}>
+      <ViewLists
+        id="machine-list"
+        model={nodes['machine-list']}
+        onAction={(name, value) => actions.emit(name, value)}
+      />
+    </GameNode>
+  );
+}
diff --git a/src/pages/game/MapDialog.jsx b/src/pages/game/MapDialog.jsx
new file mode 100644
index 0000000..56a3f19
--- /dev/null
+++ b/src/pages/game/MapDialog.jsx
@@ -0,0 +1,75 @@
+import { MachineDetails } from './MachineDetails.jsx';
+import { MachineList } from './MachineList.jsx';
+import { GameNode } from '@/components/shared/GameNode.jsx';
+import { ViewLists } from './ViewLists.jsx';
+/** @typedef {{nodes:object,actions:object}} MapDialogProps */
+/** Presents the MapDialog view using plain models and semantic native elements.
+ * @param {MapDialogProps} props - Interface snapshots and callbacks.
+ * @returns {import('react').ReactElement} Game panel.
+ */
+export function MapDialog({ nodes, actions }) {
+  return (
+    <>
+      <GameNode
+        as="dialog"
+        id="map-dialog"
+        model={nodes['map-dialog']}
+        onClose={() => actions.close('map-dialog')}
+      >
+        <header>
+          <div className="tabs" role="tablist">
+            <GameNode
+              as="button"
+              type="button"
+              role="tab"
+              data-tab="city"
+              aria-selected="true"
+              id="tab-city"
+              model={nodes['tab-city']}
+              onAction={() => actions.emit('tab-city')}
+            >
+              {'مشهد'}
+            </GameNode>
+            <GameNode
+              as="button"
+              type="button"
+              role="tab"
+              data-tab="iran"
+              aria-selected="false"
+              id="tab-iran"
+              model={nodes['tab-iran']}
+              onAction={() => actions.emit('tab-iran')}
+            >
+              {'ایران'}
+            </GameNode>
+          </div>
+          <GameNode
+            as="button"
+            type="button"
+            className="close"
+            id="map-close"
+            aria-label="بستن"
+            model={nodes['map-close']}
+            onAction={() => actions.emit('map-close')}
+          >
+            {'✕'}
+          </GameNode>
+        </header>
+        <div className="map-body">
+          <div className="map-view">
+            <GameNode as="canvas" id="fullmap" model={nodes['fullmap']} />
+            <GameNode as="canvas" id="iran-map" hidden model={nodes['iran-map']} />
+            <p className="map-help">
+              {'کشیدن: جابه‌جایی · چرخ ماوس: زوم · کلیک روی دستگاه: انتخاب'}
+            </p>
+          </div>
+          <aside className="map-side">
+            <h3>{'دستگاه‌های روبات مارکت'}</h3>
+            <MachineDetails nodes={nodes} actions={actions} />
+            <MachineList nodes={nodes} actions={actions} />
+          </aside>
+        </div>
+      </GameNode>
+    </>
+  );
+}
diff --git a/src/pages/game/MissionList.jsx b/src/pages/game/MissionList.jsx
new file mode 100644
index 0000000..52a67fa
--- /dev/null
+++ b/src/pages/game/MissionList.jsx
@@ -0,0 +1,18 @@
+import { GameNode } from '@/components/shared/GameNode.jsx';
+import { ViewLists } from './ViewLists.jsx';
+/** @typedef {{nodes:object,actions:object}} MissionListProps */
+/** Presents the MissionList using the current interface snapshot. */
+export function MissionList({ nodes, actions }) {
+  return (
+    <GameNode as="aside" id="objectives" model={nodes['objectives']}>
+      <h2>{'مأموریت‌ها'}</h2>
+      <GameNode as="ol" id="mission-list" model={nodes['mission-list']}>
+        <ViewLists
+          id="mission-list"
+          model={nodes['mission-list']}
+          onAction={(name, value) => actions.emit(name, value)}
+        />
+      </GameNode>
+    </GameNode>
+  );
+}
diff --git a/src/pages/game/PaymentPanel.jsx b/src/pages/game/PaymentPanel.jsx
new file mode 100644
index 0000000..2791f3a
--- /dev/null
+++ b/src/pages/game/PaymentPanel.jsx
@@ -0,0 +1,39 @@
+import { GameNode } from '@/components/shared/GameNode.jsx';
+/** @typedef {{nodes:object,actions:object}} PaymentPanelProps */
+/** Presents the PaymentPanel view using plain models and semantic native elements.
+ * @param {PaymentPanelProps} props - Interface snapshots and callbacks.
+ * @returns {import('react').ReactElement} Game panel.
+ */
+export function PaymentPanel({ nodes, actions }) {
+  return (
+    <>
+      <GameNode as="section" id="payment" hidden model={nodes['payment']}>
+        <small>{'کارت‌خوان روبات مارکت'}</small>
+        <GameNode as="h2" id="payment-title" model={nodes['payment-title']}></GameNode>
+        <GameNode as="p" id="payment-step" model={nodes['payment-step']}></GameNode>
+        <div className="actions">
+          <GameNode
+            as="button"
+            id="swipe"
+            type="button"
+            disabled
+            model={nodes['swipe']}
+            onAction={() => actions.emit('swipe')}
+          >
+            {'کشیدن کارت · C'}
+          </GameNode>
+          <GameNode
+            as="button"
+            id="cancel-payment"
+            type="button"
+            className="ghost"
+            model={nodes['cancel-payment']}
+            onAction={() => actions.emit('cancel-payment')}
+          >
+            {'انصراف'}
+          </GameNode>
+        </div>
+      </GameNode>
+    </>
+  );
+}
diff --git a/src/pages/game/RankProgress.jsx b/src/pages/game/RankProgress.jsx
new file mode 100644
index 0000000..fb46a68
--- /dev/null
+++ b/src/pages/game/RankProgress.jsx
@@ -0,0 +1,19 @@
+import { GameNode } from '@/components/shared/GameNode.jsx';
+import { ViewLists } from './ViewLists.jsx';
+/** @typedef {{nodes:object,actions:object}} RankProgressProps */
+/** Presents the RankProgress using the current interface snapshot. */
+export function RankProgress({ nodes }) {
+  return (
+    <GameNode as="div" id="rank" model={nodes['rank']}>
+      <GameNode as="b" id="rank-name" model={nodes['rank-name']}>
+        {'تازه‌وارد'}
+      </GameNode>
+      <GameNode as="span" id="xp" model={nodes['xp']}>
+        {'۰ XP'}
+      </GameNode>
+      <div className="bar">
+        <GameNode as="i" id="xp-bar" model={nodes['xp-bar']}></GameNode>
+      </div>
+    </GameNode>
+  );
+}
diff --git a/src/pages/game/RealIntroDialog.jsx b/src/pages/game/RealIntroDialog.jsx
new file mode 100644
index 0000000..1391d14
--- /dev/null
+++ b/src/pages/game/RealIntroDialog.jsx
@@ -0,0 +1,53 @@
+import { GameNode } from '@/components/shared/GameNode.jsx';
+/** @typedef {{nodes:object,actions:object}} RealIntroDialogProps */
+/** Presents the RealIntroDialog view using plain models and semantic native elements.
+ * @param {RealIntroDialogProps} props - Interface snapshots and callbacks.
+ * @returns {import('react').ReactElement} Game panel.
+ */
+export function RealIntroDialog({ nodes, actions }) {
+  return (
+    <>
+      <GameNode
+        as="dialog"
+        id="real-intro"
+        model={nodes['real-intro']}
+        onClose={() => actions.close('real-intro')}
+      >
+        <img src="./robot/serious.webp" alt="" width="72" height="68" />
+        <h2>{'بازی در دنیای واقعی'}</h2>
+        <p>
+          {
+            'با روشن کردن این حالت، موقعیت گوشی شما (GPS) روی نقشهٔ بازی نمایش داده می‌شود. وقتی واقعاً به محل یک دستگاه روبات مارکت برسید، می‌توانید خرید کنید و ۲۰۰ امتیاز اضافه بگیرید.'
+          }
+        </p>
+        <ul>
+          <li>{'هنگام راه رفتن به خیابان و ماشین‌ها نگاه کنید، نه به صفحه.'}</li>
+          <li>{'بچه‌ها فقط همراه یک بزرگ‌تر بازی کنند.'}</li>
+          <li>{'هنگام رانندگی از این حالت استفاده نکنید؛ در سرعت بالا خرید غیرفعال می‌شود.'}</li>
+          <li>{'موقعیت شما فقط روی همین گوشی می‌ماند و جایی ارسال نمی‌شود.'}</li>
+        </ul>
+        <div className="actions">
+          <GameNode
+            as="button"
+            type="button"
+            id="real-go"
+            model={nodes['real-go']}
+            onAction={() => actions.emit('real-go')}
+          >
+            {'قبول دارم، شروع کن'}
+          </GameNode>
+          <GameNode
+            as="button"
+            type="button"
+            id="real-cancel"
+            className="ghost"
+            model={nodes['real-cancel']}
+            onAction={() => actions.emit('real-cancel')}
+          >
+            {'انصراف'}
+          </GameNode>
+        </div>
+      </GameNode>
+    </>
+  );
+}
diff --git a/src/pages/game/ShopDialog.jsx b/src/pages/game/ShopDialog.jsx
new file mode 100644
index 0000000..6a08680
--- /dev/null
+++ b/src/pages/game/ShopDialog.jsx
@@ -0,0 +1,44 @@
+import { GameNode } from '@/components/shared/GameNode.jsx';
+import { ViewLists } from './ViewLists.jsx';
+/** @typedef {{nodes:object,actions:object}} ShopDialogProps */
+/** Presents the ShopDialog view using plain models and semantic native elements.
+ * @param {ShopDialogProps} props - Interface snapshots and callbacks.
+ * @returns {import('react').ReactElement} Game panel.
+ */
+export function ShopDialog({ nodes, actions }) {
+  return (
+    <>
+      <GameNode as="dialog" id="shop" model={nodes['shop']} onClose={() => actions.close('shop')}>
+        <header>
+          <div>
+            <GameNode as="small" id="shop-category" model={nodes['shop-category']}></GameNode>
+            <GameNode as="h2" id="shop-name" model={nodes['shop-name']}></GameNode>
+            <GameNode as="p" id="shop-address" model={nodes['shop-address']}></GameNode>
+          </div>
+          <GameNode
+            as="button"
+            type="button"
+            className="close"
+            id="shop-close"
+            aria-label="بستن"
+            model={nodes['shop-close']}
+            onAction={() => actions.emit('shop-close')}
+          >
+            {'✕'}
+          </GameNode>
+        </header>
+        <GameNode as="p" id="shop-note" model={nodes['shop-note']}></GameNode>
+        <GameNode as="div" id="products" model={nodes['products']}>
+          <ViewLists
+            id="products"
+            model={nodes['products']}
+            onAction={(name, value) => actions.emit(name, value)}
+          />
+        </GameNode>
+        <p className="rate">
+          {'۱۰ هتومان = ۱۰۰٬۰۰۰ ریال · مبالغ نمایشی‌اند و پرداخت واقعی انجام نمی‌شود.'}
+        </p>
+      </GameNode>
+    </>
+  );
+}
diff --git a/src/pages/game/ShopDialog.test.jsx b/src/pages/game/ShopDialog.test.jsx
new file mode 100644
index 0000000..c65168c
--- /dev/null
+++ b/src/pages/game/ShopDialog.test.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { ViewLists } from './ViewLists.jsx';
+import { PaymentPanel } from './PaymentPanel.jsx';
+afterEach(cleanup);
+describe('React purchase interface', () => {
+  it('selects an affordable product and blocks unaffordable products', () => {
+    const onAction = vi.fn();
+    render(
+      <ViewLists
+        id="products"
+        onAction={onAction}
+        model={{
+          items: [
+            { id: 'water', name: 'آب معدنی', type: 'drink', cost: 15, price: 15 },
+            { id: 'nuts', name: 'آجیل', type: 'snack', cost: 65, price: 65, blocked: 'funds' },
+          ],
+        }}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: /آب معدنی/ }));
+    expect(onAction).toHaveBeenCalledWith('select-product', 'water');
+    expect(screen.getByRole('button', { name: /آجیل/ })).toBeDisabled();
+  });
+  it('uses the payment ready state for the explicit swipe action', () => {
+    const actions = { emit: vi.fn() },
+      nodes = {
+        payment: { hidden: false },
+        swipe: { disabled: false },
+        'payment-title': { text: 'آب معدنی' },
+      };
+    render(<PaymentPanel nodes={nodes} actions={actions} />);
+    fireEvent.click(screen.getByRole('button', { name: /کشیدن کارت/ }));
+    expect(actions.emit).toHaveBeenCalledWith('swipe');
+    fireEvent.click(screen.getByRole('button', { name: 'انصراف' }));
+    expect(actions.emit).toHaveBeenCalledWith('cancel-payment');
+  });
+});
diff --git a/src/pages/game/StatusBar.jsx b/src/pages/game/StatusBar.jsx
new file mode 100644
index 0000000..34dd912
--- /dev/null
+++ b/src/pages/game/StatusBar.jsx
@@ -0,0 +1,30 @@
+import { GameNode } from '@/components/shared/GameNode.jsx';
+import { ViewLists } from './ViewLists.jsx';
+/** @typedef {{nodes:object,actions:object}} StatusBarProps */
+/** Presents the StatusBar using the current interface snapshot. */
+export function StatusBar({ nodes }) {
+  return (
+    <GameNode as="div" id="status" model={nodes['status']}>
+      <div className="stat">
+        <small>{'بودجه'}</small>
+        <GameNode as="strong" id="balance" model={nodes['balance']}>
+          {'۵۰۰'}
+        </GameNode>
+        <span>{'هتومان'}</span>
+      </div>
+      <div className="stat">
+        <small>{'ساعت'}</small>
+        <GameNode as="strong" id="clock" model={nodes['clock']}>
+          {'۰۸:۳۰'}
+        </GameNode>
+      </div>
+      <GameNode as="div" className="stat" id="speed-stat" hidden model={nodes['speed-stat']}>
+        <small>{'سرعت'}</small>
+        <GameNode as="strong" id="speed" model={nodes['speed']}>
+          {'۰'}
+        </GameNode>
+        <span>{'km/h'}</span>
+      </GameNode>
+    </GameNode>
+  );
+}
diff --git a/src/pages/game/TouchControls.jsx b/src/pages/game/TouchControls.jsx
new file mode 100644
index 0000000..8e7c5d9
--- /dev/null
+++ b/src/pages/game/TouchControls.jsx
@@ -0,0 +1,45 @@
+import { GameNode } from '@/components/shared/GameNode.jsx';
+import { ViewLists } from './ViewLists.jsx';
+/** @typedef {{nodes:object,actions:object}} TouchControlsProps */
+/** Presents the TouchControls using the current interface snapshot. */
+export function TouchControls({ nodes, actions }) {
+  return (
+    <GameNode as="div" id="touch" hidden model={nodes['touch']}>
+      <GameNode as="div" id="stick" model={nodes['stick']}>
+        <i></i>
+      </GameNode>
+      <div className="touch-buttons">
+        <GameNode
+          as="button"
+          type="button"
+          data-key="f"
+          id="touch-f"
+          model={nodes['touch-f']}
+          onAction={() => actions.emit('touch-f')}
+        >
+          {'F'}
+        </GameNode>
+        <GameNode
+          as="button"
+          type="button"
+          data-key="e"
+          id="touch-e"
+          model={nodes['touch-e']}
+          onAction={() => actions.emit('touch-e')}
+        >
+          {'E'}
+        </GameNode>
+        <GameNode
+          as="button"
+          type="button"
+          data-key="shift"
+          id="touch-shift"
+          model={nodes['touch-shift']}
+          onAction={() => actions.emit('touch-shift')}
+        >
+          {'دویدن'}
+        </GameNode>
+      </div>
+    </GameNode>
+  );
+}
diff --git a/src/pages/game/UpdateNotice.jsx b/src/pages/game/UpdateNotice.jsx
new file mode 100644
index 0000000..28c514d
--- /dev/null
+++ b/src/pages/game/UpdateNotice.jsx
@@ -0,0 +1,24 @@
+import { GameNode } from '@/components/shared/GameNode.jsx';
+/** @typedef {{nodes:object,actions:object}} UpdateNoticeProps */
+/** Presents the UpdateNotice view using plain models and semantic native elements.
+ * @param {UpdateNoticeProps} props - Interface snapshots and callbacks.
+ * @returns {import('react').ReactElement} Game panel.
+ */
+export function UpdateNotice({ nodes, actions }) {
+  return (
+    <>
+      <GameNode as="div" id="update-toast" hidden model={nodes['update-toast']}>
+        {'نسخهٔ جدید بازی آماده است '}
+        <GameNode
+          as="button"
+          type="button"
+          id="update-reload"
+          model={nodes['update-reload']}
+          onAction={() => actions.emit('update-reload')}
+        >
+          {'به‌روزرسانی'}
+        </GameNode>
+      </GameNode>
+    </>
+  );
+}
diff --git a/src/pages/game/ViewLists.jsx b/src/pages/game/ViewLists.jsx
new file mode 100644
index 0000000..cbc782f
--- /dev/null
+++ b/src/pages/game/ViewLists.jsx
@@ -0,0 +1,85 @@
+import { formatHetoman } from '@/game/economy/gameState.js';
+
+/** @typedef {{id:string,model?:object,onAction:function}} ViewListsProps */
+/** Renders structured game lists as JSX; strings are never interpreted as HTML.
+ * @param {ViewListsProps} props - List identifier, snapshot, and command callback.
+ * @returns {import('react').ReactNode} List content.
+ */
+export function ViewLists({ id, model = {}, onAction }) {
+  const items = model.items ?? [];
+  if (id === 'products')
+    return items.map((item) => (
+      <button
+        key={item.id}
+        type="button"
+        disabled={Boolean(item.blocked)}
+        onClick={() => onAction('select-product', item.id)}
+      >
+        <span className="icon">{item.icon}</span>
+        <b>{item.name}</b>
+        <span className="price">{formatHetoman(item.price)}</span>
+        {item.price !== item.cost && <s>{formatHetoman(item.cost)}</s>}
+        <small>
+          {item.type === 'drink' ? 'نوشیدنی' : 'خوراکی'}
+          {item.blocked === 'funds' ? ' · موجودی کافی نیست' : ''}
+        </small>
+      </button>
+    ));
+  if (id === 'mission-list')
+    return items.map((item) => (
+      <li key={item.id} className={item.done ? 'done' : item.active ? 'active' : ''}>
+        {item.title}
+      </li>
+    ));
+  if (id === 'end-stats')
+    return items.map(([label, value]) => (
+      <li key={label}>
+        <span>{label}</span>
+        <b>{value}</b>
+      </li>
+    ));
+  if (id === 'machine-list')
+    return items.map((item) => (
+      <li key={item.id}>
+        <button
+          type="button"
+          className={item.locked ? 'locked' : item.selected ? 'selected' : ''}
+          disabled={item.locked}
+          onClick={() => onAction('select-machine', item.id)}
+        >
+          <span>{item.icon ?? '🔒'}</span>
+          <span>
+            {item.name}
+            {item.visited ? ' ✓' : ''}
+            <span className="meta">
+              {item.locked ? item.note : `${item.category} · ${item.open ? 'باز' : 'بسته'}`}
+            </span>
+          </span>
+          <span className="dist">{item.distance}</span>
+        </button>
+      </li>
+    ));
+  if (id === 'awards')
+    return (
+      items.length > 0 && (
+        <>
+          <div className="total">+{model.total?.toLocaleString('fa-IR')}</div>
+          {items.map((item) => (
+            <div key={item.label} className="line">
+              {item.label}
+              <b>+{item.points.toLocaleString('fa-IR')}</b>
+            </div>
+          ))}
+        </>
+      )
+    );
+  if (id === 'banner')
+    return (
+      <>
+        <small>{model.tag}</small>
+        <strong>{model.title}</strong>
+        <span>{model.sub}</span>
+      </>
+    );
+  return null;
+}
diff --git a/src/pwa.js b/src/pwa.js
deleted file mode 100644
index 014edc2..0000000
--- a/src/pwa.js
+++ /dev/null
@@ -1,56 +0,0 @@
-// Installable app: registers the offline service worker, offers "install" where the browser allows
-// it (Android/desktop Chrome), shows Add-to-Home-Screen steps on iOS, and offers a reload on updates.
-const $ = (s) => document.querySelector(s);
-
-export function setupPwa() {
-  const installButton = $('#install');
-  const standalone =
-    matchMedia('(display-mode: standalone), (display-mode: fullscreen)').matches ||
-    navigator.standalone;
-  const ios =
-    /iphone|ipad|ipod/i.test(navigator.userAgent) ||
-    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
-  let deferred = null;
-
-  if (!standalone && ios) installButton.hidden = false;
-  window.addEventListener('beforeinstallprompt', (event) => {
-    event.preventDefault();
-    deferred = event;
-    installButton.hidden = false;
-  });
-  window.addEventListener('appinstalled', () => (installButton.hidden = true));
-  installButton.onclick = async () => {
-    if (deferred) {
-      deferred.prompt();
-      await deferred.userChoice;
-      deferred = null;
-      installButton.hidden = true;
-    } else if (ios) $('#ios-install').showModal();
-  };
-  $('#ios-close').onclick = () => $('#ios-install').close();
-
-  // Only built pages have sw.js; the dev server serves source files directly.
-  if (!('serviceWorker' in navigator) || import.meta.env.DEV) return;
-  navigator.serviceWorker
-    .register('./sw.js')
-    .then((registration) => {
-      const offer = (worker) => {
-        $('#update-toast').hidden = false;
-        $('#update-reload').onclick = () => worker.postMessage('skip-waiting');
-      };
-      if (registration.waiting && navigator.serviceWorker.controller) offer(registration.waiting);
-      registration.addEventListener('updatefound', () => {
-        const worker = registration.installing;
-        worker?.addEventListener('statechange', () => {
-          if (worker.state === 'installed' && navigator.serviceWorker.controller) offer(worker);
-        });
-      });
-    })
-    .catch(() => {});
-  let reloading = false;
-  navigator.serviceWorker.addEventListener('controllerchange', () => {
-    if (reloading) return;
-    reloading = true;
-    location.reload();
-  });
-}
diff --git a/src/services/apiClient.js b/src/services/apiClient.js
index 73002e7..3bf7275 100644
--- a/src/services/apiClient.js
+++ b/src/services/apiClient.js
@@ -2,7 +2,8 @@ import axios from 'axios';
 
 /** Shared HTTP client; data paths resolve below the deployment directory. */
 export const apiClient = axios.create({
-  baseURL: typeof document === 'undefined' ? 'http://localhost/' : document.baseURI,
+  baseURL:
+    typeof document === 'undefined' ? 'http://localhost/' : new URL('./', document.baseURI).href,
   timeout: 15000,
 });
 apiClient.interceptors.response.use(
diff --git a/src/store/hooks.js b/src/store/hooks.js
new file mode 100644
index 0000000..5731af1
--- /dev/null
+++ b/src/store/hooks.js
@@ -0,0 +1,3 @@
+import { useDispatch, useSelector } from 'react-redux';
+export const useAppDispatch = useDispatch;
+export const useAppSelector = useSelector;
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..86adfe1
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,8 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { interfaceReducer } from './slices/interfaceSlice.js';
+import { gameReducer } from './slices/gameSlice.js';
+/** Creates one Redux store for interface snapshots and shared economic progress. */
+export function createAppStore() {
+  return configureStore({ reducer: { interface: interfaceReducer, game: gameReducer } });
+}
+export const store = createAppStore();
diff --git a/src/store/slices/gameSlice.js b/src/store/slices/gameSlice.js
new file mode 100644
index 0000000..8a0b778
--- /dev/null
+++ b/src/store/slices/gameSlice.js
@@ -0,0 +1,14 @@
+import { createSlice } from '@reduxjs/toolkit';
+const gameSlice = createSlice({
+  name: 'game',
+  initialState: { balance: 500, xp: 0, purchases: [], missionsDone: [], minutes: 510 },
+  reducers: {
+    publishProgress(_state, action) {
+      return action.payload;
+    },
+  },
+});
+export const { publishProgress } = gameSlice.actions;
+export const gameReducer = gameSlice.reducer;
+/** Selects the economic progress shared by the HUD and game panels. */
+export const selectProgress = (state) => state.game;
diff --git a/src/store/slices/interfaceSlice.js b/src/store/slices/interfaceSlice.js
new file mode 100644
index 0000000..53e4135
--- /dev/null
+++ b/src/store/slices/interfaceSlice.js
@@ -0,0 +1,16 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = { nodes: { briefing: { hidden: false }, hud: { hidden: true } } };
+const interfaceSlice = createSlice({
+  name: 'interface',
+  initialState,
+  reducers: {
+    publishInterface(state, action) {
+      state.nodes = action.payload;
+    },
+  },
+});
+export const { publishInterface } = interfaceSlice.actions;
+export const interfaceReducer = interfaceSlice.reducer;
+/** Selects serializable interface snapshots; renderer objects never enter Redux. */
+export const selectNodes = (state) => state.interface.nodes;
diff --git a/src/style.css b/src/style.css
deleted file mode 100644
index 9d73e86..0000000
--- a/src/style.css
+++ /dev/null
@@ -1,1333 +0,0 @@
-:root {
-  --hud: rgba(236, 242, 238, 0.92);
-  --dim: rgba(200, 214, 207, 0.65);
-  --panel: rgba(10, 16, 14, 0.62);
-  --panel-solid: rgba(10, 16, 14, 0.9);
-  --line: rgba(220, 235, 228, 0.2);
-  --gold: #f2c94c;
-  --teal: #3ee0c9;
-  --red: #ff6b5e;
-  --font: 'Vazirmatn', Tahoma, sans-serif;
-  --safe-top: env(safe-area-inset-top, 0px);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  margin: 0;
-  height: 100%;
-  overflow: hidden;
-  background: #0d1412;
-  color: var(--hud);
-  font-family: var(--font);
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-button {
-  font: inherit;
-  cursor: pointer;
-}
-
-#world {
-  position: fixed;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  display: block;
-  touch-action: none;
-}
-
-#loading {
-  position: fixed;
-  inset: 0;
-  display: grid;
-  place-items: center;
-  z-index: 50;
-  background: #0d1412;
-  color: var(--teal);
-  font-size: 18px;
-  letter-spacing: 0.5px;
-}
-
-/* ---------- Briefing ---------- */
-#briefing {
-  position: fixed;
-  inset: 0;
-  z-index: 40;
-  display: grid;
-  grid-template-columns: 1.3fr 1fr;
-  background: radial-gradient(circle at 30% 40%, #16231f 0%, #070b0a 75%);
-}
-
-#briefing[hidden] {
-  display: none;
-}
-
-.brief-map {
-  position: relative;
-}
-
-.brief-map::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background: repeating-linear-gradient(
-    0deg,
-    rgba(255, 255, 255, 0.025) 0 1px,
-    transparent 1px 4px
-  );
-}
-
-#iran {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-.brief-panel {
-  align-self: center;
-  margin: 24px;
-  padding: 28px;
-  max-width: 520px;
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-inline-start: 3px solid var(--gold);
-}
-
-.tag {
-  color: var(--gold);
-  letter-spacing: 1px;
-  font-weight: 600;
-}
-
-.brief-panel h1 {
-  margin: 6px 0 0;
-  font-size: clamp(32px, 5vw, 52px);
-  font-weight: 800;
-}
-
-.sub {
-  margin: 0 0 18px;
-  color: var(--teal);
-}
-
-#brief-text {
-  min-height: 190px;
-  margin: 0 0 20px;
-  white-space: pre-wrap;
-  font-family: var(--font);
-  font-size: 15px;
-  line-height: 1.9;
-  color: var(--hud);
-}
-
-#start-mission {
-  width: 100%;
-  padding: 14px;
-  border: 0;
-  background: var(--gold);
-  color: #1b1406;
-  font-size: 18px;
-  font-weight: 800;
-  letter-spacing: 0.5px;
-}
-
-#start-mission:hover {
-  filter: brightness(1.08);
-}
-
-.keys {
-  color: var(--dim);
-  font-size: 12px;
-  line-height: 1.8;
-  margin-bottom: 0;
-}
-
-/* ---------- HUD ---------- */
-#hud[hidden] {
-  display: none;
-}
-
-#hud > * {
-  position: fixed;
-  z-index: 10;
-}
-
-#compass {
-  top: 14px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: min(560px, 80vw);
-  height: 44px;
-  pointer-events: none;
-}
-
-#minimap-button {
-  top: 18px;
-  left: 18px;
-  width: 220px;
-  height: 220px;
-  padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: transparent;
-}
-
-#minimap {
-  width: 220px;
-  height: 220px;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.35);
-}
-
-.map-hint {
-  position: absolute;
-  bottom: -4px;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 2px 10px;
-  background: var(--panel-solid);
-  color: var(--dim);
-  font-size: 11px;
-  border: 1px solid var(--line);
-}
-
-#location {
-  top: 252px;
-  left: 18px;
-  width: 220px;
-  text-align: center;
-  text-shadow: 0 1px 3px #000;
-}
-
-#street {
-  display: block;
-  font-weight: 600;
-  font-size: 14px;
-}
-
-#mode-label {
-  color: var(--teal);
-}
-
-#objectives {
-  top: 18px;
-  right: 18px;
-  width: min(330px, 40vw);
-  padding: 12px 14px;
-  background: linear-gradient(270deg, var(--panel) 60%, transparent);
-  border-inline-start: 3px solid var(--gold);
-}
-
-#objectives h2 {
-  margin: 0 0 6px;
-  font-size: 13px;
-  color: var(--gold);
-  letter-spacing: 1px;
-}
-
-#mission-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  font-size: 13px;
-  line-height: 1.7;
-}
-
-#mission-list li {
-  color: var(--dim);
-}
-
-#mission-list li.active {
-  color: var(--hud);
-  font-weight: 600;
-}
-
-#mission-list li.active::before {
-  content: '◆ ';
-  color: var(--gold);
-}
-
-#mission-list li.done {
-  text-decoration: line-through;
-  opacity: 0.55;
-}
-
-#mission-list li.done::before {
-  content: '✓ ';
-  color: var(--teal);
-}
-
-#mission-list li.hidden {
-  display: none;
-}
-
-#waypoint {
-  transform: translate(-50%, -100%);
-  display: grid;
-  justify-items: center;
-  gap: 2px;
-  pointer-events: none;
-  text-shadow: 0 1px 3px #000;
-  white-space: nowrap;
-}
-
-#waypoint[hidden] {
-  display: none;
-}
-
-#waypoint i {
-  width: 16px;
-  height: 16px;
-  background: var(--gold);
-  transform: rotate(45deg);
-  box-shadow: 0 0 10px rgba(242, 201, 76, 0.8);
-}
-
-#waypoint b {
-  font-size: 12px;
-}
-
-#waypoint span {
-  font-size: 12px;
-  color: var(--gold);
-}
-
-#crosshair {
-  top: 50%;
-  left: 50%;
-  width: 4px;
-  height: 4px;
-  margin: -2px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.7);
-  pointer-events: none;
-}
-
-#prompt {
-  bottom: 28%;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 8px 18px;
-  background: var(--panel-solid);
-  border: 1px solid var(--line);
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-#prompt kbd {
-  display: inline-block;
-  min-width: 26px;
-  margin-inline-end: 8px;
-  padding: 1px 6px;
-  text-align: center;
-  background: var(--hud);
-  color: #111;
-  border-radius: 3px;
-  font-family: var(--font);
-  font-weight: 800;
-}
-
-#subtitle {
-  bottom: 12%;
-  left: 50%;
-  transform: translateX(-50%);
-  max-width: min(720px, 90vw);
-  padding: 8px 16px;
-  background: rgba(0, 0, 0, 0.55);
-  text-align: center;
-  font-size: 16px;
-  line-height: 1.7;
-}
-
-#subtitle b {
-  margin-inline-end: 8px;
-}
-
-#subtitle {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-#subtitle[hidden] {
-  display: none;
-}
-
-#subtitle-face {
-  width: 52px;
-  height: 52px;
-  object-fit: cover;
-  border-radius: 50%;
-  margin-inline-end: 10px;
-  background: #f7fcfc;
-  border: 2px solid var(--teal);
-}
-
-#subtitle-face[hidden] {
-  display: none;
-}
-
-#subtitle b.robot {
-  color: var(--teal);
-}
-
-#subtitle b.father {
-  color: var(--gold);
-}
-
-#subtitle b.child {
-  color: #ff9f7a;
-}
-
-#subtitle b.staff {
-  color: #9fc8ff;
-}
-
-#awards {
-  top: 36%;
-  left: 50%;
-  transform: translateX(-50%);
-  display: grid;
-  justify-items: center;
-  gap: 2px;
-  pointer-events: none;
-  text-shadow: 0 2px 4px #000;
-}
-
-#awards .total {
-  font-size: 34px;
-  font-weight: 800;
-  color: var(--gold);
-  animation: pop 0.35s ease-out;
-}
-
-#awards .line {
-  font-size: 14px;
-  font-weight: 600;
-  animation: slide 0.4s ease-out backwards;
-}
-
-#awards .line b {
-  color: var(--gold);
-  margin-inline-start: 6px;
-}
-
-@keyframes pop {
-  from {
-    transform: scale(1.6);
-    opacity: 0;
-  }
-}
-
-@keyframes slide {
-  from {
-    transform: translateY(8px);
-    opacity: 0;
-  }
-}
-
-#banner {
-  top: 22%;
-  left: 0;
-  right: 0;
-  padding: 14px;
-  text-align: center;
-  pointer-events: none;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(10, 16, 14, 0.82) 25%,
-    rgba(10, 16, 14, 0.82) 75%,
-    transparent
-  );
-  animation: pop 0.4s ease-out;
-}
-
-#banner small {
-  display: block;
-  color: var(--gold);
-  letter-spacing: 2px;
-  font-weight: 600;
-}
-
-#banner strong {
-  font-size: 22px;
-}
-
-#banner span {
-  display: block;
-  color: var(--teal);
-  font-size: 14px;
-}
-
-#status {
-  bottom: 18px;
-  right: 18px;
-  display: flex;
-  gap: 10px;
-}
-
-.stat {
-  min-width: 96px;
-  padding: 6px 12px;
-  background: var(--panel);
-  border-bottom: 2px solid var(--teal);
-  display: grid;
-  line-height: 1.3;
-}
-
-.stat small {
-  color: var(--dim);
-  font-size: 11px;
-}
-
-.stat strong {
-  font-size: 22px;
-  font-weight: 800;
-}
-
-.stat span {
-  font-size: 11px;
-  color: var(--dim);
-}
-
-.stat[hidden] {
-  display: none;
-}
-
-#rank {
-  bottom: 18px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: min(380px, 50vw);
-  padding: 4px 10px;
-  text-align: center;
-  font-size: 12px;
-  background: var(--panel);
-}
-
-#rank b {
-  color: var(--gold);
-  margin-inline-end: 8px;
-}
-
-#rank span {
-  color: var(--dim);
-}
-
-#rank .bar {
-  height: 4px;
-  margin-top: 4px;
-  background: rgba(255, 255, 255, 0.15);
-}
-
-#rank .bar i {
-  display: block;
-  height: 100%;
-  width: 0;
-  background: var(--gold);
-  transition: width 0.6s;
-}
-
-#toolbar {
-  bottom: 18px;
-  left: 18px;
-  display: flex;
-  gap: 6px;
-}
-
-#toolbar button,
-.ghost {
-  padding: 6px 12px;
-  background: var(--panel);
-  color: var(--hud);
-  border: 1px solid var(--line);
-  font-size: 12px;
-}
-
-#attribution {
-  bottom: 2px;
-  left: 50%;
-  transform: translateX(-50%);
-  font-size: 10px;
-  color: var(--dim);
-}
-
-/* ---------- Payment ---------- */
-#payment {
-  position: fixed;
-  z-index: 20;
-  bottom: 18%;
-  right: 50%;
-  transform: translateX(50%);
-  width: min(380px, 92vw);
-  padding: 16px 18px;
-  background: var(--panel-solid);
-  border: 1px solid var(--line);
-  border-top: 3px solid var(--teal);
-}
-
-#payment[hidden] {
-  display: none;
-}
-
-#payment small {
-  color: var(--teal);
-}
-
-#payment h2 {
-  margin: 4px 0;
-  font-size: 18px;
-}
-
-#payment p {
-  margin: 0 0 12px;
-  color: var(--dim);
-}
-
-.actions {
-  display: flex;
-  gap: 8px;
-}
-
-#swipe,
-#again,
-#route-button {
-  flex: 1;
-  padding: 10px;
-  border: 0;
-  background: var(--teal);
-  color: #04201b;
-  font-weight: 800;
-}
-
-#swipe:disabled {
-  opacity: 0.45;
-  cursor: wait;
-}
-
-/* ---------- Dialogs ---------- */
-dialog {
-  color: var(--hud);
-  background: var(--panel-solid);
-  border: 1px solid var(--line);
-  padding: 0;
-  font-family: var(--font);
-  backdrop-filter: blur(6px);
-}
-
-dialog::backdrop {
-  background: rgba(0, 0, 0, 0.45);
-}
-
-dialog header {
-  display: flex;
-  justify-content: space-between;
-  align-items: start;
-  gap: 12px;
-  padding: 14px 18px;
-  border-bottom: 1px solid var(--line);
-}
-
-.close {
-  width: 34px;
-  height: 34px;
-  background: transparent;
-  color: var(--hud);
-  border: 1px solid var(--line);
-}
-
-#map-dialog {
-  width: min(1180px, 96vw);
-  height: min(760px, 92vh);
-}
-
-#map-dialog[open] {
-  display: flex;
-  flex-direction: column;
-}
-
-.tabs {
-  display: flex;
-  gap: 4px;
-}
-
-.tabs button {
-  padding: 6px 14px;
-  background: transparent;
-  color: var(--dim);
-  border: 1px solid var(--line);
-}
-
-.tabs button[aria-selected='true'] {
-  color: #1b1406;
-  background: var(--gold);
-  border-color: var(--gold);
-  font-weight: 600;
-}
-
-.map-body {
-  flex: 1;
-  display: grid;
-  grid-template-columns: 1fr 320px;
-  min-height: 0;
-}
-
-.map-view {
-  position: relative;
-  min-height: 0;
-}
-
-#fullmap,
-#iran-map {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  cursor: grab;
-  touch-action: none;
-}
-
-#fullmap[hidden],
-#iran-map[hidden] {
-  display: none;
-}
-
-.map-help {
-  position: absolute;
-  bottom: 6px;
-  right: 10px;
-  margin: 0;
-  font-size: 11px;
-  color: var(--dim);
-  pointer-events: none;
-}
-
-.map-side {
-  overflow: auto;
-  padding: 14px;
-  border-inline-start: 1px solid var(--line);
-}
-
-.map-side h3 {
-  margin: 0 0 10px;
-  font-size: 14px;
-  color: var(--gold);
-}
-
-#machine-list {
-  list-style: none;
-  margin: 0 0 12px;
-  padding: 0;
-  display: grid;
-  gap: 6px;
-}
-
-#machine-list button {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 28px 1fr auto;
-  align-items: center;
-  gap: 8px;
-  text-align: right;
-  padding: 8px;
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--hud);
-  border: 1px solid transparent;
-}
-
-#machine-list button.selected {
-  border-color: var(--gold);
-}
-
-#machine-list button.locked {
-  opacity: 0.45;
-  cursor: default;
-}
-
-#machine-list .meta {
-  display: block;
-  color: var(--dim);
-  font-size: 11px;
-}
-
-#machine-list .dist {
-  color: var(--gold);
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-#machine-detail {
-  margin-bottom: 12px;
-  padding: 12px;
-  background: rgba(255, 255, 255, 0.05);
-  border-top: 2px solid var(--gold);
-}
-
-#machine-detail h4 {
-  margin: 0 0 6px;
-}
-
-#machine-detail p {
-  margin: 0 0 8px;
-  font-size: 13px;
-  color: var(--dim);
-  line-height: 1.7;
-}
-
-#route-button {
-  width: 100%;
-}
-
-#shop {
-  width: min(620px, 94vw);
-}
-
-#shop small {
-  color: var(--teal);
-}
-
-#shop h2 {
-  margin: 2px 0;
-}
-
-#shop header p {
-  margin: 0;
-  color: var(--dim);
-  font-size: 13px;
-}
-
-#shop-note {
-  margin: 10px 18px 0;
-  color: var(--gold);
-  font-size: 13px;
-}
-
-#products {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 8px;
-  padding: 14px 18px;
-}
-
-#products button {
-  display: grid;
-  gap: 2px;
-  justify-items: center;
-  padding: 12px 8px;
-  color: var(--hud);
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid var(--line);
-}
-
-#products button:hover:not(:disabled) {
-  border-color: var(--teal);
-  background: rgba(62, 224, 201, 0.1);
-}
-
-#products button:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-#products .icon {
-  font-size: 30px;
-}
-
-#products .price {
-  color: var(--gold);
-  font-weight: 600;
-}
-
-#products s {
-  color: var(--dim);
-  font-size: 11px;
-}
-
-.rate {
-  margin: 0;
-  padding: 0 18px 14px;
-  font-size: 11px;
-  color: var(--dim);
-}
-
-#end {
-  width: min(480px, 92vw);
-  padding: 24px;
-  text-align: center;
-  border-top: 3px solid var(--gold);
-}
-
-#end small {
-  color: var(--gold);
-  letter-spacing: 1px;
-}
-
-#end h2 {
-  margin: 6px 0;
-  font-size: 28px;
-}
-
-#end-stats {
-  list-style: none;
-  padding: 0;
-  margin: 14px 0;
-  display: grid;
-  gap: 4px;
-}
-
-#end-stats li {
-  display: flex;
-  justify-content: space-between;
-  padding: 6px 10px;
-  background: rgba(255, 255, 255, 0.05);
-}
-
-/* ---------- Touch ---------- */
-#touch[hidden] {
-  display: none;
-}
-
-#touch {
-  inset: auto 0 90px 0;
-  display: flex;
-  justify-content: space-between;
-  padding: 0 24px;
-  pointer-events: none;
-}
-
-#stick {
-  width: 130px;
-  height: 130px;
-  border-radius: 50%;
-  border: 2px solid var(--line);
-  background: rgba(0, 0, 0, 0.25);
-  position: relative;
-  pointer-events: auto;
-  touch-action: none;
-  order: 2;
-}
-
-#stick i {
-  position: absolute;
-  left: 40px;
-  top: 40px;
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.5);
-}
-
-.touch-buttons {
-  display: grid;
-  gap: 10px;
-  pointer-events: auto;
-  align-content: end;
-}
-
-.touch-buttons button {
-  width: 64px;
-  height: 64px;
-  border-radius: 50%;
-  background: var(--panel);
-  color: var(--hud);
-  border: 1px solid var(--line);
-  font-weight: 800;
-}
-
-.touch-buttons button.on {
-  background: var(--teal);
-  color: #04201b;
-}
-
-@media (max-width: 760px) {
-  #briefing {
-    grid-template-columns: 1fr;
-    grid-template-rows: 38vh 1fr;
-  }
-
-  .brief-panel {
-    margin: 0 16px 16px;
-    padding: 18px;
-    align-self: start;
-  }
-
-  #brief-text {
-    min-height: 150px;
-    font-size: 13px;
-  }
-
-  #minimap-button,
-  #minimap {
-    width: 130px;
-    height: 130px;
-  }
-
-  #minimap-button {
-    top: 62px;
-    left: 12px;
-  }
-
-  #location {
-    top: 198px;
-    left: 12px;
-    width: 130px;
-  }
-
-  #objectives {
-    top: 62px;
-    right: 12px;
-    width: 52vw;
-    padding: 8px;
-  }
-
-  #mission-list li:not(.active) {
-    display: none;
-  }
-
-  #status {
-    right: 12px;
-    bottom: 12px;
-  }
-
-  .stat {
-    min-width: 70px;
-    padding: 4px 8px;
-  }
-
-  .stat strong {
-    font-size: 16px;
-  }
-
-  #rank {
-    bottom: auto;
-    top: 6px;
-    width: 70vw;
-  }
-
-  #compass {
-    top: 30px;
-  }
-
-  #toolbar {
-    left: 12px;
-    bottom: 12px;
-  }
-
-  #toolbar button {
-    padding: 4px 8px;
-    font-size: 11px;
-  }
-
-  #crosshair {
-    display: none;
-  }
-
-  .map-body {
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 40%;
-  }
-
-  .map-side {
-    border-inline-start: 0;
-    border-top: 1px solid var(--line);
-  }
-}
-
-/* ---------- PWA: install and update ---------- */
-.brief-robot {
-  float: left;
-  width: 110px;
-  height: auto;
-  margin: -8px 0 0 8px;
-  filter: drop-shadow(0 8px 18px rgba(62, 224, 201, 0.25));
-}
-
-.brief-actions {
-  display: flex;
-  gap: 8px;
-  margin-top: 8px;
-}
-
-.brief-actions button {
-  flex: 1;
-  padding: 10px;
-  font-size: 13px;
-}
-
-.brief-actions button[hidden] {
-  display: none;
-}
-
-#ios-install {
-  width: min(420px, 92vw);
-  padding: 22px;
-  border-top: 3px solid var(--teal);
-}
-
-#ios-install h2 {
-  margin: 0 0 8px;
-}
-
-#ios-install ol {
-  line-height: 2;
-  padding-inline-start: 20px;
-}
-
-#ios-install button {
-  width: 100%;
-  padding: 10px;
-  border: 0;
-  background: var(--teal);
-  color: #04201b;
-  font-weight: 800;
-}
-
-#update-toast {
-  position: fixed;
-  z-index: 60;
-  top: calc(12px + var(--safe-top));
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 8px 10px 8px 14px;
-  background: var(--panel-solid);
-  border: 1px solid var(--teal);
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-#update-toast[hidden] {
-  display: none;
-}
-
-#update-toast button {
-  padding: 4px 12px;
-  border: 0;
-  background: var(--teal);
-  color: #04201b;
-  font-weight: 800;
-}
-
-@media (max-width: 760px) {
-  .brief-robot {
-    width: 70px;
-  }
-}
-
-/* ---------- Real-world mode ---------- */
-#gps-status {
-  display: block;
-  margin-top: 2px;
-  color: var(--gold);
-  font-size: 12px;
-}
-
-#gps-status[hidden] {
-  display: none;
-}
-
-#gps-toggle.on {
-  background: var(--teal);
-  color: #04201b;
-  border-color: var(--teal);
-}
-
-#real-intro {
-  width: min(460px, 92vw);
-  padding: 22px;
-  border-top: 3px solid var(--gold);
-}
-
-#real-intro img {
-  float: left;
-  border-radius: 50%;
-  background: #f7fcfc;
-}
-
-#real-intro h2 {
-  margin: 0 0 8px;
-}
-
-#real-intro p,
-#real-intro li {
-  line-height: 1.9;
-  font-size: 14px;
-}
-
-#real-intro ul {
-  padding-inline-start: 18px;
-  color: var(--dim);
-}
-
-#real-go {
-  flex: 1;
-  padding: 10px;
-  border: 0;
-  background: var(--gold);
-  color: #1b1406;
-  font-weight: 800;
-}
-
-/* ---------- Camera AR view ---------- */
-#camera {
-  position: fixed;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  z-index: 0;
-  background: #000;
-}
-
-#camera[hidden] {
-  display: none;
-}
-
-#world {
-  z-index: 1;
-}
-
-body.ar {
-  background: #000;
-}
-
-body.ar #crosshair {
-  display: none;
-}
-
-#ar-toggle[hidden],
-#stable-toggle[hidden] {
-  display: none;
-}
-
-#ar-toggle.on,
-#stable-toggle.on {
-  background: var(--teal);
-  color: #04201b;
-  border-color: var(--teal);
-}
-
-/* ---------- Real-world first person, and notifications in the middle on phones ---------- */
-body.real #crosshair,
-body.real #stick {
-  display: none;
-}
-
-#prompt {
-  cursor: pointer;
-}
-
-@media (max-width: 760px), (max-height: 520px) {
-  #banner {
-    top: 24%;
-    padding: 10px;
-  }
-
-  #banner strong {
-    font-size: 18px;
-  }
-
-  #awards {
-    top: 36%;
-  }
-
-  #subtitle {
-    top: 50%;
-    bottom: auto;
-    transform: translate(-50%, -50%);
-    width: min(92vw, 520px);
-    font-size: 15px;
-    background: rgba(0, 0, 0, 0.7);
-    border-radius: 10px;
-  }
-
-  #prompt {
-    top: 64%;
-    bottom: auto;
-    font-size: 16px;
-    padding: 12px 20px;
-    border-radius: 10px;
-    white-space: normal;
-    text-align: center;
-    max-width: 90vw;
-  }
-
-  #gps-status {
-    position: fixed;
-    top: 76px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: max-content;
-    max-width: 92vw;
-    padding: 4px 12px;
-    background: var(--panel-solid);
-    border: 1px solid var(--line);
-    border-radius: 999px;
-    text-align: center;
-  }
-
-  #payment {
-    bottom: auto;
-    top: 50%;
-    transform: translate(50%, -50%);
-  }
-}
-
-/* Phone layout: one scrollable toolbar row, stats above it, compact rank bar above the compass,
-   and no car or run buttons while the GPS moves the player. */
-body.real .touch-buttons [data-key='f'],
-body.real .touch-buttons [data-key='shift'] {
-  display: none;
-}
-
-@media (max-width: 760px) {
-  #rank {
-    top: 4px;
-    padding: 2px 8px;
-    font-size: 11px;
-  }
-
-  #rank .bar {
-    height: 3px;
-    margin-top: 2px;
-  }
-
-  #compass {
-    top: 36px;
-  }
-
-  /* Between the mission banner and the dialogue, clear of the minimap and mission list. */
-  #gps-status {
-    top: 42%;
-  }
-
-  #toolbar {
-    left: 8px;
-    right: 8px;
-    bottom: 8px;
-    overflow-x: auto;
-    flex-wrap: nowrap;
-    scrollbar-width: none;
-    padding-bottom: env(safe-area-inset-bottom, 0px);
-  }
-
-  #toolbar button {
-    flex: 0 0 auto;
-    white-space: nowrap;
-  }
-
-  #status {
-    bottom: 52px;
-  }
-
-  #touch {
-    bottom: 150px;
-  }
-}
diff --git a/src/styles/game.css b/src/styles/game.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/src/styles/game.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/styles/gameTheme.js b/src/styles/gameTheme.js
new file mode 100644
index 0000000..decc352
--- /dev/null
+++ b/src/styles/gameTheme.js
@@ -0,0 +1,1166 @@
+// Tailwind base layer preserves the established game presentation during the React migration.
+export const gameTheme = {
+  ':root': {
+    '--game-token-1': 'rgba(236, 242, 238, 0.92)',
+    '--game-token-2': 'rgba(200, 214, 207, 0.65)',
+    '--game-token-3': 'rgba(10, 16, 14, 0.62)',
+    '--game-token-4': 'rgba(10, 16, 14, 0.9)',
+    '--game-token-5': 'rgba(220, 235, 228, 0.2)',
+    '--game-token-6': '#f2c94c',
+    '--game-token-7': '#3ee0c9',
+    '--game-token-8': '#ff6b5e',
+    '--game-token-9': '0px',
+    '--game-token-10': '#0d1412',
+    '--game-token-11': '18px',
+    '--game-token-12': '0.5px',
+    '--game-token-13': '#16231f',
+    '--game-token-14': '#070b0a',
+    '--game-token-15': 'rgba(255, 255, 255, 0.025)',
+    '--game-token-16': '1px',
+    '--game-token-17': '4px',
+    '--game-token-18': '24px',
+    '--game-token-19': '28px',
+    '--game-token-20': '520px',
+    '--game-token-21': '3px',
+    '--game-token-22': '6px',
+    '--game-token-23': '32px',
+    '--game-token-24': '52px',
+    '--game-token-25': '190px',
+    '--game-token-26': '20px',
+    '--game-token-27': '15px',
+    '--game-token-28': '14px',
+    '--game-token-29': '#1b1406',
+    '--game-token-30': '12px',
+    '--game-token-31': '560px',
+    '--game-token-32': '44px',
+    '--game-token-33': '220px',
+    '--game-token-34': 'rgba(0, 0, 0, 0.35)',
+    '--game-token-35': '2px',
+    '--game-token-36': '10px',
+    '--game-token-37': '11px',
+    '--game-token-38': '252px',
+    '--game-token-39': '#000',
+    '--game-token-40': '330px',
+    '--game-token-41': '13px',
+    '--game-token-42': '16px',
+    '--game-token-43': 'rgba(242, 201, 76, 0.8)',
+    '--game-token-44': 'rgba(255, 255, 255, 0.7)',
+    '--game-token-45': '8px',
+    '--game-token-46': '26px',
+    '--game-token-47': '#111',
+    '--game-token-48': '720px',
+    '--game-token-49': 'rgba(0, 0, 0, 0.55)',
+    '--game-token-50': '#f7fcfc',
+    '--game-token-51': '#ff9f7a',
+    '--game-token-52': '#9fc8ff',
+    '--game-token-53': '34px',
+    '--game-token-54': 'rgba(10, 16, 14, 0.82)',
+    '--game-token-55': '22px',
+    '--game-token-56': '96px',
+    '--game-token-57': '380px',
+    '--game-token-58': 'rgba(255, 255, 255, 0.15)',
+    '--game-token-59': '#04201b',
+    '--game-token-60': 'rgba(0, 0, 0, 0.45)',
+    '--game-token-61': '1180px',
+    '--game-token-62': '760px',
+    '--game-token-63': '320px',
+    '--game-token-64': 'rgba(255, 255, 255, 0.04)',
+    '--game-token-65': 'rgba(255, 255, 255, 0.05)',
+    '--game-token-66': '620px',
+    '--game-token-67': '140px',
+    '--game-token-68': 'rgba(62, 224, 201, 0.1)',
+    '--game-token-69': '30px',
+    '--game-token-70': '480px',
+    '--game-token-71': '90px',
+    '--game-token-72': '130px',
+    '--game-token-73': 'rgba(0, 0, 0, 0.25)',
+    '--game-token-74': '40px',
+    '--game-token-75': '50px',
+    '--game-token-76': 'rgba(255, 255, 255, 0.5)',
+    '--game-token-77': '64px',
+    '--game-token-78': '150px',
+    '--game-token-79': '62px',
+    '--game-token-80': '198px',
+    '--game-token-81': '70px',
+    '--game-token-82': '110px',
+    '--game-token-83': 'rgba(62, 224, 201, 0.25)',
+    '--game-token-84': '420px',
+    '--game-token-85': '460px',
+    '--game-token-86': 'rgba(0, 0, 0, 0.7)',
+    '--game-token-87': '76px',
+    '--game-token-88': '999px',
+    '--game-token-89': '36px',
+    '--hud': 'var(--game-token-1)',
+    '--dim': 'var(--game-token-2)',
+    '--panel': 'var(--game-token-3)',
+    '--panel-solid': 'var(--game-token-4)',
+    '--line': 'var(--game-token-5)',
+    '--gold': 'var(--game-token-6)',
+    '--teal': 'var(--game-token-7)',
+    '--red': 'var(--game-token-8)',
+    '--font': "'Vazirmatn', Tahoma, sans-serif",
+    '--safe-top': 'env(safe-area-inset-top, var(--game-token-9))',
+  },
+  '*': {
+    'box-sizing': 'border-box',
+  },
+  'html,\nbody': {
+    margin: '0',
+    height: '100%',
+    overflow: 'hidden',
+    background: 'var(--game-token-10)',
+    color: 'var(--hud)',
+    'font-family': 'var(--font)',
+    '-webkit-user-select': 'none',
+    'user-select': 'none',
+  },
+  button: {
+    font: 'inherit',
+    cursor: 'pointer',
+  },
+  '#world': {
+    position: 'fixed',
+    inset: '0',
+    width: '100%',
+    height: '100%',
+    display: 'block',
+    'touch-action': 'none',
+    'z-index': '1',
+  },
+  '#loading': {
+    position: 'fixed',
+    inset: '0',
+    display: 'grid',
+    'place-items': 'center',
+    'z-index': '50',
+    background: 'var(--game-token-10)',
+    color: 'var(--teal)',
+    'font-size': 'var(--game-token-11)',
+    'letter-spacing': 'var(--game-token-12)',
+  },
+  '#briefing': {
+    position: 'fixed',
+    inset: '0',
+    'z-index': '40',
+    display: 'grid',
+    'grid-template-columns': '1.3fr 1fr',
+    background:
+      'radial-gradient(circle at 30% 40%, var(--game-token-13) 0%, var(--game-token-14) 75%)',
+  },
+  '#briefing[hidden]': {
+    display: 'none',
+  },
+  '.brief-map': {
+    position: 'relative',
+  },
+  '.brief-map::after': {
+    content: "''",
+    position: 'absolute',
+    inset: '0',
+    'pointer-events': 'none',
+    background:
+      'repeating-linear-gradient(\n    0deg,\n    var(--game-token-15) 0 var(--game-token-16),\n    transparent var(--game-token-16) var(--game-token-17)\n  )',
+  },
+  '#iran': {
+    width: '100%',
+    height: '100%',
+    display: 'block',
+  },
+  '.brief-panel': {
+    'align-self': 'center',
+    margin: 'var(--game-token-18)',
+    padding: 'var(--game-token-19)',
+    'max-width': 'var(--game-token-20)',
+    background: 'var(--panel)',
+    border: 'var(--game-token-16) solid var(--line)',
+    'border-inline-start': 'var(--game-token-21) solid var(--gold)',
+  },
+  '.tag': {
+    color: 'var(--gold)',
+    'letter-spacing': 'var(--game-token-16)',
+    'font-weight': '600',
+  },
+  '.brief-panel h1': {
+    margin: 'var(--game-token-22) 0 0',
+    'font-size': 'clamp(var(--game-token-23), 5vw, var(--game-token-24))',
+    'font-weight': '800',
+  },
+  '.sub': {
+    margin: '0 0 var(--game-token-11)',
+    color: 'var(--teal)',
+  },
+  '#brief-text': {
+    'min-height': 'var(--game-token-25)',
+    margin: '0 0 var(--game-token-26)',
+    'white-space': 'pre-wrap',
+    'font-family': 'var(--font)',
+    'font-size': 'var(--game-token-27)',
+    'line-height': '1.9',
+    color: 'var(--hud)',
+  },
+  '#start-mission': {
+    width: '100%',
+    padding: 'var(--game-token-28)',
+    border: '0',
+    background: 'var(--gold)',
+    color: 'var(--game-token-29)',
+    'font-size': 'var(--game-token-11)',
+    'font-weight': '800',
+    'letter-spacing': 'var(--game-token-12)',
+  },
+  '#start-mission:hover': {
+    filter: 'brightness(1.08)',
+  },
+  '.keys': {
+    color: 'var(--dim)',
+    'font-size': 'var(--game-token-30)',
+    'line-height': '1.8',
+    'margin-bottom': '0',
+  },
+  '#hud[hidden]': {
+    display: 'none',
+  },
+  '#hud > *': {
+    position: 'fixed',
+    'z-index': '10',
+  },
+  '#compass': {
+    top: 'var(--game-token-28)',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    width: 'min(var(--game-token-31), 80vw)',
+    height: 'var(--game-token-32)',
+    'pointer-events': 'none',
+  },
+  '#minimap-button': {
+    top: 'var(--game-token-11)',
+    left: 'var(--game-token-11)',
+    width: 'var(--game-token-33)',
+    height: 'var(--game-token-33)',
+    padding: '0',
+    border: '0',
+    'border-radius': '50%',
+    background: 'transparent',
+  },
+  '#minimap': {
+    width: 'var(--game-token-33)',
+    height: 'var(--game-token-33)',
+    'border-radius': '50%',
+    'box-shadow': '0 0 0 var(--game-token-17) var(--game-token-34)',
+  },
+  '.map-hint': {
+    position: 'absolute',
+    bottom: '-var(--game-token-17)',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    padding: 'var(--game-token-35) var(--game-token-36)',
+    background: 'var(--panel-solid)',
+    color: 'var(--dim)',
+    'font-size': 'var(--game-token-37)',
+    border: 'var(--game-token-16) solid var(--line)',
+  },
+  '#location': {
+    top: 'var(--game-token-38)',
+    left: 'var(--game-token-11)',
+    width: 'var(--game-token-33)',
+    'text-align': 'center',
+    'text-shadow': '0 var(--game-token-16) var(--game-token-21) var(--game-token-39)',
+  },
+  '#street': {
+    display: 'block',
+    'font-weight': '600',
+    'font-size': 'var(--game-token-28)',
+  },
+  '#mode-label': {
+    color: 'var(--teal)',
+  },
+  '#objectives': {
+    top: 'var(--game-token-11)',
+    right: 'var(--game-token-11)',
+    width: 'min(var(--game-token-40), 40vw)',
+    padding: 'var(--game-token-30) var(--game-token-28)',
+    background: 'linear-gradient(270deg, var(--panel) 60%, transparent)',
+    'border-inline-start': 'var(--game-token-21) solid var(--gold)',
+  },
+  '#objectives h2': {
+    margin: '0 0 var(--game-token-22)',
+    'font-size': 'var(--game-token-41)',
+    color: 'var(--gold)',
+    'letter-spacing': 'var(--game-token-16)',
+  },
+  '#mission-list': {
+    margin: '0',
+    padding: '0',
+    'list-style': 'none',
+    'font-size': 'var(--game-token-41)',
+    'line-height': '1.7',
+  },
+  '#mission-list li': {
+    color: 'var(--dim)',
+  },
+  '#mission-list li.active': {
+    color: 'var(--hud)',
+    'font-weight': '600',
+  },
+  '#mission-list li.active::before': {
+    content: "'◆ '",
+    color: 'var(--gold)',
+  },
+  '#mission-list li.done': {
+    'text-decoration': 'line-through',
+    opacity: '0.55',
+  },
+  '#mission-list li.done::before': {
+    content: "'✓ '",
+    color: 'var(--teal)',
+  },
+  '#mission-list li.hidden': {
+    display: 'none',
+  },
+  '#waypoint': {
+    transform: 'translate(-50%, -100%)',
+    display: 'grid',
+    'justify-items': 'center',
+    gap: 'var(--game-token-35)',
+    'pointer-events': 'none',
+    'text-shadow': '0 var(--game-token-16) var(--game-token-21) var(--game-token-39)',
+    'white-space': 'nowrap',
+  },
+  '#waypoint[hidden]': {
+    display: 'none',
+  },
+  '#waypoint i': {
+    width: 'var(--game-token-42)',
+    height: 'var(--game-token-42)',
+    background: 'var(--gold)',
+    transform: 'rotate(45deg)',
+    'box-shadow': '0 0 var(--game-token-36) var(--game-token-43)',
+  },
+  '#waypoint b': {
+    'font-size': 'var(--game-token-30)',
+  },
+  '#waypoint span': {
+    'font-size': 'var(--game-token-30)',
+    color: 'var(--gold)',
+  },
+  '#crosshair': {
+    top: '50%',
+    left: '50%',
+    width: 'var(--game-token-17)',
+    height: 'var(--game-token-17)',
+    margin: '-var(--game-token-35)',
+    'border-radius': '50%',
+    background: 'var(--game-token-44)',
+    'pointer-events': 'none',
+  },
+  '#prompt': {
+    bottom: '28%',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    padding: 'var(--game-token-45) var(--game-token-11)',
+    background: 'var(--panel-solid)',
+    border: 'var(--game-token-16) solid var(--line)',
+    'font-weight': '600',
+    'white-space': 'nowrap',
+    cursor: 'pointer',
+  },
+  '#prompt kbd': {
+    display: 'inline-block',
+    'min-width': 'var(--game-token-46)',
+    'margin-inline-end': 'var(--game-token-45)',
+    padding: 'var(--game-token-16) var(--game-token-22)',
+    'text-align': 'center',
+    background: 'var(--hud)',
+    color: 'var(--game-token-47)',
+    'border-radius': 'var(--game-token-21)',
+    'font-family': 'var(--font)',
+    'font-weight': '800',
+  },
+  '#subtitle': {
+    bottom: '12%',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    'max-width': 'min(var(--game-token-48), 90vw)',
+    padding: 'var(--game-token-45) var(--game-token-42)',
+    background: 'var(--game-token-49)',
+    'text-align': 'center',
+    'font-size': 'var(--game-token-42)',
+    'line-height': '1.7',
+    display: 'flex',
+    'align-items': 'center',
+    gap: 'var(--game-token-17)',
+  },
+  '#subtitle b': {
+    'margin-inline-end': 'var(--game-token-45)',
+  },
+  '#subtitle[hidden]': {
+    display: 'none',
+  },
+  '#subtitle-face': {
+    width: 'var(--game-token-24)',
+    height: 'var(--game-token-24)',
+    'object-fit': 'cover',
+    'border-radius': '50%',
+    'margin-inline-end': 'var(--game-token-36)',
+    background: 'var(--game-token-50)',
+    border: 'var(--game-token-35) solid var(--teal)',
+  },
+  '#subtitle-face[hidden]': {
+    display: 'none',
+  },
+  '#subtitle b.robot': {
+    color: 'var(--teal)',
+  },
+  '#subtitle b.father': {
+    color: 'var(--gold)',
+  },
+  '#subtitle b.child': {
+    color: 'var(--game-token-51)',
+  },
+  '#subtitle b.staff': {
+    color: 'var(--game-token-52)',
+  },
+  '#awards': {
+    top: '36%',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    display: 'grid',
+    'justify-items': 'center',
+    gap: 'var(--game-token-35)',
+    'pointer-events': 'none',
+    'text-shadow': '0 var(--game-token-35) var(--game-token-17) var(--game-token-39)',
+  },
+  '#awards .total': {
+    'font-size': 'var(--game-token-53)',
+    'font-weight': '800',
+    color: 'var(--gold)',
+    animation: 'pop 0.35s ease-out',
+  },
+  '#awards .line': {
+    'font-size': 'var(--game-token-28)',
+    'font-weight': '600',
+    animation: 'slide 0.4s ease-out backwards',
+  },
+  '#awards .line b': {
+    color: 'var(--gold)',
+    'margin-inline-start': 'var(--game-token-22)',
+  },
+  '@keyframes pop': {
+    from: {
+      transform: 'scale(1.6)',
+      opacity: '0',
+    },
+  },
+  '@keyframes slide': {
+    from: {
+      transform: 'translateY(var(--game-token-45))',
+      opacity: '0',
+    },
+  },
+  '#banner': {
+    top: '22%',
+    left: '0',
+    right: '0',
+    padding: 'var(--game-token-28)',
+    'text-align': 'center',
+    'pointer-events': 'none',
+    background:
+      'linear-gradient(\n    90deg,\n    transparent,\n    var(--game-token-54) 25%,\n    var(--game-token-54) 75%,\n    transparent\n  )',
+    animation: 'pop 0.4s ease-out',
+  },
+  '#banner small': {
+    display: 'block',
+    color: 'var(--gold)',
+    'letter-spacing': 'var(--game-token-35)',
+    'font-weight': '600',
+  },
+  '#banner strong': {
+    'font-size': 'var(--game-token-55)',
+  },
+  '#banner span': {
+    display: 'block',
+    color: 'var(--teal)',
+    'font-size': 'var(--game-token-28)',
+  },
+  '#status': {
+    bottom: 'var(--game-token-11)',
+    right: 'var(--game-token-11)',
+    display: 'flex',
+    gap: 'var(--game-token-36)',
+  },
+  '.stat': {
+    'min-width': 'var(--game-token-56)',
+    padding: 'var(--game-token-22) var(--game-token-30)',
+    background: 'var(--panel)',
+    'border-bottom': 'var(--game-token-35) solid var(--teal)',
+    display: 'grid',
+    'line-height': '1.3',
+  },
+  '.stat small': {
+    color: 'var(--dim)',
+    'font-size': 'var(--game-token-37)',
+  },
+  '.stat strong': {
+    'font-size': 'var(--game-token-55)',
+    'font-weight': '800',
+  },
+  '.stat span': {
+    'font-size': 'var(--game-token-37)',
+    color: 'var(--dim)',
+  },
+  '.stat[hidden]': {
+    display: 'none',
+  },
+  '#rank': {
+    bottom: 'var(--game-token-11)',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    width: 'min(var(--game-token-57), 50vw)',
+    padding: 'var(--game-token-17) var(--game-token-36)',
+    'text-align': 'center',
+    'font-size': 'var(--game-token-30)',
+    background: 'var(--panel)',
+  },
+  '#rank b': {
+    color: 'var(--gold)',
+    'margin-inline-end': 'var(--game-token-45)',
+  },
+  '#rank span': {
+    color: 'var(--dim)',
+  },
+  '#rank .bar': {
+    height: 'var(--game-token-17)',
+    'margin-top': 'var(--game-token-17)',
+    background: 'var(--game-token-58)',
+  },
+  '#rank .bar i': {
+    display: 'block',
+    height: '100%',
+    width: '0',
+    background: 'var(--gold)',
+    transition: 'width 0.6s',
+  },
+  '#toolbar': {
+    bottom: 'var(--game-token-11)',
+    left: 'var(--game-token-11)',
+    display: 'flex',
+    gap: 'var(--game-token-22)',
+  },
+  '#toolbar button,\n.ghost': {
+    padding: 'var(--game-token-22) var(--game-token-30)',
+    background: 'var(--panel)',
+    color: 'var(--hud)',
+    border: 'var(--game-token-16) solid var(--line)',
+    'font-size': 'var(--game-token-30)',
+  },
+  '#attribution': {
+    bottom: 'var(--game-token-35)',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    'font-size': 'var(--game-token-36)',
+    color: 'var(--dim)',
+  },
+  '#payment': {
+    position: 'fixed',
+    'z-index': '20',
+    bottom: '18%',
+    right: '50%',
+    transform: 'translateX(50%)',
+    width: 'min(var(--game-token-57), 92vw)',
+    padding: 'var(--game-token-42) var(--game-token-11)',
+    background: 'var(--panel-solid)',
+    border: 'var(--game-token-16) solid var(--line)',
+    'border-top': 'var(--game-token-21) solid var(--teal)',
+  },
+  '#payment[hidden]': {
+    display: 'none',
+  },
+  '#payment small': {
+    color: 'var(--teal)',
+  },
+  '#payment h2': {
+    margin: 'var(--game-token-17) 0',
+    'font-size': 'var(--game-token-11)',
+  },
+  '#payment p': {
+    margin: '0 0 var(--game-token-30)',
+    color: 'var(--dim)',
+  },
+  '.actions': {
+    display: 'flex',
+    gap: 'var(--game-token-45)',
+  },
+  '#swipe,\n#again,\n#route-button': {
+    flex: '1',
+    padding: 'var(--game-token-36)',
+    border: '0',
+    background: 'var(--teal)',
+    color: 'var(--game-token-59)',
+    'font-weight': '800',
+  },
+  '#swipe:disabled': {
+    opacity: '0.45',
+    cursor: 'wait',
+  },
+  dialog: {
+    color: 'var(--hud)',
+    background: 'var(--panel-solid)',
+    border: 'var(--game-token-16) solid var(--line)',
+    padding: '0',
+    'font-family': 'var(--font)',
+    'backdrop-filter': 'blur(var(--game-token-22))',
+  },
+  'dialog::backdrop': {
+    background: 'var(--game-token-60)',
+  },
+  'dialog header': {
+    display: 'flex',
+    'justify-content': 'space-between',
+    'align-items': 'start',
+    gap: 'var(--game-token-30)',
+    padding: 'var(--game-token-28) var(--game-token-11)',
+    'border-bottom': 'var(--game-token-16) solid var(--line)',
+  },
+  '.close': {
+    width: 'var(--game-token-53)',
+    height: 'var(--game-token-53)',
+    background: 'transparent',
+    color: 'var(--hud)',
+    border: 'var(--game-token-16) solid var(--line)',
+  },
+  '#map-dialog': {
+    width: 'min(var(--game-token-61), 96vw)',
+    height: 'min(var(--game-token-62), 92vh)',
+  },
+  '#map-dialog[open]': {
+    display: 'flex',
+    'flex-direction': 'column',
+  },
+  '.tabs': {
+    display: 'flex',
+    gap: 'var(--game-token-17)',
+  },
+  '.tabs button': {
+    padding: 'var(--game-token-22) var(--game-token-28)',
+    background: 'transparent',
+    color: 'var(--dim)',
+    border: 'var(--game-token-16) solid var(--line)',
+  },
+  ".tabs button[aria-selected='true']": {
+    color: 'var(--game-token-29)',
+    background: 'var(--gold)',
+    'border-color': 'var(--gold)',
+    'font-weight': '600',
+  },
+  '.map-body': {
+    flex: '1',
+    display: 'grid',
+    'grid-template-columns': '1fr var(--game-token-63)',
+    'min-height': '0',
+  },
+  '.map-view': {
+    position: 'relative',
+    'min-height': '0',
+  },
+  '#fullmap,\n#iran-map': {
+    position: 'absolute',
+    inset: '0',
+    width: '100%',
+    height: '100%',
+    cursor: 'grab',
+    'touch-action': 'none',
+  },
+  '#fullmap[hidden],\n#iran-map[hidden]': {
+    display: 'none',
+  },
+  '.map-help': {
+    position: 'absolute',
+    bottom: 'var(--game-token-22)',
+    right: 'var(--game-token-36)',
+    margin: '0',
+    'font-size': 'var(--game-token-37)',
+    color: 'var(--dim)',
+    'pointer-events': 'none',
+  },
+  '.map-side': {
+    overflow: 'auto',
+    padding: 'var(--game-token-28)',
+    'border-inline-start': 'var(--game-token-16) solid var(--line)',
+  },
+  '.map-side h3': {
+    margin: '0 0 var(--game-token-36)',
+    'font-size': 'var(--game-token-28)',
+    color: 'var(--gold)',
+  },
+  '#machine-list': {
+    'list-style': 'none',
+    margin: '0 0 var(--game-token-30)',
+    padding: '0',
+    display: 'grid',
+    gap: 'var(--game-token-22)',
+  },
+  '#machine-list button': {
+    width: '100%',
+    display: 'grid',
+    'grid-template-columns': 'var(--game-token-19) 1fr auto',
+    'align-items': 'center',
+    gap: 'var(--game-token-45)',
+    'text-align': 'right',
+    padding: 'var(--game-token-45)',
+    background: 'var(--game-token-64)',
+    color: 'var(--hud)',
+    border: 'var(--game-token-16) solid transparent',
+  },
+  '#machine-list button.selected': {
+    'border-color': 'var(--gold)',
+  },
+  '#machine-list button.locked': {
+    opacity: '0.45',
+    cursor: 'default',
+  },
+  '#machine-list .meta': {
+    display: 'block',
+    color: 'var(--dim)',
+    'font-size': 'var(--game-token-37)',
+  },
+  '#machine-list .dist': {
+    color: 'var(--gold)',
+    'font-size': 'var(--game-token-30)',
+    'white-space': 'nowrap',
+  },
+  '#machine-detail': {
+    'margin-bottom': 'var(--game-token-30)',
+    padding: 'var(--game-token-30)',
+    background: 'var(--game-token-65)',
+    'border-top': 'var(--game-token-35) solid var(--gold)',
+  },
+  '#machine-detail h4': {
+    margin: '0 0 var(--game-token-22)',
+  },
+  '#machine-detail p': {
+    margin: '0 0 var(--game-token-45)',
+    'font-size': 'var(--game-token-41)',
+    color: 'var(--dim)',
+    'line-height': '1.7',
+  },
+  '#route-button': {
+    width: '100%',
+  },
+  '#shop': {
+    width: 'min(var(--game-token-66), 94vw)',
+  },
+  '#shop small': {
+    color: 'var(--teal)',
+  },
+  '#shop h2': {
+    margin: 'var(--game-token-35) 0',
+  },
+  '#shop header p': {
+    margin: '0',
+    color: 'var(--dim)',
+    'font-size': 'var(--game-token-41)',
+  },
+  '#shop-note': {
+    margin: 'var(--game-token-36) var(--game-token-11) 0',
+    color: 'var(--gold)',
+    'font-size': 'var(--game-token-41)',
+  },
+  '#products': {
+    display: 'grid',
+    'grid-template-columns': 'repeat(auto-fill, minmax(var(--game-token-67), 1fr))',
+    gap: 'var(--game-token-45)',
+    padding: 'var(--game-token-28) var(--game-token-11)',
+  },
+  '#products button': {
+    display: 'grid',
+    gap: 'var(--game-token-35)',
+    'justify-items': 'center',
+    padding: 'var(--game-token-30) var(--game-token-45)',
+    color: 'var(--hud)',
+    background: 'var(--game-token-65)',
+    border: 'var(--game-token-16) solid var(--line)',
+  },
+  '#products button:hover:not(:disabled)': {
+    'border-color': 'var(--teal)',
+    background: 'var(--game-token-68)',
+  },
+  '#products button:disabled': {
+    opacity: '0.4',
+    cursor: 'not-allowed',
+  },
+  '#products .icon': {
+    'font-size': 'var(--game-token-69)',
+  },
+  '#products .price': {
+    color: 'var(--gold)',
+    'font-weight': '600',
+  },
+  '#products s': {
+    color: 'var(--dim)',
+    'font-size': 'var(--game-token-37)',
+  },
+  '.rate': {
+    margin: '0',
+    padding: '0 var(--game-token-11) var(--game-token-28)',
+    'font-size': 'var(--game-token-37)',
+    color: 'var(--dim)',
+  },
+  '#end': {
+    width: 'min(var(--game-token-70), 92vw)',
+    padding: 'var(--game-token-18)',
+    'text-align': 'center',
+    'border-top': 'var(--game-token-21) solid var(--gold)',
+  },
+  '#end small': {
+    color: 'var(--gold)',
+    'letter-spacing': 'var(--game-token-16)',
+  },
+  '#end h2': {
+    margin: 'var(--game-token-22) 0',
+    'font-size': 'var(--game-token-19)',
+  },
+  '#end-stats': {
+    'list-style': 'none',
+    padding: '0',
+    margin: 'var(--game-token-28) 0',
+    display: 'grid',
+    gap: 'var(--game-token-17)',
+  },
+  '#end-stats li': {
+    display: 'flex',
+    'justify-content': 'space-between',
+    padding: 'var(--game-token-22) var(--game-token-36)',
+    background: 'var(--game-token-65)',
+  },
+  '#touch[hidden]': {
+    display: 'none',
+  },
+  '#touch': {
+    inset: 'auto 0 var(--game-token-71) 0',
+    display: 'flex',
+    'justify-content': 'space-between',
+    padding: '0 var(--game-token-18)',
+    'pointer-events': 'none',
+  },
+  '#stick': {
+    width: 'var(--game-token-72)',
+    height: 'var(--game-token-72)',
+    'border-radius': '50%',
+    border: 'var(--game-token-35) solid var(--line)',
+    background: 'var(--game-token-73)',
+    position: 'relative',
+    'pointer-events': 'auto',
+    'touch-action': 'none',
+    order: '2',
+  },
+  '#stick i': {
+    position: 'absolute',
+    left: 'var(--game-token-74)',
+    top: 'var(--game-token-74)',
+    width: 'var(--game-token-75)',
+    height: 'var(--game-token-75)',
+    'border-radius': '50%',
+    background: 'var(--game-token-76)',
+  },
+  '.touch-buttons': {
+    display: 'grid',
+    gap: 'var(--game-token-36)',
+    'pointer-events': 'auto',
+    'align-content': 'end',
+  },
+  '.touch-buttons button': {
+    width: 'var(--game-token-77)',
+    height: 'var(--game-token-77)',
+    'border-radius': '50%',
+    background: 'var(--panel)',
+    color: 'var(--hud)',
+    border: 'var(--game-token-16) solid var(--line)',
+    'font-weight': '800',
+  },
+  '.touch-buttons button.on': {
+    background: 'var(--teal)',
+    color: 'var(--game-token-59)',
+  },
+  '@media (max-width: 760px)': {
+    '#briefing': {
+      'grid-template-columns': '1fr',
+      'grid-template-rows': '38vh 1fr',
+    },
+    '.brief-panel': {
+      margin: '0 var(--game-token-42) var(--game-token-42)',
+      padding: 'var(--game-token-11)',
+      'align-self': 'start',
+    },
+    '#brief-text': {
+      'min-height': 'var(--game-token-78)',
+      'font-size': 'var(--game-token-41)',
+    },
+    '#minimap-button,\n  #minimap': {
+      width: 'var(--game-token-72)',
+      height: 'var(--game-token-72)',
+    },
+    '#minimap-button': {
+      top: 'var(--game-token-79)',
+      left: 'var(--game-token-30)',
+    },
+    '#location': {
+      top: 'var(--game-token-80)',
+      left: 'var(--game-token-30)',
+      width: 'var(--game-token-72)',
+    },
+    '#objectives': {
+      top: 'var(--game-token-79)',
+      right: 'var(--game-token-30)',
+      width: '52vw',
+      padding: 'var(--game-token-45)',
+    },
+    '#mission-list li:not(.active)': {
+      display: 'none',
+    },
+    '#status': {
+      bottom: 'var(--game-token-24)',
+    },
+    '.stat': {
+      'min-width': 'var(--game-token-81)',
+      padding: 'var(--game-token-17) var(--game-token-45)',
+    },
+    '.stat strong': {
+      'font-size': 'var(--game-token-42)',
+    },
+    '#rank': {
+      top: 'var(--game-token-17)',
+      padding: 'var(--game-token-35) var(--game-token-45)',
+      'font-size': 'var(--game-token-37)',
+    },
+    '#compass': {
+      top: 'var(--game-token-89)',
+    },
+    '#toolbar': {
+      left: 'var(--game-token-45)',
+      right: 'var(--game-token-45)',
+      bottom: 'var(--game-token-45)',
+      'overflow-x': 'auto',
+      'flex-wrap': 'nowrap',
+      'scrollbar-width': 'none',
+      'padding-bottom': 'env(safe-area-inset-bottom, var(--game-token-9))',
+    },
+    '#toolbar button': {
+      flex: '0 0 auto',
+      'white-space': 'nowrap',
+    },
+    '#crosshair': {
+      display: 'none',
+    },
+    '.map-body': {
+      'grid-template-columns': '1fr',
+      'grid-template-rows': '1fr 40%',
+    },
+    '.map-side': {
+      'border-inline-start': '0',
+      'border-top': 'var(--game-token-16) solid var(--line)',
+    },
+    '.brief-robot': {
+      width: 'var(--game-token-81)',
+    },
+    '#rank .bar': {
+      height: 'var(--game-token-21)',
+      'margin-top': 'var(--game-token-35)',
+    },
+    '#gps-status': {
+      top: '42%',
+    },
+    '#touch': {
+      bottom: 'var(--game-token-78)',
+    },
+  },
+  '.brief-robot': {
+    float: 'left',
+    width: 'var(--game-token-82)',
+    height: 'auto',
+    margin: '-var(--game-token-45) 0 0 var(--game-token-45)',
+    filter: 'drop-shadow(0 var(--game-token-45) var(--game-token-11) var(--game-token-83))',
+  },
+  '.brief-actions': {
+    display: 'flex',
+    gap: 'var(--game-token-45)',
+    'margin-top': 'var(--game-token-45)',
+  },
+  '.brief-actions button': {
+    flex: '1',
+    padding: 'var(--game-token-36)',
+    'font-size': 'var(--game-token-41)',
+  },
+  '.brief-actions button[hidden]': {
+    display: 'none',
+  },
+  '#ios-install': {
+    width: 'min(var(--game-token-84), 92vw)',
+    padding: 'var(--game-token-55)',
+    'border-top': 'var(--game-token-21) solid var(--teal)',
+  },
+  '#ios-install h2': {
+    margin: '0 0 var(--game-token-45)',
+  },
+  '#ios-install ol': {
+    'line-height': '2',
+    'padding-inline-start': 'var(--game-token-26)',
+  },
+  '#ios-install button': {
+    width: '100%',
+    padding: 'var(--game-token-36)',
+    border: '0',
+    background: 'var(--teal)',
+    color: 'var(--game-token-59)',
+    'font-weight': '800',
+  },
+  '#update-toast': {
+    position: 'fixed',
+    'z-index': '60',
+    top: 'calc(var(--game-token-30) + var(--safe-top))',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    padding: 'var(--game-token-45) var(--game-token-36) var(--game-token-45) var(--game-token-28)',
+    background: 'var(--panel-solid)',
+    border: 'var(--game-token-16) solid var(--teal)',
+    display: 'flex',
+    gap: 'var(--game-token-36)',
+    'align-items': 'center',
+  },
+  '#update-toast[hidden]': {
+    display: 'none',
+  },
+  '#update-toast button': {
+    padding: 'var(--game-token-17) var(--game-token-30)',
+    border: '0',
+    background: 'var(--teal)',
+    color: 'var(--game-token-59)',
+    'font-weight': '800',
+  },
+  '#gps-status': {
+    display: 'block',
+    'margin-top': 'var(--game-token-35)',
+    color: 'var(--gold)',
+    'font-size': 'var(--game-token-30)',
+  },
+  '#gps-status[hidden]': {
+    display: 'none',
+  },
+  '#gps-toggle.on': {
+    background: 'var(--teal)',
+    color: 'var(--game-token-59)',
+    'border-color': 'var(--teal)',
+  },
+  '#real-intro': {
+    width: 'min(var(--game-token-85), 92vw)',
+    padding: 'var(--game-token-55)',
+    'border-top': 'var(--game-token-21) solid var(--gold)',
+  },
+  '#real-intro img': {
+    float: 'left',
+    'border-radius': '50%',
+    background: 'var(--game-token-50)',
+  },
+  '#real-intro h2': {
+    margin: '0 0 var(--game-token-45)',
+  },
+  '#real-intro p,\n#real-intro li': {
+    'line-height': '1.9',
+    'font-size': 'var(--game-token-28)',
+  },
+  '#real-intro ul': {
+    'padding-inline-start': 'var(--game-token-11)',
+    color: 'var(--dim)',
+  },
+  '#real-go': {
+    flex: '1',
+    padding: 'var(--game-token-36)',
+    border: '0',
+    background: 'var(--gold)',
+    color: 'var(--game-token-29)',
+    'font-weight': '800',
+  },
+  '#camera': {
+    position: 'fixed',
+    inset: '0',
+    width: '100%',
+    height: '100%',
+    'object-fit': 'cover',
+    'z-index': '0',
+    background: 'var(--game-token-39)',
+  },
+  '#camera[hidden]': {
+    display: 'none',
+  },
+  'body.ar': {
+    background: 'var(--game-token-39)',
+  },
+  'body.ar #crosshair': {
+    display: 'none',
+  },
+  '#ar-toggle[hidden],\n#stable-toggle[hidden]': {
+    display: 'none',
+  },
+  '#ar-toggle.on,\n#stable-toggle.on': {
+    background: 'var(--teal)',
+    color: 'var(--game-token-59)',
+    'border-color': 'var(--teal)',
+  },
+  'body.real #crosshair,\nbody.real #stick': {
+    display: 'none',
+  },
+  '@media (max-width: 760px), (max-height: 520px)': {
+    '#banner': {
+      top: '24%',
+      padding: 'var(--game-token-36)',
+    },
+    '#banner strong': {
+      'font-size': 'var(--game-token-11)',
+    },
+    '#awards': {
+      top: '36%',
+    },
+    '#subtitle': {
+      top: '50%',
+      bottom: 'auto',
+      transform: 'translate(-50%, -50%)',
+      width: 'min(92vw, var(--game-token-20))',
+      'font-size': 'var(--game-token-27)',
+      background: 'var(--game-token-86)',
+      'border-radius': 'var(--game-token-36)',
+    },
+    '#prompt': {
+      top: '64%',
+      bottom: 'auto',
+      'font-size': 'var(--game-token-42)',
+      padding: 'var(--game-token-30) var(--game-token-26)',
+      'border-radius': 'var(--game-token-36)',
+      'white-space': 'normal',
+      'text-align': 'center',
+      'max-width': '90vw',
+    },
+    '#gps-status': {
+      position: 'fixed',
+      top: 'var(--game-token-87)',
+      left: '50%',
+      transform: 'translateX(-50%)',
+      width: 'max-content',
+      'max-width': '92vw',
+      padding: 'var(--game-token-17) var(--game-token-30)',
+      background: 'var(--panel-solid)',
+      border: 'var(--game-token-16) solid var(--line)',
+      'border-radius': 'var(--game-token-88)',
+      'text-align': 'center',
+    },
+    '#payment': {
+      bottom: 'auto',
+      top: '50%',
+      transform: 'translate(50%, -50%)',
+    },
+  },
+  "body.real .touch-buttons [data-key='f'],\nbody.real .touch-buttons [data-key='shift']": {
+    display: 'none',
+  },
+  '[hidden]': {
+    display: 'none !important',
+  },
+};
diff --git a/src/tests/setup.js b/src/tests/setup.js
new file mode 100644
index 0000000..bb02c60
--- /dev/null
+++ b/src/tests/setup.js
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';
diff --git a/src/types/gameTypes.js b/src/types/gameTypes.js
new file mode 100644
index 0000000..9ca17ca
--- /dev/null
+++ b/src/types/gameTypes.js
@@ -0,0 +1,19 @@
+/**
+ * @typedef {object} PurchaseRecord
+ * @property {string} machineId - Stable machine identifier.
+ * @property {string} category - Machine location category.
+ * @property {string} productId - Purchased consumable identifier.
+ * @property {'drink'|'snack'} type - Picnic product category.
+ * @property {number} price - Integer hetoman charged.
+ * @property {number} minutes - Simulation clock at approval.
+ */
+/**
+ * @typedef {object} GameProgress
+ * @property {number} balance - Integer hetoman balance.
+ * @property {number} xp - Earned experience.
+ * @property {PurchaseRecord[]} purchases - Approved purchases.
+ * @property {string[]} missionsDone - Rewarded mission identifiers.
+ * @property {number} minutes - Simulation clock in minutes.
+ * @property {boolean} busy - Transaction or delivery lock.
+ */
+export {};
diff --git a/src/geo.js b/src/utils/geo.js
similarity index 100%
rename from src/geo.js
rename to src/utils/geo.js
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..1f0ff39
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,3 @@
+import plugin from 'tailwindcss/plugin.js';
+import {gameTheme} from './src/styles/gameTheme.js';
+export default {content:['./index.html','./src/**/*.{js,jsx}'],theme:{extend:{colors:{surface:'#0d1412',hud:'var(--hud)',gold:'var(--gold)',teal:'var(--teal)'}}},plugins:[plugin(({addBase})=>addBase(gameTheme))]};
diff --git a/tests/payment.test.js b/tests/payment.test.js
index 249302c..40529d6 100644
--- a/tests/payment.test.js
+++ b/tests/payment.test.js
@@ -6,15 +6,15 @@ import {
   priceAt,
   canAffordAnything,
   formatClock,
-} from '../src/game-state.js';
+} from '../src/game/economy/gameState.js';
 import {
   createPayment,
   beginPayment,
   readyPayment,
   swipePayment,
   cancelPayment,
-} from '../src/payment.js';
-import { machineById, machines } from '../src/locations.js';
+} from '../src/game/economy/payment.js';
+import { machineById, machines } from '../src/constants/locations.js';
 
 const park = machineById('mellat-park'),
   school = machineById('school-rahil'),
diff --git a/tests/realworld.test.js b/tests/realworld.test.js
index a9da4de..8811a6a 100644
--- a/tests/realworld.test.js
+++ b/tests/realworld.test.js
@@ -1,6 +1,11 @@
 import test from 'node:test';
 import assert from 'node:assert/strict';
-import { smoothFix, arrivalRadius, insideWorld, createStabilizer } from '../src/realworld.js';
+import {
+  smoothFix,
+  arrivalRadius,
+  insideWorld,
+  createStabilizer,
+} from '../src/game/device/realworld.js';
 
 test('GPS fixes blend by accuracy and a stale estimate is replaced', () => {
   const first = smoothFix(null, { x: 0, z: 0, accuracy: 10, time: 0 });
@@ -47,7 +52,7 @@ test('Stable mode holds still through jitter, drops jumps and follows real walki
 
 test('AR camera faces north/west with the phone held upright, and the FOV fits the screen', async () => {
   const { Quaternion, Vector3 } = await import('three');
-  const { orientationQuaternion, coverFov } = await import('../src/ar.js');
+  const { orientationQuaternion, coverFov } = await import('../src/game/device/ar.js');
   const look = (alpha, beta = 90, gamma = 0, angle = 0) =>
     new Vector3(0, 0, -1).applyQuaternion(
       orientationQuaternion(new Quaternion(), alpha, beta, gamma, angle),
diff --git a/tests/scoring.test.js b/tests/scoring.test.js
index dfab826..0ba91af 100644
--- a/tests/scoring.test.js
+++ b/tests/scoring.test.js
@@ -7,9 +7,9 @@ import {
   activeMission,
   POINTS,
   RANKS,
-} from '../src/scoring.js';
-import { createState, purchase } from '../src/game-state.js';
-import { machineById } from '../src/locations.js';
+} from '../src/game/economy/scoring.js';
+import { createState, purchase } from '../src/game/economy/gameState.js';
+import { machineById } from '../src/constants/locations.js';
 
 const total = (awards) => awards.reduce((s, a) => s + a.points, 0);
 
diff --git a/tests/world.test.js b/tests/world.test.js
index 1bd84d7..d78369e 100644
--- a/tests/world.test.js
+++ b/tests/world.test.js
@@ -1,13 +1,23 @@
 import test from 'node:test';
 import assert from 'node:assert/strict';
 import { readFileSync } from 'node:fs';
-import { toLocal, toLatLon, bearing, ORIGIN } from '../src/geo.js';
-import { createCollisionWorld, resolveCircle, blocked, clearFraction } from '../src/collision.js';
-import { buildGraph, routeBetween, nearestSegment, buildSegmentIndex } from '../src/routing.js';
-import { createCar, stepCar } from '../src/vehicle.js';
-import { createTraffic } from '../src/traffic.js';
+import { toLocal, toLatLon, bearing, ORIGIN } from '../src/utils/geo.js';
+import {
+  createCollisionWorld,
+  resolveCircle,
+  blocked,
+  clearFraction,
+} from '../src/game/world/collision.js';
+import {
+  buildGraph,
+  routeBetween,
+  nearestSegment,
+  buildSegmentIndex,
+} from '../src/game/world/routing.js';
+import { createCar, stepCar } from '../src/game/systems/vehicle.js';
+import { createTraffic } from '../src/game/systems/traffic.js';
 import { Scene } from 'three';
-import { machines, machineById, FACTORY } from '../src/locations.js';
+import { machines, machineById, FACTORY } from '../src/constants/locations.js';
 
 const data = JSON.parse(readFileSync(new URL('../src/data/mellat.json', import.meta.url)));
 
@@ -80,7 +90,7 @@ test('Traffic drives with the flow on one-way carriageways and stays inside them
 });
 
 test('Microsoft buildings decode into the world, stay clear of the factory and leave machines reachable', async () => {
-  const { decodeBuildings } = await import('../src/buildings-data.js');
+  const { decodeBuildings } = await import('../src/game/world/buildingsData.js');
   const file = readFileSync(new URL('../public/data/buildings.bin', import.meta.url));
   const buildings = decodeBuildings(
     file.buffer.slice(file.byteOffset, file.byteOffset + file.byteLength),
@@ -106,7 +116,7 @@ test('Microsoft buildings decode into the world, stay clear of the factory and l
 });
 
 test('Satellite tiles land where the map is: a tile over Park Mellat covers the park', async () => {
-  const { tileCorners } = await import('../src/imagery.js');
+  const { tileCorners } = await import('../src/game/world/imagery.js');
   const index = JSON.parse(readFileSync(new URL('../public/imagery/index.json', import.meta.url)));
   assert.ok(index[17].length > 100 && index[15].length > 100);
   const park = toLocal(36.32092, 59.53744),
diff --git a/vite.config.js b/vite.config.js
index 0bc4c7b..40a89c2 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,3 +1,5 @@
+import react from '@vitejs/plugin-react';
+import { fileURLToPath } from 'node:url';
 import { defineConfig } from 'vite';
 import { readdirSync, statSync } from 'node:fs';
 import { join, relative } from 'node:path';
@@ -63,7 +65,8 @@ self.addEventListener('fetch', event => {
 export default defineConfig({
   // Relative assets also load under a GitHub Pages repository path.
   base: './',
-  plugins: [offlineServiceWorker()],
+  resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } },
+  plugins: [react(), offlineServiceWorker()],
   // Top-level await loads the building and imagery files before the world is built.
   build: { target: 'es2022' },
   server: {
diff --git a/vitest.config.js b/vitest.config.js
new file mode 100644
index 0000000..54f94fd
--- /dev/null
+++ b/vitest.config.js
@@ -0,0 +1,4 @@
+import {defineConfig} from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import {fileURLToPath} from 'node:url';
+export default defineConfig({plugins:[react()],resolve:{alias:{'@':fileURLToPath(new URL('./src',import.meta.url))}},test:{environment:'jsdom',include:['src/**/*.test.{js,jsx}'],setupFiles:['./src/tests/setup.js']}});