.neon-card {
  padding: 1.5rem;
}

.neon-card-rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--brass-light) 0%,
    transparent 25%,
    transparent 75%,
    var(--neon-cyan) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
  z-index: 2;
}

.neon-card-cyan .neon-card-rim {
  background: linear-gradient(135deg, var(--neon-cyan), transparent 40%, var(--brass) 100%);
  opacity: 0.8;
}

.neon-card-magenta .neon-card-rim {
  background: linear-gradient(135deg, var(--neon-magenta), transparent 50%, var(--brass) 100%);
}

.neon-card-amber .neon-card-rim {
  background: linear-gradient(135deg, var(--neon-amber), var(--brass-dark) 100%);
}

.neon-card-green .neon-card-rim {
  background: linear-gradient(135deg, var(--neon-green), transparent 50%, var(--brass) 100%);
}

.neon-card-purple .neon-card-rim {
  background: linear-gradient(135deg, var(--neon-purple), var(--neon-cyan) 100%);
}

.neon-card-gold .neon-card-rim {
  background: linear-gradient(135deg, var(--brass-light), var(--brass-dark) 100%);
  opacity: 0.9;
}

.neon-card-cyan:hover {
  box-shadow: var(--shadow-panel), var(--shadow-neon-cyan);
}

.neon-card-gold:hover {
  box-shadow: var(--shadow-panel), 0 0 20px rgba(232, 197, 71, 0.45);
}

.neon-card-magenta:hover {
  box-shadow: var(--shadow-panel), var(--shadow-neon-magenta);
}
