/* ANÉIS E PENDENTES ELEMENTAIS (06/10, SQL 0860): botão APRIMORAR na ficha da mochila, a ficha do item e a aba
   Elemental do Ferreiro. Sem animação: as cores do elemento e os ícones dos Fragmentos. */
.el-fogo{--el-cor:#ff7a3d;--el-fundo:#2a130a}
.el-agua{--el-cor:#4fb6ff;--el-fundo:#0a1a2a}
.el-vento{--el-cor:#6fe0b0;--el-fundo:#0b2219}
.el-trevas{--el-cor:#b07cff;--el-fundo:#1a1029}
.el-luz{--el-cor:#ffe07a;--el-fundo:#2a240c}

/* mochila: o botão do anel/pendente */
#inventoryView .inv-btn.elemental{background:#10202a;border-color:#3f8fb0;color:#cdeeff}
#inventoryView .inv-botoes>.inv-btn.elemental~.inv-btn:last-child{grid-column:1/-1}

/* a ficha do item */
.ttip-elemental{display:flex;flex-direction:column;gap:2px;margin-top:6px;padding:6px 8px;border-radius:8px;border:1px solid var(--el-cor,#3f8fb0);background:var(--el-fundo,#10202a)}
.ttip-elemental strong{color:var(--el-cor,#cdeeff);font-size:calc(12px * var(--text-scale,1))}
.ttip-elemental small{color:#e2e6ee;overflow-wrap:anywhere}

/* ABA ELEMENTAL */
.fx-elemental .fx-el-elementos{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:6px}
.fx-el-el{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:6px 2px;border-radius:8px;border:1px solid #2f3442;background:#151a21;color:#e8e2d0;cursor:var(--cur-mao,pointer);font:inherit;font-size:calc(11px * var(--text-scale,1));line-height:1.2;text-align:center}
.fx-el-el img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
.fx-el-el b{color:var(--el-cor);font-size:calc(11.5px * var(--text-scale,1));white-space:nowrap}
.fx-el-el small{color:#aeb4c0;font-size:calc(10px * var(--text-scale,1));overflow-wrap:anywhere}
.fx-el-el.sel{border-color:var(--el-cor);box-shadow:0 0 0 1px var(--el-cor) inset;background:var(--el-fundo)}
.fx-el-el.falta small:last-child{color:#ff8c7a}
.fx-el-efeito{border-left:3px solid var(--el-cor);padding-left:8px}
.fx-el-efeito h4{color:var(--el-cor)}
.fx-el-efeito p{margin:4px 0;color:#f1ece0;overflow-wrap:anywhere}
.fx-el-barra{display:flex;align-items:center;gap:3px;margin:4px 0;min-width:0}
.fx-el-barra i{flex:1 1 0;min-width:4px;height:8px;border-radius:3px;background:#262b36}
.fx-el-barra i.on{background:var(--el-cor)}
.fx-el-barra b{flex:0 0 auto;margin-left:6px;white-space:nowrap;color:#f1ece0;font-size:calc(12px * var(--text-scale,1))}
.fx-el-chance{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.fx-el-chance b{color:#bff0cc}
.fx-el-chance.risco b{color:#ffcf4a}
.fx-el-chance small{color:#c9b9a0;overflow-wrap:anywhere}
.fx-el-res-par{display:flex;align-items:center;gap:6px;min-width:0}
.fx-el-res-par img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.fx-el-res-par>span{color:#aeb4c0}
.fx-el-res-par div{display:flex;flex-direction:column;min-width:0}
.fx-el-res-par b{color:#d8d2c2}
.fx-el-res-par small{color:#aeb4c0;overflow-wrap:anywhere}
.fx-el-res.ativa .fx-el-res-par b{color:#ffd58a}
.fx-el-res:not(.ativa) .fx-el-res-par img{opacity:.55}
.fx-el-troca>summary{cursor:var(--cur-mao,pointer);font-weight:700;color:#d8d2c2}
.fx-el-troca[open]>summary{margin-bottom:6px}
.fx-el-conv-lado{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.fx-el-mini{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:4px 2px;border-radius:8px;border:1px solid #2f3442;background:#151a21;color:#e8e2d0;cursor:var(--cur-mao,pointer);font:inherit}
.fx-el-mini img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated}
.fx-el-mini small{font-size:calc(10px * var(--text-scale,1));color:#aeb4c0;overflow-wrap:anywhere}
.fx-el-mini.sel{border-color:#d89a2b;background:#2a1c0c}
.fx-el-conv-seta{margin:4px 0;text-align:center;color:#d8d2c2;font-size:calc(11.5px * var(--text-scale,1));overflow-wrap:anywhere}
.fx-el-conv-botoes{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:6px}
.fx-el-conv-botoes .utility-button{min-width:64px}

/* Celular estreito: o Ferreiro tem 7 abas (Elemental 06/10, Recriar 10/10); numa linha só
   "Aprimorar" e "Elemental" cortavam em 360 px. Até 420 px viram 2 linhas de 4 (com 3 colunas
   a 3ª linha empurrava o botão de aprimorar para fora da primeira tela). */
@media (max-width:420px){
  #forgeView .vendor-subtabs{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr))}
  /* 26/10 (auditoria Android): com a 9ª aba (Classe) ficavam 4 + 4 + 1, "Asas" sozinha na 3ª fila. São 11 botões
     no HTML; com exatamente 2 escondidos (9 visíveis) viram 3 colunas (3 + 3 + 3), mesma altura. Sem :not dentro
     do :has (regra D do android-telas-browser: lag). */
  #forgeView .vendor-subtabs:has(.vendor-subtab.hidden ~ .vendor-subtab.hidden):not(:has(.vendor-subtab.hidden ~ .vendor-subtab.hidden ~ .vendor-subtab.hidden)){grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Na ficha rica (mochila/dica) o bloco fica alinhado com as outras seções. */
.game-tooltip.rico .ttip-elemental,#inventoryDetail .ttip-elemental{margin:9px 12px 0}

/* 07/10 passo a passo: número redondo em cada passo, o custo com chips maiores e a linha final que diz o que falta. */
.fx-el-n{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:#d89a2b;color:#140d02;font-weight:800;font-size:calc(11.5px * var(--text-scale,1));letter-spacing:0;line-height:1}
.fx-el-passo{display:flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere}
.fx-el-efeito .fx-el-passo{color:var(--fx-ouro2,#e7c27a)}
.fx-el-nome{color:var(--el-cor);font-size:calc(12.5px * var(--text-scale,1));letter-spacing:.06em;overflow-wrap:anywhere}
.fx-el-intro{margin:0;color:#d8d2c2;overflow-wrap:anywhere}
.fx-el-pronto{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 10px;border-radius:10px;border:1px solid #2f5a3b;background:#0e1d14}
.fx-el-pronto small{color:#d9f2df;font-size:calc(12px * var(--text-scale,1));overflow-wrap:anywhere;min-width:0}
.fx-el-pronto.falta{border-color:#7a2f35;background:#1f0f12}
.fx-el-pronto.falta small{color:#ffc9cd}
.fx-el-pronto.falta .fx-el-n{background:#c4505b;color:#fff}
#forgeView .fx-elemental .fx-el-custo{justify-content:flex-start;gap:6px;font-size:calc(12.5px * var(--text-scale,1))}
#forgeView .fx-elemental .fx-el-custo span{white-space:normal;flex-wrap:wrap;min-width:0;max-width:100%;padding:5px 9px;border:1px solid #2f3442}
#forgeView .fx-elemental .fx-el-custo span.falta{border-color:#7a2f35;color:#ffc9cd}
#forgeView .fx-elemental .fx-el-custo img{width:20px;height:20px;object-fit:contain}
.fx-el-conv-rot{color:#aeb4c0;font-size:calc(10.5px * var(--text-scale,1));letter-spacing:.12em;font-weight:700}
#forgeElementalExtra:empty{display:none}
#forgeElementalExtra{margin-top:10px}

/* 22/10 (autor: "o menu lateral tem uma rolagem gigantesca... deixe ele funcional, prático e bonito"). A bancada fica só
   com o caminho até o botão (elemento, ganho e custo, botão). Converter, Ressonância e Trocar descem para baixo dos itens,
   na coluna da esquerda, que antes ficava vazia. No celular eles vêm depois da bancada. */
#forgeView:not([data-fx-aba="elemental"]) #forgeElementalExtra{display:none}
#forgeElementalExtra:empty{display:none}
#forgeElementalExtra.fx-el-lado{display:grid;gap:12px;align-content:start}
#forgeElementalExtra.fx-el-lado>.fx-bloco{border:1px solid var(--fx-linha,#2d3a52);border-radius:14px;background:var(--fx-card,#141a26);padding:12px}
@media (min-width:900px){
  #forgeView[data-fx-aba="elemental"] .fx-corpo{grid-template-columns:minmax(0,1fr) 440px;grid-template-rows:auto 1fr}
  #forgeElementalExtra .fx-el-conv{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:6px;align-items:center}
  #forgeElementalExtra .fx-el-conv>h4,#forgeElementalExtra .fx-el-conv>.fx-dr-nota,#forgeElementalExtra .fx-el-conv>.fx-el-conv-seta,#forgeElementalExtra .fx-el-conv>.fx-el-conv-botoes,#forgeElementalExtra .fx-el-conv>:last-child{grid-column:1/-1}
  #forgeView[data-fx-aba="elemental"] .fx-itens{grid-column:1;grid-row:1}
  #forgeView[data-fx-aba="elemental"] #forgeElementalExtra{grid-column:1;grid-row:2}
  #forgeView[data-fx-aba="elemental"] .fx-bancada{grid-column:2;grid-row:1 / span 2}
  #forgeElementalExtra .fx-el-conv-lado{grid-template-columns:repeat(5,minmax(0,72px))}
}
@media (max-width:899px){
  #forgeView[data-fx-aba="elemental"] .fx-corpo{display:flex;flex-direction:column;gap:8px}
  #forgeView[data-fx-aba="elemental"] .fx-bancada{order:1}
  #forgeView[data-fx-aba="elemental"] #forgeElementalExtra{order:2}
}
.fx-elemental .fx-el-elementos .fx-el-el small:not(:last-child){display:none}
.fx-el-efeito .fx-el-custo{margin:6px 0 2px}
.fx-elemental .fx-el-elementos{grid-template-columns:repeat(5,minmax(0,1fr))}