/*
 * Maná Kids — Leitor de quadrinhos (leitor-quadrinho.css)
 *
 * Livro de quadrinhos página a página: flip 3D (perspective + rotateY),
 * balões de fala via CSS sobre a imagem, placeholder para páginas em
 * produção, barra de progresso segmentada e setas de navegação.
 * Mobile-first (uso principal é no celular).
 */

/* ================= Layout base (fullscreen) ================= */
.lq-tela {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f3ecff 0%, var(--cor-fundo) 45%);
  overscroll-behavior: contain;
}

/* ---------- Header ---------- */
.lq-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .8rem;
  padding-top: calc(.55rem + env(safe-area-inset-top, 0px));
}
.lq-header .lq-voltar,
.lq-header .lq-fav,
.lq-header .lq-ctrl {
  border: none;
  background: var(--cor-card);
  color: var(--cor-texto);
  font: 800 1rem var(--fonte-titulo);
  border-radius: 999px;
  padding: .45rem .7rem;
  box-shadow: 0 2px 8px rgba(45, 27, 105, .12);
  cursor: pointer;
  min-width: 2.5rem;
}
.lq-header .lq-titulo {
  flex: 1;
  min-width: 0;
  font: 800 1rem var(--fonte-titulo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.lq-header .lq-contador {
  font: 800 .85rem var(--fonte-titulo);
  color: var(--cor-primaria);
  background: #efe8ff;
  border-radius: 999px;
  padding: .35rem .6rem;
  white-space: nowrap;
}
.lq-fav.ativo { color: var(--cor-erro); }
.lq-ctrl[aria-pressed="true"] {
  background: var(--cor-primaria);
  color: #fff;
}

/* ---------- Área de leitura (barra + palco + dica) ---------- */
.lq-leitura {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.lq-leitura[hidden] { display: none; }

/* ---------- Barra de progresso segmentada ---------- */
.lq-progresso {
  display: flex;
  gap: 3px;
  padding: 0 .9rem .5rem;
}
.lq-progresso span {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: #e4dbf5;
  transition: background .3s ease;
}
.lq-progresso span.feita { background: var(--cor-secundaria); }
.lq-progresso span.atual { background: var(--cor-primaria); }

/* ================= Palco do livro ================= */
.lq-palco {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: .3rem .9rem;
  /* Perspectiva do flip 3D — quanto menor, mais dramático o "virar". */
  perspective: 1200px;
  touch-action: pan-y; /* o swipe horizontal é nosso; o vertical fica com o navegador */
}

/* O livro: quadrado 1:1 (proporção das imagens do Gemini).
   Reserva ~270px para header/progresso/legenda/controles fora da imagem. */
.lq-livro {
  position: relative;
  width: min(100%, calc(100dvh - 270px), 560px);
  aspect-ratio: 1 / 1;
  transform-style: preserve-3d;
}

/* Uma página (a atual, por cima; a de destino fica por baixo). */
.lq-pagina {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--cor-card);
  box-shadow: 0 10px 30px rgba(45, 27, 105, .18);
  backface-visibility: hidden;
  will-change: transform;
}
.lq-pagina img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
/* Página por baixo (destino da virada). */
.lq-pagina.sob { z-index: 1; }
.lq-pagina.topo { z-index: 2; }

/* Sombra da dobra: escurece conforme a página vira (opacity via JS). */
.lq-pagina .lq-dobra {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 55%);
}
.lq-pagina.virando-tras .lq-dobra {
  background: linear-gradient(-90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 55%);
}

/* A virada é uma TRANSIÇÃO aplicada via JS (continua do ângulo do arrasto —
   seta e swipe ficam igualmente suaves). Aqui só o respeito a reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .lq-pagina { transition-duration: .01s !important; }
}

/* ---------- Placeholder: página em produção ---------- */
.lq-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  text-align: center;
  padding: 1.2rem;
  background:
    radial-gradient(circle at 30% 20%, rgba(245, 166, 35, .18), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(108, 63, 200, .16), transparent 55%),
    linear-gradient(160deg, #f6efff 0%, #fff6e8 100%);
}
.lq-placeholder .ph-emoji { font-size: 3.2rem; }
.lq-placeholder .ph-paleta { font-size: 1.6rem; opacity: .85; }
.lq-placeholder h3 {
  font: 800 1.15rem var(--fonte-titulo);
  color: var(--cor-primaria);
}
.lq-placeholder button {
  border: none;
  border-radius: 999px;
  padding: .5rem 1.1rem;
  font: 800 .9rem var(--fonte-titulo);
  background: #e4dbf5;
  color: var(--cor-texto-suave);
  cursor: not-allowed;
}

/* ---------- Selo da página (ex.: "1º dia" na Criação) ----------
   Chip dourado no canto superior esquerdo, POR CIMA da arte via CSS —
   identifica o momento da história sem alterar a imagem nem o áudio.
   (Balões top-* ficam no centro/direita; o selo não conflita.) */
.lq-selo {
  position: absolute;
  top: 4%;
  left: 4%;
  z-index: 3;
  pointer-events: none;
  font: 800 .95rem var(--fonte-titulo);
  color: #4a2d00;
  background: linear-gradient(180deg, #ffe08a, #ffc24d);
  border: 2px solid #d99a17;
  border-radius: 999px;
  padding: .35rem .85rem;
  box-shadow: 0 3px 10px rgba(45, 27, 105, .35);
}

/* ---------- Capa (página 0 do livro) ----------
   Arte de fundo + tudo por CSS por cima (título, selo, badge, CTA) — o texto
   NUNCA faz parte da imagem gerada. Overlay de gradiente garante contraste. */
.lq-capa-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(45, 27, 105, .34) 0%, rgba(45, 27, 105, 0) 30%),
    linear-gradient(0deg, rgba(45, 27, 105, .55) 0%, rgba(45, 27, 105, 0) 38%);
  z-index: 2;
}
.lq-capa-conteudo {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 6% 6% 5%;
  pointer-events: none; /* só o botão volta a receber toque */
}
.lq-capa-topo { display: grid; gap: .45rem; justify-items: center; }
.lq-capa-selo {
  font: 800 .68rem var(--fonte-titulo);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(45, 27, 105, .55);
  border-radius: 999px;
  padding: .28rem .7rem;
  backdrop-filter: blur(2px);
}
.lq-capa-titulo {
  font: 800 clamp(1.5rem, 6.5vw, 2.2rem)/1.15 var(--fonte-titulo);
  color: #fff;
  text-shadow: 0 2px 4px rgba(45, 27, 105, .55), 0 4px 18px rgba(45, 27, 105, .45);
  max-width: 92%;
}
.lq-capa-badge {
  font: 800 .72rem var(--fonte-titulo);
  letter-spacing: .06em;
  border-radius: 999px;
  padding: .3rem .75rem;
}
.lq-capa-badge.gratis { background: var(--cor-acento, #2fa35c); color: #fff; }
.lq-capa-badge.plus   { background: linear-gradient(90deg, #ffd76a, #ffc24d); color: #4a2d00; }

.lq-capa-base { display: grid; gap: .55rem; justify-items: center; }
.lq-capa-btn {
  pointer-events: auto;
  border: none;
  cursor: pointer;
  font: 800 1.05rem var(--fonte-titulo);
  color: #4a2d00;
  background: linear-gradient(180deg, #ffd76a, #ffc24d);
  border-radius: 999px;
  padding: .8rem 1.7rem;
  box-shadow: 0 6px 18px rgba(45, 27, 105, .35), inset 0 -3px 0 rgba(0, 0, 0, .12);
  transition: transform .15s ease;
}
.lq-capa-btn:hover { transform: scale(1.04); }
.lq-capa-btn:active { transform: scale(.96); }

/* Dica sutil de gesto: a setinha "puxa" para a esquerda em loop. */
.lq-capa-swipe {
  font: 700 .78rem var(--fonte-titulo);
  color: #fff;
  text-shadow: 0 1px 3px rgba(45, 27, 105, .6);
}
.lq-capa-swipe .seta {
  display: inline-block;
  animation: lq-swipe-hint 1.6s ease-in-out infinite;
}
@keyframes lq-swipe-hint {
  0%, 100% { transform: translateX(0); opacity: .75; }
  50%      { transform: translateX(-7px); opacity: 1; }
}

/* Placeholder de capa (capa null): mesmo visual do placeholder de página. */
.lq-capa-ph h3 { margin-top: .2rem; }

@media (prefers-reduced-motion: reduce) {
  .lq-capa-swipe .seta { animation: none; }
  .lq-capa-btn, .lq-capa-btn:hover, .lq-capa-btn:active { transition: none; transform: none; }
}

/* ---------- Balão de fala (renderizado por cima da imagem) ----------
   Único elemento sobreposto à arte: estilo gibi de verdade — contorno
   escuro e sombra projetada (drop-shadow acompanha o rabinho) para ficar
   legível e integrado sobre qualquer imagem. */
.lq-balao {
  position: absolute;
  max-width: 64%;
  background: #fff;
  color: var(--cor-texto);
  font: 800 1rem/1.3 var(--fonte-titulo);
  padding: .6rem .85rem;
  border-radius: 16px;
  border: 2.5px solid var(--cor-texto);
  filter: drop-shadow(0 4px 8px rgba(45, 27, 105, .35));
  z-index: 3;
}
/* Rabinho do balão (triângulo via pseudo-elemento). */
.lq-balao::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
}
.lq-balao.top-left     { top: 6%; left: 5%; }
.lq-balao.top-right    { top: 6%; right: 5%; }
.lq-balao.top-center   { top: 5%; left: 50%; transform: translateX(-50%); }
.lq-balao.bottom-left  { bottom: 12%; left: 5%; }
.lq-balao.bottom-right { bottom: 12%; right: 5%; }
.lq-balao.bottom-center{ bottom: 11%; left: 50%; transform: translateX(-50%); }
/* Rabinho aponta "para dentro" da cena (para o personagem). */
.lq-balao.top-left::after,
.lq-balao.top-center::after  { top: 100%; left: 28%; border-top-color: #fff; }
.lq-balao.top-right::after   { top: 100%; right: 28%; border-top-color: #fff; }
.lq-balao.bottom-left::after,
.lq-balao.bottom-center::after { bottom: 100%; left: 28%; border-bottom-color: #fff; }
.lq-balao.bottom-right::after  { bottom: 100%; right: 28%; border-bottom-color: #fff; }

/* Fala de DEUS (estilo "divino"): a voz vem do céu/da luz, não de uma boca —
   SEM rabinho (que atribuiria a fala ao personagem embaixo), balão dourado
   com brilho suave, visivelmente diferente das falas de personagens. */
.lq-balao.divino {
  border-color: #d99a17;
  background: linear-gradient(180deg, #fffbee, #ffedbd);
  color: #5a3c00;
  filter: none;
  box-shadow: 0 0 16px rgba(255, 199, 66, .65), 0 4px 10px rgba(45, 27, 105, .25);
}
.lq-balao.divino::after { display: none; }

/* ---------- Legenda (CC) FORA da imagem, abaixo do palco ----------
   Layout em BLOCO (não flex-center): flex centrado + overflow corta o começo
   de textos longos sem deixar rolar — a última legenda de Adão e Eva sofria
   disso. Em bloco, texto longo rola normalmente dentro do cartão. */
.lq-legenda-box {
  margin: .35rem .9rem 0;
  min-height: 3rem;
  max-height: 7rem;
  overflow-y: auto;
  background: var(--cor-card);
  color: var(--cor-texto);
  font: 700 .92rem/1.4 var(--fonte-titulo);
  padding: .55rem .9rem;
  border-radius: 14px;
  border: 2px solid var(--cor-borda);
  text-align: center;
}
.lq-legenda-box[hidden] { display: none; }

/* ---------- Barra de controles FORA da imagem (setas + dica) ---------- */
.lq-controles {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .9rem calc(.6rem + env(safe-area-inset-bottom, 0px));
}
.lq-seta {
  flex: 0 0 auto;
  border: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font: 800 1.35rem var(--fonte-titulo);
  background: var(--cor-card);
  color: var(--cor-primaria);
  box-shadow: 0 2px 8px rgba(45, 27, 105, .18);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.lq-seta:hover { background: #f3edff; }
.lq-seta:active { transform: scale(.92); }
.lq-seta[disabled] { opacity: .25; cursor: default; }

.lq-dica {
  flex: 1;
  text-align: center;
  color: var(--cor-texto-suave);
  font: 700 .8rem var(--fonte-titulo);
  margin: 0;
}

/* ================= Overlays (retomar / final / bloqueado) ================= */
.lq-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(45, 27, 105, .45);
  backdrop-filter: blur(3px);
}
.lq-overlay[hidden] { display: none; }
.lq-overlay .lq-box {
  background: var(--cor-card);
  border-radius: 22px;
  padding: 1.6rem 1.4rem;
  max-width: 26rem;
  width: 100%;
  text-align: center;
  box-shadow: 0 18px 50px rgba(45, 27, 105, .35);
  animation: lq-pop .25s ease;
}
@keyframes lq-pop {
  from { transform: scale(.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.lq-box .lq-box-emoji { font-size: 3rem; margin-bottom: .4rem; }
.lq-box h2 { font: 800 1.3rem var(--fonte-titulo); margin-bottom: .5rem; }
.lq-box p  { color: var(--cor-texto-suave); margin-bottom: .5rem; }
.lq-box .lq-moral {
  background: #f6efff;
  border-radius: 14px;
  padding: .7rem .9rem;
  font: 700 .95rem var(--fonte-titulo);
  color: var(--cor-texto);
  margin: .6rem 0 .8rem;
}
.lq-box .lq-estrelas {
  font-size: 1.6rem;
  letter-spacing: .2rem;
  margin-bottom: .8rem;
}
.lq-box .btn { width: 100%; margin-top: .45rem; }