/* Base de todos os modais: fundo escuro, cartão com a única sombra de elevação da interface. */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  background: rgba(6, 7, 10, 0.78);
}

.modal-overlay.hidden {
  display: none;
}

#custom-dialog-modal,
#aura-decision-modal,
#rank-decision-modal {
  z-index: 120;
}

.modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: var(--s-5);
  border-radius: var(--radius-l);
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  box-shadow: var(--shadow-modal);
  animation: modal-in 160ms ease both;
}

.modal-card:focus {
  outline: none;
}

.modal-card:focus-visible {
  outline: 2px solid var(--focus);
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.modal-close-x {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-m);
  color: var(--text-2);
  font-size: var(--fs-24);
  line-height: 1;
}

.modal-close-x:hover {
  background: var(--surface-3);
  color: var(--text);
}

/* Diálogo de confirmação. */
.dialog-card {
  width: min(460px, calc(100vw - 32px));
}

.dialog-card h3 {
  font-size: var(--fs-24);
  padding-right: var(--s-6);
}

#dialog-subtitle {
  margin-top: calc(var(--s-2) * -1);
}

#dialog-subtitle:empty {
  display: none;
}

.dialog-icon-box {
  display: none;
}

.dialog-message strong {
  color: var(--text);
}

.dialog-message {
  color: var(--text-2);
}

.dialog-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.dialog-rewards:empty {
  display: none;
}

.dialog-gain-pill {
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-s);
  background: var(--surface-3);
  font-weight: 600;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.btn.btn-confirm-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--action-ink);
}

.btn.btn-confirm-danger:hover:not(:disabled) {
  background: #FFA3AB;
}

/* Toasts: confirmação curta no canto inferior esquerdo, longe das ações principais; só o anúncio de aura leva a cor da raridade. */
.game-toast-container {
  position: fixed;
  left: var(--s-4);
  bottom: var(--s-4);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.game-toast {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-m);
  border: 1px solid var(--line-strong);
  background: var(--surface-3);
  box-shadow: var(--shadow-menu);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.game-toast.toast-visible {
  opacity: 1;
  transform: none;
}

.game-toast.toast-hiding {
  opacity: 0;
}

.game-toast.toast-rarity {
  border-color: var(--rarity);
}

.game-toast .toast-tag {
  color: var(--rarity);
  font-weight: 600;
  margin-right: var(--s-1);
}

/* Celular: o botão de ação de um modal fica embaixo e o aviso o cobria; com modal aberto o aviso sobe ao topo. */
@media (max-width: 700px) {
  body:has(.modal-overlay:not(.hidden)) .game-toast-container {
    top: var(--s-2);
    bottom: auto;
  }
}

/* Escolha de slot com a equipe cheia. */
.slot-pick-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.slot-pick-btn {
  justify-content: flex-start;
  gap: var(--s-2);
  white-space: normal;
  text-align: left;
}

.slot-pick-key {
  color: var(--text-2);
  font-weight: 400;
  font-size: var(--fs-13);
}

/* Confirmação de venda por Moeda (ui/sell-cards.js): resumo por raridade e aviso de carta de valor alto. */
.sell-list {
  margin: var(--s-2) 0 0;
  padding-left: var(--s-4);
}

.sell-rarity {
  font-weight: 600;
  color: var(--text);
}

.sell-warning {
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--danger);
  border-radius: var(--radius-s);
}

.sell-warning p {
  margin: 0 0 var(--s-1);
}

.sell-warning ul {
  margin: 0;
  padding-left: var(--s-4);
}