/* ══════════════════════════════════════════════════════════════════
   ARMÁRIOS DE EQUIPAMENTO — embutidos no painel de Equipamentos.

   A regra que faz tudo caber está logo abaixo: `.equipment__doll` já é um grid
   de 5 colunas com teto de 930px, e o painel tem 1096px. Os 166px que sobravam
   dos dois lados eram exatamente os "espaços vazios" do pedido — aqui eles
   viram as colunas 1 e 7.

   Tudo em tokens do jogo. Nada de cor nova.
   ══════════════════════════════════════════════════════════════════ */

/*
 * 🚨 A ÚNICA regra que mexe em algo que já existia.
 *
 * `max-width: none` solta o teto de 930px (o painel oferece 1068px de área
 * útil), e as duas colunas novas cabem sem empurrar nada para fora. As colunas
 * dos painéis de status viram `1fr` com piso: elas encolhem um pouco em telas
 * de 1440px e voltam ao tamanho cheio em telas maiores.
 */
/*
 * 🚨 O TETO DE 132 SUBIU PARA 184 (#1053, 23/08).
 *
 * *"ficou apertado quanto à largura; com a tela cheia acho que você conseguirá
 * colocar um pouco mais largo e vai ficar perfeito"*.
 *
 * 🚨 E o botão certo é ESTE, não `min-width` no `.arm-emb`. Eu tentei o
 * `min-width` DUAS vezes — no #1052 comeu a ficha de atributos, no #1053 comeu o
 * painel OFENSIVOS — porque um item de grid com largura forçada TRANSBORDA da
 * faixa em vez de disputá-la. Subindo o teto da faixa, quem cede é a coluna
 * `1fr` do lado, e ela só cede até o próprio piso de 150px. O grid resolve a
 * briga; eu não preciso arbitrar.
 *
 * Medido em 1280, 1366, 1600 e 1920 px, antes e depois, no mesmo navegador:
 * armário 132 → 184, painéis de status intactos em 218, boneco intacto em 260,
 * zero sobreposição, nada fora da tela, e o título deixou de sair como
 * "Armári…". (`conferir-184.py`)
 *
 * 🚨 E foi a 264 no #1054/#1057, porque a faixa agora carrega TRÊS coisas: o
 * cartão de 184 px, a estante de cristais de 52 px e a seta do carrossel de
 * 24 px, nessa ordem, de dentro para fora (o desenho está comentado em
 * `colecao/styles.css`).
 *
 * 🚨 O preço, medido, é dos painéis de status em telas de 1366 px: eles vão de
 * 218 para 199. Isso NÃO é o erro do #1052/#1053 — não há sobreposição nenhuma,
 * e a coluna deles é `minmax(150px, 1fr)`, ou seja, encolher com folga até 150 é
 * o comportamento que ela foi desenhada para ter. Em 1600 px ou mais nada muda:
 * continuam nos 218 cheios.
 */
.game[data-wide='true'] .equipment__doll {
  max-width: none;
  grid-template-columns:
    minmax(104px, 264px) /* armário 1 + estante + seta */
    minmax(150px, 1fr) /* ofensivos */
    auto /* 4 slots */
    minmax(0, 260px) /* boneco */
    auto /* 4 slots */
    minmax(150px, 1fr) /* defensivos */
    minmax(104px, 264px); /* armário 2 + estante + seta */
}

/* O cartão acompanha a coluna em vez de estourar dela. */
.game[data-wide='true'] .equipment__stats {
  width: 100%;
  max-width: 218px;
}

/*
 * A fileira de 6 slots continua onde estava: ela é `grid-column: 1 / -1`, e com
 * 7 colunas passaria a atravessar por baixo dos armários. Presa em 2/7, o centro
 * dela é o mesmo centro de antes.
 */
.game[data-wide='true'] .equipment__row {
  grid-column: 2 / 7;
}

/* ── A coluna do armário ──────────────────────────────────────── */

.arm-emb {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 7px 6px 6px;
  border: 1px solid var(--line-cool, #0d2135);
  border-radius: var(--r-md, 12px);
  background: linear-gradient(180deg, #091727d9, #040c16d9);
  /* Ocupa a coluna da ponta e as DUAS linhas (boneco + fileira de 6), que é o
     que dá altura para os 14 slots sem esticar o painel. */
  grid-row: 1 / span 2;
  align-self: stretch;
}

.arm-emb[data-lado='esq'] {
  grid-column: 1;
}

.arm-emb[data-lado='dir'] {
  grid-column: 7;
}

/* Fora do modo largo o grid tem 3 colunas e os painéis de status somem; os
   armários passam a ser uma faixa própria abaixo do boneco, ainda dentro da
   MESMA tela — que é o ponto do pedido. */
.game:not([data-wide='true']) .arm-emb {
  grid-row: auto;
  grid-column: 1 / -1;
}

.arm-emb__cabeca {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.arm-emb__nome {
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 4px;
  border: 1px dashed rgb(85 104 138 / 0.45);
  border-radius: var(--r-xs, 4px);
  background: none;
  color: var(--gold-100, #fff3cf);
  font-size: var(--fs-200, 11px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.16s ease;
}

.arm-emb__nome:hover,
.arm-emb__nome:focus-visible {
  border-color: var(--gold-500, #dc911e);
}

.arm-emb__poder {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: var(--r-pill, 999px);
  background: rgb(52 28 0 / 0.55);
  color: var(--gold-300, #f2d089);
  font-size: var(--fs-100, 10px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/*
 * O personagem é o FUNDO da coluna, não uma faixa no topo.
 *
 * Numa faixa de 72px só cabia um recorte do busto — e um `contain` ali sairia
 * com 46px de largura, um borrão. Ao fundo, ele aparece de corpo inteiro e do
 * tamanho da coluna, que é o desenho do pedido ("o personagem no centro do
 * armário"), e os 14 slots não perdem um pixel de altura.
 *
 * A opacidade e o véu escuro por cima existem para o slot continuar legível: o
 * boneco é ambientação, o conteúdo é o equipamento.
 */
.arm-emb__palco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: var(--r-md, 12px);
  pointer-events: none;
}

.arm-emb__palco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 62%;
  opacity: 0.5;
}

.arm-emb__palco::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 42% at 50% 78%, rgb(45 114 205 / 0.22), transparent 72%),
    linear-gradient(180deg, rgb(4 12 22 / 0.66), rgb(4 12 22 / 0.42) 40%, rgb(4 12 22 / 0.74));
}

/* Tudo o que é conteúdo fica ACIMA do boneco. */
.arm-emb__cabeca,
.arm-emb__grade,
.arm-emb__acoes {
  position: relative;
  z-index: 1;
}

.arm-emb__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

/* Fora do modo largo cabem todos numa fileira só. */
.game:not([data-wide='true']) .arm-emb__grade {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* ── Slot ─────────────────────────────────────────────────────── */

.arm-emb__slot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
  padding: 0;
  border: 2px solid var(--rarity, rgb(85 104 138 / 0.4));
  border-radius: var(--r-xs, 4px);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--rarity, #1d4463) 22%, transparent),
      rgb(4 16 29 / 0.85));
  cursor: pointer;
  overflow: hidden;
  /* O arrasto do jogo depende de `pointermove` chegar: sem isto, o navegador
     rouba o gesto para rolar a página no toque. */
  touch-action: none;
  transition: border-color 0.15s ease, filter 0.15s ease;
}

.arm-emb__slot[data-empty='true'] {
  border-style: dashed;
  background: rgb(4 16 29 / 0.55);
}

.arm-emb__slot:hover,
.arm-emb__slot:focus-visible {
  filter: brightness(1.28);
  border-color: var(--gold-300, #f2d089);
}

/* Em arrasto, o slot de origem apaga — o mesmo sinal que o jogo dá. */
.arm-emb__slot[data-held='true'] {
  opacity: 0.35;
}

.arm-emb__slot img {
  width: 88%;
  height: 88%;
  object-fit: contain;
}

/* Silhueta do slot vazio, no lugar de um texto de 7px que ninguém lia. */
.arm-emb__silhueta {
  width: 62%;
  height: 62%;
  object-fit: contain;
  opacity: 0.34;
  filter: brightness(0) invert(0.62);
}

.arm-emb__slot:hover .arm-emb__silhueta {
  opacity: 0.6;
}

.arm-emb__rank {
  color: var(--rarity, #9da9b4);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(10px, 1.2vw, 14px);
  font-weight: 900;
}

.arm-emb__ilvl {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0 2px;
  background: linear-gradient(0deg, rgb(1 6 15 / 0.9), rgb(1 6 15 / 0.25));
  color: var(--gold-300, #f2d089);
  font-size: clamp(7px, 0.66vw, 9px);
  font-weight: 800;
  line-height: 1.4;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Cadeado desenhado: a peça está guardada, mas a fase ainda não alcança. */
/*
 * "NÃO DÁ PARA USAR" é um X, não um cadeado (#160).
 *
 * Pedido do testador: *"troca o ícone de cadeado para não poder usar para um
 * item de X"*. E ele tem razão — cadeado, no resto do jogo, quer dizer
 * "trancado, compre/desbloqueie". Aqui a peça já é do jogador; o que falta é
 * NÍVEL. O X diz "não serve", que é a informação certa.
 */
.arm-emb__trava {
  position: absolute;
  left: 2px;
  top: 1px;
  width: 11px;
  height: 11px;
  color: #ff6b6b;
  font: 700 11px/11px system-ui, sans-serif;
  text-align: center;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.9);
}

.arm-emb__trava::before {
  content: '✕';
}

.arm-emb__slot[data-vestivel='false'] {
  filter: saturate(0.35) brightness(0.7);
}

.arm-emb__slot[data-vestivel='false']:hover {
  filter: saturate(0.5) brightness(0.9);
}

/* ── Botões ───────────────────────────────────────────────────── */

/* Três controles desde o #151: Vestir · seletor de faixa · Guardar melhores.
   O seletor ocupa a linha inteira porque o texto "Nível 121 a 149" não cabe
   em meia coluna. */
.arm-emb__acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: auto;
}

.arm-emb__faixa {
  grid-column: 1 / -1;
  order: -1;
  min-height: 26px;
  padding: 4px 6px;
  border: 1px solid var(--line-cool-2, #1d4463);
  border-radius: var(--r-sm, 8px);
  background: rgb(0 0 0 / 0.3);
  color: var(--text, #dbe6f5);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.arm-emb__faixa:focus-visible {
  outline: 2px solid var(--gold-300, #f0c44a);
  outline-offset: 1px;
}

.arm-emb__faixa:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.arm-emb__btn {
  min-height: 26px;
  padding: 5px 4px;
  border: 1px solid var(--line-cool-2, #1d4463);
  border-radius: var(--r-sm, 8px);
  background: linear-gradient(180deg, rgb(29 68 99 / 0.5), rgb(1 12 24 / 0.7));
  color: var(--text, #e9edf6);
  font-size: var(--fs-100, 10px);
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter 0.15s ease, border-color 0.15s ease;
}

.arm-emb__btn:hover:not(:disabled) {
  filter: brightness(1.2);
  border-color: var(--gold-700, #8a5a1c);
}

.arm-emb__btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.arm-emb__btn--ouro {
  border-color: transparent;
  background: linear-gradient(180deg, var(--gold-300, #f2d089), var(--gold-500, #dc911e));
  box-shadow: inset 0 1px rgb(255 255 255 / 0.5);
  color: var(--on-gold, #2a1a02);
  font-weight: 900;
  text-transform: uppercase;
}

.arm-emb__btn--ouro:disabled {
  background: linear-gradient(180deg, #24354a, #172433);
  box-shadow: none;
  color: var(--faint, #55688a);
}

/* ── Aviso ────────────────────────────────────────────────────── */

.arm-emb-aviso {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 70;
  translate: -50% 0;
  max-width: min(440px, 88vw);
  padding: 10px 16px;
  border: 1px solid var(--gold-700, #8a5a1c);
  border-radius: var(--r-md, 12px);
  background: rgb(1 6 15 / 0.96);
  box-shadow: 0 10px 34px rgb(0 0 0 / 0.7);
  color: var(--gold-100, #fff3cf);
  font-size: var(--fs-300, 12px);
  font-weight: 700;
  text-align: center;
  animation: arm-emb-entrar 0.2s ease-out both;
}

.arm-emb-aviso[data-tipo='erro'] {
  border-color: var(--error, #ff5f6a);
  color: var(--error, #ff5f6a);
}

@keyframes arm-emb-entrar {
  from {
    opacity: 0;
    translate: -50% 10px;
  }
  to {
    opacity: 1;
    translate: -50% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arm-emb-aviso {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   EVOLUÇÃO 07/08: trava por Isekai, carrossel, compra e tutorial.
   ══════════════════════════════════════════════════════════════════ */

/* ── Setas do carrossel ───────────────────────────────────────── */

/*
 * A seta flutua na BORDA EXTERNA da coluna, não dentro do cabeçalho.
 *
 * No cabeçalho ela comia a largura do nome, que virava "Armá…" numa coluna de
 * 132px. Na borda ela cai no vão de 10px que a grade já tem entre as colunas,
 * não custa nada de largura e é o gesto de carrossel que todo mundo reconhece.
 */
.arm-emb__seta {
  position: absolute;
  top: 50%;
  z-index: 3;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 22px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line-cool-2, #1d4463);
  border-radius: var(--r-xs, 4px);
  background: rgb(6 26 43 / 0.95);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.55);
  cursor: pointer;
  transition: border-color 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}

.arm-emb[data-lado='esq'] .arm-emb__seta {
  left: -12px;
}

.arm-emb[data-lado='dir'] .arm-emb__seta {
  right: -12px;
}

.arm-emb__seta:hover:not(:disabled) {
  background: rgb(52 28 0 / 0.9);
}

.arm-emb__seta:hover:not(:disabled) {
  border-color: var(--gold-500, #dc911e);
}

.arm-emb__seta:disabled {
  opacity: 0.28;
  cursor: default;
}

/* A ponta é desenhada: nada de caractere, que dependeria da fonte ter o glifo. */
.arm-emb__seta::before {
  content: '';
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--gold-300, #f2d089);
  border-right: 2px solid var(--gold-300, #f2d089);
}

.arm-emb__seta[data-dir='tras']::before {
  rotate: -135deg;
  translate: 1px 0;
}

.arm-emb__seta[data-dir='frente']::before {
  rotate: 45deg;
  translate: -1px 0;
}

/* ── Aviso (antes do Isekai) e trancado ───────────────────────── */

.arm-emb[data-estado='vazio'] {
  border-style: dashed;
  border-color: rgb(29 68 99 / 0.4);
  background: rgb(4 12 22 / 0.4);
}

.arm-emb[data-estado='trancado'] {
  border-color: rgb(220 145 30 / 0.28);
}

.arm-emb__aviso {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 4px;
  text-align: center;
}

.arm-emb__aviso p {
  margin: 0;
  color: var(--muted, #8ea3bd);
  font-size: var(--fs-200, 11px);
  line-height: 1.45;
}

.arm-emb__preco {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--gold-100, #fff3cf);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(15px, 2.2vmin, 21px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.arm-emb__preco::after {
  content: 'ouro';
  color: var(--faint, #55688a);
  font-family: inherit;
  font-size: var(--fs-100, 10px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Cadeado grande, desenhado — o mesmo traço do cadeado pequeno do slot. */
.arm-emb__cadeadao {
  position: relative;
  width: 26px;
  height: 21px;
  border: 3px solid var(--gold-500, #dc911e);
  border-radius: 4px;
  background: rgb(52 28 0 / 0.5);
  filter: drop-shadow(0 0 10px rgb(220 145 30 / 0.35));
}

.arm-emb__cadeadao::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -13px;
  width: 16px;
  height: 13px;
  translate: -50% 0;
  border: 3px solid var(--gold-500, #dc911e);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.arm-emb__acoes--uma {
  grid-template-columns: 1fr;
}

/* O tutorial saiu daqui: virou o módulo `/potato/tutorial`, usado pelo jogo
   inteiro (pedido do Gabriel, 08/08). */

@media (prefers-reduced-motion: reduce) {
  .arm-tut {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   RENASCER — a NPC ao lado do título (pedido do Gabriel, 08/08).

   🚨 Ela vive DENTRO do diálogo, não flutuando ao lado dele.
   `.dialog` tem `overflow: auto` (é ele que rola quando o conteúdo passa de
   85dvh), então qualquer coisa posicionada para fora é cortada — foi o que
   aconteceu na primeira tentativa: sobrou o braço e a prancheta na borda.

   O CSS mora neste arquivo porque a folha do bundle não é editável e este já é
   carregado no jogo inteiro.
   ══════════════════════════════════════════════════════════════════ */

.dialog--renascer .dialog__title {
  /* O título passa a dividir a linha com ela. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.5vw, 14px);
}

.renascer__npc {
  flex: 0 0 auto;
  width: clamp(56px, 11vw, 86px);
  height: auto;
  margin: -6px 0 -10px;
  filter: drop-shadow(0 4px 10px rgb(0 0 0 / 0.6));
  animation: renascer-npc-entrar 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes renascer-npc-entrar {
  from {
    opacity: 0;
    translate: -12px 6px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .renascer__npc {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   POP-UP DENTRO DO JOGO (#186) — no lugar de confirm/prompt.
   ══════════════════════════════════════════════════════════════════ */

.arm-pop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(4 6 12 / 0.72);
  animation: arm-pop-fundo 0.12s ease-out;
}

.arm-pop__caixa {
  display: grid;
  gap: 10px;
  width: min(94vw, 380px);
  padding: 20px 22px 18px;
  border: 1px solid rgb(240 196 74 / 0.4);
  border-radius: 14px;
  background: var(--panel-900, #131b28);
  box-shadow: 0 20px 48px rgb(0 0 0 / 0.65);
  animation: arm-pop-entra 0.14s ease-out;
}

.arm-pop__titulo {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: var(--gold-300, #f0c44a);
}

.arm-pop__texto {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted, #8ea3bd);
}

.arm-pop__campo {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 9px;
  background: rgb(0 0 0 / 0.34);
  color: var(--text, #dbe6f5);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
}

.arm-pop__campo:focus-visible {
  outline: 2px solid var(--gold-300, #f0c44a);
  outline-offset: 1px;
}

.arm-pop__acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 2px;
}

.arm-pop__btn {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 9px;
  background: rgb(255 255 255 / 0.06);
  color: var(--text, #dbe6f5);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.arm-pop__btn:hover { background: rgb(255 255 255 / 0.12); }

.arm-pop__btn--ok {
  border-color: rgb(240 196 74 / 0.5);
  background: linear-gradient(180deg, #f0c44a, #d19f24);
  color: #241a05;
}

.arm-pop__btn--ok:hover { background: linear-gradient(180deg, #f8d264, #e0ac28); }

.arm-pop__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@keyframes arm-pop-fundo { from { opacity: 0; } }
@keyframes arm-pop-entra { from { opacity: 0; transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  .arm-pop, .arm-pop__caixa { animation: none; }
}

/*
 * A ficha do botão direito (#160). Só o que o diálogo do jogo NÃO cobre: a arte
 * (lá é um componente React) e o afastamento do botão "Tirar". O resto herda de
 * `.dialog` e `.item-detail`, que é o ponto — a ficha tem de ser a mesma.
 */
.arm-ficha__arte {
  width: 72px;
  height: 72px;
  object-fit: contain;
  image-rendering: pixelated;
  align-self: center;
}

/*
 * A lista agora responde "o que este armário faz?" (#198). Quando o conjunto
 * está EM VIGOR ela fica dourada — é o único sinal na coluna do armário de que
 * aquele conjunto é o que está contando.
 */
.arm-emb__faixa[data-vigor='1'] {
  border-color: #f0cf7a;
  background: linear-gradient(180deg, #e9c25c, #c99a26);
  color: #241a02;
  font-weight: 700;
}

/* Par Ativar/Desativar do #254 — ocupa a linha inteira, abaixo dos outros. */
.arm-emb__par { grid-column: 1 / -1; display: flex; gap: 6px; }
/* Herda tamanho e fonte de `.arm-emb__btn`; aqui só o que difere (#260). */
.arm-emb__mini { flex: 1; }
.arm-emb__mini:hover:not(:disabled) { border-color: #3d4e75; color: #cddaf0; }
/* O estado ATUAL fica marcado e desabilitado: apertar de novo não faz nada. */
.arm-emb__mini[data-ativo='1'] {
  border-color: #d4a63c;
  background: linear-gradient(180deg, #e9c25c, #c99a26);
  color: #241a02;
  cursor: default;
}

/*
 * ── SÓ O ARMÁRIO EM USO FICA COLORIDO (17/08) ────────────────────
 *
 * *"se eu estiver usando o armário 1, apenas os itens do armário 1 terão cor,
 * todos os outros estarão preto e branco; se eu estiver usando o equipamento
 * principal, todos os armários devem estar com itens cinzas"* (Zerg).
 *
 * 🚨 O seletor é `.arm-emb`, NÃO `.arm-emb__col`: a coluna é criada com
 * `className = 'arm-emb'` (conferido em `embutido.js`). Escrevi `__col` na
 * primeira tentativa e a regra não casaria com nada — sem erro, sem efeito, e
 * eu teria anunciado como pronto.
 *
 * 🚨 Quem decide é o SERVIDOR: a coluna já recebe `data-vigor="1"` do armário
 * em vigor (`armarioEmVigor`), e `0` em todos os outros. Não invento a regra
 * aqui — se nenhum estiver em vigor (o jogador está com o equipamento
 * principal), todos ficam `0` e todos ficam cinzas, que é exatamente o segundo
 * caso que ele descreveu. Nenhuma linha nova de lógica.
 *
 * 🚨 O cinza é `grayscale`, não opacidade: opacidade apagaria a peça contra o
 * fundo escuro do painel e ela pareceria vazia. Assim ela continua legível —
 * só não está valendo.
 *
 * 🚨 E o `filter` do slot não-vestível (acima) continua valendo por cima: peça
 * travada dentro do armário ativo segue com o visual de travada.
 */
.arm-emb[data-vigor='0'] .arm-emb__slot img {
  filter: grayscale(1) brightness(0.85);
}

.arm-emb[data-vigor='0'] .arm-emb__slot:hover img {
  filter: grayscale(0.55) brightness(1);
}