/* =============================================================================
   D2BR — Guia > Forja (views/forja.handlebars)
   Extensão do design system Horadric (css/d2-ui.css). Sem token de cor novo:
   dourado é o acento, --rune (âmbar) é o calor da forja e --blood é o ÚNICO
   vermelho, sempre semântico (aqui: a falha que destrói o item).

   O único par cromático extra é o dos minérios — âmbar para o Infernal Ore e
   azul-abissal para o Abyssal Ore. Não é decoração: é a mesma cor que o
   jogador vê no ícone dentro do jogo, e é o que separa "arma" de "armadura"
   numa olhada.

   Com o TIER 2 (12/08/2026) o par virou quatro, e o eixo cromático passou a
   valer nas DUAS direções: a MATIZ diz o eixo (quente = arma, frio = armadura)
   e a SATURAÇÃO diz o tier — o perfeito é a versão saturada do comum, não uma
   cor nova. Todas as quatro foram MEDIDAS no PNG do ícone (a média dos pixels
   opacos), e depois clareadas para dar contraste sobre o fundo escuro:

       invino  #8f421b  ->  --ore-ino  #e2903f   (laranja-brasa)
       invabo  #3b5aa6  ->  --ore-abo  #6ea8d8   (azul-abissal)
       invpio  #cb4318  ->  --ore-pio  #ff6a45   (vermelho vivo)
       invpao  #6081d0  ->  --ore-pao  #8fb4ff   (azul royal)

   Carregado DEPOIS do guia.css (views/layouts/main.handlebars) — é o que faz
   as regras de largura daqui vencerem as de lá em igualdade de especificidade.
   ============================================================================= */

#main-content .forja {
  --ore-ino: #e2903f;                        /* = --rune (brasa) */
  --ore-abo: #6ea8d8;                        /* azul-abissal do ícone */
  --ore-abo-glow: rgba(110, 168, 216, .28);
  --ore-pio: #ff6a45;                        /* vermelho vivo do Perfect Infernal */
  --ore-pao: #8fb4ff;                        /* azul royal do Perfect Abyssal */
  --ore-pao-glow: rgba(143, 180, 255, .30);
  /* Os 3 CATALISADORES (13/08/2026). Medidos no ícone pelo mesmo método dos
     minérios, com uma diferença: aqui a média é só do TERÇO MAIS CLARO dos pixels.
     A média de TODOS puxava para o material escuro (o carvão, o vidro do frasco) e
     dava três marrons parecidos — o que o olho lê como "a cor do item" é a brasa, o
     pó e o líquido, que são justamente os pixels claros.
         invhfc  #9e3e22  ->  --cat-hfc  #e05a30   (brasa)
         invafl  #8f4b93  ->  --cat-afl  #c86fd0   (violeta arcano)
         invtmp  #c88942  ->  --cat-tmp  #f0b45c   (âmbar dourado) */
  --cat-hfc: #e05a30;
  --cat-afl: #c86fd0;
  --cat-tmp: #f0b45c;
  /* Largura da história. Era 72ch (medida clássica de leitura), mas a lenda é
     longa e a coluna estreita virava rolagem demais: agora ela ocupa a casca
     inteira, com um teto para a linha não ficar impossível de acompanhar. */
  --lore-w: 1100px;
}

/* ---------------------------------------------------------------------------
   Largura da casca
   Esta página usa a classe .guia para herdar cabeçalho e migalha, e herdava
   junto o container de 1560px — largura que existe para o trilho lateral mais
   as tabelas de 9 colunas do conteúdo importado do Arreat Summit. Aqui não há
   trilho nenhum: o resultado era uma coluna de texto de ~660px encostada na
   borda esquerda com meia tela vazia à direita. Página de leitura volta a ter
   largura de leitura.
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  #main-content .forja > .container {
    /* 1280 e não 1180: é o que faz a história alcançar o teto de --lore-w */
    max-width: min(1280px, 100% - 40px);
  }
}

/* ---------------------------------------------------------------------------
   Cabeçalho — frontispício centrado, para casar com a coluna da história
   --------------------------------------------------------------------------- */
#main-content .forja-head {
  margin-bottom: clamp(26px, 3.4vw, 40px);
  text-align: center;
}

#main-content .forja-head .guia-crumbs {
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   Blocos da página — um filete dourado separa cada assunto
   --------------------------------------------------------------------------- */
#main-content .forja-block {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(30px, 4vw, 44px);
  border-top: 1px solid var(--line);
  /* o cabeçalho do site é fixo: sem isto uma âncora para com o título do bloco
     escondido atrás dele */
  scroll-margin-top: 100px;
}

#main-content .forja .d2-sec-sub {
  max-width: 78ch;
  font-size: 15px;
  line-height: 1.7;
}

#main-content .forja .d2-sec-sub b {
  color: var(--gold-soft);
}

/* ---------------------------------------------------------------------------
   A história — coluna de leitura centrada, dentro de uma "página" própria
   A história é a única parte da tela que se lê de ponta a ponta; ela ganha
   medida curta, corpo maior e um painel só dela. As grades (etapas, minérios)
   continuam ocupando a largura toda logo abaixo — é o contraste entre as duas
   larguras que faz a coluna estreita parecer escolha, e não sobra de layout.
   --------------------------------------------------------------------------- */
#main-content .forja-lore {
  position: relative;
  overflow: hidden;
  max-width: var(--lore-w);
  margin: 0 auto;
  padding: clamp(26px, 3vw, 40px) clamp(22px, 3vw, 42px) clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(226, 144, 63, .07), transparent 62%),
    linear-gradient(180deg, rgba(0, 0, 0, .26), rgba(0, 0, 0, .12));
  color: var(--txt);
  font-size: 17px;
  /* 1,85 era o respiro de uma coluna estreita; na linha larga ele só empurra a
     página para baixo. 1,7 continua confortável e devolve ~8% da altura. */
  line-height: 1.7;
}

/* fio dourado no alto da "página", como o corte de um pergaminho */
#main-content .forja-lore::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .5;
}

#main-content .forja-lore p {
  margin: 0 0 20px;
  opacity: .92;
}

/* O ritmo da lenda: frases de uma linha só, que valem como martelada e não como
   parágrafo. Com o espaçamento de parágrafo elas viram uma lista solta; juntas em
   estrofe, leem-se como uma respiração só. */
/* ⚠️ São 56 delas, e cada uma ocupa UMA linha: juntas respondem por metade da
   altura da lenda, e essa metade não encolhe por mais que a coluna alargue. É
   aqui, no espaço entre elas, que se ganha altura sem mexer no texto. */
#main-content .forja-lore p.beat {
  margin-bottom: 4px;
}

/* Só o corte entre a estrofe e o parágrafo seguinte volta a respirar */
#main-content .forja-lore p.beat + p:not(.beat) {
  margin-top: 20px;
}

/* A advertência dos Horadrim, no meio da lenda — filete dourado; o vermelho
   continua reservado para o aviso final, que é o que custa item. */
#main-content .forja-lore-quote {
  margin: 26px 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--line-strong);
  font-style: italic;
  color: var(--gold-soft);
  opacity: .95;
}

#main-content .forja-lore b {
  color: var(--gold-soft);
  font-weight: 600;
  opacity: 1;
}

#main-content .forja-lore i {
  color: var(--gold-soft);
  opacity: .95;
}

#main-content .forja-lore b.is-ino { color: var(--ore-ino); }
#main-content .forja-lore b.is-abo { color: var(--ore-abo); }

/* Antetítulo: "das crônicas dos Horadrim" — é ele que diz, sem dizer, que o
   que vem abaixo é trecho de livro. */
#main-content .forja-lore-eyebrow {
  margin: 0 0 22px;
  text-align: center;
  font-family: var(--font-display-light);
  font-size: 11.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--rune);
  opacity: 1;
}

/* Capitular: a primeira letra da história, como nas crônicas do jogo */
#main-content .forja-lore-eyebrow + p::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 62px;
  line-height: .82;
  padding: 6px 14px 0 0;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(233, 198, 107, .35);
}

/* O aviso que fecha a história — o único vermelho da narrativa */
#main-content .forja-lore-final {
  margin-top: 26px;
  padding: 16px 20px;
  border-left: 3px solid var(--blood);
  background: linear-gradient(90deg, rgba(200, 80, 63, .1), transparent 70%);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 16px;
}

#main-content .forja-lore-final b {
  color: var(--blood-soft);
}

/* O sussurro que fecha a lenda: é a oração que completa a frase anterior, não
   uma sentença nova. Recuada e em voz mais baixa para ler como continuação —
   sem itálico dourado, que aqui roubaria a atenção do aviso em vermelho.
   ⚠️ Precisa do `p.` no seletor: sem o tipo, `.forja-lore p` (que é mais
   específico) devolve a opacidade e as margens do parágrafo comum. */
#main-content .forja-lore p.forja-lore-whisper {
  margin-top: 2px;
  padding-left: 1.6em;
  font-style: italic;
  font-size: 15px;
  opacity: .78;
}

/* Assinatura do trecho — em itálico do corpo, não em Exocet: a fonte do jogo
   é bonita em rótulo curto e ilegível numa frase inteira em caixa alta. */
#main-content .forja-lore-src {
  margin: 24px 0 0;
  text-align: right;
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  opacity: .85;
}

/* ---------------------------------------------------------------------------
   Passo a passo
   --------------------------------------------------------------------------- */
/* o min() é o que impede a trilha de ficar mais larga que a coluna disponível:
   com minmax(230px, …) puro, um celular de 360px estoura a página para a
   direita em vez de empilhar */
#main-content .forja-steps {
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}

#main-content .forja-steps .d2-step-text {
  font-size: 14px;
  line-height: 1.65;
}

#main-content .forja-steps .d2-step-title {
  font-size: 16px;
}

#main-content .forja-steps .d2-step-text b { color: var(--txt); }

/* ---------------------------------------------------------------------------
   A captura da tela do jogo — o exemplo do passo a passo
   --------------------------------------------------------------------------- */
/* 448px é a largura REAL da captura. Deixar crescer além disso ampliaria por
   1,25 — e em nearest-neighbor isso dobra uns pixels e outros não, o que come a
   fonte Exocet do topo da tela. Melhor pequena e nítida. */
#main-content .forja-shot {
  margin: 28px auto 0;
  max-width: 448px;
  text-align: center;
}

#main-content .forja-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}

/* Só onde a imagem cabe 1:1 é que o `pixelated` ajuda; abaixo disso ela está
   sendo REDUZIDA, e aí o nearest-neighbor serrilha o texto do painel. */
@media (min-width: 560px) {
  #main-content .forja-shot img { image-rendering: pixelated; }
}

#main-content .forja-shot figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

#main-content .forja-nota {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  max-width: 84ch;
}

#main-content .forja-nota b {
  color: var(--txt);
}

/* ---------------------------------------------------------------------------
   Os dois minérios
   --------------------------------------------------------------------------- */
#main-content .forja-ores {
  display: grid;
  /* 380px é o piso para a escada de 3 colunas caber dentro do cartão sem que a
     coluna da chance quebre em duas linhas.
     min(): sem ela o cartão de 380px empurra a página inteira para fora da tela
     num celular estreito, em vez de empilhar */
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 20px;
  margin-bottom: 26px;
}

/* Lado a lado, a grade já deixa os dois cartões da mesma ALTURA — mas não do
   mesmo conteúdo: o "Onde achar" do Infernal Ore ocupa 3 linhas e o do Abyssal,
   2, e as duas escadas começavam em alturas diferentes. Coluna flex + o
   `margin-top: auto` do rótulo da escada ancoram o bloco no PÉ do cartão; como
   as duas tabelas têm as mesmas 5 linhas, alinhar o pé alinha o topo junto.
   Empilhados (1 coluna) não há folga para o `auto` consumir e nada muda. */
#main-content .forja-ore {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 20px;
}

#main-content .forja-ore-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

/* A célula do inventário: quadro escuro com moldura, do jeito que o jogo mostra */
#main-content .forja-ore-slot {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: radial-gradient(70% 70% at 50% 45%, rgba(255, 255, 255, .05), rgba(0, 0, 0, .55));
  border: 1px solid var(--line-2);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .8);
}

#main-content .forja-ore-slot img {
  /* arte do jogo: 26x26 px reais — ampliar sem borrar */
  width: 52px;
  height: 52px;
  object-fit: contain;
  image-rendering: pixelated;
}

#main-content .forja-ore-name {
  font-family: var(--font-display);
  font-size: 21px;
  margin: 0 0 6px;
  letter-spacing: .03em;
}

#main-content .forja-ore-sub {
  display: block;
  color: var(--muted);
  font-size: 13.5px;
}

#main-content .forja-ore-sub b { color: var(--txt); }

#main-content .forja-ore.is-ino .forja-ore-name { color: var(--ore-ino); }
#main-content .forja-ore.is-abo .forja-ore-name { color: var(--ore-abo); }

#main-content .forja-ore.is-ino .forja-ore-slot {
  border-color: rgba(226, 144, 63, .4);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .8), 0 0 22px rgba(226, 144, 63, .16);
}

#main-content .forja-ore.is-abo .forja-ore-slot {
  border-color: rgba(110, 168, 216, .4);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .8), 0 0 22px var(--ore-abo-glow);
}

/* O tier 2 (o +10..+12). Mesmo desenho de cartão — o que muda é a cor, mais
   saturada, e o halo um pouco mais forte: eles são a versão nobre do mesmo
   minério, não outro tipo de coisa. */
#main-content .forja-ore.is-pio .forja-ore-name { color: var(--ore-pio); }
#main-content .forja-ore.is-pao .forja-ore-name { color: var(--ore-pao); }

#main-content .forja-ore.is-pio .forja-ore-slot {
  border-color: rgba(255, 106, 69, .45);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .8), 0 0 24px rgba(255, 106, 69, .20);
}

#main-content .forja-ore.is-pao .forja-ore-slot {
  border-color: rgba(143, 180, 255, .45);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .8), 0 0 24px var(--ore-pao-glow);
}

/* ---------------------------------------------------------------------------
   Os catalisadores — mesmo cartão, três diferenças
   ---------------------------------------------------------------------------
   1. TRÊS por linha, não dois: o cartão não tem escada dentro (o efeito deles não
      muda com o nível), então cabe em coluna mais estreita — 300px contra os 380
      que a escada de 3 colunas do minério exigia;
   2. sem `margin-top: auto` para ancorar escada nenhuma;
   3. a cor sai do TERÇO CLARO do ícone (ver o bloco de variáveis no topo). */
/* ---------------------------------------------------------------------------
   A INTRODUÇÃO da seção dos catalisadores — largura da grade, não a de leitura
   ---------------------------------------------------------------------------
   A página trava parágrafo em 78ch (`.d2-sec-sub`) e 84ch (`.forja-nota`) — a medida
   clássica de leitura, e o padrão certo para o resto do guia, onde o texto é longo.
   Aqui ela produzia um bloco de ~669px sobre uma grade de ~1099px: o texto morria no
   meio e sobrava um vazio à direita, como se a seção estivesse quebrada.
   ⚠️ Escopado em `.forja-cats-sec` de propósito: as OUTRAS seções continuam com o teto
   de leitura, que é o certo para elas. Especificidade sobe de (id + 2 classes) para
   (id + 3), então vence sem depender da ordem no arquivo.
   📐 A contrapartida assumida: a ~1099px a linha passa de 130 caracteres, acima do
   confortável — o texto daqui é curto (2 linhas) e serve de legenda para os cartões,
   não de leitura corrida. Se um dia crescer, o teto volta. */
#main-content .forja .forja-cats-sec .d2-sec-sub,
#main-content .forja .forja-cats-sec .forja-nota {
  max-width: none;
}

/* O parágrafo encostava NA GRADE (o `.forja-nota` nasce com `margin-bottom: 0`, porque
   no uso original dele vinha logo o fim da seção). 26px é o mesmo respiro que o
   `.d2-sec-sub` já usa acima — assim o bloco de texto tem a mesma folga dos dois lados. */
#main-content .forja .forja-cats-sec .forja-nota {
  margin-bottom: 26px;
}

/* 260px: são TRÊS cartões, e a casca dá ~841px de grade — com os 300 da primeira
   versão (ou mesmo 280) três pediam mais que isso, a grade caía para 2 colunas e o
   terceiro ficava sozinho embaixo, desequilibrando a seção. Com 260 os três entram
   lado a lado, que é como eles se comparam. */
#main-content .forja-cats {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* 🔑 Rótulo EM CIMA do texto, não ao lado (o oposto do cartão de minério).
   Em ~267px de cartão, o `auto 1fr` do minério deixava ~150px para a frase — três
   palavras por linha. Empilhado, o texto usa a largura toda.
   De quebra some o desalinhamento entre cartões: com rótulo ao lado, a coluna `auto`
   é medida por cartão, e "Onde achar" contra "Rende" fazia o texto começar em x
   diferente em cada um. É o mesmo layout que a página já usa no mobile. */
#main-content .forja-cats .forja-ore-facts {
  grid-template-columns: 1fr;
  gap: 3px 0;
}

#main-content .forja-cats .forja-ore-facts dd {
  margin-bottom: 14px;
}

#main-content .forja-cats .forja-ore-facts dd:last-child {
  margin-bottom: 0;
}

/* Piso de DUAS linhas no primeiro <dd>. Sem ele o cartão da Essência — cujo texto
   ocupa duas linhas enquanto os outros dois ocupam uma — empurrava o "Onde achar"
   23px para baixo, e os três rótulos deixavam de se ler na mesma altura. Os cartões
   são lidos em PARALELO (é para isso que estão lado a lado): o desalinhamento de uma
   linha é justamente o que faz o olho perder o paralelo.
   `em` e não `px` porque a medida é a linha de texto, e ela acompanha o font-size. */
#main-content .forja-cats .forja-ore-facts dd:first-of-type {
  min-height: 3.3em;   /* 2 × line-height 1.65 */
}

/* 💥 CABEÇALHO EMPILHADO — ícone em cima, nome embaixo.
   No cartão do minério o ícone fica ao LADO do nome, e ali sobra largura para isso.
   Aqui não: 267px de cartão, menos os 72 do ícone, menos gap e padding, deixavam
   ~131px para o nome. "Hellforge Coal" e "Tempering Essence" quebravam em duas
   linhas SEMPRE, e a segunda encostava no "+25% de chance" logo abaixo — foi o
   "títulos colados" que o usuário viu.
   Empilhado, o nome usa os ~220px inteiros e cabe numa linha só; de quebra o cartão
   ganha a silhueta de ficha de item (ícone, nome, efeito), que é o que ele é. */
#main-content .forja-cats .forja-ore-head {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
}

/* 18px e sem o letter-spacing herdado: em Exocet, "Tempering Essence" (17 caracteres,
   o mais longo dos três) ainda quebrava com 20px. Os três nomes numa linha só é o que
   mantém os cabeçalhos alinhados entre si — com um deles em duas linhas, o "+100% de
   chance" daquele cartão descia e os três deixavam de se ler em paralelo. */
#main-content .forja-cats .forja-ore-name {
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: .01em;
  margin-bottom: 5px;
}

/* O ícone é o herói do cartão aqui (não há escada competindo por atenção), então
   ele cresce um pouco em relação ao do minério. */
#main-content .forja-cats .forja-ore-slot {
  width: 84px;
  height: 84px;
}

#main-content .forja-cats .forja-ore-slot img {
  width: 60px;
  height: 60px;
}

#main-content .forja-ore.is-hfc .forja-ore-name { color: var(--cat-hfc); }
#main-content .forja-ore.is-afl .forja-ore-name { color: var(--cat-afl); }
#main-content .forja-ore.is-tmp .forja-ore-name { color: var(--cat-tmp); }

#main-content .forja-ore.is-hfc .forja-ore-slot {
  border-color: rgba(224, 90, 48, .45);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .8), 0 0 24px rgba(224, 90, 48, .20);
}

#main-content .forja-ore.is-afl .forja-ore-slot {
  border-color: rgba(200, 111, 208, .45);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .8), 0 0 24px rgba(200, 111, 208, .20);
}

#main-content .forja-ore.is-tmp .forja-ore-slot {
  border-color: rgba(240, 180, 92, .45);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .8), 0 0 24px rgba(240, 180, 92, .20);
}

/* ⛔ Aqui viviam as regras da tabela `.forja-cats-scale` (matriz de 8 níveis × 5
   combinações). A tabela saiu do guia a pedido do usuário em 14/08 — 40 células para
   explicar uma soma pesavam mais que o assunto —, e o CSS saiu junto: regra sem dono
   é o que faz a próxima pessoa procurar um elemento que não existe mais. */

/* ⚠️ Os quatro cartões vivem numa GRADE SÓ, sem rótulo de tier separando as
   duplas (decisão do usuário, 12/08/2026 — houve uma versão com rótulo e ela
   foi removida). Quem diz a faixa é cada cartão, em "Rende" e "Exige"; quem
   ensina a escada é a ORDEM (comum, comum, perfeito, perfeito), e ela só se lê
   assim enquanto a grade tiver 2 colunas. */

#main-content .forja-ore-facts {
  /* o `margin-bottom` é o respiro MÍNIMO até a escada: o `margin-top: auto` do
     rótulo dela vira 0 quando não sobra folga, e sem isto os dois blocos se
     encostariam no cartão mais cheio */
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 16px;
  align-items: baseline;
}

#main-content .forja-ore-facts dt {
  font-family: var(--font-display-light);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rune);
  white-space: nowrap;
  font-weight: 400;
}

#main-content .forja-ore-facts dd {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

#main-content .forja-ore-facts dd b { color: var(--txt); }

/* As qualidades aceitas, em fichinhas.
   A cor de cada uma é o código de raridade do próprio D2 — os tokens já vêm do
   guia.css (`--it-magic`, `--it-rare`, …), os mesmos do tooltip de item. Aqui a
   cor é INFORMAÇÃO, não decoração: o jogador reconhece a raridade pelo tom antes
   de ler a palavra. */
#main-content .forja-quals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

#main-content .forja-quals .q {
  font-size: 11.5px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .38);
  border: 1px solid var(--line);
  color: var(--txt);
}

#main-content .forja-quals .q-magic  { color: var(--it-magic); }
#main-content .forja-quals .q-rare   { color: var(--it-rare); }
#main-content .forja-quals .q-craft  { color: var(--it-craft); }
#main-content .forja-quals .q-set    { color: var(--it-set); }
#main-content .forja-quals .q-unique { color: var(--it-unique); }
#main-content .forja-quals .q-rw     { color: var(--it-rune); }

/* ---------------------------------------------------------------------------
   A escada de níveis — uma DENTRO de cada cartão de minério
   Repetida nos dois de propósito: bônus, teto e chance são propriedade do
   MATERIAL, então o cartão tem de responder sozinho por tudo do seu minério.
   Material novo entra como cartão novo, com a própria escada, sem mexer em
   nada do que já está na página.
   Não usa a classe .table do tema: o padding dela foi desenhado para tabela de
   página inteira e estoura dentro de um cartão de ~380px.
   --------------------------------------------------------------------------- */
#main-content .forja-scale-cap {
  margin: auto 0 10px;         /* auto = empurra a escada para o pé do cartão */
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

#main-content .forja-scale-cap b { color: var(--txt); }

#main-content .forja-scale {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--txt);
}

#main-content .forja-scale thead th {
  font-family: var(--font-display-light);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-soft);
  text-align: left;
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--line-2);
}

#main-content .forja-scale td {
  padding: 7px 8px;
  border-top: 1px solid rgba(233, 198, 107, .08);
  vertical-align: middle;
}

#main-content .forja-scale tbody tr:nth-of-type(odd) {
  background: rgba(233, 198, 107, .022);
}

#main-content .forja-scale td:first-child { white-space: nowrap; }

#main-content .forja-scale td b {
  color: var(--gold-soft);
  font-family: var(--font-display-light);
  font-size: 15px;
}

#main-content .forja-scale .is-safe { color: var(--gold-soft); font-weight: 600; }
#main-content .forja-scale .is-warn { color: var(--rune); font-weight: 600; }

/* A faixa de risco (+6 em diante) ganha o filete de sangue à esquerda */
#main-content .forja-scale tbody tr.is-risky td:first-child {
  box-shadow: inset 3px 0 0 var(--blood);
}

#main-content .forja-aviso {
  margin-top: 24px;
}

#main-content .forja-aviso .d2-callout-title {
  font-size: 16px;
}

#main-content .forja-aviso .d2-callout-body,
#main-content .forja-aviso .d2-callout-body p {
  font-size: 14px;
  line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   Telas médias — o painel da história perde a moldura própria e vira só texto:
   em tablet a caixa dentro da casca já fica com borda quase colada na borda.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  #main-content .forja-lore {
    padding: 0;
    border: 0;
    background: none;
    font-size: 16px;
    line-height: 1.8;
  }

  #main-content .forja-lore::before { display: none; }

  #main-content .forja-lore-eyebrow {
    text-align: left;
    letter-spacing: .24em;
  }

  #main-content .forja-lore-src { text-align: left; }
}

/* ---------------------------------------------------------------------------
   Telas estreitas
   --------------------------------------------------------------------------- */
@media (max-width: 575px) {
  #main-content .forja-lore-eyebrow + p::first-letter {
    font-size: 48px;
    padding-right: 10px;
  }

  #main-content .forja-lore-final {
    padding: 14px 16px;
    font-size: 15px;
  }

  #main-content .forja-ore-facts {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }

  #main-content .forja-ore-facts dd {
    margin-bottom: 12px;
  }

  #main-content .forja-ore-head {
    gap: 14px;
  }

  #main-content .forja-ore {
    padding: 20px 18px 18px;
  }
}