/* INVENTÁRIO NOVO — piloto de reconstrução (12/09/2026). v6: MUDANÇA DE
   DIREÇÃO — depois de 5 rodadas tentando bater com as referências de
   fantasia dourada do Zerg sem convergir, ele decidiu ficar com o visual
   ATUAL do jogo (azul escuro) e só trocar a fileira de botões "Armário
   1..16" pelo dropdown de faixa fixa que já construímos. Esta versão
   reconstrói as CORES/BORDAS/FONTE reais do jogo (extraídas com
   getComputedStyle do jogo ao vivo, não estimadas de imagem) — não usa
   nenhum dos assets dourados das rodadas anteriores (`santuario.webp`,
   `slot-frame.webp`, `botao-fundo.webp`, `fundo-catedral.jpg`,
   `cena-personagem.jpg` — ficam no disco sem uso, não referenciados
   daqui pra baixo). Ver index.js pro porquê do DOM próprio e o escopo.

   🚨 v19 (13/09) — DIREÇÃO DE ARTE aplicada na moldura, não inventada:
   reusa EXATAMENTE o sistema já em produção em `identidade/styles.css`
   (a "cara do prêmio do baú", ver memória potato-identidade-visual e
   potato-direcao-de-arte-prompt) — mesmas cores medidas
   (fundo #241609→#170e07→#100a05 com brilho radial, borda #120b05,
   cantoneiras douradas rgb(201 154 76), título Cinzel com degradê
   branco→azul, botão dourado #f9cd68→#d9901c SÓ pra ação principal —
   nunca mais de um dourado por tela, regra dele mesmo). Não crio arquivo
   `identidade/styles.css` novo aqui (é compartilhado, de produção, fora
   do escopo tocar nele) — reaplico os MESMOS valores direto nas classes
   `.inv2-*` deste módulo, igual ao padrão já usado pra Talentos/Armários/
   Correio/etc (CSS-only, por seletor, sem mexer em posição/tamanho/
   ordem — regra dele: "moldura, título e botão, nada mais"). */

@font-face {
  font-family: Cinzel;
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/potato/fonts/cinzel-latin.woff2) format('woff2');
}

.inv2 {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  font-family: 'Baloo 2', system-ui, sans-serif;
  color: #ede1c8;
}

/*
 * 🚨 SENSAÇÃO DE CLIQUE (v13, pedido do Zerg: "os botões quando são
 * clicados não dão a sensação de clique"). Uma regra SÓ pra todos os
 * botões clicáveis da tela, em vez de repetir em cada classe — encolhe
 * levinho no `:active` (dedo/mouse ainda apertado) e volta rápido no
 * solto. `transition` curta (0.08s) de propósito: feedback tem que
 * parecer instantâneo, não uma animação.
 */
.inv2-botao-acao,
.inv2-botao-secundario,
.inv2-cat,
.inv2-gema:not(:disabled),
.inv2-doll-slot,
.inv2-aviso-minimizar,
.inv2-armario-select {
  transition: transform 0.08s, filter 0.08s, background 0.12s, border-color 0.12s;
}
.inv2-botao-acao:active:not(:disabled),
.inv2-botao-secundario:active:not(:disabled),
.inv2-cat:active,
.inv2-gema:not(:disabled):active,
.inv2-doll-slot:active {
  transform: scale(0.93);
  filter: brightness(0.88);
}

.inv2-veu {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 14, 0.72);
  backdrop-filter: blur(2px);
}

.inv2-caixa {
  position: relative;
  /* v7: aumentado (Zerg: "os itens não vão até o final da janela") — não
     achei bug de layout na grade em si (medi com getBoundingClientRect,
     ela já preenche o próprio container até o pixel), então a leitura mais
     provável é que o modal como um todo ficasse pequeno perto do painel de
     tela cheia do jogo real. Mais espaço de tela usado, mesma estrutura. */
  width: min(1500px, 98vw);
  height: min(920px, 96vh);
  display: flex;
  flex-direction: column;
  /* 🚨 v33 — MOLDURA TROCADA pra madeira+bronze (pedido do Zerg: "toda a
     janela continua azul, só a parte da Forja ficou na identidade
     visual... vamos transformar toda a página"). A moldura azul+dourado
     da v19 (Direção de Arte ORIGINAL, reaproveitando `identidade/
     styles.css` de produção) fica documentada abaixo só como histórico —
     ainda não decidido se volta um dia. Mesmo princípio de sempre
     (cantoneiras em só 2 cantos, framing econômico), cores nas mesmas
     famílias da bancada da Forja (`.inv2-forja-bancada`), pra CAIXA
     inteira ler como uma peça só. */
  background:
    radial-gradient(120% 55% at 50% -6%, rgb(255 140 40 / 0.08), transparent 60%),
    linear-gradient(180deg, #241609, #170e07 46%, #100a05);
  border: 2px solid #120b05;
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgb(201 154 76 / 0.18),
    0 0 40px #000000cc,
    0 24px 60px rgb(0 0 0 / 0.6);
  overflow: hidden;
}
.inv2-caixa::before,
.inv2-caixa::after {
  content: '';
  position: absolute;
  z-index: 2;
  width: 26px;
  height: 26px;
  border: 2px solid rgb(201 154 76 / 0.5);
  pointer-events: none;
}
.inv2-caixa::before {
  top: 7px;
  left: 7px;
  border-right: 0;
  border-bottom: 0;
  border-radius: 12px 0 0;
}
.inv2-caixa::after {
  bottom: 7px;
  right: 7px;
  border-left: 0;
  border-top: 0;
  border-radius: 0 0 12px;
}

.inv2-topo {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
  background: linear-gradient(180deg, #2c1c0d, #1c1108);
  border-bottom: 1px solid #120b05;
}

.inv2-titulo {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, #f8e2ab, #d9a44a 55%, #a9782c);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.6));
}
.inv2-titulo small {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #9c8a6c;
  font-family: system-ui, sans-serif;
  background: none;
  -webkit-text-fill-color: #9c8a6c;
  filter: none;
  margin-left: 8px;
}

.inv2-abas {
  display: flex;
  gap: 8px;
  flex: 1;
}
.inv2-aba {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid #120b05;
  background: linear-gradient(180deg, #201409, #140c05);
  color: #b9a583;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
}
.inv2-aba:hover:not(.inv2-aba--ativa) {
  background: linear-gradient(180deg, #291a0c, #1a1008);
  color: #e9d9bd;
}
.inv2-aba--ativa {
  /* Dourado fica só pro botão de ação principal / aba ativa — nunca em
     duas coisas na mesma tela ("regra da economia visual" dele), agora
     na família bronze em vez de azul. */
  background: linear-gradient(180deg, #d9a44a, #a9702a);
  border-color: #f6d68a;
  color: #1c1109;
  box-shadow: inset 0 1px rgb(255 255 255 / 0.4), 0 3px #4d3005;
}
/* 🚨 só Buff de Baú continua "desligado" (v32) — Forja ganhou aba de
   verdade e precisa parecer clicável igual as outras. */
.inv2-aba--inerte {
  cursor: default;
  opacity: 0.6;
}
.inv2-aba--inerte:hover {
  background: linear-gradient(180deg, #201409, #140c05) !important;
  color: #b9a583 !important;
}

.inv2-fechar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgb(201 154 76 / 0.4);
  background: rgb(16 10 5 / 0.85);
  color: #d9c6a3;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.inv2-fechar:hover {
  background: #2c1c0d;
  color: #f3e6c9;
}

.inv2-corpo {
  flex: 1;
  display: grid;
  /* 🚨 495px, NÃO 340px (v12) — medido no jogo real
     (`.panel.equipment.getBoundingClientRect().width`): os painéis de
     Ofensivos/Defensivos flanqueando o boneco precisam desse espaço, 340px
     nunca coube os dois de propósito. */
  grid-template-columns: 495px 1fr;
  gap: 16px;
  padding: 16px;
  overflow: hidden;
}

/* ── coluna do herói / armário ──────────────────────────────────── */

.inv2-heroi {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-right: 2px;
}

/* Aviso de armário em uso — mesmo tom do jogo real (faixa dourada de
   aviso), único lugar desta tela onde o dourado sobrevive porque é o
   próprio jogo que usa essa cor aqui, não escolha nossa. */
.inv2-aviso-armario {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #6b5010;
  background: linear-gradient(180deg, #2a2008, #1c1605);
  color: #f2d488;
  font-size: 12px;
  line-height: 1.5;
  font-family: system-ui, sans-serif;
}
.inv2-aviso-armario strong {
  color: #ffcf66;
}
.inv2-aviso-armario button {
  margin-top: 8px;
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid #cf9a2e;
  background: linear-gradient(180deg, #e0ab3a, #b8811a);
  color: #241a04;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

/* Minimizar/expandir o aviso (v8, pedido do Zerg: "▲ do lado do
   Desativar" — achado no print real, ícone pequeno sem função própria
   documentada ali; aqui liga um recolher de verdade). Recolhido, some o
   texto explicativo e o botão Desativar — só a linha com a seta fica,
   compacta. */
.inv2-aviso-armario__linha {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.inv2-aviso-minimizar {
  flex-shrink: 0;
  border: none;
  background: none;
  color: #f2d488;
  font-size: 11px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
}
.inv2-aviso-minimizar:hover {
  color: #ffcf66;
}
.inv2-aviso-armario--fechado .inv2-aviso-armario__texto,
.inv2-aviso-armario--fechado #inv2-aviso-desativar {
  display: none;
}

/* Cena/boneco (v7, pedido do Zerg desde a 1ª rodada: personagem tem que
   aparecer). Compacta, não é hero-image — o jogo real também não dá muito
   espaço pra isso na tela de Inventário. DISCLAIMER: boneco decorativo por
   classe (`ui/armarios/*.png`, real, já existe no jogo), não um render do
   equipamento realmente vestido — isso pediria canvas/WebGL. */
.inv2-cena {
  height: 140px;
  border-radius: 10px;
  border: 1px solid rgb(201 154 76 / 0.3);
  background: linear-gradient(180deg, #1c1108, #140c05);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.inv2-cena__boneco {
  /* 🚨 CORRIGIDO DE VERDADE (3ª tentativa — as 2 primeiras, registradas
     em memória, não resolveram). Causa raiz real: `.inv2-cena` é grid
     com 1 filho e SEM `grid-template-rows` — a trilha nasce do
     TAMANHO DO CONTEÚDO ("auto"), então cresce pro tamanho da imagem
     (261px) mesmo com o contêiner tendo `height:140px` explícito. Uma
     vez que a trilha cresceu pro tamanho da imagem, QUALQUER
     percentual no filho (`height:100%`, `max-height:100%`) fica sem
     base de verdade pra resolver — dependência circular (a trilha
     depende do filho, o filho percentual depende da trilha).
     A correção que realmente funciona: `max-height` em PX FIXO (o
     MESMO número do `height` do contêiner acima, 140px) — não depende
     de porcentagem nem de como o grid mediu a trilha, só diz "nunca
     passe de 140px", e o navegador encolhe a imagem de verdade
     (`object-fit:contain` cuida da proporção). Se `.inv2-cena` mudar
     de altura de novo, este número tem que acompanhar — não é mais
     automático, é o preço de fugir da porcentagem. */
  max-height: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

/* ── Paperdoll de "Meu equipamento" (v8) ─────────────────────────────
   🚨 ACHADO DE VERDADE, NÃO ESTIMADO (a causa raiz de 7 rodadas erradas:
   a conta de teste compartilhada ficava sempre 0/14, então NUNCA dava pra
   ver como essa tela realmente aparece com peças de verdade equipadas).
   Com a conta equipada de propósito nesta rodada e o DOM do jogo ao vivo
   inspecionado (`.equipment__doll`/`.equipment__col`/`.equipment__slot`/
   `.equipment__row`), o jogo real: `display:flex` (não grid), 4 slots numa
   coluna à esquerda, o personagem no centro, 4 numa coluna à direita, e
   MAIS 6 numa fileira embaixo — 4+4+6=14. As posições abaixo (ESQ/DIR/
   LINHA em `pintarEquipArea()`) são a ORDEM REAL de slot em cada coluna,
   não um chute. Quando um Armário numerado está selecionado, o jogo real
   troca essa área pelo cartão compacto (`.arm-emb`) — sem estes slots — o
   que aqui continua sendo o mesmo `.inv2-cena` de sempre (ver acima). */
.inv2-doll {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  /* v23 (pedido real do Zerg): ancora o palco expandido abaixo, que sai
     do fluxo pra poder ficar maior que o espaço reservado entre as
     colunas sem empurrá-las. */
  position: relative;
}
.inv2-doll__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  /* Fica por CIMA do palco (pedido dele: "a asa passar por trás dos
     itens pra não atrapalhar") — os slots continuam clicáveis/legíveis
     mesmo com a asa se estendendo por baixo deles. */
  position: relative;
  z-index: 2;
}
.inv2-doll__palco {
  position: relative;
  width: 190px; /* mantém o respiro reservado no fluxo entre as 2 colunas */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  /* v23: era `hidden` — cortava a asa quando ela é mais larga que este
     respiro. O boneco/canvas de verdade agora é maior e ABSOLUTO (ver
     abaixo), soltando-se deste retângulo por baixo das colunas em vez
     de ser cortado nele. */
  overflow: visible;
  z-index: 1;
}
.inv2-doll__brilho {
  position: absolute;
  inset: 8% 12%;
  border-radius: 50%;
  background:
    radial-gradient(58% 46% at 50% 40%, rgba(255, 150, 60, 0.28), transparent 72%),
    radial-gradient(90% 70% at 50% 55%, rgba(60, 30, 10, 0.55), transparent 78%);
  pointer-events: none;
}
.inv2-doll__pedestal {
  position: relative;
  z-index: 0;
  width: 70%;
  height: 14px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(50% 50%, rgba(255, 200, 120, 0.55), transparent 70%);
  pointer-events: none;
}
.inv2-doll__boneco {
  /* v23: absoluto e maior, mesma mudança do canvas abaixo — ver o
     comentário lá pro porquê (pedido real do Zerg: tamanho do
     personagem de volta ao normal mesmo com asa larga, sem cortar).
     Ainda existe como FALLBACK (`iniciarAnimacaoPersonagem` cai pra
     isto se o navegador não tiver WebGL — ver index.js). */
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 1;
  /* v26: +10% (pedido real do Zerg — "pode crescer ele em torno de
     10% a mais já que passa por trás dos itens e não atrapalha"). */
  max-height: 242px;
  width: auto;
  height: auto;
  max-width: 286px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  pointer-events: none;
}
/* Personagem animado de verdade (v17, motor de `/potato-assets/`).
   🚨 v23 (pedido real do Zerg — print mostrando o personagem cortado E
   depois pequeno demais): ABSOLUTO e maior que o respiro de 190px do
   `.inv2-doll__palco`, saindo por baixo das colunas de equip (que têm
   z-index maior, ver `.inv2-doll__col`) em vez de: (a) ser cortado nele
   (`overflow:hidden` antigo) ou (b) encolher o personagem inteiro pra
   caber a asa larga dentro de 150px (o enquadramento dinâmico da v23
   ajusta o ZOOM pra caber TUDO — corpo+asa — numa caixa maior, então
   dar mais espaço aqui é o que faz o corpo voltar a ficar grande). */
.inv2-doll__boneco-canvas {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 1;
  /*
   * 🚨🚨 REVERTIDO DE EMERGÊNCIA (v41 cancelado) — Zerg reportou ao vivo
   * que crescer o canvas fisicamente (mantendo `bottom:0`) empurra o PÉ
   * pra CIMA (matematicamente inevitável: a âncora vertical é uma FRAÇÃO
   * fixa do canvas, canvas maior = mais pixels absolutos acima da borda
   * de baixo = personagem flutuando acima da luz do chão). Provado que
   * não dá pra compensar isso só ajustando a âncora sem cancelar o
   * ganho de espaço contra corte — os dois dependem do MESMO fator de
   * escala. Corte da arma/vfx volta a acontecer até a correção certa
   * (compressão só da parte abaixo do pé, sem mexer no pé nem no
   * tamanho do canvas) ser implementada — ver [[potato-inventario-piloto-reconstrucao]].
   */
  width: 286px;
  height: 242px;
  pointer-events: none;
}
.inv2-doll__linha {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
/* Ofensivos/Defensivos (v12) — empilhado acima/abaixo do boneco, ver
   aviso de aproximação no comentário de `pintarStats()` no index.js. */
.inv2-doll__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  padding: 6px 8px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: #140c05;
  border: 1px solid #2c1c0d;
}
.inv2-doll__stats[data-lado='dir'] {
  margin-top: 8px;
  margin-bottom: 0;
}
.inv2-doll__stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 10.5px;
  font-family: system-ui, sans-serif;
  white-space: nowrap;
}
.inv2-doll__stat span {
  color: #b9a583;
}
.inv2-doll__stat strong {
  color: #e9d9bd;
  font-size: 11px;
}
/* Mesma fórmula tingida por raridade de `.inv2-item`/`.inv2-cena__boneco`
   (v7) — reaproveitada aqui, não reinventada. */
.inv2-doll-slot {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: 1px solid transparent;
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(255, 255, 255, 0.125) 0%, transparent 62%),
    radial-gradient(130% 100% at 50% 122%, color-mix(in srgb, var(--rarity, #9DA9B4) 55%, black) 0%, transparent 70%),
    linear-gradient(color-mix(in srgb, var(--rarity, #9DA9B4) 30%, black) 0%, rgb(10, 7, 4) 100%);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  background-size: cover, cover, cover;
  transition: transform 0.1s, box-shadow 0.1s;
}
.inv2-doll-slot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--arte, none) center / contain no-repeat;
}
.inv2-doll-slot:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px #00000060;
}
.inv2-doll-slot--cheio {
  box-shadow: var(--rarity, #4a3616) 0 0 0 1.6px inset, rgba(255, 255, 255, 0.17) 0 1px 0 inset;
}
.inv2-doll-slot--alvo-valido {
  box-shadow: 0 0 0 2px #59d97a;
}
.inv2-doll-slot--alvo-invalido {
  box-shadow: 0 0 0 2px #d9615c;
}
.inv2-doll-slot__rotulo {
  font-size: 7px;
  color: #a08a68;
  text-align: center;
  padding: 0 3px;
  font-family: system-ui, sans-serif;
  line-height: 1.15;
}
.inv2-doll-slot__grau {
  position: absolute;
  bottom: 1px;
  right: 3px;
  font-size: 8px;
  font-weight: 700;
  color: #ffe9a6;
  text-shadow: 0 1px 2px #000;
  font-family: system-ui, sans-serif;
}
/* "+N" de aprimoramento (`item.fort`, confirmado no `/game/state` real —
   mesmo campo do `bag-slot__fort`/`arm-emb__fort` do jogo ao vivo). */
.inv2-doll-slot__fort {
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: 8px;
  font-weight: 700;
  color: #9be69b;
  text-shadow: 0 1px 2px #000;
  font-family: system-ui, sans-serif;
}

.inv2-eq-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.inv2-eq-titulo {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #b9a583;
  font-family: system-ui, sans-serif;
  font-weight: 700;
}
.inv2-eq-titulo b {
  color: #ede1c8;
  margin-left: 6px;
}
.inv2-toggle-usar {
  display: flex;
  gap: 6px;
}
/* 🚨 `[hidden]` sozinho perde pra `display:flex` acima (mesma
   especificidade, mas regra de autor sempre vence a do navegador) —
   sem isto, `.hidden=true` no JS não escondia nada de verdade. */
.inv2-toggle-usar[hidden] {
  display: none;
}
/* 🚨 CURSOR/CLIQUE DE VERDADE (v14, pedido do Zerg: "os botões de
   desativar/usar ainda não passam a sensação de clique") — ficaram de
   fora da regra global de `:active` da v13 porque são `<button>` sem
   nenhuma das classes que a regra lista; `cursor:default` também era
   sobra de quando eram inertes de propósito. */
.inv2-toggle-usar button {
  padding: 5px 12px;
  border-radius: 7px;
  border: 1px solid rgb(201 154 76 / 0.3);
  background: linear-gradient(180deg, #201409, #140c05);
  color: #b9a583;
  font-size: 10px;
  font-weight: 700;
  font-family: system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.08s, filter 0.08s;
}
.inv2-toggle-usar button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.inv2-toggle-usar button:active:not(:disabled) {
  transform: scale(0.93);
  filter: brightness(0.88);
}

/* Cartão de coleção — VISUAL apenas (dados reais de coleção por armário
   ficam fora desta rodada, ver comentário no report). */
.inv2-colecao {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgb(201 154 76 / 0.3);
  background: linear-gradient(180deg, #1c1108, #140c05);
}
.inv2-colecao-titulo {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #9c8a6c;
  font-family: system-ui, sans-serif;
  font-weight: 700;
}
.inv2-colecao-modo {
  font-size: 13px;
  font-weight: 700;
  color: #ede1c8;
  margin: 2px 0 4px;
}
.inv2-colecao-nota {
  font-size: 10.5px;
  color: #b9a583;
  font-family: system-ui, sans-serif;
  margin-bottom: 8px;
}
/* Fração grande do bônus (v13) — "36 / 125 VIT" + barra, igual o jogo
   real mostra (antes só existia escondido numa frase corrida). */
.inv2-colecao-fracao {
  margin: 2px 0 6px;
}
.inv2-colecao-fracao span {
  font-family: system-ui, sans-serif;
}
#inv2-colecao-fracao-num {
  font-size: 16px;
  font-weight: 800;
  color: #ffcf66;
}
#inv2-colecao-fracao-alvo {
  font-size: 11px;
  color: #e9d9bd;
  font-weight: 700;
  text-transform: uppercase;
  margin-left: 4px;
}
.inv2-colecao-barra {
  margin-top: 4px;
  height: 5px;
  border-radius: 3px;
  background: #140c05;
  overflow: hidden;
}
.inv2-colecao-barra__cheia {
  height: 100%;
  background: linear-gradient(90deg, #ffcf66, #ffb84d);
  border-radius: 3px;
  transition: width 0.2s;
}
.inv2-gemas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
/* 🚨 CRISTAIS DE VERDADE (v12) — troca a pedra CSS por
   `/potato/colecao/cristais/*.png`, o mesmo asset que o jogo real usa
   (ver comentário grande em `gemaHtml`, index.js). Clicável de verdade
   agora (`/game/locker/colecao`) — só desabilitado em "Meu equipamento". */
.inv2-gema {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px;
  border: none;
  background: none;
  border-radius: 8px;
  filter: grayscale(0.85) brightness(0.75);
  transition: filter 0.12s, transform 0.12s;
}
.inv2-gema img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  pointer-events: none;
}
.inv2-gema:not(:disabled):hover {
  transform: translateY(-1px);
  filter: grayscale(0.4) brightness(0.95);
}
.inv2-gema--ativa {
  filter: none;
  background: radial-gradient(circle, #ffcf6633, transparent 70%);
  box-shadow: 0 0 0 1.5px #ffcf66, 0 0 6px #ffcf6680;
}
.inv2-gema__n {
  position: absolute;
  bottom: -3px;
  right: -3px;
  min-width: 13px;
  height: 13px;
  padding: 0 2px;
  border-radius: 7px;
  background: #140c05;
  border: 1px solid rgb(201 154 76 / 0.3);
  color: #e9d9bd;
  font-size: 8.5px;
  font-weight: 700;
  font-family: system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ── seletor de armário: dropdown (carregado das rodadas anteriores,
   só restilizado pra paleta azul) ──────────────────────────────── */
.inv2-armario-select {
  width: 100%;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 32px 10px 14px;
  border: 1px solid rgb(201 154 76 / 0.3);
  border-radius: 8px;
  color: #ede1c8;
  appearance: none;
  -webkit-appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, #e2b45a 50%) calc(100% - 18px) center / 5px 5px no-repeat,
    linear-gradient(135deg, #e2b45a 50%, transparent 50%) calc(100% - 13px) center / 5px 5px no-repeat,
    linear-gradient(180deg, #291a0c, #1a1008);
  cursor: pointer;
}
.inv2-armario-select option {
  background: #1c1108;
  color: #ede1c8;
}
.inv2-armario-select option:disabled {
  color: #7a6a4d;
}

.inv2-armario-painel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px 0;
}
.inv2-armario-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/*
 * 🚨 TAMANHO — HISTÓRICO DE IDA E VOLTA (v14). v7 reduziu este bloco
 * inteiro (Zerg: "o rank está desproporcional ao original", medido
 * 11px de estrela no jogo real). v10 aumentou só o número do poder.
 * Agora (v14) ele mandou foto de referência mostrando o bloco bem
 * maior de novo, ao lado de "Equipar melhores"/"Tirar tudo" também
 * maiores — recalibrado pela imagem mais recente, não pela medição de
 * getComputedStyle da v7 (as duas instruções são do próprio Zerg, em
 * momentos diferentes; a mais recente vale).
 */
.inv2-armario-badge {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  object-fit: contain;
}
.inv2-armario-texto {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  align-items: baseline;
  min-width: 0;
}
.inv2-armario-poder-rotulo {
  font-size: 9px;
  color: #9c8a6c;
  letter-spacing: 0.06em;
  font-family: system-ui, sans-serif;
}
.inv2-armario-poder-valor {
  font-size: 24px;
  font-weight: 800;
  color: #ffb84d;
  grid-row: 1;
}
.inv2-armario-nome {
  grid-column: 1 / -1;
  font-size: 11px;
  color: #b9a583;
  font-family: system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.power__estrelas {
  grid-column: 1 / -1;
  display: flex;
  gap: 2px;
  font-size: 15px;
  line-height: 1;
}
.power__estrela {
  color: rgb(201 154 76 / 0.45);
}
.power__estrela[data-cheia='true'] {
  color: #ffcf66;
  text-shadow: 0 0 6px #ffcf6680;
}

.inv2-armario-acoes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.inv2-botao-secundario {
  padding: 10px 18px;
  border: 1px solid rgb(201 154 76 / 0.3);
  border-radius: 8px;
  background: linear-gradient(180deg, #291a0c, #1a1008);
  color: #e9d9bd;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.12s;
}
.inv2-botao-secundario:hover:not(:disabled) {
  filter: brightness(1.3);
}
.inv2-botao-secundario:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* 🚨 ÚNICO botão dourado do painel principal (Direção de Arte, v19) —
   "Guardar melhores" é a ação mais valiosa da tela (equipar automático
   pelas regras reais do servidor); "Tirar tudo" continua na família azul
   ao lado, sem competir pelo dourado. */
#inv2-guardar-melhores:not(:disabled) {
  border: 2px solid #ffe6a8;
  background: linear-gradient(180deg, #f9cd68, #d9901c);
  box-shadow: inset 0 1px rgb(255 255 255 / 0.5), 0 3px #6d3f06, 0 0 20px -6px rgb(240 180 60 / 0.9);
  color: #2a1a02;
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#inv2-guardar-melhores:hover:not(:disabled) {
  filter: brightness(1.1);
}

/* ── botões do topo (Selecionar/Vender/Artefatos/Armário/Grau/Raridade) ── */
.inv2-acoes-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inv2-botao-acao,
.inv2-select {
  /* 🚨 `appearance:none` (v34, achado testando o reskin total): sem
     isso o `<select>` nativo do Chromium pinta o PRÓPRIO fundo escuro
     por baixo do gradiente CSS (só aparecia sutil demais pra notar no
     tema azul antigo — o chrome nativo dele já É um azul bem escuro,
     quase igual; ficou óbvio contra o bronze novo). */
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgb(201 154 76 / 0.3);
  background: linear-gradient(180deg, #201409, #140c05);
  color: #e9d9bd;
  font-family: system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
}
.inv2-botao-acao:hover {
  filter: brightness(1.2);
}
.inv2-botao-acao--ativo {
  background: linear-gradient(rgb(217, 164, 74) 0%, rgb(169, 112, 42) 100%);
  border-color: rgb(246, 214, 138);
  color: rgb(28, 17, 9);
}
.inv2-botao-acao--vender.inv2-botao-acao--ativo {
  background: linear-gradient(180deg, #b23a3a, #8f2626);
  border-color: #e08a8a;
  color: #fff5f5;
}
.inv2-grade--modo-venda {
  outline: 2px dashed #e2b45a80;
  outline-offset: -2px;
}

/* ── coluna da bolsa ────────────────────────────────────────────── */

.inv2-bolsa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}

.inv2-bolsa-topo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.inv2-bolsa-titulo {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #b9a583;
  font-family: system-ui, sans-serif;
  font-weight: 700;
  white-space: nowrap;
}
.inv2-bolsa-titulo b {
  display: block;
  font-size: 18px;
  color: #ffb84d;
  letter-spacing: 0;
}

.inv2-busca {
  flex: 1;
  min-width: 160px;
  background: linear-gradient(180deg, #201409, #140c05);
  border: 1px solid rgb(201 154 76 / 0.3);
  border-radius: 8px;
  padding: 8px 14px;
  color: #ede1c8;
  font-size: 13px;
  font-family: system-ui, sans-serif;
  outline: none;
}
.inv2-busca:focus {
  border-color: #e2b45a;
  box-shadow: 0 0 0 2px #e2b45a33;
}
.inv2-busca::placeholder {
  color: #7a6a4d;
}

.inv2-filtros {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
/* Bolsas (v13) — mostra espaço extra ganho + cada bolsa encaixada, igual
   a linha "BOLSAS +N espaços" real. Comprar/trocar bolsa fica de fora
   desta rodada (só a exibição, que era o que faltava). */
.inv2-bolsas {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: system-ui, sans-serif;
}
.inv2-bolsas__rotulo {
  font-size: 9px;
  color: #9c8a6c;
  letter-spacing: 0.06em;
  display: flex;
  flex-direction: column;
  margin-right: 2px;
}
.inv2-bolsas__rotulo b {
  color: #ffb84d;
  font-size: 11px;
}
.inv2-bolsa-chip {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: 6px;
  background: #140c05;
  border: 1px solid #2c1c0d;
  font-size: 10px;
  font-weight: 700;
  color: #e9d9bd;
}
.inv2-bolsa-chip img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* Vender bolsa por metade do preço (Zerg 22/09, 8º lote #7). ✕ discreto; abre diálogo de confirmação em tela cheia (ver .inv2-confirma). */
.inv2-bolsa-chip__vender {
  appearance: none;
  border: none;
  background: transparent;
  color: #9c8a6c;
  font-size: 10px;
  line-height: 1;
  padding: 1px 2px;
  cursor: pointer;
  border-radius: 4px;
}
.inv2-bolsa-chip__vender:hover {
  color: #ffb84d;
  background: #241608;
}

/* Diálogo "Certeza que quer vender a Bolsa X por Y?" (Zerg 22/09, item #2 do lote:
   antes era um "armar/confirmar" de 2 cliques no próprio chip, ele pediu um botão
   grande NA TELA). Mesmo padrão visual/z-index do #inv2-guia (já em produção),
   pra não inventar uma 3ª linguagem visual de overlay neste módulo. Anexado a
   `raiz` (não document.body — o listener de clique é delegado em raiz), mas
   position:fixed cobre a viewport inteira do mesmo jeito. */
.inv2-confirma {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(8 5 2 / 0.72);
  padding: 16px;
}
.inv2-confirma__caixa {
  background: linear-gradient(165deg, #241609 0%, #1c1108 55%, #100a05 100%);
  border: 1px solid #100a05;
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgb(201 154 76 / 0.3),
    0 18px 40px -12px #000000b0;
  color: #ede1c8;
  padding: 22px 24px;
  max-width: min(92vw, 380px);
  text-align: center;
}
.inv2-confirma__texto {
  margin: 0 0 18px;
  font: 500 clamp(13px, 1.8vmin, 15px) / 1.55 'Baloo 2', system-ui, sans-serif;
  color: #cbb896;
}
.inv2-confirma__texto b {
  color: #f6d68a;
}
.inv2-confirma__botoes {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.inv2-confirma__sim,
.inv2-confirma__nao {
  flex: 1;
  max-width: 140px;
  justify-content: center;
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.inv2-confirma__sim {
  border: 2px solid #e08a8a;
  background: linear-gradient(180deg, #c24747, #8f2626);
  color: #fff5f5;
}
.inv2-confirma__sim:hover {
  filter: brightness(1.15);
}
.inv2-confirma__nao {
  border: 1px solid rgb(201 154 76 / 0.3);
  background: linear-gradient(180deg, #201409, #140c05);
  color: #e9d9bd;
}
.inv2-confirma__nao:hover {
  filter: brightness(1.2);
}

/* Item sem espaço na bolsa (capacidade caiu — ex: vendeu a bolsa). Continua existindo, só sem posição; DISTINTO do 🔒 (nível pra equipar). */
.inv2-item__sem-espaco {
  position: absolute;
  top: 1px;
  right: 2px;
  font-size: 9px;
  pointer-events: none;
}

.inv2-categorias {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.inv2-cat {
  width: 33px;
  height: 33px;
  padding: 6px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgb(201 154 76 / 0.3);
  background: linear-gradient(rgb(32, 20, 9) 0%, rgb(20, 12, 5) 100%);
  color: #b9a583;
  font-size: 9px;
  font-family: system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
}
.inv2-cat img {
  width: 20px;
  height: 20px;
}
.inv2-cat__texto {
  font-size: 9px;
  font-weight: 700;
}
.inv2-cat:hover {
  filter: brightness(1.3);
}
.inv2-cat--ativa {
  background: linear-gradient(rgb(217, 164, 74) 0%, rgb(169, 112, 42) 100%);
  border-color: rgb(246, 214, 138);
  color: rgb(28, 17, 9);
}

.inv2-grade {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  padding: 2px 2px 2px 0;
  overflow-y: auto;
  align-content: start;
}

.inv2-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 11px;
  border: 1px solid transparent;
  background-color: transparent;
  /* 🚨 FUNDO TINGIDO PELA RARIDADE DE VERDADE (v7, pedido do Zerg: "os
     itens têm o fundo da cor da sua raridade, você deixou todos cinzas").
     v6 usava um cinza FIXO igual pra qualquer raridade — só o box-shadow
     variava, e fraco (70% misturado). Fórmula de baixo é a mesma
     `getComputedStyle` de um item raro de verdade no jogo ao vivo
     (`--rarity:#F39C12`), só trocando os stops fixos por `color-mix` com
     `--rarity` — comum (cor quase branca) continua saindo cinza, que é
     correto, e cor de verdade agora tinge item raro/épico/lendário etc. */
  background-image:
    radial-gradient(100% 70% at 50% 0%, rgba(255, 255, 255, 0.125) 0%, transparent 62%),
    radial-gradient(130% 100% at 50% 122%, color-mix(in srgb, var(--rarity, #9DA9B4) 55%, black) 0%, transparent 70%),
    linear-gradient(color-mix(in srgb, var(--rarity, #9DA9B4) 30%, black) 0%, rgb(10, 7, 4) 100%);
  /* Anel INSET nítido na cor cheia (não misturado) + realce + sombra —
     mesmas 3 camadas medidas no jogo real, troca só o 1º valor fixo
     (`rgb(243,156,18)`) por `var(--rarity)`. */
  box-shadow:
    var(--rarity, #9DA9B4) 0 0 0 1.6px inset,
    rgba(255, 255, 255, 0.17) 0 1px 0 inset,
    rgba(0, 0, 0, 0.467) 0 2px 3px;
  cursor: grab;
  padding: 0;
  display: grid;
  place-items: center;
  transition: transform 0.1s, box-shadow 0.1s;
}
.inv2-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--arte, none);
  /* 🚨 CONTAIN, NÃO PORCENTAGEM FIXA (v7, pedido do Zerg: "os pingentes
     estão passando as fotos... tem de ser diminuídos pra caber no
     quadro"). `82%` só trava a LARGURA — a altura ia de `auto`, então uma
     arte alta/estreita (pingente/amuleto) podia passar da caixa por cima/
     baixo. `contain` garante que a imagem INTEIRA cabe nos dois eixos,
     não importa a proporção original dela — mesmo princípio já usado pra
     corrigir o amuleto virar retângulo (v5), agora aplicado no outro eixo
     do mesmo problema. */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.inv2-item:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--rarity, #9DA9B4) 0 0 0 1.6px inset,
    rgba(255, 255, 255, 0.17) 0 1px 0 inset,
    0 4px 14px #00000070;
  z-index: 2;
}
.inv2-item:active {
  cursor: grabbing;
  transform: scale(0.94);
}
.inv2-item__semarte {
  font-size: 8px;
  color: #9c8a6c;
  text-align: center;
  font-family: system-ui, sans-serif;
}
.inv2-item__grau {
  position: absolute;
  bottom: 1px;
  right: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #ffe9a6;
  text-shadow: 0 1px 2px #000;
  font-family: system-ui, sans-serif;
  pointer-events: none;
}
.inv2-item__cadeado {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 9px;
  pointer-events: none;
}

.inv2-grade::-webkit-scrollbar,
.inv2-heroi::-webkit-scrollbar {
  width: 8px;
}
.inv2-grade::-webkit-scrollbar-thumb,
.inv2-heroi::-webkit-scrollbar-thumb {
  background: rgb(201 154 76 / 0.3);
  border-radius: 4px;
}

/* ══════════════ v10 — lote de correções pedido pelo Zerg ══════════════ */

/* Aviso do Armário em uso: minimizado fica MENOR (não só "sem texto") e
   mostra um resumo curto — antes ficava vazio (pedido: "quando você
   minimiza deve aparecer a mensagem... hoje não aparece nada"). */
.inv2-aviso-armario__resumo {
  display: none;
  font-size: 11px;
  font-weight: 700;
  color: #ffcf66;
}
.inv2-aviso-armario--fechado {
  padding: 6px 10px;
}
.inv2-aviso-armario--fechado .inv2-aviso-armario__resumo {
  display: block;
}
.inv2-aviso-armario--fechado .inv2-aviso-minimizar {
  font-size: 9px;
}

.inv2-gema:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.inv2-gema:not(:disabled) {
  cursor: pointer;
}


/* Marca de seleção (Selecionar/Vender de verdade, v10) */
.inv2-item__marca {
  display: none;
  position: absolute;
  top: -6px;
  left: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2f9e5c;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #061422;
  pointer-events: none;
}
.inv2-item--marcado {
  outline: 2px solid #e2b45a;
  outline-offset: 1px;
}
.inv2-item--marcado .inv2-item__marca {
  display: flex;
}
.inv2-grade--modo-venda .inv2-item {
  cursor: pointer;
}

/* Soltar de volta na bolsa (arrastar item equipado pra fora) */
.inv2-bolsa--alvo-valido {
  outline: 2px dashed #e2b45a;
  outline-offset: -4px;
  border-radius: 10px;
}

/* ── Tooltip de comparação (hover) ──────────────────────────────────── */
.inv2-tooltip {
  position: fixed;
  z-index: 40;
  width: 240px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgb(201 154 76 / 0.3);
  background: linear-gradient(180deg, #1c1108, #140c05);
  box-shadow: 0 8px 24px #00000080;
  font-family: system-ui, sans-serif;
  pointer-events: none;
}
/*
 * 🚨 DUAS JANELAS (v15, pedido do Zerg: "quero que apareça 2 janelas...
 * pra ficar fácil de entender que é uma comparação e não que apareça na
 * mesma janela"). `.inv2-tooltip--dupla` vira container flex-row de 2
 * `.inv2-tooltip__coluna` lado a lado, cada uma com sua própria
 * "moldura" visual (borda própria) — não é só duas metades da mesma
 * caixa, são 2 cartões separados dentro do mesmo popup flutuante.
 */
.inv2-tooltip--dupla {
  width: auto;
  display: flex;
  gap: 10px;
  padding: 10px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.inv2-tooltip__coluna {
  width: 210px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgb(201 154 76 / 0.3);
  background: linear-gradient(180deg, #1c1108, #140c05);
  box-shadow: 0 8px 24px #00000080;
}
.inv2-tooltip__equipado-tag {
  font-size: 10px;
  font-weight: 800;
  color: #5fce7a;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.inv2-tooltip__conseguido {
  font-size: 9.5px;
  color: #9c8a6c;
  margin-bottom: 6px;
}
.inv2-tooltip__descarte {
  font-size: 10px;
  color: #ffcf66;
  margin-bottom: 6px;
}
.inv2-tooltip__valor--ganho {
  color: #5fce7a;
}
.inv2-tooltip__veredito {
  margin-top: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.inv2-tooltip__veredito--melhor {
  background: #16331f;
  border: 1px solid #2f9e5c;
  color: #8fe0ab;
}
.inv2-tooltip__veredito--pior {
  background: #4a1c1c;
  border: 1px solid #7a3030;
  color: #ffb8b8;
}
.inv2-tooltip__cabecalho {
  border-bottom: 1px solid color-mix(in srgb, var(--rarity, #9DA9B4) 50%, transparent);
  padding-bottom: 6px;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inv2-tooltip__cabecalho strong {
  font-size: 13px;
  color: #fff;
}
.inv2-tooltip__cabecalho span {
  font-size: 10.5px;
  color: color-mix(in srgb, var(--rarity, #9DA9B4) 80%, white);
}
.inv2-tooltip__score {
  font-size: 10.5px;
  color: #ffb84d;
  font-weight: 700;
  margin-bottom: 6px;
}
.inv2-tooltip__roll {
  font-size: 10px;
  color: #f6d68a;
  font-family: system-ui, sans-serif;
  margin-bottom: 6px;
}
.inv2-tooltip__bencao {
  font-size: 10px;
  font-weight: 700;
  color: #ffe27a;
  font-family: system-ui, sans-serif;
  margin-bottom: 6px;
  text-shadow: 0 0 8px rgba(255, 210, 90, 0.35);
}
.inv2-tooltip__aviso {
  margin-top: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  background: #4a1c1c;
  border: 1px solid #7a3030;
  color: #ffb8b8;
  font-size: 10px;
  font-family: system-ui, sans-serif;
  text-align: center;
}
.inv2-tooltip__linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
  color: #e9d9bd;
  padding: 2px 0;
}
.inv2-tooltip__linha span {
  color: #b9a583;
}
.inv2-tooltip__delta {
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.inv2-tooltip__delta--melhor {
  color: #5fce7a;
}
.inv2-tooltip__delta--pior {
  color: #e0605a;
}
.inv2-tooltip__delta--zero {
  color: #9c8a6c;
}

/* ── Popup de detalhe (botão direito / segurar) ─────────────────────── */
.inv2-veu-detalhe {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(4, 8, 15, 0.55);
}
.inv2-detalhe {
  position: fixed;
  z-index: 46;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, 90vw);
  padding: 16px 18px;
  border-radius: 12px;
  /* Mesma moldura da janela principal (v19) — sem cantoneiras aqui, o
     popup é pequeno demais pra caber elas sem espremer o conteúdo. */
  border: 2px solid #120b05;
  background:
    radial-gradient(120% 62% at 50% -8%, rgb(255 140 40 / 0.1), transparent 62%),
    linear-gradient(180deg, #241609, #170e07 44%, #100a05);
  box-shadow: inset 0 0 0 1px rgb(201 154 76 / 0.16), 0 16px 48px #000000a0;
  font-family: system-ui, sans-serif;
}
.inv2-detalhe__topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--rarity, #9DA9B4) 50%, transparent);
  padding-bottom: 10px;
  margin-bottom: 8px;
}
.inv2-detalhe__topo strong {
  display: block;
  font-size: 15px;
  color: #fff;
}
.inv2-detalhe__topo span {
  font-size: 11px;
  color: color-mix(in srgb, var(--rarity, #9DA9B4) 80%, white);
}
.inv2-detalhe__fechar {
  border: none;
  background: none;
  color: #b9a583;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}
.inv2-detalhe__score {
  font-size: 11.5px;
  color: #ffb84d;
  font-weight: 700;
  margin-bottom: 8px;
}
.inv2-detalhe__stats {
  margin-bottom: 14px;
}
/* 🚨 ALINHAMENTO com o botão Forjar de cima (v21, achado real do Zerg —
   print mostrando os 2 botões mais estreitos e centralizados em vez de
   ocuparem a MESMA largura do Forjar). O Forjar mora dentro de
   `.inv2-forja` (padding própria 10px 12px, além do padding de
   `.inv2-detalhe` 16px 18px) — pra Retirar/Vender começarem e
   terminarem exatamente onde o Forjar começa/termina, precisam do
   MESMO recuo extra (12px) e virarem grid de largura total, não flex
   encolhido à direita. `auto-fit`+`minmax(0,1fr)` faz 1 coluna cheia
   quando só existe Vender (item não equipado) e 2 colunas iguais
   quando Retirar também aparece — sem precisar de 2 variantes de CSS. */
.inv2-detalhe__acoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  padding: 0 12px;
}
.inv2-detalhe__acoes .inv2-botao-secundario {
  width: 100%;
  text-align: center;
  white-space: normal;
  line-height: 1.3;
}
/* Venda armada (v20, "confirmação para não ter venda sem querer") —
   vermelho de aviso, some sozinho se não clicar de novo em 4s. */
.inv2-botao-secundario--perigo {
  border-color: #cf5a5a !important;
  background: linear-gradient(180deg, #7a2424, #4a1212) !important;
  color: #ffdede !important;
}

/* 🚨 FORJAR RÁPIDO no popup de detalhe (v18) — mesma cara do resto do
   popup, sem inventar paleta nova. */
.inv2-forja {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgb(201 154 76 / 0.3);
  background: #1c1108;
}
.inv2-forja__linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11.5px;
  color: #b9a583;
  margin-bottom: 8px;
}
.inv2-forja__linha strong {
  color: #ffb84d;
  font-size: 13px;
}
.inv2-forja #inv2-detalhe-forjar {
  width: 100%;
  padding: 9px 10px;
  text-align: center;
  white-space: normal;
  line-height: 1.35;
}
/* Forjar é a ação principal do popup (é o motivo de abrir a bigorna) —
   dourado, igual ao "Guardar melhores" do painel principal. O botão
   Vender do mesmo popup fica na família azul/neutra, sem competir. */
.inv2-forja #inv2-detalhe-forjar:not(:disabled) {
  border: 2px solid #ffe6a8;
  background: linear-gradient(180deg, #f9cd68, #d9901c);
  box-shadow: inset 0 1px rgb(255 255 255 / 0.5), 0 3px #6d3f06, 0 0 18px -6px rgb(240 180 60 / 0.9);
  color: #2a1a02;
}
.inv2-forja #inv2-detalhe-forjar:disabled {
  opacity: 0.55;
  cursor: default;
}
.inv2-forja__aviso {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.inv2-forja__aviso[data-tom='perigo'] {
  color: #ff8080;
}
.inv2-forja__aviso[data-tom='atencao'] {
  color: #ffcf6b;
}
.inv2-forja__resultado {
  margin: 8px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
}
.inv2-forja__resultado[data-tom='ok'] {
  color: #7fe08a;
}
.inv2-forja__resultado[data-tom='erro'] {
  color: #ff8080;
}

/* ═══════════════════════════════════════════════════════════════════
 * ABA FORJA — LINGUAGEM VISUAL NOVA (rodada 32, 13/09)
 *
 * Brief do Zerg, quase literal: "Não redesenhe a interface. Redesenhe
 * sua linguagem visual... formas vetoriais, gradientes, cantos
 * personalizados, sombras suaves, bordas compostas e pequenas
 * assimetrias... um mundo medieval, com inspiração em móveis, armários,
 * ferragens, bronze envelhecido... sem novos assets." Duas imagens de
 * referência (Forja.png) mostram madeira escura entalhada + bronze
 * envelhecido + luz de forja — paleta NOVA (não o azul+dourado do resto
 * do jogo), CSS puro, zero PNG novo: só gradientes, box-shadow em
 * camadas e ::before/::after pra ferragem/cantoneira.
 *
 * ESTRUTURA/POSIÇÃO idênticas ao `.panel.forge` real (conferido ao vivo,
 * ver comentário grande no index.js): cabeçalho Ferreiro+estoque, bancada
 * com pedra+2 amuletos+bigorna, nome do item, taxas, dica, ações — só a
 * PELE muda. Mesma proporção de colunas do `.inv2-corpo` (495px larg. da
 * bancada) pra não pular quando troca de aba.
 * ═══════════════════════════════════════════════════════════════════ */

#inv2-forja-tela {
  flex: 1;
  display: grid;
  grid-template-columns: 495px 1fr;
  gap: 16px;
  padding: 16px;
  overflow: hidden;
}
#inv2-forja-tela[hidden] {
  display: none;
}

/* ── bancada do Ferreiro ─────────────────────────────────────────── */

.inv2-forja-bancada {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px;
  border-radius: 10px 14px 10px 16px; /* cantos levemente desiguais — "entalhado à mão" */
  color: #e9d9bd;
  background:
    radial-gradient(120% 50% at 50% 8%, rgb(255 140 40 / 0.1), transparent 60%),
    linear-gradient(165deg, #2c1c10 0%, #1c1109 55%, #150c06 100%);
  border: 1px solid #100a05;
  box-shadow:
    inset 0 0 0 1px rgb(201 154 76 / 0.28),
    inset 0 1px 0 rgb(255 220 160 / 0.08),
    0 16px 30px -12px #000000b0;
  overflow-y: auto;
}
/* Cantoneiras de bronze — só 2 cantos (mesmo princípio econômico da
   moldura azul), levemente ASSIMÉTRICAS (tamanhos e ângulos diferentes
   entre os dois) de propósito, pra não parecer um retângulo perfeito
   espelhado. */
.inv2-forja-bancada::before,
.inv2-forja-bancada::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: 30px;
  height: 26px;
  pointer-events: none;
  border: 2px solid rgb(201 154 76 / 0.55);
  filter: drop-shadow(0 1px 1px #000000aa);
}
.inv2-forja-bancada::before {
  top: 6px;
  left: 6px;
  border-right: 0;
  border-bottom: 0;
  border-radius: 9px 0 0;
  transform: rotate(-0.6deg);
}
.inv2-forja-bancada::after {
  bottom: 6px;
  right: 6px;
  width: 24px;
  height: 30px;
  border-left: 0;
  border-top: 0;
  border-radius: 0 0 13px;
  transform: rotate(0.4deg);
}

.inv2-forja-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.inv2-forja-cabecalho h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #f8e2ab, #d9a44a 60%, #a9782c);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 1px #000000cc);
}
.inv2-forja-cabecalho h2 img {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 0 4px rgb(255 140 40 / 0.7));
}
.inv2-forja-estoque {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: #f3d9a6;
  background: linear-gradient(180deg, #241609, #150c05);
  border: 1px solid rgb(201 154 76 / 0.45);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), inset 0 0 8px #00000080;
}
.inv2-forja-estoque img {
  width: 14px;
  height: 14px;
}

/* ── mesa: pedra + amuletos + bigorna ────────────────────────────── */

.inv2-forja-mesa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 10px 18px;
  margin-bottom: 12px;
  border-radius: 10px;
  background:
    radial-gradient(70% 60% at 50% 105%, rgb(255 110 30 / 0.16), transparent 70%),
    linear-gradient(180deg, rgb(0 0 0 / 0.22), rgb(0 0 0 / 0.05));
  box-shadow: inset 0 0 0 1px rgb(201 154 76 / 0.16), inset 0 2px 10px #00000060;
}

.inv2-forja-slot {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 2px solid rgb(201 154 76 / 0.55);
  background:
    radial-gradient(90% 90% at 50% 30%, rgb(255 255 255 / 0.08), transparent 60%),
    linear-gradient(180deg, #241609, #140c05);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.4), inset 0 -3px 6px #00000080, 0 2px 4px #00000090;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.inv2-forja-slot img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px #000);
}
.inv2-forja-slot--pedra {
  cursor: default;
  border-color: rgb(255 150 60 / 0.75);
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 0.4),
    0 0 14px -2px rgb(255 120 30 / 0.65),
    0 2px 4px #00000090;
}
.inv2-forja-slot--amuleto {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}
.inv2-forja-slot__vazio {
  font-size: 20px;
  font-weight: 300;
  color: rgb(201 154 76 / 0.55);
  line-height: 1;
}
.inv2-forja-slot--amuleto:hover .inv2-forja-slot__vazio {
  color: #e9c37a;
}
.inv2-forja-slot--cheio {
  border-color: #e2b45a;
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 0.4),
    0 0 12px -2px rgb(230 170 70 / 0.75),
    0 2px 4px #00000090;
}
.inv2-forja-slot__bonus {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px;
  font-weight: 800;
  color: #1c1109;
  background: linear-gradient(180deg, #f6d68a, #cf9a3c);
  border-radius: 999px;
  padding: 1px 6px;
  white-space: nowrap;
  box-shadow: 0 1px 2px #00000080;
}

.inv2-forja-linha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.inv2-forja-lado {
  position: relative;
  flex-shrink: 0;
}

.inv2-forja-picker {
  position: absolute;
  z-index: 5;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 8px;
  background: linear-gradient(180deg, #2a1a0d, #170e07);
  border: 1px solid rgb(201 154 76 / 0.5);
  box-shadow: 0 10px 24px -6px #000000d0, inset 0 1px 0 rgb(255 255 255 / 0.06);
  white-space: nowrap;
}
.inv2-forja-picker::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #170e07;
}
.inv2-forja-picker button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 10px 5px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #e9d9bd;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.inv2-forja-picker button:hover:not(:disabled) {
  background: rgb(201 154 76 / 0.14);
  border-color: rgb(201 154 76 / 0.4);
}
.inv2-forja-picker button:disabled {
  opacity: 0.4;
  cursor: default;
}
.inv2-forja-picker img {
  width: 18px;
  height: 18px;
}
.inv2-forja-picker span {
  color: #f3d9a6;
  min-width: 30px;
}
.inv2-forja-picker em {
  margin-left: auto;
  font-style: normal;
  color: #8a7357;
  font-size: 11px;
}

/* ── a bigorna ────────────────────────────────────────────────────── */

.inv2-forja-bigorna {
  position: relative;
  width: 128px;
  height: 108px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden; /* rede de segurança — nunca deixa nada passar da caixa */
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.3), rgb(0 0 0 / 0.12)),
    linear-gradient(160deg, #3a281a, #201409);
  border: 2px dashed rgb(201 154 76 / 0.45);
  box-shadow: inset 0 3px 10px #00000090;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.inv2-forja-bigorna[data-cheia='true'] {
  border-style: solid;
  border-color: #e2b45a;
  /* 🚨 `100% 100%`, NÃO `contain` (v33, pedido do Zerg: "o fundo que
     mostra a raridade não está preenchendo todo o quadrado... preencher
     exatamente o espaço completo"). A bigorna não é quadrada (128×108) e
     a arte de raridade É quadrada (128×128) — `contain` encolhia pra
     caber na altura menor e sobrava vazio nas laterais. `100% 100%`
     estica pra preencher IGUAL ao pedido, aceitando o leve achatamento
     (a arte é um losango/brilho simétrico, quase não se nota). */
  background:
    var(--slot-skin) center / 100% 100% no-repeat,
    radial-gradient(70% 70% at 50% 50%, rgb(255 140 40 / 0.22), transparent 70%),
    linear-gradient(160deg, #3a281a, #201409);
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 0.5),
    0 0 22px -4px rgb(255 150 60 / 0.55),
    inset 0 3px 10px #00000070;
}
.inv2-forja-bigorna--alvo {
  border-color: #ffce7a;
  box-shadow: 0 0 0 3px rgb(255 206 122 / 0.35), inset 0 3px 10px #00000090;
}
.inv2-forja-bigorna img {
  /* 🚨 BUG REAL achado pelo Zerg (v33): item "alto" (brinco/pingente,
     proporção retrato bem estreita) estourava a bigorna pra baixo —
     `width/height:62%` em porcentagem dentro de um `display:grid;
     place-items:center` não resolve do jeito esperado (achado testando:
     a altura RENDERIZADA saía quase do tamanho da caixa inteira, não
     62% dela — problema de resolução de % em item de grid com
     `object-fit`, não do PNG da raridade). Trocado pra `max-width`/
     `max-height` em PIXELS fixos (a caixa já é tamanho fixo, 128×108) —
     nunca depende de resolução de porcentagem, sempre cabe. */
  max-width: 76px;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px #000000aa);
}
.inv2-forja-bigorna__dica {
  max-width: 88px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: rgb(233 217 189 / 0.55);
  line-height: 1.35;
}
.inv2-forja-bigorna__fort {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #2a1a02;
  background: linear-gradient(180deg, #f9cd68, #d9901c);
  padding: 1px 7px;
  border-radius: 999px;
  box-shadow: 0 1px 3px #00000090;
}

/* ── nome, taxas, dica, avisos ───────────────────────────────────── */

.inv2-forja-nome {
  display: block;
  text-align: center;
  margin: 12px 0 2px;
  font-size: 14px;
  font-weight: 800;
  text-shadow: 0 1px 2px #000000cc;
}

.inv2-forja-taxas {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgb(0 0 0 / 0.22);
  box-shadow: inset 0 0 0 1px rgb(201 154 76 / 0.18);
}
.inv2-forja-taxas div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 12.5px;
}
.inv2-forja-taxas div + div {
  border-top: 1px solid rgb(201 154 76 / 0.12);
}
.inv2-forja-taxas dt {
  color: #b9a583;
  font-weight: 600;
}
.inv2-forja-taxas dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  color: #e9d9bd;
}
.inv2-forja-taxas dd img {
  width: 13px;
  height: 13px;
}
.inv2-forja-taxas dd[data-tom='boa'] {
  color: #8fdb7f;
}
.inv2-forja-taxas dd[data-tom='media'] {
  color: #e9c37a;
}
.inv2-forja-taxas dd[data-tom='ruim'] {
  color: #d9776a;
}

.inv2-forja-dica {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #9c8a6c;
}
.inv2-forja-dica strong {
  color: #e9d9bd;
}

.inv2-forja-aviso {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.inv2-forja-aviso[data-tom='perigo'] {
  color: #ff8f7a;
}
.inv2-forja-aviso[data-tom='atencao'] {
  color: #e9c37a;
}
.inv2-forja-resultado {
  margin: 8px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
}
.inv2-forja-resultado[data-tom='ok'] {
  color: #8fdb7f;
}
.inv2-forja-resultado[data-tom='erro'] {
  color: #ff8f7a;
}

/* ── ações ────────────────────────────────────────────────────────── */

.inv2-forja-acoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.inv2-forja-btn {
  padding: 11px 10px;
  border-radius: 8px;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid rgb(201 154 76 / 0.4);
  background: linear-gradient(180deg, #241609, #170e07);
  color: #d9c6a3;
  transition: transform 0.08s, filter 0.08s, background 0.12s;
}
.inv2-forja-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #2c1c0d, #1c1108);
}
.inv2-forja-btn:active:not(:disabled) {
  transform: scale(0.96);
  filter: brightness(0.9);
}
.inv2-forja-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.inv2-forja-btn--principal:not(:disabled) {
  border: 2px solid #ffe6a8;
  background: linear-gradient(180deg, #f9cd68, #d9901c);
  box-shadow: inset 0 1px rgb(255 255 255 / 0.5), 0 3px #6d3f06, 0 0 18px -6px rgb(240 180 60 / 0.9);
  color: #2a1a02;
}

/* ── grade de itens (Inventário/Artefatos/Armários) ─────────────── */

.inv2-forja-grade-painel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.inv2-forja-grade-abas {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.inv2-forja-grade-aba {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgb(201 154 76 / 0.3);
  background: linear-gradient(180deg, #201409, #140c05);
  color: #b9a583;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
}
/* 21/09: com a aba "Equipados" são 4 abas; em celular estreito o último (Armários) saía da tela. */
@media (max-width: 480px) {
  .inv2-forja-grade-abas {
    gap: 6px;
  }
  .inv2-forja-grade-aba {
    padding: 8px 9px;
  }
}
.inv2-forja-grade-aba:hover:not(.inv2-forja-grade-aba--ativa) {
  background: linear-gradient(180deg, #291a0c, #1a1008);
  color: #e9d9bd;
}
.inv2-forja-grade-aba--ativa {
  background: linear-gradient(180deg, #d9a44a, #a9702a);
  border-color: #f6d68a;
  color: #1c1109;
  box-shadow: inset 0 1px rgb(255 255 255 / 0.4), 0 3px #4d3005;
}

.inv2-forja-grade {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  padding: 2px 2px 2px 0;
  overflow-y: auto;
  align-content: start;
}
.inv2-forja-grade-vazio {
  grid-column: 1 / -1;
  margin: 20px 6px;
  font-size: 12px;
  color: #8a7357;
  text-align: center;
}

/* Célula da grade da Forja — mesmo princípio da `.inv2-item` (tingida
   pela raridade real), moldura em bronze envelhecido em vez do anel
   azul-frio do resto do jogo. */
.inv2-forja-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 9px;
  border: 1px solid transparent;
  background-image:
    radial-gradient(100% 70% at 50% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 62%),
    radial-gradient(130% 100% at 50% 122%, color-mix(in srgb, var(--rarity, #9DA9B4) 50%, black) 0%, transparent 70%),
    linear-gradient(color-mix(in srgb, var(--rarity, #9DA9B4) 26%, #1c1109) 0%, #100a05 100%);
  box-shadow:
    var(--rarity, #9DA9B4) 0 0 0 1.4px inset,
    rgba(255, 255, 255, 0.12) 0 1px 0 inset,
    rgba(0, 0, 0, 0.5) 0 2px 3px;
  cursor: grab;
  padding: 0;
  display: grid;
  place-items: center;
  transition: transform 0.1s, box-shadow 0.1s;
}
.inv2-forja-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--arte, none);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.inv2-forja-item:hover {
  transform: translateY(-2px);
  z-index: 2;
}
.inv2-forja-item:active {
  cursor: grabbing;
  transform: scale(0.94);
}
.inv2-forja-item--na-bigorna {
  box-shadow:
    #ffce7a 0 0 0 2px inset,
    0 0 12px -2px rgb(255 206 122 / 0.8);
}
.inv2-forja-item--confirmar {
  animation: inv2-forja-pulsar 0.9s ease-in-out infinite;
}
@keyframes inv2-forja-pulsar {
  0%, 100% {
    box-shadow: #ffce7a 0 0 0 1.4px inset, rgba(0, 0, 0, 0.5) 0 2px 3px;
  }
  50% {
    box-shadow: #ffce7a 0 0 0 3px inset, 0 0 14px -2px rgb(255 206 122 / 0.9);
  }
}
.inv2-forja-item--vazio {
  cursor: default;
  background-image: none;
  background-color: rgb(0 0 0 / 0.16);
  box-shadow: inset 0 0 0 1px rgb(201 154 76 / 0.16);
  border: 1px dashed rgb(201 154 76 / 0.18);
}
.inv2-forja-item--vazio:hover {
  transform: none;
}
.inv2-forja-item__fort {
  position: absolute;
  bottom: 1px;
  right: 3px;
  font-size: 10px;
  font-weight: 800;
  color: #ffe9a6;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

@media (max-width: 980px) {
  #inv2-forja-tela {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .inv2-forja-bancada {
    overflow-y: visible;
  }
}

@media (prefers-color-scheme: light) {
  .inv2 {
    color: #ede1c8;
  }
}

/* ═══════════════════════════════════════════════════════════════════
 * ABA BUFF DE BAÚ (rodada 35, 13/09) — mesma linguagem madeira+bronze
 * da Forja/janela, layout de coluna única (bate com o painel real —
 * ver comentário grande em `telaBaudeHtml` no index.js). As cores de
 * CADA raridade (`RARIDADES_BAUDE`) são as mesmas hex do jogo real
 * (amostradas dos sprites `ui/grade/*.png`, não da tabela de código —
 * comentário do módulo real explica a divergência) — SEMÂNTICAS, não
 * fazem parte da identidade visual, não mexi nelas.
 * ═══════════════════════════════════════════════════════════════════ */

/* 🚨 v36 (achado pelo Zerg, screenshot dele): só os baús ficavam
   centralizados — a grade de raridades tinha `margin:16px 0` (o atalho
   de 2 valores zera left/right), que EMPATAVA em especificidade com a
   regra `.inv2-baude-tela > *` de baixo e, por vir DEPOIS no arquivo,
   vencia o empate — cancelava o `margin:auto` só ali, sem eu perceber
   porque os outros blocos (cabeçalho/baús/rodapé) não tinham `margin`
   próprio pra colidir. Também alargado (980→1180) e centralizado na
   VERTICAL (`justify-content:center`) — pedido dele: "não deixe a
   janela sobrar tanto... se sobrar tem de sobrar igual dos 2 lados". */
.inv2-baude-tela {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 28px 28px;
}
.inv2-baude-tela[hidden] {
  display: none;
}
.inv2-baude-tela > * {
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.inv2-baude-veu {
  max-width: 1180px;
  margin: 0 auto 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: linear-gradient(180deg, #241609, #170e07);
  border: 1px solid rgb(201 154 76 / 0.35);
  box-shadow: inset 0 0 0 1px rgb(201 154 76 / 0.12);
}
.inv2-baude-veu b {
  display: block;
  color: #f6d68a;
  font-size: 13px;
  margin-bottom: 4px;
}
.inv2-baude-veu span {
  display: block;
  color: #b9a583;
  font-size: 11.5px;
  line-height: 1.5;
}

.inv2-baude-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.inv2-baude-topo h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.03em;
  background: linear-gradient(180deg, #f8e2ab, #d9a44a 60%, #a9782c);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 1px #000000cc);
}
.inv2-baude-topo h2 img {
  width: 22px;
  height: 22px;
}
.inv2-baude-topo-dir {
  display: flex;
  align-items: center;
  gap: 10px;
}
.inv2-baude-nivel {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: #b9a583;
  background: linear-gradient(180deg, #201409, #140c05);
  border: 1px solid rgb(201 154 76 / 0.35);
}
.inv2-baude-nivel b {
  color: #f6d68a;
  font-size: 14px;
  font-weight: 800;
}
.inv2-baude-up {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #e2b45a;
  background: linear-gradient(180deg, #f9cd68, #d9901c);
  color: #2a1a02;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 1px rgb(255 255 255 / 0.5), 0 2px #6d3f06;
  transition: transform 0.08s, filter 0.08s;
}
.inv2-baude-up:disabled {
  border-color: rgb(201 154 76 / 0.35);
  background: linear-gradient(180deg, #241609, #170e07);
  color: #7a6a4d;
  box-shadow: none;
  cursor: default;
}
.inv2-baude-up:not(:disabled):active {
  transform: scale(0.92);
  filter: brightness(0.9);
}
.inv2-baude-voltar {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgb(201 154 76 / 0.3);
  background: linear-gradient(180deg, #201409, #140c05);
  color: #b9a583;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
}
.inv2-baude-voltar:hover {
  background: linear-gradient(180deg, #291a0c, #1a1008);
  color: #e9d9bd;
}

/* ── os 3 baús ────────────────────────────────────────────────────── */

.inv2-baude-baus {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.inv2-baude-bau {
  margin: 0;
  padding: 16px 14px;
  border-radius: 12px;
  text-align: center;
  background: linear-gradient(165deg, #241609, #170e07 60%, #100a05);
  border: 1px solid rgb(201 154 76 / 0.22);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.3);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.inv2-baude-bau[data-aberto='0'] {
  opacity: 0.55;
}
.inv2-baude-bau[data-ativo='1'] {
  border-color: #e2b45a;
  background: linear-gradient(165deg, #2c1c0d, #1c1108 60%, #100a05);
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 0.3),
    0 0 22px -6px rgb(255 150 60 / 0.55);
}
.inv2-baude-bau img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px #000000aa);
  margin-bottom: 6px;
}
.inv2-baude-bau figcaption b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #ede1c8;
}
.inv2-baude-bau figcaption i {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  color: #9c8a6c;
  margin-top: 2px;
}
.inv2-baude-bau figcaption span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #f6d68a;
  margin-top: 4px;
}
.inv2-baude-bau[data-aberto='0'] figcaption span {
  color: #b9756a;
}

.inv2-baude-dica {
  font-size: 11.5px;
  color: #9c8a6c;
  margin: 0 auto 14px;
  line-height: 1.5;
}

/* ── as 2 barras empilhadas ───────────────────────────────────────── */

.inv2-baude-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 8px;
}
.inv2-baude-barra span {
  flex-shrink: 0;
  width: 64px;
  font-size: 10.5px;
  font-weight: 700;
  color: #b9a583;
  text-align: right;
}
.inv2-baude-barra b {
  flex: 1;
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  font-weight: normal;
  box-shadow: inset 0 0 0 1px rgb(201 154 76 / 0.25), inset 0 2px 4px #00000060;
}
.inv2-baude-barra i {
  display: block;
  height: 100%;
}

/* ── grade de raridades ───────────────────────────────────────────── */

.inv2-baude-grade {
  list-style: none;
  margin: 16px auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 24px;
}
.inv2-baude-linha {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgb(0 0 0 / 0.18);
}
.inv2-baude-linha[data-nova='1'] {
  box-shadow: inset 0 0 0 1px rgb(246 214 138 / 0.4);
}
.inv2-baude-linha img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.inv2-baude-nome {
  font-size: 12px;
  font-weight: 700;
}
.inv2-baude-agora {
  font-size: 12px;
  font-weight: 700;
  color: #e9d9bd;
  font-variant-numeric: tabular-nums;
}
.inv2-baude-depois {
  font-size: 11.5px;
  font-weight: 700;
  color: #7a6a4d;
  font-variant-numeric: tabular-nums;
}
.inv2-baude-depois[data-sobe='1'] {
  color: #8fdb7f;
}

/* ── rodapé ───────────────────────────────────────────────────────── */

.inv2-baude-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgb(201 154 76 / 0.18);
}
.inv2-baude-req {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.inv2-baude-chip {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgb(0 0 0 / 0.22);
  border: 1px solid rgb(201 154 76 / 0.2);
  color: #b9a583;
}
.inv2-baude-chip[data-ok='1'] {
  color: #8fdb7f;
  border-color: rgb(143 219 127 / 0.4);
}
.inv2-baude-chip[data-ok='0'] {
  color: #ff8f7a;
  border-color: rgb(255 143 122 / 0.4);
}
.inv2-baude-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  border: 2px solid #ffe6a8;
  background: linear-gradient(180deg, #f9cd68, #d9901c);
  box-shadow: inset 0 1px rgb(255 255 255 / 0.5), 0 3px #6d3f06, 0 0 18px -6px rgb(240 180 60 / 0.9);
  color: #2a1a02;
  transition: transform 0.08s, filter 0.08s;
}
.inv2-baude-btn img {
  width: 15px;
  height: 15px;
}
.inv2-baude-btn:disabled {
  border: 1px solid rgb(201 154 76 / 0.3);
  background: linear-gradient(180deg, #241609, #170e07);
  color: #7a6a4d;
  box-shadow: none;
  cursor: default;
}
.inv2-baude-btn:not(:disabled):active {
  transform: scale(0.96);
  filter: brightness(0.92);
}
.inv2-baude-falta {
  margin: 8px auto 0;
  font-size: 11px;
  font-weight: 700;
  color: #ff8f7a;
}
.inv2-baude-vazio {
  text-align: center;
  color: #9c8a6c;
  font-size: 12px;
  margin-top: 40px;
}

@media (max-width: 760px) {
  .inv2-baude-baus,
  .inv2-baude-grade {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════
 * ABA RECURSOS (rodada 39, 13/09) — armário na mesma linguagem
 * madeira+bronze das outras abas, tentando chegar o mais perto
 * possível da composição da foto de referência do Zerg (moldura de
 * armário com "prateleira" decorativa à esquerda + grade de células
 * à direita + gavetas embaixo) — tudo vetorial/gradiente, sem imagem
 * nova (mesma regra da Forja/Baú).
 * ═══════════════════════════════════════════════════════════════════ */

.inv2-recursos-tela {
  flex: 1;
  overflow-y: auto;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 24px 28px;
}
.inv2-recursos-tela[hidden] {
  display: none;
}

/* 🎨 Rodada Recursos-mesa (13/09) — Zerg mandou 1 composição de
   referência (IA) + 2 pranchas com as PEÇAS separadas (mesa/tapete,
   vela, saco de moedas, mapa, moedas soltas, molduras douradas em
   formato de pentágono). Recortei as peças reais das pranchas
   (`recursos-fundo.webp`, cena montada com tapete+vela+mapa+saco+
   moedas — mesmo espírito da composição dele, não uma cópia 1:1
   pixel) e a moldura pentagonal (`recursos-pentagono.webp`) vira o
   quadro de CADA recurso, substituindo o cartão retangular antigo —
   "os recursos dentro de janelinhas em cima de uma mesa", como ele
   pediu. Sidebar/gavetas antigas (decoração CSS pura) removidas: a
   cena real já cobre esse papel. */
.inv2-recursos-armario {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: #150d06 url('/potato/inventario-novo/recursos-fundo.webp') center bottom / cover no-repeat;
  border: 1px solid #100a05;
  box-shadow:
    inset 0 0 0 1px rgb(201 154 76 / 0.22),
    0 18px 34px -12px #000000b0;
  overflow: hidden;
}

.inv2-recursos-corpo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  /* topo maior que antes: dá espaço pra faixa `.inv2-recursos-topo`
     (agora `position:absolute`, fora do fluxo) não tampar a grade. */
  padding: 62px 26px 26px;
}
.inv2-recursos-topo {
  /* 🚨 PRESA NO TOPO DE VERDADE (14/09, correção real): antes fazia
     parte do grupo centralizado pelo `justify-content:center` do
     `.inv2-recursos-corpo` — a faixa ficava perto do topo só quando o
     conteúdo por acaso calhava de ficar lá, não estava REALMENTE
     colada na borda de cima do painel. `position:absolute;top:0` tira
     ela do fluxo centralizado, gruda na borda de verdade — a grade de
     ícones continua centralizada sozinha no espaço restante. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.32), rgb(0 0 0 / 0.14));
  border-bottom: 1px solid rgb(201 154 76 / 0.18);
}
.inv2-recursos-topo h2 {
  margin: 0;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f8e2ab, #d9a44a 60%, #a9782c);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 1px #000000cc);
}

.inv2-recursos-grade {
  display: grid;
  grid-template-columns: repeat(3, 190px);
  gap: 10px 22px;
  padding-top: 4px;
  justify-content: center;
}
.inv2-recursos-item {
  position: relative;
  width: 190px;
  aspect-ratio: 376 / 340;
  border: 0;
  background: url('/potato/inventario-novo/recursos-pentagono.webp') center / 100% 100% no-repeat;
  cursor: pointer;
  padding: 0;
  transition: transform 0.08s, filter 0.08s;
  filter: drop-shadow(0 3px 5px #00000070);
}
.inv2-recursos-item:hover {
  filter: drop-shadow(0 3px 5px #00000070) brightness(1.08);
}
.inv2-recursos-item:active {
  transform: scale(0.96);
  filter: drop-shadow(0 3px 5px #00000070) brightness(0.92);
}
.inv2-recursos-item__icone {
  position: absolute;
  /* 🚨 CENTRO MEDIDO DE VERDADE (14/09), não estimado a olho: a arte da
     moldura (`recursos-pentagono.webp`) não é perfeitamente simétrica no
     recorte — medi o retângulo interno pixel a pixel (script Python,
     HSV pra separar "interior escuro" de "moldura dourada brilhante",
     amostrando várias linhas) e o centro de verdade fica em ~55,3% da
     largura (não 50%) e ~35,3% da altura (não 40%) — tanto a janela do
     ícone quanto a barra do nome embaixo batem nesse mesmo eixo X, os
     dois medidos separadamente e confirmados iguais. */
  /* Nudge pedido pelo Zerg depois da medição: mais ~4% pra baixo pra
     encostar no centro visual real da janela (a medição pega o centro
     GEOMÉTRICO do buraco, mas o ícone real do jogo, com sombra própria
     embaixo, "pesa" visualmente mais alto que o centro puro). */
  top: 46%;
  left: 55.3%;
  width: 30%;
  height: 30%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}
.inv2-recursos-item__icone img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px #00000090);
}
.inv2-recursos-item__textos {
  position: absolute;
  /* Mesmo eixo X medido do ícone acima (55,3%) — a barra do nome tem o
     MESMO centro que a janela do ícone, os dois vêm da mesma peça de
     arte, só a largura muda (76%, igual a largura real da barra). */
  left: 55.3%;
  transform: translateX(-50%);
  width: 76%;
  bottom: 5%;
  height: 21.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
}
.inv2-recursos-item__textos strong {
  font-size: 13px;
  font-weight: 800;
  color: #f6d68a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.1;
}
.inv2-recursos-item__rotulo {
  font-size: 9px;
  color: #cbb896;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.15;
}
.inv2-recursos-item__mais {
  position: absolute;
  top: 2%;
  right: 6%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #2a1a02;
  background: linear-gradient(180deg, #f9cd68, #d9901c);
  border: 1px solid #ffe6a8;
  box-shadow: 0 1px 3px #00000090;
}

@media (max-width: 760px) {
  .inv2-recursos-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 🆕 Ícones "i" de explicação (14/09) — botão redondo pequeno ao lado do
   título de cada aba do piloto, abre um popup explicando o sistema.
   Cor/forma seguem o mesmo padrão já usado em outras partes do jogo real
   (`armario-poder`), só que na paleta madeira/bronze deste piloto. */
.inv2-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0 6px;
  vertical-align: middle;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.3);
  color: #f6d68a;
  border: 1.5px solid rgb(201 154 76 / 0.55);
  font: 800 11px/1 Georgia, serif;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.12s, background 0.12s;
}
.inv2-info-btn:hover {
  border-color: #e2b45a;
  background: rgb(0 0 0 / 0.45);
}
.inv2-info-btn:active {
  transform: scale(0.92);
}

#inv2-guia {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(8 5 2 / 0.72);
}
#inv2-guia[hidden] {
  display: none;
}
#inv2-guia .inv2-guia__caixa {
  position: relative;
  background: linear-gradient(165deg, #241609 0%, #1c1108 55%, #100a05 100%);
  border: 1px solid #100a05;
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgb(201 154 76 / 0.3),
    0 18px 40px -12px #000000b0;
  color: #ede1c8;
  font: 500 clamp(12px, 1.6vmin, 15px) / 1.55 'Baloo 2', system-ui, sans-serif;
  padding: 22px 26px;
  max-width: min(90vw, 560px);
  max-height: 82vh;
  overflow-y: auto;
}
#inv2-guia h3 {
  margin: 0 0 12px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(15px, 2.2vmin, 19px);
  font-weight: 800;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #f8e2ab, #d9a44a 60%, #a9782c);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
#inv2-guia p {
  margin: 8px 0;
  color: #cbb896;
}
#inv2-guia p b {
  color: #f6d68a;
}
#inv2-guia .inv2-guia__x {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 0.3);
  color: #ede1c8;
  border: 1px solid rgb(201 154 76 / 0.3);
  font: 700 14px/1 system-ui;
  cursor: pointer;
}
#inv2-guia .inv2-guia__x:hover {
  border-color: #e2b45a;
  color: #f6d68a;
}

/* setas do seletor de armário (20/09) */
.inv2-armario-nav { display: flex; align-items: stretch; gap: 6px; }
.inv2-armario-nav .inv2-armario-select { flex: 1; width: auto; min-width: 0; }
.inv2-armario-seta {
  flex: 0 0 44px; font-size: 22px; font-weight: 800; line-height: 1; color: #e2b45a;
  border: 1px solid rgb(201 154 76 / 0.3); border-radius: 8px; cursor: pointer;
  background: linear-gradient(180deg, #291a0c, #1a1008);
}
.inv2-armario-seta:active { transform: scale(0.94); filter: brightness(1.2); }
.inv2-armario-comprar { width: 100%; margin-top: 6px; }
.inv2-armario-comprar[hidden] { display: none; }