/* Mission Counter Badge Improvements */

/* Enhanced badge styling for mission counter */
#missions-button .badge {
  /* Improved size and positioning */
  height: 1.6rem;
  min-width: 1.6rem;
  padding: 0 0.6rem;
  margin-left: 0.25rem;
  margin-top: -0.5rem;
  margin-right: -0.5rem;
  
  /* Better visual appearance */
  background-color: #e53e3e; /* Keep the red color for visibility */
  color: white;
  font-size: 0.85rem; /* Larger font size for better readability */
  font-weight: 700; /* Bolder text */
  
  /* Enhanced visual effects */
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.7); /* White border for contrast */
  
  /* Improved positioning */
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  
  /* Animation for when the count changes */
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Pulse animation when the mission count changes */
@keyframes mission-badge-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Apply the animation when the badge content changes */
#missions-button .badge.updated {
  animation: mission-badge-pulse 0.5s ease-in-out;
}

/* Enhanced Mission Cards in Modal */
.mission-card {
  background-color: #2d3748;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
  border-left: 4px solid #6b46c1;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mission-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.mission-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.mission-title {
  font-weight: 700;
  color: #6b46c1;
  font-size: 1.1rem;
}

.mission-deadline {
  font-size: 0.85rem;
  font-weight: 600;
  color: #f6ad55;
  background-color: rgba(246, 173, 85, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
}

.mission-details {
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.mission-reward {
  font-weight: 700;
  color: #68d391;
  background-color: rgba(104, 211, 145, 0.1);
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
}

.mission-progress {
  height: 8px;
  background-color: #4a5568;
  border-radius: 4px;
  overflow: hidden;
  margin: 0.75rem 0;
}

.mission-progress-fill {
  height: 100%;
  background-color: #6b46c1;
  border-radius: 4px;
  transition: width 0.3s ease;
  box-shadow: 0 0 5px rgba(107, 70, 193, 0.5);
}

.mission-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.mission-complete-btn {
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.mission-complete-btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Different styling based on mission deadline */
.mission-card[data-days-left="1"] .mission-deadline {
  color: #e53e3e;
  background-color: rgba(229, 62, 62, 0.1);
  animation: pulse 1.5s infinite;
}

/* Add a visual indicator for missions that can be completed */
.mission-card.can-complete {
  border-left-color: #68d391;
}

.mission-card.can-complete .mission-title {
  color: #68d391;
}

/* Adjust the mission button to accommodate the badge better */
#missions-button {
  position: relative; /* Ensure proper positioning of the badge */
  overflow: visible; /* Allow the badge to overflow */
}

/* Add a subtle glow effect when there are active missions */
#missions-button .badge:not(:empty) {
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3), 0 0 8px rgba(229, 62, 62, 0.6);
}

/* Different styling based on the number of missions */
#missions-button .badge[data-count="1"] {
  background-color: #ed8936; /* Orange for 1 mission */
}

#missions-button .badge[data-count="2"] {
  background-color: #ecc94b; /* Yellow for 2 missions */
}

#missions-button .badge[data-count="3"] {
  background-color: #48bb78; /* Green for 3 missions (max) */
}