/* ═══════════ Forja do Grimdur — PORT do versao-2d (kit escuro v24) ═══════════ */
/* Estrutura/estilo portados fiel de versao-2d/styles.css. Assets em assets/ui/forja/. */

#forge { position: absolute; inset: 0; z-index: 42; display: flex; align-items: center; justify-content: center;
  background: rgba(3,2,4,.72); font-family: var(--game-font); color-scheme: dark; }
#forge.hidden { display: none; }
/* botões/selects nativos não herdam a fonte do jogo por padrão → força PixelMplus12 (corpo) nas abas e ações */
#forge button, #forge select { font-family: inherit; }

/* ---- base blacksmith (versao-2d) ---- */
.blacksmith-tabs { display: grid; gap: 0.45rem; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0.75rem 0; }
.blacksmith-tabs button { font-size: 0.76rem; cursor: pointer; }
/* No celular, todas as abas numa linha só ficam espremidas — quebra em 2 fileiras de 4 */
@media (max-width: 700px) { .blacksmith-tabs { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.blacksmith-panel { background: #090909; border: 1px solid #302317; box-shadow: inset 0 0 0 1px #050505; display: grid; gap: 0.75rem; min-height: 260px; padding: 0.75rem; }
.blacksmith-action-grid { display: grid; gap: 0.65rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blacksmith-action-grid label, .blacksmith-check { color: #a99a86; display: grid; gap: 0.35rem; font-size: 0.78rem; }
.blacksmith-action-grid select { background: #11100e; border: 1px solid #3d2b1e; border-radius: 3px; color: #e7d4a5; min-height: 36px; padding: 0.45rem; }
.blacksmith-check { align-content: end; grid-template-columns: auto 1fr; }
.blacksmith-check input { accent-color: #a66135; }
.blacksmith-result-box { background: linear-gradient(180deg, #171411, #080808); border: 1px solid #3d2b1e; border-radius: 3px; color: #bba47b; display: grid; gap: 0.45rem; padding: 0.75rem; }
.blacksmith-result-box strong { color: #f0c77f; }
.blacksmith-list { display: grid; gap: 0.5rem; max-height: 360px; overflow: auto; }
.blacksmith-row { align-items: center; background: linear-gradient(180deg, #171411, #080808); border: 1px solid #2f251b; border-radius: 3px; display: grid; gap: 0.65rem; grid-template-columns: 46px minmax(0, 1fr) 120px; padding: 0.55rem; }
.blacksmith-row span { display: grid; gap: 0.2rem; }
.blacksmith-row strong { color: #f0c77f; font-size: 0.9rem; }
.blacksmith-row small { color: #a99a86; line-height: 1.35; }
.blacksmith-row button { cursor: pointer; }
.shop-empty { background: #11100e; border: 1px solid #3d2b1e; border-radius: 3px; color: #9a8a70; padding: 1rem; text-align: center; }

/* ---- Layout 4-colunas (conceito Grimdur) ---- */
.bs-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 14px; align-items: start; }
.bs-main { min-width: 0; }
.bs-sidebar { background: repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 2px,rgba(0,0,0,0) 2px 6px),linear-gradient(180deg,#16110d,#090807);
  box-shadow: inset 0 0 0 1px #8a6d38, inset 0 0 26px rgba(0,0,0,.75); border-radius: 5px; padding: 14px; align-self: start; }
.bs-grim-name { font-family: var(--font-title); color: #c46a3a; text-transform: uppercase; letter-spacing: .05em; font-size: .92rem; margin: 0 0 6px; text-shadow: 0 1px 0 #000; }
.bs-grim-quote { font-style: italic; color: #8f7c62; font-size: .78rem; line-height: 1.5; margin: 0 0 6px; }
.bs-sec { text-align: center; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #b89355; margin: 8px 0; padding-bottom: 6px; border-bottom: 1px solid #3a2c19; }
.bs-grim-info { display: grid; gap: .4rem; font-size: .8rem; color: #a99a86; }
.bs-grim-info strong { color: #f0c77f; }
.bs-exit { margin-top: 16px; width: 100%; padding: 10px; border-radius: 3px; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem;
  color: #e7d4a5; background: linear-gradient(180deg,#2c211a,#140f0b); box-shadow: inset 0 0 0 1px #8a6d38; border: 1px solid #000; cursor: pointer; }
.bs-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 12px; }
.bs-orn { height: 1px; flex: 1; max-width: 200px; background: linear-gradient(90deg,transparent,#8a6d38,transparent); }
.bs-title { font-family: var(--font-title); color: #f0c77f; text-transform: uppercase; letter-spacing: .1em; font-size: 1rem; margin: 0; text-shadow: 0 0 12px rgba(216,173,90,.35); }
.bs-panel-title { text-align: center; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #b89355; margin: 0 0 10px; padding-bottom: 7px; border-bottom: 1px solid #3a2c19; }
.bs-refine-grid { display: grid; grid-template-columns: 1fr 1.05fr .95fr; gap: 12px; }
.bs-col { background: linear-gradient(180deg,#14100c,#090807); box-shadow: inset 0 0 0 1px #8a6d38, inset 0 0 22px rgba(0,0,0,.7); border-radius: 5px; padding: 11px; min-width: 0; }
.bs-list { display: grid; gap: 7px; max-height: 340px; overflow: auto; }
.bs-item-row { display: flex; gap: 9px; align-items: center; text-align: left; width: 100%; padding: 6px; border-radius: 4px; cursor: pointer;
  background: linear-gradient(180deg,#1b1510,#0c0a08); border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(138,109,56,.45); color: #cdbfa4; }
/* ONDA 4 (28/07, auditoria visual #8): o flex esmagava o SOQUETE do ícone a ~12px (a arte pinta um quadrado
   da largura → item de 6.77px) e decapitava o nome em 75/75 linhas no celular. Mesma receita que a casa já
   usa no .fj-result-head (linha 209): ícone nunca encolhe; o texto (span) é quem flexiona com ellipsis. */
.bs-item-row > .itemimg, .bs-item-row > .cr { flex: 0 0 auto; }
.bs-item-row > span { flex: 1 1 auto; min-width: 0; }
.bs-item-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-item-row.active { box-shadow: inset 0 0 0 1px #d8ad5a, 0 0 10px rgba(216,173,90,.22); }
.bs-item-row span { display: grid; gap: 2px; min-width: 0; }
.bs-item-row strong { font-size: .86rem; } .bs-item-row small { color: #998a72; font-size: .72rem; }
.bs-detail-hero { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-bottom: 10px; }
.bs-detail-icon { width: 64px; height: 64px; image-rendering: pixelated; display: flex; align-items: center; justify-content: center; }
.bs-detail-nm { font-size: 1rem; text-align: center; } .bs-detail-rl { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; opacity: .95; }
.bs-stats { display: grid; gap: 3px; margin-bottom: 8px; }
.bs-stat { display: flex; justify-content: space-between; font-size: .8rem; color: #c8b596; padding: 2px 2px; border-bottom: 1px dashed #241c12; }
.bs-refino-lvl { text-align: center; margin: 8px 0; color: #c8b083; }
.bs-refino-lvl .big { font-size: 1rem; color: #f0c77f; } .bs-refino-lvl .to { color: #f0c77f; font-weight: bold; }
.bs-hint { font-size: .7rem; color: #9a8a70; margin-top: 3px; }
.bs-cost { display: flex; gap: 12px; justify-content: center; margin: 8px 0; font-size: .8rem; color: #d8c49a; }
.bs-action { width: 100%; padding: 10px; border-radius: 3px; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; cursor: pointer;
  color: #f6dca6; background: linear-gradient(180deg,#a83128,#7a201c); box-shadow: inset 0 0 0 1px #d8ad5a; border: 1px solid #000; }
.bs-action[disabled] { filter: grayscale(.7) brightness(.6); cursor: not-allowed; }
.bs-prob { text-align: center; margin-bottom: 10px; } .bs-pct { font-size: 2.3rem; line-height: 1; color: #7ec27e; font-weight: bold; } .bs-prob small { color: #9a8a70; }
.bs-outcome { display: grid; gap: 4px; } .bs-prow { display: flex; justify-content: space-between; font-size: .78rem; }
.bs-prow .k { color: #a99a86; } .bs-prow .ok { color: #7ec27e; } .bs-prow .bad { color: #e2483b; }
.bs-prot { display: flex; gap: 7px; align-items: center; font-size: .78rem; color: #c8b596; }
.bs-prot input { accent-color: #a66135; }
.bs-prot-note { font-size: .72rem; color: #a99a86; line-height: 1.4; margin: 5px 0 0; }
/* só empilha em telas MUITO estreitas (retrato é bloqueado no mobile) — paridade com PC no landscape */
@media (max-width: 540px) { .bs-layout { grid-template-columns: 1fr; } .bs-refine-grid { grid-template-columns: 1fr; } }
/* ── MOBILE estreito (≤700px): abas quebram em 2 linhas (não cortam "FABRICA"/"DESMAN") + painel de ação colapsa p/ coluna única ── */
@media (max-width: 700px) {
  .blacksmith-card.grimdur .blacksmith-tabs { gap: 6px !important; margin-left: 0 !important; }
  .blacksmith-card.grimdur .blacksmith-tabs button {
    white-space: normal !important; line-height: 1.02; letter-spacing: -.2px !important; text-align: center;
    font-size: .5rem; padding: 4px 2px !important; min-height: 42px; overflow-wrap: anywhere; word-break: break-word;
    border-width: 8px !important; display: flex; align-items: center; justify-content: center;
  }
  /* minmax(0,1fr), não "1fr" puro: um track "1fr" sozinho herda min-width:auto (= min-content do
     select mais largo, ex. "Machado Enferrujado") e ESTOURA a coluna estreita do card 2-colunas;
     com minmax(0,...) o track (e o <select> dentro) pode encolher e só truncar o próprio texto. */
  .blacksmith-action-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .blacksmith-action-grid label, .blacksmith-action-grid select { min-width: 0; }
  .blacksmith-card.grimdur { padding: 10px 10px 12px !important; }
}

/* pixel font: impedir vazamento */
.blacksmith-card.grimdur .bs-item-row span { min-width: 0; }
.blacksmith-card.grimdur .bs-item-row strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-size: .8rem; }
.blacksmith-card.grimdur .bs-item-row small { font-size: .68rem; }
.blacksmith-card.grimdur .bs-title { letter-spacing: .05em; }
.blacksmith-card.grimdur .bs-panel-title, .blacksmith-card.grimdur .bs-sec { letter-spacing: .02em; font-size: .62rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blacksmith-card.grimdur .blacksmith-tabs button { letter-spacing: .01em; font-size: .66rem; padding-left: .15rem; padding-right: .15rem; }
/* fix varredura 16/07: no 812 a coluna de detalhe do refino é estreita e o nowrap+ellipsis DECAPAVA
   o nome ("Machado Enferrujado" 140px em ~130px de caixa, prova 150 refineNameTrunc). Deixa quebrar
   em 2 linhas (centralizado) — em telas largas cabe em 1 linha, então nada muda lá. */
.blacksmith-card.grimdur .bs-detail-nm { white-space: normal; overflow-wrap: anywhere; max-width: 100%; font-size: .92rem; line-height: 1.18; }
.blacksmith-card.grimdur .fj-city { font-size: .7rem; line-height: 1.35; overflow-wrap: anywhere; }
.blacksmith-card.grimdur .bs-grim-name { font-size: .9rem; letter-spacing: .02em; }
.blacksmith-card.grimdur .bs-stat { font-size: .74rem; }
.blacksmith-card.grimdur .bs-prot, .blacksmith-card.grimdur .bs-prot-note { overflow-wrap: anywhere; }
/* fix varredura 16/07 — "Resultado Possível": o space-between colava rótulo/valor ("FalhaMantém o nível")
   e o overflow-wrap:anywhere quebrava "Qualidade" no meio ("Qualid/ade"). Gap garante o espaço; o rótulo
   (.k) não quebra; o valor volta a quebrar só entre palavras. min-width na coluna evita esmagar demais. */
.blacksmith-card.grimdur .bs-prow { gap: 12px; overflow-wrap: normal; }
.blacksmith-card.grimdur .bs-prow .k { white-space: nowrap; }
.blacksmith-card.grimdur .bs-outcome { min-width: 140px; }

/* ============================================================
   FORJA — KIT ESCURO (mármore + filigrana de aço) v24
   ============================================================ */
/* TELA CHEIA (pedido Lucas 10/07): a Forja é uma CENA, não uma janela — ocupa o viewport inteiro */
.blacksmith-card.grimdur {
  width: 100% !important; max-width: 100% !important; height: 100%; max-height: 100vh; overflow: auto;
  /* Cenário v2 pixel-art 2560×1440 (ferreiro_humano, Lucas 10/07) — maior que a tela: cover REDUZ (de-zoom real).
     Véu ALIVIADO (.52/.62 → .26/.34) p/ a cena aparecer — a Forja agora é o lugar, os menus flutuam sobre ela. */
  /* versão DOF: ferreiro em FOCO, restante da oficina embaçado (assado na imagem via PIL — barato p/ GPU mobile) */
  background: linear-gradient(rgba(6,5,9,.26),rgba(6,5,9,.34)), url('../assets/ui/forja/cenario_v2_dof.png') center / cover no-repeat, #05040a !important;
  border: none !important;
  box-shadow: inset 0 0 70px rgba(0,0,0,.5) !important; /* só a vinheta interna; sem sombra externa de janela */
  border-radius: 0 !important; padding: 14px 16px 16px !important;
}
/* Forja-cena: coluna esquerda LARGA (o ferreiro da cena mora ali) + painéis compactados à direita */
.blacksmith-card.grimdur .bs-layout { grid-template-columns: 560px minmax(0,1fr) !important; gap: 14px; }
/* <1200px: sem coluna de cena, mas SEMPRE 2 colunas (nunca empilha em 1fr) — card vertical clássico
   à esquerda + painéis à direita; a coluna do card encolhe em 3 degraus (tablet/estreito/retrato). */
/* fix varredura 16/07: modo "desktopão" (cena lateral) só ≥1500px — em 1200-1499 as abas
   truncavam ("DESMANCHA") e o refino ficava espremido pela sidebar de 560px+margem 574px;
   nessa faixa volta o card-faixa vertical do modo <1200 (mais sólido, ver prova 150). */
@media (max-width: 1499px) { .blacksmith-card.grimdur .bs-layout { grid-template-columns: 200px minmax(0,1fr) !important; } }
@media (max-width: 700px)  { .blacksmith-card.grimdur .bs-layout { grid-template-columns: 160px minmax(0,1fr) !important; } }
@media (max-width: 540px)  { .blacksmith-card.grimdur .bs-layout { grid-template-columns: 140px minmax(0,1fr) !important; } }
/* painéis de mármore */
.blacksmith-card.grimdur .bs-col {
  border: 24px solid transparent !important; border-image: url('../assets/ui/forja/panel.png') 82 fill stretch !important;
  background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 2px 8px !important;
}
.blacksmith-card.grimdur .bs-colstack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.blacksmith-card.grimdur .bs-sub {
  border: 22px solid transparent !important; border-image: url('../assets/ui/forja/panel.png') 82 fill stretch !important;
  background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 2px 8px !important; min-width: 0;
}
.blacksmith-card.grimdur .bs-sub .bs-panel-title { margin-bottom: 8px; }
.blacksmith-card.grimdur .bs-sub .bs-action { margin-top: 4px; }
.blacksmith-card.grimdur .blacksmith-panel { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
.blacksmith-card.grimdur .blacksmith-result-box, .blacksmith-card.grimdur .blacksmith-action-grid,
.blacksmith-card.grimdur .blacksmith-list {
  border: 22px solid transparent !important; border-image: url('../assets/ui/forja/panel.png') 82 fill stretch !important;
  background: none !important; box-shadow: none !important; border-radius: 0 !important;
}
/* fix varredura 16/07: a aba Aprender (.blacksmith-list) era a única sem moldura (149b_1920_learn) —
   ganha o mesmo border-image de painel das outras abas. gap/altura preservados no padding do border. */
.blacksmith-card.grimdur .blacksmith-list { max-height: none; gap: 8px; padding: 2px 8px !important; }
/* cabeçalho */
.blacksmith-card.grimdur .bs-head {
  background: url('../assets/ui/forja/header_filled.png') center/contain no-repeat !important;
  min-height: 118px; display: flex; align-items: center; justify-content: center; margin: 0 0 2px !important;
}
.blacksmith-card.grimdur .bs-orn { display: none !important; }
.blacksmith-card.grimdur .bs-title {
  border: none !important; background: none !important; padding: 0 !important; align-self: center;
  color: #c6aa70 !important; text-shadow: 0 1px 2px #000, 0 0 6px #000 !important; letter-spacing: .08em;
  font-size: .98rem !important; text-transform: uppercase; margin-top: -1px !important;
}
/* abas = chips; ativa = brasa âmbar */
/* PC: botão compacto (célula ≤128px) centralizado SOBRE O PAINEL CENTRAL (desloca a largura da coluna da cena+gap) */
.blacksmith-card.grimdur .blacksmith-tabs { gap: 10px !important; grid-auto-columns: minmax(0, 128px); justify-content: center; margin-left: 574px; }
/* <1500px: sem coluna reservada pra cena → abas centralizadas normalmente (sem deslocamento) */
@media (max-width: 1499px) { .blacksmith-card.grimdur .blacksmith-tabs { margin-left: 0; } }
/* card de apresentação do Grimdur centralizado na coluna (não colado no topo) */
.blacksmith-card.grimdur .bs-sidebar { align-self: center; }
.blacksmith-card.grimdur .blacksmith-tabs button {
  position: relative; overflow: hidden; flex: 1;
  border: 12px solid transparent !important; border-image: url('../assets/ui/forja/panel.png') 82 fill stretch !important;
  background: none !important; box-shadow: none !important; border-radius: 0 !important;
  color: #948f86 !important; min-height: 38px; padding: 2px 8px !important; text-transform: uppercase;
}
.blacksmith-card.grimdur .blacksmith-tabs button::before { content: none !important; }
.blacksmith-card.grimdur .blacksmith-tabs button:hover { filter: brightness(1.15); color: #c6aa70 !important; }
.blacksmith-card.grimdur .blacksmith-tabs button.active { color: #e2c074 !important; }
.blacksmith-card.grimdur .blacksmith-tabs button.active::after {
  content: ""; position: absolute; left: 16%; right: 16%; bottom: 4px; height: 15px; pointer-events: none;
  background: radial-gradient(58% 120% at 50% 100%, rgba(214,150,58,.5), rgba(214,150,58,0) 72%);
}
/* botões */
.blacksmith-card.grimdur .bs-action, .blacksmith-card.grimdur .bs-exit,
.blacksmith-card.grimdur .blacksmith-panel button, .blacksmith-card.grimdur .blacksmith-row button {
  border: 12px solid transparent !important; border-image: url('../assets/ui/forja/panel.png') 82 fill stretch !important;
  background: none !important; box-shadow: none !important; border-radius: 0 !important;
  color: #c6aa70 !important; text-transform: uppercase; letter-spacing: .06em; min-height: 40px;
}
.blacksmith-card.grimdur .bs-action:hover, .blacksmith-card.grimdur .bs-exit:hover,
.blacksmith-card.grimdur .blacksmith-panel button:not([disabled]):hover, .blacksmith-card.grimdur .blacksmith-row button:not([disabled]):hover { filter: brightness(1.15) !important; box-shadow: none !important; }
.blacksmith-card.grimdur .bs-action:active, .blacksmith-card.grimdur .bs-exit:active, .blacksmith-card.grimdur .blacksmith-panel button:active { filter: brightness(.72) !important; }
.blacksmith-card.grimdur .bs-action[disabled] { filter: grayscale(.6) brightness(.55) !important; }
/* FABRICAR/Forjar Único (pedido Lucas 10/07): botão COMPACTO como os outros (o grid do result-box
   esticava ele na largura toda) + hover com troca de COR igual às abas (cinza→dourado) */
.blacksmith-card.grimdur .blacksmith-result-box button {
  justify-self: center; width: auto; min-width: 180px; max-width: 280px; padding: 2px 20px !important;
  color: #948f86 !important; transition: color .15s ease, filter .15s ease;
}
.blacksmith-card.grimdur .blacksmith-result-box button:not([disabled]):hover { color: #e2c074 !important; }
/* cabeçalho do resultado: sprite do item + nome lado a lado */
.blacksmith-card.grimdur .fj-result-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.blacksmith-card.grimdur .fj-result-head > .itemimg, .blacksmith-card.grimdur .fj-result-head > .cr { flex: 0 0 auto; }
/* PC ≥1500px: desenho da moldura MAIOR em toda a área da Forja (pedido Lucas 10/07, acompanhando
   o card em 48px): painéis 24/22→36/34; abas e botões 12→16 com altura compensada (o texto mora
   no miolo além da borda — borda maior sem altura maior decapita o rótulo). Abaixo de 1500 fica na régua antiga. */
@media (min-width: 1500px) {
  /* título "FORJA" alinhado no MESMO EIXO das abas/painéis (coluna à direita da cena, offset 574px
     como .blacksmith-tabs) — centralizado na tela ele parecia desorganizado (pedido Lucas 10/07) */
  .blacksmith-card.grimdur .bs-head { margin-left: 574px !important; }
  .blacksmith-card.grimdur .bs-col { border-width: 48px !important; }
  .blacksmith-card.grimdur .bs-sub,
  .blacksmith-card.grimdur .blacksmith-result-box,
  .blacksmith-card.grimdur .blacksmith-list,
  .blacksmith-card.grimdur .blacksmith-action-grid { border-width: 48px !important; }
  /* Abas/botões: 22px é o TETO sem truncar rótulo (48px literal deixou 32px de miolo na célula
     de 128px → "FABRI/APREN…" — mostrado ao Lucas em print 10/07; painéis ficam nos 48). */
  .blacksmith-card.grimdur .blacksmith-tabs button { border-width: 22px !important; min-height: 58px; }
  .blacksmith-card.grimdur .bs-action, .blacksmith-card.grimdur .bs-exit,
  .blacksmith-card.grimdur .blacksmith-panel button, .blacksmith-card.grimdur .blacksmith-row button {
    border-width: 22px !important; min-height: 60px;
  }
}
/* lista: selecionado = brasa âmbar */
.blacksmith-card.grimdur .bs-item-row { background: none !important; box-shadow: none !important; border: 1px solid transparent !important; position: relative; overflow: hidden; }
.blacksmith-card.grimdur .bs-item-row:hover { background: rgba(255,255,255,.035) !important; }
.blacksmith-card.grimdur .bs-item-row.active { background: none !important; box-shadow: none !important; }
.blacksmith-card.grimdur .bs-item-row.active::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 14px; pointer-events: none;
  background: radial-gradient(60% 130% at 50% 100%, rgba(214,150,58,.5), rgba(214,150,58,0) 74%);
}
/* Card do Grimdur — ≥1200px (PC): o quadro-retrato fica VISÍVEL sobre a cena (decisão do Lucas
   10/07: "de manhã o ferreiro estava certo, com o card novo" — a regra de ocultar no PC, das 08:40,
   escondia junto o nome, as infos e o botão Sair, e foi revertida).
   <1200px (tablet/celular): o quadro vira CARD VERTICAL compacto na lateral esquerda (mesma
   anatomia do retrato PC) — ver o bloco dedicado "CARD VERTICAL MOBILE" logo abaixo. */
@media (min-width: 1500px) {
  /* sidebar = quadro retrato do ferreiro (só existe fisicamente ≥1500px).
     RECEITA FINALIZADA com o Lucas ("Moldura24_fundo_390", 10/07 — vale pra PC E telefone):
     moldura 24px COM FUNDO (panel.png original, o vidro escuro das fatias encaixa a arte no
     porta-retrato) + recorte retrato do ferreiro HUMANO da cena (ferreiro_card_v.png) —
     mesma anatomia do card vertical mobile logo abaixo, só nas proporções do PC. */
  .blacksmith-card.grimdur .bs-sidebar {
    display: flex; flex-direction: column; min-height: 560px; position: relative;
    /* card RETRATO de 390px (proporção da arte 420×641 e do aprovado "…_390"), centrado na
       coluna de 560px do grid — sem isso ele estica na coluna inteira e a arte infla */
    width: 390px; margin: 0 auto;
    /* mata o anel dourado 1px + vinheta do kit base (o "quadrado dourado") — igual ao bloco mobile;
       a moldura é só a panel.png */
    box-shadow: none !important; border-radius: 0 !important;
    /* desenho da moldura MAIOR no PC (pedido Lucas 10/07: 24→32→48px no card de 390px) */
    border: 48px solid transparent !important; border-image: url('../assets/ui/forja/panel.png') 82 stretch !important;
    /* apagão em cima pro nome, respiro no meio pra arte, apagão embaixo pras infos+Sair */
    background: linear-gradient(180deg, rgba(6,5,9,.8) 0%, rgba(6,5,9,0) 20%, rgba(6,5,9,0) 46%, rgba(6,5,9,.88) 68%, rgba(6,5,9,.97) 100%),
      url('../assets/ui/forja/ferreiro_card_v.png') center top / cover no-repeat, #0a0808 !important;
    /* DEPOIS do background (o atalho reseta o clip!): fundo contido no miolo → anel da moldura transparente de verdade */
    background-clip: padding-box !important;
    padding: 8px !important;
  }
}
.blacksmith-card.grimdur .bs-grim-name { color: #e2985e !important; text-align: center; margin: 0 0 3px !important; text-shadow: 0 1px 2px #000, 0 0 8px #000 !important; }
.blacksmith-card.grimdur .bs-grim-quote { color: #cabfa8 !important; text-shadow: 0 1px 3px #000 !important; text-align: center; }
.blacksmith-card.grimdur .bs-sec { margin-top: auto !important; border: none !important; background: none !important; color: #c6aa70 !important; border-bottom: 1px solid #3a352c !important; text-shadow: 0 1px 2px #000 !important; padding: 0 0 5px !important; }
.blacksmith-card.grimdur .bs-grim-info { text-align: center; justify-items: center; color: #dccdb2 !important; text-shadow: 0 1px 2px #000 !important; }
.blacksmith-card.grimdur .bs-grim-info strong { color: #e2c074 !important; }
/* Sair segue o modelo compacto das abas: mesma célula, centrado na sidebar (retrato PC ≥1200px) */
.blacksmith-card.grimdur .bs-exit { margin: 10px auto 0 !important; display: block; width: auto !important; min-width: 128px; min-height: 38px; padding: 2px 10px !important; font-size: .72rem; }

/* ============================================================
   CARD VERTICAL MOBILE do Grimdur (pedido Lucas 10/07 — substitui a faixa horizontal rejeitada)
   <1200px: sem espaço pra cena de fundo em tamanho completo → o quadro do Grimdur volta como
   um CARD VERTICAL CLÁSSICO na lateral ESQUERDA (2 colunas sempre — ver .bs-layout acima),
   reaproveitando a MESMA anatomia do retrato PC (bloco ≥1500px logo acima, que serve de
   referência): nome no topo, arte preenchendo o corpo, "Informações"+Ouro/Almas/Cidade+Sair
   no rodapé sobre o mesmo gradiente escuro — só compactado em 3 degraus de largura.
   ============================================================ */
@media (max-width: 1499px) {
  .blacksmith-card.grimdur .bs-sidebar {
    visibility: visible !important; /* desfaz o hidden do bloco ≥1200px acima */
    display: flex; flex-direction: column; align-self: start;
    position: relative; width: 100%; height: auto; min-height: 340px;
    box-shadow: none !important; border-radius: 0 !important;
    /* moldura com detalhe MAIOR (13→20→24px) e COM FUNDO (panel.png original): o vidro escuro das fatias
       preenche o vão entre a linha da moldura e a arte — a moldura "encaixa" no porta-retrato (pedido Lucas) */
    border: 24px solid transparent !important; border-image: url('../assets/ui/forja/panel.png') 82 stretch !important;
    /* recorte RETRATO do ferreiro na bigorna (gerado via PIL a partir do cenario_v2_teste.png,
       nítido) preenche o corpo do card; mesmo gradiente vertical do retrato PC (apagão em cima
       pro nome, respiro no meio pra arte aparecer, apagão embaixo pras infos+Sair legíveis). */
    background: linear-gradient(180deg, rgba(6,5,9,.85) 0%, rgba(6,5,9,0) 24%, rgba(6,5,9,0) 44%, rgba(6,5,9,.92) 58%, rgba(6,5,9,.98) 100%),
      url('../assets/ui/forja/ferreiro_card_v.png') center top / cover no-repeat, #0a0808 !important;
    background-clip: padding-box !important;
    padding: 8px !important;
  }
  .blacksmith-card.grimdur .bs-grim-name { font-size: .8rem !important; line-height: 1.15; overflow-wrap: break-word; }
  .blacksmith-card.grimdur .bs-grim-quote { font-size: .66rem; }
  .blacksmith-card.grimdur .bs-grim-info { font-size: .66rem; gap: .3rem; }
  /* Sair vira botão de largura total no rodapé compacto (min-width 128px do card PC não cabe aqui) */
  .blacksmith-card.grimdur .bs-exit { width: 100%; min-width: 0 !important; min-height: 32px; padding: 2px 6px !important; font-size: .68rem; }
}
/* coluna 160px: aperta mais um degrau — some a citação (sem espaço pra ela) */
@media (max-width: 700px) {
  .blacksmith-card.grimdur .bs-sidebar { min-height: 300px; padding: 7px !important; }
  .blacksmith-card.grimdur .bs-grim-name { font-size: .72rem !important; }
  .blacksmith-card.grimdur .bs-grim-quote { display: none !important; }
  .blacksmith-card.grimdur .bs-grim-info { font-size: .6rem; gap: .24rem; }
  .blacksmith-card.grimdur .bs-exit { min-height: 30px; font-size: .64rem; }
}
/* coluna 140px (retrato de celular, ex. 390×844): degrau mais estreito — some a linha de Cidade/afixos */
@media (max-width: 540px) {
  .blacksmith-card.grimdur .bs-sidebar { min-height: 270px; padding: 6px !important; }
  .blacksmith-card.grimdur .bs-grim-name { font-size: .68rem !important; }
  .blacksmith-card.grimdur .bs-grim-info { font-size: .56rem; gap: .2rem; }
  .blacksmith-card.grimdur .bs-grim-info .fj-city { display: none !important; }
  .blacksmith-card.grimdur .bs-exit { min-height: 26px; font-size: .58rem; }
}
/* paisagem de celular (pouca altura, ex. 844×390): o card ESTICA a coluna inteira (acompanha os painéis) —
   o min-height fixo de antes virava um "toco" retangular com a arte cortada (bug visto pelo Lucas no aparelho) */
@media (max-width: 1499px) and (max-height: 520px) {
  .blacksmith-card.grimdur .bs-sidebar { align-self: stretch !important; height: auto; min-height: 0; padding: 6px !important; background-position: center 22%; }
  .blacksmith-card.grimdur .bs-grim-name { font-size: .68rem !important; }
  .blacksmith-card.grimdur .bs-grim-quote { display: none !important; }
  .blacksmith-card.grimdur .bs-grim-info { font-size: .56rem; gap: .16rem; }
  .blacksmith-card.grimdur .bs-grim-info .fj-city { display: none !important; }
  .blacksmith-card.grimdur .bs-exit { min-height: 24px; font-size: .56rem; }
}

/* títulos + probabilidade */
.blacksmith-card.grimdur .bs-panel-title { color: #c6aa70 !important; border-bottom: 1px solid #3a352c !important; }
/* .bs-pct color set inline (varia por probabilidade) */
.blacksmith-card.grimdur .itemcr { image-rendering: pixelated; }

/* ══ BANCADA DE ALMAS (15/07, design Lucas — modelo B rosca aprovado nos previews 140/141) ══ */
.fj-bench-title { font-family: var(--font-title, "Silkscreen"); font-size: 8px; color: #8d7f60; letter-spacing: 0.5px; margin: 2px 0 6px; }
.fj-bench { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.fj-bench-slots { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.fj-bench-n { font-family: var(--font-title, "Silkscreen"); font-size: 9px; color: #8d7f60; margin-left: 4px; }
.fj-soul-slot { width: 52px; height: 62px; border: 1px solid #4a3d24; border-radius: 8px; background: #0d0a06;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative;
  cursor: pointer; padding: 0; font: inherit; }
.fj-soul-slot.vazio { border-style: dashed; opacity: 0.5; cursor: default; }
.fj-soul-slot i { font-style: normal; font-size: 19px; line-height: 1; filter: drop-shadow(0 0 4px currentColor); }
.fj-soul-slot em { font-style: normal; font-family: var(--font-title, "Silkscreen"); font-size: 6.5px; color: currentColor; }
.fj-soul-slot u { text-decoration: none; position: absolute; top: 3px; right: 5px; font-family: var(--font-title, "Silkscreen"); font-size: 8px; color: #8d7f60; }
.fj-soul-slot u.sup { color: #f0d489; }
.fj-soul-slot:not(.vazio):hover { border-color: #a05545; }
.fj-bench-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.fj-soul-chip { font-family: var(--font-body, "PixelMplus12"); font-size: 12px; color: currentColor; background: #17130d;
  border: 1px solid #4a3d24; border-radius: 7px; padding: 3px 8px; cursor: pointer; }
.fj-soul-chip b { color: #cbb892; font-weight: normal; }
.fj-soul-chip:hover:not(:disabled) { background: #221a10; }
.fj-soul-chip:disabled { opacity: 0.38; cursor: default; }
.fj-donutbox { display: flex; gap: 16px; align-items: center; margin: 8px 0; }
.fj-donut { width: 104px; height: 104px; border-radius: 50%; position: relative; flex: none;
  box-shadow: 0 0 0 1px #2c2318, 0 0 14px rgba(0,0,0,.6); }
.fj-donut::after { content: ""; position: absolute; inset: 25px; border-radius: 50%; background: #131009; box-shadow: inset 0 0 0 1px #2c2318; }
.fj-donut .c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; }
.fj-donut .c b { font-family: var(--font-title, "Silkscreen"); font-size: 12px; }
.fj-donut .c span { font-family: var(--font-title, "Silkscreen"); font-size: 6px; color: #8d7f60; }
.fj-donut-leg .li { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-family: var(--font-title, "Silkscreen"); font-size: 8.5px; }
.fj-donut-leg .li i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
@media (max-width: 700px) {
  .fj-soul-slot { width: 44px; height: 54px; }
  .fj-soul-slot i { font-size: 16px; }
  .fj-donut { width: 92px; height: 92px; }
  .fj-donut::after { inset: 22px; }
}

/* bancada de almas: neutraliza a moldura-de-vidro/tamanho da regra genérica de botão do painel */
.blacksmith-card.grimdur .blacksmith-panel button.fj-soul-slot,
.blacksmith-card.grimdur .blacksmith-panel button.fj-soul-chip {
  border-image: none !important; box-shadow: none !important; text-transform: none !important;
  letter-spacing: 0 !important; min-height: 0 !important;
}
.blacksmith-card.grimdur .blacksmith-panel button.fj-soul-slot {
  border: 1px solid #4a3d24 !important; border-radius: 8px !important; background: #0d0a06 !important;
  width: 52px !important; height: 62px !important; padding: 0 !important;
}
.blacksmith-card.grimdur .blacksmith-panel button.fj-soul-chip {
  border: 1px solid #4a3d24 !important; border-radius: 7px !important; background: #17130d !important;
  padding: 3px 8px !important; font-size: 12px !important;
}
.blacksmith-card.grimdur .blacksmith-panel button.fj-soul-slot i { font-size: 19px; line-height: 1; filter: drop-shadow(0 0 4px currentColor); }
@media (max-width: 700px) {
  .blacksmith-card.grimdur .blacksmith-panel button.fj-soul-slot { width: 44px !important; height: 54px !important; }
}
/* min-width do result-box (180px) clampa qualquer width — zera nos slots/chips da bancada */
.blacksmith-card.grimdur .blacksmith-result-box button.fj-soul-slot,
.blacksmith-card.grimdur .blacksmith-result-box button.fj-soul-chip {
  min-width: 0 !important; max-width: none !important; width: auto; justify-self: start;
}
.blacksmith-card.grimdur .blacksmith-result-box button.fj-soul-slot { width: 52px !important; }
@media (max-width: 700px) { .blacksmith-card.grimdur .blacksmith-result-box button.fj-soul-slot { width: 44px !important; } }
/* chips compactos ("mesma linha", Lucas 15/07): cor = raridade; nada de nome no chip */
.blacksmith-card.grimdur .blacksmith-result-box button.fj-soul-chip,
.blacksmith-card.grimdur .blacksmith-panel button.fj-soul-chip {
  padding: 2px 6px !important; font-size: 11px !important;
}
.fj-bench-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
@media (max-width: 700px) { .fj-bench-chips { flex-wrap: wrap; overflow: visible; } }
/* bancada v3 (Lucas 15/07): chips em COLUNAS por raridade (inf em cima / sup embaixo), na MESMA linha dos slots */
.fj-bench { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 12px; }
.fj-bench-chips { display: flex; gap: 4px; flex-wrap: nowrap; overflow: visible; }
.fj-chip-col { display: flex; flex-direction: column; gap: 3px; }
.fj-chip-col .fj-soul-chip { width: 100%; }
/* fix varredura 16/07 — REFINO: a bancada de almas mora numa COLUNA ESTREITA (.bs-sub); a fila de chips
   em nowrap fazia a alma Lendária estourar a moldura (+31/44px na prova 149b). Ali (só no refino) os chips
   quebram linha; no craft (result-box largo) seguem em linha única. */
.blacksmith-card.grimdur .bs-sub .fj-bench-chips { flex-wrap: wrap !important; overflow: visible; }
/* fix varredura 16/07 — DESMANCHAR: o ícone procedural de armadura (.cr, um <div> bloco) empurrava
   o nome pra 2ª linha (Peitoral/Faixa). inline-flex mantém ícone e nome na MESMA linha. */
.blacksmith-card.grimdur .fj-dis-row > span:first-child { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }

/* fix varredura 16/07 (movido pra FORA do @media ≤700px — o caso reprovado era @812): selects com texto
   longo ("Arma — Machado Enferrujado") comiam o chevron ▼ e clipavam na borda; ellipsis + respiro à direita. */
.blacksmith-action-grid select { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-right: 1.5em; }
@media (max-width: 900px) { .blacksmith-card.grimdur .bs-outcome { min-width: 0; } } /* verificador: min-width 140 estourava 28px o content-box @812 */
/* fix definitivo dos selects (16/07): appearance none + chevron próprio (SVG dourado) + ellipsis —
   a seta nativa sumia sob texto longo ("Arma — Machado Enferrujado") em qualquer largura apertada. */
#forge .blacksmith-action-grid select {
  appearance: none; -webkit-appearance: none; width: 100%; min-width: 0;
  overflow: hidden !important; text-overflow: ellipsis; white-space: nowrap;
  padding-right: 24px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23c8b596'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center;
}
/* chevron GARANTIDO (16/07): o texto longo da option pinta por cima do bg do select (quirk do Chromium
   ignora padding/ellipsis na option) → seta num chip OPACO sobreposto via ::after do label. */
#forge .blacksmith-action-grid label:has(select) { position: relative; }
#forge .blacksmith-action-grid label:has(select)::after {
  content: "▼"; position: absolute; right: 1px; bottom: 7px; font-size: 9px; line-height: 1;
  color: #c8b596; background: #11100e; padding: 6px 7px 6px 5px; pointer-events: none;
  border-left: 1px solid #3d2b1e;
}

/* ══ 18/07 — REFINO DE ÚNICO (Ponto 1) + PREVIEW DE AFIXO (Ponto 2) ══ */
/* cabeçalho de seção da lista do refino (Pares / Únicos) */
.blacksmith-card.grimdur .fj-list-sec { font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: #b89355; padding: 5px 2px 3px; border-bottom: 1px solid #3a2c19; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* linha-companheira do afixo escolhido (Fabricar) + avisos curtos do Trocar */
.blacksmith-card.grimdur .fj-aff-line { font-size: .74rem; color: #cbb892; overflow-wrap: anywhere; }
.blacksmith-card.grimdur .fj-aff-line b { color: #e9dcb0; }
/* SAI ➜ ENTRA da aba Trocar: dois mini-cards + seta; quebra linha no estreito sem clipar */
.fj-swap { display: flex; align-items: stretch; justify-content: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.fj-swap-col { flex: 1 1 150px; min-width: 0; display: grid; gap: 2px; align-content: start; text-align: center; padding: 6px 8px; background: rgba(0,0,0,.25); border: 1px solid #3a3630; border-radius: 6px; }
.fj-swap-col em { font-style: normal; font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: #9a8a70; }
.fj-swap-col b { font-size: .8rem; color: #e0a24a; overflow-wrap: anywhere; }
.fj-swap-col.in { border-color: #6a5a2e; background: rgba(217,178,76,.10); }
.fj-swap-col.in b { color: #f0c96b; }
.fj-swap-col small { font-size: .68rem; color: #c8b596; overflow-wrap: anywhere; }
.fj-swap-arrow { align-self: center; color: #d8ad5a; font-size: 1rem; flex: 0 0 auto; }
/* bloco "Item resultante" (delta de stats) do Trocar */
.fj-after { display: grid; gap: 3px; background: rgba(0,0,0,.22); border: 1px solid #3a3630; border-radius: 6px; padding: 6px 10px 8px; min-width: 0; }
.fj-after-title { font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: #b89355; padding-bottom: 3px; border-bottom: 1px solid #3a2c19; }
.fj-after .bs-stat { border-bottom: 1px dashed #241c12; }

/* ═══ ONDA 4 (28/07, auditoria visual #15): select "Oferenda" do REFINO ═══
   O select mora num <label class="bs-prot"> (fora do .blacksmith-action-grid), então ficava com o cinza
   NATIVO do Windows (appearance:auto, 19px) vazando da moldura; e o overflow-wrap:anywhere da regra
   ".bs-prot" lá em cima fazia o rótulo "Oferenda:" — texto solto que vira item anônimo do flex, com
   min-content de 1 letra — empilhar UMA LETRA POR LINHA. Rótulo em linha única; o select ganha o MESMO
   kit dos selects do Fabricar (regras .blacksmith-action-grid select acima). */
/* flex-wrap: na coluna estreita do 812 o select desce INTEIRO pra 2ª linha (largura cheia), em vez de
   ficar espremido a ~45px ao lado do rótulo; em telas largas continua tudo numa linha só. */
.blacksmith-card.grimdur .bs-prot:has(select) { overflow-wrap: normal; white-space: nowrap; flex-wrap: wrap; }
#forge .bs-prot select {
  flex: 1 1 auto; min-width: 0; width: auto; min-height: 36px;
  background-color: #11100e; border: 1px solid #3d2b1e; border-radius: 3px; color: #e7d4a5;
  padding: 0.45rem 24px 0.45rem 0.45rem;
  appearance: none; -webkit-appearance: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23c8b596'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center;
}

/* ═══ ONDA 4 (28/07, auditoria visual #24): aba Aprender exigia 5,5 telas de rolagem ═══
   A lista não tem botão ÚNICO de ação (cada linha carrega o próprio "Aprender"), então sticky não se
   aplica — a âncora vem de devolver a rolagem INTERNA à lista (o override grimdur zerava o max-height
   do kit base e a moldura esticava a página inteira): a moldura fica na tela e o conteúdo rola dentro. */
.blacksmith-card.grimdur .blacksmith-list { max-height: min(70vh, 620px); overflow: auto; }

/* ═══ ONDA 4 (28/07, auditoria visual #31): títulos de painel cortados no Refinar ═══
   O nowrap+ellipsis da regra ".bs-panel-title" lá em cima decapitava "Probabilidade de Sucesso" (12px a
   menos) na coluna de ~112px do 812×375. Sem aumentar fonte: o título pode quebrar em 2 linhas compactas
   (em telas largas cabe em 1 linha e nada muda). O .bs-sec (sidebar) fica como estava. */
.blacksmith-card.grimdur .bs-panel-title { white-space: normal; line-height: 1.3; }