/**
 * Card de missão — item de lista de objetivos com progresso e recompensa.
 *
 * Modificador de estado:
 *   game-mission-card--done  → missão concluída
 *   game-mission-card--late  → missão atrasada
 */

.game-mission-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--space-16);
	padding: var(--space-16);
	background: var(--color-pure-white);
	border-radius: var(--radius-16);
	position: relative;
}

/* ── Ícone ── */

.game-mission-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--space-48);
	height: var(--space-48);
	border-radius: var(--radius-8);
	background: var(--mission-icon-bg, var(--color-primary));
	color: var(--color-pure-white);
	flex-shrink: 0;
}

.game-mission-card-icon svg {
	width: var(--space-24);
	height: var(--space-24);
}

/* Cor do ícone via modificador */
.game-mission-card-icon--primary { --mission-icon-bg: var(--color-primary); }
.game-mission-card-icon--accent  { --mission-icon-bg: var(--color-accent); }
.game-mission-card-icon--purple  { --mission-icon-bg: var(--color-purple); }
.game-mission-card-icon--green   { --mission-icon-bg: var(--color-green); }

/* ── Informações ── */

.game-mission-card-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

.game-mission-card-title {
	font-family: var(--font-body);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
	margin: 0;
}

/* ── Barra de progresso ── */

.game-mission-card-progress {
	display: flex;
	align-items: center;
	gap: var(--space-8);
}

.game-mission-card-progress-label {
	font-family: var(--font-body);
	font-size: var(--font-size-14);
	color: var(--color-text-muted);
	white-space: nowrap;
	flex-shrink: 0;
}

.game-mission-card-progress-bar {
	flex: 1;
	height: 6px;
	background: var(--color-pastel-grey);
	border-radius: var(--radius-full);
	overflow: hidden;
}

.game-mission-card-progress-fill {
	height: 100%;
	background: var(--color-primary);
	border-radius: var(--radius-full);
	transition: width var(--transition-base);
}

/* ── Recompensa ── */

.game-mission-card-reward {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.game-mission-card-gem {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	font-family: var(--font-body);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-bold);
	color: var(--color-purple);
	white-space: nowrap;
}

.game-mission-card-gem .game-object {
	width: var(--space-16);
	height: var(--space-16);
	flex-shrink: 0;
}