/* O Jeito dos Cria — tema: noite de quebrada. Concreto, luz de poste, ferrugem. */
:root {
  --fundo: #0a0908;
  --fundo-2: #11100d;
  --cartao: #161411;
  --cartao-2: #1c1a16;
  --borda: #2c2822;
  --borda-forte: #3d372e;
  --texto: #ddd4c2;          /* osso */
  --texto-2: #91887a;        /* poeira */
  --ambar: #d4912f;          /* luz de poste de sódio */
  --ambar-2: #efb760;
  --ferrugem: #b04a2a;
  --ferrugem-2: #d0643f;
  --musgo: #7f8c46;
  --musgo-2: #a3b05e;
  --aco: #5f7584;
  --codigo: #0e0d0b;
  --sombra: 0 2px 0 rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.35);
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.55 0 0 0 0 0.45 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--texto);
  background: radial-gradient(ellipse 120% 600px at 50% 0, #2a2016 0%, transparent 70%), var(--fundo);
  font: 16px/1.62 "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; background: var(--grao); opacity: .55; }
::selection { background: var(--ambar); color: #000; }
a { color: var(--ambar-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ambar); }
h1, h2, h3 { line-height: 1.15; margin: 0; }
h1 { font-family: "Pirata One", "UnifrakturCook", Georgia, serif; font-weight: 400; font-size: clamp(2.3rem, 6vw, 3.6rem); letter-spacing: .5px; color: var(--texto); text-shadow: 0 3px 0 #000; }
h2 { font-family: "Oswald", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; font-size: 1.35rem;
  margin: 2.4em 0 .8em; padding: .35rem 0 .35rem .8rem; border-left: 4px solid var(--ambar); background: linear-gradient(90deg, rgba(212,145,47,.12), transparent 70%); }
h3 { font-family: "Oswald", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; font-size: 1.05rem; margin: 1.8em 0 .6em; color: var(--ambar-2); }
p, li { color: var(--texto); }
small, .mudo { color: #a1988a; }
b, strong { color: #f0e8d6; }
code, .mono { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: .9em; }
code { background: var(--codigo); padding: .1em .35em; border: 1px solid var(--borda); border-radius: 3px; }

/* topo */
.topo { position: sticky; top: 0; z-index: 20; background: #080706; border-bottom: 1px solid var(--borda); }
.topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: repeating-linear-gradient(-45deg, var(--ambar) 0 10px, #1a1712 10px 20px); opacity: .55; }
.topo .barra { max-width: 1180px; margin: 0 auto; padding: .55rem 16px; display: flex; align-items: center; gap: 1rem; position: relative; }
.marca { font-family: "Pirata One", Georgia, serif; font-size: 1.7rem; color: var(--texto); text-decoration: none; white-space: nowrap; line-height: 1; text-shadow: 0 2px 0 #000; }
.marca span { color: var(--ambar); }
.menu { display: flex; gap: 0; flex-wrap: nowrap; margin-left: auto; }
.menu a { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 1px; font-size: .86rem; color: var(--texto-2);
  text-decoration: none; padding: .35rem .45rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.menu a:hover { color: var(--texto); border-bottom-color: var(--borda-forte); }
.menu a.ativo { color: var(--ambar-2); border-bottom-color: var(--ambar); }
.linguas { display: flex; gap: .2rem; flex: none; }
.linguas a { font-family: "Oswald", sans-serif; font-size: .74rem; letter-spacing: 1px; color: var(--texto-2); text-decoration: none; padding: .1rem .35rem; border: 1px solid var(--borda-forte); }
.linguas a:hover { color: var(--texto); }
.linguas a.ativo { color: var(--ambar-2); border-color: var(--ambar); }
#abre-menu { display: none; margin-left: auto; background: none; border: 1px solid var(--borda-forte); color: var(--texto); padding: .3rem .7rem; font-size: 1rem; }
@media (max-width: 1160px) {
  #abre-menu { display: block; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #0b0a09; border-bottom: 1px solid var(--borda); flex-direction: column; padding: .5rem 16px 1rem; }
  .menu.aberto { display: flex; }
}

/* herói de cada página: cena do jogo, lavada e granulada */
.heroi { position: relative; min-height: 270px; 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(.55) contrast(1.1) brightness(.55) sepia(.25); }
.heroi::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,9,8,.2) 0%, rgba(10,9,8,.55) 55%, var(--fundo) 100%),
  radial-gradient(ellipse at 30% 40%, transparent 30%, rgba(0,0,0,.6) 100%); z-index: 1; }
.heroi .dentro { position: relative; z-index: 2; max-width: 1180px; width: 100%; margin: 0 auto; padding: 2.2rem 16px 1.4rem; }
.heroi .chapeu { font-family: "Black Ops One", "Oswald", sans-serif; font-size: .95rem; letter-spacing: 2px; color: var(--ambar); text-transform: uppercase; }
.heroi p.sub { max-width: 760px; margin: .4rem 0 0; color: #cfc6b4; font-size: 1.05rem; }
.frase { font-family: "Permanent Marker", cursive; color: var(--ambar-2); font-size: 1.1rem; margin-top: .9rem; transform: rotate(-1.2deg); display: inline-block; text-shadow: 0 2px 0 #000; }
.frase small { display: block; font-family: "Barlow", sans-serif; font-size: .75rem; color: var(--texto-2); transform: none; }

main { max-width: 1180px; margin: 0 auto; padding: 1rem 16px 4rem; overflow-x: clip; }
.selo { display: flex; gap: .5rem; flex-wrap: wrap; font-size: .78rem; color: var(--texto-2); margin: .4rem 0 1.2rem; }
.selo span { font-family: "Oswald", sans-serif; font-size: .82rem; letter-spacing: .6px; background: #0e0d0b; border: 1px dashed var(--borda-forte); padding: .18rem .6rem; text-transform: uppercase; color: var(--texto-2); }
.selo b { color: var(--ambar-2); font-weight: 400; }

/* blocos */
.resumo { position: relative; background: linear-gradient(180deg, #1d1912, var(--cartao)); border: 1px solid var(--borda-forte);
  border-top: 3px solid var(--ambar); padding: 1.1rem 1.3rem; margin: 1.2rem 0 1.8rem; box-shadow: var(--sombra); }
.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(--ambar); }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0; }
.cartao { position: relative; background: var(--cartao); border: 1px solid var(--borda); padding: 1rem 1.1rem; box-shadow: var(--sombra); }
.cartao h3 { margin-top: 0; }
.cartao .grande { font-family: "Oswald", sans-serif; font-size: 1.9rem; font-weight: 600; color: var(--ambar-2); 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(--ambar); 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(.5) brightness(.6) sepia(.2); }
a.cartao .mudo { margin-bottom: 0; }
.aviso { border-left: 3px solid var(--ambar); background: #12100d; padding: .7rem 1rem; margin: 1rem 0; }
.alerta { border-left-color: var(--ferrugem); }
.formula { background: var(--codigo); border: 1px solid var(--borda); border-left: 3px solid var(--aco); padding: .8rem 1rem; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .86rem; overflow-x: auto; white-space: pre; color: #cfc6b4; }
details { background: var(--cartao); border: 1px solid var(--borda); padding: .5rem .9rem; margin: .8rem 0; }
details summary { cursor: pointer; font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 1px; color: var(--ambar-2); }

/* tabelas */
.tabela { overflow-x: auto; margin: .8rem 0 1.3rem; border: 1px solid var(--borda); background: var(--cartao); box-shadow: var(--sombra); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { padding: .5rem .7rem; text-align: left; border-bottom: 1px solid #221f1a; white-space: nowrap; vertical-align: middle; }
th { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .8px; font-weight: 500; font-size: .8rem; color: #a99f8e; background: #0f0e0c; position: sticky; top: 0; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td, tr:hover td { background: rgba(212,145,47,.04); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tabela.centro th:not(:first-child), .tabela.centro td:not(:first-child) { text-align: center; }
tr.destaque td { background: rgba(212,145,47,.07); }
tr.destaque td:first-child { box-shadow: inset 3px 0 0 var(--ambar); }
tr.destaque td.grupo { background: none; box-shadow: none; }          /* célula com rowspan não pinta a linha de destaque */
tr.destaque td.grupo + td { box-shadow: inset 3px 0 0 var(--ambar); }
tr.fraco td { color: var(--texto-2); }
td.quebra { white-space: normal; min-width: 14rem; }
.tabela.texto th, .tabela.texto td { white-space: normal; }          /* tabela de texto: quebra a linha, sem barra de rolagem */
.pos { color: var(--musgo-2); } .neg { color: var(--ferrugem-2); }
.tag { display: inline-block; font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 500; font-size: .78rem; letter-spacing: .6px; text-transform: uppercase;
  line-height: 1.35; padding: .12rem .55rem; border: 1px solid var(--borda-forte); color: var(--texto); background: #12100d; white-space: nowrap; }
.tag.ouro { color: #0a0908; background: var(--ambar-2); border-color: var(--ambar-2); font-weight: 600; }
/* raridades com as cores do jogo */
.tag.godfather { color: #ff8a8e; border-color: #8f2e31; background: rgba(229,72,77,.12); }
.tag.kingpin { color: #f7bb57; border-color: #8a6020; background: rgba(245,166,35,.10); }
.tag.syndicate { color: #ad98ff; border-color: #4b3a99; background: rgba(124,92,255,.12); }
.tag.hustler { color: #6fdc96; border-color: #23683d; background: rgba(63,207,110,.08); }
.tag.street { color: #b8bdc4; border-color: #4b4f55; }
/* dica ao passar o mouse / tocar (balão posicionado por script, nunca cortado pela tabela) */
.dica { display: inline-block; cursor: help; color: var(--ambar-2); font-size: 1rem; line-height: 1; margin-right: .3rem; outline: none; }
.dica:focus { color: var(--ambar); }
/* selo de informação: círculo âmbar com "i", acende no mouse/foco */
.dica.info { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 17px; height: 17px; margin: 0 0 0 .45rem;
  border-radius: 50%; border: 1.5px solid var(--ambar); background: rgba(245,166,35,.10); color: var(--ambar-2);
  font: 700 11px/1 "Oswald", sans-serif; letter-spacing: 0; text-transform: none; 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: #0a0908; 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 "Barlow", sans-serif; color: var(--texto);
  background: #0d0c0a; border: 1px solid var(--ambar); padding: .6rem .8rem; box-shadow: 0 8px 24px rgba(0,0,0,.6); pointer-events: none; display: none; }
.rank { display: inline-block; min-width: 1.8rem; text-align: center; font-family: "Oswald", sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--ambar-2); }
tr:not(.destaque) .rank { color: var(--texto-2); }
.miniatura { width: 72px; height: 40px; object-fit: contain; background: #000; border: 1px solid var(--borda); vertical-align: middle; margin-right: .6rem; }
.item-nome { display: flex; align-items: center; }

/* gráfico */
figure { margin: 1rem 0 1.5rem; background: var(--cartao); border: 1px solid var(--borda); padding: .8rem; box-shadow: var(--sombra); }
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: #2a261f; stroke-dasharray: 2 4; }
.g-txt { fill: var(--texto-2); font-size: 11px; font-family: "Barlow", system-ui, sans-serif; }
.g-l1 { fill: none; stroke: var(--ambar); stroke-width: 2.2; } .g-l2 { fill: none; stroke: var(--aco); stroke-width: 2; }
.g-ponto { fill: var(--ambar-2); } .g-faixa { fill: rgba(127,140,70,.18); }

/* calculadoras e simulador */
.calc { background: var(--cartao); border: 1px solid var(--borda); padding: 1rem; margin: 1rem 0; box-shadow: var(--sombra); }
.calc .campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; margin-bottom: .8rem; }
.calc label, .slot { font-size: .8rem; color: var(--texto-2); display: flex; flex-direction: column; gap: .25rem; font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .6px; }
input, select { background: #0d0c0a; color: var(--texto); border: 1px solid var(--borda-forte); padding: .42rem .5rem; font: 500 .95rem "Barlow", sans-serif; text-transform: none; letter-spacing: 0; }
input:focus, select:focus { outline: 2px solid var(--ambar); outline-offset: 0; }
button { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 1px; background: #1b1814; color: var(--texto); border: 1px solid var(--borda-forte); padding: .45rem .8rem; cursor: pointer; }
button:hover { border-color: var(--ambar); color: var(--ambar-2); }
button.primario { background: var(--ambar); color: #0a0908; border-color: var(--ambar); font-weight: 600; }
button.primario:hover { background: var(--ambar-2); color: #000; }
.botoes { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }
.sim { display: grid; grid-template-columns: minmax(320px, 430px) 1fr; gap: 1.6rem; align-items: start; }
.sim > * { min-width: 0; }
.sim-form h2:first-child, .sim-saida h2:first-child { margin-top: .4rem; }
@media (max-width: 980px) { .sim { grid-template-columns: 1fr; } }
.equip { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.slot { background: #12100d; border: 1px solid var(--borda); padding: .5rem; }
.slot img { width: 100%; height: 70px; object-fit: contain; background: #000; visibility: hidden; }
.chks { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; }
.calc label.chk, .chk { font-size: .9rem; color: var(--texto); display: flex; flex-direction: row; align-items: center; gap: .5rem; text-transform: none;
  letter-spacing: 0; font-family: "Barlow", sans-serif; background: #12100d; border: 1px solid var(--borda); padding: .45rem .6rem; cursor: pointer; }
.chk input { margin: 0; width: 16px; height: 16px; accent-color: var(--ambar); flex: none; }
.chk:has(input:checked) { border-color: var(--ambar); color: var(--ambar-2); }
.mini-grade { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.cartao.mini { padding: .6rem .8rem; }
.cartao.mini .grande { font-size: 1.45rem; }
.cartao.mini small { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .6px; font-size: .72rem; }

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; }
/* glossário (Desenrolo) */
.glossario { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 0; margin: .4rem 0 1.4rem; border: 1px solid var(--borda); 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: "Oswald", sans-serif; color: var(--ambar-2); 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; } }
/* Na Mira: 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)); }
.equip-lo { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 640px) { .equip-lo { grid-template-columns: 1fr !important; } }
.carregar { margin-bottom: .6rem; }
.carregar label { display: flex; flex-direction: column; gap: .25rem; }
.sim-indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; margin: .6rem 0 1rem; }
.sim-indicadores .cartao { padding: .6rem .7rem; }
.sim-indicadores .grande { font-size: 1.45rem; }
.sim-indicadores small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* rótulo numa linha só: cartões da mesma altura */
.slot { cursor: default; }
/* card do item, igual ao do jogo */
.card-item { position: fixed; z-index: 70; width: 270px; background: #0e0d0b; border: 1px solid var(--borda-forte); box-shadow: 0 10px 30px rgba(0,0,0,.7); pointer-events: none; }
.card-item img { width: 100%; height: 130px; object-fit: contain; background: #000; display: block; }
.card-item .card-corpo { padding: .6rem .75rem .7rem; font: 400 .86rem/1.4 "Barlow", sans-serif; color: var(--texto); }
.card-item h4 { margin: .35rem 0 .3rem; font-family: "Oswald", sans-serif; font-size: 1.05rem; color: var(--ambar-2); }
.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); }
/* times da guerra */
.times { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.times > * { min-width: 0; }
@media (max-width: 900px) { .times { grid-template-columns: 1fr; } }
.time { background: var(--cartao); border: 1px solid var(--borda); padding: .8rem; }
.time h3 { margin-top: 0; }
.t-linha { display: grid; grid-template-columns: 1fr minmax(120px, 170px) auto; gap: .4rem; align-items: center; margin: .35rem 0; }
.t-linha select { width: 100%; min-width: 0; }
.t-linha .mudo { font-size: .85rem; }
.t-tira { padding: .25rem .6rem; }
.video { margin: 1rem 0 1.4rem; }
.video video { display: block; width: 100%; max-width: 1280px; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--borda-forte); box-shadow: var(--sombra); }
.video figcaption { margin-top: .4rem; }
/* Build dos Cria, seção 3: sliders e painel */
.puxa-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem 1.2rem; margin-bottom: .8rem; }
.puxa-sliders label b { font-family: "Oswald", sans-serif; font-size: 1.5rem; color: var(--ambar-2); letter-spacing: 0; }
.puxa-sliders input[type=range] { width: 100%; accent-color: var(--ambar); }
td.bom { color: var(--musgo-2); } td.ruim { color: var(--ferrugem-2); }