/* Tela "livro" da página única (site/js/paginas/livro.js): o estilo da antiga site/livro.html, preso a
   body.pg-livro com :where() (especificidade zero, a cascata fica igual). docs/13-site.md "Página única" */
body:where(.pg-livro) { padding: 0; min-height: 100dvh; overflow: hidden; }
/* tamanho da cena pela tela: cabe com o texto, centralizado, com margem em cima (botão voltar) e embaixo */
:where(.pg-livro) .livro { --txt: clamp(110px, 24dvh, 200px); --topo: 96px; --base: 32px; --lado: 104px;
  --cena-w: min(calc(100vw - 2 * var(--lado) - 36px), calc((100dvh - var(--topo) - var(--base) - var(--txt) - 46px) * 16 / 9), 1060px);
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: var(--topo) var(--lado) var(--base); }
:where(.pg-livro) .folha { position: relative; width: calc(var(--cena-w) + 36px); background: var(--creme); color: var(--contorno);
  border: 6px solid var(--contorno); border-radius: var(--raio); box-shadow: var(--sombra); padding: 12px;
  display: flex; flex-direction: column; gap: 10px; touch-action: pan-y; }
:where(.pg-livro) .cena { position: relative; width: var(--cena-w); aspect-ratio: 16 / 9; margin: 0 auto;
  border: 5px solid var(--contorno); border-radius: 18px; overflow: hidden; background: var(--cor-ep-2); }
:where(.pg-livro) .cena canvas, :where(.pg-livro) .cena .foto { display: block; width: 100% !important; height: 100% !important; }
:where(.pg-livro) .cena .medalha-nova { position: absolute; left: 50%; top: 50%; width: min(34%, 200px); margin: 0; transform: translate(-50%, -50%); z-index: 2; }
:where(.pg-livro) .texto { margin: 0; padding: 4px 8px; font-size: clamp(18px, 2.8vw, 32px); line-height: 1.3; text-align: center;
  min-height: 2.6em; max-height: var(--txt); overflow-y: auto; }
:where(.pg-livro) .texto span { border-radius: 10px; padding: 0 4px; transition: background .2s; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
:where(.pg-livro) .texto .lendo { background: var(--amarelo); }
:where(.pg-livro) .texto.longo { font-size: clamp(16px, 2.3vw, 26px); }
:where(.pg-livro) .texto .botao { margin: 0; }
/* página Fim: botões com espaço e sombra inteira (sem o corte da caixa de texto rolável) */
:where(.pg-livro) .texto.fim { max-height: none; overflow: visible; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-bottom: 12px; }
:where(.pg-livro) .texto.fim .acoes-fim { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 16px; }
/* número da página por cima da cena */
:where(.pg-livro) .num { position: absolute; top: 10px; right: 10px; z-index: 3; background: var(--amarelo); border: 5px solid var(--contorno);
  border-radius: 999px; padding: 0 14px; font-size: clamp(16px, 2vw, 22px); box-shadow: 0 4px 0 var(--contorno); }
:where(.pg-livro) .num:empty { display: none; }
:where(.pg-livro) .seta { position: fixed; top: 50%; transform: translateY(-50%); z-index: 6; font-size: 34px; }
:where(.pg-livro) .seta:active { transform: translateY(-50%) translateY(6px); }
:where(.pg-livro) .seta.esq { left: 16px; } :where(.pg-livro) .seta.dir { right: 16px; }
:where(.pg-livro) .titulo-capa { font-size: clamp(30px, 5vw, 56px); }
/* virar a página: a cópia da página atual gira em 3D a partir da lombada, entortando como papel (losango),
   com sombra; a página nova desliza do lado de onde vem */
:where(.pg-livro) .fantasma { z-index: 8; pointer-events: none; backface-visibility: hidden; will-change: transform; }
:where(.pg-livro) .fantasma::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: linear-gradient(90deg, rgba(22,33,58,0) 30%, rgba(22,33,58,.45)); animation: sombra .9s ease-in forwards; }
:where(.pg-livro) .fantasma.volta::after { background: linear-gradient(270deg, rgba(22,33,58,0) 30%, rgba(22,33,58,.45)); }
:where(.pg-livro) .fantasma.vai { transform-origin: left center; animation: vai .9s cubic-bezier(.45,.05,.3,1) forwards; }
:where(.pg-livro) .fantasma.volta { transform-origin: right center; animation: volta .9s cubic-bezier(.45,.05,.3,1) forwards; }
@keyframes vai {
  0% { transform: perspective(2600px) rotateY(0) skewY(0); }
  35% { transform: perspective(2600px) rotateY(-32deg) skewY(-7deg) translateX(-2%); }
  70% { transform: perspective(2600px) rotateY(-78deg) skewY(-4deg) translateX(-4%); opacity: 1; }
  100% { transform: perspective(2600px) rotateY(-100deg) skewY(0) translateX(-6%); opacity: 0; } }
@keyframes volta {
  0% { transform: perspective(2600px) rotateY(0) skewY(0); }
  35% { transform: perspective(2600px) rotateY(32deg) skewY(7deg) translateX(2%); }
  70% { transform: perspective(2600px) rotateY(78deg) skewY(4deg) translateX(4%); opacity: 1; }
  100% { transform: perspective(2600px) rotateY(100deg) skewY(0) translateX(6%); opacity: 0; } }
@keyframes sombra { to { opacity: 1; } }
:where(.pg-livro) .folha.entra-dir { animation: entra-dir .9s cubic-bezier(.2,.7,.3,1); }
:where(.pg-livro) .folha.entra-esq { animation: entra-esq .9s cubic-bezier(.2,.7,.3,1); }
@keyframes entra-dir { from { transform: translateX(6%) scale(.96); filter: brightness(.82); } to { transform: none; filter: none; } }
@keyframes entra-esq { from { transform: translateX(-6%) scale(.96); filter: brightness(.82); } to { transform: none; filter: none; } }
/* celular em pé: setas embaixo, fora da cena */
@media (orientation: portrait) and (max-width: 700px) {
  :where(.pg-livro) .livro { --lado: 16px; --base: 112px; --topo: 88px; }
  :where(.pg-livro) .seta { top: auto; bottom: 24px; transform: none; }
  :where(.pg-livro) .seta:active { transform: translateY(6px); }
  :where(.pg-livro) .seta.esq { left: calc(50% - 88px); } :where(.pg-livro) .seta.dir { right: auto; left: calc(50% + 8px); }
}
/* celular deitado: texto por cima da parte de baixo da cena */
@media (orientation: landscape) and (max-height: 520px) {
  :where(.pg-livro) .livro { --topo: 12px; --base: 12px; --lado: 96px; --txt: 0px; }
  :where(.pg-livro) .folha { padding: 8px; width: calc(var(--cena-w) + 28px); }
  :where(.pg-livro) .texto { position: absolute; left: 20px; right: 20px; bottom: 18px; background: rgba(255,248,232,.92);
    border-radius: 16px; font-size: clamp(15px, 2.4vw, 20px); min-height: 0; max-height: 40%; }
  :where(.pg-livro) .voltar { top: 8px; left: 8px; }
}