:root {
	--app-color-bg: #333;

	--game-cell-size: 80px;
	--game-cell-pad-tb: 10px;
	--game-cell-pad-lr: 15px;

	--game-board-color: hsl(210, 60%, 45%);
	--game-board-color-border: hsl(210, 60%, 25%);
	--game-board-padding-lr: 16px;
	--game-board-border-width: 6px;

	--game-token-color-1: hsl(0, 65%, 50%);
	--game-token-color-1-dark: hsl(0, 65%, 30%);
	--game-token-color-2: hsl(60, 65%, 50%);
	--game-token-color-2-dark: hsl(60, 65%, 30%);
	--game-token-border-width: 3px;

	--token-offset-0: 119px;
	--token-offset-spacing: calc(var(--game-cell-size) + 2 * var(--game-cell-pad-tb));

	--drop-anim-time-ms: 150;
}

*, *::before, *::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	background-color: var(--app-color-bg);
	text-align: center;
	color: #ccc;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: 400;
}

h2 {
	margin-top: 1rem;
}

.gameboard {
	margin: 0 auto;
	width: fit-content;
}

.gameboard-dropzone {
	padding-left: calc(var(--game-board-padding-lr) + var(--game-board-border-width) - var(--game-token-border-width));

}
.gameboard-grid {
	padding: 1rem var(--game-board-padding-lr);
	width: fit-content;
	background-color: var(--game-board-color);
	border: 6px solid var(--game-board-color-border);
	border-radius: 20px 20px 0 0;
}

.grid-row {
	display: flex;
	flex-direction: row;
}

.grid-cell {
	--accent-color: #888;

	margin: var(--game-cell-pad-tb) var(--game-cell-pad-lr);
	height: var(--game-cell-size);
	width: var(--game-cell-size);
	border-radius: 50%;
	border: var(--game-token-border-width) dashed var(--accent-color);
	transition: all 100ms ease-in-out;
}

.dropper:hover {
	cursor: pointer;
}

.marker-1 {
	--accent-color: var(--game-token-color-1-dark);
	background-color: var(--game-token-color-1);
}

.marker-2 {
	--accent-color: var(--game-token-color-2-dark);
	background-color: var(--game-token-color-2);
}

.winner {
	animation: 200ms infinite alternate pulse;
}

@keyframes pulse {
	from {
		transform: scale(1.0);
	}

	to {
		transform: scale(1.1);
	}
}

.drop-0 {
	animation: calc(var(--drop-anim-time-ms) * 1 * 1ms) drop-0 ease-in;
}

.drop-1 {
	animation: calc(var(--drop-anim-time-ms) * 2 * 1ms) drop-1 ease-in;
}

.drop-2 {
	animation: calc(var(--drop-anim-time-ms) * 3 * 1ms) drop-2 ease-in;
}

.drop-3 {
	animation: calc(var(--drop-anim-time-ms) * 4 * 1ms) drop-3 ease-in;
}

.drop-4 {
	animation: calc(var(--drop-anim-time-ms) * 5 * 1ms) drop-4 ease-in;
}

.drop-5 {
	animation: calc(var(--drop-anim-time-ms) * 6 * 1ms) drop-5 ease-in;
}

@keyframes drop-0 {
	from {
		transform: translateY(calc(0px - (var(--token-offset-0) + 0 * var(--token-offset-spacing))));
	}

	to {
		transform: translateY(0px);
	}
}

@keyframes drop-1 {
	from {
		transform: translateY(calc(0px - (var(--token-offset-0) + 1 * var(--token-offset-spacing))));
	}

	to {
		transform: translateY(0px);
	}
}

@keyframes drop-2 {
	from {
		transform: translateY(calc(0px - (var(--token-offset-0) + 2 * var(--token-offset-spacing))));
	}

	to {
		transform: translateY(0px);
	}
}

@keyframes drop-3 {
	from {
		transform: translateY(calc(0px - (var(--token-offset-0) + 3 * var(--token-offset-spacing))));
	}

	to {
		transform: translateY(0px);
	}
}

@keyframes drop-4 {
	from {
		transform: translateY(calc(0px - (var(--token-offset-0) + 4 * var(--token-offset-spacing))));
	}

	to {
		transform: translateY(0px);
	}
}

@keyframes drop-5 {
	from {
		transform: translateY(calc(0px - (var(--token-offset-0) + 5 * var(--token-offset-spacing))));
	}

	to {
		transform: translateY(0px);
	}
}