:root{font-synthesis:none;
  --navy:#0E1B3D; --navy2:#172B5E; --navy3:#22408A;
  --creme:#FFF4DC; --creme2:#F3E2BC; --ouro:#F2B632; --ouro2:#FFD66B; --ouro3:#B97A12;
  --verde:#5DBB63; --tinta:#10132A; --texto:#FFF4DC;
  --px:4px;
  --fonte-pixel:"Jersey 10", ui-monospace, monospace;
  --fonte:"Nunito", system-ui, sans-serif;
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--tinta);color:var(--texto);font-family:var(--fonte);overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
p,h1,h2,h3{margin:0}
[hidden]{display:none!important}

#app{position:fixed;inset:0;overflow:hidden}
.tela{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.tela.ativa{opacity:1;visibility:visible;transition:opacity .45s ease}

/* ---------- peças comuns ---------- */
.fundo-cena{position:absolute;inset:0;background:#20305c center/cover no-repeat;image-rendering:pixelated}
.fundo-cena.escuro::after,#tela-titulo .fundo-cena::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,27,61,.55),rgba(14,27,61,.15) 40%,rgba(14,27,61,.85))}
.fundo-cena.escuro::after{background:rgba(10,16,40,.72)}
.particulas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}

.chapeu{font-synthesis:none;font-family:var(--fonte-pixel);font-weight:600;font-size:18px;letter-spacing:.08em;text-transform:uppercase;color:var(--ouro2)}
.titulo-secao{font-synthesis:none;font-family:var(--fonte-pixel);font-weight:700;font-size:clamp(34px,4.4vw,58px);line-height:1.05;text-shadow:0 3px 0 var(--navy)}

.sprite{background-repeat:no-repeat;image-rendering:pixelated;image-rendering:crisp-edges;animation:quadros var(--dur,.8s) steps(4) infinite}
@keyframes quadros{from{background-position-x:0}to{background-position-x:calc(var(--w) * -4)}}
.sprite.parado{animation:none}

.botao{font-synthesis:none;position:relative;border:0;padding:16px 28px;font-family:var(--fonte-pixel);font-weight:700;font-size:26px;letter-spacing:.04em;text-transform:uppercase;background:var(--creme);color:var(--navy);
  box-shadow:0 -4px 0 0 var(--tinta),0 4px 0 0 var(--tinta),-4px 0 0 0 var(--tinta),4px 0 0 0 var(--tinta),inset 0 -6px 0 0 rgba(0,0,0,.18);
  transition:transform .12s cubic-bezier(.2,1.6,.4,1)}
.botao:hover{transform:translateY(-2px)}
.botao:active{transform:translateY(2px);box-shadow:0 -4px 0 0 var(--tinta),0 4px 0 0 var(--tinta),-4px 0 0 0 var(--tinta),4px 0 0 0 var(--tinta),inset 0 4px 0 0 rgba(0,0,0,.18)}
.botao:disabled{opacity:.45;cursor:not-allowed;transform:none}
.botao-ouro{background:var(--ouro)}
.botao-ouro:hover{background:var(--ouro2)}
.botao-azul{background:var(--navy3);color:var(--creme)}
.botao:focus-visible,.botao-hud:focus-visible,.ponto:focus-visible,.carta-heroi:focus-visible,.opcao:focus-visible{outline:4px solid var(--ouro2);outline-offset:6px}
.pisca{animation:pisca 1.6s steps(2) infinite}
@keyframes pisca{50%{filter:brightness(1.12)}}
.botao-texto{font-synthesis:none;border:0;background:none;color:var(--creme);font-family:var(--fonte-pixel);font-size:21px;text-decoration:underline;text-underline-offset:4px;padding:8px}

.botao-hud{font-synthesis:none;display:inline-flex;align-items:center;gap:8px;border:0;height:44px;padding:0 14px;background:var(--navy);color:var(--creme);font-family:var(--fonte-pixel);font-weight:600;font-size:21px;
  box-shadow:0 -3px 0 0 var(--creme),0 3px 0 0 var(--creme),-3px 0 0 0 var(--creme),3px 0 0 0 var(--creme)}
.botao-hud svg{width:20px;height:20px}
.botao-hud[aria-pressed="false"] svg{opacity:.35}

/* ---------- título ---------- */
#tela-titulo .fundo-cena{animation:respira 18s ease-in-out infinite alternate}
@keyframes respira{from{transform:scale(1.04)}to{transform:scale(1.12) translateY(-1%)}}
.nuvens i{position:absolute;display:block;width:120px;height:24px;background:#fff;opacity:.85;image-rendering:pixelated;
  box-shadow:24px -12px 0 0 #fff,48px -12px 0 0 #fff,72px -12px 0 0 #fff,36px -24px 0 0 #fff,60px -24px 0 0 #fff;animation:vento 60s linear infinite}
.nuvens i:nth-child(1){top:9%;left:-20%}
.nuvens i:nth-child(2){top:18%;left:-40%;transform:scale(.7);animation-duration:85s;animation-delay:-30s;opacity:.6}
.nuvens i:nth-child(3){top:6%;left:-30%;transform:scale(1.3);animation-duration:110s;animation-delay:-70s;opacity:.5}
.nuvens i:nth-child(4){top:26%;left:-25%;transform:scale(.5);animation-duration:70s;animation-delay:-50s;opacity:.5}
@keyframes vento{to{translate:140vw 0}}
.titulo-miolo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px 16px calc(24px + env(safe-area-inset-bottom));text-align:center}
.logo-igreja{width:clamp(90px,12vw,130px);height:auto;filter:drop-shadow(0 3px 0 rgba(0,0,0,.4))}
.titulo-jogo{font-synthesis:none;font-family:var(--fonte-pixel);line-height:.9;display:flex;flex-direction:column;align-items:center;animation:entra-titulo .9s cubic-bezier(.2,1.4,.4,1) both}
.titulo-jogo span{font-size:clamp(22px,3.6vw,38px);font-weight:600;color:var(--creme);text-shadow:0 3px 0 var(--navy)}
.titulo-jogo strong{font-size:clamp(52px,11vw,124px);font-weight:700;color:var(--ouro);
  text-shadow:0 4px 0 var(--ouro3),0 8px 0 var(--navy),4px 8px 0 var(--navy),-4px 8px 0 var(--navy),0 14px 18px rgba(0,0,0,.45)}
@keyframes entra-titulo{from{opacity:0;transform:translateY(-30px) scale(.9)}}
.titulo-frase{font-family:var(--fonte);font-weight:800;font-size:clamp(17px,2.2vw,22px);text-shadow:0 2px 0 var(--navy)}
.titulo-dupla{display:flex;gap:clamp(8px,4vw,40px);align-items:flex-end;min-height:120px}
.titulo-verbos{font-synthesis:none;font-family:var(--fonte-pixel);font-size:clamp(16px,1.6vw,20px);letter-spacing:.12em;text-transform:uppercase;color:var(--creme2);opacity:.9}

/* ---------- escolha ---------- */
.escolha-miolo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 16px;text-align:center;overflow:auto}
.escolha-cartas{display:flex;gap:clamp(14px,4vw,40px);flex-wrap:wrap;justify-content:center}
.carta-heroi{border:0;width:clamp(140px,38vw,220px);padding:18px 12px 14px;background:var(--navy2);display:flex;flex-direction:column;align-items:center;gap:12px;
  box-shadow:0 -4px 0 0 var(--creme2),0 4px 0 0 var(--creme2),-4px 0 0 0 var(--creme2),4px 0 0 0 var(--creme2);transition:transform .18s cubic-bezier(.2,1.6,.4,1),background .2s}
.carta-heroi:hover{transform:translateY(-4px)}
.carta-heroi[aria-pressed="true"]{background:var(--navy3);transform:translateY(-6px);box-shadow:0 -4px 0 0 var(--ouro),0 4px 0 0 var(--ouro),-4px 0 0 0 var(--ouro),4px 0 0 0 var(--ouro),0 0 0 10px rgba(242,182,50,.25)}
.palco{height:clamp(150px,24vh,210px);display:flex;align-items:flex-end;justify-content:center}
.carta-heroi .sprite{animation-play-state:paused}
.carta-heroi:hover .sprite,.carta-heroi[aria-pressed="true"] .sprite{animation-play-state:running}
.carta-nome{font-synthesis:none;font-family:var(--fonte-pixel);font-weight:700;font-size:29px;text-transform:uppercase;letter-spacing:.08em}
.campo-nome{display:flex;flex-direction:column;gap:8px;font-weight:700;width:min(360px,100%)}
.campo-nome input{font:700 18px var(--fonte);padding:12px 14px;border:0;background:var(--creme);color:var(--navy);text-align:center;
  box-shadow:0 -3px 0 0 var(--tinta),0 3px 0 0 var(--tinta),-3px 0 0 0 var(--tinta),3px 0 0 0 var(--tinta)}
.campo-nome input:focus{outline:4px solid var(--ouro2);outline-offset:4px}

/* ---------- mapa ---------- */
#tela-mapa{background:#1a3a2a}
.mapa-fundo{position:absolute;inset:-40px;background:url(assets/mapa.webp) center/cover;filter:blur(18px) brightness(.55) saturate(1.2)}
.mapa-janela{position:absolute;inset:0;overflow:auto;scrollbar-width:none;overscroll-behavior:contain}
.mapa-janela::-webkit-scrollbar{display:none}
.mapa-mundo{position:relative;flex:none;box-shadow:0 0 0 4px var(--tinta),0 20px 60px rgba(0,0,0,.5)}
.mapa-img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;user-select:none}
.mapa-rastro{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.heroi-mapa{position:absolute;left:0;top:0;transform-origin:50% 100%;pointer-events:none;z-index:3;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.heroi-mapa.virado{scale:-1 1}

.ponto{position:absolute;z-index:2;translate:-50% -100%;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.ponto-pino{position:relative;width:46px;height:46px;display:grid;place-items:center;background:var(--creme);color:var(--navy);
  box-shadow:0 -3px 0 0 var(--tinta),0 3px 0 0 var(--tinta),-3px 0 0 0 var(--tinta),3px 0 0 0 var(--tinta),inset 0 -5px 0 0 rgba(0,0,0,.15);transition:transform .2s cubic-bezier(.2,1.6,.4,1)}
.ponto-pino::after{content:"";position:absolute;bottom:-9px;left:50%;translate:-50% 0;border:6px solid transparent;border-top:6px solid var(--tinta)}
.ponto-pino svg{width:28px;height:28px}
.ponto-num{font-synthesis:none;position:absolute;top:-10px;right:-12px;min-width:22px;height:22px;padding:0 4px;display:grid;place-items:center;font:700 17px var(--fonte-pixel);background:var(--navy);color:var(--creme);box-shadow:0 0 0 2px var(--tinta)}
.ponto-nome{font-synthesis:none;font:600 17px/1.1 var(--fonte-pixel);color:var(--creme);background:rgba(14,27,61,.88);padding:4px 7px;white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis;box-shadow:0 0 0 2px var(--tinta)}
.ponto:hover .ponto-pino{transform:translateY(-4px) scale(1.08)}
.ponto.feito .ponto-pino{background:var(--ouro)}
.ponto.feito .ponto-num{background:var(--verde);color:var(--tinta)}
.ponto.proximo .ponto-pino{animation:pulsa 1.1s ease-in-out infinite}
.ponto.proximo .ponto-pino::before{content:"";position:absolute;inset:-12px;border:3px solid var(--ouro2);animation:anel 1.1s ease-out infinite}
.ponto.lateral .ponto-pino{width:38px;height:38px;background:#DDF3FF}
.ponto.lateral .ponto-pino svg{width:22px;height:22px}
@keyframes pulsa{50%{transform:translateY(-6px)}}
@keyframes anel{from{opacity:1;transform:scale(.8)}to{opacity:0;transform:scale(1.5)}}

.hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 16px 0;pointer-events:none}
.hud>*{pointer-events:auto}
.hud-marca{display:flex;flex-direction:column;gap:2px;background:rgba(14,27,61,.9);padding:8px 12px;box-shadow:0 0 0 3px var(--tinta)}
.hud-marca strong{font-synthesis:none;font:700 24px var(--fonte-pixel);color:var(--ouro)}
.hud-marca span{font-weight:700;font-size:14px}
.hud-acoes{display:flex;gap:12px}
.trilha-capitulos{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));translate:-50% 0;display:flex;gap:6px;padding:6px;background:rgba(14,27,61,.9);box-shadow:0 0 0 3px var(--tinta);max-width:calc(100% - 24px);overflow:auto;scrollbar-width:none}
.capitulo{font-synthesis:none;font:600 17px var(--fonte-pixel);text-transform:uppercase;letter-spacing:.06em;padding:6px 10px;white-space:nowrap;color:var(--creme2);opacity:.55;display:flex;align-items:center;gap:6px}
.capitulo i{width:10px;height:10px;background:var(--c)}
.capitulo.atual{opacity:1;background:rgba(255,255,255,.08);color:#fff}
.capitulo.feito{opacity:.9}
.dica-mapa{position:absolute;left:50%;bottom:calc(66px + env(safe-area-inset-bottom));translate:-50% 0;font:700 15px var(--fonte);background:var(--creme);color:var(--navy);padding:8px 14px;box-shadow:0 0 0 3px var(--tinta);white-space:nowrap;animation:boia 2.4s ease-in-out infinite}
@keyframes boia{0%,100%{translate:-50% 0}50%{translate:-50% -4px}}

/* ---------- cena ---------- */
#tela-cena{background:var(--tinta)}
.kenburns{animation:kb 22s ease-out both}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1.02)}}
.cena-titulo{position:absolute;top:calc(16px + env(safe-area-inset-top));left:16px;max-width:min(560px,calc(100% - 130px));background:rgba(14,27,61,.9);padding:10px 16px 12px;box-shadow:0 0 0 3px var(--tinta),6px 6px 0 3px rgba(0,0,0,.25);border-left:8px solid var(--cap,var(--ouro))}
.cena-titulo h2{font-synthesis:none;font:700 clamp(29px,3.6vw,50px)/1.05 var(--fonte-pixel);color:var(--creme);margin-top:4px}
.cena-titulo.entra{animation:desliza .6s cubic-bezier(.2,1.3,.4,1) both}
@keyframes desliza{from{opacity:0;transform:translateX(-40px)}}
.cena-fechar{position:absolute;top:calc(16px + env(safe-area-inset-top));right:16px}

.palco-cena{position:absolute;left:0;right:0;bottom:var(--chao,24%);height:0}
.heroi-cena{position:absolute;left:var(--x,50%);bottom:0;translate:-50% 0;transform-origin:50% 100%;will-change:left}
.heroi-cena.pop{animation:quadros var(--dur,.8s) steps(4) infinite,pop .35s cubic-bezier(.2,1.8,.4,1)}
@keyframes pop{0%{transform:scale(1.18,.84)}100%{transform:scale(1)}}
.sombra-heroi{position:absolute;left:var(--x,50%);bottom:calc(var(--pe-px,0px) * -1 - 6px);translate:-50% 0;width:var(--sw,120px);height:14px;background:rgba(0,0,0,.28);border-radius:50%;filter:blur(1px)}
.agua{position:absolute;left:50%;translate:-50% 0;bottom:calc(var(--pe-px,0px) * -1 - 20px);width:min(90vw,520px);height:var(--agua-h,120px);
  background:linear-gradient(180deg,rgba(120,220,240,.55) 0,rgba(40,150,200,.78) 18%,rgba(20,100,170,.9));
  -webkit-mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.agua::before{content:"";position:absolute;left:0;right:0;top:-6px;height:12px;background:repeating-linear-gradient(90deg,#DFFBFF 0 16px,transparent 16px 32px);animation:onda 1.2s steps(4) infinite;image-rendering:pixelated}
@keyframes onda{to{background-position-x:32px}}

.dialogo{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));translate:-50% 0;width:min(920px,calc(100% - 24px));min-height:170px;padding:22px 24px 20px;background:rgba(14,27,61,.95);
  box-shadow:0 -4px 0 0 var(--creme),0 4px 0 0 var(--creme),-4px 0 0 0 var(--creme),4px 0 0 0 var(--creme),0 0 0 8px var(--tinta),0 18px 40px rgba(0,0,0,.5);cursor:pointer}
.dialogo.entra{animation:sobe .45s cubic-bezier(.2,1.3,.4,1) both}
@keyframes sobe{from{opacity:0;transform:translateY(40px)}}
.dialogo-etiqueta{font-synthesis:none;position:absolute;top:-18px;left:20px;font:700 18px var(--fonte-pixel);text-transform:uppercase;letter-spacing:.08em;background:var(--cap,var(--ouro));color:var(--tinta);padding:6px 12px;box-shadow:0 0 0 3px var(--tinta)}
.dialogo-texto{font-weight:700;font-size:clamp(18px,2.2vw,23px);line-height:1.45;min-height:3em;text-wrap:pretty}
.dialogo-texto.frase{font-synthesis:none;font:700 clamp(32px,3.4vw,48px)/1.2 var(--fonte-pixel);color:var(--ouro2)}
.dialogo-seta{position:absolute;right:22px;bottom:14px;width:0;height:0;border:9px solid transparent;border-top:11px solid var(--ouro);animation:quica .7s steps(2) infinite;opacity:0}
.dialogo.pode .dialogo-seta{opacity:1}
@keyframes quica{50%{translate:0 5px}}
.dialogo-agenda{display:grid;gap:10px;margin-top:4px}
.agenda-item{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;background:rgba(255,244,220,.07);padding:10px 12px;box-shadow:inset 4px 0 0 var(--cap,var(--ouro));animation:sobe .4s both}
.agenda-item svg{width:32px;height:32px;color:var(--ouro2)}
.agenda-item b{font-synthesis:none;display:block;font:700 clamp(22px,2vw,28px)/1.2 var(--fonte-pixel);color:var(--creme)}
.agenda-item span{font-weight:700;font-size:15px;color:var(--creme2)}
.dialogo-botoes{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px;justify-content:flex-end}
.dialogo-botoes:empty{display:none}
.dialogo-botoes .botao{font-size:17px;padding:12px 20px}

.carimbo-grande{position:absolute;left:50%;top:40%;width:min(260px,58vw);aspect-ratio:1;translate:-50% -50%;pointer-events:none;opacity:0;z-index:5}
.carimbo-grande.bate{animation:carimba 1.9s cubic-bezier(.2,1.4,.4,1) both}
@keyframes carimba{0%{opacity:0;transform:scale(3) rotate(-30deg)}18%{opacity:1;transform:scale(.92) rotate(-12deg)}26%{transform:scale(1.04) rotate(-12deg)}75%{opacity:1;transform:scale(1) rotate(-12deg)}100%{opacity:0;transform:scale(.6) rotate(-12deg) translateY(-140px)}}

.selo{position:relative;width:100%;height:100%;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,var(--creme) 58%,transparent 59%);color:var(--c,var(--navy))}
.selo::before{content:"";position:absolute;inset:4%;border-radius:50%;border:6px dashed currentColor;opacity:.9}
.selo::after{content:"";position:absolute;inset:14%;border-radius:50%;border:4px solid currentColor}
.selo svg{width:44%;height:44%}

.flash{position:absolute;inset:0;background:#FFF6D8;opacity:0;pointer-events:none;z-index:20}
.flash.on{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:.75}100%{opacity:0}}
.treme{animation:treme .32s linear}
@keyframes treme{0%,100%{translate:0 0}20%{translate:-6px 3px}40%{translate:5px -4px}60%{translate:-4px 2px}80%{translate:3px -2px}}

/* ---------- passaporte ---------- */
.modal{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:rgba(6,10,26,.78);animation:aparece .3s both}
@keyframes aparece{from{opacity:0}}
.livro{position:relative;width:min(760px,100%);max-height:calc(100svh - 32px);overflow:auto;background:var(--creme);color:var(--navy);padding:0 0 22px;
  box-shadow:0 -4px 0 0 var(--tinta),0 4px 0 0 var(--tinta),-4px 0 0 0 var(--tinta),4px 0 0 0 var(--tinta),12px 12px 0 4px rgba(0,0,0,.35);animation:sobe .45s cubic-bezier(.2,1.3,.4,1) both}
.livro-fechar{font-synthesis:none;position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;background:var(--navy);color:var(--creme);font:700 34px/1 var(--fonte-pixel);z-index:2}
.livro-capa{background:var(--navy);color:var(--creme);padding:22px 64px 20px 22px;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 8px,transparent 8px 16px)}
.livro-capa h2{font-synthesis:none;font:700 clamp(34px,4vw,48px)/1 var(--fonte-pixel);color:var(--ouro);margin-top:4px}
.livro-dono{margin-top:8px;font-weight:700}
.livro-selos{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:14px;padding:22px}
.selo-carta{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.selo-carta .selo-caixa{width:96px;height:96px;display:grid;place-items:center}
.selo-carta.vazio .selo{filter:grayscale(1);opacity:.28}
.selo-carta.cheio .selo{transform:rotate(-8deg)}
.selo-carta b{font-synthesis:none;font:700 18px/1.15 var(--fonte-pixel)}
.selo-carta small{font-weight:700;font-size:12px;color:#6B6150}
.livro-onde{margin:0 22px;padding:18px;background:#fff;box-shadow:0 0 0 3px var(--navy)}
.livro-onde h3{font-synthesis:none;font:700 29px var(--fonte-pixel)}
.livro-onde p{font-weight:700;color:#4b4a5c;margin-top:4px}
.onde-opcoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.opcao{font-synthesis:none;border:0;padding:8px 12px;font:600 18px var(--fonte-pixel);background:var(--creme);color:var(--navy);box-shadow:0 0 0 2px var(--navy)}
.opcao[aria-pressed="true"]{background:var(--navy);color:var(--ouro2)}
.proximo-passo{margin-top:16px;padding:16px;background:var(--navy);color:var(--creme);display:grid;gap:6px;animation:sobe .4s both}
.proximo-passo .chapeu{font-size:12px}
.proximo-passo strong{font-synthesis:none;font:700 32px/1.1 var(--fonte-pixel);color:var(--ouro)}
.proximo-passo span{font-weight:700}

/* ---------- celular ---------- */
@media (max-width:700px){
  .hud-marca strong{font-size:15px}
  .hud-marca span{font-size:12px}
  .botao-hud{height:40px;padding:0 10px}
  .ponto-nome{display:none}
  .ponto.proximo .ponto-nome{display:block}
  .dialogo{min-height:150px;padding:20px 16px 16px}
  .dialogo-botoes{justify-content:stretch}
  .dialogo-botoes .botao{flex:1 1 140px;font-size:15px;padding:12px 10px}
  .dica-mapa{font-size:13px;white-space:normal;text-align:center;width:max-content;max-width:calc(100% - 32px)}
  .capitulo{font-size:11px;padding:5px 7px}
  .cena-fechar span{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .sprite{animation-duration:1.6s!important;animation-iteration-count:infinite!important}
}

.titulo-extras{display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:center}
.livro-rodape{display:flex;justify-content:center;padding:14px 22px 0}
.botao-texto.escuro{color:var(--navy)}
.selo-auto{position:absolute;left:50%;top:calc(16px + env(safe-area-inset-top));translate:-50% 0;z-index:25;font:22px var(--fonte-pixel);text-transform:uppercase;letter-spacing:.08em;background:#C0392B;color:#fff;padding:4px 12px;box-shadow:0 0 0 3px var(--tinta);display:flex;gap:10px;align-items:center}
.selo-auto i{width:10px;height:10px;background:#fff;animation:pisca 1s steps(2) infinite}
.selo-auto button{border:0;background:#fff;color:#C0392B;font:18px var(--fonte-pixel);padding:0 8px}
.titulo-jogo span{font-size:clamp(30px,4.6vw,50px)}
.titulo-jogo strong{font-size:clamp(70px,14vw,160px)}
/* ajuste de leitura da Jersey 10 */
.chapeu{font-size:22px}
.dialogo-etiqueta{font-size:21px;padding:3px 12px}
.botao-hud{font-size:24px}
.capitulo{font-size:19px}
.ponto-nome{font-size:18px}
.ponto-num{font-size:18px}
.titulo-verbos{font-size:clamp(18px,1.9vw,24px)}
.botao-texto{font-size:24px}
.hud-marca strong{font-size:26px}
.selo-carta b{font-size:19px}
.opcao{font-size:19px}
.livro-onde h3{font-size:30px}
.proximo-passo strong{font-size:32px}
.agenda-item b{font-size:clamp(22px,2.4vw,27px)}
@media (max-width:700px){.capitulo{font-size:16px}.hud-marca strong{font-size:21px}.botao-hud{font-size:20px}}
@media (max-width:700px){.dialogo-botoes .botao{font-size:21px}.botao{font-size:23px}.chapeu{font-size:20px}}
.dialogo-botoes .botao{font-size:23px}
.titulo-miolo::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 46% 52% at 50% 42%,rgba(10,16,40,.72),rgba(10,16,40,0) 100%)}
.titulo-miolo{z-index:1}
@keyframes flash{0%{opacity:.5}100%{opacity:0}}
/* mapa em tela cheia, arrastável */
.mapa-janela{display:block;cursor:grab;touch-action:pan-x pan-y}
.mapa-janela.arrastando{cursor:grabbing}
.mapa-janela.arrastando .ponto{pointer-events:none}
.mapa-fundo{display:none}
.mapa-mundo{box-shadow:none}
.ponto{transform-origin:50% 100%;scale:var(--esc,1)}
.hud{padding-left:16px}
.dica-mapa{font-size:16px}
.proximo-passo .convite{margin-top:6px;color:var(--ouro2);font-family:var(--fonte-pixel);font-size:22px}
.mapa-janela{place-items:normal}
/* o app nunca rola; cada tela cuida do próprio espaço */
#app{overflow:clip}
.titulo-miolo,.escolha-miolo{overflow-y:auto;justify-content:safe center}
@media (max-height:520px){
  .titulo-miolo{gap:8px;padding-top:10px;padding-bottom:10px}
  .logo-igreja{width:64px}
  .titulo-jogo strong{font-size:clamp(48px,11vh,90px)}
  .titulo-jogo span{font-size:26px}
  .titulo-dupla{min-height:0}
  .titulo-dupla .sprite{zoom:.6}
  .titulo-frase{font-size:15px}
  .escolha-miolo{gap:10px}
  .palco{height:110px}
  .carta-heroi{padding:8px}
  .dica-mapa{bottom:calc(58px + env(safe-area-inset-bottom))}
  .cena-titulo{padding:6px 12px}
  .cena-titulo h2{font-size:26px}
  .dialogo{min-height:0;padding:14px 16px 12px}
  .dialogo-texto{font-size:17px;min-height:2.6em}
  .dialogo-texto.frase{font-size:24px}
  .agenda-item{padding:6px 10px}
  .dialogo-botoes{margin-top:10px}
}
@media (max-width:700px){#bt-inicio span{display:none}}

/* ===================== v3 ===================== */
.botao-creme{background:var(--creme);color:var(--navy)}
.titulo-dupla{gap:clamp(4px,2vw,24px)}

/* aviso rápido */
.aviso{position:absolute;left:50%;top:calc(18px + env(safe-area-inset-top));translate:-50% 0;z-index:40;max-width:calc(100% - 32px);background:var(--creme);color:var(--navy);font:800 16px var(--fonte);padding:12px 18px;box-shadow:0 0 0 3px var(--tinta),6px 6px 0 2px rgba(0,0,0,.25)}
.aviso.entra{animation:sobe .35s cubic-bezier(.2,1.3,.4,1) both}

/* criar personagem */
.criar{position:absolute;inset:0;display:grid;grid-template-columns:minmax(260px,1fr) minmax(320px,560px);gap:clamp(16px,4vw,56px);align-items:center;justify-content:center;padding:24px clamp(16px,5vw,72px);overflow:auto}
.criar-vitrine{display:flex;flex-direction:column;align-items:center;gap:14px}
.criar-palco{position:relative;width:min(100%,380px);height:min(46vh,380px);display:grid;place-items:end center;background:radial-gradient(ellipse 60% 55% at 50% 60%,rgba(255,214,107,.28),transparent 70%)}
.criar-chao{position:absolute;bottom:4px;left:50%;translate:-50% 0;width:62%;height:18px;border-radius:50%;background:rgba(0,0,0,.35)}
#criar-heroi{position:relative;z-index:1;margin-bottom:10px}
.criar-painel{display:flex;flex-direction:column;gap:16px;background:rgba(14,27,61,.9);padding:22px;box-shadow:0 0 0 4px var(--tinta),0 0 0 7px var(--creme2)}
.criar-grupo{display:flex;flex-direction:column;gap:8px}
.criar-rotulo{font:22px var(--fonte-pixel);letter-spacing:.04em;color:var(--ouro2)}
.criar-visuais{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.visual{border:0;height:84px;display:grid;place-items:end center;padding-bottom:6px;background:var(--navy2);box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);transition:transform .15s cubic-bezier(.2,1.6,.4,1)}
.visual:hover{transform:translateY(-3px)}
.visual[aria-checked="true"]{background:var(--navy3);box-shadow:inset 0 0 0 3px var(--ouro),0 0 0 3px var(--tinta)}
.criar-cores{display:flex;flex-wrap:wrap;gap:10px}
.cor{width:40px;height:40px;border:0;background:var(--cor);box-shadow:0 0 0 3px var(--tinta),inset 0 -5px 0 rgba(0,0,0,.2)}
.cor.original{background:linear-gradient(135deg,#1c2a5a 0 25%,#F2B632 25% 50%,#D8393B 50% 75%,#3E9E5A 75%)}
.cor[aria-checked="true"]{outline:4px solid var(--ouro2);outline-offset:3px}
.criar-painel .campo-nome{width:100%}
.criar-painel .campo-nome input{text-align:left}
.criar-dica{font-weight:700;font-size:14px;color:var(--creme2);opacity:.85}
.criar-painel .botao{align-self:stretch}
@media (max-width:760px){
  .criar{grid-template-columns:1fr;align-content:start;padding:14px 14px 24px}
  .criar-palco{height:min(24vh,200px)}
  .criar-vitrine{gap:4px}
  .criar-painel{padding:16px;gap:12px}
  .visual{height:70px}
}

/* meu passo: a trilha com os carimbos */
.passo{position:absolute;inset:0;overflow:auto;padding:calc(14px + env(safe-area-inset-top)) clamp(14px,4vw,40px) 40px;display:flex;flex-direction:column;align-items:center}
.passo>*{width:min(760px,100%)}
.passo-topo{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.passo-quem{display:flex;align-items:flex-end;gap:14px}
.passo-quem .titulo-secao{font-size:clamp(30px,5vw,48px)}
.passo-dica{margin-top:6px;font-weight:700;color:var(--creme2)}
.trilha{list-style:none;margin:18px 0 0;padding:0;position:relative}
.trilha::before{content:"";position:absolute;left:52px;top:30px;bottom:30px;width:6px;background:repeating-linear-gradient(180deg,var(--creme2) 0 10px,transparent 10px 18px);opacity:.5}
.etapa{position:relative;margin:0 0 10px}
.etapa.lateral{margin-left:34px}
.etapa-botao{width:100%;border:0;display:grid;grid-template-columns:104px 1fr auto;align-items:center;gap:14px;padding:8px 14px 8px 4px;text-align:left;background:rgba(14,27,61,.88);color:var(--creme);box-shadow:inset 6px 0 0 var(--cap),0 0 0 2px rgba(0,0,0,.35);transition:transform .15s}
.etapa-botao:hover{transform:translateX(4px)}
.etapa.aqui .etapa-botao{background:var(--creme);color:var(--navy);box-shadow:inset 6px 0 0 var(--cap),0 0 0 3px var(--ouro),0 0 30px rgba(255,214,107,.35)}
.etapa.futuro .etapa-botao,.etapa.opcional .etapa-botao{opacity:.86}
.etapa-selo{width:96px;height:96px;display:grid;place-items:center}
.etapa-selo .carimbo{width:96px;height:96px;rotate:var(--giro)}
.etapa-selo.bate{animation:carimba-mini .55s cubic-bezier(.2,1.5,.4,1) both;animation-delay:var(--atraso,0s)}
@keyframes carimba-mini{0%{opacity:0;transform:scale(2.4) rotate(-20deg)}60%{opacity:1;transform:scale(.92)}100%{transform:scale(1)}}
.selo-vazio{width:74px;height:74px;display:grid;place-items:center;border-radius:50%;border:4px dashed rgba(243,226,188,.45);color:rgba(243,226,188,.55)}
.selo-vazio svg{width:34px;height:34px}
.etapa-texto{display:flex;flex-direction:column;gap:2px;min-width:0}
.etapa-texto small{font:19px var(--fonte-pixel);letter-spacing:.06em;text-transform:uppercase;color:var(--cap)}
.etapa.aqui .etapa-texto small{color:var(--navy3)}
.etapa-texto b{font:26px/1.05 var(--fonte-pixel)}
.etapa-texto em{font-style:normal;font-weight:700;font-size:14px;opacity:.8}
.etapa-marcar{font:20px var(--fonte-pixel);padding:6px 10px;border:2px solid currentColor;opacity:.7;white-space:nowrap}
.etapa.feito .etapa-marcar{opacity:.45}
.etapa-voce{width:56px;display:grid;place-items:end center}
.passo-resumo{margin-top:16px;padding:18px;background:var(--navy);box-shadow:0 0 0 3px var(--ouro);display:grid;gap:6px}
.passo-resumo strong{font:34px/1.05 var(--fonte-pixel);color:var(--ouro)}
.passo-resumo span{font-weight:700}
.passo-resumo .convite{color:var(--ouro2);font:23px var(--fonte-pixel)}
.sinc{font-size:14px;padding:6px 10px;justify-self:start}
.sinc.ok{background:rgba(93,187,99,.2);color:#BDF2B7}
.sinc.pendente{background:rgba(242,182,50,.18);color:var(--ouro2)}
.passo-acoes{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 24px;margin-top:16px}
@media (max-width:600px){
  .etapa-botao{grid-template-columns:78px 1fr;gap:10px}
  .etapa-selo,.etapa-selo .carimbo{width:74px;height:74px}
  .selo-vazio{width:60px;height:60px}
  .etapa-marcar{display:none}
  .etapa-voce{position:absolute;right:8px;top:-18px}
  .trilha::before{left:40px}
  .etapa-texto b{font-size:22px}
}

/* confirmação do passo */
.confirma{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:rgba(6,10,26,.8);animation:aparece .25s both}
.confirma-caixa{width:min(460px,100%);background:var(--creme);color:var(--navy);padding:22px;text-align:center;display:grid;gap:10px;box-shadow:0 0 0 4px var(--tinta),10px 10px 0 4px rgba(0,0,0,.35);animation:sobe .4s cubic-bezier(.2,1.3,.4,1) both}
.confirma-carimbo{width:150px;height:150px;justify-self:center}
.confirma-carimbo .carimbo{width:150px;height:150px;animation:carimba-mini .5s cubic-bezier(.2,1.5,.4,1) both}
.confirma-caixa h3{font:34px/1 var(--fonte-pixel)}
.confirma-caixa p{font-weight:700;color:#4b4a5c}
.confirma-caixa .campo-nome{width:100%;text-align:left}
.confirma-caixa .campo-nome input{text-align:left}
.confirma-botoes{display:flex;gap:12px;justify-content:center;margin-top:6px}
.confirma-botoes .botao{flex:1}

/* carimbo */
.carimbo{display:block;overflow:visible}
.carimbo text{font-family:"Jersey 10",monospace}

/* HUD */
.botao-meu-passo{padding-left:6px}
.hud-avatar-caixa{width:34px;height:36px;display:grid;place-items:end center;overflow:hidden;background:var(--navy3)}
#hud-passo{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){#hud-passo{display:none}}
.ponto.aqui .ponto-pino{background:var(--ouro2);box-shadow:0 -3px 0 0 var(--tinta),0 3px 0 0 var(--tinta),-3px 0 0 0 var(--tinta),3px 0 0 0 var(--tinta),0 0 0 7px rgba(255,214,107,.5)}

/* coadjuvante (pastor) */
.coadjuvante{position:absolute;bottom:0;translate:-50% 0;transform-origin:50% 100%}

/* transformação */
#tela-final{background:#000}
#tela-final .fundo-cena{transform:scale(1.15);transition:transform 12s ease-out}
#tela-final.fase-amanhecer .fundo-cena{transform:scale(1)}
.final-escuro{position:absolute;inset:0;background:linear-gradient(180deg,#05081a,#0E1B3D 60%,#1a1030);opacity:.92;transition:opacity 4s ease}
#tela-final.fase-luz .final-escuro{opacity:.55}
#tela-final.fase-brilho .final-escuro{opacity:.12}
.final-raios{position:absolute;left:50%;top:58%;width:220vmax;height:220vmax;translate:-50% -50%;opacity:0;background:repeating-conic-gradient(from 0deg,rgba(255,226,140,.34) 0deg 7deg,transparent 7deg 20deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 42%);mask:radial-gradient(circle,#000 0,transparent 42%);transition:opacity 1.2s}
#tela-final.fase-brilho .final-raios{opacity:1;animation:gira 40s linear infinite}
@keyframes gira{to{rotate:360deg}}
.final-feixe{position:absolute;left:50%;top:0;translate:-50% 0;width:min(46vw,380px);height:0;background:linear-gradient(90deg,transparent,rgba(255,236,170,.55) 30%,rgba(255,252,230,.95) 50%,rgba(255,236,170,.55) 70%,transparent);-webkit-mask:linear-gradient(180deg,transparent,#000 35%,#000 85%,transparent);mask:linear-gradient(180deg,transparent,#000 35%,#000 85%,transparent);filter:blur(4px);transition:height 2.2s cubic-bezier(.3,.8,.3,1),opacity 1s}
#tela-final.fase-luz .final-feixe{height:78%}
#tela-final.fase-brilho .final-feixe{opacity:.35}
.final-palco{position:absolute;left:var(--x,50%);bottom:18%;translate:-50% 0;display:grid;place-items:end center}
.final-palco.andando{transition:left 1.6s cubic-bezier(.3,.7,.4,1)}
.final-aura{position:absolute;left:50%;bottom:-8%;translate:-50% 0;width:180%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,236,160,.95) 0,rgba(255,200,80,.45) 35%,transparent 68%);opacity:0;transform:scale(.3);transition:opacity .6s,transform 1s cubic-bezier(.2,1.4,.4,1)}
#tela-final.fase-brilho .final-aura{opacity:1;transform:scale(1);animation:pulsa-aura 1.6s ease-in-out infinite alternate}
@keyframes pulsa-aura{to{filter:brightness(1.25);transform:scale(1.08)}}
#heroi-final{position:relative;z-index:1}
#tela-final.fase-brilho #heroi-final{filter:drop-shadow(0 0 6px #fff6c8) drop-shadow(0 0 22px #FFD66B) brightness(1.1);animation:quadros var(--dur,.5s) steps(4) infinite,flutua 2.4s ease-in-out infinite}
@keyframes flutua{50%{translate:0 -12px}}
.final-orbita{position:absolute;left:50%;bottom:calc(18% + min(15vh,140px));width:0;height:0;opacity:0;transition:opacity .8s}
#tela-final.fase-orbita .final-orbita{opacity:1;animation:gira 26s linear infinite}
.orbita-carimbo{position:absolute;width:clamp(64px,9vmin,96px);height:clamp(64px,9vmin,96px);translate:-50% -50%;transform:rotate(calc(360deg / var(--n) * var(--i))) translateY(calc(-1 * min(24vmin,230px))) rotate(calc(-360deg / var(--n) * var(--i)));animation:entra-orbita .7s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--i) * .09s)}
.orbita-carimbo .carimbo{width:100%;height:100%;background:radial-gradient(circle,#FFF4DC 0 62%,transparent 63%);border-radius:50%}
@keyframes entra-orbita{from{opacity:0;scale:.2}}
.final-texto{position:absolute;left:50%;top:calc(16px + env(safe-area-inset-top));translate:-50% 0;width:min(1000px,calc(100% - 32px));text-align:center;display:grid;gap:8px;justify-items:center;opacity:0;pointer-events:none;transform:translateY(-20px);transition:opacity .9s,transform .9s cubic-bezier(.2,1.3,.4,1)}
#tela-final.fase-texto .final-texto{opacity:1;pointer-events:auto;transform:none}
.final-texto h2{font:clamp(40px,6vw,78px)/.95 var(--fonte-pixel);color:var(--ouro);text-shadow:0 4px 0 var(--ouro3),0 8px 0 var(--navy),0 12px 30px rgba(0,0,0,.5)}
.final-texto p{font-weight:800;font-size:clamp(16px,2vw,20px);text-shadow:0 2px 0 var(--navy);max-width:640px}
.final-botoes{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}

@media (max-width:700px){
  .final-palco{bottom:9%}
  .final-texto{top:calc(10px + env(safe-area-inset-top))}
  .final-botoes .botao{font-size:20px;padding:12px 14px}
}
.flash-branco{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:20}
.flash-branco.on{animation:clarao 1.1s ease-out}
@keyframes clarao{0%{opacity:0}12%{opacity:1}100%{opacity:0}}

.final-texto p{background:rgba(14,27,61,.55);padding:6px 12px}
@media (max-width:700px){.orbita-carimbo{transform:rotate(calc(360deg / var(--n) * var(--i))) translateY(-36vw) rotate(calc(-360deg / var(--n) * var(--i)))}.final-orbita{bottom:calc(9% + 17vh)}}

/* ===================== v4 ===================== */
[hidden]{display:none!important}

/* título: quem volta entra direto nas etapas */
.titulo-acoes{display:flex;flex-direction:column;align-items:center;gap:10px}
.titulo-botoes{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.titulo-ola{font-weight:800;font-size:clamp(16px,2vw,20px);text-shadow:0 2px 0 var(--navy);text-align:center;max-width:560px}
.titulo-extras{display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px}

/* montar personagem */
.criar-sexo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sexo{border:0;height:46px;font:26px var(--fonte-pixel);letter-spacing:.06em;text-transform:uppercase;background:var(--navy2);color:var(--creme);box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)}
.sexo[aria-checked="true"]{background:var(--ouro);color:var(--navy);box-shadow:0 0 0 3px var(--tinta)}
.criar-cores{gap:9px}
.criar-cores .cor{width:36px;height:36px}
.criar-painel{gap:12px;max-height:calc(100svh - 32px);overflow:auto}
.criar-painel .titulo-secao{font-size:clamp(30px,3.6vw,46px)}
@media (max-width:760px){
  .criar-painel{max-height:none;overflow:visible}
  .criar-cores .cor{width:34px;height:34px}
  .sexo{height:42px}
}

/* e agora? */
.menu-miolo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:10px;padding:24px 16px;text-align:center;overflow:auto}
.menu-miolo::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 55% 60% at 50% 50%,rgba(10,16,40,.78),rgba(10,16,40,.2) 100%)}
.menu-palco{display:grid;place-items:end center;min-height:min(26vh,220px);background:radial-gradient(ellipse 50% 40% at 50% 85%,rgba(255,214,107,.35),transparent 70%);padding:0 40px}
.menu-texto{font-weight:800;font-size:clamp(16px,2vw,20px);max-width:520px;text-shadow:0 2px 0 var(--navy)}
.menu-botoes{display:flex;flex-direction:column;gap:14px;width:min(420px,100%);margin-top:8px}
.titulo-zerar{font-size:19px;opacity:.75}
/* ícone do ponto já visitado: a cor do capítulo "Crescer" é o mesmo ouro do fundo e o ícone sumia */
.ponto.feito .ponto-pino{color:var(--navy)!important}
.criar-visuais{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}

/* ===================== v4: ajustes de celular (auditoria 17/09) ===================== */
/* celular deitado: agenda em duas colunas, a caixa fica baixa e o personagem aparece */
@media (max-height:520px) and (min-width:640px){
  .dialogo-agenda{grid-template-columns:1fr 1fr}
  .agenda-item b{font-size:20px}
}
/* fim no celular em pé: personagem e carimbos mais baixos, longe do texto e dos botões */
@media (max-width:700px) and (orientation:portrait){
  .final-palco{bottom:4%}
  .final-orbita{bottom:calc(4% + min(12vh,100px))}
  .orbita-carimbo{width:clamp(48px,13vw,64px);height:clamp(48px,13vw,64px);transform:rotate(calc(360deg / var(--n) * var(--i))) translateY(-31vw) rotate(calc(-360deg / var(--n) * var(--i)))}
}
/* "E agora?" com o celular deitado: personagem ao lado, botões inteiros */
@media (max-height:520px) and (orientation:landscape){
  .menu-miolo{display:grid;grid-template-columns:auto minmax(0,440px);column-gap:28px;align-content:center;justify-content:center;text-align:left}
  .menu-palco{grid-row:1 / span 5;min-height:0;align-self:center;padding:0 12px}
  .menu-botoes{gap:10px}
  .menu-botoes .botao{padding:12px 20px}
}
/* tela muito baixa (celular deitado dentro do Hub, com a barra de abas): sem o desfile, que cobria a frase */
@media (max-height:420px){
  .titulo-dupla{display:none}
  .logo-igreja{width:52px}
  .titulo-jogo strong{font-size:clamp(40px,12vh,64px)}
}
@media (max-height:420px){
  .titulo-frase,.titulo-verbos{display:none}
  .titulo-miolo{gap:6px}
  .titulo-acoes{gap:6px}
  .titulo-zerar{padding:2px 8px}
}
/* confirmação em tela baixa: carimbo ao lado do texto, botões sempre inteiros */
@media (max-height:520px) and (orientation:landscape){
  .confirma-caixa{grid-template-columns:120px 1fr;column-gap:18px;text-align:left;padding:14px 18px;max-height:calc(100% - 16px);overflow:auto;width:min(620px,100%)}
  .confirma-carimbo{grid-row:1 / span 4;width:110px;height:110px;align-self:center}
  .confirma-carimbo .carimbo{width:110px;height:110px}
  .confirma-caixa h3{font-size:28px}
  .confirma-botoes{margin-top:2px}
  .confirma-botoes .botao{padding:10px 16px}
}
/* fim em tela baixa: texto à esquerda, personagem e carimbos à direita (não passam por trás dos botões) */
@media (max-height:420px) and (orientation:landscape){
  .final-palco,.final-orbita{transition:left .8s ease}
  #tela-final.fase-texto .final-palco{left:77%!important}
  #tela-final.fase-texto .final-orbita{left:77%}
  .final-orbita{bottom:calc(10% + 60px)}
  .final-palco{bottom:10%}
  .orbita-carimbo{width:52px;height:52px;transform:rotate(calc(360deg / var(--n) * var(--i))) translateY(-100px) rotate(calc(-360deg / var(--n) * var(--i)))}
  .final-texto{left:4%;translate:0 0;width:56%;text-align:left;justify-items:start;top:calc(12px + env(safe-area-inset-top))}
  .final-texto h2{font-size:40px}
  .final-botoes{justify-content:flex-start}
}

/* ===================== v4: celular de verdade (fotos do iPhone, 17/09) ===================== */
/* fundo da cena: tamanho e posição vêm do enquadrarFundo (piso sob os pés); passeio lento no celular */
#cena-fundo{transition:background-size .45s ease,background-position-y .45s ease}
@keyframes panorama{from{background-position-x:var(--bx0)}to{background-position-x:var(--bx1)}}
#cena-fundo.kenburns.panorama{animation:kb 22s ease-out both,panorama var(--pan-dur,18s) ease-in-out 1.2s infinite alternate}
/* caixa de texto encostada embaixo, de ponta a ponta, no celular em pé */
@media (max-width:700px){
  .dialogo{left:0;translate:none;width:100%;bottom:0;padding-bottom:calc(16px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 0 0 var(--creme),0 -8px 0 0 var(--tinta),0 -14px 30px rgba(0,0,0,.35)}
  .dialogo-etiqueta{top:-22px;left:14px}
}
/* voltar ao início */
.passo-hud{display:flex;gap:10px}
.tela-inicio{position:absolute;top:calc(14px + env(safe-area-inset-top));left:14px;z-index:3}
.botao-inicio{display:inline-flex;align-items:center;gap:8px}
.botao-inicio svg{width:20px;height:20px}
@media (max-width:700px){.tela-inicio span{display:none}.final-botoes .botao-inicio span{display:none}}
/* fim no celular em pé: posições calculadas no posicionarOrbita */
@media (max-width:700px) and (orientation:portrait){
  #tela-final .final-palco{bottom:var(--palco-b,4%)}
  #tela-final .final-orbita{bottom:var(--orb-b,calc(4% + 12vh))}
  #tela-final .orbita-carimbo{width:var(--orb-c,56px);height:var(--orb-c,56px);transform:rotate(calc(360deg / var(--n) * var(--i))) translateY(calc(-1 * var(--orb-r,31vw))) rotate(calc(-360deg / var(--n) * var(--i)))}
}
/* fim com o celular deitado e tela baixa: órbita inteira dentro da tela (raio 90 + carimbo 48) */
@media (max-height:420px) and (orientation:landscape){
  .final-orbita{bottom:122px}
  .final-palco{bottom:64px}
  .orbita-carimbo{width:48px;height:48px;transform:rotate(calc(360deg / var(--n) * var(--i))) translateY(-90px) rotate(calc(-360deg / var(--n) * var(--i)))}
}
/* cena com pouco espaço (agenda no celular): título compacto */
#tela-cena.apertada .cena-titulo{padding:6px 12px 8px}
#tela-cena.apertada .cena-titulo .chapeu{display:none}
#tela-cena.apertada .cena-titulo h2{font-size:21px;margin-top:0}
/* aviso do mapa centralizado sem translate (no iPhone dele saiu deslocado para a direita e cortado;
   o motor do Safari de computador não reproduziu, então a centralização não depende mais disso) */
.dica-mapa{left:0;right:0;margin-inline:auto;translate:none;width:fit-content;max-width:calc(100% - 24px);white-space:normal;text-align:center;animation:boia-y 2.4s ease-in-out infinite}
@keyframes boia-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* barra de capítulos do mapa: os 4 cabem inteiros em celular estreito */
@media (max-width:430px){
  .trilha-capitulos{gap:2px;padding:4px;max-width:calc(100% - 16px)}
  .capitulo{font-size:14px;padding:4px 5px;gap:4px;letter-spacing:.03em}
  .capitulo i{width:8px;height:8px}
}
/* batismo: o personagem fica dentro do rio da própria imagem. A camada de água só cobre o corpo até a
   cintura, da cor do rio, sem borda dura (antes parecia uma faixa azul em cima do mato) */
.agua{left:0;right:0;width:auto;translate:none;
  background:linear-gradient(180deg,rgba(90,215,235,.28) 0,rgba(40,170,215,.62) 30%,rgba(20,120,190,.82));
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 16px);mask:linear-gradient(180deg,transparent 0,#000 16px)}
.agua::before{left:50%;right:auto;top:2px;width:var(--sw,160px);height:16px;translate:-50% 0;border-radius:50%;
  background:none;border:3px solid rgba(225,250,255,.85);border-left-color:transparent;border-right-color:transparent;
  animation:ondula 1.6s ease-in-out infinite}
@keyframes ondula{0%,100%{transform:scaleX(.85);opacity:.9}50%{transform:scaleX(1.15);opacity:.5}}

/* ===================== 29/09: fotos reais da igreja (batismo e consagração) ===================== */
/* página própria na caixa de texto: fotos em moldura clara, levemente tortas; tocar abre grande */
.dialogo-fotos{display:flex;gap:18px;justify-content:center;margin-top:8px;padding:8px 4px 10px}
.foto{flex:0 1 250px;min-width:0;border:0;padding:8px 8px 20px;background:#FFF6E2;cursor:zoom-in;
  box-shadow:0 0 0 3px var(--tinta),0 10px 18px rgba(0,0,0,.35);rotate:-2.5deg;
  animation:foto-cai .5s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(var(--i,0) * .12s);transition:rotate .2s,scale .2s}
.foto:nth-child(2){rotate:2deg}
.foto:nth-child(3){rotate:-1deg}
.foto:hover,.foto:focus-visible{rotate:0deg;scale:1.04}
.foto img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:#2A3558}
@keyframes foto-cai{from{opacity:0;transform:translateY(26px) scale(.9)}}
/* celular em pé: fotos maiores numa fita que desliza para o lado */
@media (max-width:700px){
  .dialogo-fotos{justify-content:flex-start;gap:14px;margin:6px -16px 0;padding:8px 18px 12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:18px;scrollbar-width:none}
  .dialogo-fotos::-webkit-scrollbar{display:none}
  .foto{flex:0 0 64%;scroll-snap-align:start;padding:6px 6px 16px}
}
/* tela baixa (celular deitado): fotos menores, a caixa não engole a cena */
@media (max-height:520px){
  .dialogo-fotos{margin-top:2px;padding:4px 4px 6px}
  .foto{flex-basis:150px;padding:5px 5px 12px}
}
/* foto ampliada */
.foto-grande{position:absolute;inset:0;z-index:30;display:grid;place-items:center;align-content:center;gap:16px;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));background:rgba(6,10,26,.9);cursor:zoom-out}
.foto-grande img{max-width:min(100%,1120px);max-height:calc(100dvh - 120px);object-fit:contain;border:8px solid #FFF6E2;box-shadow:0 0 0 3px var(--tinta),0 20px 50px rgba(0,0,0,.5)}
.foto-grande.entra img{animation:foto-cai .35s ease-out both}
@media (max-height:420px){.foto{flex-basis:118px;padding:4px 4px 10px}.dialogo-fotos{gap:10px}}

/* ===================== 29/09: voz (Matheus e Carla) ===================== */
/* ligar/desligar a voz ao lado do botão Mapa */
.cena-acoes{position:absolute;top:calc(16px + env(safe-area-inset-top));right:16px;display:flex;gap:10px;z-index:4}
.cena-acoes .cena-fechar{position:static}