diff --git a/docs/TZ.md b/docs/TZ.md
index 294ba58..7bc0214 100644
--- a/docs/TZ.md
+++ b/docs/TZ.md
@@ -4,7 +4,7 @@
 
 | | |
 |---|---|
-| Версия ТЗ | 0.15 |
+| Версия ТЗ | 0.16 |
 | Дата | 2026-09-20 |
 | Статус | На обсуждении |
 
@@ -184,6 +184,15 @@
   можно перетаскивать (drag&drop). Рядом — уровень, **кошелёк** (баланс монет),
   **«последний росток»** (что и когда закрыто последним), **история по месяцам**
   (12 месяцев, столбики) и ачивки.
+  - **Отрисовка сцены** — пиксель-арт на **PixiJS 8** (WebGL): `nearest`
+    масштабирование без сглаживания, целочисленный «нативный пиксель» (матрицы
+    16px × 2 = 32px на клетку). Все спрайты (тайлы травы/дикой земли, изгородь,
+    домик, 6 видов растений × 3 стадии, декорации, кольца редкости, блёстки)
+    генерируются из пиксель-матриц прямо в коде — внешних файлов-ассетов нет.
+    Рендерер (`src/game/GardenRenderer.ts`) — обычный класс, **не** оборачивается
+    во Vue-reactive (deep-прокси ломает внутренние identity-проверки Pixi);
+    Pixi загружается динамическим импортом (отдельный чанк). Инвентарь, поповер
+    и drag-ghost — DOM поверх канваса.
 - **Две награды: опыт и монеты.** Опыт — «ранг садовника»: только растёт, ничего
   не открывает в магазине напрямую. Монеты — «валюта сада»: тратятся. Общий
   принцип: **контент открывается за опыт, покупается за монеты** — опыт (уровень)
@@ -359,4 +368,6 @@
 3. ~~**Оценка затрат к бюджету**~~ — **решено 2026-09-19**: оба поля (бюджет и оценка затрат) — ручные; валюта — глобальная настройка, выбирается один раз и применяется всюду (UAH, USD, EUR, GBP, PLN).
 4. **Оффлайн-режим** в PWA: нужен ли, или всегда онлайн?
 5. **Модель для Ollama**: какая конкретно модель и параметры (в конфиг, но нужно выбрать для проверки M2).
-6. **Практическое различие `cancelled` / `deferred`**: определения зафиксированы (3.4), но поведение в интерфейсе почти одинаковое — скрыть из активных списков и оставить доступным для возврата. Уточнить при проектировании представлений, нужны ли оба статуса или их поведение сольётся.
\ No newline at end of file
+6. **Практическое различие `cancelled` / `deferred`**: определения зафиксированы (3.4), но поведение в интерфейсе почти одинаковое — скрыть из активных списков и оставить доступным для возврата. Уточнить при проектировании представлений, нужны ли оба статуса или их поведение сольётся.
+7. **Анти-дюп награды за статус**: убедиться, что перевод задачи в «завершена» и обратно (и повторное закрытие) **не** начисляет XP/монеты/растение повторно — идемпотентность начисления при любых переключениях статуса (лазейка для дюпа награды). Проверить и покрыть тестом.
+8. ~~**Пиксель-арт сцена сада**~~ — **решено 2026-09-20**: сцена переведена на пиксель-арт (PixiJS 8, WebGL); спрайты генерируются из пиксель-матриц в коде (без внешних ассетов и лицензий), см. 3.13.
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index aa82a9d..156e32d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,6 +11,7 @@
         "dompurify": "^3.4.15",
         "gnexus-ui-kit": "git+https://git.gnexus.space/git/root/gnexus-ui-kit.git",
         "marked": "^18.0.13",
+        "pixi.js": "^8.20.1",
         "vue": "^3.5.0",
         "vue-i18n": "^11.4.12",
         "vue-router": "^4.5.0"
@@ -2171,6 +2172,12 @@
         "node": "^22.20 || ^24.12 || >=25"
       }
     },
+    "node_modules/@pixi/colord": {
+      "version": "2.9.6",
+      "resolved": "https://registry.npmjs.org/@pixi/colord/-/colord-2.9.6.tgz",
+      "integrity": "sha512-nezytU2pw587fQstUu1AsJZDVEynjskwOL+kibwcdxsMBFqPsFFNA7xl0ii/gXuDi6M0xj3mfRJj8pBSc2jCfA==",
+      "license": "MIT"
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-6.1.0.tgz",
@@ -2696,6 +2703,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/@types/earcut": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/earcut/-/earcut-3.0.0.tgz",
+      "integrity": "sha512-k/9fOUGO39yd2sCjrbAJvGDEQvRwRnQIZlBz43roGwUZo5SHAmyVvSFyaVVZkicRVCaDXPKlbxrUcBuJoSWunQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
@@ -2900,6 +2913,21 @@
       "integrity": "sha512-uksS7YGMR5NZyr4JNq0Rp+QyLns0ueaz20KwzIPW9R0LH1Vnt4E+XUM29PNseEbf1www2gOuhuDi5AKOIXag9Q==",
       "license": "MIT"
     },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.74",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.74.tgz",
+      "integrity": "sha512-lgiI4hbuLcI9unnm2cL/tvCaQU45dp0xcLWJh5uB/9MBGvIA4F8XIk7nSiBeg+K4xWGYwgZKn80LmERI5CxoTA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.15",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.15.tgz",
+      "integrity": "sha512-/5NV/vDALVFDXgLmfsy9TRCBlKwO2LNBFzpzvb9iIj+jR+eSc6DLYYvVOdivT/jm7MtU6TebYuRmzEOI7w40UA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.18.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.18.0.tgz",
@@ -3424,6 +3452,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/earcut": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.2.3.tgz",
+      "integrity": "sha512-vnS4AVwp1KHAF13i1vp1/2D5evWy3k5u/iW/B81QVsUZtV8cv2tU0b2VNFlqvh4kYwrFMDdjPCfAmfyJW9y14Q==",
+      "license": "ISC"
+    },
     "node_modules/ejs": {
       "version": "3.1.10",
       "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
@@ -3698,6 +3732,12 @@
         "url": "https://github.com/bgub/eta?sponsor=1"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3962,6 +4002,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gifuct-js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/gifuct-js/-/gifuct-js-2.1.2.tgz",
+      "integrity": "sha512-rI2asw77u0mGgwhV3qA+OEgYqaDn5UNqgs+Bx0FGwSpuqfYn+Ir6RQY5ENNQ8SbIiG/m5gVa7CD5RriO4f4Lsg==",
+      "license": "MIT",
+      "dependencies": {
+        "js-binary-schema-parser": "^2.0.3"
+      }
+    },
     "node_modules/glob": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-11.1.0.tgz",
@@ -4621,6 +4670,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/ismobilejs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-1.1.1.tgz",
+      "integrity": "sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw==",
+      "license": "MIT"
+    },
     "node_modules/jackspeak": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.2.3.tgz",
@@ -4655,6 +4710,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/js-binary-schema-parser": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/js-binary-schema-parser/-/js-binary-schema-parser-2.0.3.tgz",
+      "integrity": "sha512-xezGJmOb4lk/M1ZZLTR/jaBHQ4gG/lqQnJqdIv4721DMggsa1bDVlHXNeHYogaIEHD9vCRv0fcL4hMA+Coarkg==",
+      "license": "MIT"
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4914,6 +4975,12 @@
       "dev": true,
       "license": "BlueOak-1.0.0"
     },
+    "node_modules/parse-svg-path": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/parse-svg-path/-/parse-svg-path-0.2.0.tgz",
+      "integrity": "sha512-Tf7FFIrguPKQwzD4pWnYkR2VOv3raoHeKED80Bm+BYHI3KxC8KsgsGC5+fSMzAGDA6UEk4bHvmi+RsjmL3khpg==",
+      "license": "MIT"
+    },
     "node_modules/path-browserify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -4984,6 +5051,32 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pixi.js": {
+      "version": "8.21.0",
+      "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-8.21.0.tgz",
+      "integrity": "sha512-GJ/KqBtUuWDBPMQu2D0ZHsRCYOcWRjjKrpyC+3jPQI5JTqHMC5dH8l9sSyvoUT4qJidvRzs1fwFWRWceno2Ltw==",
+      "license": "MIT",
+      "workspaces": [
+        "examples",
+        "playground"
+      ],
+      "dependencies": {
+        "@pixi/colord": "^2.9.6",
+        "@types/earcut": "^3.0.0",
+        "@webgpu/types": "^0.1.69",
+        "@xmldom/xmldom": "^0.8.15",
+        "earcut": "^3.0.2",
+        "eventemitter3": "^5.0.1",
+        "gifuct-js": "^2.1.2",
+        "ismobilejs": "^1.1.1",
+        "parse-svg-path": "^0.2.0",
+        "tiny-lru": "^11.4.7"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/pixijs"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -5689,6 +5782,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/tiny-lru": {
+      "version": "11.4.7",
+      "resolved": "https://registry.npmjs.org/tiny-lru/-/tiny-lru-11.4.7.tgz",
+      "integrity": "sha512-w/Te7uMUVeH0CR8vZIjr+XiN41V+30lkDdK+NRIDCUYKKuL9VcmaUEmaPISuwGhLlrTGh5yu18lENtR9axSxYw==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.17",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 4d917c2..adc2021 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
     "dompurify": "^3.4.15",
     "gnexus-ui-kit": "git+https://git.gnexus.space/git/root/gnexus-ui-kit.git",
     "marked": "^18.0.13",
+    "pixi.js": "^8.20.1",
     "vue": "^3.5.0",
     "vue-i18n": "^11.4.12",
     "vue-router": "^4.5.0"
diff --git a/frontend/src/components/GardenScene.vue b/frontend/src/components/GardenScene.vue
index 0765533..d160136 100644
--- a/frontend/src/components/GardenScene.vue
+++ b/frontend/src/components/GardenScene.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
-// Сцена сада (ТЗ 3.13): SVG-карта с домиком в центре, растениями и декорациями.
-// Мелкая сетка (ячейка 20px), drag&drop со привязкой к ячейке, наложения разрешены.
-// Растение = закрытая задача (item_key — вид, rarity — редкость); клик — поповер роста.
-import { computed, ref } from 'vue'
+// Сцена сада (ТЗ 3.13): пиксель-арт на PixiJS (WebGL) — рендер в src/game/.
+// Этот компонент — тонкая обёртка: canvas-host, инвентарь-полоса (DOM),
+// поповер роста (DOM-оверлей) и drag из инвентаря. Растение = закрытая задача.
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { GardenItem, GardenState } from '../api'
+import { dataUrlFor } from '../game/pixelart'
+import { DECOR, PAL } from '../game/sprites'
+import type { GardenRenderer } from '../game/GardenRenderer'
 
 defineOptions({ name: 'GardenScene' })
 
@@ -20,351 +23,179 @@
 
 const { t } = useI18n()
 
-const CELL = 20
-const HOUSE_COLS = 4
-const HOUSE_ROWS = 3
-const HEDGE = 10 // ширина живой изгороди по границе
+const hostEl = ref<HTMLElement | null>(null)
+const invEl = ref<HTMLElement | null>(null)
+// shallowRef: внутри рендерера — Pixi-объекты; deep-reactive-прокси Vue ломает
+// identity-проверки Pixi (shared defaultScale) → TypeError при первом setHoverCell.
+const renderer = shallowRef<GardenRenderer | null>(null)
+const selected = ref<number | null>(null)
 
-const width = computed(() => props.state.grid.cols * CELL)
-const height = computed(() => props.state.grid.rows * CELL)
-
-// Домик в центре сетки (footprint 4×3 ячейки)
-const house = computed(() => ({
-  x: (props.state.grid.cols / 2 - HOUSE_COLS / 2) * CELL,
-  y: (props.state.grid.rows / 2 - HOUSE_ROWS / 2) * CELL,
-  w: HOUSE_COLS * CELL,
-  h: HOUSE_ROWS * CELL,
-}))
-
-// Растения и декорации в одном списке; z-порядок по y (дальние — позади).
 // Неразмещенные декорации (x/y null) — в инвентаре под сценой.
-const items = computed(() =>
-  [...props.state.items]
-    .filter((i) => i.x !== null && i.y !== null)
-    .sort((a, b) => (a.y ?? 0) - (b.y ?? 0) || (a.x ?? 0) - (b.x ?? 0)),
-)
-
 const inventoryItems = computed(() =>
   props.state.items.filter((i) => i.x === null || i.y === null),
 )
+const selectedItem = computed(
+  () => props.state.items.find((i) => i.id === selected.value) ?? null,
+)
 
-// Размер растения по стадии и цвет по редкости
-function stageSize(stage: number): number {
-  return [20, 28, 36][Math.min(stage, 2)]
+// --- Превью чипов/ghost из тех же матриц, что рендерит Pixi ---
+
+const previewCache = new Map<string, string>()
+
+function chipPreview(item: GardenItem): string {
+  const key = item.item_key ?? 'flowerbed'
+  const hit = previewCache.get(key)
+  if (hit) return hit
+  const url = dataUrlFor(DECOR[key] ?? DECOR.flowerbed!, PAL, 3)
+  previewCache.set(key, url)
+  return url
 }
 
-function plantTitle(item: GardenItem): string {
-  const species = item.item_key ? t(`garden.speciesNames.${item.item_key}`) : ''
-  const stageNames = [t('garden.stage.sprout'), t('garden.stage.bush'), t('garden.stage.bloom')]
-  const stage = stageNames[Math.min(item.stage, 2)]
-  return item.task_title ? `${species} · ${stage} — ${item.task_title}` : `${species} · ${stage}`
-}
+// --- Цена следующей стадии роста (цены из state, редкость растения) ---
 
-function decorTitle(item: GardenItem): string {
-  return item.item_key ? t(`garden.decorNames.${item.item_key}`) : ''
-}
-
-// Цена следующей стадии роста (UPGRADE_COSTS из state, редкость растения)
 function upgradeCost(item: GardenItem): number | null {
   if (item.kind !== 'plant' || item.stage >= 2) return null
   const pair = props.state.upgrade_costs[item.rarity ?? 'common']
   return pair ? pair[item.stage] : null
 }
 
-// --- Drag & drop: pointer events, snap к ячейке, emit на отпускании ---
-// Источник перетаскивания: со сцены или из инвентаря (призрак у курсора).
-
-const svgEl = ref<SVGSVGElement | null>(null)
-const invEl = ref<HTMLElement | null>(null)
-const drag = ref<{ id: number; dx: number; dy: number; moved: boolean } | null>(null)
-const dragPos = ref<{ id: number; x: number; y: number } | null>(null)
-// Перетаскивание из инвентаря: призрак следует за курсором
-const ghost = ref<{ id: number; icon: string; x: number; y: number } | null>(null)
-
-function cellFromEvent(e: PointerEvent, offX: number, offY: number): { x: number; y: number } {
-  const svg = svgEl.value
-  if (!svg) return { x: 0, y: 0 }
-  const rect = svg.getBoundingClientRect()
-  const scale = width.value / rect.width
-  const px = (e.clientX - rect.left) * scale - offX
-  const py = (e.clientY - rect.top) * scale - offY
-  const maxCols = props.state.grid.cols
-  const maxRows = props.state.grid.rows
-  return {
-    x: Math.max(0, Math.min(maxCols - 1, Math.round(px / CELL))),
-    y: Math.max(0, Math.min(maxRows - 1, Math.round(py / CELL))),
-  }
+function onUpgrade(item: GardenItem): void {
+  emit('upgrade', item.id)
+  selected.value = null
 }
 
-// Курсор внутри карты?
-function inSvg(e: PointerEvent): boolean {
-  const rect = svgEl.value?.getBoundingClientRect()
-  return (
-    !!rect &&
-    e.clientX >= rect.left &&
-    e.clientX <= rect.right &&
-    e.clientY >= rect.top &&
-    e.clientY <= rect.bottom
-  )
+// --- Поповер (DOM поверх canvas) ---
+
+const popoverStyle = computed(() => {
+  const item = selectedItem.value
+  const r = renderer.value
+  if (!item || item.x === null || item.y === null || !r) return {}
+  const p = r.clientPointOfCell(item.x, item.y)
+  // клэмп: карточка ~150×44, не выезжать за вьюпорт
+  const left = Math.max(8, Math.min(window.innerWidth - 160, p.x - 75))
+  const top = Math.max(8, p.y - 70)
+  return { left: `${left}px`, top: `${top}px` }
+})
+
+function closePopover(): void {
+  selected.value = null
+  renderer.value?.setSelected(null)
 }
 
-// Курсор над полосой инвентаря?
-function inInventory(e: PointerEvent): boolean {
-  const rect = invEl.value?.getBoundingClientRect()
-  return (
-    !!rect &&
-    e.clientX >= rect.left &&
-    e.clientX <= rect.right &&
-    e.clientY >= rect.top &&
-    e.clientY <= rect.bottom
-  )
+function onKeydown(e: KeyboardEvent): void {
+  if (e.key === 'Escape') closePopover()
+}
+function onScroll(): void {
+  closePopover()
 }
 
-function onPointerDown(item: GardenItem, e: PointerEvent): void {
-  // Клик без перетаскивания обрабатывается на pointerup (поповер роста)
-  const rect = svgEl.value?.getBoundingClientRect()
-  if (!rect) return
-  const scale = width.value / rect.width
-  drag.value = {
-    id: item.id,
-    dx: (e.clientX - rect.left) * scale - (item.x ?? 0) * CELL,
-    dy: (e.clientY - rect.top) * scale - (item.y ?? 0) * CELL,
-    moved: false,
-  }
-  dragPos.value = null
-  ;(e.target as Element).setPointerCapture?.(e.pointerId)
-}
+watch(selected, (id) => renderer.value?.setSelected(id))
 
-function onPointerMove(e: PointerEvent): void {
-  if (!drag.value) return
-  drag.value.moved = true
-  const pos = cellFromEvent(e, drag.value.dx, drag.value.dy)
-  dragPos.value = { id: drag.value.id, x: pos.x, y: pos.y }
-}
+// --- Синхронизация состояния (родитель перезагружает state после API) ---
 
-function onPointerUp(item: GardenItem, e: PointerEvent): void {
-  const isDrag = drag.value !== null && drag.value.moved
-  drag.value = null
-  const pos = dragPos.value
-  dragPos.value = null
-  if (!isDrag) {
-    // Простой клик по растению — поповер роста; клик по кнопке поповера
-    // обрабатывается сам (pointerup по ней удалил бы кнопку до click)
-    if (item.kind === 'plant' && !(e.target as Element).closest?.('.popover-card')) {
-      selected.value = selected.value === item.id ? null : item.id
-    }
-    return
-  }
-  // Декорацию можно вернуть в инвентарь — бросок на полосу инвентаря
-  if (item.kind === 'decoration' && inInventory(e)) {
-    emit('move', item.id, null, null)
-    return
-  }
-  const cell = pos && pos.id === item.id ? pos : null
-  if (cell && (cell.x !== item.x || cell.y !== item.y)) {
-    emit('move', item.id, cell.x, cell.y)
-    // Снимок позиции применён визуально — бэк подтвердит при следующем load
-    item.x = cell.x
-    item.y = cell.y
-  }
-}
+watch(
+  () => props.state,
+  (st) => renderer.value?.syncState(st),
+  { deep: false },
+)
 
 // --- Drag из инвентаря: призрак у курсора, бросок на карту размещает ---
 
+const ghost = ref<{ id: number; key: string; x: number; y: number } | null>(null)
+const ghostSrc = computed(() =>
+  ghost.value ? chipPreview({ item_key: ghost.value.key } as GardenItem) : '',
+)
+
 function onInvPointerDown(item: GardenItem, e: PointerEvent): void {
   e.preventDefault()
-  ghost.value = { id: item.id, icon: item.item_key ?? 'ph-flower', x: e.clientX, y: e.clientY }
+  ghost.value = { id: item.id, key: item.item_key ?? 'flowerbed', x: e.clientX, y: e.clientY }
   window.addEventListener('pointermove', onInvMove)
   window.addEventListener('pointerup', onInvUp)
 }
 
 function onInvMove(e: PointerEvent): void {
-  if (ghost.value) {
-    ghost.value.x = e.clientX
-    ghost.value.y = e.clientY
-  }
+  if (!ghost.value) return
+  ghost.value.x = e.clientX
+  ghost.value.y = e.clientY
+  const cell = renderer.value?.cellFromClient(e.clientX, e.clientY) ?? null
+  renderer.value?.setHoverCell(cell)
 }
 
 function onInvUp(e: PointerEvent): void {
   window.removeEventListener('pointermove', onInvMove)
   window.removeEventListener('pointerup', onInvUp)
-  const item = props.state.items.find((i) => i.id === ghost.value?.id)
+  const id = ghost.value?.id
   ghost.value = null
-  if (!item) return
-  if (inSvg(e)) {
-    const cell = cellFromEvent(e, 0, 0)
-    emit('move', item.id, cell.x, cell.y)
-    item.x = cell.x
-    item.y = cell.y
+  renderer.value?.setHoverCell(null)
+  if (id === undefined) return
+  const cell = renderer.value?.cellFromClient(e.clientX, e.clientY)
+  if (cell) {
+    emit('move', id, cell.x, cell.y)
+    // оптимистичная позиция не нужна: бэк подтвердит при load()
   }
   // Бросок мимо карты — остаётся в инвентаре
 }
 
-// Позиция элемента с учётом перетаскивания
-function itemPos(item: GardenItem): { x: number; y: number } {
-  if (dragPos.value && dragPos.value.id === item.id) {
-    return { x: dragPos.value.x, y: dragPos.value.y }
-  }
-  return { x: item.x ?? 0, y: item.y ?? 0 }
-}
+// --- Жизненный цикл ---
 
-// --- Поповер роста растения ---
-const selected = ref<number | null>(null)
+onMounted(async () => {
+  window.addEventListener('keydown', onKeydown)
+  window.addEventListener('scroll', onScroll, { capture: true, passive: true })
+  const { GardenRenderer: R } = await import('../game/GardenRenderer')
+  if (!hostEl.value) return
+  renderer.value = await R.create(hostEl.value, props.state, {
+    onMove: (id, x, y) => emit('move', id, x, y),
+    onSelect: (id) => {
+      selected.value = id
+    },
+    inventoryRect: () => invEl.value?.getBoundingClientRect() ?? null,
+  })
+})
 
-function onUpgrade(item: GardenItem): void {
-  emit('upgrade', item.id)
-  selected.value = null
-}
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKeydown)
+  window.removeEventListener('scroll', onScroll, { capture: true })
+  window.removeEventListener('pointermove', onInvMove)
+  window.removeEventListener('pointerup', onInvUp)
+  renderer.value?.destroy()
+  renderer.value = null
+})
 </script>
 
 <template>
   <div class="scene-wrap">
-    <svg
-      ref="svgEl"
+    <!-- Canvas-host: аспект по сетке, рендерер сам растягивает canvas на 100% -->
+    <div
+      ref="hostEl"
       class="scene"
-      :viewBox="`0 0 ${width} ${height}`"
-      :style="{ aspectRatio: `${width} / ${height}` }"
-      @pointermove="onPointerMove"
-      @pointerleave="drag = null"
+      :style="{ aspectRatio: `${state.grid.cols} / ${state.grid.rows}` }"
+    />
+
+    <!-- Поповер роста: DOM поверх canvas, фиксированный у клетки растения -->
+    <div
+      v-if="selectedItem && selectedItem.kind === 'plant'"
+      class="popover-card"
+      :style="popoverStyle"
+      @pointerdown.stop
     >
-      <defs>
-        <pattern id="cells" :width="CELL" :height="CELL" patternUnits="userSpaceOnUse">
-          <path
-            :d="`M ${CELL} 0 L 0 0 0 ${CELL}`"
-            fill="none"
-            stroke="rgba(0,0,0,0.07)"
-            stroke-width="1"
-          />
-        </pattern>
-      </defs>
-
-      <!-- Дикая земля за изгородью, затем газон текущей карты -->
-      <rect x="0" y="0" :width="width" :height="height" class="wild" />
-      <rect
-        :x="HEDGE"
-        :y="HEDGE"
-        :width="width - HEDGE * 2"
-        :height="height - HEDGE * 2"
-        rx="6"
-        class="lawn"
-      />
-      <rect
-        :x="HEDGE"
-        :y="HEDGE"
-        :width="width - HEDGE * 2"
-        :height="height - HEDGE * 2"
-        rx="6"
-        fill="url(#cells)"
-      />
-      <!-- Живая изгородь — визуальная граница сада -->
-      <rect
-        :x="HEDGE / 2"
-        :y="HEDGE / 2"
-        :width="width - HEDGE"
-        :height="height - HEDGE"
-        rx="8"
-        class="hedge"
-      />
-
-      <!-- Домик в центре -->
-      <g class="house" :transform="`translate(${house.x}, ${house.y})`">
-        <rect x="4" y="18" :width="house.w - 8" :height="house.h - 22" rx="3" class="house-body" />
-        <path :d="`M -2 20 L ${house.w / 2} -4 L ${house.w + 2} 20 Z`" class="house-roof" />
-        <rect :x="house.w / 2 - 6" :y="house.h - 22" width="12" height="18" rx="1.5" class="house-door" />
-        <rect x="12" y="26" width="10" height="9" rx="1.5" class="house-window" />
-        <rect :x="house.w - 22" y="26" width="10" height="9" rx="1.5" class="house-window" />
-      </g>
-
-      <!-- Элементы сада: растения и декорации, z-порядок по y -->
-      <g
-        v-for="item in items"
-        :key="item.id"
-        class="item"
-        :class="{ dragging: dragPos?.id === item.id, plant: item.kind === 'plant' }"
-        :transform="`translate(${itemPos(item).x * CELL + CELL / 2}, ${itemPos(item).y * CELL + CELL / 2})`"
-        @pointerdown="onPointerDown(item, $event)"
-        @pointerup="onPointerUp(item, $event)"
-      >
-        <title>{{ item.kind === 'plant' ? plantTitle(item) : decorTitle(item) }}</title>
-
-        <!-- Растение: phosphor-иконка кита во foreignObject, размер по стадии -->
-        <foreignObject
-          v-if="item.kind === 'plant'"
-          :x="-stageSize(item.stage) / 2"
-          :y="-stageSize(item.stage) / 2"
-          :width="stageSize(item.stage)"
-          :height="stageSize(item.stage)"
+      <template v-if="upgradeCost(selectedItem) !== null">
+        <button
+          class="popover-btn"
+          :disabled="balance < (upgradeCost(selectedItem) ?? 0)"
+          @click.stop="onUpgrade(selectedItem)"
         >
-          <i
-            :class="`ph ${item.item_key} plant-icon rarity-${item.rarity ?? 'common'}`"
-            :style="{ fontSize: `${stageSize(item.stage)}px` }"
-            aria-hidden="true"
-          />
-        </foreignObject>
-
-        <!-- Декорации: простые SVG-фигуры -->
-        <g v-else-if="item.item_key === 'lantern'" class="decor">
-          <rect x="-1.5" y="-6" width="3" height="14" class="d-wood" />
-          <rect x="-5" y="-14" width="10" height="9" rx="2" class="d-glass" />
-          <circle cx="0" cy="-9.5" r="1.8" class="d-glow" />
-        </g>
-        <g v-else-if="item.item_key === 'bench'" class="decor">
-          <rect x="-9" y="-2" width="18" height="3" rx="1" class="d-wood" />
-          <rect x="-9" y="-8" width="18" height="2.5" rx="1" class="d-wood" />
-          <rect x="-8" y="-2" width="2" height="6" class="d-wood" />
-          <rect x="6" y="-2" width="2" height="6" class="d-wood" />
-        </g>
-        <ellipse v-else-if="item.item_key === 'pond'" rx="9" ry="6" class="d-water" />
-        <ellipse v-else-if="item.item_key === 'birdbath'" cx="0" cy="0" rx="6" ry="3" class="d-water" />
-        <g v-else-if="item.item_key === 'gazebo'" class="decor">
-          <path d="M -9 2 L 0 -10 L 9 2 Z" class="d-roof" />
-          <rect x="-7" y="2" width="14" height="7" class="d-wood" />
-        </g>
-        <g v-else-if="item.item_key === 'flowerbed'" class="decor">
-          <ellipse rx="8" ry="4.5" class="d-bed" />
-          <circle cx="-3" cy="-1" r="1.8" class="d-flower" />
-          <circle cx="2" cy="1" r="1.8" class="d-flower2" />
-          <circle cx="4" cy="-1.5" r="1.6" class="d-flower" />
-        </g>
-        <g v-else-if="item.item_key === 'fence'" class="decor">
-          <rect x="-9" y="-3" width="18" height="2" class="d-wood" />
-          <rect x="-8" y="-5" width="2.5" height="7" class="d-wood" />
-          <rect x="0" y="-5" width="2.5" height="7" class="d-wood" />
-          <rect x="6" y="-5" width="2.5" height="7" class="d-wood" />
-        </g>
-
-        <!-- Поповер роста: цена следующей стадии или «полностью выросло» -->
-        <foreignObject
-          v-if="item.kind === 'plant' && selected === item.id"
-          x="-72"
-          y="-44"
-          width="144"
-          height="40"
-          class="popover"
-        >
-          <div xmlns="http://www.w3.org/1999/xhtml" class="popover-card">
-            <template v-if="upgradeCost(item) !== null">
-              <button
-                xmlns="http://www.w3.org/1999/xhtml"
-                class="popover-btn"
-                :disabled="balance < (upgradeCost(item) ?? 0)"
-                @click.stop="onUpgrade(item)"
-              >
-                <i class="ph ph-arrow-fat-up" aria-hidden="true" />
-                {{ t('garden.upgrade', { n: upgradeCost(item) }) }}
-              </button>
-              <span v-if="balance < (upgradeCost(item) ?? 0)" class="popover-hint">
-                {{ t('garden.notEnoughCoins', { n: (upgradeCost(item) ?? 0) - balance }) }}
-              </span>
-            </template>
-            <span v-else class="popover-max">
-              <i class="ph ph-check-circle" aria-hidden="true" />
-              {{ t('garden.maxStage') }}
-            </span>
-          </div>
-        </foreignObject>
-      </g>
-    </svg>
+          <i class="ph ph-arrow-fat-up" aria-hidden="true" />
+          {{ t('garden.upgrade', { n: upgradeCost(selectedItem) }) }}
+        </button>
+        <span v-if="balance < (upgradeCost(selectedItem) ?? 0)" class="popover-hint">
+          {{ t('garden.notEnoughCoins', { n: (upgradeCost(selectedItem) ?? 0) - balance }) }}
+        </span>
+      </template>
+      <span v-else class="popover-max">
+        <i class="ph ph-check-circle" aria-hidden="true" />
+        {{ t('garden.maxStage') }}
+      </span>
+    </div>
 
     <!-- Инвентарь: купленные, но не размещённые декорации — drag на карту -->
     <div v-if="inventoryItems.length" ref="invEl" class="inventory">
@@ -376,10 +207,10 @@
         v-for="item in inventoryItems"
         :key="item.id"
         class="inv-chip"
-        :title="decorTitle(item)"
+        :title="item.item_key ? t(`garden.decorNames.${item.item_key}`) : ''"
         @pointerdown="onInvPointerDown(item, $event)"
       >
-        <i :class="`ph ${item.item_key}`" aria-hidden="true" />
+        <img :src="chipPreview(item)" alt="" class="inv-img" />
         <span>{{ item.item_key ? t(`garden.decorNames.${item.item_key}`) : '' }}</span>
       </div>
       <span class="inv-hint">{{ t('garden.inventoryHint') }}</span>
@@ -387,7 +218,7 @@
 
     <!-- Призрак перетаскивания из инвентаря -->
     <div v-if="ghost" class="drag-ghost" :style="{ left: `${ghost.x}px`, top: `${ghost.y}px` }">
-      <i :class="`ph ${ghost.icon}`" aria-hidden="true" />
+      <img :src="ghostSrc" alt="" />
     </div>
   </div>
 </template>
@@ -396,6 +227,59 @@
 .scene-wrap {
   margin-bottom: 2rem;
 }
+.scene {
+  width: 100%;
+  border-radius: 12px;
+  border: 1px solid var(--border, #2a2f45);
+  overflow: hidden;
+  cursor: default;
+}
+/* Поповер роста: fixed у клетки растения */
+.popover-card {
+  position: fixed;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 5px;
+  border-radius: 8px;
+  background: var(--bg-card, #24283b);
+  border: 1px solid var(--border, #2a2f45);
+  font-size: 12px;
+  line-height: 1.2;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
+}
+.popover-btn {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  padding: 3px 7px;
+  border: none;
+  border-radius: 6px;
+  background: var(--success, #9ece6a);
+  color: #1a1f2e;
+  font-weight: 600;
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.popover-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.popover-hint {
+  color: #f7768e;
+  font-size: 10px;
+  white-space: nowrap;
+}
+.popover-max {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  color: var(--text-muted, #888);
+  font-size: 10px;
+  white-space: nowrap;
+}
 /* Инвентарь: купленные, но не размещённые декорации */
 .inventory {
   display: flex;
@@ -421,7 +305,7 @@
   display: flex;
   gap: 0.3rem;
   align-items: center;
-  padding: 0.3rem 0.6rem;
+  padding: 0.25rem 0.6rem 0.25rem 0.35rem;
   border: 1px solid var(--border, #2a2f45);
   border-radius: 8px;
   background: color-mix(in srgb, var(--warning, #e0af68) 10%, transparent);
@@ -434,9 +318,11 @@
 .inv-chip:active {
   cursor: grabbing;
 }
-.inv-chip > i {
-  font-size: 1.1rem;
-  color: var(--warning, #e0af68);
+.inv-img {
+  width: 26px;
+  height: 26px;
+  object-fit: contain;
+  image-rendering: pixelated;
 }
 .inv-hint {
   font-size: 0.78em;
@@ -448,130 +334,12 @@
   z-index: 1000;
   transform: translate(-50%, -60%);
   pointer-events: none;
-  font-size: 1.6rem;
-  color: var(--warning, #e0af68);
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
 }
-.scene {
-  display: block;
-  width: 100%;
-  border-radius: 12px;
-  border: 1px solid var(--border, #2a2f45);
-  touch-action: none;
-  user-select: none;
-}
-.wild {
-  fill: color-mix(in srgb, var(--text-muted, #888) 18%, #3b3222);
-}
-.lawn {
-  fill: color-mix(in srgb, var(--success, #9ece6a) 26%, var(--bg-page, #1a1f2e));
-}
-.hedge {
-  fill: none;
-  stroke: color-mix(in srgb, var(--success, #9ece6a) 60%, #2d5a27);
-  stroke-width: 10;
-}
-.house-body {
-  fill: color-mix(in srgb, var(--warning, #e0af68) 45%, var(--bg-page, #1a1f2e));
-  stroke: var(--border, #2a2f45);
-}
-.house-roof {
-  fill: color-mix(in srgb, #f7768e 45%, var(--bg-page, #1a1f2e));
-}
-.house-door {
-  fill: color-mix(in srgb, #7aa2f7 55%, var(--bg-page, #1a1f2e));
-}
-.house-window {
-  fill: color-mix(in srgb, #73daca 55%, var(--bg-page, #1a1f2e));
-}
-.item {
-  cursor: grab;
-}
-.item.dragging {
-  cursor: grabbing;
-}
-.item.plant:active {
-  cursor: grabbing;
-}
-.plant-icon {
-  display: block;
-  line-height: 1;
-  color: var(--success, #9ece6a);
-  pointer-events: none;
-}
-.plant-icon.rarity-rare {
-  color: #e0af68;
-}
-.plant-icon.rarity-epic {
-  color: #d4a017;
-  filter: drop-shadow(0 0 4px rgba(241, 196, 15, 0.7));
-}
-/* Фигуры декораций участвуют в hit-testing — drag ловит родительский <g> */
-.d-wood {
-  fill: #8a6d4b;
-}
-.d-glass {
-  fill: color-mix(in srgb, #f1c40f 40%, var(--bg-page, #1a1f2e));
-}
-.d-glow {
-  fill: #f5d76e;
-}
-.d-water {
-  fill: color-mix(in srgb, #7aa2f7 60%, var(--bg-page, #1a1f2e));
-  stroke: rgba(122, 162, 247, 0.4);
-}
-.d-roof {
-  fill: color-mix(in srgb, #f7768e 50%, var(--bg-page, #1a1f2e));
-}
-.d-bed {
-  fill: #6b4f3a;
-}
-.d-flower {
-  fill: #f7768e;
-}
-.d-flower2 {
-  fill: #bb9af7;
-}
-.popover-card {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 4px;
-  border-radius: 8px;
-  background: var(--bg-card, #24283b);
-  border: 1px solid var(--border, #2a2f45);
-  font-size: 11px;
-  line-height: 1.2;
-}
-.popover-btn {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  padding: 3px 6px;
-  border: none;
-  border-radius: 6px;
-  background: var(--success, #9ece6a);
-  color: #1a1f2e;
-  font-weight: 600;
-  font-size: 11px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-.popover-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.popover-hint {
-  color: #f7768e;
-  font-size: 10px;
-  white-space: nowrap;
-}
-.popover-max {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  color: var(--text-muted, #888);
-  font-size: 10px;
-  white-space: nowrap;
+.drag-ghost img {
+  width: 44px;
+  height: 44px;
+  object-fit: contain;
+  image-rendering: pixelated;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/game/GardenRenderer.ts b/frontend/src/game/GardenRenderer.ts
new file mode 100644
index 0000000..89a732e
--- /dev/null
+++ b/frontend/src/game/GardenRenderer.ts
@@ -0,0 +1,515 @@
+// PixiJS-рендерер сцены сада (ТЗ 3.13): пиксель-арт на WebGL.
+// Вся Pixi-логика здесь; GardenScene.vue — тонкая обёртка (DOM-инвентарь,
+// поповер, drag-ghost). Клетка = 32 мировых px (матрица 16px × 2).
+import { Application, Container, Graphics, Sprite, TilingSprite } from 'pixi.js'
+import type { FederatedPointerEvent } from 'pixi.js'
+import type { GardenItem, GardenState } from '../api'
+import {
+  decorTexture,
+  houseTexture,
+  plantTexture,
+  ringTexture,
+  selectOutlineTexture,
+  sparkleTexture,
+  tileTexture,
+} from './textures'
+
+export const CELL_WORLD = 32 // мировых px на клетку (16px матрица × 2)
+const PX = 2 // масштаб «нативного пикселя»
+const LAWN_INSET = 16 // газон внутри изгороди (10 svg-px ≈ 16 мировых)
+
+export interface GardenRendererCallbacks {
+  /** Перемещение: x/y null — бросок в инвентарь (только декорации). */
+  onMove(id: number, x: number | null, y: number | null): void
+  /** Клик по растению (поповер) или мимо (id null — закрыть). */
+  onSelect(id: number | null): void
+  /** DOM-rect полосы инвентаря (для броска декорации с карты в инвентарь). */
+  inventoryRect(): DOMRect | null
+}
+
+interface ItemView {
+  root: Container
+  body: Sprite
+  ring: Sprite | null
+  sparkles: Sprite[]
+  item: GardenItem
+  growing: boolean
+}
+
+interface Tween {
+  until: number
+  apply: (progress: number) => void
+  done: () => void
+}
+
+export class GardenRenderer {
+  private app = new Application()
+  private cb: GardenRendererCallbacks
+  private cols = 0
+  private rows = 0
+  private disposed = false
+
+  private root = new Container()
+  private terrain = new Container()
+  private houseLayer = new Container()
+  private items = new Container()
+  private fx = new Container()
+
+  private views = new Map<number, ItemView>()
+  private selectedId: number | null = null
+  private hoverOutline: Sprite | null = null
+
+  private drag: {
+    id: number
+    moved: boolean
+    startClientX: number
+    startClientY: number
+  } | null = null
+  private tweens: Tween[] = []
+  private time = 0
+
+  private constructor(cb: GardenRendererCallbacks) {
+    this.cb = cb
+  }
+
+  static async create(
+    host: HTMLElement,
+    state: GardenState,
+    cb: GardenRendererCallbacks,
+  ): Promise<GardenRenderer> {
+    const renderer = new GardenRenderer(cb)
+    await renderer.app.init({
+      preference: 'webgl',
+      antialias: false,
+      roundPixels: true,
+      backgroundAlpha: 0,
+      resolution: Math.min(window.devicePixelRatio || 1, 2),
+      autoDensity: true,
+      width: Math.max(1, host.clientWidth),
+      height: Math.max(1, host.clientHeight),
+    })
+    if (renderer.disposed) {
+      renderer.app.destroy(true, { children: true, texture: false, textureSource: false })
+      return renderer
+    }
+    renderer.setup(host, state)
+    return renderer
+  }
+
+  private setup(host: HTMLElement, state: GardenState): void {
+    const app = this.app
+    app.canvas.style.touchAction = 'none'
+    app.canvas.style.display = 'block'
+    app.canvas.style.width = '100%'
+    app.canvas.style.height = '100%'
+    app.stage.eventMode = 'static'
+    app.stage.hitArea = app.screen
+
+    app.stage.addChild(this.root)
+    this.root.addChild(this.terrain, this.houseLayer, this.items, this.fx)
+    this.items.sortableChildren = true
+
+    this.cols = state.grid.cols
+    this.rows = state.grid.rows
+    this.rebuildTerrain()
+    this.buildHouse()
+    this.syncState(state)
+    this.applyRootScale(host)
+
+    app.stage.on('pointermove', this.onStageMove)
+    app.stage.on('pointerup', this.onStageUp)
+    app.stage.on('pointerupoutside', this.onStageUp)
+    app.stage.on('pointerdown', this.onStageDown)
+
+    this.resizeObserver = new ResizeObserver(() => this.onHostResize(host))
+    this.resizeObserver.observe(host)
+
+    app.ticker.add(this.onTick)
+    host.appendChild(app.canvas)
+  }
+
+  private resizeObserver: ResizeObserver | null = null
+
+  // --- Геометрия ---
+
+  private worldWidth(): number {
+    return this.cols * CELL_WORLD
+  }
+  private worldHeight(): number {
+    return this.rows * CELL_WORLD
+  }
+
+  private applyRootScale(host: HTMLElement): void {
+    const w = host.clientWidth || 1
+    this.root.scale.set(w / this.worldWidth())
+  }
+
+  /** Мировые координаты центра клетки. */
+  private cellCenter(x: number, y: number): { cx: number; cy: number } {
+    return { cx: x * CELL_WORLD + CELL_WORLD / 2, cy: y * CELL_WORLD + CELL_WORLD / 2 }
+  }
+
+  /** Клетка из мировых координат (clamped). */
+  private cellOfWorld(wx: number, wy: number): { x: number; y: number } {
+    return {
+      x: Math.max(0, Math.min(this.cols - 1, Math.floor(wx / CELL_WORLD))),
+      y: Math.max(0, Math.min(this.rows - 1, Math.floor(wy / CELL_WORLD))),
+    }
+  }
+
+  // --- Слои terrain/house (пересобираются только при смене сетки) ---
+
+  private rebuildTerrain(): void {
+    this.terrain.removeChildren().forEach((c) => c.destroy())
+    const W = this.worldWidth()
+    const H = this.worldHeight()
+
+    const wild = new TilingSprite({ texture: tileTexture('wild'), width: W, height: H })
+    this.terrain.addChild(wild)
+
+    // газон из супер-тайла 32px (шахматка grass-a/b, период 2 клетки)
+    const lawnTex = tileTexture('grass-super')
+    const lawn = new TilingSprite({
+      texture: lawnTex,
+      width: W - LAWN_INSET * 2,
+      height: H - LAWN_INSET * 2,
+    })
+    lawn.position.set(LAWN_INSET, LAWN_INSET)
+    this.terrain.addChild(lawn)
+
+    // кустики травы: ~8% клеток детерминированно
+    for (let y = 0; y < this.rows; y++)
+      for (let x = 0; x < this.cols; x++) {
+        if ((x * 7 + y * 11 + this.cols) % 12 !== 0) continue
+        const tuft = new Sprite(tileTexture('grass-tuft'))
+        const { cx, cy } = this.cellCenter(x, y)
+        tuft.anchor.set(0.5)
+        tuft.position.set(cx, cy)
+        tuft.scale.set(PX)
+        this.terrain.addChild(tuft)
+      }
+
+    // сетка
+    const grid = new Graphics()
+    for (let x = 0; x <= this.cols; x++)
+      grid.moveTo(x * CELL_WORLD, LAWN_INSET).lineTo(x * CELL_WORLD, H - LAWN_INSET)
+    for (let y = 0; y <= this.rows; y++)
+      grid.moveTo(LAWN_INSET, y * CELL_WORLD).lineTo(W - LAWN_INSET, y * CELL_WORLD)
+    grid.stroke({ color: 0x000000, alpha: 0.07, width: 1 })
+    this.terrain.addChild(grid)
+
+    // изгородь по периметру (полосы толщиной с клетку)
+    const hedgeTex = tileTexture('hedge')
+    const top = new TilingSprite({ texture: hedgeTex, width: W, height: CELL_WORLD / 2 })
+    const bottom = new TilingSprite({ texture: hedgeTex, width: W, height: CELL_WORLD / 2 })
+    bottom.position.set(0, H - CELL_WORLD / 2)
+    const left = new TilingSprite({ texture: hedgeTex, width: H, height: CELL_WORLD / 2 })
+    left.position.set(CELL_WORLD / 2, 0)
+    left.rotation = Math.PI / 2
+    const right = new TilingSprite({ texture: hedgeTex, width: H, height: CELL_WORLD / 2 })
+    right.position.set(W - CELL_WORLD / 2, H)
+    right.rotation = -Math.PI / 2
+    this.terrain.addChild(top, bottom, left, right)
+  }
+
+  private buildHouse(): void {
+    this.houseLayer.removeChildren().forEach((c) => c.destroy())
+    const house = new Sprite(houseTexture())
+    house.scale.set(PX)
+    const cols = Math.round(this.worldWidth() / CELL_WORLD)
+    const rows = Math.round(this.worldHeight() / CELL_WORLD)
+    house.position.set((cols / 2 - 2) * CELL_WORLD, (rows / 2 - 1.5) * CELL_WORLD)
+    this.houseLayer.addChild(house)
+  }
+
+  // --- Дифф элементов ---
+
+  private itemChanged(a: GardenItem, b: GardenItem): boolean {
+    return (
+      a.x !== b.x ||
+      a.y !== b.y ||
+      a.stage !== b.stage ||
+      a.rarity !== b.rarity ||
+      a.item_key !== b.item_key ||
+      a.kind !== b.kind
+    )
+  }
+
+  /** Обновить сцену из нового состояния (родитель перезагружает state после API). */
+  syncState(state: GardenState): void {
+    if (this.disposed) return
+    if (state.grid.cols !== this.cols || state.grid.rows !== this.rows) {
+      this.cols = state.grid.cols
+      this.rows = state.grid.rows
+      this.rebuildTerrain()
+      this.buildHouse()
+    }
+    const seen = new Set<number>()
+    for (const item of state.items) {
+      if (item.x === null || item.y === null) {
+        this.removeView(item.id)
+        continue
+      }
+      seen.add(item.id)
+      const view = this.views.get(item.id)
+      if (!view) this.addView(item)
+      else if (this.itemChanged(view.item, item)) this.updateView(view, item)
+    }
+    for (const id of [...this.views.keys()]) if (!seen.has(id)) this.removeView(id)
+  }
+
+  private addView(item: GardenItem): void {
+    const rootC = new Container()
+    const { cx, cy } = this.cellCenter(item.x ?? 0, item.y ?? 0)
+    rootC.position.set(cx, cy)
+    rootC.zIndex = (item.y ?? 0) * 1000 + (item.x ?? 0)
+
+    let ring: Sprite | null = null
+    if (item.kind === 'plant' && (item.rarity === 'rare' || item.rarity === 'epic')) {
+      ring = new Sprite(ringTexture(item.rarity ?? 'rare'))
+      ring.anchor.set(0.5)
+      ring.position.set(0, -2)
+      ring.scale.set(PX)
+      rootC.addChild(ring)
+    }
+
+    const body = new Sprite(this.textureOf(item))
+    if (item.kind === 'plant') body.anchor.set(0.5, 0.95)
+    else body.anchor.set(0.5, 0.75)
+    body.scale.set(PX)
+    body.eventMode = 'static'
+    body.cursor = 'grab'
+    body.on('pointerdown', (e) => this.beginDrag(item.id, e))
+    rootC.addChild(body)
+
+    const sparkles: Sprite[] = []
+    if (item.kind === 'plant' && item.rarity === 'epic') {
+      for (let i = 0; i < 3; i++) {
+        const s = new Sprite(sparkleTexture())
+        s.anchor.set(0.5)
+        s.scale.set(PX)
+        s.position.set(-14 + i * 14, -20 - (i % 2) * 10)
+        rootC.addChild(s)
+        sparkles.push(s)
+      }
+    }
+
+    this.items.addChild(rootC)
+    const view: ItemView = { root: rootC, body, ring, sparkles, item: { ...item }, growing: true }
+    this.views.set(item.id, view)
+    // появление: рост от земли (scale контейнера от 0.2 до 1)
+    this.tweens.push({
+      until: 0.35,
+      apply: (p) => {
+        rootC.scale.set(0.2 + 0.8 * p)
+      },
+      done: () => {
+        rootC.scale.set(1)
+      },
+    })
+  }
+
+  private updateView(view: ItemView, item: GardenItem): void {
+    const moved =
+      item.x !== view.item.x ||
+      item.y !== view.item.y
+    view.item = { ...item }
+    if (moved) {
+      const { cx, cy } = this.cellCenter(item.x ?? 0, item.y ?? 0)
+      view.root.position.set(cx, cy)
+      view.root.zIndex = (item.y ?? 0) * 1000 + (item.x ?? 0)
+    }
+    if (item.kind === 'plant') view.body.texture = plantTexture(item.item_key ?? '', item.stage)
+    else if (item.item_key) view.body.texture = decorTexture(item.item_key)
+  }
+
+  private removeView(id: number): void {
+    const view = this.views.get(id)
+    if (!view) return
+    this.views.delete(id)
+    if (this.selectedId === id) {
+      this.selectedId = null
+      this.cb.onSelect(null)
+    }
+    view.root.destroy({ children: true })
+  }
+
+  private textureOf(item: GardenItem) {
+    if (item.kind === 'plant') return plantTexture(item.item_key ?? 'ph-flower', item.stage)
+    return decorTexture(item.item_key ?? 'flowerbed')
+  }
+
+  // --- Drag & drop на канвасе ---
+
+  private beginDrag(id: number, e: FederatedPointerEvent): void {
+    this.drag = {
+      id,
+      moved: false,
+      startClientX: e.globalX,
+      startClientY: e.globalY,
+    }
+  }
+
+  private dragView(): ItemView | null {
+    if (!this.drag) return null
+    return this.views.get(this.drag.id) ?? null
+  }
+
+  private readonly onStageMove = (e: FederatedPointerEvent): void => {
+    const view = this.dragView()
+    if (!view) return
+    const d = this.drag!
+    if (!d.moved && Math.hypot(e.globalX - d.startClientX, e.globalY - d.startClientY) < 4) return
+    d.moved = true
+    const local = this.root.toLocal(e.global)
+    const cell = this.cellOfWorld(local.x, local.y)
+    const { cx, cy } = this.cellCenter(cell.x, cell.y)
+    // визуальный сдвиг на клетку; курсор чуть «поднимает» элемент
+    view.root.position.set(cx, cy - 6)
+    view.body.alpha = 0.85
+    this.setHoverCell(cell)
+    view.root.zIndex = 1_000_000
+  }
+
+  private readonly onStageUp = (e: FederatedPointerEvent): void => {
+    const view = this.dragView()
+    const d = this.drag
+    this.drag = null
+    if (!view || !d) return
+    view.body.alpha = 1
+    const item = view.item
+    const restoreZ = (it: GardenItem): void => {
+      view.root.zIndex = (it.y ?? 0) * 1000 + (it.x ?? 0)
+    }
+    if (!d.moved) {
+      restoreZ(item)
+      // клик: поповер только у растений
+      this.selectedId = item.kind === 'plant' ? item.id : null
+      this.cb.onSelect(this.selectedId)
+      return
+    }
+    const local = this.root.toLocal(e.global)
+    const inv = this.cb.inventoryRect()
+    if (inv && item.kind === 'decoration' && this.clientIn(e, inv)) {
+      this.setHoverCell(null)
+      this.cb.onMove(item.id, null, null)
+      return
+    }
+    const cell = this.cellOfWorld(local.x, local.y)
+    this.setHoverCell(null)
+    if (cell.x !== item.x || cell.y !== item.y) {
+      // оптимистичная позиция до перезагрузки state
+      const { cx, cy } = this.cellCenter(cell.x, cell.y)
+      view.root.position.set(cx, cy)
+      view.item.x = cell.x
+      view.item.y = cell.y
+      this.cb.onMove(item.id, cell.x, cell.y)
+    }
+    restoreZ(view.item)
+  }
+
+  private clientIn(e: FederatedPointerEvent, rect: DOMRect): boolean {
+    const canvasRect = this.app.canvas.getBoundingClientRect()
+    const px = canvasRect.left + e.globalX
+    const py = canvasRect.top + e.globalY
+    return px >= rect.left && px <= rect.right && py >= rect.top && py <= rect.bottom
+  }
+
+  private readonly onStageDown = (e: FederatedPointerEvent): void => {
+    // клик по пустому месту закрывает поповер (target === stage)
+    if (e.target === this.app.stage) {
+      this.selectedId = null
+      this.cb.onSelect(null)
+    }
+  }
+
+  // --- Наружу для Vue-части ---
+
+  /** Клетка из client-координат (бросок из инвентаря). */
+  cellFromClient(clientX: number, clientY: number): { x: number; y: number } | null {
+    const rect = this.app.canvas.getBoundingClientRect()
+    if (
+      clientX < rect.left ||
+      clientX > rect.right ||
+      clientY < rect.top ||
+      clientY > rect.bottom
+    )
+      return null
+    const scale = rect.width / this.worldWidth()
+    return this.cellOfWorld((clientX - rect.left) / scale, (clientY - rect.top) / scale)
+  }
+
+  /** Экранные координаты центра клетки (позиция поповера). */
+  clientPointOfCell(x: number, y: number): { x: number; y: number } {
+    const rect = this.app.canvas.getBoundingClientRect()
+    const scale = rect.width / this.worldWidth()
+    const { cx, cy } = this.cellCenter(x, y)
+    return { x: rect.left + cx * scale, y: rect.top + cy * scale }
+  }
+
+  /** Подсветка целевой клетки при drag из инвентаря. */
+  setHoverCell(cell: { x: number; y: number } | null): void {
+    if (!cell) {
+      this.hoverOutline?.destroy()
+      this.hoverOutline = null
+      return
+    }
+    if (!this.hoverOutline) {
+      this.hoverOutline = new Sprite(selectOutlineTexture())
+      this.hoverOutline.alpha = 0.4
+      this.hoverOutline.scale.set(PX)
+      this.fx.addChild(this.hoverOutline)
+    }
+    this.hoverOutline.position.set(cell.x * CELL_WORLD, cell.y * CELL_WORLD)
+  }
+
+  /** Выделение (поповер роста). */
+  setSelected(id: number | null): void {
+    this.selectedId = id
+  }
+
+  private onHostResize(host: HTMLElement): void {
+    if (this.disposed) return
+    const w = Math.max(1, host.clientWidth)
+    const h = Math.max(1, host.clientHeight)
+    this.app.renderer.resize(w, h)
+    this.applyRootScale(host)
+  }
+
+  destroy(): void {
+    this.disposed = true
+    this.resizeObserver?.disconnect()
+    this.app.stage.off('pointermove', this.onStageMove)
+    this.app.stage.off('pointerup', this.onStageUp)
+    this.app.stage.off('pointerupoutside', this.onStageUp)
+    this.app.stage.off('pointerdown', this.onStageDown)
+    this.app.ticker.remove(this.onTick)
+    this.app.destroy(true, { children: true, texture: false, textureSource: false })
+  }
+
+  // --- Анимации (один тикер) ---
+
+  private readonly onTick = (): void => {
+    if (this.disposed) return
+    this.time += this.app.ticker.deltaMS / 1000
+    // покачивание взрослых растений и пульс блёсток эпика
+    for (const view of this.views.values()) {
+      if (view.item.kind === 'plant' && view.item.stage >= 2 && !this.drag?.moved)
+        view.body.rotation = Math.sin(this.time * 2 + view.item.id) * 0.03
+      for (let i = 0; i < view.sparkles.length; i++)
+        view.sparkles[i]!.alpha =
+          0.4 + 0.6 * Math.abs(Math.sin(this.time * 3 + view.item.id + i * 2.1))
+    }
+    // твины (grow-in)
+    const total = 0.35
+    for (let i = this.tweens.length - 1; i >= 0; i--) {
+      const t = this.tweens[i]!
+      t.until -= this.app.ticker.deltaMS / 1000
+      t.apply(Math.min(1, 1 - t.until / total))
+      if (t.until <= 0) {
+        t.done()
+        this.tweens.splice(i, 1)
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/game/pixelart.ts b/frontend/src/game/pixelart.ts
new file mode 100644
index 0000000..dbb87c3
--- /dev/null
+++ b/frontend/src/game/pixelart.ts
@@ -0,0 +1,59 @@
+// Пиксель-арт утилиты: матрицы (массивы строк, символ → цвет палитры;
+// символ без цвета в палитре — прозрачный пиксель) → canvas/dataURL.
+// Файл НЕ импортирует pixi — используется и в DOM (чипы инвентаря),
+// и в рендерере (textures.ts), чтобы pixi оставался в async-чанке.
+export type Palette = Record<string, string>
+export type Matrix = string[]
+
+export function drawMatrix(rows: Matrix, palette: Palette, px: number): HTMLCanvasElement {
+  const h = rows.length
+  const w = rows[0]?.length ?? 0
+  const cv = document.createElement('canvas')
+  cv.width = w * px
+  cv.height = h * px
+  const ctx = cv.getContext('2d')!
+  ctx.imageSmoothingEnabled = false
+  for (let y = 0; y < h; y++) {
+    const row = rows[y]!
+    for (let x = 0; x < w; x++) {
+      const color = palette[row[x]!]
+      if (!color) continue
+      ctx.fillStyle = color
+      ctx.fillRect(x * px, y * px, px, px)
+    }
+  }
+  return cv
+}
+
+/** Data URL пиксель-превью (чипы инвентаря, drag-ghost). px — размер «пикселя». */
+export function dataUrlFor(rows: Matrix, palette: Palette, px = 4): string {
+  return drawMatrix(rows, palette, px).toDataURL()
+}
+
+/** Впечатать patch в base по координатам (сборка больших спрайтов из частей). */
+export function stamp(base: Matrix, patch: Matrix, x: number, y: number): Matrix {
+  const out = base.map((row) => row.split(''))
+  patch.forEach((pr, py) => {
+    const target = out[y + py]
+    if (!target) return
+    pr.split('').forEach((ch, px2) => {
+      if (px2 + x < target.length && ch !== ' ' && ch !== '.') target[px2 + x] = ch
+    })
+  })
+  return out.map((row) => row.join(''))
+}
+
+/** Пустая матрица w×h (все пиксели прозрачны). */
+export function blank(w: number, h: number): Matrix {
+  return Array.from({ length: h }, () => ' '.repeat(w))
+}
+
+/** Зеркалирование по горизонтали. */
+export function flipX(rows: Matrix): Matrix {
+  return rows.map((row) => row.split('').reverse().join(''))
+}
+
+/** Строка из повторов символа (удобно для стен/полос). */
+export function line(ch: string, n: number): string {
+  return ch.repeat(n)
+}
\ No newline at end of file
diff --git a/frontend/src/game/sprites.ts b/frontend/src/game/sprites.ts
new file mode 100644
index 0000000..aada2fb
--- /dev/null
+++ b/frontend/src/game/sprites.ts
@@ -0,0 +1,488 @@
+// Каталог пиксель-арт спрайтов сада (ТЗ 3.13). Геометрия строится программно
+// (эллипсы, стволы, крыши) — надёжнее, чем ASCII-матрицы переменной ширины.
+// Всё рисуется в матрицах «нативного пикселя» (клетка = 16px, мир = ×2).
+import { blank, flipX, stamp } from './pixelart'
+import type { Matrix, Palette } from './pixelart'
+
+/** Палитра сцены — тон в тон тёмной теме (фон ~#1a1f2e). */
+export const PAL: Palette = {
+  g: '#2e4a2b', // трава тёмная
+  G: '#385a32', // трава
+  H: '#41663a', // трава светлая / травинки
+  w: '#3b3226', // дикая земля
+  W: '#45392b', // дикая земля светлая
+  e: '#35682c', // изгородь
+  E: '#4a8a3c', // изгородь светлая
+  F: '#254c1f', // изгородь тень
+  o: '#8a6d4b', // дерево (постройки)
+  O: '#6b5238', // дерево тёмное
+  r: '#c96a7c', // крыша
+  R: '#a35264', // крыша тень
+  n: '#8f7a4f', // стена
+  N: '#6e5c3c', // стена тень
+  d: '#5b74c9', // дверь
+  c: '#5fc4b4', // окно
+  C: '#f5d76e', // свет (окна, фонарь)
+  u: '#4a6fd4', // вода
+  U: '#7aa2f7', // вода светлая
+  b: '#6b4f3a', // клумба (земля)
+  s: '#4a3826', // почва тёмная
+  l: '#4a8f3c', // листва
+  L: '#5fae4b', // листва светлая
+  k: '#356b2c', // листва тёмная
+  t: '#3f7a33', // стебель
+  p: '#f7768e', // цветок розовый
+  P: '#bb9af7', // цветок лиловый
+  y: '#e0af68', // золото (редкость)
+  h: '#d6dae4', // белый
+  x: '#7d8496', // камень
+  q: '#f5d76e', // свечение (эпик)
+  m: '#243022', // тень на земле
+}
+
+/** Поставить пиксель (без выхода за границы). */
+function put(m: Matrix, x: number, y: number, ch: string): void {
+  const row = m[y]
+  if (row && x >= 0 && x < row.length) m[y] = row.substring(0, x) + ch + row.substring(x + 1)
+}
+
+/** Заполненный эллипс. */
+function ellipse(m: Matrix, cx: number, cy: number, rx: number, ry: number, ch: string): void {
+  for (let y = Math.floor(cy - ry); y <= Math.ceil(cy + ry); y++) {
+    for (let x = Math.floor(cx - rx); x <= Math.ceil(cx + rx); x++) {
+      const dx = (x - cx) / rx
+      const dy = (y - cy) / ry
+      if (dx * dx + dy * dy <= 1) put(m, x, y, ch)
+    }
+  }
+}
+
+/** Вертикальная линия. */
+function vline(m: Matrix, x: number, y0: number, y1: number, ch: string): void {
+  for (let y = y0; y <= y1; y++) put(m, x, y, ch)
+}
+
+/** Горизонтальная полоса. */
+function hline(m: Matrix, x0: number, x1: number, y: number, ch: string): void {
+  for (let x = x0; x <= x1; x++) put(m, x, y, ch)
+}
+
+// --- Тайлы (16×16, бесшовные) ---
+
+function speckle(m: Matrix, seed: number, chs: string[]): void {
+  // детерминированный «шум» внутри 2..13 — края чистые (бесшовность)
+  for (let i = 0; i < 5; i++) {
+    const x = 2 + ((seed * 7 + i * 29) % 12)
+    const y = 2 + ((seed * 13 + i * 17) % 12)
+    put(m, x, y, chs[i % chs.length]!)
+  }
+}
+
+function grassTile(seed: number, base = 'g'): Matrix {
+  const m = blank(16, 16).map(() => base.repeat(16)) as Matrix
+  speckle(m, seed, ['G', 'H', 'G'])
+  return m
+}
+
+export const GRASS_A = grassTile(1)
+export const GRASS_B = grassTile(2, 'g')
+
+/** Супер-тайл 32×32: шахматка grass-a/b (период 2 клетки — глубина без рваного шума). */
+export const GRASS_SUPER: Matrix = (() => {
+  const rows: Matrix = []
+  for (let y = 0; y < 32; y++) {
+    const left = y < 16 ? GRASS_A[y]! : GRASS_B[y - 16]!
+    const right = y < 16 ? GRASS_B[y]! : GRASS_A[y - 16]!
+    rows.push(left + right)
+  }
+  return rows
+})()
+
+export const GRASS_TUFT: Matrix = (() => {
+  const m = [...GRASS_A]
+  // кустики травинок: светлые пучки на тёмном стебле
+  const tuft = ['H.H.H', 'HHHHH', '.HtH.', '..t..']
+  return stamp(m, tuft, 5, 7)
+})()
+
+export const WILD: Matrix = (() => {
+  const m = blank(16, 16).map(() => 'w'.repeat(16)) as Matrix
+  speckle(m, 3, ['W', 'W', 'x'])
+  return m
+})()
+
+/** Изгородь: период 4 (бугры 2×2) — бесшовна при тайлировании. */
+export const HEDGE: Matrix = (() => {
+  const m = blank(16, 16).map(() => 'e'.repeat(16)) as Matrix
+  for (let x = 0; x < 16; x++) {
+    if (x % 4 < 2) {
+      put(m, x, 0, 'E')
+      put(m, x, 1, 'E')
+    }
+    put(m, x, 15, 'F')
+  }
+  // лиственная фактура: светлые пятна (детерминированные)
+  for (let i = 0; i < 6; i++) {
+    const x = (i * 5 + 2) % 16
+    const y = 2 + ((i * 7) % 12)
+    put(m, x, y, y < 4 ? 'E' : 'F')
+  }
+  return m
+})()
+
+// --- Домик (64×48, footprint 4×3 клетки) ---
+
+export const HOUSE: Matrix = (() => {
+  const m = blank(64, 48)
+  // стена
+  for (let y = 22; y < 48; y++) m[y] = 'n'.repeat(64)
+  hline(m, 0, 63, 22, 'N')
+  hline(m, 0, 63, 46, 'N')
+  hline(m, 0, 63, 47, 'N')
+  vline(m, 0, 22, 47, 'N')
+  vline(m, 63, 22, 47, 'N')
+  // крыша-трапеция (y 0..21)
+  for (let i = 0; i <= 21; i++) {
+    const half = Math.round(10 + (i / 21) * 22)
+    for (let x = 32 - half; x < 32 + half; x++) put(m, x, i, 'r')
+    put(m, 32 - half, i, 'R')
+    put(m, 32 + half - 1, i, 'R')
+  }
+  hline(m, 10, 53, 21, 'R')
+  // дверь (10×16, по центру, до земли)
+  for (let y = 32; y < 48; y++)
+    for (let x = 27; x < 37; x++) {
+      const edge = x === 27 || x === 36 || y === 32
+      put(m, x, y, edge ? 'O' : 'd')
+    }
+  // окна 8×8 с отблеском
+  for (const wx of [10, 46])
+    for (let y = 28; y < 36; y++)
+      for (let x = wx; x < wx + 8; x++) {
+        const edge = y === 28 || y === 35 || x === wx || x === wx + 7
+        put(m, x, y, edge ? 'N' : y === 29 && x === wx + 2 ? 'C' : 'c')
+      }
+  return m
+})()
+
+// --- Растения (6 видов × 3 стадии) ---
+// Вид по item_key с бэка; стадии 0/1/2. anchor спрайта (0.5, 0.95).
+
+/** Стебель с листиками (общая база цветочных видов). */
+function flowerBase(w: number, h: number, topY: number): Matrix {
+  const m = blank(w, h)
+  const cx = Math.floor(w / 2)
+  vline(m, cx, topY, h - 2, 't')
+  // листья: пара эллипсов по бокам
+  ellipse(m, cx - 3, h - 5, 3, 1.6, 'l')
+  ellipse(m, cx + 3, h - 8, 3, 1.6, 'l')
+  put(m, cx - 4, h - 6, 'k')
+  put(m, cx + 4, h - 8, 'k')
+  return m
+}
+
+/** Головка цветка: лепестки + сердцевина. */
+function bloom(m: Matrix, cx: number, cy: number, rx: number, petal: string, core: string): void {
+  ellipse(m, cx, cy, rx, Math.max(2, rx - 1), petal)
+  ellipse(m, cx, cy, Math.max(1, rx - 2), Math.max(1, rx - 3), core)
+  // лепестковые «выступы»
+  put(m, cx, cy - Math.max(2, rx - 1) - 1, petal)
+  put(m, cx, cy + Math.max(2, rx - 1), petal)
+  put(m, cx - rx - 1, cy, petal)
+  put(m, cx + rx + 1, cy, petal)
+}
+
+export function plantFlower(stage: number): Matrix {
+  if (stage === 0) {
+    const m = flowerBase(12, 12, 5)
+    bloom(m, 6, 3, 2, 'p', 'y')
+    return m
+  }
+  if (stage === 1) {
+    const m = flowerBase(16, 20, 7)
+    bloom(m, 8, 4, 3, 'p', 'y')
+    return m
+  }
+  const m = flowerBase(24, 28, 10)
+  bloom(m, 12, 5, 5, 'p', 'y')
+  // второй бутон сбоку
+  vline(m, 17, 12, 18, 't')
+  bloom(m, 17, 10, 2, 'p', 'y')
+  return m
+}
+
+function plantLeaf(stage: number): Matrix {
+  const sizes: [number, number][] = [
+    [12, 12],
+    [16, 20],
+    [24, 28],
+  ]
+  const [w, h] = sizes[stage]!
+  const m = blank(w, h)
+  const cx = Math.floor(w / 2)
+  // пучок листьев: перекрывающиеся эллипсы от земли
+  const ry = Math.floor(h * 0.45)
+  ellipse(m, cx, h - ry - 2, Math.floor(w * 0.32), ry, 'l')
+  ellipse(m, cx - Math.floor(w * 0.22), h - ry, Math.floor(w * 0.22), ry * 0.7, 'k')
+  ellipse(m, cx + Math.floor(w * 0.22), h - ry, Math.floor(w * 0.22), ry * 0.7, 'k')
+  ellipse(m, cx, h - ry - Math.floor(ry * 0.5), Math.floor(w * 0.18), ry * 0.55, 'L')
+  // травинки сверху
+  for (let i = 0; i <= stage * 2; i++)
+    vline(m, cx - 2 + i * 2, h - ry * 2 + (i % 2), h - ry * 2 + 2 + (i % 3), 'H')
+  return m
+}
+
+function plantEvergreen(stage: number): Matrix {
+  const sizes: [number, number][] = [
+    [12, 12],
+    [16, 20],
+    [24, 28],
+  ]
+  const [w, h] = sizes[stage]!
+  const m = blank(w, h)
+  const cx = Math.floor(w / 2)
+  // ярусы кроны: треугольники сверху вниз
+  const crownH = h - 3
+  for (let tier = 0; tier <= stage; tier++) {
+    const top = Math.floor((crownH / (stage + 1)) * tier)
+    const bottom = Math.floor((crownH / (stage + 1)) * (tier + 1))
+    const halfMax = Math.floor((w / 2 - 1) * ((tier + 1) / (stage + 1)))
+    for (let y = top; y <= bottom; y++) {
+      const half = Math.max(1, Math.round((halfMax * (y - top)) / (bottom - top)))
+      for (let x = cx - half; x <= cx + half; x++) put(m, x, y, y === bottom ? 'k' : tier === stage ? 'l' : 'k')
+      put(m, cx, y, tier === stage ? 'L' : 'l')
+    }
+  }
+  vline(m, cx, crownH, h - 2, 'O') // ствол
+  return m
+}
+
+function plantLotus(stage: number): Matrix {
+  const sizes: [number, number][] = [
+    [12, 12],
+    [16, 20],
+    [24, 28],
+  ]
+  const [w, h] = sizes[stage]!
+  const m = blank(w, h)
+  const cx = Math.floor(w / 2)
+  // широкие листья-лежанки у земли
+  ellipse(m, cx - 4, h - 3, 4, 1.6, 'l')
+  ellipse(m, cx + 4, h - 3, 4, 1.6, 'l')
+  ellipse(m, cx, h - 4, 3, 1.4, 'k')
+  // лотос: заострённые лепестки веером
+  const cy = h - 6 - stage * 3
+  const size = 2 + stage * 2
+  for (let i = -size; i <= size; i++) {
+    const ph = Math.max(2, size - Math.abs(i)) // высота лепестка
+    for (let dy = 0; dy < ph; dy++) put(m, cx + i, cy + dy, dy === 0 ? 'h' : dy < 2 ? 'h' : 'p')
+  }
+  ellipse(m, cx, cy + 1, Math.max(1, size - 2), 1, 'y')
+  return m
+}
+
+function plantCactus(stage: number): Matrix {
+  const sizes: [number, number][] = [
+    [12, 12],
+    [16, 20],
+    [24, 28],
+  ]
+  const [w, h] = sizes[stage]!
+  const m = blank(w, h)
+  const cx = Math.floor(w / 2)
+  const bodyH = Math.floor(h * (0.5 + stage * 0.15))
+  // ствол
+  ellipse(m, cx, h - bodyH / 2 - 1, Math.floor(w * 0.2), bodyH / 2, 'l')
+  vline(m, cx - Math.floor(w * 0.2), h - bodyH + 2, h - 2, 'l')
+  vline(m, cx + Math.floor(w * 0.2), h - bodyH + 2, h - 2, 'l')
+  vline(m, cx, h - bodyH, h - 2, 'L')
+  // руки
+  if (stage >= 1) {
+    ellipse(m, cx - Math.floor(w * 0.32), h - bodyH * 0.6, 2, 1.4, 'l')
+    vline(m, cx - Math.floor(w * 0.32) + 1, h - Math.floor(bodyH * 0.75), h - Math.floor(bodyH * 0.45), 'l')
+  }
+  if (stage >= 2) {
+    ellipse(m, cx + Math.floor(w * 0.32), h - bodyH * 0.8, 2, 1.4, 'l')
+    vline(m, cx + Math.floor(w * 0.32), h - Math.floor(bodyH * 0.95), h - Math.floor(bodyH * 0.6), 'l')
+  }
+  // колючки
+  for (let y = h - bodyH + 3; y < h - 3; y += 3) {
+    put(m, cx - Math.floor(w * 0.2) - 1, y, 'H')
+    put(m, cx + Math.floor(w * 0.2) + 1, y + 1, 'H')
+  }
+  // цветок на верхушке
+  const top = h - bodyH - 2
+  put(m, cx, top, 'q')
+  put(m, cx - 1, top + 1, 'q')
+  put(m, cx + 1, top + 1, 'q')
+  if (stage >= 2) {
+    put(m, cx, top - 1, 'q')
+    put(m, cx, top + 1, 'y')
+  }
+  return m
+}
+
+function plantOak(stage: number): Matrix {
+  const sizes: [number, number][] = [
+    [12, 12],
+    [16, 20],
+    [24, 28],
+  ]
+  const [w, h] = sizes[stage]!
+  const m = blank(w, h)
+  const cx = Math.floor(w / 2)
+  const trunkH = Math.floor(h * (0.25 + stage * 0.08))
+  const crownR = Math.floor(w * (0.28 + stage * 0.08))
+  // крона: три перекрывающихся эллипса
+  ellipse(m, cx, h - trunkH - crownR * 0.6, crownR, crownR * 0.75, 'l')
+  ellipse(m, cx - crownR * 0.5, h - trunkH - crownR * 0.2, crownR * 0.6, crownR * 0.5, 'k')
+  ellipse(m, cx + crownR * 0.5, h - trunkH - crownR * 0.25, crownR * 0.6, crownR * 0.5, 'k')
+  ellipse(m, cx - 1, h - trunkH - crownR * 0.8, crownR * 0.4, crownR * 0.4, 'L')
+  put(m, cx + 2, h - trunkH - crownR, 'L')
+  put(m, cx - 3, h - trunkH - crownR * 0.5, 'L')
+  // ствол с корнями
+  for (let y = h - trunkH; y < h; y++) {
+    put(m, cx, y, 'o')
+    put(m, cx + 1, y, 'O')
+  }
+  hline(m, cx - 2, cx + 3, h - 1, 'O')
+  return m
+}
+
+export const PLANT_BUILDERS: Record<string, (stage: number) => Matrix> = {
+  'ph-flower': plantFlower,
+  'ph-leaf': plantLeaf,
+  'ph-tree-evergreen': plantEvergreen,
+  'ph-flower-lotus': plantLotus,
+  'ph-cactus': plantCactus,
+  'ph-tree': plantOak,
+}
+
+// --- Декорации (item_key → матрица; используются и для чипов инвентаря) ---
+
+export const DECOR: Record<string, Matrix> = {
+  fence: (() => {
+    const m = blank(24, 10)
+    hline(m, 0, 23, 3, 'o')
+    hline(m, 0, 23, 4, 'O')
+    hline(m, 0, 23, 7, 'o')
+    hline(m, 0, 23, 8, 'O')
+    for (const px of [1, 11, 21]) {
+      vline(m, px, 0, 9, 'o')
+      vline(m, px + 1, 0, 9, 'O')
+      put(m, px, 0, 'O')
+    }
+    return m
+  })(),
+  flowerbed: (() => {
+    const m = blank(20, 10)
+    ellipse(m, 10, 7, 9, 2.5, 'b')
+    ellipse(m, 10, 7, 7, 1.6, 's')
+    // три цветка с лепестками и стеблями
+    const flower = (cx: number, cy: number, petal: string): void => {
+      vline(m, cx, cy + 2, cy + 3, 't')
+      put(m, cx - 1, cy + 3, 'l')
+      put(m, cx + 1, cy + 3, 'l')
+      ellipse(m, cx, cy, 1.6, 1.6, petal)
+      put(m, cx, cy, 'y')
+    }
+    flower(5, 3, 'p')
+    flower(10, 2, 'P')
+    flower(15, 3, 'p')
+    return m
+  })(),
+  lantern: (() => {
+    const m = blank(10, 18)
+    vline(m, 4, 6, 17, 'o')
+    vline(m, 5, 6, 17, 'O')
+    hline(m, 2, 7, 17, 'O')
+    hline(m, 2, 7, 16, 'o')
+    // корпус фонаря
+    for (let y = 0; y < 6; y++)
+      for (let x = 2; x < 8; x++) {
+        const edge = y === 0 || y === 5 || x === 2 || x === 7
+        put(m, x, y, edge ? 'O' : 'C')
+      }
+    put(m, 4, 2, 'q')
+    put(m, 5, 3, 'q')
+    return m
+  })(),
+  bench: (() => {
+    const m = blank(22, 10)
+    hline(m, 0, 21, 0, 'o') // спинка
+    hline(m, 0, 21, 4, 'o') // сиденье
+    hline(m, 0, 21, 5, 'O')
+    vline(m, 3, 6, 9, 'O')
+    vline(m, 18, 6, 9, 'O')
+    vline(m, 8, 1, 3, 'o')
+    vline(m, 13, 1, 3, 'o')
+    return m
+  })(),
+  birdbath: (() => {
+    const m = blank(16, 12)
+    ellipse(m, 8, 3, 6, 2, 'x')
+    ellipse(m, 8, 3, 4, 1.2, 'u')
+    put(m, 7, 3, 'U')
+    vline(m, 7, 4, 9, 'x')
+    vline(m, 8, 4, 9, 'x')
+    ellipse(m, 8, 10, 4, 1.4, 'x')
+    return m
+  })(),
+  pond: (() => {
+    const m = blank(28, 14)
+    ellipse(m, 14, 7, 13, 6, 'x')
+    ellipse(m, 14, 7, 11, 4.6, 'u')
+    ellipse(m, 12, 6, 5, 2, 'U')
+    put(m, 18, 8, 'U')
+    put(m, 9, 9, 'U')
+    return m
+  })(),
+  gazebo: (() => {
+    const m = blank(28, 24)
+    // крыша-конус
+    for (let y = 0; y <= 10; y++) {
+      const half = Math.round(2 + (y / 10) * 12)
+      for (let x = 14 - half; x < 14 + half; x++) put(m, x, y, 'r')
+      put(m, 14 - half, y, 'R')
+      put(m, 14 + half - 1, y, 'R')
+    }
+    hline(m, 2, 25, 10, 'R')
+    // столбы и пол
+    for (const px of [4, 23]) vline(m, px, 11, 21, 'o')
+    vline(m, 14, 11, 21, 'O')
+    hline(m, 2, 25, 21, 'o')
+    hline(m, 2, 25, 22, 'O')
+    hline(m, 5, 22, 20, 'O')
+    return m
+  })(),
+}
+
+// --- Вспомогательные ---
+
+/** Кольцо редкости под растением (эллипс-кайма). */
+function ring(gold: string): Matrix {
+  const m = blank(18, 6)
+  ellipse(m, 9, 3, 8, 2.4, gold)
+  ellipse(m, 9, 3, 6, 1.6, ' ')
+  return m
+}
+
+export const RING_RARE = ring('y')
+export const RING_EPIC = ring('q')
+
+export const SPARKLE: Matrix = ['.q.', 'qqq', '.q.']
+
+/** Рамка выделенной клетки (32×32, рисуется с alpha ~0.4). */
+export const SELECT_OUTLINE: Matrix = (() => {
+  const m = blank(32, 32)
+  hline(m, 0, 31, 0, 'h')
+  hline(m, 0, 31, 31, 'h')
+  vline(m, 0, 0, 31, 'h')
+  vline(m, 31, 0, 31, 'h')
+  return m
+})()
+
+// --- Доступ по ключам: текстуры — в textures.ts (импортирует pixi и попадает
+// в async-чанк рендерера); этот файл остаётся чистым (матрицы для DOM-превью).
+
+export { flipX }
\ No newline at end of file
diff --git a/frontend/src/game/textures.ts b/frontend/src/game/textures.ts
new file mode 100644
index 0000000..cba1aac
--- /dev/null
+++ b/frontend/src/game/textures.ts
@@ -0,0 +1,94 @@
+// Pixi-текстуры из пиксель-матриц сада: кэш модульного уровня — текстуры
+// статичны, переживают перемонтаж компонента, поэтому при app.destroy
+// не уничтожаются (texture: false). Модуль импортирует pixi и попадает
+// в async-чанк рендерера (GardenRenderer импортируется динамически).
+import { CanvasSource, Rectangle, Texture } from 'pixi.js'
+import { drawMatrix } from './pixelart'
+import type { Matrix, Palette } from './pixelart'
+import {
+  DECOR,
+  GRASS_A,
+  GRASS_B,
+  GRASS_SUPER,
+  GRASS_TUFT,
+  HEDGE,
+  HOUSE,
+  PAL,
+  PLANT_BUILDERS,
+  RING_EPIC,
+  RING_RARE,
+  SELECT_OUTLINE,
+  WILD,
+  plantFlower,
+} from './sprites'
+
+const cache = new Map<string, Texture>()
+
+/** Текстура из матрицы; кэшируется по ключу (повторный вызов матрицу не читает). */
+export function textureFor(key: string, rows: Matrix, palette: Palette): Texture {
+  const hit = cache.get(key)
+  if (hit) return hit
+  const cv = drawMatrix(rows, palette, 1)
+  // CanvasSource (не сырой TextureSource): только он знает uploadMethodId 'image'
+  // для загрузки canvas в GPU; TextureSource без адаптера молча не рисуется.
+  const source = new CanvasSource({
+    resource: cv,
+    scaleMode: 'nearest',
+    antialias: false,
+  })
+  const tex = new Texture({ source, frame: new Rectangle(0, 0, cv.width, cv.height) })
+  cache.set(key, tex)
+  return tex
+}
+
+/** Текстура тайла по имени. */
+export function tileTexture(
+  name: 'grass-a' | 'grass-b' | 'grass-super' | 'grass-tuft' | 'wild' | 'hedge',
+): Texture {
+  switch (name) {
+    case 'grass-a':
+      return textureFor('tile:grass-a', GRASS_A, PAL)
+    case 'grass-b':
+      return textureFor('tile:grass-b', GRASS_B, PAL)
+    case 'grass-super':
+      return textureFor('tile:grass-super', GRASS_SUPER, PAL)
+    case 'grass-tuft':
+      return textureFor('tile:grass-tuft', GRASS_TUFT, PAL)
+    case 'wild':
+      return textureFor('tile:wild', WILD, PAL)
+    case 'hedge':
+      return textureFor('tile:hedge', HEDGE, PAL)
+  }
+}
+
+/** Текстура домика. */
+export function houseTexture(): Texture {
+  return textureFor('house', HOUSE, PAL)
+}
+
+/** Текстура растения (вид × стадия). */
+export function plantTexture(species: string, stage: number): Texture {
+  const build = PLANT_BUILDERS[species] ?? plantFlower
+  const rows: Matrix = build(stage)
+  return textureFor(`plant:${species}:${stage}`, rows, PAL)
+}
+
+/** Текстура декорации по item_key. */
+export function decorTexture(key: string): Texture {
+  return textureFor(`decor:${key}`, DECOR[key] ?? DECOR.flowerbed!, PAL)
+}
+
+/** Кольцо редкости. */
+export function ringTexture(rarity: string): Texture {
+  return textureFor(`ring:${rarity}`, rarity === 'epic' ? RING_EPIC : RING_RARE, PAL)
+}
+
+/** Блёстка (эпик-растения). */
+export function sparkleTexture(): Texture {
+  return textureFor('sparkle', ['.q.', 'qqq', '.q.'], PAL)
+}
+
+/** Рамка выделенной/целевой клетки. */
+export function selectOutlineTexture(): Texture {
+  return textureFor('select-outline', SELECT_OUTLINE, PAL)
+}
\ No newline at end of file