.vpd-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}

.vpd-badge svg {
	display: block;
}

.vpd-badge-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.vpd-badge-shield {
	fill: #eef1f3;
	stroke-width: 3;
}

.vpd-badge-chevron,
.vpd-badge-star {
	stroke-linejoin: round;
}

.vpd-badge-star {
	stroke-width: 1.5;
}

/* Recruit — muted steel */
.vpd-badge-recruit .vpd-badge-shield { stroke: #7c8894; fill: #f2f4f5; }
.vpd-badge-recruit .vpd-badge-chevron { stroke: #7c8894; }
.vpd-badge-recruit .vpd-badge-label { color: #5c6773; }

/* Specialist — bronze */
.vpd-badge-specialist .vpd-badge-shield { stroke: #a97142; fill: #f6efe8; }
.vpd-badge-specialist .vpd-badge-chevron { stroke: #a97142; }
.vpd-badge-specialist .vpd-badge-label { color: #8a5a34; }

/* Corporal — silver */
.vpd-badge-corporal .vpd-badge-shield { stroke: #8b98a3; fill: #f1f4f6; }
.vpd-badge-corporal .vpd-badge-chevron { stroke: #6f7d8a; }
.vpd-badge-corporal .vpd-badge-label { color: #56636e; }

/* Sergeant — steel blue */
.vpd-badge-sergeant .vpd-badge-shield { stroke: #3d5a80; fill: #eaf0f7; }
.vpd-badge-sergeant .vpd-badge-chevron { stroke: #3d5a80; }
.vpd-badge-sergeant .vpd-badge-label { color: #2b4160; }

/* Command — gold */
.vpd-badge-command .vpd-badge-shield { stroke: #b8860b; fill: #fdf6e3; }
.vpd-badge-command .vpd-badge-chevron { stroke: #b8860b; }
.vpd-badge-command .vpd-badge-star { stroke: #b8860b; fill: #d4af37; }
.vpd-badge-command .vpd-badge-label { color: #8a6508; }

/* Elite Command — deep gold with glow + radiating burst */
.vpd-badge-elite_command .vpd-badge-shield { stroke: #b8860b; fill: #001e2d; }
.vpd-badge-elite_command .vpd-badge-chevron { stroke: #d4af37; }
.vpd-badge-elite_command .vpd-badge-star { stroke: #d4af37; fill: #f1cd5c; }
.vpd-badge-elite_command .vpd-badge-burst { stroke: #d4af37; opacity: 0.8; }
.vpd-badge-elite_command svg { filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.55)); }
.vpd-badge-elite_command .vpd-badge-label { color: #b8860b; }

.vpd-badge-sm svg { width: 32px; height: 32px; }
.vpd-badge-lg svg { width: 96px; height: 96px; }

@media (max-width: 480px) {
	.vpd-badge-label { font-size: 10px; }
}