/*
 * "TIRAR TUDO" ao lado do cartão de Poder.
 *
 * 🚨 AQUI SÓ MORA O QUE É DAQUI. A cara do botão (altura 26px, fonte 10/900,
 * canto 8px, o degradê de ouro) vem inteira de `arm-emb__btn arm-emb__btn--ouro`,
 * em `/potato/armarios/styles.css`. Copiar aqueles valores para cá faria os três
 * botões nascerem iguais e envelhecerem diferentes — que é justamente o
 * contrário do que o Gabriel pediu ("respeitando os tamanhos e estilo").
 *
 * 🚨 As regras abaixo usam `.equipment__power .tt-poder__btn` (dois níveis) de
 * propósito: assim elas vencem `.arm-emb__btn` (um nível) mesmo que um dia a
 * minha folha seja carregada ANTES da dos armários. Com a mesma especificidade
 * a briga seria decidida pela ordem das tags no index.html, que é a última
 * coisa em que se deve confiar.
 */

.equipment__power .tt-poder__btn {
  /*
   * 🚨 `align-self: center` é OBRIGATÓRIO, não enfeite: o rodapé é
   * `display:flex` sem `align-items`, ou seja, `stretch` — sem isto o botão
   * esticaria para os ~66px de altura do cartão de Poder e ficaria um tijolo
   * dourado do lado dele, em vez dos 26px dos botões do armário.
   */
  align-self: center;
  /* Não encolhe nem quebra o rótulo em duas linhas quando a linha aperta;
     quem cede é o rodapé, que passa a quebrar (ver a regra do `:has`). */
  flex: 0 0 auto;
  /* O vão entre o cartão e o botão. Fica no botão, e não como `gap` do rodapé,
     para o rodapé continuar idêntico ao original nas telas em que este módulo
     não desenhou nada. */
  margin-inline-start: 10px;
  /*
   * Largura travada: o rótulo troca para "TIRANDO… 13/14" no meio do laço, que
   * é mais largo que "TIRAR TUDO". Sem um piso, o botão cresceria no primeiro
   * clique e empurraria o cartão de Poder para o lado — a tela inteira dando um
   * pulinho bem na hora em que o jogador está olhando o número cair.
   * 🚨 O número foi MEDIDO, não chutado: com 106px o rótulo de dois dígitos
   * ("TIRANDO… 10/14") esticava o botão para 120,9px no meio do laço. 124px
   * cobre o pior caso com uma folga curta.
   */
  min-width: 124px;
  /* O botão do armário vive numa coluna estreita e quebra em duas linhas; este
     está solto numa faixa larga, então respira na horizontal e fica em uma só.
     A altura — que é o que tem de bater — continua vindo do `.arm-emb__btn`. */
  padding-inline: 10px;
  white-space: nowrap;
}

/*
 * Celular: se cartão + botão não couberem lado a lado, o botão desce para uma
 * segunda linha centrada em vez de estourar a largura do painel.
 * `:has` para não mexer no rodapé das telas onde o botão não existe.
 */
.equipment__power:has(.tt-poder__btn) {
  flex-wrap: wrap;
  row-gap: 8px;
}

/* ── A confirmação ────────────────────────────────────────────────── */

.tt-dlg__pergunta {
  margin: 0;
  color: var(--text, #e9edf6);
  font-size: var(--fs-400, 13px);
  line-height: 1.45;
}

/* A quantidade é o dado que faz a pessoa parar e ler: ela salta. */
.tt-dlg__pergunta strong {
  color: var(--gold-300, #f2d089);
  font-weight: 900;
}