/* Wiki do Vale of Heroes (16/out/2026) — páginas estáticas geradas por tools/wiki/build_wiki.py.
   Mesma linguagem do site v2 (web/src/site/landing-v2.css): tokens A6, molduras do jogo (bz) em border-image 9-slice com
   image-rendering: pixelated, VALETitle (Metamorphous) nos títulos, VALEText (Nunito) no corpo, PixelText (FantasyRPGtext, bitmap de 8 px)
   só em 16 px. Sem framework: este CSS + wiki.js (filtros dos índices e botão de ataque).
   r5 (16/out, revisor): palco escala para caber (--ext + container query, com fallback), botão Ataque some sem JS, losango dos fatos e
   estrela de magia são desenho (◆ e ✦ não existem nas 3 fontes), seta → vira SVG .arr. */
/* r5 (verificador 1, CLS): as 3 fontes vêm com preload no <head> e font-display: optional. Com swap, a fonte que chegava depois do 1º
   desenho trocava as quebras de linha (a migalha em PixelText passava de 2 linhas para 1 e o artigo subia 24 px: CLS 0,2 em 225 páginas
   no celular). Com optional a fonte só é usada se já estiver pronta no 1º desenho (o preload faz isso no caso comum); se não, a página
   fica com a reserva até o fim (nada se move) e a próxima página já abre com a fonte do cache. Conferido por check_fontswap.py. */
/* r5 (verificador 2): título e corpo são subconjuntos woff2 que o build_wiki.py gera (título ~10 KB, "VALE Title Wiki" = Metamorphous
   renomeada e sem hinting; corpo = Nunito em 2 pesos fixos, 400 e 700, ~9,6 KB cada). Antes o título era /ui/bz/title.ttf (56 KB com gzip) e a
   Nunito variável tinha 43 KB: em rede lenta chegavam depois do 1º desenho (logo, h1, h2 e botões em Georgia, corpo em Segoe UI). Com cada
   fonte menor que este CSS, o preload termina junto com ele e o Chrome usa a fonte no 1º desenho (check_fontpaint.py). Só existem os pesos
   400 e 700 (700 cobre o "800" pedido em algum lugar). Licença (SIL OFL 1.1): /wiki/assets/fonts/ofl.txt */
@font-face { font-family: 'VALETitle'; src: url('/wiki/assets/fonts/vale-title.woff2') format('woff2'); font-display: optional; }
@font-face { font-family: 'VALEText'; src: url('/wiki/assets/fonts/nunito-400.woff2') format('woff2'); font-weight: 400; font-display: optional; }
@font-face { font-family: 'VALEText'; src: url('/wiki/assets/fonts/nunito-700.woff2') format('woff2'); font-weight: 700; font-display: optional; }
@font-face { font-family: 'PixelText'; src: url('/ui/fr/text.ttf') format('truetype'); font-display: optional; }

:root {
  --bg: #0d0b12; --bg2: #16121d; --panel: #1d1724; --line: #3a2b1d; --bronze: #6b4f2e; --bronze2: #a07a3a;
  --gold: #f0c060; --gold2: #ffe9b8; --gold-dark: #b78536; --tq: #40c8b8; --tq2: #8af0e2; --tq-dark: #1e8f84;
  --parch: #e8d5a8; --ink: #4a3218; --text: #efe6d2; --muted: #b8a98a; --ember: #ff8a2a; --ice: #8fdcff;
  --hp: #4bd16a; --mp: #4a8cff; --dmg: #d94b3f; --coin: #ffd24a; --xp: #9be7a1;
  --gut: 5.5%; --maxw: 1240px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-width: 320px; overflow-x: hidden;
  background: var(--bg) radial-gradient(#ffffff0a 1px, transparent 1px) 0 0 / 4px 4px;
  color: var(--text); font: 16px/1.6 VALEText, 'Nunito', 'Segoe UI', Arial, sans-serif;
}
img { image-rendering: pixelated; max-width: 100%; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold2); text-decoration: underline; text-underline-offset: 3px; }
:is(a, button, input, select, summary):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 8px 14px; background: var(--gold); color: #1a140c; font-weight: 700; }
.skip:focus { top: 8px; }
.pixel, .kicker, dt, th, .chip, .crumbs, .tag, .meta { font-family: PixelText, monospace; font-size: 16px; line-height: 1.25; letter-spacing: 0; }
/* r5 (verificador 2): número dentro de texto em PixelText vira <span class="n"> (build_wiki.text_glyphs): no bitmap de 8 px o 8 é quase um 0
   ("Hunt 38+" lia "Hunt 30+", "128" lia "120"). Nunito pesada, um pouco menor que o corpo para casar com a altura das letras do bitmap. */
.n { font-family: VALEText, Arial, sans-serif; font-weight: 700; font-size: .95em; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* ── chrome do jogo (9-slice) ── */
.bz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 12px solid transparent; border-image: url('/ui/bz/btn.png') 5 fill / 12px stretch; image-rendering: pixelated; background: none; font: 400 16px/18px VALETitle, Georgia, serif; color: #fff; text-shadow: 0 1px 0 #000; cursor: pointer; text-decoration: none; white-space: nowrap; max-width: 100%; }
/* r5 (verificador 1): texto BRANCO no bronze. O dourado claro (--gold2 #ffe9b8) sobre o btn.png (#886d3f) dava 4,09:1 (AA pede 4,5);
   branco dá 4,88 (btn), 4,57 (btn-h), 7,43 (btn-p) e 5,02 no btn-p-tq (Ataque apertado). No turquesa o texto escuro #06201c dá 5,58/6,45;
   apertado (btn-p-tq) o escuro dava 3,40, então ali também vira branco. */
.bz-btn:hover { border-image-source: url('/ui/bz/btn-h.png'); color: #fff; text-decoration: none; }
.bz-btn:active { border-image-source: url('/ui/bz/btn-p.png'); }
.bz-btn.tq { border-image-source: url('/ui/bz/btn-tq.png'); color: #06201c; text-shadow: 0 1px 0 #8af0e2aa; }
.bz-btn.tq:hover { border-image-source: url('/ui/bz/btn-h-tq.png'); color: #06201c; }
.bz-btn.tq:active { border-image-source: url('/ui/bz/btn-p-tq.png'); color: #fff; text-shadow: 0 1px 0 #000; }
.bz-btn.big { min-height: 60px; padding: 0 30px; border-width: 18px; border-image-width: 18px; font-size: 20px; line-height: 24px; }
.panel { border: 16px solid transparent; border-image: url('/ui/bz/panel.png') 16 fill / 16px round; image-rendering: pixelated; }
/* texto sobre o bronze (#775d2f do panel.png): tons claros com contraste AA >= 5:1 (o dourado #f0c060 dava 3,66:1, o pergaminho 4,28:1).
   Os tokens são redefinidos só dentro do painel, então rótulos, links, metas e textos herdam a versão legível. */
.panel { --gold: #ffe6a8; --parch: #f7efdc; --text: #f7efdc; --muted: #f3ead6; --tq2: #b4f7ef; color: var(--text); }
.win { border: 18px solid transparent; border-image: url('/ui/win-frame.png') 8 / 18px round; image-rendering: pixelated; background: #0a0810; }
.slot { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border: 6px solid transparent; border-image: url('/ui/bz/slot.png') 2 / 6px round; image-rendering: pixelated; background: #08060acc; }
.slot img { display: block; }
.slot.lg { width: 76px; height: 76px; }
.slot.xl { width: 152px; height: 152px; border-width: 10px; border-image-width: 10px; }
.parch { position: relative; z-index: 0; color: var(--ink); padding: 4px 6px; }
.parch::before { content: ''; position: absolute; inset: -16px; z-index: -1; border: 16px solid transparent; border-image: url('/wiki/assets/ui/box-parchment.png') 16 fill / 16px round; image-rendering: pixelated; filter: sepia(1) brightness(.92); pointer-events: none; }
.parch a { color: #7a3b0c; text-decoration: underline; text-underline-offset: 2px; }
.parch a:hover { color: #3a1a04; }

/* ── cabeçalho ── */
.site-h { position: sticky; top: 0; z-index: 30; background: #0d0b12e6; border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.site-h-in { max-width: calc(var(--maxw) + 2 * 64px); margin: 0 auto; min-height: 64px; padding: 0 var(--gut); display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; flex: 0 0 auto; font-size: 22px; text-decoration: none !important; }
.vale-logo { position: relative; display: inline-flex; align-items: baseline; gap: .13em; font-family: VALETitle, Georgia, serif; font-weight: 400; line-height: 1.15; white-space: nowrap; filter: drop-shadow(0 2px 0 #593814) drop-shadow(0 3px 5px #0008); }
.vale-logo b { font-weight: 400; color: #f0c060; background: linear-gradient(180deg, #fff0b3 8%, #eac16a 40%, #b78536 62%, #f4cd7a 85%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vale-logo i { align-self: center; font-style: normal; font-size: .55em; color: var(--tq); text-shadow: 0 0 8px #40c8b820; }
.site-nav { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.site-nav a { font: 700 12px/1 VALEText, Arial, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); padding: 8px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--gold2); text-decoration: none; }
.site-nav a[aria-current] { color: var(--gold2); border-bottom-color: var(--gold); }
.site-tools { display: flex; align-items: center; gap: 14px; }
.lang { display: inline-flex; gap: 6px; }
.lang a { min-width: 36px; padding: 5px 8px; border: 1px solid var(--bronze); border-radius: 3px; color: var(--parch); font: 700 12px/1.2 VALEText, Arial, sans-serif; text-align: center; }
.lang a:hover { text-decoration: none; border-color: var(--gold); }
.lang a[aria-current] { background: var(--gold); border-color: var(--gold); color: #1a140c; }
.site-h .play { min-height: 40px; padding: 0 14px; border-width: 10px; border-image-width: 10px; font-size: 14px; line-height: 20px; }
.site-h .play .pl-s { display: none; }   /* r6 (S2): rótulo curto ("Play"/"Jogar") só no celular estreito */

/* ── base de página ── */
main { display: block; max-width: calc(var(--maxw) + 2 * 64px); margin: 0 auto; padding: 0 var(--gut) 72px; }
.crumbs { margin: 22px 0 18px; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: '›'; margin: 0 10px; color: var(--bronze2); }
.crumbs a { color: var(--parch); }
.crumbs [aria-current] { color: var(--gold2); }
.kicker { display: block; margin: 0 0 10px; color: var(--gold); text-transform: uppercase; }
h1 { margin: 0 0 14px; font: 400 clamp(36px, 4.4vw, 58px)/1.06 VALETitle, Georgia, serif; color: #f3ead6; filter: drop-shadow(2px 2px 0 #140a06) drop-shadow(0 0 10px #000d); overflow-wrap: anywhere; }
h2 { margin: 0 0 16px; font: 400 clamp(24px, 2.4vw, 32px)/1.15 VALETitle, Georgia, serif; color: var(--gold2); }
h3 { margin: 0 0 8px; font: 400 21px/1.2 VALETitle, Georgia, serif; color: var(--gold2); }
p { margin: 0 0 14px; }
.lede { max-width: 760px; margin: 0; font-size: 18px; line-height: 1.65; color: var(--parch); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.sec { margin: 0 0 44px; scroll-margin-top: 84px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sec-h h2 { margin: 0; }
.sec-h .meta { color: var(--muted); font-size: 24px; line-height: 1; }
.q-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.note { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.note b { color: var(--parch); font-weight: 700; }
.hero-h { display: grid; gap: 6px; padding: 8px 0 30px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--bronze); border-radius: 3px; color: var(--parch); background: #120e17; white-space: nowrap; }
.tag.elite { border-color: #c0703a; color: #ffb27a; }
.tag.boss { border-color: var(--dmg); color: #ff9a8f; }
.tag.tq { border-color: var(--tq-dark); color: var(--tq2); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
/* glosa: explicação em inglês de um nome que o jogo não traduz (o nome do jogo vem antes, a glosa nunca o substitui) */
.gloss { font: italic 400 .8em/1.3 VALEText, Arial, sans-serif; color: var(--muted); white-space: normal; }
h1 .gloss, h3 .gloss { font-size: .62em; }
.ent-gloss { margin: -4px 0 12px; color: var(--muted); font-size: 15px; }
.ent-gloss .gloss { font-size: 1em; color: var(--gold2); }

/* ── página de entidade: infobox + coluna ── */
.ent-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto 1fr; grid-template-areas: 'head side' 'main side'; column-gap: 40px; align-items: start; }
.ent-head { grid-area: head; min-width: 0; }
.ent-main { grid-area: main; min-width: 0; }
.infobox { grid-area: side; align-self: start; position: sticky; top: 84px; margin-top: 8px; padding: 0 2px 4px; }
.ib-name { margin: 12px 0 2px; text-align: center; font: 400 24px/1.15 VALETitle, Georgia, serif; color: var(--gold2); text-shadow: 1px 1px 0 #000; }
.ib-sub { margin: 0 0 10px; text-align: center; color: var(--parch); font-size: 14px; }
.ib dl, dl.ib { margin: 0; }
.ib-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 7px 4px; border-top: 1px solid #00000040; }
.ib-row:first-child { border-top: 0; }
.ib-row dt { color: var(--gold); text-transform: uppercase; }
.ib-row dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.ib-row dd small { color: var(--parch); }
.ib-row dd a { color: var(--gold2); }
.big-num { font: 400 20px/1 VALETitle, Georgia, serif; color: #fff4d6; }

/* palco do monstro (chão do jogo + folha real animada em CSS steps) */
.stage { position: relative; height: var(--sh, 250px); overflow: hidden; border: 18px solid transparent; border-image: url('/ui/win-frame.png') 8 / 18px round; background-color: #08060a; background-image: var(--floor); background-repeat: repeat; background-size: 512px 320px; background-position: var(--fx) var(--fy); image-rendering: pixelated; }
.stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 80% at 50% 62%, transparent 40%, #08060ab0 100%); }
.stage .spr { position: absolute; z-index: 1; left: 50%; bottom: var(--b); width: var(--fw); height: var(--fh); max-width: none; object-fit: none; object-position: calc(-1 * var(--fw)) calc(-1 * var(--row) * var(--fh)); transform: translateX(-50%) scale(var(--ms)); transform-origin: 50% 100%; animation: walk6 .72s steps(6) infinite; image-rendering: pixelated; }
.stage .spr.atk { display: none; animation-name: atk6; animation-duration: .66s; }
/* r5: em palco estreito a escala vira min(--ms, (largura do palco - 12px) / --ext): o Dragon (célula 346 px, corpo 259 px) cabe em 320 px.
   tan(atan2(a, b)) = a / b sem unidade (CSS Values 4). Navegador antigo ignora o bloco e fica na escala fixa de cima. */
@supports (container-type: inline-size) and (width: 1cqw) and (transform: scale(tan(atan2(1px, 2px)))) {
  .stage { container-type: inline-size; }
  .stage .spr { transform: translateX(-50%) scale(min(var(--ms), tan(atan2(calc(100cqw - 12px), var(--ext, 9999px))))); }
}
.no-js .stage-btn, .no-js .stage-bar { display: none; }   /* r5: sem JS o botão não faz nada: não aparece */
.stage.atk .spr.walk { display: none; }
.stage.atk .spr.atk { display: block; }
.stage .shadow { position: absolute; z-index: 0; left: 50%; bottom: calc(var(--base) - 6px); width: var(--sw); height: 12px; translate: -50% 0; border-radius: 50%; background: #0000006b; }
@keyframes walk6 { from { object-position: calc(-1 * var(--fw)) calc(-1 * var(--row) * var(--fh)); } to { object-position: calc(-7 * var(--fw)) calc(-1 * var(--row) * var(--fh)); } }
@keyframes atk6 { from { object-position: 0 calc(-1 * var(--row) * var(--fh)); } to { object-position: calc(-6 * var(--fw)) calc(-1 * var(--row) * var(--fh)); } }
/* r5 (verificador 1): o botão Ataque fica numa faixa abaixo do palco (antes ficava por cima, no canto, e a asa do Dragon passava por baixo) */
.stage-bar { display: flex; justify-content: flex-end; margin: 8px 0 0; }
.stage-btn { min-height: 34px; padding: 0 10px; border-width: 8px; border-image-width: 8px; font-size: 13px; line-height: 16px; }
.stage-btn[aria-pressed='true'] { border-image-source: url('/ui/bz/btn-p-tq.png'); color: #fff; }
.stage-cap { position: absolute; z-index: 2; left: 10px; bottom: 6px; color: var(--parch); text-shadow: 1px 1px 0 #000; }

/* retrato de NPC */
.npc-win { position: relative; height: 230px; overflow: hidden; background: radial-gradient(ellipse 26% 6% at 50% calc(100% - 30px), #00000080 0 99%, transparent 100%), linear-gradient(#2a2032, #120e17); }
.npc-win .por { position: absolute; left: 50%; bottom: var(--pb, 18px); width: 64px; height: 64px; translate: -50% 0; scale: 3; transform-origin: 50% 100%; background-image: var(--strip); background-size: calc(64px * var(--n)) 64px; animation: strip4 1s steps(4) infinite; image-rendering: pixelated; }
@keyframes strip4 { to { background-position-x: calc(-64px * var(--n)); } }

/* ícone animado de item (tira) */
.ico-anim { display: block; width: 32px; height: 32px; background-image: var(--strip); background-repeat: no-repeat; image-rendering: pixelated; }
.ico-anim.y { background-size: 32px calc(32px * var(--n)); animation: icoy calc(var(--ms) * var(--n)) steps(var(--n)) infinite; }
.ico-anim.x { background-size: calc(32px * var(--n)) 32px; animation: icox calc(var(--ms) * var(--n)) steps(var(--n)) infinite; }
@keyframes icoy { to { background-position-y: calc(-32px * var(--n)); } }
@keyframes icox { to { background-position-x: calc(-32px * var(--n)); } }
.slot.xl .ico-anim, .slot.xl > img { width: 128px; height: 128px; }
.slot.xl .ico-anim.y { background-size: 128px calc(128px * var(--n)); }
.slot.xl .ico-anim.x { background-size: calc(128px * var(--n)) 128px; }
@keyframes icoy4 { to { background-position-y: calc(-128px * var(--n)); } }
@keyframes icox4 { to { background-position-x: calc(-128px * var(--n)); } }
.slot.xl .ico-anim.y { animation-name: icoy4; }
.slot.xl .ico-anim.x { animation-name: icox4; }
.ib-icon { display: grid; place-items: center; padding: 18px 0 4px; }

/* ── tabelas ── */
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { padding: 8px 10px; text-align: left; color: var(--gold); text-transform: uppercase; font-weight: 400; border-bottom: 1px solid var(--bronze); white-space: nowrap; }
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:hover td { background: #ffffff06; }
.tbl .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl .cell-ent { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tbl .cell-ent a { font-weight: 700; color: var(--gold2); }
.tbl .cell-ent small { display: block; color: var(--muted); font-size: 13px; }
.tbl .cell-ent small a { font-weight: 400; color: var(--parch); }
.chance { display: grid; grid-template-columns: minmax(60px, 1fr) auto; align-items: center; gap: 10px; min-width: 150px; }
.bar { position: relative; height: 10px; border: 1px solid #00000080; background: #08060a; box-shadow: inset 0 0 0 1px #3a2b1d; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: linear-gradient(#ffe08a, #c8902e); }
.bar.r1 i { background: linear-gradient(#b0f0a0, #3fa64a); }
.bar.r2 i { background: linear-gradient(#ffe08a, #c8902e); }
.bar.r3 i { background: linear-gradient(#ffc08a, #d0672a); }
.bar.r4 i { background: linear-gradient(#ff9aa0, #c0303a); }
.bar.r5 i { background: linear-gradient(#e0b0ff, #8040c0); }
.chance b { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.chance small { display: block; color: var(--muted); font-size: 12px; line-height: 1.1; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* elementos */
.elems { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.elem { min-width: 0; padding: 10px 10px; border: 1px solid var(--line); background: #120e17; }
.elem .en { display: flex; align-items: center; gap: 8px; color: var(--parch); font-size: 14px; }
.elem .en::before { content: ''; flex: 0 0 10px; height: 10px; background: var(--c); box-shadow: 0 0 6px var(--c); }
.elem .ev { display: block; margin-top: 4px; font: 400 19px/1.05 VALETitle, Georgia, serif; color: var(--text); white-space: nowrap; }   /* "Immune" inteiro, nunca quebrado */
.elem.weak { border-color: #2d6b4a; background: #0f1d16; }
.elem.weak .ev { color: #9cf0b0; }
.elem.resist { border-color: #6b3a2d; background: #1d1210; }
.elem.resist .ev { color: #ffb0a0; }
.elem.immune { border-color: #6b2d2d; background: #1d0f10; }
.elem.immune .ev { color: #ff8f8f; }
.elem small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }

/* ataques (cartões; legíveis no celular) */
.atks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
/* r5b: era .atk, o mesmo nome da classe que o botão Ataque liga no .stage e da folha .spr.atk: em modo ataque o palco perdia
   o chão e a moldura (border zera o border-image) e a folha ganhava padding/borda (sprite cortado num retângulo). */
.atk-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--c, var(--bronze2)); background: #120e17; }
.atk-card h3 { margin: 0; font-size: 19px; }
.atk-card .dmg { grid-row: span 2; align-self: center; text-align: right; font: 400 24px/1 VALETitle, Georgia, serif; color: #ffd0c0; white-space: nowrap; }
.atk-card .dmg small { display: block; margin-top: 4px; font: 400 12px/1.2 VALEText, Arial, sans-serif; color: var(--muted); }
.atk-card .facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; color: var(--parch); font-size: 14px; }
.atk-card .facts li::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 8px 0 1px; background: var(--c, var(--bronze2)); transform: rotate(45deg); vertical-align: 1px; }   /* r5: losango desenhado (◆ falta nas fontes) */
.atk-card .extra { grid-column: 1 / -1; margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.el-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--parch); }
.el-chip::before { content: ''; width: 9px; height: 9px; background: var(--c); box-shadow: 0 0 5px var(--c); }

/* listas de fatos */
.facts-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.facts-list li { position: relative; padding-left: 22px; }
.star-ic { display: inline-block; width: 10px; height: 10px; margin: 0 7px 0 1px; vertical-align: 0; background: url('/ui/bz/mi/star.png') 0 0 / 10px 10px; image-rendering: pixelated; }   /* r5: no lugar de ✦ */
.arr { display: inline-block; vertical-align: -1px; margin: 0 2px; }   /* r5: seta → como SVG (currentColor) */
.facts-list li::before { content: ''; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; background: url('/ui/bz/mi/star.png') 0 0 / 10px 10px; image-rendering: pixelated; }
.facts-list.warn li::before { background-image: url('/ui/bz/mi/skull.png'); }

/* cartões de lugar / missão / grade */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.card { position: relative; padding: 4px 6px 6px; }
.card h3 a { color: var(--gold2); }
.card p { margin: 6px 0 0; font-size: 15px; color: var(--parch); }
.card .meta { margin-top: 6px; color: var(--gold); }
.place { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; align-items: start; }
.place-floor { display: grid; place-items: center; width: 116px; height: 104px; background: #0e2a44 var(--floor) center / 256px 160px; image-rendering: pixelated; border: 6px solid transparent; border-image: url('/ui/bz/slot.png') 2 / 6px round; }
.place-floor img { display: block; width: 104px; height: 92px; object-fit: contain; image-rendering: auto; }
.q-por { width: 76px; height: 76px; overflow: hidden; background: linear-gradient(#2a2032, #120e17); }
.q-por img { width: 64px; height: 64px; }
.panel details.more { background: #00000030; border-color: #00000050; }
.panel details.more > summary { font-size: 17px; }
.quest { display: grid; gap: 8px; }
.quest .q-top { display: flex; align-items: center; gap: 12px; }
.quest .q-top img { flex: 0 0 auto; }
.quest .q-chain { color: var(--tq2); }
.quest ul { margin: 0; padding-left: 18px; font-size: 15px; }

/* recompensas (como na seção Quests) */
.rewards { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rw { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px 0 0; border: 1px solid #00000060; background: #08060a99; color: var(--text); font-size: 14px; }
.rw .slot { width: 40px; height: 40px; }
.rw.xp { padding: 0 12px; color: var(--xp); font: 700 15px/1 VALEText, Arial, sans-serif; }
.rw.xp b { color: #fff; margin-right: 4px; }
.rw.lc { padding: 0 12px; }
.coin { display: inline-block; width: 16px; height: 16px; background: url('/sprites/landcoin.png') 0 0 / 144px 16px no-repeat; image-rendering: pixelated; vertical-align: -3px; }
.rw a { color: var(--gold2); }

/* ── índices ── */
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; margin: 0 0 22px; padding: 6px 8px 8px; }
.filters[hidden] { display: none; }
.no-js [data-filters] { display: none; }   /* o espaço do formulário já existe no 1o desenho (sem pular a grade quando o wiki.js roda) */
.filters label { display: grid; gap: 4px; color: var(--gold); font: 16px/1.25 PixelText, monospace; text-transform: uppercase; }
.filters input, .filters select { min-height: 40px; min-width: 150px; padding: 6px 10px; border: 1px solid var(--bronze); border-radius: 2px; background: #0a0810; color: var(--text); font: 15px VALEText, Arial, sans-serif; }
.filters input[type=search] { min-width: min(280px, 100%); }
.filters .count { margin-left: auto; align-self: center; color: var(--parch); font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { min-height: 34px; padding: 4px 10px; border: 1px solid var(--bronze); border-radius: 2px; background: #0a0810; color: var(--parch); font: 14px VALEText, Arial, sans-serif; cursor: pointer; }
.chips button[aria-pressed='true'] { background: var(--gold); border-color: var(--gold); color: #1a140c; font-weight: 700; }
.empty { padding: 24px; text-align: center; color: var(--muted); }
.empty[hidden] { display: none; }

.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mcard { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 252px; overflow: hidden; color: var(--text); text-decoration: none !important; }
.mcard .mc-floor { position: absolute; inset: 0; background-color: #08060a; background-image: var(--floor); background-size: 512px 320px; background-position: var(--fx) var(--fy); image-rendering: pixelated; }
.mcard .mc-floor::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #08060ae6 0, #08060a80 34%, #08060a00 58%); }
/* r5b: cartão em coluna (sprite em cima do texto): nome em 2 linhas no celular empurra o sprite para cima em vez de cobrir os pés;
   sem espaço, o sprite encolhe (object-fit) em vez de ser cortado no topo. Com nome de 1 linha a posição é a mesma de antes (12 px / 1 px). */
.mcard img { position: relative; flex: 0 1 auto; min-height: 0; margin-bottom: 12px; object-fit: contain; object-position: 50% 100%; transition: transform .15s; }
.mcard:hover img, .mcard:focus-visible img { transform: translateY(-3px); }
.mcard .mc-text { position: relative; flex: none; align-self: stretch; margin-bottom: 4px; display: grid; gap: 2px; padding: 0 4px; text-align: center; }
.mcard .mc-name { font: 400 19px/1.08 VALETitle, Georgia, serif; text-wrap: balance; color: var(--gold2); text-shadow: 1px 1px 0 #000, 0 0 10px #000; }
.mcard .mc-meta { color: var(--parch); text-shadow: 1px 1px 0 #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-wrap: balance; }   /* r5 (verif. 2): até 2 linhas (o lugar é o 2º fato do cartão; "Mina das Raizes P…" cortava) */
.mcard .mc-badge { position: absolute; top: 2px; left: 2px; z-index: 1; }
/* r5 (verificador 1): a faixa dos selos (caçada / Chefe / Elite) é reservada no topo do cartão; sem espaço, o sprite encolhe
   (flex + object-fit) em vez de ficar por baixo do selo (cabeça do Cyclops Chief, coroa do Golem de Arenito). */
.mcard { padding-top: 30px; }
.mcard .mc-lv { position: absolute; top: 2px; right: 2px; z-index: 1; background: #0d0b12d9; }
.mcard:hover .mc-name { color: #fff; }

.igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.icard { display: grid; justify-items: center; gap: 6px; height: 100%; padding: 12px 8px 10px; border: 1px solid var(--line); background: #120e17cc; color: var(--text); text-align: center; text-decoration: none !important; }
.icard:hover { border-color: var(--bronze2); background: #1d1724; }
.icard .ic-name { font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--gold2); }
.icard .ic-meta { font-size: 13px; color: var(--muted); line-height: 1.3; }
.igroup { margin: 0 0 34px; }
.igroup[hidden] { display: none; }
.igroup > h2 { display: flex; align-items: baseline; gap: 10px; }
.igroup > h2 small { font: 700 20px/1 VALEText, Arial, sans-serif; color: var(--muted); font-variant-numeric: tabular-nums; }   /* r5 (verif. 2): contagem em VALEText (o 8 do PixelText parece 0) */   /* r5 (verif. 1): números em 3x (24 px) em vez de 2x: 7 px de altura era pouco */

.ngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ncard { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; height: 100%; padding: 2px 4px; color: var(--text); text-decoration: none !important; }
.ncard .n-por { width: 112px; height: 112px; overflow: hidden; display: grid; place-items: end center; background: radial-gradient(ellipse 34% 8% at 50% calc(100% - 10px), #00000080 0 99%, transparent 100%), linear-gradient(#2a2032, #120e17); border: 6px solid transparent; border-image: url('/ui/bz/slot.png') 2 / 6px round; }
.ncard .n-por img { width: 128px; height: 128px; max-width: none; margin-bottom: -14px; }
.ncard .n-name { font: 400 20px/1.15 VALETitle, Georgia, serif; color: var(--gold2); }
.ncard .n-meta { margin-top: 4px; font-size: 14px; color: var(--parch); }
.ncard:hover .n-name { color: #fff; }

/* hub */
.hub-hero { position: relative; overflow: hidden; padding: 40px 44px 36px; border: 24px solid transparent; border-image: url('/ui/win-frame.png') 8 / 24px round; background: #0d0b12 linear-gradient(90deg, #0d0b12f2 0%, #0d0b12d0 42%, #0d0b1230 100%); background-origin: border-box; image-rendering: pixelated; }
.hub-hero::before { content: ''; position: absolute; z-index: -1; inset: -24px; background: linear-gradient(90deg, #0d0b12f5 0%, #0d0b12dd 40%, #0d0b1255 72%, #0d0b1210 100%), url('/wiki/assets/floors/hero.png') right -100px bottom -270px / 1440px 960px no-repeat, #0d0b12; image-rendering: pixelated; }
.hub-hero { isolation: isolate; }
.hero-mon { position: absolute; z-index: 0; right: 196px; bottom: 66px; width: 0; height: 0; pointer-events: none; }
.hero-mon img { position: absolute; left: 0; bottom: calc(-1 * var(--foot)); width: var(--fw); height: var(--fh); max-width: none; object-fit: none; object-position: calc(-1 * var(--fw)) calc(-1 * var(--row) * var(--fh)); transform: translateX(-50%) scale(var(--ms)); transform-origin: 50% 100%; animation: walk6 .72s steps(6) infinite; }
.hero-mon::before { content: ''; position: absolute; left: -100px; bottom: -8px; width: 200px; height: 16px; border-radius: 50%; background: #0000006b; }
.hub-hero > :not(.hero-mon) { position: relative; z-index: 1; }
.hub-hero .lede { margin-bottom: 22px; }
.counts { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }
.counts li { min-width: 130px; padding: 10px 14px; border: 1px solid var(--bronze); background: #0d0b12cc; }
.counts b { display: block; font: 400 32px/1 VALETitle, Georgia, serif; color: var(--gold2); }
.counts span { color: var(--parch); font-size: 14px; }
.hub-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 34px 0 48px; padding: 0; list-style: none; }
.hub-cards.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hcard { display: grid; grid-template-rows: 150px auto; height: 100%; color: var(--text); text-decoration: none !important; }
.hcard .h-art { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 6px; overflow: hidden; margin: -4px -4px 10px; background: #08060a var(--floor) center / 384px 240px; image-rendering: pixelated; }
.hcard .h-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #08060aa0, transparent 60%); }
.hcard .h-art img { position: relative; z-index: 1; margin-bottom: 12px; }
.hcard h2 { margin: 0 0 4px; font-size: 26px; }
.hcard p { margin: 0; color: var(--parch); font-size: 15px; }
.hcard .meta { margin-top: 8px; color: var(--gold); font-size: 24px; line-height: 1; }
.hcard:hover h2 { color: #fff; }
.areas-tbl td:first-child a { font-weight: 700; }
.mon-links { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.mech { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.mech li { padding: 12px 14px; border: 1px solid var(--line); background: #120e17; font-size: 15px; color: var(--parch); }
.mech li b { display: block; margin-bottom: 4px; font: 400 18px VALETitle, Georgia, serif; color: var(--gold2); }
details.more { margin-top: 12px; border: 1px solid var(--line); background: #120e17; }
details.more > summary { padding: 10px 14px; cursor: pointer; font: 400 18px VALETitle, Georgia, serif; color: var(--gold2); }
details.more > div { padding: 0 14px 12px; }
.dlg { display: grid; gap: 10px; margin: 0; }
.dlg dt { color: var(--gold); text-transform: uppercase; margin-top: 6px; }
.dlg dd { margin: 0; padding-left: 12px; border-left: 2px solid var(--bronze); font-style: italic; color: var(--parch); }
.steps { margin: 0; padding-left: 22px; }
.steps li { margin: 0 0 6px; }
.steps li::marker { color: var(--gold); font-family: VALETitle, Georgia, serif; }
.cta { margin: 56px calc(-1 * var(--gut)) -72px; padding: 72px var(--gut); text-align: center; background: linear-gradient(#0d0b12cc, #0d0b12cc), url('/wiki/assets/floors/hero.png') center / 1440px 960px; image-rendering: pixelated; border-top: 1px solid var(--line); }
.cta h2 { color: var(--text); font-size: clamp(28px, 3vw, 40px); }
.cta p { margin: 14px 0 0; color: var(--muted); }
.updated { margin-top: 36px; color: var(--muted); font-size: 13px; }

/* rodapé */
.site-f { padding: 36px var(--gut) 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.site-f-in { max-width: calc(var(--maxw) + 2 * 64px); margin: 0 auto; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.foot-row .vale-logo { font-size: 18px; }
.foot-row nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-left: auto; }
.foot-row nav a { color: var(--parch); }
.foot-fine { margin: 18px 0 0; font-size: 12px; }

/* ── responsivo ── */
@media (max-width: 1180px) {
  .site-nav { gap: 14px; }
  .hub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-cards.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .hub-cards.n3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .site-h-in { flex-wrap: wrap; gap: 0 16px; padding-top: 8px; }
  .site-tools { margin-left: auto; }
  .site-nav { order: 3; width: 100%; margin: 0; gap: 6px 18px; flex-wrap: wrap; padding: 2px 0 6px; }
  .ent-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: 'head' 'side' 'main'; row-gap: 0; }
  .hero-mon { display: none; }
  .infobox { position: static; max-width: 560px; width: 100%; justify-self: center; margin: 0 0 32px; }
}
@media (max-width: 640px) {
  :root { --gut: 16px; }
  body { font-size: 15px; }
  .brand { font-size: 18px; }
  .site-h-in { min-height: 56px; }
  .site-tools { gap: 8px; }
  .lang a { min-width: 32px; padding: 4px 6px; }
  .site-h .play { min-height: 36px; padding: 0 8px; border-width: 8px; border-image-width: 8px; font-size: 13px; }
  .site-nav { gap: 4px 14px; }
  .site-nav a { font-size: 11px; letter-spacing: 1px; padding: 6px 0; }
  .crumbs { margin: 14px 0 12px; }
  .lede { font-size: 16px; }
  .hero-h { padding-bottom: 20px; }
  .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mcard { height: 252px; border-width: 12px; border-image-width: 12px; }   /* r5 (verif. 1): +40 px para a faixa dos selos (antes 196); r5 (verif. 2): +16 px para o lugar em 2 linhas (Cyclops Chief PT em 320 px encolhia a 55%) */
  .mcard .mc-floor { background-position: var(--fxs) var(--fys); }
  .mcard img { margin-bottom: 1px; width: var(--ws); height: var(--hs); }
  .mcard .mc-name { font-size: 16px; }
  .mcard .mc-meta { font-size: 16px; }
  .mcard .mc-badge { top: 32px; left: auto; right: 2px; }
  .mcard.b2 { padding-top: 60px; }   /* r5 (verif. 1): no celular os dois selos ficam empilhados: reserva as duas faixas */   /* r5b: no celular o selo Chefe/Elite fica embaixo do de caçada (lado a lado se cobriam: "Chefe" + "Caçada 14+") */
  .igrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ngrid { grid-template-columns: minmax(0, 1fr); }
  .ncard { grid-template-columns: 92px minmax(0, 1fr); }
  .ncard .n-por { width: 92px; height: 92px; }
  .ncard .n-por img { width: 96px; height: 96px; margin-bottom: -10px; }
  .hub-cards, .hub-cards.n3 { grid-template-columns: minmax(0, 1fr); }
  .hub-hero { padding: 18px 12px 16px; border-width: 14px; border-image-width: 14px; }
  .hub-hero::before { inset: -14px; background: linear-gradient(#0d0b12e0, #0d0b12c8), url('/wiki/assets/floors/hero.png') right -100px top -120px / 1440px 960px no-repeat, #0d0b12; }   /* r5 (verif. 2): preso no topo (o herói alto do celular ficava com faixa lisa em cima) */
  .counts li { min-width: 0; flex: 1 1 90px; }
  .ib-row { grid-template-columns: 100px minmax(0, 1fr); }
  /* r5 (verif. 1): o palco no celular tem a mesma altura (--sh) do computador: 230 px cortava o chapéu do Rotten Oak e o ataque */
  .filters { gap: 10px; }
  .filters label, .filters input, .filters select { width: 100%; min-width: 0; }
  .filters .count { margin-left: 0; }
  .tbl { font-size: 14px; }
  .tbl th, .tbl td { padding: 7px 6px; }
  .chance { min-width: 110px; grid-template-columns: minmax(40px, 1fr) auto; gap: 6px; }
  .atk-card { grid-template-columns: minmax(0, 1fr); }
  .atk-card .dmg { grid-row: auto; text-align: left; }
  .place { grid-template-columns: 92px minmax(0, 1fr); }
  .place-floor { width: 92px; height: 84px; }
  .place-floor img { width: 80px; height: 72px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .foot-row nav { margin-left: 0; }
  .hide-sm { display: none; }
}
/* r6 (S2): até 380 px o Jogar do cabeçalho não some mais: logo um pouco menor, idioma mais justo e botão compacto com o rótulo curto.
   r6 (S1): o lugar do cartão de monstro ("Ilha dos Salgueiros Afogados", "Mina das Raizes Partidas") cabe inteiro em até 3 linhas com letra
   14 px / 1,2 — a mesma altura das 2 linhas de 16 px / 1,6, então o cartão (252 px) e o sprite não mudam. */
@media (max-width: 380px) {
  .brand { font-size: 15px; }
  .site-h-in { gap: 0 10px; }
  .site-tools { gap: 6px; }
  .lang { gap: 4px; }
  .lang a { min-width: 30px; padding: 4px 5px; }
  .site-h .play { min-height: 32px; padding: 0 4px; border-width: 6px; border-image-width: 6px; font-size: 13px; line-height: 16px; }
  .site-h .play .pl-l { display: none; }
  .site-h .play .pl-s { display: inline; }
  .mcard .mc-meta { font-size: 14px; line-height: 1.2; -webkit-line-clamp: 3; }
}
/* r5 (verificador 1): em 320 px o botão grande "Jogar agora — grátis" (nowrap, 324 px) passava da tela (rolagem lateral em /pt/wiki/).
   No celular estreito ele fica mais enxuto e, se ainda faltar espaço, quebra a linha em vez de vazar (max-width: 100% na .bz-btn). */
@media (max-width: 420px) {
  .bz-btn.big { padding: 0 12px; font-size: 18px; line-height: 22px; }
  .bz-btn.big { white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .stage .spr, .npc-win .por, .ico-anim, .hero-mon img { animation: none !important; }
  .stage .spr.walk { object-position: 0 calc(-1 * var(--row) * var(--fh)); }
  .mcard img { transition: none; }
}