/* ============================================================
   Cards — Motherboard Campaign Wiki
   .card, variants, .badge
   ============================================================ */

/* ── Base card ───────────────────────────────────────────── */

.card {
	background-color: var(--deep);
	border: 1px solid var(--surface-border);
	border-radius: var(--radius-sm);
	padding: var(--sp-4);
}

/* ── Card variants ───────────────────────────────────────── */

.card--phosphor {
	border-color: var(--phosphor-border);
	background-color: var(--phosphor-fill);
}

.card--amber {
	border-color: var(--amber-border);
	background-color: var(--amber-fill);
}

.card--cherenkov {
	border-color: var(--cherenkov-border);
	background-color: var(--cherenkov-fill);
}

.card--fury {
	border-color: var(--fury-border);
	background-color: var(--fury-fill);
}

.card--elevated {
	background-color: var(--elevated);
}

.card--link {
	cursor: pointer;
	transition:
		border-color var(--transition-fast),
		box-shadow var(--transition-fast),
		transform var(--transition-fast);
	text-decoration: none;
	display: block;
}

.card--link:hover {
	border-color: var(--phosphor-border);
	box-shadow: var(--glow-p-sm);
	transform: translateY(-2px);
}

/* ── Card internals ──────────────────────────────────────── */

.card__eyebrow {
	display: block;
	margin-bottom: var(--sp-1);
	font-family: var(--font-vt);
	font-size: 1rem;
	color: var(--amber);
	text-shadow: var(--glow-text-a);
	letter-spacing: 0.08em;
}

.card__title {
	margin-bottom: var(--sp-2);
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--text-primary);
	letter-spacing: 0.04em;
}

.card__body {
	color: var(--text-secondary);
	font-size: 0.9rem;
	line-height: 1.6;
}

.card__footer {
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--surface-border);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--text-secondary);
	letter-spacing: 0.06em;
}

.card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
}

/* ── PC card (party strip) ───────────────────────────────── */

.pc-card {
	background-color: var(--elevated);
	border: 1px solid var(--surface-border);
	border-radius: var(--radius-sm);
	padding: var(--sp-4);
	border-top: 3px solid var(--phosphor);
}

.pc-card__name {
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--phosphor);
	text-shadow: var(--glow-text-p);
	margin-bottom: var(--sp-1);
}

.pc-card__class {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--amber);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: var(--sp-3);
}

.pc-card__description {
	font-size: 0.9rem;
	color: var(--text-secondary);
	margin-bottom: 0;
}

/* ── Nav grid card (home section nav) ────────────────────── */

.nav-card {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	background-color: var(--elevated);
	border: 1px solid var(--surface-border);
	border-radius: var(--radius-sm);
	padding: var(--sp-6) var(--sp-4);
	text-decoration: none;
	color: var(--text-primary);
	transition:
		border-color var(--transition-fast),
		box-shadow var(--transition-fast),
		transform var(--transition-fast);
}

.nav-card:hover {
	border-color: var(--phosphor-border);
	box-shadow: var(--glow-p-sm);
	transform: translateY(-2px);
	color: var(--text-primary);
	text-shadow: none;
}

.nav-card__icon {
	font-family: var(--font-vt);
	font-size: 1.5rem;
	color: var(--phosphor);
	text-shadow: var(--glow-text-p);
}

.nav-card__title {
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--phosphor);
}

.nav-card__desc {
	font-size: 0.85rem;
	color: var(--text-secondary);
	line-height: 1.5;
}

/* ── Remnant state cycle ─────────────────────────────────── */

.remnant-cycle {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-1);
	margin-top: var(--sp-4);
	padding: var(--sp-3);
	background-color: var(--deep);
	border: 1px solid var(--surface-border);
	border-radius: var(--radius-sm);
}

.remnant-cycle__label {
	font-family: var(--font-mono);
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.remnant-cycle__label--red {
	color: var(--fury);
	text-shadow: var(--glow-text-f);
}

.remnant-cycle__label--amber {
	color: var(--amber);
	text-shadow: var(--glow-text-a);
}

.remnant-cycle__label--blue {
	color: var(--cherenkov);
	text-shadow: var(--glow-text-c);
}

.remnant-cycle__label--green {
	color: var(--phosphor);
	text-shadow: var(--glow-text-p);
}

.remnant-cycle__arrow {
	color: var(--text-secondary);
	font-size: 0.6rem;
	opacity: 0.5;
}

/* Suppressed state: dim the red and amber, highlight the blue+green */
.remnant-cycle--suppressed .remnant-cycle__label--red,
.remnant-cycle--suppressed .remnant-cycle__label--amber {
	opacity: 0.35;
	text-shadow: none;
}

.remnant-cycle__note {
	flex-basis: 100%;
	margin-top: var(--sp-2);
	font-family: var(--font-mono);
	font-size: 0.65rem;
	color: var(--text-secondary);
	letter-spacing: 0.06em;
}

/* Second row of cycle: emotional cues, colored to match their state */
.remnant-cycle__cues {
	flex-basis: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-1);
	padding-top: var(--sp-2);
	margin-top: var(--sp-1);
	border-top: 1px solid var(--surface-border);
}

/* ── Badges ──────────────────────────────────────────────── */

.badge {
	display: inline-block;
	padding: 1px var(--sp-2);
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.badge--phosphor {
	background: var(--phosphor-fill);
	border: 1px solid var(--phosphor-border);
	color: var(--phosphor);
}

.badge--amber {
	background: var(--amber-fill);
	border: 1px solid var(--amber-border);
	color: var(--amber);
}

.badge--cherenkov {
	background: var(--cherenkov-fill);
	border: 1px solid var(--cherenkov-border);
	color: var(--cherenkov);
}

.badge--fury {
	background: var(--fury-fill);
	border: 1px solid var(--fury-border);
	color: var(--fury);
}

.badge--muted {
	background: rgba(138, 171, 204, 0.08);
	border: 1px solid var(--surface-border);
	color: var(--text-secondary);
}