:root {
	--fcc-1: #1b1b32;
	--fcc-2: #3b3b4f;
	--fcc-3: #0a0a23;
	--text-color: #ffffffde;
	--simon-dark-1: #222222;
	--simon-dark-2: #323232;

	font-family: "Questrial", "Varela Round", sans-serif;
	line-height: 1.5;
	font-weight: 400;

	color: var(--text-color);
	background-color: var(--fcc-2);

	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

* {
	overflow: hidden;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 100vw;
	min-height: 100vh;
	overflow: visible;
}

.game {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 500px;
	min-height: 500px;
	border: 20px solid transparent;
	border-radius: 50%;
	background-color: transparent;
	box-shadow: 0 0 100px var(--fcc-1);
}

button {
	cursor: pointer;
}

.display {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 225px;
	height: 225px;
	border: 2px solid black;
	border-radius: 50%;
	background-color: var(--simon-dark-2);
}

.display-wrapper {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 265px;
	height: 265px;
	border-radius: 50%;
	background-color: #111;
	z-index: 999;
}

.power-off-wrapper {
	position: relative;
	overflow: visible;
}

button.power-off {
	position: relative;
	width: 60px;
	height: 30px;
	padding: 2px;
	border: 2px solid black;
	border-radius: 30px;
	margin: 0;
	fill: var(--text-color);
	background-color: var(--simon-dark-1);
	z-index: 2;
}

.base.power-off {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 30px;
	border-radius: 30px;
	background-color: black;
	z-index: 1;
	transform: translate(-50%, -43%);
}

button.power-off:active {
	transform: translateY(4%);
}

h1 {
	font-family: "Alfa Slab One", "Questrial", "Varela Round", sans-serif;
	padding: 0;
	margin: 0;
}

h1 sup {
	font-size: 66%;
}

output {
	font-family: "vt323", monospace;
	font-size: 1.5rem;
	font-weight: bold;
	background: black;
	color: #00ff0033;
	padding: 5px 7px;
	border: 3px solid var(--simon-dark-1);
	border-radius: 10px;
	margin: 3px 10px;
}

output.active {
	color: #0f0;
	box-shadow: inset 0 0 5px 1px #0f0;
}

label {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 0.6rem;
}

.button-wrapper {
	display: flex;
	overflow: visible;
}

button.start,
button.strict {
	position: relative;
	width: 19px;
	height: 19px;
	border: none;
	border-radius: 50%;
	margin: 7px 20px 6px 20px;
	z-index: 1001;
}

.button-base {
	content: "";
	position: absolute;
	width: 19px;
	height: 19px;
	border: 3px solid black;
	border-radius: 50%;
	z-index: 1000;
}

button.start {
	background-color: red;
}

.button-base.start {
	bottom: 28px;
	background-color: darkred;
}

button.strict {
	background-color: yellow;
}

.button-base.strict {
	bottom: 14px;
	background-color: #b58b00;
}

label.strict {
	position: relative;
	overflow: visible;
}

button.start:active,
button.strict:active {
	top: 3px;
}

.strict.indicator {
	position: absolute;
	top: -8px;
	width: 5px;
	height: 5px;
	background-color: #32050c;
	border: 2px solid black;
	border-radius: 50%;
	z-index: 999;
}

.strict.indicator.active {
	background-color: #dc0d29;
}

.green,
.red,
.yellow,
.blue {
	position: absolute;
	width: 250px;
	height: 250px;
	border: none;
	filter: brightness(0.65);
}

.green {
	top: 0;
	left: 0;
	border-top-left-radius: 100%;
	background-color: #008000;
	box-shadow: inset -25px -25px 10px rgba(0, 0, 0, 0.4),
		inset 20px 20px 15px rgba(255, 255, 255, 0.1), 0 4px 10px rgba(0, 0, 0, 0.5);
}

.red {
	top: 0;
	right: 0;
	border-top-right-radius: 100%;
	background-color: #ff0000;
	box-shadow: inset -15px -20px 10px rgba(0, 0, 0, 0.4),
		inset 20px 20px 15px rgba(255, 255, 255, 0.1), 0 4px 10px rgba(0, 0, 0, 0.5);
}

.yellow {
	bottom: 0;
	left: 0;
	border-bottom-left-radius: 100%;
	background-color: #ffff00;
	box-shadow: inset -20px -15px 10px rgba(0, 0, 0, 0.4),
		inset 20px 20px 15px rgba(255, 255, 255, 0.1), 0 4px 10px rgba(0, 0, 0, 0.5);
}

.blue {
	bottom: 0;
	right: 0;
	border-bottom-right-radius: 100%;
	background-color: #0000ff;
	box-shadow: inset -12px -12px 10px rgba(0, 0, 0, 0.4),
		inset 25px 25px 10px rgba(255, 255, 255, 0.1), 0 4px 10px rgba(0, 0, 0, 0.5);
}

.green.active,
.red.active,
.yellow.active,
.blue.active {
	filter: brightness(1.4);
}

.green:active,
.red:active,
.yellow:active,
.blue:active {
	transform: scale(1.02);
}

.x-separator,
.y-separator {
	position: absolute;
	width: 530px;
	height: 20px;
	background: linear-gradient(90deg,
			var(--simon-dark-1),
			#111 32%,
			#111 78%,
			var(--simon-dark-1));
}

.y-separator {
	transform: rotate(90deg);
}

.rim {
	position: absolute;
	width: 540px;
	height: 540px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%,
			#3a3a3a 0%,
			var(--simon-dark-2) 40%,
			var(--simon-dark-1) 65%,
			#0a0a0a 90%,
			#000000 100%);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	box-shadow: inset -8px -8px 20px rgba(0, 0, 0, 0.6),
		inset 8px 8px 10px rgba(255, 255, 255, 0.03), 0 6px 30px rgba(0, 0, 0, 0.9);
	z-index: -1;
}

.grain-overlay {
	position: absolute;
	width: 540px;
	height: 540px;
	border-radius: 50%;
	pointer-events: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noise)'/></svg>");
	background-size: cover;
	opacity: 0.07;
	z-index: 9999;
}

.glare-overlay {
	position: absolute;
	width: 540px;
	height: 540px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(ellipse at 35% 25%,
			rgba(255, 255, 255, 0.08),
			transparent 60%);
	z-index: 9999;
}

.flashing {
	animation: flashing linear 0.5s infinite;
}

@keyframes flashing {
	from {
		opacity: 0;
	}

	50% {
		opacity: 0;
	}

	51% {
		opacity: 1;
	}

	to {
		opacity: 1;
	}
}

@media (max-width: 1200px) {
	.scale-wrapper {
		transform: scale(0.9);
	}
}

@media (max-width: 800px) {
	.scale-wrapper {
		transform: scale(0.75);
	}
}

@media (max-width: 550px) {
	.scale-wrapper {
		transform: scale(0.5);
	}
}