main {
	user-select: none;
	width: 100%;
	height: 100vh;
	display: grid;
	grid-template-rows: calc(100vh - 60px) 60px;
	@media (width < 1000px) {
		height: auto;
		grid-template-rows: auto auto;
	}
	> div.stage {
		display: grid;
		> div {
			grid-area: 1/1/2/2;
			z-index: 1;
			width: 100%;
			height: calc(100vh - 60px);
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 10px;
			@media (width < 1000px) {
				height: auto;
				grid-template-columns: 1fr;
			}
			> table {
				border-collapse: separate;
				border-spacing: 3px;
				width: 100%;
				height: calc(100vh - 60px);
				@media (width < 1000px) {
					height: auto;
				}
				> thead {
					> tr {
						> th {
							background-color: rgba(0,0,0,0.1);
							font-size: clamp(15px,3vw,40px);
							line-height: 1;
							color: #fff;
							font-weight: 700;
							font-family: var(--font-number);
							text-align: center;
							@media (width < 1000px) {
								padding-block: 5px;
							}
							@media (height < 750px) {
								font-size: clamp(15px,3vw,20px);
							}
						}
					}
				}
				> tbody {
					> tr {
						> td {
							background-color: rgba(255,255,255,0.4);
							font-size: clamp(15px,3vw,40px);
							line-height: 1;
							color: #000;
							font-weight: 700;
							font-family: var(--font-number);
							letter-spacing: 0.1em;
							text-align: center;
							@media (width < 1000px) {
								padding-block: 5px;
							}
							@media (height < 750px) {
								font-size: clamp(15px,5vh,30px);
							}
							&.open {
								background-color: #ef0;
							}
							&.last {
								background-color: #f00;
								color: #fff;
							}
						}
					}
				}
			}
			> div {
				position: relative;
				height: calc(100vh - 60px);
				@media (width < 1000px) {
					height: auto;
				}
				> div.movie {
					position: relative;
					width: 50vw;
					height: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;
					@media (width < 1000px) {
						width: 100vw;
						height: 100vw;
						display: block;
						justify-content: center;
						align-items: flex-start;
					}
					> video {
						max-width: 100%;
						max-height: 100%;
					}
				}
				> div.ball {
					transition: 0.5s;
					position: absolute;
					left: 10px;
					top: 10px;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 260px;
					font-family: var(--font-number);
					letter-spacing: 0.1em;
					padding-left: 0.1em;
					line-height: 1;
					color: #000;
					width: 400px;
					height: 400px;
					background-image: url(./image/ball.svg);
					background-repeat: no-repeat;
					background-size: contain;
					@media (width < 890px) {
						font-size: 200px;
						width: 300px;
						height: 300px;
					}
					@media (width < 1000px) {
						font-size: 200px;
						width: 300px;
						height: 300px;
					}
					@media (width < 490px) {
						font-size: 120px;
						width: 200px;
						height: 200px;
					}
				}
				> div.character {
					position: absolute;
					top: 1vh;
					right: 0.5vw;
					height: 95%;
					pointer-events: none;
					> img {
						height: 100%;
					}
				}
			}
		}
		> canvas {
			grid-area: 1/1/2/2;
			z-index: 2;
			width: 100%;
			height: 100%;
		}
		> select.language {
			z-index: 3;
			position: absolute;
			top: 5px;
			right: 10px;
			border-radius: 50px;
			border: solid 1px #aaa;
			padding-block: 3px;
			padding-inline: 10px;
			background-color: #fff;
			opacity: 0.8;
		}
	}
	> div.control {
		min-height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		column-gap: 10px;
		padding-inline: min(10px,1vw);
		@media (width < 1000px) {
			display: grid;
			grid-template-rows: 40px 60px 60px;
			grid-template-columns: 1fr;
		}
		> div.pen {
			display: flex;
			align-items: center;
			column-gap: 5px;
			> span {
				font-size: 0.8rem;
				line-height: 1;
				color: #fff;
				@media (width < 1000px) {
					display: none;
				}
			}
			> input[type="color"] {
			}
			> ce-select {
				width: 118px;
				&:nth-of-type(2) {
					@media (width < 375px) {
						display: none;
					}
				}
			}
			> button {
				padding-block: 8px;
				padding-inline: 10px;
				border: none;
				border-radius: 20px;
				cursor: pointer;
				font-size: 0.8rem;
				line-height: 1;
				background-color: #000;
				color: #fff;
				&:hover {
					opacity: 0.7;
				}
			}
		}
		> div#information {
			flex-grow: 1;
			font-size: 1.4rem;
			line-height: 1.3;
			color: #000;
			background-color: rgba(255,255,255,0.5);
			padding-block: 2px;
			padding-inline: 10px;
			text-align: center;
			> b {
				margin-left: 15px;
				font-size: 2.6rem;
				line-height: 1;
				font-weight: 700;
				font-family: var(--font-number);
				letter-spacing: 0.2em;
			}
			> i {
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 1rem;
				direction: rtl;
				background: linear-gradient(to right, transparent 8%, #000 30%);
				background-clip: text;
				color: transparent;
				@media (width < 1000px) {
					width: calc(100vw - 40px);
				}
				> b {
				}
			}
		}
		> button {
			background-color: transparent;
			border: solid 1px #000;
			border-radius: 3px;
			color: #000;
			cursor: pointer;
			padding: 5px 60px;
			white-space: nowrap;
			@media (width < 1000px) {
				padding: 5px 3px;
			}
			&:hover {
				border-color: #fff;
				color: #fff;
			}
			&:disabled {
				opacity: 0.2;
			}
		}
		> p {
			font-size: 0.8rem;
			line-height: 1.2;
			color: #fff;
			opacity: 0.7;
			white-space: nowrap;
			@media (width < 1000px) {
				display: none;
			}
		}
	}
}
section.config {
	> div:nth-of-type(2) {
		padding: 15px;
		font-size: 0.9rem;
		line-height: 1.3;
		color: #7b6246;
		font-weight: 400;
		> .ranges {
			display: flex;
			align-items: center;
			column-gap: 5px;
			@media (width < 890px) {
				flex-direction: column;
			}
			> span {
				margin: 5px;
				display: flex;
				align-items: center;
				font-size: 0.9rem;
				line-height: 1.2;
			}
		}
		select {
			font-size: 0.75rem !important;
		}
		> .button {
			margin-top: 3px;
		}
		> .spacer {
			margin-top: 10px;
		}
	}
	&:nth-of-type(4n - 4) {
		> div:nth-of-type(1) {
			background-color: rgba(100,100,255,0.1);
		}
	}
	&:nth-of-type(4n - 3) {
		> div:nth-of-type(3) {
			background-color: rgba(255,200,150,0.1);
		}
	}
	&:nth-of-type(4n - 2) {
		> div:nth-of-type(1) {
			background-color: rgba(200,200,255,0.1);
		}
	}
	&:nth-of-type(4n -1) {
		> div:nth-of-type(3) {
			background-color: rgba(200,255,100,0.1);
		}
	}
}