@import url('../design-tokens.css');

.missions-header {
  display: grid;
  gap: var(--space-3);
}

.missions-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

.mission-stats-card {
  display: grid;
  gap: var(--space-4);
}

.mission-stats-card .meter {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.mission-meter {
  --height: 12px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.mission-meter__bar {
  position: relative;
  flex: 1;
  height: var(--height);
  border-radius: var(--radius-sm);
  background: rgba(148, 163, 184, 0.15);
  overflow: hidden;
}

.mission-meter__progress {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gradient-accent);
  transition: width var(--duration-slow) var(--easing-standard);
}

.mission-meter__value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.mission-content {
  display: grid;
  gap: var(--space-5);
}

.mission-section {
  display: grid;
  gap: var(--space-4);
}

.mission-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mission-section__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.mission-section__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.mission-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(82, 113, 189, 0.1);
}

.mission-card--main {
  position: relative;
  padding-top: calc(var(--space-4) + 16px);
  background: linear-gradient(135deg, rgba(95, 225, 214, 0.16), rgba(255, 154, 196, 0.12));
}

.mission-card__badge {
  position: absolute;
  top: 12px;
  left: 16px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.72);
}

.mission-card__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

.mission-card__title--sm {
  font-size: var(--font-size-md);
}

.mission-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.mission-card__description {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-loose);
}

.mission-card__reward {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xs);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: rgba(47, 181, 179, 0.12);
  color: var(--color-accent);
}

.mission-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.mission-card__status {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin: 0;
}

.mission-card__actions {
  display: flex;
  gap: var(--space-2);
}

.mission-card__actions .app-button {
  min-height: 44px;
  padding-inline: 20px;
}

.mission-card__meta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.mission-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mission-card--tips {
  background: rgba(255, 255, 255, 0.94);
}

.mission-tips {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.mission-tips li {
  line-height: var(--line-height-loose);
}

.daily-missions-list {
  display: grid;
  gap: var(--space-3);
}

.daily-mission-card {
  position: relative;
  overflow: hidden;
}

.daily-mission-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(95, 225, 214, 0.14), rgba(255, 154, 196, 0.12));
  opacity: 0;
  transition: opacity var(--duration-normal) var(--easing-standard);
  pointer-events: none;
  z-index: 0;
}

.daily-mission-card:hover::before {
  opacity: 1;
}

.daily-mission-card > * {
  position: relative;
  z-index: 1;
}

.mission-history-card {
  display: grid;
  gap: var(--space-3);
  max-height: 320px;
}

.mission-history-list {
  display: grid;
  gap: var(--space-2);
  overflow-y: auto;
  max-height: 240px;
}

.mission-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(237, 244, 255, 0.85);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.mission-history-item span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mission-history__title {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.mission-history__meta {
  display: inline-flex;
  gap: var(--space-1);
  color: var(--color-text-secondary);
}

.mission-history__exp {
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
}

.mission-history__item--placeholder {
  justify-content: center;
  width: 100%;
}

.mission-empty {
  text-align: center;
  display: grid;
  gap: var(--space-3);
}

.mission-empty p {
  margin: 0;
  color: var(--color-text-secondary);
}

@media (min-width: 960px) {
  .mission-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .mission-card__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .mission-card__actions {
    width: 100%;
  }

  .mission-card__actions .app-button {
    flex: 1;
  }
}