main {
	user-select: none;
	width: 100%;
	height: 100vh;
	display: grid;
	grid-template-rows: calc(100vh - 60px) 60px;
	@media (width < 700px) {
		height: auto;
		grid-template-rows: auto 60px;
	}
	> div.stage {
		display: grid;
		grid-template-columns: 2fr 1fr;
		column-gap: 10px;
		row-gap: 10px;
		@media (width < 700px) {
			grid-template-columns: 1fr;
		}
		> div.card {
			padding: 3px;
			height: calc(100vh - 60px);
			display: grid;
			grid-template-rows: repeat(2,1fr);
			grid-template-columns: repeat(4,1fr);
			row-gap: 0.2vw;
			column-gap: 0.2vw;
			@media (width < 700px) {
				height: auto;
				grid-template-rows: repeat(8,1fr);
				grid-template-columns: repeat(1,1fr);
			}
			> dl {
				border: solid 0.2vw rgba(255,255,255,0.2);
				background-color: rgba(255,255,255,0.8);
				display: grid;
				grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr;
				row-gap: 1px;
				> div:nth-of-type(1) {
					display: grid;
					> div {
						grid-area: 1/1/2/2;
						display: grid;
						grid-template-columns: repeat(5,1fr);
						column-gap: 1px;
						> dt {
							background-color: rgba(255,255,255,1);
							font-size: min(20px,4vw);
							line-height: 1;
							color: rgba(172,137,0,0.3);
							font-weight: 500;
							font-family: Anton, sans-serif;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
					> input {
						grid-area: 1/1/2/2;
						background-color: transparent;
						border: none;
						width: 100%;
						height: 100%;
						text-align: center;
						font-size: min(20px,5vw);
						font-family: inherit;
						accent-color: #c90;
					}
				}
				> div:nth-of-type(n + 2) {
					display: grid;
					grid-template-columns: repeat(5,1fr);
					column-gap: 1px;
					> dd {
						background-color: rgba(255,255,255,1);
						> div {
							display: grid;
							width: 100%;
							height: 100%;
							> div {
								grid-area: 1/1/2/2;
								font-size: min(20px,4vw);
								line-height: 1;
								color: #ac8900;
								font-family: Anton, sans-serif;
								font-weight: 500;
								display: flex;
								justify-content: center;
								align-items: center;
								@media (width < 1000px) {
									font-size: 1.5vw;
								}
								@media (width < 700px) {
									font-size: min(20px,4vw);
								}
							}
							> img {
								grid-area: 1/1/2/2;
								display: block;
								width: 100%;
								height: 100%;
								object-fit: contain;
								visibility: hidden;
							}
							&.open {
								> img {
									visibility: visible;
									animation: reveal 0.8s linear forwards;
									transition: 0.2s;
								}
								&.bingo {
									animation: reveal 0.8s linear forwards;
								}
							}
							&.bingo {
								background-image: url(./image/maru2.svg);
								background-size: contain;
								background-repeat: no-repeat;
								background-position: 50% 50%;
								> div {
									color: #f00;
								}
								> img {
									opacity: 0;
								}
							}
						}
					}
				}
			}
		}
		> div.machine {
			display: grid;
			grid-template-rows: 1fr 1fr;
			row-gap: 5px;
			> table {
				border-collapse: separate;
				border-spacing: 3px;
				width: 100%;
				height: 100%;
				> thead {
					> tr {
						> th {
							background-color: rgba(0,0,0,0.1);
							font-size: min(18px,1.5vh);
							line-height: 1;
							color: #fff;
							font-weight: 500;
							font-family: var(--font-number);
							text-align: center;
							width: 20%;
						}
					}
				}
				> tbody {
					> tr {
						> td {
							background-color: rgba(255,255,255,0.4);
							font-size: min(18px,1.5vh);
							line-height: 1;
							color: #000;
							font-weight: 500;
							font-family: var(--font-number);
							letter-spacing: 0.1em;
							text-align: center;
							&.open {
								background-color: #ef0;
							}
							&.last {
								background-color: #f00;
								color: #fff;
							}
						}
					}
				}
			}
			> div {
				position: relative;
				width: 100%;
				max-height: calc((100vh - 60px) / 2);
				> div.movie {
					position: relative;
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;
					> 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: 200px;
					font-family: var(--font-number);
					letter-spacing: 0.1em;
					padding-left: 0.1em;
					line-height: 1;
					color: #000;
					width: 300px;
					height: 300px;
					background-image: url(./image/ball.svg);
					background-repeat: no-repeat;
					background-size: contain;
					@media (width < 1400px) {
						font-size: 120px;
						width: 200px;
						height: 200px;
					}
					@media (width < 1000px) {
						font-size: 90px;
						width: 150px;
						height: 150px;
					}
					@media (width < 900px) {
						font-size: 50px;
						width: 80px;
						height: 80px;
					}
				}
				> div.character {
					position: absolute;
					top: 1vh;
					right: 0.5vw;
					height: 95%;
					pointer-events: none;
					> img {
						height: 100%;
					}
				}
			}
		}
	}
	> div.control {
		min-height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		column-gap: 10px;
		padding-inline: min(10px,1vw);
		> 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;
				width: calc(100vw - 500px);
				> b {
				}
			}
		}
		> button {
			background-color: transparent;
			border: solid 1px #000;
			border-radius: 3px;
			color: #000;
			cursor: pointer;
			padding: 5px 60px;
			white-space: nowrap;
			background-color: rgba(255,255,255,0.3);
			&: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;
		}
	}
}
@keyframes reveal {
	0% {	clip-path: polygon(50% 50%, 50% 100%, 50% 100%);	}
	2% {	clip-path: polygon(50% 50%, 50% 100%, 40% 100%);	}
	4% {	clip-path: polygon(50% 50%, 50% 100%, 30% 100%);	}
	6% {	clip-path: polygon(50% 50%, 50% 100%, 20% 100%);	}
	8% {	clip-path: polygon(50% 50%, 50% 100%, 10% 100%);	}
	10% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%);		}
	12% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 90%);	}
	14% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 80%);	}
	16% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 70%);	}
	18% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 60%);	}
	20% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 50%);	}
	22% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 40%);	}
	24% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 30%);	}
	26% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 20%);	}
	28% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 10%);	}
	30% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0);	}
	32% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 10% 0);	}
	34% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 20% 0);	}
	36% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 30% 0);	}
	38% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 40% 0);	}
	40% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 50% 0);	}
	42% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 60% 0);	}
	44% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 70% 0);	}
	46% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 80% 0);	}
	48% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 90% 0);	}
	50% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 100% 0);	}
	52% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 100% 0, 100% 10%);	}
	54% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 100% 0, 100% 20%);	}
	56% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 100% 0, 100% 30%);	}
	58% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 100% 0, 100% 40%);	}
	60% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 100% 0, 100% 50%);	}
	62% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 100% 0, 100% 60%);	}
	64% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 100% 0, 100% 70%);	}
	66% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 100% 0, 100% 80%);	}
	68% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 100% 0, 100% 90%);	}
	70% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 100% 0, 100% 100%);	}
	72% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 100% 0, 100% 100%, 90% 100%);	}
	74% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 100% 0, 100% 100%, 80% 100%);	}
	76% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 100% 0, 100% 100%, 70% 100%);	}
	78% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 100% 0, 100% 100%, 60% 100%);	}
	80% {	clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0 0, 100% 0, 100% 100%, 50% 100%);	}
}
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);
		}
	}
}