/* Conversas de apresentação e orientação, com as artes do próprio jogo. */
.encontro-personagem{max-width:1220px;margin:0 auto;padding:28px 24px 48px;display:grid;gap:20px}
.retrato-historia{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);border:1px solid #8b9c7d;box-shadow:0 20px 70px #031a2766;background:#f4f0e2;overflow:hidden}
.historia-arte{position:relative;isolation:isolate;min-height:580px;display:flex;justify-content:center;align-items:flex-end;padding:90px 30px 125px;background:#254c46;overflow:hidden}
.historia-arte::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--fundo-historia,url('../assets/convulsao.png'));background-position:center;background-size:cover;filter:brightness(.64) saturate(.75)}
.historia-arte::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#103b39 0%,#123f3a00 65%)}
.historia-fundo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:brightness(.64) saturate(.75)}
.historia-arte .retrato-lia{width:auto;height:330px;max-width:100%;margin:0;object-fit:contain;filter:drop-shadow(4px 8px 0 #102f3255)}
.etiqueta-historia{position:absolute;left:24px;right:24px;top:26px;color:#f6e4ae;font-size:.67rem;font-weight:bold;letter-spacing:.14em;line-height:1.6;border-top:1px solid #d8c6877a;padding-top:14px}
.assinatura-personagem{position:absolute;bottom:32px;left:30px;color:#fff1c9;font-family:'Lilita One',sans-serif;font-size:3.2rem;line-height:1.05}
.assinatura-personagem span{display:block;margin-top:10px;font-family:'Atkinson Hyperlegible',sans-serif;font-size:.9rem;letter-spacing:.02em;color:#d0dfc3}
.historia-conversa{padding:36px;display:flex;flex-direction:column;gap:22px;color:#294b40}
.sobretitulo{font-size:.68rem;text-transform:uppercase;font-weight:bold;letter-spacing:.14em;color:#627566;line-height:1.5}
.historia-conversa h1{font-family:'Lilita One',sans-serif;font-weight:400;font-size:2.5rem;line-height:1.1;color:#204b40;margin-top:-12px}
.capitulos-personagem{display:flex;gap:6px;border-bottom:1px solid #c7cdbb;padding-bottom:16px;flex-wrap:wrap}
.capitulos-personagem button{border:1px solid #b8c4af;background:transparent;color:#365747;padding:8px 10px;font:700 .76rem 'Atkinson Hyperlegible',sans-serif;cursor:pointer;min-height:44px}
.capitulos-personagem button[aria-pressed=true]{background:#285a49;color:#fff4d3;border-color:#285a49}
.fala-personagem h2{font-family:'Lilita One',sans-serif;font-weight:400;font-size:1.65rem;line-height:1.2;margin-bottom:14px}
.fala-personagem>p{font-size:1.1rem;line-height:1.7;color:#3f5547}
.nota-personagem{border-left:3px solid #c8a851;padding:0 0 0 16px;margin-top:25px}
.nota-personagem b{font-size:.85rem}.nota-personagem p{margin-top:6px;font-size:.94rem;line-height:1.6;color:#5b6d5d}
.acoes-personagem{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:12px}
.acoes-personagem .btn{font-size:.86rem;min-height:46px}
.passos-guia{display:flex;gap:8px;flex-wrap:wrap}.passos-guia span{padding:8px 10px;border-bottom:3px solid #d4dacb;font-size:.83rem;color:#667760}.passos-guia [aria-current]{border-color:#bb9843;color:#234f3d;font-weight:700}
.modos-guia{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modos-guia>div{padding:16px;background:#e5ebdc;border:1px solid #c3ceb7}.modos-guia b{font-size:.94rem}.modos-guia p{margin-top:8px;font-size:.9rem;line-height:1.55}
.escolhas-guia{display:grid;gap:10px;margin-top:12px}.escolhas-guia .btn{text-align:left;justify-content:flex-start;text-transform:none;font-family:'Atkinson Hyperlegible',sans-serif;font-size:1rem;line-height:1.4;white-space:normal}
.retorno-guia:not(:empty){margin-top:16px;padding:14px 16px;background:#e3ecd7;border-left:3px solid #4f7952;line-height:1.6}
.encontro-personagem button:focus-visible{outline:3px solid #b68028;outline-offset:4px}
.encontro-personagem button:disabled{cursor:default;opacity:.6}
@media(max-width:820px){
 .encontro-personagem{padding:16px;gap:14px}.retrato-historia{grid-template-columns:1fr}.historia-arte{min-height:300px;padding:60px 26px 24px;justify-content:flex-end}.historia-arte .retrato-lia{height:215px;margin-right:6%}.assinatura-personagem{left:24px;bottom:32px;font-size:2.6rem}.etiqueta-historia{top:16px;left:24px;right:24px}.historia-conversa{padding:26px;gap:20px}.historia-conversa h1{font-size:2.1rem}
}
@media(max-width:490px){
 .encontro-personagem{padding:10px 10px 28px}.encontro-personagem .selo-escola{font-size:.8rem}.historia-arte{min-height:260px;padding:55px 14px 20px}.historia-arte .retrato-lia{height:185px;margin-right:0}.assinatura-personagem{left:18px;font-size:2.2rem;max-width:52%}.assinatura-personagem span{font-size:.76rem;line-height:1.5}.etiqueta-historia{left:18px;right:18px;font-size:.58rem}.historia-conversa{padding:24px 18px;gap:18px}.capitulos-personagem{gap:6px}.capitulos-personagem button{font-size:.7rem;padding:7px}.fala-personagem>p{font-size:1rem;line-height:1.65}.fala-personagem h2{font-size:1.5rem}.acoes-personagem{flex-direction:column}.acoes-personagem .btn{width:100%}.modos-guia{grid-template-columns:1fr}.passos-guia{gap:3px}.passos-guia span{font-size:.76rem;padding:7px 9px}
}

/* sprites v3 sao artes grandes reduzidas: suavizar em vez de pixelar */
.hero-lia,.retrato-lia,.sprite-lia,.figurante,.professor-retrato{image-rendering:auto}
.perfil .retrato .retrato-lia{width:100%;height:100%;object-fit:contain;object-position:center bottom}
/* Lia em primeiro plano na abertura, como se estivesse perto da câmera */
.hero-lia{left:66%;bottom:-4%;width:clamp(170px,19%,290px);height:auto;aspect-ratio:4/5;background-size:contain;background-position:center bottom}
@media(max-width:820px){.hero-lia{left:72%;bottom:-4%;width:38%;height:auto}.marca-escola{top:16px;bottom:auto}}
@media(max-width:490px){.hero-lia{left:72%;bottom:-3%;width:58%;height:auto}.marca-escola{top:16px;bottom:auto;right:16px}}
.selecao-personagens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.opcao-personagem{display:flex;align-items:center;justify-content:center;gap:12px;border:2px solid #b8c4af;background:#f8f3e5;padding:10px;border-radius:12px;color:#285a49;font:700 1rem 'Atkinson Hyperlegible',sans-serif;cursor:pointer;min-height:100px}
.opcao-personagem .retrato-lia{height:80px;width:64px;object-fit:contain}
.opcao-personagem[aria-pressed=true]{border-color:#285a49;background:#dce8cf;box-shadow:0 0 0 2px #285a49}
@media(max-width:600px){.selecao-personagens{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.opcao-personagem{gap:6px;padding:6px}}
.hero-turma{position:absolute;z-index:2;left:68%;bottom:0;width:48%;height:76%;object-fit:contain;object-position:center bottom;transform:translate(calc(-50% - 40px),15px);pointer-events:none;filter:drop-shadow(2px 5px 1px #16332666)}
@media(max-width:820px){.hero-turma{left:72%;width:53%;height:68%}}
@media(max-width:490px){.hero-turma{left:50%;bottom:46%;width:94%;height:30%;transform:translateX(-50%)}}
@media(max-width:820px){.hero-inicio .menu-principal{left:50%;width:min(280px,calc(100% - 40px));transform:translateX(-50%);grid-template-columns:minmax(0,1fr)}.hero-inicio .menu-principal .btn{width:100%;min-width:0;justify-content:center;text-align:center;white-space:normal}}