@property --beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.mission-item.active {
  position: relative;
  background-color: var(--bg-mission-active);
  border: 1.5px solid #380d17;
  z-index: 2;
  box-shadow: none;
}

.mission-item.active::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: calc(var(--radius-card) + 1.5px);
  padding: 1.5px;
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0%,
    transparent 35%,
    rgba(255, 30, 66, 0.15) 42%,
    #ff1e42 47%,
    #ff4d6d 50%,
    #ff1e42 53%,
    rgba(255, 30, 66, 0.15) 58%,
    transparent 65%,
    transparent 100%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: rotateBeam 2s linear infinite;
  z-index: 3;
}

@keyframes rotateBeam {
  0% {
    --beam-angle: 0deg;
  }
  100% {
    --beam-angle: 360deg;
  }
}

.mission-item.active:hover {
  background-color: #260912;
}

.mission-item.active .mission-icon-box {
  background-color: var(--primary-red-icon-bg);
  color: var(--primary-red);
  border: 1px solid rgba(255, 30, 66, 0.4);
}

.mission-item.active .mission-title {
  color: #ffffff;
  font-weight: 500;
}

.mission-item.active .mission-action-text {
  color: var(--primary-red);
  font-weight: 500;
}

.mission-item.active .mission-right {
  color: var(--primary-red);
}

.mission-item.verifying {
  position: relative;
  background-color: #260912;
  border: 1.5px solid var(--primary-red);
  box-shadow: 0 0 14px rgba(255, 30, 66, 0.3);
  z-index: 2;
}

.mission-item.verifying .mission-icon-box {
  background-color: var(--primary-red);
  color: #ffffff;
  border: 1px solid var(--primary-red);
}

.mission-item.verifying .mission-action-text {
  color: var(--primary-red);
  font-weight: 500;
}

.mission-item.completed {
  background-color: var(--bg-mission-completed);
  border: 1px solid var(--border-locked);
  opacity: 0.7;
  cursor: default;
}

.mission-item.completed:hover {
  background-color: var(--bg-mission-completed);
}

.mission-item.completed .mission-icon-box {
  background-color: #120306;
  color: #6e3d48;
  border: 1px solid #20060c;
}

.mission-item.completed .mission-title {
  color: #8c5d67;
  font-weight: 500;
}

.mission-item.completed .mission-action-text {
  color: #10b981;
  font-weight: 500;
}

.mission-item.completed .mission-right {
  color: #10b981;
}

.mission-item.locked {
  background-color: var(--bg-mission-locked);
  border: 1px solid var(--border-locked);
  opacity: 0.88;
  cursor: not-allowed;
}

.mission-item.locked:hover {
  background-color: var(--bg-mission-locked);
}

.mission-item.locked .mission-icon-box {
  background-color: #1a050b;
  color: #a86a76;
  border: 1px solid #2e0c14;
}

.mission-item.locked .mission-title {
  color: #d1aab2;
  font-weight: 500;
}

.mission-item.locked .mission-action-text {
  color: #945864;
  font-weight: 500;
}

.mission-item.locked .mission-right {
  color: #945864;
}