@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&display=swap');
/* =====================================================================
   Estilo comum das páginas do Tibia.

   Cada página tem o próprio <style> (herança de quando eram soltas). Este
   arquivo é carregado DEPOIS dele e só cuida do que precisa ser igual em
   todas: menu, fundo e profundidade dos cartões. Mudou aqui, muda em tudo.

   TEMA RPG (escuro/pergaminho): fica no bloco `body.tema-rpg` lá embaixo.
   Como custom properties resolvem pelo ancestral mais próximo, redefinir os
   tokens no <body> reescreve o :root claro de CADA página — sem tocar no
   <style> de ninguém. A classe entra página a página, pra rollout seguro.
   ===================================================================== */

:root{
  /* fundo menos branco: um tom de pergaminho, que faz os cartões brancos se
     destacarem em vez de sumirem no fundo */
  --paper:#eee8de;
  --line:#e0d8cb;
  --line-soft:#f4efe7;

  --menu-fundo:#27211b;
  --menu-texto:#d8cfc1;
  --menu-ativo:#f2b441;
}

body{background:var(--paper);}

/* ------------------------------------------------ largura do miolo do site
   Cada página nasceu com 960px, o que sobra muita borda vazia em monitor
   grande. Aqui o teto sobe (carrega depois do <style> de cada página, então
   vence) e o resto continua fluido: abaixo disso o layout ocupa tudo.
   O texto corrido NÃO acompanha — linha muito longa cansa a leitura —, então
   parágrafo ganha limite próprio em ch (largura de caractere). */
.wrap{max-width:1340px;}

/* o rodapé fica de fora: ele ocupa a largura toda da folha */
.sub, .bloco .dica, .ev-nota,
.painel .resumo, .tatica .resumo, .rec-painel .resumo{max-width:80ch;}

/* blocos que ficariam com muito vazio numa tela larga ganham uma coluna a mais */
/* a calculadora ficou agrupada por imbuiment (boxes), então quem espalha em
   colunas lá é o .calc-tipos, na própria página — aqui só a enciclopédia */
@media (min-width:1100px){
  .imb-grade{display:grid;grid-template-columns:1fr 1fr;align-items:start;}
}
@media (min-width:1500px){
  .menu{grid-template-columns:repeat(4,1fr);}
}

/* ------------------------------------------------------------- logotipo */
.site-logo-link{display:block;text-align:center;margin:4px 0 10px;}
.site-logo{width:100%;max-width:320px;height:auto;}
@media (max-width:560px){ .site-logo{max-width:220px;} }

/* ---------------------------------------------------- loader "conjurando"
   Círculo mágico girando, no espírito de uma conjuração do jogo (a busca usa
   "Exiva", que é a magia de localizar). Só aparece depois de 0,4s: se a
   resposta vier rápida, o bloco é trocado antes disso e ninguém vê piscar —
   o atraso é na própria animação, sem precisar de timer no JavaScript. */
.conjurando{
  display:flex;flex-direction:column;align-items:center;gap:13px;
  padding:46px 20px;text-align:center;
  opacity:0;animation:conjEntra .35s ease .4s forwards;
}
@keyframes conjEntra{ to{opacity:1;} }

.conj-circulo{position:relative;width:62px;height:62px;flex:none;}
.conj-circulo span{position:absolute;border-radius:50%;}
.conj-circulo .anel{
  inset:0;border:2px dashed #c9922f;opacity:.9;
  animation:conjGira 3.4s linear infinite;
}
.conj-circulo .anel-2{
  inset:11px;border:2px dotted #8a6414;opacity:.75;
  animation:conjGira 2.1s linear infinite reverse;
}
.conj-circulo .nucleo{
  inset:23px;background:radial-gradient(circle at 40% 35%,#fff0c2,#e0a838 60%,#b9781d);
  box-shadow:0 0 16px rgba(224,168,56,.75);
  animation:conjBrilho 1.5s ease-in-out infinite;
}
@keyframes conjGira{ to{transform:rotate(360deg);} }
@keyframes conjBrilho{
  0%,100%{transform:scale(.78);opacity:.7;}
  50%{transform:scale(1.14);opacity:1;}
}

.conj-texto{font-size:14.5px;font-weight:700;color:var(--ink);}
.conj-magia{
  font-size:12px;font-style:italic;letter-spacing:.08em;color:var(--ink-faint);
  animation:conjFala 1.9s ease-in-out infinite;
}
@keyframes conjFala{ 0%,100%{opacity:.45;} 50%{opacity:1;} }

/* quem pediu menos animação vê o loader parado, sem girar nem pulsar */
@media (prefers-reduced-motion:reduce){
  .conjurando{animation:none;opacity:1;}
  .conj-circulo .anel,.conj-circulo .anel-2,.conj-circulo .nucleo,.conj-magia{animation:none;}
}

/* --------------------------------------------------------- aviso de cookies */
.cookies{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:900;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  max-width:820px;margin:0 auto;
  background:#27211b;color:#e8e0d2;border:1px solid #4a3a25;border-radius:12px;
  padding:14px 16px;box-shadow:0 14px 40px -12px rgba(0,0,0,.6);
  animation:ckEntra .3s ease .6s both;
}
@keyframes ckEntra{ from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:none;} }
.cookies.saindo{opacity:0;transform:translateY(14px);transition:.25s ease;}
.ck-txt{flex:1 1 320px;font-size:12.5px;line-height:1.6;}
.ck-btns{display:flex;gap:8px;margin-left:auto;}
.cookies button{
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  padding:9px 18px;border-radius:8px;border:1px solid transparent;transition:.12s;
}
.ck-aceitar{background:linear-gradient(#e6b45a,#c98f34);color:#241704;}
.ck-aceitar:hover{filter:brightness(1.07);}
.ck-recusar{background:transparent;color:#cdc2ae;border-color:#5b4830;}
.ck-recusar:hover{background:rgba(255,255,255,.07);color:#fff;}
@media (max-width:560px){
  .cookies{left:8px;right:8px;bottom:8px;padding:13px 14px;}
  .ck-btns{margin-left:0;width:100%;}
  .cookies button{flex:1;}
}
@media (prefers-reduced-motion:reduce){ .cookies{animation:none;} }

/* --------------------------------------------------------- bloco de SEO
   Conteúdo real sobre o que cada ferramenta mostra, em texto indexável —
   ajuda o Google a entender a página além do title/meta, e ajuda quem
   chegou pela busca a confirmar que achou o que procurava antes de rolar.
   Fica sempre no fim, depois da ferramenta em si: não atrapalha quem já
   sabe o que quer usar. */
.sobre-bloco{
  margin-top:30px;padding-top:24px;border-top:1px solid var(--line);
}
.sobre-bloco > h2{font-size:15px;font-weight:700;margin:0 0 14px;color:var(--ink);}
.sobre-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.sobre-item h3{margin:0 0 4px;font-size:13.5px;font-weight:700;color:var(--ink);}
.sobre-item p{margin:0;font-size:12.5px;color:var(--ink-soft);line-height:1.55;}

/* ------------------------------------------------------- apoie o projeto */
.apoie{
  display:flex;align-items:center;gap:12px;
  margin-top:16px;padding:13px 16px;
  background:var(--gold-soft,#fef3c7);border:1px solid var(--gold-line,#fde68a);
  border-radius:10px;
}
.apoie::before{content:"🪙";font-size:22px;flex:none;line-height:1;}
.apoie-txt{font-size:12.5px;color:#78350f;line-height:1.6;}
.apoie-char{
  background:rgba(120,53,15,.1);border:1px solid rgba(120,53,15,.25);
  border-radius:4px;padding:1px 7px;white-space:nowrap;
}
@media (max-width:560px){ .apoie{flex-direction:column;align-items:flex-start;gap:7px;} }

/* ------------------------------------------------------ crédito do rodapé */
.credito-doit{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);
  text-decoration:none;opacity:.75;transition:opacity .15s;
}
.credito-doit:hover{opacity:1;}
.credito-doit span{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);}
.credito-doit img{height:26px;width:auto;display:block;}

/* ---------------------------------------------------------------- menu */
.nav{
  position:sticky;top:10px;z-index:40;
  display:flex;flex-wrap:nowrap;gap:4px;
  background:var(--menu-fundo);
  padding:6px;border-radius:12px;margin-bottom:26px;
  box-shadow:0 6px 18px -8px rgba(39,33,27,.55);
  /* celular: arrasta de lado em vez de quebrar em duas linhas bagunçadas */
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.nav::-webkit-scrollbar{display:none;}

/* ---------------------------------------------- submenu do menu principal
   O .nav tem overflow-x:auto (pra arrastar no celular), e isso recortaria um
   submenu posicionado por absolute. Por isso o painel é `fixed` e o JS calcula
   a posição: fixed não é cortado por overflow de ancestral.
   Abre por clique, não por hover — no celular não existe hover. */
.nav-grupo{flex:none;position:relative;display:flex;}
.nav-bt{
  font-family:inherit;font-size:13px;font-weight:600;white-space:nowrap;
  padding:8px 14px;border-radius:8px;border:1px solid transparent;
  background:transparent;color:var(--menu-texto,#a8a29e);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
}
.nav-bt:hover{background:rgba(224,168,56,.14);color:#fff;}
/* acende quando a página aberta é uma das de dentro do grupo */
.nav-bt.on{background:linear-gradient(#e6b45a,#c98f34);color:#241704;border-color:#8a6520;}
.nav-bt .seta{font-size:9px;opacity:.7;transition:transform .15s;}
.nav-bt[aria-expanded="true"] .seta{transform:rotate(180deg);}
.nav-sub{
  position:fixed;z-index:60;min-width:216px;padding:6px;
  background:#2c2117;border:1px solid #4a3a25;border-radius:10px;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.6);
  display:none;flex-direction:column;gap:2px;
}
.nav-sub.aberto{display:flex;}
.nav-sub a{
  display:block;padding:9px 12px;border-radius:7px;text-decoration:none;
  font-size:13px;font-weight:600;color:#d8c9ad;white-space:nowrap;
}
.nav-sub a:hover{background:rgba(224,168,56,.16);color:#fff;}
.nav-sub a.on{background:linear-gradient(#e6b45a,#c98f34);color:#241704;}
.nav-sub .desc{display:block;font-size:11px;font-weight:400;opacity:.65;margin-top:1px;}
@media (prefers-reduced-motion:reduce){ .nav-bt .seta{transition:none;} }

.nav a{
  flex:none;white-space:nowrap;
  font-size:13.5px;font-weight:600;letter-spacing:.005em;
  color:var(--menu-texto);border:none;border-radius:8px;
  padding:10px 15px;
}
.nav a:hover{background:rgba(255,255,255,.09);color:#fff;}
.nav a.on{
  background:var(--menu-ativo);color:#1c1917;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.14);
}
.nav a:focus-visible{outline:2px solid var(--menu-ativo);outline-offset:-2px;}

/* dica de "arraste": esmaece a borda que ainda esconde item (classes do comum.js) */
.nav.tem-direita{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
                         mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);}
.nav.tem-esquerda{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);
                          mask-image:linear-gradient(90deg,transparent,#000 36px);}
.nav.tem-esquerda.tem-direita{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);}

/* ------------------------------------------------------------ cabeçalho */
header.top h1{font-weight:700;}
.eyebrow{color:var(--ink-soft);font-weight:600;}

/* -------------------------------------------------------------- cartões */
/* sombra leve: sobre o fundo creme, dá leitura de "camada" sem pesar */
.card,.semana,.eventos-bloco,.mundo-bloco,.menu-item,
.item-head,.painel,.market,.barra-mundo,
.h-head,.tatica,.andar,.c-head,.bloco,.rc,.transf{
  box-shadow:0 1px 2px rgba(60,42,20,.06), 0 3px 10px -6px rgba(60,42,20,.12);
}

/* campo de busca: era branco sobre branco, agora tem contorno e sombra */
#busca{border-color:var(--line);box-shadow:0 1px 2px rgba(60,42,20,.06);}

/* cartões do menu da home reagem ao passar o mouse */
.menu-item{transition:transform .12s, box-shadow .12s, border-color .12s;}
.menu-item:hover{transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(60,42,20,.35);}

@media (max-width:560px){
  .nav{top:6px;margin-bottom:20px;}
  .nav a{padding:9px 12px;font-size:13px;}
}


/* =====================================================================
   TEMA PERGAMINHO — claro e quente, com marca-d'água de criaturas ao fundo.
   Ativado por <body class="tema-rpg">. Redefine os tokens no <body>, então
   reescreve o :root claro de cada página sem tocar no <style> dela.
   ===================================================================== */
body.tema-rpg{
  --paper:#e7dcc0;      /* pergaminho */
  --fundo:#e7dcc0;
  --surface:#fbf5e6;    /* cartão creme, mais claro que o fundo */
  --ink:#2f2415;
  --ink-soft:#6a5a40;
  --ink-faint:#9a8a6b;
  --line:#d7c7a3;
  --line-soft:#efe6d2;
  --gold:#9c6f16;       /* dourado escuro: lê bem sobre claro */

  --menu-fundo:#2a2016;
  --menu-texto:#e7dab9;
  --menu-ativo:#e0a838;

  color:var(--ink);
  /* fundo: artwork oficial do Tibia (Verão 2023, via tibiawiki.com.br), fixo e
     cobrindo a tela, com um véu quente por cima pra emoldurar a folha central. */
  background-color:#2a2416;
  /* cada página escolhe seu artwork em --bg-art (inline no <body>); sem isso,
     cai no fundo padrão (Verão 2023) */
  background-image:
    linear-gradient(rgba(20,14,6,.12), rgba(20,14,6,.28)),
    var(--bg-art, url('img/fundo-verao2023.jpg'));
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center top;
  background-attachment:fixed;
}

/* títulos em fonte medieval — o que mais tira a "cara de template" */
.tema-rpg header.top h1, .tema-rpg h1, .tema-rpg h2{
  font-family:'Cinzel', Georgia, serif; letter-spacing:.005em;
  color:#5c3d13; text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.tema-rpg header.top h1{font-weight:700;}
.tema-rpg .eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.13em;font-size:11px;font-weight:700;}
.tema-rpg .eyebrow .dot{background:var(--gold);box-shadow:0 0 7px rgba(156,111,22,.6);}

/* menu: barra de madeira escura com aba ativa em ouro (contrasta com o pergaminho) */
.tema-rpg .nav{
  background:linear-gradient(#2c2117,#1f170f);
  border:1px solid #4a3a25;
  box-shadow:0 8px 22px -12px rgba(30,20,8,.7), inset 0 1px 0 rgba(255,255,255,.05);
}
.tema-rpg .nav a{color:var(--menu-texto);}
.tema-rpg .nav a:hover{background:rgba(224,168,56,.14);color:#fff;}
.tema-rpg .nav a.on{
  background:linear-gradient(#e6b45a,#c98f34);color:#241704;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.22), 0 0 12px rgba(224,168,56,.4);
}

/* cartões: creme sólido (o texto não sofre com a marca-d'água), borda quente */
.tema-rpg .card, .tema-rpg .semana, .tema-rpg .eventos-bloco, .tema-rpg .mundo-bloco,
.tema-rpg .menu-item, .tema-rpg .item-head, .tema-rpg .painel, .tema-rpg .market,
.tema-rpg .barra-mundo, .tema-rpg .h-head, .tema-rpg .tatica, .tema-rpg .andar,
.tema-rpg .c-head, .tema-rpg .bloco, .tema-rpg .rc, .tema-rpg .transf,
.tema-rpg .gate-cartao, .tema-rpg .spot, .tema-rpg .sugestoes{
  background:#fbf5e6;
  border-color:#d7c7a3;
  box-shadow:0 1px 2px rgba(80,60,20,.08), 0 6px 16px -10px rgba(80,60,20,.28);
}
.tema-rpg .menu-item:hover{border-color:var(--gold);background:#fff9ec;}

/* --- ajustes pedidos: cantos retos + folha única sobre o fundo --- */

/* a página inteira vira uma folha de pergaminho sólida; o fundo com criaturas
   só aparece emoldurando as bordas, sem passar por baixo do texto */
.tema-rpg .wrap{
  background:#f1e7cf;
  border:1px solid #cdb892;
  box-shadow:0 12px 44px -14px rgba(40,28,10,.55), inset 0 0 0 4px rgba(255,255,255,.35);
  border-radius:4px;
  margin:22px auto 44px;
  padding:22px 26px 46px;
  position:relative;   /* base da faixa de mapa abaixo — sem overflow:hidden, que quebraria o menu sticky */
}
@media (max-width:640px){ .tema-rpg .wrap{margin:10px auto 24px;padding:16px 14px 30px;} }

/* Faixa de mapa atrás da logo e do menu. A arte é escura no miolo e detalhada
   nas bordas, então a logo (dourada) ganha contraste em cima dela. O degradê
   dissolve a imagem no pergaminho antes do conteúdo começar. */
.tema-rpg .wrap::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:250px;
  border-radius:3px 3px 0 0;
  background:
    linear-gradient(to bottom,
      rgba(18,12,5,.62) 0%,
      rgba(18,12,5,.52) 40%,
      rgba(241,231,207,.55) 80%,
      #f1e7cf 100%),
    url('img/topo-mapa.jpg') center top / cover no-repeat;
  pointer-events:none;
  z-index:0;
}
/* conteúdo do topo por cima da faixa (o menu já sobe sozinho, é sticky) */
.tema-rpg .site-logo-link, .tema-rpg header.top{position:relative;z-index:1;}
@media (max-width:640px){ .tema-rpg .wrap::before{height:185px;} }

/* cantos retos em tudo (vence os arredondamentos de cada página) */
.tema-rpg .card, .tema-rpg .semana, .tema-rpg .eventos-bloco, .tema-rpg .mundo-bloco,
.tema-rpg .menu-item, .tema-rpg .item-head, .tema-rpg .painel, .tema-rpg .market,
.tema-rpg .barra-mundo, .tema-rpg .h-head, .tema-rpg .tatica, .tema-rpg .andar,
.tema-rpg .c-head, .tema-rpg .bloco, .tema-rpg .rc, .tema-rpg .transf,
.tema-rpg .gate-cartao, .tema-rpg .spot, .tema-rpg .sugestoes, .tema-rpg .nav,
.tema-rpg #busca, .tema-rpg #gateSenha, .tema-rpg select, .tema-rpg textarea,
.tema-rpg input[type=text], .tema-rpg input[type=password]{
  border-radius:3px !important;
}
/* selos/etiquetas/botões: também menos arredondados, pra manter a linguagem */
.tema-rpg .btn, .tema-rpg .chip, .tema-rpg .pill, .tema-rpg .selo, .tema-rpg .etiqueta,
.tema-rpg .mb-tag, .tema-rpg .mb-ev, .tema-rpg .ev-chip, .tema-rpg .atr, .tema-rpg .melhor,
.tema-rpg .nav a, .tema-rpg .semana-dia, .tema-rpg .ev-dia, .tema-rpg .spot-code,
.tema-rpg .spot-img, .tema-rpg .gate-btn, .tema-rpg .tag-sn, .tema-rpg .drop{
  border-radius:2px !important;
}

/* -------------------------------------------- aviso legal (Fansite Agreement)
   Exigência do acordo de fansites da CipSoft: o crédito e os links precisam
   aparecer em todas as páginas. Fica no comum.css para ser idêntico em todas. */
.legal{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);
  font-size:11.5px;color:var(--ink-faint);line-height:1.6;
}
.legal a{color:var(--gold);}
.tema-rpg .legal{border-top-color:rgba(120,90,40,.18);}

/* ------------------------------------------------- texto explicativo da página
   Existe porque as páginas de ferramenta não mostravam nada antes da busca:
   quem chegava (visitante ou revisor) via só um campo vazio. */
.bloco-texto{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;margin:26px 0 0;
}
.bloco-texto h2{margin:0 0 10px;font-size:16px;font-weight:700;}
.bloco-texto h3{margin:16px 0 6px;font-size:14px;font-weight:700;color:var(--ink-soft);}
.bloco-texto p{margin:0 0 11px;font-size:13.5px;color:var(--ink-soft);line-height:1.75;}
.bloco-texto p:last-child{margin-bottom:0;}
.bloco-texto b{color:var(--ink);}
/* a grade estática usa <a>, a do JS usa <button>: mesmo visual nos dois */
a.pop-card{text-decoration:none;color:inherit;}