Игра запускается и играется: три рантайм-бага и адаптивная вёрстка

Проверено вживую в Chrome: лобби -> матч -> бот ходит -> результат ->
статистика в лобби. Полный матч отыгран, оба исхода видел.

Баги, которые собирались и типизировались, но падали только в рантайме:

1. Canvas не менял размер под экран. Своего cc.Widget у него не было,
   а alignCanvasWithScreen правит только камеру. Canvas оставался
   1280x720, и все растянутые по нему дети — тоже.
2. [...map.values()] превращается сборкой в [].concat(map.values()),
   а concat не разворачивает итератор, а кладёт его одним элементом.
   Отсюда "view.cancelAnimations is not a function" на первой же уборке
   карт. Теперь Array.from.
3. Рубашка козыря рисовалась поверх колоды, а не под ней.

Вёрстка переделана под требование UI.md (4:3 .. 21:9):
- fitWidth даёт постоянную ширину, но не высоту: на 4:3 видно только
  ±720 юнитов. Кнопка "Leave" на y=840 и низ руки на -860 были за
  экраном именно там, где это важнее всего
- рука и панель действий считаются от нижней границы экрана,
  "Leave" прибит виджетом к левому верхнему углу
- стол — один ряд до шести карт вместо двух рядов по три: экономит
  ~215 юнитов высоты, которых на 4:3 нет. Ряд центрируется по тем
  картам, что реально на столе
- затемнение под окном результата рисуется непрозрачным спрайтом:
  тонировать и без того полупрозрачный спрайт почти ничего не даёт

Инструменты:
- npm run serve — отдаёт сборку и роут /_aspects: игра в трёх
  фиксированных iframe-ах 4:3 / 16:9 / 21:9. Движок подгоняет себя
  под окно, поэтому iframe — единственный простой способ увидеть
  вёрстку в форме, которой окно не имеет
- npm run check:spreads — ловит спред неитерируемого в массив
- npm run check — чистота core, спреды, сцены, типы, тесты

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

docs/DECISIONS.md

@@ -171,3 +171,34 @@ every node authored through the editor tools had been left on the DEFAULT layer
 while the camera only renders UI_2D (see CODE_MODE_SETUP.md). A blank screen
 carries no information about which step failed, and a loader that can hang
 forever on an asset the lobby does not even need is a dead end for no reason.
+
+## 2026-09-13 · Presentation · The vertical layout follows the screen edges
+
+**Decision.** `Layout` holds fixed anchors only for things that live near the
+centre, and every one of those is inside ±700. The player's hand and the action
+bar are computed from the actual canvas height at render time (`bottomAnchors`),
+and the Leave button is pinned to the top-left with a Widget.
+
+**Why.** `fitWidth` means the width is always 1080 units but the height is not:
+a 4:3 phone sees 1440 units (±720) and a 21:9 phone sees 2520 (±1260). The first
+version used fixed design coordinates, which put the Leave button at y = 840 and
+the bottom of the hand at −860 — both off screen on a 4:3 phone, the very case
+docs/UI.md asks for. The table is also a single row of up to six slots rather
+than two rows of three, which buys back the ~215 units of height that 4:3 cannot
+spare, and the row is centred on the cards actually in play so a lone attacking
+card sits in the middle of the table.
+
+## 2026-09-13 · Build · Never array-spread anything that is not an array
+
+The build transpiles `[...a, ...b]` to `[].concat(a, b)`. That is right for
+arrays, but `Array.prototype.concat` does not expand an arbitrary iterable — it
+appends it as a single element. `[...this._views.values()]` therefore produced a
+one-element array holding the Map iterator, and the first card ever recycled
+threw `view.cancelAnimations is not a function`.
+
+**Decision.** Use `Array.from(...)` for anything that is not already an array,
+and `npm run check:spreads` fails the build on `...x.values()`, `...x.keys()`,
+`...x.entries()` and spreads of things named like a Map or Set.
+
+**Why.** It type-checks, it reads correctly, and it only fails at runtime on a
+real build — exactly the kind of mistake a static check earns its keep on.

docs/PLAN.md

@@ -80,21 +80,19 @@ progress. The Cocos layer only renders state and turns taps into actions.
 - [x] Return to lobby; start another match without a scene leak
 - [x] Leave-match button, which ends the match as a loss
 
-### M8 — Responsive and touch pass `[~]`
+### M8 — Responsive and touch pass `[x]`
 - [x] Fit-width canvas, safe-area root, widget-stretched background
-- [x] Every interactive element authored at or above the 120-unit minimum
+- [x] Every interactive element at or above the 120-unit minimum
       (buttons 330×140 and 560×150; hand cards expose ~128 units each)
-- [x] Vertical positions kept inside the 4:3 crop
-- [ ] **Blocked:** seen at the extreme aspect ratios. Needs a machine that can
-      actually run the build — see "What is and is not verified" in
-      [TECHNICAL.md](TECHNICAL.md)
+- [x] Hand and action bar follow the bottom edge; Leave pinned to the top-left
+- [x] Seen running at 4:3, 16:9 and 21:9 — `npm run serve` then `/_aspects`
 
-### M9 — Build verification and hand-off `[~]`
+### M9 — Build verification and hand-off `[x]`
 - [x] `web-mobile` build completes clean; command recorded in TECHNICAL.md
 - [x] Card art reaches the build and packs into a single 2048² atlas
 - [x] Every component reference in the scene verified populated
-- [ ] **Blocked:** the build seen running. The browser in this environment falls
-      back to a software renderer that cannot start the engine's main loop
+- [x] A full match played in a browser: deal, attack, defend, take, discard,
+      redraw, result overlay, statistics written and shown back in the lobby
 - [x] Android/iOS texture settings written up in TECHNICAL.md (they have to
       be applied once in the Inspector; they live in the `.meta` files)
 - [x] README
@@ -105,9 +103,13 @@ progress. The Cocos layer only renders state and turns taps into actions.
   is off in both scenes, but the scene keeps its `_envmapHDR` reference and the
   builder follows it. The editor tool server cannot write a null reference;
   clearing the field in the Inspector by hand would do it.
-- Nothing verifies the presentation layer automatically. The obvious next step is
-  a smoke test that boots the scene headlessly and asserts the card nodes land
-  where the layout says they should.
+- Nothing verifies the presentation layer automatically. `npm run check:scenes`
+  and `npm run check:spreads` catch the two classes of mistake that have
+  actually bitten, but a smoke test that boots the scene and asserts card
+  positions would cover more.
+- At 21:9 there is a lot of empty felt between the table and the hand. It reads
+  as roomy rather than broken, but the table could drift downwards on very tall
+  screens.
 
 ## Deliberately out of scope for iteration 1
 

docs/TECHNICAL.md

@@ -241,19 +241,34 @@ The card atlas is the only texture where this matters — 2048×2048 uncompresse
 is 16 MB of video memory, and ASTC 6×6 brings that to roughly 1.2 MB. Do it
 before the first device build.
 
-### What is and is not verified
-
-The rules, the bot and the save format are covered by `npm test` and are
-verified. The presentation layer is verified only as far as this environment
-allows: the project builds clean, every component reference in the scene is
-populated, and all 37 card sprites pack into one 2048² texture.
-
-It has **not** been seen running. The browser available here falls back to a
-software renderer that cannot start the Cocos main loop (`totalFrames` stays at
-0), so no screenshot of the actual game was possible. To check it by eye, open
-the project in Cocos Creator and press Preview, or serve `build/web-mobile` over
-HTTP — it is a static folder and needs no server features:
+### Looking at it
 
 ```bash
-npx http-server build/web-mobile -p 8123 -c-1
+npm run serve
 ```
+
+Serves `build/web-mobile` on http://localhost:8123, plus one route of its own:
+
+- `/_aspects` — the game in fixed-size iframes at 4:3, 16:9 and 21:9 portrait,
+  side by side. The engine resizes itself to fill whatever window it is in, so
+  an iframe is the only straightforward way to see the layout at a shape the
+  desktop window is not.
+- `/_aspects?only=16:9&h=690` — one viewport, which boots much faster than three.
+
+The layout has been checked this way at all three ratios, and a full match
+played through in the browser: deal, attack, defend, take, discard, redraw,
+result overlay, and the statistics written and read back in the lobby.
+
+### Three traps this project has already fallen into
+
+All three build and type-check cleanly, look right in the editor, and fail only
+at runtime. Each now has a guard; `npm run check` runs all of them.
+
+1. **Node layers.** `nodeCreate` puts nodes on DEFAULT; a Canvas camera renders
+   UI_2D only, so the build shows the camera's clear colour and nothing else.
+   The scene view renders every layer, so the editor looks fine.
+2. **The Canvas needs its own Widget.** Without one the Canvas keeps the size it
+   was authored at and every widget-stretched child inherits it.
+   `alignCanvasWithScreen` does not do this — it only adjusts the camera.
+3. **Array spread of a non-array.** The build turns `[...x]` into `[].concat(x)`,
+   which appends an iterator rather than expanding it. Use `Array.from`.