html {
	font-family: "Montserrat", sans-serif;
}

body {
	background-color: #14151f;
}

button {
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
	opacity: 0.8;

	&:hover {
		opacity: 1;
	}
	&:active {
		opacity: 0.8;
	}
}

.controls {
	display: grid;
	grid-template-columns: 0.5fr 1fr 1fr 1fr 0.5fr;
	align-items: center;
	justify-content: center;
	margin-top: 3em;
	gap: 1em;

	.drop-container {
		display: flex;
		justify-content: center;

		.drop {
			position: relative;
			display: inline-flex;

			button {
				flex-shrink: 0;
				border: none;
				border-radius: 10px;
				padding: 1em 1em 1em 1em;
				background: lime;
				width: 7em;
			}

			input[type="checkbox"] {
				display: none;

				&:not(:checked) + label {
					.checked {
						visibility: hidden;
					}
				}
			}

			label[for="checkbox"] {
				position: absolute;
				left: calc(100%);
				height: 100%;
				cursor: pointer;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 0 10px 10px 0;
				padding: 0 0.5em;
				opacity: 0.8;

				&:hover {
					opacity: 1;
					.box {
						background-color: rgba(255, 255, 255, 0.1);
					}
				}
				&:active {
					opacity: 0.8;
				}

				.box {
					position: relative;
					background-color: rgba(255, 255, 255, 0.1);
					border-radius: 0.2em;
					width: 0.8em;
					height: 0.8em;

					&:after {
						font-size: 0.6em;
						vertical-align: middle;
						position: absolute;
						left: calc(100% + 0.4em);
						color: #fff;
						content: "auto";
					}

					svg {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
		}
	}
}

#balls,
#multiplier {
	position: relative;
	font-weight: 900;
	font-size: 2.2em;
	margin-right: auto;
	color: rgba(255, 255, 255, 0.2);

	&:before {
		content: "-";
		position: absolute;
		bottom: 100%;
		font-size: 0.3em;
		font-weight: 400;
	}
}

#balls {
	&:before {
		content: "Balls";
	}
}

#multiplier {
	text-align: right;

	&:before {
		content: "Drop";
		right: 0;
	}
}

.canvas-container {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;

	canvas {
		display: block;
		margin: auto;
	}

	.logo-transparente {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: 200px;
		width: 40%;
		height: auto;
		opacity: 0.12;
		filter: grayscale(100%);
		pointer-events: none;
	}
}

.notes {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 5px;

	.note {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 27px;
		aspect-ratio: 30 / 26;
		border-radius: 5px;
		background-color: gray;
		flex-shrink: 0;
		border-bottom: solid 4px yellow;
		text-align: center;
		font-size: 0.8em;
		font-weight: 600;

		&[data-pressed="true"] {
			animation: press 0.5s;
		}

		@keyframes press {
			0% {
				border-bottom-width: 4px;
			}
			50% {
				border-bottom-width: 0;
			}
			100% {
				border-bottom-width: 4px;
			}
		}

		&:nth-child(1),
		&:nth-child(17) {
			background-color: #0f3;
			border-color: #0a0;
		}
		&:nth-child(2),
		&:nth-child(16) {
			background-color: #1f3;
			border-color: #0a0;
		}
		&:nth-child(3),
		&:nth-child(15) {
			background-color: #3f2;
			border-color: #0a0;
		}
		&:nth-child(4),
		&:nth-child(14) {
			background-color: #4f2;
			border-color: #0a0;
		}
		&:nth-child(5),
		&:nth-child(13) {
			background-color: #6f2;
			border-color: #0a0;
		}
		&:nth-child(6),
		&:nth-child(12) {
			background-color: #7f1;
			border-color: #3a0;
		}
		&:nth-child(7),
		&:nth-child(11) {
			background-color: #9f1;
			border-color: #4a0;
		}
		&:nth-child(8),
		&:nth-child(10) {
			background-color: #af0;
			border-color: #6a0;
		}
		&:nth-child(9) {
			background-color: #cf0;
			border-color: #7a0;
		}
	}
}

.logo-transparente {
	display: block;
	margin: 2em auto 0 auto;
	max-width: 200px;
	opacity: 0.12;
	filter: grayscale(100%);
}

@media (max-width: 700px) {
	body {
		margin: 0;
	}
	.canvas-container {
		max-width: 100vw;
		padding: 0;
	}
	.canvas-container canvas {
		width: 98vw !important;
		height: auto !important;
		max-width: 100vw;
		max-height: 60vw;
	}
	.canvas-container .logo-transparente {
		max-width: 120px;
		width: 40vw;
	}
	.controls {
		margin-top: 1em;
		gap: 0.5em;
		font-size: 0.9em;
	}
	.notes {
		gap: 2px;
	}
	.notes .note {
		width: 18px;
		font-size: 0.7em;
		border-radius: 3px;
	}
}