@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
	margin: 0;
	padding: 8vmin;
	overflow: hidden;
}

#board {
	user-select: none;
	cursor: default;
	position: relative;
	width: 84vmin;
	height: 84vmin;
	container: board / size;

	.dial {
		z-index: 2;
		position: absolute;
		border-radius: 100%;
		overflow: hidden;
		box-shadow: 0 0 0 0.5cqw black, 0 0 0 0.5cqw black inset;

		/* if your dial has two of each letter, we're going to hide all but the first one, then rotate that first one around by this amount: */
		/*--dial-letter-offset: calc(var(--offset) * 60deg);*/

		/* the angle we've spun this dial to */
		--angle: 0deg;

		/* the angle we spin this dial to to centre the letter in the section */
		--centring-angle: 0deg;

		/* the angle we spin this dial to to correct for the tilt in the solution */
		--offset-angle: calc(var(--offset) * 60deg);

		&::before {
			content: '';
			display: block;
			position: absolute;
			inset: 0;
			transform: rotate(calc(var(--angle) + var(--offset-angle)));
			box-shadow: 0 0 0 0.5cqw black inset;
			border-radius: 100%;
		}

		&:nth-child(1) {
			background: red;
			width: 100%;
			height: 100%;
			left: 0%;
			top: 0%;
			&::before {
				background: repeating-conic-gradient(
					from -30.5deg at 50% 50%,
					#000 0deg 1deg,
					#f00 1deg 60deg
				);
			}
			color: white;
		}

		&:nth-child(2) {
			background: yellow;
			width: calc(500% / 7);
			height: calc(500% / 7);
			left: calc(100% / 7);
			top: calc(100% / 7);
			--centring-angle: -90deg;
			/*--dial-letter-offset: calc(30deg + var(--offset) * 60deg);*/
			:nth-child(2n) { display: none }
			&::before {
				background: repeating-conic-gradient(
					from -31deg at 50% 50%,
					#000 0deg 2deg,
					#ff0 2deg 120deg
				);
			}
			color: black;
		}

		&:nth-child(3) {
			background: blue;
			width: calc(300% / 7);
			height: calc(300% / 7);
			left: calc(200% / 7);
			top: calc(200% / 7);
			--centring-angle: 0deg;
			/*--dial-letter-offset: calc(60deg + var(--offset) * 60deg);*/
			:nth-child(3n) { display: none }
			:nth-child(3n + 2) { display: none }
			&::before {
				background: repeating-conic-gradient(
					from -91.5deg at 50% 50%,
					#000 0deg 3deg,
					#00f 3deg 180deg
				);
			}
			color: white;
		}

		&:nth-child(4) {
			background: green;
			width: calc(100% / 7);
			height: calc(100% / 7);
			left: calc(300% / 7);
			top: calc(300% / 7);
			.letter + .letter { display: none; }
			color: white;
		}

		.letter:nth-child(1) { --dial-letter-index: 0; }
		.letter:nth-child(2) { --dial-letter-index: 1; }
		.letter:nth-child(3) { --dial-letter-index: 2; }
		.letter:nth-child(4) { --dial-letter-index: 3; }
		.letter:nth-child(5) { --dial-letter-index: 4; }
		.letter:nth-child(6) { --dial-letter-index: 5; }
	}

	.start-marker {
		z-index: 1;
		width: 110cqw;
		transform:
			rotate(calc(var(--i) * 60deg - 30deg))
			scaleX(var(--direction));
		line-height: 100cqh;
		position: absolute;
		inset: 0 -5cqw;
	}
}

@container (width > 0px) {
	.letter {
		position: absolute;
		display: block;
		width: calc(50cqw / 7);
		height: calc(50cqh / 7);
		/*background: white;*/
		border-radius: 100%;
		text-align: center;
		line-height: calc(50cqh / 7);
		text-transform: uppercase;
		--position-angle: calc(
			var(--dial-letter-index) * 60deg +
			var(--offset-angle) +
			var(--centring-angle) -
			var(--angle)
		);
		left: calc(
			50% - (25cqw / 7) +
			sin(var(--position-angle)) * (50% - 50cqw / 7)
		);
		top: calc(
			50% - (25cqh / 7) +
			cos(var(--position-angle)) * (50% - 50cqh / 7)
		);
		/*box-shadow: 0 0 2cqw black;*/
		font-size: 8cqw;
		font-family: Montserrat, sans-serif;
	}
}