/* Histórias da Bíblia — jogos, quiz e músicas: o visual comum, o pergaminho e as cenas planas das histórias (os mesmos
   tokens do motor e da capa, o visual que o dono escolheu). Claro e escuro seguem o aparelho; com movimento reduzido
   nada se mexe sozinho. Nada de fora. */
:root{
 --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,"Noto Serif",Georgia,serif;
 --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 --titulo:var(--serif);--texto:var(--sans);
 --fundo:#f6efe2;--cartao:rgba(255,252,246,.94);--cartao2:#fbf6ec;--borda:rgba(122,96,58,.2);--borda-l:1px;
 --tinta:#29231c;--tinta2:#655847;--ouro:#b8842a;--ouro-texto:#835a12;--ouro-fundo:rgba(214,168,74,.14);--foco:#835a12;
 --sombra:rgba(38,26,10,.3);--sombra-c:0 18px 40px -30px var(--sombra);--sombra-h:0 24px 46px -28px var(--sombra);
 --raio:20px;--ok:#3f7a2e;--ok-fundo:rgba(95,150,70,.14);--erro:#a8452b;--erro-fundo:rgba(190,90,60,.12);
 --verso-f:#7a5636;--verso-e:#e2b866;--verso-l:#c9a35a;
 --c0:#7fae5a;--c1:#c9953d;--c2:#d07a3e;--c3:#8e5bb0;--c4:#4a78b0;--c5:#3f9a8a;
 color-scheme:light dark
}
@media (prefers-color-scheme:dark){:root{
 --fundo:#0d111e;--cartao:rgba(24,27,41,.94);--cartao2:#1d2030;--borda:rgba(230,204,150,.15);
 --tinta:#efe6d5;--tinta2:#bcb09b;--ouro:#e2b866;--ouro-texto:#ebc883;--ouro-fundo:rgba(226,184,102,.12);--foco:#f1d08c;
 --sombra:rgba(0,0,0,.55);--ok:#9fd07f;--ok-fundo:rgba(120,190,90,.14);--erro:#f0a08a;--erro-fundo:rgba(240,130,100,.12);
 --verso-f:#3a2c22;--verso-e:#e2b866;--verso-l:#8a6a3a
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0}
body{background:var(--fundo);color:var(--tinta);font:17px/1.6 var(--texto);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100svh}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-radius:8px}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
a{color:var(--ouro-texto)}
svg{display:block}
h1,h2,h3{font-family:var(--titulo);font-weight:400;margin:0}
.kicker{margin:0 0 .5em;font:600 12px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ouro-texto)}
blockquote{margin:0;padding:0 0 0 16px;border-left:2px solid var(--ouro);font:400 clamp(17px,1.45vw,19.5px)/1.62 var(--serif)}
blockquote p{margin:0}blockquote p+p{margin-top:.45em}
sup{font:600 .62em/0 var(--sans);color:var(--ouro-texto);margin-right:.25em;vertical-align:.55em}
.ref{margin:.7em 0 0;font:500 13px/1.4 var(--sans);color:var(--tinta2);letter-spacing:.02em}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:1em 0 0}
.acao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:99px;border:1px solid var(--ouro);background:transparent;color:var(--ouro-texto);font:600 15px/1.1 var(--sans);cursor:pointer;text-decoration:none;transition:background .25s,color .25s,transform .2s}
.acao:hover{background:var(--ouro-fundo)}.acao:active{transform:scale(.97)}
.acao svg{width:18px;height:18px;flex:none}
.acao.cheia{background:var(--ouro);border-color:var(--ouro);color:#2a1d08}
.acao.cheia:hover{background:color-mix(in oklab,var(--ouro),#fff 14%)}
.acao[disabled]{opacity:.5;cursor:default}

/* A barra de cima: voltar, o nome da página e as histórias */
.topo{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:8px 14px;padding-top:max(8px,env(safe-area-inset-top));
 background:color-mix(in oklab,var(--fundo),transparent 12%);border-bottom:1px solid var(--borda);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cel .topo{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--fundo)}
.topo a.voltar{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px 0 8px;border-radius:99px;border:1px solid var(--borda);color:inherit;text-decoration:none;font:600 14px/1 var(--sans);white-space:nowrap}
.topo a.voltar svg{width:18px;height:18px}
.topo a.voltar:hover{background:var(--ouro-fundo)}
.topo .nome{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 19px/1 var(--titulo);color:inherit;text-decoration:none}

main{max-width:1080px;margin:0 auto;padding:18px 16px 64px}
.cab{max-width:720px;margin:10px auto 22px;text-align:center}
.cab h1{font-size:clamp(34px,6vw,58px);line-height:1.04;text-wrap:balance}
.cab .sub{margin:.4em auto 0;max-width:40ch;color:var(--tinta2);font:16px/1.55 var(--texto);text-wrap:pretty}
.cartao{background:var(--cartao);border:var(--borda-l) solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra-c);padding:18px 20px}
.creditos{max-width:560px;margin:30px auto 0;padding:0 16px 28px;text-align:center;font-size:13.5px;color:var(--tinta2)}
.ligacoes{padding:0 16px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin:18px 0 0;font:600 14px/1.4 var(--sans)}

/* ---------- A página dos jogos ---------- */
.heroi{position:relative;overflow:hidden;text-align:center;padding:42px 16px 34px}
.heroi-arte{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.heroi-miolo{position:relative;z-index:1;max-width:720px;margin:0 auto}
.heroi h1{font-size:clamp(42px,8vw,92px);line-height:.98;letter-spacing:-.02em;text-wrap:balance}
.heroi .sub{margin:.25em 0 0;font:italic 400 clamp(19px,2.4vw,26px)/1.3 var(--serif);color:var(--tinta2)}
.orna{display:block;margin:16px auto;width:180px;height:16px;color:var(--ouro)}
.lede{margin:0 auto;max-width:42ch;color:var(--tinta2);font:16px/1.55 var(--texto);text-wrap:pretty}
.grade{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.jogo{display:grid;grid-template-columns:76px 1fr;gap:16px;align-items:center;height:100%;padding:16px;color:inherit;text-decoration:none;background:var(--cartao);border:var(--borda-l) solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra-c);transition:transform .25s,box-shadow .25s,border-color .25s}
.jogo .med{width:76px;height:76px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px var(--fundo),0 0 0 5px var(--cor,var(--ouro));transition:transform .35s cubic-bezier(.2,.8,.2,1.2)}
.jogo .med svg{width:100%;height:100%}
.jogo .txt{display:grid;gap:3px}
.jogo strong{font:400 clamp(21px,2.1vw,24px)/1.15 var(--titulo)}
.jogo small{font:600 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in oklab,var(--cor,var(--ouro)),var(--tinta) 40%)}
.jogo .resumo{font:15px/1.5 var(--texto);color:var(--tinta2)}
.selo{justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:6px;min-height:34px;padding:0 14px;border-radius:99px;font:600 13.5px/1 var(--sans);background:var(--ouro);color:#2a1d08}
.selo svg{width:16px;height:16px}
.jogo:hover{transform:translateY(-2px);box-shadow:var(--sombra-h);border-color:var(--ouro)}
.jogo:hover .med{transform:scale(1.07) rotate(-3deg)}
.jogo:focus-visible{outline:3px solid var(--foco);outline-offset:4px}
.grade li:nth-child(6n+1){--cor:var(--c0)}.grade li:nth-child(6n+2){--cor:var(--c1)}.grade li:nth-child(6n+3){--cor:var(--c2)}
.grade li:nth-child(6n+4){--cor:var(--c3)}.grade li:nth-child(6n+5){--cor:var(--c4)}.grade li:nth-child(6n+6){--cor:var(--c5)}
.secao{margin:34px 0 14px;text-align:center}
.secao h2{font-size:clamp(26px,3vw,34px)}
.secao p{margin:.3em 0 0;color:var(--tinta2)}

/* ---------- escolhas (nível, história, tipo) ---------- */
.escolha{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 18px;padding:0;border:0}
.escolha legend{width:100%;text-align:center;margin-bottom:8px;font:600 12px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta2)}
.escolha button{min-height:44px;padding:0 16px;border-radius:99px;border:var(--borda-l) solid var(--borda);background:var(--cartao);cursor:pointer;font:600 15px/1 var(--texto)}
.escolha button[aria-pressed=true]{background:var(--ouro);border-color:var(--ouro);color:#2a1d08}
.placar{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:0 0 16px;font:600 14px/1.4 var(--sans);color:var(--tinta2)}
.placar b{color:var(--tinta)}

/* ---------- Memória ---------- */
.mesa{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));max-width:760px;margin:0 auto}
.mesa.n20{grid-template-columns:repeat(5,minmax(0,1fr));max-width:900px}
.cel .mesa{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cel .mesa.n20{grid-template-columns:repeat(4,minmax(0,1fr))}
.carta{position:relative;aspect-ratio:3/4;padding:0;border:0;background:none;cursor:pointer;perspective:900px;border-radius:16px}
.carta .face{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .45s cubic-bezier(.3,.7,.3,1);border:var(--borda-l) solid var(--borda);box-shadow:var(--sombra-c)}
.carta .tras{transform:rotateY(0)}
.carta .frente{transform:rotateY(180deg);background:var(--cartao)}
.carta.virada .tras{transform:rotateY(-180deg)}.carta.virada .frente{transform:rotateY(0)}
.carta .tras{background:var(--verso-f);box-shadow:inset 0 0 0 6px var(--verso-f),inset 0 0 0 7.5px var(--verso-l),var(--sombra-c);justify-content:center}
.carta .tras svg{width:100%;height:auto}
.vs-f{fill:var(--verso-f)}.vs-e{fill:var(--verso-e)}.vs-l{stroke:var(--verso-l);stroke-width:1.6;stroke-linecap:round}
.carta .frente svg{flex:1;min-height:0;width:100%;height:auto;object-fit:cover}
.carta .rotulo{padding:5px 4px 7px;font:600 clamp(12px,1.6vw,15px)/1.15 var(--texto);text-align:center;color:var(--tinta)}
.carta.par .frente{border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-fundo),var(--sombra-c)}
.carta.par{cursor:default}
.carta.nao .frente{animation:nao .4s ease}
@keyframes nao{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.carta:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
.achado{max-width:640px;margin:18px auto 0;display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center}
.achado .mini{display:flex;gap:4px}
.achado .mini svg{width:30px;height:40px;border-radius:6px;object-fit:cover}
.achado .mini span{display:block;width:30px;height:40px;border-radius:6px;overflow:hidden}
.achado .mini span svg{width:100%;height:100%}
.achado p{margin:0}
.achado .fato{font:400 clamp(17px,1.6vw,19px)/1.45 var(--serif)}
.achado .acoes{margin-top:.5em}
.cel .achado{grid-template-columns:1fr}
.lista-pares{list-style:none;padding:0;margin:14px auto 0;max-width:640px;display:grid;gap:8px}
.lista-pares li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font:15px/1.4 var(--texto)}
.lista-pares a{font-weight:600}

/* ---------- Ponha na ordem ---------- */
.fila{list-style:none;margin:0 auto;padding:0;display:grid;gap:12px;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));max-width:1040px;counter-reset:pos}
.cel .fila{grid-template-columns:1fr;gap:8px}
.cena{position:relative;display:flex;flex-direction:column;border-radius:var(--raio);background:var(--cartao);border:var(--borda-l) solid var(--borda);box-shadow:var(--sombra-c);overflow:hidden;user-select:none;-webkit-user-select:none;counter-increment:pos}
.cena .toca{display:flex;flex-direction:column;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;border-radius:inherit}
.cena .toca svg{width:100%;height:auto;aspect-ratio:1}
.cena .leg{display:flex;gap:8px;align-items:flex-start;padding:8px 10px 10px;font:600 14.5px/1.3 var(--texto)}
.cena .leg::before{content:counter(pos);flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ouro-fundo);color:var(--ouro-texto);font:700 13px/1 var(--sans)}
.cena .alca{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:color-mix(in oklab,var(--cartao),transparent 10%);border:1px solid var(--borda);cursor:grab;touch-action:none;color:var(--tinta2)}
.cena .alca svg{width:20px;height:20px}
.cel .cena{flex-direction:row;align-items:stretch}
.cel .cena .toca{flex-direction:row;align-items:center}
.cel .cena .toca svg{width:86px;flex:none}
.cel .cena .leg{flex:1;padding:10px 54px 10px 12px;align-items:center}
.cel .cena .alca{top:50%;transform:translateY(-50%)}
.cena.escolhida{outline:3px solid var(--foco);outline-offset:2px}

.cena.certa{border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-fundo),var(--sombra-c)}
.cena.errada{border-color:var(--erro)}
.cena.levando{opacity:.35}
.fantasma{position:fixed;z-index:20;pointer-events:none;width:var(--w);transform:translate(-50%,-50%) rotate(-3deg);opacity:.92;box-shadow:0 20px 40px -18px var(--sombra)}
.cena.alvo{outline:3px dashed var(--ouro);outline-offset:3px}
.resultado{max-width:760px;margin:18px auto 0}
.resultado h2{font-size:clamp(24px,3vw,32px);margin-bottom:.3em}
.passos{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:14px;counter-reset:p}
.passos li{counter-increment:p}
.passos h3{display:flex;gap:8px;align-items:center;font:600 15px/1.3 var(--texto);margin-bottom:6px}
.passos h3::before{content:counter(p);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ouro);color:#2a1d08;font:700 13px/1 var(--sans)}
.passos blockquote{font-size:16.5px}

/* ---------- Quiz ---------- */
.pergunta{max-width:760px;margin:0 auto}
.pergunta .enunciado{font:400 clamp(24px,3.2vw,34px)/1.2 var(--titulo);text-align:center;margin:4px 0 14px;text-wrap:balance}
.pergunta .fala{margin:0 auto 18px;max-width:620px;font-size:clamp(19px,2vw,23px)}
.opcoes{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.opcoes button{width:100%;min-height:56px;display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:16px;border:var(--borda-l) solid var(--borda);background:var(--cartao);cursor:pointer;text-align:left;font:600 17px/1.25 var(--texto);box-shadow:var(--sombra-c);transition:transform .2s,border-color .2s,background .2s}
.opcoes button:hover:not([disabled]){border-color:var(--ouro);transform:translateY(-1px)}
.opcoes button svg{width:44px;height:44px;border-radius:10px;flex:none}
.opcoes button[disabled]{cursor:default}
.opcoes button.certa{border-color:var(--ok);background:color-mix(in oklab,var(--ok-fundo),var(--cartao));box-shadow:0 0 0 3px var(--ok-fundo)}
.opcoes button.errada{border-color:var(--erro);background:color-mix(in oklab,var(--erro-fundo),var(--cartao))}
.opcoes button .marca{margin-left:auto;font:700 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.opcoes button.certa .marca{color:var(--ok)}.opcoes button.errada .marca{color:var(--erro)}
/* criança: figuras grandes e botões grandes */
.crianca .opcoes{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.crianca .opcoes.duas{grid-template-columns:repeat(2,minmax(0,1fr))}
.crianca .opcoes button{flex-direction:column;justify-content:flex-start;text-align:center;padding:10px;min-height:150px;font-size:clamp(16px,2vw,20px);border-radius:20px}
.crianca .opcoes button svg{width:100%;height:auto;aspect-ratio:1;max-width:180px;border-radius:14px}
.crianca .opcoes button .marca{margin:0}
.crianca .pergunta .enunciado{font-size:clamp(26px,4vw,40px)}
.dois .opcoes{grid-template-columns:repeat(2,minmax(0,1fr))}
.dois .opcoes button{flex-direction:column;text-align:center;justify-content:flex-start}
.dois .opcoes button svg{width:72px;height:72px}
.retorno{max-width:760px;margin:16px auto 0}
.retorno .titulo{margin:0 0 .5em;font:400 clamp(22px,2.6vw,28px)/1.2 var(--titulo)}
.retorno.ok .titulo{color:var(--ok)}.retorno.nao .titulo{color:var(--erro)}
.fim-quiz{text-align:center;max-width:560px;margin:10px auto 0}
.fim-quiz .nota{font:400 clamp(40px,7vw,72px)/1 var(--titulo);margin:.1em 0}
.estrelas-nota{display:flex;justify-content:center;gap:6px;margin:8px 0}
.estrelas-nota svg{width:34px;height:34px}

/* ---------- Cântico ---------- */
.palco-c{display:grid;gap:18px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}
.cel .palco-c{grid-template-columns:1fr}
.letra{font-size:clamp(21px,2.4vw,28px);line-height:1.5}
.letra p+p{margin-top:.35em}
.linha{display:inline;padding:.05em .2em;border-radius:8px;transition:background .3s,color .3s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.linha.agora{background:var(--ouro-fundo);color:var(--ouro-texto);box-shadow:inset 0 -3px 0 var(--ouro)}
.linha.foi{color:var(--tinta2)}
.controles{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.controles label{font:600 14px/1.3 var(--sans);color:var(--tinta2);display:flex;gap:8px;align-items:center}
.controles select{min-height:40px;border-radius:12px;border:1px solid var(--borda);background:var(--cartao);color:var(--tinta);font:600 15px/1 var(--sans);padding:0 10px}
.instrumentos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.instr{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px 10px;border-radius:18px;border:var(--borda-l) solid var(--borda);background:var(--cartao);cursor:pointer;box-shadow:var(--sombra-c);font:600 15px/1.2 var(--texto);touch-action:manipulation}
.instr svg{width:72px;height:72px}
.instr kbd{font:600 11px/1 var(--sans);color:var(--tinta2);border:1px solid var(--borda);border-radius:6px;padding:3px 6px}
.instr.soa svg{animation:soa .35s ease}
@keyframes soa{30%{transform:scale(1.12) rotate(-4deg)}70%{transform:scale(.96) rotate(2deg)}}
.partitura{font:13px/1.5 var(--sans);color:var(--tinta2)}
.partitura summary{cursor:pointer;font-weight:600}
.batida{display:flex;gap:6px;justify-content:center;margin-top:10px}
.batida i{width:10px;height:10px;border-radius:50%;background:var(--borda)}
.batida i.on{background:var(--ouro)}

/* A festa do acerto (jogos.js): um brilho dourado */
.festa{position:fixed;z-index:30;width:0;height:0;pointer-events:none}
.festa i{position:absolute;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--ouro);animation:festa 1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes festa{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}

@media (min-width:900px){main{padding-top:26px}}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}
.crianca.dois .opcoes button svg{width:100%;height:auto;max-width:200px}
.mesa,.fila{touch-action:manipulation}
.letra p{position:relative;padding-left:1.2em}
.letra sup{position:absolute;left:0;top:1.1em}
.letra .linha{display:block;width:fit-content;max-width:100%}
/* no celular, enquanto o cântico toca, os instrumentos ficam presos embaixo (para tocar junto lendo a letra) */
.cel.tocando .instrumentos{position:fixed;left:0;right:0;bottom:0;z-index:6;margin:0;gap:8px;padding:8px 12px max(8px,env(safe-area-inset-bottom));background:var(--fundo);border-top:var(--borda-l) solid var(--borda)}
.cel.tocando .instr{flex-direction:row;justify-content:center;padding:6px;min-height:52px}
.cel.tocando .instr svg{width:36px;height:36px}
.cel.tocando .instr kbd{display:none}
.cel.tocando body{padding-bottom:84px}

/* ---------- v1.67: o comum da versão completa ---------- */
.topo a.voltar.ir{margin-left:auto}
.topo .nome{flex:1}
.centro{justify-content:center}
.narra{margin:0;color:var(--tinta2);font-size:15px}
.mini-t{font:600 12px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta2);margin:0 0 8px}
.escolhas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;margin:0 0 16px}
.escolhe{display:inline-flex;align-items:center;gap:8px;font:600 14px/1.3 var(--sans);color:var(--tinta2)}
.escolhe select{min-height:44px;max-width:min(78vw,360px);border-radius:12px;border:1px solid var(--borda);background:var(--cartao);color:var(--tinta);font:600 15px/1 var(--sans);padding:0 10px}
/* a faixa "Jogos sobre…" (modo por história) */
.faixa{max-width:760px;margin:0 auto 14px;display:grid;grid-template-columns:56px 1fr;gap:4px 14px;align-items:center;padding:10px 16px;border-radius:var(--raio);background:var(--cartao);border:1px solid var(--borda);box-shadow:var(--sombra-c)}
.faixa .med{width:56px;height:56px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px var(--fundo),0 0 0 3.5px var(--ouro);grid-row:span 2}
.faixa .med svg{width:100%;height:100%}
.faixa p{margin:0;display:grid}.faixa small{font:600 11.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ouro-texto)}
.faixa strong{font:400 clamp(20px,2.4vw,26px)/1.15 var(--titulo)}
.faixa-links{display:flex;flex-wrap:wrap;gap:4px 16px;font:600 13.5px/1.4 var(--sans)}
/* a página dos jogos */
.secao-t{margin:30px 0 12px;text-align:center}
.secao-t h2{font-size:clamp(26px,3vw,34px)}
.secao-t p{margin:.25em auto 0;max-width:52ch;color:var(--tinta2);font-size:15.5px}
.uma{margin-top:22px}
.historias-lista summary{cursor:pointer;list-style:none;display:flex;justify-content:center}
.historias-lista summary::-webkit-details-marker{display:none}
.historias-lista summary span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:99px;border:1px solid var(--ouro);color:var(--ouro-texto);font:600 15px/1.1 var(--sans)}
.chips{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.chips a{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 12px 6px 6px;border-radius:99px;background:var(--cartao);border:1px solid var(--borda);color:inherit;text-decoration:none;font:600 14.5px/1.25 var(--texto)}
.chips a:hover{border-color:var(--ouro)}
.chips .med{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden}
.chips .med svg{width:100%;height:100%}
.chips b{font:700 12px/1 var(--sans);color:var(--tinta2);min-width:1.6em;text-align:right}
/* memória: cartas de texto (por história) e 30 cartas */
.mesa.n30{grid-template-columns:repeat(6,minmax(0,1fr));max-width:980px}
.cel .mesa.n30{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.mesa.n20{grid-template-columns:repeat(5,minmax(0,1fr))}
.cel .mesa.n20{grid-template-columns:repeat(4,minmax(0,1fr))}
.carta .frente .txt-carta{flex:1;display:grid;place-items:center;padding:8px;font:400 clamp(13px,1.5vw,16px)/1.25 var(--serif);text-align:center;background:var(--cartao2);color:var(--tinta)}
.cel .mesa.n30 .carta .rotulo{font-size:11px;padding:3px 2px 5px}
/* ordem: cenas sem desenho */
.cena .sem-arte{display:grid;place-items:center;aspect-ratio:1;background:var(--cartao2);color:var(--ouro);border-bottom:1px solid var(--borda)}
.cena .sem-arte svg{width:44%;height:auto}
.cel .cena .sem-arte{width:86px;flex:none;aspect-ratio:auto;align-self:stretch;border-bottom:0;border-right:1px solid var(--borda)}
.cel .cena .sem-arte svg{width:44px}
/* quiz: o versículo com a palavra que falta */
.fala .lacuna{display:inline-block;min-width:4.2em;border-bottom:2px solid var(--ouro);color:transparent;line-height:1.1}
.fala .lacuna.cheia{color:var(--ok);font-weight:600}
.opcoes button .hist{display:block;font:500 13px/1.3 var(--sans);color:var(--tinta2)}
.retorno mark{background:var(--ouro-fundo);color:inherit;border-radius:4px;padding:0 .15em}
/* quebra-cabeça */
.qc-palco{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:18px;max-width:980px;margin:0 auto;align-items:start}
.cel .qc-palco{grid-template-columns:1fr}
.qc{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;aspect-ratio:1200/630;width:100%;padding:3px;border-radius:14px;background:var(--borda);touch-action:none;user-select:none;-webkit-user-select:none}
.qc .peca{position:relative;overflow:hidden;border:0;padding:0;margin:0;background:var(--cartao2);cursor:pointer;border-radius:4px;transition:transform .2s}
.qc .peca img{position:absolute;left:0;top:0;width:calc(var(--n) * 100%);height:calc(var(--n) * 100%);max-width:none;pointer-events:none;-webkit-user-drag:none}
.qc .peca .n{position:absolute;left:4px;top:4px;display:none;min-width:22px;height:22px;place-items:center;border-radius:99px;background:rgba(0,0,0,.55);color:#fff;font:700 12px/1 var(--sans)}
.qc.numeros .peca .n{display:grid}
.qc .peca.escolhida{outline:3px solid var(--foco);outline-offset:-3px;z-index:2;transform:scale(.96)}
.qc .peca.alvo{outline:3px dashed var(--ouro);outline-offset:-3px}
.qc .peca.certa::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px rgba(120,190,90,.0)}
.qc.pronto{gap:0;padding:0;background:none}.qc.pronto .peca{border-radius:0;cursor:default}
.qc-modelo{margin:0;display:grid;gap:6px;font:600 12.5px/1.3 var(--sans);color:var(--tinta2);text-align:center}
.qc-modelo img{width:100%;height:auto;border-radius:10px;border:1px solid var(--borda)}
.cel .qc-modelo{max-width:220px;margin:0 auto}
/* ligue os pares */
.ligue{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,10vw,140px);max-width:880px;margin:0 auto}
.linhas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.linhas line{stroke:var(--ouro);stroke-width:3;stroke-linecap:round}
.linhas line.ok{stroke:var(--ok)}.linhas line.nao{stroke:var(--erro);stroke-dasharray:6 6}
.lado{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start}
.lado button{position:relative;width:100%;min-height:58px;display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:16px;border:1px solid var(--borda);background:var(--cartao);box-shadow:var(--sombra-c);cursor:pointer;text-align:left;font:600 16px/1.25 var(--texto);touch-action:none}
.lado.dir button{font-weight:400;font-family:var(--serif)}
.lado button svg{width:40px;height:40px;border-radius:10px;flex:none}
.lado button::after{content:"";position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--fundo);border:3px solid var(--ouro)}
.lado.esq button::after{right:-8px}.lado.dir button::after{left:-8px}
.lado button.escolhida{outline:3px solid var(--foco);outline-offset:2px}
.lado button.feito{border-color:var(--ok);cursor:default;box-shadow:0 0 0 3px var(--ok-fundo)}
.lado button.feito::after{background:var(--ok);border-color:var(--ok)}
.lado button.nao{animation:nao .4s ease}
.cel .ligue{gap:28px}.cel .lado button{font-size:14px;min-height:64px;padding:6px 10px}.cel .lado button svg{width:30px;height:30px}
/* monte */
.monte{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;max-width:1080px;margin:0 auto;align-items:start}
.cel .monte{grid-template-columns:1fr}
.obra{position:relative;border-radius:var(--raio);overflow:hidden;border:1px solid var(--borda);box-shadow:var(--sombra-c);background:var(--cartao2);touch-action:none}
.obra svg{width:100%;height:auto}
.obra .vaga{fill:transparent;stroke:var(--ouro);stroke-width:2.4;stroke-dasharray:8 6;cursor:pointer}
.obra .vaga.acesa{fill:rgba(214,168,74,.22);stroke-width:3.4}
.obra .vaga:focus-visible{outline:none;stroke:var(--foco);stroke-width:4}
.obra .posta{animation:pousa .5s cubic-bezier(.2,.8,.2,1.2)}
@keyframes pousa{0%{opacity:0;transform:translateY(-12px)}100%{opacity:1;transform:none}}
.pecas{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cel .pecas{grid-template-columns:repeat(2,minmax(0,1fr))}
.pecas button{width:100%;min-height:50px;display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:14px;border:1px solid var(--borda);background:var(--cartao);cursor:grab;text-align:left;font:600 14.5px/1.25 var(--texto);touch-action:none}
.pecas button svg{width:52px;height:38px;flex:none;border-radius:8px;background:var(--cartao2)}
.pecas button.escolhida{outline:3px solid var(--foco);outline-offset:2px}
.pecas button[disabled]{opacity:.45;cursor:default;text-decoration:line-through}
.legenda{max-width:1080px;margin:14px auto 0}
.legenda blockquote{font-size:17px}
.arrastando{position:fixed;z-index:40;pointer-events:none;transform:translate(-50%,-50%) scale(1.06);opacity:.92;filter:drop-shadow(0 10px 18px rgba(0,0,0,.25))}
.arrastando svg{width:90px;height:66px}
/* labirinto */
.lab-palco{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;max-width:1080px;margin:0 auto;align-items:start}
.cel .lab-palco{grid-template-columns:1fr}
.lab{border-radius:var(--raio);overflow:hidden;border:1px solid var(--borda);box-shadow:var(--sombra-c);background:#ead6ae;touch-action:none;max-width:720px;width:100%;margin:0 auto}
.lab svg{width:100%;height:auto}
.lab:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
.lab .parede{stroke:#8a6234;stroke-width:3.2;stroke-linecap:round}
.lab .chao{fill:#ead6ae}.lab .pista{fill:#f6e7c6}
.lab .rastro{fill:rgba(184,132,42,.22)}
.lab .dica{fill:none;stroke:#7fa6d8;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:.75;stroke-dasharray:2 10}
@media (prefers-color-scheme:dark){.lab{background:#2a2418}.lab .chao{fill:#2a2418}.lab .pista{fill:#3a3020}.lab .parede{stroke:#d9b06a}.lab .dica{stroke:#ffb36b}}
.setas{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,56px);gap:6px;justify-content:center;margin:0 auto 10px}
.setas button{border-radius:14px;border:1px solid var(--borda);background:var(--cartao);box-shadow:var(--sombra-c);font:700 18px/1 var(--sans);cursor:pointer;touch-action:manipulation}
.setas [data-ir=c]{grid-column:2}.setas [data-ir=e]{grid-column:1;grid-row:2}.setas [data-ir=b]{grid-column:2;grid-row:2}.setas [data-ir=d]{grid-column:3;grid-row:2}
.lab-lado .legenda{margin:0}
.cel .lab-lado{display:grid;gap:8px}
/* caça-palavras */
.caca-palco{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;max-width:920px;margin:0 auto;align-items:start}
.cel .caca-palco{grid-template-columns:1fr}
.caca{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:2px;width:100%;max-width:620px;margin:0 auto;padding:6px;border-radius:var(--raio);background:var(--cartao);border:1px solid var(--borda);box-shadow:var(--sombra-c);touch-action:none;user-select:none;-webkit-user-select:none;position:relative}
.caca button{aspect-ratio:1;border:0;padding:0;border-radius:8px;background:transparent;font:600 clamp(13px,2.6vw,24px)/1 var(--sans);color:var(--tinta);cursor:pointer;text-transform:uppercase}
.caca.n12 button{font-size:clamp(11px,1.9vw,19px)}
.caca button.sel{background:var(--ouro);color:#2a1d08}
.caca button.achada{background:var(--ok-fundo);color:var(--ok);box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--ok),transparent 50%)}
.caca button.cursor{outline:3px solid var(--foco);outline-offset:-2px}
.caca button.inicio{background:var(--ouro-fundo);outline:2px dashed var(--ouro);outline-offset:-2px}
.palavras{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.palavras li{padding:6px 12px;border-radius:99px;border:1px solid var(--borda);background:var(--cartao);font:600 14.5px/1.2 var(--texto)}
.palavras li.ok{text-decoration:line-through;color:var(--ok);border-color:var(--ok);background:var(--ok-fundo)}
.opcoes button .fig{display:block;flex:none;width:44px;height:44px;border-radius:10px;overflow:hidden}
.opcoes button .fig svg{width:100%;height:100%}
.dois .opcoes button .fig,.crianca .opcoes button .fig{width:72px;height:72px}
.crianca.dois .opcoes button .fig{width:100%;max-width:200px;height:auto;aspect-ratio:1}
.lab .eu{transition:transform .14s ease-out}
.lab .fogo{display:none}
@media (prefers-color-scheme:dark){.lab .fogo{display:inline}.lab .nuvem{display:none}}
.lab .parada.vista{opacity:.45}
.lab-lado .setas button:active{transform:scale(.94)}
/* a página dos jogos: o céu da abertura (antes num <style> da página) */
.jh1{stop-color:#f2dcc6}.jh2{stop-color:#fbeedb}.jh-arco{opacity:.16}.jh-m{fill:#e9dcc0}
@media (prefers-color-scheme:dark){.jh1{stop-color:#070a16}.jh2{stop-color:#141a33}.jh-arco{opacity:.08}.jh-m{fill:#12172a}}
.jg-inicio .heroi{padding:58px 16px 64px}
.jg-inicio .heroi::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,var(--fundo));pointer-events:none}
.jg-inicio .faixa{margin-top:4px}
/* no celular, a obra fica presa em cima enquanto se rola a bandeja das peças */
.cel .obra{position:sticky;top:calc(57px + env(safe-area-inset-top));z-index:3}
.cel .monte{gap:10px}
.lado.dir button{padding-left:20px}.lado.esq button{padding-right:18px}