/* Trilha do Sabiá: o protótipo aprovado pelo Eduardo (26/10) dentro do app. Uma coluna de papel creme: a trilha desce em
   zigue-zague com uma bolinha por lição; a lição ocupa a tela toda, com a pergunta em cima, as opções grandes no meio e o
   botão no polegar. Usa as cores e as letras do app (app.css); aqui ficam só os tons próprios da trilha. */
.tr {
  --laranja-no: #E0600E; --laranja-no-funda: #A84508; --folha-no: #1E9650; --folha-no-funda: #13703A; --sol-borda: #E8B33A;
  --uva-forte: #5B3FC4; --uva-funda: #3E2A8C; --azul-forte: #1F66C9; --azul-funda: #154A93; --folha-forte: #17803F;
  --bloqueada: #EEE6D8; --bloqueada-funda: #D9CCB6; --bloqueada-texto: #675E50; /* cinza quente, combina com o creme */
  position: relative; max-width: 560px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; background: var(--ceu-fundo);
  box-shadow: 0 0 0 1px var(--linha); display: flex; flex-direction: column; overflow-x: clip;
}
.tr svg.ic { width: 24px; height: 24px; flex: none; }
/* :where() não pesa: a letra e a cor de cada botão (bolinha, opção, "Conferir") ficam com a classe dele */
:where(.tr) button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.tr button:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }

/* ---------- topo ---------- */
.tr-topo { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px;
  padding-block: calc(10px + env(safe-area-inset-top, 0px)) 10px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px));
  background: var(--papel); border-bottom: 2px solid var(--linha); }
.tr-icone { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 0; border-radius: 14px; background: none; color: var(--tinta-3); cursor: pointer; }
.tr-icone:active { background: var(--ceu); }
.tr-materia { display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 48px; padding: 6px 10px 6px 8px; border: 2px solid var(--linha); border-radius: 14px;
  background: var(--papel); cursor: pointer; font: 600 17px var(--f-titulo); color: var(--tinta); }
.tr-materia > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-materia svg.ic:first-child { color: var(--laranja-botao); }
.tr-materia .tr-seta { width: 18px; height: 18px; color: var(--tinta-3); transform: rotate(90deg); }
.tr-placar { display: flex; gap: 4px; margin-left: auto; }
.tr-contador { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 6px; border-radius: 12px; font: 700 18px var(--f-titulo); font-variant-numeric: tabular-nums; }
.tr-contador--ofensiva { color: var(--laranja-texto); }
.tr-contador--estrelas { color: var(--sol-funda); }
.tr-contador--estrelas svg.ic { color: var(--sol); }

/* ---------- trilha ---------- */
.tr-trilha { display: flex; flex-direction: column; gap: 28px; padding-block: 20px calc(48px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.tr-bloco { display: flex; flex-direction: column; gap: 22px; }
/* o título da unidade gruda embaixo do topo enquanto a criança desce por ela (sempre sabe em que unidade está) */
.tr-unidade { position: sticky; top: calc(70px + env(safe-area-inset-top, 0px)); z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 20px; color: #fff; }
/* tela baixinha (celular deitado): o título não gruda, senão cobre a lição de agora quando a trilha rola até ela */
@media (max-height: 560px) { .tr-unidade { position: static; } }
.tr-unidade-txt { min-width: 0; }
.tr-unidade small { display: block; font: 700 13px var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; }
.tr-unidade h2 { margin: 2px 0 0; font: 600 23px/1.15 var(--f-titulo); text-wrap: balance; }
.tr-letras { font: 700 15px var(--f-leitura); letter-spacing: .2em; margin-top: 4px; overflow-wrap: anywhere; }
.tr-unidade--laranja { background: var(--laranja-botao); box-shadow: 0 6px 0 var(--laranja-botao-funda); }
.tr-unidade--uva { background: var(--uva-forte); box-shadow: 0 6px 0 var(--uva-funda); }
.tr-unidade--azul { background: var(--azul-forte); box-shadow: 0 6px 0 var(--azul-funda); }
.tr-unidade--folha { background: var(--folha-forte); box-shadow: 0 6px 0 var(--folha-botao-funda); }
.tr-unidade--fechada { background: var(--bloqueada); color: var(--tinta-2); box-shadow: 0 6px 0 var(--bloqueada-funda); }
.tr-selo-cadeado { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .6); color: var(--tinta-3); }
.tr-pular { flex: none; min-height: 44px; padding: 0 14px; border: 2px solid var(--linha-forte); border-radius: 14px; background: var(--papel); color: var(--azul-texto);
  font: 700 15px var(--f-titulo); cursor: pointer; box-shadow: 0 3px 0 var(--linha-forte); }
.tr-pular:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--linha-forte); }
.tr-plano { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--sol-clara); border: 2px solid var(--sol-borda);
  color: var(--tinta); font: 700 16px/1.4 var(--f-texto); }
.tr-plano svg.ic { color: var(--sol-funda); margin-top: 1px; }
.tr-caminho { position: relative; display: flex; flex-direction: column; align-items: center; gap: 48px; padding-block: 56px 8px; } /* em cima, lugar para o balão "Começar" da primeira lição */
.tr-parada { position: relative; display: flex; flex-direction: column; align-items: center; transform: translateX(var(--desvio, 0px)); }
.tr-parada--aberta { z-index: 6; }
.tr-no { --cor: var(--bloqueada); --funda: var(--bloqueada-funda); position: relative; width: 78px; height: 72px; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--cor); box-shadow: 0 7px 0 var(--funda); color: var(--bloqueada-texto); font: 700 30px/1 var(--f-leitura); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.tr-no svg.ic { width: 34px; height: 34px; }
.tr-no:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--funda); }
.tr-no-desenho { font-size: 34px; line-height: 1; }
.tr-no--feita { --cor: var(--folha-no); --funda: var(--folha-no-funda); color: #fff; }
.tr-no--pulada { --cor: #CDEFD9; --funda: #9FD4B2; color: var(--folha-texto); }
.tr-no--atual { --cor: var(--laranja-no); --funda: var(--laranja-no-funda); color: #fff; }
.tr-no--atual::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 4px solid var(--laranja); opacity: .55; animation: tr-anel 1.8s ease-out infinite; }
.tr-no--trofeu.tr-no--feita { --cor: var(--sol); --funda: var(--sol-borda); color: var(--sol-funda); }
.tr-visto { position: absolute; right: -4px; bottom: -6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--sol); color: var(--sol-funda); border: 3px solid var(--ceu-fundo); }
.tr-visto svg.ic { width: 16px; height: 16px; }
.tr-balao-comecar { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 14px; background: var(--papel); border: 2px solid var(--linha);
  color: var(--laranja-texto); font: 700 15px var(--f-titulo); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; animation: tr-flutua 1.6s ease-in-out infinite; pointer-events: none; }
.tr-balao-comecar::after { content: ""; position: absolute; left: 50%; top: 100%; width: 12px; height: 12px; background: var(--papel); border-right: 2px solid var(--linha); border-bottom: 2px solid var(--linha); transform: translate(-50%, -6px) rotate(45deg); }
/* o cartão da lição fica no meio da coluna (não sai da tela) e a setinha aponta para a bolinha */
.tr-cartao { position: absolute; top: calc(100% + 16px); left: 50%; z-index: 4; width: min(300px, calc(100vw - 48px)); transform: translateX(calc(-50% - var(--desvio, 0px)));
  padding: 16px; border-radius: 18px; background: var(--papel); border: 2px solid var(--linha); box-shadow: 0 14px 30px -16px rgba(28, 42, 74, .45); display: grid; gap: 10px; text-align: left; animation: tr-aparece .18s ease-out; }
.tr-cartao::before { content: ""; position: absolute; left: calc(50% + var(--desvio, 0px)); bottom: 100%; width: 14px; height: 14px; background: var(--papel); border-left: 2px solid var(--linha); border-top: 2px solid var(--linha); transform: translate(-50%, 8px) rotate(45deg); }
.tr-cartao h3 { margin: 0; font: 600 19px var(--f-titulo); }
.tr-cartao p { margin: 0; color: var(--tinta-2); font-size: 15px; line-height: 1.4; }
.tr-mascote { position: absolute; width: 96px; pointer-events: none; animation: tr-balanca 3s ease-in-out infinite; }
.tr-mascote .sabia, .tr-sabia-fala .sabia, .tr-sabia-fim .sabia { display: block; width: 100%; height: auto; overflow: visible; }
.tr-nota { margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--papel); border: 2px dashed var(--linha); color: var(--tinta-2); font-size: 15px; line-height: 1.45; }

/* ---------- botões grandes (afundam ao toque) ---------- */
.tr-botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; padding: 0 20px; border: 0; border-radius: 16px; cursor: pointer;
  font: 600 19px var(--f-titulo); letter-spacing: .04em; text-transform: uppercase; background: var(--laranja-botao); color: #fff; box-shadow: 0 5px 0 var(--laranja-botao-funda); transition: transform .1s, box-shadow .1s; }
.tr-botao:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--laranja-botao-funda); }
.tr-botao:disabled { background: var(--bloqueada); color: var(--bloqueada-texto); box-shadow: 0 5px 0 var(--bloqueada-funda); cursor: default; transform: none; }
.tr-botao--folha { background: var(--folha-forte); box-shadow: 0 5px 0 var(--folha-botao-funda); }
.tr-botao--folha:active { box-shadow: 0 1px 0 var(--folha-botao-funda); }
.tr-botao--cereja { background: var(--cereja-texto); box-shadow: 0 5px 0 #7E1519; }
.tr-botao--cereja:active { box-shadow: 0 1px 0 #7E1519; }
.tr-botao--claro { background: var(--papel); color: var(--azul-texto); border: 2px solid var(--linha-forte); box-shadow: 0 4px 0 var(--linha-forte); }
.tr-botao--claro:active { box-shadow: 0 1px 0 var(--linha-forte); }

/* ---------- lição ---------- */
.tr--licao { background: var(--creme); animation: tr-aparece .2s ease-out; } /* a lição no papel creme; opções e balões em marfim por cima */
/* o palco: ocupa a altura que sobra e põe o exercício no meio dela; em tela baixa, nada de espaço a mais (as margens
   automáticas viram zero e nada sai da tela) */
.tr-palco { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.tr-palco > :first-child { margin-top: auto; }
.tr-palco > :last-child { margin-bottom: auto; }
.tr-licao-corpo.entra { animation: tr-entra-ex .3s cubic-bezier(.2, .8, .3, 1); }
@keyframes tr-entra-ex { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
.tr-licao-topo { display: flex; align-items: center; gap: 12px; padding-block: calc(12px + env(safe-area-inset-top, 0px)) 8px;
  padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.tr-barra { flex: 1; height: 18px; border-radius: 99px; background: var(--bloqueada); overflow: hidden; }
.tr-barra span { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--folha-no); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .12), inset 0 4px 0 rgba(255, 255, 255, .35); transition: width .45s cubic-bezier(.3, 1.4, .5, 1); }
.tr-licao-corpo { flex: 1; display: flex; flex-direction: column; gap: 20px; padding-block: 12px 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.tr-etiqueta { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--uva-clara); color: var(--uva-forte);
  font: 700 13px var(--f-titulo); letter-spacing: .06em; text-transform: uppercase; }
.tr-enunciado { margin: 0; font: 600 25px/1.2 var(--f-titulo); text-wrap: balance; outline: none; }
.tr-fala { display: flex; align-items: flex-end; gap: 10px; }
.tr-sabia-fala { width: 88px; flex: none; }
.tr-fala-balao { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--linha); border-radius: 18px; background: var(--papel); margin-bottom: 18px; }
.tr-fala-balao::before { content: ""; position: absolute; left: -9px; bottom: 16px; width: 14px; height: 14px; background: var(--papel); border-left: 2px solid var(--linha); border-bottom: 2px solid var(--linha); transform: rotate(45deg); }
.tr-ouvir { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border: 0; border-radius: 14px; background: var(--azul); color: #fff; box-shadow: 0 4px 0 #1B5BB5; cursor: pointer; }
.tr-ouvir:active { transform: translateY(3px); box-shadow: 0 1px 0 #1B5BB5; }
.tr-ouvir svg.ic { width: 28px; height: 28px; }
.tr-fala-texto { font: 700 20px/1.3 var(--f-leitura); min-width: 0; }
.tr-fala--so-balao .tr-fala-balao { margin-bottom: 0; }
.tr-fala--so-balao .tr-fala-balao::before { display: none; }
.tr-cartao-boca { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--sol-clara); border: 2px solid var(--sol-borda); }
.tr-cartao-boca .tr-desenho { font-size: 52px; line-height: 1; }
.tr-cartao-boca > div { flex: 1; min-width: 0; }
.tr-cartao-boca b { display: block; font: 700 21px var(--f-leitura); }
.tr-palavra-falta { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tr-desenho-grande { font-size: clamp(76px, 10.5vh, 104px); line-height: 1.1; }
.tr-letras-palavra { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; font: 700 34px var(--f-leitura); letter-spacing: .02em; }
.tr-buraco { min-width: 48px; text-align: center; border-bottom: 4px solid var(--azul); color: var(--azul-texto); }
.tr-letra-grande { align-self: center; font: 700 96px/1 var(--f-leitura); color: var(--tinta); }
.tr-palavra-grande { align-self: center; font: 700 56px/1.1 var(--f-leitura); letter-spacing: .04em; color: var(--tinta); overflow-wrap: anywhere; text-align: center; }
.tr-frase { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; padding: 16px; border-radius: 18px; background: var(--papel); border: 2px solid var(--linha);
  font: 700 30px/1.25 var(--f-leitura); text-align: center; }
.tr-opcoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tr-opcoes--palavras { grid-template-columns: 1fr; }
.tr-opcoes--frases { grid-template-columns: 1fr; }
/* as opções crescem nas telas altas (celular grande e tablet em pé) e ficam como estavam nas baixas */
.tr-opcao { min-height: clamp(104px, 14vh, 136px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border: 2px solid var(--linha-forte); border-bottom-width: 5px;
  border-radius: 18px; background: var(--papel); color: var(--tinta); cursor: pointer; transition: transform .1s, border-color .1s, background .1s; }
.tr-opcoes--palavras .tr-opcao, .tr-opcoes--frases .tr-opcao { min-height: clamp(72px, 9.5vh, 92px); }
.tr-opcao:active { transform: translateY(3px); border-bottom-width: 2px; }
.tr-opcao[aria-pressed="true"] { border-color: var(--azul); background: var(--azul-clara); color: var(--azul-texto); }
.tr-letra { font: 700 clamp(50px, 6.8vh, 64px)/1 var(--f-leitura); }
.tr-opcoes--palavras .tr-letra { font-size: 34px; letter-spacing: .04em; }
.tr-frase-op { font: 700 24px/1.3 var(--f-leitura); }
.tr-desenho { font-size: clamp(48px, 6.4vh, 62px); line-height: 1; }
.tr-nome { font: 700 17px var(--f-leitura); overflow-wrap: anywhere; }
.tr-opcao.certa { border-color: var(--folha-forte); background: var(--folha-clara); color: var(--folha-texto); }
.tr-opcao.errada { border-color: var(--cereja); background: var(--cereja-clara); color: var(--cereja-texto); animation: tr-treme .35s; }
.tr-opcao.mostrar-certa { border-color: var(--folha-forte); background: var(--folha-clara); color: var(--folha-texto); animation: tr-lab-entra .3s ease-out; }
.tr-opcao:disabled { cursor: default; }
.tr-pares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tr-coluna { display: grid; gap: 12px; }
.tr-pares .tr-opcao { min-height: clamp(76px, 10.5vh, 104px); }
/* montar e ordenar: os lugares vazios são caixinhas tracejadas (a criança vê onde a peça vai) e as peças são grandes */
.tr-lacunas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tr-lacuna { min-width: clamp(58px, 17vw, 84px); min-height: clamp(60px, 8.4vh, 76px); padding: 0 10px; display: grid; place-items: center; border: 3px dashed var(--linha-forte); border-radius: 16px;
  font: 700 30px var(--f-leitura); color: var(--azul-texto); }
.tr-lacuna.cheia { border-style: solid; border-color: var(--folha-forte); background: var(--folha-clara); color: var(--folha-texto); animation: tr-lab-entra .25s ease-out; }
.tr-pecas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tr-peca { min-width: clamp(64px, 20vw, 84px); min-height: clamp(64px, 8.8vh, 80px); padding: 0 clamp(12px, 3.6vw, 18px); border: 2px solid var(--linha-forte); border-bottom-width: 5px; border-radius: 16px; background: var(--papel); color: var(--tinta);
  font: 700 30px var(--f-leitura); cursor: pointer; }
.tr-peca:active { transform: translateY(3px); border-bottom-width: 2px; }
.tr-peca.usada { visibility: hidden; }
.tr-peca.errada { border-color: var(--cereja); background: var(--cereja-clara); animation: tr-treme .35s; }
.tr-licao-baixo { position: sticky; bottom: 0; padding-block: 14px calc(16px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--papel); border-top: 2px solid var(--linha); }
.tr-retorno { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; gap: 14px; max-width: 560px; margin: 0 auto;
  padding-block: 18px calc(18px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); animation: tr-sobe .22s ease-out; }
.tr-retorno--certo { background: var(--folha-clara); color: var(--folha-texto); }
.tr-retorno--errado { background: var(--cereja-clara); color: var(--cereja-texto); }
.tr-retorno-linha { display: flex; align-items: center; gap: 12px; }
.tr-retorno-icone { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--papel); }
.tr-retorno-icone svg.ic { width: 28px; height: 28px; stroke-width: 3; }
.tr-retorno b { display: block; font: 600 24px var(--f-titulo); }
.tr-retorno p { margin: 2px 0 0; font-size: 16px; font-weight: 700; }
.tr-guardar { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding-top: 24px; }
.tr-guardar .sabia { width: 140px; }
.tr-cortina { position: fixed; inset: 0; z-index: 40; background: rgba(15, 22, 38, .45); animation: tr-aparece .15s ease-out; }
.tr-folha { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-width: 560px; margin: 0 auto; display: grid; gap: 12px; border-radius: 24px 24px 0 0; background: var(--papel);
  padding-block: 20px calc(20px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); animation: tr-sobe .22s ease-out;
  /* celular deitado e baixinho: a janela nunca passa do topo; o que não couber rola dentro dela */
  max-height: calc(100vh - 12px - env(safe-area-inset-top, 0px)); max-height: calc(100dvh - 12px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.tr-folha h2 { margin: 0 0 4px; font: 600 22px var(--f-titulo); }
.tr-folha p { margin: 0; color: var(--tinta-2); line-height: 1.45; }
.tr-materia-item { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border: 2px solid var(--linha); border-radius: 16px; background: var(--papel); text-align: left; cursor: pointer; }
.tr-materia-item b { display: block; font: 600 18px var(--f-titulo); }
.tr-materia-item small { color: var(--tinta-3); font-size: 14px; font-weight: 700; }
.tr-materia-item[aria-current="true"] { border-color: var(--laranja-botao); background: var(--laranja-clara); }
.tr-materia-item:disabled { cursor: default; opacity: .75; }
.tr-ic-materia { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; flex: none; }
.tr-ic-materia--alfabetizacao { background: var(--laranja-clara); color: var(--laranja-botao); }
.tr-ic-materia--matematica { background: var(--azul-clara); color: var(--azul-texto); }
.tr-ic-materia--ingles { background: var(--uva-clara); color: var(--uva-forte); }
.tr-ic-materia--ciencias { background: var(--folha-clara); color: var(--folha-texto); }
.tr-fim-linha { margin-left: auto; color: var(--laranja-botao); }

/* ---------- fim da lição ---------- */
.tr--fim { gap: 18px; overflow: hidden; text-align: center; background: var(--papel);
  padding-block: calc(40px + env(safe-area-inset-top, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.tr-sabia-fim { width: 170px; animation: tr-festa 1s ease-in-out infinite alternate; }
.tr--fim h1 { margin: 0; font: 700 34px var(--f-titulo); color: var(--laranja-texto); }
.tr-sub { margin: 0; font: 700 19px/1.35 var(--f-leitura); color: var(--tinta-2); text-wrap: balance; }
.tr-fim-cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.tr-cartao-fim { display: grid; gap: 6px; padding: 12px 6px; border-radius: 16px; border: 2px solid; }
.tr-cartao-fim small { font: 700 12px var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; }
.tr-cartao-fim b { font: 700 22px var(--f-titulo); font-variant-numeric: tabular-nums; }
.tr-cartao-fim--sol { border-color: var(--sol-borda); background: var(--sol-clara); color: var(--sol-funda); }
.tr-cartao-fim--folha { border-color: var(--folha-no); background: var(--folha-clara); color: var(--folha-texto); }
.tr-cartao-fim--laranja { border-color: var(--laranja); background: var(--laranja-clara); color: var(--laranja-texto); }
/* a festa no meio da tela; o "Continuar" embaixo, no lugar do botão da lição */
.tr-fim-corpo { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; width: 100%; max-width: 480px; margin: 0 auto; }
.tr-fim-baixo { position: relative; width: 100%; max-width: 420px; margin: 0 auto; }
.tr-confete { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tr-confete i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 3px; animation: tr-cai 2.6s linear forwards; }

/* ---------- a trilha no início da criança e no painel da família ---------- */
.kid-trilha { display: grid; gap: 12px; padding: 18px; border-radius: 22px; background: var(--papel); border: 3px solid var(--laranja); box-shadow: 0 6px 0 var(--laranja-clara); }
.kid-trilha-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kid-trilha-cab h2 { margin: 0; font: 600 24px var(--f-titulo); }
.kid-trilha-cab svg.ic { width: 28px; height: 28px; color: var(--laranja-botao); }
.kid-trilha-placar { display: inline-flex; gap: 10px; margin-left: auto; font: 700 18px var(--f-titulo); }
.kid-trilha-placar span { display: inline-flex; align-items: center; gap: 4px; }
.kid-trilha-placar svg.ic { width: 22px; height: 22px; }
.kid-trilha-placar .estrelas svg.ic { color: var(--sol); }
.kid-trilha p { margin: 0; font: 700 19px/1.35 var(--f-leitura); color: var(--tinta-2); }
.filho-trilha { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--ceu-fundo); border: 2px solid var(--linha); }
.filho-trilha p { margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.filho-trilha p svg.ic { flex: none; color: var(--laranja-botao); margin-top: 2px; }
.filho-trilha .acoes { margin: 0; }

@keyframes tr-anel { 0% { transform: scale(.92); opacity: .6; } 100% { transform: scale(1.18); opacity: 0; } }
@keyframes tr-flutua { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -6px); } }
@keyframes tr-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes tr-sobe { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes tr-treme { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes tr-balanca { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes tr-festa { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-10px) rotate(4deg); } }
@keyframes tr-cai { to { transform: translateY(110vh) rotate(720deg); } }

/* ---------- sons que mudam: a descoberta (toca nas letras e vê o som mudar) e os cestos ----------
   A cor é o som: azul = o de sempre (C de casa), laranja = o que muda (C de cebola), uva = letras que se juntam e o som
   do nariz, cinza = letra quietinha. A mesma cor pinta a peça, o pedaço da palavra e o cesto. */
.tr-lab { display: grid; justify-items: center; gap: 12px; }
.tr-lab-letras { display: flex; align-items: center; gap: 8px; min-height: 108px; padding: 6px 10px; border: 0; border-radius: 24px; background: none; cursor: pointer; perspective: 600px; }
.tr-lab-peca { --escala: 1; display: grid; place-items: center; min-width: 74px; height: 92px; padding: 0 12px; border: 3px solid var(--linha-forte); border-bottom-width: 7px; border-radius: 20px;
  background: var(--papel); color: var(--tinta); font: 700 54px/1 var(--f-leitura); transform: scale(var(--escala)); transition: background-color .25s, border-color .25s, color .25s; }
.tr-lab-peca--azul { background: var(--azul-forte); border-color: var(--azul-funda); color: #fff; }
.tr-lab-peca--laranja { background: var(--laranja-botao); border-color: var(--laranja-botao-funda); color: #fff; }
.tr-lab-peca--uva { background: var(--uva-forte); border-color: var(--uva-funda); color: #fff; }
.tr-lab-peca--cinza { background: var(--bloqueada); border-color: var(--bloqueada-funda); color: var(--bloqueada-texto); }
.tr-lab-peca--quieta { --escala: .8; border-style: dashed; background: var(--papel); color: var(--bloqueada-texto); }
.tr-lab-peca--nova { animation: tr-lab-vira .45s cubic-bezier(.3, 1.5, .5, 1); }
.tr-lab-letras:active { transform: scale(.97); }
/* enquanto falta ver algum jeito, as letras "respiram" chamando o dedo; viu tudo, o "Entendi!" dá dois pulinhos */
.tr-lab-letras--chama { animation: tr-lab-chama 1.6s ease-in-out infinite; }
.tr-botao--pronto { animation: tr-pronto .45s ease-out 2; }
@keyframes tr-lab-chama { 50% { transform: scale(1.05); } }
@keyframes tr-pronto { 40% { transform: translateY(-5px) scale(1.02); } }
.tr-lab-dica { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--tinta-2); font: 600 17px var(--f-titulo); }
.tr-lab-dica span { font-size: 24px; animation: tr-lab-aponta 1.2s ease-in-out infinite; }
.tr-lab-dica--some { visibility: hidden; }
.tr-lab-exemplo { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 10px 18px; border: 2px solid var(--linha); border-bottom-width: 5px; border-radius: 20px;
  background: var(--papel); color: var(--tinta); animation: tr-lab-entra .35s ease-out; }
button.tr-lab-exemplo { cursor: pointer; }
.tr-lab-exemplo .tr-desenho { font-size: 52px; line-height: 1; }
.tr-lab-palavra { font: 700 34px/1.1 var(--f-leitura); letter-spacing: .02em; overflow-wrap: anywhere; }
.tr-marca { padding: 0 3px; border-radius: 8px; background: var(--azul-forte); color: #fff; }
.tr-marca--laranja { background: var(--laranja-botao); }
.tr-marca--uva { background: var(--uva-forte); }
.tr-marca--cinza { background: none; color: var(--bloqueada-texto); outline: 2px dashed var(--bloqueada-funda); outline-offset: -2px; }
.tr-lab-pontos { display: flex; gap: 10px; }
.tr-lab-pontos i { width: 12px; height: 12px; border-radius: 50%; background: var(--bloqueada); transition: background-color .2s, transform .2s; }
.tr-lab-pontos i.visto { background: var(--folha-forte); }
.tr-lab-pontos i.agora { transform: scale(1.4); }
.tr-letras-palavra--junta { gap: 0; }
.tr-separar { display: grid; justify-items: center; gap: 14px; }
.tr-cestos { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tr-cesto { display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; min-height: clamp(132px, 17vh, 168px); padding: 12px 8px 10px; border: 3px solid var(--linha-forte); border-bottom-width: 7px;
  border-radius: 22px; background: var(--papel); color: var(--tinta); font: 600 17px/1.2 var(--f-titulo); text-align: center; cursor: pointer; }
.tr-cesto--azul { border-color: var(--azul-forte); } .tr-cesto--azul b { color: var(--azul-texto); }
.tr-cesto--laranja { border-color: var(--laranja-botao); } .tr-cesto--laranja b { color: var(--laranja-texto); }
.tr-cesto--uva { border-color: var(--uva-forte); } .tr-cesto--uva b { color: var(--uva-forte); }
.tr-cesto--cinza { border-style: dashed; border-color: var(--bloqueada-funda); } .tr-cesto--cinza b { color: var(--bloqueada-texto); }
.tr-cesto b { font-weight: 600; }
.tr-cesto-desenho { font-size: 40px; line-height: 1.1; }
.tr-cesto-dentro { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 28px; font-size: 22px; line-height: 1.2; }
.tr-cesto-dentro i { font-style: normal; animation: tr-lab-entra .3s ease-out; }
.tr-cesto.recebeu { animation: tr-cesto-pula .35s ease-out; }
.tr-cesto.errada { animation: tr-treme .35s; border-color: var(--cereja); }
.tr-carta { display: grid; justify-items: center; gap: 4px; min-width: 156px; padding: 12px 22px; border: 2px solid var(--linha-forte); border-bottom-width: 6px; border-radius: 22px;
  background: var(--papel); color: var(--tinta); animation: tr-lab-entra .3s ease-out; }
button.tr-carta { cursor: pointer; }
.tr-carta .tr-desenho { font-size: clamp(64px, 9vh, 84px); line-height: 1.1; }
.tr-carta .tr-nome { font: 700 22px var(--f-leitura); }
.tr-carta.errada { animation: tr-treme .35s; }
.tr-carta--vai-esq { animation: tr-vai-esq .42s ease-in forwards; }
.tr-carta--vai-dir { animation: tr-vai-dir .42s ease-in forwards; }
.tr-separar-conta { margin: 0; color: var(--tinta-2); font: 600 15px var(--f-titulo); }
@keyframes tr-lab-vira { 0% { transform: rotateY(90deg) scale(.7); } 100% { transform: rotateY(0) scale(var(--escala)); } }
@keyframes tr-lab-entra { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tr-lab-aponta { 50% { transform: translateY(-5px); } }
@keyframes tr-cesto-pula { 40% { transform: scale(1.06); } }
/* a figura desce para o cesto escolhido (os cestos ficam embaixo dela) */
@keyframes tr-vai-esq { to { transform: translate(max(-28vw, -160px), 150px) scale(.25); opacity: 0; } }
@keyframes tr-vai-dir { to { transform: translate(min(28vw, 160px), 150px) scale(.25); opacity: 0; } }
/* a sílaba (ou a palavra) que o Sabiá está falando agora (voz.js): acende na hora exata, sem transição na entrada, e
   apaga devagar. Só cor e um pulinho: nada muda de tamanho nem empurra o resto da linha. */
.tr [data-seg] { border-radius: 8px; transition: background-color .18s ease-out, color .18s ease-out, transform .18s ease-out, box-shadow .18s ease-out; }
.tr [data-seg].falando { transition: none; background: var(--sol); color: var(--tinta); box-shadow: 0 0 0 3px var(--sol); transform: translateY(-3px); }
.tr .tr-marca.falando { background: var(--sol); color: var(--tinta); }
.tr .tr-lacuna.falando { background: var(--sol-clara); border-color: var(--sol-borda); color: var(--sol-funda); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .tr [data-seg].falando { transform: none; }
  .tr *, .tr *::before, .tr *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* celular: no topo, a matéria sem o livrinho (o nome inteiro cabe ao lado da casinha e do placar) */
@media (max-width: 430px) {
  .tr-materia { padding: 6px 8px; }
  .tr-materia svg.ic:first-child { display: none; }
}
/* celular estreito: topo mais justo e opções e desenhos um pouco menores, para caber sem rolar para o lado */
@media (max-width: 380px) {
  .tr-topo { gap: 6px; }
  .tr-materia { font-size: 16px; }
  .tr-contador { padding: 0 3px; font-size: 17px; }
  .tr-letra { font-size: 42px; }
  .tr-desenho { font-size: 42px; }
  .tr-opcao { min-height: 96px; }
  .tr-frase { font-size: 26px; }
  .tr-palavra-grande { font-size: 46px; }
  .tr-lab-peca { min-width: 64px; height: 82px; font-size: 46px; }
  .tr-lab-palavra { font-size: 30px; }
}