/* ═══════════════════════════════════════════════════════════════════════════
   UNIVERSO — O Arquivo do Eterno · a parte "livro" virou site
   Paleta tirada do jogo (css/jogo.css): ouro, éter, sangue, papel, tinta.
   Regra de ouro do projeto: legibilidade primeiro — o texto vive no papel.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --ouro:#c9a961; --ouro-forte:#f2d99a; --ouro-fraco:rgba(201,169,97,.42);
  --eter:#49cfc9; --sangue:#c2513a;
  --papel:#efe3c8; --papel-2:#e5d6b4; --tinta:#191510; --tinta-suave:#4a3f2e;
  --noite:#070907; --noite-2:#0d110d;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --ui:"Trebuchet MS",Verdana,sans-serif;
  --largura-leitura: 44rem;
}

*{ box-sizing:border-box; }
/* celular: sem o atraso de 300ms do toque e sem o retângulo cinza ao tocar.
   E quando o menu de tópicos está aberto, o FUNDO não pode rolar junto (era o "bugado"). */
html, body{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
body.travado{ overflow:hidden; }
html,body{ margin:0; padding:0; min-height:100%; }
body{
  background:var(--noite); color:#e9dcc0; font-family:var(--ui);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{  /* a textura de fundo do jogo, bem apagada */
  content:""; position:fixed; inset:0; z-index:-2;
  background:url('../assets/menu-fundo.webp') center/cover no-repeat fixed;
  opacity:.30; filter:saturate(.75) brightness(.75);
}
body::after{  /* vinheta + brilho de éter */
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(73,207,201,.10), transparent 70%),
    radial-gradient(90% 70% at 50% 110%, rgba(201,169,97,.10), transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 40%, rgba(0,0,0,.75) 100%);
}
a{ color:var(--ouro-forte); }

/* partículas de Éter subindo — o "efeito" pedido, de leve */
.eter{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.eter i{
  position:absolute; bottom:-14px; width:3px; height:3px; border-radius:50%;
  background:rgba(242,217,154,.75); box-shadow:0 0 8px 2px rgba(242,217,154,.45);
  animation:sobe linear infinite;
}
@keyframes sobe{
  0%{ transform:translateY(0) scale(.6); opacity:0; }
  12%{ opacity:.85; }
  100%{ transform:translateY(-104vh) scale(1); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .eter{ display:none; } }

/* ───────────────────────────── topo ───────────────────────────── */
.topo{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:14px;
  padding:12px clamp(14px,4vw,40px);
  background:linear-gradient(180deg, rgba(7,9,7,.96), rgba(7,9,7,.72));
  border-bottom:1px solid var(--ouro-fraco); backdrop-filter:blur(7px);
}
.topo .marca{
  font-family:var(--serif); font-size:1.05rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ouro-forte); text-decoration:none; white-space:nowrap;
}
.topo .marca small{ display:block; font-family:var(--ui); font-size:.6rem; letter-spacing:.3em; opacity:.6; }
.topo .espaco{ flex:1; }
.topo a.voltar{
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  border:1px solid var(--ouro-fraco); border-radius:999px; padding:7px 15px; color:var(--ouro);
  transition:.25s; white-space:nowrap; display:inline-block;
}
@media (max-width:460px){
  .topo{ gap:8px; padding:10px 12px; }
  .topo .marca{ font-size:.86rem; letter-spacing:.1em; }
  .topo a.voltar{ padding:5px 9px; font-size:.6rem; letter-spacing:.04em; }
}
.topo a.voltar:hover{ background:rgba(201,169,97,.14); color:var(--ouro-forte); }

/* ───────────────────────────── telas ───────────────────────────── */
.tela{ display:none; }
.tela.ativa{ display:block; animation:surgir .5s ease both; }
@keyframes surgir{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* ═════════ TELA 1 — A ESTANTE (o Principal e as DLCs) ═════════ */
#estante{ padding:clamp(26px,5vw,64px) clamp(16px,4vw,40px) 80px; }
.chamada{ text-align:center; max-width:56rem; margin:0 auto clamp(28px,5vw,52px); }
.chamada h1{
  font-family:var(--serif); font-weight:400; margin:0 0 10px;
  font-size:clamp(1.9rem,6vw,3.4rem); color:var(--ouro-forte);
  text-shadow:0 3px 26px rgba(201,169,97,.30); letter-spacing:.02em;
}
.chamada p{ margin:0; opacity:.72; font-size:clamp(.86rem,2.5vw,1rem); line-height:1.7; }
.chamada .filete{
  width:min(340px,70%); height:1px; margin:22px auto 0;
  background:linear-gradient(90deg,transparent,var(--ouro),transparent);
}

.prateleira{
  display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center;
  gap:clamp(18px,3.4vw,34px); max-width:78rem; margin:0 auto;
}
.livro{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  flex:0 1 300px; max-width:min(320px,86vw); gap:12px;
  padding:26px 20px 30px; text-align:center; cursor:pointer; color:inherit; text-decoration:none;
  background:linear-gradient(180deg, rgba(15,18,15,.86), rgba(9,11,9,.94));
  border:1px solid var(--ouro-fraco); border-radius:14px;
  transition:transform .32s cubic-bezier(.2,.8,.3,1), box-shadow .32s, border-color .32s;
  box-shadow:0 16px 40px rgba(0,0,0,.56);
}
.livro:hover, .livro:focus-visible{
  transform:translateY(-7px); border-color:var(--ouro);
  box-shadow:0 26px 60px rgba(0,0,0,.66), 0 0 46px rgba(201,169,97,.20);
  outline:none;
}
.livro .capa-caixa{
  width:min(186px,58%); aspect-ratio:2/3; border-radius:6px; overflow:hidden;
  border:1px solid rgba(201,169,97,.5); box-shadow:0 12px 30px rgba(0,0,0,.62);
  background:#0b0d0b;
}
.livro .capa-caixa img{ width:100%; height:100%; object-fit:cover; display:block; }
.livro h2{ font-family:var(--serif); font-weight:400; margin:2px 0 0; font-size:1.32rem; color:var(--ouro-forte); }
.livro .sub{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ouro); opacity:.8; }
.livro .desc{ font-size:.86rem; line-height:1.6; opacity:.66; margin:0; }
.livro .selo-conjunto{
  position:absolute; top:12px; left:12px; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; border:1px solid var(--ouro-fraco); color:var(--ouro); opacity:.85;
}
.livro.futuro{ cursor:default; border-style:dashed; opacity:.62; }
.livro.futuro:hover{ transform:none; box-shadow:0 16px 40px rgba(0,0,0,.56); border-color:var(--ouro-fraco); }
.livro.futuro .capa-caixa{ display:flex; align-items:center; justify-content:center; font-size:2.4rem; color:var(--ouro-fraco); }

/* ═════════ TELA 2 — O ÍNDICE (capa + tópicos) ═════════ */
#indice{ padding:clamp(22px,4vw,52px) clamp(16px,4vw,40px) 80px; }
.indice-grade{
  display:grid; gap:clamp(22px,4vw,50px); align-items:start;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  max-width:76rem; margin:0 auto;
}
@media (max-width:820px){ .indice-grade{ grid-template-columns:1fr; justify-items:center; } }
.capa-grande{
  position:sticky; top:86px; width:100%; max-width:320px;
  border-radius:8px; overflow:hidden; border:1px solid rgba(201,169,97,.5);
  box-shadow:0 20px 50px rgba(0,0,0,.66);
}
.capa-grande img{ width:100%; display:block; }
.lista-caps h2{
  font-family:var(--serif); font-weight:400; margin:0 0 6px; font-size:1.6rem; color:var(--ouro-forte);
}
.lista-caps .dica{ font-size:.84rem; opacity:.86; color:#d8cba9; margin:0 0 20px; }
.cap-bloco{
  border:1px solid rgba(201,169,97,.24); border-radius:12px; overflow:hidden; margin-bottom:14px;
  background:linear-gradient(180deg, rgba(13,17,13,.72), rgba(9,11,9,.86));
}
.cap-topo{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:15px 17px; background:none; border:0; color:inherit; font:inherit; cursor:pointer;
  transition:.24s;
}
.cap-topo:hover{ background:rgba(201,169,97,.09); }
.cap-num{
  flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--ouro-fraco); font-family:var(--serif); font-size:1.06rem; color:var(--ouro-forte);
}
.cap-topo .titulo{ font-family:var(--serif); font-size:1.1rem; color:var(--ouro-forte); }
.cap-topo .n{ display:block; font-family:var(--ui); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; opacity:.55; margin-top:3px; }
.cap-topo .seta{ margin-left:auto; color:var(--ouro); transition:transform .3s; opacity:.75; }
.cap-bloco.aberto .seta{ transform:rotate(90deg); }
.cap-secoes{ display:none; padding:0 12px 12px; }
.cap-bloco.aberto .cap-secoes{ display:block; }
.cap-secoes ol{ margin:0; padding-left:20px; }
.cap-secoes li{ margin:2px 0; }
.cap-secoes a{
  display:inline-block; padding:7px 10px; border-radius:7px; text-decoration:none;
  color:#ded0ae; font-size:.93rem; transition:.2s;
}
.cap-secoes a:hover{ background:rgba(201,169,97,.14); color:var(--ouro-forte); transform:translateX(3px); }
.cap-secoes a.viva{ color:var(--ouro-forte); }

/* ═════════ TELA 3 — A LEITURA ═════════ */
#leitura{ display:none; }
#leitura.ativa{ display:grid; grid-template-columns:minmax(0,262px) minmax(0,1fr); }
@media (max-width:980px){ #leitura.ativa{ grid-template-columns:1fr; } }

/* a lista de tópicos: sai pro canto e não atrapalha */
.lateral{
  position:sticky; top:58px; align-self:start; height:calc(100vh - 58px); overflow-y:auto;
  padding:20px 8px 40px 16px; border-right:1px solid rgba(201,169,97,.2);
  background:linear-gradient(180deg, rgba(9,12,9,.72), rgba(7,9,7,.5));
  scrollbar-width:thin; scrollbar-color:var(--ouro-fraco) transparent;
}
.lateral::-webkit-scrollbar{ width:7px; }
.lateral::-webkit-scrollbar-thumb{ background:var(--ouro-fraco); border-radius:9px; }
.lateral h3{
  font-family:var(--ui); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ouro); opacity:.72; margin:16px 0 7px; padding-left:9px;
}
.lateral h3:first-of-type{ margin-top:2px; }
.lateral a{
  display:block; padding:11px 12px; border-radius:8px; text-decoration:none; font-size:.9rem;
  color:#cfc2a2; line-height:1.35; transition:background .12s; border-left:2px solid transparent;
}
.lateral a:active{ background:rgba(201,169,97,.2); }
@media (hover:hover){ .lateral a:hover{ background:rgba(201,169,97,.11); color:var(--ouro-forte); } }
.lateral a.viva{
  background:rgba(201,169,97,.17); color:var(--ouro-forte); border-left-color:var(--ouro);
  font-weight:600;
}
@media (max-width:980px){
  .lateral{
    position:fixed; inset:0 auto 0 0; width:min(86vw,340px); z-index:60; height:100vh;
    transform:translateX(-102%); transition:transform .2s cubic-bezier(.2,.8,.3,1);
    overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    border-right:1px solid var(--ouro); box-shadow:26px 0 60px rgba(0,0,0,.7);
    background:rgba(7,10,7,.98); padding-top:64px;
  }
  .lateral.aberta{ transform:none; }
  .cortina.visivel{ display:block; }
}
/* a cortina do menu do celular: FORA do media query.
   Se ela ficasse sem display:none em tela grande, entraria como item do grid do #leitura
   e roubaria a coluna do texto (o pergaminho caiu para 150px — medido em 02/10). */
.cortina{ display:none; position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.62); }
.botao-topicos{
  display:none; position:sticky; top:60px; z-index:30; margin:12px 14px 4px;
  align-items:center; gap:9px; padding:13px 20px; border-radius:999px;
  background:rgba(11,14,11,.97); border:1px solid var(--ouro); color:var(--ouro-forte);
  font:inherit; font-size:.88rem; cursor:pointer; box-shadow:0 8px 22px rgba(0,0,0,.5);
  transition:transform .12s, background .12s;
}
.botao-topicos:active{ transform:scale(.94); background:rgba(201,169,97,.22); }
@media (max-width:980px){ .botao-topicos{ display:inline-flex; } }

/* o pergaminho: onde o texto vive */
.leitura-caixa{ padding:clamp(18px,4vw,44px) clamp(16px,4.5vw,56px) 100px; min-width:0; }
.pergaminho{
  position:relative; max-width:var(--largura-leitura); margin:0 auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0)),
    var(--papel);
  color:var(--tinta); border-radius:5px; padding:clamp(26px,5vw,58px) clamp(20px,5vw,62px);
  box-shadow:0 24px 60px rgba(0,0,0,.6), inset 0 0 90px rgba(120,90,40,.15);
  font-family:var(--serif); font-size:clamp(1.03rem,2.6vw,1.13rem); line-height:1.78;
}
.pergaminho::before{  /* a borda dourada fina */
  content:""; position:absolute; inset:7px; border:1px solid rgba(122,95,47,.28);
  border-radius:3px; pointer-events:none;
}
.pergaminho .parte{
  font-family:var(--ui); font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:#8a6f3c; margin:0 0 12px;
}
.pergaminho h1{
  font-family:var(--serif); font-weight:400; margin:0 0 8px;
  font-size:clamp(1.55rem,4.6vw,2.25rem); line-height:1.2; color:#2a2114;
}
.pergaminho .regra-topo{
  width:150px; height:1px; margin:18px 0 26px;
  background:linear-gradient(90deg,#a3853f,transparent);
}
.pergaminho h2{
  font-family:var(--serif); font-weight:400; font-size:1.32rem; color:#3a2d18;
  margin:2.1em 0 .55em; padding-bottom:.24em; border-bottom:1px solid rgba(122,95,47,.26);
}
.pergaminho h3{
  font-family:var(--ui); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  color:#7a5f2b; margin:1.8em 0 .5em;
}
.pergaminho p{ margin:0 0 1.06em; text-align:left; }   /* ← NUNCA justify: o Chrome não hifeniza pt-BR */
.pergaminho p:first-of-type::first-letter{
  float:left; font-size:3.05em; line-height:.82; padding:.06em .1em 0 0; color:#8a6f3c;
}
.pergaminho p:first-of-type{ }
.pergaminho ul, .pergaminho ol{ margin:0 0 1.1em; padding-left:1.35em; }
.pergaminho li{ margin:.42em 0; }
.pergaminho strong{ color:#2a2114; }
.pergaminho em{ color:#4a3a20; }
.pergaminho blockquote{
  margin:1.5em 0; padding:.7em 1.15em; border-left:3px solid #a3853f;
  background:rgba(163,133,63,.10); font-style:italic; color:#4a3b21;
}
.pergaminho code{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.88em;
  background:rgba(122,95,47,.14); padding:.12em .42em; border-radius:4px;
}
.pergaminho .tab{ overflow-x:auto; margin:0 0 1.3em; }
.pergaminho table{ border-collapse:collapse; width:100%; font-size:.93em; }
.pergaminho th, .pergaminho td{ border:1px solid rgba(122,95,47,.34); padding:.5em .68em; text-align:left; }
.pergaminho th{ background:rgba(163,133,63,.18); font-family:var(--ui); font-size:.82em; letter-spacing:.06em; }

/* a imagem da seção, dentro do pergaminho.
   Duas regras aprendidas na marra (02/10): (a) teto de altura — sem ele a arte ocupa a tela
   inteira e o texto só aparece depois da dobra; (b) centralizada quando é vertical (retrato),
   senão fica um poste estreito colado na esquerda. */
.ilustra{
  width:fit-content; max-width:100%; margin:0 auto 1.8em; border-radius:3px; overflow:hidden;
  border:1px solid rgba(122,95,47,.4); box-shadow:0 10px 26px rgba(60,44,20,.24);
  background:rgba(122,95,47,.07);
}
.ilustra img{ max-width:100%; max-height:min(48vh,470px); width:auto; display:block; }
@media (max-width:700px){ .ilustra img{ max-height:36vh; } }
.ilustra figcaption{
  font-family:var(--ui); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:#7a5f2b; padding:9px 12px 10px; background:rgba(163,133,63,.12); text-align:center;
  border-top:1px solid rgba(122,95,47,.28);
}

/* navegação de seção */
.passos{
  display:flex; gap:12px; justify-content:space-between; align-items:center;
  max-width:var(--largura-leitura); margin:22px auto 0;
}
.passos a{
  flex:1; padding:13px 16px; border-radius:9px; text-decoration:none;
  border:1px solid var(--ouro-fraco); background:rgba(11,14,11,.72);
  color:var(--ouro-forte); font-size:.86rem; line-height:1.35; transition:.24s;
}
.passos a:hover{ background:rgba(201,169,97,.15); border-color:var(--ouro); }
.passos a.prox{ text-align:right; }
.passos a.vazio{ visibility:hidden; }

.rodape{
  text-align:center; padding:40px 18px 56px; font-size:.76rem; opacity:.42; letter-spacing:.09em;
}
.rodape .filete{ width:min(260px,60%); height:1px; margin:0 auto 20px;
  background:linear-gradient(90deg,transparent,var(--ouro-fraco),transparent); }

/* aviso de DLC futura */
.aviso-dlc{
  max-width:56rem; margin:clamp(30px,6vw,58px) auto 0; padding:20px 22px; text-align:center;
  border:1px dashed var(--ouro-fraco); border-radius:12px; background:rgba(11,14,11,.5);
}
.aviso-dlc h3{ font-family:var(--serif); font-weight:400; color:var(--ouro-forte); margin:0 0 6px; font-size:1.1rem; }
.aviso-dlc p{ margin:0; font-size:.85rem; opacity:.62; line-height:1.65; }