html,
body {
  margin: 0;
  padding: 0;
}

.valo-gradient {
  background-color: #081018;
}

.valo-card {
  background-color: rgba(14, 26, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
}

.agent-card {
  position: relative;
  overflow: hidden;
}

.agent-card.is-banned::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 24, 0.86);
  z-index: 10;
  pointer-events: none;
}

.agent-card.is-banned::after {
  content: 'BANNED';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff4655;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: clamp(1.6rem, 3.6vw, 2.7rem);
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.9);
  transform: rotate(20deg);
  opacity: 0;
  animation: banned-fade 0.6s ease forwards;
  z-index: 11;
  pointer-events: none;
}

.agent-card.is-banned img {
  filter: grayscale(0.85) brightness(0.55) contrast(1.05);
}

.agent-card.is-picked {
  background-color: rgba(8, 16, 24, 0.72);
}

.fade-in {
  animation: fade-in 0.3s ease forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes banned-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}