/* Site institucional de A Lenda do Dragão Verde (Bloco 6 de "O Reino Vivo"; site vivo na 2.25.0 r3; o Reino inteiro na etapa
   "O Livro do Reino"). Primeiro o celular; nada embutido no HTML; animações só com transform/opacity e paradas com movimento
   reduzido. */
@font-face { font-family: "Cinzel"; src: url("fontes/Cinzel.woff") format("woff"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Gelasio"; src: url("fontes/Gelasio.woff") format("woff"); font-weight: 400 700; font-display: swap; }
:root {
  --floresta: #1b2a22; --floresta-2: #355043; --salvia: #8bcb9d; --ouro: #d8b97a; --ouro-escuro: #a8874a;
  --marfim: #f3ead6; --pergaminho: #efe3c6; --tinta: #2b2419; --tinta-suave: #5a4d38; --lodo: #24362c;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--floresta); color: var(--marfim); font: 17px/1.6 "Gelasio", Georgia, "Times New Roman", serif; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ouro); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--salvia); outline-offset: 2px; }
h1, h2, h3 { font-family: "Cinzel", Georgia, serif; font-weight: 700; letter-spacing: .02em; line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(1.9rem, 7vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 5vw, 2.1rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
.faixa { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 18px; }
.faixa.estreita { max-width: 760px; }
.miudo { font-size: .88rem; opacity: .85; }
/* Nome de arquivo (uma palavra só, sem espaço): quebra em qualquer ponto para não abrir rolagem lateral em 320 px. */
.arquivo { overflow-wrap: anywhere; }
/* Topo */
/* 2.31.0 r6: fundo opaco — com .96 o texto escuro dos blocos pergaminho vazava atrás do nome do jogo ao rolar. */
.topo { position: sticky; top: 0; z-index: 5; background: #141f19; border-bottom: 1px solid rgba(216, 185, 122, .35); }
.topo .faixa { display: flex; align-items: center; gap: 12px; min-height: 60px; }
/* 2.31.0 r4: o topo é mais largo que o conteúdo (três redes ao lado do Discord). */
.topo .faixa { max-width: 1240px; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--marfim); text-decoration: none; font-family: "Cinzel", serif; font-weight: 700; font-size: 1rem; min-height: 44px; margin-right: auto; }
.marca span { white-space: nowrap; }
@media (max-width: 380px) { .marca span { font-size: .92rem; } }
/* 2.29.0 r2: abaixo de 360 px o nome quebra em duas linhas (numa linha só ele passava por baixo do botão Menu). */
@media (max-width: 359px) { .marca span { white-space: normal; line-height: 1.15; } }
.nav-larga { display: none; gap: 4px; }
.nav-larga a, .menu nav a { color: var(--marfim); text-decoration: none; padding: 10px 9px; border-radius: 6px; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.nav-larga a { font-size: .96rem; padding-left: 7px; padding-right: 7px; }
.nav-larga a:hover, .menu nav a:hover { background: rgba(139, 203, 157, .12); color: var(--ouro); }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; min-height: 44px; min-width: 44px; padding: 10px 12px; border: 1px solid rgba(216, 185, 122, .5); border-radius: 6px; color: var(--ouro); font-family: "Cinzel", serif; font-size: .9rem; display: flex; align-items: center; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: 0; top: 52px; background: var(--floresta); border: 1px solid rgba(216, 185, 122, .45); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; min-width: 190px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.topo .topo-jogar { display: none; }
@media (min-width: 640px) { .topo .topo-jogar { display: inline-flex; } }
@media (min-width: 1120px) {
  .nav-larga { display: flex; }
  .menu { display: none; }
}
/* Botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 10px 20px; border-radius: 8px; border: 1px solid var(--ouro); color: var(--marfim); background: rgba(216, 185, 122, .08); font-family: "Cinzel", serif; font-weight: 700; text-decoration: none; font-size: 1rem; }
.botao small { font-family: "Gelasio", serif; font-weight: 400; opacity: .8; font-size: .8rem; }
.botao:hover { background: rgba(216, 185, 122, .18); }
.botao.ouro { background: linear-gradient(#e6c98c, var(--ouro-escuro)); color: #1d170d; border-color: #f0dca8; }
.botao.ouro:hover { background: linear-gradient(#f0d9a2, #b8955a); }
.botao.grande { min-height: 56px; font-size: 1.1rem; padding: 12px 26px; }
.botao.em-breve { cursor: default; opacity: .55; border-style: dashed; background: transparent; font-weight: 400; }
.botao.em-breve:hover { background: transparent; }
/* Abertura: o Dragão Verde em movimento atrás do título (a capa é a imagem; o vídeo entra por cima quando toca) */
.abertura { position: relative; display: flex; align-items: flex-end; min-height: min(88vh, 780px); text-align: center; overflow: hidden; background: var(--lodo); }
.abertura-fundo { position: absolute; inset: 0; }
.abertura-fundo .midia-capa, .abertura-fundo .midia-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; }
.midia-video { opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.midia-video.tocando { opacity: 1; }
.abertura-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(16, 26, 20, .38), rgba(16, 26, 20, .12) 34%, rgba(16, 26, 20, .78) 72%, var(--floresta)); }
.abertura-texto { position: relative; z-index: 1; padding-top: 120px; padding-bottom: 34px; text-shadow: 0 2px 14px rgba(0, 0, 0, .75); }
.abertura .sobre { font-family: "Cinzel", serif; font-weight: 700; color: #cdeed6; letter-spacing: .16em; text-transform: uppercase; font-size: .82rem; margin-bottom: .6em; text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.abertura h1 { font-size: clamp(2.1rem, 8.5vw, 4.2rem); color: #fbf3df; }
.abertura .chamada { max-width: 660px; margin: 0 auto 1.3em; font-size: clamp(1.05rem, 3.4vw, 1.3rem); color: #fbf3df; }
.acoes { display: flex; flex-direction: column; gap: 12px; align-items: stretch; max-width: 360px; margin: 0 auto 14px; text-shadow: none; }
@media (min-width: 640px) { .acoes { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: none; } }
.acoes-discord { margin: 0 auto 12px; text-shadow: none; }
.botao.discord, .botao.rede { border-color: var(--salvia); color: #eaf7ee; background: rgba(27, 42, 34, .82); }
.botao.discord:hover, .botao.rede:hover { background: rgba(53, 80, 67, .95); }
.bloco.pergaminho a.botao.discord { color: #eaf7ee; background: var(--floresta-2); border-color: #24362c; }
.bloco.pergaminho a.botao.discord:hover { background: var(--floresta); }
/* O Reino agora */
.reino-agora { background: #16231c; border-top: 1px solid rgba(216, 185, 122, .4); border-bottom: 1px solid rgba(216, 185, 122, .4); padding: 26px 0 22px; }
.reino-agora h2 { font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--salvia); margin-bottom: 14px; }
.reino-numeros { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 860px) { .reino-numeros { grid-template-columns: repeat(4, 1fr); } }
.reino-numeros li { border: 1px solid rgba(216, 185, 122, .28); border-radius: 10px; padding: 10px 12px; min-height: 76px; background: rgba(243, 234, 214, .04); }
.reino-numeros span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.reino-numeros strong { display: block; font-family: "Cinzel", serif; color: var(--ouro); font-size: 1.12rem; line-height: 1.3; margin-top: 4px; overflow-wrap: anywhere; }
.reino-feitos h3 { font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin-bottom: .5em; }
.reino-feitos ol { list-style: none; margin: 0; padding: 0; min-height: 5.6em; }
.reino-feitos li { padding: 5px 0 5px 16px; border-left: 2px solid rgba(139, 203, 157, .5); margin-bottom: 6px; font-size: .96rem; }
.reino-feitos small { display: block; opacity: .7; font-size: .8rem; }
.reino-agora.sem-dados .reino-numeros strong { color: var(--marfim); opacity: .6; }
/* Blocos */
.bloco { padding: 48px 0; }
.bloco.pergaminho { background: var(--pergaminho); color: var(--tinta); background-image: linear-gradient(rgba(255, 255, 255, .25), rgba(0, 0, 0, .03)); border-top: 1px solid #cdb98f; border-bottom: 1px solid #cdb98f; }
.bloco.pergaminho a { color: #6b4e1d; }
.bloco.pergaminho h1, .bloco.pergaminho h2 { color: #3f2f14; }
.vinheta { border-radius: 10px; margin: 0 0 18px; border: 1px solid #cdb98f; width: 100%; max-width: 420px; }
@media (min-width: 760px) { .vinheta { float: right; margin: 4px 0 12px 22px; width: 46%; } }
.grade { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .grade { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .grade { grid-template-columns: 1fr 1fr 1fr; } }
.grade article { background: rgba(243, 234, 214, .05); border: 1px solid rgba(216, 185, 122, .28); border-radius: 10px; padding: 18px; }
.grade h3 { color: var(--ouro); }
/* O jogo: cada card com o seu mini vídeo (a capa fica; o vídeo entra por cima quando o card aparece na tela) */
.jogo-card { overflow: hidden; padding: 0 0 6px; }
.grade .jogo-card { padding: 0 0 6px; }
.jogo-card h3, .jogo-card p { margin-left: 18px; margin-right: 18px; }
.jogo-card h3 { margin-top: 14px; }
.jogo-midia { position: relative; aspect-ratio: 16 / 9; background: #101a14; overflow: hidden; }
/* Sete cards em duas ou três colunas deixariam o último sozinho: ele ocupa a linha inteira, com a imagem ao lado do texto. */
@media (min-width: 640px) {
  .jogo-grade .jogo-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; padding: 0; }
  .jogo-grade .jogo-card:last-child .jogo-midia { grid-row: 1 / span 2; height: 100%; min-height: 220px; aspect-ratio: auto; }
  .jogo-grade .jogo-card:last-child h3 { align-self: end; margin-top: 18px; font-size: 1.3rem; }
  .jogo-grade .jogo-card:last-child p { align-self: start; margin-bottom: 18px; }
}
.jogo-midia .midia-capa, .jogo-midia .midia-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Imagens do Reino: mosaico que rola para os lados (toque, teclado ou os botões) */
.galeria { padding-top: 8px; }
.mosaico { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; border-radius: 10px; scrollbar-width: thin; }
.mosaico-trilho { list-style: none; margin: 0; padding: 0 0 8px; display: flex; gap: 12px; }
.mosaico-trilho li { flex: 0 0 84%; scroll-snap-align: start; border: 1px solid rgba(216, 185, 122, .3); border-radius: 10px; overflow: hidden; background: #101a14; }
@media (min-width: 640px) { .mosaico-trilho li { flex-basis: 48%; } }
@media (min-width: 980px) { .mosaico-trilho li { flex-basis: 32.2%; } }
.mosaico-trilho img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mosaico-botoes { display: flex; gap: 10px; justify-content: flex-end; margin: 12px 0 0; }
.mosaico-botoes .botao { min-width: 52px; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.comunidade { text-align: center; }
/* 2.31.0 r6: seção compacta (~880 px) — o Discord em destaque horizontal e baixo; as outras redes em cartões pequenos e iguais. */
.comunidade-faixa { max-width: 880px; }
.comunidade h2 { font-size: clamp(1.3rem, 4vw, 1.7rem); margin-bottom: 18px; }
.comunidade-discord { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid rgba(201, 162, 106, .35); border-radius: 10px; background: rgba(53, 80, 67, .22); }
.comunidade-discord h3, .comunidade-rede h3 { color: var(--ouro); font-size: 1.05rem; margin: 0 0 4px; }
.comunidade-discord p { margin: 0; font-size: .97rem; }
.comunidade-discord .comunidade-online { margin-top: 6px; font-size: .9rem; }
.comunidade-discord .botao { min-height: 44px; padding: 8px 18px; font-size: .92rem; flex: none; }
@media (min-width: 720px) {
  .comunidade-discord { flex-direction: row; text-align: left; gap: 18px; }
  .comunidade-discord-texto { flex: 1; }
}
.comunidade-redes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 600px) { .comunidade-redes { grid-template-columns: repeat(3, 1fr); } }
.comunidade-rede { display: flex; flex-direction: column; align-items: center; padding: 14px 14px 12px; border: 1px solid rgba(201, 162, 106, .3); border-radius: 10px; background: rgba(53, 80, 67, .14); }
.comunidade-rede h3 { display: flex; align-items: center; gap: 8px; }
.comunidade-rede p { margin: 0 0 6px; font-size: .93rem; opacity: .9; }
.comunidade-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px; font-size: .92rem; }
.comunidade-aviso { margin: 14px 0 0; opacity: .8; }
.rede-icone { display: inline-block; flex: none; }
.canal { white-space: nowrap; }
.nav-larga a .rede-icone, .menu nav a .rede-icone, .rodape a .rede-icone { margin-right: 7px; }
.comunidade-online { font-family: "Cinzel", serif; font-weight: 700; color: var(--salvia); }
/* Âncoras: o título não fica escondido sob o menu fixo */
section[id], article[id], h1[id], h2[id], h3[id], p[id], nav[id], div[id] { scroll-margin-top: 78px; }
/* 2.31.0 r6: a Comunidade vem depois de um bloco pergaminho — encosta no menu (o respiro é o próprio preenchimento da seção), sem faixa bege sob o menu. */
#comunidade { scroll-margin-top: 61px; }
/* Aberta por âncora (/#comunidade) e perto do fim da página: altura mínima para o salto encostar no menu (61 px do menu + 151 px do rodapé largo). */
#comunidade:target { min-height: calc(100vh - 212px); }
.passos { padding-left: 1.3em; margin: 0 0 1em; }
.passos li { margin-bottom: .8em; }
/* Rodapé */
.rodape { padding: 30px 0 40px; border-top: 1px solid rgba(216, 185, 122, .3); font-size: .92rem; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 12px; }
.rodape nav a { min-height: 44px; display: inline-flex; align-items: center; }
.rodape p { margin: 0; opacity: .85; }
.nav-larga a.nav-rede, .menu nav a.nav-rede { color: var(--salvia); }
/* 2.31.0 r5: no menu largo as redes vão só pelo ícone (nome em aria-label/title), juntas, alvo de 44 px. */
.nav-redes { display: inline-flex; align-items: center; margin-left: 4px; }
.nav-larga .nav-redes a.nav-rede { padding: 10px 5px; min-width: 32px; justify-content: center; }
.nav-larga .nav-redes a.nav-rede .rede-icone { margin-right: 0; }
/* Créditos: a licença original, como veio com o código */
.licenca { max-height: 420px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: .8rem/1.5 ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace; background: #fffaf0; color: var(--tinta); border: 1px solid #cdb98f; border-radius: 8px; padding: 12px 14px; margin: 0 0 1.4em; }
.creditos-texto h2 { margin-top: 1.4em; }
.creditos-texto h3 { margin-top: 1.2em; color: #3f2f14; }
.creditos-texto li { margin-bottom: .5em; }
/* Suporte */
.conta select, .conta textarea { width: 100%; min-height: 46px; padding: 10px 12px; font: inherit; border: 1px solid #b59e6e; border-radius: 8px; background: #fffaf0; color: var(--tinta); }
.conta textarea { min-height: 150px; resize: vertical; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.conta .cartao a.botao.discord { color: #eaf7ee; background: var(--floresta-2); border-color: #24362c; }
/* Portal da conta */
.conta .cartao { background: var(--pergaminho); color: var(--tinta); border-radius: 12px; padding: 22px 20px; margin: 30px auto; max-width: 560px; border: 1px solid #cdb98f; }
.conta .cartao a { color: #6b4e1d; }
.conta label { display: block; font-weight: 700; margin: 12px 0 4px; }
.conta input[type=text], .conta input[type=password], .conta input[type=email] { width: 100%; min-height: 46px; padding: 10px 12px; font: inherit; border: 1px solid #b59e6e; border-radius: 8px; background: #fffaf0; color: var(--tinta); }
.conta button, .conta .botao-form { margin-top: 16px; min-height: 48px; padding: 10px 20px; border-radius: 8px; border: 1px solid #8a6a32; background: linear-gradient(#e6c98c, var(--ouro-escuro)); color: #1d170d; font-family: "Cinzel", serif; font-weight: 700; font-size: 1rem; cursor: pointer; }
.conta .aviso { background: #f6e2c2; border-left: 4px solid #a8874a; padding: 10px 12px; border-radius: 6px; }
.conta .erro { background: #f4d4cc; border-left: 4px solid #9b3a2a; padding: 10px 12px; border-radius: 6px; color: #4a1a12; }
.conta .lista-acoes { list-style: none; padding: 0; margin: 12px 0; }
.conta .lista-acoes li { margin: 8px 0; }
.conta .lista-acoes a { min-height: 44px; display: inline-flex; align-items: center; }
.conta fieldset { border: 1px solid #cdb98f; border-radius: 8px; margin: 14px 0; padding: 10px 14px; }
.conta legend { font-family: "Cinzel", serif; font-weight: 700; }
.conta .lddv-discord-actions, .conta .lddv-discord-prefs, .conta .lddv-discord-unlink { margin: 12px 0; }
.conta input[type=checkbox] { width: 22px; height: 22px; vertical-align: middle; margin-right: 6px; }
/* O Tomo do Reino (/knowledge.php) */
.tomo-indice ul { list-style: none; padding-left: 0; }
.tomo-indice > ul > li { margin: 10px 0; }
.tomo-indice li li a { min-height: 44px; display: inline-flex; align-items: center; }
.tomo-indice li ul { padding-left: 14px; }
.tomo-topico { border-top: 1px solid #cdb98f; padding-top: 18px; margin-top: 22px; }
.tomo-topico h2 { font-size: clamp(1.2rem, 4.5vw, 1.6rem); }
.aviso-tomo { background: #f6e2c2; border-left: 4px solid #a8874a; padding: 10px 12px; border-radius: 6px; }
.tabela-rolagem { max-width: 100%; overflow-x: auto; margin: 0 0 1em; -webkit-overflow-scrolling: touch; }
.tabela-rolagem table { border-collapse: collapse; min-width: 100%; font-size: .92rem; }
.tabela-rolagem caption { text-align: left; font-weight: 700; margin-bottom: 4px; }
.tabela-rolagem th, .tabela-rolagem td { border: 1px solid #cdb98f; padding: 6px 8px; text-align: left; vertical-align: top; }
.tabela-rolagem th { background: #e6d6b0; }
.tomo-pagina .bloco.pergaminho { padding-top: 32px; }

/* 2.25.0 r2 (ADR-085): a janela do botão travado. Aparece com /#acesso-travado (:target), sem script. */
.janela { display: none; position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center; padding: 20px; }
.janela:target { display: flex; }
.janela-fundo { position: absolute; inset: 0; background: rgba(8, 14, 11, .78); cursor: default; }
.janela-caixa { position: relative; max-width: 440px; width: 100%; background: var(--pergaminho); color: var(--tinta); border: 1px solid #cdb98f; border-radius: 14px; padding: 26px 22px 20px; text-align: center; box-shadow: 0 18px 60px rgba(0, 0, 0, .55); }
.janela-caixa h2 { font-family: "Cinzel", serif; margin: 0 0 .5em; color: #3a2c12; font-size: 1.3rem; }
.janela-caixa p { margin: 0 0 1em; }
.janela-acoes { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.janela-acoes .botao { color: var(--tinta); border-color: #8a6a32; }
.janela-acoes .botao.ouro { color: #1d170d; }
@media (min-width: 520px) { .janela-acoes { flex-direction: row; justify-content: center; } }


/* ==== Etapa "O Livro do Reino" (Bloco D): o site vivo do Reino ============================================================ */
.pular { position: absolute; left: 8px; top: -60px; z-index: 60; background: var(--ouro); color: #1d170d; padding: 10px 14px; border-radius: 6px; font-weight: 700; }
.pular:focus { top: 8px; }
.sobre { font-family: "Cinzel", serif; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: var(--salvia); margin-bottom: .5em; }
.bloco.pergaminho .sobre { color: #2f5d3f; }
.abertura .temporada { font-family: "Cinzel", serif; font-weight: 700; color: #e9f6ec; letter-spacing: .06em; font-size: clamp(.82rem, 2.6vw, .98rem); margin: 0 auto .7em; max-width: 680px; }
.abertura .temporada .temporada-num { display: inline-block; margin-left: 6px; padding: 1px 10px; border: 1px solid rgba(216, 185, 122, .7); border-radius: 99px; color: var(--ouro); }
.lenda-curta { max-width: 680px; margin: 0 auto 1.2em; font-size: clamp(1rem, 3.1vw, 1.16rem); color: #fbf3df; }
.lenda-curta p { margin: 0 0 .45em; }
.reino-numeros small { display: block; font-size: .8rem; opacity: .75; margin-top: 2px; }

/* A Bruma: névoa animada leve sobre a imagem de uma cidade (ou de um livro, de uma Era) ainda fechada. Só CSS. */
.quadro { position: relative; overflow: hidden; background: #101a14; }
.quadro img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.na-bruma img { filter: grayscale(.55) brightness(.62) contrast(.92); }
.bruma { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bruma span { position: absolute; top: -30%; bottom: -30%; left: -60%; right: -60%; opacity: .9;
  background: radial-gradient(ellipse 34% 40% at 30% 55%, rgba(222, 230, 233, .62), rgba(222, 230, 233, 0) 70%),
    radial-gradient(ellipse 30% 34% at 70% 40%, rgba(205, 216, 221, .5), rgba(205, 216, 221, 0) 70%),
    radial-gradient(ellipse 40% 30% at 50% 85%, rgba(190, 203, 209, .5), rgba(190, 203, 209, 0) 70%);
  will-change: transform; animation: bruma-deriva 26s ease-in-out infinite alternate; }
.bruma span:nth-child(2) { animation-duration: 34s; animation-direction: alternate-reverse; opacity: .7; top: -10%; }
.bruma span:nth-child(3) { animation-duration: 19s; opacity: .55; bottom: -50%; }
@keyframes bruma-deriva { from { transform: translate3d(-14%, 0, 0); } to { transform: translate3d(14%, -3%, 0); } }
.selo { display: inline-block; margin: 0; padding: 2px 10px; border-radius: 99px; font-size: .8rem; font-family: "Cinzel", serif; font-weight: 700; border: 1px solid rgba(216, 185, 122, .55); color: var(--ouro); }

/* D2: o mapa do Reino — no celular, uma lista; no computador, a capital no centro, onde os quatro rios se encontram. */
.reino-mapa .intro { max-width: 760px; }
.mapa { position: relative; margin-top: 18px; }
.mapa-rios { display: none; }
.cidades { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 16px; position: relative; }
@media (min-width: 640px) { .cidades { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) {
  .mapa-rios { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
  .cidades { grid-template-columns: 1fr 1.15fr 1fr; grid-template-areas: "romar degolburg qexelcrag" "glukmoore degolburg velaria"; gap: 22px 28px; }
  .cidade-glukmoore { grid-area: glukmoore; } .cidade-romar { grid-area: romar; } .cidade-qexelcrag { grid-area: qexelcrag; }
  .cidade-velaria { grid-area: velaria; } .cidade-degolburg { grid-area: degolburg; align-self: center; }
}
.cidade { background: rgba(16, 26, 20, .9); border: 1px solid rgba(216, 185, 122, .3); border-radius: 12px; overflow: hidden; transition: border-color .2s; }
.cidade.aberta { border-color: var(--salvia); box-shadow: 0 0 0 1px rgba(139, 203, 157, .25), 0 10px 30px rgba(0, 0, 0, .35); }
.cidade-link { display: block; color: inherit; text-decoration: none; height: 100%; }
.cidade-link:hover { border-color: var(--ouro); }
.cidade-link:hover h3, .cidade-link:hover h2 { color: var(--ouro); }
.cidade-texto { display: block; padding: 12px 16px 16px; }
@media (max-width: 639px) {
  .cidade-link { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); align-items: stretch; }
  .cidade-link .quadro { height: 100%; }
  .cidade-link .quadro img { height: 100%; aspect-ratio: auto; min-height: 120px; }
  .cidade-texto { padding: 10px 12px 12px; }
  .cidade-texto h3, .cidade-texto h2 { font-size: 1.05rem; }
  .cidade-linha { font-size: .88rem; }
}
.cidade-texto h3, .cidade-texto h2 { margin: 0 0 .25em; font-size: 1.2rem; }
.cidade-linha { display: block; font-size: .95rem; opacity: .9; margin-bottom: 8px; }
.cidade.aberta .selo { background: var(--salvia); color: #13261a; border-color: var(--salvia); }
.cidade.fechada .selo { color: #dfe7ea; border-color: rgba(223, 231, 234, .55); }
.mapa-acoes { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }

/* D3: as páginas das cidades */
.cidade-topo { padding: 22px 0 30px; background: linear-gradient(#13201a, var(--floresta)); }
.trilha { font-size: .9rem; margin-bottom: 14px; opacity: .9; }
.trilha a { min-height: 44px; display: inline-flex; align-items: center; }
.cidade-cabeca { display: grid; gap: 18px; align-items: center; position: relative; }
.cidade-cabeca .quadro { border-radius: 12px; border: 1px solid rgba(216, 185, 122, .35); }
@media (min-width: 860px) { .cidade-cabeca { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; } }
.cidade-cabeca h1 { color: #fbf3df; }
.aviso-bruma { position: relative; overflow: hidden; border-radius: 10px; padding: 16px 18px; margin: 1.4em 0; background: #3c4a4f; color: #f1f5f6; font-family: "Cinzel", serif; font-weight: 700; }
.aviso-bruma span:last-child { position: relative; }
.indice-pagina ul { list-style: none; padding: 0; margin: 0 0 1.4em; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.indice-pagina a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 1px solid #cdb98f; border-radius: 99px; text-decoration: none; }
.glk-secao { border-top: 1px solid #cdb98f; padding-top: 14px; margin-top: 22px; }
.glk-secao h2 { font-size: clamp(1.25rem, 4.6vw, 1.7rem); }
.glk-secao .acoes { max-width: none; margin: 18px 0 10px; justify-content: flex-start; }
.glk-secao .acoes .botao { color: var(--tinta); border-color: #8a6a32; }
.glk-secao .acoes .botao.ouro { color: #1d170d; }

/* As brasas do fogo do Totem: poucas faíscas, só transform e opacity. */
.brasas { position: absolute; right: 8%; bottom: 0; width: 120px; height: 180px; pointer-events: none; }
.brasas i { position: absolute; bottom: 0; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: #ffc061; box-shadow: 0 0 6px 2px rgba(255, 140, 40, .75); opacity: 0; will-change: transform, opacity; animation: brasa 3.8s ease-in infinite; }
.brasas i:nth-child(2) { left: 30%; animation-delay: .6s; animation-duration: 4.4s; }
.brasas i:nth-child(3) { left: 66%; animation-delay: 1.2s; }
.brasas i:nth-child(4) { left: 42%; animation-delay: 1.9s; animation-duration: 3.2s; }
.brasas i:nth-child(5) { left: 74%; animation-delay: 2.5s; animation-duration: 4.8s; }
.brasas i:nth-child(6) { left: 22%; animation-delay: 3.1s; }
.brasas i:nth-child(7) { left: 56%; animation-delay: .3s; animation-duration: 5.1s; }
.brasas i:nth-child(8) { left: 36%; animation-delay: 2.2s; animation-duration: 4.1s; }
.brasas i:nth-child(9) { left: 62%; animation-delay: 1.5s; animation-duration: 3.5s; }
@keyframes brasa { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; } 12% { opacity: 1; } 70% { opacity: .8; } 100% { transform: translate3d(14px, -170px, 0) scale(.4); opacity: 0; } }
.brasas i:nth-child(even) { animation-name: brasa-esq; }
@keyframes brasa-esq { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; } 12% { opacity: 1; } 70% { opacity: .8; } 100% { transform: translate3d(-16px, -160px, 0) scale(.4); opacity: 0; } }

/* D5: as Eras */
.eras-linha { list-style: none; padding: 0; margin: 24px 0 0; position: relative; }
.eras-linha::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; background: #cdb98f; }
.era { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; margin-bottom: 18px; position: relative; }
.era-marca span { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--pergaminho); border: 2px solid #a8874a; font-family: "Cinzel", serif; font-weight: 700; color: #3f2f14; position: relative; }
.era-ativa .era-marca span { background: #2f5d3f; color: #f3ead6; border-color: #8bcb9d; }
.era-corpo { position: relative; overflow: hidden; border: 1px solid #cdb98f; border-radius: 12px; padding: 14px 16px; background: rgba(255, 255, 255, .35); }
.era-corpo > * { position: relative; }
.era-corpo h2 { font-size: 1.25rem; margin-bottom: .3em; }
.era-ativa .era-corpo { border-color: #2f5d3f; box-shadow: 0 6px 22px rgba(47, 93, 63, .2); }
.era-ativa .selo { background: #2f5d3f; color: #f3ead6; border-color: #2f5d3f; }
.era-fechada .era-corpo { background: #d9d6cc; color: #3b3a35; }
.era-fechada .selo { color: #3b3a35; border-color: #77756c; }
.era-corpo .bruma span { opacity: .7; }
.era-temporada { font-family: "Cinzel", serif; font-weight: 700; color: #2f5d3f; }

/* D6: os povos */
.povos { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 760px) { .povos { grid-template-columns: 1fr 1fr; } }
.povo { border: 1px solid rgba(216, 185, 122, .3); border-radius: 12px; overflow: hidden; background: rgba(16, 26, 20, .9); }
.povo.aberto { border-color: var(--salvia); }
.povo-texto { padding: 14px 18px 16px; }
.povo-texto h2 { font-size: 1.3rem; }
.povo.aberto .selo { background: var(--salvia); color: #13261a; border-color: var(--salvia); }
.povos-pantano { max-width: 760px; margin-top: 28px; }

/* D4: "A Lenda" — a estante e a leitura */
.lenda-topo { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 120%, rgba(216, 120, 50, .18), transparent 60%), linear-gradient(#13201a, var(--floresta)); }
.lenda-topo .faixa { position: relative; }
.estante { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 640px) { .estante { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
.livro.aberto { grid-column: 1 / -1; }
.livro.aberto .livro-capa { max-width: 210px; margin: 0 auto; }
@media (min-width: 640px) { .livro.aberto { grid-column: auto; } .livro.aberto .livro-capa { max-width: none; } }
.livro-capa { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 6px; aspect-ratio: 2 / 3; padding: 14px 12px; text-align: center; text-decoration: none; border-radius: 4px 12px 12px 4px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 9%), linear-gradient(160deg, #2c4a3a, #16251d 70%); border: 2px solid #a8874a; color: #f3ead6; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); font-family: "Cinzel", serif; }
.bloco.pergaminho a.livro-capa { color: #f3ead6; }
.livro-capa:hover { border-color: #f0dca8; }
.livro-serie { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.livro-numero { font-size: 1.5rem; font-weight: 700; color: var(--ouro); }
.livro-titulo { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.livro-temporada { font-family: "Gelasio", serif; font-size: .78rem; opacity: .85; }
.livro-aviso { font-family: "Gelasio", serif; font-size: .82rem; position: relative; }
.livro.fechado .livro-capa { background: linear-gradient(160deg, #4d5558, #2d3436 70%); border-color: #7d8486; color: #eef2f3; filter: saturate(.6); }
.livro.fechado .livro-capa > span:not(.bruma) { position: relative; }
.livro-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.bloco.pergaminho .livro-acoes .botao { color: var(--tinta); border-color: #8a6a32; }
.bloco.pergaminho .livro-acoes .botao.ouro { color: #1d170d; }
.lenda-sumario .sumario { padding-left: 1.4em; }
.sumario li { margin: 0; }
.sumario a { display: inline-flex; align-items: center; min-height: 44px; }
.colofao { margin-top: 26px; padding-top: 14px; border-top: 1px solid rgba(216, 185, 122, .3); font-size: .9rem; opacity: .9; }
.leitura { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 22px; padding-bottom: 48px; }
@media (min-width: 1000px) { .leitura { grid-template-columns: 270px minmax(0, 1fr); gap: 34px; max-width: 1180px; } }
.leitura-fixo { display: grid; gap: 12px; }
@media (min-width: 1000px) { .leitura-fixo { position: sticky; top: 74px; max-height: calc(100vh - 90px); overflow: auto; padding-right: 4px; } }
.leitura-livro { margin: 0; font-family: "Cinzel", serif; font-weight: 700; }
.leitura-livro a { display: inline-flex; min-height: 44px; align-items: center; }
.leitura-livro span { display: block; font-family: "Gelasio", serif; font-weight: 400; opacity: .85; }
.leitura-sumario { border: 1px solid rgba(216, 185, 122, .4); border-radius: 10px; padding: 0 12px; background: rgba(243, 234, 214, .04); }
.so-larga { display: none; }
@media (min-width: 1000px) { .so-celular { display: none; } .so-larga { display: block; } }
.leitura-sumario-titulo { margin: 10px 0 4px; font-family: "Cinzel", serif; font-weight: 700; color: var(--ouro); }
.leitura-sumario summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-family: "Cinzel", serif; font-weight: 700; color: var(--ouro); }
.leitura-sumario .sumario { padding-left: 1.3em; margin: 0 0 10px; font-size: .95rem; }
.leitura-sumario .atual a { color: var(--marfim); font-weight: 700; text-decoration: none; }
.leitura-texto { border-radius: 12px; padding: 26px clamp(18px, 5vw, 56px) 30px; background: var(--pergaminho); color: var(--tinta); border: 1px solid #cdb98f; font-size: 1.08rem; line-height: 1.78; max-width: 48rem; width: 100%; }
.leitura-texto a { color: #6b4e1d; }
.leitura-texto h1 { color: #3f2f14; font-size: clamp(1.55rem, 5.4vw, 2.3rem); margin-bottom: .7em; }
.leitura-texto h2 { color: #3f2f14; font-size: clamp(1.15rem, 4vw, 1.45rem); margin-top: 1.6em; }
.leitura-texto .sobre { color: #2f5d3f; }
.leitura-texto blockquote { margin: 1.2em 0; padding: 4px 0 4px 18px; border-left: 3px solid #a8874a; font-style: italic; color: #3a2f1d; }
.leitura-texto blockquote p { margin-bottom: .8em; }
.leitura-texto table { font-size: .92rem; }
.ilustracao { margin: 1.4em -6px 1.6em; }
.ilustracao img { width: 100%; border-radius: 8px; border: 1px solid #b59e6e; box-shadow: 0 8px 24px rgba(43, 36, 25, .25); background: #101a14; }
.ilustracao figcaption { font-size: .88rem; font-style: italic; color: #5a4d38; text-align: center; margin-top: 8px; line-height: 1.45; }
.ilustracao-vazia { aspect-ratio: 16 / 9; border-radius: 8px; border: 1px dashed #b59e6e; background: linear-gradient(160deg, #e6d6b0, #d8c69c); }
.fim-livro { margin: 2em 0 1em; padding: 16px 18px; text-align: center; border-top: 1px solid #cdb98f; border-bottom: 1px solid #cdb98f; font-family: "Cinzel", serif; }
.aviso-canone { background: #f6e2c2; border-left: 4px solid #a8874a; padding: 10px 12px; border-radius: 6px; }
.paginacao { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 2.2em; padding-top: 1.2em; border-top: 1px solid #cdb98f; }
@media (min-width: 640px) { .paginacao { grid-template-columns: 1fr 1fr; } .paginacao .proxima, .paginacao > a:last-child { justify-self: end; } }
.paginacao .botao { color: var(--tinta); border-color: #8a6a32; flex-direction: column; align-items: flex-start; gap: 0; text-align: left; line-height: 1.3; }
.paginacao .botao small { font-family: "Gelasio", serif; font-weight: 400; font-size: .75rem; opacity: .8; }
.paginacao .botao.ouro { color: #1d170d; align-items: flex-end; text-align: right; }
.baixar { width: 100%; }
.baixar small { margin-left: 4px; }

@media (prefers-reduced-motion: reduce) {
  .bruma span { animation: none; transform: none; }
  .brasas { display: none; }
}
/* Trechos do livro nas páginas do Reino (citações do catálogo). */
blockquote { margin: 1em 0 1.2em; padding: 2px 0 2px 16px; border-left: 3px solid #a8874a; font-style: italic; }
blockquote p:last-child { margin-bottom: 0; }