/* Mecânicas das ninhadas (js/ninhadas/API.md): mana, carga, efeitos negativos, brinquedos, trombetas e a janela de escolha.
   Loja: 96 px por unidade; batalha: 120 px por unidade (como em style.css e battle.css). */

/* mana (MinionView Info/Container/Mana, só com mana > 0): o ícone é o glifo "Mana" do TMP (TextMap_16) */
.mana { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 1px; padding: 0 6px 0 2px; height: 22px;
  background: #5b4fd6; border: 2px solid var(--ink); border-radius: 11px; font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1; color: #fff;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; pointer-events: none; white-space: nowrap; z-index: 2; }
.mana img { width: 18px; height: 18px; }
.bp .mana { height: 26px; font-size: 18px; border-radius: 13px; }
.bp .mana img { width: 22px; height: 22px; }

/* progresso da carga (ChargeMinionPartiallyRenderer): n/N no canto do pet */
.chg { position: absolute; transform: translate(-50%, -50%); padding: 0 5px; height: 18px; background: #fff; border: 2px solid var(--ink); border-radius: 9px;
  font-family: var(--display); font-weight: 700; font-size: 12px; line-height: 14px; color: var(--ink); pointer-events: none; white-space: nowrap; z-index: 2; }
.bp .chg { font-size: 14px; height: 20px; line-height: 16px; }

/* efeito negativo no lugar do perk: o mesmo ícone, com um contorno vermelho para não confundir com perk de comida */
.spr.ail, .perkico.ail { filter: drop-shadow(2px 0 0 #d12a2a) drop-shadow(-2px 0 0 #d12a2a) drop-shadow(0 2px 0 #d12a2a) drop-shadow(0 -2px 0 #d12a2a); }

/* brinquedo (RelicSpace): a contagem de turnos (StickerCountdown) no lugar dos atributos */
.space.toy .num.cd, .bp.toy .num.cd { font-size: 20px; }

/* rolagens grátis */
.btn-orange.free { filter: hue-rotate(70deg) saturate(1.2); }
.pill.trumpets img { width: 30px; height: 24px; object-fit: contain; }

/* Build/Hangar/Chooser: "escolha 1 entre N" */
.dim.chooser { z-index: 8; }
.dialog.choose { left: 160px; top: 150px; width: 960px; padding: 18px 18px 22px; }
.dialog.choose .ttl { font-family: var(--display); font-size: 30px; margin-bottom: 14px; }
.dialog.choose .ttl small { font-size: 18px; color: var(--muted); }
.dialog.choose .opts { display: flex; gap: 16px; justify-content: center; }
.dialog.choose .opt { flex: 0 1 290px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px 14px; background: #fff7ea;
  border: 4px solid var(--ink); border-radius: 14px; box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.dialog.choose .opt:hover, .dialog.choose .opt:focus-visible { background: #ffe2b8; transform: translateY(-3px); }
.dialog.choose .opt img { width: 96px; height: 96px; object-fit: contain; }
.dialog.choose .opt b { font-family: var(--display); font-size: 22px; color: var(--orange); -webkit-text-stroke: 1px #7a3d00; paint-order: stroke fill; }
.dialog.choose .opt .tx { font-size: 16px; line-height: 1.3; font-weight: 700; }
.dialog.choose .opt .tx img { width: 18px; height: 18px; vertical-align: -3px; }
.dialog.choose .opt i { font-size: 13px; font-style: normal; color: var(--muted); }

/* batalha: contador de trombetas (BackupView) e brinquedos (Relics) */
.bt .backup { position: absolute; width: 0; height: 0; z-index: 3; pointer-events: none; }
.bt .backup .punch { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.bt .backup .num { position: absolute; left: 0; top: 2px; transform: translate(-50%, -50%); font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1;
  color: #ffcf3a; -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; }
.bt .backup .deny { display: none; }
.bt #toys { position: absolute; inset: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .dialog.choose .opt:hover { transform: none; } }