.yjdm-mystic-layout {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0fdfa 100%);
}

.yjdm-mystic-card {
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  overflow: hidden;
}

.yjdm-mystic-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
  transform: rotate(45deg);
  transition: all 0.5s ease;
  opacity: 0;
}

.yjdm-mystic-card:hover::before {
  opacity: 1;
  transform: rotate(45deg) scale(1.2);
}

.yjdm-mystic-card:hover {
  transform: translateY(-12px) scale(1.03);
  box-shadow: 0 30px 70px rgba(59, 130, 246, 0.25);
}

.yjdm-today-mystic {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

@keyframes mysticPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.yjdm-mystic-badge {
  animation: mysticPulse 2s infinite;
}