/* ────────────────────────────────────────────────────────────────
   Pilha — o baralho como fichário: a caixa é o fundo e a ficha é a
   superfície erguida. (As duas fichas que assomavam atrás dela saíram a
   pedido: a ficha fica sozinha sobre a caixa.)
   Verde-noite para a caixa, âmbar para o que exige decisão, verde-água
   só para o acerto — que por isso é visto.

   Toda cor vive aqui. Os tons translúcidos também têm token, para a
   próxima repaginação não ter de caçar rgba pelo arquivo inteiro.
   ──────────────────────────────────────────────────────────────── */
/* Nunito servida daqui (licença em fontes/OFL.txt): a CSP da Taioé não busca fonte fora. */
@font-face{font-family:"Nunito";font-weight:400;font-display:swap;src:url("fontes/nunito-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-weight:600;font-display:swap;src:url("fontes/nunito-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-weight:700;font-display:swap;src:url("fontes/nunito-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-weight:800;font-display:swap;src:url("fontes/nunito-latin-800-normal.woff2") format("woff2")}

:root{
  --fundo:#0d1614;        /* a caixa */
  --fundo-2:#16211f;      /* a ficha */
  --fundo-3:#1e2c29;      /* blocos dentro da ficha */
  --borda:#25352f;
  --texto:#e4ebe8;
  --texto-2:#8ba39d;
  --acento:#e8b93f;
  --acento-2:#c8102e;
  --ok:#4dd4a0;
  --erro:#f0796f;
  --quase:#f2d489;

  --acento-fraco:rgba(232,185,63,.13);
  --acento-borda:rgba(232,185,63,.34);
  --ok-fraco:rgba(77,212,160,.13);
  --ok-borda:rgba(77,212,160,.38);
  --erro-fraco:rgba(240,121,111,.10);
  --erro-borda:rgba(240,121,111,.42);
  --quase-fraco:rgba(242,212,137,.09);
  --quase-borda:rgba(242,212,137,.34);

  --raio:15px;
  --sombra:0 1px 0 rgba(255,255,255,.05), 0 10px 26px -12px #000;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fundo);
  color:var(--texto);
  font:400 16px/1.5 "Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
  min-height:100vh;
  display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
}

.oculto{display:none !important}

/* ── topo ── */
.topo{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--borda);
  background:rgba(13,22,20,.88);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:10;
}
.marca{font-weight:700;letter-spacing:.3px;color:inherit;text-decoration:none}
.marca span{color:var(--acento)}
.placar{margin-left:auto;font-size:13px;color:var(--texto-2);white-space:nowrap}
.placar b{color:var(--texto)}
.acoes-topo{display:flex;gap:6px}
.icone{
  background:transparent;border:1px solid var(--borda);color:var(--texto-2);
  border-radius:10px;width:36px;height:36px;cursor:pointer;
  display:grid;place-items:center;padding:0;
  transition:color .12s,border-color .12s,background .12s;
}
.icone svg{
  width:19px;height:19px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
/* os botões dos controles deslizantes são vazados, não riscados pela linha */
.icone svg circle{fill:var(--fundo)}
.icone:hover{color:var(--texto);border-color:var(--texto-2);background:var(--fundo-3)}
.icone:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
/* a tela em que você está fica marcada: saber onde se está é barato */
.icone.aqui{color:var(--acento);border-color:var(--acento-borda);background:var(--acento-fraco)}
.icone.aqui svg circle{fill:#1c1a10}

main{flex:1;width:100%;max-width:720px;margin:0 auto;padding:22px 16px 40px}

h1{font-size:26px;margin:0 0 6px}
h2{font-size:20px;margin:0 0 16px}
h3{font-size:15px;margin:0 0 8px;color:var(--acento)}
.sub{color:var(--texto-2);margin:0 0 22px}

/* ── início ── */
.bloco-inicio{text-align:center;padding:36px 0}

/* ── botões ── */
button{font:inherit}
.primario{
  background:linear-gradient(180deg,var(--acento),#f09a2b);
  color:#20160a;border:0;border-radius:12px;padding:13px 22px;
  font-weight:650;cursor:pointer;transition:transform .06s,filter .15s;
}
.primario:hover{filter:brightness(1.06)}
.primario:active{transform:translateY(1px)}
.grande{width:100%;max-width:340px;padding:15px 22px;font-size:17px}
/* Ao rolar até eles depois da resposta, param com uma folga da borda de
   baixo em vez de encostar nela. */
#btn-proximo,#area-julgamento{scroll-margin-bottom:24px}
.secundario{
  background:var(--fundo-3);color:var(--texto);border:1px solid var(--borda);
  border-radius:11px;padding:11px 18px;cursor:pointer;
}
.secundario:hover{border-color:var(--texto-2)}
.linha-botoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* ── a ficha ── */
.fichario{position:relative}

.card{
  position:relative;z-index:1;
  background:var(--fundo-2);border:1px solid var(--borda);
  border-radius:var(--raio);padding:22px;box-shadow:var(--sombra);
}

/* a aba do nível sai por cima da ficha, como a lingueta de um fichário */
.aba{
  position:absolute;top:0;right:24px;z-index:2;
  background:var(--acento);color:#1a1405;
  font-size:11px;font-weight:800;letter-spacing:.9px;
  padding:6px 11px 7px;border-radius:0 0 8px 8px;
}

.card-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;padding-right:56px}
.etiqueta{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;font-weight:600;
  background:var(--acento-fraco);color:var(--acento);
  border:1px solid var(--acento-borda);border-radius:999px;padding:3px 11px;
}
.etiqueta.suave{background:var(--fundo-3);color:var(--texto-2);border-color:var(--borda)}
/* a palavra que destravou esta frase: verde, como a conquista que a trouxe */
.etiqueta.origem{background:var(--ok-fraco);color:var(--ok);border-color:var(--ok-borda);
  font-style:italic;text-transform:none;letter-spacing:0}
.enunciado{color:var(--texto-2);font-size:13.5px;margin:0 0 6px}
/* ── a pergunta não sai da tela ──
   Respondida a pergunta, a tela desce sozinha até o botão, e num card longo
   era a pergunta que sumia por cima — para reler era preciso subir a tela à
   mão. Ela gruda logo abaixo do cabeçalho e a resposta passa por baixo.

   Gruda o enunciado, a frase e a linha tracejada que fecha a pergunta — e
   não a metade de cima inteira. As etiquetas e a aba do nível, que ficam
   acima, sobem e desaparecem atrás do cabeçalho: nada disso se relê, e são
   uns 60px que a resposta ganha num aparelho onde ela mal cabia. Sai de
   graça e sem sobressalto, porque é rolagem comum: esconder aquilo por
   script encolheria a página no meio da rolagem e o card ficaria oscilando
   entre dois tamanhos, justo na faixa em que acaba de grudar.

   A linha é a borda de baixo deste bloco, e não mais a borda de cima do
   «responda em…»: assim ela sobe junto com a pergunta e o bloco fica com
   começo e fim, em vez de terminar no ar.

   As margens negativas fazem o bloco cobrir a ficha de ponta a ponta: sem
   elas, o que rola aparece nas laterais, dentro do respiro de 22px. E o
   respiro de baixo é padding pelo mesmo motivo — margem não pinta fundo, e a
   resposta apareceria pela fresta.

   O gruda vale só dentro da ficha, então quando ela acaba a pergunta sobe
   junto — que é o certo: não há mais resposta para ler embaixo. */
.pergunta-fixa{
  position:sticky;top:var(--altura-topo,65px);z-index:3;
  background:var(--fundo-2);
  margin:0 -22px;
  padding:0 22px 14px;
  border-bottom:1px dashed var(--borda);
}
.termo-linha{display:flex;align-items:flex-start;gap:12px}
.termo{
  font-size:29px;font-weight:800;line-height:1.22;letter-spacing:-.015em;
  color:#fff;overflow-wrap:break-word;flex:1;
}
.termo.frase{font-size:23px;font-style:italic}

/* a bandeira diz de que lado vai a tradução, para não errar a direção */
.bandeira{font-size:22px;line-height:1.3;flex:none}
.rotulo-resposta{
  display:flex;align-items:center;gap:8px;
  margin:0 0 14px;font-size:12.5px;color:var(--texto-2);
  text-transform:uppercase;letter-spacing:.6px;
  /* a linha tracejada passou para a borda de baixo da .pergunta-fixa, para
     grudar junto com ela; aqui fica só o respiro que vinha depois */
  padding-top:13px;
}
.rotulo-resposta .bandeira{font-size:17px}
.resposta-certa .rotulo span{font-size:13px;margin-right:2px}

/* Respondeu em espanhol num card de falso amigo: o aviso devolve a vez em
   vez de contar erro, então usa o amarelo do «deu quase», que é a cor de
   quem não acertou nem errou. */
.aviso-lingua{
  margin:12px 0 0;font-size:14px;line-height:1.45;color:var(--quase);
  background:var(--quase-fraco);border:1px solid var(--quase-borda);
  border-radius:11px;padding:11px 14px;
}
.aviso-lingua b{color:var(--texto);font-weight:700}

/* Degrau da escada dos dominados onde ninguém chegou ainda. */
tr.vago td{opacity:.42}

/* Acertou sem o acento: nem verde nem vermelho, que não é acerto limpo nem
   erro. O mesmo amarelo do «deu quase». */
.aviso-acento{
  margin:-4px 0 12px;font-size:13.5px;color:var(--quase);
}
.aviso-acento b{color:var(--texto);font-weight:700}
/* A variante de outro lugar: não é correção, é informação — por isso o
   tom do texto secundário, e não o amarelo do acento. */
.aviso-regiao{margin:-4px 0 12px;font-size:13.5px;color:var(--texto-2)}
.aviso-regiao b{color:var(--texto);font-weight:700}
/* A letra acentuada que faltou, pintada na resposta certa. O mesmo amarelo
   do aviso, para o olho ligar uma coisa à outra sem ler nada. */
.resposta-certa mark.acento{
  background:var(--quase-fraco);color:var(--quase);
  border-radius:3px;padding:0 1px;box-shadow:0 0 0 1px var(--quase-borda);
}
/* No «deu quase» a diferença é pintada também no que foi escrito. A caixa
   de lá já é amarela, então ali a pintura se inverte: fundo amarelo cheio
   e letra escura, que é o que aparece contra o amarelo fraco da caixa. */
.resposta-dada mark.acento{
  background:var(--quase);color:var(--fundo);
  border-radius:3px;padding:0 2px;box-shadow:none;
}
.forma-rotulo.variante{white-space:normal;display:inline-block;margin:6px 0 0}

/* ── alternativas ── */
.alternativas{display:flex;flex-direction:column;gap:9px}
.alternativa{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--fundo-3);border:1px solid var(--borda);color:var(--texto);
  border-radius:11px;padding:13px 15px;cursor:pointer;
  transition:border-color .12s,background .12s;
}
.alternativa:hover:not(:disabled){border-color:var(--acento);background:var(--fundo-2)}
.alternativa:disabled{cursor:default;opacity:.85}
.alternativa .num{
  flex:none;width:23px;height:23px;border-radius:50%;background:var(--fundo);
  border:1px solid var(--borda);display:grid;place-items:center;
  font-size:12px;font-weight:800;color:var(--acento);
}
.alternativa.certa{border-color:var(--ok);background:var(--ok-fraco);opacity:1}
.alternativa.certa .num{background:var(--ok);border-color:var(--ok);color:#0a231b}
.alternativa.errada{border-color:var(--erro);background:var(--erro-fraco)}

/* ── escrita ── */
#entrada{
  width:100%;background:var(--fundo);border:1px solid var(--borda);
  color:var(--texto);border-radius:11px;padding:14px 15px;font-size:18px;
  /* é um textarea que cresce para baixo com a resposta (ver ajustarEntrada) */
  display:block;font-family:inherit;line-height:1.35;resize:none;overflow:hidden;
  transition:height .18s ease;
}
@media (prefers-reduced-motion:reduce){#entrada{transition:none}}
#entrada:focus{outline:0;border-color:var(--acento)}

/* ── feedback ── */
/* o veredito encostava nos botões de responder (e na última alternativa):
   zero de respiro entre a pergunta respondida e o que veio dela */
#area-feedback{margin-top:18px}
.veredito{font-size:19px;font-weight:700;margin-bottom:14px}
.veredito.ok{color:var(--ok)}
.veredito.erro{color:var(--erro)}
.veredito.quase{color:var(--quase)}
/* Venceu as duas direções. Uma etiqueta, logo abaixo do veredito: no
   mesmo verde do acerto, mas com contorno, para não ser lida como
   subtítulo do «Certo!» — é outra coisa, e maior. */
.conquista{
  display:inline-block;margin:-6px 0 14px;
  background:var(--ok-fraco);color:var(--ok);border:1px solid var(--ok-borda);
  border-radius:999px;padding:4px 13px;font-size:13px;font-weight:700;
  letter-spacing:.3px;
}
.resposta-certa{
  background:var(--fundo-3);border:1px solid var(--borda);border-radius:11px;
  padding:12px 15px;margin-bottom:12px;
}
.resposta-certa .rotulo{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--texto-2);margin-bottom:3px;
}
.resposta-certa strong{font-size:19px}
/* Acertou: a caixa inteira confirma, sem depender de ler o veredito. */
.resposta-certa.certa{background:var(--ok-fraco);border-color:var(--ok-borda)}
.resposta-certa.certa .rotulo{color:var(--ok)}
/* A nota traz pares «🇪🇸 palavra → 🇧🇷 tradução», um por linha, sempre no
   mesmo sentido. Antes ela misturava as duas direções na mesma frase e
   ninguém sabia qual palavra era de qual língua. */
.nota{
  color:var(--texto-2);font-size:14px;margin:0 0 12px;
  border-left:2px solid var(--acento);padding-left:12px;
  white-space:pre-line;line-height:1.7;
}
.medidas{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.medida{
  font-size:12px;background:var(--fundo-3);border:1px solid var(--borda);
  border-radius:999px;padding:4px 11px;color:var(--texto-2);
}
.medida b{color:var(--texto);font-weight:600}

.resposta-dada{
  background:var(--quase-fraco);border:1px solid var(--quase-borda);
  border-radius:11px;padding:12px 15px;margin-bottom:10px;
}
.resposta-dada .rotulo{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--quase);margin-bottom:3px;
}
.resposta-dada strong{font-size:18px}

.julgamento{
  border-top:1px solid var(--borda);margin:14px 0 18px;padding-top:16px;
}
.pergunta-julgamento{margin:0;font-size:14.5px}
.julgamento .linha-botoes{margin-top:10px}
.opcao-julgamento{
  flex:1;min-width:130px;border-radius:999px;padding:11px 15px;
  font-size:14.5px;font-weight:600;cursor:pointer;
  background:var(--fundo-3);border:1px solid var(--borda);color:var(--texto);
}
.opcao-julgamento.acertei:hover{border-color:var(--ok);color:var(--ok);background:var(--ok-fraco)}
.opcao-julgamento.errei:hover{border-color:var(--erro);color:var(--erro);background:var(--erro-fraco)}

/* ── painel ── */
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:22px}
.metrica{background:var(--fundo-2);border:1px solid var(--borda);border-radius:12px;padding:14px}
.metrica .valor{font-size:25px;font-weight:700;line-height:1.1}
.metrica .rotulo{font-size:12px;color:var(--texto-2);margin-top:3px}
.legenda{color:var(--texto-2);font-size:13px;margin:-8px 0 16px;line-height:1.55}
.legenda b{color:var(--texto)}

table{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:22px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--borda)}
th{color:var(--texto-2);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
/* a linha de totais fecha a tabela: sem borda embaixo e um pouco mais firme */
tr.soma td{border-bottom:none;border-top:1px solid var(--borda);font-weight:600;color:var(--texto)}

/* ── tabela de etapas ──
   São seis colunas de números com rótulos longos ("Escrevendo", "Dominados").
   Deitados, eles decidiam sozinhos a largura da tabela e estouravam a tela do
   celular. De pé, cada coluna fica do tamanho do número que carrega. */
th.vert{
  padding:8px 3px;vertical-align:bottom;text-align:center;
}
th.vert span{
  display:inline-block;white-space:nowrap;
  writing-mode:vertical-rl;transform:rotate(180deg);  /* lê de baixo para cima */
}
.barra{height:6px;background:var(--fundo-3);border-radius:99px;overflow:hidden;min-width:60px}
.barra i{display:block;height:100%;background:var(--ok)}

/* ── o caminho até aqui ──
   Três cores para três etapas, escolhidas para se separarem também em visão
   com deficiência de cor, e conferidas contra o fundo escuro da ficha. */
:root{
  --serie-espt:#3987e5;
  --serie-ptes:#d95926;
  --serie-dom:#199e70;
  /* Os seis degraus do dominado: um verde só, do escuro ao claro. Conferido
     como escala ordinal contra o fundo escuro — tom único, claridade sempre
     subindo, passo visível entre vizinhos, e o degrau mais escuro ainda com
     3,1:1 de contraste. */
  --degrau-0:#14764f;
  --degrau-1:#1e9a71;
  --degrau-2:#33b98a;
  --degrau-3:#5ecfa4;
  --degrau-4:#8ce0bf;
  --degrau-5:#b9f0d8;
  /* Os seis degraus no caminho até aqui, cada um uma etapa com cor própria
     (pedido de 26/09): pedras que clareiam até o diamante — ametista,
     turquesa, esmeralda, topázio (o âmbar da casa), quartzo rosa e branco.
     A claridade sobe a cada degrau, então a ordem ainda se lê pelo tom; e
     a sequência inteira, com es→pt e pt→es embaixo, passou no validador de
     paleta contra a ficha: vizinhos a ΔE 16,7 na visão comum e 8,4 na
     simulação de daltonismo (mínimos 15 e 8), todos acima de 3:1. */
  --escada-0:#755ebf;
  --escada-1:#099399;
  --escada-2:#01c682;
  --escada-3:#e6af28;
  --escada-4:#f8b9da;
  --escada-5:#ffffff;
}
svg.grafico-etapas{display:block;width:100%;height:auto;margin:4px 0 14px}
svg.grafico-etapas .malha{stroke:var(--borda);stroke-width:1}
svg.grafico-etapas .eixo{fill:var(--texto-2);font-size:10px}
/* a fresta é o fundo da ficha passando entre duas bandas */
svg.grafico-etapas .fresta{stroke:var(--fundo-2);stroke-width:1;stroke-linejoin:round}
svg.grafico-etapas .cursor{stroke:var(--texto-2);stroke-width:1}
.chaves{display:flex;flex-wrap:wrap;gap:6px 18px;margin:2px 0 4px}
.chaves .chave{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--texto-2)}
.chaves .chave i{width:11px;height:11px;border-radius:3px;flex:none}
.chaves .chave b{color:var(--texto);font-variant-numeric:tabular-nums}

/* ── os gráficos do diário ──
   SVG de 500 de largura que a tela encolhe. O teto de 600px segura o texto
   num tamanho decente no computador; no celular, 13 unidades viram uns 9px. */
svg.grafico{display:block;width:100%;max-width:600px;height:auto;margin:4px 0 24px;overflow:visible}
svg.grafico text{fill:var(--texto-2);font-size:13px;font-family:inherit}
svg.grafico text.forte{fill:var(--texto);font-weight:700}
svg.grafico .malha{stroke:var(--borda);stroke-width:1}
svg.grafico .alvo{cursor:pointer}
svg.grafico .alvo.tocado{stroke:var(--texto);stroke-width:2}
.calendario svg.grafico text{font-size:11px}
@media (max-width:520px){ svg.grafico text{font-size:16px} .calendario svg.grafico text{font-size:12px} }
.dica{
  position:fixed;z-index:30;pointer-events:none;background:var(--fundo-3);
  border:1px solid var(--borda);color:var(--texto);font-size:13px;line-height:1.4;
  padding:7px 10px;border-radius:9px;box-shadow:0 10px 24px -12px #000;
  max-width:260px;font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* a barra fica na sua própria coluna, sem título: o número ao lado já diz o
   que ela mede, e o rótulo repetido só roubaria largura */
td.col-barra{width:1%;padding-left:8px}
td.col-barra .barra{width:56px;min-width:0}
table.nivel td,table.nivel th{padding-left:5px;padding-right:5px}
table.nivel td:first-child,table.nivel th:first-child{padding-left:10px}

/* ── configurações ── */
.grupo{
  background:var(--fundo-2);border:1px solid var(--borda);border-radius:12px;
  padding:16px;margin-bottom:16px;
}
.grupo.perigo{border-color:var(--erro-borda)}
.grupo.perigo h3{color:var(--erro)}
.ajuda{color:var(--texto-2);font-size:13px;margin:0 0 14px}
.ajuda code{background:var(--fundo-3);padding:1px 6px;border-radius:5px;font-size:12px}
label{display:block;font-size:13px;color:var(--texto-2);margin-bottom:12px}
label input[type=text],label input[type=password]{
  display:block;width:100%;margin-top:5px;background:var(--fundo);
  border:1px solid var(--borda);color:var(--texto);border-radius:9px;padding:10px 12px;font-size:14px;
}
label input:focus{outline:0;border-color:var(--acento)}
.linha-check{display:flex;align-items:center;gap:9px;color:var(--texto)}
.linha-check input{width:17px;height:17px;accent-color:var(--acento)}
.estado-sync{font-size:13px;margin:12px 0 0;min-height:19px}
.estado-sync.ok{color:var(--ok)}
.estado-sync.erro{color:var(--erro)}

/* ── rodapé ── */
.rodape{
  border-top:1px solid var(--borda);padding:9px 18px;
  font-size:12px;color:var(--texto-2);text-align:right;
}

@media (max-width:520px){
  .termo{font-size:26px}
  .termo.frase{font-size:20px}
  .placar{display:none}
  main{padding:16px 13px 30px}
}

/* quando o erro foi de conjugação, o feedback nomeia o que ele escreveu */
.resposta-dada.conjugacao{
  background:var(--erro-fraco);border-color:var(--erro-borda);
}
.resposta-dada.conjugacao .rotulo{color:var(--erro)}
.forma-rotulo{
  font-size:12.5px;font-weight:500;color:var(--texto-2);
  border:1px solid var(--borda);border-radius:999px;padding:2px 9px;
  margin-left:8px;white-space:nowrap;
}

/* contestar: o card pode estar errado, não você */
.contestar{margin-bottom:16px}
.link-contestar{
  background:var(--erro-fraco);border:1px solid var(--erro-borda);color:var(--erro);
  border-radius:10px;padding:10px 14px;font-size:14px;font-weight:500;cursor:pointer;width:100%;
  text-align:left;transition:border-color .12s,background .12s;
}
.link-contestar:hover{border-color:var(--erro);background:var(--erro-fraco)}
.aviso-contestado{margin:9px 0 0;font-size:13px;color:var(--ok)}

/* ── comentar um card ──
   Discreto de propósito: é uma saída sempre disponível, não uma ação que
   o card esteja pedindo. Sublinhado fino, do lado do texto secundário. */
.linha-comentar{margin:10px 0 16px;text-align:right}
.link-comentar{
  background:none;border:none;color:var(--texto-2);font:inherit;font-size:13px;
  cursor:pointer;padding:2px 0;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--borda);
}
.link-comentar:hover{color:var(--texto);text-decoration-color:var(--texto-2)}
.link-comentar.na-lista{margin-top:8px;font-size:12.5px}
/* «Não quero aprender este card»: um link miúdo, que na estreia do card vira
   botão — é a hora em que a pessoa sabe se a palavra já é dela. */
.linha-arquivar{margin:10px 0 0;text-align:right}
.link-arquivar{background:none;border:0;padding:4px 0;font-size:12.5px;color:var(--texto-2);
  text-decoration:underline;text-decoration-color:var(--borda);text-underline-offset:3px;cursor:pointer}
.link-arquivar:hover{color:var(--texto)}
.link-arquivar.evidente{border:1px solid var(--borda);border-radius:10px;padding:8px 12px;
  text-decoration:none;font-size:13.5px;color:var(--texto)}
.link-arquivar.evidente:hover{border-color:var(--texto-2)}

.comentario-fundo{
  position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.comentario-painel{
  background:var(--fundo-2);border:1px solid var(--borda);border-radius:var(--raio);
  box-shadow:var(--sombra);padding:20px;width:100%;max-width:460px;
}
.comentario-painel h3{margin:0 0 4px;font-size:17px}
.comentario-alvo{
  margin:0 0 14px;font-size:14px;color:var(--texto-2);line-height:1.5;
  border-left:2px solid var(--acento);padding-left:10px;
}
#comentario-texto{
  width:100%;background:var(--fundo);border:1px solid var(--borda);color:var(--texto);
  border-radius:10px;padding:11px 13px;font:inherit;font-size:15px;line-height:1.55;
  resize:vertical;min-height:88px;
}
#comentario-texto:focus{outline:none;border-color:var(--acento)}
.comentario-conta{margin:6px 0 14px;font-size:12.5px;color:var(--texto-2);text-align:right}
.comentario-conta.no-fim{color:var(--quase)}

/* ── lista de todos os cards ── */
.filtros{
  background:var(--fundo-2);border:1px solid var(--borda);border-radius:12px;
  padding:14px;margin-bottom:16px;position:sticky;top:66px;z-index:5;
}
#busca-cards{
  width:100%;background:var(--fundo);border:1px solid var(--borda);
  color:var(--texto);border-radius:10px;padding:11px 13px;font-size:15px;
}
#busca-cards:focus{outline:0;border-color:var(--acento)}
.linha-filtros{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px}
.filtro{
  display:flex;flex-direction:column;gap:4px;margin:0;flex:1;min-width:132px;
  font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--texto-2);
}
.filtro select{
  background:var(--fundo);border:1px solid var(--borda);color:var(--texto);
  border-radius:9px;padding:8px 9px;font:inherit;font-size:13.5px;text-transform:none;
  letter-spacing:normal;
}
.filtro select:focus{outline:0;border-color:var(--acento)}
.contagem{margin:11px 0 0;font-size:13px;color:var(--texto-2)}
.contagem b{color:var(--texto)}

.lista-cards{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.card-linha{
  background:var(--fundo-2);border:1px solid var(--borda);
  border-left:3px solid var(--borda);border-radius:10px;padding:12px 14px;
}
.card-linha.visto{border-left-color:var(--acento)}
.card-linha.dominado{border-left-color:var(--ok)}
.card-linha-topo{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.card-linha .es{font-weight:650;color:#fff;font-size:16px}
.card-linha .seta{color:var(--texto-2);font-size:13px}
.card-linha .pt{color:var(--texto)}
.card-linha-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center}
.selo{
  font-size:11px;border-radius:999px;padding:2px 9px;
  border:1px solid var(--borda);color:var(--texto-2);background:var(--fundo-3);
}
.selo.nivel{color:var(--acento);border-color:var(--acento-borda);background:var(--acento-fraco)}
.selo.situacao.novo{opacity:.7}
.selo.situacao.preso{color:var(--texto-2);border-style:dashed;opacity:.85}
.selo.situacao.andamento{color:var(--acento)}
.selo.situacao.invertido{color:var(--quase);border-color:var(--quase-borda)}
.selo.situacao.dominado{color:var(--ok);border-color:var(--ok-borda)}
.card-linha-nota{
  color:var(--texto-2);font-size:13px;margin:9px 0 0;
  border-left:2px solid var(--borda);padding-left:10px;
  white-space:pre-line;line-height:1.65;
}
.vazio{color:var(--texto-2);text-align:center;padding:30px 0}

@media (max-width:520px){
  .filtros{position:static}
  .filtro{min-width:calc(50% - 5px)}
}

/* ── os textos ──
   O texto inteiro, original e tradução lado a lado: a recompensa (manual,
   seção 17.4). Cada estrofe ou parágrafo é uma tabela; no celular as duas
   colunas viram uma, com a tradução sob cada linha. */
.carta-texto{margin:8px 0 16px}
.texto-titulo{margin:0 0 2px;font-size:18px}
.texto-autor{margin:0 0 12px;color:var(--texto-2);font-size:14px}
.recompensa{font-weight:600;margin:0 0 12px}
.tabela-texto{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:14px}
.tabela-texto td{padding:3px 8px;vertical-align:top}
.tabela-texto .verso-es{width:50%}
.verso-es{color:var(--texto);font-style:italic}
.verso-pt{color:var(--texto-2)}
.tabela-texto.prosa td{padding:6px 8px;line-height:1.5}
.tabela-texto.prosa .verso-es{font-style:normal}
.texto-lido{margin:6px 0}
.texto-lido summary{cursor:pointer}
@media (max-width:600px){
  .tabela-texto td{display:block;width:auto;padding:1px 4px}
  .tabela-texto .verso-pt{padding-bottom:8px}
}


/* ── Taioé: a porta e a escolha do curso ── */
#porta-texto.erro{color:var(--erro)}
.escolha-curso{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:22px}
.curso{
  display:flex;align-items:center;gap:14px;min-width:210px;padding:16px 22px;
  background:var(--fundo-2);color:var(--texto);border:1px solid var(--borda);border-radius:var(--raio);
  font:inherit;font-weight:700;font-size:18px;cursor:pointer;box-shadow:var(--sombra);
  transition:border-color .15s,transform .15s;
}
.curso:hover,.curso:focus-visible{border-color:var(--acento);transform:translateY(-1px);outline:none}
.curso-bandeira{width:36px;height:24px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.curso-nome{letter-spacing:.2px}