/* New Midgard Wiki. Direção: central de ajuda do Notion (VisualForge, refs/sites/notion/pages/docs--help), modelo 6 escolhido em 28/10/2026.
   Sidebar em árvore + coluna de conteúdo; H1 em pergunta com busca em pílula e chips quase retos;
   cards de tópico em superfície com um objeto no canto; segundo eixo em cards-link com borda.
   Cor: branco, superfície #F6F5F4, texto preto, secundário cinza-quente #615D59.
   Regra do destaque: o azul mora no único botão do bloco promocional, nos links do texto e no foco. Nada mais. */
:root {
  --bg: #ffffff; --surface: #f6f5f4; --surface-2: #efeeec; --chip: #f1f0ee; --hover: #efeeec;
  --fg: #111111; --muted: #615d59; --faint: #78736e; --line: #e6e5e3; --line-2: #d6d4d1;
  --accent: #0075de; --accent-hover: #005fb8; --on-accent: #ffffff; --link: #0068c4; --focus: #0075de;
  --code-bg: #efeeec; --code-ink: #c4362c; --mark: #fbecc4; --note: #f6f5f4;
  --scrim: rgba(15, 15, 15, .42); --lb: rgba(10, 10, 10, .86);
  --pop: 0 0 0 1px rgba(15, 15, 15, .05), 0 3px 6px rgba(15, 15, 15, .08), 0 12px 32px rgba(15, 15, 15, .18);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --top: env(safe-area-inset-top, 0px); --hh: 60px;
  --gl: max(16px, env(safe-area-inset-left, 0px)); --gr: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #191919; --surface: #222221; --surface-2: #2a2a29; --chip: #2a2a29; --hover: #2c2c2b;
    --fg: #ebebea; --muted: #a8a49e; --faint: #8d8983; --line: #2f2f2e; --line-2: #3e3e3c;
    --accent: #1f72c4; --accent-hover: #2a82d8; --on-accent: #ffffff; --link: #5aa6ee; --focus: #5aa6ee;
    --code-bg: #2c2c2b; --code-ink: #ff8f85; --mark: #5c4e1f; --note: #222221;
    --scrim: rgba(0, 0, 0, .6); --lb: rgba(0, 0, 0, .9);
    --pop: 0 0 0 1px rgba(255, 255, 255, .07), 0 3px 6px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #191919; --surface: #222221; --surface-2: #2a2a29; --chip: #2a2a29; --hover: #2c2c2b;
  --fg: #ebebea; --muted: #a8a49e; --faint: #8d8983; --line: #2f2f2e; --line-2: #3e3e3c;
  --accent: #1f72c4; --accent-hover: #2a82d8; --on-accent: #ffffff; --link: #5aa6ee; --focus: #5aa6ee;
  --code-bg: #2c2c2b; --code-ink: #ff8f85; --mark: #5c4e1f; --note: #222221;
  --scrim: rgba(0, 0, 0, .6); --lb: rgba(0, 0, 0, .9);
  --pop: 0 0 0 1px rgba(255, 255, 255, .07), 0 3px 6px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--top) + var(--hh) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: var(--top); z-index: 30; background: var(--bg); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
mark { background: var(--mark); color: inherit; border-radius: 2px; padding: 0 1px; }
kbd { font: 500 11.5px/1 var(--font); padding: 4px 6px; border-radius: 4px; background: var(--bg); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
code { font: 500 13px/1.4 var(--mono); padding: 2px 6px; border-radius: 4px; background: var(--code-bg); color: var(--code-ink); overflow-wrap: anywhere; }

/* topo */
.head { position: sticky; top: var(--top); z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.hin { max-width: none; margin: 0 auto; height: var(--hh); display: flex; align-items: center; gap: 10px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.logo { display: flex; align-items: center; gap: 8px; color: var(--fg); font-weight: 700; font-size: 16px; letter-spacing: -.012em; white-space: nowrap; }
.logo img { width: 37px; height: 38px; image-rendering: pixelated; }
.logo span { color: var(--muted); font-weight: 500; }
.hs { margin-left: auto; display: flex; align-items: center; gap: 8px; width: 260px; height: 36px; padding: 0 6px 0 12px; border: 0; border-radius: 8px; background: var(--chip); color: var(--muted); cursor: pointer; font-size: 14px; }
.hs:hover { background: var(--surface-2); color: var(--fg); }
.hs .lbl { flex: 1; text-align: left; }
.ib { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: var(--chip); color: var(--fg); cursor: pointer; }
.ib:hover { background: var(--surface-2); }
.menu-btn { display: none; }
.theme-btn .moon { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .moon { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-btn .sun { display: none; } :root:not([data-theme="light"]) .theme-btn .moon { display: block; } }

/* esqueleto: sidebar em árvore | conteúdo | "Nesta página" nos artigos */
.shell { max-width: none; margin: 0 auto; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.shell.has-toc { grid-template-columns: 260px minmax(0, 1fr) 232px; }
.side { position: sticky; top: calc(var(--top) + var(--hh)); height: calc(100vh - var(--top) - var(--hh)); overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--line); padding: 18px 12px 40px max(14px, env(safe-area-inset-left, 0px)); }
.sl { margin: 24px 8px 6px; font-size: 12px; font-weight: 500; color: var(--faint); }
.sl:first-child { margin-top: 6px; }
.tree, .tree ul, .flat { list-style: none; margin: 0; padding: 0; }
.tree ul { display: none; padding-left: 12px; }
.br.open > ul { display: block; }
/* respiro entre os itens: o item atual e o do mouse não encostam um no outro */
.side li + li { margin-top: 3px; }
.br > ul { margin-top: 3px; }
.row { display: flex; align-items: center; border-radius: 6px; }
.row:hover { background: var(--hover); }
.ti { display: block; flex: 1; min-width: 0; padding: 5px 8px; border: 0; border-radius: 6px; background: none; color: var(--fg); font-size: 14px; line-height: 1.4; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.ti:hover { background: var(--hover); }
.row .ti:hover { background: none; }
.ti[aria-current="page"] { background: var(--hover); font-weight: 600; }
.row:has(> .ti[aria-current="page"]) { background: var(--hover); }
.tg { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; margin-right: 2px; border: 0; border-radius: 5px; background: none; color: var(--faint); cursor: pointer; }
.tg:hover { color: var(--fg); }
.tg svg { width: 14px; height: 14px; transition: transform .15s; }
.br.open > .row > .tg svg { transform: rotate(90deg); }
.flat .ti { color: var(--muted); }
.flat .ti[aria-current="page"] { color: var(--fg); }
main { min-width: 0; }

/* início */
.home { max-width: none; margin: 0 auto; padding: 0 40px; container: home / inline-size; }
.hero { padding: 64px 0 36px; text-align: center; }
.hero h1 { margin: 0 0 28px; font-size: 54px; line-height: 1.04; font-weight: 700; letter-spacing: -.035em; text-wrap: balance; }
.hsearch { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 12px 0 20px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); color: var(--faint); cursor: text; box-shadow: 0 1px 2px rgba(15, 15, 15, .04); }
.hsearch:hover { border-color: var(--faint); }
.hsearch input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 16px; color: var(--fg); }
.hsearch input::placeholder { color: var(--faint); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.chips a { padding: 4px 10px; border-radius: 4px; background: var(--chip); color: var(--fg); font-size: 13.5px; line-height: 1.45; }
.chips a:hover { background: var(--surface-2); }
.sec { padding: 40px 0; }
.st { margin: 0 0 20px; font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }

.topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tp { display: flex; flex-direction: column; min-height: 200px; padding: 22px 22px 18px; border-radius: 16px; background: var(--surface); color: var(--fg); }
.tp:hover { background: var(--surface-2); }
.tp b { font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.tp > span { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.tp .obj { margin-top: auto; padding-top: 12px; align-self: flex-end; line-height: 0; margin-right: -6px; margin-bottom: -6px; }
.tp .obj img { width: 72px; height: 72px; image-rendering: pixelated; }

.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ct { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--fg); }
.ct:hover { background: var(--surface); }
.ct > svg.i { width: 22px; height: 22px; color: var(--muted); stroke-width: 1.6; }
.ct .nm { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.ct .nm svg { width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; }
.ct .nm .lw { white-space: nowrap; }
.ct small { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; color: var(--faint); }

.promo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: center; padding: 56px 0; }
.promo h2 { margin: 0 0 14px; font-size: 54px; line-height: 1.04; font-weight: 700; letter-spacing: -.035em; }
.promo p { margin: 0 0 20px; max-width: 46ch; font-size: 15px; line-height: 1.55; }
.btn { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 500; }
.btn:hover { background: var(--accent-hover); }
.scene { position: relative; height: 448px; }
.scene .valk { position: absolute; left: 39%; bottom: 0; width: 336px; height: 438px; transform: translateX(-50%); image-rendering: pixelated; }
.scene .apr { position: absolute; right: 80px; bottom: 8px; width: 76px; height: 186px; image-rendering: pixelated; }
.scene .flor { position: absolute; right: 0; bottom: 14px; width: 72px; height: 72px; image-rendering: pixelated; }

.sh { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.sh .st { margin: 0; }
.more { flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--chip); color: var(--fg); font-size: 14px; font-weight: 500; cursor: pointer; }
.more:hover { background: var(--surface-2); }
.news { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.nw { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; color: var(--fg); background: var(--bg); }
.nw:hover { border-color: var(--line-2); }
.nw .pic { display: block; height: 300px; background: var(--surface); }
.nw .pic img { display: block; width: 100%; height: 100%; padding: 22px; object-fit: contain; }
.nw .pic img.px { padding: 96px; image-rendering: pixelated; }
.nw .tx { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 20px; }
.nw b { font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.nw .tx span { font-size: 14px; line-height: 1.5; color: var(--muted); }
.nw small { font-size: 13px; color: var(--faint); }

.help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.hl { display: block; color: var(--fg); }
.hl > svg.i { width: 26px; height: 26px; stroke-width: 1.5; }
.hl b { display: block; margin-top: 10px; font-size: 15.5px; font-weight: 700; letter-spacing: -.005em; }
.hl > span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.hl:hover b { text-decoration: underline; text-underline-offset: 3px; }
.about { container: art / inline-size; border-top: 1px solid var(--line); margin-top: 24px; padding-top: 48px; }

/* artigo */
.art { max-width: none; margin: 0 auto; padding: 24px 40px 0; }
.body { container: art / inline-size; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding-bottom: 12px; margin-bottom: 30px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--fg); }
.crumbs svg.i { width: 14px; height: 14px; color: var(--faint); }
.at { margin: 0 0 12px; font-size: 40px; line-height: 1.12; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-bottom: 34px; font-size: 14px; color: var(--muted); }
.lead { margin: 0 0 24px; font-size: 17px; color: var(--muted); }
.toc { position: sticky; top: calc(var(--top) + var(--hh)); align-self: start; max-height: calc(100vh - var(--top) - var(--hh)); overflow-y: auto; padding: 44px 24px 40px 8px; }
.toc > p { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--fg); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: block; margin-left: -1px; padding: 4px 0 4px 12px; border-left: 2px solid transparent; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.toc a.h3 { padding-left: 24px; font-size: 13px; }
.toc a:hover { color: var(--fg); }
.toc a.on { color: var(--fg); border-left-color: var(--fg); font-weight: 500; }

/* conteúdo vindo da wiki (classes wk-*). Caixa com fundo, borda ou imagem ao lado da ficha flutuante usa flow-root:
   assim ela encolhe ao lado da ficha em vez de passar por baixo dela (a nota, que é position: relative, pintava por cima). */
.prose { font-size: 16px; line-height: 1.65; overflow-wrap: break-word; }
.prose::after { content: ""; display: block; clear: both; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1em; }
.prose strong { font-weight: 600; }
.prose h2 { margin: 2em 0 .5em; font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -.018em; scroll-margin-top: calc(var(--top) + var(--hh) + 20px); }
.prose h3 { margin: 1.6em 0 .4em; font-size: 18.5px; line-height: 1.35; font-weight: 650; letter-spacing: -.01em; scroll-margin-top: calc(var(--top) + var(--hh) + 20px); }
.prose a.wk-link { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); text-underline-offset: 2px; }
.prose a.wk-link:hover { text-decoration-color: currentColor; }
.prose .wk-broken { color: var(--faint); text-decoration: underline dashed; text-decoration-color: var(--line-2); cursor: help; }
.wk-list { margin: 0 0 1.1em; padding-left: 1.4em; }
.wk-list li + li { margin-top: .35em; }
.wk-list li::marker { color: var(--muted); }
.wk-note { position: relative; display: flow-root; margin: 1.4em 0; padding: 14px 16px 14px 46px; border-radius: 6px; background: var(--note); font-size: 15px; line-height: 1.55; }
.wk-note > svg.i { position: absolute; left: 15px; top: 15px; width: 20px; height: 20px; color: var(--muted); }
.wk-hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }
.tbl { margin: 1.4em 0; overflow-x: auto; }
.wk-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.wk-table th, .wk-table td { padding: 8px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.wk-table th { background: var(--surface); font-weight: 600; }
.wk-infobox { float: right; width: 264px; margin: 0 0 20px 28px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); font-size: 13.5px; line-height: 1.45; }
.wk-infobox-title { padding: 12px 14px 10px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.wk-infobox-img { display: flex; align-items: flex-end; justify-content: center; min-height: 128px; margin: 0 12px 6px; padding: 16px 8px 12px; border-radius: 8px; background: var(--surface); }
.wk-infobox-img img { max-width: 100%; height: auto; }
.wk-infobox table { width: 100%; border-collapse: collapse; }
.wk-infobox th { width: 42%; padding: 7px 8px 7px 14px; text-align: left; vertical-align: top; font-weight: 500; color: var(--muted); }
.wk-infobox td { padding: 7px 14px 7px 0; vertical-align: top; overflow-wrap: anywhere; }
.wk-infobox tr > * { border-top: 1px solid var(--line); }
@container art (max-width: 600px) { .wk-infobox { float: none; width: auto; margin: 0 0 24px; } }
.wk-infobox-img img, .wk-sprite img, .wk-icon, .wk-ent img, .wk-card img { image-rendering: pixelated; }
.wk-icon { width: 24px; height: 24px; vertical-align: middle; }
.wk-ent { font-weight: 500; white-space: normal; }
.wk-ent img { width: auto; height: 24px; vertical-align: -6px; margin-right: 5px; }
/* monstro no meio do texto: o sprite animado precisa de tamanho pra ser visto */
.wk-ent-mob img { height: 48px; max-width: 72px; object-fit: contain; vertical-align: middle; margin: 2px 6px 2px 0; }
/* mapa: cartao com o minimapa e o ponto ao passar o mouse (public/js/wiki.js) */
.wk-mapa { cursor: help; text-decoration: underline dotted 1px; text-underline-offset: 3px; border-radius: 4px; }
.wk-mapa:hover, .wk-mapa:focus-visible { color: var(--link); outline: none; }
.mapcard { position: fixed; z-index: 60; width: 264px; padding: 12px; border-radius: 12px; background: var(--bg); box-shadow: var(--pop); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.mapcard.on { opacity: 1; transform: none; }
.mapcard b { display: block; font-size: 14px; line-height: 1.35; }
.mapcard small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); font-family: var(--mono); }
.mapcard .mm { position: relative; margin-top: 10px; border-radius: 8px; background: var(--surface); overflow: hidden; }
.mapcard .mm img { display: block; width: 100%; height: auto; }
.mapcard .pt { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(229, 72, 77, .4); animation: mapcard-pulso 1.4s ease-out infinite; }
.mapcard.com-foto { width: 312px; }
.mapcard .ft { margin-top: 10px; border-radius: 8px; overflow: hidden; background: var(--surface); }
.mapcard .ft img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; }
.mapcard.com-foto .mm { width: 168px; }
.mapcard .sem { margin-top: 10px; padding: 14px 12px; border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--muted); }
@keyframes mapcard-pulso { 0% { box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(229, 72, 77, .55); } 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 12px rgba(229, 72, 77, 0); } }
@media (prefers-reduced-motion: reduce) { .mapcard .pt { animation: none; } }
.wk-cards { display: flex; flex-wrap: wrap; gap: 8px; margin: 1em 0 1.3em; }
.wk-card { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 8px 14px 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.wk-card img { flex: none; max-height: 40px; width: auto; }
.wk-card-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.wk-card-text strong { font-size: 14.5px; }
.wk-card-text small { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.wk-figure { display: flow-root; margin: 1.6em 0; }
.wk-figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; cursor: zoom-in; }
.wk-figure figcaption { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--muted); }
/* foto de NPC no passo da quest: compacta e alinhada com o texto da lista */
.wk-npcfoto { max-width: 380px; margin: .5em 0 1.1em 26px; }
.wk-npcfoto img { width: 100%; height: auto; }
.wk-npcfoto figcaption { margin-top: 6px; font-size: 13.5px; }
.wk-npcfoto figcaption b { color: var(--fg); font-weight: 600; }
.wk-npcfotos { display: flex; flex-wrap: wrap; gap: 14px 16px; margin: .5em 0 1.1em 26px; }
.wk-npcfotos .wk-npcfoto { width: 216px; margin: 0; }
.wk-sprite { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin: .4em 12px .8em 0; padding: 16px 20px 10px; border-radius: 12px; background: var(--surface); vertical-align: top; }
.wk-sprite figcaption { font-size: 13.5px; color: var(--muted); }
.wk-menu, .wk-nav { clear: both; margin: 2em 0 1.2em; }
.wk-menu-title, .wk-nav-title { margin-bottom: 10px; font-size: 15.5px; font-weight: 700; letter-spacing: -.005em; }
.wk-menu-title .wk-link, .wk-nav-title .wk-link { color: var(--fg) !important; text-decoration: none !important; }
.wk-menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.wk-menu-item { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; line-height: 1.35; }
.wk-menu-item:hover { background: var(--surface); }
.wk-menu-item .wk-link { color: var(--fg) !important; text-decoration: none !important; font-weight: 500; }
.wk-nav { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.wk-nav-groups { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
.wk-nav-groups th { width: 1%; white-space: nowrap; padding: 5px 16px 5px 0; text-align: left; vertical-align: top; font-weight: 500; color: var(--muted); }
.wk-nav-groups td { padding: 5px 0; }
.wk-nav-groups [aria-current="page"] { color: var(--fg) !important; font-weight: 650; text-decoration: none !important; }
@container art (max-width: 520px) { .wk-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wk-nav-groups th { display: block; width: auto; padding-bottom: 0; white-space: normal; } .wk-nav-groups td { display: block; } }

.after { clear: both; margin-top: 56px; display: grid; gap: 28px; }
.ah { margin: 0 0 12px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.chips.left { justify-content: flex-start; margin: 0; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pager a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--fg); }
.pager a:hover { background: var(--surface); }
.pager small { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.pager small svg.i { width: 14px; height: 14px; }
.pager b { font-size: 15px; font-weight: 600; line-height: 1.35; }
.pager .nx { grid-column: 2; align-items: flex-end; text-align: right; }

/* rodapé */
.foot { margin-top: 64px; border-top: 1px solid var(--line); padding: 44px 0 32px; container: foot / inline-size; }
.fgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.fb p { margin: 14px 0 0; max-width: 30ch; font-size: 14px; line-height: 1.5; color: var(--muted); }
.fl { margin: 0 0 10px; font-size: 12.5px; font-weight: 500; color: var(--faint); }
.fc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.fc a { font-size: 14px; color: var(--fg); }
.fc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fbot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; font-size: 13px; color: var(--faint); }

/* busca e foto ampliada */
.layer { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: center; align-items: flex-start; padding: calc(var(--top) + 10vh) var(--gr) 16px var(--gl); background: var(--scrim); }
.sbox { width: min(640px, 100%); max-height: min(580px, 78vh); display: flex; flex-direction: column; border-radius: 12px; background: var(--bg); box-shadow: var(--pop); overflow: hidden; }
.sf { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); color: var(--faint); }
.sf input { flex: 1; min-width: 0; height: 54px; border: 0; outline: 0; background: none; font-size: 16px; color: var(--fg); }
.sf input::placeholder { color: var(--faint); }
.results { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.results a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--fg); }
.results a[aria-selected="true"] { background: var(--hover); }
.results .c { display: block; font-size: 12.5px; color: var(--faint); }
.results b { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.results p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.results .rl { padding: 8px 12px 4px; font-size: 12.5px; color: var(--faint); }
.results .empty { padding: 14px 12px; color: var(--muted); }
.lightbox { flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding-top: calc(var(--top) + 16px); background: var(--lb); cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 84vh; border-radius: 8px; }
.lightbox p { margin: 0; color: #f2f2f0; font-size: 14px; text-align: center; }
.scrim { position: fixed; inset: 0; z-index: 35; background: var(--scrim); }

/* larguras */
@container home (max-width: 860px) {
  .scene { height: 320px; }
  .scene .valk { width: 224px; height: 292px; }
  .scene .apr { right: 0; }
  .scene .flor { display: none; }
}
@container home (max-width: 780px) {
  .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promo h2 { font-size: 44px; }
}
@container foot (max-width: 720px) {
  .fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fb { grid-column: 1 / -1; }
}
@container foot (max-width: 480px) {
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container home (max-width: 560px) {
  .hero { padding-top: 40px; }
  .hero h1 { font-size: 40px; margin-bottom: 22px; }
  .st { font-size: 26px; }
  .topics { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tp { min-height: 0; }
  .cats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ct { flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; }
  .ct .tx { flex: 1; min-width: 0; }
  .promo { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 40px 0; }
  .promo .scene { order: -1; height: 340px; }
  .scene .valk { width: 224px; height: 292px; }
  .scene .flor { display: block; width: 48px; height: 48px; }
  .scene .apr { right: 56px; }
  .scene .valk { left: 40%; }
  .promo h2 { font-size: 40px; }
  .news, .help { grid-template-columns: minmax(0, 1fr); }
  .help { gap: 22px; }
  .nw .pic { height: 200px; }
  .tp { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 18px 18px 18px 20px; }
  .tp b, .tp > span { grid-column: 1; }
  .tp .obj { grid-column: 2; grid-row: 1 / span 2; align-self: end; padding-top: 0; }
}
@media (max-width: 1180px) {
  .shell, .shell.has-toc { grid-template-columns: 240px minmax(0, 1fr); }
  .toc { display: none; }
  .home { padding: 0 32px; }
  .art { padding: 24px 32px 0; }
}
@media (max-width: 900px) {
  .shell, .shell.has-toc { grid-template-columns: minmax(0, 1fr); }
  .menu-btn { display: inline-flex; }
  .hin { padding-left: var(--gl); padding-right: var(--gr); }
  .side { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: min(86vw, 320px); height: auto; background: var(--bg); border-right: 1px solid var(--line);
    padding: calc(var(--top) + 16px) 12px 32px max(12px, env(safe-area-inset-left, 0px)); transform: translateX(-105%); visibility: hidden; transition: transform .2s, visibility .2s; }
  body.nav-open .side { transform: none; visibility: visible; }
  .home { padding-left: var(--gl); padding-right: var(--gr); }
  .art { padding: 18px var(--gr) 0 var(--gl); }
  .at { font-size: 32px; }
}
@media (max-width: 600px) {
  .hs { width: 36px; flex: none; justify-content: center; padding: 0; }
  .hs .lbl, .hs kbd { display: none; }
  .hsearch kbd { display: none; }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager .nx { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* gravações (gif da wiki tocado como vídeo) */
.wk-video video { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #000; }
.wk-video figcaption { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* resultados da busca (página /busca) */
.res { list-style: none; margin: 0; padding: 0; }
.res li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.res .c { display: block; font-size: 12.5px; color: var(--faint); }
.res a { font-size: 18px; font-weight: 600; color: var(--link); }
.res a:hover { text-decoration: underline; text-underline-offset: 3px; }
.res p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.bform { display: flex; gap: 10px; margin: 0 0 28px; }
.bform .hsearch { flex: 1; height: 48px; border-radius: 10px; }