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

Проверено вживую в 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>

assets/scripts/ui/common/Theme.ts

@@ -37,27 +37,57 @@ export const Layout = {
     screenMargin: 40,
 
     /**
-     * Where things sit on the table, in canvas coordinates (origin at the
-     * centre, y up). Vertical positions stay well inside the 1080×1920 design
-     * area so that a 4:3 screen — which crops the top and bottom — still shows
-     * every one of them. See docs/DECISIONS.md.
+     * Fixed anchors, in canvas coordinates (origin at the centre, y up).
+     *
+     * Every one of these is inside ±700, because the widest screen the game
+     * supports is 4:3, and fit-width means a 4:3 phone sees only 1440 design
+     * units of height — ±720 from the centre. Anything outside that band is
+     * simply not on screen for those players. The hand and the action bar are
+     * NOT here: they follow the bottom edge, see `bottomAnchors`.
      */
-    region: {
-        opponentHandY: 600,
-        opponentLabelY: 770,
-        deck: { x: -390, y: 150 },
-        trump: { x: -300, y: 120 },
-        discard: { x: 430, y: 150 },
-        /** Centre of the first table row; the second row sits a row-height below. */
-        tableTopY: -20,
-        tableRowStep: 235,
-        tableColumnStep: 180,
-        messageY: 330,
-        actionBarY: -430,
-        playerHandY: -700,
-    },
+    opponentLabelY: 630,
+    opponentHandY: 500,
+    messageY: 355,
+    deck: { x: -395, y: 215 },
+    trump: { x: -300, y: 185 },
+    discard: { x: 430, y: 215 },
+    deckLabelY: 55,
+
+    /**
+     * The table is one row of up to six slots rather than two rows of three.
+     * Six cards at 0.62 scale span 950 of the 1080 available units, and the row
+     * saves the ~215 units of height that a second row would cost — height the
+     * 4:3 layout cannot spare.
+     */
+    tableY: -30,
+    tableColumnStep: 170,
+    tableColumns: 6,
 } as const;
 
+/**
+ * The anchors that follow the bottom of the screen instead of the centre.
+ *
+ * The player's hand must be reachable by a thumb and fully visible whatever the
+ * screen's shape, so it is measured from the bottom edge rather than placed at
+ * a fixed design coordinate. On a tall 21:9 screen this simply leaves more felt
+ * between the table and the hand.
+ */
+export function bottomAnchors(halfHeight: number): { handY: number; actionBarY: number } {
+    const handY = -halfHeight + Layout.cardHeight / 2 + 24;
+    return { handY, actionBarY: handY + Layout.cardHeight / 2 + 85 };
+}
+
+/**
+ * Centre x of table slot `index` when `count` cards are down.
+ *
+ * The row is centred on what is actually in play, not on six fixed slots — a
+ * lone attacking card belongs in the middle of the table, not parked in the
+ * left-hand slot of an empty grid.
+ */
+export function tableSlotX(index: number, count: number): number {
+    return (index - (count - 1) / 2) * Layout.tableColumnStep;
+}
+
 export const Palette = {
     gold: new Color(244, 194, 69, 255),
     cream: new Color(247, 240, 222, 255),