/* AMA — aplicativo de leitura. Tema claro (papel creme) e escuro, sem depender de nada externo. */
:root{
  --papel:#f6f1e6; --tinta:#1d1a16; --fraco:#7d7466; --linha:#ddd3c2;
  --fundo:#e7e0d2; --realce:rgba(196,138,58,.20); --sombra:rgba(0,0,0,.18);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","Liberation Serif",Georgia,serif;
  --medida:17px; --entrelinha:1.62;
}
:root[data-tema="escuro"]{
  --papel:#16151a; --tinta:#ded8cd; --fraco:#8b8377; --linha:#2c2a31;
  --fundo:#0d0c10; --realce:rgba(214,166,88,.16); --sombra:rgba(0,0,0,.6);
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --papel:#16151a; --tinta:#ded8cd; --fraco:#8b8377; --linha:#2c2a31;
    --fundo:#0d0c10; --realce:rgba(214,166,88,.16); --sombra:rgba(0,0,0,.6);
  }
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overscroll-behavior:none}
body{background:var(--fundo);color:var(--tinta);font-family:var(--serif);
     -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
.tela{display:none;height:100dvh;flex-direction:column}
body[data-tela="capa"]    #capa,
body[data-tela="sumario"] #sumario,
body[data-tela="leitor"]  #leitor{display:flex}

/* ---------- capa ----------
   No celular a capa ocupa a tela inteira e os botões só aparecem ao rolar. No desktop ela
   fica grande de um lado e os botões do outro. A arte é o cartão de visita do livro — vale
   a tela toda.                                                                              */
#capa{display:none;flex-direction:column;background:#0b0a0d;color:#efe8db;
      overflow-y:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
body[data-tela="capa"] #capa{display:flex}
.capa-palco{display:flex;flex-direction:column;width:100%}

.capa-arte{position:relative;display:flex;align-items:center;justify-content:center;
  height:100dvh;width:100%;overflow:hidden;flex:0 0 auto}
.capa-arte img#capa-img{max-width:94%;max-height:92%;object-fit:contain;display:block;
  border-radius:2px;box-shadow:0 26px 70px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.07);
  position:relative;z-index:2}
/* a mesma arte, borrada e ampliada, preenche o resto da tela — nada de tarja preta */
.capa-arte img.fundo{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;
  filter:blur(38px) saturate(.75) brightness(.42);z-index:0}
.capa-arte::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse at center,transparent 35%,rgba(11,10,13,.72) 100%)}

.desce{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:3;
  appearance:none;border:0;background:none;color:rgba(239,232,219,.62);font-size:30px;
  line-height:1;padding:8px 22px;cursor:pointer;animation:respira 2.6s ease-in-out infinite}
@keyframes respira{0%,100%{transform:translateX(-50%) translateY(0);opacity:.55}
                   50%{transform:translateX(-50%) translateY(6px);opacity:1}}
@media (prefers-reduced-motion:reduce){ .desce{animation:none} }

.capa-txt{text-align:center;max-width:27rem;margin:0 auto;
  padding:clamp(28px,7vh,64px) 18px calc(34px + env(safe-area-inset-bottom))}
#capa h1{font-size:clamp(34px,11vw,54px);letter-spacing:.24em;margin:0 0 6px;font-weight:400}
#capa .autor{margin:0;letter-spacing:.09em;font-size:15px;color:#cdc4b4}
#capa .genero{margin:2px 0 26px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#8d8578}
.modos{display:grid;gap:10px}
.modo{appearance:none;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  color:#efe8db;font-family:inherit;padding:14px 18px;border-radius:10px;text-align:left;
  display:flex;flex-direction:column;gap:2px;cursor:pointer;transition:background .15s,border-color .15s}
.modo:hover,.modo:focus-visible{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);outline:none}
.modo b{font-size:17px;font-weight:600;letter-spacing:.02em}
.modo span{font-size:12.5px;color:#a49b8d}
.modo[disabled]{opacity:.42;cursor:default}
.recado{font-size:12.5px;color:#a49b8d;line-height:1.5;margin:14px 0 0}
.rodape{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6e675c;margin:22px 0 0}

/* desktop: capa grande de um lado, botões do outro, tudo numa tela só */
@media (min-width:900px) and (min-height:520px){
  #capa{overflow:hidden;align-items:center;justify-content:center}
  .capa-palco{flex-direction:row;align-items:center;justify-content:center;
    gap:clamp(34px,5vw,86px);height:100dvh;padding:0 clamp(24px,4vw,70px)}
  .capa-arte{height:min(90vh,1000px);width:auto;aspect-ratio:2/3;flex:0 1 auto;overflow:visible}
  .capa-arte img#capa-img{max-width:none;max-height:100%;height:100%;width:auto}
  .capa-arte img.fundo,.capa-arte::after,.desce{display:none}
  .capa-txt{text-align:left;margin:0;flex:0 0 auto;padding:0;width:min(26rem,34vw)}
  #capa h1{font-size:clamp(40px,3.4vw,58px)}
  .rodape{margin-top:26px}
}

/* ---------- barras ---------- */
.barra,.pe{display:flex;align-items:center;gap:8px;background:var(--papel);
  border-color:var(--linha);flex:0 0 auto}
.barra{padding:max(6px,env(safe-area-inset-top)) 8px 6px;border-bottom:1px solid var(--linha)}
.pe{flex-direction:column;gap:2px;padding:4px 8px max(4px,env(safe-area-inset-bottom));
    border-top:1px solid var(--linha)}
.barra .tit{flex:1;text-align:center;font-size:13px;letter-spacing:.1em;color:var(--fraco);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ic{appearance:none;background:none;border:0;color:var(--fraco);font-size:19px;line-height:1;
    padding:8px 11px;border-radius:8px;cursor:pointer;font-family:inherit}
.ic:hover{background:var(--realce);color:var(--tinta)}
.ic.grande{font-size:22px;padding:6px 10px}
.ic[aria-pressed="true"]{color:var(--tinta);background:var(--realce)}

/* ---------- sumário ---------- */
.rolo{flex:1;overflow-y:auto;background:var(--fundo)}
.lista{max-width:34rem;margin:0 auto;padding:18px 18px 40px}
.lista .parte{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--fraco);
  margin:26px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--linha)}
.lista .parte:first-child{margin-top:18px}
.lista .volta-capa{border-bottom:1px solid var(--linha);padding-bottom:14px}
.lista .volta-capa .nome{letter-spacing:.06em}
.lista button{display:flex;width:100%;gap:12px;align-items:baseline;appearance:none;border:0;
  background:none;color:var(--tinta);font-family:inherit;font-size:16px;text-align:left;
  padding:10px 8px;border-radius:8px;cursor:pointer}
.lista button:hover{background:var(--realce)}
.lista .num{font-size:12px;color:var(--fraco);min-width:1.6em;text-align:right;font-variant-numeric:tabular-nums}
.lista .nome{flex:1}
.lista .dur{font-size:11.5px;color:var(--fraco);font-variant-numeric:tabular-nums}

/* ---------- palco ---------- */
.palco{flex:1;position:relative;overflow:hidden;background:var(--fundo)}
/* as zonas de virar página acompanham a PÁGINA, não a janela: numa tela larga a página fica
   no meio, e zonas grudadas na borda da janela ficam longe demais para alguém achar. */
.borda{position:absolute;top:0;bottom:0;width:15%;max-width:120px;border:0;background:none;
  cursor:pointer;z-index:4;display:flex;align-items:center;justify-content:center;
  color:var(--fraco);font-family:inherit;font-size:30px;opacity:0;transition:opacity .18s}
.borda.esq{left:0} .borda.dir{right:0}
.borda:hover,.borda:focus-visible{opacity:.65;outline:none}
body[data-modo="rolagem"] .borda{display:none}

/* modo livro: páginas de verdade, uma por elemento */
.livro{position:absolute;inset:0;display:none;perspective:1800px}
body[data-modo="livro"] .livro{display:block}
.pag{position:absolute;inset:0;margin:auto;background:var(--papel);
  box-shadow:0 2px 22px var(--sombra);overflow:hidden;
  transform-origin:left center;backface-visibility:hidden;
  transition:transform .42s cubic-bezier(.4,0,.25,1),opacity .42s}
.pag .corpo{height:100%;overflow:hidden}
.pag.longe{transform:translateX(-6%) scale(.985);opacity:0;pointer-events:none}
.pag.virada{transform:rotateY(-168deg);opacity:0;pointer-events:none}
.pag.aqui{transform:none;opacity:1;z-index:2}

/* modo "só ouvir": nada de texto, só a capa, o capítulo e os controles */
.so-audio{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:26px;background:var(--papel);padding:24px}
body[data-uso="ouvir"] .so-audio{display:flex}
body[data-uso="ouvir"] .livro,body[data-uso="ouvir"] .rolagem,
body[data-uso="ouvir"] .borda,body[data-uso="ouvir"] .vira{display:none}
body[data-uso="ouvir"] #btn-modo{visibility:hidden}
.so-audio img{width:min(46vw,190px);aspect-ratio:2/3;object-fit:cover;border-radius:3px;
  box-shadow:0 14px 40px var(--sombra)}
.so-audio-txt{text-align:center}
.so-audio-txt .pt{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--fraco)}
.so-audio-txt .n{font-size:19px;margin-top:8px;letter-spacing:.02em}

/* modo "só ler": o tocador some de vez */
body[data-uso="ler"] #tocador{display:none}

/* tela travada: só a voz vira a página */
body[data-travado] .borda{pointer-events:none}
body[data-travado] .livro,body[data-travado] .rolagem{cursor:default}
body[data-travado] #btn-trava{color:var(--tinta);background:var(--realce)}

/* modo rolagem */
.rolagem{position:absolute;inset:0;display:none;overflow-y:auto;background:var(--papel)}
body[data-modo="rolagem"] .rolagem{display:block}
.rolagem .corpo{max-width:34rem;margin:0 auto;padding:22px 20px 60vh}

/* as folhas que abrem o livro: arte escura, dedicatória, epígrafe */
.pag.arte{background:#0b0a0d}
.pag.arte .corpo{padding:0;display:flex;align-items:center;justify-content:center}
img.folha-arte{width:100%;height:100%;object-fit:cover;display:block}
.pag.folha .corpo{display:flex;align-items:center;justify-content:center}
.corpo .dedic,.corpo .epig{text-align:center;max-width:22rem;margin:0 auto}
.corpo .dedic p{text-indent:0;font-style:italic;font-size:1.02em;line-height:1.7}
.corpo .epig .frase{text-indent:0;font-style:italic;font-size:1.06em;line-height:1.75}
.corpo .epig .autor{text-indent:0;margin-top:2.2em;font-size:.78em;letter-spacing:.1em;
  color:var(--fraco);text-transform:uppercase}
.rolagem .solta{margin:0 0 14vh}
.rolagem .solta.arte{margin:-22px -20px 12vh;background:#0b0a0d}
.rolagem .solta.arte img{width:100%;height:auto;display:block}
.rolagem .solta.folha{padding:12vh 0}

/* ---------- o texto ---------- */
.corpo{font-size:var(--medida);line-height:var(--entrelinha);text-align:justify;
  hyphens:auto;-webkit-hyphens:auto}
.corpo p{margin:0;text-indent:1.35em}
.corpo p.cont,.corpo p.primeiro{text-indent:0}
.corpo p[data-acende]{background:var(--realce);border-radius:3px;
  box-shadow:0 0 0 .18em var(--realce);transition:background .2s}
.abre{text-align:center;padding:14vh 0 6vh}
.abre .pt{font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--fraco);margin-bottom:10px}
.abre .n{font-size:26px;letter-spacing:.1em}
.abre .nome{font-size:13.5px;color:var(--fraco);margin-top:8px;font-style:italic}

/* ---------- pé / tocador ---------- */
.tocador{display:flex;align-items:center;gap:8px;width:100%;max-width:34rem}
.tocador[hidden]{display:none}
#linha{flex:1;accent-color:var(--tinta);height:22px}
.tempo{font-size:11.5px;color:var(--fraco);font-variant-numeric:tabular-nums;min-width:4.2em;text-align:right}
/* altura fixa: se o rodapé crescer depois de a página ter sido medida, o texto é cortado */
.paginacao{display:flex;align-items:center;justify-content:center;gap:4px;
  font-size:11px;color:var(--fraco);letter-spacing:.1em;font-variant-numeric:tabular-nums;
  height:26px;flex:0 0 auto}
.paginacao #conta-pag{min-width:5.5em;text-align:center}
.vira{appearance:none;background:none;border:0;color:var(--fraco);font-family:inherit;
  font-size:19px;height:22px;line-height:22px;padding:0 14px;border-radius:7px;cursor:pointer}
.vira:hover{background:var(--realce);color:var(--tinta)}
body[data-modo="rolagem"] .vira{visibility:hidden}

/* ---------- portão ---------- */
body[data-tela="portao"] #portao{display:flex}
#portao{align-items:center;justify-content:center;background:#0b0a0d;color:#efe8db;
        padding:24px 18px;overflow-y:auto}
.portao-caixa{max-width:24rem;text-align:center}
.cadeado{font-size:34px;margin-bottom:10px;opacity:.85}
#portao h2{font-size:21px;font-weight:400;letter-spacing:.03em;margin:0 0 14px}
#portao p{font-size:14.5px;line-height:1.6;color:#b3aa9c;margin:0 0 12px}
#portao b{color:#efe8db;font-weight:600}
.zap{display:inline-block;margin:2px 0 20px;padding:11px 20px;border-radius:999px;
  background:#1f6f4a;color:#fff;text-decoration:none;font-size:16px;letter-spacing:.03em}
.zap:hover{background:#26875a}
#form-senha{display:flex;gap:8px;justify-content:center}
#campo-senha{flex:0 1 9rem;font-family:inherit;font-size:17px;text-align:center;padding:10px;
  border-radius:8px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);color:#efe8db}
#campo-senha:focus{outline:none;border-color:rgba(255,255,255,.5)}
#form-senha button{font-family:inherit;font-size:15px;padding:10px 18px;border-radius:8px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#efe8db;cursor:pointer}
#form-senha button:hover{background:rgba(255,255,255,.16)}
.erro{color:#e2916f !important;font-size:13.5px;margin-top:12px !important}
.voltar{display:block;margin:26px auto 0;background:none;border:0;color:#8d8578;
  font-family:inherit;font-size:13px;cursor:pointer}
.lista button.trancado .nome{color:var(--fraco);font-style:italic}
.lista button.trancado .dur::after{content:"🔒";font-style:normal}

/* ---------- aviso ---------- */
.aviso{position:fixed;left:50%;bottom:calc(64px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:var(--tinta);color:var(--papel);padding:9px 15px;border-radius:999px;font-size:13px;
  z-index:30;max-width:88vw;text-align:center;box-shadow:0 6px 24px var(--sombra)}

@media (min-width:760px){
  :root{--medida:18.5px}
  .pag{width:min(92%,42rem)}
  /* encostadas na página, e não na janela */
  .borda.esq{left:calc(50% - min(46%, 21rem))}
  .borda.dir{right:calc(50% - min(46%, 21rem))}
  .pag .corpo{padding:34px 40px}
  .rolagem .corpo{padding:34px 24px 60vh}
}
@media (max-width:759px){
  .pag .corpo{padding:18px 20px}
}
@media (prefers-reduced-motion:reduce){ .pag{transition:none} }