/* Fontes = as do site (/fonts/fonts.css: --titulo, --texto, --mono). Guia de classes do Dofus: um livro aberto.
   Página da esquerda = a classe (nome, arte, setas trocam a classe); direita = conteúdo paginado (perfil só com símbolos / builds e feitiços com texto).
   Cores da classe (60/30/10) entram por --c60/--c30/--c10 no JS; o papel animado (papel.js) desenha o degradê + fibras num canvas atrás de cada página. */
:root { --moldura:#141414; --tinta:#f3dcc8; --tinta-fraca:rgba(243,220,200,.7); --rosa:#e9a7a2; --pagina:#6f6a32; --pagina-2:#5c5826; --c60:#4f8a2a; --c30:#b43a1e; --c10:#e08a1a; --dourado:#e4c04a; }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--moldura); color:var(--tinta); font:400 14px/1.5 var(--texto); letter-spacing:var(--texto-esp); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:12px 16px; overflow:hidden; -webkit-font-smoothing:antialiased; }
.voltar { position:fixed; top:10px; left:14px; z-index:5; color:var(--tinta-fraca); text-decoration:none; font:400 12px/1 var(--texto); letter-spacing:.06em; }
.voltar:hover { color:var(--tinta); }
.dica { margin:0; font:400 11px/1 var(--mono); letter-spacing:.08em; color:rgba(243,220,200,.4); }
.livro { width:min(100%, calc((100vh - 60px) * 16 / 9)); aspect-ratio:16/9; max-height:calc(100vh - 60px); display:grid; grid-template-columns:1fr 1fr; border-radius:6px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.6); position:relative; }
.pag { position:relative; min-height:0; }
.pag > .papel { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.pag > *:not(.papel) { position:relative; z-index:1; }
/* página da esquerda: tudo centralizado */
.esq { background:linear-gradient(100deg, var(--c30) 0%, color-mix(in srgb, var(--c30) 55%, var(--c60)) 55%, var(--c60) 100%); display:grid; grid-template-rows:auto auto 1fr auto; padding:3% 4% 3% 7%; align-items:center; justify-items:center; box-shadow:inset -40px 0 50px -40px rgba(0,0,0,.55); }
.fitas { position:absolute !important; left:0; top:0; bottom:0; width:4.5%; z-index:1; pointer-events:none; clip-path:polygon(0 0, 100% 6%, 100% 94%, 0 100%);
  background:linear-gradient(to bottom, var(--c60) 0 60%, var(--c30) 60% 90%, var(--c10) 90% 100%); opacity:.9; }   /* 60 / 30 / 10 */
.chev { width:12%; aspect-ratio:2/1; background:none; border:0; padding:0; cursor:pointer; position:relative; opacity:.8; }
.chev::before { content:""; position:absolute; inset:0; background:currentColor; color:rgba(60,15,5,.75); clip-path:polygon(50% 0, 100% 100%, 86% 100%, 50% 24%, 14% 100%, 0 100%); }
.chev.baixo::before { clip-path:polygon(0 0, 14% 0, 50% 76%, 86% 0, 100% 0, 50% 100%); }
.chev:hover { opacity:1; }
.chev:active { transform:scale(.96); }
.chev[disabled] { opacity:.2; cursor:default; }
h1 { margin:0; text-align:center; font:400 clamp(26px, 5.4vw, 80px)/1 var(--titulo); letter-spacing:var(--titulo-esp); color:color-mix(in srgb, var(--rosa) 72%, var(--c30)); text-shadow:2px 3px 0 color-mix(in srgb, var(--c30) 55%, #2a0a05), 0 0 18px rgba(0,0,0,.25); }
.arte { margin:0; width:100%; height:100%; min-height:0; display:grid; place-items:center; }
.arte img { max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 10px 14px rgba(0,0,0,.45)); }
.arte figcaption { font:400 12px/1.4 var(--mono); letter-spacing:.06em; color:rgba(255,235,220,.55); text-align:center; padding:1.5rem; border:1px dashed rgba(255,235,220,.3); border-radius:12px; }
.arte figcaption code { font:inherit; display:block; margin-top:.3rem; letter-spacing:0; text-transform:none; }
.arte.tem figcaption { display:none; }
/* página da direita */
.dir { background:linear-gradient(100deg, color-mix(in srgb, var(--c60) 40%, var(--pagina)) 0%, var(--pagina) 40%, var(--pagina-2) 100%); box-shadow:inset 30px 0 40px -30px rgba(0,0,0,.6); display:grid; grid-template-rows:1fr auto; }
.dir::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:rgba(20,10,0,.65); z-index:2; }
.folha { min-height:0; overflow:auto; padding:4% 7% 2% 9%; scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.35) transparent; }
/* setas da direita: a mesma seta da esquerda, deitada, menor, na cor escura do papel */
.dir .chev { position:absolute !important; top:50%; width:4.5%; aspect-ratio:1/2; transform:translateY(-50%); z-index:3; opacity:.75; }
.dir .chev::before { color:color-mix(in srgb, var(--pagina-2) 60%, #1a1400); }
.dir .chev.esq-s { left:1.5%; } .dir .chev.esq-s::before { clip-path:polygon(100% 0, 100% 14%, 24% 50%, 100% 86%, 100% 100%, 0 50%); }
.dir .chev.dir-s { right:1.5%; } .dir .chev.dir-s::before { clip-path:polygon(0 0, 0 14%, 76% 50%, 0 86%, 0 100%, 100% 50%); }
.dir .chev:hover { opacity:1; transform:translateY(-50%) scale(1.1); }
.pontos { display:flex; justify-content:center; gap:10px; padding:0 0 10px; }
.pontos button { width:9px; height:9px; border-radius:50%; border:1px solid rgba(243,220,200,.6); background:transparent; padding:0; cursor:pointer; }
.pontos button[aria-current="true"] { background:var(--rosa); border-color:var(--rosa); }
/* página 1: descrição + caixas só com símbolos */
.desc { margin:0 auto 6%; max-width:40ch; text-align:center; font:400 clamp(10px, 1.05vw, 15px)/1.7 var(--texto); letter-spacing:.04em; color:var(--rosa); text-shadow:1px 2px 0 rgba(40,20,0,.5); }
.escala { position:relative; margin:9% 2% 8%; height:clamp(34px, 5.6vw, 76px); border:2px solid #111; border-radius:12px; background:rgba(0,0,0,.08); }
.escala .rot { position:absolute; top:100%; margin-top:5px; font:400 10px/1 var(--mono); letter-spacing:.06em; color:var(--tinta-fraca); }
.escala .rot.ini { left:0; } .escala .rot.fim { right:0; }
.marca { position:absolute; width:clamp(24px, 3.6vw, 48px); height:clamp(24px, 3.6vw, 48px); transform:translate(-50%,-50%); display:grid; place-items:center; cursor:help; }
.marca svg { width:100%; height:100%; filter:drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
.marca.cima { top:0; } .marca.dentro { top:50%; } .marca.baixo { top:100%; }
.marca.estrela { left:50%; top:0; }   /* a estrela é fixa: símbolo da caixa principal */
.elementos { display:grid; grid-template-columns:1fr 1fr; gap:7% 5%; margin:0 2% 9%; }
.ele { position:relative; min-height:clamp(48px, 6.5vw, 88px); border:2px solid var(--ec); border-radius:10px; background:color-mix(in srgb, var(--ec) 28%, transparent); display:grid; place-items:center; cursor:help; }
.ele .selo { position:absolute; left:50%; top:0; transform:translate(-50%,-55%); width:clamp(22px, 2.8vw, 40px); height:clamp(22px, 2.8vw, 40px); border-radius:50%; background:#f7f2e4; border:2px solid var(--ec); display:grid; place-items:center; box-shadow:0 3px 6px rgba(0,0,0,.35); }
.ele .selo svg { width:62%; height:62%; }
.ele.principal .selo { box-shadow:0 0 0 3px rgba(247,242,228,.35), 0 0 14px var(--ec), 0 3px 6px rgba(0,0,0,.35); }
.ele .nome { position:absolute; left:8%; bottom:5%; font:400 9px/1 var(--mono); letter-spacing:.1em; color:rgba(243,220,200,.45); text-transform:uppercase; }
.ele .grau { font:400 clamp(9px, 1vw, 13px)/1 var(--mono); color:rgba(243,220,200,.6); letter-spacing:.1em; }
.caixa { position:relative; border:2px solid var(--rosa); border-radius:12px; padding:8% 5% 4%; margin:11% 2% 4%; }
.caixa > h2 { position:absolute; left:50%; top:0; transform:translate(-50%,-50%); margin:0; padding:0; width:clamp(80px, 11vw, 150px); aspect-ratio:1.7; display:grid; place-items:center; }
.caixa > h2 svg, .caixa > h2 img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(2px 3px 0 rgba(40,20,0,.5)); }
.caixa > h2 img + svg { display:none; }   /* com img/aperto.png, o SVG some */
.caixa > h2 span { font:400 clamp(16px, 2vw, 30px)/1 var(--titulo); color:var(--rosa); white-space:nowrap; }
.simbolos { display:flex; justify-content:space-evenly; align-items:center; gap:4%; }
.simb { width:clamp(40px, 5.4vw, 76px); aspect-ratio:1; display:grid; place-items:center; text-align:center; text-decoration:none; color:#fff; font:400 clamp(8px, .9vw, 12px)/1.15 var(--mono); letter-spacing:.04em; border-radius:10px; background:none; border:0; overflow:visible; transition:transform .15s; }
.simb img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.simb:hover { transform:scale(1.08); }
.simb small { display:block; font-size:.8em; opacity:.8; }
.simb > span { padding:4px; border:1px dashed rgba(255,255,255,.35); border-radius:8px; }   /* só o placeholder sem imagem tem borda */
.simb img + span { display:none; }   /* com imagem, o placeholder some */
.vazio { text-align:center; color:var(--tinta-fraca); font-style:italic; padding:4% 0; }
/* página 2: builds e feitiços (com texto) */
.titulo { margin:0 0 3%; font:400 clamp(15px, 1.8vw, 26px)/1 var(--titulo); letter-spacing:var(--titulo-esp); color:var(--rosa); text-shadow:2px 3px 0 rgba(40,20,0,.5); text-align:center; }
.builds { display:grid; gap:4%; margin:0 2% 7%; }
.build { border:2px solid var(--ec, var(--rosa)); border-radius:10px; background:color-mix(in srgb, var(--ec, #000) 22%, transparent); padding:3% 4%; display:grid; grid-template-columns:auto 1fr; gap:2% 4%; align-items:start; }
.build .lvl { font:400 clamp(12px, 1.3vw, 18px)/1 var(--titulo); color:var(--tinta); padding-top:.2em; }
.build h3 { margin:0; font:400 clamp(14px, 1.5vw, 22px)/1.2 var(--titulo); color:var(--tinta); }
.build p { margin:.3em 0 0; font-size:clamp(9px, .95vw, 13px); color:var(--tinta-fraca); }
.build .itens { margin:.5em 0 0; display:flex; flex-wrap:wrap; gap:6px; }
.build .itens span { font-size:clamp(9px, .9vw, 12px); padding:2px 8px; border-radius:999px; background:rgba(0,0,0,.25); }
.feiticos { display:grid; grid-template-columns:1fr 1fr; gap:4% 5%; margin:0 2% 5%; }
.feitico { display:grid; grid-template-columns:auto 1fr; gap:4%; align-items:center; }
.feitico .simb { width:clamp(36px, 4.4vw, 62px); }
.feitico h3 { margin:0; font:400 clamp(12px, 1.25vw, 18px)/1.2 var(--titulo); color:var(--tinta); }
.feitico p { margin:.15em 0 0; font-size:clamp(9px, .9vw, 12px); color:var(--tinta-fraca); }
/* virada de página */
.folha.vira { animation:vira .32s ease; }
@keyframes vira { from { opacity:0; transform:translateX(14px) scaleX(.97); transform-origin:left; } to { opacity:1; transform:none; } }
/* tooltip: qualquer elemento com data-tip mostra o texto em cima no hover (símbolos, marcas, elementos) */
[data-tip]:not(.marca):not(.chev) { position:relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); z-index:9; max-width:min(60vw, 34ch); width:max-content; white-space:normal; text-align:center; background:#1b1a14; color:var(--tinta); font:400 10px/1.5 var(--texto); letter-spacing:.04em; padding:6px 9px; border-radius:6px; border:1px solid rgba(243,220,200,.3); box-shadow:0 4px 10px rgba(0,0,0,.4); pointer-events:none; }
[data-tip]:hover::before, [data-tip]:focus-visible::before { content:""; position:absolute; left:50%; bottom:calc(100% + 3px); transform:translateX(-50%); border:5px solid transparent; border-top-color:rgba(243,220,200,.3); z-index:9; pointer-events:none; }
.ele[data-tip]:hover::after { bottom:auto; top:calc(100% + 8px); } .ele[data-tip]:hover::before { bottom:auto; top:calc(100% + 3px); border-top-color:transparent; border-bottom-color:rgba(243,220,200,.3); }
/* telas estreitas: as páginas empilham */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  body { overflow:auto; justify-content:flex-start; padding-top:40px; }
  .livro { width:100%; aspect-ratio:auto; max-height:none; grid-template-columns:1fr; flex:none; }   /* flex:none: senão o livro encolhe pra caber na altura da tela e a arte invade a página */
  .esq { grid-template-rows:auto auto auto auto; padding:12px 12px 12px 9%; row-gap:6px; }
  .esq .arte { height:auto; max-height:40vh; }
  .esq .arte img { max-height:38vh; }
  .esq .chev { width:40px; }
  .esq h1 { font-size:clamp(28px, 11vw, 48px); }
  .dir { min-height:70vh; }
  .folha { padding:24px 36px 12px; }
  .dir .chev { width:26px; }
}