/*
 * MARCA DE "NÃO POSSO VESTIR" — desmentida pelo servidor (13/08).
 *
 * Ver `index.js` deste mesmo diretório para o PORQUÊ. Aqui só o desenho.
 *
 * 🚨 PREFIXO SÓ MEU: `mv-` / `data-mv`. Duas telas deste webroot já usaram `.inv`
 * e uma quebrou a outra em produção. Antes de instalar isto, `mv-` e `data-mv`
 * foram procurados em TODAS as folhas `styles.css` dos módulos deste webroot, em
 * todos os `.js` e nos dois arquivos do bundle: zero ocorrências.
 *
 * 🚨 E NUNCA um `asterisco-barra` dentro destes comentários. A primeira versão
 * deste arquivo citava o caminho da varredura com curinga — a sequência FECHA o
 * comentário no meio da frase, e o resto do texto virou "seletor" até engolir a
 * primeira regra inteira. O X continuava aparecendo com o `data-mv='ok'` posto,
 * o que parecia bug de JavaScript. Foi o teste de tela que pegou.
 *
 * 🚨 NADA AQUI APAGA NÓ. O cadeado (que o `correcoes/styles.css` desenha como ✕)
 * é um `<span>` do React: ele continua no DOM, só fica invisível. Remover o nó é
 * o caminho conhecido para o `removeChild` que já derrubou esta interface.
 */

/* ── A peça na BOLSA ─────────────────────────────────────────────── */

/*
 * O X sai. `display:none` e não `visibility:hidden`: o cadeado é posicionado no
 * canto do slot e um nó invisível mas presente continua sendo pintado por cima
 * da arte em alguns navegadores de celular (a base é quase toda de celular).
 */
.bag-slot[data-mv='ok'] > .bag-slot__cadeado {
  display: none !important;
}

/*
 * E o estado visual de bloqueado também sai. O bundle pinta o travado em dois
 * lugares — a arte em cinza e a borda apagada:
 *
 *   .bag-slot[data-travado=true] > img { filter: grayscale(1) brightness(.55) }
 *   .bag-slot[data-travado=true]       { border-color: #2a3a4a }
 *
 * 🚨 Devolvo o valor ORIGINAL (o mesmo `drop-shadow` e a mesma `var(--rarity)`
 * das regras base do bundle), e não um valor novo: a peça tem de ficar idêntica
 * a uma peça que nunca foi marcada.
 *
 * 🚨 `data-travado` fica exatamente como o React escreveu. Quem manda no desenho
 * aqui é o `data-mv`, que é MEU — por isso o conserto se desfaz sozinho quando eu
 * tiro a marca, e o React nunca disputa um atributo comigo.
 */
.bag-slot[data-mv='ok'] > img {
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.45)) !important;
}
.bag-slot[data-mv='ok'] {
  border-color: var(--rarity, #2a3a4a) !important;
}

/* ── A ficha grande (o diálogo do item) ──────────────────────────── */

/*
 * O recado "Peça da fase N. Você está na fase U — alcance a dela para vestir."
 * é a MESMA mentira, em forma de frase. Sai junto com o X.
 */
.dialog [data-mv='recado-falso'] {
  display: none !important;
}