index.less

@import (inline) 'node_modules/normalize.css/normalize.css';
@import (inline) 'node_modules/github-fork-ribbon-css/gh-fork-ribbon.css';

.fixed-height(@height) {
	flex: 0 0 @height;
	height: @height;
}

.fixed-width(@width) {
	flex: 0 0 @width;
	width: @width;
}

.grow-height(@ratio) {
	flex: @ratio 1 0;
	height: 0;
}

.grow-width(@ratio) {
	flex: @ratio 1 0;
	width: 0;
}

.vertical-center {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

@font-face {
	font-family: infinity;
	src: inline('image/infinity.woff') format('woff');
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: 'FontAwesome';
	src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	unicode-range: U+F099;
}

html, body, .container {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	color: #333;
}

button {
	border: none;
	outline: none;
	padding: 0;
	background: none;
	font-family: inherit;
	cursor: pointer;
}

.github-fork-ribbon::before {
	background-color: #284fbd;
}

.fa {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	font-smoothing: antialiased;
}

.fa-twitter:before {
	content: "\f099";
}

.layer {
	background-size: cover;
	background-position: center;

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	z-index: 0;
}

.background-layer {
	position: fixed;
	background-image: url(image/background.svg);

	.cloud {
		position: absolute;
		left: 100%;

		@keyframes slide {
			from {
				transform: translateX(0);
			}
			to {
				transform: translateX(calc(-100vw - 100%));
			}
		}

		animation: linear 1s infinite slide;

		&:nth-child(1) {
			top: 7%;
			animation-duration: 120s;
			animation-delay: -50s;
			&::before { content: url(image/cloud-01.png); }
		}

		&:nth-child(2) {
			top: 15%;
			animation-duration: 100s;
			animation-delay: -80s;
			&::before { content: url(image/cloud-02.png); }
		}

		&:nth-child(3) {
			top: 23%;
			animation-duration: 80s;
			animation-delay: 0s;
			&::before { content: url(image/cloud-03.png); }
		}

		&:nth-child(4) {
			top: 29%;
			animation-duration: 150s;
			animation-delay: -120s;
			&::before { content: url(image/cloud-04.png); }
		}

		&:nth-child(5) {
			top: 37%;
			animation-duration: 70s;
			animation-delay: -20s;
			&::before { content: url(image/cloud-05.png); }
		}

		&:nth-child(6) {
			top: 45%;
			animation-duration: 150s;
			animation-delay: -60s;
			&::before { content: url(image/cloud-06.png); }
		}

		&:nth-child(7) {
			top: 55%;
			animation-duration: 110s;
			animation-delay: -90s;
			&::before { content: url(image/cloud-07.png); }
		}

		&:nth-child(8) {
			top: 68%;
			animation-duration: 100s;
			animation-delay: 0s;
			&::before { content: url(image/cloud-08.png); }
		}
	}
}

.screens-layer {
	overflow: hidden;

	.screens {
		display: inline-flex;

		transition: transform .8s cubic-bezier(0, 0.75, 0.3, 1);

		&.gaming {
			transform: translateX(-100vw);
		}

		.screen {
			.fixed-width(100vw);
			height: 100vh;
			position: relative;

			.menu {
				width: 800px;

				position: absolute;
				top: 40%;
				left: 50%;
				transform: translate(-50%, -50%);

				.row {
					text-align: center;
				}

				.tsg-credit {
					color: white;
					font-size: 26px;
					font-weight: bold;
					margin-bottom: 20px;
				}

				.tsg-logo {
					vertical-align: -50%;
					width: 100px;
					margin-left: 0.3em;
				}

				button.big {
					background: rgba(61, 128, 42, 0.2);
					transition: background-color .3s;

					padding: 0 2em;
					margin: 24px 0;
					border: 2px solid #222248;
					border-radius: 36px;

					line-height: 72px;
					font-size: 48px;
					font-weight: bold;
					color: white;

					&:hover {
						background: rgba(61, 128, 42, 0.6);
					}
				}

				button.small {
					font-size: 30px;
					margin: 18px 0;
				}

				.stage-list {
					padding: 0;
					margin: 0 0 1em;

					column-count: 3;

					display: none;
					&.active { display: block; }

					.stage-name {
						margin-left: 1em;

						list-style: none;

						text-align: left;
						line-height: 1.5em;
						font-size: 20px;

						position: relative;
						cursor: pointer;

						&::before {
							content: '';

							width: 0;
							height: 0;
							position: absolute;
							top: calc(~"0.75em - 6px");
							right: calc(~"100% + 0.3em");

							border-top: 6px solid transparent;
							border-left: 12px dotted black;
							border-bottom: 6px solid transparent;

							transition: transform .5s ease-out;
						}

						&:hover::before {
							transform: rotateX(360deg);
						}
					}
				}

				.credit-body {
					margin: 0 auto;
					width: 500px;
					text-align: justify;
					line-height: 1.5em;

					display: none;
					&.active { display: block; }

					a {
						&, &:visited {
							text-decoration: none;
							color: #245cff;
						}
					}
				}
			}
		}
	}
}

.game-screen {
	.stage-layer {
		display: flex;
		flex-direction: column;

		.upper-area {
			flex: 1 0 0;
			height: 0;

			display: flex;

			.panel-area {
				.fixed-width(200px);

				display: flex;
			}

			.pipe-area {
				flex: 1 0 0;
				width: 0;

				display: flex;
				flex-direction: column;

				.upper-pipe-area {
					.fixed-height(131px);

					margin-left: 100px;
					margin-right: 100px;

					display: flex;

					.left-corner-pipe {
						.fixed-width(93px);
						background-image: url(image/pipe-upper-left-corner.png);
					}

					.left-pipe, .right-pipe {
						background-image: url(image/pipe-upper.png);
						background-size: 100% 100%;
					}

					.left-pipe {
						.grow-width(1);
					}

					.right-pipe {
						.grow-width(2);
					}

					.center-pipe {
						.fixed-width(81px);
						background-image: url(image/pipe-upper-center.png);
					}

					.right-corner-pipe {
						.fixed-width(93px);
						background-image: url(image/pipe-upper-right-corner.png);
					}
				}

				.downer-pipe-area {
					.fixed-height(119px);

					margin-left: 100px;
					margin-right: 100px;

					display: flex;

					.left-corner-pipe {
						.fixed-width(93px);
						background-image: url(image/pipe-downer-left-corner.png);
					}

					.left-pipe, .right-pipe {
						background-image: url(image/pipe-downer.png);
						background-size: 100% 100%;
					}

					.left-pipe {
						.grow-width(3);
					}

					.right-pipe {
						.grow-width(2);
					}

					.center-pipe {
						.fixed-width(131px);
						background-image: url(image/pipe-downer-center.png);
					}

					.right-corner-pipe {
						.fixed-width(93px);
						background-image: url(image/pipe-downer-right-corner.png);
					}
				}

				.case-board-area {
					flex: 1 0 0;
					height: 0;

					display: flex;

					.case-pipe-area {
						.grow-width(1);

						display: flex;
						flex-direction: column;

						.case-joint-top-pipe, .case-joint-bottom-pipe,
						.case-top-pipe, .case-bottom-pipe {
							width: 40px;
							margin: 0 auto;
						}

						.case-joint-top-pipe, .case-joint-bottom-pipe {
							.fixed-height(10px);
						}

						.case-joint-top-pipe {
							background-image: url(image/pipe-joint-top.png);
						}

						.case-joint-bottom-pipe {
							background-image: url(image/pipe-joint-bottom.png);
						}

						.case-top-pipe, .case-bottom-pipe {
							.grow-height(1);
							background-image: url(image/pipe-vertical.png);
							background-size: 100% 100%;
						}

						.case-area {
							width: 471px;
							height: 343px;

							position: relative;
							margin: 0 auto;

							padding: 45px;
							box-sizing: border-box;

							&::before {
								content: url(image/case-panel.png);
								position: absolute;
								left: -12px;
								top: -3px;
								z-index: -1;
							}

							.case {
								.vertical-center;
								position: relative;
							}
						}
					}

					.board-area {
						.grow-width(1);

						.board-frame-wrapper {
							height: 100%;
							margin: 0 auto;

							display: flex;
							flex-direction: column;
						}

						.board-joint-top-pipe, .board-joint-bottom-pipe,
						.board-top-pipe, .board-bottom-pipe {
							width: 40px;
							margin: 0 auto;
						}

						.board-joint-top-pipe, .board-joint-bottom-pipe {
							.fixed-height(10px);
						}

						.board-joint-top-pipe {
							background-image: url(image/pipe-joint-top.png);
						}

						.board-joint-bottom-pipe {
							background-image: url(image/pipe-joint-bottom.png);
						}

						.board-top-pipe, .board-bottom-pipe {
							.grow-height(1);
							background-image: url(image/pipe-vertical.png);
							background-size: 100% 100%;
						}

						.board-top-pipe, .board-bottom-pipe {
							.grow-height(1);
						}

						.board-frame {
							width: 100%;

							.fixed-height(0);

							display: flex;
							flex-direction: column;

							position: relative;

							border-style: solid;
							border-width: 25px;
							border-image: url(image/frame.png) 25 repeat;

							.clock-area {
								position: absolute;
								top: calc(~"100% + 25px");
								right: -25px;

								padding: 3px 4px 4px;

								border: 2px outset #ff920e;
								border-top: none;
								border-bottom-right-radius: 6px;
								border-bottom-left-radius: 6px;

								background: #fbae36;
								color: #fffdf7;
								font-size: 16px;
								font-weight: bold;
								font-family: Arial;
								line-height: 1;

								.clock-icon {
									display: inline-block;
									width: 16px;
									height: 16px;
									background-image: inline('image/clock-icon.svg');
									vertical-align: text-top;
									margin-right: .2em;
								}

								.clock-value {
									vertical-align: bottom;
								}
							}
						}

						.board-wrap {
							background-color: #e4b67c;

							.block {
								position: relative;
							}

							.block::after {
								content: '';

								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;

								border: 1px dotted rgba(0, 0, 0, .3);
								pointer-events: none;
							}
						}
					}
				}
			}
		}

		.downer-area {
			.fixed-height(150px);

			display: flex;

			.left-area, .right-area {
				.grow-width(1);
			}

			.left-area {
				position: relative;

				.tsg-logo {
					position: absolute;
					left: 50px;
					top: 50%;
					transform: translateY(-50%);
					width: 160px;
				}
			}

			.controls-area {
				.fixed-width(420px);
				position: relative;
			}
		}
	}

	.modal-layer {
		z-index: 1;
		pointer-events: none;

		.modal {
			display: none;
			pointer-events: initial;
			width: 80%;
			background: url(image/restaurant_icons.png);
			color: #333;
			box-sizing: border-box;
			border-radius: 30px;
			position: absolute;
			max-height: 80vh;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.close {
				width: 102px;
				height: 102px;

				background-image: url(image/close.png);

				position: absolute;
				top: -30px;
				right: -30px;
			}

			.modal-content {
				padding: 50px;
				overflow-y: auto;
				width: 100%;
				max-height: 80vh;
				box-sizing: border-box;
				text-align: center;
				font-size: 24px;

				img {
					vertical-align: -50%;
				}

				.close-content {
					color: white;
					background: #f9841d;
					line-height: 2em;
					padding: 0 2em;
					font-size: 36px;
					font-weight: bold;
					border-radius: 0.3em;
				}
			}
		}
	}

	.result-layer {
		pointer-events: none;

		.result {
			display: none;
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			font-size: 30px;
			transform: translateY(-50%);
			pointer-events: all;

			.result-head {
				display: flex;
				justify-content: center;

				.clear {
					width: width('image/clear.svg', 2);
					height: height('image/clear.svg', 2);
					background: inline('image/clear.svg');
					background-size: size('image/clear.svg', 2);

					animation: 1.5s clear-animate cubic-bezier(0, 0, 0, 1);

					@y-distance: 200px;

					@keyframes clear-animate {
						0% {
							opacity: 0;
							transform: scale(3) translateY(@y-distance);
							transform-origin: 50% calc(~"50% + "@y-distance);
						}
						30% {
							opacity: 1;
							transform: scale(1) translateY(@y-distance);
							transform-origin: 50% calc(~"50% + "@y-distance);
						}
						70% {
							transform: scale(1) translateY(@y-distance);
							animation-timing-function: ease;
						}
						100% {
							transform: scale(1);
							transform-origin: 50% 50%;
						}
					}
				}
			}

			.stats {
				display: flex;
				justify-content: center;
				position: relative;
				margin-top: 20px;

				color: #222;
				font-family: 'Exo 2';
				font-weight: 900;
				line-height: 1.5;
				font-size: 42px;

				overflow: hidden;

				// Background that can animate :)
				&::before {
					@overrap: 15%;
					content: '';
					display: block;
					position: absolute;

					top: 0;
					left: 100%;
					bottom: 0;
					width: 100% + @overrap;

					background: linear-gradient(
						90deg,
						rgba(255, 255, 255, 0),
						rgba(255, 255, 255, 0.7) percentage(@overrap / (100% + @overrap)),
						rgba(255, 255, 255, 0.7)
					);

					animation: 0.5s 1.3s stats-animate forwards;

					@keyframes stats-animate {
						from {left: 100%}
						to {left: -@overrap}
					}

					z-index: -1;
				}

				& > div {
					margin: 0 0.5em;
					width: 3.5em;
					opacity: 0;

					white-space: nowrap;

					animation: 0.5s 1.2s stats-div-animate forwards;

					@keyframes stats-div-animate {
						from {opacity: 0}
						to {opacity: 1}
					}

					&::before {
						width: 1.2em;
						height: 1.2em;
						display: inline-block;
						vertical-align: -10%;
						margin-right: 0.3em;
					}

					&.clocks::before {
						content: inline('image/clock-icon.svg');
					}

					&.blocks::before {
						content: url('image/conditional.png');
					}
				}
			}

			.score-window {
				width: 100%;
				max-width: 600px;
				background: #EEE;
				border: #222 2px solid;
				color: white;
				position: relative;
				text-align: center;
				margin: 30px auto;
				padding: 10px;
				z-index: 0;
				opacity: 0;

				animation: 0.5s 1.4s score-window-animate forwards;

				@keyframes score-window-animate {
					from {
						opacity: 0;
						transform: translateY(30px);
					}
					to {
						opacity: 1;
						transform: translateY(0);
					}
				}

				&::before {
					content: '';
					position: absolute;
					@margin: 3px;
					top: @margin;
					left: @margin;
					right: @margin;
					bottom: @margin;

					border: #222 2px solid;
					background: repeating-linear-gradient(-45deg, #333, #333 10px, #444 10px, #444 20px);
					z-index: -1;
				}

				.score {
					line-height: 2em;
					font-size: 22px;
					margin: 10px 0;

					.score-value {
						width: 3em;
						display: inline-block;
						text-align: right;
						font-family: 'Exo 2', sans-serif;
						font-weight: 900;
						font-size: 60px;
						margin-left: 0.3em;
					}
				}

				.name {
					display: block;
					margin: 5px auto;
					border-radius: 4px;
					background: white;
					color: #333;
					border: none;
					outline: none;
					padding: 7px 12px;
					font-size: 18px;
					width: 15em;
				}

				.register {
					border-radius: 5px;
					background: #555;
					color: white;
					display: block;
					margin: 12px auto;
					font-size: 20px;
					padding: 0.5em 1em;

					&[disabled] {
						opacity: 0.5;
						cursor: wait;

						&.error {
							opacity: 1;
							background: #f91919;
							cursor: default;
						}

						&.success {
							opacity: 1;
							background: #4698b7;
							cursor: default;
						}
					}
				}

				.tweet {
					display: block;

					width: 160px;
					margin: 12px auto;
					padding: 0.3em 1em;
					border-radius: 5px;

					background: #3f94ef;

					color: white;
					font-size: 16px;
					text-decoration: none;
				}
			}

			.block-area {
				display: flex;
				justify-content: center;
				margin-top: 1em;

				button {
					width: 240px;
					margin: 0 15px;

					border-radius: 12px;

					color: white;
					line-height: 2em;
					font-weight: bold;

					opacity: 0;

					animation: 0.5s 1.6s result-button-animate forwards;

					@keyframes result-button-animate {
						from {
							opacity: 0;
							transform: translateY(30px);
						}
						to {
							opacity: 1;
							transform: translateY(0);
						}
					}

					&.close {
						background: #4e4e4e;
					}

					&.next {
						background: #354fd6;
					}
				}
			}
		}

		.limit {
			display: none;
			position: absolute;

			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			width: 100%;
			max-width: 600px;
			padding: 20px 0px;
			border-width: 10px;
			border-style: ridge;
			border-radius: 10px;

			font-size: 30px;
			text-align: center;

			pointer-events: all;

			animation: 1s limit-animate steps(1, end);

			@keyframes limit-animate {
				0% {opacity: 1}
				25% {opacity: 0}
				50% {opacity: 1}
				75% {opacity: 0}
				100% {opacity: 1}
			}

			.head {
				font-weight: bold;
				font-size: 50px;
				font-family: 'Exo 2';
			}

			.message {
				font-size: 18px;
				line-height: 2;
			}

			.ok {
				color: white;
				line-height: 1.5em;
				padding: 0 2em;
				font-size: 28px;
				font-weight: bold;
				border-radius: 0.3em;
				margin-top: 0.5em;
			}

			&.clock-limit {
				background: #1f0000;
				border-color: #ff2e2e;
				color: #ff2e2e;

				.ok {
					background: #ff2e2e;
				}
			}

			&.data-limit {
				background: #1f1600;
				border-color: #bd8c14;
				color: #bd8c14;

				.ok {
					background: #bd8c14;
				}
			}
		}

		.ranking {
			display: none;
			pointer-events: initial;

			position: absolute;
			top: 50%;
			left: 50%;

			border: #222 6px solid;
			padding: 1em 0;

			transform: translate(-50%, -50%);
			background: repeating-linear-gradient(-45deg, #333, #333 10px, #444 10px, #444 20px);
			color: wheat;
			width: calc(~"100% - 30px");
			max-width: 500px;
			max-height: calc(~"100% - 80px");
			overflow-y: auto;

			animation: 0.5s ranking-animate;

			@keyframes ranking-animate {
				from {
					transform: translate(-50%, calc(-50% + 100px));
					opacity: 0;
				}
				to {
					transform: translate(-50%, -50%);
					opacity: 1;
				}
			}

			.head {
				text-align: center;
				font-size: 24px;
				font-weight: bold;

				.stage-name {
					color: #fbff43;
				}
			}

			&.loading .ranks {
				height: 200px;
				background-image: inline('image/ring.svg');
				background-repeat: no-repeat;
				background-position: center;

				.rank, & > * {
					display: none;
				}
			}

			.ranks {
				padding: 0;
				counter-reset: rank-index;

				.rank {
					display: flex;
					padding: 0 0.5em;
					color: #333;
					font-weight: bold;
					font-size: 24px;
					line-height: 1.5;
					counter-increment: rank-index;

					&:nth-child(2n) {
						background: rgba(255, 255, 255, 0.5);
					}

					&:nth-child(2n+1) {
						background: rgba(255, 255, 255, 0.7);
					}

					&::before {
						width: 1.5em;
						text-align: center;
						font-size: 24px;
					}

					&:first-child::before {
						content: '';
						background-image: inline('image/crown.svg');
						background-size: 80%;
						background-position: center;
						background-repeat: no-repeat;
					}

					&:nth-child(n+2)::before {
						content: counter(rank-index);
						font-family: 'Exo 2', sans-serif;
						font-weight: 900;
					}

					.name {
						flex: 1 1 0;
						text-overflow: ellipsis;
						overflow: hidden;
						margin-left: 0.5em;
						font-size: 20px;
						line-height: 36px;
					}

					.data {
						display: flex;
						font-family: 'Exo 2', sans-serif;
						font-weight: 900;

						& > * {
							margin-right: 0.5em;

							&::before {
								content: '';
								width: 0.8em;
								height: 0.8em;
								display: inline-block;
								vertical-align: -5%;
								margin-right: 0.1em;
								background-size: contain;
							}
						}

						.clocks::before {
							background-image: inline('image/clock-icon.svg');
						}

						.blocks::before {
							background-image: url('image/conditional.png');
						}
					}

					.score {
						flex: 0 0 4.5em;
						font-family: 'Exo 2', sans-serif;
						font-weight: 900;
						text-align: right;

						&::after {
							content: 'pt';
						}
					}
				}
			}

			.close {
				display: block;

				margin: 0 auto;
				padding: 0 2em;
				border-radius: 0.3em;

				background: #5f5f5f;

				line-height: 2em;
				color: white;
				font-size: 24px;
				font-weight: bold;
			}
		}
	}

	.inputs, .arrows, .user-outputs, .correct-outputs {
		display: flex;

		.input, .output {
			.grow-width(1);

			@height: 40px;
			height: @height;
			line-height: @height - 4px;
			border: 1px solid;

			text-align: center;
			font-size: 32px;
			font-family: 'Exo 2', sans-serif;
			font-weight: 900;

			position: relative;

			&.wrong::after {
				content: '';

				position: absolute;
				top: calc(100% + 5px);
				left: 0;

				width: 100%;
				height: 30px;

				background-image: url(image/panel-answer-wrong.png);
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}

			&.correct::after {
				content: '';

				position: absolute;
				top: calc(100% + 5px);
				left: 0;

				width: 100%;
				height: 30px;

				background-image: url(image/panel-answer-correct.png);
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}

			.inner-text {
				vertical-align: bottom;
				white-space: nowrap;
			}
		}

		.arrow {
			.grow-width(1);
			height: 75px;

			background-image: url(image/arrow-down.png);
			background-position: center;
			background-repeat: no-repeat;

			position: relative;
			overflow: hidden;

			&::after {
				content: '';
				position: absolute;

				left: 0;
				right: 0;
				height: 180px;

				background-image: linear-gradient(
					to bottom,
					rgba(255, 255, 255, 0) 0%,
					rgba(255, 255, 255, .5) 12.5%,
					rgba(255, 255, 255, 0) 25%,
					rgba(255, 255, 255, .5) 37.5%,
					rgba(255, 255, 255, 0) 50%,
					rgba(255, 255, 255, .5) 62.5%,
					rgba(255, 255, 255, 0) 75%,
					rgba(255, 255, 255, .5) 87.5%,
					rgba(255, 255, 255, 0) 100%
				);

				@keyframes verticalSlide {
					from { transform: translateY(-50%); }
					to   { transform: translateY(0); }
				}

				animation: 3s linear 0s infinite verticalSlide;
			}
		}
	}

	.inputs, .outputs {
		border: 1px solid black;
	}

	.board {
		display: inline-flex;
		position: relative;

		.rows {
			display: inline-flex;
			flex-direction: column;
			position: relative;

			.row {
				display: inline-flex;
				margin: 0;
			}
		}

		.data-layer {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

			pointer-events: none;

			.data {
				position: absolute;
				padding: 3px;
				line-height: 1em;
				font-weight: bold;
				border-radius: 5px;
				background: darkorange;
				transform: translate(-50%, -50%);
				color: white;
				font-family: infinity, sans-serif;
			}
		}
	}

	.block {
		width: 50px;
		height: 50px;
		cursor: pointer;
		box-sizing: border-box;
		background-size: contain;

		&::before, &::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

			pointer-events: none;
			box-sizing: border-box;
			background-size: contain;
		}
		&[data-rotate='90']::before {
			transform: rotate(90deg);
		}
		&[data-rotate='180']::before {
			transform: rotate(180deg);
		}
		&[data-rotate='270']::before {
			transform: rotate(270deg);
		}
		@blocks-rotatable: wireI, wireL, wireT, diode, c-contact, transistor;
		@blocks-rotate-back-wireI:
			add-3,
			times-2, times-3, times-10,
			plus-1, plus-2,
			minus-1, minus-2,
			div-2, div-3, div-10,
			const-0, const-1, const-2, const-3, const-10,
			log10, log2,
			not;
		@blocks-norotate:
			wireXdot, wireX,
			add, sub, mul, div,
			conditional,
			pow, log, mod,
			bitshift-left, bitshift-right, bitwise-and, bitwise-or, bitwise-xor,
			equal, neq, gt, geqq, lt, leqq,
			and, or, nand, nor, xor;

		.-r(@i: length(@blocks-rotatable)) when (@i > 0) {
			@name: extract(@blocks-rotatable, @i);
			&[data-type=@{name}]::before {
				background-image: url("image/@{name}.png");
			}
			.-r((@i - 1));
		} .-r;
		.-rI(@i: length(@blocks-rotate-back-wireI)) when (@i > 0) {
			@name: extract(@blocks-rotate-back-wireI, @i);
			&[data-type=@{name}] {
				&::before {
					background-image: url("image/wireI.png");
				}
				&::after {
					background-image: url("image/@{name}.png");
				}
			}
			.-rI((@i - 1));
		} .-rI;
		.-(@i: length(@blocks-norotate)) when (@i > 0) {
			@name: extract(@blocks-norotate, @i);
			&[data-type=@{name}]::before { background-image: url("image/@{name}.png"); }
			.-((@i - 1));
		} .-;
	}

	.panel {
		overflow: auto;
		padding: 8px;
		margin: 30px 0;
		background: #ffa32e;
		border-radius: 5px;
		border: 2px outset #ff920e;

		min-width: 50px;

		.block {
			background-color: white;
			border: none;
			position: relative;
			margin-bottom: 25px;

			&[selected]::after {
				content: '';

				position: absolute;
				top: -3px;
				left: -3px;
				right: -3px;
				bottom: -3px;

				border: 3px solid red;
				pointer-events: none;
			}

			.count {
				position: absolute;
				top: 100%;
				right: 0;

				font-family: infinity, 'Exo 2', sans-serif;
				font-weight: 900;
				color: darkred;

				pointer-events: none;

				&::before {
					content: 'x';
				}
			}
		}
	}

	.controls {
		@button-height: 100px;
		width: 100%;
		height: @button-height;

		.vertical-center;

		&::before {
			@height: 70px;
			content: '';
			position: absolute;

			width: 100%;
			height: @height;

			top: (@button-height - @height) / 2;
			left: 0;

			background: white;
			border-radius: 12px;
			z-index: -1;
		}

		display: flex;
		justify-content: space-around;
		align-items: center;

		& > button {
			width: 50px;
			height: 50px;

			flex: 0 0 auto;

			&.execute, &.stop {
				width: 100px;
				height: 100px;
			}
		}

		@buttons: exit, ranking, execute, stop, rapid, step;
		.-(@i: length(@buttons)) when (@i > 0) {
			@button: extract(@buttons, @i);
			& > button.@{button} {
				background: url('image/control-button-@{button}.png');
			}
			.-((@i - 1));
		} .-;
	}

	.statement-area {
		margin: 35px 0 0 20%;

		.mission {
			padding-left: 22px;
			font-family: 'Exo 2', sans-serif;
			font-weight: 900;
			color: #2b1c79;
		}

		.statement {
			background: white;
			border: 2px solid #5651ab;
			border-right: none;
			padding: 6px 20px;
			font-size: 24px;
			border-top-left-radius: 14px;
			border-bottom-left-radius: 14px;
			color: #333;
		}
	}
}