/* Motor de missão v001 do jogo "123" (D-88): layout e comportamento visual comuns a todas as missões.
 * Regra: este arquivo só usa papéis do tema (var(--…)). Nenhuma fonte, cor ou imagem de interface fica
 * escrita aqui; o percurso de QA confere. Extraído do protótipo da missão do mercadinho (revisão 10). */
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--fundo);color:var(--papel);font-family:var(--fonte-ui);overflow:hidden}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.ico{width:1.05em;height:1.05em;vertical-align:-.17em;flex:0 0 auto}

/* ---------- layout: a cena ocupa a tela; o caderno fica por cima, com fundo transparente ---------- */
.app{position:relative;height:100dvh;overflow:hidden}
.palco{position:absolute;inset:0;overflow:hidden;background:var(--fundo);isolation:isolate}
.lado{position:absolute;left:0;right:0;bottom:0;height:58%;z-index:10;container-type:size;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;padding-bottom:4px}
.app.sem-livro .lado{display:none}
@media (orientation:landscape){.lado{left:auto;top:0;height:auto;width:clamp(380px,38vw,560px);align-items:center;padding:0}}
@media (orientation:portrait){
  .app.prova-aberta .lado{height:70%}
  .app.prova-aberta .livro{width:min(calc(100cqw - 24px),calc((100cqh - 8px) * var(--livro-proporcao)));margin-right:16px}
}

/* ---------- cena ---------- */
.mundo{position:absolute;left:0;top:0;transform-origin:0 0;transition:transform 1.6s cubic-bezier(.45,0,.2,1),filter .8s}
.mundo.sem-transicao{transition:none}
.pecas img{position:absolute;display:block;pointer-events:none;user-select:none}
.app.raio .mundo{filter:var(--raio-x-filtro)}
.raio-x{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .8s;background:var(--raio-x-fundo)}
.app.raio .raio-x{opacity:1}

.portal{position:absolute;width:250px;height:250px;margin:-125px 0 0 -125px;pointer-events:none;opacity:0}
.portal-logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.portal-buraco{position:absolute;inset:8%;border-radius:50%;background:var(--portal-fundo);transform:scale(0)}

/* nave (a missão diz se fica espelhada, para olhar a cena) */
.nave{position:absolute;pointer-events:none}
.nave img{width:100%;display:block}
.nave.espelhada img{transform:scaleX(-1)}
.nave.plana{animation:planar 3.2s ease-in-out infinite}
@keyframes planar{50%{translate:0 -14px}}
.selo-na-nave{position:absolute;left:16%;bottom:14%;width:46px;height:46px}

/* ---------- título de capa, no estilo das capas do Matemágicário ---------- */
.capa{position:absolute;z-index:7;top:max(8px,1.6vh);left:0;right:0;margin:0 auto;width:fit-content;max-width:calc(100% - 16px);display:flex;flex-direction:column;align-items:center;font-family:var(--fonte-capa);pointer-events:none;animation:capa-entra .8s cubic-bezier(.3,1.5,.5,1) both}
@keyframes capa-entra{from{opacity:0;transform:translateY(-30px) scale(.7) rotate(-4deg)}}
.capa-linha1{position:relative;z-index:1;display:flex;align-items:flex-end;gap:6px;transform:rotate(-3deg);margin-bottom:0;font-size:clamp(14px,3.9vw,24px)}
.capa-tag{background:var(--capa-tag-1-fundo);color:var(--capa-tag-1-texto);border:3px solid var(--tinta);box-shadow:3px 4px 0 var(--tinta);border-radius:4px 6px 3px 5px;padding:1px 9px 2px;letter-spacing:.02em;white-space:nowrap}
.capa-tag-x{background:var(--capa-tag-2-fundo);color:var(--capa-tag-2-texto);transform:rotate(2deg)}
.capa.sequencia{animation:none}
.capa.sequencia .capa-linha1>*,.capa.sequencia .capa-tema,.capa.sequencia .capa-faixa{opacity:0}
.capa.sequencia .mostra{opacity:1!important;animation:titulo-pop .45s cubic-bezier(.3,1.7,.5,1) both}
@keyframes titulo-pop{from{opacity:0;scale:.3;translate:0 -18px}}
.capa-e{font-size:.95em;color:var(--capa-ligacao);-webkit-text-stroke:1.4px var(--tinta);paint-order:stroke fill;text-shadow:1px 1px var(--tinta),2px 2px var(--tinta),3px 3px var(--tinta);margin:0 -1px}
.capa-em{font-size:.85em;color:var(--capa-ligacao);-webkit-text-stroke:1.4px var(--tinta);paint-order:stroke fill;text-shadow:1px 1px var(--tinta),2px 2px var(--tinta),3px 3px var(--tinta)}
.capa-tema{position:relative;z-index:3;isolation:isolate;margin-top:.1em;font-size:clamp(50px,15vw,96px);line-height:1.02;letter-spacing:.015em;transform:rotate(-2deg)}
.capa-tema span{display:block}
.capa-tema .c3{position:absolute;inset:0;z-index:0;color:var(--tinta);-webkit-text-stroke:2px var(--tinta);text-shadow:1px 1px var(--tinta),2px 2px var(--tinta),3px 3px var(--tinta),4px 4px var(--tinta),5px 5px var(--tinta),6px 6px var(--tinta),7px 7px var(--tinta)}
.capa-tema .c1{position:relative;z-index:1;color:var(--capa-tema-cor);-webkit-text-stroke:2.6px var(--tinta);paint-order:stroke fill}
.capa-faixa{position:relative;z-index:2;margin-top:-.18em;background:var(--capa-faixa-fundo);border:3px solid var(--tinta);box-shadow:4px 5px 0 var(--tinta);padding:0 14px 3px;transform:rotate(-2deg);font-size:clamp(22px,6.6vw,40px);line-height:1.08;color:var(--capa-faixa-texto);-webkit-text-stroke:1.4px var(--tinta);paint-order:stroke fill;text-shadow:1px 1px var(--tinta),2px 2px var(--tinta),3px 3px var(--tinta);white-space:nowrap}

/* ---------- etiquetas das telas dos objetos ---------- */
.etiquetas{position:absolute;inset:0;pointer-events:none;z-index:2;transition:opacity .35s}
.etiquetas.escondidas{opacity:0}
.linhas{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.linhas line{stroke:var(--tinta);stroke-width:3;stroke-linecap:round}
.linhas circle{fill:var(--amarelo);stroke:var(--tinta);stroke-width:2}
.etq{position:absolute;pointer-events:auto;cursor:pointer;display:grid;gap:1px;min-width:58px;background:var(--etiqueta-fundo);color:var(--etiqueta-texto);border:3px solid var(--tinta);border-radius:7px 9px 6px 8px;box-shadow:3px 4px 0 var(--tinta);padding:2px 6px 4px;font:800 12px/1.15 var(--fonte-etiqueta);text-align:left;white-space:nowrap}
.etq b{font:400 14px/1.05 var(--fonte-etiqueta-nome);color:var(--etiqueta-nome)}
.etq span{display:flex;align-items:center;gap:3px}
.etq .espera{color:var(--etiqueta-nome);font-weight:900}
.etq.fechou{background:var(--etiqueta-fechou-fundo);color:var(--etiqueta-fechou-texto)}
.etq.riscada{background:var(--etiqueta-riscada-fundo);color:var(--etiqueta-riscada-texto)}
.etq.apontada{outline:4px solid var(--lapis);outline-offset:2px}
.etq:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
@media (orientation:landscape){.etq{font-size:14px;min-width:70px}.etq b{font-size:16px}}

/* ---------- holograma e raio-x ---------- */
.holo{position:absolute;left:10px;bottom:var(--base,10px);width:min(calc(var(--livre-w,100vw) - 20px),600px);color:var(--holo-texto);background:var(--holo-fundo);border:3px solid var(--holo);border-radius:10px 14px 8px 12px;box-shadow:0 0 18px var(--holo-brilho),5px 6px 0 var(--sombra-escura);padding:8px 10px 10px;font:800 13px/1.25 var(--fonte-etiqueta);z-index:3;animation:holo-entra .35s ease-out}
@keyframes holo-entra{from{opacity:0;transform:translateY(8px) scaleY(.6)}}
.holo-titulo{font:400 14px/1.1 var(--fonte-etiqueta-nome);letter-spacing:.03em;color:var(--holo);margin:0 0 6px;text-transform:uppercase}
.holo-linha{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;margin:5px 0}
.holo-rotulo{font:400 13px/1.1 var(--fonte-etiqueta-nome);color:var(--holo-texto-2);white-space:nowrap;display:flex;align-items:center;gap:4px}
.holo-rotulo b{color:var(--amarelo);font-weight:400;margin-right:2px}
.blocos{display:flex;flex-wrap:nowrap;gap:2px;min-height:20px;align-items:center}
.bloco-t{flex:0 0 auto;height:18px;border:2px solid var(--holo);background:var(--holo-bloco);border-radius:3px;display:grid;place-items:center;font:900 10px var(--fonte-etiqueta);color:var(--holo-texto);transition:all .45s}
.blocos.junta{gap:0}
.blocos.junta .bloco-t{border-radius:0;border-left-width:1px;border-right-width:1px}
.visor{font:400 14px/1 var(--fonte-nota);color:var(--amarelo);background:var(--holo-visor);border:2px solid var(--holo);border-radius:4px;padding:3px 6px;white-space:nowrap;min-width:3.4em;text-align:center}
.holo-formula{font:400 clamp(14px,4vw,21px)/1.2 var(--fonte-nota);color:var(--amarelo);text-align:center;margin:4px 0 4px}
.holo-exemplos{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;font:700 12px/1.3 var(--fonte-etiqueta);color:var(--holo-texto-2)}
.holo-nota{font:700 12px/1.3 var(--fonte-etiqueta);color:var(--holo-texto-2);margin:4px 0 0}
.holo .chips{margin:.2em 0}
@media (orientation:landscape){.holo{left:16px;font-size:15px;padding:12px 14px 14px}.holo-titulo{font-size:19px}.holo-rotulo{font-size:15px}.bloco-t{height:24px;font-size:12px}.visor{font-size:18px}.holo-nota,.holo-exemplos{font-size:14px}}

/* ---------- fala (no alto, ou embaixo na hora do convite) ---------- */
.fala{position:absolute;left:8px;top:8px;width:min(calc(var(--livre-w,100vw) - 86px),560px);display:flex;align-items:flex-start;gap:6px;z-index:6;pointer-events:none;animation:holo-entra .3s ease-out}
.fala.embaixo{top:auto;bottom:max(16px,3vh);left:0;right:0;margin:0 auto;width:min(calc(100% - 20px),620px);align-items:flex-end}
.fala .avatar{width:44px;height:44px;flex:0 0 auto;border-radius:var(--avatar-raio);border:3px solid var(--tinta);background:var(--avatar-fundo);box-shadow:3px 4px 0 var(--tinta);object-fit:cover}
.fala.embaixo .avatar{width:70px;height:70px}
.balao{position:relative;margin:0;background:var(--balao-fundo);color:var(--balao-texto);border:var(--balao-borda);border-radius:var(--balao-raio);box-shadow:var(--balao-volume);padding:4px 11px 6px;font:600 15px/1.25 var(--fonte-fala)}
.fala.embaixo .balao{font-size:clamp(16px,4.3vw,21px);padding:8px 14px 10px}
.balao .quem{display:block;font:800 11px/1.2 var(--fonte-quem);letter-spacing:.04em;text-transform:uppercase;color:var(--fala-quem-cor)}
#falaAcao:empty{display:none}
#falaAcao{display:flex;margin-top:8px}
#falaAcao .chip{pointer-events:auto;font-size:clamp(15px,4.2vw,20px);background:var(--botao-marcado)}
@media (orientation:landscape){.fala{left:14px;top:14px}.fala .avatar{width:60px;height:60px}.balao{font-size:18px}}

.pular{position:absolute;left:10px;bottom:var(--base,10px);z-index:8;background:var(--botao-fundo);color:var(--botao-texto);border:3px solid var(--tinta);box-shadow:4px 5px 0 var(--tinta);border-radius:8px;padding:6px 14px;font:700 15px var(--fonte-botao);cursor:pointer}

/* botão de abrir a questão, sobre a cena inteira */
.convite{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;max-width:calc(100% - 24px);bottom:max(18px,4vh);z-index:6;display:flex;align-items:center;gap:10px;background:var(--convite-fundo);color:var(--botao-texto);border:4px solid var(--tinta);box-shadow:var(--convite-volume);border-radius:var(--convite-raio);padding:9px 18px 10px;font:800 clamp(17px,4.6vw,24px)/1.15 var(--fonte-botao);cursor:pointer;text-align:left;animation:selo-entra .5s cubic-bezier(.3,1.6,.5,1)}
.convite:active{transform:translate(4px,6px);box-shadow:2px 2px 0 var(--tinta)}
.convite:focus-visible{outline:4px solid var(--foco);outline-offset:3px}
.convite small{display:block;font:700 clamp(11px,3vw,14px)/1.2 var(--fonte-botao);text-transform:uppercase;letter-spacing:.06em;color:var(--botao-sub-cor)}
.convite .play{display:grid;place-items:center;width:1.6em;height:1.6em;flex:0 0 auto;border-radius:50%;background:var(--tinta);color:var(--convite-fundo);font-size:.8em}

.selo-grande{position:absolute;left:var(--selo-x,50%);top:var(--selo-y,35%);width:min(30vw,190px);aspect-ratio:1;translate:-50% -50%;z-index:6;animation:selo-entra .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes selo-entra{from{scale:.2;rotate:-25deg;opacity:0}}
.selo{position:relative;container-type:inline-size;width:100%;height:100%;border-radius:50%;background:var(--selo-fundo);border:4px solid var(--tinta);box-shadow:5px 6px 0 var(--tinta);display:grid;place-items:center;overflow:hidden}
.selo::before{content:"";position:absolute;inset:7%;border-radius:50%;border:4px dashed var(--selo-tracejado)}
.selo img{width:62%;margin-top:-10%;filter:drop-shadow(2px 2px 0 var(--tinta))}
.selo span{position:absolute;bottom:15%;left:0;right:0;text-align:center;font:400 10.5cqw/1 var(--fonte-nota);color:var(--tinta)}

.fim{position:absolute;inset:0;z-index:20;background:var(--veu);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:20px}
.fim-titulo{font:400 30px var(--fonte-titulo);color:var(--amarelo);margin:0}

/* ---------- caderno (sem fundo próprio: fica sobre a cena) ---------- */
.livro{position:relative;pointer-events:auto;container-type:inline-size;aspect-ratio:var(--livro-proporcao);width:min(calc(100cqw - 62px),calc((100cqh - 8px) * var(--livro-proporcao)));margin-right:38px;filter:var(--livro-sombra);transform-origin:50% 8%;transition:transform .25s}
.livro.abrindo{animation:abrir-livro .65s cubic-bezier(.3,1.35,.5,1)}
@keyframes abrir-livro{from{opacity:0;transform:translateY(40px) scale(.55) rotate(-8deg)}}
.livro-fundo{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;user-select:none}
.aba{position:absolute;z-index:0;right:var(--abas-direita);width:var(--abas-largura);aspect-ratio:var(--aba-proporcao);border:0;padding:0;cursor:pointer;background:center/contain no-repeat;transition:right .2s}
.aba span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.aba-missoes{top:var(--aba-missoes-y);background-image:var(--img-aba-missoes)}
.aba-caderno{top:var(--aba-caderno-y);background-image:var(--img-aba-caderno)}
.aba[aria-pressed=true]{right:var(--abas-direita-ativa)}
.aba:focus-visible{outline:3px solid var(--foco);outline-offset:2px}

.pagina{position:absolute;z-index:2;left:var(--pagina-x);top:var(--pagina-y);width:var(--pagina-w);height:var(--pagina-h);transform:rotate(var(--pagina-giro));color:var(--tinta);overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column}
.rotulo{font:400 clamp(8px,2.6cqw,13px)/1.25 var(--fonte-subtitulo);text-transform:uppercase;letter-spacing:.03em;color:var(--caderno-rotulo);margin:0 0 .3em}
.titulo-volume{font:400 clamp(17px,6.8cqw,32px)/1.12 var(--fonte-titulo);margin:0 0 .2em;padding:0 6px 6px 0}
.titulo-volume.longo{font-size:clamp(15px,5.8cqw,27px)}
.titulo-volume.curto{font-size:clamp(15px,5.6cqw,26px);margin-bottom:.1em}
.linha-volume{display:block;position:relative;isolation:isolate;width:fit-content;max-width:100%;white-space:nowrap;letter-spacing:.025em}
.volume-verso,.volume-frente{display:block;-webkit-text-stroke:1.2px var(--tinta);paint-order:stroke fill}
.volume-verso{position:absolute;left:0;top:0;z-index:0;color:var(--tinta);text-shadow:1px 1px var(--tinta),2px 2px var(--tinta),3px 3px var(--tinta),4px 4px var(--tinta);pointer-events:none}
.volume-frente{position:relative;z-index:1;color:var(--caderno-titulo-cor)}
.nota{font:400 clamp(11px,3.7cqw,18px)/1.2 var(--fonte-nota);text-transform:uppercase;margin:.25em 0;color:var(--tinta)}
.nota.lapis{color:var(--lapis);transform:rotate(-1deg)}
.nota.pequena{font-size:clamp(10px,3.1cqw,15px)}
.legenda{display:flex;flex-wrap:wrap;gap:.2em .8em;font:700 clamp(10px,3cqw,14px)/1.2 var(--fonte-ui);color:var(--caderno-rotulo);margin:.3em 0}
.legenda span{display:inline-flex;align-items:center;gap:.25em}
.riscado-lapis{text-decoration-color:var(--lapis);text-decoration-thickness:3px}

.adesivo{position:relative;isolation:isolate;margin:.35em 6px .6em 0;padding:3px;transform:rotate(1.2deg)}
.quadro-papel{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.quadro-verso{z-index:0;transform:translate(6px,8px)}
.quadro-frente{z-index:1}
.adesivo .formal{position:relative;z-index:2;margin:0;padding:.45em .7em .55em;font:400 clamp(11px,3.5cqw,16px)/1.28 var(--fonte-lembrete)}
.fita{position:absolute;z-index:4;top:-9px;right:18%;width:22%;height:14px;background:var(--fita);transform:rotate(-8deg);border:1px solid var(--fita-borda)}

/* botões de escolha: letra de mão legível, em pequeno bloco */
.chips{display:flex;flex-wrap:wrap;gap:.35em .4em;margin:.3em 0 .4em}
.chip{background:var(--botao-fundo);color:var(--botao-texto);border:3px solid var(--tinta);border-radius:var(--botao-raio);box-shadow:var(--botao-volume);padding:.1em .6em .15em;font:700 clamp(12px,3.6cqw,17px)/1.2 var(--fonte-botao);cursor:pointer;min-height:34px;min-width:40px;transition:transform .08s,box-shadow .08s}
.chip:active{transform:translate(3px,4px);box-shadow:0 0 0 var(--tinta)}
.chip[aria-pressed=true]{background:var(--botao-marcado)}
.chip.certo{background:var(--botao-certo)}
.chip.riscado{text-decoration:line-through 3px var(--lapis);color:var(--botao-riscado-texto);background:var(--botao-riscado-fundo)}
.chip:disabled{cursor:default}
.chip:focus-visible{outline:3px solid var(--lapis);outline-offset:2px}
.chips.mini .chip{font-size:clamp(11px,3.2cqw,15px);min-height:30px;padding:.08em .45em}
.holo .chip{font-size:14px;min-height:32px}
.fim .chip{font-size:18px}

.numeros{display:grid;gap:.55em;width:92%;margin:.4em 0 .5em 1%}
.numero{position:relative;isolation:isolate;padding:.35em .6em;font:400 clamp(11px,3.7cqw,18px)/1.1 var(--fonte-nota);text-transform:uppercase}
.numero span{position:relative;z-index:2;white-space:nowrap}
.numero .fita{right:14%;top:-7px;width:20%;height:12px}
.conclusao{font:400 clamp(12px,3.9cqw,19px)/1.15 var(--fonte-nota);text-transform:uppercase;display:inline-block;border-bottom:4px solid var(--amarelo);margin:.2em 0}
.vaga-selo{width:32%;aspect-ratio:1;border:3px dashed var(--vaga-selo-borda);border-radius:50%;display:grid;place-items:center;font:700 clamp(9px,2.6cqw,12px)/1.1 var(--fonte-ui);color:var(--vaga-selo-texto);text-align:center;margin:.3em auto 0;transform:rotate(-6deg)}
.vaga-selo.colado{border:0}
.barras-mini{display:grid;gap:2px;margin:.2em 0 .35em}
.barras-mini div{display:grid;grid-template-columns:2em 1fr 4.4em;align-items:center;gap:5px;white-space:nowrap;font:400 clamp(9px,2.9cqw,13px)/1 var(--fonte-nota)}
.barras-mini i{display:block;height:.85em;background:var(--barra);border:2px solid var(--tinta)}
.barras-mini .menor i{background:var(--barra-certa)}
.barras-mini .marcada i{background:var(--barra-marcada)}
.pequeno{font:700 clamp(10px,3cqw,14px)/1.3 var(--fonte-ui);margin:.2em 0}
.aviso-c{font:700 clamp(9px,2.9cqw,13px)/1.3 var(--fonte-ui);background:var(--aviso-fundo);border:2px solid var(--tinta);border-radius:6px;padding:.3em .5em;margin:.3em 0}
.campo{font:400 clamp(13px,4cqw,20px) var(--fonte-nota);width:3em;text-align:center;border:2.5px solid var(--tinta);border-radius:6px;padding:.1em}

/* ---------- a questão real: um papel colado na folha, com a parte de baixo dobrada ---------- */
.papel{position:relative;container-type:inline-size;margin:.6em 3px 1em 2px;background:var(--prova-papel);color:var(--prova-texto);transform:rotate(.7deg);box-shadow:var(--prova-sombra)}
.papel::before,.papel::after{content:"";position:absolute;z-index:3;top:-8px;width:22%;height:15px;background:var(--prova-fita);border:1px solid var(--fita-borda)}
.papel::before{left:-4%;transform:rotate(-14deg)}
.papel::after{right:-4%;transform:rotate(12deg)}
.papel-corpo{padding:.7em 4.5cqw .4em;font:4.8cqw/1.36 var(--fonte-prova)}
.papel h3{display:flex;align-items:center;gap:2.5cqw;margin:.1em 0 .45em;font:900 1.05em var(--fonte-prova);border-bottom:.5cqw solid var(--prova-texto);padding-bottom:.15em}
.papel h3::after{content:"";flex:1;height:.9em;background:var(--prova-faixa)}
.papel p{margin:0 0 .45em;text-align:justify;text-indent:1.3em;hyphens:auto}
.papel p.sem-recuo{text-indent:0}
.papel ul{margin:.1em 0 .5em;padding-left:2.4em}
/* quadro (tabela) da questão real, como no caderno do ENEM (motor-v002) */
/* motor-v003: tabela larga demais rola para o lado dentro do papel (como a página rola para cima e para baixo);
   a primeira coluna fica presa e uma sombra na borda avisa que há mais (some quando chega ao fim) */
.papel table{display:block;width:max-content;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;border-collapse:collapse;margin:.2em auto .6em;font-size:.92em;
  background:linear-gradient(to left,var(--prova-papel) 40%,transparent) right center/2.2em 100% no-repeat local,linear-gradient(to left,var(--sombra-escura),transparent) right center/.9em 100% no-repeat scroll}
.papel th,.papel td{border:.3cqw solid var(--prova-texto);padding:.12em .8em;text-align:center}
.papel tr>:first-child{position:sticky;left:0;z-index:1;background:var(--prova-papel)}
.papel th{font-weight:700}
.papel li{margin:.08em 0}
.papel .fonte{font-size:.7em;color:var(--prova-fonte-cor);margin:.3em 0 0;text-indent:0}
.dobra{perspective:600px}
.dobra-fechada{display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;border:0;border-top:2px dashed var(--prova-dobra-borda);background:var(--prova-dobra);color:var(--prova-dobra-texto);font:800 clamp(11px,3.4cqw,15px)/1.2 var(--fonte-botao);padding:.65em .5em .75em;cursor:pointer;box-shadow:var(--prova-dobra-sombra)}
.dobra-fechada .seta{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--amarelo);border:2px solid var(--tinta);color:var(--tinta)}
.dobra-aberta{transform-origin:50% 0;border-top:1px dashed var(--prova-dobra-linha);padding:.4em 4.5cqw .6em;font:4.8cqw/1.36 var(--fonte-prova)}
.dobra-aberta.anima{animation:desdobrar .55s cubic-bezier(.3,1.2,.5,1)}
@keyframes desdobrar{from{transform:rotateX(-100deg);opacity:.2}}
.papel .alts{display:grid;gap:.2em;margin:.1em 0 .4em}
.papel .alt{display:flex;align-items:center;gap:.7em;background:var(--prova-papel);border:2px solid transparent;border-radius:6px;padding:.12em .3em;font:inherit;text-align:left;cursor:pointer;min-height:2em}
.papel .alt .letra{display:inline-grid;place-items:center;width:1.45em;height:1.45em;border-radius:50%;background:var(--prova-texto);color:var(--prova-papel);font:900 .85em var(--fonte-prova)}
.papel .alt[aria-pressed=true]{background:var(--prova-marcada);border-color:var(--prova-texto)}
.papel .passo{border-top:2px dashed var(--prova-passo-linha);padding-top:.35em;margin-top:.2em}
.papel .passo b{display:block;font-size:.85em;margin-bottom:.15em}
.papel .chip{font-size:max(12px,3.6cqw);min-height:32px}
.papel .conferir{display:block;margin-top:.45em;background:var(--prova-texto);color:var(--prova-papel);border:0;border-radius:6px;padding:.4em 1em;font:800 .95em var(--fonte-botao);cursor:pointer}
.papel .conferir:disabled{opacity:.35;cursor:default}

/* controles do livro: botões aprovados em pequeno bloco (imagens do tema) */
.controles{position:absolute;z-index:3;left:8%;right:4%;bottom:3.2%;height:12%;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.bloco{pointer-events:auto;width:13cqw;max-width:62px;aspect-ratio:1;border:0;padding:0;background:center/contain no-repeat;cursor:pointer}
.bloco[hidden]{display:block!important;visibility:hidden}
.avancar{background-image:var(--img-avancar)}
.avancar:active{background-image:var(--img-avancar-pressionado)}
.avancar:focus-visible{background-image:var(--img-avancar-foco);outline:none}
.avancar:disabled{background-image:var(--img-avancar-desabilitado);cursor:default}
.voltar{background-image:var(--img-voltar)}
.voltar:active{background-image:var(--img-voltar-pressionado)}
.voltar:focus-visible{background-image:var(--img-voltar-foco);outline:none}
.contador{font:800 clamp(10px,3cqw,14px)/1 var(--fonte-ui);color:var(--contador-texto);background:var(--painel-leve);padding:3px 8px;border-radius:20px}
.contador:empty{visibility:hidden}

/* ---------- zoom: dois botões (mapa e caderno) e o controle em lupa ---------- */
.bz{position:absolute;z-index:25;width:54px;height:58px;border:0;padding:0;background:none;cursor:pointer}
.bz svg,.zc svg{display:block;width:100%;height:100%;overflow:visible}
.bz .face,.zc .face{transition:transform .08s}
.bz:active .face,.zc button:active .face,.bz[aria-pressed=true] .face{transform:translate(3px,4px)}
.bz:focus-visible,.zc button:focus-visible{outline:3px solid var(--foco);outline-offset:2px;border-radius:10px}
.zc{position:absolute;z-index:40;left:0;right:0;bottom:max(14px,2.5vh);margin:0 auto;width:fit-content;display:grid;grid-template-columns:52px 72px 52px 18px 52px;align-items:center;justify-items:center;gap:0 4px;padding:8px 12px 10px;background:var(--painel);border:3px solid var(--tinta);border-radius:16px 20px 14px 18px;animation:selo-entra .4s cubic-bezier(.3,1.6,.5,1)}
.zc button{width:50px;height:54px;border:0;padding:0;background:none;cursor:pointer}
.zc button:disabled{opacity:.4;cursor:default}
.zc .lupa{grid-column:2;width:70px;height:74px;position:relative}
.zc .lupa b{position:absolute;left:3px;top:16px;width:50px;text-align:center;font:800 14px var(--fonte-botao);color:var(--tinta)}
.zc .z-menos{grid-column:1}
.zc .z-mais{grid-column:3}
.zc .z-casa{grid-column:5}
/* foco: só o item escolhido fica na tela */
.app.foco-cena .lado,.app.foco-cena .fala,.app.foco-cena .holo,.app.foco-cena .convite,.app.foco-cena .capa,.app.foco-cena .bz,.app.foco-cena .selo-grande{display:none!important}
.app.foco-livro .palco,.app.foco-livro .bz{visibility:hidden}
.app.foco-livro .lado{inset:0;width:auto;height:auto;overflow:auto;display:flex;align-items:flex-start;justify-content:flex-start;padding:14px 14px 130px;pointer-events:auto;background:var(--fundo-foco-livro)}
.app.foco-livro .livro{margin:auto;flex:0 0 auto;width:min(calc(100cqw - 46px),calc((100cqh - 8px) * var(--livro-proporcao)));transition:none}
.app.foco-livro .livro.abrindo{animation:none}
.palco.zoom-ativo{cursor:grab;touch-action:none}

@media (prefers-reduced-motion:reduce){
  .mundo{transition:none!important}
  .nave.plana{animation:none!important}
  .holo,.fala,.selo-grande,.capa,.convite,.zc,.dobra-aberta,.livro.abrindo{animation:none!important}
}
.papel .chip:active{transform:none;box-shadow:var(--botao-volume)}

/* a folha que vira: a arte do caderno recortada pelo contorno da página, presa na costura à esquerda */
.folha{position:absolute;z-index:4;left:var(--folha-x);top:var(--folha-y);width:var(--folha-w);height:var(--folha-h);transform-origin:0 0;transform-style:preserve-3d;pointer-events:none}
.face-folha{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d}
.face-folha svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.face-folha .papel-folha{fill:var(--livro-folha-cor)}
.face-folha.verso{transform:rotateY(180deg)}
.face-folha .conteudo-folha{left:var(--folha-conteudo-x);top:var(--folha-conteudo-y);width:var(--folha-conteudo-w);height:var(--folha-conteudo-h);z-index:1;overflow:hidden;transform:translateZ(.5px) rotate(var(--pagina-giro));backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* raio-x: cada opção é um botão; a escolhida ganha um X */
.holo-opcao{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:6px;width:100%;background:none;border:2px dashed transparent;border-radius:8px;padding:0 4px 0 0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.holo-opcao:not(:disabled):hover,.holo-opcao:focus-visible{border-color:var(--holo);outline:none}
.holo-opcao:disabled{cursor:default}
.holo-opcao .marca{display:grid;place-items:center;width:26px;height:26px;border:3px solid var(--holo);border-radius:7px 9px 6px 8px;background:var(--holo-visor);color:var(--amarelo);font:400 20px/1 var(--fonte-nota)}
.holo-opcao.marcada .marca{border-color:var(--amarelo)}
.holo-opcao .holo-linha{margin:4px 0}

/* texto normal do caderno maior (títulos, subtítulos e a questão do ENEM ficam como estão) */
.nota{font-size:clamp(12px,4.4cqw,21px)}
.nota.pequena{font-size:clamp(11px,3.8cqw,18px)}
.adesivo .formal{font-size:clamp(12px,4.1cqw,19px)}
.legenda{font-size:clamp(11px,3.4cqw,16px)}
.pequeno{font-size:clamp(11px,3.5cqw,16px)}
.aviso-c{font-size:clamp(10px,3.3cqw,15px)}

#bzCaderno{width:44px;height:48px}

/* deitado (computador ou celular): o botão de zoom do cenário no canto de cima à esquerda; a fala começa depois dele */
@media (orientation:landscape){.fala:not(.embaixo){left:74px}#bzCaderno{width:40px;height:44px}}
/* motor-v003: deitado, o raio-x fica por cima da cena, abaixo da fala; posição, largura e escala (zoom) vêm do motor.js */
.app.holo-na-cena .holo{right:auto;max-width:none;overflow-y:auto;scrollbar-width:thin}
.holo .blocos{min-width:0;overflow:hidden}
.bloco-t{overflow:hidden;min-width:0}
/* celular deitado: tudo mais compacto para caber na altura */
@media (orientation:landscape) and (max-height:520px){
  .lado{width:clamp(300px,44vw,460px)}
  .fala .avatar{width:38px;height:38px}
  .balao{font-size:13px;padding:3px 9px 5px}
  .fala.embaixo .avatar{width:48px;height:48px}
  .fala.embaixo .balao{font-size:14px}
  .etq{font-size:11px;min-width:52px}
  .etq b{font-size:12px}
  /* o raio-x compacto só vale fora da cena (com o raio-x na cena, motor-v003, a escala vem do espaço livre) */
  .app:not(.holo-na-cena) .holo{font-size:11px;padding:5px 7px 6px}
  .app:not(.holo-na-cena) .holo-titulo{font-size:12px;margin-bottom:3px}
  .app:not(.holo-na-cena) .holo-rotulo{font-size:11px}
  .app:not(.holo-na-cena) .bloco-t{height:14px;font-size:9px}
  .app:not(.holo-na-cena) .visor{font-size:12px;padding:2px 4px}
  .app:not(.holo-na-cena) .holo-nota,.app:not(.holo-na-cena) .holo-exemplos{font-size:10.5px}
  .app:not(.holo-na-cena) .holo-opcao .marca{width:20px;height:20px;font-size:15px}
  .app:not(.holo-na-cena) .holo-opcao{grid-template-columns:24px 1fr}
  .app:not(.holo-na-cena) .holo-linha{grid-template-columns:1fr auto;gap:2px 5px;margin:2px 0}
  .app:not(.holo-na-cena) .holo-rotulo{grid-column:1/-1}
  .app:not(.holo-na-cena) .visor{min-width:2.8em}
  #bzMapa{width:38px;height:42px}
  #bzCaderno{width:30px;height:33px}
  .fala:not(.embaixo){left:52px}
  .app:not(.holo-na-cena) .holo-formula{font-size:14px}
  .capa-tema{font-size:clamp(34px,8vh,60px)}
  .capa-tag{font-size:13px}
  .capa-faixa{font-size:18px}
  .convite{font-size:15px;padding:6px 12px 7px;bottom:10px}
  .bz{width:44px;height:48px}
  .zc{transform:scale(.8);transform-origin:50% 100%;bottom:6px}
}

/* ---------- placas do cenário (motor-v002): texto no plano do objeto, inclinado como ele ---------- */
.placa{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-origin:0 0;font-family:var(--fonte-nota);line-height:1;text-align:center;color:var(--placa-texto);text-shadow:var(--placa-brilho);pointer-events:none;white-space:nowrap}
.placa span{display:block}

/* ---------- quadro "meta" do raio-x (motor-v002, D-89): barras empilhadas até a linha da meta ---------- */
/* cada opção: o rótulo numa linha; embaixo, a barra e o visor de largura fixa (as barras ficam alinhadas e a linha da meta também) */
.meta-quadro{display:flex;flex-direction:column;gap:2px}
.holo-linha.meta-linha-op{grid-template-columns:1fr auto;gap:3px 6px}
.holo-linha.meta-linha-op.sem-visor{grid-template-columns:1fr}
.meta-linha-op .holo-rotulo{grid-column:1/-1}
.meta-linha-op .visor{min-width:0}
.meta-seg.estreito,.meta-falta.estreito{color:transparent}
.meta-trilho{position:relative;display:flex;align-items:stretch;height:22px;min-width:0;background:var(--meta-trilho);border-radius:3px}
.meta-trilho.com-rotulo{margin-top:17px}
.meta-seg,.meta-falta{flex:0 0 auto;display:grid;place-items:center;overflow:hidden;transform-origin:0 50%;animation:meta-cresce .32s ease-out both;animation-delay:calc(var(--i) * .14s)}
.meta-seg{border:2px solid var(--meta-feito-borda);border-left-width:1px;border-right-width:1px;background:var(--meta-feito);color:var(--meta-feito-texto);font:900 10px var(--fonte-etiqueta)}
.meta-falta{border:2px dashed var(--meta-falta-borda);background:var(--meta-falta);color:var(--meta-falta-texto);font:400 13px var(--fonte-nota);animation-delay:calc(var(--i) * .14s + .2s)}
@keyframes meta-cresce{from{transform:scaleX(0)}}
.meta-linha{position:absolute;top:-5px;bottom:-5px;width:0;border-left:3px dashed var(--meta-linha);margin-left:-1.5px;pointer-events:none}
.meta-rotulo{position:absolute;bottom:calc(100% + 4px);transform:translateX(-50%);font:400 12px/1 var(--fonte-nota);color:var(--meta-linha);white-space:nowrap;pointer-events:none}
.meta-rotulo.a-esquerda{transform:translateX(calc(-100% - 5px))}
.meta-mexer{margin:4px 0 2px}
.meta-mexer-barra.mexendo .meta-seg,.meta-mexer-barra.mexendo .meta-falta{animation:none}
.meta-conta{display:block;text-align:center;font:400 15px/1.2 var(--fonte-nota);color:var(--holo-texto);margin:4px 0 2px}
.meta-conta b{font-weight:400;color:var(--meta-falta-texto);white-space:nowrap}
.meta-controle{display:flex;align-items:center;gap:10px;font:400 14px/1 var(--fonte-etiqueta-nome);color:var(--holo-texto-2);text-transform:uppercase;margin:2px 0}
.meta-controle input{flex:1;min-width:0;height:30px;margin:0;accent-color:var(--meta-puxador);cursor:grab}
.meta-controle.chama input{animation:meta-chama 1.3s ease-in-out infinite}
@keyframes meta-chama{50%{filter:drop-shadow(0 0 7px var(--meta-puxador))}}
@media (orientation:landscape){.meta-trilho{height:28px}.meta-seg{font-size:12px}.meta-falta{font-size:16px}.meta-rotulo{font-size:15px}.meta-trilho.com-rotulo{margin-top:20px}.meta-conta{font-size:19px}}
@media (orientation:landscape) and (max-height:520px){
  .app:not(.holo-na-cena) .meta-trilho{height:16px}.app:not(.holo-na-cena) .meta-seg{font-size:9px}.app:not(.holo-na-cena) .meta-falta{font-size:11px}.app:not(.holo-na-cena) .meta-rotulo{font-size:11px}.app:not(.holo-na-cena) .meta-trilho.com-rotulo{margin-top:14px}
  .app:not(.holo-na-cena) .meta-conta{font-size:13px;margin:1px 0}.app:not(.holo-na-cena) .meta-controle{font-size:11px}.app:not(.holo-na-cena) .meta-controle input{height:22px}
}
@media (prefers-reduced-motion:reduce){.meta-seg,.meta-falta,.meta-controle.chama input{animation:none!important}}