/* Quiz Bíblico · Willkiz. A base (cores, fontes, topo, botões, configurações e rodapé) é a mesma da Linha do Tempo. */
@font-face{font-family:'Cinzel';src:url('../fontes/cinzel-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Cinzel';src:url('../fontes/cinzel-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Cormorant';src:url('../fontes/cormorant-garamond-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Cormorant';src:url('../fontes/cormorant-garamond-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Cormorant';src:url('../fontes/cormorant-garamond-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Caveat';src:url('../fontes/caveat-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}

/* mesmo visual do portal Willkiz: papel claro por padrão, lousa no escuro */
:root{
  --fundo:#f6f4ef; --fundo2:#fffefb; --texto:#17191f; --suave:#5d6170; --apagado:#8b8e98;
  --linha:rgba(23,25,31,.14); --linha-forte:rgba(23,25,31,.55); --sombra:rgba(23,25,31,.18);
  --c1:#3f8a87; --c2:#b0607f; --c3:#a8822a; --c4:#6d6fbf; --c5:#4f84b0; --certo:#2f8a4f; --brilho:transparent;
  --titulo:'Cinzel',Georgia,serif; --corpo:'Cormorant',Georgia,serif; --mao:'Caveat',cursive;
  --lado:max(16px,calc(50vw - 560px)); color-scheme:light;
}
:root[data-tema=escuro]{
  --fundo:#121418; --fundo2:#1a1d23; --texto:#e9e4d8; --suave:rgba(233,228,216,.66); --apagado:rgba(233,228,216,.45);
  --linha:rgba(233,228,216,.15); --linha-forte:rgba(233,228,216,.6); --sombra:rgba(0,0,0,.5);
  --c1:#74b9b6; --c2:#c98aa6; --c3:#d9bb6c; --c4:#9c9ee0; --c5:#82b4dc; --certo:#6fc98a; --brilho:rgba(255,248,230,.4); color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font:400 1.15rem/1.45 var(--corpo);color:var(--texto);background:var(--fundo);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;overflow-x:hidden}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--c5);outline-offset:3px}

/* topo */
.topo{position:relative;display:flex;align-items:center;gap:12px;padding:10px var(--lado);border-bottom:1px solid var(--linha)}
.marca{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;margin-right:auto}
.marca img{height:26px;width:auto}
.marca b{font:600 1.1rem var(--titulo);letter-spacing:.08em}
.placar{display:flex;align-items:baseline;gap:14px;font:400 .85rem var(--titulo);letter-spacing:.12em;color:var(--suave)}
.placar b{font:600 1.25rem var(--titulo);color:var(--texto);letter-spacing:.02em}
.redondo{width:38px;height:38px;flex:none;border:1px solid var(--linha);border-radius:50%;background:transparent;cursor:pointer;display:grid;place-items:center}
.redondo svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3;transition:transform .5s}
.redondo:hover svg{transform:rotate(90deg)}
.cfg{position:absolute;right:var(--lado);top:calc(100% + 6px);z-index:40;width:220px;background:var(--fundo2);border:1px solid var(--linha-forte);box-shadow:5px 5px 0 var(--sombra);padding:10px 14px 6px}
.cfg-titulo{font:400 .75rem var(--titulo);letter-spacing:.18em;text-transform:uppercase;color:var(--suave);margin-bottom:4px}
.cfg-linha{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px dashed var(--linha);font-weight:600;cursor:pointer}
.chave{appearance:none;-webkit-appearance:none;width:38px;height:20px;border:1px solid var(--linha-forte);border-radius:99px;position:relative;cursor:pointer;margin:0}
.chave::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--apagado);transition:transform .2s}
.chave:checked{background:var(--texto)}
.chave:checked::after{transform:translateX(18px);background:var(--fundo)}

/* botões */
.botao{display:inline-flex;align-items:center;justify-content:center;font:600 1.12rem var(--corpo);letter-spacing:.05em;padding:11px 26px;border:1px solid var(--linha-forte);background:transparent;color:var(--texto);cursor:pointer;position:relative;transition:transform .15s,box-shadow .2s}
.botao::before{content:"";position:absolute;inset:3px;border:1px solid var(--linha);pointer-events:none}
.botao:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--linha-forte)}
.botao:disabled{opacity:.4;cursor:default}
.botao-principal{background:var(--texto);color:var(--fundo);border-color:var(--texto)}

.tela{flex:1;display:flex;flex-direction:column}

/* início */
.inicio{max-width:720px;margin:0 auto;padding:34px 20px 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.fim{width:100%;max-width:1240px;margin:0 auto;padding:30px 20px 50px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.rotulo{font:400 .78rem var(--titulo);letter-spacing:.32em;text-transform:uppercase;color:var(--suave)}
.inicio h1,.fim h1{font:600 clamp(2.6rem,7vw,4.4rem)/1 var(--titulo);text-shadow:0 0 22px var(--brilho)}
.inicio h1 em{font:italic 400 1.1em var(--corpo);color:var(--c3)}
.inicio h1{font-size:clamp(2.4rem,6vw,3.8rem)}
.intro{font-size:1.3rem;color:var(--suave);max-width:40ch}
.recorde{font:400 1.35rem var(--mao);color:var(--c2)}
.voltar-inicio{border:0;background:transparent;color:var(--apagado);font:600 1rem var(--corpo);letter-spacing:.04em;padding:6px 10px;border-radius:99px;cursor:pointer;transition:color .2s,background .2s}
.voltar-inicio:hover{color:var(--texto);background:var(--linha)}
@media (max-width:760px){.voltar-inicio{padding:6px 6px;font-size:.95rem}}
.chave-dificil{--nv-facil:#6f8f4e;--nv-medio:#c9a35a;--nv-dificil:#b0564a;position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:4px;margin-top:18px;font-size:1rem;color:var(--suave)}
:root[data-tema=escuro] .chave-dificil{--nv-facil:#93b06f;--nv-medio:#d8b871;--nv-dificil:#cf7466}
.chave3{position:relative;display:inline-flex;width:52px;height:20px;border:1px solid var(--linha-forte);border-radius:99px}
.chave3 button{flex:1;height:100%;border:0;padding:0;background:none;cursor:pointer;position:relative;z-index:1;border-radius:99px}
.chave3 button::before{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:var(--linha-forte)}
.chave3 button:focus-visible{outline:2px solid var(--texto);outline-offset:1px}
.chave3 i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--nv-facil);transition:transform .25s cubic-bezier(.3,1.4,.5,1),background .25s;pointer-events:none;z-index:2}
.chave3[data-nivel=medio] i{transform:translateX(16px);background:var(--nv-medio)}
.chave3[data-nivel=dificil] i{transform:translateX(32px);background:var(--nv-dificil)}
.chave3-texto{cursor:pointer;user-select:none;font-size:.95rem;line-height:1.1}
/* descrição que aparece ao passar o mouse na chave */
.chave3-dica{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);white-space:nowrap;font-size:.85rem;color:var(--fundo);background:var(--texto);padding:4px 10px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.chave3-dica::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--texto)}
@media (hover:hover){.chave3:hover ~ .chave3-dica{opacity:1;transform:translate(-50%,0)}}
.chave3:has(:focus-visible) ~ .chave3-dica,.chave3-dica.mostrar{opacity:1;transform:translate(-50%,0)}
.rodape{border-top:1px solid var(--linha);margin-top:20px;padding:34px var(--lado) 20px;color:var(--suave)}
.rod-dentro{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
.rod-marca{display:flex;gap:14px;align-items:flex-start}
.rod-marca img{width:64px;height:auto;flex:none}
.rod-marca b{display:block;font:600 1.05rem var(--titulo);letter-spacing:.04em;color:var(--texto);margin-bottom:4px}
.rod-marca p{margin:0;line-height:1.35}
.rod-col{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.rod-col h4{margin:0 0 2px;font:400 .72rem var(--titulo);letter-spacing:.18em;text-transform:uppercase;color:var(--apagado)}
.rod-col a,.rod-col button{font:inherit;color:var(--suave);background:none;border:0;padding:0;cursor:pointer;text-decoration:none;text-align:left}
.rod-col a:hover,.rod-col button:hover{color:var(--texto);text-decoration:underline}
.rod-col .em-breve{opacity:.6}
.rod-col .em-breve small{font:400 .9rem var(--mao);margin-left:4px}
.rod-base{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:26px;padding-top:14px;border-top:1px dashed var(--linha);font-size:.92rem;color:var(--apagado)}
.rod-base p{margin:0}
@media (max-width:760px){
  .rod-dentro{grid-template-columns:1fr 1fr;gap:22px}
  .rod-marca{grid-column:1/-1}
}
.topo > .placar{margin-left:auto}
.topo > .redondo{margin-left:auto}
.topo > .placar:not([hidden]) + .redondo{margin-left:0}
.rod-marca a{flex:none;display:block;line-height:0}
.rod-marca a:hover img{transform:rotate(-6deg)}
.rod-marca img{transition:transform .25s}

/* a tela inicial ocupa a janela inteira: o rodapé só aparece rolando para baixo */
.palco{min-height:calc(100vh - 40px);min-height:calc(100svh - 40px);display:flex;flex-direction:column}
.palco > .modos{flex:1}
.rodape{margin-top:0}

/* ================= Quiz Bíblico ================= */
:root{--vinho:#7a2e3a;--ouro:#b8913a;--ouro-claro:#e4c983;--papel:#fbf6ea;--papel2:#f3ead4;--tinta:#2a2118}
:root[data-tema=escuro]{--papel:#2a261f;--papel2:#221f19;--tinta:#efe6d2}
.inicio h1 em{color:var(--vinho)}
:root[data-tema=escuro] .inicio h1 em{color:var(--ouro-claro)}

/* ---------- estante ---------- */
.palco > .estante{flex:1}
.estante{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,2vw,26px);padding:40px var(--lado) 70px;margin-top:10px}
.estante::after{content:"";position:absolute;left:var(--lado);right:var(--lado);bottom:48px;height:14px;border-radius:3px;
  background:linear-gradient(#8a6440,#5e4128);box-shadow:0 10px 18px -8px rgba(40,25,10,.55)}
:root[data-tema=escuro] .estante::after{background:linear-gradient(#5b4430,#3a2a1c)}
.livro{--cor:#3d5c4a;position:relative;z-index:1;width:150px;height:214px;border:0;padding:0;background:none;cursor:pointer;perspective:900px;flex:none;
  transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.livro:hover{transform:translateY(-10px) rotate(-1.5deg)}
.livro.principal{width:196px;height:280px}
.capa-livro{position:absolute;inset:0;border-radius:4px 10px 10px 4px;background:var(--cor);color:var(--ouro-claro);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px 14px 18px 22px;text-align:center;
  box-shadow:inset 6px 0 0 rgba(0,0,0,.22),inset 8px 0 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.06),6px 8px 0 -2px rgba(30,20,10,.25),0 18px 30px -16px rgba(0,0,0,.6);
  background-image:linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,0) 14%),radial-gradient(ellipse at 60% 30%,rgba(255,255,255,.12),transparent 60%)}
.capa-livro::before{content:"";position:absolute;inset:10px 10px 10px 18px;border:1px solid rgba(228,201,131,.55);border-radius:2px 6px 6px 2px;pointer-events:none}
.capa-livro::after{content:"";position:absolute;right:-5px;top:6px;bottom:6px;width:6px;border-radius:0 3px 3px 0;background:repeating-linear-gradient(#f4ecd8 0 2px,#d9cdb0 2px 3px)}
.capa-icone svg{width:54px;height:54px;fill:none;stroke:var(--ouro-claro);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.livro.principal .capa-icone svg{width:72px;height:72px}
.capa-titulo{font:600 1.02rem/1.15 var(--titulo);letter-spacing:.04em;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.livro.principal .capa-titulo{font-size:1.32rem}
.capa-sub{font:italic 400 .92rem/1.2 var(--corpo);color:rgba(244,232,200,.82)}
.capa-recorde{position:absolute;bottom:-34px;left:0;right:0;font:400 1.05rem var(--mao);color:var(--c2);text-align:center;white-space:nowrap}
.livro:focus-visible{outline:none}.livro:focus-visible .capa-livro{outline:2px solid var(--c5);outline-offset:4px}

@media (max-width:760px){
  .estante{display:grid;grid-template-columns:1fr 1fr;justify-items:center;align-items:end;gap:46px 14px;padding:26px 16px 70px}
  .estante::after{display:none}
  .livro{width:132px;height:188px}
  .livro.principal{grid-column:1/-1;width:170px;height:242px;order:-1}
  .livro::after{content:"";position:absolute;left:-14px;right:-14px;bottom:-12px;height:10px;border-radius:3px;background:linear-gradient(#8a6440,#5e4128);z-index:-1}
}

/* ---------- livro aberto (escolher o modo) ---------- */
.camada{position:fixed;inset:0;z-index:60;display:grid;place-items:center}
.camada-fundo{position:absolute;inset:0;background:rgba(20,16,10,.5);backdrop-filter:blur(3px);opacity:0;transition:opacity .35s}
.camada.aberta .camada-fundo{opacity:1}
.aberto{--w:min(860px,94vw);--h:min(540px,84vh);position:relative;width:var(--w);height:var(--h);perspective:1800px}
.aberto .folha{position:absolute;top:0;bottom:0;width:50%;background:var(--papel);color:var(--tinta);padding:34px 34px 28px;display:flex;flex-direction:column;gap:12px;overflow:auto;
  background-image:linear-gradient(90deg,rgba(0,0,0,.06),transparent 10%,transparent 90%,rgba(0,0,0,.05))}
.aberto .direita{right:0;border-radius:0 8px 8px 0;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);background-image:linear-gradient(90deg,rgba(0,0,0,.14),transparent 12%)}
.aberto .capa-giratoria{position:absolute;top:0;bottom:0;right:0;width:50%;transform-origin:left center;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.6,.05,.2,1)}
.aberto.aberto-mesmo .capa-giratoria{transform:rotateY(-180deg)}
.capa-giratoria > *{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.capa-giratoria .capa-livro{border-radius:4px 10px 10px 4px}
.capa-giratoria .verso{transform:rotateY(180deg);border-radius:8px 0 0 8px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);background-image:linear-gradient(270deg,rgba(0,0,0,.14),transparent 12%)}
.folha .rotulo{color:var(--vinho);letter-spacing:.24em}
:root[data-tema=escuro] .folha .rotulo{color:var(--ouro-claro)}
.folha h2{font:600 1.9rem/1.1 var(--titulo);letter-spacing:.02em}
.folha p{color:color-mix(in srgb,var(--tinta) 75%,transparent);font-size:1.15rem}
.folha .folha-icone svg{width:70px;height:70px;fill:none;stroke:var(--vinho);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
:root[data-tema=escuro] .folha .folha-icone svg{stroke:var(--ouro-claro)}
.folha .ornamento{margin-top:auto;font:400 1.15rem var(--mao);color:var(--ouro)}
.fechar-livro{position:absolute;top:10px;right:12px;z-index:3;width:36px;height:36px;border-radius:50%;border:1px solid rgba(0,0,0,.15);background:var(--papel2);color:var(--tinta);font-size:1.3rem;cursor:pointer;opacity:0;transition:opacity .3s .6s}
.aberto.aberto-mesmo .fechar-livro{opacity:1}
.direita > *{opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.aberto.aberto-mesmo .direita > *{opacity:1;transform:none;transition-delay:.55s}
.escolha-titulo{font:400 .74rem var(--titulo);letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--tinta) 55%,transparent);margin-top:6px}
.segmentos{display:flex;border:1px solid color-mix(in srgb,var(--tinta) 35%,transparent);border-radius:99px;padding:3px;gap:3px}
.segmentos button{flex:1;border:0;background:transparent;border-radius:99px;padding:8px 6px;font:600 1rem var(--corpo);color:var(--tinta);cursor:pointer;transition:background .2s,color .2s}
.segmentos button[aria-pressed=true]{background:var(--vinho);color:#fbf1df}
:root[data-tema=escuro] .segmentos button[aria-pressed=true]{background:var(--ouro-claro);color:#1d1810}
.opcoes-linha{display:flex;flex-direction:column;gap:10px}
.opcao-linha{display:flex;align-items:center;gap:14px;text-align:left;border:1px solid color-mix(in srgb,var(--tinta) 25%,transparent);background:var(--papel2);border-radius:12px;padding:12px 14px;cursor:pointer;color:var(--tinta);transition:transform .2s,border-color .2s}
.opcao-linha:hover{transform:translateX(4px);border-color:var(--vinho)}
.opcao-linha svg{width:38px;height:38px;flex:none;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.opcao-linha b{display:block;font:600 1.15rem var(--corpo)}
.opcao-linha small{display:block;font-size:.95rem;color:color-mix(in srgb,var(--tinta) 65%,transparent)}
.opcao-linha.principal{border-width:1.5px;border-color:var(--vinho)}
.folha .chave-dificil{align-self:center;margin-top:4px;color:color-mix(in srgb,var(--tinta) 70%,transparent)}
.folha .recorde{text-align:center}
.folha .botao-comecar{margin-top:auto;align-self:stretch;background:var(--vinho);border-color:var(--vinho);color:#fbf1df}
:root[data-tema=escuro] .folha .botao-comecar{background:var(--ouro-claro);border-color:var(--ouro-claro);color:#1d1810}
.botao-comecar::before{border-color:rgba(255,255,255,.25)}

@media (max-width:700px){
  .aberto{--w:min(420px,94vw);--h:min(600px,86vh)}
  .aberto .folha.esquerda{display:none}
  .aberto .direita,.aberto .capa-giratoria{width:100%;border-radius:8px}
  .aberto.aberto-mesmo .capa-giratoria{transform:rotateY(-180deg);opacity:0;transition:transform .9s cubic-bezier(.6,.05,.2,1),opacity .3s .55s}
  .aberto .folha{padding:26px 22px 20px}
  .folha h2{font-size:1.55rem}
}

/* ---------- partida ---------- */
.jogo{width:100%;max-width:820px;margin:0 auto;padding:22px 18px 40px;gap:16px}
.relogio{position:relative;height:30px;border:1px solid var(--linha-forte);border-radius:99px;overflow:hidden;display:grid;place-items:center}
.relogio i{position:absolute;left:0;top:0;bottom:0;width:100%;background:color-mix(in srgb,var(--certo) 22%,transparent);transform-origin:left;transition:transform .25s linear}
.relogio.pouco i{background:color-mix(in srgb,#c0503f 28%,transparent)}
.relogio span{position:relative;font:600 1rem var(--titulo);letter-spacing:.1em}
.cartao{background:var(--papel);color:var(--tinta);border-radius:14px;padding:28px 30px;box-shadow:0 1px 0 var(--linha),0 24px 40px -28px var(--sombra);display:flex;flex-direction:column;gap:12px;text-align:center;
  border:1px solid var(--linha);background-image:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.5),transparent 70%)}
:root[data-tema=escuro] .cartao{background-image:none}
.cartao .rotulo{color:var(--vinho)}
:root[data-tema=escuro] .cartao .rotulo{color:var(--ouro-claro)}
.enunciado{font:600 clamp(1.35rem,3.2vw,1.75rem)/1.3 var(--corpo)}
.enunciado.versiculo{font:italic 400 clamp(1.4rem,3.4vw,1.85rem)/1.35 var(--corpo)}
.enunciado.versiculo::before{content:"“";color:var(--ouro);font-size:1.4em;line-height:0;vertical-align:-.25em;margin-right:2px}
.enunciado.versiculo::after{content:"”";color:var(--ouro);font-size:1.4em;line-height:0;vertical-align:-.25em;margin-left:2px}
.dicas{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;text-align:left}
.dicas li{display:flex;gap:10px;align-items:baseline;padding:10px 14px;border-radius:10px;background:var(--papel2);animation:entraDica .45s both}
.dicas li b{font:400 1.2rem var(--mao);color:var(--ouro);flex:none}
@keyframes entraDica{from{opacity:0;transform:translateY(-6px)}}
.botao-dica{align-self:center;border:1px dashed color-mix(in srgb,var(--tinta) 40%,transparent);background:transparent;color:var(--tinta);border-radius:99px;padding:6px 16px;cursor:pointer;font-weight:600}
.botao-dica small{font:400 1rem var(--mao);color:var(--apagado);margin-left:6px}
.alternativas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.alternativas.seis{grid-template-columns:repeat(3,1fr)}
.alternativas.dez{grid-template-columns:repeat(5,1fr)}
.alternativas.duas{grid-template-columns:1fr 1fr}
.alt{position:relative;border:1px solid var(--linha-forte);background:var(--fundo2);border-radius:12px;padding:14px 16px;font:600 1.12rem/1.25 var(--corpo);cursor:pointer;text-align:left;color:var(--texto);transition:transform .15s,border-color .2s,background .2s}
.alternativas.dez .alt,.alternativas.seis .alt{text-align:center;padding:12px 8px}
.alternativas.duas .alt{text-align:center;font-size:1.35rem;padding:22px 10px}
.alt:hover:not(:disabled){transform:translateY(-2px);border-color:var(--texto)}
.alt:disabled{cursor:default}
.alt.certa{background:color-mix(in srgb,var(--certo) 18%,var(--fundo2));border-color:var(--certo)}
.alt.errada{background:color-mix(in srgb,#c0503f 16%,var(--fundo2));border-color:#c0503f}
.alt.apagada{opacity:.45}
.alt kbd{font:400 .8rem var(--titulo);color:var(--apagado);margin-right:8px}
.retorno{border-left:3px solid var(--ouro);background:var(--fundo2);padding:16px 18px;border-radius:0 12px 12px 0;display:flex;flex-direction:column;gap:6px;animation:entraDica .35s both}
.retorno.acertou{border-left-color:var(--certo)}
.retorno.errou{border-left-color:#c0503f}
.retorno-titulo{font:600 1.25rem var(--corpo)}
.retorno.acertou .retorno-titulo{color:var(--certo)}
.retorno.errou .retorno-titulo{color:#c0503f}
.retorno-texto{color:var(--suave)}
.retorno-ref{font:400 1.15rem var(--mao);color:var(--ouro)}
.retorno .botao{align-self:flex-end;margin-top:6px}
.cartao.flash-certo{animation:flashCerto .5s}
.cartao.flash-errado{animation:flashErrado .45s}
@keyframes flashCerto{30%{box-shadow:0 0 0 4px color-mix(in srgb,var(--certo) 45%,transparent)}}
@keyframes flashErrado{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-3px)}}
.pontinhos{font:400 1.1rem var(--mao);color:var(--certo)}

@media (max-width:640px){
  .alternativas{grid-template-columns:1fr}
  .alternativas.seis{grid-template-columns:1fr 1fr}
  .alternativas.dez{grid-template-columns:1fr 1fr}
  .cartao{padding:22px 18px}
}

/* ---------- resultado ---------- */
.fim-pontos{font:400 1.4rem var(--corpo);color:var(--suave)}
.fim-pontos b{font:600 3rem var(--titulo);color:var(--texto)}
.fim-acoes{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.revisao-titulo{font:400 .82rem var(--titulo);letter-spacing:.24em;text-transform:uppercase;color:var(--suave);margin-top:18px}
.revisao{list-style:none;padding:0;width:100%;max-width:760px;display:flex;flex-direction:column;gap:10px;text-align:left}
.revisao li{border:1px solid var(--linha);border-radius:12px;padding:12px 16px;background:var(--fundo2);display:grid;grid-template-columns:28px 1fr;gap:4px 10px}
.revisao .marca-res{grid-row:1/4;font:600 1.2rem var(--titulo)}
.revisao li.ok .marca-res{color:var(--certo)}
.revisao li.nao .marca-res{color:#c0503f}
.revisao .p{font-weight:600}
.revisao .r{color:var(--suave);font-size:1.05rem}
.revisao .ref{font:400 1.05rem var(--mao);color:var(--ouro)}
.so-celular-info{display:none}
@media (max-width:700px){.so-celular-info{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.so-celular-info .folha-icone,.so-celular-info .ornamento{display:none}}
.aberto .capa-giratoria .verso{width:auto;left:0;right:0}

/* ================= versão 2: livros mais ricos, página de Bíblia, fitas e folhear ================= */
/* ---------- tela inicial mais convidativa ---------- */
.numeros{font:400 .78rem var(--titulo);letter-spacing:.18em;text-transform:uppercase;color:var(--suave)}
.numeros b{font:600 1.05rem var(--titulo);color:var(--vinho);letter-spacing:.04em}
:root[data-tema=escuro] .numeros b{color:var(--ouro-claro)}
.versiculo-dia{max-width:46ch;margin:4px auto 0;font:italic 400 1.2rem/1.35 var(--corpo);color:var(--suave);min-height:3.3em}
.versiculo-dia span::before{content:"“"}.versiculo-dia span::after{content:"”"}
.versiculo-dia cite{display:block;font:400 1.05rem var(--mao);color:var(--ouro);font-style:normal;margin-top:2px}
.versiculo-dia.entra{animation:versoEntra 1.1s ease both}
@keyframes versoEntra{from{opacity:0;filter:blur(3px);transform:translateY(4px)}}

/* ---------- escolha da Bíblia (canto de cima, pequeno) ---------- */
.tipo-biblia{position:relative;display:flex;align-items:center;gap:2px;font-size:.82rem;color:var(--apagado)}
.tipo-rotulo{font:400 .66rem var(--titulo);letter-spacing:.2em;text-transform:uppercase;margin-right:6px}
.tipo-biblia button{border:0;background:none;padding:3px 7px;border-radius:99px;cursor:pointer;color:var(--apagado);font:600 .86rem var(--corpo)}
.tipo-biblia button[aria-pressed=true]{background:var(--linha);color:var(--texto)}
.tipo-dica{position:absolute;left:0;top:calc(100% + 8px);z-index:30;width:250px;font:400 .88rem/1.3 var(--corpo);background:var(--texto);color:var(--fundo);padding:7px 10px;border-radius:8px;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .2s,transform .2s}
@media (hover:hover){.tipo-biblia:hover .tipo-dica{opacity:1;transform:none}}

/* ---------- livros da estante ---------- */
.estante{perspective:1200px}
.livro{animation:livroEntra .8s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(var(--k,0) * .09s + .15s);transform-style:preserve-3d;transition:transform .35s cubic-bezier(.3,1.4,.5,1),filter .3s}
@keyframes livroEntra{from{opacity:0;transform:translateY(40px) rotateX(-20deg)}}
.livro:hover{transform:translateY(-16px) rotateY(-8deg) scale(1.03);filter:drop-shadow(0 18px 18px rgba(30,20,10,.28))}
.capa-livro{overflow:hidden;background-image:
  linear-gradient(90deg,rgba(0,0,0,.32),rgba(0,0,0,0) 13%),
  radial-gradient(ellipse at 55% 25%,rgba(255,255,255,.16),transparent 60%),
  repeating-radial-gradient(circle at 30% 40%,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),
  linear-gradient(160deg,rgba(255,255,255,.06),rgba(0,0,0,.18))}
/* costura dourada na lombada */
.capa-livro{--costura:repeating-linear-gradient(transparent 0 30px,rgba(228,201,131,.55) 30px 32px,transparent 32px 36px,rgba(228,201,131,.55) 36px 38px)}
.capa-livro::after{background:repeating-linear-gradient(#f4e7c6 0 2px,#c9a95c 2px 3px)}
.cantos{position:absolute;inset:0;pointer-events:none;
  background:
   linear-gradient(135deg,var(--ouro) 0 14px,transparent 14px) top right/22px 22px no-repeat,
   linear-gradient(45deg,var(--ouro) 0 14px,transparent 14px) bottom right/22px 22px no-repeat;
  -webkit-mask:linear-gradient(#000,#000);opacity:.85;transform:scaleX(-1)}
.capa-livro .cantos{transform:none;background:
   linear-gradient(225deg,var(--ouro-claro) 0 13px,transparent 13.5px) top right/24px 24px no-repeat,
   linear-gradient(315deg,var(--ouro-claro) 0 13px,transparent 13.5px) bottom right/24px 24px no-repeat,
   var(--costura) left 7px top 0/4px 100% no-repeat;opacity:.75}
.brilho{position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,250,230,.28),transparent);transform:skewX(-14deg);pointer-events:none;opacity:0}
.livro:hover .brilho{animation:brilhoPassa .9s ease forwards}
@keyframes brilhoPassa{0%{left:-60%;opacity:1}100%{left:130%;opacity:1}}
.capa-titulo{background:linear-gradient(180deg,#fff3cf,#e2c278 55%,#b8913a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.45))}
.capa-icone svg{filter:drop-shadow(0 1px 0 rgba(0,0,0,.4))}
/* fita marcadora saindo por baixo do livro */
.fita-livro{position:absolute;bottom:-26px;left:62%;width:12px;height:38px;background:linear-gradient(90deg,#9b2232,#c0394a 50%,#9b2232);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);transform-origin:top center;z-index:-1;transition:transform .5s}
.livro:hover .fita-livro{animation:fitaBalanca 1.4s ease-in-out}
@keyframes fitaBalanca{25%{transform:rotate(9deg)}55%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}}
.livro.principal .capa-livro{box-shadow:inset 6px 0 0 rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.06),6px 8px 0 -2px rgba(30,20,10,.25),0 18px 30px -16px rgba(0,0,0,.6),0 0 0 1px rgba(228,201,131,.25),0 0 46px -6px rgba(228,180,90,.55)}
.livro.principal{animation:livroEntra .8s cubic-bezier(.3,1.3,.5,1) both,flutua 4.5s ease-in-out 1.2s infinite}
.livro.principal:hover{animation:none}
@keyframes flutua{50%{transform:translateY(-6px)}}
.comece{position:absolute;right:calc(100% + 6px);top:-6px;font:400 1.25rem var(--mao);color:var(--vinho);white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none;animation:livroEntra .8s 1.1s both}
:root[data-tema=escuro] .comece{color:var(--ouro-claro)}
.comece svg{width:56px;height:38px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;margin-right:-14px}
.capa-recorde{bottom:-46px}
@media (max-width:760px){.comece{right:auto;left:calc(100% + 4px);top:20px;align-items:flex-start}.comece svg{transform:scaleX(-1);margin:0 0 0 -14px}.fita-livro{bottom:-20px;height:30px}}

/* ---------- página com cara de Bíblia ---------- */
.aberto .folha{--papel-txt:repeating-radial-gradient(circle at 20% 30%,rgba(120,90,40,.035) 0 1px,transparent 1px 4px);padding:26px 30px 34px}
.aberto .direita{background-image:linear-gradient(90deg,rgba(0,0,0,.16),transparent 9%),var(--papel-txt)}
.capa-giratoria .verso{background-image:linear-gradient(270deg,rgba(0,0,0,.16),transparent 9%),var(--papel-txt)}
.cabeco{display:flex;justify-content:space-between;gap:10px;font:400 .66rem var(--titulo);letter-spacing:.24em;text-transform:uppercase;color:color-mix(in srgb,var(--tinta) 55%,transparent);border-bottom:3px double color-mix(in srgb,var(--tinta) 30%,transparent);padding-bottom:6px;margin-bottom:6px}
.pagina-num{position:absolute;bottom:10px;left:0;right:0;text-align:center;font:400 .8rem var(--titulo);color:color-mix(in srgb,var(--tinta) 45%,transparent)}
.capitular-p::first-letter{float:left;font:600 3.1em/.8 var(--titulo);color:var(--vinho);margin:4px 8px 0 0}
:root[data-tema=escuro] .capitular-p::first-letter{color:var(--ouro-claro)}
.capitulo{font:600 .8rem var(--titulo);letter-spacing:.26em;text-transform:uppercase;color:var(--vinho);display:flex;align-items:center;gap:10px;margin-top:4px}
:root[data-tema=escuro] .capitulo{color:var(--ouro-claro)}
.capitulo::before,.capitulo::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--tinta) 35%,transparent),transparent)}
.leitura{font:italic 400 1.12rem/1.35 var(--corpo);color:color-mix(in srgb,var(--tinta) 80%,transparent)}
.capitular{font:600 1.9em/.9 var(--titulo);color:var(--vinho);font-style:normal;float:left;margin:2px 4px 0 0}
:root[data-tema=escuro] .capitular{color:var(--ouro-claro)}
.versiculos{list-style:none;padding:0;display:flex;flex-direction:column;gap:2px}
.versiculos button{width:100%;text-align:left;border:0;background:none;padding:6px 10px 6px 4px;border-radius:6px;cursor:pointer;color:var(--tinta);font:400 1.12rem/1.35 var(--corpo);transition:background .2s,color .2s;position:relative}
.versiculos button:hover{background:color-mix(in srgb,var(--ouro) 12%,transparent)}
.versiculos sup{font:600 .7em var(--titulo);color:var(--ouro);margin-right:5px;vertical-align:.45em}
.versiculos b{font-weight:600}
.versiculos button[aria-pressed=true]{color:var(--vinho)}
:root[data-tema=escuro] .versiculos button[aria-pressed=true]{color:#f0b4a8}
.versiculos button[aria-pressed=true]::after{content:"❧";position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--vinho);font-size:1.1rem}
:root[data-tema=escuro] .versiculos button[aria-pressed=true]::after{color:#f0b4a8}
/* fitas marcadoras para a dificuldade */
.fitas{display:flex;justify-content:center;gap:22px;border-top:2px solid color-mix(in srgb,var(--tinta) 25%,transparent);padding-top:0;margin:2px 10px 0}
.fita{border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;color:color-mix(in srgb,var(--tinta) 60%,transparent);font:600 .98rem var(--corpo)}
.fita i{display:block;width:20px;height:26px;clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);transition:height .35s cubic-bezier(.3,1.5,.5,1),filter .2s;background:var(--cor-fita)}
.fita-facil{--cor-fita:linear-gradient(90deg,#55733b,#7a9a58,#55733b)}
.fita-medio{--cor-fita:linear-gradient(90deg,#a8822f,#d4b066,#a8822f)}
.fita-dificil{--cor-fita:linear-gradient(90deg,#8e3b31,#b9584a,#8e3b31)}
.fita:hover i{height:34px}
.fita[aria-checked=true] i{height:48px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
.fita[aria-checked=true]{color:var(--tinta)}
.fitas-dica{text-align:center;font:italic 400 1rem var(--corpo);color:color-mix(in srgb,var(--tinta) 60%,transparent);min-height:1.3em}
/* botão de começar bem chamativo */
.botao-comecar{margin-top:auto;position:relative;display:flex;flex-direction:column;align-items:center;gap:0;border:0;cursor:pointer;padding:14px 20px 12px;border-radius:12px;color:#fbf1df;
  background:linear-gradient(180deg,#9a3a48,#6e2532);box-shadow:inset 0 0 0 2px rgba(228,201,131,.75),inset 0 0 0 5px #7a2e3a,inset 0 0 0 6px rgba(228,201,131,.45),0 10px 22px -10px rgba(110,37,50,.9);
  animation:chama 2.4s ease-in-out infinite;transition:transform .15s}
.botao-comecar span{font:600 1.55rem var(--titulo);letter-spacing:.08em}
.botao-comecar span::after{content:" ▸";font-size:.8em}
.botao-comecar small{font:400 1.02rem var(--mao);color:var(--ouro-claro)}
.botao-comecar:hover{transform:translateY(-2px) scale(1.02)}
.botao-comecar:active{transform:translateY(1px) scale(.99)}
@keyframes chama{50%{box-shadow:inset 0 0 0 2px rgba(228,201,131,.75),inset 0 0 0 5px #7a2e3a,inset 0 0 0 6px rgba(228,201,131,.45),0 10px 30px -6px rgba(176,70,80,.85)}}
:root[data-tema=escuro] .botao-comecar{background:linear-gradient(180deg,#e9cf8c,#c49a45);color:#2a1d10;box-shadow:inset 0 0 0 2px rgba(60,40,15,.45),0 10px 22px -10px rgba(228,201,131,.6)}
:root[data-tema=escuro] .botao-comecar small{color:#5a3e18}
.folha .recorde{margin:0;font-size:1.15rem;min-height:0}
.folha .recorde:empty{display:none}
/* folhas que viram depois da capa */
.folheio{position:absolute;top:4px;bottom:4px;right:2px;width:calc(50% - 2px);pointer-events:none;transform-style:preserve-3d}
.folheio i{position:absolute;inset:0;background:var(--papel);border-radius:0 6px 6px 0;transform-origin:left center;box-shadow:inset 8px 0 14px -10px rgba(0,0,0,.4);opacity:0}
.aberto.aberto-mesmo .folheio i{animation:folheia .62s cubic-bezier(.5,.05,.3,1) both;animation-delay:calc(.3s + var(--d) * .15s)}
@keyframes folheia{0%{opacity:1;transform:rotateY(0)}85%{opacity:1}100%{opacity:0;transform:rotateY(-178deg)}}
.aberto.aberto-mesmo{animation:respira .9s .55s ease-out}
@keyframes respira{40%{transform:scale(1.012)}}
/* celular: uma página só, com o resumo do modo no alto */
@media (max-width:700px){
  .folheio{width:100%;right:0;left:0}
  .so-celular-info{display:grid!important;grid-template-columns:48px 1fr;gap:2px 12px;align-items:center}
  .so-celular-info .cabeco,.so-celular-info .pagina-num,.so-celular-info .ornamento{display:none}
  .so-celular-info .folha-icone{display:block!important;grid-row:1/3}
  .so-celular-info .folha-icone svg{width:46px;height:46px}
  .so-celular-info h2{font-size:1.4rem}
  .so-celular-info p{grid-column:1/-1;font-size:1.02rem}
  .aberto .folha{padding:20px 18px 30px;gap:10px}
  .direita > .cabeco{order:-1}
  .versiculos button{font-size:1.05rem;padding:5px 26px 5px 2px}
  .botao-comecar span{font-size:1.35rem}
}
@media (prefers-reduced-motion:reduce){.livro,.livro.principal,.comece,.versiculo-dia.entra,.botao-comecar{animation:none}.aberto.aberto-mesmo .folheio i{animation:none}}

/* ajustes: a página cabe na tela (rola por dentro se precisar), o número da página fica no fim e o X sai para fora da página */
.aberto{--h:min(620px,90vh)}
.aberto .folha{gap:9px;padding:24px 28px 16px;scrollbar-width:thin}
.aberto .direita .pagina-num,.capa-giratoria .verso .pagina-num{position:static;margin-top:4px;flex:none}
.capa-giratoria .verso .ornamento{margin-top:auto}
.aberto .direita .botao-comecar{margin-top:auto;flex:none}
.capitulo{margin-top:2px}
.fechar-livro{top:-14px;right:-14px;background:var(--papel);box-shadow:0 4px 12px -4px rgba(0,0,0,.45);border-color:rgba(0,0,0,.12)}
@media (max-width:700px){
  .aberto{--h:min(720px,88vh)}
  .fechar-livro{top:-12px;right:-6px}
  .aberto .folha{padding:18px 16px 12px;gap:8px}
  .so-celular-info p{display:none}
  .so-celular-info{margin-bottom:-2px}
  .leitura{font-size:1.02rem}
  .fitas-dica{font-size:.95rem}
  .comece{left:50%;right:auto;top:-40px;transform:translateX(-50%);flex-direction:row;align-items:center;gap:2px}
  .comece svg{width:30px;height:24px;margin:0;transform:rotate(70deg)}
  .estante{padding-top:50px}
}
.verso-enfeite{margin:auto 6px 0;padding:14px 4px 0;border-top:1px solid color-mix(in srgb,var(--tinta) 18%,transparent);text-align:center;font:italic 400 1.2rem/1.35 var(--corpo);color:color-mix(in srgb,var(--tinta) 70%,transparent)}
.verso-enfeite::before{content:"✠";display:block;font-style:normal;color:var(--ouro);font-size:1.1rem;margin-bottom:4px}
.verso-enfeite cite{display:block;font:400 1.05rem var(--mao);font-style:normal;color:var(--ouro);margin-top:4px}
.capa-giratoria .verso .ornamento{margin-top:10px}
.so-celular-info .verso-enfeite{display:none}


/* ================= versão 3 ================= */
/* rodapé bem mais longe dos livros */
.palco{min-height:calc(100vh - 20px);min-height:calc(100svh - 20px)}
.rodape{margin-top:110px}

/* configurações: escolha de tema com três opções */
.cfg{width:300px}
.cfg-temas{cursor:default}
.temas{display:flex;border:1px solid var(--linha-forte);border-radius:99px;padding:2px;gap:2px}
.temas button{border:0;background:none;border-radius:99px;padding:3px 9px;font:600 .9rem var(--corpo);cursor:pointer;color:var(--suave)}
.temas button[aria-pressed=true]{background:var(--texto);color:var(--fundo)}

/* ---------- a página do livro cresce/encolhe junto (tudo em em) e nunca rola ---------- */
.aberto .folha{overflow:hidden;font-size:16px;gap:.6em;padding:1.6em 1.8em 1em}
.aberto .cabeco{font-size:.66em}
.aberto .folha h2{font-size:1.9em}
.aberto .folha p,.aberto .capitular-p{font-size:1.1em}
.aberto .capitulo{font-size:.78em}
.aberto .leitura{font-size:1.08em}
.aberto .folha-icone svg{width:4.2em;height:4.2em}
.aberto .ornamento{font-size:1.1em}
.aberto .verso-enfeite{font-size:1.15em}
.aberto .recorde{font-size:1.1em}
.aberto .pagina-num{font-size:.78em}
.aberto .fitas-dica{font-size:1em}
.aberto .fita{font-size:.98em}
.aberto .fita i{width:1.25em;height:1.6em}
.aberto .fita:hover i{height:2.1em}
.aberto .fita[aria-checked=true] i{height:3em}
.aberto .botao-comecar{padding:.85em 1.2em .7em}
.aberto .botao-comecar span{font-size:1.55em}
.aberto .botao-comecar small{font-size:1em}
@media (max-width:700px){.aberto .so-celular-info h2{font-size:1.4em}.aberto .so-celular-info .folha-icone svg{width:2.9em;height:2.9em}}

/* ---------- escolhas em cartões: dá para ver que é para clicar ---------- */
.escolhas{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em}
.escolhas.n2{grid-template-columns:1fr 1fr}
.escolha{position:relative;display:flex;flex-direction:column;align-items:center;gap:.1em;text-align:center;cursor:pointer;color:var(--tinta);font:inherit;
  border:1px dashed color-mix(in srgb,var(--tinta) 38%,transparent);background:color-mix(in srgb,var(--papel2) 70%,transparent);border-radius:.7em;padding:.9em .5em .7em;
  transition:transform .18s,border-color .2s,background .2s,box-shadow .2s}
.escolha:hover{transform:translateY(-2px);border-style:solid;border-color:var(--ouro);box-shadow:0 6px 14px -8px rgba(80,50,10,.35)}
.escolha sup{position:absolute;top:.35em;left:.55em;font:600 .72em var(--titulo);color:var(--ouro)}
.escolha b{font:600 1.08em/1.1 var(--corpo)}
.escolha small{font:italic 400 .88em/1.15 var(--corpo);color:color-mix(in srgb,var(--tinta) 62%,transparent)}
.escolha .marca{width:1.05em;height:1.05em;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--tinta) 45%,transparent);margin-bottom:.3em;display:grid;place-items:center;transition:border-color .2s}
.escolha .marca::after{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--vinho);transform:scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.escolha[aria-checked=true]{border:1.5px solid var(--vinho);background:color-mix(in srgb,var(--vinho) 9%,var(--papel));color:var(--vinho)}
.escolha[aria-checked=true] .marca{border-color:var(--vinho)}
.escolha[aria-checked=true] .marca::after{transform:scale(1)}
:root[data-tema=escuro] .escolha[aria-checked=true]{border-color:#f0b4a8;color:#f0b4a8;background:rgba(240,180,168,.08)}
:root[data-tema=escuro] .escolha .marca::after{background:#f0b4a8}
:root[data-tema=escuro] .escolha[aria-checked=true] .marca{border-color:#f0b4a8}
.fitas{margin-top:.2em}

/* ---------- abrir na ordem certa: capa → folhas → página das informações ---------- */
.capa-giratoria{z-index:10;transition:transform .8s cubic-bezier(.55,.05,.25,1)}
.aberto.capa-atras .capa-giratoria{z-index:1}
.capa-giratoria .guarda{transform:rotateY(180deg);border-radius:8px 0 0 8px;background:var(--papel2);
  background-image:radial-gradient(circle at 30% 30%,rgba(140,106,42,.18),transparent 40%),radial-gradient(circle at 70% 75%,rgba(122,46,58,.14),transparent 45%),repeating-linear-gradient(45deg,rgba(140,106,42,.06) 0 6px,transparent 6px 12px);
  box-shadow:inset -10px 0 18px -12px rgba(0,0,0,.45)}
.pagina-vira{position:absolute;top:3px;bottom:3px;right:3px;width:calc(50% - 3px);transform-origin:left center;transform-style:preserve-3d;z-index:calc(8 - var(--d));
  transition:transform .62s cubic-bezier(.5,.05,.3,1)}
.pagina-vira.vira{transform:rotateY(-180deg)}
.pagina-vira.passou{z-index:calc(12 + var(--d))}
.pagina-vira > div{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--papel)}
.pagina-vira .frente{border-radius:0 7px 7px 0;background-image:linear-gradient(90deg,rgba(0,0,0,.12),transparent 10%),linear-gradient(270deg,rgba(0,0,0,.05),transparent 6%)}
.pagina-vira .tras{transform:rotateY(180deg);border-radius:7px 0 0 7px;background-image:linear-gradient(270deg,rgba(0,0,0,.14),transparent 9%)}
.pagina-vira .tras.folha{width:auto;position:absolute;inset:0;display:flex;flex-direction:column}
.pagina-vira:last-of-type .tras{top:-3px;bottom:-3px;left:-3px}
.aberto.aberto-mesmo .direita > *{opacity:1;transform:none;transition-delay:0s}
.aberto .direita > *{opacity:1;transform:none}
.fechar-livro{opacity:0;transition:opacity .3s}
.aberto.pronto .fechar-livro{opacity:1}
.aberto.fechando .capa-giratoria{transition-duration:.55s}
.aberto.fechando .pagina-vira{transition-duration:.35s}
.aberto.aberto-mesmo{animation:none}
.aberto.pronto{animation:respira .7s ease-out}
.botao-comecar{opacity:1}
@media (max-width:700px){
  .pagina-vira{width:calc(100% - 6px)}
  .pagina-vira.vira{opacity:0;transition:transform .62s cubic-bezier(.5,.05,.3,1),opacity .25s .3s}
}

/* ---------- Começar: zoom no livro e luz dourada até virar o quiz ---------- */
.luz{position:fixed;left:50%;top:50%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;border-radius:50%;pointer-events:none;z-index:20;
  background:radial-gradient(circle,var(--fundo) 0 38%,color-mix(in srgb,var(--ouro-claro) 55%,var(--fundo)) 52%,transparent 70%);transform:scale(0);opacity:0}
.camada.entrando .luz{transition:transform .75s cubic-bezier(.6,0,.3,1),opacity .2s;transform:scale(1.6);opacity:1}
.camada.entrando .aberto{transition:transform .75s cubic-bezier(.6,0,.3,1);transform:scale(2.6)}
.camada.entrando .fechar-livro{opacity:0}
.camada.some{transition:opacity .55s ease;opacity:0}
.jogo.chegando,.tela.chegando{animation:chega .6s cubic-bezier(.2,.8,.3,1) both}
@keyframes chega{from{opacity:0;transform:scale(.96);filter:blur(4px)}}

/* ================= tema ornamental: pergaminho, ouro, folhas e luz do alto ================= */
:root[data-tema=ornamental]{
  --fundo:#ecdfbf; --fundo2:#f7eed8; --texto:#2b1f12; --suave:#5d4a2e; --apagado:#8a7352;
  --linha:rgba(90,60,20,.18); --linha-forte:rgba(90,60,20,.5); --sombra:rgba(70,45,15,.25);
  --c1:#4f6b3a; --c2:#7a2e3a; --c3:#9c7424; --c5:#5b6f8a; --certo:#4f7a33;
  --vinho:#6d2430; --ouro:#9c7424; --ouro-claro:#e2c27a; --papel:#fbf3df; --papel2:#f1e4c4; --tinta:#2b1f12; color-scheme:light}
:root[data-tema=ornamental] body{background:
  radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(110,75,25,.22) 100%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%238c6a2a' stroke-width='1' opacity='.13'%3E%3Cpath d='M60 48v24M48 60h24'/%3E%3Cpath d='M60 44c4 4 4 8 0 10c-4-2-4-6 0-10zM60 76c4-4 4-8 0-10c-4 2-4 6 0 10zM44 60c4 4 8 4 10 0c-2-4-6-4-10 0zM76 60c-4 4-8 4-10 0c2-4 6-4 10 0z'/%3E%3Cpath d='M0 0c8 6 16 6 24 0M96 120c8-6 16-6 24 0' /%3E%3C/g%3E%3C/svg%3E"),
  linear-gradient(#efe3c5,#e6d6b0)}
:root[data-tema=ornamental] body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:repeating-conic-gradient(from 180deg at 50% -8%,rgba(214,170,80,.10) 0 3deg,transparent 3deg 9deg);
  -webkit-mask:linear-gradient(#000,transparent 65%);mask:linear-gradient(#000,transparent 65%)}
:root[data-tema=ornamental] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.75;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg transform=''%3E%3Cg fill='none' stroke='%238c6a2a' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 232 C14 130 80 46 232 8'/%3E%3Cpath d='M8 232 C40 196 54 160 58 118'/%3E%3Cpath d='M8 232 C46 214 82 210 122 196'/%3E%3Cpath d='M36 168 c-18-8-22-26-10-36 c10 12 14 24 10 36z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M64 122 c-16-12-16-30-2-38 c8 14 10 26 2 38z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M104 80 c-12-16-8-32 8-36 c4 16 2 28-8 36z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M150 46 c-8-16-2-30 14-30 c0 16-4 26-14 30z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M30 196 c18 6 36-2 42-16 c-16-2-30 4-42 16z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M72 168 c20 4 36-6 38-22 c-16 0-30 8-38 22z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M58 118 c-14 4-22 16-20 30'/%3E%3Cpath d='M122 196 c4-14 16-22 30-20'/%3E%3Ccircle cx='232' cy='8' r='3' fill='%238c6a2a'/%3E%3Cpath d='M24 24v22M13 35h22' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") top 64px left 6px/170px 170px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg transform='translate(240 0) scale(-1 1)'%3E%3Cg fill='none' stroke='%238c6a2a' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 232 C14 130 80 46 232 8'/%3E%3Cpath d='M8 232 C40 196 54 160 58 118'/%3E%3Cpath d='M8 232 C46 214 82 210 122 196'/%3E%3Cpath d='M36 168 c-18-8-22-26-10-36 c10 12 14 24 10 36z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M64 122 c-16-12-16-30-2-38 c8 14 10 26 2 38z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M104 80 c-12-16-8-32 8-36 c4 16 2 28-8 36z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M150 46 c-8-16-2-30 14-30 c0 16-4 26-14 30z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M30 196 c18 6 36-2 42-16 c-16-2-30 4-42 16z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M72 168 c20 4 36-6 38-22 c-16 0-30 8-38 22z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M58 118 c-14 4-22 16-20 30'/%3E%3Cpath d='M122 196 c4-14 16-22 30-20'/%3E%3Ccircle cx='232' cy='8' r='3' fill='%238c6a2a'/%3E%3Cpath d='M24 24v22M13 35h22' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") top 64px right 6px/170px 170px no-repeat,
             url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg transform='translate(0 240) scale(1 -1)'%3E%3Cg fill='none' stroke='%238c6a2a' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 232 C14 130 80 46 232 8'/%3E%3Cpath d='M8 232 C40 196 54 160 58 118'/%3E%3Cpath d='M8 232 C46 214 82 210 122 196'/%3E%3Cpath d='M36 168 c-18-8-22-26-10-36 c10 12 14 24 10 36z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M64 122 c-16-12-16-30-2-38 c8 14 10 26 2 38z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M104 80 c-12-16-8-32 8-36 c4 16 2 28-8 36z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M150 46 c-8-16-2-30 14-30 c0 16-4 26-14 30z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M30 196 c18 6 36-2 42-16 c-16-2-30 4-42 16z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M72 168 c20 4 36-6 38-22 c-16 0-30 8-38 22z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M58 118 c-14 4-22 16-20 30'/%3E%3Cpath d='M122 196 c4-14 16-22 30-20'/%3E%3Ccircle cx='232' cy='8' r='3' fill='%238c6a2a'/%3E%3Cpath d='M24 24v22M13 35h22' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") bottom 6px left 6px/170px 170px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg transform='translate(240 240) scale(-1 -1)'%3E%3Cg fill='none' stroke='%238c6a2a' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 232 C14 130 80 46 232 8'/%3E%3Cpath d='M8 232 C40 196 54 160 58 118'/%3E%3Cpath d='M8 232 C46 214 82 210 122 196'/%3E%3Cpath d='M36 168 c-18-8-22-26-10-36 c10 12 14 24 10 36z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M64 122 c-16-12-16-30-2-38 c8 14 10 26 2 38z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M104 80 c-12-16-8-32 8-36 c4 16 2 28-8 36z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M150 46 c-8-16-2-30 14-30 c0 16-4 26-14 30z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M30 196 c18 6 36-2 42-16 c-16-2-30 4-42 16z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M72 168 c20 4 36-6 38-22 c-16 0-30 8-38 22z' fill='%238c6a2a' fill-opacity='.18'/%3E%3Cpath d='M58 118 c-14 4-22 16-20 30'/%3E%3Cpath d='M122 196 c4-14 16-22 30-20'/%3E%3Ccircle cx='232' cy='8' r='3' fill='%238c6a2a'/%3E%3Cpath d='M24 24v22M13 35h22' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") bottom 6px right 6px/170px 170px no-repeat}
:root[data-tema=ornamental] .topo,:root[data-tema=ornamental] .tela{position:relative;z-index:1}
:root[data-tema=ornamental] .topo{border-bottom:3px double rgba(140,106,42,.5)}
:root[data-tema=ornamental] .inicio h1{text-shadow:0 2px 0 rgba(255,245,215,.8),0 0 30px rgba(214,170,80,.45)}
:root[data-tema=ornamental] .inicio h1 em{color:#6d2430}
:root[data-tema=ornamental] .rotulo::before,:root[data-tema=ornamental] .rotulo::after{content:" ❦ ";color:var(--ouro);letter-spacing:0}
:root[data-tema=ornamental] .estante::after{background:linear-gradient(#7a5332,#4f3420);box-shadow:0 2px 0 rgba(226,194,122,.6) inset,0 10px 18px -8px rgba(40,25,10,.55)}
:root[data-tema=ornamental] .cartao,:root[data-tema=ornamental] .alt,:root[data-tema=ornamental] .retorno,:root[data-tema=ornamental] .revisao li{background-color:#fbf3df;border-color:rgba(140,106,42,.45)}
:root[data-tema=ornamental] .cartao{box-shadow:inset 0 0 0 4px #fbf3df,inset 0 0 0 5px rgba(140,106,42,.45),0 24px 40px -28px rgba(70,45,15,.5)}
:root[data-tema=ornamental] .alt:hover:not(:disabled){border-color:var(--ouro)}
:root[data-tema=ornamental] .botao-principal{background:#6d2430;border-color:#6d2430;color:#fbf1df}
:root[data-tema=ornamental] .rodape{border-top:3px double rgba(140,106,42,.5)}
:root[data-tema=ornamental] .camada-fundo{background:rgba(60,40,15,.45)}
@media (max-width:700px){:root[data-tema=ornamental] body::after{background-size:100px 100px;opacity:.6}}
.camada.entrando .luz{transition:transform .75s cubic-bezier(.6,0,.3,1) .22s,opacity .25s .22s}

/* "Tem certeza?" ao sair de uma partida */
.confirmar{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px}
.confirmar-fundo{position:absolute;inset:0;background:rgba(20,16,10,.45);backdrop-filter:blur(2px);animation:aparece .2s both}
.confirmar-caixa{position:relative;width:min(400px,100%);background:var(--papel);color:var(--tinta);border-radius:14px;padding:24px 24px 20px;text-align:center;
  box-shadow:inset 0 0 0 4px var(--papel),inset 0 0 0 5px color-mix(in srgb,var(--ouro) 55%,transparent),0 30px 60px -20px rgba(0,0,0,.55);animation:confirmaEntra .3s cubic-bezier(.3,1.4,.5,1) both}
.confirmar-caixa h2{font:600 1.35rem var(--titulo);color:var(--vinho);margin-bottom:6px}
:root[data-tema=escuro] .confirmar-caixa h2{color:var(--ouro-claro)}
.confirmar-caixa p{color:color-mix(in srgb,var(--tinta) 75%,transparent);margin-bottom:16px}
.confirmar-acoes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@keyframes aparece{from{opacity:0}}
@keyframes confirmaEntra{from{opacity:0;transform:scale(.9) translateY(8px)}}


/* ================= versão 4 ================= */
.rodape{margin-top:200px}
/* tema ornamental: o degradê fica preso na janela (antes ele se repetia a cada tela e fazia um "corte" ao rolar) */
:root[data-tema=ornamental]{background:#e9dbb8}
:root[data-tema=ornamental]::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(110,75,25,.22) 100%),linear-gradient(#efe3c5,#e6d6b0)}
:root[data-tema=ornamental] body{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%238c6a2a' stroke-width='1' opacity='.13'%3E%3Cpath d='M60 48v24M48 60h24'/%3E%3Cpath d='M60 44c4 4 4 8 0 10c-4-2-4-6 0-10zM60 76c4-4 4-8 0-10c-4 2-4 6 0 10zM44 60c4 4 8 4 10 0c-2-4-6-4-10 0zM76 60c-4 4-8 4-10 0c2-4 6-4 10 0z'/%3E%3Cpath d='M0 0c8 6 16 6 24 0M96 120c8-6 16-6 24 0' /%3E%3C/g%3E%3C/svg%3E");background-color:transparent}
/* o topo (e a janela de configurações) fica por cima do quiz */
:root[data-tema=ornamental] .topo{z-index:5}
/* certo e errado também no ornamental */
:root[data-tema=ornamental] .alt.certa{background:color-mix(in srgb,#4f7a33 20%,#fbf3df);border-color:#4f7a33}
:root[data-tema=ornamental] .alt.errada{background:color-mix(in srgb,#b0453a 20%,#fbf3df);border-color:#b0453a}
:root[data-tema=ornamental] .alt.apagada{opacity:.5}

/* ---------- a partida mais cheia de vida ---------- */
.jogo{padding-top:clamp(18px,4vh,40px)}
.caminho{list-style:none;padding:0;display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;position:relative}
.caminho::before{content:"";position:absolute;left:10%;right:10%;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--linha-forte),transparent);z-index:-1}
.caminho li{width:16px;height:16px;border-radius:50%;background:var(--fundo2);border:1.5px solid var(--linha-forte);transition:transform .3s,background .3s}
.caminho li.ok{background:var(--certo);border-color:var(--certo)}
.caminho li.nao{background:#c0503f;border-color:#c0503f}
.caminho li.agora{border-color:var(--ouro);background:var(--ouro-claro);transform:scale(1.3);box-shadow:0 0 0 4px color-mix(in srgb,var(--ouro) 25%,transparent);animation:pulsaMedalha 1.6s ease-in-out infinite}
@keyframes pulsaMedalha{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--ouro) 10%,transparent)}}
.cartao{position:relative;padding-top:34px}
.cartao-icone{align-self:center;width:62px;height:62px;margin:-58px 0 2px;border-radius:50%;display:grid;place-items:center;background:var(--papel);border:1.5px solid color-mix(in srgb,var(--ouro) 70%,transparent);box-shadow:0 6px 14px -8px rgba(60,40,10,.45)}
.cartao-icone svg{width:38px;height:38px;fill:none;stroke:var(--vinho);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
:root[data-tema=escuro] .cartao-icone svg{stroke:var(--ouro-claro)}
.caminho + .cartao{margin-top:30px}
.rapidez{position:relative;height:22px;border-radius:99px;overflow:hidden;border:1px solid color-mix(in srgb,var(--ouro) 45%,transparent);display:grid;place-items:center}
.rapidez i{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--ouro-claro) 70%,transparent),color-mix(in srgb,var(--ouro) 45%,transparent));transform-origin:left}
.rapidez span{position:relative;font:400 1rem var(--mao);color:var(--suave)}
.sequencia{min-height:1.4em;text-align:center;font:400 1.35rem var(--mao);color:var(--vinho);margin:-4px 0}
:root[data-tema=escuro] .sequencia{color:var(--ouro-claro)}
.sequencia.pula{animation:pula .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pula{from{transform:scale(.6);opacity:0}}
.ornato-jogo{text-align:center;font-size:2rem;color:color-mix(in srgb,var(--ouro) 55%,transparent);margin-top:auto;padding-top:10px}
.jogo{min-height:calc(100vh - 60px);min-height:calc(100svh - 60px)}

/* escolhas: linhas de versículo (número dourado, título, descrição em itálico) que continuam com cara de botão */
.escolhas,.escolhas.n2{display:flex;flex-direction:column;gap:.2em;grid-template-columns:none}
.escolha{display:grid;grid-template-columns:1.7em 1fr auto;align-items:center;gap:.2em .5em;text-align:left;border:0;border-bottom:1px solid color-mix(in srgb,var(--tinta) 14%,transparent);
  border-radius:.35em .35em 0 0;background:transparent;padding:.55em .5em .55em .3em;position:relative}
.escolha:hover{transform:none;background:color-mix(in srgb,var(--ouro) 11%,transparent);box-shadow:none;border-color:color-mix(in srgb,var(--ouro) 60%,transparent)}
.escolha sup{position:static;font:600 1.55em/1 var(--titulo);color:var(--ouro);text-align:center;vertical-align:baseline}
.escolha-txt{display:flex;flex-direction:column;gap:.05em}
.escolha b{font:600 .92em/1.15 var(--titulo);letter-spacing:.06em;text-transform:uppercase}
.escolha small{font:italic 400 1em/1.2 var(--corpo);color:color-mix(in srgb,var(--tinta) 65%,transparent)}
.escolha .marca{margin:0}
.escolha::before{content:"";position:absolute;left:-.5em;top:.35em;bottom:.35em;width:3px;border-radius:3px;background:var(--vinho);transform:scaleY(0);transition:transform .25s}
.escolha[aria-checked=true]{border:0;border-bottom:1px solid color-mix(in srgb,var(--vinho) 45%,transparent);background:color-mix(in srgb,var(--vinho) 7%,transparent);color:var(--vinho)}
.escolha[aria-checked=true]::before{transform:scaleY(1)}
.escolha[aria-checked=true] small{color:color-mix(in srgb,var(--vinho) 80%,transparent)}
.escolha[aria-checked=true] sup{color:var(--vinho)}
:root[data-tema=escuro] .escolha[aria-checked=true]{background:rgba(240,180,168,.07);color:#f0b4a8}
:root[data-tema=escuro] .escolha[aria-checked=true] small,:root[data-tema=escuro] .escolha[aria-checked=true] sup{color:#f0b4a8}
:root[data-tema=escuro] .escolha::before{background:#f0b4a8}
@media (max-width:640px){.caminho{gap:4px;padding:0 6px}.caminho li{width:12px;height:12px}.caminho li.agora{transform:scale(1.25)}}
/* celulares bem baixos (iPhone SE): sem as linhas de apoio, para a letra não ficar pequena */
@media (max-width:700px) and (max-height:700px){.aberto .direita .leitura,.aberto .direita .fitas-dica,.aberto .direita .pagina-num{display:none}}

/* ================= versão 5: idiomas, crédito da tradução e temas claro e escuro mais vivos ================= */
.cfg-idioma{cursor:default}
.idiomas{display:flex;gap:4px}
.idiomas a{font:600 .78rem var(--titulo);letter-spacing:.06em;padding:3px 7px;border:1px solid var(--linha-forte);border-radius:6px;color:var(--suave);text-decoration:none}
.idiomas a:hover{color:var(--texto)}
.idiomas a.atual{background:var(--texto);color:var(--fundo);border-color:var(--texto)}
.rod-base .rod-credito{flex-basis:100%;font-size:.85rem;font-style:italic}

/* ---------- tema claro: papel quente, luz dourada do alto, poeirinha brilhando e um friso dourado ---------- */
/* claro de verdade (o bege fica só no ornamental): papel branco, céu levemente azulado e um fio de luz dourada no alto */
:root:not([data-tema]){background:#f7f8f9}
:root:not([data-tema])::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 36% at 50% -6%,rgba(255,214,120,.20),transparent 72%),
    radial-gradient(ellipse 80% 60% at 50% 110%,rgba(150,170,200,.10),transparent 70%),
    repeating-conic-gradient(from 180deg at 50% -10%,rgba(255,205,100,.045) 0 2.5deg,transparent 2.5deg 8deg),
    linear-gradient(#ffffff,#f3f5f7)}
:root:not([data-tema]) body{background:transparent}
:root:not([data-tema]) .topo{background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,0))}
/* friso dourado dos dois lados do rótulo */
:root:not([data-tema]) .inicio .rotulo,:root[data-tema=escuro] .inicio .rotulo{display:flex;align-items:center;gap:12px}
:root:not([data-tema]) .inicio .rotulo::before,:root:not([data-tema]) .inicio .rotulo::after,
:root[data-tema=escuro] .inicio .rotulo::before,:root[data-tema=escuro] .inicio .rotulo::after{content:"";width:42px;height:1px;background:linear-gradient(90deg,transparent,var(--ouro))}
:root:not([data-tema]) .inicio .rotulo::after,:root[data-tema=escuro] .inicio .rotulo::after{transform:scaleX(-1)}
:root:not([data-tema]) .inicio h1{text-shadow:0 1px 0 #fff,0 0 34px rgba(232,196,110,.45)}
/* parede atrás da estante: uma luz suave atrás do livro principal */
.estante::before{content:"";position:absolute;left:50%;bottom:40px;width:min(760px,90%);height:330px;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 50% 60% at 50% 70%,rgba(255,210,120,.22),transparent 70%)}
:root[data-tema=ornamental] .estante::before{display:none}
/* poeirinha dourada flutuando na luz (some se a pessoa pediu menos movimento) */
.palco{position:relative}
.palco::after{content:"";position:absolute;inset:0 0 auto;height:70%;pointer-events:none;z-index:0;opacity:.7;
  background:
    radial-gradient(circle at 18% 30%,rgba(214,170,80,.55) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 32% 62%,rgba(214,170,80,.45) 0 1px,transparent 2px),
    radial-gradient(circle at 46% 18%,rgba(214,170,80,.5) 0 1.2px,transparent 2.2px),
    radial-gradient(circle at 63% 48%,rgba(214,170,80,.45) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 77% 24%,rgba(214,170,80,.5) 0 1px,transparent 2px),
    radial-gradient(circle at 86% 58%,rgba(214,170,80,.4) 0 1.3px,transparent 2.3px);
  animation:poeira 14s ease-in-out infinite alternate}
@keyframes poeira{to{transform:translate(10px,-16px);opacity:.35}}
:root[data-tema=ornamental] .palco::after{display:none}
.palco > *{position:relative;z-index:1}
/* livros com um brilho dourado nas bordas da capa quando a luz bate */
:root:not([data-tema]) .livro.principal .capa-livro{box-shadow:inset 6px 0 0 rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.08),6px 8px 0 -2px rgba(30,20,10,.22),0 18px 34px -14px rgba(122,46,58,.55),0 0 46px -10px rgba(232,196,110,.65)}
:root:not([data-tema]) .cartao{box-shadow:0 22px 40px -30px rgba(90,60,20,.45),0 0 0 1px rgba(184,145,58,.18)}

/* ---------- tema escuro: céu de estrelas, luz de vela atrás da estante, ouro mais vivo ---------- */
:root[data-tema=escuro]{background:#101216}
:root[data-tema=escuro]::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,240,200,.75) 0 1px,transparent 1.6px),
    radial-gradient(circle at 27% 8%,rgba(255,240,200,.55) 0 .8px,transparent 1.4px),
    radial-gradient(circle at 41% 26%,rgba(255,240,200,.6) 0 1px,transparent 1.6px),
    radial-gradient(circle at 58% 12%,rgba(255,240,200,.7) 0 1.2px,transparent 1.8px),
    radial-gradient(circle at 71% 30%,rgba(255,240,200,.5) 0 .8px,transparent 1.4px),
    radial-gradient(circle at 84% 14%,rgba(255,240,200,.7) 0 1px,transparent 1.6px),
    radial-gradient(circle at 93% 36%,rgba(255,240,200,.5) 0 .8px,transparent 1.4px),
    radial-gradient(circle at 6% 44%,rgba(255,240,200,.45) 0 .8px,transparent 1.4px),
    radial-gradient(ellipse 70% 45% at 50% 0%,rgba(80,96,140,.22),transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%,rgba(214,150,60,.10),transparent 70%),
    linear-gradient(#14171d,#0f1114)}
:root[data-tema=escuro] body{background:transparent}
:root[data-tema=escuro] .inicio h1{text-shadow:0 0 28px rgba(228,201,131,.28)}
:root[data-tema=escuro] .estante::before{background:radial-gradient(ellipse 50% 60% at 50% 75%,rgba(240,170,80,.20),transparent 70%)}
:root[data-tema=escuro] .palco::after{opacity:.55;filter:brightness(1.4)}
:root[data-tema=escuro] .capa-livro{box-shadow:inset 6px 0 0 rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.06),6px 8px 0 -2px rgba(0,0,0,.4),0 18px 30px -16px rgba(0,0,0,.8),0 0 28px -12px rgba(240,180,90,.45)}
:root[data-tema=escuro] .cartao{box-shadow:0 0 0 1px rgba(228,201,131,.14),0 24px 50px -30px rgba(0,0,0,.9),0 0 60px -30px rgba(228,201,131,.35)}
:root[data-tema=escuro] .ornato-jogo{text-shadow:0 0 18px rgba(228,201,131,.45)}
@media (prefers-reduced-motion:reduce){.palco::after{animation:none}}

/* ================= versão 6 ================= */
/* livros mais para cima: a estante vem logo depois do texto (antes ela era empurrada para o fim da tela) */
.palco > .estante{flex:none;margin-top:6px}
@media (min-height:900px) and (min-width:761px){.palco > .estante{margin-top:3vh}}

/* ---------- ornamental: planta (guirlanda pela prateleira e ramos subindo pelas pontas) ---------- */
:root[data-tema=ornamental] .estante::before{display:block;content:"";position:absolute;left:var(--lado);right:var(--lado);bottom:-14px;top:auto;width:auto;height:90px;transform:none;z-index:2;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%2290%22 viewBox=%220 -10 200 90%22%3E%3Cdefs%3E%3ClinearGradient id=%22fa%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%239cb867%22/%3E%3Cstop offset=%221%22 stop-color=%22%234f6e30%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22fb%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23b3c97e%22/%3E%3Cstop offset=%221%22 stop-color=%22%23668a3d%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22fc%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%237e9c4c%22/%3E%3Cstop offset=%221%22 stop-color=%22%233f5a26%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill=%22none%22 stroke=%22%236b4a22%22 stroke-width=%221.8%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M0 12C40 40 60 40 100 18S160 -2 200 12%22/%3E%3Cpath d=%22M100 18c5 14-6 26 1 44%22 stroke-width=%221.2%22/%3E%3C/g%3E%3Cg transform=%22translate(0.0 24.2) rotate(10) scale(1)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fa)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(25.0 32.8) rotate(80) scale(1)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fb)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(50.0 32.7) rotate(10) scale(1)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fc)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(75.0 24.0) rotate(80) scale(1)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fa)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(100.0 11.8) rotate(10) scale(1)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fb)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(125.0 3.2) rotate(80) scale(1)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fc)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(150.0 3.3) rotate(10) scale(1)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fa)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(175.0 12.0) rotate(80) scale(1)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fb)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(98.0 30.0) rotate(60) scale(0.8)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fa)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(104.0 42.0) rotate(120) scale(0.8)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fb)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(98.0 54.0) rotate(60) scale(0.8)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fc)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cpath d=%22M60 30c4.8 -2.4 8.4 -7.199999999999999 6.0 -10.799999999999999c-2.4 -3.5999999999999996 -7.199999999999999 -1.2 -4.8 2.4%22 fill=%22none%22 stroke=%22%237a8f4a%22 stroke-width=%22.9%22/%3E%3Cpath d=%22M140 10c-4 -2 -7 -6 -5 -9c2 -3 6 -1 4 2%22 fill=%22none%22 stroke=%22%237a8f4a%22 stroke-width=%22.9%22/%3E%3Cg transform=%22translate(78 24)%22 fill=%22%23fbf6e6%22 stroke=%22%23c9b27a%22 stroke-width=%22.4%22%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(0)%22/%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(72)%22/%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(144)%22/%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(216)%22/%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(288)%22/%3E%3Ccircle r=%221.2%22 fill=%22%23d9a93a%22 stroke=%22none%22/%3E%3C/g%3E%3Cg transform=%22translate(168 8)%22 fill=%22%23fbf6e6%22 stroke=%22%23c9b27a%22 stroke-width=%22.4%22%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(0)%22/%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(72)%22/%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(144)%22/%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(216)%22/%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(288)%22/%3E%3Ccircle r=%221.2%22 fill=%22%23d9a93a%22 stroke=%22none%22/%3E%3C/g%3E%3Ccircle cx=%2240%22 cy=%2231%22 r=%223%22 fill=%22%238f2c3a%22/%3E%3Ccircle cx=%2246%22 cy=%2233%22 r=%222.6%22 fill=%22%23a5394a%22/%3E%3Ccircle cx=%22160%22 cy=%226%22 r=%222.8%22 fill=%22%238f2c3a%22/%3E%3Ccircle cx=%22101%22 cy=%2264%22 r=%222.6%22 fill=%22%23a5394a%22/%3E%3C/svg%3E") 0 0/200px 90px repeat-x;filter:drop-shadow(0 3px 2px rgba(50,30,10,.25))}
.ramo{display:none}
:root[data-tema=ornamental] .ramo{display:block;position:absolute;bottom:50px;width:110px;height:208px;z-index:2;cursor:grab;touch-action:none;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22134%22 height=%22254%22 viewBox=%22-22 -12 134 254%22%3E%3Cdefs%3E%3ClinearGradient id=%22fa%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%239cb867%22/%3E%3Cstop offset=%221%22 stop-color=%22%234f6e30%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22fb%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23b3c97e%22/%3E%3Cstop offset=%221%22 stop-color=%22%23668a3d%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22fc%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%237e9c4c%22/%3E%3Cstop offset=%221%22 stop-color=%22%233f5a26%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill=%22none%22 stroke=%22%236b4a22%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M45 230C40 180 58 140 44 100S30 40 52 4%22 stroke-width=%222.4%22/%3E%3Cpath d=%22M44 150c14-6 22-16 26-30M46 90c-12-4-20-14-24-28%22 stroke-width=%221.4%22/%3E%3C/g%3E%3Cg transform=%22translate(43.0 210.0) rotate(-40) scale(1.15)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fa)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(47.0 190.0) rotate(200) scale(1.15)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fb)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(50.0 168.0) rotate(-30) scale(1.15)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fc)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(44.0 146.0) rotate(210) scale(1.15)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fa)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(70.0 122.0) rotate(-70) scale(1.15)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fb)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(46.0 124.0) rotate(190) scale(1.15)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fc)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(40.0 102.0) rotate(-20) scale(1.15)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fa)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(22.0 64.0) rotate(230) scale(1.15)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fb)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(40.0 78.0) rotate(200) scale(1.15)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fc)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(44.0 56.0) rotate(-30) scale(1.15)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fa)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(47.0 36.0) rotate(210) scale(1.15)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fb)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(51.0 18.0) rotate(-60) scale(1.15)%22%3E%3Cpath d=%22M0 0c4-6 13-8 22-2c-7 7-16 8-22 2z%22 fill=%22url(%23fc)%22 stroke=%22%233e5226%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M1 0q10-1 19-1.8%22 fill=%22none%22 stroke=%22%23e8efd2%22 stroke-width=%22.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cpath d=%22M52 160c5.6 -2.8 9.799999999999999 -8.399999999999999 7.0 -12.6c-2.8 -4.199999999999999 -8.399999999999999 -1.4 -5.6 2.8%22 fill=%22none%22 stroke=%22%237a8f4a%22 stroke-width=%22.9%22/%3E%3Cpath d=%22M38 112c-5.2 -2.6 -9.1 -7.800000000000001 -6.5 -11.700000000000001c2.6 -3.9000000000000004 7.800000000000001 -1.3 5.2 2.6%22 fill=%22none%22 stroke=%22%237a8f4a%22 stroke-width=%22.9%22/%3E%3Cpath d=%22M48 66c4.4 -2.2 7.700000000000001 -6.6000000000000005 5.5 -9.9c-2.2 -3.3000000000000003 -6.6000000000000005 -1.1 -4.4 2.2%22 fill=%22none%22 stroke=%22%237a8f4a%22 stroke-width=%22.9%22/%3E%3Cg transform=%22translate(26 140)%22 fill=%22%23fbf6e6%22 stroke=%22%23c9b27a%22 stroke-width=%22.4%22%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(0)%22/%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(72)%22/%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(144)%22/%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(216)%22/%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(288)%22/%3E%3Ccircle r=%221.2%22 fill=%22%23d9a93a%22 stroke=%22none%22/%3E%3C/g%3E%3Cg transform=%22translate(62 92)%22 fill=%22%23fbf6e6%22 stroke=%22%23c9b27a%22 stroke-width=%22.4%22%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(0)%22/%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(72)%22/%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(144)%22/%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(216)%22/%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(288)%22/%3E%3Ccircle r=%221.2%22 fill=%22%23d9a93a%22 stroke=%22none%22/%3E%3C/g%3E%3Cg transform=%22translate(36 30)%22 fill=%22%23fbf6e6%22 stroke=%22%23c9b27a%22 stroke-width=%22.4%22%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(0)%22/%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(72)%22/%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(144)%22/%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(216)%22/%3E%3Cellipse cx=%220%22 cy=%22-2.6%22 rx=%221.6%22 ry=%222.6%22 transform=%22rotate(288)%22/%3E%3Ccircle r=%221.2%22 fill=%22%23d9a93a%22 stroke=%22none%22/%3E%3C/g%3E%3Ccircle cx=%2270%22 cy=%22118%22 r=%223.2%22 fill=%22%238f2c3a%22/%3E%3Ccircle cx=%2222%22 cy=%2260%22 r=%223%22 fill=%22%23a5394a%22/%3E%3Ccircle cx=%2253%22 cy=%226%22 r=%222.6%22 fill=%22%23f3e6b8%22 stroke=%22%239c7424%22 stroke-width=%22.8%22/%3E%3C/svg%3E") center/contain no-repeat;
  transform-origin:50% 100%;animation:ramo 6s ease-in-out infinite alternate;filter:drop-shadow(0 4px 3px rgba(50,30,10,.2))}
:root[data-tema=ornamental] .ramo-esq{left:calc(var(--lado) - 44px)}
:root[data-tema=ornamental] .ramo-dir{right:calc(var(--lado) - 44px);transform:scaleX(-1);animation-name:ramoDir;animation-delay:-3s}
@keyframes ramo{from{transform:rotate(-2deg)}to{transform:rotate(2.5deg)}}
@keyframes ramoDir{from{transform:scaleX(-1) rotate(-2deg)}to{transform:scaleX(-1) rotate(2.5deg)}}
@media (max-width:760px){:root[data-tema=ornamental] .estante::before,:root[data-tema=ornamental] .ramo{display:none}}

/* ---------- escuro: a estrela de Belém (clique nela; muitos cliques rápidos... surpresa) ---------- */
.estrela-belem{display:none}
:root[data-tema=escuro] .estrela-belem{display:block;position:absolute;top:18px;right:max(14px,calc(50% - 470px));width:92px;height:92px;border:0;padding:0;background:none;cursor:pointer;z-index:3;
  -webkit-tap-highlight-color:transparent}
.estrela-belem svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 6px rgba(255,236,180,.9)) drop-shadow(0 0 18px rgba(255,210,120,.55));animation:cintila 3.2s ease-in-out infinite}
.estrela-belem .raios{transform-origin:50% 50%;animation:gira 40s linear infinite}
.estrela-belem:hover svg{filter:drop-shadow(0 0 8px #fff3cf) drop-shadow(0 0 28px rgba(255,210,120,.85))}
.estrela-belem:focus-visible{outline:none}.estrela-belem:focus-visible svg{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 22px #82b4dc)}
.estrela-belem.toque svg{animation:toque .5s cubic-bezier(.3,1.6,.5,1)}
.estrela-belem.festa svg{animation:festa 4.5s ease-in-out}
@keyframes cintila{50%{transform:scale(.9);opacity:.85}}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes toque{40%{transform:scale(1.35)}}
@keyframes festa{15%{transform:scale(1.9)}70%{transform:scale(1.6)}100%{transform:scale(1)}}
/* faíscas e anel de luz quando clica */
.faisca{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff3cf;box-shadow:0 0 8px 2px rgba(255,220,140,.9);pointer-events:none;z-index:4;animation:faisca .9s ease-out forwards}
@keyframes faisca{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
/* o céu se abre: luz dourada, anjos que aparecem, flutuam e somem */
.ceu-aberto{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.ceu-aberto::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at var(--x) var(--y),rgba(255,230,170,.32),rgba(255,210,120,.08) 45%,transparent 70%);animation:ceuLuz 7s ease-in-out forwards}
@keyframes ceuLuz{0%{opacity:0}18%,72%{opacity:1}100%{opacity:0}}
.anjo{position:absolute;width:var(--t);height:calc(var(--t) * 1.17);margin:calc(var(--t) * -.58) 0 0 calc(var(--t) * -.5);opacity:0;
  filter:drop-shadow(0 0 10px rgba(255,236,190,.9)) drop-shadow(0 0 30px rgba(255,210,120,.5));animation:anjo 6.4s cubic-bezier(.4,0,.3,1) forwards;animation-delay:var(--atraso)}
.anjo svg{width:100%;height:100%;overflow:visible;animation:pairar 2.2s ease-in-out infinite alternate}
.anjo .asa{transform-box:fill-box;animation:bate 1.1s ease-in-out infinite alternate}
.anjo .asa-e{transform-origin:100% 40%}.anjo .asa-d{transform-origin:0 40%;animation-delay:-.0s}
@keyframes bate{from{transform:rotate(0)}to{transform:rotate(var(--bate,9deg))}}
.anjo .asa-d{--bate:-9deg}
@keyframes pairar{to{transform:translateY(-8px)}}
@keyframes anjo{
  0%{opacity:0;transform:translate(0,30px) scale(.6);filter:blur(8px) drop-shadow(0 0 10px rgba(255,236,190,.9))}
  20%{opacity:1;transform:translate(0,0) scale(1);filter:blur(0) drop-shadow(0 0 10px rgba(255,236,190,.9)) drop-shadow(0 0 30px rgba(255,210,120,.5))}
  75%{opacity:1;transform:translate(var(--vai),-40px) scale(1)}
  100%{opacity:0;transform:translate(var(--vai),-120px) scale(.9);filter:blur(6px) drop-shadow(0 0 30px rgba(255,236,190,.9))}}
.brilho-anjo{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff6dc;box-shadow:0 0 6px 2px rgba(255,225,150,.8);opacity:0;animation:brilhoAnjo 3s ease-out forwards;animation-delay:var(--atraso)}
@keyframes brilhoAnjo{0%{opacity:0}20%{opacity:1}100%{opacity:0;transform:translateY(-90px)}}
@media (max-width:640px){:root[data-tema=escuro] .estrela-belem{top:10px;right:10px;width:64px;height:64px}}
@media (prefers-reduced-motion:reduce){.estrela-belem svg,.estrela-belem .raios,.ramo,.anjo svg,.anjo .asa{animation:none!important}.anjo{animation-duration:5s}}
/* topo mais compacto para a estante aparecer inteira sem rolar (notebook de 768 px de altura) */
.inicio{padding-top:18px;gap:8px}
.inicio .intro{line-height:1.35}
.versiculo-dia{font-size:1.1rem;min-height:3.1em}
.palco > .estante{padding-top:30px}
@media (max-height:820px) and (min-width:761px){
  .inicio h1{font-size:clamp(2.2rem,5vw,3rem)}
  .livro{width:136px;height:194px}.livro.principal{width:178px;height:254px}
}

/* ================= versão 7 ================= */
/* ---------- tema claro: céu de manhã (azul bem clarinho no alto, nuvens passando devagar e uma pomba de vez em quando) ---------- */
:root:not([data-tema]){background:#fbfcfe}
:root:not([data-tema])::before{background:linear-gradient(180deg,#dfeaf7 0,#ebf2fa 20%,#f6f9fc 42%,#fdfeff 62%,#ffffff 100%)}
:root:not([data-tema]) body::before{content:"";position:fixed;left:0;right:0;top:44px;height:240px;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 170px 26px at 220px 92px,rgba(150,175,205,.16),transparent 70%),
    radial-gradient(ellipse 150px 34px at 220px 70px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 70px 40px at 165px 56px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 80px 46px at 225px 44px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 64px 36px at 282px 58px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 60px 22px at 120px 74px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 60px 22px at 330px 74px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 119px 18px at 700px 145px,rgba(150,175,205,.16),transparent 70%),
    radial-gradient(ellipse 105px 24px at 700px 130px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 49px 28px at 662px 120px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 56px 32px at 704px 112px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 45px 25px at 743px 122px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 42px 15px at 630px 133px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 42px 15px at 777px 133px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 195px 30px at 1150px 85px,rgba(150,175,205,.16),transparent 70%),
    radial-gradient(ellipse 172px 39px at 1150px 60px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 80px 46px at 1087px 44px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 92px 53px at 1156px 30px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 74px 41px at 1221px 46px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 69px 25px at 1035px 65px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 69px 25px at 1276px 65px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 102px 16px at 1480px 163px,rgba(150,175,205,.16),transparent 70%),
    radial-gradient(ellipse 90px 20px at 1480px 150px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 42px 24px at 1447px 142px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 48px 28px at 1483px 134px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 38px 22px at 1517px 143px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 36px 13px at 1420px 152px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 36px 13px at 1546px 152px,rgba(255,255,255,.96) 35%,rgba(255,255,255,0) 72%);
  background-size:1600px 240px;background-repeat:repeat-x;animation:nuvens 160s linear infinite;opacity:.95}
@keyframes nuvens{to{background-position:1600px 0}}
:root:not([data-tema]) .topo{position:relative;z-index:5;background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.35))}
:root:not([data-tema]) .tela{position:relative;z-index:1}
:root:not([data-tema]) .palco::after{display:none}
:root:not([data-tema]) .inicio h1{text-shadow:0 2px 0 #fff,0 0 30px rgba(255,255,255,.9)}
:root:not([data-tema]) .inicio .rotulo::before,:root:not([data-tema]) .inicio .rotulo::after{background:linear-gradient(90deg,transparent,#9db2cb)}
:root:not([data-tema]) .estante::before{background:radial-gradient(ellipse 50% 60% at 50% 72%,rgba(196,214,236,.55),transparent 70%)}
:root:not([data-tema]) .livro.principal .capa-livro{box-shadow:inset 6px 0 0 rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.08),6px 8px 0 -2px rgba(30,40,60,.18),0 20px 36px -16px rgba(80,40,50,.5)}
:root:not([data-tema]) .cartao{box-shadow:0 22px 40px -30px rgba(40,60,90,.35),0 0 0 1px rgba(120,145,180,.18)}
/* pomba: voa batendo as asas algumas vezes e planando, como pomba de verdade; dá para clicar nela */
.pomba{display:none}
:root:not([data-tema]) .pomba{display:block;position:fixed;left:0;width:86px;height:63px;z-index:6;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pomba svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 6px rgba(60,80,110,.18))}
.pomba.para-esquerda svg{scale:-1 1}
.pomba .pomba-corpo{animation:corpoPomba 2.4s ease-in-out infinite}
.pomba .asa{transform-box:view-box;transform-origin:46px 3px;animation:asaPomba 2.4s infinite}
.pomba .asa-tras{animation-delay:-.05s}
.pomba.fugindo .asa,.pomba.fugindo .pomba-corpo{animation-duration:.9s}
@keyframes asaPomba{
  0%{transform:scaleY(1) rotate(0);animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  8%{transform:scaleY(-.8) rotate(-8deg);animation-timing-function:cubic-bezier(.2,.4,.5,1)}
  18%{transform:scaleY(1) rotate(0);animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  26%{transform:scaleY(-.8) rotate(-8deg);animation-timing-function:cubic-bezier(.2,.4,.5,1)}
  36%{transform:scaleY(1) rotate(0);animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  44%{transform:scaleY(-.8) rotate(-8deg);animation-timing-function:ease-out}
  56%,94%{transform:scaleY(.22) rotate(4deg)}
  100%{transform:scaleY(1) rotate(0)}}
@keyframes corpoPomba{0%,18%,36%{transform:translateY(0)}8%,26%,44%{transform:translateY(-4px)}56%{transform:translateY(-1px)}94%{transform:translateY(4px)}100%{transform:translateY(0)}}
.verso-pomba{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:7;width:min(560px,calc(100% - 32px));text-align:center;padding:10px 16px;border-radius:14px;
  background:rgba(255,255,255,.8);box-shadow:0 10px 30px -18px rgba(40,60,90,.5);font:italic 400 1.02rem/1.35 var(--corpo);color:var(--suave);animation:versoEntra 1.2s ease both;transition:opacity 1.4s}
.verso-pomba span::before{content:"“"}.verso-pomba span::after{content:"”"}
.verso-pomba cite{display:block;font:400 1rem var(--mao);font-style:normal;color:#7d9a48;margin-top:2px}
.verso-pomba.some{opacity:0}
@media (prefers-reduced-motion:reduce){:root:not([data-tema]) body::before{animation:none}.pomba{display:none!important}}

/* ---------- escuro: a estrela de Belém (quatro pontas longas, brilho em raios e um feixe de luz descendo) ---------- */
:root[data-tema=escuro] .palco{--eb-w:150px;--eb-r:max(10px,calc(50% - 560px));--eb-t:4px}
:root[data-tema=escuro] .estrela-belem{top:var(--eb-t);right:var(--eb-r);width:var(--eb-w);height:var(--eb-w);user-select:none;-webkit-user-select:none}
.estrela-corpo{display:block;width:100%;height:100%;transform:scale(calc(1 + var(--forca,0) * .45));transition:transform .25s cubic-bezier(.3,1.5,.5,1);
  filter:brightness(calc(1 + var(--forca,0) * .5))}
.estrela-belem svg{filter:drop-shadow(0 0 4px rgba(255,248,225,.95)) drop-shadow(0 0 22px rgba(255,214,140,.45))}
.estrela-belem .raios{transform-origin:0 0;animation:gira 90s linear infinite}
.estrela-belem .halo{transform-origin:0 0;animation:respira 3.4s ease-in-out infinite}
@keyframes respira{50%{transform:scale(1.18);opacity:.8}}
.feixe-belem{display:none}
:root[data-tema=escuro] .palco > .feixe-belem{display:block;position:absolute;z-index:0;pointer-events:none;top:calc(var(--eb-t) + var(--eb-w) / 2);right:calc(var(--eb-r) + var(--eb-w) / 2 - 30px);width:60px;height:min(78vh,760px);
  background:linear-gradient(90deg,transparent 46%,rgba(255,240,205,.5) 49.4%,rgba(255,248,230,.75) 50%,rgba(255,240,205,.5) 50.6%,transparent 54%),
             linear-gradient(90deg,transparent,rgba(170,190,240,.10) 30%,rgba(255,230,180,.12) 50%,rgba(170,190,240,.10) 70%,transparent);
  -webkit-mask:linear-gradient(#000,rgba(0,0,0,.45) 22%,transparent 48%);mask:linear-gradient(#000,rgba(0,0,0,.45) 22%,transparent 48%);
  opacity:calc(.75 + var(--forca,0) * .25)}
@media (max-width:640px){:root[data-tema=escuro] .palco{--eb-w:96px;--eb-r:6px;--eb-t:2px}:root[data-tema=escuro] .palco > .feixe-belem{height:50vh}}

/* ---------- ornamental: os ramos dá para pegar e puxar (voltam como mola) ---------- */
:root[data-tema=ornamental] .ramo.agarrado{cursor:grabbing}
/* livro chamando para o clique (depois de 25 s parado na estante) */
.livro.chama{animation:chama 1.6s ease-in-out infinite}
@keyframes chama{50%{transform:translateY(-12px) scale(1.045);filter:drop-shadow(0 0 16px rgba(232,196,110,.85)) drop-shadow(0 14px 14px rgba(30,20,10,.25))}}
:root[data-tema=escuro] .livro.chama{animation-name:chamaEscuro}
@keyframes chamaEscuro{50%{transform:translateY(-12px) scale(1.045);filter:drop-shadow(0 0 22px rgba(255,214,140,.9))}}
@media (prefers-reduced-motion:reduce){.livro.chama{animation-duration:3s}}
/* topo: o que é o quiz (pequeno) e o convite para escolher um livro; a contagem fica no rodapé */
.inicio .sobre{max-width:54ch;font-size:1.02rem;line-height:1.35;color:var(--suave);margin:-2px 0 0}
.inicio .intro{font-size:1.2rem;color:var(--texto);max-width:44ch}
.rodape .numeros{text-align:center;margin:0 0 26px;padding-bottom:20px;border-bottom:1px dashed var(--linha)}
/* versículo inteiro depois da resposta (modo Perguntas) */
.retorno-verso{margin:4px 0 2px;padding:6px 0 4px 12px;border-left:2px solid color-mix(in srgb,var(--ouro) 60%,transparent);font:italic 400 1rem/1.4 var(--corpo);color:var(--suave)}
.retorno-verso span::before{content:"“"}.retorno-verso span::after{content:"”"}
.retorno-verso cite{display:block;margin-top:3px;font:400 .98rem var(--mao);font-style:normal;color:var(--ouro)}