/* Shared styles for the kirupaLab pages: Flash players (Ruffle), image galleries, and pixel art */

.swfPlayer {
	display: block;
	max-width: 100%;
	height: auto;
}

.swfPlayer.swf445x310 { width: 445px; aspect-ratio: 445 / 310; }
.swfPlayer.swf440x199 { width: 440px; aspect-ratio: 440 / 199; }
.swfPlayer.swf350x180 { width: 350px; aspect-ratio: 350 / 180; }
.swfPlayer.swf300x300 { width: 300px; aspect-ratio: 300 / 300; }
.swfPlayer.swf555x125 { width: 555px; aspect-ratio: 555 / 125; }

.swfPlayer ruffle-player,
.swfPlayer ruffle-embed {
	display: block;
	width: 100%;
	height: 100%;
}

.swfPlayer .swfFallback {
	margin: 0;
	padding: 20px;
	text-align: center;
	font-size: 15px;
	color: var(--darkTextSecondary, #777);
}

.labGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 28px 16px;
	margin: 30px 0;
}

.labGrid.labGridSmall { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.labGrid.labGridWide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.labGrid.labGridBanner { grid-template-columns: 1fr; justify-items: center; }
.labGrid.labGridPlayers { grid-template-columns: 1fr; justify-items: center; gap: 32px; }

.labGrid figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	text-align: center;
}

.labGrid figure img,
.labGrid figure a img {
	display: block;
	max-width: 100%;
	height: auto;
}

.labGrid figcaption {
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--darkTextSecondary, #777);
	overflow-wrap: anywhere;
}

.labGrid figcaption strong {
	color: var(--bodyText, inherit);
}

/* Pixel art must stay crisp when scaled, so it uses nearest-neighbor sampling instead of smoothing */
.pixelArt,
.pixelArt img {
	image-rendering: -moz-crisp-edges;
	image-rendering: pixelated;
}

.labBadge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	color: var(--textOnPrimary, #fff);
	background-color: var(--primary, #3366cc);
}