.anvil-role-card {
  border-style: solid; /* A border style is required */
  border-color: silver;
  border-width: 10px;
  max-width: 400px;
  align-content: middle;
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 
  );
}
.anvil-role-card-info { font-weight: bold; font-size: 1.2rem; text-transform: uppercase; }
.anvil-role-image-poke {
  border-style: solid; /* A border style is required */
  border-color: lightsteelblue;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  border-width: 10px;
  max-width: 400px;
  align-content: middle;
}
.anvil-role-card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.anvil-role-card {
  perspective: 1000px; /* Essential for 3D depth */
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
  font-family: 'Segoe UI', sans-serif;
}

.anvil-role-card:hover {
  /* Tilts the card toward the cursor */
  transform: rotateY(15deg) rotateX(10deg);
}
.anvil-role-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;

  /* Creates the diagonal rainbow spectrum */
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255, 255, 255, 0.5) 30%,
    rgba(0, 255, 255, 0.2) 45%,
    rgba(255, 0, 255, 0.2) 55%,
    transparent 80%
  );
  background-size: 200% 200%;
  mix-blend-mode: color-dodge; /* Makes colors pop against the art */
  transition: opacity 0.3s, background-position 0.3s;
}

.anvil-role-card:hover::before {
  opacity: 1;
  background-position: 100% 100%; /* Moves the shimmer as you hover */
}
/* Container for the glitter dots */

/* Enhancing the rainbow shine for a 'Rainbow Rare' feel */
.anvil-role-card:hover::after {
  background: linear-gradient(
    125deg,
    rgba(255, 0, 0, 0.2),
    rgba(255, 255, 0, 0.2),
    rgba(0, 255, 0, 0.2),
    rgba(0, 255, 255, 0.2),
    rgba(0, 0, 255, 0.2),
    rgba(255, 0, 255, 0.2)
  );
  background-size: 400% 400%;
  animation: rainbow-shift 3s ease infinite;
  mix-blend-mode: color-dodge; /* Crucial for that metallic glow */
}

@keyframes rainbow-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}