/* Estante Vulkares — a porta de entrada dos livros. Escuro por padrão (é uma estante à noite,
   sob um céu); o claro é escolha do visitante. Mesmas cores e mesma letra do AMA.         */
@font-face{font-family:"EB Garamond";src:url(fontes/EBGaramond-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fontes/EBGaramond-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fontes/EBGaramond-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fontes/EBGaramond-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --fundo:#0b0a0d; --papel:#15141a; --tinta:#efe8db; --fraco:#8d8578; --linha:#2b2931;
  --ouro:#c9a35c; --sombra:rgba(0,0,0,.72); --veu:rgba(5,4,8,.74);
  --serif:"EB Garamond","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","Liberation Serif",Georgia,serif;
  --esp:26px;            /* a grossura do livro */
}
:root[data-tema="claro"]{
  --fundo:#e7e0d2; --papel:#f6f1e6; --tinta:#1d1a16; --fraco:#7d7466; --linha:#d6cdbb;
  --ouro:#9a7a3a; --sombra:rgba(0,0,0,.28); --veu:rgba(40,34,26,.5);
}
*{box-sizing:border-box}
html{background:var(--fundo)}
body{margin:0;min-height:100dvh;background:var(--fundo);color:var(--tinta);font-family:var(--serif);
     font-size:18px;line-height:1.5;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
button{font-family:inherit}

/* o céu: pontos de luz devagar, só no escuro */
#ceu{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9}
:root[data-tema="claro"] #ceu{display:none}
.topo,main,.rodape{position:relative;z-index:1}

/* ---------- cabeçalho ---------- */
.topo{display:flex;align-items:center;justify-content:space-between;gap:12px;
      padding:calc(14px + env(safe-area-inset-top)) 18px 6px;max-width:1180px;margin:0 auto}
.marca{display:flex;flex-direction:column;text-decoration:none;color:inherit;line-height:1.1}
.marca b{font-weight:500;letter-spacing:.34em;font-size:17px}
.marca small{color:var(--fraco);font-size:13px;letter-spacing:.04em;margin-top:4px}
.acoes{display:flex;gap:8px;align-items:center}
.botao,.acoes button{appearance:none;border:1px solid var(--linha);background:transparent;color:inherit;font:inherit;
  border-radius:999px;padding:7px 15px;cursor:pointer;font-size:15px;text-decoration:none;line-height:1.3;
  transition:background .15s,border-color .15s,color .15s;display:inline-flex;align-items:center;justify-content:center}
.acoes button.icone{width:38px;height:38px;padding:0;font-size:18px}
.botao:hover,.acoes button:hover,.botao:focus-visible,.acoes button:focus-visible{background:rgba(127,127,127,.12);border-color:var(--fraco);outline:none}
.primario{background:var(--tinta);color:var(--fundo);border-color:var(--tinta)}
.primario:hover,.primario:focus-visible{background:var(--ouro);border-color:var(--ouro);color:#0b0a0d}
.link{appearance:none;background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;
      text-underline-offset:4px;text-decoration-color:var(--fraco);cursor:pointer}
.link:hover{text-decoration-color:var(--ouro)}

/* ---------- abertura ---------- */
.abertura{max-width:1180px;margin:0 auto;padding:clamp(22px,6vh,64px) 18px clamp(18px,4vh,40px);text-align:center}
.abertura h1{font-weight:400;font-size:clamp(28px,5vw,48px);letter-spacing:.03em;margin:0 0 10px;line-height:1.18}
.abertura p{margin:0 auto;max-width:34rem;color:var(--fraco);font-size:clamp(16px,2vw,19px)}

/* ---------- a estante ---------- */
.estante{max-width:1180px;margin:0 auto;padding:16px 18px 70px;display:grid;
  gap:clamp(40px,7vw,72px) clamp(22px,4vw,48px);grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  justify-items:center;align-items:start}
.estante .vazio{grid-column:1/-1;color:var(--fraco);text-align:center}
.livro{width:100%;max-width:290px;display:flex;flex-direction:column;align-items:center;gap:18px;
       transition:opacity .5s,transform .5s}
@media (max-width:560px){
  .estante{grid-template-columns:1fr;gap:64px}
  .livro{max-width:min(76vw,320px)}
}

/* o volume: uma caixa com seis lados, em perspectiva. A capa é a "tampa", que abre ao toque. */
.volume{display:block;width:100%;aspect-ratio:2/3;position:relative;perspective:1500px;text-decoration:none;
  color:inherit;appearance:none;border:0;background:none;padding:0;cursor:pointer;font:inherit;outline:none}
.volume:focus-visible .caixa{outline:2px solid var(--ouro);outline-offset:8px}
.volume::after{content:"";position:absolute;left:4%;right:4%;bottom:-24px;height:28px;z-index:-1;
  background:radial-gradient(ellipse at center,var(--sombra) 0%,transparent 70%);filter:blur(5px);
  transition:transform .65s,opacity .65s}
.caixa{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .65s cubic-bezier(.2,.75,.2,1)}
@media (hover:hover) and (pointer:fine){
  .caixa{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,9deg))}
  .volume:hover .caixa{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,24deg)) translateY(-10px)}
  .volume:hover::after{transform:translateY(10px) scaleX(1.04);opacity:.85}
}
.tampa,.frente,.verso,.tras,.dentro{position:absolute;inset:0;border-radius:2px 7px 7px 2px}
.tampa{transform-style:preserve-3d;transform:translateZ(calc(var(--esp) / 2));transform-origin:left center;
       transition:transform .75s cubic-bezier(.4,0,.2,1)}
.frente,.verso,.tras,.dentro{backface-visibility:hidden}
.verso,.dentro{visibility:hidden}          /* só aparecem quando o livro abre: em repouso vazavam por cima da capa */
.livro.abrindo .verso,.livro.abrindo .dentro{visibility:visible}
.frente{overflow:hidden;background:#1a1720;
  box-shadow:0 22px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.frente img{width:100%;height:100%;object-fit:cover;display:block}
.frente .brilho{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 26%,rgba(0,0,0,.07) 100%)}
.frente::before{content:"";position:absolute;top:0;bottom:0;left:7px;width:3px;z-index:2;pointer-events:none;
  background:linear-gradient(to right,rgba(0,0,0,.26),rgba(0,0,0,0))}     /* o vinco junto à lombada */
.verso{transform:rotateY(180deg);background:#efe9dc}                        /* o lado de dentro da capa */
.dentro{transform:translateZ(calc(var(--esp) / 2 - 1px));background:#f4efe4;color:#3a332b;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:14%}
.dentro b{font-weight:500;letter-spacing:.2em;font-size:clamp(17px,2.2vw,24px);line-height:1.3}
.dentro small{letter-spacing:.08em;font-size:13px;color:#7d7466}
.tras{transform:translateZ(calc(var(--esp) / -2)) rotateY(180deg);background:#17141c}
.lombada{position:absolute;top:0;bottom:0;left:calc(var(--esp) / -2);width:var(--esp);transform:rotateY(-90deg);
  background:linear-gradient(to right,#0e0c11,#2b2632 45%,#1a1720);border-radius:2px 0 0 2px;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.lombada span{writing-mode:vertical-rl;transform:rotate(180deg);color:#cdc4b4;font-size:11px;letter-spacing:.3em;
  white-space:nowrap;opacity:.85;text-transform:uppercase}
.folhas{position:absolute;top:3px;bottom:3px;right:calc(var(--esp) / -2);width:var(--esp);transform:rotateY(90deg);
  background:repeating-linear-gradient(to right,#ece5d6 0 1px,#cfc6b4 1px 2px);border-radius:0 2px 2px 0}

/* capa provisória para livro que ainda não tem arte: pano escuro, moldura fina, título gravado */
.frente.sem-arte{--tom:#2a2530;display:grid;place-items:center;padding:9%;
  background:radial-gradient(120% 90% at 30% 10%,color-mix(in srgb,var(--tom) 78%,#fff 10%) 0%,var(--tom) 48%,color-mix(in srgb,var(--tom) 70%,#000) 100%)}
.frente.sem-arte .moldura{border:1px solid rgba(239,232,219,.38);outline:1px solid rgba(239,232,219,.13);outline-offset:5px;
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:14% 9%;text-align:center;color:#e9e1d2}
.frente.sem-arte .estrela{color:var(--ouro);font-size:18px;line-height:1}
.frente.sem-arte .titulo{font-weight:500;font-size:clamp(16px,2.1vw,21px);letter-spacing:.14em;text-transform:uppercase;line-height:1.35}
.frente.sem-arte small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(239,232,219,.62);line-height:1.6}
.frente.sem-arte i{font-style:normal;font-size:12px;letter-spacing:.16em;margin-top:auto;color:rgba(239,232,219,.72)}
.sem-arte.mini{aspect-ratio:2/3;width:min(130px,38vw);display:grid;place-items:center;padding:8%;color:#e9e1d2;text-align:center;
  border-radius:2px 6px 6px 2px;box-shadow:0 18px 40px rgba(0,0,0,.6);
  background:radial-gradient(120% 90% at 30% 10%,color-mix(in srgb,var(--tom,#2a2530) 78%,#fff 10%) 0%,var(--tom,#2a2530) 48%,color-mix(in srgb,var(--tom,#2a2530) 70%,#000) 100%)}
.sem-arte.mini b{font-weight:500;font-size:15px;letter-spacing:.12em;text-transform:uppercase;line-height:1.35;
  border:1px solid rgba(239,232,219,.38);padding:22px 10px;width:100%;height:100%;display:grid;place-items:center}

/* abrindo o livro: a tampa gira, o resto da estante recua, e a página vai para o aplicativo */
.livro.abrindo{z-index:5}
.livro.abrindo .caixa{transform:rotateX(0deg) rotateY(0deg) translateZ(30px) scale(1.03)}
.livro.abrindo .tampa{transform:translateZ(calc(var(--esp) / 2)) rotateY(-150deg)}
.livro.abrindo .volume::after{opacity:.4}
body.saindo .livro:not(.abrindo){opacity:.22;transform:scale(.97)}
@media (prefers-reduced-motion:reduce){
  .caixa,.tampa,.livro,.volume::after{transition:none !important}
}

/* ---------- legenda ---------- */
.legenda{text-align:center;max-width:300px}
.legenda h2{margin:0;font-weight:500;font-size:22px;letter-spacing:.1em;line-height:1.25}
.legenda .serie{margin:3px 0 0;font-size:12px;letter-spacing:.08em;color:var(--fraco);text-transform:uppercase}
.legenda .genero{margin:4px 0 0;color:var(--fraco);font-size:15px}
.legenda .estado{display:inline-block;margin:9px 0 0;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  padding:4px 12px 3px;border-radius:999px;border:1px solid var(--linha);color:var(--fraco)}
.livro[data-estado="disponivel"] .estado{color:var(--ouro);border-color:color-mix(in srgb,var(--ouro) 55%,transparent)}
.legenda .sobre{display:block;margin:10px auto 0;appearance:none;background:none;border:0;color:var(--tinta);font:inherit;
  font-size:15px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--fraco);cursor:pointer;padding:4px 8px}
.legenda .sobre:hover{text-decoration-color:var(--ouro)}

/* ---------- rodapé ---------- */
.rodape{max-width:1180px;margin:0 auto;padding:22px 18px calc(28px + env(safe-area-inset-bottom));color:var(--fraco);
  font-size:15px;text-align:center;border-top:1px solid var(--linha)}
.rodape p{margin:0 0 6px}
.rodape b{font-weight:500;color:var(--tinta)}
.rodape .miudo{font-size:12px;letter-spacing:.08em;opacity:.7}

/* ---------- diálogos ---------- */
dialog{border:0;padding:0;background:transparent;color:var(--tinta);max-width:min(94vw,780px);width:100%;max-height:94dvh;margin:auto}
dialog::backdrop{background:var(--veu);backdrop-filter:blur(6px)}
.caixa-dialogo{background:var(--papel);border:1px solid var(--linha);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.caixa-dialogo.texto{padding:24px 26px 20px}
.caixa-dialogo.texto h2{margin:0 0 10px;font-weight:500;font-size:26px;letter-spacing:.06em}
.caixa-dialogo.texto p{margin:0 0 .7em}
.tecla{border:1px solid var(--linha);border-radius:6px;padding:1px 7px;font-size:.92em;white-space:nowrap}
.ficha{display:grid;grid-template-columns:1fr}
@media (min-width:700px){.ficha{grid-template-columns:240px 1fr}}
.ficha-capa{background:#0b0a0d;display:flex;align-items:center;justify-content:center;padding:16px}
@media (min-width:700px){.ficha-capa{padding:24px}}
.ficha-capa img{width:min(130px,38vw);aspect-ratio:2/3;object-fit:cover;border-radius:2px 6px 6px 2px;box-shadow:0 18px 40px rgba(0,0,0,.6);display:block}
@media (min-width:700px){.ficha-capa img,.sem-arte.mini{width:100%}}
.ficha-texto{padding:22px 24px 20px;overflow:auto;max-height:min(94dvh,760px)}
@media (max-width:699px){.ficha-texto{max-height:calc(94dvh - 240px)}}
.ficha-texto h2{margin:0;font-weight:500;font-size:28px;letter-spacing:.08em;line-height:1.2}
.ficha-texto .serie{margin:3px 0 0;font-size:12px;letter-spacing:.08em;color:var(--fraco);text-transform:uppercase}
.ficha-texto .genero{margin:6px 0 14px;color:var(--fraco);font-size:15px}
.sinopse p{margin:0 0 .75em;text-align:left}
.ficha-ficha{list-style:none;padding:0;margin:12px 0 6px;display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--fraco);font-size:15px}
.ficha-ficha li::before{content:"· ";color:var(--ouro)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.chip{border:1px solid var(--linha);border-radius:999px;padding:3px 12px;font-size:14px;color:var(--fraco)}
.aviso{font-size:15px;color:var(--fraco);margin:0 0 14px;border-left:2px solid var(--ouro);padding-left:10px}
.ficha-acoes{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.fechar{margin-left:auto}