/* Moboria: páginas "do mundo" da wiki (inimigos, biomas, comandos, glossário). Dono: Wiki-B.
   Só regras desta página, só tokens (nada de #hex nem px de espaço). Carregado depois de components.css e wiki.css. */

.world { display: flex; flex-direction: column; gap: var(--space-7); }
.world-head { display: flex; flex-direction: column; gap: var(--space-3); }
.world-head .lede { max-width: var(--measure); }

.world-section { display: flex; flex-direction: column; gap: var(--space-4); }
.world-section > p { max-width: var(--measure); }
.world-section > h3 { margin-top: var(--space-3); }

.world-tagline { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: var(--lh-snug); text-wrap: balance; }
.world-meta { display: flex; flex-direction: column; gap: var(--space-1); }
.world-cards { --grid-min: 16rem; align-items: stretch; }
.world-cards--wide { --grid-min: 22rem; }
.world-facts { --grid-min: 13rem; }
.world-facts .stat__label { max-width: 26ch; }
/* números que decidem uma jogada (70%, 3,5x, 50%): fonte do corpo, onde 5, 8 e 3 não se confundem */
.world-facts .stat__value, .world-cards .stat__value { font-family: var(--font-body); font-weight: 700; }

/* ---------- tabelas de números (inimigos, formatos): a 1a coluna fica à vista ao rolar de lado ---------- */
.world-table td { min-width: 0; }
/* dígitos da tabela na fonte do corpo: a fonte pixel confunde 5, 8 e 3 em tamanho pequeno */
.world-table .num { font-family: var(--font-body); font-weight: 400; }
.world-table .right { text-align: right; }
.world-formats { max-width: 30rem; }
.world-races { table-layout: fixed; min-width: 42rem; }
.world-races th, .world-races td { padding-inline: var(--space-2); }
.world-races thead th { white-space: normal; vertical-align: bottom; }
.world-races thead th:first-child { width: 7.5rem; }
.world-races thead th:nth-child(2) { width: 5rem; }
.world-table tbody th { text-align: left; background: var(--base); white-space: nowrap; }
.world-table tbody tr:nth-child(even) th { background: var(--panel); }
/* sticky mede a partir da caixa de conteúdo: sem o padding de 4px do .table-wrap, a coluna fixa cobre a borda esquerda por inteiro */
.world-wrap { padding: 0; margin: 0; }
.world-table th:first-child { position: sticky; left: 0; z-index: var(--z-raised); }
.world-table thead th:first-child { background: var(--raised); z-index: calc(var(--z-raised) + 1); }
.world-race { display: block; font-weight: 700; }
.world-race__tags { display: block; margin-top: var(--space-1); }

/* ---------- biomas ---------- */
.biome { padding: 0; gap: 0; overflow: hidden; }
.biome__body { display: flex; flex-direction: column; flex: 1; gap: var(--space-3); padding: var(--space-5); }
.biome__boss { margin-top: auto; padding: var(--space-3) var(--space-4); background: var(--raised); border-left: 4px solid var(--line-strong); }
@media (max-width: 39.99rem) { .biome__body { padding: var(--space-4); } }
.biome--later { background: transparent; border-style: dashed; color: var(--muted); }
.biome--later .card__title { color: var(--text); }
.biome--later .world-tagline { color: var(--text); }
.biome--later .biome__boss { background: var(--panel); }

/* ---------- comandos ---------- */
.world-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--measure); }
.world-steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--space-3); align-items: start; }
.world-steps li > p { padding-top: var(--space-1); }
.world-steps li::before {
  content: counter(step); display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: var(--border) solid var(--line-strong); border-radius: var(--radius); background: var(--panel);
  font-family: var(--font-px); font-size: var(--text-lg); line-height: 1;
}
.world-steps .cmd { white-space: normal; }

.cmd-table { width: 100%; table-layout: fixed; }
.cmd-table thead th:first-child { width: 13rem; }
.cmd-table thead th:last-child { width: 9rem; }
.cmd-table td { min-width: 0; }
.cmd-table tbody th { text-align: left; font-weight: 400; white-space: nowrap; }
.cmd-table tbody th .tag { margin-left: var(--space-1); }
.cmd-table .wrap { min-width: 0; }
.cmd-table td p + p { margin-top: var(--space-1); }
.cmd-table__sum { font-weight: 700; }
.cmd-table thead th:last-child, .cmd-table td:last-child { white-space: nowrap; }

/* abaixo de 40rem a tabela vira uma lista de cartões (as funções ARIA ficam no HTML para manter a semântica de tabela) */
@media (max-width: 39.99rem) {
  .cmd-table, .cmd-table tbody, .cmd-table tr, .cmd-table th, .cmd-table td { display: block; }
  .cmd-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cmd-table tbody tr, .cmd-table tbody tr:nth-child(even) { padding: var(--space-4) 0; background: transparent; border-top: var(--border) solid var(--line); }
  .cmd-table tbody tr:first-child { border-top: 0; }
  .cmd-table th, .cmd-table td { padding: 0; }
  .cmd-table tbody th { white-space: normal; padding-bottom: var(--space-2); }
  .cmd-table td:last-child { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--muted); }
  .cmd-table td[data-label]::before { content: attr(data-label) ": "; }
}

/* ---------- glossário ---------- */
.glossary__jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.glossary__jump a {
  display: grid; place-items: center; min-width: 44px; min-height: 44px;
  border: var(--border) solid var(--line-strong); border-radius: var(--radius); background: var(--panel);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); text-decoration: none;
}
.glossary__jump a:hover { border-color: var(--gold-press); background: var(--raised); }
.glossary { display: flex; flex-direction: column; gap: var(--space-6); }
.glossary__group { display: flex; flex-direction: column; gap: var(--space-5); max-width: var(--measure); }
.glossary__letter { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); color: var(--muted); padding-bottom: var(--space-2); border-bottom: var(--border) solid var(--line); }
.glossary__term { display: flex; flex-direction: column; gap: var(--space-2); }
.glossary__term h3 { font-size: var(--text-xl); }
.glossary__term h3:target { padding-left: var(--space-3); border-left: 4px solid var(--gold-press); }