:root{
  --madeira-esc:#10283D; --madeira:#183B55; --madeira-clara:#386B7A; --madeira-luz:#86B6AF;
  --pergaminho:#F4F1E7; --pergaminho-esc:#E5E9DE; --tinta:#142B3A; --tinta-suave:#4C6872;
  --ouro:#E7B84E; --vermelho:#C9412F; --ok:#D6EBDD; --ok-borda:#28694D; --erro:#F6D5CE; --erro-borda:#A2362B;
  --grama-a:#183B3C; --grama-b:#1C4342;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;color:var(--tinta);font-family:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;font-size:16px;line-height:1.35;
  background:radial-gradient(circle at 50% 0,rgba(67,124,110,.38),transparent 60%),
    repeating-conic-gradient(var(--grama-a) 0 25%,var(--grama-b) 0 50%) 0 0/16px 16px}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--ouro);outline-offset:2px}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
h1,h2,h3,p{margin:0}
.pixel,.letreiro h1,.bloco-tit h2,.perfil h2,.escolha h2,.resultado h2,.dialogo .quem b,.grande,.fone b,.opcao .n,.hud .pts,.ator b,.card h3,.treino b{font-family:"Lilita One","Arial Rounded MT Bold","Segoe UI",sans-serif;font-weight:400;letter-spacing:.02em}
.letreiro h1{font-size:clamp(1.7rem,7.5vw,2.8rem)!important;letter-spacing:.03em}
.bloco-tit h2,.perfil h2,.escolha h2{font-size:1.35rem!important}
.card h3,.treino b,.ator b{font-size:1.2rem!important}
.dialogo .quem b{font-size:1.2rem!important}
.resultado h2{font-size:clamp(1.5rem,3.6vh,2rem)!important}
.grande{font-size:2.4rem!important}
.fone b{font-size:1.6rem!important}
.hud .pts{font-size:1.15rem!important}
.opcao .n{font-size:1rem!important}

/* molduras de interface inspiradas nas cores da escola */
.caixa{background:var(--pergaminho);border:3px solid var(--madeira-esc);
  box-shadow:inset 0 0 0 3px var(--madeira-clara),inset 0 0 0 5px var(--madeira);
  clip-path:polygon(3px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0 calc(100% - 3px),0 3px)}
.tabua{background:var(--madeira);color:#F4F1E7;border:3px solid var(--madeira-esc);box-shadow:inset 0 3px 0 var(--madeira-clara),inset 0 -3px 0 #10283D}
.btn{background:var(--madeira);color:#F4F1E7;border:3px solid var(--madeira-esc);box-shadow:inset 0 3px 0 var(--madeira-clara),inset 0 -3px 0 #10283D;
  padding:.55rem 1rem;font-weight:600;font-size:1rem;text-shadow:1px 1px 0 var(--madeira-esc)}
.btn:hover{filter:brightness(1.1)}
.btn:active{box-shadow:inset 0 -3px 0 var(--madeira-clara),inset 0 3px 0 #10283D}
.btn.verde{background:#28694D;box-shadow:inset 0 3px 0 #58A27B,inset 0 -3px 0 #174A39}
.btn.ouro{background:#D9A520;color:#3E2415;text-shadow:none;box-shadow:inset 0 3px 0 #F8DC6E,inset 0 -3px 0 #A57A12}
.estrelas{color:var(--ouro);letter-spacing:1px;text-shadow:1px 1px 0 var(--madeira-esc)}
.estrelas .off{color:var(--madeira-luz);text-shadow:none;opacity:.7}

/* ============ INÍCIO ============ */
.inicio{max-width:640px;margin:0 auto;padding:.75rem .75rem 2rem;display:grid;gap:.85rem}
.titulo{position:relative}
.titulo canvas{width:100%;height:auto;aspect-ratio:2/1;border:3px solid var(--madeira-esc)}
.letreiro{position:absolute;left:50%;top:8%;transform:translateX(-50%);padding:.35rem 1.1rem .45rem;text-align:center;white-space:nowrap}
.letreiro h1{font-size:clamp(1.6rem,7vw,2.6rem);font-weight:700;letter-spacing:1px;color:#F4F1E7;text-shadow:2px 2px 0 var(--madeira-esc),-1px -1px 0 var(--madeira-esc)}
.letreiro p{font-size:.85rem;color:#D6EBDD}
.barra-topo{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.selo-escola{font-size:.9rem;color:#F4F1E7;text-shadow:1px 1px 0 #10283D}
.chave{padding:.3rem .7rem;font-size:.85rem}
.chave[aria-pressed="true"]{background:#D9A520;color:#3E2415;text-shadow:none}
.perfil{padding:.9rem 1rem;display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:center}
.perfil .retrato{width:72px;height:88px;background:var(--pergaminho-esc);border:3px solid var(--madeira);display:grid;place-items:center}
.perfil .retrato canvas{width:58px;height:auto}
.perfil h2{font-size:1.4rem}
.perfil p{font-size:.9rem;color:var(--tinta-suave)}
.nivel{height:12px;background:var(--pergaminho-esc);border:2px solid var(--madeira-esc);margin:.35rem 0 .15rem}
.nivel i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--ouro) 0 6px,#E0AE2C 6px 8px)}
.linha-acoes{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem;align-items:center}
.linha-acoes input{flex:1;min-width:8rem;padding:.4rem .5rem;background:var(--pergaminho-esc);border:2px solid var(--madeira);color:var(--tinta)}
.bloco-tit{display:flex;align-items:center;gap:.5rem;padding:.35rem .8rem;justify-self:start}
.bloco-tit h2{font-size:1.2rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:.75rem}
.card{padding:.55rem;display:grid;gap:.45rem}
.card canvas{width:100%;height:auto;aspect-ratio:2/1;border:2px solid var(--madeira-esc)}
.card h3{font-size:1.15rem;display:flex;justify-content:space-between;align-items:center;gap:.4rem}
.codtag{font-size:.75rem;padding:.05rem .4rem;color:#fff;border:2px solid var(--madeira-esc)}
.card .botoes{display:grid;grid-template-columns:1.3fr 1fr;gap:.4rem}
.jogar{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:.35rem .55rem;text-align:left;font-size:.95rem}
.jogar small{font-size:.8rem;font-weight:400;opacity:.9}
.treinos{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.treino{padding:.7rem .8rem;text-align:left;display:grid;gap:.2rem;color:var(--tinta)}
.treino b{font-size:1.05rem}
.treino small{color:var(--tinta-suave);font-size:.8rem}
.fones{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.fone{padding:.4rem;text-align:center}
.fone b{font-size:1.5rem;display:block;line-height:1}
.fone span{font-size:.78rem;color:var(--tinta-suave)}
.zerar{background:none;border:none;color:#F4F1E7;text-decoration:underline;font-size:.8rem;justify-self:center;text-shadow:1px 1px 0 #10283D}

/* ============ ESCOLHA ============ */
.escolha{max-width:640px;margin:0 auto;padding:.75rem;display:grid;gap:.75rem}
.escolha .caixa{padding:1rem}
.escolha h2{font-size:1.4rem;margin-bottom:.7rem;text-align:center}
.elenco{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.ator{background:var(--pergaminho-esc);border:3px solid var(--madeira);padding:.5rem .2rem .4rem;display:grid;justify-items:center;gap:.2rem}
.ator canvas{width:min(80px,100%);height:auto}
.ator b{font-size:1.1rem}
.ator:hover,.ator.escolhido{border-color:var(--ouro);background:var(--pergaminho)}
.ator.escolhido b::after{content:" ✓";color:var(--ok-borda)}

/* ============ JOGO (sem rolagem) ============ */
.jogo{height:100vh;height:100dvh;max-width:640px;margin:0 auto;padding:.5rem .6rem .6rem;display:flex;flex-direction:column;gap:.45rem;position:relative;overflow:hidden}
.hud{display:flex;align-items:center;gap:.5rem;padding:.3rem .5rem;flex:none}
.hud .sair{background:none;border:2px solid #FCE9C3;color:#FCE9C3;width:2rem;height:2rem;display:grid;place-items:center;flex:none;font-size:1rem;line-height:1}
.hud .nome-fase{flex:1;min-width:0;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud .pts{font-weight:700;font-size:1.05rem;white-space:nowrap}
.hud .pts small{font-weight:400;font-size:.75rem}
.palco{flex:none;display:flex;justify-content:center}
.palco canvas{width:min(100%,50vh);width:min(100%,50dvh);height:auto;aspect-ratio:2/1;border:3px solid var(--madeira-esc);box-shadow:0 0 0 3px var(--madeira-clara)}
.relogio{flex:none;height:8px;border:2px solid var(--madeira-esc);background:var(--pergaminho-esc)}
.relogio i{display:block;height:100%;background:#28694D;transform-origin:left}
.relogio.pouco i{background:var(--vermelho)}
.equipes{flex:none;display:flex;gap:.3rem}
.equipe{flex:1;font-size:.75rem;padding:.15rem .3rem;border:2px solid var(--madeira-esc);background:var(--pergaminho-esc);display:flex;justify-content:space-between}
.equipe.vez{background:var(--cor);color:#fff}
.enunciado{flex:none;padding:.55rem .75rem .6rem}
.enunciado .sit{font-size:clamp(.88rem,1.9vh,1rem);color:var(--tinta-suave);margin-bottom:.2rem}
.enunciado h2{font-size:clamp(1.05rem,2.7vh,1.4rem);font-weight:700;line-height:1.2}
.opcoes{flex:1;min-height:0;display:flex;flex-direction:column;gap:.35rem}
.opcao{display:flex;align-items:center;gap:.55rem;text-align:left;background:var(--pergaminho);border:3px solid var(--madeira);padding:.35rem .6rem;font-size:clamp(.95rem,2.2vh,1.1rem);line-height:1.22;min-height:2.6rem;color:var(--tinta)}
.opcao .n{flex:none;width:1.6rem;height:1.6rem;display:grid;place-items:center;background:var(--madeira);color:#F4F1E7;font-weight:700;font-size:.9rem;border:2px solid var(--madeira-esc)}
.opcao:hover:not(:disabled){background:#FFFFFF;border-color:var(--ouro)}
.opcao:hover:not(:disabled) .n{background:var(--ouro);color:var(--tinta)}
.opcao:disabled{cursor:default}
.opcao.certa{background:var(--ok);border-color:var(--ok-borda)}
.opcao.certa .n{background:var(--ok-borda)}
.opcao.errada{background:var(--erro);border-color:var(--erro-borda);text-decoration:line-through;text-decoration-thickness:2px;opacity:.85}
.opcao.errada .n{background:var(--erro-borda)}
.opcao.apagada{opacity:.45}
.opcao.marcada{border-color:var(--ouro);border-style:dashed}

/* caixa de diálogo estilo RPG */
.dialogo{position:absolute;left:.6rem;right:.6rem;bottom:.6rem;padding:.7rem .8rem .75rem;display:grid;grid-template-columns:auto 1fr;gap:.2rem .75rem;z-index:5;max-height:62%;overflow:auto}
.dialogo .rosto{grid-row:span 3;width:64px;height:78px;background:var(--pergaminho-esc);border:3px solid var(--madeira);display:grid;place-items:center;align-self:start}
.dialogo .rosto canvas{width:56px;height:auto}
.dialogo .quem{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.dialogo .quem b{font-size:1.15rem}
.dialogo .ganho{font-weight:700;color:var(--ok-borda);font-size:1.15rem}
.dialogo.ruim .quem b{color:var(--erro-borda)}
.dialogo p{font-size:clamp(.95rem,2.1vh,1.08rem)}
.dialogo .certo{margin-top:.2rem}
.dialogo .acoes{grid-column:1/-1;display:flex;justify-content:flex-end;gap:.5rem;margin-top:.4rem}
.dialogo .seta{animation:pisca .8s steps(2) infinite}
@keyframes pisca{50%{opacity:0}}

/* resultado */
.resultado{flex:1;min-height:0;overflow:auto;padding:.8rem .9rem;display:grid;gap:.45rem;align-content:start;text-align:center}
.resultado h2{font-size:clamp(1.2rem,3vh,1.6rem)}
.resultado .estrelas{font-size:2rem;line-height:1}
.resultado .grande{font-size:2.2rem;font-weight:700;line-height:1}
.resultado .grande small{display:block;font-size:.8rem;font-weight:400;color:var(--tinta-suave)}
.resultado .selo{justify-self:center;background:var(--ouro);color:#3E2415;padding:.05rem .5rem;border:2px solid var(--madeira-esc);font-size:.85rem}
.resultado ul{list-style:none;padding:0;margin:0;text-align:left;display:grid;gap:.2rem;font-size:.92rem}
.resultado li::before{content:"▸ ";color:var(--ok-borda);font-weight:700}
.resultado .acoes{display:flex;gap:.5rem;justify-content:center;margin-top:.3rem;flex-wrap:wrap}
.podio{display:grid;gap:.3rem}
.podio div{display:flex;justify-content:space-between;border:2px solid var(--madeira-esc);border-left:10px solid var(--cor);padding:.2rem .6rem;background:var(--pergaminho-esc)}

@media (prefers-reduced-motion:reduce){.dialogo .seta{animation:none}}

/* Direção visual: aventura pixel com madeira, papel e identidade da escola. */
:root{
  --madeira-esc:#3A2118; --madeira:#754523; --madeira-clara:#B5793D; --madeira-luz:#D49A57;
  --pergaminho:#F7E6C1; --pergaminho-esc:#EBCF98; --tinta:#30251D; --tinta-suave:#6E5540;
  --ok:#D2E8A9; --ok-borda:#276F3D; --erro:#F5D2B8; --erro-borda:#A43A2B;
}
/* Fundo azul-marinho: céu de estrelas em pixels, brilho lento e grade suave. */
body{
  background:
    radial-gradient(ellipse 80% 55% at 50% -8%,rgba(64,128,214,.42),transparent 70%),
    radial-gradient(ellipse 60% 45% at 100% 100%,rgba(30,90,170,.32),transparent 70%),
    radial-gradient(ellipse 55% 40% at 0 90%,rgba(20,60,130,.35),transparent 70%),
    linear-gradient(180deg,#0B1F3F 0%,#081630 55%,#050E20 100%);
  background-attachment:fixed;
}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
body::before{
  background:
    radial-gradient(2px 2px at 30px 40px,#fff,transparent),
    radial-gradient(2px 2px at 130px 90px,#BFD8FF,transparent),
    radial-gradient(3px 3px at 210px 150px,#fff,transparent),
    radial-gradient(2px 2px at 80px 200px,#DCEBFF,transparent),
    radial-gradient(2px 2px at 260px 20px,#9EC4FF,transparent);
  background-size:290px 240px;
  animation:cintila 5s steps(2,end) infinite alternate;
}
body::before{
  background:
    radial-gradient(2px 2px at 30px 40px,#fff,transparent),radial-gradient(2px 2px at 130px 90px,#BFD8FF,transparent),
    radial-gradient(3px 3px at 210px 150px,#fff,transparent),radial-gradient(2px 2px at 80px 200px,#DCEBFF,transparent),
    radial-gradient(2px 2px at 260px 20px,#9EC4FF,transparent),
    radial-gradient(2px 2px at 60px 70px,#fff,transparent),radial-gradient(3px 3px at 300px 240px,#CFE3FF,transparent),
    radial-gradient(2px 2px at 170px 310px,#fff,transparent),radial-gradient(2px 2px at 40px 260px,#9EC4FF,transparent),
    radial-gradient(2px 2px at 330px 120px,#fff,transparent);
  background-size:367px 331px;
}
body::after{
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 4px),
    linear-gradient(115deg,transparent 30%,rgba(120,180,255,.09) 45%,transparent 60%) -40vw 0/60vw 100% no-repeat;
  animation:brilho 14s linear infinite;
}
#app{position:relative;z-index:1}
@keyframes cintila{0%{opacity:.35}50%{opacity:.85}100%{opacity:1}}
@keyframes brilho{0%{background-position:0 0,-60vw 0}100%{background-position:0 0,160vw 0}}
@media (prefers-reduced-motion:reduce){body::before,body::after{animation:none}}
.caixa{
  background:
    radial-gradient(circle at 20% 10%,rgba(255,255,255,.35),transparent 38%),
    repeating-linear-gradient(0deg,rgba(126,73,35,.035) 0 1px,transparent 1px 5px),var(--pergaminho);
  border:4px solid var(--madeira-esc);
  box-shadow:inset 0 0 0 3px #C08A50,inset 0 0 0 6px #E8C892,0 7px 0 rgba(19,27,21,.45);
}
.tabua{
  background:
    repeating-linear-gradient(0deg,rgba(39,20,12,.17) 0 2px,transparent 2px 10px),
    linear-gradient(90deg,#754523,#A26630 45%,#754523);
  color:#FFF1CC;border:4px solid #392117;
  box-shadow:inset 0 3px 0 #D39953,inset 0 -4px 0 #4F2D1B,0 5px 0 rgba(18,24,18,.45);
  text-shadow:2px 2px 0 #3A2118;
}
.btn{
  background:linear-gradient(#9B6435 0 48%,#754523 49%);
  color:#FFF4D8;border:3px solid #3A2118;
  box-shadow:inset 0 2px 0 #D9A365,inset 0 -3px 0 #542E1A,0 3px 0 rgba(20,28,19,.45);
  text-shadow:1px 2px 0 #3A2118;
  text-transform:uppercase;letter-spacing:.04em;
  font-family:"Lilita One","Segoe UI",sans-serif;
}
.btn.verde{background:linear-gradient(#3F9A47 0 48%,#1E6B38 49%);border-color:#143E2C;box-shadow:inset 0 2px 0 #81C46A,inset 0 -3px 0 #164F32,0 3px 0 rgba(20,28,19,.45)}
.btn.ouro{background:linear-gradient(#F1D16B 0 48%,#C89029 49%);border-color:#70461E;box-shadow:inset 0 2px 0 #FFE5A0,inset 0 -3px 0 #9A671C,0 3px 0 rgba(20,28,19,.45)}
.btn:hover,.ator:hover,.opcao:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.btn:active{transform:translateY(2px);box-shadow:inset 0 2px 0 #542E1A}
.selo-escola{color:#FFF1CC;text-shadow:2px 2px 0 #283A2E;font-family:"Lilita One","Segoe UI",sans-serif}

/* Tela inicial */
.inicio{max-width:1040px;gap:1.2rem;padding:1rem 1rem 3rem}
.hero-inicio{aspect-ratio:3/2;max-height:650px;position:relative;overflow:hidden;border:6px solid #3A2118;box-shadow:inset 0 0 0 3px #C08A50,0 9px 0 rgba(10,29,21,.55);background:#245543}
.hero-inicio:after{content:"";position:absolute;inset:0;border:4px solid #A8713D;pointer-events:none;box-shadow:inset 0 0 0 3px #3A2118}
.hero-inicio canvas{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.hero-cenario{display:block;width:100%;height:100%;object-fit:cover;object-position:center;image-rendering:auto}
.hero-sombra{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,38,28,.42),transparent 37%),linear-gradient(0deg,rgba(17,40,30,.18),transparent 24%);pointer-events:none}
.hero-inicio .letreiro{top:3%;left:50%;right:auto;z-index:3;width:min(52%,420px);padding:.25rem .8rem .35rem;white-space:normal;transform:translateX(-50%)}
.hero-inicio .letreiro h1{font-size:clamp(1.7rem,3.4vw,3rem)!important;line-height:.9;text-transform:uppercase;color:#FFF0C9;text-shadow:3px 3px 0 #412319,-2px -2px 0 #412319}
.hero-inicio .letreiro p{font-family:"Lilita One","Segoe UI",sans-serif;font-size:clamp(.75rem,1.4vw,1.2rem);text-transform:uppercase;letter-spacing:.04em;color:#FFE1A3;text-shadow:1px 2px 0 #412319}
.marca-escola{position:absolute;z-index:2;right:1.1rem;bottom:1rem;width:clamp(76px,9vw,110px);aspect-ratio:1;display:grid;place-items:center;padding:.55rem;background:#FFF9E8;border:4px solid #3A2118;box-shadow:inset 0 0 0 3px #D5A05A,0 4px 0 rgba(17,34,24,.5)}
.marca-escola img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.menu-principal{position:absolute;z-index:3;left:3%;top:auto;bottom:8%;width:min(24%,220px);display:grid;gap:.48rem}
.menu-principal .btn{text-align:left;display:flex;align-items:center;gap:.6rem;padding:.48rem .75rem;font-size:clamp(.78rem,1.55vw,1.08rem);white-space:nowrap}
.menu-principal .btn span{color:#F4C85B;font-size:1.2em}
.menu-principal .btn.verde span{color:#DBFF9F}
.hero-lia{position:absolute;z-index:2;left:51%;bottom:4%;width:92px;height:144px;background:url("../assets/lia/sprites/parada.png?v=lia6") center/contain no-repeat;image-rendering:pixelated;transform:translateX(-50%) scale(1.15);transform-origin:center bottom;filter:drop-shadow(3px 5px 1px rgba(32,23,17,.7))}
.entrada{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(#0a2c5ea6,#050f2aea),var(--fachada,none) center/cover fixed}
.entrada-painel{width:min(100%,440px);padding:28px;display:grid;gap:14px;text-align:center}
.entrada-painel img{width:82px;max-height:82px;object-fit:contain;margin:auto}
.entrada-painel h1{font-size:clamp(2rem,6vw,3rem);line-height:1}
.entrada-painel form{display:grid;gap:10px;text-align:left}
.entrada-painel input{width:100%;padding:13px;font:inherit;font-size:1.2rem;border:3px solid #6b3c1f;border-radius:5px;background:#fff9e9;color:#142a32}
.entrada-painel label{font-weight:700}
.entrada-painel .btn{width:100%}
.erro-entrada{min-height:1.5em;color:#9b2316;font-weight:700}
.identidade-aluno{font-weight:700;align-self:center}
.selo-admin{display:inline-block;padding:.3rem .55rem;background:#173e36;color:#fff0c8;border:2px solid #bd9248;box-shadow:2px 2px 0 #39251a;font-size:.85rem}
.ranking{margin:24px auto;max-width:760px;padding:20px}
.ranking ol{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px}
.ranking li{display:flex;justify-content:space-between;gap:16px;padding:8px 12px;background:#fff3d6;border:1px solid #c7945c}
.ranking li span{text-align:right}
.status-partida{min-height:1.5em;margin:12px 0 0;font-weight:700}
.perfil{padding:1.1rem 1.3rem;grid-template-columns:96px 1fr;gap:1.2rem}
.perfil .retrato{width:88px;height:108px;background:#D9B87E;border:4px solid #754523;box-shadow:inset 0 0 0 2px #F2D8A7}
.perfil .retrato canvas{width:72px}
.perfil h2{font-size:1.55rem!important}
.perfil p{font-size:.95rem}
.nivel{height:16px;background:#BB9B67;border:3px solid #754523}
.nivel i{background:repeating-linear-gradient(90deg,#DDBB54 0 10px,#F9DB79 10px 12px)}
.linha-acoes input{background:#FFF2D1;border:3px solid #A56F37;padding:.5rem .7rem}
.bloco-tit{padding:.45rem 1.2rem;justify-self:center;min-width:min(370px,90%);justify-content:center}
.bloco-tit h2{text-align:center;text-transform:uppercase;font-size:1.5rem!important}
.cards{grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:1rem}
.card{padding:.6rem;gap:.55rem}
.card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 55%;border:3px solid #3A2118;filter:saturate(1.08) contrast(1.03);box-shadow:0 3px 0 #754523}
.card h3{font-size:1.25rem!important}
.card .botoes{gap:.45rem}
.codtag{font-family:"Atkinson Hyperlegible",sans-serif;font-weight:700;border:2px solid #3A2118;text-shadow:1px 1px 0 #3A2118}
.mapa-missoes{position:relative;aspect-ratio:3/2;background:#658747 url("../assets/mapa-missoes.png") center/cover no-repeat;border:6px solid #3A2118;box-shadow:inset 0 0 0 3px #C08A50,0 7px 0 rgba(10,29,21,.5);overflow:hidden}
.mapa-card{position:absolute;width:clamp(160px,20%,210px);padding:.45rem .5rem .55rem;background:#F7E6C1;border:4px solid #754523;box-shadow:inset 0 0 0 2px #EBC78E,0 4px 0 rgba(23,26,18,.55);text-align:center}
.mapa-card:nth-child(1){top:4%;left:3%}.mapa-card:nth-child(2){top:4%;right:3%}.mapa-card:nth-child(3){top:41%;left:3%}.mapa-card:nth-child(4){bottom:4%;left:15%}.mapa-card:nth-child(5){bottom:4%;right:3%}
.mapa-card h3{font:1.08rem "Lilita One","Segoe UI",sans-serif;text-transform:uppercase;line-height:1.05}
.mapa-card .estrelas{display:block;font-size:1.2rem;line-height:1.1}
.mapa-botoes{display:grid;grid-template-columns:1fr 1fr;gap:.25rem;margin-top:.3rem}
.mapa-botoes .btn{padding:.25rem .2rem;font-size:.72rem;border-width:2px}
.treino{background:var(--pergaminho);border-width:4px;padding:1rem}
.fones{gap:.65rem}.fone{padding:.75rem}

/* Personagem e instruções */
.escolha,.ajuda{max-width:800px;margin:0 auto;padding:1rem;display:grid;gap:1rem}
.selecao{padding:1rem!important;display:grid;gap:1rem;min-height:420px;align-content:center}
.elenco{grid-template-columns:repeat(6,1fr);gap:.6rem}
.ator{background:linear-gradient(#DAB784,#B88952);border:4px solid #754523;padding:.7rem .2rem .5rem;box-shadow:inset 0 0 0 2px #F5D7A1,0 4px 0 rgba(35,32,20,.35)}
.ator canvas{width:min(92px,90%)}
.ator b{font-size:1.05rem!important}
.ator.escolhido{background:#F6DFAE;border-color:#E7B84E;box-shadow:inset 0 0 0 2px #FFF3C9,0 0 0 3px #754523,0 5px 0 rgba(35,32,20,.35)}
.detalhe-heroi{display:grid;grid-template-columns:minmax(160px,38%) 1fr;gap:1rem;padding:1rem;background:#F3DBAA;border:3px solid #BD874A;align-items:center}
.heroi-grande{display:grid;place-items:center;min-height:300px;background:linear-gradient(#D6B888,#ECD6A5);border:3px solid #A56F37}
.heroi-grande canvas{width:160px;height:auto}
.detalhe-heroi h2{font-size:1.6rem!important;margin:0 0 .2rem;text-align:left}
.detalhe-heroi p{color:var(--tinta-suave)}
.detalhe-heroi ul{padding-left:1.2rem;margin:.55rem 0 .9rem}
.detalhe-heroi li{margin:.15rem 0}
.ajuda-painel{display:grid;grid-template-columns:190px minmax(0,1fr);grid-template-areas:"prof fala" "regras regras" "jogar jogar";gap:1rem 1.2rem;padding:1.2rem;align-items:center}
.ajuda-prof{grid-area:prof;display:flex;justify-content:center;align-items:end;position:relative;padding-bottom:10px}
.ajuda-prof::after{content:"";position:absolute;left:14%;right:14%;bottom:2px;height:12px;border-radius:50%;background:rgba(58,33,24,.28)}
.professor-retrato{position:relative;z-index:1;width:188px;height:auto;image-rendering:pixelated}
.ajuda-painel .fala{grid-area:fala;margin:0;padding:1rem 1.2rem;background:#FFF8E4;border:3px solid #754523;box-shadow:3px 4px 0 #B48149;font-size:1.15rem;line-height:1.4;position:relative}
.ajuda-painel .fala::before{content:"";position:absolute;left:-13px;top:50%;margin-top:-10px;width:0;height:0;border:10px solid transparent;border-right:12px solid #754523;border-left:0}
.ajuda-painel .fala::after{content:"";position:absolute;left:-8px;top:50%;margin-top:-7px;width:0;height:0;border:7px solid transparent;border-right:8px solid #FFF8E4;border-left:0}
.ajuda-regras{grid-area:regras;padding:.9rem;margin:0;list-style:none;background:#183D36;color:#FFF2D2;border:4px solid #754523;display:grid;gap:.6rem}
.ajuda-regras li{display:flex;gap:.7rem;align-items:start}
.ajuda-regras li b{color:#F4C85B;font-size:1.3rem;min-width:1.5rem}
.ajuda-jogar{grid-area:jogar;justify-self:start}

/* Partida: cenário à esquerda e decisões à direita. */
.jogo{max-width:1060px;min-height:100dvh;height:auto;overflow:visible;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:.75rem;padding:1rem;align-content:start}
.hud{grid-column:1/-1;padding:.5rem .7rem}
.hud .sair{border-color:#FFE2A5;color:#FFE2A5}
.hud .nome-fase{font-family:"Lilita One","Segoe UI",sans-serif;font-size:1.05rem;text-transform:uppercase}
.palco{grid-column:1;grid-row:2;display:block;position:relative;align-self:start;padding:.5rem;background:linear-gradient(#A66C37,#754523);border:4px solid #3A2118;box-shadow:inset 0 0 0 2px #D7A260,0 6px 0 rgba(10,29,21,.5)}
.palco .cenario{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 55%;border:3px solid #3A2118}
.palco canvas{position:absolute;left:.5rem;top:.5rem;width:calc(100% - 1rem);height:calc(100% - 1rem);max-width:none;aspect-ratio:16/9;border:0;box-shadow:none;pointer-events:none}
.camada-atores{position:absolute;left:.5rem;top:.5rem;width:calc(100% - 1rem);height:calc(100% - 1rem);overflow:hidden;pointer-events:none;z-index:1}
.sprite-lia{position:absolute;left:50%;top:87.5%;height:44%;width:auto;max-width:none;image-rendering:pixelated;transform:translate(-50%,-94%);transform-origin:center center;filter:drop-shadow(2px 3px 1px rgba(20,25,22,.58));transition:left .105s linear,top .105s linear}
.retrato-lia{display:block;width:auto;height:100%;max-width:100%;object-fit:contain;image-rendering:pixelated;margin:auto}
.heroi-grande .retrato-lia{height:260px;max-height:100%}
.placa-cenario{position:absolute;top:1rem;left:1rem;z-index:2;display:grid;min-width:125px;padding:.25rem .7rem .35rem;background:linear-gradient(#9D6637,#603719);color:#FFF1D1;border:3px solid #2E1C16;box-shadow:inset 0 0 0 2px #D49A57,0 3px 0 rgba(0,0,0,.45);font-family:"Lilita One","Segoe UI",sans-serif;text-transform:uppercase;text-shadow:1px 2px 0 #2E1C16;line-height:1.05}
.placa-cenario small{font-size:.65rem;color:#F6CD7C}.placa-cenario b{font-size:1.18rem;font-weight:400}
.painel-pergunta{grid-column:2;grid-row:2;padding:.75rem;background:repeating-linear-gradient(0deg,rgba(126,73,35,.055) 0 1px,transparent 1px 20px),#F7E6C1;border:5px solid #3A2118;box-shadow:inset 0 0 0 3px #BC8349,inset 0 0 0 7px #F1D4A0,0 6px 0 rgba(10,29,21,.5);display:grid;align-content:start;gap:.55rem;min-height:390px}
.painel-pergunta-topo{display:flex;align-items:center;justify-content:space-between;gap:.8rem;background:linear-gradient(#A66C37,#754523);border:3px solid #3A2118;color:#FFF1D1;padding:.35rem .7rem;font:1.15rem "Lilita One","Segoe UI",sans-serif;text-transform:uppercase;text-shadow:1px 2px 0 #3A2118;box-shadow:inset 0 2px 0 #D49A57}
.painel-pergunta .enunciado{padding:.45rem .5rem;background:none;border:0;box-shadow:none;clip-path:none}
.painel-pergunta .enunciado h2{font-size:1.22rem;line-height:1.3}
.painel-pergunta .opcoes{display:grid;gap:.45rem}
.relogio{width:110px;height:15px;background:#3F4C3A;border:3px solid #3A2118;box-shadow:inset 0 0 0 2px #BB8750;flex:none}
.relogio i{background:linear-gradient(#79BF58,#267A3F)}
.enunciado{padding:1rem 1.1rem}
.enunciado .sit{font-size:.9rem;color:#705337}
.enunciado h2{font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.3}
.opcoes{gap:.55rem;min-height:0}
.opcao{background:#F8E7C4;border:3px solid #9B683B;box-shadow:inset 0 1px 0 #FFF6DD,0 3px 0 rgba(21,31,22,.35);min-height:3.2rem;padding:.5rem .65rem;font-size:1rem}
.opcao .n{background:linear-gradient(#B77B3C,#754523);border:2px solid #4F2D1B;color:#FFF2CF;width:1.9rem;height:1.9rem}
.opcao.certa{background:#D2E8A9;border-color:#287846}.opcao.certa .n{background:#287846}
.opcao.errada{background:#F4CFBA;border-color:#A43A2B}.opcao.errada .n{background:#A43A2B}
.dialogo{left:auto;right:1rem;bottom:1rem;width:calc(50% - 1.25rem);max-height:70%;padding:1rem;box-shadow:inset 0 0 0 3px #D6A063,0 0 0 9999px rgba(14,28,24,.38)}
.dialogo.acerto,.dialogo.ruim{padding-top:2.2rem}
.dialogo.acerto:before,.dialogo.ruim:before{position:absolute;top:0;left:50%;transform:translateX(-50%);padding:.15rem 1.4rem;color:#FFF4D8;border:3px solid #3A2118;font-family:"Lilita One","Segoe UI",sans-serif;font-size:1.2rem;letter-spacing:.05em;text-shadow:1px 2px 0 #3A2118;white-space:nowrap}
.dialogo.acerto:before{content:"CORRETO!";background:#2C8B43}
.dialogo.ruim:before{content:"OPS!";background:#BD4330}
.dialogo .rosto{width:72px;height:86px;border:3px solid #754523;background:#E5BC7F}
.dialogo .rosto canvas{width:62px}
.dialogo .quem b{font-size:1.4rem!important;text-transform:uppercase;color:#276F3D}
.dialogo.ruim .quem b{color:#A43A2B}
.resultado{grid-column:2;grid-row:2;min-height:390px;padding:1rem}
.resultado h2{font-size:1.7rem!important}.resultado .estrelas{font-size:2.3rem}
.resultado .grande{font-size:2.6rem!important}
.resultado li{padding:.15rem .3rem;background:rgba(255,255,255,.24)}

@media (max-width:740px){
  .hero-inicio{height:auto;max-height:none;aspect-ratio:auto;display:flex;flex-direction:column}
  .hero-cenario{height:auto;aspect-ratio:1600/650;object-fit:cover;order:0}
  .hero-sombra{display:none}
  .hero-lia{display:none}
  .hero-inicio .letreiro{position:static;order:-1;left:auto;right:auto;top:auto;transform:none;width:100%;min-width:0}
  .hero-inicio .letreiro h1{font-size:clamp(1.8rem,5vw,2.5rem)!important}
  .menu-principal{position:static;order:1;left:auto;top:auto;width:100%;grid-template-columns:repeat(2,1fr);padding:.6rem}
  .menu-principal .btn{justify-content:center;font-size:.86rem}
  .marca-escola{position:static;order:2;width:76px;margin:.2rem .6rem .6rem auto;padding:.3rem;border-width:3px}
  .mapa-missoes{aspect-ratio:3/2;padding:0;display:block;background-size:cover;background-position:center;overflow:hidden}
  .mapa-card{position:absolute;width:clamp(126px,40%,200px);min-width:0;padding:.25rem .3rem;border-width:3px;z-index:1}
  .mapa-card:nth-child(1){top:3%;left:2%;right:auto;bottom:auto}
  .mapa-card:nth-child(2){top:3%;right:2%;left:auto;bottom:auto}
  .mapa-card:nth-child(3){top:36%;left:50%;right:auto;bottom:auto;transform:translateX(-50%)}
  .mapa-card:nth-child(4){bottom:3%;left:2%;right:auto;top:auto}
  .mapa-card:nth-child(5){bottom:3%;right:2%;left:auto;top:auto}
  .mapa-card h3{font-size:clamp(.75rem,2.3vw,1rem)}
  .mapa-card .estrelas{font-size:1rem}
  .mapa-botoes{margin-top:.12rem;gap:.15rem}
  .mapa-botoes .btn{font-size:.65rem;padding:.15rem .1rem}
  .mapa-card:focus-within,.mapa-card:hover{z-index:3}
  .elenco{grid-template-columns:repeat(3,1fr)}
  .jogo{display:flex;flex-direction:column;min-height:100dvh;height:auto;gap:.55rem;padding:.6rem}
  .palco{order:1;padding:.3rem}.hud{order:0}.painel-pergunta{order:3;width:100%;min-height:0}.resultado{order:3}
  .palco canvas,.camada-atores{left:.3rem;top:.3rem;width:calc(100% - .6rem);height:calc(100% - .6rem)}
  .dialogo{position:fixed;left:.6rem;right:.6rem;bottom:.6rem;width:auto;max-height:64vh;z-index:10}
  .opcoes{flex:none}.opcao{min-height:2.8rem}
}
@media (max-width:490px){
  .inicio{padding:.5rem .5rem 2rem}
  .mapa-missoes{aspect-ratio:auto;height:clamp(270px,75vw,360px)}
  .hero-inicio .letreiro{padding:.25rem .4rem}
  .hero-inicio .letreiro h1{font-size:2rem!important}
  .menu-principal{gap:.4rem;padding:.5rem}.menu-principal .btn{font-size:.76rem;padding:.38rem .45rem}
  .marca-escola{width:66px}
  .mapa-card{width:43%;padding:.15rem .2rem;border-width:2px}
  .mapa-card h3{font-size:clamp(.62rem,2.5vw,.78rem);line-height:1}
  .mapa-card .estrelas{font-size:.78rem;line-height:1}
  .mapa-botoes .btn{font-size:clamp(.54rem,2.2vw,.67rem);padding:.1rem 0;border-width:1px;min-height:21px}
  .perfil{grid-template-columns:65px 1fr;padding:.7rem;gap:.6rem}.perfil .retrato{width:62px;height:78px}.perfil .retrato canvas{width:51px}
  .cards{grid-template-columns:1fr}.treinos{grid-template-columns:1fr}.fones{grid-template-columns:repeat(2,1fr)}
  .escolha,.ajuda{padding:.6rem}.elenco{gap:.35rem}.ator{padding:.3rem .1rem}.ator canvas{width:min(68px,90%)}
  .detalhe-heroi{grid-template-columns:90px 1fr;padding:.5rem;gap:.6rem}.heroi-grande{min-height:120px}.heroi-grande canvas{width:75px}.heroi-grande .retrato-lia{height:105px}
  .detalhe-heroi ul{font-size:.85rem}
  .ajuda-painel{grid-template-columns:96px minmax(0,1fr);gap:.65rem;padding:.65rem}
  .professor-retrato{width:94px}
  .ajuda-painel .fala{font-size:.9rem;line-height:1.25;padding:.55rem}
  .ajuda-regras{padding:.7rem;gap:.45rem;font-size:.9rem}
  .ajuda-jogar{justify-self:stretch}
}