/**
 * Lingo Quiz — folha de estilo.
 *
 * A PERGUNTA É O ELEMENTO PRINCIPAL, e esta folha existe para garantir isso em telas que
 * vão de 320 px a um monitor largo, em pé e deitado. Todo o resto — a barra de cima, o
 * placar, o relógio — foi reduzido ao menor tamanho em que ainda se lê, porque a
 * simplicidade é uma característica do produto e não uma economia de trabalho.
 *
 * COMO O TAMANHO DO TEXTO FUNCIONA. `data-text` no <html> muda a raiz em `font-size`, e o
 * resto da folha é escrito em `rem`. Uma preferência, uma linha, e toda a interface
 * acompanha — inclusive espaçamentos e alturas de botão. E isso sozinho não basta: numa
 * tela estreita o cabeçalho estoura a largura antes de o texto ficar grande de verdade,
 * então todo agrupamento tem `flex-wrap`, todo modal rola no eixo vertical, e as caixas que
 * precisam caber usam `min-width: 0` — sem ele um item de flex se recusa a encolher abaixo
 * do próprio conteúdo e vaza para fora em silêncio, que é o defeito mais difícil de ver
 * numa captura de tela.
 *
 * A ORDEM DAS REGRAS IMPORTA E NÃO É ACIDENTE. `@media` não acrescenta especificidade: uma
 * regra dentro de media query escrita ANTES da regra que ela deveria sobrescrever
 * simplesmente perde, em silêncio, e a folha continua válida. Todo bloco responsivo desta
 * folha fica DEPOIS do bloco que ele ajusta.
 *
 * `[hidden]` PRECISA GANHAR DE `display:flex`. Sem `[hidden]{display:none!important}`,
 * metade da interface fica visível quando o jogo a esconde, porque a regra de layout do
 * componente é mais específica que o atributo.
 *
 * CERTO E ERRADO NÃO SE DISTINGUEM POR COR (§40). A opção certa ganha um ícone de visto e a
 * errada um ícone de xis, e os dois têm forma própria; a cor vem por cima como reforço, e
 * em alto contraste ela some por completo sem que o jogo perca nada.
 */

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --scale: 1;
  font-size: calc(16px * var(--scale));

  --accent: #6b8afd;
  --accent-soft: #93a9ff;
  --gold: #f5a524;
  --teal: #3ecfc0;
  --good: #35c46b;
  --bad: #e8604f;

  /**
   * AS CORES DOS TRÊS GRUPOS DO CEFR, e elas foram MEDIDAS como o resto da paleta.
   *
   * Verde para Básico, âmbar para Intermediário, coral para Avançado. Não são o verde, o
   * amarelo e o vermelho do semáforo de propósito: aquele trio diz "pode, cuidado, pare", e
   * aqui nada está errado nem proibido — o Avançado não é um aviso, é um degrau. Os tons
   * são dessaturados o bastante para conviver com o azul da interface sem brigar com ele.
   *
   * Cada grupo tem três valores, e os três têm trabalho diferente:
   *   --lvl-*        a cor cheia, do nível que está SELECIONADO. Também é usada em texto.
   *   --lvl-*-soft   a mesma cor recuada, do nível IRMÃO: mesmo grupo, não escolhido.
   *   --lvl-*-tint   a superfície tênue, para pílula e cartão marcados.
   *
   * Os números ao lado são o contraste no pior dos quatro painéis do tema. A cor cheia
   * passa dos 4,5 que a WCAG pede para texto pequeno; a recuada passa dos 3 que um elemento
   * gráfico exige, porque ela nunca é texto. Mexer aqui sem rodar `acess.mjs` desfaz a conta.
   */
  --lvl-basic: #5fd39b;       /* 7,04 */
  --lvl-basic-soft: #3d9c74;  /* 4,40 */
  --lvl-basic-tint: #12291f;
  --lvl-inter: #e8b84b;       /* 7,11 */
  --lvl-inter-soft: #a8892f;  /* 4,45 */
  --lvl-inter-tint: #2a2314;
  --lvl-adv: #ef8074;         /* 5,00 */
  --lvl-adv-soft: #c06b60;    /* 3,91 */
  --lvl-adv-tint: #2b1a18;

  --bg: #0b1220;
  --bg-deep: #070c16;
  --panel: #141d31;
  --panel-2: #1b2740;
  --panel-3: #22304e;
  --line: #2a3855;
  --ink: #eaeffb;
  --ink-dim: #a8b6d4;
  --ink-mute: #7d8dae;
  --shadow: 0 1.25rem 3rem rgba(2, 6, 16, .55);
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --radius-sm: .625rem;

  /* Alvo de toque. `max()` e não `2.75rem` puro: com "texto pequeno" a raiz encolhe para
     14 px e 2,75 rem viram 38,7 px — abaixo do mínimo de 44 px que qualquer diretriz de
     toque exige. Reduzir o texto é uma preferência de leitura; encolher o botão junto
     transforma uma preferência numa barreira. */
  --tap: max(2.75rem, 44px);
  --speed: .2s;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

html[data-text="small"]  { --scale: .88; }
html[data-text="normal"] { --scale: 1; }
html[data-text="large"]  { --scale: 1.18; }
html[data-text="huge"]   { --scale: 1.38; }

/**
 * O TEMA CLARO, com o contraste MEDIDO e não estimado.
 *
 * Os três tons abaixo foram escolhidos por conta, e não por gosto: a primeira versão usava
 * `#6b7c9b` no texto discreto e `#b7690a` no dourado, e os dois davam 3,7 contra o painel
 * mais claro — abaixo dos 4,5 que a WCAG pede para texto pequeno, e justamente nos rótulos
 * que já são pequenos de propósito (o "Pergunta 3 de 10" da barra de cima, a pílula do
 * nível, o título da pergunta). No tema escuro os mesmos tokens passavam com folga, que é o
 * jeito mais comum de um tema claro sair com contraste ruim: ele é conferido no escuro.
 *
 * A varredura mede cada um deles contra o fundo que de fato está atrás dele, nos quatro
 * painéis, e é ela que guarda estes valores. Mexer aqui sem rodar `acess.mjs` desfaz a
 * conta.
 */
html[data-theme="light"] {
  --bg: #f2f5f9;
  --bg-deep: #e4eaf3;
  --panel: #ffffff;
  --panel-2: #f6f8fc;
  --panel-3: #eef2f8;
  --line: #ccd6e6;
  --ink: #101a2e;
  --ink-dim: #46587a;
  --ink-mute: #586882;   /* 5,03 no pior painel; era 3,75 */
  --accent: #3355e0;
  --accent-soft: #4f74f5;
  --gold: #985604;       /* 5,10 no pior painel; era 3,71 */
  --teal: #0c7a72;       /* 4,62 no pior painel; era 3,62 */
  --good: #1a8f4c;
  --bad: #c33a28;
  --shadow: 0 1.25rem 3rem rgba(16, 32, 64, .14);

  /* As mesmas três cores, refeitas para fundo claro. Um verde que passa no escuro dá 3,6 no
     claro, e é o erro que este bloco existe para não cometer duas vezes. */
  --lvl-basic: #157a4f;       /* 4,76 */
  --lvl-basic-soft: #2f9a6e;  /* 3,22 */
  --lvl-basic-tint: #e6f6ee;
  --lvl-inter: #8a5d00;       /* 5,13 */
  --lvl-inter-soft: #a67d12;  /* 3,45 */
  --lvl-inter-tint: #faf0d8;
  --lvl-adv: #c0392b;         /* 4,84 */
  --lvl-adv-soft: #c85a4c;    /* 3,82 */
  --lvl-adv-tint: #fdeae7;
}

/* Alto contraste: preto e branco puros, bordas sempre visíveis, nada translúcido. */
html[data-contrast="high"] {
  --bg: #000; --bg-deep: #000; --panel: #000; --panel-2: #0a0a0a; --panel-3: #141414;
  --line: #fff; --ink: #fff; --ink-dim: #fff; --ink-mute: #e6e6e6;
  --accent: #7fa6ff; --accent-soft: #a8c2ff; --gold: #ffd24a; --teal: #6cf3e6;
  --good: #58f08c; --bad: #ff8a7a;
  --shadow: none;
  /* Em alto contraste as três cores viram uma só, de propósito: quem liga esta preferência
     precisa de luminância, não de matiz. O grupo continua legível pelo texto, pela altura
     da barra e pelo marcador, que é o que o §40 pede que a cor nunca carregue sozinha. */
  --lvl-basic: #fff; --lvl-basic-soft: #bdbdbd; --lvl-basic-tint: #000;
  --lvl-inter: #fff; --lvl-inter-soft: #bdbdbd; --lvl-inter-tint: #000;
  --lvl-adv: #fff; --lvl-adv-soft: #bdbdbd; --lvl-adv-tint: #000;
}
html[data-contrast="high"][data-theme="light"] {
  --bg: #fff; --bg-deep: #fff; --panel: #fff; --panel-2: #fff; --panel-3: #fff;
  --line: #000; --ink: #000; --ink-dim: #000; --ink-mute: #1a1a1a;
  --accent: #0032a0; --accent-soft: #0032a0; --gold: #7a4400; --teal: #005f58;
  --good: #0a6b2e; --bad: #a01010;
  --lvl-basic: #000; --lvl-basic-soft: #4a4a4a; --lvl-basic-tint: #fff;
  --lvl-inter: #000; --lvl-inter-soft: #4a4a4a; --lvl-inter-tint: #fff;
  --lvl-adv: #000; --lvl-adv-soft: #4a4a4a; --lvl-adv-tint: #fff;
}

html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

[hidden] { display: none !important; }

/**
 * Escondido do olho, e NÃO do leitor de tela.
 *
 * `display:none` e `visibility:hidden` tiram o elemento da árvore de acessibilidade junto
 * com a imagem, que é o oposto do que se quer aqui: a lacuna da frase é uma barra dourada
 * para quem vê e precisa ser a palavra "lacuna" para quem ouve. Sem isto, "eu não pude
 * comprar a passagem porque não tinha ___" é lido como uma frase terminada, e a pergunta
 * deixa de existir.
 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Com um modal aberto, a página de trás não rola. Sem isto, o dedo que tenta rolar o
   conteúdo do modal arrasta o menu atrás dele, e ao fechar o modal a pessoa está noutro
   lugar da tela sem ter pedido. `app.js` põe e tira este atributo. */
html[data-modal="open"], html[data-modal="open"] body { overflow: hidden; }

body {
  margin: 0;
  min-height: 100svh;
  /* A cor sólida vem ANTES do gradiente, e não é redundância: `background` com gradiente
     deixa `background-color` transparente, e aí "qual é o fundo atrás deste texto?" não
     tem resposta — nem para a régua de contraste, nem para um navegador que se recuse a
     pintar o gradiente. */
  background-color: var(--bg);
  background-image: radial-gradient(120% 100% at 50% 0%, var(--bg) 0%, var(--bg-deep) 100%);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  /* A rolagem horizontal acidental é o defeito de celular mais comum e o mais invisível
     numa captura: a página parece certa e desliza de lado ao toque. */
  overflow-x: hidden;
}

#art-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: .75rem 1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

h1, h2, h3 { margin: 0; line-height: 1.25; }
p { margin: 0; }
/**
 * O INVÓLUCRO DO ÍCONE NÃO PODE CRIAR CAIXA DE LINHA, e foi daqui que saiu a queixa de
 * "ícones descentralizados".
 *
 * `icons.js` entrega `<span data-icon="x"><svg class="ico" ...></svg></span>`, e um `<svg>`
 * `inline-block` dentro de um span de fluxo normal senta na BASELINE: a caixa do span passa
 * a ter a altura da linha mais o descender, e não a do desenho. Medido no disco da pausa: o
 * SVG tem 32 px e o span 38, então quem centraliza o span (o `grid` do disco) deixa o
 * desenho 3 px acima do centro. Três pixels não se nomeiam e se sentem.
 *
 * `inline-flex` no invólucro elimina a caixa de linha: a altura do span passa a ser a do
 * conteúdo, e o centro do span vira o centro do desenho em todo lugar do jogo de uma vez.
 * É a correção da causa, e não um `margin-top` negativo em cada lugar onde ela aparece.
 */
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
.ico { display: inline-block; vertical-align: -.125em; flex: none; }

/* ---------------------------------------------------------------- scrollbars
 *
 * §31 pede tratamento explícito, e a decisão aqui é: ELA APARECE, e é bonita.
 *
 * Esconder a barra (o `scrollbar-width: none` que virou moda) tira a única pista de que
 * existe conteúdo abaixo do corte — e num modal de configurações com quatro seções isso é
 * exatamente a informação que falta. Então ela fica: fina, arredondada, do tom da linha do
 * tema, e escurecendo ao passar o mouse.
 *
 * `scrollbar-color` cobre Firefox, que não tem os pseudoelementos; `::-webkit-scrollbar`
 * cobre Chromium e Safari. Onde nenhum dos dois existe, o navegador desenha a dele e a
 * página continua perfeitamente usável, que é o pior caso aceitável.
 *
 * A REGRA ANTES DA REGRA: barra só onde há rolagem de verdade. Todo `overflow-y: auto`
 * desta folha está num contêiner que também tem `max-height` — sem o par, `auto` cria
 * barra em elementos que nunca precisariam dela, e é assim que uma página ganha três
 * barras aninhadas.
 */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
  /* A borda transparente com `background-clip` afina o polegar sem afinar a área de
     agarre: o alvo do mouse continua com 10 px, e o desenho tem 6. */
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }
html[data-contrast="high"] *::-webkit-scrollbar-thumb { background: var(--line); border-width: 1px; }

/* ------------------------------------------------------------------ botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap); padding: .625rem 1.125rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2); color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: background var(--speed), border-color var(--speed), transform var(--speed);
  min-width: 0;
}
.btn:hover { background: var(--panel-3); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--panel-2); }
.btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-lg { min-height: max(3.25rem, 52px); font-size: 1.0625rem; padding: .75rem 1.5rem; }
.btn-sm { min-height: var(--tap); padding: .4rem .75rem; font-size: .875rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); flex: none;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-dim); cursor: pointer;
  font-size: 1.25rem; transition: background var(--speed), color var(--speed);
}
.icon-btn:hover { background: var(--panel-2); color: var(--ink); }

/* O foco é do TECLADO, e precisa ser visível contra os dois temas e o alto contraste.
   Dois anéis: um claro por dentro e a cor de destaque por fora, que é o par que sobrevive
   a fundo escuro, fundo claro e fundo preto puro. */
:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
html[data-contrast="high"] :focus-visible { outline: 3px solid var(--line); outline-offset: 3px; }

/* -------------------------------------------------------------- telas base */
.screen { max-width: 62rem; margin: 0 auto; padding: calc(1rem + var(--safe-t)) 1rem calc(2rem + var(--safe-b)); }

.note { color: var(--ink-mute); font-size: .875rem; }
.note.center { text-align: center; }
.warn {
  display: flex; align-items: center; gap: .5rem;
  color: var(--bad); font-size: .9375rem; font-weight: 600;
}
.warn.soft { color: var(--gold); }

/* ============================================================ MENU */
.setup-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 1.25rem;
  display: flex; flex-direction: column; gap: 1.5rem;
}

.brand { display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; }
.brand-mark { font-size: 2.75rem; line-height: 1; display: inline-flex; flex: none; }
.brand-text { flex: 1 1 12rem; min-width: 0; }
.brand-text h1 { font-size: 1.625rem; font-weight: 800; letter-spacing: -.02em; }
.tagline { color: var(--ink-dim); font-size: .9375rem; }
.brand-actions { display: flex; gap: .25rem; margin-left: auto; }

.setup-group { display: flex; flex-direction: column; gap: .75rem; }
.setup-head {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-mute);
}
.setup-head .ico { font-size: 1.125rem; }
.setup-group h3 { font-size: .9375rem; font-weight: 600; color: var(--ink-dim); }

/* ------------------------------------------------------------- idiomas */
.lang-pair { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
.lang-side { flex: 1 1 9rem; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.lang-arrow { color: var(--ink-mute); font-size: 1.25rem; padding-bottom: .75rem; }

/**
 * A FILEIRA DE PÍLULAS QUEBRA LINHA SEMPRE, e isso não é enfeite defensivo.
 *
 * Sem `flex-wrap`, três pílulas de idioma com "texto muito grande" numa tela de 320 px
 * somavam 87 px além da largura da janela: a página deslizava de lado ao toque, e a captura
 * de tela parecia perfeita porque o excesso ficava fora do enquadramento. `min-width: 0` na
 * pílula não resolve isso sozinho — "Português" é uma palavra só e não tem onde quebrar, e
 * o que encolhe abaixo do conteúdo é a caixa, não o texto dentro dela.
 *
 * A largura mínima é o alvo de toque, e não zero: uma pílula espremida a 20 px passaria no
 * teste de rolagem e falharia no de dedo.
 */
.pill-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.pill {
  flex: 1 1 auto; min-width: var(--tap); min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  padding: .5rem .625rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2); color: var(--ink-dim);
  font: inherit; font-weight: 600; font-size: .9375rem; cursor: pointer;
  transition: background var(--speed), color var(--speed), border-color var(--speed);
  text-align: center;
}
.pill:hover { background: var(--panel-3); color: var(--ink); }
.pill[aria-checked="true"], .pill[aria-selected="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
/* Em alto contraste a cor de fundo some, então o selecionado precisa de outra marca: uma
   borda dupla, que é forma e não cor. */
html[data-contrast="high"] .pill[aria-checked="true"],
html[data-contrast="high"] .pill[aria-selected="true"] { outline: 2px solid var(--line); outline-offset: -5px; }

/* ---------------------------------------------------------------- nível */
/**
 * A COR DO GRUPO É RESOLVIDA UMA VEZ, AQUI, e todo o resto lê `--lvl`.
 *
 * Qualquer elemento que carregue `data-group` passa a ter as três variáveis do seu grupo, e
 * as regras abaixo nunca mencionam verde, âmbar nem coral. É o que permite acrescentar um
 * lugar novo onde o grupo aparece sem repetir três blocos de cor.
 */
[data-group="basic"] { --lvl: var(--lvl-basic); --lvl-soft: var(--lvl-basic-soft); --lvl-tint: var(--lvl-basic-tint); }
[data-group="inter"] { --lvl: var(--lvl-inter); --lvl-soft: var(--lvl-inter-soft); --lvl-tint: var(--lvl-inter-tint); }
[data-group="adv"]   { --lvl: var(--lvl-adv);   --lvl-soft: var(--lvl-adv-soft);   --lvl-tint: var(--lvl-adv-tint); }

.level-track {
  display: flex; align-items: center; gap: .25rem;
  list-style: none; margin: 0; padding: 0;
}
.level-track li {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-mute);
}
.level-track li::before {
  content: ""; display: block; width: 100%; height: .3125rem; border-radius: 999px;
  background: var(--line); transition: background var(--speed), height var(--speed);
}
/**
 * OS TRÊS ESTADOS DA TRILHA, e o terceiro é o que a corrige.
 *
 *   off   FORA DO GRUPO ESCOLHIDO: neutro, e é a única coisa que quatro das seis barras
 *         podem ser. Antes eram dois estados, `past` e `future`, e `past` era pintado de
 *         azul — escolher C1 deixava quatro barras azuis atrás dele, e a pergunta "qual é o
 *         meu grupo?" passava a ter duas respostas acesas na mesma linha.
 *   peer  O IRMÃO DE GRUPO: a mesma cor, recuada. É o que faz "Avançado" aparecer como
 *         faixa, e não só como um risco solto em C1.
 *   now   O NÍVEL ESCOLHIDO: cor cheia, barra mais alta, texto em negrito e um ponto
 *         embaixo. Quatro sinais, e só um deles é cor.
 *
 * A COR NUNCA VIAJA SOZINHA (§40). Entre `peer` e `now` mudam a ALTURA da barra, o PESO do
 * texto e a presença do PONTO; quem não separa verde de vermelho continua vendo qual dos
 * dois está escolhido, e quem usa leitor de tela recebe `aria-current` e a palavra escrita.
 *
 * `off` NÃO TEM REGRA DE COR, e é de propósito: ele herda o `var(--line)` da regra base
 * logo acima. Uma regra própria seria um segundo lugar onde escrever "neutro", e o dia em
 * que os dois discordassem venceria o que estivesse escrito por último.
 */
.level-track li[data-on="peer"] { color: var(--ink-dim); }
.level-track li[data-on="peer"]::before { background: var(--lvl-soft); height: .375rem; }
.level-track li[data-on="now"] { color: var(--lvl); font-weight: 800; }
.level-track li[data-on="now"]::before { background: var(--lvl); height: .5625rem; }
.level-track li[data-on="now"]::after {
  content: ""; display: block; width: .3125rem; height: .3125rem; border-radius: 999px;
  background: currentColor;
}

.group-tabs { display: flex; gap: .375rem; }
.group-tabs .pill { font-size: .875rem; }
/* A gaveta aberta ganha a identidade do grupo. Superfície tênue e texto na cor cheia em vez
   do bloco chapado com texto branco: em âmbar, branco sobre a cor não chega perto dos 4,5. */
.group-tabs .pill[aria-selected="true"] {
  background: var(--lvl-tint); border-color: var(--lvl); color: var(--lvl);
}

.level-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
.level-card {
  display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; text-align: left;
  min-height: var(--tap); padding: .75rem .875rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-2); color: var(--ink);
  font: inherit; cursor: pointer;
  transition: background var(--speed), border-color var(--speed);
}
.level-card:hover { background: var(--panel-3); }
.level-card[aria-checked="true"] { border-color: var(--lvl); background: var(--lvl-tint); }
.level-card[aria-checked="true"]::after {
  content: ""; display: block; width: 100%; height: 3px; border-radius: 999px;
  background: var(--lvl); margin-top: .25rem;
}
/* O irmão de grupo fica com a cor recuada: mesma faixa, escolha diferente. */
.level-card[aria-checked="false"] .level-code b { color: var(--lvl-soft); }
.level-code {
  display: inline-flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  font-weight: 800; font-size: 1.0625rem; letter-spacing: -.01em;
}
.level-code b { color: var(--lvl, var(--gold)); font-size: 1.125rem; }
.level-desc { color: var(--ink-dim); font-size: .8125rem; line-height: 1.35; }

.rec-row {
  display: flex; align-items: center; gap: .625rem; flex-wrap: wrap;
  padding: .625rem .75rem; border: 1px dashed var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.rec-icon { color: var(--gold); font-size: 1.125rem; flex: none; }
.rec-text { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; }
.rec-text strong { font-size: .9375rem; }
.rec-text span { color: var(--ink-mute); font-size: .8125rem; }

.combos > summary {
  display: flex; align-items: center; gap: .5rem;
  min-height: var(--tap); cursor: pointer; list-style: none;
  color: var(--ink-dim); font-size: .9375rem; font-weight: 600;
}
.combos > summary::-webkit-details-marker { display: none; }
.combos > summary .ico { transition: transform var(--speed); }
.combos[open] > summary .ico { transform: rotate(180deg); }
.combos > *:not(summary) { margin-top: .5rem; }

/* ---------------------------------------------------------------- rodada */
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.field { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.field-label { font-size: .9375rem; font-weight: 600; color: var(--ink-dim); }

select {
  min-height: var(--tap); width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2); color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer;
}

.setup-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.setup-links .btn { flex: 1 1 10rem; }
.setup-progress { color: var(--ink-mute); font-size: .8125rem; text-align: center; }

/* ============================================================ RODADA */
/**
 * A RODADA ENCHE A JANELA, E O CARTÃO FICA NO MEIO DO QUE SOBRA.
 *
 * O cartão ficava colado no alto: `.play` tinha a altura do próprio conteúdo, e numa tela
 * de 1080 px sobravam 550 px vazios embaixo contra 12 em cima. Nenhum `margin-top` conserta
 * isso sem virar número mágico. O que conserta é estrutura: `.play` passa a ter a altura da
 * janela (`svh`, a menor, para a barra do navegador no celular não fazer o cartão pular), o
 * cabeçalho e a régua ficam no alto, e `.stage` recebe o resto.
 *
 * O padding de baixo é ZERO (mais a área segura do aparelho) de propósito: a área útil é o
 * que fica abaixo da régua até o fim da janela, e qualquer padding ali puxaria o centro para
 * cima sem ninguém ver por quê. O respiro de baixo é a margem do cartão, em `.stage`.
 */
.play {
  display: flex; flex-direction: column; gap: .75rem;
  min-height: 100vh; min-height: 100svh;
  padding-bottom: var(--safe-b);
}

.hud {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  flex-wrap: wrap;
}
.hud-left, .hud-right { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.hud-left { flex: 1 1 auto; }
/**
 * A DIREITA DO HUD QUEBRA LINHA, e isso passou a importar quando o botão de pausa entrou.
 *
 * São três botões, o placar, a sequência e o relógio; em 320 px com "texto muito grande" o
 * conjunto passava 18 px da borda e a página rolava de lado. Encolher os botões seria a
 * saída errada: eles são alvos de toque e já estão no mínimo de 44 px. Quebrar a linha custa
 * uma faixa de altura na tela mais apertada do jogo, e não custa nada em nenhuma outra.
 *
 * `flex: 1 1 auto` É O QUE MANTÉM A LINHA QUEBRADA À DIREITA. Sem ele o bloco tem a largura
 * do conteúdo, e ao descer para a segunda linha o `space-between` do pai o joga para o
 * começo dela: os controles apareciam encostados na margem esquerda, embaixo do nível, com
 * a metade direita da barra vazia. Ocupando a linha inteira, o `justify-content` interno
 * volta a mandar e eles ficam onde sempre estiveram.
 */
.hud-right { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; }
/* E os três botões são UM item dessa quebra: eles descem juntos ou não descem. */
.hud-actions { display: flex; align-items: center; gap: .5rem; flex: none; }
/**
 * O BOTÃO DE PAUSA SE LÊ COMO BOTÃO, e essa é a correção da queixa "não existe botão de
 * pausa": ele existia, media 44 px, tinha rótulo e respondia ao clique — e era o terceiro
 * ícone cinzento de uma fileira de três, colado no relógio. Ninguém procura um controle de
 * partida ali, porque nada naquele desenho diz que ele é um controle de partida.
 *
 * A diferença é de HIERARQUIA e não de tamanho: pausar é a ação da rodada, e ajustes e sair
 * são secundários. O de pausa ganha superfície e borda, os outros dois continuam fantasmas.
 * E um respiro maior o separa do relógio, que é o vizinho com que ele se confundia.
 */
.hud-actions #btn-pause {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--ink);
  margin-left: .25rem;
}
.hud-actions #btn-pause:hover { background: var(--panel-3); border-color: var(--accent-soft); color: var(--accent); }
.hud-actions #btn-pause:active { transform: translateY(1px); }
html[data-contrast="high"] .hud-actions #btn-pause { border-width: 2px; }

/* A pílula do nível, no alto da rodada e nas estatísticas. Sem grupo declarado ela fica
   dourada como sempre foi; com grupo, veste a cor da faixa e fecha o círculo entre o que se
   escolheu no menu e o que se vê durante a partida. */
.level-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .5rem; border-radius: 999px;
  background: var(--lvl-tint, var(--panel-2)); border: 1px solid var(--lvl, var(--line));
  color: var(--lvl, var(--gold)); font-weight: 800; font-size: .8125rem; letter-spacing: .03em;
  flex: none;
}
.hud-progress { color: var(--ink-dim); font-size: .875rem; font-weight: 600; min-width: 0; }
.hud-score { font-weight: 800; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.streak {
  display: inline-flex; align-items: center; gap: .2rem;
  color: var(--gold); font-weight: 700; font-size: .875rem;
}

.clock { position: relative; width: 2.25rem; height: 2.25rem; flex: none; display: inline-flex; }
.clock-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.clock-track, .clock-arc { fill: none; stroke-width: 3; }
.clock-track { stroke: var(--line); }
.clock-arc {
  stroke: var(--accent); stroke-linecap: round;
  stroke-dasharray: 97.4; stroke-dashoffset: 0;
  transition: stroke-dashoffset .25s linear, stroke var(--speed);
}
.clock[data-low="yes"] .clock-arc { stroke: var(--gold); }
.clock[data-low="out"] .clock-arc { stroke: var(--bad); }
.clock-n {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .8125rem; font-weight: 800; font-variant-numeric: tabular-nums;
}

.progress-rail { height: .3125rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }

/**
 * `.stage` É QUEM CENTRALIZA, e é uma grade de três linhas e não um flex com `center`.
 *
 * `1fr auto 1fr`: o cartão na linha do meio, um espaçador acima e outro abaixo, iguais. O
 * retorno mora na linha de BAIXO, dentro do espaçador. Assim, quando ele aparece, o cartão
 * não se move: o retorno ocupa o vazio que já existia embaixo, e só quando não cabe ali a
 * grade cede e o cartão sobe o mínimo necessário. Um `justify-content: center` recentraria
 * o conjunto cartão + retorno a cada resposta, e a alternativa que a pessoa acabou de
 * escolher pularia meio retorno para cima no instante em que ela quer compará-la.
 *
 * Quando o cartão é mais alto que a janela, os dois `1fr` vão a zero e a página rola, como
 * antes. Nada é cortado: a grade cresce com o conteúdo.
 *
 * `flex: 1 1 0` E `min-height: 0`, e as duas linhas custaram uma tarde. O item flex tem um
 * mínimo automático, que é o tamanho intrínseco do conteúdo; para uma grade, o Chromium
 * calcula esse tamanho com espaço INDEFINIDO, e nessa regra todo `fr` vale o maior conteúdo
 * que cruza um `fr`. Com o retorno de 173 px na linha de baixo, os DOIS espaçadores viravam
 * 173 px, `.stage` não podia encolher abaixo disso, a página crescia e o botão "Próxima"
 * saía da tela num monitor de 768. Sem o mínimo automático, `.stage` recebe exatamente o
 * que sobra da janela, a grade resolve os `fr` com espaço DEFINIDO (o de cima cede primeiro
 * e o retorno cabe), e o cartão mais alto que a janela simplesmente transborda a grade: a
 * página rola, e a margem do último item é o respiro no fim dela.
 *
 * A margem de baixo do cartão é a folga até o retorno E o respiro no fim da rolagem, e o
 * `.play` não tem padding embaixo por isso: qualquer padding ali entraria só na conta do
 * centro (deslocando o cartão para cima) e nunca na do transbordo.
 */
.stage {
  flex: 1 1 0px; min-height: 0;
  display: grid; grid-template-rows: 1fr auto minmax(auto, 1fr);
}
.stage > .card { grid-row: 2; margin-bottom: 1rem; }
.stage > .feedback { grid-row: 3; align-self: start; margin-bottom: 1rem; }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 1.125rem;
  display: flex; flex-direction: column; gap: .875rem;
  animation: cardIn .28s ease;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }

.q-title {
  font-size: .8125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-mute); text-align: center;
}

.prompt { display: flex; flex-direction: column; align-items: center; gap: .5rem; min-height: 2rem; }
/**
 * O ENQUADRAMENTO DA PERGUNTA, no idioma de apoio.
 *
 * Ele precisa ser LIDO e não ESTUDADO, e a diferença tem de estar visível antes de a pessoa
 * começar a ler: a barra à esquerda e a superfície própria o separam do material do
 * idioma-alvo, que vem logo abaixo em corpo grande. Sem essa separação, uma cena em português
 * no meio de uma rodada de inglês se lê como uma frase para traduzir.
 *
 * ELE ESTAVA DISCRETO DEMAIS, e discreto demais é o mesmo que ausente: a cena é o que diz o
 * que a pergunta quer, e passava despercebida entre o título em versalete e as alternativas
 * em caixa. O ajuste é de HIERARQUIA e não de ênfase — corpo um pouco maior, entrelinha mais
 * folgada, uma superfície de um degrau e uma barra na cor do acento.
 *
 * O QUE ELE NÃO PODE FAZER É COMPETIR com as alternativas, que são onde a pessoa age. Por
 * isso a cor do texto continua sendo a discreta (`--ink-dim`: 7,31 no escuro e 6,72 no claro
 * sobre esta superfície, medidos) e não a principal, e o fundo é `--panel-2`, que está um
 * degrau do painel e não um tom carregado. Nada aqui é vermelho, âmbar nem tracejado: a cena
 * não é um aviso.
 */
.q-setup {
  margin: 0; align-self: center;
  width: 100%; max-width: 38rem;
  padding: .5rem .75rem .5rem .875rem;
  border-left: 4px solid var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--panel-2);
  color: var(--ink-dim); font-size: 1rem; line-height: 1.5; text-align: left;
}

.prompt-word {
  font-size: clamp(1.5rem, 6vw, 2.25rem); font-weight: 800; text-align: center;
  letter-spacing: -.01em; word-break: break-word;
}
.prompt-word.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.prompt-sentence {
  font-size: clamp(1.0625rem, 3.6vw, 1.375rem); text-align: center; line-height: 1.45;
  max-width: 34rem;
}
.prompt-sentence .gap {
  display: inline-block; min-width: 3.5rem; border-bottom: 3px solid var(--gold);
  margin: 0 .2rem; vertical-align: baseline;
}
.prompt-art { width: min(11rem, 44vw); height: min(11rem, 44vw); }

.prompt-audio {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: max(3.5rem, 56px); padding: .75rem 1.5rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel-2); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer;
}
.prompt-audio .ico { font-size: 1.5rem; color: var(--accent); }
.prompt-audio[data-playing] { border-color: var(--accent); background: var(--panel-3); }
.prompt-audio[data-playing] .ico { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

.hint {
  display: flex; align-items: center; gap: .4rem; justify-content: center;
  color: var(--ink-mute); font-size: .875rem; letter-spacing: .12em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.hint .ico { color: var(--gold); font-family: initial; letter-spacing: normal; }

/* --------------------------------------------------------------- opções */
.options { display: grid; gap: .5rem; grid-template-columns: 1fr; }
.options[data-cols="2"] { grid-template-columns: 1fr 1fr; }

.opt {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: max(3.25rem, 52px); padding: .75rem 2.25rem .75rem .875rem;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--panel-2); color: var(--ink);
  font: inherit; font-size: 1rem; font-weight: 600; text-align: center; cursor: pointer;
  transition: background var(--speed), border-color var(--speed), transform var(--speed);
  word-break: break-word; min-width: 0;
}
.opt:hover:not([disabled]) { background: var(--panel-3); border-color: var(--accent-soft); }
.opt:active:not([disabled]) { transform: scale(.985); }
.opt.is-art { padding: .5rem; aspect-ratio: 1 / 1; }
.opt .art { width: 100%; height: 100%; max-height: 8rem; }
.opt[data-playing] { border-color: var(--accent); }

.opt-badge {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  display: none; font-size: 1.25rem; line-height: 1;
}
.opt.is-art .opt-badge { top: .375rem; right: .375rem; transform: none; }
.opt[data-mark] .opt-badge { display: inline-flex; }
/**
 * A ALTERNATIVA ESCOLHIDA E AINDA NÃO CONFIRMADA.
 *
 * Ela precisa ser inconfundível com o certo e o errado que vêm depois, e por isso usa o
 * ACENTO e não o verde nem o vermelho: é a cor de "isto está selecionado" em todo o resto da
 * interface, e não a de um julgamento. A borda mais grossa e o deslocamento mínimo dizem o
 * mesmo sem depender de cor (§40).
 */
.opt[aria-pressed="true"]:not([disabled]) {
  border-color: var(--accent); background: var(--panel-3);
  box-shadow: inset 0 0 0 1px var(--accent);
}
/**
 * E UM PONTO, porque só a borda não basta.
 *
 * O `:hover` também escurece o fundo e também tinge a borda de azul (com `--accent-soft`,
 * que no tema claro está a um passo de `--accent`). Com o ponteiro parado sobre uma opção,
 * "por cima" e "escolhida" ficavam quase iguais — e num toque não há hover nenhum, então
 * quem só olha a captura nem desconfia. O ponto é FORMA e não cor (§40): ele existe ou não
 * existe, e resolve o caso do daltônico e o do mouse parado com a mesma linha.
 *
 * Ele mora no mesmo lugar onde o visto e o xis vão aparecer depois, o que faz a marca da
 * escolha virar a marca do resultado sem a opção mudar de tamanho.
 */
.opt[aria-pressed="true"]:not([disabled]) .opt-badge {
  display: block; width: .75rem; height: .75rem;
  border-radius: 999px; background: var(--accent);
}
.opt.is-art[aria-pressed="true"]:not([disabled]) .opt-badge { box-shadow: 0 0 0 3px var(--panel); }
html[data-contrast="high"] .opt[aria-pressed="true"]:not([disabled]) { outline: 3px solid var(--line); outline-offset: -6px; }

/* O botão de confirmar ocupa a largura do cartão: ele é o passo seguinte do que está logo
   acima, e um botão pequeno num canto não se lê como continuação da lista. */
.choice-actions { display: flex; }
.choice-actions .btn { flex: 1 1 auto; }

.opt[data-mark="right"] { border-color: var(--good); background: color-mix(in srgb, var(--good) 16%, var(--panel-2)); }
.opt[data-mark="right"] .opt-badge { color: var(--good); }
.opt[data-mark="wrong"] { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, var(--panel-2)); }
.opt[data-mark="wrong"] .opt-badge { color: var(--bad); }
/* `color-mix` sobre um painel preto puro devolve quase preto, e a opção marcada
   desapareceria justamente para quem mais precisa vê-la. Em alto contraste a marca é a
   borda grossa e o ícone, que não dependem de mistura nenhuma. */
html[data-contrast="high"] .opt[data-mark="right"],
html[data-contrast="high"] .opt[data-mark="wrong"] { background: var(--panel-2); border-width: 4px; }
.opt[disabled] { cursor: default; }
.opt[disabled]:not([data-mark]) { opacity: .55; }

/* ------------------------------------------------- organizar a frase (§33) */
.order { display: flex; flex-direction: column; gap: .625rem; }
.order-slot {
  display: flex; flex-wrap: wrap; gap: .375rem; align-content: flex-start;
  min-height: max(3.5rem, 56px); padding: .5rem;
  border: 2px dashed var(--line); border-radius: var(--radius); background: var(--panel-2);
}
.order-slot:empty + .order-empty { display: block; }
.order-empty { display: none; text-align: center; color: var(--ink-mute); font-size: .875rem; margin-top: -.375rem; }
.order-bank { display: flex; flex-wrap: wrap; gap: .375rem; justify-content: center; }

.piece {
  /* A largura mínima é o alvo de toque. "a", "de" e "el" desenham uma peça de 41 px, que é
     confortável para o mouse e pequena demais para o dedo — e são justamente as palavras
     curtas que uma frase para ordenar tem em maior número. */
  min-height: var(--tap); min-width: var(--tap); padding: .4rem .75rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-3); color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: background var(--speed), border-color var(--speed), opacity var(--speed);
}
.piece:hover:not([disabled]) { border-color: var(--accent-soft); }
.piece[data-used="yes"] { opacity: .25; cursor: default; }
.order-slot .piece { background: var(--accent); border-color: var(--accent); color: #fff; }
.order-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.order-actions .btn { flex: 1 1 8rem; }

/* -------------------------------------------------------- associação (§16.7) */
.match { display: flex; flex-direction: column; gap: .625rem; }
.match-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.match-col { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.match-head {
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mute); text-align: center;
}
.match-list { display: flex; flex-direction: column; gap: .375rem; }
.match-item {
  position: relative;
  min-height: max(3rem, 48px); padding: .5rem 1.75rem .5rem .625rem;
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2); color: var(--ink);
  font: inherit; font-weight: 600; font-size: .9375rem; cursor: pointer;
  text-align: left; word-break: break-word; min-width: 0;
  transition: background var(--speed), border-color var(--speed);
}
.match-item:hover:not([disabled]) { background: var(--panel-3); }
.match-item[aria-pressed="true"] { border-color: var(--accent); background: var(--panel-3); }
/* O par fechado ganha NÚMERO, e não só cor: dois pares de cores diferentes seriam
   indistinguíveis para quem não separa verde de vermelho, e quatro seriam ilegíveis para
   qualquer um. O número diz qual liga com qual, e é o mesmo dos dois lados. */
.match-item[data-pair]::after {
  content: attr(data-pair);
  position: absolute; right: .375rem; top: 50%; transform: translateY(-50%);
  width: 1.375rem; height: 1.375rem; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: .75rem; font-weight: 800;
}
.match-item[data-pair] { border-color: var(--accent-soft); }
.match-item[data-mark="right"] { border-color: var(--good); }
.match-item[data-mark="right"]::after { background: var(--good); }
.match-item[data-mark="wrong"] { border-color: var(--bad); }
.match-item[data-mark="wrong"]::after { background: var(--bad); }

/* --------------------------------------------------------------- retorno */
.feedback {
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: var(--radius); padding: .875rem 1rem;
  display: flex; flex-direction: column; gap: .5rem;
  animation: fbIn .22s ease;
}
@keyframes fbIn { from { opacity: 0; transform: translateY(-.375rem); } to { opacity: 1; transform: none; } }
.feedback[data-kind="right"] { border-left-color: var(--good); }
.feedback[data-kind="wrong"], .feedback[data-kind="timeout"] { border-left-color: var(--gold); }

.fb-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fb-icon { font-size: 1.375rem; line-height: 1; display: inline-flex; }
.feedback[data-kind="right"] .fb-icon { color: var(--good); }
.feedback[data-kind="wrong"] .fb-icon, .feedback[data-kind="timeout"] .fb-icon { color: var(--gold); }
.fb-title { font-size: 1.125rem; font-weight: 800; }
.fb-points {
  margin-left: auto; color: var(--good); font-weight: 800; font-variant-numeric: tabular-nums;
  animation: pop .3s ease;
}
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.fb-answer { font-size: 1rem; }
.fb-answer b { color: var(--gold); }
/* Em linha própria: "A resposta era: suggests Você escolheu: demands" corria emendado, e a
   pessoa lia "suggests Você" como se fosse uma coisa só. São dois fatos diferentes sobre a
   mesma pergunta, e cada um pede a sua linha. */
.fb-your { display: block; color: var(--ink-mute); margin-top: .125rem; }
/* O valor dentro dela é um <b> por causa do `lang`, e não para ganhar destaque. Sem estas
   duas linhas ele herdaria o dourado de `.fb-answer b`, e a resposta ERRADA ficaria com a
   mesma cor da CERTA logo acima — que é justamente a distinção que o retorno existe para
   fazer. A linha inteira é discreta de propósito. */
.fb-your b { font-weight: inherit; color: inherit; }
.fb-why { color: var(--ink-dim); font-size: .9375rem; line-height: 1.45; }
.fb-foot { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.fb-level { color: var(--ink-mute); font-size: .8125rem; }
.fb-foot .btn { margin-left: auto; }

/* A barra de espera precisa de ALTURA E LARGURA declaradas: um filho sem conteúdo dentro
   de um contêiner que centraliza encolhe a zero, existe no DOM e não é visto por ninguém. */

/* ============================================================ RESULTADO */
.result-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 1.5rem 1.25rem;
  display: flex; flex-direction: column; gap: 1rem; align-items: center; text-align: center;
}
.result-title { font-size: 1.5rem; font-weight: 800; }
.result-practiced { color: var(--ink-dim); font-size: 1.0625rem; }
.result-practiced b { color: var(--gold); }
.result-group {
  display: inline-flex; align-items: center;
  padding: .1875rem .625rem; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--ink-dim); font-size: .8125rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.score-big { display: flex; flex-direction: column; align-items: center; }
.score-big span {
  font-size: clamp(2.75rem, 12vw, 4rem); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--accent-soft);
}
.score-big small { color: var(--ink-mute); font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase; }
.result-msg { font-size: 1.0625rem; font-weight: 600; }

.result-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: .5rem; width: 100%; margin: 0;
}
.result-grid > div {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .625rem .5rem; min-width: 0;
}
.result-grid dt {
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  color: var(--ink-mute); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase;
}
.result-grid dt .ico { font-size: .9375rem; }
.result-grid dd { margin: .125rem 0 0; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.result-actions { display: flex; gap: .5rem; flex-wrap: wrap; width: 100%; }
.result-actions .btn { flex: 1 1 10rem; }

/* ============================================================ MODAIS */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: calc(1rem + var(--safe-t)) 1rem calc(1rem + var(--safe-b));
  background: rgba(3, 7, 16, .72);
  animation: fade .18s ease;
}
html[data-theme="light"] .modal-backdrop { background: rgba(16, 26, 46, .45); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/**
 * O VÉU DA PAUSA COBRE DE VERDADE, e essa é a diferença entre pausar e olhar a pergunta com
 * o relógio parado.
 *
 * São TRÊS camadas, e nenhuma delas sozinha basta:
 *
 *   1. `visibility: hidden` no palco. É o que de fato apaga a pergunta e as alternativas.
 *      Um véu translúcido, por mais escuro que seja, ainda é uma cortina: o texto continua
 *      no pixel, e basta uma captura de tela clareada, um seletor no inspetor ou uma tela
 *      muito brilhante para lê-lo. Escondido, não há o que ler.
 *   2. o véu quase opaco, para o cartão não deixar um recorte visível no fundo.
 *   3. o desfoque, que é reforço e não a defesa: onde `backdrop-filter` não existe, as duas
 *      camadas de cima já resolveram sozinhas.
 *
 * `visibility` e não `display: none`: o palco continua ocupando o mesmo espaço, então o
 * cartão não muda de tamanho nem de lugar entre pausar e continuar. E `visibility: hidden`
 * também tira o conteúdo do leitor de tela e da ordem de foco, que é exatamente o que uma
 * pausa deve fazer com a pergunta.
 *
 * O VÉU COBRE A BARRA DE CIMA TAMBÉM, e isso é deliberado: pausar é sair da partida por um
 * momento, e um HUD nítido por cima de um véu opaco pareceria uma tela meio ligada. A prova
 * de que o tempo não andou está onde ela importa, que é o relógio ao voltar, e é isso que a
 * varredura mede.
 */
.modal-backdrop.is-cover { background: rgba(3, 7, 16, .94); }
html[data-theme="light"] .modal-backdrop.is-cover { background: rgba(232, 237, 246, .94); }
@supports (backdrop-filter: blur(1px)) {
  .modal-backdrop.is-cover { backdrop-filter: blur(10px); }
}
html[data-paused] .stage { visibility: hidden; }

/* O quadro da pausa não é um aviso: é uma espera. Sem cor de erro, sem cabeçalho, e o
   ícone é discreto porque quem pausou sabe o que fez. */
/**
 * O QUADRO DA PAUSA TEM TAMANHO PRÓPRIO, e ele cresce com a tela entre dois limites.
 *
 * Com 27 rem fixos ele media 30% de um monitor de 1440: um popup pequeno no meio de uma
 * tela grande, que é a aparência de aviso de sistema e não a de uma partida esperando. A
 * conta é a mesma do cartão da pergunta, com números menores porque aqui não há texto para
 * ler: `26vw + 10rem` dá 515 px em 1366 e 534 em 1440, e o teto de 36 rem impede que um
 * monitor largo transforme a pausa numa faixa.
 *
 * O piso de 22 rem é o que sustenta a leitura em tela estreita, e o `min(100%, ...)` é o
 * que faz o quadro nunca passar do véu: no celular ele fica com a largura disponível menos
 * as bordas seguras, que é o que o padding do véu já garante.
 */
.modal.pause-card { width: min(100%, clamp(22rem, 26vw + 10rem, 36rem)); }

/**
 * O RODAPÉ DA PAUSA, e a regra que estava errada aqui é a que produziu a queixa dos ícones
 * tortos no celular.
 *
 * O rodapé padrão dá o DOBRO da largura ao botão primário, e com isso sobrava um terço do
 * quadro para "Sair para o menu", que quebrava em duas linhas no monitor. A correção foi
 * dimensionar os dois pelo texto, e ela criou um defeito pior: `.pause-card .modal-foot
 * .btn` tem três classes e VENCE a media query de empilhamento, que tem duas. No celular os
 * botões empilhavam, mas o de sair ficava com a largura do próprio texto, encostado à
 * esquerda, enquanto o de continuar ocupava a linha inteira — e o ícone dentro dele ficava
 * 66 px fora do eixo de todo o resto do quadro.
 *
 * Hoje a regra do texto vale SÓ onde os botões dividem a linha, e no empilhamento os dois
 * ocupam a largura toda. Nenhum `margin`, nenhum `transform`: quem centraliza é o próprio
 * botão, que já é `inline-flex` com `justify-content: center`.
 */
/**
 * A QUEBRA É DECIDIDA PELO ESPAÇO DO QUADRO, e não por uma media query.
 *
 * A primeira tentativa foi uma media query de largura de JANELA, e ela erra justamente onde
 * o defeito aparece: num celular deitado de 740 px a janela é larga e o quadro é estreito,
 * então a regra achava que havia espaço, os botões não cabiam lado a lado, o `flex-wrap` os
 * empilhava mesmo assim, e cada um ficava com a largura do próprio texto: 194 px e 318 px,
 * um deles 62 px fora do eixo.
 *
 * Com uma BASE e `flex: 1 1`, quem decide é o container: cabendo os dois na linha, eles a
 * dividem; não cabendo, cada um passa a ocupar a linha inteira, do mesmo tamanho e no mesmo
 * eixo. Nenhuma media query sabe disso, e nenhuma precisa saber.
 *
 * A BASE É 11,5 REM PORQUE É O TAMANHO DO RÓTULO MAIS LONGO com o padding do botão. Com
 * 9 rem os dois cabiam lado a lado num quadro de 352 px, ficavam com 113 px cada e o
 * `nowrap` cortava "Sair para o menu" no meio. A base não é um número bonito: é a medida a
 * partir da qual o texto ainda cabe, e é ela que decide onde a linha quebra.
 */
.pause-card .modal-foot .btn { flex: 1 1 11.5rem; white-space: nowrap; }

.pause-card .modal-body {
  text-align: center;
  /* Um respiro maior que o dos outros modais: aqui o conteúdo é curto e o que se quer é
     presença, não densidade. O rodapé tem o padding do modal e não precisa de exceção. */
  padding: 1.5rem 1.5rem 1.25rem;
  gap: .625rem;
}
.pause-card h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 800; }
#pause-text { font-size: 1.0625rem; color: var(--ink-dim); }
.pause-card .note { margin-top: .25rem; }

/**
 * O DISCO DO ÍCONE. Ele é `grid` com `place-items: center` e nada mais: o SVG dentro tem
 * tamanho declarado em `rem` (e não o `1em` herdado, que mudava com a fonte do pai), então
 * o centro do desenho é o centro do disco em qualquer tela, sem deslocamento a compensar.
 */
.pause-icon {
  display: grid; place-items: center;
  margin: 0 auto .25rem;
  width: clamp(3.25rem, 3rem + 1.5vw, 4rem);
  height: clamp(3.25rem, 3rem + 1.5vw, 4rem);
  border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--accent);
}
.pause-icon .ico {
  width: clamp(1.625rem, 1.5rem + .75vw, 2rem);
  height: clamp(1.625rem, 1.5rem + .75vw, 2rem);
  /* O deslocamento de baseline da regra base não tem o que fazer dentro de um invólucro
     `inline-flex`, mas fica explícito: aqui o eixo é o do disco, e não o do texto. */
  vertical-align: initial;
}

/**
 * OS DOIS ÍCONES DOS BOTÕES TÊM O MESMO TAMANHO, e antes não tinham: o `.ico` mede `1em`, e
 * "Continuar" é `btn-lg` com fonte de 17 px enquanto "Sair" tem 16. Um pixel de diferença
 * entre dois ícones lado a lado é pouco para nomear e suficiente para parecer desalinhado,
 * e some quando o tamanho deixa de depender da fonte de cada botão.
 */
.pause-card .modal-foot .ico { width: 1.125rem; height: 1.125rem; }

.modal {
  width: min(34rem, 100%);
  /* `100%` do véu, e não uma fração de `svh`: o véu já tem o recuo das bordas seguras e do
     respiro somado ao seu padding, e `88svh` ignorava esse padding — em tela deitada com
     texto enorme o quadro passava três pixels por baixo, o suficiente para cortar a última
     linha do botão. Medir contra o pai é a única conta que não precisa saber do padding. */
  max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  animation: modalIn .2s ease;
  /**
   * SEM ISTO A BARRA DE ROLAGEM É DESENHADA FORA DO QUADRO.
   *
   * O quadro tem 24 px de canto arredondado e nada o recortava. O corpo rolável é o ÚLTIMO
   * filho nos modais sem rodapé (Configurações é um), então ele vai até um pixel da borda de
   * baixo, e a barra dele é um retângulo: nos 24 px de curva ela aparece por fora do
   * contorno, encostada e torta. No computador quase não se vê, porque a barra é fina e
   * some; num Android, onde ela é desenhada em cima do conteúdo, é o que se vê primeiro.
   *
   * `overflow: hidden` é a correção de causa: o recorte passa a ser o próprio raio do
   * quadro, e vale para qualquer filho que role, hoje e amanhã.
   */
  overflow: hidden;
}
.modal.narrow { width: min(24rem, 100%); }
@keyframes modalIn { from { opacity: 0; transform: translateY(1rem) scale(.98); } to { opacity: 1; transform: none; } }

.modal-head {
  display: flex; align-items: center; gap: .5rem;
  padding: 1rem 1rem .5rem; flex: none;
}
.modal-head h2 { font-size: 1.25rem; font-weight: 800; flex: 1 1 auto; min-width: 0; }
.modal-head .icon-btn { margin-left: auto; }

/* O par obrigatório: `overflow-y` sempre acompanhado de um limite de altura, senão a barra
   aparece onde nunca houve o que rolar. */
.modal-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: .5rem 1rem 1rem;
  display: flex; flex-direction: column; gap: .875rem;
  /**
   * O espaço da barra é reservado mesmo quando ela não está lá: sem isto o conteúdo do
   * modal salta uma dezena de pixels toda vez que abrir uma seção o torna rolável.
   *
   * `both-edges` E NÃO `stable` SOZINHO, e a diferença é a queixa de "ícones
   * descentralizados": `stable` reserva a calha de UM lado só, então todo conteúdo
   * centralizado dentro do corpo fica deslocado meia calha para a esquerda. No modal de
   * pausa, que é centralizado de ponta a ponta, isso media 5 px medidos, e 5 px de desvio
   * num ícone dentro de um círculo é exatamente o que o olho percebe como torto sem
   * conseguir dizer por quê. Reservando dos dois lados, o eixo do quadro volta a ser o eixo
   * do conteúdo, e a proteção contra o salto continua de pé.
   */
  scrollbar-gutter: stable both-edges;
}
.modal-foot {
  display: flex; gap: .5rem; flex-wrap: wrap;
  padding: .75rem 1rem calc(1rem + var(--safe-b)); flex: none;
  border-top: 1px solid var(--line);
}
.modal-foot .btn { flex: 1 1 7rem; }
/* O botão que continua o fluxo é mais largo que o que volta: com os dois do mesmo tamanho,
   "Começar quiz" quebrava em duas linhas enquanto "Voltar" ficava com metade vazia. */
.modal-foot .btn-primary { flex: 2 1 10rem; }

/* ------------------------------------------------------------ preparação */
.brief-level { font-size: 1.125rem; font-weight: 800; }
.brief-level b { color: var(--gold); }
.brief-desc { color: var(--ink-dim); }
.brief-intro { font-weight: 600; }
.brief-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.brief-list li {
  display: flex; align-items: center; gap: .625rem;
  padding: .5rem .625rem; border-radius: var(--radius-sm); background: var(--panel-2);
}
.brief-list .ico { font-size: 1.25rem; color: var(--accent-soft); flex: none; }
.brief-list span:last-child { font-size: .9375rem; min-width: 0; }

/* ------------------------------------------------- configurações e listas */
.set-section { display: flex; flex-direction: column; gap: .625rem; }
.set-section > h3 {
  display: flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-mute);
}
.set-section > h3 .ico { font-size: 1rem; }
.set-row .row-icon { margin-right: .4rem; color: var(--ink-mute); }
.set-row .row-icon .ico { vertical-align: -.15em; }
.set-row {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  min-height: var(--tap);
}
.set-row > span:first-child { flex: 1 1 9rem; min-width: 0; font-weight: 600; }
.set-row select { width: auto; min-width: 8rem; flex: 0 1 auto; }

/* O interruptor. É um botão de verdade com `aria-pressed`, e não um checkbox pintado: o
   leitor de tela anuncia o estado sem nenhum atributo extra, e o teclado o alcança de graça. */
.switch {
  position: relative; flex: none;
  width: 3.25rem; height: 1.875rem; padding: 0;
  border: 2px solid var(--line); border-radius: 999px;
  background: var(--panel-2); cursor: pointer;
  transition: background var(--speed), border-color var(--speed);
}
.switch::after {
  content: ""; position: absolute; top: .1875rem; left: .1875rem;
  width: 1.25rem; height: 1.25rem; border-radius: 999px; background: var(--ink-mute);
  transition: transform var(--speed), background var(--speed);
}
.switch[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-pressed="true"]::after { transform: translateX(1.375rem); background: #fff; }
html[data-contrast="high"] .switch[aria-pressed="true"]::after { background: var(--line); }

.list-plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
.list-plain li { display: flex; gap: .625rem; align-items: flex-start; }
.list-num {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 999px;
  display: grid; place-items: center; background: var(--panel-3); color: var(--accent-soft);
  font-size: .8125rem; font-weight: 800;
}

.stat-rows { display: flex; flex-direction: column; gap: .375rem; }
.stat-row {
  display: flex; align-items: center; gap: .625rem;
  padding: .5rem .625rem; border-radius: var(--radius-sm); background: var(--panel-2);
}
.stat-row .level-chip { flex: none; }
.stat-bar { flex: 1 1 4rem; height: .5rem; border-radius: 999px; background: var(--line); overflow: hidden; min-width: 3rem; }
.stat-bar > i { display: block; height: 100%; background: var(--accent); }
.stat-val { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .875rem; flex: none; }

.review-item {
  display: flex; flex-direction: column; gap: .25rem;
  padding: .625rem .75rem; border-radius: var(--radius-sm);
  background: var(--panel-2); border-left: 3px solid var(--gold);
}
.review-q { font-weight: 600; }
.review-a { color: var(--ink-dim); font-size: .9375rem; }
.review-a b { color: var(--good); }
.review-why { color: var(--ink-mute); font-size: .875rem; }

.toast {
  position: fixed; left: 50%; bottom: calc(1.25rem + var(--safe-b)); transform: translateX(-50%);
  z-index: 80; max-width: min(28rem, calc(100vw - 2rem));
  padding: .625rem 1rem; border-radius: 999px;
  background: var(--panel-3); border: 1px solid var(--line); color: var(--ink);
  font-size: .9375rem; font-weight: 600; box-shadow: var(--shadow);
  animation: fade .18s ease;
}

/* ============================================================ RESPONSIVO
 *
 * Sempre DEPOIS dos blocos que ajustam, porque `@media` não acrescenta especificidade. */

/* Celular em pé estreito. As duas colunas de qualquer coisa param de caber muito antes do
   que parece: com "texto muito grande", dois cartões de nível lado a lado em 320 px dão
   130 px por cartão, e "Intermediário superior" vira cinco linhas. */
@media (max-width: 26rem) {
  .level-cards { grid-template-columns: 1fr; }
  .two-cols { grid-template-columns: 1fr; }
  .options[data-cols="2"] { grid-template-columns: 1fr; }
  /* A imagem é a exceção: quatro desenhos em coluna única viram uma rolagem de tela
     inteira, e o desenho continua reconhecível pela metade da largura. */
  .options[data-cols="2"]:has(.opt.is-art) { grid-template-columns: 1fr 1fr; }
  /* EM COLUNA, `flex-basis` VIRA ALTURA, e é o erro mais silencioso do flexbox.
     `.lang-side` tem `flex: 1 1 9rem` para dividir a largura quando os dois lados estão
     lado a lado; ao virar coluna, esse mesmo `9rem` passou a ser altura mínima, e abriu
     144 px de vazio entre "Já conheço" e "Quero praticar" numa tela onde o espaço vertical
     é justamente o que falta. Em coluna o tamanho é o do conteúdo. */
  .lang-pair { flex-direction: column; align-items: stretch; }
  .lang-side { flex: 0 0 auto; }
  .lang-arrow { display: none; }
  /* "Como funciona" e "Configurações" lado a lado quebravam em duas linhas cada. Empilhados
     cabem numa linha só. E `flex: 0 0 auto` junto, pelo MESMO motivo de duas regras acima:
     a base de 10rem, que era largura, virou altura ao empilhar e transformou dois botões
     em dois painéis de 160 px. É a armadilha que o flexbox arma toda vez que uma fileira
     vira coluna, e ela não avisa. */
  .setup-links { flex-direction: column; }
  .setup-links .btn { flex: 0 0 auto; }
  .result-actions { flex-direction: column; }
  .result-actions .btn { flex: 0 0 auto; }
  .order-actions .btn, .modal-foot .btn { flex: 1 1 auto; }
  .setup-card { padding: 1rem; gap: 1.25rem; }
  .screen { padding-left: calc(.75rem + var(--safe-l)); padding-right: calc(.75rem + var(--safe-r)); }
  .brand-text h1 { font-size: 1.375rem; }
  .group-tabs { flex-wrap: wrap; }
  .group-tabs .pill { flex: 1 1 6rem; }
}

/* A seta entre os idiomas alinhava ao fim e parecia apontar só para o último botão. */
@media (min-width: 26.0625rem) {
  .lang-pair { align-items: center; }
  .lang-arrow { padding-bottom: 0; align-self: flex-end; padding-bottom: .625rem; }
}

/* Tela deitada e baixa: a altura é o recurso escasso, não a largura. O desenho do enunciado
   é a única coisa grande o bastante para valer a pena encolher. */
@media (max-height: 34rem) and (orientation: landscape) {
  .screen { padding-top: calc(.5rem + var(--safe-t)); padding-bottom: calc(.75rem + var(--safe-b)); }
  .card { padding: .875rem; gap: .625rem; }
  .prompt-art { width: min(6.5rem, 22vh); height: min(6.5rem, 22vh); }
  .opt.is-art .art { max-height: 5rem; }
  .prompt-word { font-size: clamp(1.25rem, 4vh, 1.75rem); }
  .brand-mark { font-size: 2rem; }
}

/* Do tablet para cima o cartão pode respirar, e a rodada ganha largura fixa para a linha
   de texto não passar de ~70 caracteres, que é onde a leitura começa a cansar. */
@media (min-width: 48rem) {
  .screen { padding: calc(1.5rem + var(--safe-t)) 1.5rem calc(2.5rem + var(--safe-b)); }
  .setup-card { padding: 1.75rem; }
  .card { padding: 1.5rem; }
  /* De 46 rem a 54 rem acompanhando a tela, para o degrau de 64 rem não ser um salto. */
  .play { max-width: clamp(46rem, 80vw, 54rem); padding-bottom: var(--safe-b); }
  .options[data-cols="2"] { grid-template-columns: 1fr 1fr; }
  .opt .art { max-height: 9rem; }
  /**
   * OS DESENHOS TÊM TETO. `.opt.is-art` é um quadrado (`aspect-ratio`), e num cartão de
   * 816 px duas colunas davam quatro quadrados de 371 px com um desenho de 144 no meio de
   * cada um: o cartão media 966 px e a página rolava num monitor de 720. Com o cartão mais
   * largo isso só pioraria. Aqui os quatro ficam numa linha só, de no máximo 11 rem cada,
   * centrados; abaixo de 48 rem continuam dois a dois, que é o que cabe num celular.
   */
  .options[data-cols="2"]:has(.opt.is-art) {
    grid-template-columns: repeat(4, minmax(0, 11rem)); justify-content: center;
  }
}

/**
 * NO MONITOR, O CARTÃO CRESCE, E A LINHA DE TEXTO NÃO.
 *
 * ISSO NÃO DESFAZ A REGRA DAS 70 COLUNAS acima, e é por isso que o número pôde subir: quem
 * limita a linha de leitura não é `.play`, é o `max-width` do próprio `.prompt-sentence`. O
 * cartão fica mais largo, a frase continua com a mesma medida de leitura e o que ganha
 * largura é o que precisava dela, a grade de alternativas.
 *
 * O teto de 54 rem que existiu aqui foi revisto: ele media 43% de um monitor largo, e o
 * argumento de que duas colunas largas cansam o olho vale para FRASES, que continuam em
 * coluna única. Quem vai a duas colunas é o rótulo curto, e 26 rem por coluna com "give"
 * dentro não cansa ninguém.
 */
@media (min-width: 64rem) {
  /**
   * A LARGURA ACOMPANHA A TELA, entre dois limites.
   *
   * 54 rem fixos davam 43% de um monitor de 1920 e o cartão parecia uma caixinha no meio de
   * um vazio. `40vw + 24rem` dá 66% em 1280, 65% em 1366, 63% em 1440 e 57% em 1920: cresce
   * com a tela sem crescer na mesma proporção, que é o que "proporcional" quer dizer aqui.
   * O piso é o antigo 54 rem (nada encolhe) e o teto é 76 rem, para um ultrawide não virar
   * uma faixa de borda a borda.
   *
   * O que segura a leitura continua sendo o `max-width` de `.prompt-sentence` e de
   * `.q-setup`, não o cartão: a frase não passa das ~70 colunas em nenhuma largura. O que
   * ganha espaço é a grade de alternativas, e as de rótulo curto agora vão a duas colunas
   * pelo comprimento medido do rótulo (`app.js`), então uma barra de 1000 px com "give"
   * dentro não acontece.
   */
  .play { max-width: clamp(54rem, 40vw + 24rem, 76rem); }
  .card { padding: 1.75rem 2rem; gap: 1rem; }
  .options { gap: .625rem; }
  .opt { min-height: max(3.5rem, 56px); padding: .875rem 2.5rem .875rem 1rem; }
  .choice-actions .btn { min-height: max(3.25rem, 52px); }
  /* A frase acompanha um pouco, sem chegar perto do limite de fadiga. */
  .prompt-sentence { max-width: 38rem; }
  .q-setup { font-size: 1.0625rem; padding: .625rem 1rem .625rem 1.125rem; }
  /**
   * A ALTERNATIVA CRESCE JUNTO COM O CONTEXTO, e isto é uma correção e não um enfeite.
   *
   * Ao subir o contexto para 17 px aqui e deixar a alternativa em 16, a cena passou a ser o
   * MAIOR texto do cartão — exatamente o "concorrer com as alternativas" que se pediu para
   * não acontecer. Quem age é quem escolhe, e o corpo do texto não pode dizer o contrário.
   *
   * Elas ficam do mesmo tamanho, e a hierarquia entre as duas continua existindo sem o
   * corpo: a alternativa tem peso 600 e a cor principal, o contexto tem peso normal e a cor
   * discreta. O destaque da cena vem da superfície e da barra, que é o que se pediu.
   */
  .opt { font-size: 1.0625rem; }
}

/**
 * DE 1440 PARA CIMA O CORPO SOBE UM DEGRAU, junto com o cartão. Um cartão de 1100 px com
 * texto de 16 px é um cartão grande com letra pequena, e o vazio muda de fora para dentro.
 * As mesmas hierarquias valem: a cena não passa a alternativa (as duas em 1.125rem, e a
 * cena com peso normal e cor discreta), a frase continua com medida de leitura, e nada
 * aqui é altura fixa: o cartão segue tendo a altura do conteúdo.
 */
@media (min-width: 90rem) {
  .card { padding: 2rem 2.5rem; gap: 1.125rem; }
  .q-title { font-size: .875rem; }
  .q-setup { font-size: 1.125rem; max-width: 42rem; }
  .prompt-sentence { font-size: clamp(1.125rem, 1.7vw, 1.5rem); max-width: 42rem; }
  .prompt-word { font-size: clamp(1.75rem, 2.5vw, 2.75rem); }
  .prompt-audio { min-height: max(3.75rem, 60px); font-size: 1.0625rem; }
  .opt { font-size: 1.125rem; min-height: max(3.75rem, 60px); }
  .choice-actions .btn { min-height: max(3.5rem, 56px); font-size: 1.0625rem; }
  .piece { font-size: 1.0625rem; }
  .match-item { font-size: 1rem; }
  .feedback { padding: 1rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}