.yjdm-magic-layout {
  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 50%, #f3e8ff 100%);
}

.yjdm-magic-card {
  transition: all 0.4s ease;
  transform-style: preserve-3d;
}

.yjdm-magic-card:hover {
  transform: rotateY(5deg) rotateX(5deg) translateZ(20px);
  box-shadow: 0 25px 50px rgba(236, 72, 153, 0.3);
}

@keyframes magicGlow {
  0% { box-shadow: 0 0 20px rgba(236, 72, 153, 0.3); }
  50% { box-shadow: 0 0 30px rgba(236, 72, 153, 0.6); }
  100% { box-shadow: 0 0 20px rgba(236, 72, 153, 0.3); }
}

.yjdm-magic-badge {
  animation: magicGlow 3s infinite;
}

.yjdm-heart-particles {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(236, 72, 153, 0.1) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(219, 39, 119, 0.1) 1px, transparent 1px);
  background-size: 80px 80px;
  animation: heartFloat 4s ease-in-out infinite alternate;
}

@keyframes heartFloat {
  0% { transform: translateY(0px); opacity: 0.5; }
  100% { transform: translateY(-15px); opacity: 0.8; }
}