Template:Infobox player/styles.css

.loka-player-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .6em;
	padding: .5em .6em;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.loka-player-link {
	display: inline-flex;
	align-items: center;
}

.loka-generation--first {
	color: #FC5454;
}

.loka-generation--second {
	color: #FCA800;
}

.loka-generation--third,
.loka-generation--fourth {
	color: #FC54FC;
}

.loka-generation--fifth,
.loka-generation--sixth {
	color: #00A8A8;
}

.loka-generation--seventh,
.loka-generation--eighth {
	color: #54FC54;
}

.loka-generation--ninth,
.loka-generation--tenth {
	color: #FCFCFC;
}

/* These neon/pastel shades were picked for contrast against a dark
   infobox -- on a light one (see Template:Infobox/styles.css) most wash
   out, and Ninth/Tenth (near-white) disappears outright. Darker,
   equally-distinct equivalents for light mode; hues stay recognisably the
   same, just deep enough to read on a light card. */
@media (prefers-color-scheme: light) {
	.loka-player-links {
		border-top-color: rgba(0, 0, 0, .1);
	}

	.loka-generation--first {
		color: #C62828;
	}

	.loka-generation--second {
		color: #8A5A00;
	}

	.loka-generation--third,
	.loka-generation--fourth {
		color: #9C1FA0;
	}

	.loka-generation--fifth,
	.loka-generation--sixth {
		color: #00777A;
	}

	.loka-generation--seventh,
	.loka-generation--eighth {
		color: #2E7D32;
	}

	.loka-generation--ninth,
	.loka-generation--tenth {
		color: #3a3530;
	}
}