.sidequest-overlay {
  overflow-y: auto;
}

.sidequest-overlay > h2,
.sidequest-overlay > .sidequest-lead,
.sidequest-overlay > #btn-close-sidequests,
#sidequest-list {
  width: min(680px, calc(100% - 24px));
  margin-left: auto;
  margin-right: auto;
}

.sidequest-lead {
  color: var(--dim, #aab1c5);
  font-size: 13px;
  line-height: 1.7;
}

#sidequest-progress {
  color: #ffd866;
}

#sidequest-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  margin-bottom: 16px;
}

.sidequest-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(34, 42, 67, .96), rgba(18, 22, 39, .96));
}

.sidequest-card.available { border-color: rgba(255, 216, 102, .55); }
.sidequest-card.active { border-color: rgba(100, 200, 255, .65); box-shadow: 0 0 18px rgba(64, 160, 255, .12); }
.sidequest-card.complete { border-color: rgba(92, 221, 140, .48); }
.sidequest-card.locked { filter: saturate(.35); opacity: .64; }

.sidequest-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  font-size: 27px;
}

.sidequest-copy { min-width: 0; }
.sidequest-copy h3 { margin: 0 0 3px; font-size: 15px; }
.sidequest-copy p { margin: 0 0 4px; color: #c5cada; font-size: 11px; }
.sidequest-copy small { color: #9ea7bd; font-size: 10px; }

.sidequest-status {
  align-self: start;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  white-space: nowrap;
  color: #d8dbea;
  font-size: 10px;
}

.sidequest-go {
  grid-column: 3;
  min-width: 82px;
}

@media (max-width: 560px) {
  .sidequest-card { grid-template-columns: 42px minmax(0, 1fr); }
  .sidequest-icon { width: 40px; height: 40px; font-size: 23px; }
  .sidequest-status { position: absolute; top: 7px; right: 7px; }
  .sidequest-copy { padding-right: 70px; }
  .sidequest-go { grid-column: 1 / -1; width: 100%; }
}