/* Exploration milestones */
.ex__milestones {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap-2xl);
}

.ex__milestone-group-title {
	font-size: var(--font-small);
	font-weight: 700;
	margin-bottom: var(--gap-lg);
	color: var(--text);
}

.ex__milestone-list {
	display: flex;
	flex-direction: column;
	gap: var(--gap-md);
}

.ex__milestone-item {
	display: flex;
	align-items: center;
	gap: var(--gap-md);
	font-size: var(--font-small);
	opacity: 0.7;
}

.ex__milestone-item--done {
	opacity: 1;
}

.ex__milestone-check  { flex-shrink: 0; }
.ex__milestone-target { flex: 1; font-weight: 600; }
.ex__milestone-reward { white-space: nowrap; }

@media (max-width: 900px) {
	.ex__milestones { grid-template-columns: 1fr; }
}

/* Exploration */
.ex__choices {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space);
}

.ex__choice {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: calc(var(--space) * 0.5);
	padding: var(--space);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}

.ex__choice-icon {
	font-size: var(--font-250);
	line-height: 1;
}

.ex__choice-title {
	margin: 0;
	font-size: var(--font-text);
	font-weight: 600;
	color: var(--text);
}

.ex__choice-desc {
	margin: 0;
	font-size: var(--font-small);
	color: var(--muted);
	flex: 1;
}

.ex__active,
.ex__ready {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--space) * 0.5);
	padding: var(--space);
	text-align: center;
}

.ex__active-icon {
	font-size: var(--font-250);
	line-height: 1;
}

.ex__active-label {
	margin: 0;
	font-weight: 600;
	color: var(--text);
}

.ex__active-timer {
	margin: 0;
	font-size: var(--font-xl);
	font-weight: 700;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}

.ex__active-reward {
	margin: 0;
	font-size: var(--font-small);
}

.ex__ready-label {
	margin: 0;
	font-weight: 600;
	color: var(--success);
}

.ex__ready-reward {
	margin: 0;
	font-size: var(--font-xl);
	font-weight: 700;
}

@media (max-width: 900px) {
	.ex__choices {
		grid-template-columns: 1fr;
	}
}