/* Five Blades Wiki — folha única.
   Paleta e componentes herdados do compêndio aprovado; chrome de wiki
   (header global, busca, drawer, infobox com o painel do jogo) é novo. */

:root{
  /* O DARK É O PADRÃO OFICIAL do site: mora no :root cru, então vale para
     todo mundo que chega, independente do tema do sistema operacional. O
     claro é uma escolha explícita — só entra quando o visitante aperta o
     botão e o data-theme="light" é gravado. */
  --bg:#15100B; --surface:#201913; --raised:#2A211A; --sunk:#100C08;
  --line:#362B20; --line-2:#4C3E2E;
  --ink:#EFE8DA; --ink-2:#B1A28A; --ink-3:#82735C;
  --accent:#FF7E24; --accent-soft:#2E1D0E; --on-accent:#1A130C;
  --r-Common:#A99C86; --r-Uncommon:#F2EDE1; --r-Rare:#3F8CF0;
  --r-Epic:#C33FCE; --r-Legendary:#FF6E1C;
  --glow:.34;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.28);
  --veil-a:55%; --veil-b:80%;
  --k0:#29FCFF;--k1:#29FF29;--k2:#29FF29;--k3:#29FFFF;--k4:#29C9FF;--k5:#53D553;--k6:#3CFF3C;--k7:#4CA2E8;--k8:#68CA5E;--k9:#76D7C4;--k10:#7CE577;--k11:#FF29FF;--k12:var(--ink-2);--k13:#85A1FF;--k14:#FF299D;--k15:#FF6329;--k16:#FF4C4C;--k17:#FF9E29;--k18:#FFB329;--k19:#FFDD29;--k20:#29FF29;--k21:#FF2929;--k22:#FFFF29;--k23:#B48CE8;
  --head-h:52px;
  /* barra de rolagem, <select> e afins nativos seguem o tema */
  color-scheme:dark;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#EBE1C9; --surface:#FAF4E4; --raised:#F2EAD4; --sunk:#DFD0AC;
  --line:#D6C7A3; --line-2:#BFAC80;
  --ink:#2A2118; --ink-2:#6B5C46; --ink-3:#93836A;
  --accent:#B8420A; --accent-soft:#F3DFC2; --on-accent:#FFFDF7;
  --r-Common:#7A6E5C; --r-Uncommon:#4A4234; --r-Rare:#1F5FBF;
  --r-Epic:#8E17A0; --r-Legendary:#B8420A;
  --glow:.22;
  --shadow:0 1px 2px rgba(58,44,26,.08), 0 4px 14px rgba(58,44,26,.07);
  --veil-a:12%; --veil-b:42%;
  --k0:#00C9CC;--k1:#00CC00;--k2:#00CC00;--k3:#00CCCC;--k4:#0099CC;--k5:#28A428;--k6:#00CC00;--k7:#176EB5;--k8:#3C9933;--k9:#2E9E88;--k10:#27AB21;--k11:#850085;--k12:var(--ink-2);--k13:#0030CC;--k14:#CC006E;--k15:#CC3700;--k16:#CC0000;--k17:#CC7000;--k18:#CC8400;--k19:#CCAC00;--k20:#00A000;--k21:#CC0000;--k22:#CCCC00;--k23:#7A4FC0;
}

*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--head-h) + 14px)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
/* Ambientação: a mata do Sacred Battlegrounds (o bioma onde toda run começa)
   atrás da coluna de conteúdo. É só o terço de baixo da arte de cenário — o
   quadro cheio empilha céu, arena e mata com emendas duras entre eles, que
   como fundo de site liam como faixas; a mata sozinha não tem emenda interna.
   A fonte inteira está em art/bg_sacred_full.webp para recortes futuros.
   A camada é ABSOLUTA (rola com o documento) e ESTICA para cobrir a página
   inteira — mas com teto. A arte tem 565px de altura e `100% 100%` estica ela
   até a altura do documento: numa página curta isso é um alongamento suave que
   só deixa os troncos mais altos, mas a lista de heróis passa de 15.000px e lá
   o mesmo cálculo vira listra vertical. O teto de 3× a altura natural (52vw é
   1×) corta antes disso; passou do teto, o véu já fechou em --bg e o resto da
   página segue na cor lisa, sem emenda.
   Sem `pixelated`: a fonte tem 1086px e é ampliada por um fator quebrado, onde
   o vizinho-mais-próximo daria pixels de tamanhos diferentes. Os sprites
   seguem pixelados por `img.px`. */
body{position:relative}
body::before{
  content:""; position:absolute; top:0; left:0; right:0; z-index:-1;
  height:min(100%, 156vw, 3000px);
  background:
    linear-gradient(180deg,
      var(--bg) 0,
      color-mix(in srgb, var(--bg) var(--veil-a), transparent) 12%,
      color-mix(in srgb, var(--bg) var(--veil-b), transparent) 70%,
      var(--bg) 100%),
    url("/img/ui/bg_forest.webp") center / 100% 100% no-repeat
    var(--bg);
}
a{color:var(--accent)}
:where(button,input,select,a):focus-visible{outline:2px solid var(--accent); outline-offset:2px}
img.px{image-rendering:pixelated}

/* ============================================================ header global */
.site-head{
  position:sticky; top:0; z-index:60; height:var(--head-h);
  display:flex; align-items:center; gap:14px; padding:0 18px;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.site-head .brand{
  display:flex; align-items:baseline; gap:7px; text-decoration:none; color:var(--ink);
  font-family:"Passion One",sans-serif; text-transform:uppercase; white-space:nowrap;
}
.site-head .brand .b1{font-weight:900; font-size:23px; letter-spacing:.01em}
.site-head .brand .b2{font-weight:400; font-size:15px; letter-spacing:.12em; color:var(--accent)}
.burger{
  display:none; appearance:none; background:none; border:1px solid var(--line); border-radius:2px;
  color:var(--ink-2); padding:6px 8px; cursor:pointer;
}
.theme{
  appearance:none; background:none; border:1px solid var(--line); border-radius:2px;
  color:var(--ink-2); padding:7px 9px; cursor:pointer; line-height:0; flex:none;
}
.theme:hover{color:var(--ink); border-color:var(--line-2)}
/* O ícone mostra o tema VIGENTE, e o padrão é escuro: a lua fica visível
   por default e só o data-theme="light" explícito troca para o sol. */
.theme .sun{display:none}
[data-theme="light"] .theme .moon{display:none}
[data-theme="light"] .theme .sun{display:inline}

/* troca de língua: as duas bandeiras sempre à vista, a da página vigente acesa */
.langs{display:flex; gap:4px; flex:none}
.langs a{
  display:block; line-height:0; padding:5px; border:1px solid var(--line); border-radius:2px;
  opacity:.45; filter:saturate(.5); transition:opacity .15s, filter .15s, border-color .15s;
}
.langs a svg{display:block; border-radius:1px}
.langs a:hover{opacity:.9; filter:none; border-color:var(--line-2)}
.langs a[aria-current]{opacity:1; filter:none; border-color:var(--accent)}

/* busca global */
.gsearch{
  position:relative; flex:1 1 auto; min-width:0; max-width:520px; margin-left:auto;
  display:flex; align-items:center; gap:8px;
  background:var(--bg); border:1px solid var(--line); border-radius:2px; padding:0 10px;
}
.gsearch svg{flex:none; color:var(--ink-3)}
.gsearch input{flex:1; min-width:0; width:100%; border:0; outline:0; background:none; color:var(--ink); padding:8px 0; font:inherit}
.gresults{
  position:absolute; top:calc(100% + 6px); left:-1px; right:-1px; z-index:70;
  background:var(--surface); border:1px solid var(--line-2); border-radius:2px;
  box-shadow:var(--shadow); max-height:min(60vh,440px); overflow-y:auto;
}
.gresults a{
  display:flex; align-items:center; gap:10px; padding:7px 11px; text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--line); font-size:13px;
}
.gresults a:last-child{border-bottom:0}
.gresults a.sel, .gresults a:hover{background:var(--raised)}
.gresults .thumb{
  flex:none; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:var(--sunk); border:1px solid var(--line); border-radius:2px;
}
.gresults .thumb img{max-width:26px; max-height:26px; image-rendering:pixelated}
.gresults .sub{margin-left:auto; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); white-space:nowrap}
.gresults .none{padding:10px 12px; font-size:12.5px; color:var(--ink-3); font-style:italic}

/* ============================================================ shell */
.shell{
  display:grid; grid-template-columns:228px minmax(0,1fr); align-items:start;
  max-width:1360px; margin:0 auto; background:var(--bg);
  border-inline:1px solid var(--line); min-height:calc(100vh - var(--head-h));
  box-shadow:0 0 40px rgba(0,0,0,.18);
}
.side{
  position:sticky; top:var(--head-h); height:calc(100vh - var(--head-h)); overflow-y:auto;
  border-right:1px solid var(--line); background:var(--surface);
  padding:16px 0 26px; display:flex; flex-direction:column; gap:16px;
}
.nav{display:flex; flex-direction:column; gap:1px; padding:0 10px}
.nav .lbl{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.13em; color:var(--ink-3);
  padding:12px 8px 5px;
}
.nav a{
  display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink-2);
  font-family:"Passion One",sans-serif; font-size:19px; letter-spacing:.02em;
  text-transform:uppercase; padding:7px 8px 5px; border-left:2px solid transparent; border-radius:2px;
}
.nav a:hover{color:var(--ink); background:var(--raised)}
.nav a[aria-current="page"]{color:var(--ink); border-left-color:var(--accent); background:var(--raised)}
.nav a .n{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-3)}
.side footer{
  margin-top:auto; padding:14px 18px 0; border-top:1px solid var(--line);
  color:var(--ink-3); font-size:11px; line-height:1.5;
}
.main{min-width:0; padding:0 28px 90px}
.scrim{position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.45)}

/* ============================================================ mobília de página */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:16px 0 0;
  font-size:11.5px; color:var(--ink-3);
}
.crumbs a{color:var(--ink-3); text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{opacity:.6}
.crumbs span{color:var(--ink-2)}

.ph{padding:26px 0 6px; border-bottom:1px solid var(--line); margin-bottom:26px}
.ph .eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 6px;
}
.ph h1{
  font-family:"Passion One",sans-serif; font-weight:700; font-size:46px; line-height:.94;
  margin:0 0 10px; text-transform:uppercase; letter-spacing:.01em;
}
.ph p{margin:0 0 20px; max-width:76ch; color:var(--ink-2); font-size:15px}

section.blk{margin:0 0 40px}
h2.sh, h3.sh{
  font-family:"Passion One",sans-serif; font-weight:700; font-size:25px; text-transform:uppercase;
  letter-spacing:.02em; margin:0 0 4px; padding-bottom:7px; border-bottom:2px solid var(--ink);
}
h4.sh4{
  font-family:"Passion One",sans-serif; font-weight:400; font-size:20px; text-transform:uppercase;
  letter-spacing:.03em; margin:24px 0 8px; color:var(--ink);
}
p.hint{margin:10px 0 16px; color:var(--ink-2); max-width:82ch}
p.hint:last-child{margin-bottom:0}
.lead{font-size:15px}
ul.bul{margin:10px 0 16px; padding-left:18px; color:var(--ink-2); max-width:82ch}
ul.bul li{margin-bottom:5px}
b.on{color:var(--ink)}

.note{
  background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-left-width:3px; border-radius:2px; padding:11px 14px; margin:16px 0; max-width:86ch;
}
.note .t{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.13em; color:var(--accent);
  font-weight:600; display:block; margin-bottom:4px;
}
.note p{margin:0; color:var(--ink-2); font-size:13px}
.note p + p{margin-top:7px}
.pending{
  background:var(--raised); border:1px dashed var(--line-2); border-left:3px solid var(--ink-3);
  border-radius:2px; padding:11px 14px; margin:16px 0; max-width:86ch;
}
.pending .t{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.13em; color:var(--ink-3);
  font-weight:600; display:block; margin-bottom:4px;
}
.pending p, .pending li{margin:0; color:var(--ink-2); font-size:13px}
.pending ul{margin:0; padding-left:17px}

/* ============================================================ tabelas */
.scroll{overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:2px; margin:14px 0}
table.t{width:100%; border-collapse:collapse; font-size:13px}
table.t th{
  text-align:left; font-size:9.5px; text-transform:uppercase; letter-spacing:.11em;
  color:var(--ink-3); font-weight:600; padding:8px 12px; border-bottom:1px solid var(--line-2);
  white-space:nowrap;
}
table.t td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top}
table.t tr:last-child td{border-bottom:0}
table.t td.k{font-weight:600; white-space:nowrap; color:var(--ink)}
table.t td.mono, table.t td.num{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; white-space:nowrap}
table.t td.num, table.t th.num{text-align:right}
table.t td.icell{width:44px; padding:5px 6px 5px 12px}
.iconbox{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:var(--sunk); border:1px solid var(--line); border-radius:2px;
}
.iconbox img{max-width:30px; max-height:30px; image-rendering:pixelated}
.rtag{font-weight:600; text-transform:uppercase; letter-spacing:.07em; font-size:10px; color:var(--rar)}

/* ============================================================ tiles / stripe / rhythm */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin:14px 0}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:13px 15px; box-shadow:var(--shadow)}
.tile h5{font-family:"Passion One",sans-serif; font-weight:400; font-size:19px; text-transform:uppercase; letter-spacing:.02em; margin:0 0 5px}
.tile p{margin:0; font-size:12.5px; color:var(--ink-2)}
.tile p + p{margin-top:6px}
.tile .pill{
  display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); border:1px solid var(--line); border-radius:2px;
  padding:1px 5px; margin-bottom:7px;
}
.stripe{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:2px; margin:16px 0}
.stripe div{background:var(--surface); padding:12px 14px}
.stripe b{display:block; font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:23px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stripe span{font-size:9.5px; text-transform:uppercase; letter-spacing:.11em; color:var(--ink-3)}
.rhythm{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:2px; margin:16px 0; overflow:hidden}
.rhythm div{background:var(--surface); padding:11px 12px 13px}
.rhythm .s{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.12em; color:var(--ink-3); text-transform:uppercase}
.rhythm b{display:block; font-family:"Passion One",sans-serif; font-weight:400; font-size:18px; text-transform:uppercase; margin:4px 0 2px}
.rhythm p{margin:0; font-size:11.5px; color:var(--ink-2)}
.rhythm div.hot{background:var(--accent-soft)}
.rhythm div.hot b{color:var(--accent)}

/* ============================================================ browse (lista com filtros) */
.bar{
  position:sticky; top:var(--head-h); z-index:20; background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line); margin:0 -28px 0; padding:0 28px;
}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:12px 0}
.search{
  flex:1 1 260px; min-width:200px; display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:0 10px;
}
.search input{flex:1; border:0; outline:0; background:none; color:var(--ink); padding:9px 0; font:inherit}
.search svg{flex:none; color:var(--ink-3)}
select{font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:9px 8px}
.ghost{font:inherit; cursor:pointer; color:var(--ink-2); background:none; border:1px solid var(--line); border-radius:2px; padding:9px 12px}
.ghost:hover{color:var(--ink); border-color:var(--line-2)}
.ftoggle{display:none; align-items:center; gap:7px}
.ftoggle .caret{flex:none; transition:transform .15s ease}
.ftoggle[aria-expanded="false"] .caret{transform:rotate(-90deg)}
.ftoggle .c{
  font-family:"IBM Plex Mono",monospace; font-size:10px; line-height:1;
  background:var(--accent); color:var(--on-accent); border-radius:2px; padding:2px 4px;
}
.facets{display:flex; flex-direction:column; gap:8px; padding:12px 0 4px}
.facets[hidden]{display:none}
.facet{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.facet > .lbl{font-size:9.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); width:78px; flex:none}
.chip{
  appearance:none; cursor:pointer; font:inherit; font-size:12.5px;
  background:var(--surface); color:var(--ink-2); border:1px solid var(--line);
  border-radius:2px; padding:4px 9px;
}
.chip:hover{border-color:var(--line-2); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.chip .c{font-family:"IBM Plex Mono",monospace; font-size:10px; opacity:.65; margin-left:5px}
.status{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.04em;
  color:var(--ink-3); text-transform:uppercase; padding:4px 0 14px;
}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px; align-items:start}
.card{background:var(--surface); border:1px solid var(--line); border-radius:2px; box-shadow:var(--shadow); overflow:hidden}
.card:hover{border-color:var(--rar)}
.head{display:flex; gap:12px; padding:12px 13px 10px; align-items:flex-start}
.plaque{
  flex:none; width:76px; height:76px; border:1px solid var(--line); background:var(--sunk);
  display:flex; align-items:center; justify-content:center; position:relative; border-radius:2px;
}
.plaque::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--rar) calc(var(--glow)*100%), transparent), transparent 72%);
}
.plaque img{position:relative; image-rendering:pixelated; filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
.title{min-width:0; flex:1}
.title h3{font-family:"Passion One",sans-serif; font-weight:400; font-size:21px; line-height:1.06; margin:2px 0 5px; text-wrap:balance}
.title h3 a{color:inherit; text-decoration:none}
.title h3 a:hover{color:var(--accent)}
.tags{display:flex; flex-wrap:wrap; gap:5px; align-items:center; font-size:11px}
.rar{font-weight:600; text-transform:uppercase; letter-spacing:.07em; font-size:10px; color:var(--rar)}
.tag{font-size:10.5px; letter-spacing:.04em; color:var(--ink-2); background:var(--raised); border:1px solid var(--line); border-radius:2px; padding:1px 6px}
.tag.role{border-color:var(--rar); color:var(--rar)}
.stats{display:flex; margin:0; padding:0; list-style:none; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--raised)}
.stats li{flex:1; padding:7px 4px; text-align:center; border-left:1px solid var(--line)}
.stats li:first-child{border-left:0}
.stats b{display:block; font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:15px; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.stats span{font-size:9px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3)}
/* DPS aproximado: terceira linha na célula do DPS sem crescer o card — as
   células com três linhas espremem a entrelinha em vez de somar altura */
.stats li:has(.aprox) b{line-height:1.05}
.stats .aprox{display:block; font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:10px; line-height:1.1; color:var(--ink-2)}
.stats li:has(.aprox) span{display:block; line-height:1.1}
.infobox .dps-aprox{display:block; font-size:.85em; color:var(--ink-2)}
.pack{padding:10px 13px 12px; display:flex; flex-direction:column; gap:8px}
.passives{display:flex; flex-wrap:wrap; gap:5px}
.pchip{
  font-size:11px; font-weight:500; color:var(--ink); background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius:2px; padding:1px 7px;
  text-decoration:none;
}
a.pchip:hover{border-color:var(--accent)}
.ability{margin:0; padding:7px 9px; background:var(--raised); border:1px solid var(--line); border-radius:2px; font-size:12.5px; line-height:1.42}
.atkline{font-size:12px; color:var(--ink-2); display:flex; gap:6px; align-items:baseline}
.atkline .lbl{font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); flex:none}
.empty{font-size:12px; color:var(--ink-3); font-style:italic}

.defs{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px; margin:12px 0}
.def{background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:9px 11px; font-size:12.5px; line-height:1.45}
.def b{display:block; font-size:13px; margin-bottom:2px}

/* ============================================================ home */
.cover{padding:46px 0 10px}
.cover .kicker{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px;
}
.cover h1{
  font-family:"Passion One",sans-serif; font-weight:900; font-size:min(9vw,86px); line-height:.86;
  margin:0 0 18px; text-transform:uppercase; letter-spacing:.005em; text-wrap:balance;
}
.cover .dek{font-size:17px; color:var(--ink-2); max-width:66ch; margin:0 0 8px}
.hr{height:3px; background:var(--ink); margin:26px 0 0; max-width:180px}
.navcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin:18px 0}
.navcard{
  display:block; text-decoration:none; color:inherit; background:var(--surface);
  border:1px solid var(--line); border-radius:2px; padding:15px 16px 16px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.navcard:hover{border-color:var(--accent)}
.navcard .n{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em; color:var(--ink-3); text-transform:uppercase}
.navcard h5{font-family:"Passion One",sans-serif; font-weight:400; font-size:24px; text-transform:uppercase; letter-spacing:.02em; margin:5px 0 6px}
.navcard p{margin:0; font-size:12.5px; color:var(--ink-2); max-width:calc(100% - 62px)}
.navcard .art{
  position:absolute; right:10px; bottom:8px; width:58px; height:58px;
  display:flex; align-items:end; justify-content:center; pointer-events:none; opacity:.92;
}
.navcard .art img{max-width:100%; max-height:100%; image-rendering:pixelated}

.ringwrap{background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:12px; margin:16px 0; overflow-x:auto}
.ringwrap svg{display:block; margin:0 auto; max-width:100%; height:auto}

/* ============================================================ página de entidade */
.entity{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start; margin-top:10px}
.entity-main{min-width:0}
.entity-main .ph{padding-top:8px}
.infobox{
  position:sticky; top:calc(var(--head-h) + 14px);
  border:14px solid transparent;
  border-image:url("/img/ui/panel.png") 24 / 14px stretch;
  image-rendering:pixelated;
  background:#3A3A3C; color:#E9EAEE;
  border-radius:2px;
}
.infobox, .infobox *{image-rendering:auto}
.infobox .inner{padding:2px 4px 6px}
.infobox h2{
  font-family:"Passion One",sans-serif; font-weight:700; font-size:23px; line-height:1;
  margin:2px 0 8px; text-transform:uppercase; letter-spacing:.02em; text-align:center; color:#F4F5F8;
}
.sprite-stage{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:150px; margin:0 0 10px; border-radius:2px;
  background:
    radial-gradient(circle at 50% 68%, color-mix(in srgb, var(--rar,#888) 38%, transparent), transparent 74%),
    linear-gradient(#232326, #1B1B1E);
  border:1px solid #4A4A4E; box-shadow:inset 0 2px 8px rgba(0,0,0,.55);
}
.sprite-stage img{image-rendering:pixelated; filter:drop-shadow(0 2px 0 rgba(0,0,0,.4))}
.infobox table{width:100%; border-collapse:collapse; font-size:12.5px}
.infobox th{
  text-align:left; font-weight:600; font-size:9.5px; text-transform:uppercase; letter-spacing:.1em;
  color:#9FA3AE; padding:5px 8px 5px 2px; white-space:nowrap; vertical-align:middle; width:44%;
}
.infobox td{padding:5px 2px; color:#E9EAEE; border-bottom:1px solid #47474B; vertical-align:middle}
.infobox tr:last-child td{border-bottom:0}
.infobox tr th{border-bottom:1px solid #47474B}
.infobox tr:last-child th{border-bottom:0}
.infobox td a{color:#FFB27A; text-decoration:none}
.infobox td a:hover{text-decoration:underline}
.infobox .icon-sm{width:16px; height:16px; vertical-align:-3px; margin-right:5px; image-rendering:pixelated}
.infobox .rr{font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:11px}
.infobox td.mono{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}

.abil{
  display:flex; flex-direction:column; gap:4px; background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:2px;
  padding:10px 13px; margin:10px 0; max-width:86ch;
}
.abil .trig{
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3);
}
.abil .txt{font-size:13.5px; line-height:1.5}

.pass-list{display:flex; flex-direction:column; gap:8px; margin:12px 0; max-width:86ch}
.pass-item{
  display:flex; gap:10px; align-items:baseline; background:var(--surface);
  border:1px solid var(--line); border-radius:2px; padding:9px 12px; font-size:13px;
}
.pass-item b{flex:none}
.pass-item b a{color:var(--ink); text-decoration:none; border-bottom:1px dotted var(--ink-3)}
.pass-item b a:hover{color:var(--accent); border-color:var(--accent)}
.pass-item span{color:var(--ink-2)}

.strip{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0}
.strip a{
  display:flex; flex-direction:column; align-items:center; gap:5px; width:86px;
  text-decoration:none; color:var(--ink-2); font-size:10.5px; text-align:center; line-height:1.25;
}
.strip a:hover{color:var(--accent)}
.strip .thumb{
  width:64px; height:64px; display:flex; align-items:center; justify-content:center;
  background:var(--sunk); border:1px solid var(--line); border-radius:2px; position:relative;
}
.strip .thumb::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--rar,transparent) calc(var(--glow)*100%), transparent), transparent 72%);
}
.strip .thumb img{position:relative; image-rendering:pixelated}
.strip a:hover .thumb{border-color:var(--accent)}

.pn-nav{
  display:flex; justify-content:space-between; gap:12px; margin:34px 0 0;
  border-top:1px solid var(--line); padding-top:14px; font-size:13px;
}
.pn-nav a{text-decoration:none; color:var(--ink-2); max-width:46%}
.pn-nav a:hover{color:var(--accent)}
.pn-nav .dir{display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3)}

.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin:14px 0}
.gallery a{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 10px 12px;
  text-decoration:none; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:2px; text-align:center; box-shadow:var(--shadow);
}
.gallery a:hover{border-color:var(--rar,var(--accent))}
.gallery .thumb{
  width:96px; height:96px; display:flex; align-items:center; justify-content:center; position:relative;
}
.gallery .thumb::before{
  content:""; position:absolute; inset:-6px;
  background:radial-gradient(circle at 50% 66%, color-mix(in srgb, var(--rar,transparent) calc(var(--glow)*120%), transparent), transparent 74%);
}
.gallery .thumb img{position:relative; image-rendering:pixelated}
.gallery .nm{font-family:"Passion One",sans-serif; font-size:17px; line-height:1.05; text-transform:uppercase; letter-spacing:.02em}
.gallery .sub{font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--rar,var(--ink-3))}

.k0{color:var(--k0)}.k1{color:var(--k1)}.k2{color:var(--k2)}.k3{color:var(--k3)}.k4{color:var(--k4)}
.k5{color:var(--k5)}.k6{color:var(--k6)}.k7{color:var(--k7)}.k8{color:var(--k8)}.k9{color:var(--k9)}
.k10{color:var(--k10)}.k11{color:var(--k11)}.k12{color:var(--k12)}.k13{color:var(--k13)}.k14{color:var(--k14)}
.k15{color:var(--k15)}.k16{color:var(--k16)}.k17{color:var(--k17)}.k18{color:var(--k18)}.k19{color:var(--k19)}
.k20{color:var(--k20)}.k21{color:var(--k21)}.k22{color:var(--k22)}.k23{color:var(--k23)}

/* ============================================================ responsivo */
@media (max-width:1080px){
  .entity{grid-template-columns:1fr}
  .infobox{position:static; max-width:340px; margin:0 auto}
}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .burger{display:inline-flex}
  .side{
    position:fixed; left:0; top:var(--head-h); bottom:0; z-index:58; width:min(280px,82vw);
    height:auto; transform:translateX(-102%); transition:transform .18s ease;
    border-right:1px solid var(--line-2); box-shadow:var(--shadow);
  }
  .side.open{transform:none}
  .main{padding:0 16px 70px}
  .bar{margin:0 -16px; padding:0 16px}
  .grid{grid-template-columns:1fr}
  .rhythm{grid-template-columns:repeat(2,1fr)}
  .facet > .lbl{width:100%}
  .ftoggle{display:inline-flex}
  .facets{max-height:42vh; overflow-y:auto; overscroll-behavior:contain}
  .cover{padding:28px 0 4px}
  .site-head{gap:10px; padding:0 12px}
  .site-head .brand .b2{display:none}
  .langs{gap:2px}
  .langs a{padding:3px}
  .langs a svg{width:18px; height:13px}
}

/* ------------------------------------------------------------ patch notes */
.patch .pdate{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3); font-weight:400; margin-left:10px; letter-spacing:.04em}
.phl{border-left:3px solid var(--accent); background:var(--surface); border:1px solid var(--line); border-left-width:3px; border-left-color:var(--accent); border-radius:2px; padding:11px 14px; margin:10px 0; max-width:86ch}
.phl > b{display:block; font-size:14px; margin-bottom:3px}
.phl p{font-size:13.5px; line-height:1.55; color:var(--ink-2); margin:0}
.psub{font-family:"Passion One",sans-serif; font-size:21px; letter-spacing:.02em; margin:26px 0 6px; color:var(--ink)}
.pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:10px; align-items:start}
.pent{background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:10px 13px}
.pent h4{font-size:14px; margin:0 0 6px}
.pent h4 a{color:inherit}
.pnew{font-style:normal; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--k1); margin-left:6px}
.pchips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px}
.pchip{display:inline-flex; align-items:center; gap:5px; font-size:12px; border:1px solid var(--line); border-radius:2px; padding:2px 7px; background:var(--bg)}
.pchip b{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.pchip .arr{color:var(--ink-3)}
.pchip.pc-up{border-color:color-mix(in srgb, var(--k1) 45%, var(--line))}
.pchip.pc-down{border-color:color-mix(in srgb, var(--k21) 45%, var(--line))}
.pab{display:flex; flex-direction:column; gap:3px; border-top:1px dashed var(--line); padding:7px 0 2px; margin-top:7px}
.pab .trig{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.pab .txt{font-size:13px; line-height:1.5}
.pab .txt s{color:var(--ink-3); text-decoration-color:color-mix(in srgb, var(--k21) 55%, transparent)}
.pab .txt em{font-style:normal; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-left:5px}
.pab-rem .txt em{color:var(--k21)}
.pab-add .txt em{color:var(--k1)}
.prars{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:5px 14px; margin-top:8px}
.prar{display:flex; align-items:center; gap:7px; font-size:13px; padding:3px 0; border-bottom:1px dashed var(--line)}
.prar a{color:inherit}
.prar .rr{font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:10.5px}
.prar .rr:first-of-type{margin-left:auto}
.prar .arr{color:var(--ink-3); font-size:12px}

@media (max-width:560px){
  .site-head .brand .b1{font-size:19px}
  .gsearch input{font-size:13px}
  .ph h1{font-size:36px}
}

/* ------------------------------------------------------------ peso das habilidades */
/* Fórmula, balança e tabelas de peso. Prefixo `aw-` porque a página reaproveita
   `.scroll`/`table.t`/`.chip` do resto do site e só precisa do que é dela. */
.aw-eqbox{background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:16px 18px; margin:14px 0; box-shadow:var(--shadow)}
.aw-eq{font-family:"IBM Plex Mono",monospace; font-size:clamp(14px,2.4vw,20px); font-weight:600; margin:0; letter-spacing:-.01em; overflow-x:auto; white-space:nowrap}
.aw-eq2{font-family:"IBM Plex Mono",monospace; font-size:clamp(12px,1.8vw,15px); color:var(--ink-2); margin:8px 0 0; overflow-x:auto; white-space:nowrap}
.aw-eq .f, .aw-eq2 .f{color:var(--accent)}
.aw-legend{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:8px 24px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
.aw-legend div{display:flex; gap:9px; align-items:baseline; font-size:12.5px; color:var(--ink-2)}
.aw-legend b{font-family:"IBM Plex Mono",monospace; color:var(--accent); flex:none}

.aw-bench{
  display:grid; grid-template-columns:1fr auto 1fr; margin:14px 0;
  background:var(--surface); border:1px solid var(--line); border-radius:2px;
  box-shadow:var(--shadow); overflow:hidden;
}
.aw-pan{padding:14px 16px; display:flex; flex-direction:column; gap:12px; min-width:0}
.aw-pan h3{
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin:0;
}
.aw-scale{display:flex; align-items:center; justify-content:center; padding:0 6px; background:var(--raised); border-left:1px solid var(--line); border-right:1px solid var(--line)}
.aw-scale b{font-family:"IBM Plex Mono",monospace; font-size:20px; color:var(--ink-3)}
.aw-fields{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.aw-field{display:flex; flex-direction:column; gap:3px; min-width:0}
.aw-field label{font-family:"IBM Plex Mono",monospace; font-size:9px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
.aw-field select, .aw-field input{
  font-family:"IBM Plex Mono",monospace; font-size:12px; padding:6px 7px; width:100%; min-width:0;
  background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:2px;
}
.aw-readout{background:var(--raised); border:1px solid var(--line); border-radius:2px; padding:11px 13px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.aw-big{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:30px; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--accent)}
.aw-u{font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
.aw-break{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3); margin:0; overflow-x:auto; white-space:nowrap}
.aw-break b{color:var(--ink-2)}
.aw-pills{display:flex; flex-wrap:wrap; gap:5px}
.aw-pills .chip{font-size:11.5px; padding:3px 8px}
.aw-verdict{margin:12px 0 0; font-size:13.5px; color:var(--ink-2); max-width:86ch}
.aw-verdict b{color:var(--ink)}

.aw-two{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:0 22px; align-items:start}
.aw-two .sh4:first-child{margin-top:14px}
.aw-v{color:var(--accent)}
.aw-dim{color:var(--ink-3); font-size:11.5px}
table.t tr.anchor td{background:var(--accent-soft)}
table.t tr.anchor td:first-child{color:var(--ink)}

@media (max-width:820px){
  .aw-bench{grid-template-columns:1fr}
  .aw-scale{border-left:0; border-right:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:8px 0}
  .aw-pan + .aw-scale + .aw-pan{border-top:0}
}

/* patch notes 3.0: card inteiro do personagem com o diff por cima */
.pgrid.pfull{grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px}
.pcard{padding:0; box-shadow:var(--shadow)}
.pcard .title h3{font-size:19px}
.pcard .stats b s{color:var(--ink-3); font-weight:400; font-size:12px; margin-right:3px; text-decoration-color:color-mix(in srgb, var(--k21) 55%, transparent)}
.pcard .rar s{opacity:.6; margin-right:4px}
.pcard .pack{gap:0}
.pcard .passives{margin-bottom:4px}
.pcard .pchip em{font-style:normal; font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-left:4px; color:var(--k1)}
.pcard .pchip.pp-rem{opacity:.75; border-color:color-mix(in srgb, var(--k21) 45%, var(--line))}
.pcard .pchip.pp-rem em{color:var(--k21)}
.pcard .pab{border-top:1px dashed var(--line); margin-top:6px; padding-top:6px}
.pcard .pab:first-of-type{border-top:0; margin-top:0; padding-top:2px}
.pcard .pab-same .txt{color:var(--ink-2)}
.pcard .pab .txt em{font-style:normal; font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-left:4px; color:var(--k1)}
.pcard .pab-rem .txt em{color:var(--k21)}
.pcard .pab-add .txt{color:var(--ink)}

/* Seletor de promoção de raridade na ficha do herói (29/set/2026): radio + CSS, sem JS */
.promo-r{position:absolute; opacity:0; pointer-events:none}
.promo-tabs{display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 2px}
.promo-tabs label{
  cursor:pointer; font-family:"IBM Plex Mono",monospace; font-size:12px; font-variant-numeric:tabular-nums;
  padding:5px 12px; border:1px solid var(--line-2); border-radius:2px; background:var(--surface); color:var(--ink-2);
}
.promo-tabs label:hover{border-color:var(--accent); color:var(--ink)}
.promo-lvl{display:none}
#promo-0:checked ~ .promo-l0, #promo-1:checked ~ .promo-l1, #promo-2:checked ~ .promo-l2,
#promo-3:checked ~ .promo-l3, #promo-4:checked ~ .promo-l4{display:block}
#promo-0:checked ~ .promo-tabs .promo-t0, #promo-1:checked ~ .promo-tabs .promo-t1, #promo-2:checked ~ .promo-tabs .promo-t2,
#promo-3:checked ~ .promo-tabs .promo-t3, #promo-4:checked ~ .promo-tabs .promo-t4{
  background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600;
}
#promo-0:focus-visible ~ .promo-tabs .promo-t0, #promo-1:focus-visible ~ .promo-tabs .promo-t1, #promo-2:focus-visible ~ .promo-tabs .promo-t2,
#promo-3:focus-visible ~ .promo-tabs .promo-t3, #promo-4:focus-visible ~ .promo-tabs .promo-t4{outline:2px solid var(--accent); outline-offset:2px}
.promo-note{margin:8px 0 4px}
.abil.chg{border-left-color:var(--ink)}
.abil .chg-tag{margin-left:8px; padding:1px 5px; border-radius:2px; background:var(--accent-soft); color:var(--accent); letter-spacing:.08em}
.pass-item.rnd{border-style:dashed}

/* Seletor de promoção no card da lista de heróis (29/set/2026) */
.cpromo{display:flex; flex-wrap:wrap; gap:4px}
.cpromo button{
  cursor:pointer; font-family:"IBM Plex Mono",monospace; font-size:11px; font-variant-numeric:tabular-nums;
  padding:2px 8px; border:1px solid var(--line-2); border-radius:2px; background:var(--surface); color:var(--ink-2);
}
.cpromo button:hover{border-color:var(--accent); color:var(--ink)}
.cpromo button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600}
.cpromo button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.pchip.rnd{border-style:dashed; background:transparent}
.ability.chg{border-left:3px solid var(--accent)}