/* Popups de combate ("APARADO!", "K.O.!"...). Um modificador por estilo (PopupStyle no JS).
   A ordem dos modificadores importa: o último vence (ex.: "Bloqueado" pequeno fica com 22px). */
#popups {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.popup {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: 30px;
  letter-spacing: 0.03em;
  /* Largura do texto, até 94% da tela; acima disso quebra linha (nomes longos: "Sentinela de Carvalho leu..."). */
  width: max-content;
  max-width: 94vw;
  text-align: center;
  text-shadow: var(--text-shadow-strong);
  animation: popup-rise 0.9s ease-out forwards;
}

.popup--small {
  font-size: 18px;
  top: 52%;
  animation-duration: 0.7s;
}

.popup--parry {
  color: #ffe066;
  font-size: 40px;
}

.popup--dodge {
  color: #7fe3ff;
}

.popup--hit {
  color: #ff6b6b;
}

.popup--block {
  color: #d6dde8;
  font-size: 22px;
}

.popup--flow {
  color: #c9a2ff;
}

.popup--crit {
  color: #ffd23f;
  font-size: 44px;
}

.popup--counter {
  color: #ff9f43;
}

/* Nome do oponente na abertura: quebra linha nos nomes longos ("Sentinela de Carvalho") em vez de vazar. */
.popup--banner {
  font-size: clamp(30px, 10vw, 44px);
  line-height: 1.05;
  top: 34%;
  width: 92vw;
  white-space: normal;
  text-align: center;
  animation-duration: 1.4s;
  color: #fff;
}

/* Título do oponente (estilo carta), embaixo do nome. */
.popup--epithet {
  font-size: 15px;
  top: 45%;
  width: 92vw;
  white-space: normal;
  text-align: center;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  animation-duration: 1.4s;
}

@keyframes popup-rise {
  0% {
    transform: translate(-50%, -50%) scale(0.55);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, -50%) scale(1.12);
    opacity: 1;
  }
  30% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    transform: translate(-50%, -110%) scale(1);
    opacity: 0;
  }
}