@the-inclusionist/engine 9.0.0 → 11.0.0

package/app/css/style.css

@@ -1,47 +1,60 @@
 /* SPDX-License-Identifier: AGPL-3.0-or-later */
 :root{
+  /* The engine stylesheet's sentinel: `createGame` reads it to say in `problems` when a page did not link this file. */
+  --incl-engine-stylesheet:1;
   --bg:#0b1020; --panel:#1b2440; --ink:#f5f8ff; --ink-soft:#cdd6f2;
   --accent:#ffd23f; --accent-ink:#1a1400; --focus:#ffd23f; --good:#34e29b;
-  --changed:#fff; /* ADR-0029: moldura de quem saiu do padrão */
-  /* Alto contraste no DOM (issue #83): o véu do painel sem transparência, e o fundo de botão. Ficam aqui,
-     junto dos outros tokens, para o teste de contraste poder lê-los do CSS em vez de os copiar. */
+  --changed:#fff; /* ADR-0029: the frame of a setting that left its default */
+  /* High contrast in the DOM (issue #83): the panel veil without transparency, and the button background. They live here,
+     beside the other tokens, so the contrast test can read them from the CSS instead of copying them. */
   --bg-solid:#04070f; --panel-btn:#1a2740;
   --maxw:1000px; --tap:44px;
-  --ui-fs:16px; /* fonte-base da UI (<p>): 16px = MÍNIMO a 640×360; o JS (layout) aumenta conforme o canvas cresce */
-  /* ===== Tipografia oficial EdSP ===== */
-  /* 'Noto Color Emoji' no fim do stack → emoji consistentes (nativo no Chromebook/Android; woff2 abaixo p/ Windows) */
+  --ui-fs:16px; /* the UI's base font size (<p>): 16px = the MINIMUM at 640×360; `ui/layout` raises it as the canvas grows */
+  /* ===== The engine's typography ===== */
+  /* 'Noto Color Emoji' at the end of the stack → consistent emoji (native on Chromebook/Android; the system face elsewhere) */
   --font-fallback:system-ui,"Segoe UI",Roboto,Arial,sans-serif,'Noto Color Emoji';
-  --font:'Atkinson Hyperlegible',var(--font-fallback);          /* PADRÃO */
-  --font-math:'Atkinson Hyperlegible Mono',ui-monospace,"Cascadia Mono",Consolas,monospace; /* matemática */
-  /* Espaçamento padrão do projeto (≥ recomendações WCAG 2.2 §1.4.12) */
-  --ls:0.12em;   /* letter-spacing */
-  --ws:0.16em;   /* word-spacing */
+  --font:'Atkinson Hyperlegible',var(--font-fallback);          /* DEFAULT */
+  --font-math:'Atkinson Hyperlegible Mono',ui-monospace,"Cascadia Mono",Consolas,monospace; /* mathematics */
+  /* ===== SPACING: THE DEFAULT ROSE FROM THE WCAG FLOOR TO THE BDA'S (ADR-0149 §2) =====
+     It was 0.12em/0.16em — the floor of WCAG 2.2 §1.4.12 —, and it is now 0.18em/0.63em, the British Dyslexia
+     Association's recommendation: word ≥ 3.5× letter. The Dev's decision on 2026-09-12: «somente fontes
+     cursivas não precisam seguir; ao usar todas as outras fontes, é obrigatório seguir».
+
+     ⚠️ THIS USED TO BE THE EXCEPTION OF ONE FACE. The BDA numbers lived only in `[data-fonte="dislexia"]` (Lexend),
+     and the DEFAULT face — Atkinson, which every game draws — sat on the WCAG floor. It was not «no spacing at all»,
+     as a first version of the record said; it was the lower of the two floors, applied because of a LABEL instead of
+     because of a rule about faces.
+
+     🔴 AND THE REACH OF THIS IS EVERY GAME: changing the default face's spacing changes the metrics of every screen at
+     once. It is the right rule, and it is a layout change in every game that uses the engine. */
+  --ls:0.18em;   /* letter-spacing — BDA */
+  --ws:0.63em;   /* word-spacing  — BDA (≥ 3.5× the letter) */
   --lh:1.5;      /* line-height */
 
-  /* ===== ORDEM-Z CANÔNICA — a faixa de OVERLAY do `core/layers.ts` (ADR-0020) =====
-     Estes valores são a MESMA fonte que o mundo usa em PIXI, trazida para o CSS. Eles existem antes do
-     primeiro consumidor DE PROPÓSITO, e o motivo é o mesmo que a Fase C deu ao barramento tipado: o contrato
-     precisa nascer certo em vez de ser retipado depois. `tests/z-order-css.node.test.js` compara este bloco,
-     valor a valor, com o `Z` do TypeScript — divergir fica vermelho.
-
-     ⚠️ NENHUM SELETOR AINDA OS USA, e isso NÃO é esquecimento. Adotá-los inverte três ordens que hoje valem,
-     e inverter ordem é decisão de produto:
-
-       · `.caption` (8) está ABAIXO de `#touch-controls` (14). Canonicamente CAPTIONS(26000) fica ACIMA de
-         TOUCH_CONTROLS(25000). A inversão CONSERTA um defeito — legenda é recurso de surdez, e controle de
-         toque cobrindo legenda é a coisa errada —, mas muda a tela.
-       · `.quiz` (12) está ABAIXO de `#touch-controls` (14); canonicamente DIALOGUE(27000) fica acima.
-       · `.skip-link` (100) está ACIMA dos modais (60). O comentário do `Z` põe o skip-link em CAPTIONS
-         (26000), o que o deixaria ABAIXO de MENU(30000) — e um "pular para o conteúdo" embaixo de um modal
-         não é alcançável. Aqui o comentário do `Z` é que está errado, não o CSS.
-
-     E DUAS COISAS NÃO TÊM SLOT: os dois pseudo-elementos do CRT (`crt-vig-1::before` em 5 e
-     `crt-scan-1::after` em 500). Pelo ADR-0020 o CRT é PÓS-PROCESSO, não camada — inventar um número para
-     ele repetiria o erro de categoria que a emenda de 2026-08-26 já registrou no `app.stage`.
-
-     ⚠️ E `z-index` de CSS NÃO É PLANO. `#game-hud` tem `z-index:4` e CRIA CONTEXTO DE EMPILHAMENTO, então o
-     `.screen-pause` (6) compete só lá dentro — o menu de pausa vive efetivamente em "4" na raiz. Uma lista
-     plana de valores globais não expressa isso. Adotar exige decidir, por elemento, em que contexto ele vive. */
+  /* ===== THE Z-ORDER SLOTS — the engine's canonical stacking order (ADR-0020, ADR-0102) =====
+     These `--z-*` variables are where the z-order lives now. They were born as the OVERLAY band of the `Z` table in
+     `core/layers.ts`; that table was the platformer's world order and left with the tile world (ADR-0228), so the
+     slots below are the only copy. `tests/the-skip-link-outranks-the-transition.node.test.js` holds what the engine
+     needs of them: the skip link sits on its slot, above the transition and every other slot except the loop-crash
+     notice and the debug panel, and no literal `z-index` in this file reaches it.
+
+     ⚠️ MOST SELECTORS STILL CARRY LITERALS, and that is not forgetfulness. Only `.skip-link`, `#incl-parou` and the
+     touch pad over an open panel read a slot. Adopting the slots everywhere inverts three orders that hold today, and
+     inverting an order is a product decision:
+
+       · `.caption` (8) is BELOW the touch pad (14). In the slots, captions (26000) are ABOVE touch controls (25000).
+         The inversion FIXES a defect — the caption serves deaf players, and a touch control covering it is the wrong
+         way round —, but it changes the screen.
+       · `.quiz` (12) is BELOW the touch pad (14); in the slots, dialogue (27000) is above.
+       · the skip link was already corrected: it sits on `--z-skip-link`, above the modals and the transition.
+
+     AND TWO THINGS HAVE NO SLOT: the two CRT pseudo-elements (`crt-vig-1::before` at 5 and `crt-scan-1::after` at
+     500). Under ADR-0020 the CRT is POST-PROCESSING, not a layer — inventing a number for it would repeat the category
+     error the record already names.
+
+     ⚠️ AND CSS `z-index` IS NOT FLAT. `#game-hud` has `z-index:4` and CREATES A STACKING CONTEXT, so `.screen-pause`
+     (6) competes only inside it — the pause menu effectively lives at "4" at the root. A flat list of global values
+     cannot express that. Adopting the slots means deciding, per element, which context it lives in. */
   --z-hud:24000;
   --z-touch-controls:25000;
   --z-captions:26000;
@@ -55,326 +68,362 @@
   --z-loop-crash:45000;
   --z-debug:90000;
 }
-/* Emoji: usa o Noto Color Emoji do sistema (Chromebook/Android/Linux) e, se ausente, o woff2 embutido
-   (offline). Se o arquivo não estiver presente, o navegador cai no emoji do SO — sem quebrar. */
-@font-face{ font-family:'Noto Color Emoji'; src:local('Noto Color Emoji'); /* só a fonte do sistema; sem download (o .woff2 nunca existiu) */ font-display:swap; }
-/* Modo ALFABETIZAÇÃO → Andika */
+/* Emoji: the system's Noto Color Emoji (Chromebook/Android/Linux). No file is shipped for it, so where the system
+   lacks it the browser falls back to the OS emoji — without breaking. */
+@font-face{ font-family:'Noto Color Emoji'; src:local('Noto Color Emoji'); /* the system face only; no download (the .woff2 never existed) */ font-display:swap; }
+/* LITERACY mode → Andika */
 :root[data-fonte="alfabetizacao"]{ --font:'Andika',var(--font-fallback); }
-/* Modo DISLEXIA/TDAH → Lexend + espaçamento da British Dyslexia Association
-   (palavra ≥ 3,5× letra: letter 0.18em / word 0.63em) */
-:root[data-fonte="dislexia"]{ --font:'Lexend',var(--font-fallback); --ls:0.18em; --ws:0.63em; }
-/* Tipografia: qualquer fonte do catálogo (menu próprio na pausa); --font-custom traz a pilha com fallback */
+/* DYSLEXIA/ADHD mode → Lexend. 📌 The BDA spacing is not here: it is the document's default (see `:root`, ADR-0149 §2),
+   not this face's exception. The rule keeps only the FAMILY, which is all it ever had of its own. */
+:root[data-fonte="dislexia"]{ --font:'Lexend',var(--font-fallback); }
+/* ===== THE CURSIVE EXCEPTION (ADR-0149 §3) =====
+   🔴 Letter spacing on a JOINED face breaks it exactly at the joins that make it cursive: what is meant to help the
+   reading would destroy the thing being read. The Dev's words: «para manter os conectores».
+   It is not a concession — it is the same rule applied to a face where it inverts.
+   ⚠️ `normal` and not `0`: `word-spacing:0` is still a spacing declaration; `normal` gives back the metrics the face's
+   designer chose, which is precisely what is meant to be preserved. */
+:root[data-cursiva="1"]{ --ls:normal; --ws:normal; }
+/* A COLOUR-VISION-SAFE PALETTE FOR THE MENUS AND THE HUD (ADR-0151) — Okabe-Ito.
+   📏 The interface's meaning-by-colour sits in two tokens: `--accent` (selection, «on», choice) and `--good` (the right
+   answer revealed). The usual pair, yellow and green, is the one protans and deutans confuse: CIE76 ΔE of 48 and 55
+   after Machado's (2009) simulation. Orange and sky blue give 101, 111 and 87 (tritan) — the largest worst case among
+   the Okabe-Ito pairs measured — and every contrast stays ≥ 4.5:1 (the tightest is `--good` on the selected button,
+   4.88:1). The gate is `tests/okabe-ito-palette.node.test.js`. */
+:root[data-paleta="okabe-ito"]{ --accent:#E69F00; --focus:#E69F00; --good:#56B4E9; }
+/* Typography: any face of the catalogue (its own menu in the pause); --font-custom brings the stack with its fallback */
 :root[data-fonte="custom"]{ --font:var(--font-custom,'Atkinson Hyperlegible'),var(--font-fallback); }
-/* Menu Tipografia: caixa branca de pré-visualização (pangrama), escrita escura */
+/* Typography menu: a white preview box (pangram), dark text */
 .typo-preview{background:#fff;color:#14141f;border:2px solid var(--ink-soft);border-radius:8px;padding:.65rem .9rem;margin:.2rem 0 .6rem;font-size:1.3em;line-height:1.3;text-align:center}
-/* Tela de título (visual da v3): overlay TRANSPARENTE — a cena (céu/nuvens/grama) vem do canvas */
-#title-overlay{background:transparent;font-size:var(--ui-fs,16px)} /* UI do splash escala com o k inteiro do canvas (igual pausa/diálogos) — NÃO fica fixa em 16px */
-body.at-title #game-hud,body.at-title .start-tips,body.at-title .hud{display:none} /* HUD do jogo não vaza no menu inicial (display: filhos não conseguem re-exibir) */
+/* Title screen: a TRANSPARENT overlay — the scene behind it comes from the canvas */
+#title-overlay{background:transparent;font-size:var(--ui-fs,16px)} /* the splash UI scales with the canvas's integer k (like the pause and the dialogs) — it does NOT stay at 16px */
+body.at-title #game-hud,body.at-title .start-tips,body.at-title .hud{display:none} /* the game's HUD does not leak into the start menu (display: children cannot show themselves again) */
 .title-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;max-height:96%;}
-.game-title{color:#fff;font-size:2em;line-height:1.2;margin:0;text-align:center;letter-spacing:1px;text-shadow:2px 2px 0 #0d0d1a,-1px -1px 0 #0d0d1a}
+.game-title{color:#fff;font-size:2em;line-height:1.2;margin:0;text-align:center;letter-spacing:var(--ls);text-shadow:2px 2px 0 #0d0d1a,-1px -1px 0 #0d0d1a}
 .title-block{display:inline-block}
-.game-byline{color:#f6f5f0;font-size:.8em;text-align:right;margin-top:2px;text-shadow:1px 1px 0 #0d0d1a}
-.game-version{color:#9999b3;font-size:.6em;text-align:right;letter-spacing:1px;margin-top:2px;text-shadow:1px 1px 0 #0d0d1a}
-.game-subtitle{color:#f6f5f0;font-size:.8em;margin:0 0 4px;text-shadow:1px 1px 0 #0d0d1a;text-align:center}
-/* Splash DENTRO do canvas, SEM rolagem. GESTALT (José): a11y no CABEÇALHO · menu no ESPAÇO DE TRABALHO · legenda no RODAPÉ */
+.game-byline{color:#f6f5f0;font-size:1em;text-align:right;margin-top:2px;text-shadow:1px 1px 0 #0d0d1a}
+.game-version{color:#9999b3;font-size:1em;text-align:right;letter-spacing:var(--ls);margin-top:2px;text-shadow:1px 1px 0 #0d0d1a}
+.game-subtitle{color:#f6f5f0;font-size:1em;margin:0 0 4px;text-shadow:1px 1px 0 #0d0d1a;text-align:center}
+/* The splash INSIDE the canvas, with NO scrolling. GESTALT (the Dev): a11y in the HEADER · menu in the WORKSPACE · legend in the FOOTER */
 .title-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;max-height:none}
-.title-legend{position:absolute;left:0;right:0;bottom:8px}                 /* RODAPÉ, como a legenda da pausa */
-.title-menu{display:flex;flex-direction:column;gap:.35em;align-items:stretch;padding:2px;width:13em;margin:0 auto} /* largura fixa ENXUTA */
+.title-legend{position:absolute;left:0;right:0;bottom:8px}                 /* FOOTER, like the pause legend */
+.title-menu{display:flex;flex-direction:column;gap:.35em;align-items:stretch;padding:2px;width:13em;margin:0 auto} /* a fixed, LEAN width */
+/* NO MENU LEAVES THE CANVAS (ADR-0130 rule 5): every opening menu scrolls when its items outgrow the frame — a RULE of the
+   class, so a menu a game adds inherits it. The main menu had no scroll: with twenty items it ran 208 px above and 288 px
+   below a 360 px stage, and its first and last items could not be reached. */
+.title-menu{max-height:72%;overflow-y:auto;overflow-x:hidden}
 .title-menu[hidden]{display:none}
-/* O menu principal com o DOBRO da largura base (13em → 26em): a 13em os rótulos quebravam em DUAS linhas, e
-   um botão de duas linhas muda de altura conforme o idioma — a mesma tela com uma geometria em pt-BR e outra
-   em espanhol. Quem se orienta por alinhamento perde a referência; quem escuta nem percebe que ela existia. */
-#tm-main{width:26em}
-/* ===================== SUBMENUS DA ABERTURA: LISTA VERTICAL COM ROLAGEM (ADR-0044) =====================
-   Eram GRADES de duas colunas, e a seta anda em ordem de DOM: “para baixo” pulava para a coluna da direita,
-   atravessando a tela. O anel do item 1 já estava certo no código (`nextTitleIndex` dá a volta) — era o
-   LAYOUT que mentia sobre ele. Em lista, a ordem que se VÊ é a ordem em que se ANDA.
-
-   Onze frações não cabem no quadro, então a lista ROLA — foi o que o Dev pediu, e o preço é barato:
-   `focus()` traz o item para dentro da janela sozinho, de modo que quem anda por teclado ou controle nunca
-   perde o foco fora da vista.
-
-   O painel é OPACO pelo mesmo motivo do véu da pausa: por trás da abertura corre o modo de atração, e
-   texto sobre quadro variável tem a razão de contraste que o quadro permitir — média de sorte, não garantia. */
-#tm-alf,#tm-mat,#tm-tab,#tm-fr,#tm-cen{width:26em;max-height:72%;overflow-y:auto;overflow-x:hidden;background:var(--bg-solid);border-radius:10px;padding:.5em .7em}
-/* O título do submenu fica GRUDADO no topo: numa lista que rola, um cabeçalho que sobe leva embora a única
-   pista de “onde estou” que quem lê por resto de visão tem. */
+/* THE WIDTH FOLLOWS THE WIDEST ITEM (ADR-0130 rule 6, issue #134). A fixed width is a translation defect that only
+   shows after translation: a label that fits in Portuguese wraps onto two lines, or is cut, in a longer language — and a
+   two-line button changes height with the language. `fit-content` is the widest label's own width, capped by the room
+   there is, so a label wraps only when the frame itself is narrower than it and the menu never leaves the canvas. */
+#tm-main{width:fit-content}
+/* ===================== THE OPENING SUBMENUS: A VERTICAL LIST THAT SCROLLS (ADR-0044) =====================
+   They were two-column GRIDS, and the arrow moves in DOM order: “down” jumped to the right-hand column, across the
+   screen. The ring of item 1 was already right in the code (`nextTitleIndex` wraps around) — it was the LAYOUT that
+   lied about it. In a list, the order you SEE is the order you MOVE in.
+
+   Eleven fractions do not fit the frame, so the list SCROLLS — which is what the Dev asked for, and the price is low:
+   `focus()` brings the item into view by itself, so whoever moves by keyboard or controller never loses the focus
+   out of sight.
+
+   The panel is OPAQUE for the same reason as the pause veil: the attract mode runs behind the opening, and text over a
+   changing frame has whatever contrast the frame allows — an average of luck, not a guarantee. */
+#tm-alf,#tm-mat,#tm-tab,#tm-fr,#tm-cen{width:fit-content;max-height:72%;overflow-y:auto;overflow-x:hidden;background:var(--bg-solid);border-radius:10px;padding:.5em .7em}
+/* The submenu's title STICKS to the top: in a scrolling list, a heading that scrolls away takes with it the only
+   “where am I” cue that someone reading with residual vision has. */
 #tm-alf .tm-title,#tm-mat .tm-title,#tm-tab .tm-title,#tm-fr .tm-title,#tm-cen .tm-title{position:sticky;top:-.5em;z-index:1;background:var(--bg-solid);padding:.35em 0 .25em;margin:0}
-/* …e por isso os itens precisam de MARGEM DE ROLAGEM: um cabeçalho grudado cobre o item que o navegador acaba
-   de "trazer para a vista", porque para ele o item já estava dentro do quadro. MEDIDO no navegador antes de
-   existir esta linha: dando a volta do último para o primeiro, o primeiro botão parava com o topo em 143px e
-   o cabeçalho terminava em 155 — 12px encobertos, e a criança via um item cortado no lugar do foco. O valor
-   cobre a altura do cabeçalho (34px ≈ 2,1em) com folga. */
+/* …and that is why the items need a SCROLL MARGIN: a sticky heading covers the item the browser has just "brought into
+   view", because for the browser the item was already inside the frame. MEASURED in the browser before this line
+   existed: wrapping from the last item to the first, the first button stopped with its top at 143px while the heading
+   ended at 155 — 12px covered, and the child saw a cut-off item where the focus was. The value covers the heading's
+   height (34px ≈ 2.1em) with room to spare. */
 #tm-alf .title-btn,#tm-mat .title-btn,#tm-tab .title-btn,#tm-fr .title-btn,#tm-cen .title-btn{scroll-margin-top:2.4em;scroll-margin-bottom:.5em}
-/* As notações de fração continuam LADO A LADO: são cinco alternadores de UM grupo, e não itens da lista —
-   virar coluna aqui alongaria a rolagem sem ganhar ordem nenhuma. */
+/* The fraction notations stay SIDE BY SIDE: they are five toggles of ONE group, not list items — turning them into a
+   column here would lengthen the scroll without adding any order. */
 #tm-fr .frac-nots{display:flex;flex-direction:column;gap:.25em}
-/* AS CINCO NOTAÇÕES SÃO AJUSTE, NÃO ITEM DE MENU (pedido do Dev). Elas usavam `.title-btn` — a mesma classe
-   dos botões que ABREM uma atividade — e ficavam empilhadas logo acima deles: cinco coisas com cara de
-   "entrar" que na verdade ligam e desligam. A moldura (`fieldset`/`legend`) é a fronteira, e a marca ☑/☐ é o
-   estado sem depender de cor (a cor sozinha reprova a WCAG 1.4.1). */
+/* THE FIVE NOTATIONS ARE SETTINGS, NOT MENU ITEMS (the Dev's request). They used `.title-btn` — the same class as the
+   buttons that OPEN an activity — and were stacked right above them: five things that looked like "enter" and in fact
+   switch on and off. The frame (`fieldset`/`legend`) is the boundary, and the ☑/☐ mark is the state without relying
+   on colour (colour alone fails WCAG 1.4.1). */
 #tm-fr .frac-nots{border:2px solid var(--ink-soft);border-radius:10px;padding:.3em .5em .5em;margin:0 0 .45em}
-#tm-fr .frac-nots legend{padding:0 .4em;font-size:.8em;font-weight:700;color:var(--ink-soft)}
+#tm-fr .frac-nots legend{padding:0 .4em;font-size:1em;font-weight:700;color:var(--ink-soft)}
 #tm-fr .fnot-opt{display:flex;align-items:center;gap:.5em;width:100%;min-height:44px;padding:.2em .4em;background:transparent;color:#fff;border:0;border-radius:8px;font:inherit;cursor:pointer;text-align:left}
 #tm-fr .fnot-opt:hover,#tm-fr .fnot-opt:focus-visible{background:#16233f}
 #tm-fr .fnot-marca{font-size:1.15em;line-height:1;min-width:1.1em}
 #tm-fr .fnot-opt[aria-checked="true"] .fnot-marca{color:var(--accent)}
 #tm-fr .fnot-sym{font-size:1em}
-#tm-fr .fnot-opt .fv{font-size:.8em}
-.tm-title{color:#fff;font-size:1em;margin:0 0 .1em;text-align:center;text-shadow:1px 1px 0 #0d0d1a} /* título do submenu */
-.title-btn{background:var(--accent);color:var(--accent-ink);border:3px solid #0d0d1a;font-family:inherit;font-weight:bold;font-size:.95em;padding:.4em .6em;border-radius:6px;cursor:pointer;min-width:0;width:100%;min-height:2.3em} /* contorno PRETO grosso (3px) = mesma cor do texto (José) */
-.title-btn.ghost{background:#e8862b;color:#0d0d1a;border:2px solid #0d0d1a} /* Voltar = preenchimento LARANJA */
-.act-sub{display:block;font-size:.72em;font-weight:600;opacity:.7;letter-spacing:.02em;margin-top:.06em;font-family:var(--font-math,inherit);white-space:nowrap} /* subtítulo de exemplo (2ª linha, NUNCA quebra — botão largo o bastante) */
-/* Seletor VERMELHO fixo (piscar removido a pedido do José). Especificidade via #title-overlay. */
+#tm-fr .fnot-opt .fv{font-size:1em}
+.tm-title{color:#fff;font-size:1em;margin:0 0 .1em;text-align:center;text-shadow:1px 1px 0 #0d0d1a} /* the submenu's title */
+.title-btn{background:var(--accent);color:var(--accent-ink);border:3px solid #0d0d1a;font-family:inherit;font-weight:bold;font-size:1em;padding:.4em .6em;border-radius:6px;cursor:pointer;min-width:0;width:100%;min-height:2.3em} /* a thick BLACK outline (3px) = the same colour as the text (the Dev) */
+.title-btn.ghost{background:#e8862b;color:#0d0d1a;border:2px solid #0d0d1a} /* Back = ORANGE fill */
+.act-sub{display:block;font-size:1em;font-weight:600;opacity:.7;letter-spacing:var(--ls);margin-top:.06em;font-family:var(--font-math,inherit);white-space:nowrap} /* the example subtitle (2nd line, NEVER wraps — the button is wide enough) */
+/* A fixed RED selector (blinking removed at the Dev's request). Specificity through #title-overlay. */
 #title-overlay .title-btn:focus-visible,#title-overlay .title-btn:focus{outline:4px solid #ff3b30;outline-offset:2px}
-#title-overlay .title-btn.act-fx{animation:titleAct .22s ease}         /* efeito de ATIVAÇÃO (antes de trocar de tela) */
+#title-overlay .title-btn.act-fx{animation:titleAct .22s ease}         /* the ACTIVATION effect (before the screen changes) */
 @keyframes titleAct{0%{transform:scale(.92);filter:brightness(1.6)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
 @media (prefers-reduced-motion: reduce){ #title-overlay .title-btn.act-fx{animation:none;filter:brightness(1.4)} }
 .title-btn.tab-on{box-shadow:inset 0 0 0 3px #14141f}
-/* As fileiras da tabuada eram DUAS linhas de números lado a lado, e o Dev cobrou de novo depois de ver o
-   resultado: menu "misto" é menu onde "para baixo" às vezes anda para o lado. Viraram coluna, como todo o
-   resto da abertura. O seletor ganhou o `#tm-tab` na frente de propósito — é o que deixa o gate de layout
-   enxergar esta regra como sendo DE um submenu da abertura, em vez de uma classe solta que ninguém vigia. */
+/* The times-table rows were TWO lines of numbers side by side, and the Dev objected again after seeing the result: a
+   "mixed" menu is a menu where "down" sometimes moves sideways. They became a column, like the rest of the opening.
+   The selector carries `#tm-tab` in front on purpose — that is what lets the layout gate see this rule as belonging TO
+   an opening submenu, instead of a loose class nobody watches. */
 #tm-tab .tab-row{display:flex;flex-direction:column;gap:.35em}
 #tm-tab .tab-row .title-btn{width:100%;padding:.4em .5em}
-/* RODAPÉ (mesmo estilo do menu de pausa): descrição no fundo do canvas, NÃO colada ao grupo de botões (José).
-   Fundo fumê PRETO → contraste ≥7:1 entre o texto claro (#f6f5f0) e o fundo (≈#0a0a12). */
-.tm-desc:not(:empty){position:absolute;left:50%;transform:translateX(-50%);bottom:10px;max-width:88%;color:#f6f5f0;font-size:.8em;text-align:center;background:rgba(8,8,16,.92);padding:.35em .7em;border-radius:8px;line-height:1.25}
+/* FOOTER (the same style as the pause menu): the description at the bottom of the canvas, NOT glued to the button group (the Dev).
+   A smoked BLACK background → contrast ≥7:1 between the light text (#f6f5f0) and the background (≈#0a0a12). */
+.tm-desc:not(:empty){position:absolute;left:50%;transform:translateX(-50%);bottom:10px;max-width:88%;color:#f6f5f0;font-size:1em;text-align:center;background:rgba(8,8,16,.92);padding:.35em .7em;border-radius:8px;line-height:1.25}
 .tm-desc:empty{position:absolute;left:0;bottom:10px}
-/* Legenda de controles: mesmo visual/posição da legenda do menu de pausa (chips), em 2 LINHAS */
-.title-legend{display:flex;flex-direction:column;gap:.25em;align-items:center;margin:.5em 0 .1em;font-size:.82em;color:#c3cfe0}
+/* Controls legend: the same look and place as the pause menu's legend (chips), on 2 LINES */
+.title-legend{display:flex;flex-direction:column;gap:.25em;align-items:center;margin:.5em 0 .1em;font-size:1em;color:#c3cfe0}
 .title-legend .lg-row{display:flex;gap:1.1em;justify-content:center;flex-wrap:wrap}
 .title-legend .lg{display:inline-flex;align-items:center;gap:.35em}
-.title-legend .lg-ico{display:inline-flex;align-items:center;justify-content:center;min-width:1.35em;height:1.35em;padding:0 .2em;border-radius:.68em;font-weight:800;font-size:.9em;color:#fff;background:rgba(13,13,26,.85);text-shadow:0 1px 1px rgba(0,0,0,.55)}
-#title-icons{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:.3em;justify-content:center;flex-wrap:nowrap;white-space:nowrap} /* CABEÇALHO: 10px do topo, UMA fileira */
-/* Seletor de jogadores = UM botão só ("◀ Nº de jogadores: X ▶"); o lado clicado decide +1/−1 */
-#np-btn{letter-spacing:.02em}
+.title-legend .lg-ico{display:inline-flex;align-items:center;justify-content:center;min-width:1.35em;height:1.35em;padding:0 .2em;border-radius:.68em;font-weight:800;font-size:1em;color:#fff;background:rgba(13,13,26,.85);text-shadow:0 1px 1px rgba(0,0,0,.55)}
+#title-icons{position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;gap:0;justify-content:center;flex-wrap:nowrap;white-space:nowrap} /* header: on the screen's top edge, giving that room to the game (interface log 2026-09-13), ONE row */
+#title-icons.pause-icons{margin:0 0 calc(.35rem * var(--espaco-fixo,1))}
+/* The NAME of the pointed icon, just below the row. Absolute, so the bar's height — the band the game must not draw
+   over (ADR-0148) — does not grow when a name appears; the explanation goes to the footer, not here. */
+#title-icons .pause-icons-cap{position:absolute;top:100%;line-height:1.25;left:50%;transform:translateX(-50%);margin:0;text-align:center;font-size:1em;color:#f6f5f0;pointer-events:none;white-space:nowrap;min-height:0;padding:calc(var(--ui-fs,16px) * .2) calc(var(--ui-fs,16px) * .6)}
+/* the padding stays when empty: the room `createGame` reserves under the bar reads it (issue #160) */
+#title-icons .pause-icons-cap:not(:empty){background:rgba(8,8,16,.92);border-radius:8px}
+/* While a name shows, the bar rises over the HUD so the name covers the mission under it, not the other way round (ADR-0239
+   erratum: the name is momentary, and it is what the child is pointing at). Only then: at rest the bar keeps its layer. */
+#title-icons:has(.pause-icons-cap:not(:empty)),.screen-a11y:has(.pause-icons-cap:not(:empty)){z-index:13}
+/* Player-count selector = ONE button ("◀ No. of players: X ▶"); the side clicked decides +1/−1 */
+#np-btn{letter-spacing:var(--ls)}
 #np-btn #np-n{display:inline-block;min-width:1.1em;text-align:center}
-/* Fração VERTICAL: pilha número/traço/número em HTML puro (zero dependência) */
+/* VERTICAL fraction: a number/bar/number stack in plain HTML (zero dependencies) */
 .fv{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;margin:0 .1em}
 .fv b{font-weight:800;padding:0 .25em}
 .fv b:first-child{border-bottom:2px solid currentColor}
-/* Fração como FIGURA (pizza/quadrado): SVG inline, 2-6 partes iguais; imprópria = várias unidades lado a lado */
-:root{--frac-fill:#f2a03d} /* laranja: alto contraste sobre branco + contorno preto (não depende só da cor — WCAG 1.4.1) */
+/* A fraction as a FIGURE (pie/square): inline SVG, 2-6 equal parts; an improper one = several units side by side */
+:root{--frac-fill:#f2a03d} /* orange: high contrast on white + a black outline (not colour alone — WCAG 1.4.1) */
 .frac-fig{display:inline-flex;align-items:center;gap:.25em;vertical-align:middle}
-.frac-shape{display:inline-flex;align-items:center;gap:.15em} /* círculo + quadrado da mesma fração, lado a lado */
-.frac-op{display:inline-flex;flex-direction:column;align-items:center;gap:.15em;vertical-align:middle} /* operando da conta: número EM CIMA, gráfico embaixo */
+.frac-shape{display:inline-flex;align-items:center;gap:.15em} /* circle + square of the same fraction, side by side */
+.frac-op{display:inline-flex;flex-direction:column;align-items:center;gap:.15em;vertical-align:middle} /* an operand of the sum: the number ON TOP, the figure below */
 .frac-svg{width:2.4em;height:2.4em;display:inline-block;vertical-align:middle}
 .quiz-choice .frac-svg{width:2.6em;height:2.6em}
 .quiz-prob .frac-svg{width:2.6em;height:2.6em}
 .quiz-dots{font-size:1.3em;letter-spacing:.15em;line-height:1.3;margin:.3rem 0;max-width:12em}
 @media (prefers-contrast: more){
-  /* Aqui `--ink-soft` JÁ é branco: a moldura de "alterado" tem que deixar de ser branca, ou marcado e
-     não-marcado viram a mesma moldura — justamente para a criança cujos ajustes têm mais chance de estar
-     fora do padrão. Uma marca cuja visibilidade depende do tema não é uma marca (ADR-0029). */
+  /* Here `--ink-soft` is ALREADY white: the "changed" frame has to stop being white, or marked and unmarked become the
+     same frame — precisely for the child whose settings are most likely to be off the default. A mark whose
+     visibility depends on the theme is not a mark (ADR-0029). */
   :root{ --bg:#000; --panel:#000; --ink:#fff; --ink-soft:#fff; --accent:#ffe600; --changed:#ffe600; }
 }
 *{box-sizing:border-box}
+/* A face with a floor above 16 px (`--fonte-escala`, written by the typography cycle and menu; ADR-0176 rule 4) enlarges
+   ITS OWN TEXT and not the whole document (interface log 2026-09-13, issue #172): the scale lives on `#game-region`'s
+   `font-size`, spacing bound to the text is written in `--ui-fs`, and the root stays 16 px so `rem` does not grow.
+   `--espaco-fixo` is the factor of the spaces that do NOT follow the scale — the ones the Dev saw shrink under a 25% browser
+   zoom while the text held «mantendo o design muito bom»: 1 at the base, down to that quarter at the 20 px floor. */
+:root{--espaco-fixo:max(.25, 4 - 3 * var(--fonte-escala,1))}
 html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:var(--lh);letter-spacing:var(--ls);word-spacing:var(--ws)}
-/* matemática em mono tabular (algarismos alinhados/legíveis) */
+/* THE SPACING IS THE TEXT'S, WHEREVER THE TEXT IS (ADR-0149 erratum, issue #187): «Se dentro de um botão tem texto, as regras de
+   espaçamento valem para este texto, mesmo que seja uma única palavra.» The browser's own stylesheet gives controls
+   `letter-spacing: normal`, which beat the inheritance — measured: pause items and quiz options had none. Zero specificity, so a
+   rule that spaces a control on purpose still decides. */
+:where(button,select,option,input,textarea){letter-spacing:inherit;word-spacing:inherit}
+/* mathematics in tabular mono (aligned, legible digits) */
 .quiz-box--math .quiz-prob,.quiz-box--math .quiz-choice,#hud-coins,#hud-total{font-family:var(--font-math);font-variant-numeric:tabular-nums}
-/* espaçamento de parágrafo ≥2× só em blocos de leitura (não quebra HUD/menus) */
+/* paragraph spacing ≥2× only in reading blocks (it does not break the HUD or the menus) */
 .overlay__card p + p{margin-top:2em}
-/* A página NUNCA rola (José): altura travada no viewport e overflow escondido — o excedente do canvas
-   (tolerância de 5px lógicos/lado) é cortado pelo .stage-wrap, e os menus rolam DENTRO dos cards. */
+/* The page NEVER scrolls (the Dev): height locked to the viewport and overflow hidden — the canvas's excess (a tolerance
+   of 5 logical px per side) is cut by .stage-wrap, and the menus scroll INSIDE their cards. */
 body{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
 .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
-/* O `z-index` ADOTOU O SLOT em 2026-09-07. Era `100`, um literal que estava CERTO e cuja tabela estava
-   errada: o `Z` punha o skip-link em CAPTIONS(26000), abaixo dos modais. Ver `SKIP_LINK` em core/layers. */
+/* The skip link sits on its SLOT, `--z-skip-link`, and not on a literal: above the modals and the transition, below only
+   the loop-crash notice and the debug panel. `tests/the-skip-link-outranks-the-transition.node.test.js` holds it (ADR-0102). */
 .skip-link{position:absolute;left:8px;top:-60px;background:var(--accent);color:var(--accent-ink);padding:.6em 1em;border-radius:0 0 10px 10px;font-weight:700;z-index:var(--z-skip-link);transition:top .15s}
 .skip-link:focus{top:0}
 :focus-visible{outline:4px solid var(--focus);outline-offset:2px;border-radius:6px}
 
 .topbar{max-width:var(--maxw);margin:0 auto;padding:.6rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
-body:not(.dbg) .topbar{display:none} /* título da PÁGINA só em ?debug=true (o jogo já mostra no splash); recupera a vertical */
-.title{font-size:1.3rem;margin:0}
-.ver{color:var(--ink-soft);font-weight:400;font-size:.9rem}
-.badge{margin:0;color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:.2em .8em;font-weight:700;font-size:.8rem}
+body:not(.dbg) .topbar{display:none} /* the PAGE title only under ?debug=true (the game already shows it on the splash); gives back the vertical room */
+.title{font-size:1.3em;margin:0}
+.ver{color:var(--ink-soft);font-weight:400;font-size:1em}
+.badge{margin:0;color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:.2em .8em;font-weight:700;font-size:1em}
 
 .hud{max-width:var(--maxw);margin:0 auto;padding:0 1rem .5rem;display:flex;gap:1.5rem;flex-wrap:wrap}
-.hud__item{margin:0;font-size:1.05rem}
-/* moedas/missão/poder migraram para dentro da tela de cada jogador; ficam sr-only (leitor de tela) */
+.hud__item{margin:0;font-size:1.05em}
+/* coins/mission/power moved into each player's screen; they stay sr-only (for the screen reader) */
 .hud__item--sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
-/* HUD por jogador SOBRE o canvas (DOM = alta definição, não pixela). Um por viewport; moedas na 1ª coluna, poder na 2ª. */
-#game-hud{position:absolute;inset:0;pointer-events:none;z-index:4;font-family:var(--font);font-size:var(--hud-fs,14px);font-weight:800}
-/* "Tela do jogador": um contêiner por jogador (posicionado na fatia do viewport dele). Hospeda HUD, e nas
-   próximas etapas a pausa e os menus daquele jogador. O render segue compartilhado (um contexto WebGL). */
+/* Per-player HUD OVER the canvas (DOM = high definition, no pixelation). One per viewport; coins in the 1st column, power in the 2nd. */
+#game-hud{position:absolute;inset:0;pointer-events:none;z-index:4;font-family:var(--font);font-size:var(--hud-fs,16px);font-weight:800}
+/* "Player screen": one container per player (placed on that player's slice of the viewport). It hosts the HUD, and the
+   pause and menus of that player. The render stays shared (one WebGL context). */
 .player-screen{position:absolute;pointer-events:none}
 .vphud{position:absolute;top:0;left:0;width:100%;display:flex;align-items:flex-start;gap:0;padding:.4em .55em;box-sizing:border-box;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000,0 0 6px #000;line-height:1.15}
 .vphud-obj,.vphud-power{flex:1 1 50%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .vphud-ico{font-weight:400}
-/* jogador que saiu (MP): viewport preto com "Jogo abandonado" no centro; os outros seguem */
-.vphud-quit{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000;color:#cdd6f2;font-family:var(--font);font-weight:800;font-size:var(--hud-fs,14px);text-align:center}
+/* a player who left (multiplayer): a black viewport with "Game abandoned" in the middle; the others carry on */
+.vphud-quit{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000;color:#cdd6f2;font-family:var(--font);font-weight:800;font-size:var(--hud-fs,16px);text-align:center}
 .vphud-quit[hidden]{display:none}
-/* PAUSA dentro do canvas (tela = canvas) — sobreposta ao #game-region, não à página */
+/* PAUSE inside the canvas (screen = canvas) — laid over #game-region, not over the page */
 .pause-incanvas{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;background:var(--bg-solid);font-family:var(--font)}
 .pause-incanvas[hidden]{display:none}
-/* Etapa 2: menu de pausa POR TELA (dentro de cada .player-screen). Cada jogador vê e navega o seu. */
-.screen-pause{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;background:var(--bg-solid);font-family:var(--font);font-size:var(--ui-fs,16px);pointer-events:auto} /* base = --ui-fs (16 no mínimo, escala com o canvas) */
+/* The pause menu PER SCREEN (inside each .player-screen). Each player sees and moves through their own. */
+.screen-pause{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;background:var(--bg-solid);font-family:var(--font);font-size:var(--ui-fs,16px);pointer-events:auto} /* base = --ui-fs (16 at least, scales with the canvas) */
 .screen-pause[hidden]{display:none}
-.screen-pause .pause-card{max-width:94%;max-height:98%;padding:.5rem .7rem}
-.screen-pause .pause-card h2{font-size:1.2em;margin:.05rem 0 .28rem}
+/* ADR-0163: seven 44 px items are 308 of the 360 px at 640×360 (measured). The title keeps the 16 px text floor with a tight
+   line (20 px, not 29) and the card may use the whole height. */
+.screen-pause .pause-card{max-width:94%;max-height:100%;padding:.25rem .7rem}
+/* ONE HEIGHT for every card of the menus (interface log, 2026-09-13): the root, its submenu, the panels and the help. The root's
+   six items fitted and its card shrank to them, 46 px shorter than the submenu at 640×360 (measured); it now holds the whole
+   height too, its items from the top, as a panel's rows are. */
+.screen-pause .pause-card{height:100%;box-sizing:border-box}
+/* THE EDGE MARGIN (interface log 2026-09-26): the card's CONTENT starts at the margin — its 2 px border just above it, no
+   padding under the border — so neither its title nor an item scrolled up under its top edge comes nearer the region's edge
+   than the margin (a padding inside the card would not do: a scrolled list shows through its own padding). 📏 The card had
+   3 px to spare at 640×360 (pause-target-44px); the border and the old .25rem padding give back what the margin takes. */
+.screen-pause{padding-top:calc(var(--margem-borda,8px) - 2px)}
+.screen-pause .pause-card{padding-top:0}
+/* THE CARD RUNS UNDER THE BUTTON LEGEND AT THE FOOT OF THE SCREEN, as a panel runs under its explanation (issue #134): the
+   room at its end and the scroll padding let its LAST item, and the one under the cursor, come to rest above the band —
+   and above the HUD row under it (`--rodape-h`), which is drawn over the card too. Measured at 640×360 before: «Sair do jogo»
+   at 288–332 px under a legend at 313–342, a third of it covered. */
+.screen-pause .pause-card{scroll-padding-bottom:calc(var(--rodape-h,0px) + var(--footer-band-h,50px))}
+.screen-pause .pause-card::after{content:"";display:block;height:calc(var(--rodape-h,0px) + var(--footer-band-h,50px))}
+.screen-pause .pause-card h2{font-size:1em;line-height:1.25;margin:0 0 .1rem}
 .screen-pause .pause-menu{gap:.3rem}
-/* O quadro por jogador aperta o PADDING, nunca a altura mínima: o quadro apertado é o do jogo com quatro
-   crianças, onde os dedos disputam espaço — o pior lugar possível para encolher um alvo de toque. O cartão
-   tem `overflow:auto` e rola; o botão não diminui. */
+/* The per-player frame tightens the PADDING, never the minimum height: the tight frame is the one of a game with four
+   children, where fingers compete for room — the worst possible place to shrink a touch target. The card has
+   `overflow:auto` and scrolls; the button does not shrink. */
 .screen-pause .pm-btn{padding:.3rem .7rem}
-.screen-pause .pause-legend{margin:.28rem 0 0}
-/* Atalhos de a11y = botões do menu em forma de ícone, DENTRO do card (sem barra/sombra própria).
-   Navegáveis por teclado (cima a partir de Continuar) e por toque/clique. */
-.pause-icons{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;align-items:center;margin:.1rem 0 .35rem}
-/* ===================== A BARRA RÁPIDA NO HUD (ADR-0044, item 7) =====================
-   Ela saiu do cartão de pausa e passou a viver na tela do jogador, disponível DURANTE a partida — que é
-   quando uma criança precisa mudar um ajuste que está a atrapalhando, e não depois de pausar.
-
-   É IRMÃ da `.screen-exp` e não filha, e a razão é o #82: `filter` de CSS desce para os descendentes e um
-   filho não consegue cancelá-lo. Dentro da experiência, o modo empatia degradaria justamente o que existe
-   para DAR acesso — e simulação não é acessibilidade, é o contrário dela.
-
-   `pointer-events:auto` porque a `.player-screen` inteira é `none` (o jogo recebe o toque); os dez ícones
-   são a exceção, como o cartão de pausa já era. */
-/* A ALTURA DA BARRA, num token: é ela que empurra o HUD para baixo. Sem isto os dois ficavam ancorados no
-   topo e se sobrepunham — o HUD lido por cima dos ícones, que foi o que o Dev viu e chamou de péssimo. */
-.player-screen{--a11y-h:calc(var(--tap) + .5rem)}
+.screen-pause .pause-legend{margin:.1rem 0 0}
+/* ADR-0163: with 42 px items the seven-item submenu overflowed 640×360 by 28 px (measured). The gap goes, not the target:
+   centres stay 44 px apart, far above the 24 px the WCAG 2.5.8 spacing exception protects. */
+.screen-pause .pause-menu{gap:2px}
+/* a11y shortcuts = menu buttons shaped as icons, INSIDE the card (no bar or shadow of their own).
+   Reachable by keyboard (up from Continue) and by touch/click. */
+.pause-icons{display:flex;flex-wrap:wrap;gap:0;justify-content:center;align-items:center;margin:.1rem 0 .35rem}
+/* ===================== THE QUICK BAR IN THE HUD (ADR-0044, item 7) =====================
+   It lives on the player's screen, available DURING play — which is when a child needs to change a setting that is
+   getting in the way, and not after pausing.
+
+   It is a SIBLING of `.screen-exp` and not a child, and the reason is #82: a CSS `filter` reaches every descendant and a
+   child cannot cancel it. Inside the experience, the empathy mode would degrade exactly what exists to GIVE access — and
+   simulation is not accessibility, it is its opposite.
+
+   `pointer-events:auto` because the whole `.player-screen` is `none` (the game receives the touch); the icons are the
+   exception, as the pause card already was. */
+/* THE BAR'S HEIGHT, in one token: it is what pushes the HUD down. Without it both were anchored to the top and overlapped
+   — the HUD read over the icons, which is what the Dev saw and called terrible. */
+.player-screen{--a11y-h:calc(var(--alvo-min,44px) + .5rem)}
 .screen-a11y{position:absolute;left:0;right:0;top:0;height:var(--a11y-h);z-index:5;pointer-events:auto;font-family:var(--font);font-size:var(--ui-fs,16px)}
-.screen-a11y .pause-icons{flex-wrap:nowrap;white-space:nowrap;gap:.25rem;margin:0;height:100%}
-/* SÓ OS BOTÕES OCUPAM ESPAÇO. A explicação é ABSOLUTA e fica fora do fluxo — ela aparece por cima do jogo ao
-   passar o mouse (ou quando o cursor do modo `accessibility` pousa num ícone) e some sem deixar buraco. Uma
-   faixa de texto reservando altura na tela de jogo é o contrário do que uma barra de atalho serve. */
-.screen-a11y .pause-icons-cap{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--a11y-h) + .1rem);margin:0;max-width:92%;text-align:center;font-size:.8em;color:#f6f5f0;pointer-events:none}
+.screen-a11y .pause-icons{flex-wrap:nowrap;white-space:nowrap;gap:0;margin:0;height:100%}
+/* ONLY THE BUTTONS TAKE ROOM. The explanation is ABSOLUTE and stays out of the flow — it appears over the game on mouse
+   hover (or when the `accessibility` mode's cursor rests on an icon) and goes without leaving a hole. A strip of text
+   reserving height on the game screen is the opposite of what a shortcut bar is for. */
+.screen-a11y .pause-icons-cap{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--a11y-h) + .1rem);margin:0;max-width:92%;text-align:center;font-size:1em;color:#f6f5f0;pointer-events:none}
 .screen-a11y .pause-icons-cap:not(:empty){background:rgba(8,8,16,.92);border-radius:8px;padding:.2em .6em}
-/* O HUD desce para DEBAIXO da barra. É a mesma conta, e é por isso que ela mora num token: as duas medidas
-   não podem divergir sem que uma tape a outra. */
+/* The HUD moves BELOW the bar. It is the same sum, and that is why it lives in a token: the two measures cannot
+   diverge without one covering the other. */
 .screen-exp .vphud{top:var(--a11y-h)}
-.pi-btn{width:var(--tap);height:var(--tap);min-width:var(--tap);min-height:var(--tap);border-radius:10px;border:2px solid var(--ink-soft);background:#1a2740;font-size:1.25em;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
-/* Wizard de gamepad: demonstração com ANIMAÇÃO REAL (frames do jogo trocados via JS) + deslocamento CSS */
-#padwiz-demo{height:86px;display:flex;align-items:flex-end;justify-content:center;position:relative;margin:.15rem 0 .4rem;overflow:hidden}
-#padwiz-demo-img{height:64px;image-rendering:pixelated}
-#padwiz-demo-fx{position:absolute;top:2px;font-size:1.5em;line-height:1}
-#padwiz-demo.pw-left #padwiz-demo-img{animation:pwSlideL 1.4s linear infinite}
-#padwiz-demo.pw-right #padwiz-demo-img{animation:pwSlideR 1.4s linear infinite}
-#padwiz-demo.pw-up #padwiz-demo-img{animation:pwClimbUp 1.4s linear infinite}
-#padwiz-demo.pw-down #padwiz-demo-img{animation:pwClimbDown 1.4s linear infinite}
-#padwiz-demo.pw-jump #padwiz-demo-img{animation:pwJump .9s cubic-bezier(.3,0,.7,1) infinite}
-#padwiz-demo.pw-run #padwiz-demo-img{animation:pwSlideR .8s linear infinite}
-#padwiz-demo.pw-swap,#padwiz-demo.pw-start{align-items:center}
-#padwiz-demo.pw-swap #padwiz-demo-fx{position:static;white-space:nowrap;font-size:1.7em;animation:pwIcons 4s linear infinite}
-#padwiz-demo.pw-especial #padwiz-demo-fx{animation:pwPulse .8s ease-in-out infinite}
-#padwiz-demo.pw-start #padwiz-demo-fx{position:static;font-weight:800;font-size:1.9em;letter-spacing:.1em;animation:pwBlink 1s steps(2,end) infinite}
-@keyframes pwSlideL{0%{translate:34px 0}100%{translate:-34px 0}}
-@keyframes pwSlideR{0%{translate:-34px 0}100%{translate:34px 0}}
-@keyframes pwClimbUp{0%{translate:0 22px}100%{translate:0 -22px}}
-@keyframes pwClimbDown{0%{translate:0 -22px}100%{translate:0 22px}}
-@keyframes pwJump{0%,100%{translate:0 0}35%{translate:0 -26px}55%{translate:0 -22px}}
-@keyframes pwIcons{0%{translate:60px 0}100%{translate:-60px 0}}
-@keyframes pwPulse{0%,100%{scale:1;opacity:.7}50%{scale:1.5;opacity:1}}
-@keyframes pwBlink{0%,100%{opacity:1}50%{opacity:.25}}
-@media (prefers-reduced-motion: reduce){ #padwiz-demo *{animation:none !important} }
-.pi-btn.pi-on{background:var(--accent);border-color:var(--accent)}
-/* Modo TEA (🧩): pi-on preenchido de amarelo = silencioso · fundo branco = calmo · base (azul) = off.
-   (fundo, não borda — a borda é reservada ao realce de seleção :focus/.pi-sel e sobreporia o sinal.) */
+.pi-btn{width:var(--alvo-min,44px);height:var(--alvo-min,44px);min-width:var(--alvo-min,44px);min-height:var(--alvo-min,44px);border-radius:10px;border:2px solid var(--ink-soft);background:#1a2740;color:#f6f5f0;font-size:1.25em;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
+/* Gamepad wizard: a demonstration with REAL ANIMATION (game frames swapped by JS) + a CSS offset */
+/* ADR-0159 rule 10 / WCAG 1.4.1: «on» is not colour alone — a thick stripe along the base appears with it. */
+.pi-btn.pi-on{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 -5px 0 var(--accent-ink)}
+/* ASD mode (🧩): pi-on filled yellow = silent · white background = calm · base (blue) = off.
+   (the background, not the border — the border is kept for the selection highlight :focus/.pi-sel and would hide the signal.) */
 .pi-btn.pi-calm{background:#fff;border-color:var(--ink-soft)}
-/* Correção de daltonismo (🚥): fundo bicolor "diagnóstico" — pares escolhidos por busca (simulação Machado
-   2009, ΔE Lab) p/ que quem TEM a deficiência-alvo veja o maior contraste e as outras duas o menor. Tritan
-   (eixo azul-amarelo, isolado) separa limpo com vermelho/verde; protan e deutan compartilham o eixo
-   vermelho-verde → separação só PARCIAL (limite físico). off = base (azul, borda cinza); borda clara = ativo. */
+/* Colour-vision correction (🚥): a two-colour "diagnostic" background — pairs chosen by search (Machado's 2009 simulation,
+   Lab ΔE) so that whoever HAS the target deficiency sees the largest contrast and the other two the smallest. Tritan
+   (the blue-yellow axis, on its own) separates cleanly with red/green; protan and deutan share the red-green axis
+   → only a PARTIAL separation (a physical limit). off = base (blue, grey border); a light border = active. */
 .pi-btn.pi-cvd-protan{background:linear-gradient(90deg,#b3671b 0 50%,#b31b41 50% 100%);border-color:var(--ink)}
 .pi-btn.pi-cvd-deuter{background:linear-gradient(90deg,#0000f2 0 50%,#aa61f2 50% 100%);border-color:var(--ink)}
 .pi-btn.pi-cvd-tritan{background:linear-gradient(90deg,#f23d00 0 50%,#1bb341 50% 100%);border-color:var(--ink)}
 .pi-btn.pi-dis{opacity:.35;cursor:not-allowed}
-.pi-btn.pi-soon{opacity:.55}
 .pi-btn.pi-sel,.pi-btn:focus,.pi-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
-.pause-icons-cap{text-align:center;margin:0 0 .3rem;font-size:.82em;color:var(--ink-soft);min-height:1.1em}
-/* `scrollbar-gutter: stable both-edges` — MEDIDO no navegador depois do item 6: com a lista em 44 px o
-   cartão passa a rolar, a barra de rolagem come largura de UM lado só, e a lista centrada saía 7,5 px do
-   centro. Reservar a calha nos dois lados devolve a simetria, role ou não. */
+.pause-icons-cap{text-align:center;margin:0 0 .3rem;font-size:1em;color:var(--ink-soft);min-height:1.1em}
+/* `scrollbar-gutter: stable both-edges` — MEASURED in the browser after item 6: with the list at 44 px the card starts
+   scrolling, the scrollbar eats width on ONE side only, and the centred list sat 7.5 px off centre. Reserving the gutter
+   on both sides gives the symmetry back, scrolling or not. */
 .pause-card{background:#0e1626;border:2px solid #ffd23f;border-radius:14px;padding:.8rem 1rem;max-width:88%;max-height:92%;overflow:auto;scrollbar-gutter:stable both-edges;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.5)}
 .pause-card h2{margin:.1rem 0 .6rem;color:#ffd23f}
-/* ===================== A LISTA DE PAUSA (ADR-0044, item 6) =====================
-   Era `grid-template-columns:1fr 1fr`, e a grade contava a mesma mentira dos submenus da abertura: a seta
-   anda em ordem de DOM, então "para baixo" pulava para a coluna da direita. Uma coluna, e o que se vê volta
-   a ser a ordem em que se anda.
-   CENTRADA E MAIS LARGA: 26rem contra os 262 px medidos antes — o número está no gate, não na opinião.
-   `width` e não `min(26rem,100%)`: com a barra de ícones fora do cartão (item 7), o cartão passou a se
-   encolher ao conteúdo, e um `100%` medido contra ele virava circular — a lista caiu para 182 px. Quem
-   declara a largura é a LISTA; o cartão a acompanha até o `max-width` dele. */
-.pause-menu{display:flex;flex-direction:column;gap:.45rem;width:26rem;max-width:100%;margin:0 auto}
-/* A lista ESCONDIDA tem de sumir de verdade: `display:grid` de autor vence o `[hidden]{display:none}` do
-   navegador, e sem esta linha as duas listas do cartão de pausa apareceriam empilhadas (ADR-0044, item 5). */
+/* ===================== THE PAUSE LIST (ADR-0044, item 6) =====================
+   It was `grid-template-columns:1fr 1fr`, and the grid told the same lie as the opening submenus: the arrow moves in
+   DOM order, so "down" jumped to the right-hand column. One column, and what you see is again the order you move in.
+   CENTRED AND WIDER: 26 letters against the 262 px measured before — the number is in the gate, not in an opinion.
+   ⚠️ IN `em`, NOT `rem` (pointed out by the Dev): the menus' letters grow with the region (`--ui-fs`) and `rem` stays at the
+   root's 16 px — measured at 1920×1080, 48 px letters in a 416 px list, and every item wrapped onto two lines.
+   `width` and not `min(26em,100%)`: with the icon bar out of the card (item 7), the card shrinks to its content, and a
+   `100%` measured against it became circular — the list fell to 182 px. The LIST declares the width; the card follows
+   it up to its own `max-width`. */
+.pause-menu{display:flex;flex-direction:column;gap:.45rem;width:26em;max-width:100%;margin:0 auto}
+/* The HIDDEN list has to really disappear: an author's `display:grid` beats the browser's `[hidden]{display:none}`, and
+   without this line the two lists of the pause card would show stacked (ADR-0044, item 5). */
 .pause-menu[hidden]{display:none}
-/* 44 px NÃO é o mínimo da WCAG — o 2.5.8 pede 24×24, e o cartão já passava nisso com folga. 44 é a
-   recomendação da Apple (HIG). `min-height` e não `padding` porque a altura de antes (35,6 px) não estava
-   declarada em lugar nenhum: ela RESULTAVA da soma de padding, fonte e entrelinha. Um alvo que ninguém
-   escreveu é um alvo que ninguém defende.
-
-   ⚠️ ESTA LINHA DIZIA TAMBÉM «e este projeto trata piso como piso», e essa metade morreu no ADR-0095: o
-   piso deixou de ser um número único e passou a ser a régua abaixo. Fica o resto, que continua a valer. */
-/* ⚠️ O ALVO DO ITEM DE MENU SEGUE A RÉGUA DO ADR-0095, e não um literal.
-   Era `min-height:44px` cravado. O registro fixou que o alvo é função da ALTURA DA TELA — 24 px (WCAG
-   2.5.8, AA) abaixo de 540, 34 a partir de 540, 44 (2.5.5, AAA) a partir de 720 — porque um alvo grande
-   que exige ROLAGEM para ser alcançado pode custar mais dedo do que um menor que está à vista.
-
-   ⚠️ E ELE USA `--alvo-min` E NÃO `--tap`, que são coisas diferentes: `--tap` é o tamanho PREFERIDO e
-   cresce com a escala do canvas (22 × k, nunca menos de 44); `--alvo-min` é o CHÃO por altura. Um botão
-   isolado pode ser o preferido; um item de LISTA, que tem de caber inteiro, usa o chão.
-
-   O `44px` do fallback é o comportamento de antes, para o caso de `layout()` não ter corrido — que era
-   exatamente o que acontecia no `quiz.html` até 07/09. */
-.pm-btn{background:#1a2740;color:#eaf2f8;border:1px solid #3a4a6a;border-radius:10px;padding:.5rem .8rem;min-height:var(--alvo-min,44px);display:flex;align-items:center;justify-content:center;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
+/* 44 px is NOT the WCAG minimum — 2.5.8 asks for 24×24, and the card already passed that with room to spare. 44 is
+   Apple's recommendation (HIG). `min-height` and not `padding` because the earlier height (35.6 px) was declared
+   nowhere: it RESULTED from the sum of padding, font and line height. A target nobody wrote down is a target nobody
+   defends. */
+/* The menu item's target is `--alvo-min`, never a literal. ADR-0163 superseded ADR-0095's height ruler (24/34/44 px):
+   the engine forces the resolution, no screen is under 640×360, and the floor is 22 × k — 44 px there, growing with the
+   scale. `applyScale` (`ui/layout`) writes it on the game region; the 44 px fallback is that same floor at k = 2. */
+/* ADR-0159 rule 8 / WCAG 1.4.11: the item's border is its boundary against the card (#0e1626). #3a4a6a measured 2.04:1;
+   #6a7a96 is 4.2:1. */
+.pm-btn{background:#1a2740;color:#eaf2f8;border:1px solid #6a7a96;border-radius:10px;padding:.5rem .8rem;min-height:var(--alvo-min,44px);display:flex;align-items:center;justify-content:center;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
+/* ADR-0161: a locked item stays in the list, visibly muted; the cursor still lands on it and it says its reason. */
+.pm-btn[aria-disabled="true"]{color:#9aa6b8;border-style:dashed;cursor:not-allowed}
 .pm-btn:hover,.pm-btn:focus,.pm-btn.pm-sel{background:#2a3a5e;border-color:#ffd23f;outline:2px solid #ffd23f;outline-offset:1px}
-/* Legenda sim/não: ícone do botão (conforme layout do controle) + a palavra. Sony/Nintendo invertem 0↔1. */
-.pause-legend{display:flex;gap:1.1rem;justify-content:center;margin:.7rem 0 .1rem;font-size:.82em;color:#c3cfe0}
+/* ADR-0167: no item shows a position number — the place is SPOKEN after the name («…, 2 de 6»), never drawn.
+   ADR-0159 rule 12: a pause item's glyph is drawn with empty alternative text, out of the name. */
+.pm-btn[data-glifo]::before{content:attr(data-glifo) / "";margin-inline-end:.5em}
+/* Yes/no legend: the button's glyph (from the pad's design) + the word. By POSITION on every design — yes is the south button
+   (A · ✕ · B), no is the east one (B · ◯ · A); no design swaps them (the Dev's association, ADR-0013 erratum). */
+.pause-legend{display:flex;gap:1.1rem;justify-content:center;margin:.7rem 0 .1rem;font-size:1em;color:#c3cfe0}
 .pause-legend .lg{display:inline-flex;align-items:center;gap:.35rem}
-.pause-legend .lg-ico{display:inline-flex;align-items:center;justify-content:center;width:1.35rem;height:1.35rem;border-radius:50%;font-weight:800;font-size:.8rem;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.55)}
+.pause-legend .lg-ico{display:inline-flex;align-items:center;justify-content:center;width:1.35rem;height:1.35rem;border-radius:50%;font-weight:800;font-size:1em;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.55)}
 .hud__item strong{font-variant-numeric:tabular-nums}
 .hud__fps{color:var(--ink-soft)}
 
 main{flex:1;display:flex;flex-direction:column;width:100%;margin:0 auto;padding:0 .25rem .25rem;min-height:0;overflow:hidden}
-/* tela = prioridade: ocupa todo o espaço; o excedente (até 5px×k por lado) é cortado sem rolagem */
+/* screen = priority: it takes all the room; the excess (up to 5px×k per side) is cut without scrolling */
 .stage-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:0;overflow:hidden}
 .stage{position:relative;display:flex;align-items:center}
-/* ===== A CAMADA DOM (issue #82) =====
-   Tudo o que não é a canvas. Existe para o filtro de acessibilidade poder cair numa superfície que contém os
-   MENUS e não contém o mundo — filtro de PIXI não alcança DOM, e filtrar o `#game-region` inteiro aplicaria
-   duas vezes na canvas.
+/* ===== THE DOM LAYER (issue #82) =====
+   Everything that is not the canvas. It exists so the accessibility filter can land on a surface that holds the MENUS
+   and not the world — a PIXI filter does not reach the DOM, and filtering the whole `#game-region` would apply twice
+   on the canvas.
 
-   `pointer-events:none` porque o invólucro cobre a região inteira e não pode engolir clique; os quatro filhos
-   que precisam de clique e não o declaravam (herdavam do `#game-region`) ganham `auto` logo abaixo.
+   `pointer-events:none` because the wrapper covers the whole region and must not swallow clicks; the four children
+   that need clicks and did not declare it (they inherited it from `#game-region`) get `auto` just below.
 
-   `z-index:1`: acima da canvas, ABAIXO dos dois pseudo-elementos do CRT (vinheta em 5, scanline em 500), que
-   ficam no `#game-region`. O CRT é efeito de tela e passa por cima de tudo — o que a scanline já fazia por
-   decisão do Dev, e a vinheta agora acompanha. */
+   `z-index:1`: above the canvas, BELOW the two CRT pseudo-elements (vignette at 5, scanline at 500), which sit on
+   `#game-region`. The CRT is a screen effect and goes over everything — which the scanline already did by the Dev's
+   decision, and the vignette now follows. */
 #dom-layer{position:absolute;inset:0;z-index:1;pointer-events:none}
 
-/* ===== ALTO CONTRASTE NO DOM (issue #83) =====
-   O alto contraste NÃO é filtro: ele é Renderização Direta, e repinta as TEXTURAS da canvas. No DOM não há
-   textura para repintar — há que escrever o equivalente, e é isto.
+/* ===== HIGH CONTRAST IN THE DOM (issue #83) =====
+   High contrast is NOT a filter: it is Direct Rendering, and it repaints the canvas's TEXTURES. The DOM has no texture
+   to repaint — the equivalent has to be written, and this is it.
 
-   MEDIDO, não estimado (WCAG 1.4.3, razão sobre sRGB linearizado). O que falhava, e só no nível 7:1:
+   MEASURED, not estimated (WCAG 1.4.3, the ratio over linearised sRGB). What failed, and only at the 7:1 level:
 
-     · o VÉU do painel de pausa é `rgba(4,7,15,.72)` — translúcido. A razão do texto sobre ele DEPENDE do
-       jogo por trás: 19,17:1 sobre um quadro preto e 8,07:1 sobre um branco. Com `--ink-soft`, `--accent` e
-       `--good` a conta cai a 5,92 / 5,94 / 5,11:1 — AA, não AAA. Nos níveis 3:1 e 4,5:1 nada falhava.
-     · o botão SELECIONADO é `#2a3a5e`, e `--good` sobre ele dá 6,70:1.
+     · the pause panel's VEIL was `rgba(4,7,15,.72)` — translucent. The text's ratio over it DEPENDED on the game behind:
+       19.17:1 over a black frame and 8.07:1 over a white one. With `--ink-soft`, `--accent` and `--good` the sum fell to
+       5.92 / 5.94 / 5.11:1 — AA, not AAA. At the 3:1 and 4.5:1 levels nothing failed.
+     · the SELECTED button is `#2a3a5e`, and `--good` on it gives 6.70:1.
 
-   Duas mudanças, e nenhuma inventa cor:
+   Two changes, and neither invents a colour:
 
-   1. O VÉU FICA OPACO. É o que "alto contraste" quer dizer: sai o meio-tom, e com ele a dependência do que
-      está atrás. Sozinha, esta já leva tudo a AAA menos um caso.
-   2. O CURSOR INVERTE — fundo `--accent`, texto `--accent-ink`, 12,71:1. Escurecer o selecionado o
-      aproximaria do não-selecionado (`#1a2740`) e a criança PERDERIA O CURSOR; inverter resolve as duas
-      coisas de uma vez, e é o padrão de alto contraste de qualquer sistema operacional.
+   1. THE VEIL IS OPAQUE. That is what "high contrast" means: the half-tone goes, and with it the dependence on what is
+      behind. On its own this takes everything to AAA but one case.
+   2. THE CURSOR INVERTS — `--accent` background, `--accent-ink` text, 12.71:1. Darkening the selected item would bring
+      it closer to the unselected one (`#1a2740`) and the child would LOSE THE CURSOR; inverting solves both at once, and
+      it is the high-contrast pattern of every operating system.
 
-   Resultado: o pior par do menu vai de 5,11:1 para 10,29:1 (`--ink-soft` sobre botão). Margem de +47% sobre
-   o 7:1. `tests/contraste-menu.node.test.js` afirma isso a cada rodada, com as razões calculadas do próprio
-   CSS — não copiadas para dentro do teste.
+   Result: the worst pair of the menu goes from 5.11:1 to 10.29:1 (`--ink-soft` on a button). A margin of +47% over
+   7:1. `tests/menu-contrast-measured.node.test.js` asserts it on every run, with the ratios computed from this CSS
+   itself — not copied into the test.
 
-   ⚠️ VALE PARA OS TRÊS NÍVEIS, e não só para o 7:1: nos outros dois o menu já passava, mas passava POR SORTE
-   do que estivesse na tela. Determinismo é ganho em todos. */
-/* (A regra do véu SAIU daqui em 2026-08-26: ele passou a ser opaco NA BASE, por decisão do Dev — os menus
-   de título e de pausa têm de estar em 7:1 DESDE O INÍCIO, porque é justamente neles que a pessoa com
-   deficiência ajusta os controles para si. Um contraste que só chega depois de achar o ajuste chega tarde.
-   Sobra aqui o que é específico do modo: o cursor invertido.) */
+   ⚠️ IT HOLDS FOR ALL THREE LEVELS, not only 7:1: at the other two the menu already passed, but it passed BY THE LUCK
+   of whatever was on screen. Determinism is a gain at every level. */
+/* (The veil's rule is not here: the veil is opaque AT THE BASE, by the Dev's decision — the title and pause menus have to
+   be at 7:1 FROM THE START, because they are precisely where a person with a disability adjusts the controls for
+   themselves. A contrast that only arrives after finding the setting arrives late.
+   What is left here is what is specific to the mode: the inverted cursor.) */
 #dom-layer.hc .pm-btn{background:var(--panel-btn)}
 #dom-layer.hc .pm-btn:hover,
 #dom-layer.hc .pm-btn:focus,
@@ -384,63 +433,76 @@ main{flex:1;display:flex;flex-direction:column;width:100%;margin:0 auto;padding:
 .game-region{position:relative;background:#05070f;box-shadow:0 0 0 3px var(--ink-soft);border-radius:8px;overflow:hidden;flex:none}
 .libras-slot{flex:none;width:0;height:0;background:#0b1020;border-radius:8px;overflow:hidden}
 .game-region:focus-visible{outline:4px solid var(--focus);outline-offset:3px}
-/* ===== O AVISO DE ALCANCE (issue #112) =====
-   Reaproveita `.overlay` e `.overlay__card` inteiros — o cartão nasce com a mesma casca dos outros diálogos,
-   e é isso que o faz parecer parte do jogo em vez de um erro do navegador. Só o destaque do título é próprio. */
+/* ===== THE REACH NOTICE (issue #112) =====
+   It reuses `.overlay` and `.overlay__card` whole — the card is born with the same shell as the other dialogs, and
+   that is what makes it look like part of the game instead of a browser error. Only the title's emphasis is its own. */
 #reach-notice .reach-notice__titulo{font-weight:700;margin:0 0 .5rem}
 #reach-notice p{margin:0 0 .5rem}
 #reach-notice button{margin-top:.75rem}
-/* ===== O LAÇO PAROU (ADR-0054, issue #109) =====
-   O TEXTO VEM DO ATRIBUTO, e é esse o ponto: `ui/loop-crash` escreve a frase JÁ TRADUZIDA em
-   `data-incl-parou`, e o CSS só a mostra. Um aviso cravado aqui estaria em inglês para uma criança
-   brasileira — o defeito que o pilar 3 existe para impedir.
-   ⚠️ E AS CORES SÃO CRUAS, DE PROPÓSITO: nada de `var(--…)`. Este aviso aparece justamente quando alguma
-   coisa quebrou, e a máquina de temas é candidata plausível. Branco sobre vinho dá 9,5:1, acima do 7:1 do
-   1.4.6, e não depende de nada ter sobrevivido. */
-/* ⚠️ ERA UM `::after` COM `content: attr(...)`, E NUNCA APARECERIA. Medido no arranque real: o
-   `.game-region.crt-scan-1::after` logo abaixo é a scanline do CRT, ligada por padrão — e um elemento tem UM
-   `::after` só. As duas regras não se empilham; a do CRT vem depois e vence. O `::before` está tomado pela
-   vinheta. Agora é um ELEMENTO, que não disputa lugar com ninguém — e cujo texto entra na árvore de
-   acessibilidade, coisa que `content` não garante. `z-index` acima do 500 da scanline, de propósito. */
+/* ===== THE LOOP STOPPED (ADR-0054, issue #109) =====
+   THE TEXT COMES FROM THE SCRIPT, and that is the point: `ui/loop-crash` writes the sentence ALREADY TRANSLATED (from
+   `t()`, through `textContent`), and the CSS only shows it. A notice hard-coded here would be in English for a Brazilian
+   child — the defect pillar 3 exists to prevent.
+   ⚠️ AND THE COLOURS ARE RAW, ON PURPOSE: no `var(--…)`. This notice appears exactly when something broke, and the
+   theming machinery is a plausible suspect. White on wine gives 9.5:1, above the 7:1 of 1.4.6, and does not depend on
+   anything having survived. */
+/* ⚠️ IT IS AN ELEMENT, NOT A `::after` WITH `content: attr(...)` — that version would never show. The
+   `.game-region.crt-scan-1::after` just below is the CRT scanline, on by default — and an element has ONE `::after`
+   only. The two rules do not stack; the CRT's comes later and wins. The `::before` is taken by the vignette. An
+   ELEMENT competes with nobody for its place — and its text enters the accessibility tree, which `content` does not
+   guarantee. Its slot, `--z-loop-crash`, is above the scanline's 500 on purpose. */
 #incl-parou{
   position:absolute;inset:auto 0 0 0;z-index:var(--z-loop-crash);
   padding:14px 18px;
   background:#7f1d1d;color:#fff;border-top:3px solid #fff;
-  font:700 15px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;
+  font:700 1em/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;
   text-align:center;text-wrap:balance
 }
 .pixi-mount,.pixi-mount canvas{display:block;width:100%;height:100%}
-/* pixel-art nítida ao escalar */
+/* crisp pixel art when scaling */
 .pixi-mount canvas{image-rendering:pixelated;image-rendering:crisp-edges}
-/* L2: Estética CRT (menu Sensibilidade visual) em 3 níveis: -1=pequeno, -2=grande. z-index 5 = sobre o
-   canvas/HUD do jogo, ABAIXO da pausa in-canvas (6) e dos diálogos (60) → menus nunca perdem legibilidade. */
+/* The CRT look (visual sensitivity menu) in 3 levels: -1=small, -2=large. z-index 5 = over the game's canvas/HUD, BELOW the
+   in-canvas pause (6) and the dialogs (60) → the menus never lose legibility. */
 .game-region.crt-scan-1::after,
 .game-region.crt-vig-1::before{content:'';position:absolute;inset:0;z-index:5;pointer-events:none}
-/* Scanlines ALINHADAS: período = 1 pixel LÓGICO do jogo (k px), arredondado p/ pixel FÍSICO (dpr) e
-   linha = 1 pixel físico — o JS (layout/applyCrt) calcula --scan-per/--scan-line; sem isso o gradiente
-   1px/3px em px CSS caía fora da grade (linhas desiguais em telas com escala do Windows). */
-.game-region.crt-scan-1::after{z-index:500;background:repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 var(--scan-line,1px), transparent var(--scan-line,1px) var(--scan-per,3px))} /* z-index alto = scanlines POR CIMA de tudo (canvas E menus DOM), pedido do José */
+/* ALIGNED scanlines: period = 1 LOGICAL game pixel (k px), rounded to a PHYSICAL pixel (dpr), and line = 1 physical
+   pixel — the JS (`render/crt`, applyCrt) computes --scan-per/--scan-line; without it the 1px/3px gradient in CSS px
+   fell off the grid (uneven lines on screens with Windows scaling). */
+.game-region.crt-scan-1::after{z-index:500;background:repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 var(--scan-line,1px), transparent var(--scan-line,1px) var(--scan-per,3px))} /* a high z-index = scanlines OVER everything (canvas AND DOM menus), the Dev's request */
 .game-region.crt-vig-1::before{background:radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.34) 100%)}
-.game-region.crt-round-0{border-radius:0}   /* tela quadrada */
-.game-region.crt-round-2{border-radius:24px} /* nível 1 (pequeno) = o padrão de 8px, sem classe */
+.game-region.crt-round-0{border-radius:0}   /* square screen */
+.game-region.crt-round-2{border-radius:24px} /* level 1 (small) = the 8px default, no class */
 @media (prefers-reduced-transparency: reduce){ .game-region.crt-scan-1::after,.game-region.crt-vig-1::before{display:none} }
 
-/* dicas de início sobre o canvas */
+/* start tips over the canvas */
 .start-tips{position:absolute;left:50%;top:14%;transform:translateX(-50%);
   display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none;
   transition:opacity .5s ease;z-index:6;max-width:92%}
 .start-tips p{margin:0;background:rgba(5,7,15,.85);color:#fff;border:2px solid rgba(255,255,255,.45);
-  border-radius:10px;padding:.4em .9em;font-size:1.05rem;font-weight:600;text-align:center}
+  border-radius:10px;padding:.4em .9em;font-size:1.05em;font-weight:600;text-align:center}
 .start-tips kbd{background:var(--accent);color:var(--accent-ink);border-radius:6px;padding:.05em .5em;font-weight:800}
 .start-tips.hide{opacity:0}
 @media (prefers-reduced-motion: reduce){ .start-tips{transition:none} }
 
-/* seletor de modo */
+/* mode selector */
 .modes{max-width:var(--maxw);margin:0 auto .5rem;padding:0 1rem;display:flex;gap:.5rem;flex-wrap:wrap}
-.mode-btn{min-height:var(--tap);padding:.4em .9em;font:inherit;font-weight:700;color:var(--ink);background:var(--panel);border:2px solid var(--ink-soft);border-radius:999px;cursor:pointer}
+.mode-btn{min-height:var(--alvo-min,44px);padding:.4em .9em;font:inherit;font-weight:700;color:var(--ink);background:var(--panel);border:2px solid var(--ink-soft);border-radius:999px;cursor:pointer}
 .mode-btn.is-on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
-/* TOGGLE (switch): substitui os botões "ícone + Ligado/Desligado". Estado = trilho + manopla que desliza.
-   Semântica de botão de alternância via aria-pressed (o texto interno fica oculto por font-size:0). */
+/* STEPS ⯇ ⯈ (ADR-0151): choosing between positions with left and right. The arrows are FINGER targets and follow the
+   target ruler (`--alvo-min`, ADR-0163); the focus belongs to the whole control, and the end that cannot move is dimmed. */
+.passos{display:inline-flex;align-items:center;gap:.25rem;min-height:var(--alvo-min,44px);border:2px solid var(--ink-soft);border-radius:8px;padding:0 .15rem;background:var(--panel-btn);color:var(--ink);font-weight:700;user-select:none;-webkit-user-select:none}
+.passos:focus,.passos:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
+.passo-seta{display:inline-flex;align-items:center;justify-content:center;min-width:var(--alvo-min,44px);min-height:var(--alvo-min,44px);cursor:pointer;font-size:1.1em;touch-action:manipulation}
+.passo-seta.no-limite{opacity:.35;cursor:default}
+.passo-valor{min-width:6ch;text-align:center;flex:1}
+/* «◀ Label: value ▶» takes the whole ROW (ADR-0130 erratum): there is no label on the left competing for the room. */
+/* 🔴 AND NO BOX INSIDE THE BOX: the ROW is the item. The first version kept `.passos`'s border and background, and the
+   text wrapped onto four lines inside a box beside the hint — the Dev: «Por que continua desenhando os botões de seleção
+   de <=5 itens do jeito errado?!». On one line, `◀ Label: value ▶`, with no wrapping. */
+.ctrl-row--passos .passos{flex:1;justify-content:space-between;border:0;background:transparent;padding:0;white-space:nowrap}
+.ctrl-row--passos .passo-valor{white-space:nowrap}
+/* TOGGLE (switch): replaces the "icon + On/Off" buttons. State = a track + a knob that slides.
+   Toggle-button semantics through aria-pressed (the inner text is hidden by font-size:0). */
 .mode-btn.switch{--sw-w:52px;--sw-h:28px;position:relative;width:var(--sw-w);min-width:var(--sw-w);height:var(--sw-h);min-height:var(--sw-h);padding:0;flex:0 0 auto;border-radius:999px;border:2px solid var(--ink-soft);background:#0e1326;color:transparent;font-size:0;transition:background .18s,border-color .18s}
 .mode-btn.switch::after{content:"";position:absolute;top:50%;left:3px;transform:translateY(-50%);width:calc(var(--sw-h) - 10px);height:calc(var(--sw-h) - 10px);border-radius:50%;background:var(--ink-soft);transition:left .18s,background .18s}
 .mode-btn.switch[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
@@ -448,33 +510,33 @@ main{flex:1;display:flex;flex-direction:column;width:100%;margin:0 auto;padding:
 .mode-btn.switch:focus-visible,.mode-btn.switch:focus{outline:3px solid var(--accent);outline-offset:2px}
 @media (prefers-reduced-motion: reduce){ .mode-btn.switch,.mode-btn.switch::after{transition:none} }
 
-/* desafio Soma-Sub (overlay sobre o canvas) */
+/* the quiz challenge (an overlay over the canvas) */
 .quiz{position:absolute;inset:0;z-index:12;display:grid;place-items:center;background:rgba(0,0,0,.55)}
 .quiz-box{position:relative;background:#14141f;color:var(--ink);border:3px solid var(--accent);border-radius:12px;padding:1rem 1.1rem;max-width:90%;text-align:center}
-/* 3 luzes de progresso (canto sup. direito): apagada = cinza; acesa = amarela com luz acesa em volta */
+/* 3 progress lights (top right corner): off = grey; on = yellow with a glow around it */
 .quiz-wins{position:absolute;top:.5rem;right:.6rem;display:flex;gap:.4rem}
 .qw-dot{width:.95rem;height:.95rem;border-radius:50%;background:#3a4152;border:2px solid #0d0d1a}
-.qw-dot.on{background:var(--accent);border-color:#8a6d00;box-shadow:0 0 .55rem .12rem var(--accent)} /* iluminação em volta (luz acesa) */
+.qw-dot.on{background:var(--accent);border-color:#8a6d00;box-shadow:0 0 .55rem .12rem var(--accent)} /* the glow around it (a light that is on) */
 .quiz-wins.celebrate .qw-dot.on{animation:qwPop .6s ease}
 @keyframes qwPop{0%{transform:scale(1)}45%{transform:scale(1.4);box-shadow:0 0 .9rem .3rem var(--accent)}100%{transform:scale(1)}}
 @media (prefers-reduced-motion:reduce){ .quiz-wins.celebrate .qw-dot.on{animation:none} }
 .quiz-shape{color:var(--accent);font-weight:800;text-transform:capitalize}
-.quiz-prob{font-size:1.6rem;font-weight:800;margin:.4rem 0 .8rem}
+.quiz-prob{font-size:1.6em;font-weight:800;margin:.4rem 0 .8rem}
 .quiz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
-.quiz-choice{min-height:var(--tap);min-width:var(--tap);font:inherit;font-size:1.2rem;font-weight:700;color:var(--ink);background:#131a30;border:2px solid var(--ink-soft);border-radius:8px;cursor:pointer}
+.quiz-choice{min-height:var(--alvo-min,44px);min-width:var(--alvo-min,44px);font:inherit;font-size:1.2em;font-weight:700;color:var(--ink);background:#131a30;border:2px solid var(--ink-soft);border-radius:8px;cursor:pointer}
 .quiz-choice.sel{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
 .quiz-choice.reveal{outline:3px solid var(--good);outline-offset:2px}
-.quiz-hint{font-size:.85rem;margin-top:.6rem;color:var(--ink-soft)}
-.quiz-emoji{font-size:2.4rem;line-height:1}
-/* Palavra do topo = emoji SELECIONÁVEL (pular sobre ela repete a fala / VLibras gesticula) */
-.quiz-word{font-size:2.4rem;line-height:1;background:transparent;border:2px solid transparent;border-radius:12px;padding:.05em .2em;cursor:pointer}
+.quiz-hint{font-size:1em;margin-top:.6rem;color:var(--ink-soft)}
+.quiz-emoji{font-size:2.4em;line-height:1}
+/* The top word = a SELECTABLE emoji (jumping on it repeats the speech / VLibras signs it) */
+.quiz-word{font-size:2.4em;line-height:1;background:transparent;border:2px solid transparent;border-radius:12px;padding:.05em .2em;cursor:pointer}
 .quiz-word.sel{border-color:var(--accent);background:rgba(255,230,0,.12)}
-.quiz-letter{font-size:.8rem;color:var(--ink-soft);margin:.1rem 0 .4rem}
+.quiz-letter{font-size:1em;color:var(--ink-soft);margin:.1rem 0 .4rem}
 .silaba-boxes{display:flex;gap:.4rem;justify-content:center;margin-bottom:.5rem}
-.silaba-box{min-width:34px;min-height:28px;border:2px dashed var(--ink-soft);border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.15rem}
+.silaba-box{min-width:34px;min-height:28px;border:2px dashed var(--ink-soft);border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.15em}
 .silaba-box.filled{border-style:solid;border-color:var(--accent);background:rgba(255,255,255,.08)}
 .silaba-actions{display:flex;gap:.4rem;justify-content:center;margin-top:.4rem}
-/* E8: cela Braille */
+/* a Braille cell */
 .bcells{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin:.4rem 0}
 .bcell{display:flex;flex-direction:column;align-items:center;gap:.2rem}
 .bcell-grid{display:grid;grid-template-columns:repeat(2,10px);grid-auto-rows:10px;gap:3px;padding:4px;background:#0e1326;border:1px solid var(--ink-soft);border-radius:4px}
@@ -484,94 +546,394 @@ main{flex:1;display:flex;flex-direction:column;width:100%;margin:0 auto;padding:
 @media (prefers-contrast: more){ .quiz-box{background:#000} .quiz-choice{background:#000} .quiz-choice.sel{background:#fff;color:#000} }
 
 .opts{max-width:var(--maxw);margin:0 auto .5rem;padding:0 1rem;display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}
-/* barra de controles compacta → cabe em UMA fileira em telas comuns (não afeta botões de overlay) */
-.opts .mode-btn{padding:.35em .65em;font-size:.92rem;white-space:nowrap}
+/* a compact controls bar → fits on ONE row on common screens (does not affect overlay buttons) */
+.opts .mode-btn{padding:.35em .65em;font-size:1em;white-space:nowrap}
 .caption{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);background:rgba(0,0,0,.82);color:#fff;
-  border:2px solid rgba(255,255,255,.5);border-radius:8px;padding:.25em .7em;font-weight:700;font-size:.95rem;
+  border:2px solid rgba(255,255,255,.5);border-radius:8px;padding:.25em .7em;font-weight:700;font-size:1em;
   z-index:8;pointer-events:none;max-width:90%;opacity:0;transition:opacity .15s}
 .caption.show{opacity:1}
 @media (prefers-reduced-motion: reduce){ .caption{transition:none} }
 
 .help{max-width:var(--maxw);margin:1rem auto 0;color:var(--ink-soft)}
-.help summary{cursor:pointer;font-weight:700;color:var(--ink);min-height:var(--tap);display:flex;align-items:center}
+.help summary{cursor:pointer;font-weight:700;color:var(--ink);min-height:var(--alvo-min,44px);display:flex;align-items:center}
 .help ul{padding-left:1.1rem}
 .help li{margin:.3rem 0}
 
-.btn{min-height:var(--tap);min-width:var(--tap);padding:.5em 1em;font:inherit;font-weight:600;color:var(--ink);background:var(--panel);border:2px solid var(--ink-soft);border-radius:10px;cursor:pointer}
+.btn{min-height:var(--alvo-min,44px);min-width:var(--alvo-min,44px);padding:.5em 1em;font:inherit;font-weight:600;color:var(--ink);background:var(--panel);border:2px solid var(--ink-soft);border-radius:10px;cursor:pointer}
 .btn--primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
 
 .overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(0,0,0,.7);padding:1rem}
-/* "tela = canvas": os diálogos de a11y são reparentados para dentro do #game-region (JS) e ficam
-   presos aos limites do canvas; o último aberto sobe (z-index via JS). Só afeta os que estão dentro. */
+/* "screen = canvas": the a11y dialogs are re-parented into #game-region (JS) and stay held within the canvas's bounds;
+   the last one opened goes on top (z-index by JS). Only affects the ones inside. */
 #game-region .overlay{position:absolute;z-index:60;padding:.6rem}
-#game-region .overlay__card{max-height:94%;max-width:96%}
-/* Rodapé de explicação: branco sobre preto translúcido 0,82 → contraste do branco >7:1 mesmo sobre 100% branco
-   (composição: 1-0,82=0,18 → L≈0,027 → ~13:1), sem ser 100% opaco. Fixo no rodapé do card. */
-.opt-explain{position:sticky;bottom:calc(-1 * var(--card-pad,1.5rem));margin:.8rem calc(-1 * var(--card-pad,1.5rem)) calc(-1 * var(--card-pad,1.5rem));padding:.6rem .9rem;min-height:2.8rem;display:flex;align-items:center;text-align:left;
-  background:rgba(0,0,0,.82);color:#fff;font-size:.9em;line-height:1.35;border-top:1px solid rgba(255,255,255,.18);border-radius:0 0 9px 9px;backdrop-filter:blur(1px)}
+/* THE QUIZ STARTS BELOW THE QUICK BAR (ADR-0148). The engine declares `--barra-a11y-h` on `#game-region`; the bar sits
+   10 px from the top (`#title-icons`), and the statement was drawn behind it — measured on a screenshot of the Dev's. */
+/* Since issue #160 the variable is the WHOLE room (the bar's offset, the bar, the icon name line and a light gap): read as is. */
+.quiz-app{padding-top:var(--barra-a11y-h,0px);padding-bottom:var(--rodape-h,0px)} /* the HUD row is always there; the footer bands overlay (ADR-0239 erratum) */
+/* THE EDGE MARGIN (interface log 2026-09-26; `--margem-borda`, written by `ui/layout` from k): the Dev, «os textos estão tocando
+   na borda do jogo». The sides get it here; the top is the quick bar's room and the bottom the HUD row's, which keeps its own. */
+.quiz-app{padding-left:var(--margem-borda,8px);padding-right:var(--margem-borda,8px)}
+/* ADR-0163: at 640×360 the bar, the statement, four 44 px options and the footer band had 404 px to fit in 360 (measured).
+   The spacing goes, not the targets or the 16 px floor: the statement keeps its size on a 1.25 line and no outer margins. */
+.quiz-pergunta{margin:0 0 calc(.25rem * var(--espaco-fixo,1));line-height:1.25}
+/* The quiz's MENU button (ADR-0166 erratum), in the top-left corner the bar leaves free: the engine's target size. */
+/* THE QUICK PAUSE (ADR-0155): PAUSED in the middle of the frozen screen — THE WORD ONLY, white, with a BLACK OUTLINE ON
+   THE LETTERS and no box: «Borda nas letras, não numa caixa» (the Dev, the record's erratum). The outline is what keeps it
+   legible over a light scene; `paint-order` puts the stroke UNDER the fill, so the letter does not get thinner, and the
+   shadow in eight directions covers browsers without `-webkit-text-stroke`. z-index 12, the same literal as the quiz
+   overlay (`.quiz`), not yet a slot: over the content by document order, under the pad (14) and the panels (60). The
+   right slot is `--z-game-msg`, and adopting it alone would put PAUSED over a panel. No pointer events. */
+.pausa-rapida{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:12;pointer-events:none;
+  color:#fff;-webkit-text-stroke:.08em #000;paint-order:stroke fill;
+  text-shadow:2px 0 #000,-2px 0 #000,0 2px #000,0 -2px #000,2px 2px #000,-2px 2px #000,2px -2px #000,-2px -2px #000;
+  font-family:var(--font);font-weight:800;font-size:calc(var(--ui-fs,16px)*2);letter-spacing:var(--ls);white-space:nowrap}
+.pausa-rapida[hidden]{display:none}
+/* WHAT THE SCAN IS OFFERING (ADR-0218, #201): with «um botão só», the child does not choose — they wait, and what they
+   wait for has to be in view. The SAME outlined white letters as the quick pause, no box, at the TOP of the region,
+   below the bar's band (`--barra-a11y-h`), which is the zone no game uses. No pointer events: it is a notice, not a
+   control — what fires it is its single button, wherever that is. */
+/* ⚠️ `--scan-top` and NOT `--barra-a11y-h`: this label makes the band grow, and placing it by the band made a loop — it
+   pushed the band, the band pushed it, and it went down the screen on every measure (caught by a test case). `--scan-top`
+   is where the bar ends, and does not depend on it (`ui/top-band` writes both). */
+.scan-now{position:absolute;left:50%;top:var(--scan-top,0px);transform:translateX(-50%);z-index:12;
+  pointer-events:none;color:#fff;-webkit-text-stroke:.06em #000;paint-order:stroke fill;
+  text-shadow:2px 0 #000,-2px 0 #000,0 2px #000,0 -2px #000,2px 2px #000,-2px 2px #000,2px -2px #000,-2px -2px #000;
+  font-family:var(--font);font-weight:800;font-size:calc(var(--ui-fs,16px)*1.5);letter-spacing:var(--ls);white-space:nowrap}
+.scan-now[hidden]{display:none}
+/* THE FOOTER LEGEND of the quick pause (ADR-0155 erratum): the same outlined white letters, no box, right ABOVE the pad's
+   START pill — which stays in view, because it is the way out for someone who only has a finger. ⚠️ `left`/`right` and
+   not `left:50%` + `translate`: with that, the box shrank to HALF of the region (measured: 271 px, three lines, over
+   PAUSED). */
+/* 🔴 The footer is ONE column (2026-09-12): the explanation of the pointed bar icon above the quick-pause legend. Two
+   absolute strips covered each other as soon as one wrapped. */
+/* 🔴 ADR-0164 (2026-09-12): the footer is at the LOWEST edge of the region, over a darkened band, and holds at most TWO
+   lines of text. The Dev saw a three-line explanation in the middle of the screen, over a quiz option, with outlined
+   letters and no background. White on black at .82 over pure white composes to ~13:1 (the panel footer's arithmetic).
+   With the quick-pause legend also showing, each keeps ONE line, so the band never grows past two.
+   `--footer-band-h` is the room those two lines take: the engine's panels keep it free under their last row.
+   🔴 `--rodape-h` is what a GAME leaves free at the bottom, and since ADR-0239's erratum it is the HUD ROW's room only — its
+   height plus how far the pad lifts it. The caption, the legend and the explanation are MOMENTARY and overlay the workspace
+   while they show: «a legenda é momentânea» (the Dev). Counting them made a band that is off most of the time take the
+   game's floor for good (the demo quiz lost its last option at 640×360). */
+#game-region{--footer-band-h:calc(var(--ui-fs,16px) * 2.6 + 4px + var(--margem-borda,8px));--rodape-h:calc(var(--hud-row-bottom,0px) + var(--hud-row-h,0px))}
+/* ADR-0163 rule 3: the region's text grows with the scale the engine forces — 16 px at 640×360, 32 at 1280×720 — times the
+   communication cycle's type scale, which the root size also carries. Without it everything in the region read the ROOT
+   16 px: measured at 1280×720, quiz options at 16 px and the bar's emoji at 20 px under a `--ui-fs` of 32. */
+#game-region{font-size:calc(var(--ui-fs,16px) * var(--fonte-escala,1))}
+/* ADR-0164 as the Dev corrected it: the EXPLANATION stands on a full-width dark band at the lowest edge (rule 2, rule 4);
+   the BUTTON LEGEND runs the full width with NO band, a dark background only behind each «name: function» (rule 3), and
+   sits above the explanation. The column itself paints nothing. Padding adds to 8 px, so two lines fit `--footer-band-h`. */
+/* THE PAD'S SHOULDER COLUMNS, as what else stands on the region must keep clear of them: while the pad shows them they own the
+   TOP CORNERS (ADR-0160; drawn only when the game names them, ADR-0162), and they are placed for REACH — a thumb finds a corner
+   without looking — so where they and anything else meet, the other thing moves. A shoulder is a `.touch-btn`, 56 px with the
+   target floor under it; a column holds one or two, 6 px apart. `--shoulders-*-reach` is how far down a column reaches, the edge
+   margin under it counted: 0 while that corner holds none. */
+#game-region,.game-region{--shoulder-size:max(56px,var(--alvo-min,44px));--shoulders-left-reach:0px;--shoulders-right-reach:0px}
+#game-region:has(#touch-controls:not([hidden]) > .touch-ombros--esq),.game-region:has(#touch-controls:not([hidden]) > .touch-ombros--esq){
+  --shoulders-left-reach:calc(var(--margem-borda,8px) * 2 + var(--shoulder-size))}
+#game-region:has(#touch-controls:not([hidden]) > .touch-ombros--esq > :nth-child(2)),.game-region:has(#touch-controls:not([hidden]) > .touch-ombros--esq > :nth-child(2)){
+  --shoulders-left-reach:calc(var(--margem-borda,8px) * 2 + var(--shoulder-size) * 2 + 6px)}
+#game-region:has(#touch-controls:not([hidden]) > .touch-ombros--dir),.game-region:has(#touch-controls:not([hidden]) > .touch-ombros--dir){
+  --shoulders-right-reach:calc(var(--margem-borda,8px) * 2 + var(--shoulder-size))}
+#game-region:has(#touch-controls:not([hidden]) > .touch-ombros--dir > :nth-child(2)),.game-region:has(#touch-controls:not([hidden]) > .touch-ombros--dir > :nth-child(2)){
+  --shoulders-right-reach:calc(var(--margem-borda,8px) * 2 + var(--shoulder-size) * 2 + 6px)}
+/* THE HUD the engine mounts from a cartridge's `hud` (ADR-0168; issue #162): the mission at the top centre, just under the quick
+   bar, and the rest in the HUD row at the bottom (ADR-0239 and its erratum; the row's rules are below). Where a caller mounts the
+   bands with no row they stand on the region: the points and the power down the right edge, the learning bars at the bottom
+   centre. State on dark chips, like the icon's name; no pointer events, so a finger passes through to the game.
+   📌 What it keeps clear of: the quick bar, which owns the top (ADR-0239's driver: «the top belongs to the quick accessibility
+   bar; the HUD no longer shares it») — `--barra-a11y-h` is the band `ui/top-band` measures —, the pad's shoulder columns (above),
+   and the pad itself, which the row stands above (ADR-0239 §6). */
+/* Where the bands have no row, the right edge's stack (the points, the power under them) starts under the bar's band and under
+   the right shoulders — whichever reaches lower — and never nearer the top than the edge margin. */
+#game-region,.game-region{--hud-corner-top:max(var(--margem-borda,8px),var(--barra-a11y-h,0px),var(--shoulders-right-reach))}
+.hud-faixa{position:absolute;z-index:12;margin:0;pointer-events:none;font-size:var(--ui-fs,16px);line-height:1.25;display:flex;gap:2px}
+.hud-faixa[hidden]{display:none}
+/* The MISSION sits at the TOP CENTRE, just under the quick bar (ADR-0239 erratum): `ui/top-band` writes its `top` from the
+   bar's box. The class keeps its old name — a page-surface name is not renamed in passing. The bar's momentary name line is
+   drawn over it while a name shows (the Dev: «a legenda é momentânea, a escrita da missão aparece o tempo todo»). */
+/* THE EDGE MARGIN (interface log 2026-09-26) where a caller mounts the bands on the region, with no row: `--margem-borda` from
+   the side, and from the top the same place under the bar the root's mission takes (`--hud-mission-top`, which `ui/top-band`
+   writes; 0 with no bar) — at the margin it stood behind the bar's icons. Where the root mounts the mission, `ui/top-band`
+   writes that `top` on the element itself. */
+.hud-esquerda{top:max(var(--margem-borda,8px),var(--hud-mission-top,0px));left:50%;transform:translateX(-50%);max-width:calc(100% - 2 * var(--margem-borda,8px));flex-direction:column;align-items:center;text-align:center}
+.hud-direita{top:var(--hud-corner-top,8px);right:var(--margem-borda,8px);flex-direction:column;align-items:flex-end;text-align:right}
+/* The learning bars (ADR-0049 §5): one ten-segment bar per skill, one skill a line as in the row (ADR-0239 §1), centred at the
+   bottom — under the footer column, which comes later in the region on the same layer and covers them. Okabe-Ito colours, and
+   a second cue beside each, so no state is told by colour alone (WCAG 1.4.1): green carries a dot, red stripes, an empty slot
+   only its outline; a purple bar a ▲, an orange one a ▼. 📏 Side by side (ADR-0168 §3's footer, superseded), three bars were
+   501 px wide at 640×360 and, lifted above the pad, ran into the points and the power under the right shoulders. */
+.hud-aprendizagem{left:50%;bottom:var(--margem-borda,8px);transform:translateX(-50%);flex-direction:column;align-items:center;gap:2px}
+/* …and with no row, ABOVE the on-screen pad while it shows, as the row would stand (ADR-0239 §6): `--hud-row-bottom` is how high
+   the pad's lower parts reach (`ui/hud-row`). 📏 At the lower edge they stood under the START and SELECT pills. */
+.game-region > .hud-aprendizagem,#game-region > .hud-aprendizagem{bottom:calc(var(--hud-row-bottom,0px) + var(--margem-borda,8px))}
+/* The explanation band is 82% opaque: the bars showed through under its words. While it shows they are not drawn at all —
+   the explanation has priority (ADR-0168 §3), and a segment behind a letter is noise for the child reading it. */
+.game-region:has(.barra-explicacao:not([hidden])) .hud-aprendizagem,#game-region:has(.barra-explicacao:not([hidden])) .hud-aprendizagem{visibility:hidden}
+.hud-barra{display:flex;align-items:center;gap:.15em;padding:.2em .3em;background:rgba(8,8,16,.92);border-radius:8px}
+.hud-seg{display:block;width:.8em;height:1em;border-radius:2px;box-sizing:border-box}
+.hud-seg[data-seg="vazio"]{border:1px solid #8a8f98}
+.hud-seg[data-seg="azul"]{background:#0072B2}
+.hud-seg[data-seg="verde"]{background:radial-gradient(circle,#08080f 0 .14em,transparent .16em),#009E73}
+.hud-seg[data-seg="vermelho"]{background:repeating-linear-gradient(45deg,#08080f 0 .12em,transparent .12em .3em),#D55E00}
+.hud-barra[data-cor="roxa"] .hud-seg:not([data-seg="vazio"]){background:#CC79A7}
+.hud-barra[data-cor="laranja"] .hud-seg:not([data-seg="vazio"]){background:#E69F00}
+.hud-barra[data-cor="roxa"]::after,.hud-barra[data-cor="laranja"]::after{color:#f6f5f0;font-size:1em;line-height:1;margin-left:.15em}
+.hud-barra[data-cor="roxa"]::after{content:"▲"}
+.hud-barra[data-cor="laranja"]::after{content:"▼"}
+.hud-numero{margin:0;padding:0 .3em;color:#f6f5f0;background:rgba(8,8,16,.92);border-radius:8px;max-width:100%;overflow-wrap:anywhere}
+/* ===================== THE HUD ROW AT THE BOTTOM (ADR-0239; issue #94) =====================
+   One row along the lower edge, left to right: the learning bars · the session clock, centred · the power over the score ·
+   the game's map. `ui/hud-row` writes where it stands (`--hud-row-bottom`: above the on-screen pad while it shows) and its
+   height (`--hud-row-h`, which the footer and `--rodape-h` read — the row is all a game must leave free). Three columns of which the outer two are equal, so the
+   clock is at the true centre; `minmax(0,…)` so a long cell never pushes it off. No pointer events: a finger passes through
+   to the game. Empty — no clock, no band, no map — it is not drawn. */
+.hud-row{position:absolute;left:0;right:0;bottom:var(--hud-row-bottom,0px);z-index:12;pointer-events:none;box-sizing:border-box;
+  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;column-gap:8px;
+  padding:0 var(--margem-borda,8px) var(--margem-borda,8px); /* the edge margin (interface log 2026-09-26) */
+  font-family:var(--font);font-size:var(--ui-fs,16px)}
+/* …and while the pad shows a shoulder column on a side, the row's cells stand clear of it on that side: lifted above the pad at
+   640×360 the row reaches up to the shoulders (the pad's directional is 179 px tall), and they keep their corner for reach
+   (ADR-0160). 📏 The power over the score stood 5 px into R1. */
+#game-region:has(#touch-controls:not([hidden]) > .touch-ombros--esq) > .hud-row,.game-region:has(#touch-controls:not([hidden]) > .touch-ombros--esq) > .hud-row{
+  padding-left:calc(var(--margem-borda,8px) * 2 + var(--shoulder-size))}
+#game-region:has(#touch-controls:not([hidden]) > .touch-ombros--dir) > .hud-row,.game-region:has(#touch-controls:not([hidden]) > .touch-ombros--dir) > .hud-row{
+  padding-right:calc(var(--margem-borda,8px) * 2 + var(--shoulder-size))}
+.hud-row:not(:has(.session-clock, .hud-faixa:not([hidden]), .hud-map > *)){display:none}
+.hud-row-learning{justify-self:start;min-width:0}
+.hud-row-clock{justify-self:center}
+.hud-row-end{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:8px;min-width:0}
+.hud-score{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
+.hud-map{display:flex;align-items:flex-end} /* empty, it is 0 px wide: nothing is drawn until a game mounts its map */
+/* In the row the bands are laid out by their cell, not placed on the region; the learning bars stack, one skill a line,
+   because three side by side do not fit a third of 640 px. */
+.hud-row .hud-faixa{position:static;transform:none}
+.hud-row .hud-aprendizagem{flex-direction:column;align-items:flex-start;gap:2px}
+.hud-row .hud-direita{align-items:center;text-align:center}
+/* The explanation band covers the row while it shows (a menu is open, the game is paused): the row is not drawn under its
+   translucent band, and the band sits where the row stands. The caption and the legend otherwise stand ABOVE the row. */
+.game-region:has(.barra-explicacao:not([hidden])) .hud-row,#game-region:has(.barra-explicacao:not([hidden])) .hud-row{visibility:hidden}
+/* THE LOOK OF THE CLOCK AND THE SCORE: a small label over bold digits, white with a dark outline — the reference is Super
+   Mario World's HUD, and nothing of its art or face is taken: the engine's own faces, the mathematics one with tabular
+   figures for the digits, so they never change width. Text at the 16 px floor and above (ADR-0163); white on its black
+   outline, so it holds its contrast over any scene. */
+.session-clock-text,.hud-points .hud-numero{color:#fff;font-weight:800;-webkit-text-stroke:.06em #000;paint-order:stroke fill;
+  text-shadow:2px 0 #000,-2px 0 #000,0 2px #000,0 -2px #000,2px 2px #000,-2px 2px #000,2px -2px #000,-2px -2px #000}
+.session-clock-digits,.hud-points .hud-numero{font-family:var(--font-math);font-variant-numeric:tabular-nums;
+  font-size:calc(var(--ui-fs,16px) * 1.25);line-height:1.1;white-space:nowrap}
+.hud-points .hud-numero{background:none;padding:0}
+.hud-points{top:var(--hud-corner-top,8px);right:var(--margem-borda,8px);flex-direction:column;align-items:flex-end} /* only where a caller mounts the bands with no row; `--hud-corner-top` above */
+/* …and there, at the top edge, the digits get a line that holds their glyphs: at 1.1 the face's box rose 1 px over the line
+   (measured: 24 px of glyph box on a 22 px line at 640×360, 46 on 44 at 1280×720), into the edge margin */
+.game-region > .hud-points .hud-numero,#game-region > .hud-points .hud-numero{line-height:1.2}
+/* …and the POWER, which in the row stands over the points (ADR-0239 §3), has no room over them there: the same pair reads
+   top-down, the points first and the power directly under them, on the same right edge — both at one `top` drew one box over
+   the other. The points' line is one line of digits, 1.25 × the text size on a 1.2 line (above); 2 px apart, as in the row's
+   cell. With no points shown the power is the stack's first line. */
+.game-region:has(> .hud-points:not([hidden]) > .hud-numero:not([hidden])) > .hud-direita,
+#game-region:has(> .hud-points:not([hidden]) > .hud-numero:not([hidden])) > .hud-direita{top:calc(var(--hud-corner-top,8px) + var(--ui-fs,16px) * 1.25 * 1.2 + 2px)}
+/* THE SESSION CLOCK (ADR-0236, ADR-0239): the label over the time left, and the Time Timer pie to their right, as tall as a
+   target. The pie is the share still to go (`--left`, written by `ui/session-clock`), green on a white face (ADR-0050 §3)
+   inside a dark rim and a white ring, drawn inside its box. At the end the WHOLE pie turns red — an almost empty face
+   becoming a full one, so the change is not told by colour alone (WCAG 1.4.1). Okabe-Ito green and vermillion. */
+.session-clock{display:flex;align-items:center;gap:6px;pointer-events:none}
+.session-clock-text{display:flex;flex-direction:column;align-items:center;line-height:1.1}
+/* The label stays at the 16 px text floor (ADR-0163) and loses weight instead, and the digits are an eighth over the floor:
+   the Dev found «TEMPO» too big and wants the label-and-digits block no wider than two and a half pies (ADR-0239 errata). */
+.session-clock-label{font-size:var(--ui-fs,16px);letter-spacing:var(--ls);font-weight:600}
+.session-clock-digits{font-size:calc(var(--ui-fs,16px) * 1.125)}
+.session-clock-pie{flex:none;box-sizing:border-box;width:var(--alvo-min,44px);height:var(--alvo-min,44px);border-radius:50%;
+  border:2px solid #08080f;box-shadow:inset 0 0 0 2px #f6f5f0;
+  background:conic-gradient(#f6f5f0 0 calc((1 - var(--left,1)) * 1turn),#009E73 0)}
+/* The spent share is the face from twelve o'clock CLOCKWISE, and the green is what is left up to twelve: the edge moves
+   clockwise as time passes, like a Time Timer (the Dev, 2026-09-25: it was emptying anticlockwise). */
+/* The end is red and still — no pulse, no lock (ADR-0240). */
+.session-clock[data-look="red"] .session-clock-pie{background:#D55E00}
+.rodape-da-tela{position:absolute;left:0;right:0;bottom:0;z-index:12;display:flex;flex-direction:column;gap:0;pointer-events:none}
+/* WITH THE HUD ROW (ADR-0239 point 6): the caption and the legend stand ABOVE the row; while the explanation shows, the column
+   comes down to where the row stands, and the explanation covers it. */
+#game-region:has(> .hud-row) .rodape-da-tela{bottom:calc(var(--hud-row-bottom,0px) + var(--hud-row-h,0px))}
+#game-region:has(> .hud-row) .rodape-da-tela:has(> .barra-explicacao:not([hidden])){bottom:var(--hud-row-bottom,0px)}
+.rodape-da-tela:not(:has(> :not([hidden]))){display:none}
+/* `--footer-lines` is how many lines a footer text shows (ADR-0164): the clamp reads it, and so do the scrolling box below and
+   `ui/footer-scroll-driver`, which must know the view it scrolls a longer text through (ADR-0245). */
+.pausa-legenda,.barra-explicacao{color:#fff;font-family:var(--font);font-weight:700;font-size:var(--ui-fs,16px);--footer-lines:2;
+  line-height:1.3;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--footer-lines);overflow:hidden}
+/* The band reaches the edges; its WORDS stand the edge margin off them (interface log 2026-09-26) — `--footer-band-h` counts it.
+   At the sides .6em is already more than the margin (4.8·k against 4·k); under them the margin is a transparent BORDER the
+   band's colour shows through, not padding: the two-line clamp clips at the padding box, and a padding there would show the
+   top of a third line. */
+.barra-explicacao{order:2;padding:4px .6em 0;border-bottom:var(--margem-borda,8px) solid transparent;background:rgba(0,0,0,.82)}
+.pausa-legenda{order:1;padding:0 .6em}
+.rodape-da-tela:not(:has(> .barra-explicacao:not([hidden]))) > .pausa-legenda{padding-bottom:var(--margem-borda,8px)}
+.pausa-legenda .lg-nome{background:rgba(0,0,0,.82);padding:0 .35em;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
+/* The SOUND CAPTION (study item D3) tops the column — ADR-0164 rule 4: «the sound caption above, the explanation below
+   it» — on a dark background behind its words only, two lines at most (rule 5). */
+.legenda-de-som{order:0;align-self:center;max-width:100%;box-sizing:border-box;margin:0 0 4px;padding:2px .6em;border-radius:6px;
+  background:rgba(0,0,0,.82);color:#fff;font-family:var(--font);font-weight:700;font-size:var(--ui-fs,16px);line-height:1.3;
+  text-align:center;display:-webkit-box;-webkit-box-orient:vertical;--footer-lines:2;-webkit-line-clamp:var(--footer-lines);overflow:hidden}
+/* the caption as the column's lowest line (no legend, no explanation under it): the edge margin under it, not 4 px */
+.rodape-da-tela:not(:has(> .barra-explicacao:not([hidden]), > .pausa-legenda:not([hidden]))) > .legenda-de-som{margin-bottom:var(--margem-borda,8px)}
+/* two or more lines of the footer showing at once: one line each, so the footer does not climb into the workspace */
+.rodape-da-tela:has(> :not([hidden]) ~ :not([hidden])) > *{--footer-lines:1}
+.pausa-legenda[hidden],.barra-explicacao[hidden],.legenda-de-som[hidden]{display:none}
+/* ADR-0245: AN EXPLANATION LONGER THAN ITS LINES MOVES INSIDE THEM. `ui/footer-scroll-driver` marks it `data-scroll`: a glide
+   translates the words' `.footer-scroll-text` block (a Web Animation, sub-pixel — a transform needs a block, an inline span
+   ignores it), reduced motion turns pages by `scrollTop`, at once. The box stays the clamped one to the pixel: a block of
+   exactly its lines (`1lh` each, no clamp and so no ellipsis), with the 4 px over the words as a transparent BORDER instead of
+   padding — the view clips at the padding box, and a padding would show a slice of the next line. Pointer events come back to
+   the band while it moves, so a pointer over it can hold it (WCAG 2.2.2). */
+.barra-explicacao[data-scroll],#game-region .opt-explain[data-scroll]{display:block;-webkit-line-clamp:none;box-sizing:content-box;
+  height:calc(var(--footer-lines,2) * 1lh);padding-top:0;border-top:4px solid transparent;pointer-events:auto}
+.barra-explicacao[data-scroll] > .footer-scroll-text,#game-region .opt-explain[data-scroll] > .footer-scroll-text{display:block}
+/* A PANEL WEARS THE PAUSE CARD (interface log, 2026-09-13). The Dev: the settings submenu «mantém a mesma altura e identidade
+   visual», and every panel it opens had «outra identidade visual, com alturas menores, título maior e cores diferentes».
+   So a panel in the region takes `.screen-pause .pause-card` as it is: the whole height, the same dark card and gold border,
+   the gold title at the text size, items of `.pm-btn`'s colour, border and radius with the same 2 px gaps. It is at least
+   the pause card's width and grows only when a row needs it — a steps row never wraps (ADR-0130 erratum), and with the BDA
+   spacing (ADR-0149) «◀ Realce de contraste: desligado ▶» is wider than the pause list's 26em. */
+#game-region .overlay__card{background:#0e1626;border:2px solid #ffd23f;border-radius:14px;padding:.25rem .7rem;width:auto;
+  max-width:94%;height:100%;max-height:100%;box-sizing:border-box;
+  scrollbar-gutter:stable both-edges;box-shadow:0 8px 30px rgba(0,0,0,.5);scroll-padding-bottom:var(--footer-band-h,50px)}
+#game-region .overlay__card h2{font-size:1em;line-height:1.25;margin:0 0 .1rem;color:#ffd23f}
+#game-region .overlay__back{width:100%;margin:0 0 2px;justify-content:center;background:#1a2740;border:1px solid #6a7a96;border-radius:10px;color:#eaf2f8}
+#game-region .overlay__back:hover,#game-region .overlay__back:focus{background:#2a3a5e;border-color:#ffd23f;outline:2px solid #ffd23f;outline-offset:1px}
+#game-region .ctrl-list{gap:2px}
+/* the pause list's width is the floor, as `.pause-menu` declares it: the card follows with the same padding and scrollbar gutters */
+#game-region .overlay__back,#game-region .ctrl-list{min-width:26em;max-width:100%} /* em: grows with the menu's text, like the pause list */
+#game-region .ctrl-row{box-sizing:border-box;min-height:var(--alvo-min,44px);padding:.3rem .7rem;background:#1a2740;border:1px solid #6a7a96;border-radius:10px;color:#eaf2f8;font-weight:700}
+#game-region .overlay__card > .ctrl-row{margin-top:2px}
+#game-region .ctrl-row:hover,#game-region .ctrl-row:focus-within{background:#2a3a5e;border-color:#ffd23f}
+/* The card runs under the explanation band, as the pause card runs under its legend: the room at the end of the card and
+   the scroll padding let the last row, and the focused one, come to rest above the band. */
+#game-region .overlay__card::after{content:"";display:block;height:var(--footer-band-h,50px)}
+/* HELP IS A SLIDE SHOW (interface log, 2026-09-13; `ui/help-panel`): «textos, figuras e no máximo animações», not a menu. One stop
+   with the page arrows at its sides; the slide holds the child's key drawn as a key cap, the game's word and its sentence, and
+   dots that say where the child is by fill and not by colour alone. The key cap presses itself now and then — the one animation,
+   gone under reduced motion. */
+/* a slide explains itself: no footer band telling the child to point at an option, and no room kept for it */
+#help .opt-explain,#help .overlay__card::after{display:none}
+.slides{display:flex;align-items:stretch;gap:.25rem;min-height:11em;border:1px solid #6a7a96;border-radius:10px;background:#1a2740;color:#eaf2f8}
+.slides:focus,.slides:focus-visible{outline:2px solid #ffd23f;outline-offset:1px;border-color:#ffd23f}
+.slides .passo-seta{align-self:center;color:#ffd23f;font-size:1.3em}
+.slide{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45em;padding:.5em .2em;text-align:center}
+.slide-tecla{display:inline-flex;align-items:center;justify-content:center;min-width:3em;min-height:2em;padding:.15em .6em;font:inherit;font-size:1.4em;
+  font-weight:800;color:#0e1626;background:#eaf2f8;border-radius:10px;box-shadow:0 .22em 0 #6a7a96;animation:tecla-aperta 2.4s ease-in-out infinite}
+.slide-tecla[data-sem-tecla]{color:#c3cfe0;background:transparent;border:2px dashed #6a7a96;box-shadow:none;animation:none}
+@keyframes tecla-aperta{0%,70%,100%{transform:translateY(0);box-shadow:0 .22em 0 #6a7a96}82%{transform:translateY(.16em);box-shadow:0 .06em 0 #6a7a96}}
+@media (prefers-reduced-motion: reduce){ .slide-tecla{animation:none} }
+/* a cartridge's «how to play» figure (ADR-0195): the surface the game draws on, crisp at the pixel scale */
+.slide-figura{display:block;width:min(100%,16em);height:7em;image-rendering:pixelated}
+.slide-palavra{margin:0;font-size:1.2em;font-weight:800;color:#ffd23f}
+.slide-texto{margin:0;max-width:28em;line-height:1.35}
+.slide-pontos{display:flex;gap:.45em;justify-content:center;margin-top:.2em}
+.slide-ponto{width:.6em;height:.6em;border-radius:50%;border:1px solid #eaf2f8;box-sizing:border-box}
+.slide-ponto.is-on{background:#ffd23f;border-color:#ffd23f}
+/* Explanation footer: white on 0.82 translucent black → the white's contrast is >7:1 even over 100% white
+   (composition: 1-0.82=0.18 → L≈0.027 → ~13:1), without being 100% opaque. Fixed at the card's foot. */
+.opt-explain{position:sticky;bottom:calc(-1 * var(--card-pad,1.5rem));margin:.8rem calc(-1 * var(--card-pad,1.5rem)) calc(-1 * var(--card-pad,1.5rem));padding:.6rem .9rem;min-height:2.8rem;text-align:left;
+  background:rgba(0,0,0,.82);color:#fff;font-size:1em;line-height:1.35;border-top:1px solid rgba(255,255,255,.18);border-radius:0 0 9px 9px;backdrop-filter:blur(1px);
+  /* ADR-0164: two lines at most — in the region a longer explanation scrolls through them (ADR-0245, below) */
+  display:-webkit-box;-webkit-box-orient:vertical;--footer-lines:2;-webkit-line-clamp:var(--footer-lines);overflow:hidden}
+/* ADR-0164 rule 1: a panel's explanation is a footer of the SCREEN, not of the card — «está ajustado ao menu, não ao
+   canvas», the Dev on a screenshot. The card sets no position, so the overlay (the region's size) is the containing block:
+   the band lands at the region's lowest edge, side to side, and does not scroll with the card. The card runs under it,
+   the pause card's height (see the panel rules above). */
+#game-region .opt-explain{position:absolute;left:0;right:0;bottom:0;z-index:1;margin:0;padding:4px .6em 0;min-height:0;
+  border:0;border-bottom:var(--margem-borda,8px) solid transparent;border-radius:0;text-align:center;line-height:1.3;font-size:var(--ui-fs,16px)}
+/* ↑ the transparent bottom border is the edge margin under the words, as the footer band's (interface log 2026-09-26) */
+/* the card's content from the edge margin down, as the pause card's (interface log 2026-09-26) */
+#game-region .overlay{padding:calc(var(--margem-borda,8px) - 2px) 0 0}
+#game-region .overlay__card{padding-top:0}
 #game-region .overlay__actions{position:static;background:transparent;padding:.5rem 0 0;margin:0}
-#visual{background:rgba(0,0,0,.28);align-items:start;padding-top:3.5rem} /* cor: fundo translúcido p/ ver o efeito imediato no jogo */
+#visual{background:rgba(0,0,0,.28)} /* colour: a translucent background, to see the effect on the game at once */
 
-/* Indicador de simulação (canto sup. dir.): branca=cegueira, verde=baixa visão. Duplo toque volta ao normal. */
-#viz-indicator{position:absolute;top:6px;right:6px;z-index:20;width:16px;height:16px;border-radius:50%;border:2px solid rgba(0,0,0,.6);padding:0;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.7)} /* DENTRO do canvas (game-region) — funciona como botão */
+/* Simulation indicator (TOP LEFT corner): white=blindness, green=low vision. A double tap returns to normal. The top right is
+   the right shoulders' (ADR-0160) and, with no HUD row, the points'; nothing of the HUD sits top left, so the dot is alone
+   there — under the left shoulders while the pad shows them (`--shoulders-left-reach`, with the HUD's rules). */
+#viz-indicator{position:absolute;top:max(var(--margem-borda,8px),var(--shoulders-left-reach,0px));left:var(--margem-borda,8px);z-index:20;width:16px;height:16px;border-radius:50%;border:2px solid rgba(0,0,0,.6);padding:0;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.7)} /* INSIDE the canvas (game-region) — it works as a button */
 #viz-indicator.blind{background:#fff}
 #viz-indicator.low{background:#36d36a}
-/* Baixa visão — 5 simulações (desfoque vem do filter na canvas; aqui só os overlays) */
+/* Low vision — 5 simulations (the blur comes from the filter on the canvas; only the overlays are here) */
 #viz-overlay{position:absolute;inset:0;z-index:8;pointer-events:none}
-#viz-overlay.lv-blur{background:none}                                              /* miopia/astigmatismo: só desfoque */
-#viz-overlay.lv-haze{background:rgba(244,246,250,.42)}                              /* catarata: película esbranquiçada */
-#viz-overlay.lv-tunnel{background:radial-gradient(circle at 50% 50%, transparent 0 15%, rgba(0,0,0,.55) 27%, rgba(0,0,0,.99) 42%)}  /* glaucoma: visão de túnel */
-#viz-overlay.lv-macular{background:radial-gradient(circle at 50% 50%, rgba(12,12,15,.95) 0 10%, rgba(12,12,15,.55) 17%, transparent 28%)} /* degeneração macular: borrão central */
-#viz-overlay.lv-diabetic{background:                                               /* retinopatia diabética: manchas dispersas */
+#viz-overlay.lv-blur{background:none}                                              /* myopia/astigmatism: blur only */
+#viz-overlay.lv-haze{background:rgba(244,246,250,.42)}                              /* cataract: a whitish film */
+#viz-overlay.lv-tunnel{background:radial-gradient(circle at 50% 50%, transparent 0 15%, rgba(0,0,0,.55) 27%, rgba(0,0,0,.99) 42%)}  /* glaucoma: tunnel vision */
+#viz-overlay.lv-macular{background:radial-gradient(circle at 50% 50%, rgba(12,12,15,.95) 0 10%, rgba(12,12,15,.55) 17%, transparent 28%)} /* macular degeneration: a central blur */
+#viz-overlay.lv-diabetic{background:                                               /* diabetic retinopathy: scattered spots */
     radial-gradient(circle at 22% 30%, rgba(10,10,14,.95) 0 4%, transparent 11%),
     radial-gradient(circle at 64% 22%, rgba(10,10,14,.9) 0 3%, transparent 9%),
     radial-gradient(circle at 80% 58%, rgba(10,10,14,.95) 0 5%, transparent 12%),
     radial-gradient(circle at 40% 70%, rgba(10,10,14,.9) 0 4%, transparent 10%),
     radial-gradient(circle at 16% 80%, rgba(10,10,14,.85) 0 3%, transparent 9%),
     radial-gradient(circle at 54% 48%, rgba(10,10,14,.8) 0 3%, transparent 8%)}
-/* Cegueira total: a canvas vira preta (filter brightness(0)); escondemos HUD e controles na tela */
+/* Total blindness: the canvas turns black (filter brightness(0)); we hide the HUD and the on-screen controls */
 body.blind-mode .hud, body.blind-mode #touch-controls, body.blind-mode #start-tips, body.blind-mode #caption{visibility:hidden}
 [hidden]{display:none!important}
-/* CAIXA ALTA (menu de CAA, ADR-0028). O jogo tem DOIS caminhos de texto e por isso dois mecanismos, que não
-   são redundância: o `disp()` do main.js cobre o que a PIXI desenha na canvas, e esta regra cobre o que o
-   navegador desenha no DOM — menus, HUD, legendas. O botão só ligava o primeiro, então a criança escolhia
-   "maiúsculas" e os menus continuavam mistos.
-   `text-transform` e NÃO transformar o texto: o conteúdo acessível fica intacto, e um leitor de tela não passa
-   a soletrar letra por letra, que é o que ALL CAPS de verdade provoca em NVDA/JAWS. */
-/* Alternativas do quiz (segundo consumidor): altura mínima em MILÍMETROS REAIS, calculada por
-   `input/touch.padPxPerMm` — WCAG 2.5.5 / GAG. O valor chega em `--quiz-alt-min`. */
-.quiz-alt{min-height:var(--quiz-alt-min,44px);display:block;width:100%;margin:.25rem 0}
-.quiz-alts{display:flex;flex-direction:column;gap:.25rem}
+/* CAPITAL LETTERS (the AAC menu, ADR-0028). What a game draws on the canvas is the game's to capitalise; this rule covers
+   what the browser draws in the DOM — menus, HUD, captions. `createGame` writes `data-letras` on the root (ADR-0149 §1).
+   `text-transform` and NOT transforming the text: the accessible content stays intact, and a screen reader does not start
+   spelling letter by letter, which is what real ALL CAPS causes in NVDA/JAWS. */
+/* Quiz options take the ENGINE's target floor (ADR-0163 rule 2): 44 px at 640×360, growing with the scale. They had
+   9 mm computed by the quiz (54 px on a desktop), and four of them pushed the last one out of a 360 px region. */
+.quiz-alt{min-height:var(--alvo-min,44px);display:block;width:100%;margin:0;padding:calc(var(--ui-fs,16px) * .25) calc(var(--ui-fs,16px) * .5)} /* the list gap spaces them (#160); padding in `--ui-fs`, so a larger face grows the text only (#172) */
+/* 📏 .25/.5 and not .4/.9 since the edge margin (interface log 2026-09-26): with 16 px less width and a HUD row 4 px taller, the
+   quiz's own questions ended under the row at 640×360 (quiz-bench-layout); the 44 px floor is `min-height`, untouched. */
+/* the marked option is not colour alone either (ADR-0159 rule 10): the same base stripe as an icon switched on */
+.quiz-alt.is-on{box-shadow:inset 0 0 0 3px var(--accent-ink)} /* a ring, not a bottom strip: the strip left the fill looking shifted up (#166) */
+/* FIVE OPTIONS IN THREE COLUMNS — «1 2 3» over «4 5», read left to right (`quiz-round.OPTION_COLUMNS`, written as `--quiz-cols`).
+   📏 In one column the fifth ended under the HUD row at 640×360, and in two a two-line statement with its explanation did. */
+.quiz-alts{display:grid;grid-template-columns:repeat(var(--quiz-cols,3),minmax(0,1fr));gap:calc(.25rem * var(--espaco-fixo,1))}
+/* An option already tried is out: struck through as well as dimmed, so it is not told by colour alone (WCAG 1.4.1); an inactive
+   control is outside the contrast minimum (WCAG 1.4.3). The answer to COPY (ADR-0049 §6) carries a mark before its words. */
+.quiz-alt.is-off{opacity:.55;text-decoration:line-through;cursor:default}
+.quiz-alt.is-answer{outline:3px solid var(--accent);outline-offset:2px}
+.quiz-alt.is-answer::before{content:"➜ "}
+/* The explanation after the third wrong attempt, and the copy line: under the statement, at the text size, not bold. While it
+   shows, the statement comes down to the text size too: 📏 a two-line statement at its heading size, a three-line explanation
+   and two rows of options ended under the HUD row at 640×360 (quiz-bench-layout). */
+.quiz-note{margin:0 0 calc(.25rem * var(--espaco-fixo,1));line-height:1.25;font-weight:400}
+.quiz-app:has(.quiz-note) .quiz-pergunta{font-size:1em}
+/* THE START SCREEN (the Dev: «Tela inicial para escolher a habilidade via sigla da BNCC»): each stage's name over a grid of
+   `--quiz-cols` codes (`quiz-round.SKILL_COLUMNS`), the engine's target size; a code never overflows its button. */
+.quiz-stage{margin:0}
+.quiz-stage-name{margin:0;font-size:1em;line-height:1.25}
+.quiz-skills{display:grid;grid-template-columns:repeat(var(--quiz-cols,5),minmax(0,1fr));gap:calc(.25rem * var(--espaco-fixo,1));margin:0 0 calc(.25rem * var(--espaco-fixo,1))}
+.quiz-skill{min-height:var(--alvo-min,44px);margin:0;padding:calc(var(--ui-fs,16px) * .3);overflow-wrap:anywhere;line-height:1.15}
+.quiz-skill.is-on{box-shadow:inset 0 0 0 3px var(--accent-ink)}
 :root[data-letras="upper"] body,
 :root[data-letras="upper"] button,
 :root[data-letras="upper"] select,
 :root[data-letras="upper"] option,
 :root[data-letras="upper"] input,
 :root[data-letras="upper"] textarea{text-transform:uppercase}
-/* Os controles de formulário estão na lista porque a folha do NAVEGADOR lhes impõe `text-transform:none`, e
-   `none` numa regra do UA vence a herança. Sem eles a caixa alta pegava no texto das telas e falhava em cada
-   BOTÃO — que é justamente onde os rótulos dos menus moram. Foi o que o Dev viu: "não torna todas as letras
-   do menu maiúsculas". */
-/* menus nunca ultrapassam a tela: limitados à altura do viewport e roláveis (rodapé de ações fica fixo embaixo) */
+/* The form controls are on the list because the BROWSER's stylesheet imposes `text-transform:none` on them, and `none`
+   in a UA rule beats inheritance. Without them the capitals took the screens' text and failed on every BUTTON — which
+   is exactly where the menus' labels live. It is what the Dev saw: «não torna todas as letras do menu maiúsculas». */
+/* menus never overflow the screen: limited to the viewport's height and scrollable (the actions footer stays fixed at the bottom) */
 .overlay__card{background:var(--panel);border:3px solid var(--accent);border-radius:12px;padding:1.5rem;max-width:420px;width:100%;text-align:center;font-size:var(--ui-fs,16px);
-  max-height:92dvh;overflow-y:auto;overscroll-behavior:contain} /* base = --ui-fs (16 mín, escala com o canvas); internos em em */
+  max-height:92dvh;overflow-y:auto;overscroll-behavior:contain} /* base = --ui-fs (16 min, scales with the canvas); inner sizes in em */
 .overlay__card h2{margin-top:0}
+/* ADR-0158: «Voltar» is the panel's item 1 — a full-width row above the list, not a pill at the bottom. */
+.overlay__back{display:flex;align-items:center;width:100%;margin:0 0 .45rem;text-align:left;border-radius:8px}
+/* ADR-0167: a panel's stops draw no number; «Voltar»'s glyph stays, out of the accessible name (ADR-0159 rule 12). */
+.overlay__card button[data-glifo]::before{content:attr(data-glifo) / "";margin-inline-end:.5em}
 .topbar__right{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
 .title-card{text-align:center}
-.title-big{font-size:2rem;margin:.2rem 0;color:var(--accent)}
+.title-big{font-size:2em;margin:.2rem 0;color:var(--accent)}
 .title-by{color:var(--ink-soft);margin:.2rem 0 1rem}
-.title-card .btn{margin-top:.4rem;font-size:1.1rem;padding:.6em 1.6em}
+.title-card .btn{margin-top:.4rem;font-size:1.1em;padding:.6em 1.6em}
 .overlay__actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem;justify-content:flex-end;
   position:sticky;bottom:-1.5rem;background:var(--panel);padding:.6rem 0 1.5rem;margin-bottom:-1.5rem}
-.opt-hint{color:var(--ink-soft);font-size:.9em;margin:.2rem 0 .8rem}
-.panel-sub{text-align:left;font-size:1rem;margin:1rem 0 .4rem;border-bottom:1px solid var(--accent);padding-bottom:.2rem}
+.opt-hint{color:var(--ink-soft);font-size:1em;margin:.2rem 0 .8rem}
+.panel-sub{text-align:left;font-size:1em;margin:1rem 0 .4rem;border-bottom:1px solid var(--accent);padding-bottom:.2rem}
 .panel-sub:first-of-type{margin-top:.4rem}
-.panel-sub__tag{color:var(--ink-soft);font-size:.78em;font-weight:400}
-.vol{width:140px;max-width:45%;accent-color:var(--accent);height:1.5rem;cursor:pointer} /* barra de volume (range) */
-/* Caixas de seleção com a IDENTIDADE do jogo: fonte escolhida, cores e tamanho (não o estilo do SO) */
+.panel-sub__tag{color:var(--ink-soft);font-size:1em;font-weight:400}
+.vol{width:140px;max-width:45%;accent-color:var(--accent);height:1.5rem;cursor:pointer} /* the volume bar (range) */
+/* Select boxes with the game's IDENTITY: the chosen face, colours and size (not the OS style) */
 select.vol, .overlay__card select, .ctrl-col select{
-  font-family:var(--font);font-size:.95em;font-weight:600;color:var(--ink);
-  width:auto;max-width:100%;height:auto;min-height:var(--tap);
+  font-family:var(--font);font-size:1em;font-weight:600;color:var(--ink);
+  width:auto;max-width:100%;height:auto;min-height:var(--alvo-min,44px);
   background:#0e1326;border:2px solid var(--ink-soft);border-radius:8px;
   padding:.35em 2em .35em .7em;cursor:pointer;
   -webkit-appearance:none;-moz-appearance:none;appearance:none;
@@ -580,52 +942,74 @@ select.vol, .overlay__card select, .ctrl-col select{
 select.vol:focus, .overlay__card select:focus{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
 .overlay__card select option{background:#0e1326;color:var(--ink);font-weight:600}
 .ctrl-players{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin-bottom:.7rem}
-.ctrl-players .mode-btn{padding:.3em .7em;font-size:.95rem}
+.ctrl-players .mode-btn{padding:.3em .7em;font-size:1em}
 .ctrl-list{display:flex;flex-direction:column;gap:.45rem;text-align:left}
 .ctrl-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:#0e1326;border:2px solid var(--ink-soft);border-radius:8px;padding:.4rem .6rem}
-/* ADR-0029 — SAIU DO PADRÃO. Dois canais visuais no mesmo lugar: a COR da moldura e a FORMA, que é uma
-   moldura DUPLA (borda, respiro, anel). O anel transparente de 2px revela o fundo do próprio elemento e é o
-   que cria o respiro; sem ele os dois anéis colariam e viraria só uma borda mais grossa — uma diferença de
-   espessura que ninguém percebe sem ter o não-marcado ao lado para comparar. A contagem de anéis sobrevive a
-   escala de cinza, a daltonismo e a toda paleta do jogo, porque não é uma matiz. */
+/* ADR-0029 — LEFT THE DEFAULT. Two visual channels in the same place: the frame's COLOUR and its SHAPE, which is a
+   DOUBLE frame (border, gap, ring). The transparent 2px ring reveals the element's own background and is what makes
+   the gap; without it the two rings would touch and become just a thicker border — a difference in thickness nobody
+   notices without the unmarked one beside it for comparison. The ring count survives greyscale, colour-vision
+   deficiency and every palette of the game, because it is not a hue. */
 .is-changed{border-color:var(--changed)!important;box-shadow:inset 0 0 0 2px transparent,inset 0 0 0 4px var(--changed)}
-/* A marca CEDE ao foco: perder o lugar é pior que perder uma dica. */
+/* The mark YIELDS to the focus: losing your place is worse than losing a hint. */
 .is-changed:focus-visible,.is-changed:focus{box-shadow:none}
 .ctrl-row kbd{background:var(--ink);color:var(--bg);border-radius:5px;padding:.05em .45em;font-weight:700}
-.ctrl-row.row-off{opacity:.42} /* item desabilitado (ex.: modo de teclado indisponível) = só cinza claro, sem texto extra */
+.ctrl-row.row-off{opacity:.42} /* a disabled item (e.g. an unavailable keyboard mode) = light grey only, no extra text */
 .ctrl-row .mode-btn[disabled]{cursor:not-allowed;opacity:.7}
 .ctrl-row.ctrl-col{flex-direction:column;align-items:stretch;gap:.4rem}
 .ctrl-row.ctrl-col label{font-weight:700}
 .pad-presets{display:flex;gap:.5rem;flex-wrap:wrap}
-.pad-tag{font-size:.8rem;font-weight:700;padding:.05em .5em;border-radius:999px;background:#20304e;color:#bcd}
+.pad-tag{font-size:1em;font-weight:700;padding:.05em .5em;border-radius:999px;background:#20304e;color:#bcd}
 .pad-tag[data-who="crianca"]{background:#2a4a2e;color:#bfe9c2}
 .pad-tag[data-who="adulto"]{background:#2a3a5e;color:#c3d4f0}
-.pad-warn{font-size:.85rem;color:#ffdf9e;background:#3a2e12;border:1px solid #6a5220;border-radius:8px;padding:.45rem .6rem}
-.ctrl-col input[type=range]{width:100%;min-height:var(--tap);accent-color:var(--accent)}
+.pad-warn{font-size:1em;color:#ffdf9e;background:#3a2e12;border:1px solid #6a5220;border-radius:8px;padding:.45rem .6rem}
+.ctrl-col input[type=range]{width:100%;min-height:var(--alvo-min,44px);accent-color:var(--accent)}
 
-/* E13: controles de toque (mobile) — overlay nas bordas inferiores, não cobre o centro */
-.touch{position:absolute;inset:auto 0 0 0;z-index:14;display:flex;justify-content:space-between;align-items:flex-end;gap:8px;padding:6px 8px;pointer-events:none}
-.touch-pad{display:flex;gap:8px;pointer-events:auto}
-.touch-btn{width:56px;height:56px;min-width:var(--tap);min-height:var(--tap);border-radius:12px;border:2px solid rgba(255,255,255,.75);background:rgba(13,17,32,.92);color:#fff;font-size:1.4rem;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}
+/* touch controls (mobile) — an overlay on the bottom edges, not covering the centre */
+.touch{position:absolute;inset:0;z-index:14;display:flex;justify-content:space-between;align-items:flex-end;gap:8px;padding:var(--margem-borda,8px);pointer-events:none}
+/* ADR-0160: the shoulders in the TOP corners of the region, the trigger (2) above the bumper (1). `.touch` covers the whole
+   region since then (`inset:0`, still `pointer-events:none`) so a corner is the region's corner, not the pad strip's. */
+.touch-ombros{position:absolute;top:var(--margem-borda,8px);display:flex;flex-direction:column;gap:6px;pointer-events:auto}
+.touch-ombros--esq{left:var(--margem-borda,8px)}
+.touch-ombros--dir{right:var(--margem-borda,8px)}
+/* ADR-0160: the action buttons sit by ACTION NUMBER — 1 and 4 on top, 2 and 3 below — whatever slot fires them.
+   `margin-left:auto` keeps the block on the right when the game names no direction (ADR-0162). */
+.touch-pad{display:grid;grid-template-areas:"a1 a4" "a2 a3";gap:8px;margin-left:auto;pointer-events:auto}
+.touch-btn[data-acao="action1"]{grid-area:a1}
+.touch-btn[data-acao="action4"]{grid-area:a4}
+.touch-btn[data-acao="action2"]{grid-area:a2}
+.touch-btn[data-acao="action3"]{grid-area:a3}
+.touch-btn{width:56px;height:56px;min-width:var(--alvo-min,44px);min-height:var(--alvo-min,44px);border-radius:12px;border:2px solid rgba(255,255,255,.75);background:rgba(13,17,32,.92);color:#fff;font-size:1.4em;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}
 .touch-btn:active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
 .touch-jump{background:rgba(18,74,52,.94)}
-/* Botões de ação em LOSANGO (4 bolhas: 0 baixo, 1 direita, 2 esquerda, 3 cima) + START pílula */
+/* Action buttons in a DIAMOND (4 bubbles: 0 bottom, 1 right, 2 left, 3 top) + a START pill */
 .touch-actions{align-items:center}
-/* Tamanho FÍSICO (mm), não px: --pad-btn e --pad-diam são calculados no JS a partir de mm reais
-   (referência: iPhone 16 ocupando a tela toda). Config em A12e motora. Fallback antes do JS rodar. */
+/* PHYSICAL size (mm), not px: --pad-btn and --pad-diam are computed by `input/touch` from real millimetres
+   (reference: an iPhone 16 filling the screen). These are the fallbacks before the JS runs. */
 .pad-diamond{position:relative;width:var(--pad-diam,182px);height:var(--pad-diam,182px);pointer-events:none}
 .pad-b{position:absolute;width:var(--pad-btn,66px);height:var(--pad-btn,66px);border-radius:50%;font-size:calc(var(--pad-btn,66px)*.42);font-weight:800;pointer-events:auto;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
 .pad-top{top:0;left:50%;transform:translateX(-50%)}
 .pad-bottom{bottom:0;left:50%;transform:translateX(-50%)}
 .pad-left{left:0;top:50%;transform:translateY(-50%)}
 .pad-right{right:0;top:50%;transform:translateY(-50%)}
-.touch-start{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);min-height:calc(var(--pad-btn,66px)*.7);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;pointer-events:auto;border-radius:999px;padding:0 22px;font-weight:800;font-size:.82rem;letter-spacing:.08em;background:rgba(13,17,32,.92);color:#fff;border:2px solid rgba(255,255,255,.75);cursor:pointer;z-index:15}
+/* `width:auto`: the pill is also a `.touch-btn`, whose fixed 56px cut the word — measured in the dist, «START» with 66px
+   of text in a 56px button at the cursive hand's 1.25 scale (ADR-0149). The pill grows with the word, and the floor is the target. */
+/* The two system pills, SELECT and START, in a container at the centre (ADR-0155). Inside it they no longer place
+   themselves: the container puts them side by side, and each keeps the width of its text. */
+/* 🔴 WITH A PANEL OPEN, THE PAD SITS ABOVE IT (ADR-0157): its directional is what moves in the panel. The panel's veil
+   (`#game-region .overlay`, 60) covered the pad (14), and a tap on an arrow landed on the veil. `--z-menu-max` is the top
+   of the menu band, and that is the pad's role while a menu is open — a slot and not a new literal. */
+#game-region:has(.overlay:not([hidden])) .touch{z-index:var(--z-menu-max)}
+/* the two pills stand the edge margin off the bottom (interface log 2026-09-26) — alone or side by side */
+.touch-sistema{position:absolute;left:50%;bottom:var(--margem-borda,8px);transform:translateX(-50%);display:flex;gap:10px;pointer-events:none}
+.touch-sistema .touch-start,.touch-sistema .touch-select{position:static;transform:none}
+.touch-start,.touch-select{position:absolute;left:50%;bottom:var(--margem-borda,8px);transform:translateX(-50%);width:auto;min-width:var(--alvo-min,44px);white-space:nowrap;min-height:calc(var(--pad-btn,66px)*.7);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;pointer-events:auto;border-radius:999px;padding:0 22px;font-weight:800;font-size:1em;letter-spacing:var(--ls);background:rgba(13,17,32,.92);color:#fff;border:2px solid rgba(255,255,255,.75);cursor:pointer;z-index:15}
 .touch-start:active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
-/* joystick digital: base (círculo maior) + manopla (círculo menor) */
-/* Direcional (analógico/"alavanca"): base = superfície + deslocamento; manopla = superfície de contato. Ambos em mm (JS). */
+/* digital joystick: base (larger circle) + knob (smaller circle) */
+/* Directional (analogue/"lever"): base = surface + travel; knob = contact surface. Both in mm (JS). */
 .touch-stick{position:relative;width:var(--stick-base,124px);height:var(--stick-base,124px);border-radius:50%;border:3px solid rgba(255,255,255,.7);background:rgba(13,17,32,.85);touch-action:none;pointer-events:auto;-webkit-user-select:none;user-select:none}
 .touch-knob{position:absolute;left:50%;top:50%;width:var(--stick-knob,58px);height:var(--stick-knob,58px);margin:calc(var(--stick-knob,58px)/-2) 0 0 calc(var(--stick-knob,58px)/-2);border-radius:50%;background:rgba(255,255,255,.88);box-shadow:0 0 0 2px rgba(0,0,0,.45);transition:transform .04s linear;pointer-events:none}
-/* D-pad em cruz (estilo alternativo): 4 braços + miolo; tamanho do braço em mm (JS → --dpad-arm-l/w, --dpad-span) */
+/* Cross D-pad (an alternative style): 4 arms + a core; the arm's size in mm (JS → --dpad-arm-l/w, --dpad-span) */
 .touch-cross{position:relative;width:var(--dpad-span,120px);height:var(--dpad-span,120px);touch-action:none;pointer-events:auto;-webkit-user-select:none;user-select:none}
 .touch-cross[hidden]{display:none}
 .dpad-arm{position:absolute;display:flex;align-items:center;justify-content:center;background:rgba(13,17,32,.92);border:2px solid rgba(255,255,255,.75);color:rgba(255,255,255,.85);font-size:calc(var(--dpad-arm-w,34px)*.5);line-height:1;pointer-events:none}
@@ -641,4 +1025,4 @@ select.vol:focus, .overlay__card select:focus{outline:3px solid var(--accent);ou
 @media (prefers-reduced-motion: reduce){ .touch-knob{transition:none} }
 @media (prefers-contrast: more){ .touch-btn{background:#000;border-color:#fff} .touch-btn:active{background:#fff;color:#000} .touch-stick{background:#000;border-color:#fff} .touch-knob{background:#fff} }
 
-@media (max-width:560px){.title{font-size:1.1rem}.hud{gap:1rem}}
+@media (max-width:560px){.title{font-size:1.1em}.hud{gap:1rem}}