/* =====================================================================
   INVENTÁRIO C — escolha do autor na auditoria de 29/09 ("Novo Inventário").
   Boneco com os 7 equipados à esquerda, mochila em quadradinhos no meio e a
   ficha num painel FIXO à direita. Nada flutua por cima dos itens: era a
   ficha que seguia o mouse que "misturava as informações".
   04/10 (autor: "ali ficam só os itens, se clicar, tu ve tudo"): o painel fixo da ficha SAIU. Clicar/tocar
   num item abre a ficha numa JANELA no centro com o fundo desfocado (mesmo jeito das janelas rápidas da
   batalha, ?v=633), no PC e no celular. A largura do painel ficou para a mochila.
   Larguras:
     > 1240 px  boneco à esquerda, mochila no resto;
     900-1240   o boneco vira fileira em cima, mochila na largura toda;
     < 900      uma coluna.
   Mesma linguagem da Loja B / Conta B: fundo azul escuro, ouro no que está ativo.
   Quem preenche: renderInventory e amigos no game.js. Só a tela; nada de regra.
   ===================================================================== */
#inventoryView.inv-c{--iv-card:#141a26;--iv-card2:#101723;--iv-linha:#2d3a52;--iv-ouro:#f6d58a;--iv-ouro2:#e0ad4c;--iv-tinta:#e3e9f3;--iv-mudo:#8c95a8;
  max-width:1560px;margin:0 auto;padding:12px 16px 24px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;color:var(--iv-tinta)}
#inventoryView.inv-c>*{min-width:0}
.inv-c-filtros,.inv-c-chips,.inv-c-seletores,.inv-c-topo{min-width:0}
#inventoryView.inv-c *{box-sizing:border-box}
#inventoryView .r-common{--rc:var(--rarity-common,#a8b0bd)}#inventoryView .r-uncommon{--rc:#86a84f}#inventoryView .r-rare{--rc:var(--rarity-rare,#4c9bff)}
#inventoryView .r-epic{--rc:var(--rarity-epic,#b36bff)}#inventoryView .r-legendary{--rc:var(--rarity-legendary,#ffb02e)}#inventoryView .r-ancient{--rc:#6ff0b0}

/* topo */
.inv-c-topo{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:12px 18px;border:1px solid #6b5426;border-radius:14px;
  background:radial-gradient(120% 140% at 0% 0%,#2a2113 0%,#141a26 55%,#0e131c 100%)}
.inv-c-titulo{display:grid;gap:2px}
.inv-c-titulo .eyebrow{font-size:calc(10.5px * var(--text-scale,1));letter-spacing:.16em;color:var(--iv-ouro2);font-weight:800}
.inv-c-titulo h2{margin:0;font-family:var(--font-display,Georgia,serif);font-size:calc(26px * var(--text-scale,1));color:#fff;line-height:1}
.inv-c-cap{margin-left:auto;display:grid;gap:5px;min-width:170px;font-size:calc(12px * var(--text-scale,1));color:var(--iv-mudo)}
.inv-c-cap strong{color:#fff;font-size:calc(15px * var(--text-scale,1));font-variant-numeric:tabular-nums}
.inv-c-barra{height:6px;border-radius:4px;background:#0b111a;border:1px solid var(--iv-linha);overflow:hidden}
.inv-c-barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,#c8923a,#f6d58a)}
.inv-c-acoes{display:flex;gap:8px;flex-wrap:wrap}
#inventoryView .inv-c-acoes .utility-button{min-height:38px;padding:8px 14px;border-radius:9px;font-weight:800;letter-spacing:.05em}
/* 30/09 (autor: "esse amarelo chega a doer as vistas"): bronze escuro com letra dourada, no lugar do ouro chapado. */
#inventoryView .inv-c-acoes .smart-equip-button{background:linear-gradient(180deg,#4a3a1c,#33280f)!important;color:#ecd494!important;border:1px solid #7a5e28!important}
#inventoryView .inv-c-acoes .smart-equip-button:hover{background:linear-gradient(180deg,#5a4722,#3b2e15)!important;border-color:#a07e38!important}
#inventoryView .inv-c-acoes .recycle-trash-button{background:#15301f;border:1px solid #2f7a48;color:#bff0cc}
#invLixoCount{display:inline-block;min-width:20px;margin-left:4px;padding:0 6px;border-radius:999px;background:rgba(0,0,0,.35);font-variant-numeric:tabular-nums}
/* 06/11 (DevilChris, opção B do autor): peças que ainda acendem uma casinha das Entregas da Coleção: chip e selo 📦 no quadradinho */
.inv-chip.inv-chip-falta{border-color:#6e5626}
.inv-ent{position:absolute;right:2px;top:2px;font-size:calc(12px * var(--text-scale,1));line-height:1;pointer-events:none;filter:drop-shadow(0 1px 1px #000)}
.inv-ent .col-icone{font-style:normal;display:inline-grid;place-items:center;width:calc(20px * var(--text-scale,1));height:calc(20px * var(--text-scale,1))}
.inv-ent .col-icone img{width:100%;height:100%;object-fit:contain}

/* filtros */
.inv-c-filtros{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inv-c-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.inv-chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:5px 12px;border-radius:999px;border:1px solid var(--iv-linha);background:var(--iv-card2);
  color:#c9d2e0;font-size:calc(12px * var(--text-scale,1));font-weight:700;white-space:nowrap;cursor:var(--cur-mao,pointer)}
.inv-chip small{color:var(--iv-mudo);font-weight:700}
.inv-chip.on{border-color:var(--iv-ouro2);background:#2a2113;color:var(--iv-ouro)}
.inv-chip .col-icone{font-style:normal;display:inline-grid;place-items:center;width:18px;height:18px}
.inv-chip .col-icone img{width:18px;height:18px;image-rendering:pixelated}
.inv-c-seletores{display:flex;gap:8px;flex-wrap:wrap}
.inv-c-seletores select{min-height:34px;padding:5px 10px;border-radius:8px;border:1px solid var(--iv-linha);background:var(--iv-card2);color:var(--iv-tinta);font-size:calc(12px * var(--text-scale,1));font-weight:700}
#invRecycleMode{min-height:34px;padding:5px 12px;border-radius:8px}
#invRecycleMode.on{border-color:#2f7a48;background:#15301f;color:#bff0cc}
.inv-c-reciclar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;border:1px solid #2f7a48;background:#0f2519}
.inv-c-reciclar.hidden{display:none!important}
.inv-c-reciclar>div{display:flex;gap:6px;flex-wrap:wrap}

/* corpo em três colunas */
.inv-c-corpo{display:grid;grid-template-columns:300px minmax(0,1fr);gap:12px;align-items:start}
.inv-c-esq{display:grid;gap:12px;min-width:0}
#inventoryView .inv-c-equip,#inventoryView .inv-c-mochila{padding:14px;border:1px solid var(--iv-linha);border-radius:14px;background:var(--iv-card);min-width:0}
.inv-c-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;font-size:calc(11px * var(--text-scale,1));letter-spacing:.16em;color:var(--iv-mudo);font-weight:800}
.inv-c-cab b,.inv-c-cab small{color:var(--iv-ouro);letter-spacing:.04em;font-weight:800}

/* quadradinho (mochila e boneco) */
#inventoryView .inv-slot{position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0;padding:0;overflow:hidden;cursor:var(--cur-mao,pointer);
  border-radius:9px;border:1px solid color-mix(in srgb,var(--rc,#3a4660) 70%,#000);
  background:radial-gradient(90% 90% at 50% 70%,color-mix(in srgb,var(--rc,#223) 26%,#0b111a) 0%,#0b111a 75%);color:inherit}
#inventoryView .inv-slot:hover{border-color:var(--rc,#56627a);filter:brightness(1.12)}
#inventoryView .inv-slot:focus-visible{outline:2px solid var(--iv-ouro);outline-offset:2px}
#inventoryView .inv-slot img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 2px 3px #000);pointer-events:none}
#inventoryView .inv-slot.vazio{--rc:#26324a;background:#0b111a;border-style:dashed;opacity:.55;cursor:var(--cur-seta,default)}
#inventoryView .inv-slot.vazio:hover{filter:none}
.inv-mais{position:absolute;left:4px;top:3px;font-size:calc(11px * var(--text-scale,1));font-weight:900;color:var(--iv-ouro);text-shadow:0 1px 2px #000;pointer-events:none}
.inv-qtd{position:absolute;right:4px;bottom:2px;font-size:calc(11px * var(--text-scale,1));font-weight:900;color:#fff;text-shadow:0 1px 2px #000;pointer-events:none}
.inv-seta{position:absolute;right:4px;top:2px;font-size:12px;font-weight:900;color:#5fe08a;text-shadow:0 1px 2px #000;pointer-events:none}
.inv-selo{position:absolute;left:3px;bottom:1px;font-size:11px;pointer-events:none}
#inventoryView .inv-slot.inv-nao-serve img{filter:saturate(.35) brightness(.7)}
#inventoryView .inv-slot.inv-nao-serve::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,rgba(255,70,70,.14) 0 6px,transparent 6px 12px)}
#inventoryView .inv-slot.inv-sel{outline:2px solid var(--iv-ouro);outline-offset:2px;box-shadow:0 0 16px rgba(246,213,138,.35)}
#inventoryView .inv-slot.inv-marcado::before{content:"♻";position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:rgba(20,60,35,.6);color:#9ff0b8;font-size:22px}
#inventoryView.inv-reciclando .inv-c-grade .inv-slot:not(.vazio){cursor:copy}
.inv-c-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:7px}
.inv-c-grade .empty-inventory{grid-column:1/-1;padding:24px;text-align:center;color:var(--iv-mudo)}
.inv-c-legenda{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:calc(11px * var(--text-scale,1));color:var(--iv-mudo)}
.inv-c-legenda b{color:#5fe08a}

/* boneco */
.inv-c-boneco{display:grid;grid-template-columns:repeat(3,1fr);grid-template-areas:"pendant helmet wing" "weapon armor wing" "ring boots wing";gap:8px;padding:10px;border-radius:12px;
  background:radial-gradient(70% 60% at 50% 45%,rgba(224,173,76,.10),transparent 70%),#0c121c;border:1px solid #243049}
#inventoryEquippedGrid>article.inv-slot.vazio{--rc:#3a4660}
#inventoryEquippedGrid>article[data-inv-equip="wing"]{aspect-ratio:auto}
#inventoryEquippedGrid>article>strong{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.inv-silhueta{display:grid;place-items:center;width:100%;height:100%;padding:18% 18% 26%;box-sizing:border-box;color:#7d8aa6;pointer-events:none}
.inv-silhueta svg{width:100%;height:100%;max-width:56px;max-height:56px}
.inv-rotulo{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-size:calc(9px * var(--text-scale,1));letter-spacing:.1em;color:var(--iv-mudo);font-weight:800}
/* 01/10 (celular, texto a 130%): BOTAS/COLAR/ARMADURA passavam da caixa (36 px em pé). O rótulo encolhe pelo número
   de letras (--letras, game.js) e nunca fica maior que a caixa; na caixa estreita demais (menos de 40 px) ele some e a
   silhueta da peça já diz o que vai ali. */
#inventoryEquippedGrid>article{container-type:inline-size}
#inventoryEquippedGrid .inv-rotulo{font-size:min(calc(9px * var(--text-scale,1)),calc(125cqi / var(--letras,5)));letter-spacing:.04em;white-space:nowrap;overflow:hidden}
@container (max-width:40px){#inventoryEquippedGrid .inv-rotulo{display:none}}
#inventoryEquippedGrid>article.vazio{cursor:var(--cur-seta,default)}
.inv-c-set{margin-top:10px;padding:9px 11px;border-radius:10px;border:1px solid #6b5426;background:#1c1710;font-size:calc(12px * var(--text-scale,1));display:grid;gap:2px}
.inv-c-set b{color:var(--iv-ouro)}.inv-c-set small{color:#cdbf9e}
#inventoryView .inv-c-esq .loot-filter-card,#inventoryView .inv-c-esq .mg-build-panel{margin:0}

/* o slot do boneco ainda leva a classe antiga (equipped-showcase-slot: testes e a calibração da asa
   no Editor a usam); aqui ele perde a forma de cartão grande de antes */
#inventoryView #inventoryEquippedGrid>article.equipped-showcase-slot{display:grid;grid-template-rows:none!important;place-items:center;min-height:0!important;height:auto!important;
  padding:0!important;text-align:center;border-radius:9px!important;border:1px solid color-mix(in srgb,var(--rc,#3a4660) 70%,#000)!important;box-shadow:none!important;
  background:radial-gradient(90% 90% at 50% 70%,color-mix(in srgb,var(--rc,#223) 26%,#0b111a) 0%,#0b111a 75%)!important}
#inventoryView #inventoryEquippedGrid>article.equipped-showcase-slot.vazio{border-style:dashed!important;background:#0b111a!important}
/* 06/10 (print do autor: asa minúscula e grudada no topo): com o texto fora de 100% a regra antiga do style.css
   (`html[data-text-scale]` .equipped-showcase-slot) deixava align-content:start; a linha da grade encolhia e a arte
   perdia a altura (78% de nada). A arte fica sempre no centro do slot, em qualquer tamanho de texto. */
#inventoryView #inventoryEquippedGrid>article.equipped-showcase-slot{align-content:stretch!important;justify-content:stretch!important;grid-template-rows:minmax(0,1fr)!important;grid-template-columns:minmax(0,1fr)!important}
/* a asa na coluna alta (só no PC largo; no celular ela é um quadradinho igual aos outros): a arte é mais larga que alta, então quem manda é a largura; ela usa a coluna toda */
@media (min-width:1241px){#inventoryView #inventoryEquippedGrid>article[data-inv-equip="wing"] img{width:96%;height:92%}}
#inventoryView #inventoryEquippedGrid>article.inv-sel{outline:2px solid var(--iv-ouro);outline-offset:2px}

/* janela da ficha (04/10): no centro, por cima de tudo, fundo desfocado; fechada ela não aparece */
.inv-c-detalhe{position:fixed;left:50%;top:50%;z-index:1301;width:min(460px,calc(100vw - 24px));max-height:min(88vh,780px);max-height:min(88dvh,780px);overflow:auto;overscroll-behavior:contain;
  border:1px solid rgba(215,169,68,.55);border-radius:14px;background:linear-gradient(180deg,#171e2c,#10151f);box-shadow:0 22px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04);
  transform:translate(-50%,-50%) scale(.97);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,transform .15s ease,visibility .15s}
.inv-c-detalhe.aberto{transform:translate(-50%,-50%);opacity:1;visibility:visible;pointer-events:auto}
.inv-c-detalhe:empty{display:none}
/* fechando (o sumiço leva 0,15 s): nada dentro pega o clique, senão o toque no item de baixo cai na ficha que está sumindo */
#inventoryDetail:not(.aberto),#inventoryDetail:not(.aberto) *,#inventoryDetail:not(.aberto) .game-tooltip.rico{pointer-events:none!important}
.inv-c-fundo{position:fixed;inset:0;z-index:1300;background:rgba(5,7,12,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.inv-c-fundo.hidden{display:none!important}
#inventoryDetail .game-tooltip.rico>.ttip-head{padding-right:48px}
.inv-detalhe-card{display:grid;gap:10px;padding-bottom:12px;position:relative}
.inv-detalhe-vazio{padding:22px 16px;display:grid;gap:6px;color:var(--iv-mudo);text-align:center}
.inv-detalhe-vazio strong{color:#fff}
.inv-detalhe-vazio p{margin:0}
#inventoryDetail .game-tooltip.rico{position:static!important;display:block!important;max-width:none!important;width:auto!important;border:0!important;box-shadow:none!important;
  background:transparent!important;columns:auto!important;pointer-events:auto!important;white-space:normal!important;z-index:auto!important}
.inv-iguais{margin:0 12px;font-size:calc(12px * var(--text-scale,1));color:var(--iv-mudo)}
.inv-iguais b{color:#fff}
.inv-comp{margin:0 12px;padding:9px 11px;border-radius:10px;font-size:calc(12.5px * var(--text-scale,1));font-weight:700;border:1px solid}
.inv-comp small{display:block;font-size:calc(10.5px * var(--text-scale,1));letter-spacing:.12em;opacity:.75;margin-bottom:3px}
.inv-comp.positive{background:#0f2519;border-color:#2f7a48;color:#aef2c3}.inv-comp.negative{background:#2a1416;border-color:#7a2f35;color:#ffc9cd}.inv-comp.neutral{background:#151c29;border-color:var(--iv-linha);color:#c9d2e0}
/* botões presos no pé da ficha: EQUIPAR/RETIRAR sempre à vista, sem rolar (pedido do autor 29/09) */
.inv-acoes-fixas{position:sticky;bottom:0;z-index:2;display:grid;gap:7px;margin-bottom:-12px;padding:10px 0 12px;border-top:1px solid var(--iv-linha);
  background:linear-gradient(180deg,rgba(16,21,31,.92),#10151f 40%);box-shadow:0 -10px 18px -8px rgba(0,0,0,.6)}
.inv-botoes{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 12px}
.inv-botoes>.inv-btn:first-child{grid-column:1/-1}
.inv-botoes-peq{display:flex;gap:7px;padding:0 12px}
.inv-botoes-peq .inv-btn{flex:1}
#inventoryView .inv-btn{min-height:40px;padding:9px 10px;border-radius:9px;border:1px solid var(--iv-linha);background:#1a2233;color:var(--iv-tinta);font-weight:800;
  font-size:calc(12px * var(--text-scale,1));letter-spacing:.05em;cursor:var(--cur-mao,pointer)}
#inventoryView .inv-btn:disabled{opacity:.45;cursor:not-allowed}
#inventoryView .inv-btn.ouro{background:var(--botao-ouro-fundo);color:var(--botao-ouro-texto);border-color:var(--botao-ouro-borda)}
#inventoryView .inv-btn.roxo{background:#2b1d44;border-color:#6d4bb0;color:#e2d4ff}
#inventoryView .inv-btn.verde{background:#15301f;border-color:#2f7a48;color:#bff0cc}
#inventoryView .inv-btn.fantasma{background:transparent;min-height:34px;font-size:calc(11.5px * var(--text-scale,1))}
#inventoryView .inv-btn.fantasma.on{border-color:var(--iv-ouro2);color:var(--iv-ouro)}
.inv-fechar{display:grid;place-items:center;position:absolute;right:8px;top:8px;z-index:3;width:36px;height:36px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:#232633;color:#fff;font-size:15px;padding:0;line-height:1;cursor:var(--cur-mao,pointer)}

/* 900-1240: o boneco vira fileira em cima; grade e ficha continuam lado a lado */
@media (max-width:1240px){
  .inv-c-corpo{grid-template-columns:minmax(0,1fr)}
  .inv-c-esq{grid-column:1/-1;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:start}
  #inventoryView .inv-c-equip{display:grid;grid-template-columns:auto minmax(180px,1fr);gap:10px 12px;align-items:center}
  #inventoryView .inv-c-equip>.inv-c-cab{grid-column:1/-1;margin:0}
  .inv-c-boneco{grid-template-columns:repeat(7,58px);grid-template-areas:"weapon helmet armor boots pendant ring wing";padding:6px}
  #inventoryEquippedGrid>article[data-inv-equip="wing"]{aspect-ratio:1}
  .inv-silhueta{padding:10% 24% 36%}
  .inv-c-set{margin:0}
}
/* < 900: uma coluna; a ficha é uma gaveta de baixo */
@media (max-width:899px){
  #inventoryView.inv-c{padding:8px 8px 90px;gap:8px}
  .inv-c-topo{gap:8px 12px;padding:10px 12px}
  .inv-c-titulo h2{font-size:calc(21px * var(--text-scale,1))}
  .inv-c-cap{min-width:120px}
  .inv-c-acoes{width:100%}.inv-c-acoes .utility-button{flex:1;padding:9px 6px!important;font-size:calc(11px * var(--text-scale,1))!important}
  .inv-c-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  /* 26/10 (auditoria Android): "Armadura" e "R…" cortados na borda sem sinal de que rolam: degradê na borda
     direita enquanto houver mais (responsivo.css, colRolaDeLadoFim). */
  @supports (animation-timeline:scroll()){.inv-c-chips,.inv-c-atributos{animation:colRolaDeLadoFim linear both;animation-timeline:scroll(self x)}}
  .inv-c-chips::-webkit-scrollbar{display:none}
  .inv-c-seletores{width:100%;display:grid;grid-template-columns:1fr 1fr}.inv-c-seletores>*{min-width:0}#invRecycleMode{grid-column:1/-1}
  .inv-c-corpo{display:block}
  .inv-c-esq{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:8px}
  #inventoryView .inv-c-equip{display:block;padding:10px}
  #inventoryView .inv-c-mochila{padding:10px}
  .inv-c-boneco{grid-template-columns:repeat(7,minmax(0,1fr));grid-template-areas:"weapon helmet armor boots pendant ring wing";gap:5px;padding:5px}
  .inv-c-set{margin-top:8px}
  .inv-c-grade{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .inv-c-dica{display:none}
}
/* celular deitado: pouca altura, a janela usa quase tudo */
@media (max-height:500px){ .inv-c-detalhe{width:min(640px,calc(100vw - 24px));max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)} }
@media (prefers-reduced-motion:reduce){ .inv-c-detalhe{transition:none} }
#inventoryView .inv-c-esq .loot-filter-card{border-radius:14px}
#inventoryView .inv-c-esq .inventory-automation-details>summary{padding:13px 16px!important}
#inventoryView .inv-slot img{border:0!important;background:none!important;border-radius:0!important;box-shadow:none!important}

/* Varredura de telas (03/10): entre 900 e 1240 px o boneco ("auto") ocupava a linha toda e o cartão de
   Automação ficava com 7 px, com o texto saindo para fora da tela (tablet 961). Agora o cartão tem largura própria. */
@media (min-width:900px) and (max-width:1240px){
  .inv-c-esq{grid-template-columns:minmax(0,1fr) minmax(220px,300px)}
  #inventoryView .inv-c-equip{grid-template-columns:minmax(0,1fr)}
}
/* 10/10: com o botão do Baú são três na fileira; no celular estreito com texto grande o último desce inteiro, sem cortar */
.inv-botoes-peq{flex-wrap:wrap}
.inv-botoes-peq .inv-btn{flex:1 1 auto;white-space:nowrap}

/* COMPARAR (18/10, pedido do DevilChris): a peça da mochila ao lado da que está em uso no mesmo espaço.
   PC e celular deitado: lado a lado. Celular em pé: abas ESTE ITEM / EM USO (ou as duas empilhadas, .comp-empilhado). */
.inv-c-detalhe.inv-comparando{width:min(900px,calc(100vw - 24px))}
.inv-comp-topo{padding:14px 56px 0 16px;font-weight:900;letter-spacing:.14em;color:var(--iv-ouro,#e6b85c);font-size:calc(13px * var(--text-scale,1))}
.inv-comp-abas{display:none}
.inv-comp-par{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:0 10px;align-items:start}
.inv-comp-lado{min-width:0;border:1px solid rgba(215,169,68,.45);border-radius:12px;background:rgba(10,14,22,.55);overflow:hidden}
.inv-comp-lado.uso{border-color:rgba(88,150,230,.55)}
.inv-comp-rotulo{padding:6px 12px;font-size:calc(11px * var(--text-scale,1));font-weight:900;letter-spacing:.14em;color:#1b1206;background:linear-gradient(180deg,#e6b85c,#b98530)}
.inv-comp-rotulo.uso{color:#e6f0ff;background:linear-gradient(180deg,#3d6fb6,#284c82)}
#inventoryDetail .inv-comparar .game-tooltip.rico>.ttip-head{padding-right:12px}
.ttip-dif{display:inline-block;margin-left:6px;padding:0 5px;border-radius:6px;font-style:normal;font-weight:800;font-size:.86em;line-height:1.5;white-space:nowrap;vertical-align:baseline}
.ttip-dif.sobe{color:#9ff0b8;background:rgba(47,122,72,.32)}
.ttip-dif.desce{color:#ffb3b9;background:rgba(122,47,53,.36)}
.ttip-dif.igual{color:#aab4c4;background:rgba(255,255,255,.07)}
@media (max-width:699px) and (orientation:portrait){
  .inv-comp-par{grid-template-columns:minmax(0,1fr)}
  #inventoryDetail:not(.comp-empilhado) .inv-comp-rotulo{display:none}
  #inventoryDetail:not(.comp-empilhado) .inv-comp-abas{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 10px}
  .inv-comp-aba{min-height:38px;border-radius:9px;border:1px solid var(--iv-linha,#2a3448);background:#1a2233;color:#c9d2e0;font-weight:900;letter-spacing:.08em;font-size:calc(12px * var(--text-scale,1));cursor:var(--cur-mao,pointer)}
  .inv-comp-aba.on[data-inv-comp-aba="novo"]{background:var(--botao-ouro-fundo);color:var(--botao-ouro-texto);border-color:var(--botao-ouro-borda)}
  .inv-comp-aba.on[data-inv-comp-aba="uso"]{background:linear-gradient(180deg,#3d6fb6,#284c82);color:#e6f0ff;border-color:#7fb0f0}
  #inventoryDetail:not(.comp-empilhado) .inv-comp-par[data-lado="novo"] .inv-comp-lado.uso,
  #inventoryDetail:not(.comp-empilhado) .inv-comp-par[data-lado="uso"] .inv-comp-lado.novo{display:none}
}
@media (min-width:700px),(orientation:landscape){
  #inventoryDetail.inv-comparando .inv-botoes{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  #inventoryDetail.inv-comparando .inv-botoes>.inv-btn{grid-column:auto!important}
}
/* celular deitado (pouca altura): os botões pequenos vão para o lado dos grandes, sobra altura para as duas fichas */
@media (orientation:landscape) and (max-height:500px){
  #inventoryDetail.inv-comparando .inv-acoes-fixas{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:center}
  #inventoryDetail.inv-comparando .inv-botoes{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
  #inventoryDetail.inv-comparando .inv-btn{min-height:36px;padding:7px 6px}
}
/* o mesmo COMPARAR no balão do Mercado e da Loja: lado a lado onde cabe; no celular em pé só o item do anúncio, com a
   diferença em cada número e a linha "Diferença para o seu: …" (balão não tem abas para tocar) */
.game-tooltip.rico.comparando{max-width:min(720px,calc(100vw - 20px))!important}
.ttip-comparar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:8px}
.ttip-comp-lado{min-width:0;border:1px solid rgba(215,169,68,.45);border-radius:10px;overflow:hidden}
.ttip-comp-lado.uso{border-color:rgba(88,150,230,.55)}
.ttip-comp-nota{display:none;grid-column:1/-1;font-size:calc(11.5px * var(--text-scale,1));color:#aab4c4;padding:0 4px 2px}
@media (max-width:699px) and (orientation:portrait),(orientation:landscape) and (max-height:500px){
  .game-tooltip.rico.comparando{max-width:min(340px,calc(100vw - 20px))!important}
  .ttip-comparar{grid-template-columns:minmax(0,1fr);padding:0}
  .ttip-comp-lado{border:0;border-radius:0}
  .ttip-comp-lado.uso,.ttip-comparar .inv-comp-rotulo{display:none}
  .ttip-comp-nota{display:block;padding:0 12px 10px}
}
/* o que só a sua peça tem: riscado no item novo, com o valor que se perde em vermelho */
.ttip-stats .ttip-perde{border-style:dashed!important;border-color:rgba(255,120,130,.45)!important}
.ttip-perde s{color:#9aa3b5;text-decoration-color:rgba(255,138,147,.85);text-decoration-thickness:1.5px}

/* FILTROS NOVOS (24/10, opção C do autor): Classe e Mapa nas caixas; a barra "MAIOR PRIMEIRO" de atributos extras
   sempre à vista (no celular desliza de lado) e o valor do atributo escolhido no pé de cada quadradinho. */
.inv-c-seletores select.on{border-color:var(--iv-ouro2);background:#2a2113;color:var(--iv-ouro)}
.inv-c-atributos{flex:1 1 100%;display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none;padding:1px 0}
.inv-c-atributos::-webkit-scrollbar{display:none}
.inv-c-atributos>*{flex:none}
.inv-c-atributos-rotulo{font-size:calc(10.5px * var(--text-scale,1));letter-spacing:.12em;color:var(--iv-mudo);font-weight:800;white-space:nowrap}
.inv-atr{position:absolute;left:3px;right:3px;bottom:3px;padding:1px 2px;border-radius:5px;background:rgba(10,8,4,.86);border:1px solid #c9a14a;
  color:#ffd77a;font-weight:800;font-size:calc(11px * var(--text-scale,1));text-align:center;line-height:1.2;white-space:nowrap;overflow:hidden;pointer-events:none;font-variant-numeric:tabular-nums}
.inv-slot:has(.inv-atr) :is(.inv-qtd,.inv-selo){bottom:calc(20px * var(--text-scale,1))}
.inv-slot:has(.item-grau-faixa) .inv-atr{left:12px}

/* FILTROS RECOLHIDOS (27/10, opção A do autor): os tipos ficam sempre à vista e o botão "Filtros" no fim da linha abre
   o quadro com Classe, Mapa, Raridade, Ordem, MAIOR PRIMEIRO e Escolher para reciclar. Quem liga: renderInvFiltrosBotao. */
.inv-c-filtros .inv-c-chips{flex:1 1 0}
.inv-c-chips>.inv-chip{flex:none}
.inv-c-filtros-btn{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:5px 14px;border-radius:999px;border:1px solid var(--iv-ouro2);
  background:#2a2113;color:var(--iv-ouro);font-weight:800;font-size:calc(12px * var(--text-scale,1));white-space:nowrap;cursor:var(--cur-mao,pointer)}
.inv-c-filtros-btn b{min-width:18px;padding:0 6px;border-radius:999px;background:rgba(0,0,0,.45);color:var(--iv-mudo);text-align:center;font-variant-numeric:tabular-nums}
.inv-c-filtros-btn.on b{background:var(--iv-ouro2);color:#1a1206}
.inv-c-filtros-btn i{font-style:normal;transition:transform .15s}
.inv-c-filtros.aberto .inv-c-filtros-btn i{transform:rotate(180deg)}
.inv-c-filtros-btn:focus-visible{outline:2px solid var(--iv-ouro);outline-offset:2px}
.inv-c-filtros-mais{flex:1 1 100%;min-width:0;display:none;grid-template-columns:minmax(0,1fr);gap:8px;padding:10px;border:1px solid var(--iv-linha);border-radius:12px;background:rgba(0,0,0,.28)}
.inv-c-filtros.aberto .inv-c-filtros-mais{display:grid}
@media (prefers-reduced-motion:reduce){.inv-c-filtros-btn i{transition:none}}

/* LUVAS (27/10): o 8º espaço. No boneco grande fica embaixo da asa; nas fileiras, logo depois das Botas. */
#inventoryEquippedGrid>article[data-inv-equip="gloves"]{grid-area:gloves}
.inv-c-boneco.com-luvas{grid-template-areas:"pendant helmet wing" "weapon armor wing" "ring boots gloves"}
@media (max-width:1240px){
  .inv-c-boneco.com-luvas{grid-template-columns:repeat(8,58px);grid-template-areas:"weapon helmet armor boots gloves pendant ring wing"}
}
@media (max-width:899px){
  .inv-c-boneco.com-luvas{grid-template-columns:repeat(8,minmax(0,1fr));grid-template-areas:"weapon helmet armor boots gloves pendant ring wing"}
}