div.stage {
	width: 100%;
	height: 100vh;
	background-image: url(./image/back.webp);
	background-position: 0 50%;
	background-size: cover;
	overflow: hidden;
	@media (width < 670px) {
		height: auto;
	}
	display: grid;
	> div {
		grid-area: 1/1/2/2;
		z-index: 1;
		width: 100%;
		height: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 10px;
		row-gap: 10px;
		@media (width < 670px) {
			grid-template-columns: 1fr;
		}
		> .result {
			flex-grow: 1;
			z-index: 2;
			padding: 10px;
			> table {
				border-collapse: separate;
				border-spacing: 3px;
				width: 100%;
				height: 100%;
				@media (max-width:669px) {
					height: auto;
				}
				> thead {
					> tr {
						> th {
							background-color: rgba(221,164,167,0.4);
							font-size: clamp(15px,3vw,40px);
							line-height: 1;
							color: rgba(255,255,255,0.7);
							font-weight: 700;
							font-family: var(--font-number);
							text-align: center;
							@media (width < 670px) {
								padding-block: 5px;
							}
							@media (height < 750px) {
								font-size: clamp(15px,3vw,20px);
							}
						}
					}
				}
				> tbody {
					> tr {
						> td {
							background-color: rgba(255,255,255,0.5);
							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 < 670px) {
								padding-block: 5px;
							}
							@media (height < 750px) {
								font-size: clamp(15px,5vh,30px);
							}
							&.open {
								background-color: #ef0;
							}
							&.last {
								background-color: #f00;
								color: #fff;
							}
						}
					}
				}
			}
		}
		> .machine {
			position: relative;
			> div.machine02 {
				max-width: 50vw;
				max-height: calc(100vh - 20px);
				min-width: 50vw;
				min-height: calc(100vh - 20px);
				@media (width < 670px) {
					max-width: calc(100vw - 20px);
					max-height: calc(100vw - 20px);
					min-width: calc(100vw - 20px);
					min-height: calc(100vw - 20px);
				}
				> div {
					display: grid;
					> figure {
						grid-area: 1/1/2/2;
						&#ball {
							> svg {
								aspect-ratio: 1/1;
								max-width: 100%;
								max-height: 100%;
							}
						}
						> img {
							aspect-ratio: 1/1;
							max-width: 100%;
							max-height: 100%;
						}
					}
				}
			}
			> .buttons {
				position: absolute;
				bottom: 5px;
				right: 1px;
				display: flex;
				align-items: center;
				column-gap: 10px;
				> button {
					background-color: rgba(221,164,167,0.6);
					border: solid 1px currentColor;
					border-radius: 3px;
					color: #fff;
					padding: 5px 30px;
					cursor: pointer;
					&:hover {
						opacity: 0.8;
					}
					&:disabled {
						opacity: 0.1;
					}
				}
				> p {
					font-size: 0.8rem;
					line-height: 1.2;
					color: #fff;
					opacity: 0.7;
				}
			}
		}
	}
}
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);
		}
	}
}

div#additional {
	display: none;
	&.visible {
		display: block;
	}
}