/* Direção pixel: a escola e os personagens são o foco; a interface os acompanha. */
:root{
  --madeira-esc:#102e32;--madeira:#204b49;--madeira-clara:#46766a;--madeira-luz:#91b2a0;
  --pergaminho:#f5f1e4;--pergaminho-esc:#e2e7d8;--tinta:#183834;--tinta-suave:#526a61;
  --ouro:#edc568;--ok:#dcebd7;--ok-borda:#286446;--erro:#f6dfd5;--erro-borda:#a13d32;
}
body{background:radial-gradient(ellipse at 50% 0,#284e48 0,transparent 65%),#0b2429;background-attachment:fixed}
body::before{background:radial-gradient(1px 1px at 20px 30px,#b6cdb5 98%,transparent) 0 0/64px 64px;opacity:.12;animation:none}
body::after{display:none}
:focus-visible{outline:3px solid #eab94e;outline-offset:4px}
.caixa{background:var(--pergaminho);border:1px solid #b4c4ad;box-shadow:0 5px 0 #061d2433;clip-path:none}
.tabua{background:#153b3c;border:1px solid #6d93804d;color:#f6f0dd;box-shadow:0 3px 0 #061d2433;text-shadow:none}
.btn{min-height:44px;padding:.65rem 1rem;background:#224d49;border:1px solid #698c78;color:#fff8e7;box-shadow:inset 0 2px #ffffff12,0 3px #0a292c;text-shadow:none;letter-spacing:.035em;transition:background .16s,transform .16s,box-shadow .16s}
.btn.verde{background:#34764c;border-color:#80ac76;box-shadow:inset 0 2px #b6db8c33,0 3px #16472f}
.btn.ouro{background:#edc568;border-color:#fae4a6;color:#233e33;box-shadow:0 3px #9b762a;text-shadow:none}
.btn:hover{filter:none;background:#30665c;transform:translateY(-2px)}
.btn.verde:hover{background:#418b56}.btn.ouro:hover{background:#f6d78c}
.btn:active{transform:translateY(1px);box-shadow:inset 0 2px #0002}
.btn:disabled{opacity:.65;cursor:wait;transform:none}
.estrelas{color:#bf861a;text-shadow:none}.estrelas .off{color:#7d927a;opacity:.5}
.inicio{max-width:1320px;padding:24px 24px 64px;gap:24px}
.hero-inicio{aspect-ratio:2/1;max-height:none;border:2px solid #668572;box-shadow:0 18px 50px #001b2666;background:#153b3c}
.hero-inicio::after{border:1px solid #f3dfac55;inset:6px;box-shadow:none}
.hero-cenario{object-position:center}
.hero-sombra{background:linear-gradient(90deg,#082e2dd9,transparent 58%),linear-gradient(0deg,#082d3259,transparent 45%)}
.hero-inicio .letreiro{top:7%;left:4%;transform:none;width:auto;max-width:50%;padding:0;text-align:left;background:none;border:0;box-shadow:none}
.hero-inicio .letreiro h1{font-size:clamp(2.4rem,4.8vw,4.4rem)!important;line-height:.95;letter-spacing:.01em;color:#fff4cf;text-shadow:0 4px #163934,3px 0 #163934}
.hero-inicio .letreiro p{margin-top:14px;font:700 .8rem "Atkinson Hyperlegible",sans-serif;letter-spacing:.16em;color:#f2ddb0;text-shadow:0 1px #122e2a}
.menu-principal{left:4%;bottom:8%;width:250px;gap:9px}
.menu-principal .btn{font-size:.95rem;padding:.65rem 1rem;min-height:46px}
.hero-lia{left:61%;bottom:5%;transform:translateX(-50%);width:100px;height:157px;filter:drop-shadow(2px 5px 1px #16332699)}
.marca-escola{width:74px;right:22px;bottom:22px;padding:8px;border:1px solid #adbd9c;box-shadow:0 4px #102e3233;background:#fffdf0}
.perfil{padding:24px;grid-template-columns:76px minmax(0,1fr);gap:20px}
.perfil .retrato{width:72px;height:96px;background:#dce5ce;border:1px solid #94ad8e;box-shadow:inset 0 -16px #bfceb1;overflow:hidden}
.perfil h2{font-size:1.55rem!important}.perfil p{line-height:1.55}
.nivel{height:8px;margin:10px 0 6px;border:0;background:#d7deca}
.nivel i{background:linear-gradient(90deg,#3f7b50,#96ac54)}
.linha-acoes{gap:10px;margin-top:12px}.linha-acoes .btn{font-size:.8rem;min-height:38px;padding:.45rem .7rem}
.identidade-aluno{font-size:.85rem}.selo-admin{background:#dce6d4;border:1px solid #9ab393;color:#31573e;box-shadow:none}
.bloco-tit{justify-self:stretch;justify-content:space-between;min-width:0;padding:8px 0;background:none;border:0;border-bottom:1px solid #648d7559;box-shadow:none}
.bloco-tit h2{font-size:1.35rem!important;letter-spacing:.07em;text-align:left}
.mapa-missoes{border:2px solid #668572;box-shadow:0 12px 32px #001b2633;aspect-ratio:1.5;background-image:url("../assets/mapa-escola.webp");display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:space-between;gap:24px;padding:24px}
.mapa-missoes .mapa-card:nth-child(n){position:relative;inset:auto;transform:none;width:100%;min-width:0}
@media(max-width:900px){.mapa-missoes{aspect-ratio:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:16px}}
.mapa-card:nth-child(4){left:3%}
.mapa-card{width:clamp(190px,21%,250px);padding:12px;background:#f5f1e4f5;border:1px solid #7a987b;box-shadow:0 4px #153d3855,0 10px 24px #0c352626}
.mapa-card h3{font-size:1rem;line-height:1.15;color:#22483d}
.mapa-card .estrelas{margin:5px 0;font-size:1.1rem}
.mapa-botoes{gap:6px}.mapa-botoes .btn{min-height:40px;padding:6px;font-size:.75rem;border-width:1px}
.treinos{gap:16px}.treino{padding:22px;border:1px solid #b4c4ad;gap:7px;transition:transform .16s,background .16s}
.treino:hover{transform:translateY(-2px);background:#fff9e8}.treino small{font-size:.95rem}
.fones{gap:12px}.fone{background:#163b3d;border-color:#638b7155;padding:18px;color:#f0d28a;box-shadow:none}
.fone span{color:#c0d0c0;display:block;margin-top:6px}
.ranking{width:100%;max-width:none;margin:0;padding:24px}.ranking h2{font:1.4rem "Lilita One",sans-serif}
.ranking>p{color:var(--tinta-suave);margin-top:6px}.ranking li{background:#e8ecdf;border:0;padding:12px}
.entrada{background:linear-gradient(90deg,#0b3029b3,#0b293c88),var(--fachada,none) center/cover fixed}
.entrada-painel{padding:32px;gap:18px;box-shadow:0 24px 80px #001e3066;border-top:4px solid #d5b05c}
.entrada-painel h1{font-family:"Lilita One",sans-serif}.entrada-painel input{border:1px solid #90a58b;background:#fffdf5;border-radius:0}

/* Mais espaço para a cena, mantendo as decisões legíveis. */
.jogo{max-width:1520px;min-height:100dvh;padding:24px 32px 48px;gap:20px;grid-template-columns:minmax(0,1.7fr) minmax(350px,1fr);grid-template-rows:auto auto;align-items:start}
.hud{padding:12px 16px;gap:16px;border-bottom:2px solid #b99c5855;box-shadow:none;background:#133738}
.hud .sair{width:40px;height:40px;border:1px solid #6c8c78;color:#f5edd9;transition:background .16s}
.hud .sair:hover{background:#306359}.hud .nome-fase{font-size:1rem;letter-spacing:.05em}.hud .pts{color:#f1cd78}
.palco{width:100%;padding:0;border:2px solid #738b74;background:#153537;box-shadow:0 16px 40px #031a2766;overflow:hidden}
.palco .cenario{aspect-ratio:3/2;border:0;object-fit:cover;object-position:center;filter:none}
.palco canvas,.camada-atores{inset:0;width:100%;height:100%;aspect-ratio:auto}
.palco::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;box-shadow:inset 0 0 36px #132c3326;border:1px solid #f6e8bc40}
.sprite-lia{filter:drop-shadow(2px 4px 1px #102e3280)}
.placa-cenario{top:16px;left:auto;right:16px;min-width:0;padding:9px 13px;background:#102f32ed;border:1px solid #8fa081a6;border-left:3px solid #e7c16a;box-shadow:0 3px 12px #041d3040;text-shadow:none;gap:3px}
.placa-cenario small{font:700 .6rem "Atkinson Hyperlegible",sans-serif;letter-spacing:.16em;color:#bdcbb4}.placa-cenario b{font-size:1rem;color:#fff1c9}
.painel-pergunta{min-height:0;padding:24px;gap:18px;background:#f5f1e4;border:1px solid #b4c4ad;border-top:3px solid #d4b469;box-shadow:0 6px 0 #061d2426;align-self:stretch;align-content:start}
.painel-pergunta-topo{background:none;border:0;border-bottom:1px solid #c7d0b9;padding:0 0 12px;box-shadow:none;color:#57715c;font:700 .75rem "Atkinson Hyperlegible",sans-serif;letter-spacing:.1em;text-shadow:none}
.painel-pergunta .enunciado{padding:0}.enunciado .sit{font-size:1rem;line-height:1.55;color:#566c5d;margin-bottom:14px}
.painel-pergunta .enunciado h2{font-size:clamp(1.22rem,1.5vw,1.5rem);line-height:1.3;color:#173d35}
.painel-pergunta .opcoes{display:grid;gap:12px}
.opcao{background:#fffdf5;border:1px solid #acbca1;box-shadow:0 3px #cbd4bd;min-height:64px;padding:13px 12px;font-size:1rem;line-height:1.35;gap:12px;transition:transform .15s,background .15s,border-color .15s}
.opcao .n{width:28px;height:30px;background:#e3ead9;border:0;color:#436448}
.opcao:hover:not(:disabled){background:#eff4e5;border-color:#467956;filter:none;transform:translateX(3px)}
.opcao:hover:not(:disabled) .n{background:#34734e;color:white}
.opcao.certa{background:#e0efda;border-color:#4c8450;box-shadow:0 3px #a1c399}.opcao.certa .n{background:#34734e;color:white}
.opcao.errada{background:#f5e0d8;border-color:#bd776a;box-shadow:0 3px #dcb4a4}.opcao.errada .n{background:#a44638;color:white}
.relogio{height:8px;width:96px;border:0;background:#d6dfca;box-shadow:none}.relogio i{background:#4b8252}.relogio.pouco i{background:#b44d38}
.dialogo{position:fixed;inset:auto 24px 24px auto;width:min(520px,calc(100% - 48px));max-height:calc(100dvh - 48px);padding:24px;gap:10px 16px;border:2px solid #75946e;box-shadow:0 0 0 100vmax #061e286b,0 20px 60px #001e3055;z-index:10;animation:chegada .18s ease-out}
.dialogo.acerto,.dialogo.ruim{padding-top:24px;border-top:5px solid #518655}.dialogo.ruim{border-top-color:#b16049}
.dialogo.acerto::before,.dialogo.ruim::before{display:none}
.dialogo .rosto{width:64px;height:84px;background:#dce5ce;border:1px solid #9bb092;overflow:hidden}
.dialogo .quem b{font-size:1.2rem!important;text-transform:none}.dialogo p{line-height:1.5;font-size:1rem}
.dialogo .acoes{margin-top:10px}.dialogo .acoes .btn{min-height:46px}
.resultado{min-height:0;padding:28px;gap:16px;align-self:stretch;border-top:3px solid #d4b469}
.resultado li{padding:6px 8px;background:#e6ebdc}.resultado .grande{color:#2f6546}.resultado .selo{border:0;padding:5px 12px;background:#f1d991}
.resultado .grande small{line-height:1.5;margin-top:8px}.status-partida{font-size:.85rem;color:#526a61}
.detalhe-heroi{background:#e7ecdc;border:1px solid #b4c4ad;padding:24px}.heroi-grande{background:radial-gradient(ellipse,#f5f3d6,#d3dfc5);border:1px solid #b4c4ad}
.ajuda-painel .fala{background:#fffdf5;border:1px solid #9fb398;box-shadow:3px 4px #d3ddc6}.ajuda-painel .fala::before{border-right-color:#9fb398}.ajuda-painel .fala::after{border-right-color:#fffdf5}
.ajuda-regras{background:#204c46;border:0;padding:20px}.selo-escola{color:#d8e0c9;text-shadow:none}
@keyframes chegada{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.dialogo{right:max(24px,calc((100vw - 1456px)/2));bottom:32px}}
@media(max-width:1100px){
  .jogo{padding:20px;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:16px}
  .painel-pergunta{padding:18px;gap:14px}.opcao{padding:11px 10px}.enunciado .sit{font-size:.95rem}
  .hero-inicio{aspect-ratio:1.8}.hero-inicio .letreiro h1{font-size:3rem!important}.menu-principal{width:215px}
  .mapa-card{width:23%;min-width:170px}
}
@media(max-width:820px){
  .jogo{display:flex;flex-direction:column;gap:14px;padding:16px;min-height:100dvh}
  .hud{width:100%;order:0;padding:8px 10px;gap:10px}.palco{order:1}.painel-pergunta,.resultado{order:2;width:100%}
  .palco .cenario{aspect-ratio:16/10}.palco canvas,.camada-atores{inset:0;width:100%;height:100%}
  .dialogo{inset:auto 16px 16px;width:auto;max-height:70dvh;padding:20px}
  .dialogo.acerto,.dialogo.ruim{padding-top:20px}
  .inicio{padding:16px 16px 40px;gap:20px}
  .hero-inicio{display:block;aspect-ratio:1.5}.hero-cenario{height:100%;aspect-ratio:auto}
  .hero-inicio .letreiro{position:absolute;top:7%;left:5%;max-width:70%;width:auto;transform:none;padding:0}
  .hero-inicio .letreiro h1{font-size:clamp(2.2rem,6vw,3rem)!important}
  .hero-inicio .letreiro p{font-size:.7rem;letter-spacing:.09em;margin-top:10px}
  .hero-sombra{display:block}.hero-lia{display:block;left:67%;width:80px;height:125px}
  .menu-principal{position:absolute;left:5%;bottom:7%;width:200px;padding:0;grid-template-columns:1fr;gap:8px}
  .menu-principal .btn{justify-content:flex-start;font-size:.85rem;padding:.55rem .8rem}
  .marca-escola{position:absolute;right:16px;bottom:16px;width:56px;margin:0;padding:5px;border-width:1px}
  .mapa-missoes{aspect-ratio:auto;height:auto;padding:calc(66.6vw - 24px) 16px 16px;display:grid;grid-template-columns:1fr 1fr;gap:12px;background-size:100% auto;background-position:top;background-image:url("../assets/mapa-escola.webp");background-color:#173d38;background-repeat:no-repeat;overflow:visible}
  .mapa-card:nth-child(n){position:relative;inset:auto;transform:none;width:auto;min-width:0;padding:14px;border-width:1px;display:grid;align-content:space-between;gap:5px}
  .mapa-card:last-child{grid-column:1/-1}.mapa-card h3{font-size:1rem;line-height:1.2}
  .mapa-card .estrelas{font-size:1.1rem;line-height:1.2}.mapa-botoes{gap:8px;margin-top:4px}
  .mapa-botoes .btn{font-size:.75rem;min-height:44px;padding:8px 4px;border-width:1px}
}
@media(max-width:490px){
  .inicio{padding:10px 10px 32px;gap:18px}.hero-inicio{aspect-ratio:auto;height:520px}
  .hero-inicio .letreiro{max-width:90%;top:6%}.hero-inicio .letreiro h1{font-size:2.8rem!important}
  .hero-cenario{object-position:57% center}.hero-sombra{background:linear-gradient(90deg,#082e2dba,transparent 90%),linear-gradient(0deg,#082d32b3,transparent 60%)}
  .hero-lia{left:76%;bottom:14%;width:75px;height:118px}.menu-principal{bottom:7%;width:185px}.marca-escola{width:46px;bottom:18px;right:18px}
  .perfil{padding:16px;grid-template-columns:52px minmax(0,1fr);gap:12px}.perfil .retrato{width:52px;height:76px}
  .perfil h2{font-size:1.25rem!important}.perfil p{font-size:.87rem}.linha-acoes{gap:8px}.linha-acoes .btn{min-height:44px}
  .mapa-missoes{padding:calc(66.6vw - 16px) 10px 10px;gap:10px;height:auto}.mapa-card:nth-child(n){padding:10px 8px}.mapa-card h3{font-size:.9rem}
  .mapa-botoes{grid-template-columns:1fr}.mapa-card:last-child .mapa-botoes{grid-template-columns:1fr 1fr}
  .ranking{padding:18px}.ranking li{flex-direction:column;gap:4px}.ranking li span{text-align:left}
  .jogo{padding:10px;gap:12px}.hud .nome-fase{font-size:.8rem;letter-spacing:0}.hud .pts{font-size:.95rem!important}
  .palco .cenario{aspect-ratio:3/2}.placa-cenario{top:10px;left:auto;right:10px;padding:6px 9px}.placa-cenario b{font-size:.85rem}
  .painel-pergunta{padding:18px 14px;gap:16px}.painel-pergunta .enunciado h2{font-size:1.25rem}.enunciado .sit{font-size:.95rem}
  .opcao{min-height:60px;font-size:1rem}.painel-pergunta .opcoes{gap:12px}
  .dialogo{inset:auto 10px max(10px,env(safe-area-inset-bottom));padding:18px;gap:10px;max-height:75dvh}.dialogo.acerto,.dialogo.ruim{padding-top:18px}
  .dialogo .rosto{width:48px;height:64px}.dialogo .quem b{font-size:1.1rem!important}.dialogo .acoes .btn{width:100%}
  .resultado{padding:20px}.entrada{padding:16px}.entrada-painel{padding:26px 22px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.mapa-encontros{margin:0;border:2px solid #668572;background:#173d38}
.mapa-painel{position:relative;display:grid;gap:16px}
.mapa-encontros a{display:block}
.mapa-encontros img{display:block;width:100%;height:auto}
.mapa-encontros figcaption{padding:12px 16px;color:#f5f1e4;font-size:.95rem;line-height:1.5}
.inicio .mapa-missoes{aspect-ratio:auto;height:auto;background:#173d38;padding:16px;align-content:start}
@media(max-width:520px){
  .mapa-missoes{grid-template-columns:1fr}
  .mapa-botoes{grid-template-columns:1fr 1fr}
}
/* Perfil: identidade, conquistas e ações. */
.inicio .perfil{grid-template-columns:minmax(240px,.9fr) minmax(0,1.3fr);gap:24px 32px;padding:24px;align-items:center}
.perfil-cabecalho{display:flex;align-items:center;gap:16px;min-width:0}
.inicio .perfil .retrato{flex:none;width:72px;height:96px}
.perfil-identificacao{min-width:0}
.perfil-rotulo{display:block;font-size:.75rem;font-weight:700;color:var(--tinta-suave);line-height:1.4}
.inicio .perfil h2{margin:4px 0 6px;font-size:1.45rem!important;line-height:1.2;overflow-wrap:anywhere}
.inicio .perfil p{margin:0;font-size:.9rem;line-height:1.5}
.perfil-progresso{min-width:0;padding-left:32px;border-left:1px solid #c7d0b9}
.perfil-progresso h3{margin:4px 0;font-family:"Lilita One",sans-serif;font-weight:400;font-size:1.25rem;color:#245b40}
.perfil-metricas{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.perfil-metricas strong{display:block;margin-top:4px;font-size:1.5rem;line-height:1.2;color:#183834;font-variant-numeric:tabular-nums}
.perfil-metricas strong>span{color:#a87715;font-size:1.15rem}
.perfil-metricas small{font-size:.85rem;font-weight:400;color:var(--tinta-suave)}
.perfil-progresso .nivel{height:8px;margin:12px 0 8px}
.inicio .perfil .perfil-proximo{font-size:.85rem}
.perfil-acoes{grid-column:1/-1;display:flex;justify-content:flex-end;gap:12px;padding-top:16px;border-top:1px solid #c7d0b9}
.perfil-acoes .btn{font-family:"Atkinson Hyperlegible",sans-serif;font-size:.9rem;font-weight:700;letter-spacing:0;text-transform:none;min-height:44px}
.perfil-acoes #desconectar{background:transparent;color:#31573e;border-color:#9ab393;box-shadow:none}
.perfil-acoes #desconectar:hover{background:#e2e7d8}
@media(max-width:820px){
  .inicio .perfil{grid-template-columns:minmax(0,1fr);gap:20px;padding:20px}
  .perfil-progresso{padding:20px 0 0;border-left:0;border-top:1px solid #c7d0b9}
  .perfil-acoes{justify-content:stretch;gap:10px}
  .perfil-acoes .btn{flex:1;padding:10px 8px}
}
@media(max-width:380px){
  .inicio .perfil{padding:16px}
  .perfil-cabecalho{gap:12px}
  .inicio .perfil .retrato{width:56px;height:78px}
  .inicio .perfil h2{font-size:1.25rem!important}
  .perfil-acoes{flex-direction:column}
}
/* Missões abaixo do mapa para manter todos os caminhos visíveis. */
.inicio .mapa-painel{display:grid;gap:16px}
.inicio .mapa-painel .mapa-missoes{position:static;inset:auto;height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px;border:2px solid #668572;background:#173d38;pointer-events:auto}
.inicio .mapa-painel .mapa-missoes .mapa-card:nth-child(n){position:static;inset:auto;transform:none;width:auto;min-width:0;padding:14px}
@media(max-width:820px){.inicio .mapa-painel .mapa-missoes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.inicio .mapa-painel .mapa-missoes{grid-template-columns:minmax(0,1fr)}}
/* Bot?es compactos em ?reas livres; rotas e pontos permanecem vis?veis. */
.inicio .mapa-painel{display:grid;gap:12px;container-type:inline-size}
.inicio .mapa-painel .mapa-missoes{position:static;inset:auto;height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px;border:2px solid #668572;background:#173d38;pointer-events:auto}
.inicio .mapa-painel .mapa-missoes .mapa-card:nth-child(n){position:static;inset:auto;transform:none;width:auto;min-width:0;padding:10px;cursor:pointer;font-family:inherit;text-align:center;border-radius:6px}
.mapa-missao-nome{display:block;font-weight:700;font-size:.9rem;line-height:1.2;color:#22483d}
.inicio .mapa-painel .mapa-missoes .mapa-missao{display:flex;align-items:center;justify-content:center;gap:10px}
.mapa-missao-play{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding-left:2px;border-radius:50%;background:#245b40;color:#fff4cf;font-size:.9rem;line-height:1;box-shadow:0 2px 0 #163934}
.mapa-missao-conteudo{min-width:0;flex:1}
.mapa-missao:hover .mapa-missao-play,.mapa-missao:focus-visible .mapa-missao-play{background:#327850}
.inicio .mapa-missao .estrelas{display:block;margin:3px 0 0;font-size:.9rem;line-height:1}
.mapa-missao:focus-visible{outline:3px solid #f7c948;outline-offset:3px}
@container(min-width:900px){
  .inicio .mapa-painel .mapa-missoes{position:absolute;inset:0 0 auto;height:66.6667cqw;display:block;padding:0;border:0;background:none;box-shadow:none;overflow:visible;pointer-events:none}
  .inicio .mapa-painel .mapa-missoes .mapa-card:nth-child(n){position:absolute;width:19%;padding:8px;pointer-events:auto}
  /* posição de cada cartão: --x/--y vêm do mapa da escola (pixel/escolas/<id>/escola.js) */
  .inicio .mapa-painel .mapa-missoes .mapa-card:nth-child(n){left:var(--x,0);top:var(--y,0)}
}
@media(max-width:820px){.inicio .mapa-painel .mapa-missoes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.inicio .mapa-painel .mapa-missoes{grid-template-columns:minmax(0,1fr)}}

/* Botão para ouvir o alarme descrito na pergunta */
.ouvir-alarme{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.55rem}
.ouvir-alarme .btn.ouvir{font-size:.86rem;padding:.38rem .8rem;min-height:40px;letter-spacing:.02em}
.ouvir-alarme .btn.ouvir[aria-pressed="true"]{background:#B4441B;border-color:#6B2410;box-shadow:inset 0 2px 0 #E07A4F,inset 0 -3px 0 #7A2B12}

/* Fundo da página acompanha o cenário da missão */
.jogo{isolation:isolate}
.jogo::before{content:"";position:fixed;inset:-48px;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(8,28,26,.5),rgba(8,28,26,.72)),var(--fundo-missao,none) center/cover no-repeat;
  filter:blur(22px) saturate(1.15)}
@media (max-width:700px){.jogo::before{filter:blur(14px) saturate(1.1)}}