/* A coleção do armário (#1049) — o desenho da foto dele.
 *
 * 🚨 Tudo aqui é ACRESCENTADO ao cartão que o `embutido.js` já monta; nada é
 * reposicionado no HTML. Quem coloca cada peça no lugar é o `order`, e é por
 * isso que o módulo pode sempre anexar no fim sem quebrar a árvore do React.
 */
.arm-emb[data-estado='livre'] {
  display: flex;
  flex-direction: column;
}
/* 🚨 A GRADE precisa de `order` explícito. Sem ele ela fica em 0 (o padrão) e
   sobe para cima do cartão — a foto do teste saiu com a recompensa EMBAIXO das
   peças, o contrário do desenho dele. */
.arm-emb__cabeca { order: 0; }
.col-rec { order: 1; }
.arm-emb__palco { order: 2; }
.arm-emb__grade { order: 3; }
.col-cris { order: 4; }
.arm-emb__acoes { order: 5; }
.arm-emb__par { order: 6; }
.arm-emb__faixa { order: 7; }

/* ── o cartão da recompensa ─────────────────────────────────────── */

.col-rec {
  display: grid;
  gap: 3px;
  margin: 4px 0 6px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--cor, #9DA9B4) 45%, transparent);
  border-radius: 10px;
  /* 🚨 Fundo OPACO e acima do boneco: o cartão fica sobre o palco, e com fundo
     translúcido o rosto do boneco aparecia atrás do texto. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cor, #9DA9B4) 16%, #071322),
    #050e1a);
  position: relative;
  z-index: 2;
  text-align: center;
}

/* Completa, a moldura acende — é o "bônus ativo" da foto dele. */
.col-rec[data-ativo='1'] {
  border-color: var(--cor, #9DA9B4);
  box-shadow: 0 0 14px color-mix(in srgb, var(--cor, #9DA9B4) 40%, transparent);
}

.col-rec__rot {
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.62;
}
.col-rec__val {
  font-size: 1.02rem;
  color: var(--cor, #eaf4ff);
  text-shadow: 0 0 10px color-mix(in srgb, var(--cor, #9DA9B4) 45%, transparent);
}
.col-rec[data-ativo='0'] .col-rec__val { color: #9fb3c8; text-shadow: none; }

.col-rec__barra {
  height: 5px;
  border-radius: 3px;
  background: rgb(255 255 255 / 0.08);
  overflow: hidden;
}
.col-rec__barra i {
  display: block;
  height: 100%;
  background: var(--cor, #9DA9B4);
  transition: width 0.2s ease;
}
.col-rec__n { font-size: 0.68rem; opacity: 0.78; }

/* 🚨 O aviso de que o bônus ainda não vale. Some sozinho quando a regra do
   servidor entrar — é só apagar esta linha e o `<span>` que a gera. */
.col-rec__breve {
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f0c44a;
  opacity: 0.75;
}

/* ── os cristais ────────────────────────────────────────────────── */

.col-cris {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 6px 0 4px;
}

/* O losango da foto: um quadrado girado, com o brilho da raridade. */
.col-cris__c {
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--cor) 55%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--cor) 22%, #05101d);
  rotate: 45deg;
  cursor: pointer;
  transition: scale 0.12s ease, box-shadow 0.12s ease;
}
.col-cris__c[data-tem='1'] { background: color-mix(in srgb, var(--cor) 62%, #05101d); }
.col-cris__c[data-on='1'] {
  scale: 1.22;
  border-color: var(--cor);
  box-shadow: 0 0 9px color-mix(in srgb, var(--cor) 70%, transparent);
}
.col-cris__c:hover { scale: 1.14; }

/* ── a grade 4+4+4+2 ────────────────────────────────────────────── */

/* 🚨 Quatro colunas em qualquer largura: são 14 encaixes, e 4+4+4+2 é o
   desenho que ele mandou. A regra antiga (3 ou 7 colunas) fica sobrescrita. */
.arm-emb__grade,
.game:not([data-wide='true']) .arm-emb__grade {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* A peça que conta para a coleção escolhida fica em cor; as outras, apagadas.
   É o "colorido = possui, preto e branco = não possui" da foto. */
.arm-emb__slot[data-colecao='fora'] { filter: grayscale(0.85); opacity: 0.55; }
.arm-emb__slot[data-colecao='conta'] { filter: none; }

/* ══════════════════════════════════════════════════════════════════
 * SEGUNDA PASSADA (#1050): mais espaço, cristais de verdade, verde
 * ══════════════════════════════════════════════════════════════════
 *
 * *"está muito apertado o armário, pode deixar ele maior na tela… se
 * necessário faça versões diferentes do PC e celular"*.
 *
 * 🚨 O aperto vinha da coluna, não da grade: o cartão do armário divide a
 * largura com o boneco e com a bolsa. No PC dá para alargar sem tirar nada de
 * ninguém; no celular a largura é a que é, e lá quem ganha espaço é a altura
 * (os cristais passam para duas fileiras em vez de espremer dez numa).
 */
@media (min-width: 900px) {
  .arm-emb[data-estado='livre'] { min-width: 300px; }
  .arm-emb__grade { gap: 6px; }
  .arm-emb__slot { min-height: 54px; }
}

/* ── os cristais, agora com a arte dele ─────────────────────────── */

.col-cris {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  align-items: center;
  gap: 6px 2px;
  margin: 10px 0 8px;
  padding-bottom: 2px;
  /* 🚨 `flex: 0 0 auto`. A coluna do armário é um flex vertical, e sem isto a
     fileira ENCOLHE para caber — os cristais eram cortados por baixo e o
     número de cada um sumia atrás dos botões. Três fotos até eu ver que o
     problema não era a altura da imagem, era a fileira cedendo espaço. */
  flex: 0 0 auto;
  min-height: 58px;
}
@media (min-width: 900px) {
  .col-cris { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}

.col-cris__c {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 30px;
  padding: 3px 1px 1px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  /* 🚨 Alvo de 30px de largura e ~40 de altura: *"o player tem de poder clicar
     nele de modo fácil"*, e no celular o dedo tem 8 mm. O losango de 15px que
     estava aqui antes era metade do mínimo. */
  transition: scale 0.12s ease, filter 0.12s ease;
}
.col-cris__c img {
  /* 🚨 Altura CRAVADA. Com `height: auto` o cristal (124×154) esticava a
     célula e a fileira invadia os botões — na foto do teste eles apareciam
     cortados por baixo. Agora a altura manda e a largura acompanha. */
  width: auto;
  height: 34px;
  max-width: 100%;
  display: block;
  object-fit: contain;
  filter: saturate(0.35) brightness(0.6);
}
.col-cris__c[data-tem='1'] img { filter: none; }
.col-cris__c[data-on='1'] {
  scale: 1.12;
  background: color-mix(in srgb, var(--cor) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor) 65%, transparent);
}
.col-cris__c[data-on='1'] img { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cor) 80%, transparent)); }
.col-cris__c:hover { scale: 1.08; }

.col-cris__n {
  font-size: 0.56rem;
  line-height: 1;
  opacity: 0.7;
}

/* ── os três estados do cartão ──────────────────────────────────── */

/* 🚨 VERDE quando ele já ganha — o pedido literal. Vale do 8/14 em diante, e
   não só no 14/14: dali em diante o bônus já está entrando. */
.col-rec[data-estado='ganhando'] {
  border-color: rgb(80 220 130 / 0.6);
  background: linear-gradient(180deg, rgb(30 90 55 / 0.55), #061a10);
}
.col-rec[data-estado='ganhando'][data-ativo='1'] {
  border-color: #4ade80;
  box-shadow: 0 0 16px rgb(74 222 128 / 0.4);
}
.col-rec[data-estado='ganhando'] .col-rec__barra i { background: #4ade80; }
.col-rec[data-estado='livre'] { border-color: rgb(160 180 210 / 0.3); }

.col-rec__recado {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.88;
}
.col-rec[data-estado='ganhando'] .col-rec__recado { color: #86efac; }

.col-rec__val--livre { color: #cfd8e3; font-size: 0.9rem; }

.col-rec__rot { display: flex; align-items: center; justify-content: center; gap: 5px; }

.col-rec__i {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(240 196 74 / 0.4);
  border-radius: 50%;
  background: rgb(3 15 29 / 0.7);
  color: #f0c44a;
  font: 700 9px/1 inherit;
  cursor: pointer;
}
.col-rec__i:hover { background: rgb(240 196 74 / 0.18); }

/* ── a ajuda ────────────────────────────────────────────────────── */

.col-ajuda {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(4 10 22 / 0.72);
  backdrop-filter: blur(3px);
}
.col-ajuda__caixa {
  position: relative;
  width: min(520px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 18px;
  border: 1px solid rgb(120 170 235 / 0.35);
  border-radius: 16px;
  background: linear-gradient(180deg, #12203a, #0b1526);
  color: #eaf4ff;
}
.col-ajuda__caixa h2 { margin: 0 0 8px; font-size: 1.05rem; }
.col-ajuda__caixa p { margin: 0 0 10px; font-size: 0.84rem; line-height: 1.45; opacity: 0.9; }
.col-ajuda__caixa ul { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 6px; }
.col-ajuda__caixa li { font-size: 0.82rem; line-height: 1.4; opacity: 0.9; }
.col-ajuda__aviso { color: #f0c44a; opacity: 0.85 !important; }
.col-ajuda__x {
  position: absolute; top: 10px; right: 12px;
  border: 0; background: none; color: #8fb4dd; font-size: 1.1rem; cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════
 * TERCEIRA PASSADA (#1052): o que a tela de verdade mostrou
 * ══════════════════════════════════════════════════════════════════
 *
 * Três defeitos, e o primeiro é meu de nascença:
 *
 * 🚨 1. O cartão COBRIU a ficha de atributos. Na passada anterior ele pediu
 *    "menos apertado" e eu pus `min-width: 300px` na coluna — mas a coluna
 *    divide a tela com a ficha do personagem, e alargar uma é comer a outra.
 *    O espaço tinha de sair de DENTRO (menos gordura), não de fora.
 *
 * 🚨 2. Os cristais VAZAVAM para fora do cartão. Dez numa fileira cabiam na
 *    conta e não na caixa. Agora são 5+5 em qualquer largura, e a fileira tem
 *    `overflow: hidden` como cinto de segurança.
 *
 * 🚨 3. Tudo ~20% grande demais, medido a olho por ele na tela cheia. As
 *    reduções abaixo são todas em cima do bloco original, para a passada
 *    anterior continuar legível.
 */

/* 1. a largura volta a ser a do jogo */
@media (min-width: 900px) {
  .arm-emb[data-estado='livre'] { min-width: 0; }
  .arm-emb__grade { gap: 5px; }
  .arm-emb__slot { min-height: 0; }
}

/* 2. cristais SEMPRE em duas fileiras, e nada escapa da coluna */
.col-cris {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 3px 2px;
  margin: 6px 0 5px;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
}
.col-cris__c { min-width: 0; padding: 2px 0 0; }
.col-cris__c img { height: 27px; }
.col-cris__c[data-on='1'] { scale: 1.06; }
.col-cris__c:hover { scale: 1.03; }
.col-cris__n { font-size: 0.5rem; }

/* 3. o cartão, uns 20% mais enxuto */
.col-rec {
  gap: 2px;
  margin: 3px 0 4px;
  padding: 5px 8px;
  border-radius: 8px;
}
.col-rec__rot { font-size: 0.5rem; gap: 4px; }
.col-rec__val { font-size: 0.84rem; }
.col-rec__val--livre { font-size: 0.74rem; }
.col-rec__barra { height: 4px; border-radius: 2px; }
.col-rec__n { font-size: 0.58rem; }
.col-rec__recado { font-size: 0.58rem; line-height: 1.25; }
.col-rec__breve { font-size: 0.48rem; }
.col-rec__i { width: 13px; height: 13px; font-size: 8px; }

/* ══════════════════════════════════════════════════════════════════
 * MAIS LARGO — E A LIÇÃO DE NÃO FORÇAR LARGURA (#1053)
 * ══════════════════════════════════════════════════════════════════
 *
 * *"ficou apertado quanto à largura; com a tela cheia acho que você conseguirá
 * colocar um pouco mais largo"*.
 *
 * 🚨 PELA SEGUNDA VEZ eu tentei resolver isso com `min-width` na coluna do
 * armário, e pela segunda vez ela comeu o vizinho: no #1052 foi a ficha de
 * atributos, aqui foi o painel OFENSIVOS. A tela cheia deu 368 px a mais para a
 * ÁREA — não para o armário. Quem divide esse espaço são o armário, o boneco e
 * os painéis de status, e cravar a largura de um sempre tira de outro.
 *
 * O que fica: nada de largura forçada. O armário engorda sozinho porque a área
 * inteira engordou, e o respiro vem de DENTRO — mais folga entre os encaixes e
 * cristais um pouco maiores, que não empurram ninguém.
 */
@media (min-width: 1100px) {
  .game[data-wide='true']:has(.game__scroll .panel.inventory) .arm-emb__grade {
    gap: 6px;
  }
  .game[data-wide='true']:has(.game__scroll .panel.inventory) .col-cris__c img {
    height: 30px;
  }
  .game[data-wide='true']:has(.game__scroll .panel.inventory) .col-rec {
    padding: 6px 9px;
  }
}

/* ══════════════════════════════════════════════════════════════════
 * A ESTANTE DE CRISTAIS (#1054/#1055/#1056, 23/08)
 * ══════════════════════════════════════════════════════════════════
 *
 * *"ainda não está aparecendo os cristais de um modo que dê para clicar, eles
 * estão sendo cortados"* → *"podemos abrir uma aba lateral e deixar eles na
 * vertical colado no armário, como se fosse uma estante ao lado"* → *"veja o que
 * fica mais esteticamente harmonioso e faça"*.
 *
 * ── A causa de raiz: um `rotate: 45deg` esquecido ─────────────────
 *
 * 🚨 O primeiro desenho dos cristais era um LOSANGO de CSS — um quadrado girado
 * 45° (`.col-cris__c { rotate: 45deg }`, lá em cima nesta folha). Quando a arte
 * dele substituiu o losango, o giro **ficou**. Ninguém viu porque o cristal
 * desenhado já tem facetas diagonais.
 *
 * O estrago é geométrico: a caixa de um retângulo girado 45° passa a medir
 * `(largura + altura) / √2`. Um cartão de 34×34 ocupa **48 px** de faixa. Numa
 * faixa de 32 px isso invade 8 px de cada vizinho — e foi assim que os dez
 * cristais viraram cinco borrões, cada um dentro do outro. A conta fecha nos
 * números medidos: arte de 24,1×30 aparecendo como caixa de 38,3 quadrada.
 *
 * ── E um agravante meu ────────────────────────────────────────────
 *
 *   .col-cris { min-height: 0; overflow: hidden }   ← o "cinto de segurança"
 *
 * A fileira é um grid de 5 colunas com 10 cristais, ou seja DUAS linhas. Sem
 * altura própria, o pai flex a espremeu em 35 px e as duas faixas ficaram com
 * **15 px cada**. Com `align-items: center`, a 1ª linha subiu 9 px acima do topo
 * e a 2ª desceu 9 px — mais sobreposição — e o `overflow: hidden` cortou o
 * resto, escondendo a evidência.
 *
 * 🚨 Cinto de segurança que ESCONDE o defeito em vez de evitá-lo só adia a
 * conta: eu pus o `overflow: hidden` para "nada escapar da coluna" e ele
 * transformou um encavalamento visível numa peça cortada e inexplicável.
 *
 * ── Por que EM PÉ, e não duas fileiras arrumadas ──────────────────
 *
 * A arte do cristal é **retrato** (124×154). Deitada em 5 colunas de 43 px ela
 * fica presa pela altura: sobraria arte de 27 px de largura — nada de *"um pouco
 * maior"*. Em pé, cada cristal ganha uma linha de 45 px e a arte vai a **38 px**,
 * porque a altura é justamente o que o cartão tem de sobra (medido: 53 px de
 * folga vertical contra 216 px de largura disputada).
 *
 * Ou seja: a sugestão dele bate com a forma do desenho. O eixo que sobra é o
 * vertical, e o cristal é vertical.
 *
 * ── Espaço ────────────────────────────────────────────────────────
 *
 * A faixa do grid vai de 184 → 240 px (`armarios/styles.css`), e a estante ocupa
 * 52 px na ponta de FORA — o cartão fica do lado do personagem, a estante na
 * borda. Medido em 1366 e 1600 px: até 248 px de faixa ninguém é coberto e os
 * painéis de status não cedem nada.
 *
 * 🚨 A estante é `position: absolute` ancorada no `.arm-emb` (que já é
 * `relative`), e NÃO um irmão novo: assim `embutido.js` continua dono da árvore
 * e nada precisa ser movido. O `.arm-emb__palco` tem `inset: 0` e não alcança a
 * estante, então o fundo do cartão não vaza para dentro dela.
 *
 * 🚨 E ela é mais estrita que a faixa larga de propósito (`min-width: 1100px`):
 * se as duas discordarem, o pior caso tem de ser um cartão largo demais — nunca
 * uma estante flutuando por cima do vizinho.
 */

/*
 * 🚨 OS RESTOS DO LOSANGO, VARRIDOS DE VEZ.
 *
 * O primeiro desenho era um quadrado de CSS de 15×15 girado 45°. A arte
 * substituiu o desenho, mas o BLOCO antigo (lá em cima nesta folha) ficou — e o
 * bloco novo só sobrescreveu `width`, nunca `height` nem `rotate`. Sobraram duas
 * heranças, e cada uma causou um sintoma:
 *
 *   rotate: 45deg  → a caixa de um retângulo girado mede (larg+alt)/√2. Um cartão
 *                    de 34 px passava a ocupar 48 px de faixa e invadia os
 *                    vizinhos: dez cristais viraram cinco borrões.
 *   height: 15px   → a cela ficou com 15 px para uma arte de 27. No celular
 *                    aparecia só a pontinha de cada cristal.
 *
 * ⚠️ A lição: ao trocar o DESENHO de um componente, apague o bloco antigo em vez
 * de escrever um novo por cima. Sobrescrever propriedade por propriedade deixa
 * exatamente as que ninguém lembrou — e elas reaparecem meses depois como bug de
 * layout sem causa aparente.
 */
.col-cris__c {
  rotate: none;
  height: auto;
}

/*
 * 🚨 O CELULAR ESTAVA PIOR, e ninguém tinha reclamado ainda.
 *
 * Medido a 390 px: a fileira tinha 35 px de altura para DUAS linhas — faixas de
 * 15,9 px — e a foto mostra só a pontinha de cada cristal, o resto comido pelo
 * `overflow: hidden`. Largura sobrava (70 px por cela); o que faltava era altura.
 *
 * `grid-auto-rows` com piso é o conserto certo, e não `height` fixa: cada linha
 * ganha 40 px garantidos e a fileira cresce com o número de cristais — quando
 * entrar uma raridade nova, ela cabe sozinha.
 *
 * (No modo largo isto é irrelevante: lá a estante é `absolute` e tem 430 px.)
 */
.col-cris {
  grid-auto-rows: minmax(40px, auto);
  min-height: 84px;
  overflow: visible;
  /* `stretch` em vez de `center`: a cela passa a OCUPAR os 40 px da faixa, e o
     alvo do dedo vira 70×40 em vez de 70×29. */
  align-items: stretch;
}

@media (min-width: 1100px) {
  /* O cartão cede a ponta de fora para a estante — sem folga entre os dois:
     *"colado no armário, como se fosse uma estante ao lado"*. Os 52 px do
     `margin` e os 52 px da largura são o mesmo número de propósito. */
  .game[data-wide='true']:has(.game__scroll .panel.inventory) .arm-emb[data-lado='esq'] {
    margin-left: 76px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .game[data-wide='true']:has(.game__scroll .panel.inventory) .arm-emb[data-lado='dir'] {
    margin-right: 76px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .game[data-wide='true']:has(.game__scroll .panel.inventory) .col-cris {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 52px;
    /* 🚨 `!important` porque a regra do #1049 crava 5 colunas com `!important`
       — e ali ela está certa, é o desenho do celular e da tela estreita. */
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: 1fr;
    align-content: stretch;
    gap: 2px;
    margin: 0;
    padding: 5px 4px;
    /* 🚨 `visible`: era o `hidden` que cortava os cristais. Aqui não é preciso —
       a estante tem espaço de sobra para os 10. */
    overflow: visible;
    border: 1px solid var(--line-cool, #0d2135);
    border-radius: var(--r-md, 12px);
    background: linear-gradient(180deg, #091727d9, #040c16d9);
  }
  /* 🚨 A borda VIRADA PARA O CARTÃO some e os cantos daquele lado ficam retos:
     assim a estante e o armário leem como UM objeto com dois compartimentos, e
     não como dois cartões que por acaso encostaram. Sem isso as duas bordas se
     somam numa linha dupla no meio, que é o que denuncia a colagem. */
  .game[data-wide='true']:has(.game__scroll .panel.inventory) .arm-emb[data-lado='esq'] .col-cris {
    left: -52px;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .game[data-wide='true']:has(.game__scroll .panel.inventory) .arm-emb[data-lado='dir'] .col-cris {
    right: -52px;
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .game[data-wide='true']:has(.game__scroll .panel.inventory) .col-cris__c {
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 8px;
  }
  .game[data-wide='true']:has(.game__scroll .panel.inventory) .col-cris__c img {
    height: 38px;
  }

  /*
   * A SETA DO CARROSSEL SAI DE TRÁS DA ESTANTE (#1057).
   *
   * *"a única coisa que tem de mudar ainda é a seta que ficou entre os cristais
   * e o inventário; deixa ela agora depois dos cristais, para ficar fácil
   * clicar"*.
   *
   * 🚨 Ela mora em `armarios/styles.css` a `-12px` da borda do cartão — o que
   * era a borda EXTERNA até ontem. Com a estante ocupando esses 52 px, a seta
   * passou a nascer em cima dos cristais: dois alvos no mesmo lugar, e o de
   * baixo perdendo o clique. Empurrada os mesmos 52 px, ela volta a ser a coisa
   * mais externa da coluna, que é o que o gesto de carrossel pede.
   */
  .game[data-wide='true']:has(.game__scroll .panel.inventory) .arm-emb[data-lado='esq'] .arm-emb__seta {
    left: -76px;
  }
  .game[data-wide='true']:has(.game__scroll .panel.inventory) .arm-emb[data-lado='dir'] .arm-emb__seta {
    right: -76px;
  }

  /* O número da raridade vira selo no canto: numa cela de 45 px não há linha
     para ele embaixo, e sem número ninguém sabe quantas peças já tem. */
  .game[data-wide='true']:has(.game__scroll .panel.inventory) .col-cris__n {
    position: absolute;
    right: 1px;
    bottom: 0;
    padding: 0 3px;
    border-radius: 5px;
    background: rgb(4 12 22 / 0.82);
    font-size: 0.52rem;
    font-weight: 700;
    opacity: 0.95;
  }
}

/* ══════════════════════════════════════════════════════════════════
 * "0 / 125", E NÃO "+125" (#1060)
 * ══════════════════════════════════════════════════════════════════
 *
 * *"125 é o bônus total da coleção de lendário no 40, mas como eu só tenho 6
 * peças não está ativo… porque senão fica parecendo que o player já tem o bônus
 * de 125."*
 *
 * O número grande no meio do cartão é a primeira coisa que o olho lê. Ele
 * afirmava um bônus que ninguém tinha. Agora são dois números: o que VALE agora,
 * grande, e o teto, menor e apagado ao lado.
 *
 * 🚨 O `data-zero` existe para o "0" não brilhar como se fosse conquista. Em
 * zero ele fica cinza; a partir de 1 ganha a cor da raridade.
 */
.col-rec__ja {
  font-style: normal;
  font-weight: 800;
  color: var(--cor, #eaf4ff);
}
.col-rec__ja[data-zero='1'] {
  color: #6d7f96;
}
.col-rec__de {
  font-size: 0.78em;
  font-weight: 600;
  opacity: 0.72;
}
/* Sem coleção montada o título inteiro é informação neutra, não recompensa. */
.col-rec[data-estado='parado'] .col-rec__val {
  text-shadow: none;
}