/* @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
	--correct-hue: 80;
	--active-hue: 40;
	--default-hue: 0;
	--incorrect-hue: 0;
	
	--correct-saturation: 100%;
	--active-saturation: var(--correct-saturation);
	--default-saturation: 0%;
	--incorrect-saturation: var(--correct-saturation);
	
	--correct-brightness: 10%;
	--active-brightness: 20%;
	--default-brightness: 10%;
	--correct-stroke-brightness: calc(var(--correct-brightness) * 4);
	--incorrect-brightness: var(--active-brightness);
	--fill-brightness: calc(var(--active-brightness) * 5);
	--stroke-brightness: calc(var(--active-brightness) * 2);
}

* {
	/* font-family: 'Roboto', sans-serif; */
	font-family: 'VT323', monospace;
	box-sizing: border-box;
}

*:focus {
	outline: none;
}

body {
	transition: opacity 1s;
	background: #000;
	color: hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness));
}

button {
	color: hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness));
}

body.ready {
	opacity: 1;
}

path {
	fill: hsl(var(--default-hue), var(--default-saturation), var(--default-brightness));
	stroke: hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness));
	stroke-width: 0.5px;
	transition: all 0.3s;
}

path.active {
	fill: hsl(var(--active-hue), var(--active-saturation), var(--active-brightness));
	stroke: hsl(var(--active-hue), var(--active-saturation), var(--stroke-brightness));
}

path:not(.correct) {
	cursor: pointer;
}

path:not(.correct):not(.active):hover {
	fill: hsl(var(--default-hue), var(--default-saturation), calc(var(--default-brightness) * 1.5));
	stroke: hsl(var(--default-hue), var(--default-saturation), calc(var(--stroke-brightness) * 1.5));
}

path.correct {
	fill: hsl(var(--correct-hue), var(--correct-saturation), var(--correct-brightness));
	stroke: hsl(var(--correct-hue), var(--correct-saturation), var(--correct-stroke-brightness));
}

#name-input {
	background: #000;
	color: hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness));
	border: 1px solid hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness));
	padding: 10px;
	text-transform: capitalize;
	margin-bottom: 5px;
	flex-grow: 2;
	flex-basis: 100%;
}

#name-input-container {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	background: #000;
	z-index: 2;
	padding: 5px;
	opacity: 0;
	border: 1px solid hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness));
	transition-duration: 0.2s;
	transition-property: opacity;
	flex-direction: row;
	flex-wrap: wrap;
	width: 250px;
	justify-content: space-between;
	font-size: 13.3333px;
	pointer-events: none;
}

#name-input-container.active {
	/* display: flex; */
	opacity: 1;
	pointer-events: auto;
	transition-property: top, left, opacity;
}

button {
	background: #000;
	border: 1px solid hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness));
}

#name-input-container button {
	flex-basis: 49%;
}

input[type="radio"] {
	display: none;
}

input[type="radio"] + label {
	position: relative;
	display: inline-block;
	font-size: 13.3333px;
}

input[type="radio"] + label::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 5px;
	margin-top: 5px;
	margin-bottom: -2px;
	border: 1px solid hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness));
}

input[type="radio"] + label::after {
	content: "";
	display: none;
	position: absolute;
	left: 4px;
	top: 9px;
	width: 6px;
	height: 6px;
	background: hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness));
}

input[type="radio"]:checked + label::after {
	display: block;
}

#indicator {
	/* border-radius: 50%; */
	border: 1px solid hsla(var(--active-hue), var(--active-saturation), var(--stroke-brightness), 0.7);
	position: fixed;
	display: none;
	pointer-events: none;
	z-index: 1;
	transition: all 0.3s;
}

#indicator.active {
	display: block;
}

#score {
	position: fixed;
	left: 0;
	top: 0;
	/* color: hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness)); */
	font-size: 1.5em;
	padding: 20px;
	/* border: 1px solid hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness)); */
	border-top: none;
	border-left: none;
	/* background: hsl(var(--default-hue), var(--default-saturation), var(--default-brightness)); */
	text-shadow: 1px 1px 1px #000;
}

.incorrect path.active, .incorrect #name-input, .incorrect #indicator, .incorrect label, .incorrect button {
	animation: incorrect 0.2s;
}

.incorrect input[type="radio"] + label::after {
	animation: incorrect-background 0.2s;
}

.incorrect input[type="radio"] + label::before, .incorrect #name-input-container {
	animation: incorrect-border 0.2s, incorrect 0.2s;
}

.correct path.active, .correct #name-input, .correct #indicator, .correct label, .correct button {
	animation: correct 0.2s;
}

.correct input[type="radio"] + label::after {
	animation: correct-background 0.2s;
}

.correct input[type="radio"] + label::before, .correct #name-input-container {
	animation: correct-border 0.2s, correct 0.2s;
}

#credit {
	position: absolute;
	bottom: 0;
	right: 0;
}

@keyframes incorrect {
	30% {
		fill: hsl(var(--incorrect-hue), var(--incorrect-saturation), var(--incorrect-brightness));
		stroke: hsl(var(--incorrect-hue), var(--incorrect-saturation), var(--stroke-brightness));
		border-color: hsl(var(--incorrect-hue), var(--incorrect-saturation), var(--stroke-brightness));
		color: hsl(var(--incorrect-hue), var(--incorrect-saturation), var(--stroke-brightness));
	}
	100% {
		fill: hsl(var(--default-hue), var(--default-saturation), var(--default-brightness));
		stroke: hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness));
		border-color: hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness));
		color: hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness));
	}
}

@keyframes incorrect-background {
	30% {
		background: hsl(var(--incorrect-hue), var(--incorrect-saturation), var(--stroke-brightness));
	}
	100% {
		background: hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness));
	}
}

@keyframes incorrect-border {
	30% {
		border-color: hsl(var(--incorrect-hue), var(--incorrect-saturation), var(--stroke-brightness));
	}
	100% {
		border-color: hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness));
	}
}

@keyframes correct {
	30% {
		fill: hsl(var(--correct-hue), var(--correct-saturation), var(--correct-brightness));
		stroke: hsl(var(--correct-hue), var(--correct-saturation), var(--stroke-brightness));
		border-color: hsl(var(--correct-hue), var(--correct-saturation), var(--stroke-brightness));
		color: hsl(var(--correct-hue), var(--correct-saturation), var(--stroke-brightness));
	}
	100% {
		fill: hsl(var(--default-hue), var(--default-saturation), var(--default-brightness));
		stroke: hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness));
		border-color: hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness));
		color: hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness));
	}
}

@keyframes correct-background {
	30% {
		background: hsl(var(--correct-hue), var(--correct-saturation), var(--stroke-brightness));
	}
	100% {
		background: hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness));
	}
}

@keyframes correct-border {
	30% {
		border-color: hsl(var(--correct-hue), var(--correct-saturation), var(--correct-brightness));
	}
	100% {
		border-color: hsl(var(--default-hue), var(--default-saturation), var(--stroke-brightness));
	}
}