body {
	margin: 0;
	background-color: #202020;
	color: #fff;
	overflow: hidden;
}
.playfield {
	width: 100%;
	height: 100dvh;
	touch-action: none;
}

/* gems are constructed around on an 16*16 svg-"pixel" grid around the origin. they are then moved into position with translate. one gem per svg-"pixel". */
.gem {
	transition-duration: .125s;
	transition-timing-function: linear;
	transform:
		translate(
			calc(var(--x) * 1px),
			calc(var(--y) * 1px)
		)
		translate(.5px, .5px)
		scale(calc(1/16 * var(--gemZoom)))
		rotate(calc(360deg * var(--gemRot)))
	;
	fill: hsl(
		calc(120deg + 360deg * var(--color) / var(--colors)),
		calc(100% * var(--gemSat)),
		calc(100% * var(--gemLit))
	);
	--gemRot: 0;
	--gemZoom: 1;
	--gemSat: .75;
	--gemLit: .5;
	d: path('M-7,0 L-5,5 L0,7 L5,5 L7,0 L5,-5 L0,-7 L-5,-5 Z');
	mix-blend-mode: lighten;
}

.gem.selected {
	--gemZoom: 1.25;
	--gemSat: .875;
	--gemLit: .625;
}

/* mode for coding gem color in shape/angle for colorblind users etc */
.anglecoded .gem {
	--gemRot: calc(var(--color) / var(--colors));
}

.notchGems .gem {
	d: path('M-7,0 L-5,5 L0,7 L5,5 L7,0 L5,-5 L0,0 L-5,-5 Z');
}

.chevGems .gem {
	d: path('M-5,5 L0,3 L5,5 L5,-3 L0,-5 L-5,-3 Z')
}