* {
	font-family: sans-serif;
	box-sizing: border-box;
}

:root {
	--button-bg-color: #4CAF50;
	--button-border-color: #4CAF50;
	--button-text-color: white;
	--button-hover-bg-color: #45a049;
	--button-active-bg-color: #3e8e41;
	--button-disabled-bg-color: #cccccc;
	--button-disabled-text-color: #777777;
}

body {
	text-align: center;
	padding: 2rem;
}

button {
	font-size: 0.8rem;
	padding: 0.25em 0.5em;
	cursor: pointer;
	background-color: var(--button-bg-color);
	border: 2px solid var(--button-border-color);
	color: var(--button-text-color);
	border-radius: 5px;
	transition: background-color 0.15s;

	&:hover {
		background-color: var(--button-hover-bg-color);
	}

	&:active {
		background-color: var(--button-active-bg-color);
	}

	&:focus {
		outline: none;
	}

	&:disabled {
		background-color: var(--button-disabled-bg-color);
		border-color: var(--button-disabled-bg-color);
		color: var(--button-disabled-text-color);
		cursor: not-allowed;
	}

	&.red {
		--button-bg-color: #f44336;
		--button-border-color: #f44336;
		--button-hover-bg-color: #da190b;
		--button-active-bg-color: #c1170a;
	}

	&#start-button {
		--button-bg-color: #008CBA;
		--button-border-color: #008CBA;
		--button-hover-bg-color: #007bb5;
		--button-active-bg-color: #006f9a;
	}

	&.stop-button {
		--button-bg-color: #ffe5b4;
		--button-border-color: #ffe5b4;
		--button-text-color: #7a4200;
		--button-hover-bg-color: #ffd580;
		--button-active-bg-color: #ffcc80;
	}
}

section {
	margin-top: 3rem;

	&:first-child {
		margin-top: 0;
	}

	& h2 {
		margin-bottom: 0.5rem;
	}

	& h3 {
		margin-top: 0.7rem;
		margin-bottom: 0.5rem;
	}

	& p {
		margin-top: 0;
		margin-bottom: 0.5rem;
	}

	& ul {
		margin: 0;
		display: inline-block;

		& li {
			text-align: left;
		}
	}
}

footer {
	font-size: 0.8rem;
	color: #777777;
	margin-top: 4rem;

	& ul {
		list-style: none;
		padding: 0;
		margin: 0;

	}
}

#popup-container {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;

	& .popup {
		font-size: 0.8rem;
		background-color: rgba(0, 0, 0, 0.8);
		color: #fff;
		padding: 0.5rem 1rem;
		border-radius: 8px;
		box-shadow: 0 0px 4px rgba(0, 0, 0, 0.7);
		z-index: 1000;
		text-align: center;
		animation: slideIn 300ms forwards;
		max-width: calc(100vw - 4rem);
	}
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(100px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

#slot-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;

	& h1 {
		margin: 0;
	}

	& #slot-reels-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 1.5rem;

		& .slot-reel {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 1rem;
			padding: 1rem;
			box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);

			& .image-container {
				height: 45px;
				width: 38px;
				overflow: hidden;

				&.spinning {
					& .images {
						animation: spin 1.2s linear infinite;
					}
				}

				&.stopped {
					& .images {
						display: none;
					}

					& .result-image {
						display: block;
					}
				}

				& .images {
					display: flex;
					flex-direction: column;
					gap: 0;
					transition: transform 0.5s ease-out;
				}

				& .result-image {
					display: none;
				}
			}
		}

		&.debug-mode {
			& .slot-reel {
				& .image-container {
					&.spinning {
						& .images {
							animation: spin 25s linear infinite;
						}
					}
				}
			}
		}
	}
}

@keyframes spin {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(calc(-100% + 45px));
	}
}

#result-content {
	margin-top: 1rem;

	& .message {
		font-size: 1.2rem;
		color: #333333;
	}

	& #result-list {
		width: 20em;
		max-width: 100%;
		list-style: none;
		padding: 0.5rem;
		margin: 0;
		font-size: 1rem;
		background-color: #555555;
		color: #fff;

		& .result-list-item {
			margin-bottom: 0.5rem;
			background-color: #222;
			padding: 0.15rem 0.5rem;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}