@the-inclusionist/engine 6.36.1

package/app/css/style.css

@@ -0,0 +1,622 @@
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
+:root{
+  --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. */
+  --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) */
+  --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 */
+  --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. */
+  --z-hud:24000;
+  --z-touch-controls:25000;
+  --z-captions:26000;
+  --z-dialogue:27000;
+  --z-game-msg:28000;
+  --z-modal-scrim:29000;
+  --z-menu:30000;
+  --z-menu-max:39999;
+  --z-transition:40000;
+  --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 */
+: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 */
+:root[data-fonte="custom"]{ --font:var(--font-custom,'Atkinson Hyperlegible'),var(--font-fallback); }
+/* Menu Tipografia: caixa branca de pré-visualização (pangrama), escrita escura */
+.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-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}
+.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É */
+.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-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. */
+#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. */
+#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. */
+#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). */
+#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 .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. */
+#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) */
+@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. */
+#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}
+.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}
+.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}
+#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) */
+.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) */
+.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-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). */
+  :root{ --bg:#000; --panel:#000; --ink:#fff; --ink-soft:#fff; --accent:#ffe600; --changed:#ffe600; }
+}
+*{box-sizing:border-box}
+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) */
+.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) */
+.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. */
+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}
+.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:100;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}
+
+.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--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). */
+.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}
+.vphud-quit[hidden]{display:none}
+/* PAUSA dentro do canvas (tela = canvas) — sobreposta ao #game-region, não à página */
+.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) */
+.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}
+.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. */
+.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-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-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. */
+.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.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. */
+.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-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). */
+.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), e este projeto trata piso como piso. `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. */
+.pm-btn{background:#1a2740;color:#eaf2f8;border:1px solid #3a4a6a;border-radius:10px;padding:.5rem .8rem;min-height:44px;display:flex;align-items:center;justify-content:center;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
+.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}
+.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)}
+.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 */
+.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.
+
+   `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.
+
+   `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. */
+#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.
+
+   MEDIDO, não estimado (WCAG 1.4.3, razão sobre sRGB linearizado). O que falhava, e só no nível 7:1:
+
+     · 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.
+
+   Duas mudanças, e nenhuma inventa cor:
+
+   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.
+
+   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.
+
+   ⚠️ 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.) */
+#dom-layer.hc .pm-btn{background:var(--panel-btn)}
+#dom-layer.hc .pm-btn:hover,
+#dom-layer.hc .pm-btn:focus,
+#dom-layer.hc .pm-btn.pm-sel{background:var(--accent);color:var(--accent-ink);border-color:var(--accent-ink)}
+#dom-layer #viz-indicator,#dom-layer .overlay,#dom-layer .quiz,#dom-layer .pause-incanvas{pointer-events:auto}
+
+.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. */
+#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. */
+.game-region[data-incl-parou]::after{
+  content:attr(data-incl-parou);
+  position:absolute;inset:auto 0 0 0;z-index:60;
+  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;
+  text-align:center;text-wrap:balance
+}
+.pixi-mount,.pixi-mount canvas{display:block;width:100%;height:100%}
+/* pixel-art nítida ao escalar */
+.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. */
+.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é */
+.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 */
+@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{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}
+.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 */
+.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.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). */
+.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)}
+.mode-btn.switch[aria-pressed="true"]::after{left:calc(var(--sw-w) - (var(--sw-h) - 10px) - 5px);background:var(--accent-ink)}
+.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) */
+.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 */
+.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) */
+.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-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.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-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}
+.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.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 */
+.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}
+.bdot{width:10px;height:10px;border-radius:50%;background:#2a2f45}
+.bdot.on{background:var(--accent)}
+.bcell-l{font-weight:800}
+@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}
+.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;
+  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 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--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. */
+#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)}
+#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 */
+
+/* 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 */
+#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) */
+#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 */
+    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 */
+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}
+: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) */
+.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 */
+.overlay__card h2{margin-top:0}
+.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-by{color:var(--ink-soft);margin:.2rem 0 1rem}
+.title-card .btn{margin-top:.4rem;font-size:1.1rem;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}
+.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) */
+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);
+  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;
+  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23ffd23f' stroke-width='2' stroke-linecap='round'/></svg>");
+  background-repeat:no-repeat;background-position:right .7em center}
+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-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. */
+.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. */
+.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 .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[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)}
+
+/* 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-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 */
+.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. */
+.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}
+.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). */
+.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) */
+.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}
+.dpad-arm.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
+.dpad-up,.dpad-down{width:var(--dpad-arm-w,34px);height:var(--dpad-arm-l,42px);left:50%;transform:translateX(-50%)}
+.dpad-left,.dpad-right{height:var(--dpad-arm-w,34px);width:var(--dpad-arm-l,42px);top:50%;transform:translateY(-50%)}
+.dpad-up{top:0;border-radius:8px 8px 0 0;border-bottom:none}
+.dpad-down{bottom:0;border-radius:0 0 8px 8px;border-top:none}
+.dpad-left{left:0;border-radius:8px 0 0 8px;border-right:none}
+.dpad-right{right:0;border-radius:0 8px 8px 0;border-left:none}
+.dpad-center{position:absolute;left:50%;top:50%;width:var(--dpad-arm-w,34px);height:var(--dpad-arm-w,34px);margin:calc(var(--dpad-arm-w,34px)/-2) 0 0 calc(var(--dpad-arm-w,34px)/-2);background:rgba(13,17,32,.92);border:2px solid rgba(255,255,255,.4);pointer-events:none}
+@media (prefers-contrast: more){ .touch-cross .dpad-arm,.dpad-center{background:#000;border-color:#fff} .dpad-arm.on{background:#fff;color:#000} }
+@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}}