index.less

@import (inline) 'node_modules/normalize.css/normalize.css';
@import (inline) 'node_modules/github-fork-ribbon-css/gh-fork-ribbon.css';
@import (inline) 'modals/anim.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;
}

.mobile(@rules) {
	@media screen and (orientation: portrait) {
		@rules();
	}
}

.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, U+F00D;
}

html, body, .container {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	color: #333;
	font-family: sans-serif;
}

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

.mobile({
	.github-fork-ribbon {
		display: none;
	}
});

.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";
}

.fa-times:before {
	content: "\f00d";
}

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

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

	height: 100%;

	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;
		height: 100%;

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

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

			.screen.menu-screen {
				overflow: hidden;
			}
		}

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

			&.menu-screen {
				display: flex;
				align-items: center;
				justify-content: center;
				overflow-y: auto;
			}

			.menu {
				width: 800px;
				margin: auto;

				.mobile({
					width: 100%;
				});

				.row {
					text-align: center;
				}

				.logo {
					.mobile({
						max-width: 90%;
					});
				}

				.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);
					}

					.mobile({
						font-size: 10vw;
					});
				}

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

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

					column-count: 3;

					.mobile({
						column-count: 1;
					});

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

					.mobile({
						margin: 0 24px;
					});

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

						list-style: none;

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

						position: relative;
						cursor: pointer;

						.mobile({
							margin: 3px 0;
							padding: 5px 11px;
							border-radius: 5px;
							border: 2px solid #0071ac;

							background: rgba(255, 255, 255, 0.47);

							color: #373737;
							font-size: 20px;
							font-family: sans-serif;
						});

						&::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 solid black;
							border-bottom: 6px solid transparent;

							transition: transform .5s ease-out;

							.mobile({
								content: none;
							});
						}

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

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

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

					.mobile({
						width: auto;
						margin: 0 35px;
					});

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

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

		.upper-area {
			flex: 1 0 0;
			height: 0;
			min-height: 0; // Fix firefox flex bug http://stackoverflow.com/a/28639686

			display: flex;

			.mobile({
				flex-direction: column;
			});

			.statement-exit {
				display: flex;
				margin-top: 0;

				.statement-area {
					display: none;

					.mobile({
						display: block;
						margin: 0 0 0 auto;
						text-align: right;
						z-index: 1;
						max-width: calc(~'100% - 8em');

						.statement {
							display: inline-block;
							margin-top: 5px;

							font-size: 12px;
						}
					});
				}

				.exit-button-area {
					margin-top: 10px;
					z-index: 2;	// over statement-area
					font-size: 20px;

					.mobile ({
						margin-top: 5px;
						font-size: 12px;
					});

					.exit {
						background: rgba(61, 128, 42, 0.2);
						transition: background-color .3s;
						font-weight: bold;
						color: white;

						border: 2px solid #5651ab;
						border-left: none;
						padding: 6px 20px 6px 6px;
						border-top-right-radius: 24px;
						border-bottom-right-radius: 24px;


						.mobile ({
							border-top-right-radius: 14px;
							border-bottom-right-radius: 14px;
						});

						&::before {
							margin: 0 0.5em 0 0;
							content: '';
							display: inline-block;
							width: 1.3em;
							height: 0.9em;
							background: url('image/exit-button-before.png') no-repeat;
							background-size: contain;
							vertical-align: middle;
						}

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

					}
				}
			}

			.panel-area {
				.fixed-width(160px);
				user-select: none;

				display: flex;

				.mobile({
					.fixed-height(70px);
					width: auto;
				});
			}

			.board-area {
				flex: 1 0 0;
				width: 0;
				user-select: none;
				display: flex;

				.mobile({
					width: auto;
					height: 0;
				});

				.board-svg {
					width: 100%;
					flex: 1 0 0;
					overflow: visible;
				}

				.board-background {
					fill: #e4b67c;
				}

				.block-border {
					stroke: black;
					stroke-dasharray: 1, 5;
					stroke-opacity: 0.3;
					stroke-width: 1px;
					cursor: pointer;
					transform: scale(1.01);
				}

				.correctness {
					animation: 0.3s correctness-animate cubic-bezier(0, 0.5, 0.61, 1);
					opacity: 0.7;

					@keyframes correctness-animate {
						0% {
							transform: translate(75px, 25px) scale(1.5);
							opacity: 0;
						}
						100% {
							transform: translate(75px, 25px) scale(1);
							opacity: 0.7;
						}
					}
				}

				.clock-area {
					display: inline-block;
					padding: 0 3px;

					background-color: #fbae36;

					border: 1.5px outset #ff920e;
					border-top: none;
					border-bottom-right-radius: 3px;
					border-bottom-left-radius: 3px;

					color: white;
					font-weight: bold;
					font-size: 12px;
					line-height: 1.5em;
					white-space: pre;

					&::before {
						content: '';
						display: inline-block;
						width: 14px;
						height: 14px;
						background-image: inline('image/clock-icon.svg');
						vertical-align: -15%;
						margin-right: .2em;
					}
				}
			}
		}

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

			display: flex;

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

				.mobile({
					display: none;
				});
			}

			.left-area {
				position: relative;

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

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

				.mobile({
					flex: 1 1 0;
					height: 100%;  // Workaround for Safari
				});
			}

			.save-area-wrapper {
				flex: 0 0 auto;
				position: relative;

				.save {
					background: url('image/control-button-save.png');
					width: 50px;
					height: 50px;
				}

				.save-panel-area {
					display: none;
					z-index: 1;

					.save-balloon {
						display: flex;
						flex-direction: column;
						position: absolute;
						width: 250px;
						height: 250px;
						bottom: 100%;
						left: 50%;
						margin: 30px 0;
						transform: translateX(-50%);
						border-radius: 6px;
						background: white;

						.mobile({
							left: initial;
							right: 0;
							transform: none;
						});

						&::before {
							content: '';
							border-left: solid 10px transparent;
							border-top: solid 10px white;
							border-right: solid 10px transparent;
							position: absolute;
							top: 100%;
							left: 50%;
							transform: translateX(-50%);

							.mobile({
								transform: translateX(50%);
								left: initial;
								right: 25px;
							});
						}

						.entry-wrapper {
							flex: 1 1 0;
							overflow-y: scroll;
							width: 100%;
							padding: 5px 5px 20px 5px;
							box-sizing: border-box;

							.saved-entries {
								list-style: none;
								padding-left: 0;
								margin: 0;
							}

							.saved-item {
								display: flex;
								margin: 0 0 13px 0;
							}

							.timestamp {
								flex: 1 1 0;
								position: relative;
								padding: 6px 0px 6px 5px;
								border-bottom-left-radius: 10px;
								border-top-left-radius: 10px;
								color: white;
								font-size: 17px;
								text-align: left;
								background: linear-gradient(#FFAD3F, #FF9A12);
								box-shadow: 0px 3px 0px #EA660E;
								cursor: pointer;

								&:hover {
									box-shadow: 0px 1px 0px #EA660E;
									transform: translateY(2px);
								}

								&:active {
									background: #633e0b;
								}
							}

							.delete {
								flex: 0 1 15%;
								padding: 4px 0;
								border-bottom-right-radius: 10px;
								border-top-right-radius: 10px;
								font-size: 25px;
								color: white;
								background: linear-gradient(#FF6E51, #FF4C28);
								box-shadow: 0px 3px 0px #EA660E;
								cursor: pointer;

								&:hover {
									box-shadow: 0px 1px 0px #EA660E;
									transform: translateY(2px);
								}

								&:active {
									background: #4f1102;
								}
							}
						}

						.save-button-wrapper{
							flex: 0 1 13%;
							padding: 5px 0;

							.save-entry {
								width: 60%;
								margin: 6px 20%;
								padding: 6px 0;
								border-radius: 8px;
								font-size: 22px;
								color: white;
								background: linear-gradient(#FF7B36, #FA5B09);
								box-shadow: 0 3px 0 #AE2700;
								cursor: pointer;

								&:hover {
									box-shadow: 0 2px 0 #AE2700;
									transform: translateY(2px);
								}

								&:active {
									background: #633e0b;
								}
							}
						}
					}
				}
			}
		}
	}

	.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%);

			.mobile({
				width: calc(~"100% - 20px");
				border-radius: 12px;
			});

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

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

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

				.mobile({
					width: 80px;
					height: 80px;
					right: -10px;
				});
			}

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

				.mobile({
					padding: 20px;
					font-size: 16px;
					line-height: 1.5;
				});

				img {
					vertical-align: -50%;
				}

				img, video {
					max-width: 100%;
				}

				.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 {
			@mobile-margin: 10px;

			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);

					.mobile({
						width: 80%;
						background-size: contain;
						background-position: center;
						background-repeat: no-repeat;
						height: 100px;
					});

					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;

				.mobile({
					font-size: 32px;
					margin-top: @mobile-margin;
				});

				// 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 {
						content: '';
						width: 1.2em;
						height: 1.2em;
						display: inline-block;
						vertical-align: -10%;
						margin-right: 0.3em;
						background-size: contain;
					}

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

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

			.score-window {
				position: relative;
				width: calc(~"100% - 40px");
				max-width: 600px;

				margin: 30px auto;
				padding: 10px;
				border: #222 2px solid;

				background: #EEE;
				color: white;
				text-align: center;
				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);
					}
				}

				.mobile({
					margin: @mobile-margin auto;
				});

				&::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 {
					margin: 10px 0;

					line-height: 2em;
					font-size: 22px;

					.mobile({
						font-size: 16px;
					});

					.score-value {
						display: inline-block;
						width: 3em;
						margin-left: 0.3em;

						text-align: right;
						font-family: 'Exo 2', sans-serif;
						font-weight: 900;
						font-size: 280%;
					}
				}

				.name {
					display: block;
					width: 15em;

					margin: 5px auto;
					padding: 7px 12px;
					border: none;
					border-radius: 4px;
					outline: none;

					background: white;
					color: #333;
					font-size: 18px;

					.mobile({
						width: auto;
					});
				}

				.register {
					display: block;
					margin: 12px auto;
					padding: 0.5em 1em;

					border-radius: 5px;

					background: #555;
					color: white;
					font-size: 20px;

					.mobile({
						font-size: 18px;
					});

					&[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;

				.mobile({
					margin-top: @mobile-margin;
				});

				button {
					width: 240px;
					height: 2em;
					margin: 0 15px;

					border-radius: 12px;

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

					opacity: 0;

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

					.mobile({
						font-size: 18px;
						height: 2.2em;
						line-height: 2.2em;
					});

					@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: 600px;
			max-width: calc(~"100% - 32px");
			padding: 20px 10px;
			box-sizing: border-box;
			border-width: 10px;
			border-style: ridge;
			border-radius: 10px;

			font-size: 30px;
			text-align: center;
			color: #2f2f2f;

			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;
				white-space: nowrap;
			}

			.ok {
				padding: 0 2em;
				border-radius: 0.3em;
				margin-top: 0.5em;

				background: darkorange;

				font-size: 28px;
				font-weight: bold;
				color: white;
				line-height: 1.5em;
			}

			&.clock-limit {
				background: #ffdedb;
				border-color: #ff7f7f;

				.head {
					color: #ff2e2e;
				}
			}

			&.data-limit {
				background: #fffddb;
				border-color: #ffc57f;

				.head {
					color: #988618;
				}
			}
		}

		.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;
			}
		}
	}

	.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;
		}
		@blocks-rotatable: wireI, wireL, wireT, diode, c-contact, transistor, junctionR, junctionL, junctionT, not;
		@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, sqrt;
		@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-x: auto;
		overflow-y: scroll;
		padding: 8px;
		margin: 30px 0;
		background: #ffa32e;
		border-radius: 5px;
		border: 2px outset #ff920e;

		min-width: 50px;

		.mobile({
			display: flex;
			margin: 0 10px;
			width: 100%;
			overflow-x: auto;
			overflow-y: hidden;
			padding: 6px 8px;
		});

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

			.mobile({
				flex: 0 0 auto;
				margin-right: 10px;
				margin-bottom: 0;
				width: 40px;
				height: 40px;
			});

			&[data-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;

				html.mac &, html.ios & {
					font-family: 'Exo 2', infinity, sans-serif;
				}

				pointer-events: none;

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

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

		.vertical-center;

		.mobile({
			width: 300px;
			margin: 0 auto;
			position: relative;
			padding: 0 10px;
		});

		&::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;

			.mobile({
				@height: 60px;
				height: @height;
				top: (@button-height - @height) / 2;
			});
		}

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

		& > button {
			width: 50px;
			height: 50px;
			background-size: contain;

			flex: 0 0 auto;

			.mobile({
				width: 40px;
				height: 40px;
			});

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

				.mobile({
					width: 80px;
					height: 80px;
				});
			}
		}

		@buttons: ranking, execute, stop, rapid, move;
		.-(@i: length(@buttons)) when (@i > 0) {
			@button: extract(@buttons, @i);
			& > button.@{button} {
				background-image: 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;
		}
	}
}