/* SPDX-License-Identifier: GPL-3.0-or-later */
:root{
  --bg:#0b1020; --panel:#1b2440; --ink:#f5f8ff; --ink-soft:#cdd6f2;
  --accent:#ffd23f; --accent-ink:#1a1400; --focus:#ffd23f; --good:#34e29b;
  --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 */
}
/* 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'), url('../vendor/fonts/NotoColorEmoji.woff2') format('woff2'); 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}
#tm-mat,#tm-fr{display:grid;grid-template-columns:1fr 1fr;gap:.35em;width:22em}   /* muitos itens → 2 colunas (nada fora do canvas) */
#tm-mat .ghost,#tm-mat .tm-desc,#tm-mat .tm-title,#tm-fr .ghost,#tm-fr .tm-desc,#tm-fr .tm-title{grid-column:1/-1}
/* Letramento: 2 colunas + botões LARGOS p/ o subtítulo caber em UMA linha (José) */
#tm-alf{display:grid;grid-template-columns:1fr 1fr;gap:.4em;width:34em}
#tm-alf .ghost,#tm-alf .tm-title,#tm-alf .tm-desc{grid-column:1/-1}
/* Fração: 11 itens → compacto p/ CABER no quadro lógico 180px (k=2). Mais largo = rótulos longos em 2 linhas, não 3. */
#tm-fr{width:31em;gap:.25em}
#tm-fr .title-btn{min-height:1.85em;padding:.2em .5em;font-size:.82em;line-height:1.05}
#tm-fr .tm-title{font-size:.95em;margin:0}
/* Notações lado a lado (5 símbolos numa linha) → ocupam menos espaço */
#tm-fr .frac-nots{grid-column:1/-1;display:flex;gap:.25em;justify-content:center}
/* Toggle de notação: DESATIVADO = azul-escuro + borda BRANCA + texto branco; ATIVADO = amarelo + borda preta + texto preto */
#tm-fr .frac-nots .title-btn{flex:1;min-width:0;padding:.25em .15em;font-size:1em;background:#16233f;color:#fff;border-color:#fff;box-shadow:none}
#tm-fr .frac-nots .title-btn.tab-on{background:var(--accent);color:var(--accent-ink);border-color:#0d0d1a}
#tm-fr .frac-nots .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}
.tab-row{display:flex;gap:.35em;justify-content:center}
.tab-row .title-btn{min-width:2.2em;padding:.4em 0;flex:1}
/* 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){
  :root{ --bg:#000; --panel:#000; --ink:#fff; --ink-soft:#fff; --accent:#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-coins,.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:rgba(4,7,15,.72);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:rgba(4,7,15,.72);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}
.screen-pause .pm-btn{padding:.3rem .5rem}
.screen-pause .pause-icons{margin:.04rem 0 .16rem;gap:.3rem}
.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}
.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}
.pause-card{background:#0e1626;border:2px solid #ffd23f;border-radius:14px;padding:.8rem 1rem;max-width:88%;max-height:92%;overflow:auto;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.pause-card h2{margin:.1rem 0 .6rem;color:#ffd23f}
.pause-menu{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.pm-btn{background:#1a2740;color:#eaf2f8;border:1px solid #3a4a6a;border-radius:10px;padding:.5rem .6rem;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}
.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}
.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}
/* 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}
.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}}