.phase-complete {
  border-bottom-color: #71583f;
}

.phase-complete .phase-summary {
  box-shadow: inset 4px 0 #e9b678;
  background: linear-gradient(90deg, #3a2c25 0, #171f2c 35%, transparent 100%);
}

.phase-complete .phase-number {
  background: #e9b678;
  color: #13202a;
}

.phase-complete .phase-title,
.phase-complete .phase-count {
  color: #f3cc91;
}

.phase-current .phase-summary {
  box-shadow: inset 4px 0 #79d8d0;
  background: linear-gradient(90deg, #17343d 0, #142536 35%, transparent 100%);
}

.phase-current .phase-number {
  background: #79d8d0;
  color: #10212a;
}

.future-mission {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
  padding: 26px 30px;
  border: 1px solid #3c5b67;
  border-radius: 14px;
  background: linear-gradient(110deg, #17313b, #142130 68%);
  box-shadow: inset 4px 0 #79d8d0;
}

.future-mission .eyebrow {
  color: #79d8d0;
  margin-bottom: 9px;
}

.future-mission h3 {
  margin: 0 0 8px;
  font-size: clamp(24px, 2.7vw, 36px);
  line-height: 1.1;
  letter-spacing: -.045em;
}

.future-mission h3 span { color: #e9b678; }

.future-mission p:last-child {
  max-width: 620px;
  margin: 0;
  color: #b7c6cf;
  font-size: 14px;
  line-height: 1.5;
}

.future-mission-label {
  flex: none;
  padding: 8px 11px;
  border: 1px solid #55717b;
  border-radius: 99px;
  color: #a6c8ca;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  white-space: nowrap;
}

.sidequests-section {
  margin-top: 86px;
  scroll-margin-top: 22px;
}

.sidequests-section .detour-section {
  margin-top: 0;
}

.sidequests-section .detour-section + .detour-section {
  margin-top: 16px;
}

.detour-intro h3 {
  font-size: clamp(30px, 3.3vw, 45px);
  line-height: 1.1;
  letter-spacing: -.055em;
  margin: 0 0 12px;
}

.tos-section {
  border-color: #665747;
  background: linear-gradient(120deg, #292b33, #141e2c 65%);
}

.tos-section .eyebrow,
.tos-section .detour-bar {
  color: #e9b678;
}

.tos-section .detour-stamp {
  border-color: #b18d65;
  color: #e9b678;
}

.tos-section .watch-item {
  background: #1e2632;
}

.tos-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .future-mission { align-items: flex-start; flex-direction: column; gap: 16px; padding: 23px; }
  .sidequests-section { margin-top: 60px; }
  .tos-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .tos-list { grid-template-columns: 1fr; }
}