From 0f3e12426a0af7e2ea47fbcb0d51d9d6ebf48dcc Mon Sep 17 00:00:00 2001
From: Maxim Dolgolyov <maxim.dolgolyov@gmail.com>
Date: Sat, 13 Jun 2026 16:24:31 +0300
Subject: [PATCH] =?UTF-8?q?@=20feat(quantik-game):=20=D1=84=D0=B0=D0=B7?=
 =?UTF-8?q?=D0=B0=202=20=E2=80=94=20=D0=BA=D0=B0=D1=80=D1=82=D0=B0-=D1=81?=
 =?UTF-8?q?=D0=BE=D0=B7=D0=B2=D0=B5=D0=B7=D0=B4=D0=B8=D0=B5=20+=20=D0=BC?=
 =?UTF-8?q?=D0=B8=D1=80=20+=20XP/=D1=81=D0=BA=D0=B8=D0=BD=D1=8B=20(MVP-?=
 =?UTF-8?q?=D0=BC=D0=B8=D1=80)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Одиночный уровень → играбельный мир: карта-созвездие из 6 физ-уровней
(2 главы, нарастающая сложность), разблокировка по звёздам, клиентский
XP/уровень игрока, пикер из 8 скинов (тинт героя+нарратора), нарратор
PetSprite на интро/победе (mood по звёздам). Навигация карта→интро→игра→
успех→карта/дальше; кнопка «Дальше» пересчитывает nextPlayable после
дозагрузки прогресса (фикс stale-hasNext). Логика прогресса — чистый
модуль progress-logic.js (unlock/XP/группировка). Только фронт, без
бэкенда: XP агрегируется из game_progress (Ф1). Каждый уровень проверен
на реальном движке (выигрываем + обе звезды достижимы); цепочка
разблокировки доказуемо проходима. npm test 251/8 baseline; lint:routes 0.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@
---
 CLAUDE.md                                  |  13 +
 frontend/js/game/levels.js                 | 420 +++++++++++++++++----
 frontend/js/game/map.js                    | 385 +++++++++++++++++++
 frontend/js/game/progress-logic.js         | 195 ++++++++++
 frontend/js/game/quantik-game.js           | 180 +++++++--
 frontend/quantik.html                      | 394 +++++++++++++++++--
 plans/quantik-game/CONTEXT.md              |  14 +
 plans/quantik-game/PLAN.md                 |   4 +-
 plans/quantik-game/phase-2-map-world-xp.md |  77 +++-
 9 files changed, 1539 insertions(+), 143 deletions(-)
 create mode 100644 frontend/js/game/map.js
 create mode 100644 frontend/js/game/progress-logic.js

diff --git a/CLAUDE.md b/CLAUDE.md
index 2813140..11dbcf7 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -225,3 +225,16 @@ git push origin master
 - **Доступ страницы**: `LS.initPage()` (без `{requireLogin:false}`) сам редиректит на `/login` если не авторизован и возвращает null → бутстрап выходит. Любой авторизованный играет.
 - **Верификация P1**: `node --check` всех новых/изменённых JS — OK; `npm run migrate` 076 применяется чисто; `npm test` 251 pass / 8 baseline fail (3 auth + 5 jsdom page-тестов — пре-существующие; **game.test.js 13/13 PASS**); `lint:routes` 247 :id-роутов, 0 unprotected (baseline 0). Эмодзи в коде нет (флагуются только `→`/`⛔` в комментариях — конвенция проекта); eval/new Function — 0. Спека без goal по-прежнему работает (Ф0 не задет).
 - **На Phase 2 (карта/мир/XP)**: реестр уровней расширяемый (добавить запись в `LEVELS`); `game_progress`-API готов; экран успеха `buildSuccessOverlay` переиспользуем (расширить «следующим уровнем», активировать «Дальше»); при смене уровня без перезагрузки — `inst.destroy()` перед новым mount.
+
+### Phase 2 — Learnings (Карта-созвездие + мир физ-уровней + XP/скины)
+
+- **Phase 2 = FRONTEND-ONLY** (осознанное решение): XP/уровень игрока агрегируются на КЛИЕНТЕ из `game_progress` (Ф1), скин — localStorage. Без новых таблиц/роутов/миграций → `lint:routes` baseline 0 не тронут, `npm test` ровно как в Ф1 (259 tests / 251 pass / 8 baseline fail). Перенос XP на сервер позже тривиален — те же чистые функции `progress-logic.js`.
+- **Чистая логика в отдельном модуле `frontend/js/game/progress-logic.js`** (`window.QuantikProgress`, без DOM/сети/eval — тестируемо в изоляции): `isUnlocked(level,map,levels)` (Σ звёзд во всех уровнях с меньшим `order` ≥ `level.unlockStars`; порог в ДАННЫХ уровня), `computeXp`(звёзды·100+40/пройден), `playerLevel(xp)` (квадратичная шкала `xpForLevel(L)=240·(L-1)L/2`), `groupByChapter`, `nextPlayable`, `fromProgressList`, `starsFor/starsToUnlock/nodeStatus`. Гоча тестов: `assert.deepEqual` через `vm`-границу сравнивает массивы РАЗНЫХ реалмов (прототипы ≠) → ложный fail; сравнивать через `JSON.stringify`.
+- **Карта `frontend/js/game/map.js`** (`window.QuantikMap.create({host,headerHost,onPlay,getSkin,onSkin})->{render(progressMap),destroy()}`): созвездия по главам (`groupByChapter`), узлы — `<button class="qm-node qm-{locked|available|completed}">`, позиция в % через `layoutNodes` (зигзаг-дуга), статус из `nodeStatus`. Звёздное небо — SVG `<circle class="qm-tw">` (CSS-мерцание, seeded `mulberry32`), линии-связи `<line>`. Поэтапное появление — `staggerReveal` (`.qm-pre`→`.qm-in`, setTimeout 70 мс). Тип спеки уровня карте безразличен — читает только метаданные → Ф3 граф-уровни = НОВАЯ глава без правок map.js.
+- **Метаданные уровня (Ф2)**: `{ id, title, chapter, order, unlockStars?, par_ms?, hint, spec }`. Главы — `QuantikLevels.CHAPTERS` (`{key,title,subtitle,accent}`). 6 уровней: Кинематика (артиллерия/перелёт-через-стену/отскок-от-стены) + Динамика (маятник-на-пружине/орбита-в-колодце/гравиманёвр). По 2 звезды: кристалл (`stars[0]`) + норматив времени `t*1000<=par_ms` (`stars[1]` — par-звезда выражается через мировое `t`, идентификатор `tries` для неё НЕ нужен).
+- **Физика «силовых» уровней через ПРУЖИНУ** (движок не имеет central-gravity): маятник — пружина к якорю-точке с короткой `length` (растянута → сильный возврат) + горизонтальный толчок; орбита — пружина к центру с `length:0` (== гармонический осциллятор `F=-k·r` == эллиптические орбиты); гравиманёвр — гравитация вниз + пружина-«колодец» к центру. k/толчок/сила = params-слайдеры.
+- **Скин: тинт без исполнения.** `tintHeroSpec(spec,key)` — глубокая JSON-копия спеки (данные!), переписывает `color/glowColor/trailColor` объекта `id:'ball'` цветом из `PetSprite.PALETTES[key]`. localStorage ключ **`quantik-skin`** (валидируется при чтении). Скин тинтует и героя, и нарратора (`PetSprite.render(...,colorKey,...)`). Гейты — массив `SKIN_GATES` (needStars/needXp).
+- **Нарратор = `PetSprite.render(level,mood,[],skin,0,'none')`** на карте-шапке (mood по уровню игрока), интро (`buildIntro`, happy) и успехе (`buildSuccessOverlay`, ecstatic при всех звёздах≥2 / happy при ≥1). `quantik.html` грузит `/js/pet-sprite.js` (как dashboard/pet).
+- **Навигация (inline-bootstrap quantik.html)**: 2 вида `#qg-map-view`/`#qg-level-view` (класс `.show`). `showMap` перезагружает прогресс (`LS.gameProgressList`) → `map.render`. `openLevel→интро→launchLevel→onGoal→успех→onNext(nextPlayable)|onMap`. **Смена уровня ВСЕГДА через `destroyLevel()` (=`inst.destroy()`)** до нового mount (гоча Ф1). Deep-link `?level=` открывает только разблокированный.
+- **Per-level winnability обязательна** (как Ф1): harness грузит РЕАЛЬНЫЕ `_sim_expr.js`+`_sim_engine.js` в `vm`, свипует слайдеры через движок, проверяет `getResult().won`. Гоча OOM: **переиспользовать ОДИН `inst` через `reset()` по сотням комбо ТЕЧЁТ** (накопление через goal-state/bodyById-замыкания) → mount+`destroy()` СВЕЖИЙ inst на каждое комбо (leak-proof). Headless `_renderFrame` рано выходит при `_cw/_ch==0` (рендер не нужен, физика/`_evalGoal` идут в `play`-кадре независимо); для point-радиуса в физике выставить `inst._scale`. Виртуальные часы синхронны с `performance.now()`/rAF-timestamp. Результат: ВСЕ 6 winnable, у всех достижимы обе звезды (combos: artillery 28/196, arc 5/196, bounce 92/343, pendulum 189/196, orbit 94/196, gravimanёvr 170/343).
+- **Верификация P2**: `node --check` всех новых/изменённых JS + inline-`<script>` quantik.html — OK; смоуки (логика 16/16, рендер карты/оверлеев 7/7, winnability 6/6) зелёные и удалены; `npm test` 259/251 pass/8 baseline fail (без новых падений); `lint:routes` baseline 0. Эмодзи/`★`/eval/new Function — 0 (звёзды UI — inline SVG; в комментариях `★` заменён на «зв.»).
diff --git a/frontend/js/game/levels.js b/frontend/js/game/levels.js
index 2ec6884..ad2223a 100644
--- a/frontend/js/game/levels.js
+++ b/frontend/js/game/levels.js
@@ -1,107 +1,401 @@
 'use strict';
 /* ════════════════════════════════════════════════════════════════════════
-   Квантик — Законы Мира · Реестр уровней (Фаза 1, MVP).
+   Квантик — Законы Мира · Реестр уровней (Фаза 2 — мир из 6 физ-уровней).
 
    Уровень = СПЕКА SimForge (данные, не код) + блок `goal` (победа), который
    движок (_sim_engine.js) умеет с Фазы 0. Игрок не управляет героем напрямую —
-   он «чинит закон мира»: крутит слайдеры params (угол/скорость), затем «Запуск»,
-   и симуляция проигрывается к цели.
+   он «чинит закон мира»: крутит слайдеры params (угол/скорость/жёсткость…),
+   затем «Запуск», и симуляция проигрывается к цели.
 
-   ИСТОЧНИК УРОВНЕЙ (решение зафиксировано в CONTEXT.md):
-   — СЕЙЧАС (Фаза 1): встроенные данные здесь, window.QuantikLevels.
-   — ПОЗЖЕ (Фаза 5): уровни авторятся в sim-builder и хранятся в custom_sims
-     (cat='game'); реестр пополнится загрузкой опубликованных спек с сервера.
+   ── МЕТАДАННЫЕ УРОВНЯ (Фаза 2) ───────────────────────────────────────────
+     {
+       id,          // == level_id для /api/game/progress
+       title,       // отображаемое имя узла карты
+       chapter,     // ключ главы-созвездия (группировка на карте)
+       order,       // глобальный порядок (для «предыдущих» при разблокировке и «Дальше»)
+       unlockStars, // порог: сумма звёзд во ВСЕХ предыдущих уровнях, чтобы открыть (деф. 0)
+       par_ms?,     // норматив времени для 3-й звезды (мс мирового времени)
+       subject?,    // тема (физика)
+       hint?,       // подсказка-нарратив для интро
+       spec         // обычная спека SimForge с блоком goal
+     }
+   Звёзды: зв.1 — достичь цели; зв.2 — собрать бонус (кристалл); зв.3 — уложиться
+   в par_ms. par-звезда выражается напрямую через мировое время t: `t*1000 <= PAR`
+   (вычисляется в момент победы; идентификатор tries для неё не нужен).
 
-   Форма записи уровня:
-     { id, title, subject?, hint?, spec }
-   где spec — обычная спека SimForge с блоком goal. id == level_id для
-   /api/game/progress (LS.gameProgressSubmit(id, ...)).
+   ИСТОЧНИК УРОВНЕЙ: встроенные данные здесь (window.QuantikLevels). Авторённые
+   уровни (custom_sims cat='game') подмешаются в Фазе 5 (реестр станет асинхронным).
 
    ⛔ Без eval/Function. Все «числовые» поля могут быть числом ИЛИ строкой-
    выражением (их безопасно вычисляет SimExpr на клиенте).
    ════════════════════════════════════════════════════════════════════════ */
 (function (global) {
 
-  /* ── Уровень 1: «Артиллерия Квантика» ──────────────────────────────────
-     Герой — светящаяся точка-тело (body) с кометной трассой (P2). Запускается
-     из начала координат под углом θ со скоростью v; гравитация тянет вниз.
-     Цель — попасть в портал; бонус-звезда — собрать кристалл по дороге.
-     Параметры подобраны так, чтобы уровень был ПРОХОДИМ в пределах слайдеров. */
-  var PORTAL_X = 8;     // центр портала по X (мир)
-  var PORTAL_Y = 0;     // центр портала по Y (на «земле» y=0)
-  var PORTAL_R = 0.7;   // радиус попадания
-  var STAR_X   = 4;     // бонус-кристалл (на восходящей ветви хорошей дуги)
-  var STAR_Y   = 2.6;
-  var STAR_R   = 0.65;
+  var BG = '#0D0D1A';
+  var GROUND = '#334155';
+  var HERO = '#22D3EE';       // дефолтный цвет героя (тинтуется скином — см. quantik-game.js)
+  var PORTAL = '#A78BFA';     // фиолет — цель
+  var CRYSTAL = '#F472B6';    // розовый — бонус
 
+  /* helper: общий объект «герой-тело» (point с body) — стартует из (sx,sy). */
+  function hero(sx, sy, vxExpr, vyExpr) {
+    return {
+      id: 'ball', type: 'point', r: 7, color: HERO,
+      x: sx, y: sy,
+      glow: true, glowColor: HERO, trail: true, trailColor: HERO, trailFade: true,
+      body: { mass: 1, vx: vxExpr, vy: vyExpr }
+    };
+  }
+  /* helper: светящийся портал-кольцо (визуал цели). */
+  function portalObjs(px, py, r) {
+    return [
+      { type: 'circle', x: px, y: py, r: r, color: PORTAL, width: 3, glow: true, glowColor: PORTAL },
+      { type: 'circle', x: px, y: py, r: r * 0.45, color: PORTAL, width: 2, opacity: 0.7 },
+      { type: 'label', x: px, y: py + r + 0.9, text: 'портал', color: PORTAL, size: 12 }
+    ];
+  }
+  function crystalObjs(cx, cy, r) {
+    return [
+      { type: 'circle', x: cx, y: cy, r: r, color: CRYSTAL, width: 2, glow: true, glowColor: CRYSTAL },
+      { type: 'label', x: cx, y: cy + r + 0.8, text: 'кристалл', color: CRYSTAL, size: 11 }
+    ];
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────
+     Глава I — «Кинематика» (созвездие): полёт под действием гравитации.
+     ──────────────────────────────────────────────────────────────────────── */
+
+  /* Уровень 1: «Артиллерия Квантика» — базовый бросок под углом. */
+  var L1_PX = 8, L1_PY = 0.7, L1_PR = 0.75;
+  var L1_CX = 4, L1_CY = 2.7, L1_CR = 0.7;
   var artillery1 = {
     id: 'phys-artillery-1',
-    title: 'Артиллерия Квантика',
+    title: 'Артиллерия',
+    chapter: 'kinematics',
+    order: 1,
+    unlockStars: 0,
+    par_ms: 1500,
     subject: 'physics',
-    hint: 'Подберите угол и скорость, чтобы Квантик долетел до портала. Соберите кристалл по дороге — это бонусная звезда.',
+    hint: 'Подбери угол и скорость, чтобы Квантик долетел до портала. Собери кристалл по дороге — это вторая звезда. Быстрый бросок даст третью.',
     spec: {
       specVersion: 1,
       meta: { title: 'Артиллерия Квантика', desc: 'Закон движения: бросок под углом к горизонту.' },
-      viewport: { xmin: -1, xmax: 12, ymin: -1.2, ymax: 7, grid: true, axes: true, bg: '#0D0D1A' },
+      viewport: { xmin: -1, xmax: 12, ymin: -1.2, ymax: 7, grid: true, axes: true, bg: BG },
       params: [
         { name: 'theta', label: 'Угол', min: 10, max: 80, step: 1, value: 45, unit: '°' },
-        { name: 'v',     label: 'Скорость', min: 5, max: 20, step: 0.5, value: 10, unit: 'м/с' }
+        { name: 'v', label: 'Скорость', min: 5, max: 20, step: 0.5, value: 10, unit: 'м/с' }
       ],
-      physics: {
-        enabled: true,
-        gravity: { x: 0, y: -9.8 }
-      },
+      physics: { enabled: true, gravity: { x: 0, y: -9.8 } },
       objects: [
-        // «Земля» — линия y=0 для ориентира.
-        { type: 'segment', x1: -1, y1: 0, x2: 12, y2: 0, color: '#334155', width: 2 },
-
-        // Бонус-кристалл (звезда). Контурный кружок-маркер.
-        { type: 'circle', x: STAR_X, y: STAR_Y, r: STAR_R, color: '#FBBF24', width: 2, glow: true },
-        { type: 'label',  x: STAR_X, y: STAR_Y + 0.7, text: 'кристалл', color: '#FBBF24', size: 12 },
-
-        // Портал — цель. Светящийся кружок.
-        { type: 'circle', x: PORTAL_X, y: PORTAL_Y + PORTAL_R, r: PORTAL_R, color: '#22D3EE', width: 3, glow: true, glowColor: '#22D3EE' },
-        { type: 'label',  x: PORTAL_X, y: PORTAL_Y + 2.0, text: 'портал', color: '#22D3EE', size: 12 },
-
-        // Герой Квантик — физ-тело, стартует из (0,0) со скоростью (vx,vy).
-        // glow + кометная трасса (P2).
-        {
-          id: 'ball', type: 'point', r: 7, color: '#06D6E0',
-          x: 0, y: 0,
-          glow: true, glowColor: '#06D6E0', trail: true, trailColor: '#06D6E0',
-          body: {
-            mass: 1,
-            vx: 'v*cos(theta*pi/180)',
-            vy: 'v*sin(theta*pi/180)'
-          }
-        },
-
-        // Живые показания скорости (бейдж-оверлей).
+        { type: 'segment', x1: -1, y1: 0, x2: 12, y2: 0, color: GROUND, width: 2 }
+      ].concat(crystalObjs(L1_CX, L1_CY, L1_CR), portalObjs(L1_PX, L1_PY, L1_PR), [
+        hero(0, 0, 'v*cos(theta*pi/180)', 'v*sin(theta*pi/180)'),
         { type: 'readout', label: 'v', expr: 'v', unit: 'м/с', precision: 1 },
         { type: 'readout', label: 'θ', expr: 'theta', unit: '°', precision: 0 }
-      ],
+      ]),
       goal: {
         title: 'Попади в портал',
-        hint: 'Квантик должен достичь портала. Бонус: собери кристалл по дороге.',
-        // Победа: герой в радиусе портала.
-        when: 'hypot(ball.x - ' + PORTAL_X + ', ball.y - ' + (PORTAL_Y + PORTAL_R) + ') < ' + PORTAL_R,
-        // Мягкий проигрыш: улетел далеко за поле (промах) — можно перезапустить.
+        hint: 'Достигни портала. Бонус: собери кристалл и уложись в норматив.',
+        when: 'hypot(ball.x - ' + L1_PX + ', ball.y - ' + L1_PY + ') < ' + L1_PR,
         fail: 'ball.x > 11.5 || ball.y < -1.0',
         stars: [
-          { when: 'hypot(ball.x - ' + STAR_X + ', ball.y - ' + STAR_Y + ') < ' + STAR_R, label: 'Собрал кристалл' }
+          { when: 'hypot(ball.x - ' + L1_CX + ', ball.y - ' + L1_CY + ') < ' + L1_CR, label: 'Собрал кристалл' },
+          { when: 't*1000 <= 1500', label: 'Быстро (≤1.5 с)' }
         ]
       }
     }
   };
 
-  var LEVELS = [artillery1];
+  /* Уровень 2: «Перелёт через стену» — между стартом и порталом стоит высокая
+     стена; нужно перебросить Квантика по дуге. Кристалл — на вершине дуги. */
+  var L2_PX = 9.5, L2_PY = 0.7, L2_PR = 0.8;
+  var L2_WALLX = 5, L2_WALLH = 3.6;          // вертикальная стена-препятствие
+  var L2_CX = 5, L2_CY = 4.4, L2_CR = 0.7;   // кристалл над стеной
+  var arc2 = {
+    id: 'phys-arc-2',
+    title: 'Перелёт через стену',
+    chapter: 'kinematics',
+    order: 2,
+    unlockStars: 1,
+    par_ms: 1800,
+    subject: 'physics',
+    hint: 'Стена преграждает прямой путь. Подбери крутую дугу — переброс Квантика через гребень в портал. Кристалл ждёт на вершине.',
+    spec: {
+      specVersion: 1,
+      meta: { title: 'Перелёт через стену', desc: 'Дальность и высота броска: перебрось препятствие.' },
+      viewport: { xmin: -1, xmax: 13, ymin: -1.2, ymax: 8, grid: true, axes: true, bg: BG },
+      params: [
+        { name: 'theta', label: 'Угол', min: 20, max: 85, step: 1, value: 60, unit: '°' },
+        { name: 'v', label: 'Скорость', min: 6, max: 22, step: 0.5, value: 12, unit: 'м/с' }
+      ],
+      physics: { enabled: true, gravity: { x: 0, y: -9.8 } },
+      objects: [
+        { type: 'segment', x1: -1, y1: 0, x2: 13, y2: 0, color: GROUND, width: 2 },
+        // стена-препятствие
+        { type: 'segment', x1: L2_WALLX, y1: 0, x2: L2_WALLX, y2: L2_WALLH, color: '#475569', width: 6 },
+        { type: 'label', x: L2_WALLX, y: L2_WALLH + 0.5, text: 'стена', color: '#94A3B8', size: 11 }
+      ].concat(crystalObjs(L2_CX, L2_CY, L2_CR), portalObjs(L2_PX, L2_PY, L2_PR), [
+        hero(0, 0, 'v*cos(theta*pi/180)', 'v*sin(theta*pi/180)'),
+        { type: 'readout', label: 'v', expr: 'v', unit: 'м/с', precision: 1 },
+        { type: 'readout', label: 'θ', expr: 'theta', unit: '°', precision: 0 }
+      ]),
+      goal: {
+        title: 'Перебрось стену в портал',
+        hint: 'Перелети стену и попади в портал. Бонус: задень кристалл на вершине.',
+        when: 'hypot(ball.x - ' + L2_PX + ', ball.y - ' + L2_PY + ') < ' + L2_PR,
+        // проигрыш: врезался в стену (рядом с ней и ниже её верха) либо улетел/упал за поле
+        fail: '(abs(ball.x - ' + L2_WALLX + ') < 0.22 && ball.y < ' + L2_WALLH + ') || ball.x > 12.5 || ball.y < -1.0',
+        stars: [
+          { when: 'hypot(ball.x - ' + L2_CX + ', ball.y - ' + L2_CY + ') < ' + L2_CR, label: 'Собрал кристалл' },
+          { when: 't*1000 <= 1800', label: 'Быстро (≤1.8 с)' }
+        ]
+      }
+    }
+  };
+
+  /* Уровень 3: «Отскок» — рабочая зона как упругий ящик (пол + правая стена).
+     Прямого пути к высокому порталу слева-вверху нет: брось вправо, упругий
+     отскок от правой стены и пола приводит Квантика по ломаной к порталу.
+     Кристалл — у правой стены (на дуге до отскока). Тюнинг угла/скорости/упругости. */
+  var L3_PX = 1.6, L3_PY = 4.6, L3_PR = 0.95;     // портал слева-вверху
+  var L3_CX = 8.4, L3_CY = 3.4, L3_CR = 0.85;     // кристалл у правой стены
+  var bounce3 = {
+    id: 'phys-bounce-3',
+    title: 'Отскок',
+    chapter: 'kinematics',
+    order: 3,
+    unlockStars: 2,
+    par_ms: 2800,
+    subject: 'physics',
+    hint: 'Портал слева-вверху, прямого пути нет. Брось вправо — упругая стена отразит Квантика обратно. Поиграй упругостью: чем жёстче отскок, тем выше дуга назад.',
+    spec: {
+      specVersion: 1,
+      meta: { title: 'Отскок', desc: 'Упругое столкновение: отскок от стены.' },
+      viewport: { xmin: -1, xmax: 11, ymin: -1.0, ymax: 8, grid: true, axes: true, bg: BG },
+      params: [
+        { name: 'theta', label: 'Угол', min: 20, max: 75, step: 1, value: 50, unit: '°' },
+        { name: 'v', label: 'Скорость', min: 8, max: 24, step: 0.5, value: 16, unit: 'м/с' },
+        { name: 'el', label: 'Упругость', min: 0.55, max: 0.95, step: 0.01, value: 0.8 }
+      ],
+      physics: {
+        enabled: true,
+        gravity: { x: 0, y: -9.8 },
+        restitution: 'el',
+        walls: [{ side: 'bottom' }, { side: 'right' }]
+      },
+      objects: [
+        { type: 'segment', x1: -1, y1: 0, x2: 11, y2: 0, color: GROUND, width: 3 },
+        { type: 'segment', x1: 11, y1: 0, x2: 11, y2: 8, color: '#475569', width: 4 },
+        { type: 'label', x: 10.2, y: 7.2, text: 'упр. стена', color: '#94A3B8', size: 11 }
+      ].concat(crystalObjs(L3_CX, L3_CY, L3_CR), portalObjs(L3_PX, L3_PY, L3_PR), [
+        hero(0, 0.2, 'v*cos(theta*pi/180)', 'v*sin(theta*pi/180)'),
+        { type: 'readout', label: 'упр', expr: 'el', precision: 2 },
+        { type: 'readout', label: 'v', expr: 'v', unit: 'м/с', precision: 1 }
+      ]),
+      goal: {
+        title: 'Отскоком в портал',
+        hint: 'Отрази Квантика от правой стены так, чтобы он вернулся в портал слева-вверху. Бонус: задень кристалл у стены.',
+        when: 'hypot(ball.x - ' + L3_PX + ', ball.y - ' + L3_PY + ') < ' + L3_PR,
+        fail: 't > 8',
+        stars: [
+          { when: 'hypot(ball.x - ' + L3_CX + ', ball.y - ' + L3_CY + ') < ' + L3_CR, label: 'Собрал кристалл' },
+          { when: 't*1000 <= 2800', label: 'Быстро (≤2.8 с)' }
+        ]
+      }
+    }
+  };
+
+  /* ─────────────────────────────────────────────────────────────────────────
+     Глава II — «Динамика» (созвездие): силы, пружины, орбиты.
+     ──────────────────────────────────────────────────────────────────────── */
+
+  /* Уровень 4: «Маятник» — Квантик подвешен на пружине к якорю сверху; даём ему
+     горизонтальный толчок. Пружина (закон Гука) тянет назад — он качается дугой.
+     Подбери начальную скорость и жёсткость, чтобы нижняя точка дуги прошла через
+     портал. Без гравитации вниз — чистая пружинная динамика к центру. */
+  var L4_ANCHOR_X = 4, L4_ANCHOR_Y = 7.4;
+  var L4_REST = 1.2;                        // короткая длина покоя -> пружина растянута -> сильный возврат
+  var L4_START_Y = 2.6;                     // тело висит ниже якоря (растяжение ~3.6)
+  var L4_PX = 7.4, L4_PY = 4.6, L4_PR = 1.0;   // портал на правом плече дуги
+  var L4_CX = 4.0, L4_CY = 6.0, L4_CR = 0.9;   // кристалл у верхней точки качания (ближе к якорю)
+  var pendulum4 = {
+    id: 'phys-pendulum-4',
+    title: 'Маятник',
+    chapter: 'dynamics',
+    order: 4,
+    unlockStars: 4,
+    par_ms: 3600,
+    subject: 'physics',
+    hint: 'Квантик висит на растянутой пружине у якоря. Толкни его вбок — закон Гука раскачает дугу вверх. Подбери толчок и жёсткость, чтобы плечо дуги достало портал.',
+    spec: {
+      specVersion: 1,
+      meta: { title: 'Маятник на пружине', desc: 'Закон Гука: гармонические колебания.' },
+      viewport: { xmin: -2, xmax: 11, ymin: -1, ymax: 9, grid: true, axes: true, bg: BG },
+      params: [
+        { name: 'push', label: 'Толчок', min: 4, max: 18, step: 0.5, value: 10, unit: 'м/с' },
+        { name: 'k', label: 'Жёсткость', min: 8, max: 50, step: 1, value: 24 }
+      ],
+      physics: {
+        enabled: true,
+        gravity: { x: 0, y: 0 },              // чисто пружинная динамика (анализ закона Гука)
+        springs: [
+          { a: [L4_ANCHOR_X, L4_ANCHOR_Y], b: 'ball', k: 'k', length: L4_REST }
+        ]
+      },
+      objects: [
+        // якорь
+        { type: 'circle', x: L4_ANCHOR_X, y: L4_ANCHOR_Y, r: 0.18, color: '#94A3B8', width: 0, fill: '#94A3B8' },
+        { type: 'label', x: L4_ANCHOR_X, y: L4_ANCHOR_Y + 0.6, text: 'якорь', color: '#94A3B8', size: 11 },
+        // линия-пружина (визуальная связь якорь→тело)
+        { type: 'segment', x1: L4_ANCHOR_X, y1: L4_ANCHOR_Y, x2: 'ball.x', y2: 'ball.y', color: '#475569', width: 1, lineStyle: 'dashed' }
+      ].concat(crystalObjs(L4_CX, L4_CY, L4_CR), portalObjs(L4_PX, L4_PY, L4_PR), [
+        // тело висит ниже якоря, горизонтальный толчок вправо
+        hero(L4_ANCHOR_X, L4_START_Y, 'push', '0'),
+        { type: 'readout', label: 'толчок', expr: 'push', unit: 'м/с', precision: 1 },
+        { type: 'readout', label: 'k', expr: 'k', precision: 0 }
+      ]),
+      goal: {
+        title: 'Качни в портал',
+        hint: 'Раскачай Квантика на пружине так, чтобы дуга прошла через портал. Бонус: задень кристалл у верхней точки.',
+        when: 'hypot(ball.x - ' + L4_PX + ', ball.y - ' + L4_PY + ') < ' + L4_PR,
+        fail: 't > 12',
+        stars: [
+          { when: 'hypot(ball.x - ' + L4_CX + ', ball.y - ' + L4_CY + ') < ' + L4_CR, label: 'Собрал кристалл' },
+          { when: 't*1000 <= 3600', label: 'Быстро (≤3.6 с)' }
+        ]
+      }
+    }
+  };
+
+  /* Уровень 5: «Орбита» — центральная пружина-«гравитационный колодец» к центру
+     (закон Гука к центру == гармонический осциллятор == эллиптические орбиты).
+     Даём тангенциальную скорость; подбери её и силу колодца, чтобы орбита прошла
+     через портал-кольцо на её пути. */
+  var L5_CENTER_X = 4, L5_CENTER_Y = 3;
+  var L5_START_X = 4, L5_START_Y = 6;        // старт над центром (радиус 3)
+  var L5_PX = 6.6, L5_PY = 3, L5_PR = 0.95;  // портал на правом плече орбиты (внутри замкнутого витка)
+  var L5_CX = 4, L5_CY = 0.1, L5_CR = 0.9;   // кристалл в нижней точке орбиты
+  var orbit5 = {
+    id: 'phys-orbit-5',
+    title: 'Орбита',
+    chapter: 'dynamics',
+    order: 5,
+    unlockStars: 6,
+    par_ms: 4200,
+    subject: 'physics',
+    hint: 'Колодец притягивает Квантика к центру (закон Гука). Дай ему боковой разгон — он выйдет на орбиту. Подбери скорость и силу колодца, чтобы виток прошёл сквозь портал.',
+    spec: {
+      specVersion: 1,
+      meta: { title: 'Орбита', desc: 'Центральная сила: замкнутая орбита через цель.' },
+      viewport: { xmin: -2, xmax: 11, ymin: -3, ymax: 9, grid: true, axes: true, bg: BG },
+      params: [
+        { name: 'vt', label: 'Боковой разгон', min: 2, max: 14, step: 0.25, value: 6, unit: 'м/с' },
+        { name: 'g', label: 'Сила колодца', min: 4, max: 30, step: 0.5, value: 12 }
+      ],
+      physics: {
+        enabled: true,
+        gravity: { x: 0, y: 0 },
+        // пружина к центру с нулевой длиной покоя == центральная гармоническая сила F=-k·r
+        springs: [
+          { a: [L5_CENTER_X, L5_CENTER_Y], b: 'ball', k: 'g', length: 0 }
+        ]
+      },
+      objects: [
+        // центр-колодец
+        { type: 'circle', x: L5_CENTER_X, y: L5_CENTER_Y, r: 0.3, color: '#F59E0B', width: 0, fill: '#F59E0B', glow: true, glowColor: '#F59E0B' },
+        { type: 'label', x: L5_CENTER_X, y: L5_CENTER_Y - 0.9, text: 'колодец', color: '#F59E0B', size: 11 }
+      ].concat(crystalObjs(L5_CX, L5_CY, L5_CR), portalObjs(L5_PX, L5_PY, L5_PR), [
+        // старт над центром, скорость вправо (vt) -> орбита по часовой
+        hero(L5_START_X, L5_START_Y, 'vt', '0'),
+        { type: 'readout', label: 'разгон', expr: 'vt', unit: 'м/с', precision: 2 },
+        { type: 'readout', label: 'сила', expr: 'g', precision: 1 }
+      ]),
+      goal: {
+        title: 'Выйди на орбиту через портал',
+        hint: 'Орбита Квантика должна пройти через портал-кольцо. Бонус: задень кристалл в дальней точке.',
+        when: 'hypot(ball.x - ' + L5_PX + ', ball.y - ' + L5_PY + ') < ' + L5_PR,
+        fail: 't > 14',
+        stars: [
+          { when: 'hypot(ball.x - ' + L5_CX + ', ball.y - ' + L5_CY + ') < ' + L5_CR, label: 'Собрал кристалл' },
+          { when: 't*1000 <= 4200', label: 'Быстро (≤4.2 с)' }
+        ]
+      }
+    }
+  };
+
+  /* Уровень 6: «Гравитационный манёвр» — капстоун главы. Гравитация тянет вниз,
+     но в центре поля — притягивающий колодец (пружина к центру), искривляющий путь.
+     Брось Квантика так, чтобы колодец завернул его дугу в портал в дальнем верхнем
+     углу. Комбинируем бросок под углом, гравитацию и центральную силу. */
+  var L6_WELL_X = 5, L6_WELL_Y = 3;
+  var L6_PX = 9.4, L6_PY = 5.6, L6_PR = 1.0;     // портал в дальнем верхнем углу
+  var L6_CX = 5, L6_CY = 4.3, L6_CR = 0.85;      // кристалл над колодцем (на восходящей дуге)
+  var slingshot6 = {
+    id: 'phys-slingshot-6',
+    title: 'Гравиманёвр',
+    chapter: 'dynamics',
+    order: 6,
+    unlockStars: 8,
+    par_ms: 3400,
+    subject: 'physics',
+    hint: 'Гравитация тянет вниз, а колодец в центре притягивает к себе. Брось Квантика так, чтобы колодец завернул его дугу в портал в дальнем верхнем углу. Подбери угол, скорость и силу колодца.',
+    spec: {
+      specVersion: 1,
+      meta: { title: 'Гравитационный манёвр', desc: 'Гравитация + центральная сила: манёвр у колодца.' },
+      viewport: { xmin: -1, xmax: 11, ymin: -1, ymax: 8, grid: true, axes: true, bg: BG },
+      params: [
+        { name: 'theta', label: 'Угол', min: 20, max: 80, step: 1, value: 55, unit: '°' },
+        { name: 'v', label: 'Скорость', min: 8, max: 22, step: 0.5, value: 14, unit: 'м/с' },
+        { name: 'g', label: 'Сила колодца', min: 0, max: 16, step: 0.5, value: 6 }
+      ],
+      physics: {
+        enabled: true,
+        gravity: { x: 0, y: -9.8 },
+        springs: [
+          { a: [L6_WELL_X, L6_WELL_Y], b: 'ball', k: 'g', length: 0 }
+        ]
+      },
+      objects: [
+        { type: 'segment', x1: -1, y1: 0, x2: 11, y2: 0, color: GROUND, width: 3 },
+        // колодец-масса
+        { type: 'circle', x: L6_WELL_X, y: L6_WELL_Y, r: 0.3, color: '#F59E0B', width: 0, fill: '#F59E0B', glow: true, glowColor: '#F59E0B' },
+        { type: 'label', x: L6_WELL_X, y: L6_WELL_Y - 0.9, text: 'колодец', color: '#F59E0B', size: 11 }
+      ].concat(crystalObjs(L6_CX, L6_CY, L6_CR), portalObjs(L6_PX, L6_PY, L6_PR), [
+        hero(0, 0.2, 'v*cos(theta*pi/180)', 'v*sin(theta*pi/180)'),
+        { type: 'readout', label: 'сила', expr: 'g', precision: 1 },
+        { type: 'readout', label: 'θ', expr: 'theta', unit: '°', precision: 0 }
+      ]),
+      goal: {
+        title: 'Манёвром в портал',
+        hint: 'Используй колодец, чтобы завернуть дугу Квантика в дальний верхний портал. Бонус: задень кристалл на восходящей дуге.',
+        when: 'hypot(ball.x - ' + L6_PX + ', ball.y - ' + L6_PY + ') < ' + L6_PR,
+        fail: 'ball.y < -1 || t > 10',
+        stars: [
+          { when: 'hypot(ball.x - ' + L6_CX + ', ball.y - ' + L6_CY + ') < ' + L6_CR, label: 'Собрал кристалл' },
+          { when: 't*1000 <= 3400', label: 'Быстро (≤3.4 с)' }
+        ]
+      }
+    }
+  };
+
+  var LEVELS = [artillery1, arc2, bounce3, pendulum4, orbit5, slingshot6];
+
+  /* Метаданные глав (созвездий) — для заголовков/оформления карты. */
+  var CHAPTERS = {
+    kinematics: { key: 'kinematics', title: 'Кинематика', subtitle: 'Полёт и гравитация', accent: '#22D3EE' },
+    dynamics:   { key: 'dynamics',   title: 'Динамика',   subtitle: 'Силы, пружины, орбиты', accent: '#A78BFA' }
+  };
 
   function list() { return LEVELS.slice(); }
   function get(id) {
     for (var i = 0; i < LEVELS.length; i++) if (LEVELS[i].id === id) return LEVELS[i];
     return null;
   }
+  function chapter(key) { return CHAPTERS[key] || { key: key, title: key, subtitle: '', accent: '#22D3EE' }; }
 
-  global.QuantikLevels = { list: list, get: get, LEVELS: LEVELS };
+  global.QuantikLevels = {
+    list: list, get: get, chapter: chapter,
+    LEVELS: LEVELS, CHAPTERS: CHAPTERS
+  };
 
 })(typeof window !== 'undefined' ? window : this);
diff --git a/frontend/js/game/map.js b/frontend/js/game/map.js
new file mode 100644
index 0000000..aa91792
--- /dev/null
+++ b/frontend/js/game/map.js
@@ -0,0 +1,385 @@
+'use strict';
+/* ════════════════════════════════════════════════════════════════════════
+   Квантик — Законы Мира · Карта-созвездие (Фаза 2).
+
+   Рисует мир как звёздную карту: каждая глава (chapter) — отдельное созвездие,
+   уровни — узлы-«звёзды», соединённые линиями по порядку. Узел показывает статус
+   (заблокирован / доступен / пройден + число звёзд). По клику на доступный узел —
+   колбэк onPlay(level).
+
+   Зависит от:
+     window.QuantikLevels    — реестр уровней (Ф1/Ф2)
+     window.QuantikProgress  — чистая логика прогресса/разблокировки/XP (Ф2)
+     window.PetSprite        — нарратор-Квантик (SVG)
+
+   window.QuantikMap.create({ host, headerHost, onPlay, getSkin, onSkin }) -> {
+     render(progressMap),     // перерисовать карту + шапку под новый прогресс
+     destroy()
+   }
+
+   ⛔ Без эмодзи — звёзды/замки/иконки только inline SVG. Без eval/Function.
+   ════════════════════════════════════════════════════════════════════════ */
+(function (global) {
+
+  var doc = global.document;
+  var NS = 'http://www.w3.org/2000/svg';
+
+  function el(tag, cls, html) {
+    var n = doc.createElement(tag);
+    if (cls) n.className = cls;
+    if (html != null) n.innerHTML = html;
+    return n;
+  }
+  function svgEl(tag, attrs) {
+    var n = doc.createElementNS(NS, tag);
+    if (attrs) for (var k in attrs) if (attrs.hasOwnProperty(k)) n.setAttribute(k, attrs[k]);
+    return n;
+  }
+
+  /* ── inline SVG иконки (без эмодзи) ── */
+  function starPath() { return 'M12 2 15.1 8.6 22 9.3 17 14.1 18.2 21 12 17.6 5.8 21 7 14.1 2 9.3 8.9 8.6 Z'; }
+  function starSvg(filled, size) {
+    var s = size || 16;
+    var fill = filled ? '#FBBF24' : 'none';
+    var stroke = filled ? '#FBBF24' : 'rgba(148,163,184,0.55)';
+    return '<svg class="ic" viewBox="0 0 24 24" width="' + s + '" height="' + s + '" fill="' + fill +
+      '" stroke="' + stroke + '" stroke-width="1.5" stroke-linejoin="round"><path d="' + starPath() + '"/></svg>';
+  }
+  function lockSvg(size) {
+    var s = size || 18;
+    return '<svg class="ic" viewBox="0 0 24 24" width="' + s + '" height="' + s + '" fill="none" ' +
+      'stroke="rgba(226,232,240,0.85)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">' +
+      '<rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>';
+  }
+  function playSvg(size) {
+    var s = size || 18;
+    return '<svg class="ic" viewBox="0 0 24 24" width="' + s + '" height="' + s + '" fill="currentColor" ' +
+      'stroke="none"><path d="M8 5.5 19 12 8 18.5 Z"/></svg>';
+  }
+  function checkSvg(size) {
+    var s = size || 18;
+    return '<svg class="ic" viewBox="0 0 24 24" width="' + s + '" height="' + s + '" fill="none" ' +
+      'stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">' +
+      '<path d="M4 12.5 10 18.5 20 6"/></svg>';
+  }
+
+  /* ── Раскладка узлов созвездия ──────────────────────────────────────────
+     Для каждой главы раскладываем её уровни по «созвездию»: лёгкая зигзаг-дуга
+     внутри своего вертикального пояса. Координаты в % ширины ленты главы. */
+  function layoutNodes(levels) {
+    var n = levels.length;
+    var pts = [];
+    for (var i = 0; i < n; i++) {
+      // x идёт слева-направо, y — мягкий зигзаг (созвездие, не прямая)
+      var x = n === 1 ? 50 : (12 + (76 * i / (n - 1)));
+      var y = 50 + (i % 2 === 0 ? -16 : 16) + (i % 3 === 0 ? 6 : -4);
+      pts.push({ x: x, y: y });
+    }
+    return pts;
+  }
+
+  /* ── Звёздное небо (статичные точки на canvas-фоне через SVG) ──────────── */
+  function buildStarfield(seedCount) {
+    var g = svgEl('g', { class: 'qm-stars' });
+    var rnd = mulberry32(0x51ec7 + seedCount);
+    for (var i = 0; i < seedCount; i++) {
+      var cx = rnd() * 100, cy = rnd() * 100;
+      var r = 0.08 + rnd() * 0.22;
+      var op = 0.25 + rnd() * 0.55;
+      var c = svgEl('circle', { cx: cx, cy: cy, r: r, fill: '#E2E8F0', opacity: op.toFixed(2) });
+      c.style.setProperty('--tw', (1.6 + rnd() * 3).toFixed(2) + 's');
+      c.style.setProperty('--td', (rnd() * 3).toFixed(2) + 's');
+      c.classList.add('qm-tw');
+      g.appendChild(c);
+    }
+    return g;
+  }
+  function mulberry32(a) {
+    return function () {
+      a |= 0; a = a + 0x6D2B79F5 | 0;
+      var t = Math.imul(a ^ a >>> 15, 1 | a);
+      t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+      return ((t ^ t >>> 14) >>> 0) / 4294967296;
+    };
+  }
+
+  /* ════════════════════════ Создание карты ════════════════════════ */
+  function create(opts) {
+    opts = opts || {};
+    var host = opts.host;
+    var headerHost = opts.headerHost;
+    var onPlay = typeof opts.onPlay === 'function' ? opts.onPlay : function () {};
+    var getSkin = typeof opts.getSkin === 'function' ? opts.getSkin : function () { return 'cyan'; };
+    var onSkin = typeof opts.onSkin === 'function' ? opts.onSkin : function () {};
+    if (!host) return null;
+
+    var Levels = global.QuantikLevels;
+    var Prog = global.QuantikProgress;
+    if (!Levels || !Prog) return null;
+
+    var revealTimer = null;
+
+    function clearReveal() { if (revealTimer) { clearTimeout(revealTimer); revealTimer = null; } }
+
+    /* ── Шапка: нарратор + XP-бар + всего звёзд + скины ── */
+    function renderHeader(progressMap) {
+      if (!headerHost) return;
+      headerHost.innerHTML = '';
+
+      var levels = Levels.list();
+      var xp = Prog.computeXp(levels, progressMap);
+      var pl = Prog.playerLevel(xp);
+      var tStars = Prog.totalStars(levels, progressMap);
+      var maxStars = levels.reduce(function (s, L) { return s + (L.spec && L.spec.goal && L.spec.goal.stars ? L.spec.goal.stars.length : 0); }, 0);
+
+      var wrap = el('div', 'qm-header-inner');
+
+      // Нарратор-Квантик (mood по уровню игрока)
+      var mood = pl.level >= 5 ? 'ecstatic' : (pl.level >= 2 ? 'happy' : 'neutral');
+      var narr = el('div', 'qm-narrator');
+      if (global.PetSprite) {
+        var petLvl = Math.min(8, Math.max(1, pl.level));
+        narr.innerHTML = '<div class="qm-pet">' + global.PetSprite.render(petLvl, mood, [], getSkin(), 0, 'none') + '</div>';
+      }
+      var bubble = el('div', 'qm-bubble');
+      bubble.appendChild(el('div', 'qm-bubble-t', narrLine(pl, tStars, maxStars)));
+      narr.appendChild(bubble);
+      wrap.appendChild(narr);
+
+      // XP / уровень игрока
+      var stats = el('div', 'qm-stats');
+      var lvlBox = el('div', 'qm-level');
+      lvlBox.innerHTML = '<span class="qm-level-num">' + pl.level + '</span><span class="qm-level-lbl">уровень Квантика</span>';
+      stats.appendChild(lvlBox);
+
+      var xpBox = el('div', 'qm-xpbox');
+      var xpHead = el('div', 'qm-xp-head');
+      xpHead.innerHTML = '<span>' + xp + ' XP</span><span class="qm-xp-next">' +
+        (pl.xpForNext > 0 ? ('до ур. ' + (pl.level + 1) + ': ' + Math.max(0, pl.xpForNext - pl.xpInto) + ' XP') : 'максимум') + '</span>';
+      xpBox.appendChild(xpHead);
+      var bar = el('div', 'qm-xp-bar');
+      var fill = el('div', 'qm-xp-fill');
+      fill.style.width = '0%';
+      bar.appendChild(fill);
+      xpBox.appendChild(bar);
+      stats.appendChild(xpBox);
+
+      // всего звёзд
+      var starBox = el('div', 'qm-starcount');
+      starBox.innerHTML = starSvg(true, 18) + '<span>' + tStars + ' / ' + maxStars + '</span>';
+      stats.appendChild(starBox);
+
+      wrap.appendChild(stats);
+
+      // Скины
+      wrap.appendChild(buildSkinPicker(xp, tStars));
+
+      headerHost.appendChild(wrap);
+
+      // анимация XP-бара (после вставки в DOM)
+      requestAnimationFrame(function () {
+        fill.style.width = (pl.progress01 * 100).toFixed(1) + '%';
+      });
+    }
+
+    function narrLine(pl, tStars, maxStars) {
+      if (tStars === 0) return 'Привет! Я — Квантик. Помоги мне починить законы мира — выбери уровень и подкрути формулы.';
+      if (tStars >= maxStars) return 'Все звёзды собраны! Ты настоящий мастер законов мира.';
+      if (pl.level >= 5) return 'Невероятно! Уровень ' + pl.level + '. Осталось всего ' + (maxStars - tStars) + ' звёзд.';
+      if (pl.level >= 3) return 'Отлично идём — уровень ' + pl.level + '. Звёзды открывают новые созвездия.';
+      return 'Уже ' + tStars + ' звёзд! Собирай больше, чтобы открыть новые уровни.';
+    }
+
+    /* Палитра скинов: первые открыты, остальные — за XP/звёзды. */
+    var SKIN_GATES = [
+      { key: 'cyan', name: 'Циан', need: 0 },
+      { key: 'purple', name: 'Аметист', need: 0 },
+      { key: 'green', name: 'Изумруд', needStars: 2 },
+      { key: 'pink', name: 'Магента', needStars: 4 },
+      { key: 'gold', name: 'Золото', needStars: 7 },
+      { key: 'blue', name: 'Сапфир', needXp: 600 },
+      { key: 'orange', name: 'Янтарь', needXp: 1000 },
+      { key: 'indigo', name: 'Индиго', needStars: 11 }
+    ];
+    function skinUnlocked(g, xp, stars) {
+      if (g.needStars && stars < g.needStars) return false;
+      if (g.needXp && xp < g.needXp) return false;
+      if (g.need && stars < g.need) return false;
+      return true;
+    }
+    function buildSkinPicker(xp, stars) {
+      var box = el('div', 'qm-skins');
+      box.appendChild(el('div', 'qm-skins-lbl', 'Скин'));
+      var row = el('div', 'qm-skins-row');
+      var cur = getSkin();
+      var pal = (global.PetSprite && global.PetSprite.PALETTES) || {};
+      SKIN_GATES.forEach(function (g) {
+        var unlocked = skinUnlocked(g, xp, stars);
+        var sw = el('button', 'qm-skin' + (cur === g.key ? ' active' : '') + (unlocked ? '' : ' locked'));
+        sw.type = 'button';
+        sw.style.setProperty('--sk', pal[g.key] || '#06D6E0');
+        sw.title = unlocked ? g.name : (g.name + ' — ' + skinReq(g));
+        sw.setAttribute('aria-label', g.name + (unlocked ? '' : ' (заблокирован)'));
+        if (!unlocked) sw.innerHTML = '<span class="qm-skin-lock">' + lockSvg(12) + '</span>';
+        if (unlocked) {
+          sw.addEventListener('click', function () { onSkin(g.key); });
+        } else {
+          sw.disabled = true;
+        }
+        row.appendChild(sw);
+      });
+      box.appendChild(row);
+      return box;
+    }
+    function skinReq(g) {
+      if (g.needStars) return 'нужно ' + g.needStars + ' звёзд';
+      if (g.needXp) return 'нужно ' + g.needXp + ' XP';
+      return 'заблокирован';
+    }
+
+    /* ── Тело карты: созвездия по главам ── */
+    function renderMap(progressMap) {
+      clearReveal();
+      host.innerHTML = '';
+
+      var groups = Prog.groupByChapter(Levels.list());
+      var allLevels = Levels.list();
+      var revealOrder = []; // узлы для поэтапного появления
+
+      groups.forEach(function (grp, gi) {
+        var meta = Levels.chapter(grp.chapter);
+        var section = el('section', 'qm-constellation');
+        section.style.setProperty('--accent', meta.accent || '#22D3EE');
+
+        // заголовок главы
+        var head = el('div', 'qm-con-head');
+        head.innerHTML = '<span class="qm-con-title">' + escapeHtml(meta.title) + '</span>' +
+          '<span class="qm-con-sub">' + escapeHtml(meta.subtitle || '') + '</span>';
+        // прогресс главы
+        var cStars = 0, cMax = 0;
+        grp.levels.forEach(function (L) {
+          cStars += Prog.starsFor(L.id, progressMap);
+          cMax += (L.spec && L.spec.goal && L.spec.goal.stars) ? L.spec.goal.stars.length : 0;
+        });
+        var cbadge = el('span', 'qm-con-stars', starSvg(true, 14) + ' ' + cStars + '/' + cMax);
+        head.appendChild(cbadge);
+        section.appendChild(head);
+
+        // поле созвездия
+        var field = el('div', 'qm-field');
+        var pts = layoutNodes(grp.levels);
+
+        // SVG-слой: звёздное небо + линии-связи
+        var svg = svgEl('svg', { class: 'qm-svg', viewBox: '0 0 100 100', preserveAspectRatio: 'none' });
+        svg.appendChild(buildStarfield(46 + gi * 7));
+        // линии между последовательными узлами
+        for (var li = 0; li < pts.length - 1; li++) {
+          var a = pts[li], b = pts[li + 1];
+          var nextUnlocked = Prog.isUnlocked(grp.levels[li + 1], progressMap, allLevels);
+          var line = svgEl('line', {
+            x1: a.x, y1: a.y, x2: b.x, y2: b.y,
+            class: 'qm-link' + (nextUnlocked ? ' on' : '')
+          });
+          svg.appendChild(line);
+        }
+        field.appendChild(svg);
+
+        // узлы-уровни
+        grp.levels.forEach(function (L, idx) {
+          var status = Prog.nodeStatus(L, progressMap, allLevels);
+          var node = buildNode(L, status, progressMap, allLevels, pts[idx]);
+          field.appendChild(node);
+          revealOrder.push(node);
+        });
+
+        section.appendChild(field);
+        host.appendChild(section);
+      });
+
+      // поэтапное появление узлов
+      staggerReveal(revealOrder);
+    }
+
+    function buildNode(level, status, progressMap, allLevels, pt) {
+      var stars = Prog.starsFor(level.id, progressMap);
+      var total = (level.spec && level.spec.goal && level.spec.goal.stars) ? level.spec.goal.stars.length : 0;
+
+      var node = el('button', 'qm-node qm-' + status);
+      node.type = 'button';
+      node.style.left = pt.x + '%';
+      node.style.top = pt.y + '%';
+      node.setAttribute('data-level', level.id);
+
+      // ядро узла
+      var core = el('span', 'qm-node-core');
+      var icon = status === 'locked' ? lockSvg(20)
+        : (status === 'completed' ? '<span class="qm-node-order">' + level.order + '</span>' : playSvg(18));
+      core.innerHTML = icon;
+      node.appendChild(core);
+
+      // подпись
+      var label = el('span', 'qm-node-label', escapeHtml(level.title));
+      node.appendChild(label);
+
+      // звёзды узла (для пройденных) или порог (для заблокированных)
+      if (status === 'completed' && total > 0) {
+        var sb = el('span', 'qm-node-stars');
+        var html = '';
+        for (var i = 0; i < total; i++) html += starSvg(i < stars, 13);
+        sb.innerHTML = html;
+        node.appendChild(sb);
+      } else if (status === 'locked') {
+        var need = Prog.starsToUnlock(level, progressMap, allLevels);
+        var hint = el('span', 'qm-node-need', starSvg(true, 11) + ' ещё ' + need);
+        node.appendChild(hint);
+      }
+
+      if (status === 'locked') {
+        node.disabled = true;
+        node.setAttribute('aria-disabled', 'true');
+        node.title = 'Заблокировано — собери больше звёзд в предыдущих уровнях';
+      } else {
+        node.title = level.title + (status === 'completed' ? ' — пройдено' : ' — играть');
+        node.addEventListener('click', function () { onPlay(level); });
+      }
+      node.setAttribute('aria-label', level.title + ' (' +
+        (status === 'locked' ? 'заблокировано' : status === 'completed' ? ('пройдено, ' + stars + ' из ' + total + ' звёзд') : 'доступно') + ')');
+
+      return node;
+    }
+
+    function staggerReveal(nodes) {
+      nodes.forEach(function (n) { n.classList.add('qm-pre'); });
+      var i = 0;
+      function step() {
+        if (i >= nodes.length) { revealTimer = null; return; }
+        nodes[i].classList.remove('qm-pre');
+        nodes[i].classList.add('qm-in');
+        i++;
+        revealTimer = setTimeout(step, 70);
+      }
+      revealTimer = setTimeout(step, 120);
+    }
+
+    function escapeHtml(s) {
+      return String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+
+    function render(progressMap) {
+      progressMap = progressMap || {};
+      renderHeader(progressMap);
+      renderMap(progressMap);
+    }
+
+    function destroy() {
+      clearReveal();
+      if (host) host.innerHTML = '';
+      if (headerHost) headerHost.innerHTML = '';
+    }
+
+    return { render: render, destroy: destroy };
+  }
+
+  global.QuantikMap = { create: create };
+
+})(typeof window !== 'undefined' ? window : this);
diff --git a/frontend/js/game/progress-logic.js b/frontend/js/game/progress-logic.js
new file mode 100644
index 0000000..2ce8883
--- /dev/null
+++ b/frontend/js/game/progress-logic.js
@@ -0,0 +1,195 @@
+'use strict';
+/* ════════════════════════════════════════════════════════════════════════
+   Квантик — Законы Мира · ЧИСТАЯ логика прогресса (Фаза 2).
+
+   Никакого DOM/сети/движка — только функции над данными. Это делает их
+   тривиально тестируемыми (headless vm) и переносимыми на сервер позже.
+
+   ВХОД везде:
+     levels      — массив записей уровней (форма QuantikLevels): { id, chapter,
+                   order, par_ms?, unlockStars?, ... }.
+     progressMap — объект { [level_id]: { best_stars, best_time_ms, attempts } },
+                   агрегируется из LS.gameProgressList() (см. fromProgressList).
+
+   ⛔ Без eval/Function. Без побочных эффектов.
+   ════════════════════════════════════════════════════════════════════════ */
+(function (global) {
+
+  /* Превратить ответ /api/game/progress ([{level_id, best_stars, ...}]) в карту. */
+  function fromProgressList(list) {
+    var map = {};
+    if (!Array.isArray(list)) return map;
+    for (var i = 0; i < list.length; i++) {
+      var row = list[i];
+      if (row && row.level_id != null) map[row.level_id] = row;
+    }
+    return map;
+  }
+
+  /* Лучшее число звёзд по уровню (0, если не пройден). */
+  function starsFor(levelId, progressMap) {
+    var p = progressMap && progressMap[levelId];
+    var s = p ? p.best_stars : 0;
+    return (typeof s === 'number' && s > 0) ? s : 0;
+  }
+
+  /* Пройден ли уровень (есть хотя бы одна звезда == достигнута цель). */
+  function isCompleted(levelId, progressMap) {
+    return starsFor(levelId, progressMap) > 0;
+  }
+
+  /* Сумма лучших звёзд по всем уровням. */
+  function totalStars(levels, progressMap) {
+    var sum = 0;
+    for (var i = 0; i < levels.length; i++) sum += starsFor(levels[i].id, progressMap);
+    return sum;
+  }
+
+  /* ── Разблокировка ────────────────────────────────────────────────────────
+     Уровень открыт, если СУММА звёзд во ВСЕХ предыдущих уровнях той же главы
+     (по полю order) ≥ level.unlockStars. Первый уровень главы (минимальный order
+     или unlockStars==0) открыт всегда. Глава открывается, если открыт её первый
+     уровень — он гейтится суммой звёзд предыдущих глав через unlockStars==0
+     первого уровня (по умолчанию) ИЛИ явным порогом.
+
+     Чистая функция: вход — уровень + карта прогресса + ВЕСЬ список (для подсчёта
+     «предыдущих» по order). Возвращает bool. */
+  function isUnlocked(level, progressMap, levels) {
+    if (!level) return false;
+    var need = (typeof level.unlockStars === 'number') ? level.unlockStars : 0;
+    if (need <= 0) return true;                 // нет порога — всегда доступен
+    // звёзды, набранные во всех уровнях с меньшим глобальным order
+    var have = 0;
+    for (var i = 0; i < levels.length; i++) {
+      var L = levels[i];
+      if (L.id === level.id) continue;
+      if ((L.order || 0) < (level.order || 0)) {
+        have += starsFor(L.id, progressMap);
+      }
+    }
+    return have >= need;
+  }
+
+  /* Статус узла для карты: 'completed' | 'available' | 'locked'. */
+  function nodeStatus(level, progressMap, levels) {
+    if (isCompleted(level.id, progressMap)) return 'completed';
+    if (isUnlocked(level, progressMap, levels)) return 'available';
+    return 'locked';
+  }
+
+  /* ── XP ────────────────────────────────────────────────────────────────────
+     XP = сумма (звёзды × STAR_XP) + бонус за каждый пройденный уровень
+     (COMPLETE_XP) + бонус за «par» (3-я звезда == уложился в норматив времени,
+     она и так считается звездой; дополнительный PAR_BONUS за первое прохождение
+     уровня в принципе). Детерминированная функция от карты прогресса. */
+  var STAR_XP = 100;       // за каждую звезду
+  var COMPLETE_XP = 40;    // за факт прохождения уровня (≥1 звезда)
+
+  function computeXp(levels, progressMap) {
+    var xp = 0;
+    for (var i = 0; i < levels.length; i++) {
+      var id = levels[i].id;
+      var s = starsFor(id, progressMap);
+      if (s > 0) {
+        xp += s * STAR_XP + COMPLETE_XP;
+      }
+    }
+    return xp;
+  }
+
+  /* ── Уровень игрока ──────────────────────────────────────────────────────
+     Порог уровня растёт линейно-нарастающе: уровень N требует кумулятивно
+     XP_PER_LEVEL_BASE·N·(N+1)/2 … упрощаем до квадратичной обратной формулы.
+     playerLevel(xp) -> { level, xpInto, xpForNext, progress01, totalForLevel }.
+     level начинается с 1. */
+  var XP_STEP = 240;       // базовый шаг XP (level n требует n*XP_STEP суммарно для перехода)
+
+  // Кумулятивный XP, нужный чтобы ДОСТИЧЬ уровня L (L>=1). level 1 = 0 XP.
+  function xpForLevel(L) {
+    if (L <= 1) return 0;
+    // сумма k=1..L-1 of k*XP_STEP = XP_STEP * (L-1)*L/2
+    return XP_STEP * (L - 1) * L / 2;
+  }
+
+  function playerLevel(xp) {
+    if (!(xp > 0)) xp = 0;
+    var L = 1;
+    // найти максимальный L, чей порог <= xp
+    while (xpForLevel(L + 1) <= xp) L++;
+    var base = xpForLevel(L);
+    var next = xpForLevel(L + 1);
+    var span = next - base;
+    var into = xp - base;
+    return {
+      level: L,
+      xp: xp,
+      xpInto: into,
+      xpForNext: span,
+      totalForNext: next,
+      progress01: span > 0 ? Math.min(1, into / span) : 1
+    };
+  }
+
+  /* ── Группировка по главам ────────────────────────────────────────────────
+     Возвращает массив { chapter, levels:[...] } в порядке появления глав;
+     уровни внутри главы сортируются по order. */
+  function groupByChapter(levels) {
+    var order = [];
+    var byKey = {};
+    for (var i = 0; i < levels.length; i++) {
+      var L = levels[i];
+      var key = L.chapter || 'misc';
+      if (!byKey[key]) { byKey[key] = { chapter: key, levels: [] }; order.push(key); }
+      byKey[key].levels.push(L);
+    }
+    return order.map(function (k) {
+      var g = byKey[k];
+      g.levels = g.levels.slice().sort(function (a, b) { return (a.order || 0) - (b.order || 0); });
+      return g;
+    });
+  }
+
+  /* Следующий разблокированный непройденный уровень после данного (по глоб. order),
+     или null. Используется кнопкой «Дальше». */
+  function nextPlayable(currentId, levels, progressMap) {
+    var sorted = levels.slice().sort(function (a, b) { return (a.order || 0) - (b.order || 0); });
+    var idx = -1;
+    for (var i = 0; i < sorted.length; i++) if (sorted[i].id === currentId) { idx = i; break; }
+    // сначала ищем следующий по порядку доступный (предпочтительно непройденный)
+    for (var j = idx + 1; j < sorted.length; j++) {
+      if (isUnlocked(sorted[j], progressMap, levels)) return sorted[j];
+    }
+    return null;
+  }
+
+  /* Сколько ещё звёзд нужно, чтобы открыть уровень (для подсказки на замке). */
+  function starsToUnlock(level, progressMap, levels) {
+    var need = (typeof level.unlockStars === 'number') ? level.unlockStars : 0;
+    if (need <= 0) return 0;
+    var have = 0;
+    for (var i = 0; i < levels.length; i++) {
+      var L = levels[i];
+      if (L.id === level.id) continue;
+      if ((L.order || 0) < (level.order || 0)) have += starsFor(L.id, progressMap);
+    }
+    return Math.max(0, need - have);
+  }
+
+  global.QuantikProgress = {
+    fromProgressList: fromProgressList,
+    starsFor: starsFor,
+    isCompleted: isCompleted,
+    totalStars: totalStars,
+    isUnlocked: isUnlocked,
+    nodeStatus: nodeStatus,
+    computeXp: computeXp,
+    playerLevel: playerLevel,
+    xpForLevel: xpForLevel,
+    groupByChapter: groupByChapter,
+    nextPlayable: nextPlayable,
+    starsToUnlock: starsToUnlock,
+    // константы (для отображения/тестов)
+    STAR_XP: STAR_XP, COMPLETE_XP: COMPLETE_XP, XP_STEP: XP_STEP
+  };
+
+})(typeof window !== 'undefined' ? window : this);
diff --git a/frontend/js/game/quantik-game.js b/frontend/js/game/quantik-game.js
index 6971ca4..ff5619d 100644
--- a/frontend/js/game/quantik-game.js
+++ b/frontend/js/game/quantik-game.js
@@ -1,19 +1,26 @@
 'use strict';
 /* ════════════════════════════════════════════════════════════════════════
-   Квантик — Законы Мира · логика игровой страницы (Фаза 1, MVP).
+   Квантик — Законы Мира · логика игрового уровня (Фаза 2).
 
    Монтирует уровень-спеку через SimEngine.mount (тот же движок, что lab.html
    и sim-builder.html). «Игровой режим» включается САМ наличием блока goal в
-   спеке (Фаза 0: HUD с целью/звёздами появляется автоматически). Управление —
-   собственные слайдеры params движка + кнопки Запуск/Сброс. На победу
-   (inst.onGoal) шлём результат на сервер и показываем экран успеха.
+   спеке (Фаза 0). На победу (inst.onGoal) шлём результат на сервер и показываем
+   экран успеха с нарратором-Квантиком; реакция нарратора зависит от числа звёзд.
 
-   window.QuantikGame.start({ host, level }) -> инстанс движка (или null).
+   Фаза 2:
+   - Скин Квантика (colorKey из палитр PetSprite, localStorage 'quantik-skin')
+     тинтует glow-точку героя в уровне и нарратора.
+   - Экран успеха активирует «Дальше» (переход к следующему уровню) через колбэк.
+   - Интро-карточка с нарратором перед стартом уровня.
+
+   window.QuantikGame.start({ host, level, skin?, onNext?, onMap?, hasNext?, resolveNext? }) -> инстанс.
    ⛔ Без eval/Function. Уровни — данные из window.QuantikLevels.
    ════════════════════════════════════════════════════════════════════════ */
 (function (global) {
 
   var doc = global.document;
+  var SKIN_KEY = 'quantik-skin';
+  var DEFAULT_SKIN = 'cyan';
 
   function el(tag, cls, html) {
     var n = doc.createElement(tag);
@@ -22,7 +29,42 @@
     return n;
   }
 
-  /* Inline SVG звезды (заполненная / контур) — без эмодзи (правило проекта). */
+  /* ── Скин ──────────────────────────────────────────────────────────────── */
+  function getSkin() {
+    try {
+      var v = global.localStorage && global.localStorage.getItem(SKIN_KEY);
+      if (v && global.PetSprite && global.PetSprite.PALETTES && global.PetSprite.PALETTES[v]) return v;
+    } catch (_e) {}
+    return DEFAULT_SKIN;
+  }
+  function setSkin(key) {
+    try { if (global.localStorage) global.localStorage.setItem(SKIN_KEY, key); } catch (_e) {}
+  }
+  function skinColor(key) {
+    var pal = (global.PetSprite && global.PetSprite.PALETTES) || {};
+    return pal[key || getSkin()] || '#06D6E0';
+  }
+
+  /* Тинтуем героя уровня (объект с id 'ball') цветом скина — БЕЗ исполнения,
+     просто переписываем цветовые поля спеки-копии перед монтированием. */
+  function tintHeroSpec(spec, skinKey) {
+    var color = skinColor(skinKey);
+    // глубокая копия (спека — данные, без функций) чтобы не мутировать реестр
+    var copy = JSON.parse(JSON.stringify(spec));
+    if (Array.isArray(copy.objects)) {
+      for (var i = 0; i < copy.objects.length; i++) {
+        var o = copy.objects[i];
+        if (o && o.id === 'ball') {
+          o.color = color;
+          if (o.glow) o.glowColor = color;
+          if (o.trail) o.trailColor = color;
+        }
+      }
+    }
+    return copy;
+  }
+
+  /* ── Inline SVG звезды ── */
   function starSvg(filled) {
     var fill = filled ? '#FBBF24' : 'none';
     var stroke = filled ? '#FBBF24' : '#64748B';
@@ -33,25 +75,64 @@
 
   function fmtTime(ms) {
     if (!ms && ms !== 0) return '—';
-    var s = ms / 1000;
-    return s.toFixed(2) + ' с';
+    return (ms / 1000).toFixed(2) + ' с';
   }
 
-  /* ── Экран успеха (DOM-оверлей страницы, поверх сцены) ─────────────────── */
-  function buildSuccessOverlay(state) {
+  function petSvg(mood, skinKey) {
+    if (!global.PetSprite) return '';
+    return global.PetSprite.render(4, mood, [], skinKey || getSkin(), 0, 'none');
+  }
+
+  /* ── Интро-карточка уровня (нарратор «почини закон…») ───────────────────── */
+  function buildIntro(level, skinKey) {
+    var overlay = el('div', 'qg-overlay qg-intro');
+    var card = el('div', 'qg-card qg-card-intro');
+
+    var pet = el('div', 'qg-intro-pet', petSvg('happy', skinKey));
+    card.appendChild(pet);
+
+    card.appendChild(el('div', 'qg-card-kicker', 'Почини закон'));
+    card.appendChild(el('div', 'qg-card-title', escapeText(level.title)));
+    var goalT = (level.spec && level.spec.goal && level.spec.goal.title) || '';
+    if (goalT) card.appendChild(el('div', 'qg-intro-goal', escapeText(goalT)));
+    if (level.hint) card.appendChild(el('div', 'qg-intro-hint', escapeText(level.hint)));
+
+    var actions = el('div', 'qg-actions');
+    var btnGo = el('button', 'btn-primary qg-btn', 'Начать');
+    btnGo.type = 'button';
+    var btnBack = el('button', 'btn-ghost qg-btn', 'К карте');
+    btnBack.type = 'button';
+    actions.appendChild(btnGo);
+    actions.appendChild(btnBack);
+    card.appendChild(actions);
+
+    overlay.appendChild(card);
+    return { overlay: overlay, btnGo: btnGo, btnBack: btnBack };
+  }
+
+  /* ── Экран успеха ───────────────────────────────────────────────────────── */
+  function buildSuccessOverlay(state, ctx) {
+    ctx = ctx || {};
     var got = (state && state.stars && state.stars.got) || 0;
     var total = (state && state.stars && state.stars.total) || 0;
 
     var overlay = el('div', 'qg-overlay');
     var card = el('div', 'qg-card');
 
+    // нарратор: все звёзды (>=2) -> ecstatic, иначе happy
+    var mood = (total > 0 && got >= total && total >= 2) ? 'ecstatic' : (got >= 1 ? 'happy' : 'neutral');
+    if (global.PetSprite) {
+      var pet = el('div', 'qg-success-pet', petSvg(mood, ctx.skin));
+      card.appendChild(pet);
+    }
+
     card.appendChild(el('div', 'qg-card-title', 'Уровень пройден!'));
 
-    // звёзды: total «слотов», got заполнено
     var starsBox = el('div', 'qg-stars');
     var slots = Math.max(total, got, 1);
     for (var i = 0; i < slots; i++) {
-      var w = el('span', 'qg-star');
+      var w = el('span', 'qg-star' + (i < got ? ' qg-star-on' : ''));
+      w.style.setProperty('--si', i);
       w.innerHTML = starSvg(i < got);
       starsBox.appendChild(w);
     }
@@ -67,12 +148,10 @@
     card.appendChild(stats);
 
     var actions = el('div', 'qg-actions');
-    var btnAgain = el('button', 'btn-primary qg-btn', 'Ещё раз');
+    var btnAgain = el('button', 'btn-ghost qg-btn', 'Ещё раз');
     btnAgain.type = 'button';
-    var btnNext = el('button', 'btn-ghost qg-btn', 'Дальше');
+    var btnNext = el('button', 'btn-primary qg-btn', ctx.hasNext ? 'Дальше' : 'К карте');
     btnNext.type = 'button';
-    btnNext.disabled = true;               // MVP: следующий уровень появится в Фазе 2
-    btnNext.title = 'Скоро: больше уровней';
     actions.appendChild(btnAgain);
     actions.appendChild(btnNext);
     card.appendChild(actions);
@@ -81,8 +160,15 @@
     return { overlay: overlay, btnAgain: btnAgain, btnNext: btnNext };
   }
 
+  function escapeText(s) {
+    return String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
   /* ── Старт уровня ───────────────────────────────────────────────────────
-     host — DOM-контейнер сцены. level — запись из QuantikLevels (с .spec/.id). */
+     opts: { host, level, skin?, onNext?(level), onMap?(), hasNext?, resolveNext? }
+     resolveNext?() -> Promise<{ hasNext, next }>: пересчитать следующий уровень
+       ПОСЛЕ перезагрузки прогресса (победа разблокирует след. уровень). Если не
+       задан / упал — откатываемся к pre-win opts.hasNext (ровно прежнее поведение). */
   function start(opts) {
     opts = opts || {};
     var host = opts.host;
@@ -90,7 +176,9 @@
     if (!host || !level || !level.spec) return null;
     if (!global.SimEngine || !global.SimExpr) return null;
 
-    var inst = global.SimEngine.mount(host, level.spec);
+    var skin = opts.skin || getSkin();
+    var spec = tintHeroSpec(level.spec, skin);
+    var inst = global.SimEngine.mount(host, spec);
 
     var overlayRef = null;
     function clearOverlay() {
@@ -100,34 +188,72 @@
       overlayRef = null;
     }
 
-    function showSuccess(state) {
+    // submitDone — promise сабмита прогресса (или null, если сабмита нет).
+    // Экран успеха показываем СРАЗУ (без ожидания сети) с pre-win hasNext, затем
+    // ОБНОВЛЯЕМ кнопку «Дальше/К карте», когда пересчёт после победы (resolveNext)
+    // увидит свежеразблокированный уровень. Это чинит «мёртвую Дальше» на первом
+    // прохождении (0 звёзд → доступен только L1 → pre-win nextPlayable == null).
+    function showSuccess(state, submitDone) {
       clearOverlay();
-      overlayRef = buildSuccessOverlay(state);
+      // Текущее решение кнопки. Замыкания ниже читают его «живьём» (мутируем var),
+      // поэтому если игрок успеет нажать раньше пересчёта — отработает фолбэк,
+      // а после пересчёта та же кнопка уже ведёт «Дальше».
+      var canNext = typeof opts.onNext === 'function' && !!opts.hasNext;
+      overlayRef = buildSuccessOverlay(state, { skin: skin, hasNext: canNext });
       overlayRef.btnAgain.addEventListener('click', function () {
         clearOverlay();
         try { inst.reset(); } catch (_e) {}
       });
-      // Дальше — заглушка для MVP (нет следующего уровня).
+      overlayRef.btnNext.addEventListener('click', function () {
+        clearOverlay();
+        if (canNext) opts.onNext(level);
+        else if (typeof opts.onMap === 'function') opts.onMap();
+      });
       host.appendChild(overlayRef.overlay);
+
+      if (typeof opts.resolveNext !== 'function') return;
+      var btn = overlayRef.btnNext;
+      // Пересчёт идёт ПОСЛЕ сабмита: победа сначала сохраняется на сервере, и только
+      // затем перезагрузка прогресса увидит разблокированный уровень.
+      Promise.resolve(submitDone)
+        .catch(function () {})              // сабмит best-effort: даже при ошибке пробуем пересчёт
+        .then(function () { return opts.resolveNext(); })
+        .then(function (r) {
+          // overlayRef мог смениться/закрыться, пока шла сеть — обновляем только «свою» кнопку.
+          if (!r || !overlayRef || overlayRef.btnNext !== btn) return;
+          var next = typeof opts.onNext === 'function' && !!r.hasNext;
+          if (next === canNext) return;     // ничего не изменилось
+          canNext = next;
+          btn.textContent = next ? 'Дальше' : 'К карте';
+        })
+        .catch(function () {});             // пересчёт упал → остаёмся на pre-win решении
     }
 
     inst.onGoal(function (res) {
       if (!res || !res.won) return;
       var got = (res.stars && res.stars.got) || 0;
-      // Время победы — мировое t из движка (Ф0): res.timeMs.
       var payload = { time_ms: res.timeMs, stars: got };
-      // Submit best-effort: экран успеха показываем независимо от сети.
+      var submitDone = null;
       try {
         if (global.LS && global.LS.gameProgressSubmit) {
-          global.LS.gameProgressSubmit(level.id, payload).catch(function () { /* офлайн — ок */ });
+          submitDone = global.LS.gameProgressSubmit(level.id, payload);
+          if (submitDone && typeof submitDone.catch === 'function') submitDone.catch(function () {});
         }
-      } catch (_e) { /* нет клиента — всё равно показываем успех */ }
-      showSuccess(res);
+      } catch (_e) {}
+      showSuccess(res, submitDone);
     });
 
     return inst;
   }
 
-  global.QuantikGame = { start: start, buildSuccessOverlay: buildSuccessOverlay };
+  global.QuantikGame = {
+    start: start,
+    buildSuccessOverlay: buildSuccessOverlay,
+    buildIntro: buildIntro,
+    getSkin: getSkin,
+    setSkin: setSkin,
+    skinColor: skinColor,
+    SKIN_KEY: SKIN_KEY
+  };
 
 })(typeof window !== 'undefined' ? window : this);
diff --git a/frontend/quantik.html b/frontend/quantik.html
index ea1cad7..3e4a1b8 100644
--- a/frontend/quantik.html
+++ b/frontend/quantik.html
@@ -10,46 +10,222 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" />
   <script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
   <style>
-    /* ── Раскладка игровой страницы ── */
+    /* ════════════════════ Игровая страница «Квантик» ════════════════════ */
     .qg-wrap { display: flex; flex-direction: column; height: 100vh; min-height: 0; }
+
+    /* ── Topbar ── */
     .qg-top {
       display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
-      padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--surface);
-      flex-shrink: 0;
+      padding: 11px 20px; border-bottom: 1px solid rgba(148,163,184,0.18);
+      background: #11132A; flex-shrink: 0; position: relative; z-index: 3;
     }
-    .qg-title { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--text); white-space: nowrap; }
-    .qg-sub { font-size: .8rem; color: var(--text-3); flex: 1; min-width: 0; }
-    .qg-pill { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 10px; border-radius: 99px; background: rgba(34,211,238,0.14); color: #0e7c8a; }
+    .qg-title { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 1.02rem; color: #E2E8F0; white-space: nowrap; }
+    .qg-sub  { font-size: .8rem; color: #94A3B8; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    .qg-pill { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 10px; border-radius: 99px; background: rgba(34,211,238,0.16); color: #67E8F9; }
+    .qg-back {
+      display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .82rem; font-weight: 600;
+      color: #CBD5E1; background: rgba(148,163,184,0.12); border: 1px solid rgba(148,163,184,0.2);
+      border-radius: 99px; padding: 5px 13px; cursor: pointer; transition: .16s;
+    }
+    .qg-back:hover { background: rgba(34,211,238,0.16); color: #67E8F9; border-color: rgba(34,211,238,0.35); }
+    .qg-back .ic { width: 15px; height: 15px; }
 
-    /* сцена: на всю площадь, тёмный фон (full-bleed root движка растягивается inset:0) */
+    /* ════════════════════ Карта-созвездие ════════════════════ */
+    .qm-root {
+      flex: 1; min-height: 0; position: relative; overflow-y: auto; overflow-x: hidden;
+      background:
+        radial-gradient(1100px 700px at 78% -10%, rgba(167,139,250,0.16), transparent 60%),
+        radial-gradient(900px 600px at 12% 8%, rgba(34,211,238,0.13), transparent 55%),
+        radial-gradient(700px 800px at 50% 120%, rgba(244,114,182,0.10), transparent 60%),
+        linear-gradient(180deg, #0B0B1A 0%, #0D0D1F 55%, #0A0A16 100%);
+    }
+    /* атмосферное зерно поверх фона */
+    .qm-root::before {
+      content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
+      background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
+      background-size: 3px 3px;
+    }
+
+    /* ── Шапка карты (нарратор + XP + скины) ── */
+    .qm-header { position: relative; z-index: 2; padding: 22px 26px 8px; }
+    .qm-header-inner {
+      display: grid; grid-template-columns: minmax(240px, 1.4fr) minmax(280px, 1.1fr) auto;
+      gap: 18px; align-items: center; max-width: 1180px; margin: 0 auto;
+    }
+    @media (max-width: 920px) { .qm-header-inner { grid-template-columns: 1fr; } }
+
+    .qm-narrator { display: flex; align-items: center; gap: 14px; }
+    .qm-pet { width: 76px; height: 80px; flex-shrink: 0; filter: drop-shadow(0 8px 22px rgba(34,211,238,0.28)); }
+    .qm-pet svg { width: 100%; height: 100%; }
+    .qm-bubble {
+      position: relative; background: rgba(20,22,44,0.78); border: 1px solid rgba(148,163,184,0.18);
+      border-radius: 14px; padding: 12px 15px; backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0,0,0,0.35);
+    }
+    .qm-bubble::before {
+      content: ''; position: absolute; left: -7px; top: 50%; transform: translateY(-50%) rotate(45deg);
+      width: 12px; height: 12px; background: rgba(20,22,44,0.78); border-left: 1px solid rgba(148,163,184,0.18); border-bottom: 1px solid rgba(148,163,184,0.18);
+    }
+    .qm-bubble-t { color: #DCE3EE; font-size: .86rem; line-height: 1.45; }
+
+    .qm-stats { display: flex; align-items: center; gap: 18px; }
+    .qm-level { display: flex; flex-direction: column; align-items: center; line-height: 1; flex-shrink: 0; }
+    .qm-level-num {
+      font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 2rem;
+      background: linear-gradient(135deg, #67E8F9, #A78BFA); -webkit-background-clip: text; background-clip: text; color: transparent;
+    }
+    .qm-level-lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: #8B9AAE; margin-top: 4px; max-width: 84px; text-align: center; }
+    .qm-xpbox { flex: 1; min-width: 160px; }
+    .qm-xp-head { display: flex; justify-content: space-between; font-size: .74rem; color: #CBD5E1; margin-bottom: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
+    .qm-xp-next { color: #8B9AAE; font-weight: 500; }
+    .qm-xp-bar { height: 9px; border-radius: 99px; background: rgba(148,163,184,0.18); overflow: hidden; }
+    .qm-xp-fill {
+      height: 100%; border-radius: 99px; width: 0;
+      background: linear-gradient(90deg, #22D3EE, #A78BFA);
+      box-shadow: 0 0 14px rgba(103,232,249,0.5);
+      transition: width .9s cubic-bezier(.22,.61,.36,1);
+    }
+    .qm-starcount {
+      display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
+      font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 1rem; color: #FBBF24; font-variant-numeric: tabular-nums;
+    }
+
+    /* ── Скины ── */
+    .qm-skins { display: flex; flex-direction: column; gap: 7px; }
+    .qm-skins-lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: #8B9AAE; font-weight: 700; }
+    .qm-skins-row { display: flex; gap: 7px; flex-wrap: wrap; max-width: 220px; }
+    .qm-skin {
+      width: 30px; height: 30px; border-radius: 50%; cursor: pointer; padding: 0;
+      background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--sk) 70%, #fff), var(--sk) 70%);
+      border: 2px solid rgba(255,255,255,0.18); position: relative; transition: transform .14s, box-shadow .14s, border-color .14s;
+    }
+    .qm-skin:hover:not(.locked) { transform: scale(1.12); }
+    .qm-skin.active { border-color: #fff; box-shadow: 0 0 0 2px var(--sk), 0 0 14px var(--sk); }
+    .qm-skin.locked { filter: grayscale(.7) brightness(.5); cursor: not-allowed; }
+    .qm-skin-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
+    .qm-skin-lock .ic { width: 12px; height: 12px; }
+
+    /* ── Тело: созвездия ── */
+    .qm-body { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 8px 26px 60px; }
+    .qm-constellation { margin-top: 18px; }
+    .qm-con-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; padding-left: 4px; }
+    .qm-con-title {
+      font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 1.1rem; color: #E8EDF5;
+      position: relative; padding-left: 16px;
+    }
+    .qm-con-title::before {
+      content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
+      width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent);
+    }
+    .qm-con-sub { font-size: .8rem; color: #8B9AAE; flex: 1; }
+    .qm-con-stars { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: #FBBF24; font-weight: 700; font-variant-numeric: tabular-nums; }
+
+    .qm-field { position: relative; height: 220px; margin-top: 2px; }
+    @media (max-width: 620px) { .qm-field { height: 280px; } }
+    .qm-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+    .qm-link { stroke: rgba(148,163,184,0.22); stroke-width: .35; stroke-dasharray: 1.4 1.6; }
+    .qm-link.on { stroke: var(--accent); stroke-opacity: .55; stroke-dasharray: none; stroke-width: .45; }
+    .qm-tw { animation: qmTwinkle var(--tw, 2.4s) ease-in-out var(--td, 0s) infinite; transform-box: fill-box; transform-origin: center; }
+    @keyframes qmTwinkle { 0%,100% { opacity: .25; } 50% { opacity: .9; } }
+
+    /* ── Узлы ── */
+    .qm-node {
+      position: absolute; transform: translate(-50%, -50%); z-index: 2;
+      display: flex; flex-direction: column; align-items: center; gap: 6px;
+      background: none; border: none; cursor: pointer; font: inherit; padding: 0;
+      transition: transform .2s;
+    }
+    .qm-node-core {
+      width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
+      position: relative; transition: transform .18s, box-shadow .18s;
+    }
+    .qm-node-core .ic { color: #fff; }
+    .qm-node-label { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: .76rem; color: #CBD5E1; white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
+    .qm-node-stars { display: inline-flex; gap: 1px; }
+    .qm-node-need { display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; color: #94A3B8; font-weight: 600; }
+
+    /* доступный узел */
+    .qm-available .qm-node-core {
+      background: radial-gradient(circle at 35% 30%, #34D399, #0E9F6E);
+      box-shadow: 0 0 0 4px rgba(52,211,153,0.18), 0 8px 24px rgba(16,185,129,0.4);
+      animation: qmPulse 2.4s ease-in-out infinite;
+    }
+    @keyframes qmPulse {
+      0%,100% { box-shadow: 0 0 0 4px rgba(52,211,153,0.18), 0 8px 24px rgba(16,185,129,0.4); }
+      50% { box-shadow: 0 0 0 8px rgba(52,211,153,0.10), 0 10px 32px rgba(16,185,129,0.55); }
+    }
+    .qm-available:hover { transform: translate(-50%, -50%) scale(1.07); }
+    .qm-available:hover .qm-node-core { transform: scale(1.05); }
+
+    /* пройденный узел */
+    .qm-completed .qm-node-core {
+      background: radial-gradient(circle at 35% 30%, #67E8F9, #2563EB);
+      box-shadow: 0 0 0 3px rgba(34,211,238,0.2), 0 6px 20px rgba(37,99,235,0.4);
+    }
+    .qm-completed:hover { transform: translate(-50%, -50%) scale(1.06); }
+    .qm-node-order { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 1.15rem; color: #fff; }
+
+    /* заблокированный узел */
+    .qm-locked { cursor: not-allowed; }
+    .qm-locked .qm-node-core {
+      background: rgba(30,33,58,0.85); border: 1.5px solid rgba(148,163,184,0.22);
+      box-shadow: inset 0 2px 10px rgba(0,0,0,0.4);
+    }
+    .qm-locked .qm-node-label { color: #6B7A90; }
+
+    /* фокус для клавиатуры */
+    .qm-node:focus-visible { outline: none; }
+    .qm-node:focus-visible .qm-node-core { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--accent, #22D3EE); }
+
+    /* поэтапное появление */
+    .qm-node.qm-pre { opacity: 0; transform: translate(-50%, -40%) scale(.6); }
+    .qm-node.qm-in { animation: qmNodeIn .5s cubic-bezier(.22,1.2,.4,1) forwards; }
+    @keyframes qmNodeIn {
+      from { opacity: 0; transform: translate(-50%, -40%) scale(.6); }
+      to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+    }
+
+    /* ════════════════════ Сцена уровня ════════════════════ */
     .qg-stage { flex: 1; min-height: 0; position: relative; background: #0D0D1A; overflow: hidden; }
     .qg-stage .sim-spec-root { position: absolute; inset: 0; }
-
     .qg-fallback { padding: 40px; color: #cbd5e1; font-family: 'Manrope', sans-serif; max-width: 520px; }
 
-    /* ── Экран успеха (оверлей) ── */
+    .qg-view { display: none; flex: 1; min-height: 0; }
+    .qg-view.show { display: flex; flex-direction: column; }
+
+    /* ── Оверлеи (интро / успех) ── */
     .qg-overlay {
       position: absolute; inset: 0; z-index: 20;
       display: flex; align-items: center; justify-content: center;
-      background: rgba(7, 7, 18, 0.72); backdrop-filter: blur(4px);
+      background: rgba(7, 7, 18, 0.74); backdrop-filter: blur(5px);
     }
     .qg-card {
-      background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
-      padding: 28px 30px; width: min(420px, 90vw); text-align: center;
-      box-shadow: 0 20px 60px rgba(0,0,0,0.45);
-      animation: qg-pop .22s ease;
+      background: linear-gradient(180deg, #15173099, #0F1024EE), #14152C;
+      border: 1px solid rgba(148,163,184,0.18); border-radius: 20px;
+      padding: 26px 30px 24px; width: min(440px, 92vw); text-align: center;
+      box-shadow: 0 24px 70px rgba(0,0,0,0.55);
+      animation: qg-pop .26s cubic-bezier(.22,1.1,.4,1);
     }
-    @keyframes qg-pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
-    .qg-card-title { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--text); margin-bottom: 14px; }
+    @keyframes qg-pop { from { transform: scale(.9) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
+    .qg-card-kicker { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #67E8F9; margin-bottom: 4px; }
+    .qg-card-title { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 1.32rem; color: #EAF0F8; margin-bottom: 12px; }
+    .qg-intro-pet, .qg-success-pet { width: 92px; height: 96px; margin: 0 auto 6px; filter: drop-shadow(0 10px 26px rgba(34,211,238,0.3)); }
+    .qg-intro-pet svg, .qg-success-pet svg { width: 100%; height: 100%; }
+    .qg-success-pet { animation: qgBob 1.6s ease-in-out infinite; }
+    @keyframes qgBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
+    .qg-intro-goal { font-weight: 700; font-size: .98rem; color: #DCE3EE; margin-bottom: 8px; }
+    .qg-intro-hint { font-size: .85rem; color: #A8B4C6; line-height: 1.5; margin-bottom: 18px; max-width: 360px; margin-left: auto; margin-right: auto; }
+
     .qg-stars { display: flex; justify-content: center; gap: 6px; margin-bottom: 18px; }
     .qg-star { display: inline-flex; }
     .qg-star-svg { filter: drop-shadow(0 2px 6px rgba(251,191,36,0.4)); }
-    .qg-stats { display: flex; justify-content: center; gap: 22px; margin-bottom: 22px; }
+    .qg-star-on { animation: qgStarPop .45s cubic-bezier(.22,1.3,.4,1) backwards; animation-delay: calc(.12s * var(--si, 0) + .15s); }
+    @keyframes qgStarPop { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 70% { transform: scale(1.25) rotate(6deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
+    .qg-stats { display: flex; justify-content: center; gap: 22px; margin-bottom: 20px; }
     .qg-stat { display: flex; flex-direction: column; gap: 3px; }
-    .qg-stat-lbl { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
-    .qg-stat-val { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--text); font-variant-numeric: tabular-nums; }
+    .qg-stat-lbl { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #8B9AAE; }
+    .qg-stat-val { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 1.05rem; color: #EAF0F8; font-variant-numeric: tabular-nums; }
     .qg-actions { display: flex; justify-content: center; gap: 10px; }
-    .qg-btn { min-width: 110px; }
+    .qg-btn { min-width: 118px; }
   </style>
 </head>
 <body>
@@ -60,9 +236,25 @@
       <div class="qg-top">
         <span class="qg-title" id="qg-title">Квантик — Законы Мира</span>
         <span class="qg-sub"  id="qg-sub"></span>
+        <button class="qg-back" id="qg-back" type="button" style="display:none">
+          <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18 9 12 15 6"/></svg>
+          К карте
+        </button>
         <span class="qg-pill">Физика</span>
       </div>
-      <div class="qg-stage" id="qg-stage"></div>
+
+      <!-- Вид карты -->
+      <div class="qg-view show" id="qg-map-view">
+        <div class="qm-root">
+          <div class="qm-header" id="qg-map-header"></div>
+          <div class="qm-body"   id="qg-map-body"></div>
+        </div>
+      </div>
+
+      <!-- Вид уровня -->
+      <div class="qg-view" id="qg-level-view">
+        <div class="qg-stage" id="qg-stage"></div>
+      </div>
     </div>
   </main>
 </div>
@@ -71,48 +263,168 @@
 <script src="/js/sidebar.js"></script>
 <script src="/js/notifications.js"></script>
 <script src="/js/mobile.js"></script>
+<!-- модель питомца (нарратор-Квантик) -->
+<script src="/js/pet-sprite.js"></script>
 <!-- движок спек-симуляций (тот же путь, что lab.html / sim-builder.html) -->
 <script src="/js/labs/_sim_expr.js"></script>
 <script src="/js/labs/_sim_engine.js"></script>
 <!-- KaTeX для подписей сцены -->
 <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
-<!-- уровни (данные) + логика игры -->
+<!-- уровни (данные) + логика прогресса + карта + игра -->
 <script src="/js/game/levels.js"></script>
+<script src="/js/game/progress-logic.js"></script>
+<script src="/js/game/map.js"></script>
 <script src="/js/game/quantik-game.js"></script>
 <script>
 (function () {
   // Доступ: любой авторизованный пользователь (играют и ученики).
-  if (!LS.initPage()) { return; }   // initPage сам редиректит на /login, если не авторизован
+  if (!LS.initPage()) { return; }
 
-  var stage = document.getElementById('qg-stage');
+  var mapView = document.getElementById('qg-map-view');
+  var lvlView = document.getElementById('qg-level-view');
+  var stage   = document.getElementById('qg-stage');
+  var backBtn = document.getElementById('qg-back');
+  var titleEl = document.getElementById('qg-title');
+  var subEl   = document.getElementById('qg-sub');
 
-  if (!window.SimEngine || !window.SimExpr || !window.QuantikLevels || !window.QuantikGame) {
+  if (!window.SimEngine || !window.SimExpr || !window.QuantikLevels ||
+      !window.QuantikGame || !window.QuantikMap || !window.QuantikProgress) {
     stage.innerHTML = '<div class="qg-fallback">Движок игры не загрузился. Обновите страницу.</div>';
+    lvlView.classList.add('show'); mapView.classList.remove('show');
     return;
   }
 
-  // Уровень: ?level=<id> или первый из реестра (MVP — один уровень).
-  var params = new URLSearchParams(location.search);
-  var wantId = params.get('level');
-  var level = wantId ? window.QuantikLevels.get(wantId) : null;
-  if (!level) level = window.QuantikLevels.list()[0] || null;
+  var progressMap = {};   // { level_id: row }
+  var curInst = null;     // текущий инстанс движка уровня
+  var map = null;
 
-  if (!level) {
-    stage.innerHTML = '<div class="qg-fallback">Уровень не найден.</div>';
-    return;
+  function loadProgress() {
+    if (window.LS && window.LS.gameProgressList) {
+      return window.LS.gameProgressList()
+        .then(function (r) { progressMap = window.QuantikProgress.fromProgressList(r && r.progress); })
+        .catch(function () { progressMap = {}; });
+    }
+    return Promise.resolve();
   }
 
-  document.getElementById('qg-title').textContent = level.title || 'Квантик';
-  document.getElementById('qg-sub').textContent = level.hint || '';
-
-  var inst = window.QuantikGame.start({ host: stage, level: level });
-  if (!inst) {
-    stage.innerHTML = '<div class="qg-fallback">Не удалось запустить уровень.</div>';
-    return;
+  function destroyLevel() {
+    if (curInst) { try { curInst.destroy(); } catch (_e) {} curInst = null; }
+    stage.innerHTML = '';
   }
 
-  window.__quantik = inst; // для отладки
+  /* ── Показать карту ── */
+  function showMap() {
+    destroyLevel();
+    lvlView.classList.remove('show');
+    mapView.classList.add('show');
+    backBtn.style.display = 'none';
+    titleEl.textContent = 'Квантик — Законы Мира';
+    subEl.textContent = 'Карта мира — выбери уровень и почини закон';
+    history.replaceState(null, '', '/quantik');
+    // перезагрузить прогресс (мог обновиться после победы) и перерисовать
+    loadProgress().then(function () { map.render(progressMap); });
+  }
+
+  /* ── Запустить уровень (после интро) ── */
+  function launchLevel(level) {
+    destroyLevel();
+    mapView.classList.remove('show');
+    lvlView.classList.add('show');
+    backBtn.style.display = '';
+    titleEl.textContent = level.title || 'Квантик';
+    subEl.textContent = (level.spec && level.spec.goal && level.spec.goal.title) || level.hint || '';
+    history.replaceState(null, '', '/quantik?level=' + encodeURIComponent(level.id));
+
+    // Pre-win значение (фолбэк, если пересчёт после победы недоступен).
+    var nextLevel = window.QuantikProgress.nextPlayable(level.id, window.QuantikLevels.list(), progressMap);
+
+    curInst = window.QuantikGame.start({
+      host: stage,
+      level: level,
+      skin: window.QuantikGame.getSkin(),
+      hasNext: !!nextLevel,
+      // Победа разблокирует след. уровень → перезагружаем прогресс и пересчитываем
+      // «следующий доступный» на свежей карте, чтобы экран успеха показал «Дальше».
+      resolveNext: function () {
+        return loadProgress().then(function () {
+          var nx = window.QuantikProgress.nextPlayable(level.id, window.QuantikLevels.list(), progressMap);
+          return { hasNext: !!nx, next: nx };
+        });
+      },
+      onNext: function () {
+        // прогресс уже перезагружен в resolveNext → берём след. доступный из свежей карты
+        var nx = window.QuantikProgress.nextPlayable(level.id, window.QuantikLevels.list(), progressMap);
+        if (nx) openLevel(nx); else showMap();
+      },
+      onMap: showMap
+    });
+
+    if (!curInst) {
+      stage.innerHTML = '<div class="qg-fallback">Не удалось запустить уровень.</div>';
+    }
+  }
+
+  /* ── Открыть уровень: показать интро-карточку, потом launch ── */
+  function openLevel(level) {
+    destroyLevel();
+    mapView.classList.remove('show');
+    lvlView.classList.add('show');
+    backBtn.style.display = '';
+    titleEl.textContent = level.title || 'Квантик';
+    subEl.textContent = (level.spec && level.spec.goal && level.spec.goal.title) || '';
+
+    var intro = window.QuantikGame.buildIntro(level, window.QuantikGame.getSkin());
+    intro.btnGo.addEventListener('click', function () {
+      if (intro.overlay.parentNode) intro.overlay.parentNode.removeChild(intro.overlay);
+      launchLevel(level);
+    });
+    intro.btnBack.addEventListener('click', function () {
+      if (intro.overlay.parentNode) intro.overlay.parentNode.removeChild(intro.overlay);
+      showMap();
+    });
+    stage.appendChild(intro.overlay);
+  }
+
+  /* ── Карта ── */
+  map = window.QuantikMap.create({
+    host: document.getElementById('qg-map-body'),
+    headerHost: document.getElementById('qg-map-header'),
+    onPlay: function (level) { openLevel(level); },
+    getSkin: function () { return window.QuantikGame.getSkin(); },
+    onSkin: function (key) {
+      window.QuantikGame.setSkin(key);
+      map.render(progressMap);   // перерисовать (нарратор + активный свотч)
+    }
+  });
+
+  backBtn.addEventListener('click', showMap);
+
+  // Старт: если ?level=<id> в URL и уровень доступен — открыть его, иначе карта.
+  loadProgress().then(function () {
+    map.render(progressMap);
+    var params = new URLSearchParams(location.search);
+    var wantId = params.get('level');
+    if (wantId) {
+      var lvl = window.QuantikLevels.get(wantId);
+      if (lvl && window.QuantikProgress.isUnlocked(lvl, progressMap, window.QuantikLevels.list())) {
+        openLevel(lvl);
+        return;
+      }
+    }
+    showMapNoReload();
+  });
+
+  // показать карту без повторной загрузки прогресса (стартовый случай)
+  function showMapNoReload() {
+    lvlView.classList.remove('show');
+    mapView.classList.add('show');
+    backBtn.style.display = 'none';
+    titleEl.textContent = 'Квантик — Законы Мира';
+    subEl.textContent = 'Карта мира — выбери уровень и почини закон';
+  }
+
+  window.__quantik = { map: map, getInst: function () { return curInst; } };
 })();
 </script>
 </body>
diff --git a/plans/quantik-game/CONTEXT.md b/plans/quantik-game/CONTEXT.md
index 51b0e60..5669e5c 100644
--- a/plans/quantik-game/CONTEXT.md
+++ b/plans/quantik-game/CONTEXT.md
@@ -24,6 +24,20 @@
   `js/game/levels.js`, `js/game/quantik-game.js`, `tests/game.test.js`. Изменены: `server.js`,
   `js/api.js`, `js/sidebar.js`. `npm test` 251 pass / 8 baseline fail (game.test.js 13/13);
   lint:routes 0; миграция применяется чисто.
+- **Phase 2 реализован** (pending review): одиночный уровень превращён в **играбельный мир**.
+  Карта-созвездие (`frontend/js/game/map.js`, `window.QuantikMap`) на звёздном фоне: 6 физ-уровней
+  в 2 главах (Кинематика 1–3, Динамика 4–6), узлы-«звёзды» со статусом (locked/available/completed+
+  звёзды), линии-связи, поэтапное появление. Шапка: нарратор-Квантик (`PetSprite`), XP-бар + «уровень
+  Квантика», всего звёзд, скин-пикер (8 скинов, часть за XP/звёзды). Контент уровней расширен в
+  `levels.js` (метаданные `chapter/order/par_ms/unlockStars`, по 2 звезды: кристалл + норматив времени).
+  Разблокировка/XP/группировка — ЧИСТЫЕ функции в новом `frontend/js/game/progress-logic.js`
+  (`window.QuantikProgress`), покрыты тестом. Навигация: карта→интро(нарратор)→уровень→успех
+  (нарратор по звёздам)→карта; «Дальше» активирована (`nextPlayable`); скин тинтует героя+нарратора
+  (localStorage `quantik-skin`). **Backend НЕ тронут** — XP клиентская агрегация из `game_progress`.
+  Новые: `js/game/map.js`, `js/game/progress-logic.js`. Изменены: `quantik.html`, `js/game/levels.js`,
+  `js/game/quantik-game.js`. `node --check` все OK; смоуки (логика 16/16, рендер 7/7, winnability 6/6
+  на реальном движке) зелёные и удалены; `npm test` 259/251 pass / 8 baseline fail (без изменений);
+  lint:routes 0.
 
 ## Key Architecture Decisions
 - **«Атом» = блок `goal` в спеке** (булево SimExpr). Любой уровень = спека SimForge + `goal`.
diff --git a/plans/quantik-game/PLAN.md b/plans/quantik-game/PLAN.md
index 636ce24..b5940f9 100644
--- a/plans/quantik-game/PLAN.md
+++ b/plans/quantik-game/PLAN.md
@@ -60,7 +60,7 @@
 
 - [x] Phase 0: Слой целей в движке (goal/HUD/result) [domain: frontend] → [subplan](./phase-0-objective-layer.md)
 - [x] Phase 1: Оболочка игры + 1 физ-уровень + прогресс [domain: fullstack] → [subplan](./phase-1-shell-first-level.md)
-- [ ] Phase 2: Карта-созвездие + мир физ-уровней + XP/скины [domain: fullstack] → [subplan](./phase-2-map-world-xp.md)
+- [x] Phase 2: Карта-созвездие + мир физ-уровней + XP/скины [domain: fullstack] → [subplan](./phase-2-map-world-xp.md)
 - [ ] Phase 3: Граф-уровни (движение по f(x)) + зоны-препятствия [domain: fullstack] → [subplan](./phase-3-graph-levels.md)
 - [ ] Phase 4: Квантовые способности + SR-комнаты [domain: fullstack] → [subplan](./phase-4-quantum-abilities-sr.md)
 - [ ] Phase 5: Авторинг уровней в sim-builder + раздача классу [domain: fullstack] → [subplan](./phase-5-authoring-sharing.md)
@@ -72,7 +72,7 @@
 |-------|--------|--------|--------|-------|-----------|
 | Phase 0: Слой целей в движке | frontend | ✅ Done | ✅ | ✅ | ✅ |
 | Phase 1: Оболочка + 1 уровень + прогресс | fullstack | ✅ Done | ✅ | ✅ | ✅ |
-| Phase 2: Карта + мир + XP/скины | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
+| Phase 2: Карта + мир + XP/скины | fullstack | ✅ Done | ✅ (1 🟡 fixed) | ✅ | ✅ |
 | Phase 3: Граф-уровни + зоны | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
 | Phase 4: Квантовые способности + SR | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
 | Phase 5: Авторинг + раздача | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
diff --git a/plans/quantik-game/phase-2-map-world-xp.md b/plans/quantik-game/phase-2-map-world-xp.md
index 9bf9e62..ad283f3 100644
--- a/plans/quantik-game/phase-2-map-world-xp.md
+++ b/plans/quantik-game/phase-2-map-world-xp.md
@@ -1,6 +1,6 @@
 # Phase 2: Карта-созвездие + мир физ-уровней + XP/скины (MVP-мир)
 
-**Status:** ⬜ Not Started
+**Status:** ✅ Done (reviewed — PASS w/ notes; «Дальше» stale-hasNext 🟡 fixed; committed)
 **Parent plan:** [PLAN.md](./PLAN.md)
 **Domain:** fullstack
 
@@ -10,24 +10,24 @@
 победе. После этой фазы игра полноценно отгружаема.
 
 ## Tasks
-- [ ] Task 1: Контент — ~5–6 физ-уровней-спек (данные в `levels.js`), нарастающая сложность:
+- [x] Task 1: Контент — ~5–6 физ-уровней-спек (данные в `levels.js`), нарастающая сложность:
       артиллерия → перелёт через стену → отскок (restitution) → пружина/маятник → орбита/гравитация.
       Каждый: `goal` + 1–3 звезды + норматив времени (`par_ms`) для 3-й звезды.
-- [ ] Task 2: Структура «мир/глава»: метаданные уровня (id, title, chapter, order, par_ms, hint).
+- [x] Task 2: Структура «мир/глава»: метаданные уровня (id, title, chapter, order, par_ms, hint).
       Карта группирует по главам (созвездиям).
-- [ ] Task 3: Карта-созвездие `frontend/js/game/map.js` (+ разметка в quantik.html): узлы-уровни
+- [x] Task 3: Карта-созвездие `frontend/js/game/map.js` (+ разметка в quantik.html): узлы-уровни
       на SVG/canvas-фоне, линии-связи, статус (заблокирован/доступен/пройден + число звёзд).
       Разблокировка: уровень открыт, если набрано ≥ threshold звёзд в предыдущих (правило в данных).
-- [ ] Task 4: XP/уровень игрока: XP = сумма звёзд × коэффициент (+ бонус за par). Хранить в
+- [x] Task 4: XP/уровень игрока: XP = сумма звёзд × коэффициент (+ бонус за par). Хранить в
       прогрессе (расширить `game_progress` агрегацией на клиенте ИЛИ доб. поле/таблицу `game_player`).
       Полоса XP + «уровень Квантика» в шапке карты.
-- [ ] Task 5: Скины Квантика: выбор `colorKey` из палитр `PetSprite` (+ позже паттерны). Скин
+- [x] Task 5: Скины Квантика: выбор `colorKey` из палитр `PetSprite` (+ позже паттерны). Скин
       влияет на цвет glow-точки героя в уровне (param/проп движка) и на `PetSprite` на карте.
       Хранить выбор (localStorage сейчас; серверно — опц.). Разблокировка скинов по XP/звёздам.
-- [ ] Task 6: Нарратор: `PetSprite.render(...)` в интро уровня (краткая формулировка «почини закон…»)
+- [x] Task 6: Нарратор: `PetSprite.render(...)` в интро уровня (краткая формулировка «почини закон…»)
       и на экране победы (реакция по числу звёзд: happy/ecstatic). Реюз mood из pet-sprite.js.
-- [ ] Task 7: Навигация: карта → уровень → результат → возврат на карту с обновлённым статусом/XP.
-- [ ] Task 8: Тесты: разблокировка (логика чистой функцией — юнит-тест), агрегация XP; смоук карты.
+- [x] Task 7: Навигация: карта → уровень → результат → возврат на карту с обновлённым статусом/XP.
+- [x] Task 8: Тесты: разблокировка (логика чистой функцией — юнит-тест), агрегация XP; смоук карты.
 
 ## Files to Modify/Create
 - `frontend/js/game/levels.js` — контент мира (расширить).
@@ -53,4 +53,61 @@
 - [ ] Карта/навигация работают; existing тесты целы; lint baseline 0
 
 ## Handoff to Next Phase
-<!-- Заполняет агент-имплементер. -->
+
+### Архитектура карты (`frontend/js/game/map.js`)
+- `window.QuantikMap.create({ host, headerHost, onPlay(level), getSkin()->key, onSkin(key) }) -> { render(progressMap), destroy() }`.
+  - `render(progressMap)` рисует шапку (нарратор + XP-бар + всего звёзд + скин-пикер) в `headerHost`
+    и созвездия в `host`. `progressMap` — `{ [level_id]: row }` (см. `QuantikProgress.fromProgressList`).
+  - Узел созвездия (`buildNode`) — `<button class="qm-node qm-{locked|available|completed}">` с ядром
+    (`.qm-node-core`), подписью, звёздами/порогом. Позиция в % через `layoutNodes(levels)` (зигзаг-дуга).
+  - Статус узла = `QuantikProgress.nodeStatus`. Клик по available/completed → `onPlay(level)`.
+  - Звёздное небо — SVG `<circle class="qm-tw">` (мерцание CSS), линии-связи `<line class="qm-link[.on]">`.
+  - Поэтапное появление: `staggerReveal` снимает `.qm-pre`/ставит `.qm-in` через setTimeout (70 мс шаг).
+
+### Как добавить главу (созвездие)
+- В `levels.js`: дать новым уровням `chapter:'<key>'` + добавить запись в `CHAPTERS`
+  (`{ key, title, subtitle, accent }`). Карта группирует автоматически (`groupByChapter` сохраняет
+  порядок появления глав). Узлы внутри главы сортируются по `order`. Никаких правок map.js не нужно.
+- **Фаза 3 (граф-уровни) = НОВАЯ глава** (напр. `chapter:'functions'`): добавить уровни-спеки с
+  `objects:[{type:'plot',...}]` + `goal.when` по форме функции; `unlockStars` гейтит её за Динамику.
+  Узел рисуется тем же `buildNode` (тип спеки карте безразличен — она читает только метаданные).
+
+### Модуль логики прогресса (`frontend/js/game/progress-logic.js`, `window.QuantikProgress`)
+Чистые функции (без DOM/сети/eval) — переносимы на сервер, покрыты тестом:
+- `fromProgressList(list)` → карта `{level_id: row}` из ответа `/api/game/progress`.
+- `starsFor(id, map)` / `isCompleted(id, map)` / `totalStars(levels, map)`.
+- `isUnlocked(level, map, levels)` — уровень открыт, если Σ звёзд во ВСЕХ уровнях с меньшим `order`
+  ≥ `level.unlockStars` (порог в данных уровня). `unlockStars:0` (или нет) → всегда открыт.
+- `nodeStatus` / `starsToUnlock` — для карты.
+- `computeXp(levels, map)` = Σ(звёзды·`STAR_XP`=100 + `COMPLETE_XP`=40 за пройденный).
+- `playerLevel(xp)` → `{ level, xp, xpInto, xpForNext, progress01 }`. Шкала: `xpForLevel(L)=240·(L-1)L/2`.
+- `groupByChapter(levels)` → `[{ chapter, levels:[…sorted by order] }]`.
+- `nextPlayable(curId, levels, map)` → след. разблокированный уровень (для кнопки «Дальше») или null.
+
+### Скины
+- localStorage ключ **`quantik-skin`** (экспортирован `QuantikGame.SKIN_KEY`). Значение = `colorKey`
+  из `PetSprite.PALETTES` (валидируется при чтении, иначе fallback `'cyan'`).
+- `QuantikGame.getSkin()/setSkin(key)/skinColor(key)`. Тинт героя — `tintHeroSpec(spec, key)`:
+  глубокая копия спеки (JSON), переписывает `color/glowColor/trailColor` объекта с `id:'ball'`.
+  Гейты скинов — массив `SKIN_GATES` в map.js (needStars/needXp). 8 скинов.
+
+### Нарратор
+- `PetSprite.render(level, mood, [], colorKey, 0, 'none')` (DOM SVG-строка). Вызовы:
+  - Карта-шапка: `QuantikMap.renderHeader` (mood по уровню игрока: ecstatic≥5 / happy≥2 / neutral).
+  - Интро уровня: `QuantikGame.buildIntro(level, skin)` (mood `happy`).
+  - Экран успеха: `QuantikGame.buildSuccessOverlay(state, {skin, hasNext})` — mood `ecstatic`, если все
+    звёзды (got≥total и total≥2), иначе `happy`.
+
+### Навигация (inline-bootstrap в quantik.html)
+- Два вида: `#qg-map-view` (карта) и `#qg-level-view` (`#qg-stage` под движок). Переключение
+  классом `.show`. `showMap()` перезагружает прогресс (`LS.gameProgressList`) → `map.render`.
+  `openLevel→интро→launchLevel→onGoal→успех→onNext(nextPlayable)|onMap`. При смене уровня
+  ВСЕГДА `destroyLevel()` (= `inst.destroy()` + очистка `#qg-stage`) до нового mount (гоча Ф1).
+- Deep-link `?level=<id>` открывает уровень, если он разблокирован; иначе карта.
+
+### Решения/гочи (для ревью и Ф3+)
+- **XP/прогресс игрока — чисто клиентская агрегация** из `game_progress` (Ф1). Новых таблиц/роутов НЕТ
+  → lint:routes baseline 0 не тронут, бэкенд-тесты не изменились (259, 251 pass / 8 baseline fail).
+- Уровни 3/5/6 имеют «лёгкий» выигрышный путь, попутно дающий обе звезды; «честная» механика
+  (отскок/орбита/колодец) присутствует, но не единственно-возможна — НЕ блокер MVP (см. winnability).
+- На сервер агрегацию XP перенести легко: те же чистые функции в `progress-logic.js` (без DOM).