/* ==========================================================================
   NOSTALGAR WIKI — camada de layout (sobre tokens.css + identidade.css)
   Classes próprias do wiki usam o prefixo .w-
   Tipografia: prosa = Alegreya · dados/UI = Alegreya Sans · títulos = Cinzel
   · números-troféu = VT323. Movimento: a chama tremula, o site não dança —
   mas a página respira (view transitions + revelação ao rolar via AOS).
   ========================================================================== */

/* ------------------------------------------------ transição entre páginas */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: w-sair 180ms ease-in both;
}
::view-transition-new(root) {
  animation: w-entrar 260ms ease-out both;
}
@keyframes w-sair   { to { opacity: 0; } }
@keyframes w-entrar { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ----------------------------------------------- o mundo atrás da página */
/* Thais vista de cima (mapa real) sob véu de noite: a página inteira ganha
   fundo temático; o conteúdo flutua num tabuleiro de pedra por cima.
   Camadas: imagem (z -2) < ruído/brilho do identidade.css (z -1) < conteúdo.
   url() relativa resolve contra ESTE stylesheet (assets/) — pegadinha Chrome. */
.ns-corpo::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(130% 120% at 50% 0%, rgba(28, 21, 12, 0.38) 30%, rgba(28, 21, 12, 0.82) 100%),
    linear-gradient(180deg, rgba(28, 21, 12, 0.42), rgba(28, 21, 12, 0.52)),
    url('identidade/fundos/fundo-pagina.webp') center / cover no-repeat,
    var(--pedra-1);
  image-rendering: pixelated;
}

/* o tabuleiro: coluna de conteúdo em pedra quase sólida sobre o mundo */
.w-miolo {
  background: linear-gradient(180deg, rgba(39, 29, 16, 0.90), rgba(39, 29, 16, 0.86));
  border-inline: 1px solid rgba(117, 91, 54, 0.45);
  box-shadow: 0 0 48px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------- links: nunca o azul UA */
.w-miolo a:not(.ns-btn):not(.ns-tag) { color: var(--cor-link); text-decoration: none; }
.w-miolo a:not(.ns-btn):not(.ns-tag):hover { color: var(--brasa-2); }
.w-infobox a, .ns-tabela a {
  border-bottom: 1px solid color-mix(in srgb, var(--cor-link) 30%, transparent);
  transition: color var(--transicao), border-color var(--transicao);
}
.w-infobox a:hover, .ns-tabela a:hover { border-bottom-color: var(--brasa-2); }

/* --------------------------------------------------------------- topo fixo */
.w-topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(28, 21, 12, 0.97), rgba(39, 29, 16, 0.95));
  border-bottom: 1px solid var(--linha-2);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
}
/* fio de brasa no topo da página — a linha de fogo da taverna */
.w-topo::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--brasa-3) 18%, var(--brasa-1) 50%, var(--brasa-3) 82%, transparent);
}
.w-topo-linha {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: 12px var(--esp-4) 10px;
}
.w-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
}
.w-marca img { height: 36px; filter: drop-shadow(0 0 8px rgba(242, 169, 59, 0.25)); }
.w-marca b {
  font-family: var(--fonte-display);
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  color: var(--ouro-claro);
  text-shadow: 0 1px 0 #000;
}
.w-marca span {
  font-family: var(--fonte-pixel);
  font-size: 0.95rem;
  color: var(--brasa-1);
  border: 1px solid var(--brasa-3);
  padding: 2px 6px 1px;
  margin-left: 2px;
  background: var(--brasa-veu);
}

/* busca */
.w-busca {
  position: relative;
  flex: 1;
  max-width: 480px;
  margin-left: auto;
}
.w-busca input {
  width: 100%;
  background: var(--pedra-0);
  border: 1px solid var(--linha-2);
  color: var(--tinta-1);
  font-family: var(--fonte-ui);
  font-size: var(--texto-sm);
  padding: 9px 12px 9px 36px;
  outline: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.w-busca input::placeholder { color: var(--tinta-3); }
.w-busca input:focus { border-color: var(--brasa-3); box-shadow: var(--brilho-tocha), inset 0 2px 4px rgba(0, 0, 0, 0.45); }
.w-busca::before {
  content: '';
  position: absolute;
  left: 11px; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 6px 6px, transparent 4px, var(--tinta-3) 4px 5.5px, transparent 5.5px),
    linear-gradient(-45deg, transparent 8px, var(--tinta-3) 8px 10px, transparent 10px);
  pointer-events: none;
}
.w-busca-resultados {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  max-height: 380px;
  overflow-y: auto;
  background: var(--pedra-2);
  border: 1px solid var(--linha-2);
  box-shadow: var(--sombra-card);
  display: none;
}
.w-busca-resultados.aberta { display: block; animation: w-entrar 160ms ease-out both; }
.w-busca-resultados a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: var(--tinta-1);
  text-decoration: none;
  font-family: var(--fonte-ui);
  font-size: var(--texto-sm);
  border-bottom: 1px solid var(--linha-1);
}
.w-busca-resultados a:hover, .w-busca-resultados a.ativo {
  background: var(--brasa-veu);
  color: var(--brasa-2);
}
.w-busca-resultados img { width: 24px; height: 24px; image-rendering: pixelated; }
.w-busca-resultados small { margin-left: auto; color: var(--tinta-3); font-family: var(--fonte-ui); letter-spacing: 0.04em; }

/* navegação principal — sublinhado que acende como pavio */
.w-nav {
  display: flex;
  gap: 2px;
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: 0 var(--esp-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.w-nav::-webkit-scrollbar { display: none; }
.w-nav a {
  position: relative;
  font-family: var(--fonte-display);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-2);
  text-decoration: none;
  padding: 9px 13px 10px;
  white-space: nowrap;
  transition: color var(--transicao);
}
.w-nav a::after {
  content: '';
  position: absolute;
  left: 13px; right: 13px; bottom: 0;
  height: 2px;
  background: var(--brasa-1);
  box-shadow: 0 0 8px rgba(242, 169, 59, 0.7);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 200ms ease-out;
}
.w-nav a:hover { color: var(--brasa-2); }
.w-nav a:hover::after { transform: scaleX(0.6); }
.w-nav a.ativa { color: var(--brasa-1); }
.w-nav a.ativa::after { transform: scaleX(1); }

/* ------------------------------------------------------------------ miolo */
.w-miolo {
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: var(--esp-6) var(--esp-4) var(--esp-8);
}
.w-trilha {
  font-family: var(--fonte-ui);
  font-size: var(--texto-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: var(--esp-4);
}
.w-trilha a { color: var(--tinta-2); text-decoration: none; }
.w-trilha a:hover { color: var(--brasa-2); }

.w-cabeca {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  margin-bottom: var(--esp-4);
}
.w-cabeca .ns-titulo { margin: 0; }
.w-cabeca .w-icone {
  width: 64px; height: 64px;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6));
}

/* infobox à direita, estilo TibiaWiki */
.w-artigo { display: flow-root; }
.w-infobox {
  float: right;
  width: 320px;
  margin: 0 0 var(--esp-4) var(--esp-5);
  font-family: var(--fonte-ui);
  font-size: var(--texto-sm);
  background: var(--pedra-2);
}
.w-infobox .w-retrato {
  display: flex;
  justify-content: center;
  padding: var(--esp-5);
  background:
    radial-gradient(circle at 50% 42%, rgba(242, 169, 59, 0.13), transparent 65%),
    var(--pedra-0);
  border-bottom: 1px solid var(--linha-2);
}
.w-infobox .w-retrato img { image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55)); }
.w-infobox table { width: 100%; border-collapse: collapse; }
.w-infobox th {
  font-family: var(--fonte-ui);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: var(--caps-ui);
  text-transform: uppercase;
  color: var(--brasa-1);
  text-align: left;
  padding: 7px 12px;
  width: 44%;
  vertical-align: top;
  border-bottom: 1px solid var(--linha-1);
}
.w-infobox td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--linha-1);
  color: var(--tinta-1);
  line-height: 1.45;
}
.w-infobox tr:last-child th, .w-infobox tr:last-child td { border-bottom: 0; }
.w-infobox caption {
  font-family: var(--fonte-display);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--texto-sm);
  color: var(--pedra-0);
  background: linear-gradient(180deg, var(--brasa-2), var(--brasa-1) 60%, var(--brasa-3));
  padding: 8px 12px 7px;
  text-shadow: 0 1px 0 rgba(255, 235, 190, 0.35);
}

/* portais da home */
.w-portais { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.w-portal {
  position: relative;
  text-align: center;
  padding: var(--esp-5) var(--esp-4);
  clip-path: polygon(
    var(--chanfro) 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro),
    100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%,
    var(--chanfro) 100%, 0 calc(100% - var(--chanfro)), 0 var(--chanfro));
}
.w-portal img {
  width: 64px; height: 64px;
  image-rendering: pixelated;
  margin-bottom: var(--esp-2);
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55));
  transition: transform 200ms ease-out, filter 200ms ease-out;
}
.w-portal:hover img {
  transform: scale(1.15) translateY(-2px);
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.5)) drop-shadow(0 0 14px rgba(242, 169, 59, 0.45));
}
.w-portal h3 { margin: 0 0 4px; font-family: var(--fonte-display); font-size: var(--texto-lg);
               letter-spacing: 0.08em; text-transform: uppercase; color: var(--ouro-claro); }
.w-portal p { margin: 0; font-family: var(--fonte-ui); color: var(--tinta-2); font-size: var(--texto-sm); }
.w-portal .ns-num { color: var(--brasa-1); }

/* --------------------------------------------------------- hero (c/ vídeo) */
.w-hero {
  position: relative;
  border: 1px solid var(--linha-2);
  box-shadow: var(--sombra-card);
  margin-bottom: var(--esp-6);
  padding: var(--esp-8) var(--esp-6);
  text-align: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(28, 21, 12, 0.55), rgba(28, 21, 12, 0.72)),
    var(--w-hero-img, radial-gradient(900px 420px at 50% 0%, #493720, var(--pedra-0)));
  background-size: cover;
  background-position: center 32%;
  image-rendering: pixelated;
}
.w-hero--video { padding: clamp(64px, 12vh, 128px) var(--esp-6); }
.w-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  image-rendering: pixelated;
  filter: saturate(1.06) brightness(0.97);
}
/* véu + vinheta + fusão com a pedra da página */
.w-hero-veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 20%, transparent 40%, rgba(28, 21, 12, 0.5) 100%),
    linear-gradient(180deg, rgba(28, 21, 12, 0.42), rgba(28, 21, 12, 0.26) 40%, rgba(28, 21, 12, 0.72) 88%, var(--pedra-1));
}
/* linhas de varredura discretas: lembra o monitor de 2004 sem virar ruído */
.w-hero-veu::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.07) 3px 4px);
}
.w-hero > :not(.w-hero-video):not(.w-hero-veu) { position: relative; z-index: 2; }
.w-hero h1 {
  font-family: var(--fonte-display);
  font-weight: 900;
  font-size: var(--texto-hero);
  letter-spacing: 0.12em;
  color: var(--ouro-claro);
  margin: 0 0 var(--esp-2);
  text-shadow: 0 2px 0 #000, 0 0 34px rgba(242, 169, 59, 0.35);
}
.w-hero p { color: var(--tinta-1); font-size: var(--texto-lg); margin: 0 auto var(--esp-5); max-width: 640px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); text-wrap: balance; }
.w-hero .w-hero-acoes { display: flex; gap: var(--esp-3); justify-content: center; flex-wrap: wrap; margin: 0; }

/* filtros de listas */
.w-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-bottom: var(--esp-4);
  align-items: center;
  font-family: var(--fonte-ui);
}
.w-filtros .ns-tag { cursor: pointer; user-select: none; }
.w-filtros .ns-tag:hover { color: var(--brasa-2); border-color: var(--brasa-3); }
.w-filtros .ns-tag.ativo { color: var(--pedra-0); background: var(--brasa-1); border-color: var(--brasa-3); }

/* tabelas ordenáveis */
.ns-tabela th[data-ordenar] { cursor: pointer; user-select: none; }
.ns-tabela th[data-ordenar]::after { content: ' ↕'; color: var(--tinta-3); }
.ns-tabela th.asc::after { content: ' ▲'; color: var(--brasa-1); }
.ns-tabela th.desc::after { content: ' ▼'; color: var(--brasa-1); }

/* raridade de loot — cores calibradas p/ contraste sobre pedra */
.w-raro-comum { color: #ddd2b6; }
.w-raro-incomum { color: #aecf83; }
.w-raro-semirraro { color: #a6c3ea; }
.w-raro-raro { color: #ffc565; }
.w-raro-muitorraro { color: #e2a8f0; }

/* barra de chance sob a célula (--pc = 0–100%) */
.w-chance {
  background:
    linear-gradient(to right,
      color-mix(in srgb, currentColor 42%, transparent) var(--pc, 0%),
      transparent var(--pc, 0%)) left bottom / 100% 3px no-repeat;
  padding-bottom: 10px;
  white-space: nowrap;
}

/* zebra + respiro nas tabelas do wiki */
.ns-tabela tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }

/* dano por elemento (página de criatura) */
.w-elems { display: grid; gap: 7px; max-width: 540px; margin: 0 0 var(--esp-4); font-family: var(--fonte-ui); }
.w-elem { display: grid; grid-template-columns: 112px 1fr 64px; gap: 10px; align-items: center; }
.w-elem-rotulo { font-size: var(--texto-sm); color: var(--tinta-2); text-transform: capitalize; }
.w-elem-trilho {
  height: 13px;
  background: var(--pedra-0);
  border: 1px solid var(--linha-1);
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.5);
  position: relative;
}
.w-elem-trilho i {
  position: absolute; inset: 1px auto 1px 1px;
  width: var(--pc, 0%);
  max-width: calc(100% - 2px);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cor, var(--tinta-3)) 88%, #fff 12%),
    var(--cor, var(--tinta-3)));
}
.w-elem-trilho::after {           /* marca dos 100% (dano neutro) */
  content: '';
  position: absolute; top: -3px; bottom: -3px;
  left: calc(66.6% - 1px);
  width: 1px;
  background: var(--tinta-3);
  opacity: 0.55;
}
.w-elem b { font-family: var(--fonte-ui); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.98rem; text-align: right; }

/* filtro de texto das tabelas */
.w-filtra {
  background: var(--pedra-0);
  border: 1px solid var(--linha-2);
  color: var(--tinta-1);
  font-family: var(--fonte-ui);
  font-size: var(--texto-sm);
  padding: 8px 12px;
  min-width: 230px;
  outline: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}
.w-filtra:focus { border-color: var(--brasa-3); box-shadow: var(--brilho-tocha), inset 0 2px 4px rgba(0, 0, 0, 0.4); }

/* faixa de números do mundo (home) — troféus em VT323, contados ao entrar */
.w-numeros {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--esp-3) var(--esp-6);
  margin: var(--esp-5) 0 var(--esp-6);
  padding: var(--esp-4) var(--esp-5);
  border-top: 1px solid var(--linha-1);
  border-bottom: 1px solid var(--linha-1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent);
}
.w-numeros a { text-align: center; text-decoration: none; }
.w-numeros b {
  display: block;
  font-family: var(--fonte-pixel);
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--brasa-1);
  text-shadow: 0 0 12px rgba(242, 169, 59, 0.35);
  font-variant-numeric: tabular-nums;
}
.w-numeros small {
  font-family: var(--fonte-ui);
  font-weight: 500;
  font-size: var(--texto-xs);
  letter-spacing: var(--caps-ui);
  text-transform: uppercase;
  color: var(--tinta-2);
}
.w-numeros a:hover b { animation: ns-tocha 1.2s ease-in-out infinite; }

/* mapa: moldura com rolagem (recortes estáticos) */
.w-mapa {
  overflow: auto;
  max-height: 70vh;
  border: 1px solid var(--linha-2);
  box-shadow: var(--sombra-card);
  background: #000;
}
.w-mapa img { display: block; width: 100%; image-rendering: pixelated; }

/* ------------------------------------------------------- mapa interativo */
.w-mapa-vis {
  position: relative;
  overflow: hidden;
  height: min(72vh, 780px);
  border: 1px solid var(--linha-2);
  box-shadow: var(--sombra-card);
  background: #000;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.w-mapa-vis.arrastando { cursor: grabbing; }
.w-mapa-palco {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.w-mapa-palco img {
  display: block;
  image-rendering: pixelated;
  pointer-events: none;
}
.w-marc {
  position: absolute;
  /* escala inversa (--inv) mantém o marcador do mesmo tamanho em qualquer zoom;
     a âncora (ponta do losango) fica pregada na coordenada do mapa */
  transform: scale(var(--inv, 1)) translate(-50%, -100%);
  transform-origin: 0 0;
  text-decoration: none;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.w-marc::after {                 /* losango de brasa fincado no ponto */
  content: '';
  width: 9px; height: 9px;
  background: var(--brasa-1);
  border: 1px solid #000;
  transform: rotate(45deg);
  box-shadow: 0 0 6px rgba(242, 169, 59, 0.8);
}
.w-marc span {
  font-family: var(--fonte-ui);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--tinta-0, #f0e4c8);
  background: rgba(28, 21, 12, 0.9);
  border: 1px solid var(--linha-2);
  padding: 4px 7px 3px;
  white-space: nowrap;
}
.w-marc:hover span { color: var(--brasa-2); border-color: var(--brasa-3); }
.w-marc--caca::after { background: var(--lacre-2); box-shadow: 0 0 6px rgba(166, 43, 33, 0.8); }
.w-marc--caca span { display: none; }
.w-marc--caca:hover span, .w-marc--caca:focus span { display: block; }
.w-marc--alvo::after {
  width: 11px; height: 11px;
  animation: w-pulso 1.6s ease-in-out infinite;
}

/* o X do tesouro: duas barras de lacre cruzadas, fincadas no ponto exato.
   Âncora no CENTRO (translate -50%,-50%), não na ponta como o losango. */
.w-marc--x { transform: scale(var(--inv, 1)) translate(-50%, -50%); gap: 0; }
.w-marc--x::before, .w-marc--x::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 5px;
  margin: -2.5px 0 0 -10px;
  background: linear-gradient(180deg, #e0574a, var(--lacre-1) 70%);
  border: 1px solid #1a0503;
  box-shadow: 0 0 8px rgba(198, 71, 58, 0.9);
  transform: rotate(45deg);
  animation: w-pulso-x 1.6s ease-in-out infinite;
}
.w-marc--x::after { transform: rotate(-45deg); }
.w-marc--x span {
  position: absolute;
  bottom: calc(50% + 14px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--tinta-0, #f0e4c8);
  border-color: var(--lacre-3);
}
/* variante quieta do X (camada de baús): menor, sem pulso, rótulo só no hover */
.w-marc--x-quieto::before, .w-marc--x-quieto::after {
  width: 13px; height: 4px;
  margin: -2px 0 0 -6.5px;
  animation: none;
  box-shadow: 0 0 4px rgba(198, 71, 58, 0.6);
}
.w-marc--x-quieto span { display: none; }
.w-marc--x-quieto:hover span, .w-marc--x-quieto:focus span { display: block; }

@keyframes w-pulso {
  0%, 100% { box-shadow: 0 0 4px rgba(242, 169, 59, 0.9); }
  50% { box-shadow: 0 0 16px rgba(242, 169, 59, 1); }
}
@keyframes w-pulso-x {
  0%, 100% { box-shadow: 0 0 5px rgba(198, 71, 58, 0.75); }
  50% { box-shadow: 0 0 16px rgba(224, 87, 74, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .w-marc--alvo::after, .w-marc--x::before, .w-marc--x::after { animation: none; }
}

.w-mapa-hud {
  position: absolute;
  right: 10px; top: 10px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.w-mapa-hud button {
  width: 36px; height: 36px;
  font-family: var(--fonte-pixel);
  font-size: 1.3rem;
  color: var(--tinta-1);
  background: linear-gradient(180deg, var(--pedra-4), var(--pedra-3));
  border: 1px solid var(--linha-2);
  box-shadow: inset 1px 1px 0 var(--bisel-luz), inset -1px -1px 0 var(--bisel-sombra);
  cursor: pointer;
}
.w-mapa-hud button:hover { color: var(--brasa-2); border-color: var(--brasa-3); }
.w-mapa-hud button:active { box-shadow: inset -1px -1px 0 var(--bisel-luz), inset 1px 1px 0 var(--bisel-sombra); }
/* leitor de coordenadas: ferramenta de staff — só aparece com ?dev na URL */
.w-mapa-coord {
  display: none;
  position: absolute;
  left: 10px; bottom: 10px;
  z-index: 5;
  font-family: var(--fonte-pixel);
  font-size: 0.95rem;
  color: var(--tinta-2);
  background: rgba(28, 21, 12, 0.9);
  border: 1px solid var(--linha-1);
  padding: 4px 8px 3px;
  cursor: pointer;
}
.w-mapa-vis.w-dev .w-mapa-coord { display: block; }
.w-mapa-coord:hover { color: var(--brasa-2); }

/* ------------------------------------------------------- spoiler de quest */
.w-spoiler { margin: var(--esp-5) 0; }
.w-spoiler > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: var(--texto-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brasa-1);
  padding: var(--esp-3) var(--esp-4);
  background: var(--brasa-veu);
  border: 1px solid var(--linha-2);
  border-left: 3px solid var(--brasa-1);
  transition: background var(--transicao), color var(--transicao);
}
.w-spoiler > summary::-webkit-details-marker { display: none; }
.w-spoiler > summary:hover { background: rgba(242, 169, 59, 0.14); color: var(--brasa-2); }
/* selo de cera lacrando o segredo; gira ao abrir */
.w-spoiler > summary::before {
  content: '✕';
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 0.7rem;
  color: var(--perg-1);
  background: radial-gradient(circle at 35% 30%, var(--lacre-2), var(--lacre-1) 55%, var(--lacre-3));
  box-shadow: inset 0 1px 2px rgba(255, 200, 180, 0.25), inset 0 -2px 3px rgba(0, 0, 0, 0.45);
  transition: transform 260ms ease-out;
}
.w-spoiler[open] > summary::before { transform: rotate(90deg); content: '◆'; }
.w-spoiler[open] > summary { border-bottom: 1px dashed var(--linha-2); }
.w-spoiler .w-spoiler-corpo {
  border: 1px solid var(--linha-2);
  border-top: 0;
  padding: var(--esp-5) var(--esp-5);
  background: var(--pedra-2);
}
.w-spoiler[open] .w-spoiler-corpo { animation: w-entrar 240ms ease-out both; }
@media (prefers-reduced-motion: reduce) { .w-spoiler[open] .w-spoiler-corpo { animation: none; } }

/* passo a passo da quest — trilha numerada */
.w-passos {
  list-style: none;
  counter-reset: passo;
  margin: var(--esp-3) 0 var(--esp-4);
  padding: 0;
}
.w-passos > li {
  counter-increment: passo;
  position: relative;
  padding: var(--esp-3) var(--esp-4) var(--esp-3) 56px;
  border: 1px solid var(--linha-1);
  border-left: 3px solid var(--brasa-3);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent);
  margin-bottom: 8px;
  line-height: 1.6;
}
.w-passos > li::before {
  content: counter(passo);
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 27px; height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-pixel);
  font-size: 1.1rem;
  padding-top: 2px;
  color: var(--pedra-0);
  background: linear-gradient(180deg, var(--brasa-2), var(--brasa-1) 60%, var(--brasa-3));
  border: 1px solid var(--brasa-3);
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.5), 0 0 8px rgba(242, 169, 59, 0.35);
}
.w-passos > li:last-child { margin-bottom: 0; }
.w-passos b { color: var(--ouro-claro); }

/* requisitos e perigos (grades com sprites) */
.w-fichas {
  display: grid;
  gap: var(--esp-2);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  margin: var(--esp-3) 0 var(--esp-4);
  font-family: var(--fonte-ui);
}
.w-ficha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--linha-1);
  background: var(--pedra-2);
  font-size: var(--texto-sm);
  color: var(--tinta-1);
  text-decoration: none;
}
a.w-ficha { transition: border-color var(--transicao), background var(--transicao), transform var(--transicao); }
a.w-ficha:hover { border-color: var(--brasa-3); background: var(--brasa-veu); transform: translateY(-1px); }
.w-ficha img { image-rendering: pixelated; flex: 0 0 auto; }
.w-ficha small { color: var(--tinta-3); margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.w-ficha--perigo { border-left: 3px solid var(--lacre-2); }
/* requisito carrega texto corrido (com links/sprites no meio):
   bloco normal, não flex — senão cada trecho vira coluna */
.w-ficha--req { display: block; border-left: 3px solid var(--mana-3); line-height: 1.55; }
.w-ficha--req img { vertical-align: middle; }

/* rodapé */
.w-rodape {
  border-top: 1px solid var(--linha-2);
  background:
    radial-gradient(700px 200px at 50% 0%, rgba(242, 169, 59, 0.045), transparent 70%),
    var(--pedra-0);
  margin-top: var(--esp-8);
}
.w-rodape-linha {
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: var(--esp-6) var(--esp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-5);
  align-items: center;
  justify-content: space-between;
  color: var(--tinta-3);
  font-family: var(--fonte-ui);
  font-size: var(--texto-sm);
}
.w-rodape nav { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.w-rodape a { color: var(--tinta-2); text-decoration: none; }
.w-rodape a:hover { color: var(--brasa-2); }

/* prosa de artigo */
.w-prosa { font-size: var(--texto-md); }
.w-prosa h2 {
  font-family: var(--fonte-display);
  font-size: var(--texto-xl);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brasa-1);
  border-bottom: 1px solid var(--linha-2);
  padding-bottom: var(--esp-2);
  margin: var(--esp-6) 0 var(--esp-4);
}
.w-prosa h3 {
  font-family: var(--fonte-ui);
  font-weight: 700;
  font-size: var(--texto-md);
  letter-spacing: var(--caps-ui);
  text-transform: uppercase;
  color: var(--ouro-claro);
  margin: var(--esp-5) 0 var(--esp-3);
}
.w-prosa p { margin: 0 0 var(--esp-4); max-width: 76ch; }
.w-prosa a { color: var(--cor-link); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--cor-link) 35%, transparent); }
.w-prosa a:hover { color: var(--brasa-2); border-bottom-color: var(--brasa-2); }
.w-prosa a.w-inexistente { color: var(--tinta-3); border-bottom-style: dashed; }

/* responsivo */
@media (max-width: 760px) {
  .w-infobox { float: none; width: 100%; margin: 0 0 var(--esp-4); }
  .w-topo-linha { flex-wrap: wrap; }
  .w-busca { order: 3; max-width: none; flex-basis: 100%; }
  .w-hero h1 { font-size: var(--texto-2xl); }
  .w-hero--video { padding: var(--esp-7) var(--esp-4); }
}

/* --------------------------------------------------------------------------
   Compatibilidade: classes das páginas institucionais escritas à mão
   (servidor/rates/regras/qol) mapeadas para o design system.
   -------------------------------------------------------------------------- */
.w-compat h1 { font-family: var(--fonte-display); font-weight: 900; font-size: var(--texto-2xl);
  letter-spacing: var(--caps-espaco); text-transform: uppercase; color: var(--ouro-claro);
  text-shadow: 0 1px 0 #000; margin: 0 0 var(--esp-4); }
.w-compat .lead { font-size: var(--texto-lg); color: var(--tinta-2); max-width: 72ch; }
.w-compat .callout { background: var(--brasa-veu); border: 1px solid var(--linha-2);
  border-left: 3px solid var(--brasa-1); padding: var(--esp-4) var(--esp-5); }
.w-compat .callout.warn { border-left-color: var(--lacre-2); background: rgba(166, 43, 33, 0.07); }
.w-compat .grid { display: grid; gap: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.w-compat .card, .w-compat .panel { background: linear-gradient(180deg, var(--pedra-4), var(--pedra-3) 55%);
  border: 1px solid var(--linha-2); padding: var(--esp-4) var(--esp-5);
  box-shadow: inset 1px 1px 0 var(--bisel-luz), inset -1px -1px 0 var(--bisel-sombra), var(--sombra-baixa); }
.w-compat .card h3 { font-family: var(--fonte-display); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ouro-claro); margin-top: 0; font-size: var(--texto-md); }
.w-compat .promises { list-style: none; padding: 0; display: grid; gap: var(--esp-2); }
.w-compat .promises li { background: var(--pedra-2); border: 1px solid var(--linha-1);
  border-left: 3px solid var(--brasa-3); padding: var(--esp-3) var(--esp-4); }
.w-compat .table-scroll { overflow-x: auto; }
.w-compat table { width: 100%; border-collapse: collapse; font-size: var(--texto-sm);
  font-family: var(--fonte-ui);
  background: var(--pedra-2); border: 1px solid var(--linha-2); }
.w-compat th { font-family: var(--fonte-display); font-size: var(--texto-xs); letter-spacing: 0.1em;
  text-transform: uppercase; text-align: left; color: var(--brasa-1); background: var(--pedra-0);
  padding: 10px 12px; border-bottom: 2px solid var(--brasa-3); }
.w-compat td { padding: 8px 12px; border-bottom: 1px solid var(--linha-1); }
.w-compat tbody tr:hover { background: var(--brasa-veu); }
.w-compat .tag { display: inline-block; font-family: var(--fonte-ui); font-weight: 500;
  font-size: var(--texto-xs); letter-spacing: var(--caps-ui); text-transform: uppercase;
  line-height: 1; padding: 5px 9px 4px; border: 1px solid var(--linha-2); background: var(--pedra-2);
  color: var(--tinta-2); white-space: nowrap; }
.w-compat .tag.green { color: var(--musgo-2); border-color: var(--musgo-3); background: rgba(133,172,89,.10); }
.w-compat .tag.orange { color: var(--brasa-2); border-color: var(--brasa-3); background: var(--brasa-veu); }
.w-compat .tag.blue { color: var(--mana-2); border-color: var(--mana-3); background: rgba(127,160,204,.10); }
.w-compat .tag.black { color: var(--tinta-1); border-color: var(--tinta-3); background: rgba(28,21,12,.10); }
.w-compat .tag.zero, .w-compat .tag.red { color: #e89288; border-color: var(--lacre-3); background: rgba(166,43,33,.14); }
.w-compat .yes { color: var(--musgo-2); }
.w-compat .no { color: #e89288; }
.w-compat .tbd { color: var(--tinta-3); font-style: italic; }
.w-compat code, .w-compat .mono { font-family: var(--fonte-pixel); font-size: 1.05em; color: var(--brasa-2); }
.w-compat h2 { font-family: var(--fonte-display); font-size: var(--texto-xl); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brasa-1); border-bottom: 1px solid var(--linha-2);
  padding-bottom: var(--esp-2); margin: var(--esp-6) 0 var(--esp-4); }

/* ------------------------------------------------ calendário de eventos */
.w-eventos-hero {
  background:
    radial-gradient(circle at 18% 22%, rgba(127, 160, 204, .22), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(242, 169, 59, .22), transparent 28%),
    linear-gradient(135deg, #1c150c, #3d2e1a 52%, #1c150c);
}
.w-eventos-grade { align-items: stretch; }
.w-evento-card {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.w-evento-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(var(--brasa-2), var(--brasa-3));
}
.w-evento-card h3 a { color: inherit; border: 0; }
.w-evento-card > .ns-link { margin-top: auto; align-self: flex-start; }
.w-evento-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-bottom: var(--esp-3);
}
.w-evento-data {
  color: var(--brasa-2);
  font-family: var(--fonte-ui);
  font-weight: 700;
  margin-bottom: var(--esp-3) !important;
}
.w-eventos-tabela td { vertical-align: top; }
.w-evento-detalhe .w-cabeca { align-items: flex-start; }
.w-evento-detalhe .w-cabeca h1 { margin-bottom: var(--esp-3); }
.w-evento-voltar {
  border-top: 1px solid var(--linha-2);
  margin-top: var(--esp-6) !important;
  padding-top: var(--esp-4);
}
.w-idioma {
  margin-top: var(--esp-6);
  border: 1px solid var(--linha-2);
  background: var(--pedra-2);
}
.w-idioma > summary {
  cursor: pointer;
  color: var(--brasa-2);
  font-family: var(--fonte-ui);
  font-weight: 700;
  padding: var(--esp-3) var(--esp-4);
}
.w-idioma > div {
  border-top: 1px solid var(--linha-1);
  padding: var(--esp-4) var(--esp-5);
}
.w-idioma > div > :last-child { margin-bottom: 0; }

/* ==========================================================================
   TEMA CLARO — "dia de taverna" (pedido do Lucas, ref. TibiaWiki: minimalista
   e claro). Estratégia: o miolo remapeia as variáveis do design system para
   papel/creme — os componentes .ns-* viram claros sozinhos; header, rodapé,
   hero de vídeo e mapa interativo continuam ilhas escuras de marca (como o
   tibia.com clássico: página clara, moldura escura). Fundo da página =
   arte oficial da taverna (20 anos) quase marca-d'água.
   ========================================================================== */

:root { --largura-conteudo: min(1400px, 96vw); }

body.ns-corpo { background: #f6f1e4; color: #2f2412; }

/* textura de papel no lugar do ruído de pedra */
body.ns-corpo::before {
  background:
    radial-gradient(1100px 400px at 50% -140px, rgba(184, 118, 26, 0.05), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(107, 84, 45, 0.025) 3px 4px);
}

/* a taverna atrás de tudo, clareada até virar lembrança */
body.ns-corpo::after {
  background:
    linear-gradient(180deg, rgba(246, 241, 228, 0.87), rgba(246, 241, 228, 0.93) 55%, rgba(246, 241, 228, 0.965)),
    url('identidade/fundos/arte-taverna.jpg') center 22% / cover no-repeat,
    #f6f1e4;
  image-rendering: auto;
}

/* miolo claro: remapeia o design system e derruba o "tabuleiro" */
.w-miolo {
  /* superfícies de papel */
  --pedra-0: #eee5cd;   /* cabeçalho de tabela / âncora clara */
  --pedra-1: #f6f1e4;
  --pedra-2: #fffdf6;   /* tabela, painel */
  --pedra-3: #fbf6ea;   /* card */
  --pedra-4: #f2ead6;   /* hover */
  --linha-1: #e3d8ba;
  --linha-2: #c9b98e;
  /* tinta escura sobre papel */
  --tinta-0: #1f1808;
  --tinta-1: #2f2412;
  --tinta-2: #64522f;
  --tinta-3: #8f7c57;
  /* acentos recalibrados p/ contraste sobre claro */
  --ouro-claro: #8a5c10;                 /* títulos e links herdam (cor-link) */
  --brasa-1: #b8761a;
  --brasa-2: #9a5f0e;
  --brasa-3: #7c4d0e;
  --brasa-veu: rgba(184, 118, 26, 0.09);
  --musgo-1: #5f8433; --musgo-2: #47701c; --musgo-3: #a8c184;
  --lacre-1: #a62b21; --lacre-2: #a33528; --lacre-3: #dcaaa1;
  --mana-1: #4a6c9e;  --mana-2: #38609c;  --mana-3: #aec2dc;
  /* relevo suave, sombra de papel */
  --bisel-luz: rgba(255, 255, 255, 0.8);
  --bisel-sombra: rgba(107, 84, 45, 0.18);
  --sombra-baixa: 0 1px 0 rgba(107, 84, 45, 0.10);
  --sombra-card: 0 1px 0 rgba(107, 84, 45, 0.08), 0 6px 18px rgba(107, 84, 45, 0.12);
  --brilho-tocha: 0 0 14px rgba(184, 118, 26, 0.22);

  color: var(--tinta-1);
  /* tela inteira: sem painel, sem bordas — o conteúdo É a página */
  background: none;
  border-inline: 0;
  box-shadow: none;
}

/* ilhas escuras de marca: hero (vídeo) e mapa interativo restauram a noite */
.w-hero, .w-mapa-vis {
  --pedra-0: #1c150c; --pedra-1: #271d10; --pedra-2: #322515;
  --pedra-3: #3d2e1a; --pedra-4: #493720;
  --linha-1: #5c4729; --linha-2: #755b36;
  --tinta-0: #fdf8ea; --tinta-1: #f5ecd6; --tinta-2: #dccdab; --tinta-3: #b5a381;
  --ouro-claro: #e8c56e;
  --brasa-1: #f2a93b; --brasa-2: #ffc565; --brasa-3: #b87818;
  --brasa-veu: rgba(242, 169, 59, 0.08);
  --musgo-1: #85ac59; --musgo-2: #a3c878; --musgo-3: #4c6630;
  --lacre-1: #a62b21; --lacre-2: #c6473a; --lacre-3: #711a12;
  --mana-1: #7fa0cc;  --mana-2: #9fbce4;  --mana-3: #4a6690;
  --bisel-luz: rgba(255, 233, 185, 0.16);
  --bisel-sombra: rgba(0, 0, 0, 0.45);
  --sombra-card: 0 2px 0 rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.35);
  --brilho-tocha: 0 0 18px rgba(242, 169, 59, 0.22);
  color: var(--tinta-1);
}

/* hero: botões alinhados numa linha só (o max-width do parágrafo não vale aqui) */
.w-hero .w-hero-acoes { max-width: none; align-items: center; }
.w-hero .w-hero-acoes .ns-btn { margin: 0; }

/* CTA primário continua brasa VIVA mesmo no tema claro (é a tocha da marca) */
.w-miolo .ns-btn--primario {
  color: #241503;
  background: linear-gradient(180deg, #ffd489, #f2a93b 45%, #b87818);
  border-color: #b87818;
}

/* títulos sobre papel: tinta forte, sem text-shadow de noite */
.w-miolo .ns-titulo { color: #3a2b10; text-shadow: none; }
.w-miolo .ns-subtitulo, .w-miolo .w-prosa h2 { color: #8a5c10; }
.w-miolo .w-prosa h3 { color: #6b4c10; }
.w-compat h1, .w-compat h2 { text-shadow: none; }

/* selo do spoiler mantém a cera vermelha de verdade */
.w-spoiler > summary::before {
  background: radial-gradient(circle at 35% 30%, #c6473a, #a62b21 55%, #711a12);
  color: #ebdcb4;
}

/* raridade de loot legível sobre papel */
.w-raro-comum { color: #4a3b20; }
.w-raro-incomum { color: #47701c; }
.w-raro-semirraro { color: #38609c; }
.w-raro-raro { color: #9a5f0e; }
.w-raro-muitorraro { color: #8a3fa0; }

/* zebra e faixas sobre papel */
.ns-tabela tbody tr:nth-child(even) { background: rgba(107, 84, 45, 0.035); }
.w-numeros { background: linear-gradient(180deg, rgba(107, 84, 45, 0.03), transparent); }
.w-numeros b { text-shadow: none; }

/* tags "vermelhas" tinham cor fixa de tema escuro */
.w-miolo .ns-tag--lacre, .w-compat .tag.zero, .w-compat .tag.red { color: #a33528; }
.w-compat .no { color: #a33528; }
.w-compat .yes { color: #47701c; }

/* infobox: papel branco com moldura fina */
.w-infobox { background: var(--pedra-2); }
.w-infobox caption { text-shadow: none; color: #fff8e8; }
.w-infobox .w-retrato {
  background:
    radial-gradient(circle at 50% 42%, rgba(184, 118, 26, 0.10), transparent 65%),
    #f4edda;
}

/* cabeçalho de página (breadcrumb) e legendas */
.w-trilha { color: var(--tinta-3); }

/* rodapé continua noite (moldura da marca), com o miolo claro entre eles */