/* WoWF — tema escuro estilo sites de guia (Wowhead / Icy Veins) */
:root {
  --fundo: #0b0d12;
  --fundo-2: #11141b;
  --painel: #161a23;
  --painel-2: #1c212c;
  --borda: #2a3140;
  --texto: #d9dde6;
  --texto-fraco: #9aa3b5;
  --ouro: #f4c24d;
  --ouro-escuro: #b8871f;
  --paladino: #f58cba;
  --horda: #c8322a;
  --verde: #1eff00;      /* qualidade "incomum" */
  --azul: #0070dd;       /* qualidade "rara" */
  --roxo: #a335ee;       /* qualidade "épica" */
  --ok: #3ecf8e;
  --aviso: #f0a73a;
  --erro: #ef5b5b;
  --info: #5aa9f0;
  --raio: 10px;
  --largura: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--fundo);
  background-image:
    radial-gradient(1200px 500px at 85% -120px, rgba(200, 50, 42, .16), transparent 70%),
    radial-gradient(900px 400px at 0% -100px, rgba(244, 194, 77, .08), transparent 70%);
  background-repeat: no-repeat;
  color: var(--texto);
  font: 16px/1.65 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--ouro); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 13, 18, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borda);
}
.topo-in {
  max-width: var(--largura); margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 18px;
}
.marca { display: flex; align-items: center; gap: 10px; color: var(--texto); }
.marca:hover { text-decoration: none; }
.marca b { font-family: Cinzel, serif; font-size: 22px; color: var(--ouro); letter-spacing: .06em; display: block; line-height: 1; }
.marca small { color: var(--paladino); font-size: 12px; font-weight: 600; letter-spacing: .03em; }
.menu { display: flex; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.menu a {
  color: var(--texto-fraco); padding: 8px 12px; border-radius: 8px;
  font-weight: 600; font-size: 14px;
}
.menu a:hover { color: var(--texto); background: var(--painel); text-decoration: none; }
.menu a.ativo { color: var(--fundo); background: var(--ouro); }
.menu-btn {
  display: none; margin-left: auto; background: var(--painel); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 8px; font-size: 20px; padding: 4px 12px; cursor: pointer;
}

/* ---------- estrutura ---------- */
.pagina {
  max-width: var(--largura); margin: 0 auto; padding: 24px 16px 48px;
  display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 32px;
}
.lateral-in { position: sticky; top: 84px; }
.lateral-tit { text-transform: uppercase; font-size: 12px; letter-spacing: .1em; color: var(--texto-fraco); margin: 0 0 8px; }
#toc { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--borda); }
#toc a { display: block; padding: 5px 12px; color: var(--texto-fraco); font-size: 14px; margin-left: -2px; border-left: 2px solid transparent; }
#toc a:hover { color: var(--texto); text-decoration: none; }
#toc a.ativo { color: var(--ouro); border-left-color: var(--ouro); }
.selo-versao { margin-top: 18px; font-size: 12px; color: var(--texto-fraco); background: var(--painel); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; }
.conteudo { min-width: 0; }

/* ---------- tipografia ---------- */
h1, h2, h3 { font-family: Cinzel, Georgia, serif; color: #fff; line-height: 1.25; }
h1 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 8px; }
h2 {
  font-size: 24px; margin: 44px 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--borda); color: var(--ouro);
}
h3 { font-size: 18px; margin: 26px 0 10px; }
.sub { color: var(--texto-fraco); font-size: 17px; margin: 0 0 18px; max-width: 70ch; }
p, li { max-width: 78ch; }
strong { color: #fff; }
.paladino { color: var(--paladino); font-weight: 600; }
.horda { color: #ff6b61; font-weight: 600; }
.q-incomum { color: var(--verde); }
.q-rara { color: #3d9bff; }
.q-epica { color: #c47aff; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  border: 1px solid var(--borda); border-radius: 14px;
  background:
    linear-gradient(115deg, rgba(11,13,18,.95) 35%, rgba(11,13,18,.55)),
    url("img/hero.svg") right center / cover no-repeat, var(--painel);
  padding: 34px 30px; margin-bottom: 26px;
}
.hero .kicker { color: var(--paladino); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; }
.hero p { color: var(--texto); max-width: 60ch; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.06); border: 1px solid var(--borda);
  border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600;
}
.pill .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.pill.aviso .ponto { background: var(--aviso); }

/* ---------- cartões ---------- */
.grade { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grade-2 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cartao {
  background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 16px 18px;
}
.cartao h3 { margin-top: 0; }
.cartao p:last-child, .cartao ul:last-child { margin-bottom: 0; }
a.cartao { display: block; color: var(--texto); transition: border-color .15s, transform .15s; }
a.cartao:hover { border-color: var(--ouro-escuro); transform: translateY(-2px); text-decoration: none; }
a.cartao .ir { color: var(--ouro); font-weight: 600; font-size: 14px; }
.cartao-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.cartao-topo h3 { margin: 0; }

/* ícones de habilidade/item (CDN da Wowhead) */
.ico {
  width: 40px; height: 40px; border-radius: 6px; flex: none;
  border: 1px solid #000; box-shadow: 0 0 0 1px #4a4f5c;
  background: #222 center / cover;
}
.ico.p { width: 28px; height: 28px; border-radius: 5px; vertical-align: middle; margin-right: 6px; }

/* ---------- avisos ---------- */
.nota {
  border: 1px solid var(--borda); border-left: 4px solid var(--info);
  background: rgba(90,169,240,.07); border-radius: 8px; padding: 12px 16px; margin: 16px 0;
}
.nota.aviso { border-left-color: var(--aviso); background: rgba(240,167,58,.08); }
.nota.ok { border-left-color: var(--ok); background: rgba(62,207,142,.07); }
.nota.erro { border-left-color: var(--erro); background: rgba(239,91,91,.08); }
.nota > :first-child { margin-top: 0; }
.nota > :last-child { margin-bottom: 0; }
.nota b.tit { display: block; color: #fff; margin-bottom: 2px; }

/* selos de confiança */
.selo {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 5px; vertical-align: middle;
  border: 1px solid currentColor; white-space: nowrap;
}
.selo.conf { color: var(--ok); }
.selo.guia { color: var(--info); }
.selo.conf-nao { color: var(--aviso); }
.selo.classico { color: var(--texto-fraco); }
.legenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--texto-fraco); margin: 8px 0 18px; }

/* ---------- tabelas ---------- */
.tabela-wrap { overflow-x: auto; margin: 14px 0; border: 1px solid var(--borda); border-radius: var(--raio); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { background: var(--painel-2); color: var(--ouro); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) td { background: rgba(255,255,255,.015); }
tbody tr:hover td { background: rgba(244,194,77,.05); }
td.nivel { white-space: nowrap; font-weight: 700; color: #fff; }
tr.novo td:first-child { box-shadow: inset 3px 0 0 var(--paladino); }

/* ---------- linha do tempo (rota) ---------- */
.rota { list-style: none; padding: 0; margin: 18px 0; position: relative; }
.rota::before { content: ""; position: absolute; left: 44px; top: 6px; bottom: 6px; width: 2px; background: var(--borda); }
.rota > li { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 16px; margin-bottom: 16px; max-width: none; }
.rota .lv {
  position: relative; z-index: 1; align-self: start;
  background: var(--painel-2); border: 1px solid var(--ouro-escuro); color: var(--ouro);
  border-radius: 8px; text-align: center; font-weight: 700; font-size: 14px; padding: 6px 4px;
}
.rota .etapa { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 16px; }
.rota .etapa h3 { margin: 0 0 4px; font-size: 17px; }
.rota .etapa p, .rota .etapa ul { margin: 6px 0; }
.rota .etapa.destaque { border-color: var(--paladino); box-shadow: 0 0 0 1px rgba(245,140,186,.25); }

/* ---------- talentos ---------- */
.abas { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; }
.aba {
  background: var(--painel); color: var(--texto-fraco); border: 1px solid var(--borda);
  border-bottom: 0; border-radius: 8px 8px 0 0; padding: 9px 16px; font: 600 14px Inter, sans-serif; cursor: pointer;
}
.aba[aria-selected="true"] { color: var(--fundo); background: var(--ouro); border-color: var(--ouro); }
.painel-aba { border: 1px solid var(--borda); border-radius: 0 var(--raio) var(--raio) var(--raio); padding: 18px; background: var(--painel); }
.painel-aba[hidden] { display: none; }
.pontos { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
.pontos span { background: var(--painel-2); border: 1px solid var(--borda); border-radius: 8px; padding: 6px 12px; font-weight: 700; }
.pontos .h { color: #ffd76b; }
.pontos .p { color: #7fb6ff; }
.pontos .r { color: #ff8a80; }
.ordem { counter-reset: n; list-style: none; padding: 0; margin: 0; }
.ordem li { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--borda); max-width: none; }
.ordem li:last-child { border-bottom: 0; }
.ordem .lvl { color: var(--ouro); font-weight: 700; white-space: nowrap; }

/* ---------- changelog ---------- */
.log { list-style: none; padding: 0; margin: 0; }
.log li { border-left: 3px solid var(--ouro-escuro); padding: 4px 0 10px 14px; margin-bottom: 8px; max-width: none; }
.log time { color: var(--ouro); font-weight: 700; font-size: 14px; }

/* ---------- checklist ---------- */
.check { list-style: none; padding: 0; }
.check li { padding-left: 28px; position: relative; margin: 8px 0; }
.check li::before { content: "✓"; position: absolute; left: 4px; color: var(--ok); font-weight: 700; }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--borda); color: var(--texto-fraco); font-size: 13px; text-align: center; padding: 22px 16px 34px; }
.rodape p { margin: 4px auto; max-width: none; }
.rodape .mini { font-size: 12px; opacity: .75; }

/* ---------- responsivo ---------- */
@media (max-width: 980px) {
  .pagina { grid-template-columns: minmax(0, 1fr); }
  .lateral { display: none; }
}
@media (max-width: 860px) {
  .menu-btn { display: block; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; background: var(--fundo-2); border-bottom: 1px solid var(--borda); padding: 8px 16px 14px;
  }
  .menu.aberto { display: flex; }
  .menu a { padding: 10px 12px; }
}
@media (max-width: 560px) {
  body { font-size: 15px; }
  .hero { padding: 24px 18px; }
  .rota::before { left: 30px; }
  .rota > li { grid-template-columns: 62px minmax(0,1fr); gap: 10px; }
  .rota .lv { font-size: 12px; }
  .ordem li { grid-template-columns: 58px minmax(0,1fr); }
  th, td { padding: 8px 9px; }
}

/* filtro de tabela */
.filtro {
  width: 100%; max-width: 420px; background: var(--painel); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; font: 15px Inter, sans-serif;
}
.filtro:focus { outline: 2px solid var(--ouro-escuro); outline-offset: 1px; }