div.stage {
	width: 100vw;
	height: 100vh;
	background-color: #ece5ce;
	background-image: url(./image/back.webp);
	background-position: 50% 0%;
	background-size: cover;
	> .card {
		padding-top: min(1vw,1vh);
		> table {
			border-collapse: collapse;
			width: min(90vw,90vh);
			height: min(90vw,90vh);
			border: solid 2px #ddd;
			margin: 0 auto;
			> thead {
				> tr {
					> th {
						background-color: #c6c6c6;
						font-size: min(6vw,6vh);
						line-height: 1;
						color: #fff;
						font-weight: 500;
						padding: 3px;
						border: solid 4px #ddd;
						text-align: center;
						font-family: Anton, sans-serif;
						width: 20%;
					}
				}
			}
			> tbody {
				> tr {
					> td {
						background-color: #fff;
						padding: 10px;
						border: solid 4px #ddd;
						text-align: center;
						> div {
							display: grid;
							cursor: pointer;
							> div {
								grid-area: 1/1/2/2;
								align-self: center;
								font-size: min(8vw,8vh);
								line-height: min(13vw,13vh);
								color: #333;
								font-family: Anton, sans-serif;
								font-weight: 500;
							}
							> img {
								grid-area: 1/1/2/2;
								display: block;
								visibility: hidden;
								align-self: center;
								max-width: 100%;
								max-height: 100%;
							}
							&.open {
								> img {
									visibility: visible;
									animation: reveal 0.8s linear forwards;
									transition: 0.2s;
								}
							}
							&.bingo {
								background-color: #ff0;
								border-radius: 100px;
							}
						}
					}
				}
			}
		}
	}
}
@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);
		}
	}
}

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