/* ═══════════════════════════════════════════════════════════════════════════════════════
   📖 wiki.css — a folha da wiki pública (wiki.html) · F4 do DS (03/09/2026)
   Nasceu do <style> inline da página. Folha NOVA = baseline ZERO no lint-ds: zero hex, nenhum
   seletor `.btn`, nenhum z-index ≥10 (a escala local 0-4 é empilhamento do fundo/canvas/
   conteúdo/abas; o modal usa --z-modal), @media só em 640/1024.
   Cor: tudo em token do theme.css (via ds.css) em color-mix. Raridade: `--rar-<id>` do
   servidor, entra no .rTag/.rDot pela custom property `--rar` que o script põe no style.
   Painel/card = `.glass .card-h` do ds.css; aqui só o layout da biblioteca.
   Régua dos óculos: fonte ≥14px, alvo de toque ≥44px.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ⚠️ o reset era `*{margin:0;padding:0}` — como esta folha vive FORA de @layer, o universal
   DESLIGAVA o padding de todo componente layered do ds.css. Reset cirúrgico. */
* { box-sizing: border-box; }
h1, h2, h3, h4, p, ul, ol, figure, table { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { min-height: 100%; -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-decoration: none; }

/* 📖 BACKGROUND da biblioteca (cena Reino Bomber). O scrim é PESADO de propósito: a wiki é
   uma página de LEITURA (tabelas de números) e a arte é cheia de personagens de alto
   contraste — o desfoque + a cortina deixam a cena como atmosfera, nunca como concorrente. */
#wikiBg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
#wikiBg .img {
  position: absolute; inset: -4%; width: 108%; height: 108%; background: url('/wiki-assets/wiki-bg.webp');
  background-size: cover; background-position: center; filter: saturate(.6) blur(2px) hue-rotate(-6deg);
  animation: wkKen 40s ease-in-out infinite alternate;
}
#wikiBg .scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 93%, transparent), color-mix(in srgb, var(--bg) 90%, transparent) 30%, color-mix(in srgb, var(--bg) 97%, transparent) 75%),
    radial-gradient(70vw 46vh at 50% 108%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(46vw 40vh at 88% -6%, color-mix(in srgb, var(--am-400) 14%, transparent), transparent 60%);
}
@keyframes wkKen { 0% { transform: scale(1.03); } 100% { transform: scale(1.09) translate(-1%, -.7%); } }
#bgfx { position: fixed; inset: 0; z-index: 1; pointer-events: none; }

/* o header canônico é INJETADO pelo site-core; o conteúdo fica acima do fundo/canvas */
#wiki { position: relative; z-index: 3; max-width: 1180px; margin: 0 auto; padding: 26px 22px 40px; display: flex; flex-direction: column; }

/* header interno */
.wHead { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.online {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 13px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  font-size: var(--fs-1); font-weight: 700; color: var(--text-dim);
}
.online .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 1.8s ease-in-out infinite; }
.wTitle { font-family: var(--font-head); font-size: var(--fs-6); font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.wTitle small { display: block; font-family: var(--font-body); font-size: var(--fs-1); color: var(--text-mute); font-weight: 500; letter-spacing: 0; margin-top: 4px; }
.wSearch {
  margin-left: auto; display: flex; align-items: center; gap: 8px; border-radius: 10px; min-height: 44px; padding: 6px 14px; min-width: 230px;
  background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.wSearch:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.wSearch input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font-family: var(--font-body); font-size: var(--fs-2); font-weight: 600; }
.wSearch input::placeholder { color: var(--text-mute); font-weight: 500; }

/* abas: grudam logo abaixo do cabeçalho — com 31 abas e tabelas longas, perder a navegação
   ao rolar obrigava a voltar até o começo da página só pra trocar de assunto. */
.wTabs {
  position: sticky; top: calc(66px + var(--safe-t)); z-index: 4; display: flex; flex-wrap: wrap; gap: 5px;
  margin: 0 -22px 18px; padding: 12px 22px 13px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.wTab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border-radius: var(--r-sm); padding: 8px 13px; cursor: pointer;
  font-family: var(--font-head); font-size: var(--fs-2); font-weight: 700; color: var(--text-dim); white-space: nowrap;
  transition: color .2s, background .2s;
}
.wTab:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.wTab.on {
  color: var(--bg); background: linear-gradient(180deg, var(--accent-hover), var(--au-400) 55%, var(--au-600));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 45%, var(--bg)), 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}
.wTab .cnt { font-family: var(--font-body); font-size: var(--fs-1); opacity: .8; font-weight: 600; }

/* corpo: painel próprio (.glass), pra o texto ter chão em vez de flutuar sobre a cena */
.wBody { min-height: 0; border-radius: var(--r-lg); padding: 20px 22px 24px; }
.wSecTtl { font-family: var(--font-head); font-size: var(--fs-5); font-weight: 800; color: var(--text); letter-spacing: -.01em; margin: 8px 0 4px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wSecTtl .prog { font-family: var(--font-body); font-size: var(--fs-1); color: var(--primary); font-weight: 700; }
.wSecSub { font-size: var(--fs-2); color: var(--text-dim); font-weight: 500; margin-bottom: 16px; line-height: 1.65; max-width: 88ch; }
.wSecSub b { color: var(--text); font-weight: 700; }

/* grid de cards (.glass .card-h do ds) */
.wGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.wCard { border-radius: var(--radius); padding: 11px 8px; text-align: center; cursor: pointer; }
.wCard .ico {
  width: 62px; height: 62px; margin: 0 auto 8px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 26px; background: radial-gradient(120% 90% at 50% 8%, var(--elevated), var(--panel) 70%);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); image-rendering: pixelated;
}
.wCard .ico img { width: 56px; height: 56px; image-rendering: pixelated; filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--bg) 60%, transparent)); }
.wPh { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--primary); }
.wCard .nm { font-family: var(--font-head); font-size: var(--fs-2); font-weight: 700; color: var(--text); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wCard .tg { font-size: var(--fs-1); font-weight: 600; color: var(--text-mute); margin-top: 3px; }
.wCard.soon { opacity: .32; cursor: default; box-shadow: none; }
.wCard.soon .ico { font-size: 20px; color: var(--text-mute); background: var(--bg-2); border-style: dashed; }

/* tabelas */
.wTable { width: 100%; border-collapse: collapse; font-size: var(--fs-2); margin-bottom: 18px; display: block; overflow-x: auto; }
.wTable th {
  text-align: left; font-family: var(--font-head); font-size: var(--fs-1); font-weight: 700; letter-spacing: .04em;
  color: var(--text-mute); text-transform: uppercase; padding: 9px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); white-space: nowrap;
}
.wTable td { padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--text) 5%, transparent); font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.wTable tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.wTable td b { color: var(--text); font-weight: 700; }
/* 🔢 números em mono tabular (era Press Start a 11px — abaixo da régua dos 14px) */
.num { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--gold); }

/* 💎 a etiqueta de raridade: o script põe `--rar:var(--rar-<id>)` no style e a folha pinta */
.rTag {
  --rar: var(--rar-common);
  display: inline-flex; align-items: center; gap: 5px; border-radius: 6px; padding: 3px 9px; font-size: var(--fs-1); font-weight: 700;
  color: var(--rar); background: color-mix(in srgb, var(--rar) 13%, transparent);
}
.rDot { width: 8px; height: 8px; border-radius: 50%; background: var(--rar, var(--rar-common)); }

/* modal detalhes */
#wDetail {
  position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 16px;
}
#wDetail.on { display: flex; }
.wdCard {
  position: relative; width: min(400px, 94vw); max-height: 88vh; overflow-y: auto; padding: 26px 24px 22px;
  border-radius: var(--radius-xl); text-align: center;
  animation: wpop .3s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes wpop { 0% { transform: translateY(20px) scale(.96); opacity: 0; } 100% { transform: none; opacity: 1; } }
.wdX {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: var(--r-sm); cursor: pointer;
  color: var(--text-dim); font-size: 15px; font-weight: 700; z-index: 1;
  background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.wdX:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.wdIco {
  width: 128px; height: 128px; margin: 4px auto 14px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 8%, var(--elevated), var(--panel) 70%);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); image-rendering: pixelated;
}
.wdIco img { width: 112px; height: 112px; image-rendering: pixelated; filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--bg) 65%, transparent)); }
.wdKind { font-family: var(--font-head); font-size: var(--fs-1); font-weight: 700; letter-spacing: .1em; color: var(--primary); text-transform: uppercase; }
.wdNm { font-family: var(--font-head); font-size: 21px; font-weight: 800; color: var(--text); margin: 3px 0 4px; }
.wdId { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--text-mute); margin-bottom: 14px; }
.wdTxt { font-size: var(--fs-2); color: var(--text-dim); font-weight: 500; line-height: 1.65; }
.wdSoon { margin-top: 12px; font-size: var(--fs-1); color: var(--primary); font-weight: 700; }
.wdStats { margin-top: 14px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

/* filtros */
.wFilters { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.wFchip {
  display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-1); font-weight: 700; border-radius: var(--r-sm); padding: 5px 11px; cursor: pointer; color: var(--text-dim);
  background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); transition: all .15s;
}
.wFchip:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.wFchip.on {
  color: var(--bg); background: linear-gradient(180deg, var(--accent-hover), var(--accent) 55%, var(--au-600));
  border-color: color-mix(in srgb, var(--accent) 60%, var(--bg)); box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 45%, var(--bg));
}
.wEmpty { padding: 52px; text-align: center; color: var(--text-mute); font-weight: 600; }
.wFoot { margin-top: 28px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--accent) 14%, transparent); font-size: var(--fs-1); color: var(--text-mute); font-weight: 500; text-align: center; line-height: 1.9; }
.wFoot a { color: var(--gold); font-weight: 700; }
.wFoot .ia {
  display: inline-block; margin-bottom: 8px; font-family: var(--font-head); font-size: var(--fs-1); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; padding: 4px 12px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--gold);
}

/* nota de pendência: o que o gerador NÃO consegue extrair — a wiki diz "não sei" em vez de
   estimar; número sem fonte no servidor não vira pixel. */
.wNota {
  margin: 10px 0 18px; padding: 12px 15px; border-radius: var(--radius); font-size: var(--fs-1); line-height: 1.65;
  color: var(--text-dim); background: color-mix(in srgb, var(--am-400) 7%, transparent); border: 1px solid color-mix(in srgb, var(--am-400) 28%, transparent);
}
.wNota b { color: var(--rift); }

@media (max-width: 640px) {
  #wiki { padding: 16px 14px 32px; }
  .wTitle { font-size: 21px; }
  .wSearch { margin-left: 0; width: 100%; }
  .wTabs { margin: 0 -14px 18px; padding: 10px 14px 11px; }
}