/* Horda em 7 dias: troca de ouro por moedas, "completar com ouro" e o "+" do ouro (ouro_troca.js, 2026-11-06) */

#j-mapa-melhorias .tr-mais, .lj-saldo .tr-mais { color: #241300; font-size: 1.05em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }

/* o "+" ao lado do ouro: no topo do mapa e no saldo da loja (a porta da loja de ouro, sempre à vista) */
.tr-mais { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-left: 5px; padding: 0; border: 0;
  border-radius: 50%; background: linear-gradient(180deg, #ffd36b, #f2a20c); color: #3a2200; font-weight: 900; font-size: 0.95em;
  line-height: 1; vertical-align: -0.12em; cursor: pointer; box-shadow: 0 0 0 2px rgba(255, 196, 61, 0.25), 0 2px 6px rgba(0, 0, 0, 0.35);
  animation: tr-pulso 2.4s ease-in-out infinite; }
.tr-mais:active { transform: scale(0.9); }
@keyframes tr-pulso { 0%, 70%, 100% { box-shadow: 0 0 0 2px rgba(255, 196, 61, 0.25), 0 2px 6px rgba(0, 0, 0, 0.35); }
  85% { box-shadow: 0 0 0 6px rgba(255, 196, 61, 0.12), 0 2px 6px rgba(0, 0, 0, 0.35); } }
.lj-saldo .tr-mais { width: 26px; height: 26px; margin: -2px 0 0 0; font-size: 16px; animation: none; }
.lj-saldo { position: relative; }
.lj-saldo .ouro + .tr-mais { align-self: flex-end; }

/* o bloco da troca (painel do ouro e aba Ouro da loja) */
.tr-bloco { margin-top: 12px; padding: 12px; border-radius: 14px; border: 1px solid rgba(255, 184, 77, 0.35);
  background: linear-gradient(180deg, rgba(255, 184, 77, 0.10), rgba(255, 255, 255, 0.03)); }
.tr-tit { margin: 0 0 2px; font-weight: 900; font-size: 15px; }
.tr-regra { display: block; color: var(--apagado); font-size: 12px; line-height: 1.35; }
.tr-ops { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.tr-op { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 8px 6px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); color: inherit;
  font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.tr-op i { font-style: normal; color: var(--apagado); }
.tr-op em { position: absolute; top: -8px; right: -4px; padding: 2px 6px; border-radius: 999px; background: #2fbf71; color: #062a14;
  font-style: normal; font-size: 10.5px; font-weight: 900; }
.tr-op.bonus { border-color: rgba(47, 191, 113, 0.45); }
.tr-op.falta { opacity: 0.45; cursor: default; }
.tr-op.confirmar, .tr-completar.confirmar { background: #ffb84d; color: #2a1800; border-color: #ffb84d; }
.tr-op.confirmar .ouro, .tr-completar.confirmar .ouro { color: #2a1800; }
.tr-op.confirmar .moedas, .tr-completar.confirmar .moedas { color: #5a3500; }
.tr-msg { margin: 8px 0 0; font-size: 12.5px; color: var(--apagado); }
.tr-comprar { margin-top: 10px; }

/* aba Moedas: o caminho para a troca */
.tr-atalho { display: block; width: 100%; margin-top: 8px; padding: 9px 10px; border-radius: 12px; border: 1px dashed rgba(255, 184, 77, 0.55);
  background: rgba(255, 184, 77, 0.08); color: inherit; font: inherit; font-size: 13px; font-weight: 800; text-align: left; cursor: pointer; }

/* no item que falta moeda: "completar com N ouro" (ou "comprar ouro") embaixo do preço */
.tr-completar { display: block; width: 100%; margin: 8px 0 2px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255, 184, 77, 0.6);
  background: rgba(255, 184, 77, 0.12); color: #ffd99a; font: inherit; font-size: 13px; font-weight: 800; text-align: center; cursor: pointer; }
.tr-completar.sem { border-style: dashed; opacity: 0.85; }