/* The Undercity · manual de jogador — estilo. Tema do jogo (P15): fundo #0B0C0E, cartões #15171B, verde #3FCF6E, âmbar #F5A623, Geist e Geist Mono.
   Tons derivados, raridade, raios, tabelas sem rolagem lateral e a página 404: notas/specs/design_rodada1.md. */

/* ===== fontes locais (GP-18, P19): Geist e Geist Mono, subconjuntos latin e latin-ext, uma variável por subconjunto (cobre todos os pesos) ===== */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fontes/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fontes/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fontes/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fontes/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ===== tokens ===== */
:root {
  --fundo: #0b0c0e; --fundo-2: #111316; --cartao: #15171b; --cartao-2: #1b1e23;
  --borda: #1e2127; --borda-forte: #2a2e36; --borda-campo: #646b76;
  --texto: #e6e8eb; --texto-forte: #f3f4f6; --texto-sub: #c9cdd2; --texto-2: #9aa0a8;
  --verde: #3fcf6e; --verde-2: #6fe096; --ambar: #f5a623;
  --verde-fundo: #182621; --verde-fundo-2: #1a2d25; --ambar-fundo: #2b251c;
  --perigo: #e5484d; --perigo-2: #ef6b70;
  --sombra-flutuante: 0 8px 24px rgba(0,0,0,.6);
  --raio: 8px; --raio-peq: 6px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--texto); background: var(--fundo); font: 16px/1.6 "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
::selection { background: var(--verde); color: var(--fundo); }
a { color: var(--verde); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--verde-2); }
h1, h2, h3, h4 { font-family: "Geist", system-ui, sans-serif; line-height: 1.15; margin: 0; }
h1 { font-weight: 700; font-size: clamp(1.9rem, 4.5vw, 2.6rem); color: var(--texto); }
h2 { font-weight: 600; font-size: 1.3rem; margin: 2.4em 0 .8em; padding: .2rem 0 .2rem .7rem; color: var(--ambar); border-left: 3px solid var(--ambar); }
h3 { font-weight: 600; font-size: 1.05rem; margin: 1.8em 0 .6em; color: var(--texto); }
p, li { color: var(--texto); }
small, .mudo { color: var(--texto-2); }
b, strong { color: var(--texto-forte); }
code, .mono { font-family: "Geist Mono", ui-monospace, Consolas, monospace; font-size: .9em; }
code { background: var(--fundo-2); padding: .1em .35em; border: 1px solid var(--borda); border-radius: var(--raio-peq); }
input, select, textarea { font-size: 1rem; }
/* foco visível único (GP-21): contorno de 2 px na paleta, nunca removido */
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
main:focus-visible { outline-offset: -2px; outline-color: var(--borda-forte); }
.pular { position: absolute; top: 0; left: 16px; z-index: 100; transform: translateY(-200%); padding: .6rem 1rem; background: var(--verde); color: var(--fundo); font-weight: 600; text-decoration: none; border-radius: 0 0 var(--raio-peq) var(--raio-peq); }
.pular:focus { transform: none; color: var(--fundo); }
main [id] { scroll-margin-top: 5rem; }
dt:target, h2:target { background: var(--verde-fundo-2); }
dt:target + dd { background: var(--verde-fundo-2); }
h2:target { border-radius: 0 var(--raio-peq) var(--raio-peq) 0; }

/* ===== topo ===== */
.topo { position: sticky; top: 0; z-index: 20; background: var(--cartao); border-bottom: 1px solid var(--borda); }
.topo .barra { max-width: 1180px; margin: 0 auto; padding: .55rem 16px; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; position: relative; }
.marca { display: flex; flex-direction: column; gap: .15rem; font-family: "Geist", system-ui, sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--texto); text-decoration: none; white-space: nowrap; line-height: 1; }
.marca span { color: var(--texto-2); font-weight: 500; font-size: .72rem; }
.menu { display: flex; align-items: center; gap: .1rem; flex-wrap: nowrap; margin-left: auto; }
.menu > a, .grupo-bt { font: inherit; font-size: .84rem; font-weight: 500; color: var(--texto-2); text-decoration: none; padding: .35rem .5rem; border: 0; background: none; border-radius: var(--raio-peq); white-space: nowrap; cursor: pointer; }
.menu > a:hover, .grupo-bt:hover, .grupo.aberto > .grupo-bt { color: var(--texto); background: var(--cartao-2); }
.menu > a.ativo, .menu > a[aria-current="page"], .grupo.ativo > .grupo-bt { color: var(--verde); background: var(--verde-fundo-2); }
/* grupos do menu (UI/UX, 21/10): computador = botão que abre uma lista; celular = grupo já aberto no painel (ver @media abaixo) */
.grupo { position: relative; }
.grupo-nome { display: none; }
.grupo-bt::after { content: ""; display: inline-block; width: .4em; height: .4em; margin: 0 0 .2em .5em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s; }
.grupo.aberto > .grupo-bt::after { transform: rotate(-135deg); margin-bottom: -.1em; }
.grupo-lista { display: none; position: absolute; top: calc(100% + 6px); left: calc(-.25rem - 1px); z-index: 30; min-width: 10rem; padding: .25rem; background: var(--cartao); border: 1px solid var(--borda-forte); border-radius: var(--raio); box-shadow: var(--sombra-flutuante); }
.grupo.aberto > .grupo-lista { display: flex; flex-direction: column; }
.grupo-lista a { display: block; padding: .45rem .5rem; font-size: .88rem; color: var(--texto); text-decoration: none; white-space: nowrap; border-radius: var(--raio-peq); }
.grupo-lista a:hover { background: var(--cartao-2); }
.grupo-lista a.ativo { color: var(--verde); background: var(--verde-fundo-2); }
.linguas { display: flex; gap: .2rem; flex: none; }
.linguas a { display: inline-flex; align-items: center; min-height: 32px; font-family: "Geist", system-ui, sans-serif; font-size: .74rem; letter-spacing: 1px; color: var(--texto-2); text-decoration: none; padding: 0 .35rem; border: 1px solid var(--borda-forte); border-radius: var(--raio-peq); }
.linguas a:hover { color: var(--texto); }
.linguas a.ativo { color: var(--verde); border-color: var(--verde); }
#abre-menu { display: none; margin-left: auto; align-items: center; gap: .45rem; background: none; border: 1px solid var(--borda-forte); border-radius: var(--raio-peq); color: var(--texto); padding: 0 .7rem; min-height: 32px; font: inherit; font-size: .84rem; }
#abre-menu span:first-child { font-size: 1rem; line-height: 1; }
@media (max-width: 800px) {
  #abre-menu { display: flex; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--cartao); border-bottom: 1px solid var(--borda); padding: .35rem 16px 1rem;
    max-height: calc(100vh - 54px); max-height: calc(100dvh - 54px); overflow-y: auto; }
  .menu.aberto { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; }
  .menu > a { display: flex; align-items: center; min-height: 44px; min-width: 0; padding: .35rem .6rem; overflow: hidden; text-overflow: ellipsis; }
  .menu > a { color: var(--texto); }
  .menu > a:first-child, .grupo { grid-column: 1 / -1; }
  .grupo { margin-top: .35rem; border-top: 1px solid var(--borda); }
  .grupo ~ a { margin-top: .35rem; border-top: 1px solid var(--borda); border-radius: 0; }   /* Calculadora e Glossário não parecem parte de Combate */
  .grupo-bt { display: none; }
  .grupo-nome { display: block; padding: .7rem .6rem .1rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
  .grupo-lista { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; position: static; padding: 0; background: none; border: 0; box-shadow: none; }
  .grupo-lista a { display: flex; align-items: center; min-height: 44px; padding: .35rem .6rem; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 560px) and (max-width: 800px) { .menu.aberto { grid-template-columns: repeat(3, 1fr); } .grupo-lista { grid-template-columns: repeat(3, 1fr); } .menu.aberto::after { content: ""; align-self: start; margin-top: .35rem; border-top: 1px solid var(--borda); } }
/* tablet em pé ou deitado (801 a 1180 px): alvo de toque de 44 px só em tela de toque; o mouse fica como está */
@media (pointer: coarse) and (min-width: 801px) { .menu > a, .grupo-bt, .grupo-lista a { padding-block: .7rem; min-height: 44px; } }
@media (max-width: 480px) { .topo .barra { gap: .25rem .5rem; } .marca { font-size: 1.1rem; } }
@media (max-width: 359px) { .bt-rotulo { display: none; } }

/* ===== herói de cada página: cena do jogo escurecida (único degradê do site: legibilidade do texto sobre a foto) ===== */
.heroi { position: relative; min-height: 170px; display: flex; align-items: flex-end; overflow: hidden; border-bottom: 1px solid var(--borda); }
.heroi img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.42); }
.heroi::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,12,14,.15) 0%, rgba(11,12,14,.6) 55%, var(--fundo) 100%); }
.heroi .dentro { position: relative; z-index: 2; max-width: 1180px; width: 100%; margin: 0 auto; padding: 1.4rem 16px 1rem; }
.heroi .chapeu { font-family: "Geist", system-ui, sans-serif; font-weight: 600; font-size: .85rem; letter-spacing: .5px; color: var(--verde); text-transform: uppercase; }
.heroi p.sub { max-width: 760px; margin: .4rem 0 0; color: var(--texto-sub); font-size: 1.05rem; }

@media (max-width: 640px) {      /* celular: topo (barra + herói + selo) até 1/3 da tela; o "chapéu" do herói só aparece no computador */
  .heroi { min-height: 0; }
  .heroi .dentro { padding: .75rem 16px .65rem; }
  .heroi h1 { font-size: 1.6rem; }
  .heroi .chapeu { display: none; }
  .heroi p.sub { margin-top: .25rem; font-size: .88rem; line-height: 1.4; }
}

main { max-width: 1180px; margin: 0 auto; padding: 1rem 16px 4rem; overflow-wrap: break-word; }
.selo { display: flex; gap: .5rem; flex-wrap: wrap; font-size: .78rem; color: var(--texto-2); margin: .4rem 0 1.2rem; }
.selo span { font-family: "Geist", system-ui, sans-serif; font-size: .82rem; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-peq); padding: .18rem .6rem; text-transform: uppercase; color: var(--texto-2); }
.selo b { color: var(--ambar); font-weight: 400; }
@media (max-width: 640px) {      /* celular: o selo vira uma linha corrida (sem chips), pra o conteúdo começar na primeira tela */
  .selo { display: block; margin: .25rem 0 .45rem; font-size: .68rem; line-height: 1.5; }
  .selo span { display: inline; padding: 0; border: 0; background: none; font-size: .68rem; text-transform: none; }
  .selo span + span::before { content: " · "; color: var(--texto-2); }
}

/* ===== índice das páginas longas (nav.indice, gerado pelo Back-end) ===== */
.indice { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: .8rem 1rem; margin: 1rem 0; }
.indice-titulo { margin: 0 0 .4rem; font-size: .8rem; font-weight: 600; color: var(--texto-2); }
.indice ul { list-style: none; margin: 0; padding: 0; column-width: 26rem; column-gap: 1.4rem; }
.indice li { break-inside: avoid; }
.indice a { display: block; min-height: 28px; padding: .2rem 0; line-height: 1.3; color: var(--texto); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* rótulo em 1 linha: só os mais longos, em tela estreita, terminam em … */
.indice a:hover { color: var(--verde); }

/* ===== blocos ===== */
.resumo { position: relative; background: var(--cartao); border: 1px solid var(--borda); border-top: 2px solid var(--verde); border-radius: var(--raio); padding: 1.1rem 1.3rem; margin: 1.2rem 0 1.8rem; }
.resumo h3, .resumo h2, .cartao h2 { margin: 0 0 .6em; padding: 0; border: 0; font-size: 1.05rem; font-weight: 600; color: var(--texto); }
.resumo h3 { margin-top: 0; }
.resumo ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.resumo li { margin: .25rem 0; }
.resumo li::marker { color: var(--verde); }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0; }
/* Início: os cartões de página são 9 (3×3); em coluna única no celular. Se o número de cartões mudar, rever: 3 colunas só fecham sem órfão quando o total é múltiplo de 3 */
.cartoes:has(> a.cartao) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .cartoes:has(> a.cartao) { grid-template-columns: 1fr; } }
/* 5 cartões (funções da Guerra): nunca um cartão sozinho na última linha. Computador 3 + 2 (grade de 6, cada cartão ocupa 2 ou 3); tablet 2 + 2 + 1 com o último na largura toda */
@media (max-width: 899px) { .cartoes:has(> :nth-child(5):last-child) > :last-child { grid-column: 1 / -1; } }
@media (min-width: 481px) and (max-width: 899px) { .cartoes:has(> :nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* sem faixa em aberto: 3 colunas do auto-fit davam 3+1+1 entre 782 e 899 px */
@media (min-width: 900px) { .cartoes:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cartoes:has(> :nth-child(5):last-child) > * { grid-column: span 2; } .cartoes:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; } }
.cartao { position: relative; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem 1.1rem; }
.cartao h3 { margin-top: 0; }
.cartao .grande { font-family: "Geist Mono", ui-monospace, Consolas, monospace; font-size: 1.9rem; font-weight: 600; color: var(--ambar); line-height: 1.1; }
a.cartao { text-decoration: none; color: inherit; display: block; transition: border-color .15s, transform .15s; overflow: hidden; }
a.cartao:hover { border-color: var(--verde); transform: translateY(-2px); }
a.cartao img { display: block; width: calc(100% + 2.2rem); margin: -1rem -1.1rem .8rem; height: 120px; object-fit: cover; filter: saturate(.85) brightness(.55); }
a.cartao .mudo { margin-bottom: 0; }
.cartao.mini { padding: .6rem .8rem; }
.cartao.mini .grande { font-size: 1.45rem; }
.cartao.mini small { font-family: "Geist", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .6px; font-size: .72rem; }
.aviso { border-left: 3px solid var(--verde); background: var(--cartao); border-radius: 0 var(--raio) var(--raio) 0; padding: .7rem 1rem; margin: 1rem 0; }
.alerta { border-left-color: var(--perigo); }
.formula { background: var(--fundo-2); border: 1px solid var(--borda); border-left: 3px solid var(--ambar); border-radius: var(--raio); padding: .8rem 1rem;
  font-family: "Geist Mono", ui-monospace, Consolas, monospace; font-size: .86rem; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--texto-sub); }
@media (max-width: 560px) { .formula { font-size: .8rem; } }
details { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: .5rem .9rem; margin: .8rem 0; }
details summary { cursor: pointer; font-family: "Geist", system-ui, sans-serif; font-weight: 600; color: var(--texto); }

/* ===== tabelas: nunca rolam de lado (P15). Acima de 900 px de largura da tabela, tabela compacta; abaixo, cada linha vira um cartão ===== */
.tabela { container-type: inline-size; margin: .8rem 0 1.3rem; }
.tabela > table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); }
th, td { padding: .5rem .65rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--borda); }
th { font-family: "Geist", system-ui, sans-serif; font-weight: 600; font-size: .8rem; color: var(--texto-2); background: var(--fundo-2); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
td.n { font-family: "Geist Mono", ui-monospace, Consolas, monospace; }
tr:last-child > td { border-bottom: 0; }
tr:first-child > :first-child { border-top-left-radius: var(--raio); }
tr:first-child > :last-child { border-top-right-radius: var(--raio); }
tr:last-child > :first-child { border-bottom-left-radius: var(--raio); }
tr:last-child > :last-child { border-bottom-right-radius: var(--raio); }
.tabela > table:has(tr > :nth-child(8)) :is(th, td) { padding: .4rem; font-size: .84rem; }
tbody tr:hover td { background: var(--cartao-2); }
tr.destaque td { background: var(--verde-fundo); }
tr.destaque td:first-child { box-shadow: inset 3px 0 0 var(--verde); }
tr.fraco td { color: var(--texto-2); }
.pos { color: var(--verde); } .neg { color: var(--perigo-2); }
.tag { display: inline-block; font-family: "Geist", system-ui, sans-serif; font-weight: 500; font-size: .78rem; line-height: 1.35; padding: .12rem .55rem; border: 1px solid var(--borda-forte); border-radius: var(--raio-peq); color: var(--texto); background: var(--cartao-2); white-space: nowrap; }
.tag.ouro { color: var(--fundo); background: var(--verde); border-color: var(--verde); font-weight: 600; }
/* raridade: as cores do jogo (exceção à P15, só aqui; valores em design_rodada1.md, seção 3.3) */
.tag.godfather { color: #ff8a8e; border-color: #8f2e31; background: #2e1d21; }
.tag.kingpin { color: var(--ambar); border-color: #8a6020; background: var(--ambar-fundo); }
.tag.syndicate { color: #ad98ff; border-color: #4b3a99; background: #211f36; }
.tag.hustler { color: var(--verde); border-color: #23683d; background: var(--verde-fundo); }
.tag.street { color: #b8bdc4; border-color: #4b4f55; background: var(--cartao-2); }
.rank { display: inline-block; min-width: 1.8rem; text-align: center; font-family: "Geist Mono", ui-monospace, Consolas, monospace; font-weight: 600; font-size: 1.05rem; color: var(--ambar); }
tr:not(.destaque) .rank { color: var(--texto-2); }
.item-nome { display: flex; align-items: center; }
.miniatura { width: 56px; height: 32px; margin-right: .5rem; object-fit: contain; background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio-peq); vertical-align: middle; }

/* tabela empilhada: 3 ou mais colunas e tabela até 900 px de largura (o rótulo vem do data-rotulo de cada td) */
@container (max-width: 900px) {
  .tabela > table:has(tr > :nth-child(3)) { display: block; border: 0; background: none; border-radius: 0; }
  .tabela > table:has(tr > :nth-child(3)) tbody { display: block; }
  .tabela > table:has(tr > :nth-child(3)) tr:has(> th) { display: none; }
  .tabela > table:has(tr > :nth-child(3)) tr:not(:has(> th)) { display: flex; flex-wrap: wrap; align-items: flex-start; position: relative; gap: .55rem .7rem;
    padding: .7rem .85rem .8rem; margin: 0 0 .6rem; background: var(--cartao);
    border: 1px solid var(--borda); border-radius: var(--raio); }
  .tabela > table:has(tr > :nth-child(3)) tr.destaque { background: var(--verde-fundo); border-left: 3px solid var(--verde); }
  .tabela > table:has(tr > :nth-child(3)) td { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 4.6rem; max-width: 100%;
    padding: 0; border: 0; border-radius: 0; background: none; text-align: left; overflow-wrap: break-word; box-shadow: none; }
  .tabela > table:has(tr > :nth-child(3)) td::before { content: attr(data-rotulo); font-size: .72rem; font-weight: 500; line-height: 1.2; color: var(--texto-2); }
  .tabela > table:has(tr > :nth-child(3)) td:not([data-rotulo])::before,
  .tabela > table:has(tr > :nth-child(3)) td[data-rotulo=""]::before { display: none; }
  .tabela > table:has(tr > :nth-child(3)) td:empty { display: none; }
  .tabela > table:has(tr > :nth-child(3)) td:not(.n) { flex-basis: 100%; }
  .tabela > table:has(tr > :nth-child(3)) td .tag { align-self: flex-start; }
  /* título do cartão: a 1ª célula (ou a 2ª, quando a 1ª é o rank) */
  .tabela > table:has(tr > :nth-child(3)) td:first-child:not(:has(> .rank)),
  .tabela > table:has(tr > :nth-child(3)) td:has(> .rank) + td { font-size: 1rem; font-weight: 600; color: var(--texto);
    padding-bottom: .5rem; border-bottom: 1px solid var(--borda); }
  .tabela > table:has(tr > :nth-child(3)) td:has(> .rank) + td { padding-right: 2.2rem; }
  .tabela > table:has(tr > :nth-child(3)) td:has(> .rank) + td::before,
  .tabela > table:has(tr > :nth-child(3)) td:has(> .item-nome)::before { display: none; }
  .tabela > table:has(tr > :nth-child(3)) td:has(> .rank) { position: absolute; top: .7rem; right: .85rem; display: block; flex: none; }
  .tabela > table:has(tr > :nth-child(3)) td:has(> .rank)::before { display: none; }
  /* matriz de doses (classe "matriz" no div.tabela) */
  .tabela.matriz > table tr:not(:has(> th)) { display: grid; grid-template-columns: repeat(4, 1fr); }
  .tabela.matriz > table td:first-child { flex-direction: column-reverse; grid-column: 1 / -1; }
}

/* ===== dica ao passar o mouse ou tocar (balão posicionado por script, nunca cortado pela tabela) ===== */
.dica { display: inline-block; cursor: help; color: var(--ambar); font-size: 1rem; line-height: 1; margin-right: .3rem; }
.dica.info { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; margin: 0 0 0 .45rem;
  border-radius: 50%; border: 1.5px solid var(--ambar); background: var(--ambar-fundo); color: var(--ambar);
  font: 700 12px/1 "Geist", system-ui, sans-serif; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(245,166,35,0); transition: background .15s, color .15s, box-shadow .15s; }
.dica.info:hover, .dica.info:focus-visible { background: var(--ambar); color: var(--fundo); box-shadow: 0 0 0 3px rgba(245,166,35,.22); }
.item-nome .dica.info { margin-left: .5rem; }
#balao { position: fixed; z-index: 60; max-width: min(380px, calc(100vw - 32px)); font: 400 .88rem/1.45 "Geist", system-ui, sans-serif; color: var(--texto);
  background: var(--cartao-2); border: 1px solid var(--ambar); border-radius: var(--raio-peq); padding: .6rem .8rem; box-shadow: var(--sombra-flutuante); display: none; }

/* ===== gráfico ===== */
figure { margin: 1rem 0 1.5rem; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: .8rem; }
figure svg { width: 100%; height: auto; display: block; }
figcaption { color: var(--texto-2); font-size: .85rem; margin-top: .4rem; }
.g-eixo { stroke: var(--borda-forte); } .g-grade { stroke: var(--borda); stroke-dasharray: 2 4; }
.g-txt { fill: var(--texto-2); font-size: 11px; font-family: "Geist", system-ui, sans-serif; }
.g-ponto { fill: var(--ambar); } .g-faixa { fill: var(--verde-fundo); }

/* ===== calculadoras e simulador ===== */
.calc { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem; margin: 1rem 0; }
.calc .campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; margin-bottom: .8rem; }
.rot { display: flex; align-items: center; gap: .35rem; }
.termo { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border: 1px solid var(--borda-forte); border-radius: 50%;
  font-size: .72rem; font-weight: 600; letter-spacing: 0; text-transform: none; text-decoration: none; color: var(--verde); }
.termo:hover { border-color: var(--verde); color: var(--verde-2); }
.calc label, .slot { font-family: "Geist", system-ui, sans-serif; font-size: .8rem; color: var(--texto-2); display: flex; flex-direction: column; gap: .25rem; text-transform: uppercase; letter-spacing: .6px; }
input, select { font-family: "Geist", system-ui, sans-serif; font-weight: 500; background: var(--fundo); color: var(--texto); border: 1px solid var(--borda-campo); border-radius: var(--raio-peq); padding: .42rem .5rem; text-transform: none; letter-spacing: 0; }
option { font-family: "Geist", system-ui, sans-serif; }
input[type=range] { accent-color: var(--verde); }
.calc input, .calc select { min-width: 0; max-width: 100%; }
button { font-family: "Geist", system-ui, sans-serif; font-weight: 500; background: var(--cartao-2); color: var(--texto); border: 1px solid var(--borda-forte); border-radius: var(--raio-peq); padding: .45rem .8rem; cursor: pointer; }
button:hover { border-color: var(--verde); color: var(--texto-forte); }
button.ativo, button[aria-selected="true"] { background: var(--verde-fundo-2); border-color: var(--verde); color: var(--verde); }
[role="tabpanel"][hidden] { display: none; }
.botoes { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }
/* aviso de faixa ao lado do campo numérico (só tem texto quando o valor foi corrigido) */
small.limite { font-size: .75rem; font-weight: 500; line-height: 1.3; color: var(--ambar); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
small.limite:empty { display: none; }
/* "copiar link" que falhou: mensagem e campo com o endereço, já selecionado */
.link-falhou { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: .5rem 0; font-size: .85rem; color: var(--texto-2); overflow-wrap: anywhere; }
.link-falhou:empty { display: none; }
.link-falhou input { flex: 1 1 14rem; min-width: 0; max-width: 100%; font-family: "Geist Mono", ui-monospace, Consolas, monospace; font-size: 1rem; }
.sim-form h2:first-child { margin-top: .4rem; }
.equip { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.slot { position: relative; padding: 0; cursor: default; }
.slot img { width: 100%; height: 70px; object-fit: contain; background: var(--cartao); border-radius: var(--raio-peq); visibility: hidden; }
.slot .slot-nome { position: relative; display: flex; align-items: center; min-height: 3.2rem; padding: .42rem 1.6rem .42rem .5rem; font-size: .85rem; line-height: 1.3; color: var(--texto);
  background: var(--fundo); border: 1px solid var(--borda-campo); border-radius: var(--raio-peq); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.slot .slot-nome::after { content: "▾"; position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); color: var(--texto-2); }
.slot .slot-nome.vazio { color: var(--texto-2); }
/* o <select> (que corta o nome) fica por cima do slot inteiro, invisível: tocar ou clicar no slot abre a lista; quem lê o nome é o campo acima */
.slot select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; }
.slot:has(select:focus-visible) .slot-nome { outline: 2px solid var(--ambar); outline-offset: 2px; }
.slot-ficha { z-index: 2; position: absolute; top: .35rem; right: .35rem; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--borda-forte); background: var(--cartao-2); color: var(--texto-2);
  font: 600 .85rem/1 "Geist", system-ui, sans-serif; text-transform: none; letter-spacing: 0; }
.slot-ficha:hover { border-color: var(--verde); color: var(--texto-forte); }
/* computador (mouse, janela larga): o card abre ao passar o mouse; o botão só aparece quando o teclado chega nele */
@media (hover: hover) and (pointer: fine) and (min-width: 641px) { .slot-ficha[aria-expanded="false"]:not(:focus) { opacity: 0; pointer-events: none; } }
@media (max-width: 480px) {
  .slot { display: grid; grid-template-columns: 56px 1fr; column-gap: .6rem; row-gap: .25rem; align-items: start; }
  .slot img { grid-column: 1; grid-row: 1 / span 2; width: 56px; height: 56px; }
  .slot > :not(img):not(select) { grid-column: 2; min-width: 0; }
  .slot { padding-bottom: .6rem; border-bottom: 1px solid var(--borda); }
  .slot > span { display: flex; align-items: center; min-height: 32px; padding-right: 2.2rem; }
  .slot-ficha { top: 0; right: 0; }
  .calc .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc .campos .larga { grid-column: 1 / -1; }
}
.chks { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; }
.calc label.chk, .chk { font-family: "Geist", system-ui, sans-serif; font-size: .9rem; color: var(--texto); display: flex; flex-direction: row; align-items: center; gap: .5rem; text-transform: none;
  letter-spacing: 0; padding: .35rem 0; min-height: 32px; cursor: pointer; }
.chk input { margin: 0; width: 16px; height: 16px; accent-color: var(--verde); flex: none; }
.chk:has(input:checked) { color: var(--verde); }
.carregar { margin-bottom: .6rem; }
.carregar label { display: flex; flex-direction: column; gap: .25rem; }
/* atributos (esquerda, estreita) + equipamento (direita, larga); indicadores numa faixa; tabelas embaixo */
.sim-topo { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 1.6rem; align-items: start; }
.sim-topo > * { min-width: 0; }
.sim-topo h2:first-child { margin-top: .4rem; }
@media (max-width: 980px) { .sim-topo { grid-template-columns: 1fr; } }
.sim-equipamento .equip { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
/* resultado: 1 a 3 números grandes (âmbar) + o resto numa linha, dentro de uma caixa só. A dica (i) cobre o item inteiro: no computador some o botão, fica o pontilhado e o cursor de ajuda */
.sim-res { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem 1.2rem; margin: .6rem 0 1rem; }
.sr-heroi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.sr-det { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem 1.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borda); }
.sr { position: relative; min-width: 0; }
.sr small { display: block; font: 500 .72rem/1.3 "Geist", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-2); white-space: nowrap; }
.sr .num { display: block; font: 600 1.25rem/1.25 "Geist Mono", ui-monospace, Consolas, monospace; color: var(--texto-forte); }
.sr-heroi .num { font-size: 2.2rem; line-height: 1.1; color: var(--ambar); }
.sr .num.pos { color: var(--verde); } .sr .num.neg { color: var(--perigo-2); }
#simulador .sr .dica.info { position: absolute; inset: -.3rem -.5rem; display: block; width: auto; height: auto; margin: 0; border: 0; border-radius: var(--raio-peq); background: none; box-shadow: none; color: transparent; font-size: 0; }
.sr.tem-dica small { text-decoration: underline dotted var(--texto-2); text-underline-offset: 4px; }
@media (max-width: 560px) {
  .sr-heroi, .sr-det { grid-template-columns: 1fr; gap: .5rem; }
  .sr { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
  .sr-heroi .num { font-size: 1.7rem; }
}
/* resumo fixo no pé da tela enquanto se edita a build (até 980 px; acima fica escondido) */
#sim-resumo, #op-resumo, .resumo-fixo { display: none; }
@media (max-width: 980px) {
  #sim-resumo, #op-resumo, .resumo-fixo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; position: sticky; bottom: 0; z-index: 15;
    padding: .5rem .75rem; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio) var(--raio) 0 0; }
  .resumo-fixo > * { display: flex; flex-direction: column; min-width: 0; }
  .resumo-fixo small { font-size: .72rem; line-height: 1.2; color: var(--texto-2); }
}
@media (max-width: 340px) { .resumo-fixo small { font-size: .62rem; }
  .resumo-fixo b { font-family: "Geist Mono", ui-monospace, Consolas, monospace; font-size: 1.25rem; font-weight: 600; color: var(--ambar); }
}
/* sliders da seção de treinamento */
.puxa-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: .8rem 1.2rem; margin-bottom: .8rem; }
.puxa-sliders label b { font-family: "Geist Mono", ui-monospace, Consolas, monospace; font-size: 1.5rem; color: var(--ambar); letter-spacing: 0; }
.puxa-sliders input[type=range] { width: 100%; margin: 0; }
/* card do item, igual ao do jogo */
.card-item { position: fixed; z-index: 70; width: 270px; background: var(--cartao); border: 1px solid var(--borda-forte); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-flutuante); pointer-events: none; }
.card-item img { width: 100%; height: 130px; object-fit: contain; background: var(--fundo); display: block; }
.card-item .card-corpo { padding: .6rem .75rem .7rem; font: 400 .86rem/1.4 "Geist", system-ui, sans-serif; color: var(--texto); }
.card-item h4 { margin: .35rem 0 .3rem; font-family: "Geist", system-ui, sans-serif; font-size: 1.05rem; color: var(--texto-forte); }
.card-item ul { list-style: none; margin: 0 0 .4rem; padding: 0; }
.card-item li { margin: .1rem 0; }
.card-item .card-arma { margin: .3rem 0; color: var(--texto-2); }
.card-item.aberta { pointer-events: auto; }
.ficha-fechar { display: none; position: absolute; top: .5rem; right: .5rem; z-index: 1; min-width: 44px; min-height: 44px; }
@media (max-width: 640px) {      /* folha no pé da tela: o left e o top que o script grava ficam sem efeito */
  .card-item { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-height: 70vh; max-height: 70dvh; overflow-y: auto; z-index: 80;
    border-radius: var(--raio) var(--raio) 0 0; pointer-events: auto; }
  .ficha-fechar { display: block; }
}

/* ===== rodapé e glossário ===== */
footer { max-width: 1180px; margin: 0 auto; padding: 2rem 16px 3rem; color: var(--texto-2); font-size: .85rem; border-top: 1px solid var(--borda); }
footer .marca { font-size: 1.3rem; }
.glossario { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 0; margin: .4rem 0 1.4rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--cartao); }
.glossario dt, .glossario dd { margin: 0; padding: .55rem .8rem; border-top: 1px solid var(--borda); }
.glossario dt:first-of-type, .glossario dt:first-of-type + dd { border-top: 0; }
.glossario dt { font-family: "Geist", system-ui, sans-serif; color: var(--ambar); letter-spacing: .3px; }
.glossario dd { color: var(--texto); }
@media (max-width: 640px) { .glossario { grid-template-columns: 1fr; } .glossario dd { border-top: 0; padding-top: 0; } }

/* ===== página 404 ===== */
.erro-404 { text-align: center; padding: 2.5rem 0 3rem; }
.erro-404 .codigo { margin: 0; font: 700 clamp(4.5rem, 22vw, 9rem)/1 "Geist Mono", ui-monospace, Consolas, monospace; letter-spacing: -.02em; color: var(--ambar); }
.erro-404 .codigo::after { content: ""; display: block; width: 4rem; height: 3px; margin: 1rem auto 1.6rem; background: var(--verde); }
.botao { display: inline-block; padding: .6rem 1.1rem; border: 1px solid var(--verde); background: var(--verde-fundo-2); color: var(--verde); border-radius: var(--raio-peq); font-weight: 600; text-decoration: none; }
.botao:hover { background: var(--verde); color: var(--fundo); }

/* ===== Calculadora (piloto visual, CEO 20/10): só #simulador. Um acento por contexto, sem caixa dentro de caixa, rótulo em 1 linha ===== */
#simulador h2 { color: var(--texto-forte); border-left-color: var(--borda-forte); }
#simulador .sim-topo h3:first-child { margin-top: .4rem; }
#simulador .calc { background: none; border: 0; padding: 0; margin: .6rem 0; }
#simulador .calc .campos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#simulador .calc .campos > label { grid-column: span 2; }
#simulador .calc .campos > label.larga { grid-column: span 3; }
#simulador .calc .campos > label.cheia { grid-column: 1 / -1; }
#simulador .rot { white-space: nowrap; }
#simulador small.limite { color: var(--perigo-2); }   /* correção de valor é aviso, não resultado: âmbar fica só para o número principal */
/* "?" do Glossário: o próprio rótulo é o link (pontilhado), sem botão de 24 px */
#simulador a.termo { width: auto; height: auto; border: 0; border-radius: 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-decoration: underline dotted var(--borda-campo); text-underline-offset: 4px; }
#simulador a.termo:hover { color: var(--verde); text-decoration-color: var(--verde); }
/* detalhe da tabela: sem a caixa do <details>; a tabela é a única caixa */
#simulador details { background: none; border: 0; padding: 0; margin: .4rem 0 1rem; }
#simulador summary { color: var(--verde); font-weight: 500; }
#simulador details > p { margin: .4rem 0 0; font-size: .8rem; text-align: right; }
@container (max-width: 900px) {
  #simulador .tabela td:first-child::before, #simulador .tabela td:first-child br { display: none; }   /* o nome da linha já é o título do cartão */
  #simulador .tabela td::before { font-family: "Geist", system-ui, sans-serif; }
  #simulador .sr-det-tab td:not(:first-child) { flex: 1 1 100%; flex-direction: row; justify-content: space-between; align-items: baseline; }
}
@media (max-width: 480px) { #simulador .sim-equipamento .equip { grid-template-columns: 1fr; } }   /* um slot por linha: o rótulo (CAPACETE, MOCHILA 1) e o nome do item cabem em 1 linha */

/* ===== aviso de versão nova (spec_cache, seção 3): selo discreto no canto, não empurra a página; o botão é a única ação (verde) ===== */
.aviso-versao { position: fixed; z-index: 50; right: 16px; bottom: 16px; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .6rem; max-width: calc(100vw - 32px);
  padding: .4rem .5rem .4rem .8rem; font: 500 .85rem/1.3 "Geist", system-ui, sans-serif; color: var(--texto-sub); background: var(--cartao-2); border: 1px solid var(--borda-forte); border-radius: var(--raio); box-shadow: var(--sombra-flutuante); }
.aviso-versao[hidden] { display: none; }
.aviso-versao button { min-height: 32px; padding: .2rem .8rem; background: var(--verde-fundo-2); border-color: var(--verde); color: var(--verde); font-weight: 600; }
.aviso-versao button:hover { background: var(--verde); color: var(--fundo); }
/* celular e tablet: faixa na largura toda no pé da tela. A página ganha espaço no fim (o rodapé não fica coberto) e o resumo fixo da Calculadora sobe para ficar acima da faixa */
@media (max-width: 980px) {
  .aviso-versao { left: 0; right: 0; bottom: 0; max-width: none; justify-content: center; min-height: 3.5rem; padding: .4rem 16px calc(.4rem + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 0; box-shadow: none; }
  body:has(.aviso-versao:not([hidden])) { padding-bottom: 4rem; }
  body:has(.aviso-versao:not([hidden])) :is(#sim-resumo, #op-resumo, .resumo-fixo) { bottom: 3.5rem; }
}
@media (pointer: coarse) { .aviso-versao button { min-height: 44px; padding: .2rem 1rem; } }


/* ===== Início como hub (UI/UX, 21/10): pergunta, atalhos que caem na resposta, páginas por grupo ===== */
h2.hub-pergunta { margin: .9rem 0 .5rem; padding: 0; border: 0; font-size: 1.25rem; color: var(--texto-forte); }
/* Designer 21/10: atalhos e páginas são listas com fio, sem caixa (antes: 8 caixas); o texto de todas as linhas começa no mesmo recuo do título */
.atalhos { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--borda); }
@media (min-width: 900px) { .atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .atalhos li:nth-child(odd) a { padding-right: 1.5rem; } .atalhos li:nth-child(even) a { padding-left: 1.5rem; } }
.atalhos li { border-bottom: 1px solid var(--borda); }
.atalhos a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 48px; padding: .5rem 0; color: var(--texto-forte); font-weight: 500; text-decoration: none; }
.atalhos a:hover span { color: var(--verde); }
.atalhos span { min-width: 0; }   /* a pergunta quebra em vez de cortar com "…" (320 px) */
.linhas b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atalhos small { flex: none; font-size: .78rem; color: var(--texto-2); }
.hub-grupo h3 { margin: 1.5rem 0 .35rem; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
ul.linhas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borda); }
ul.linhas + ul.linhas { border-top: 0; }
.hub-grupo + ul.linhas { margin-top: 1.5rem; }
.linhas li { border-bottom: 1px solid var(--borda); }
.linhas a { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: .7rem 0; color: var(--texto); text-decoration: none; }
.linhas a:hover b { color: var(--verde); }
.linhas span { font-size: .92rem; line-height: 1.4; color: var(--texto-2); }
.hub-novidades { margin: 2rem 0 1rem; color: var(--texto-2); font-size: .92rem; }
.hub-novidades summary { cursor: pointer; }
@media (max-width: 640px) {
  .atalhos small { display: none; }
  .atalhos a::after, .linhas a::after { content: "›"; flex: none; color: var(--texto-2); font-size: 1.2rem; }
  .linhas a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: .4rem 0; }
  .linhas span { display: none; }
}