/* ============================================================
   GIGAMU WIKI — camada da wiki sobre o DESIGN SYSTEM

   ds.css  → tokens, app shell e componentes reutilizáveis
   wiki.css (este) → o que só existe na wiki:
       · blocos de idioma
       · shell da wiki (topbar, sidebar de grupos, índice)
       · tipografia de artigo
       · componentes de conteúdo (callout, cards, passos, changelog)

   Nenhuma cor, raio, sombra ou espaçamento é definido aqui:
   tudo vem dos tokens do ds.css.
   ============================================================ */


/* ============ COMPATIBILIDADE ============
   O markup e o wiki.js foram escritos com --acc; o sistema usa
   --accent. Este apelido evita reescrever tudo. */
:root{
  --acc:var(--accent);
  --acc-2:var(--accent-2);
  --glow:color-mix(in srgb,var(--accent) 42%,transparent);

  /* o índice/menu da wiki respiram um pouco menos que o shell do DS */
  --topbar-h:60px;
  --sidebar-w:280px;
  --toc-w:240px;
}

/* a wiki é dark only, como o sistema */
html{color-scheme:dark}


/* ======================= BLOCOS DE IDIOMA =======================
   Cada página traz o conteúdo em três blocos; só o ativo aparece.
   CSS puro: os outros idiomas nem chegam a ser exibidos.
   ================================================================ */
.lang{display:none}
html[data-lang="pt"] .lang[data-lang="pt"],
html[data-lang="en"] .lang[data-lang="en"],
html[data-lang="es"] .lang[data-lang="es"]{display:block}

span.lang[data-lang]{display:none}
html[data-lang="pt"] span.lang[data-lang="pt"],
html[data-lang="en"] span.lang[data-lang="en"],
html[data-lang="es"] span.lang[data-lang="es"]{display:inline}


/* ============================ TOPBAR ============================ */
.topbar{
  position:sticky;top:0;z-index:var(--z-header);
  height:var(--topbar-h);
  display:flex;align-items:center;gap:var(--s-4);
  padding:0 var(--s-5);
  background:var(--grad-header);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.topbar .spacer{flex:1}

/* ---- seletor de wiki ---- */
.servers{display:flex;align-items:center;gap:2px;flex:none;
  padding:3px;border-radius:var(--r-md);border:1px solid var(--border);
  background:rgba(255,255,255,.03)}
.srv{
  --c:var(--text-3);
  display:inline-flex;align-items:center;gap:var(--s-2);
  height:28px;padding:0 var(--s-3);border-radius:var(--r-sm);
  font-family:var(--font-display);font-size:var(--t-xs);font-weight:500;
  color:var(--text-3);white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.srv:hover{color:var(--text-2);background:rgba(255,255,255,.04)}
.srv.active{
  color:var(--text);
  background:color-mix(in srgb,var(--c) 16%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 42%,transparent),
             0 6px 18px -10px var(--c);
}
.srv .dot{width:6px;height:6px;border-radius:var(--r-pill);flex:none;
  background:var(--c);opacity:.55;transition:opacity var(--dur-fast) var(--ease)}
.srv.active .dot{opacity:1;box-shadow:0 0 8px var(--c)}
.srv .tag{font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--c);opacity:.7}
.srv.active .tag{opacity:1}
.srv.blue{--c:#4F8CFF}
.srv.red {--c:#FF5A45}

/* ---- busca ---- */
.search{position:relative;flex:1;min-width:0;max-width:420px}
.search input{
  width:100%;height:36px;padding:0 var(--s-16) 0 var(--s-10);
  border-radius:var(--r-md);border:1px solid var(--border);
  background:rgba(255,255,255,.04);color:var(--text);
  font-family:var(--font-text);font-size:var(--t-sm);outline:none;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.search input::placeholder{color:var(--text-3)}
.search input:focus{
  border-color:var(--border-accent);background:var(--surface);
  box-shadow:0 0 0 3px var(--accent-softer);
}
.search .ico{position:absolute;left:var(--s-3);top:50%;transform:translateY(-50%);
  color:var(--text-3);pointer-events:none;display:flex}
.search .hint{
  position:absolute;right:var(--s-2);top:50%;transform:translateY(-50%);
  padding:0 6px;height:20px;display:inline-flex;align-items:center;
  border-radius:6px;border:1px solid var(--border);background:rgba(255,255,255,.05);
  font-family:var(--font-mono);font-size:11px;color:var(--text-3);pointer-events:none;
}

.search-results{
  position:absolute;top:44px;left:0;right:0;z-index:var(--z-overlay);display:none;
  max-height:62vh;overflow:auto;padding:var(--s-1);
  border-radius:var(--r-lg);border:1px solid var(--border);
  background:var(--surface);box-shadow:var(--sh-3);
}
.search-results.open{display:block}
.search-results a{
  display:flex;flex-direction:column;gap:1px;
  padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);color:var(--text);
}
.search-results a:hover,.search-results a.sel{background:rgba(255,255,255,.05)}
.search-results .r-t{font-family:var(--font-display);font-size:var(--t-sm);font-weight:500}
.search-results .r-s{font-size:var(--t-xs);color:var(--text-3)}
.search-results .empty{padding:var(--s-4);text-align:center;color:var(--text-3);font-size:var(--t-sm)}

/* ---- ações do topo ---- */
.tb-actions{display:flex;align-items:center;gap:var(--s-2);flex:none}
.tb-btn{
  height:36px;padding:0 var(--s-4);display:inline-flex;align-items:center;gap:var(--s-2);
  border-radius:var(--r-md);border:1px solid var(--border);
  background:var(--surface);color:var(--text);
  font-family:var(--font-display);font-size:var(--t-sm);font-weight:500;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.tb-btn:hover{background:var(--surface-2);border-color:var(--border-strong)}
.tb-btn.icon{width:36px;padding:0;justify-content:center}
.tb-btn.primary{
  background:var(--grad-accent);border-color:transparent;color:#fff;
  box-shadow:var(--sh-glow);
}
.tb-btn.primary:hover{filter:brightness(1.08)}

/* ---- seletor de idioma ---- */
.langs{display:flex;align-items:center;flex:none;height:36px;
  border-radius:var(--r-md);border:1px solid var(--border);overflow:hidden}
.lang-btn{
  height:100%;min-width:36px;padding:0 var(--s-3);
  border-right:1px solid var(--border);
  font-family:var(--font-display);font-size:var(--t-xs);font-weight:500;
  color:var(--text-3);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.lang-btn:last-child{border-right:none}
.lang-btn:hover{color:var(--text);background:rgba(255,255,255,.04)}
.lang-btn.active{color:var(--text);background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px var(--border-accent)}

.menu-btn{
  display:none;width:36px;height:36px;border-radius:var(--r-md);
  border:1px solid var(--border);background:transparent;color:var(--text-2);
  align-items:center;justify-content:center;
}
.menu-btn:hover{color:var(--text);background:rgba(255,255,255,.05)}


/* ============================ LAYOUT ============================ */
.layout{
  position:relative;z-index:1;
  display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--toc-w);
  max-width:var(--shell-max);margin:0 auto;
}

/* ---------------------------- SIDEBAR ---------------------------- */
.sidebar{
  position:sticky;top:var(--topbar-h);align-self:start;
  height:calc(100vh - var(--topbar-h));
  overflow-y:auto;overscroll-behavior:contain;
  padding:var(--s-6) var(--s-4) var(--s-12);
  border-right:1px solid var(--border);
  background:var(--grad-sidebar);
}
.side-label{
  font-family:var(--font-display);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);
  padding:0 var(--s-3) var(--s-3);
}

.side-group{margin-bottom:var(--s-2)}
.side-group > .g-head{
  width:100%;display:flex;align-items:center;gap:var(--s-3);
  height:38px;padding:0 var(--s-3);border-radius:var(--r-sm);
  font-family:var(--font-display);font-size:var(--t-sm);font-weight:500;
  color:var(--text-2);text-align:left;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.side-group > .g-head:hover{background:rgba(255,255,255,.04);color:var(--text)}
.side-group > .g-head .g-ico{display:flex;color:var(--text-3);flex:none;transition:color var(--dur-fast) var(--ease)}
.side-group > .g-head .g-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-group > .g-head .chev{flex:none;color:var(--text-3);transition:transform var(--dur) var(--ease)}
.side-group.open > .g-head{color:var(--text)}
.side-group.open > .g-head .chev{transform:rotate(180deg)}
.side-group.has-active > .g-head .g-ico{color:var(--accent)}

.side-group .g-items{
  display:none;padding:var(--s-1) 0 var(--s-3) var(--s-4);
  margin-left:var(--s-4);border-left:1px solid var(--border);
}
.side-group.open .g-items{display:block}

.side-link{
  display:block;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);
  font-size:var(--t-sm);color:var(--text-2);line-height:var(--lh-snug);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.side-link:hover{background:rgba(255,255,255,.04);color:var(--text)}
.side-link.active{
  background:var(--accent-soft);color:var(--text);
  box-shadow:inset 0 0 0 1px var(--border-accent);
}

/* ---- item com submenu (ex.: Invasões > cada invasão) ---- */
.side-sub__head{display:flex;align-items:center;gap:2px}
.side-sub__head .side-link{flex:1;min-width:0}
.side-sub__toggle{
  width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);color:var(--text-3);
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),transform var(--dur) var(--ease);
}
.side-sub__toggle:hover{color:var(--text);background:rgba(255,255,255,.05)}
.side-sub.open .side-sub__toggle{transform:rotate(180deg);color:var(--text-2)}

.side-sub__items{display:none;padding:var(--s-1) 0 var(--s-2) var(--s-3);
  margin-left:var(--s-3);border-left:1px solid var(--border)}
.side-sub.open .side-sub__items{display:block}
.side-link--child{font-size:var(--t-xs)}

/* ---------------------------- CONTEUDO ---------------------------- */
.content{min-width:0;padding:var(--s-10) var(--s-12) var(--s-24)}

.breadcrumb{
  display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;
  font-size:var(--t-sm);color:var(--text-3);margin-bottom:var(--s-5);
}
.breadcrumb a{color:var(--text-3)}
.breadcrumb a:hover{color:var(--text-2)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .cur{color:var(--text-2)}

/* ---- artigo ---- */
.doc{max-width:var(--content-max)}

.doc h1,.doc h2,.doc h3,.doc h4{
  font-family:var(--font-display);color:var(--text);
  line-height:var(--lh-tight);letter-spacing:-.02em;text-wrap:balance;
}
.doc h1{font-size:var(--t-3xl);font-weight:600;margin:0 0 var(--s-4)}
.doc h2{font-size:var(--t-xl);font-weight:600;margin:var(--s-16) 0 var(--s-4);
  scroll-margin-top:calc(var(--topbar-h) + var(--s-6))}
.doc h3{font-size:var(--t-lg);font-weight:600;margin:var(--s-10) 0 var(--s-3);
  scroll-margin-top:calc(var(--topbar-h) + var(--s-6))}
.doc h4{font-size:var(--t-md);font-weight:600;margin:var(--s-8) 0 var(--s-2)}

.doc .lead{
  font-size:var(--t-md);color:var(--text-2);line-height:var(--lh-base);
  margin:0 0 var(--s-10);max-width:64ch;
}

.doc h2 .anchor,.doc h3 .anchor{
  opacity:0;margin-left:var(--s-2);color:var(--accent);font-weight:400;font-size:.7em;
  transition:opacity var(--dur-fast) var(--ease);
}
.doc h2:hover .anchor,.doc h3:hover .anchor{opacity:.8}

.doc p{margin:var(--s-4) 0;color:var(--text-2)}
.doc strong{color:var(--text);font-weight:600}
.doc em{color:var(--text-2)}

.doc ul,.doc ol{margin:var(--s-4) 0;padding-left:var(--s-5);color:var(--text-2)}
.doc li{margin:var(--s-2) 0;padding-left:var(--s-1)}
.doc li::marker{color:var(--text-3)}
.doc ul ul,.doc ol ol{margin:var(--s-2) 0}

.doc hr{border:none;height:1px;background:var(--border);margin:var(--s-16) 0}

.doc blockquote{
  margin:var(--s-6) 0;padding:var(--s-4) var(--s-5);
  border-radius:var(--r-md);border:1px solid var(--border);
  border-left:2px solid var(--accent);
  background:var(--accent-softer);color:var(--text-2);
}
.doc blockquote p{margin:0;color:inherit}

/* código */
.doc code{
  font-family:var(--font-mono);font-size:.875em;padding:2px 6px;border-radius:6px;
  background:rgba(255,255,255,.06);border:1px solid var(--border);
  color:var(--code-text);white-space:nowrap;
}
.doc pre{
  margin:var(--s-6) 0;padding:var(--s-4);overflow-x:auto;
  border-radius:var(--r-lg);border:1px solid var(--border);background:var(--code-bg);
}
.doc pre code{background:none;border:none;padding:0;white-space:pre;
  font-size:var(--t-sm);line-height:1.7;color:var(--code-fg)}

/* ---- tabela ---- */
.doc .table-wrap{
  overflow-x:auto;margin:var(--s-6) 0;
  border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface);
}
.doc table{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:520px}
.doc thead th{
  text-align:left;padding:var(--s-3) var(--s-4);background:var(--bg-2);color:var(--text-3);
  font-family:var(--font-display);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
.doc tbody td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--border);
  color:var(--text-2);vertical-align:top}
.doc tbody tr:last-child td{border-bottom:none}
.doc tbody tr{transition:background var(--dur-fast) var(--ease)}
.doc tbody tr:hover{background:rgba(255,255,255,.02)}
.doc td code{white-space:nowrap}
/* tabelas de valores: dígitos de mesma largura, para as colunas alinharem */
.doc table.nums td,.doc table.nums th{font-variant-numeric:tabular-nums}

/* ---- resposta sim/não ----
   Marcadas pelo wiki.js (colorirRespostas). Numa tabela de plano, a coluna de
   sim/não é o que o leitor procura: em cinza os três valores se confundem, em
   cor a leitura é imediata. As variáveis já mudam sozinhas no tema claro. */
.doc tbody td.resp-sim{color:var(--success);font-weight:600}
.doc tbody td.resp-nao{color:var(--danger); font-weight:600}

/* ---- callouts ----
   O markup da wiki usa .callout > .c-head + conteúdo.
   Aqui ele ganha a mesma linguagem do callout do sistema. */
.callout{
  --c:var(--accent);
  /* o .callout do ds.css é flex (ícone à esquerda, corpo à direita); aqui o
     título é irmão do texto, e sem isto ele viraria uma coluna estreita,
     quebrando um rótulo de três palavras em três linhas */
  display:block;
  margin:var(--s-6) 0;padding:var(--s-4);
  border-radius:var(--r-md);border:1px solid var(--border);
  border-left:2px solid var(--c);
  background:color-mix(in srgb,var(--c) 8%,transparent);
}
.callout .c-head{
  display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2);
  font-family:var(--font-display);font-size:var(--t-sm);font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--c);
}
.callout .c-head svg{flex:none}
.callout p{margin:var(--s-2) 0 0;color:var(--text-2);font-size:var(--t-sm);line-height:var(--lh-snug)}
.callout p:first-of-type{margin-top:0}
.callout ul,.callout ol{margin:var(--s-2) 0 0;font-size:var(--t-sm)}
.callout li{margin:var(--s-1) 0}

.callout.note   {--c:var(--text-3)}
.callout.info   {--c:var(--info)}
.callout.tip    {--c:var(--success)}
.callout.caution{--c:var(--warning)}
.callout.danger {--c:var(--danger)}

/* ---- cartões ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-4);margin:var(--s-6) 0}
.card{
  display:block;padding:var(--s-5);
  border-radius:var(--r-lg);border:1px solid var(--border);
  background:var(--surface);background-image:var(--grad-surface);
  box-shadow:var(--sh-1);color:var(--text);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.card:hover{
  border-color:var(--border-accent);box-shadow:var(--sh-2);
  transform:translateY(-2px);color:var(--text);
}
.card .c-ico{
  width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;
  margin-bottom:var(--s-3);
  background:var(--accent-soft);border:1px solid var(--border-accent);color:var(--accent);
}
.card .c-t{font-family:var(--font-display);font-size:var(--t-md);font-weight:600;
  color:var(--text);margin-bottom:var(--s-2);letter-spacing:-.01em}
.card .c-d{font-size:var(--t-sm);color:var(--text-2);line-height:var(--lh-snug)}

/* ---- passo a passo ---- */
.steps{counter-reset:step;list-style:none;padding:0;margin:var(--s-6) 0}
.steps > li{
  counter-increment:step;position:relative;margin:0;
  padding:0 0 var(--s-6) var(--s-10);
  border-left:1px solid var(--border);
}
.steps > li:last-child{border-left-color:transparent;padding-bottom:0}
.steps > li::before{
  content:counter(step);position:absolute;left:-14px;top:-2px;
  width:28px;height:28px;display:grid;place-items:center;border-radius:var(--r-pill);
  font-family:var(--font-display);font-size:var(--t-xs);font-weight:600;color:var(--accent);
  background:var(--surface);border:1px solid var(--border-accent);
}
.steps > li > strong:first-child{
  display:block;font-family:var(--font-display);font-size:var(--t-base);font-weight:600;
  color:var(--text);margin-bottom:var(--s-1);letter-spacing:-.01em;
}

/* ---- etiquetas e teclas ---- */
.badge{
  display:inline-flex;align-items:center;gap:var(--s-2);height:22px;padding:0 var(--s-2);
  border-radius:var(--r-sm);border:1px solid var(--border);background:rgba(255,255,255,.04);
  font-family:var(--font-display);font-size:var(--t-xs);font-weight:500;
  color:var(--text-2);white-space:nowrap;text-transform:none;letter-spacing:0;
}
.badge.acc  {background:var(--accent-soft); border-color:var(--border-accent);  color:var(--accent)}
.badge.gm   {background:var(--warning-soft);border-color:rgba(245,181,68,.28);  color:var(--warning)}
.badge.vip  {background:var(--success-soft);border-color:rgba(61,214,140,.28);  color:var(--success)}
.badge.free {background:var(--info-soft);   border-color:rgba(79,140,255,.28);  color:var(--info)}
.badge.hard {background:var(--danger-soft); border-color:rgba(255,107,107,.28); color:var(--danger)}

kbd{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 5px;border-radius:6px;
  border:1px solid var(--border);background:rgba(255,255,255,.05);
  font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--text-3);
  box-shadow:none;letter-spacing:0;
}

/* ---- registro de atualizações ---- */
/* ---- abertura da página de classe ----
   Arte da classe ao lado das etiquetas e do perfil; no celular a
   imagem sobe para cima do texto. */
.class-hero{
  display:grid;grid-template-columns:210px minmax(0,1fr);
  gap:var(--s-6);align-items:start;margin:0 0 var(--s-8);
}
.class-hero__art{
  width:100%;height:auto;display:block;
  border-radius:var(--r-lg);border:1px solid var(--border);
  background:var(--bg-2);box-shadow:var(--sh-2);
}
.class-hero__info > .row{margin-bottom:var(--s-3)}
.class-hero__info p:first-of-type{margin-top:0}

@media (max-width:700px){
  .class-hero{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
  .class-hero__art{max-width:230px}
}

/* ============================ INVASÕES ============================
   Cada invasão tem a sua cor (--c). A linha do tempo mostra as 24h do
   dia e onde cada uma cai; os cartões detalham mapa a mapa.
   ================================================================ */

/* ---- linha do tempo do dia ---- */
.timeline{
  margin:var(--s-6) 0;padding:var(--s-5);
  border-radius:var(--r-lg);border:1px solid var(--border);
  background:var(--surface);background-image:var(--grad-surface);
}
.tl-row{
  display:grid;grid-template-columns:130px minmax(0,1fr);
  align-items:center;gap:var(--s-4);margin-bottom:var(--s-3);
}
.tl-name{
  display:flex;align-items:center;gap:var(--s-2);
  font-family:var(--font-display);font-size:var(--t-sm);font-weight:500;color:var(--text);
}
.tl-dot{width:8px;height:8px;border-radius:var(--r-pill);flex:none;background:var(--c);box-shadow:0 0 10px var(--c)}
.tl-track{
  position:relative;height:30px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.03);border:1px solid var(--border);
}
.tl-mark{
  position:absolute;top:5px;bottom:5px;width:3px;border-radius:2px;
  background:var(--c);box-shadow:0 0 8px var(--c);
  transform:translateX(-1.5px);
}
/* régua de horas */
.tl-scale{
  display:grid;grid-template-columns:130px minmax(0,1fr);gap:var(--s-4);
  margin-top:calc(var(--s-2) * -1);
}
.tl-hours{
  position:relative;height:16px;
  font-family:var(--font-mono);font-size:11px;color:var(--text-3);
}
.tl-hour{position:absolute;transform:translateX(-50%)}

/* As artes do jogo vêm com fundo PRETO sólido (alpha 255), não transparente,
   e sem isto cada monstro/item desenha um retângulo preto sobre o cartão.
   'screen' faz o preto desaparecer contra o fundo escuro sem tocar nos arquivos. */
.mob-art,.box-art,.item-ico,.inv-boss{mix-blend-mode:screen}

/* ---- cartão de invasão ---- */
.inv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--s-4);margin:var(--s-6) 0}
.inv-card{
  --c:var(--accent);
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-lg);border:1px solid var(--border);
  background:var(--surface);box-shadow:var(--sh-1);
  text-decoration:none;color:inherit;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
/* o brilho nasce atrás da arte, dá a cor ao cartão sem pintar uma faixa */
.inv-card::before{
  content:'';position:absolute;left:0;top:0;width:70%;height:210px;pointer-events:none;
  background:radial-gradient(72% 68% at 20% 30%,
             color-mix(in srgb,var(--c) 28%,transparent),transparent 72%);
}
.inv-card:hover{
  border-color:color-mix(in srgb,var(--c) 48%,transparent);
  transform:translateY(-2px);box-shadow:var(--sh-2);
}

.inv-head{
  position:relative;display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-5) var(--s-5) var(--s-4);
}
.inv-boss{
  height:104px;width:auto;max-width:92px;object-fit:contain;flex:none;
  filter:drop-shadow(0 6px 18px color-mix(in srgb,var(--c) 50%,transparent));
}
.inv-head__txt{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.inv-title{
  font-family:var(--font-display);font-size:var(--t-xl);font-weight:600;
  color:var(--text);letter-spacing:-.015em;
}
.inv-freq{font-size:var(--t-sm);color:var(--text-2)}

/* recompensa e horários dividem a largura; empilham quando não cabem */
.inv-cols{
  position:relative;display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-6);
  padding:0 var(--s-5) var(--s-4);
}
.inv-block{display:flex;flex-direction:column;gap:var(--s-2);flex:1 1 auto;min-width:0}
/* só dentro de .inv-cols: ali o flex é em linha e a base de 200px é largura.
   Solto no cartão (que é coluna) a mesma base viraria 200px de ALTURA. */
.inv-cols > .inv-block--horas{flex:2 1 200px}
/* bloco solto no cartão precisa do recuo lateral que o .inv-cols daria */
.inv-card > .inv-block{padding:0 var(--s-5) var(--s-4)}
.inv-lbl{
  font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);
}

/* horários como pílulas */
.inv-times{display:flex;flex-wrap:wrap;gap:var(--s-1);padding:var(--s-4) var(--s-5) 0}
.inv-block .inv-times{padding:0}
.inv-time{
  display:inline-flex;align-items:center;height:24px;padding:0 var(--s-2);
  border-radius:var(--r-sm);
  border:1px solid color-mix(in srgb,var(--c) 30%,transparent);
  background:color-mix(in srgb,var(--c) 10%,transparent);
  font-family:var(--font-mono);font-size:var(--t-xs);color:var(--text);
  font-variant-numeric:tabular-nums;
}

/* as recompensas: um chip por item, com a arte dentro */
.inv-prizes{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.inv-prize__item{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:3px var(--s-3) 3px 3px;border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb,var(--c) 34%,transparent);
  background:color-mix(in srgb,var(--c) 12%,transparent);
  font-size:var(--t-xs);color:var(--text);white-space:nowrap;
}
.inv-prize__item .item-ico{height:28px}
/* sem arte não há o que alinhar: o chip volta a ter recuo simétrico */
.inv-prize__item--texto{padding-left:var(--s-3)}

/* rodapé do cartão */
.inv-go{
  position:relative;margin-top:auto;display:flex;align-items:center;gap:6px;
  padding:var(--s-3) var(--s-5);border-top:1px solid var(--border);
  font-family:var(--font-display);font-size:var(--t-sm);font-weight:500;
  color:color-mix(in srgb,var(--c) 65%,var(--text));
}
.inv-go__seta{transition:transform var(--dur) var(--ease)}
.inv-card:hover .inv-go__seta{transform:translateX(4px)}

/* mapa a mapa */
.inv-body{padding:var(--s-4) var(--s-5) var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.inv-map{display:flex;flex-direction:column;gap:var(--s-1);padding-bottom:var(--s-3);border-bottom:1px solid var(--border)}
.inv-map:last-child{border-bottom:none;padding-bottom:0}
.inv-map__name{
  font-family:var(--font-display);font-size:var(--t-sm);font-weight:600;color:var(--text);
}
.inv-mobs{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.inv-mob{
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 var(--s-2);
  border-radius:var(--r-sm);border:1px solid var(--border);background:rgba(255,255,255,.03);
  font-size:var(--t-xs);color:var(--text-2);
}
.inv-mob b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}

/* ---- monstro com animação ---- */
.mob-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:var(--s-3);
}
.mob-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-1);
  padding:var(--s-3);
  border-radius:var(--r-md);border:1px solid var(--border);
  /* superfície opaca: a arte tem fundo preto e sai por 'screen',
     que precisa de um backdrop com cor para o preto desaparecer nele */
  background:var(--surface);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.mob-card:hover{border-color:color-mix(in srgb,var(--c,var(--accent)) 40%,transparent);background:var(--surface-2)}
/* altura fixa: as artes têm proporções diferentes e sem isto o nome
   e o selo de cada cartão parariam em alturas diferentes na mesma fileira */
.mob-art{
  height:150px;width:auto;max-width:100%;object-fit:contain;display:block;
  image-rendering:auto;
}
.mob-name{font-size:var(--t-xs);color:var(--text-2);line-height:1.35}
.mob-drop{margin-top:auto}
.mob-qtd{
  font-family:var(--font-mono);font-size:var(--t-xs);color:var(--text);
  font-variant-numeric:tabular-nums;
}
.mob-card--sem-arte{justify-content:center;min-height:150px}

/* poucos monstros na invasão: cabem maiores, com a arte em destaque */
.mob-grid--destaque{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));max-width:700px}
.mob-grid--destaque .mob-card{padding:var(--s-4)}
.mob-grid--destaque .mob-art{height:200px;width:auto;max-width:100%;object-fit:contain}
.mob-grid--destaque .mob-name{font-size:var(--t-sm);color:var(--text)}

/* a recompensa do monstro, dentro do próprio cartão */
.mob-drop{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  width:100%;margin-top:var(--s-1);
  padding:4px var(--s-2);border-radius:var(--r-sm);
  border:1px solid var(--border-accent);background:var(--accent-soft);
  line-height:1.3;
}
.mob-drop__lbl{
  font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);
}
.mob-drop__item{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--text)}

/* arte do item ao lado do nome da recompensa */
.item-ico{height:22px;width:auto;flex:none;display:block}
.mob-drop .item-ico{height:26px}
.drop-row .item-ico{height:30px}

/* as caixas em si, com a arte do item */
.box-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:var(--s-4);margin:var(--s-5) 0;
}
.box-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-2);
  padding:var(--s-4) var(--s-3);
  border-radius:var(--r-lg);border:1px solid var(--border);
  background:var(--surface);
}
/* altura fixa: as caixas têm proporções diferentes e sem isto
   o nome de cada cartão pararia numa altura diferente */
.box-art{
  height:96px;width:auto;max-width:100%;object-fit:contain;display:block;
  margin-bottom:var(--s-1);
}
.box-name{
  font-family:var(--font-display);font-size:var(--t-sm);font-weight:600;color:var(--text);
}
.box-who{font-size:var(--t-xs);color:var(--text-2);line-height:1.5}

/* ---- receita da Chaos Goblin Machine ---- */
.receita{
  display:flex;gap:var(--s-5);align-items:stretch;flex-wrap:wrap;
  margin:var(--s-5) 0;
}
.receita__lado{
  flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:var(--s-2);
  padding:var(--s-4) var(--s-5);
  border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface);
}
.mat-grid{display:flex;flex-direction:column;gap:var(--s-1);margin-bottom:var(--s-3)}
.mat-item{
  display:flex;align-items:center;gap:var(--s-2);
  padding:var(--s-1) 0;font-size:var(--t-sm);color:var(--text);
}
.mat-art{height:34px;width:34px;object-fit:contain;flex:none;mix-blend-mode:screen}
.mat-qtd{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--text-3)}
/* o zen não tem arte: alinha com os demais pelo espaço do ícone */
.mat-item--zen{padding-left:calc(34px + var(--s-2))}
.mat-obs{color:var(--text-3);font-size:var(--t-xs)}
.receita__saida{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-2) var(--s-3);border-radius:var(--r-md);
  border:1px solid var(--border-accent);background:var(--accent-soft);
  font-family:var(--font-display);font-weight:500;color:var(--text);
}
.receita__art{height:56px;width:auto;flex:none;mix-blend-mode:screen}
.receita__npc{
  flex:0 1 300px;min-width:0;height:auto;object-fit:cover;align-self:flex-start;
  border-radius:var(--r-lg);border:1px solid var(--border);
}

/* lista de drops das invasões sem cartão de monstro */
.drop-list{display:flex;flex-direction:column;gap:var(--s-2);margin:var(--s-4) 0}
.drop-row{
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);
}
.drop-row__mob{font-family:var(--font-display);font-size:var(--t-sm);font-weight:500;color:var(--text)}
.drop-row__lbl{
  margin-left:auto;
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);
}
.drop-row__item{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px var(--s-3);border-radius:var(--r-sm);
  border:1px solid var(--border-accent);background:var(--accent-soft);
  font-size:var(--t-xs);color:var(--text);white-space:nowrap;
}

@media (max-width:700px){
  .tl-row,.tl-scale{grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
  .tl-name{margin-bottom:2px}
  .inv-grid{grid-template-columns:minmax(0,1fr)}
  .mob-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}

/* ---- cartão de drop: mate isto, colete aquilo ----
   O monstro ocupa o topo; o item fica destacado embaixo, com a seta
   deixando explícita a relação entre os dois. */
.drop-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--s-4);margin:var(--s-6) 0;
}
.drop-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-2);
  padding:var(--s-4);
  border-radius:var(--r-lg);border:1px solid var(--border);
  background:var(--surface);background-image:var(--grad-surface);
  box-shadow:var(--sh-1);
}
.drop-label{
  font-family:var(--font-display);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);
}
.drop-art{
  width:100%;max-width:180px;height:auto;display:block;
  border-radius:var(--r-md);background:var(--bg-2);
}
.drop-name{
  font-family:var(--font-display);font-size:var(--t-sm);font-weight:600;
  color:var(--text);line-height:var(--lh-snug);
}
.drop-arrow{display:flex;color:var(--accent);margin:var(--s-1) 0}

/* o item conquistado: bloco com o acento do servidor */
.drop-item{
  display:flex;align-items:center;gap:var(--s-3);width:100%;
  padding:var(--s-3);margin-top:auto;
  border-radius:var(--r-md);
  border:1px solid var(--border-accent);
  background:var(--accent-soft);
  text-align:left;
}
.drop-item img{
  width:46px;height:46px;flex:none;
  border-radius:var(--r-sm);background:var(--bg-2);
}
.drop-item .drop-name{font-size:var(--t-sm)}

/* ---- artes de quest (NPCs, monstros e itens) ---- */
/* arte dentro de um cartão: monstro ou NPC */
.card .q-art{
  width:100%;height:auto;display:block;margin-bottom:var(--s-3);
  border-radius:var(--r-md);background:var(--bg-2);
}
/* ícone do item, ao lado do nome */
.q-icon{
  width:34px;height:34px;flex:none;vertical-align:middle;
  border-radius:var(--r-sm);background:var(--bg-2);
}
.card .c-t{display:flex;align-items:center;gap:var(--s-2)}

/* retrato solto no meio do texto (NPC, monstro grande) */
.npc-art{
  display:block;margin:var(--s-6) auto var(--s-2);
  max-width:230px;width:100%;height:auto;
  border-radius:var(--r-lg);border:1px solid var(--border);
  background:var(--bg-2);box-shadow:var(--sh-2);
}
.npc-art + .npc-caption{
  display:block;text-align:center;margin-bottom:var(--s-6);
  font-size:var(--t-xs);color:var(--text-3);
}

/* ---- vídeo ----
   Envolva o <iframe> em .video-wrap: mantém a proporção 16:9 e
   acompanha a largura da coluna em qualquer tela. */
.video-wrap{
  position:relative;aspect-ratio:16/9;margin:var(--s-6) 0;
  border-radius:var(--r-lg);border:1px solid var(--border);
  background:var(--bg-2);overflow:hidden;
}
.video-wrap iframe,.video-wrap video{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
/* espaço reservado enquanto o vídeo não existe */
.video-wrap.empty{
  display:grid;place-items:center;
  background:
    linear-gradient(135deg,var(--accent-softer),transparent),
    repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 12px,transparent 12px 24px);
}
.video-wrap.empty span{
  display:flex;align-items:center;gap:var(--s-2);
  font-family:var(--font-display);font-size:var(--t-sm);color:var(--text-3);
}

.release{position:relative;margin:0 0 var(--s-10);padding:0}
.release + .release{border-top:1px solid var(--border);padding-top:var(--s-6)}
.release h2{margin-top:0}
.release:first-of-type h2{margin-top:var(--s-6)}

.release .r-meta{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  margin:calc(var(--s-2) * -1) 0 var(--s-5)}
.release .r-date{
  font-family:var(--font-mono);font-size:var(--t-xs);color:var(--text-3);
  letter-spacing:0;text-transform:none;
}

.r-sec{
  --c:var(--accent);
  display:flex;align-items:center;gap:var(--s-2);margin:var(--s-6) 0 var(--s-2);
  font-family:var(--font-display);font-size:var(--t-sm);font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--c);
}
.r-sec::before{
  content:'';width:6px;height:6px;flex:none;border-radius:var(--r-pill);
  background:var(--c);box-shadow:0 0 8px color-mix(in srgb,var(--c) 60%,transparent);
}
.r-sec::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 26%,transparent),transparent);
}
.r-sec.add{--c:var(--success)}
.r-sec.imp{--c:var(--info)}
.r-sec.fix{--c:var(--warning)}
.r-sec.bal{--c:var(--accent-2)}
.r-sec.rem{--c:var(--danger)}
.r-sec + ul{margin-top:var(--s-2)}

/* ---- anterior / próximo ---- */
.pager{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-3);
  margin-top:var(--s-16)}
.pager a{
  display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-4);
  border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.pager a:hover{border-color:var(--border-accent);background:var(--surface-2)}
.pager .p-k{font-size:var(--t-xs);color:var(--text-3);font-family:var(--font-text);
  letter-spacing:0;text-transform:none;font-weight:400}
.pager .p-t{font-family:var(--font-display);font-size:var(--t-sm);font-weight:500;color:var(--text)}
.pager a.next{text-align:right}
.pager a.only-next{grid-column:2}

/* ---------------------------- ÍNDICE ---------------------------- */
.toc{
  position:sticky;top:var(--topbar-h);align-self:start;
  height:calc(100vh - var(--topbar-h));overflow-y:auto;overscroll-behavior:contain;
  padding:var(--s-10) var(--s-5) var(--s-12);
}
.toc .t-label{
  font-family:var(--font-display);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s-3);
}
.toc-list{display:flex;flex-direction:column;gap:var(--s-1);border-left:1px solid var(--border)}
.toc-list a{
  padding:var(--s-2) var(--s-3);margin-left:-1px;border-left:2px solid transparent;
  font-size:var(--t-sm);color:var(--text-3);line-height:var(--lh-snug);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.toc-list a:hover{color:var(--text-2)}
.toc-list a.sub{padding-left:var(--s-6);font-size:var(--t-xs)}
.toc-list a.active{color:var(--accent);border-left-color:var(--accent)}


/* ============================ MOBILE ============================ */
/* O veu escurece a PAGINA enquanto o menu esta aberto, entao ele fica ABAIXO
   do menu. Com --z-overlay (80) ele passava por cima do drawer (70): o blur
   embaçava o proprio menu e, pior, o clique nos links era capturado pelo veu
   em vez do link — o menu abria mas nao dava para escolher nada. */
.scrim{
  position:fixed;inset:0;z-index:calc(var(--z-drawer) - 1);
  background:var(--overlay-bg);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);
}
.scrim.open{opacity:1;pointer-events:auto}

@media (max-width:1200px){
  .layout{grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
  .toc{display:none}
  .content{padding:var(--s-8) var(--s-8) var(--s-20)}
}

@media (max-width:900px){
  /* O z-index:1 do .layout cria um contexto de empilhamento, e ali dentro o
     z-index:70 da sidebar so vale ENTRE irmaos do layout — para a pagina, o
     layout inteiro vale 1. Como o veu e irmao do layout (fica no <body>), ele
     passava por cima do menu: embaçava e engolia o toque nos links. Sem o
     contexto, a sidebar (fixed, z-index 70) sobe acima do veu, e o veu segue
     cobrindo o conteudo normalmente. */
  .layout{grid-template-columns:minmax(0,1fr);z-index:auto}
  .menu-btn{display:inline-flex}
  .sidebar{
    position:fixed;top:var(--topbar-h);left:0;z-index:var(--z-drawer);
    width:min(300px,86vw);background:var(--bg-2);
    border-right:1px solid var(--border-strong);box-shadow:var(--sh-3);
    transform:translateX(-101%);transition:transform var(--dur) var(--ease);
  }
  .sidebar.open{transform:none}
  .content{padding:var(--s-6) var(--s-5) var(--s-16)}
  .doc h1{font-size:var(--t-2xl)}
  .doc h2{font-size:var(--t-lg);margin-top:var(--s-12)}
  .srv .tag{display:none}
  .pager{grid-template-columns:1fr}
  .pager a.only-next{grid-column:1}
}

@media (max-width:600px){
  /* o topo precisa caber sem empurrar a página */
  .topbar{padding:0 var(--s-3);gap:var(--s-2)}
  .search .hint{display:none}
  .search input{padding-right:var(--s-3)}
  .tb-btn .label{display:none}
  .tb-btn{padding:0 var(--s-3)}
  .srv{padding:0 var(--s-2)}
  .lang-btn{min-width:30px;padding:0 var(--s-2)}
  .cards{grid-template-columns:1fr}
}

/* aparelhos estreitos (iPhone SE e afins): o topo ainda nao cabia em 320px e
   empurrava a pagina inteira para o lado. O seletor de servidor sai — ele so
   faz sentido quando as duas wikis existem — e o resto encolhe. */
@media (max-width:360px){
  .topbar{padding:0 var(--s-2);gap:var(--s-1)}
  .srv{display:none}
  .tb-actions{gap:var(--s-1)}
  .tb-btn{padding:0 var(--s-2)}
  .tb-btn.icon{width:32px}
  .brand span{font-size:var(--t-xs)}
}

/* ---- tabelas no celular ----
   Numa tela de 375px a tabela nao cabe: com min-width 520px (700px nas de 5
   colunas) o leitor tinha que arrastar de lado para ler cada linha. Aqui cada
   linha vira um CARTAO empilhado, com o nome da coluna a esquerda e o valor a
   direita — some a rolagem lateral e a leitura fica vertical, como o resto da
   pagina. O rotulo vem do data-rotulo que o wiki.js copia do <thead>.
   O <thead> some porque cada celula ja carrega o proprio titulo.             */
@media (max-width:700px){
  .doc .table-wrap{
    border:none;background:none;border-radius:0;overflow:visible;
  }
  .doc table{min-width:0;width:100%;display:block;font-size:var(--t-sm)}
  /* o cabecalho sai da tela mas continua no DOM, para leitor de tela.
     clip-path junto com o clip antigo: sem ele o <th> ainda media a largura
     natural e empurrava o scroll horizontal em telas de 320px. */
  .doc table thead{
    position:absolute;width:1px;height:1px;overflow:hidden;padding:0;border:0;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .doc table tbody{display:block}
  .doc table tbody tr{
    display:block;margin-bottom:var(--s-3);
    border:1px solid var(--border);border-radius:var(--r-lg);
    background:var(--surface);overflow:hidden;
  }
  .doc table tbody tr:last-child{margin-bottom:0}
  .doc table tbody td{
    display:flex;gap:var(--s-3);align-items:baseline;
    padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--border);
  }
  .doc table tbody tr td:last-child{border-bottom:none}
  /* O rotulo fica a esquerda com largura FIXA: em % ele roubava espaco do
     valor justamente nas celulas com texto longo, que sao as que precisam. */
  .doc table tbody td[data-rotulo]:before{
    content:attr(data-rotulo);
    flex:0 0 92px;min-width:0;
    color:var(--text-3);font-family:var(--font-display);
    font-size:var(--t-xs);font-weight:600;letter-spacing:.04em;line-height:1.35;
    text-transform:uppercase;overflow-wrap:anywhere;
  }
  /* celula sem rotulo (tabela sem cabecalho) ocupa a linha inteira */
  .doc table tbody td:not([data-rotulo]):before{content:none}
  .doc table tbody td > *{min-width:0}
  /* a primeira coluna costuma ser o nome da linha: vira o titulo do cartao */
  .doc table tbody td:first-child{
    background:var(--bg-2);color:var(--text);
  }
  .doc td code{white-space:normal;overflow-wrap:anywhere}
}

@media print{
  .topbar,.sidebar,.toc,.pager,.scrim{display:none!important}
  .layout{display:block}
  .content{padding:0}
  body{background:#fff;color:#000}
  body::before{display:none}
}