.crosshair {
	position: absolute;
	transform-origin: 50% top;
	left: calc(50% - 0.21em);
	top: 50%;
	background: white;
	opacity: 0.7;
	border: solid 0.1em black;
	width: 0.22em;
	height: 0.8em;
}

#circleReticle {
	position: absolute;
	left: calc(50% - 0.025em);
	top: calc(50% - 0.025em);
	transform: translate(-50%, -50%);
	width: 3em;
	height: 3em;
	background: transparent;
	border-radius: 50%;
	box-shadow:
		0 0 0 0.1em black,
		inset 0 0 0 0.1em black;
	opacity: 0.5;
}

.circleReticleReady {
	border: solid 0.22em white;
	animation: armed 0.2s linear;
}

.circleReticleNotReady {
	border: solid 0.22em red;
	animation: unarmed 0.2s linear;
}

@keyframes armed {
    0% { transform: translate(-50%, -50%) scale(1.25); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes unarmed {
    0% { transform: translate(-50%, -50%) scale(0.8); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

#readyBrackets {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	opacity: 0.5;
}

#readyBrackets.ready {
	animation: armed 0.2s linear;
	width: 4em; height: 4em;
	border-color: rgb(0, 255, 0);
}

#readyBrackets.notReady {
	animation: unarmed 0.2s linear;
	width: 8em; height: 8em;
	border-color: rgb(255, 0, 0);
}

.readyBracket {
	position: absolute;
	width: 0.8em; height: 0.8em;
	border: solid;
	border-color: inherit;
	border-width: 0.3em 0 0 0.3em;
	transform-origin: top left;
}

.readyBracket:nth-child(1) {
	left: 100%;
	transform: rotate(90deg);
}

.readyBracket:nth-child(2) {
	left: 100%; top: 100%;
	transform: rotate(180deg);
}

.readyBracket:nth-child(3) {
	top: 100%;
	transform: rotate(270deg);
}

@keyframes healAnimation {
	0% {
		stroke: white;
	}
	20% {
		stroke: rgb(0, 255, 0);
	}
	100% {
		stroke: white;
	}
}

.healthBar {
	transform-origin: center;
	transform: rotate(90deg);
	fill: transparent;
	stroke: white;
	stroke-width: 1em;
	stroke-dasharray: 14.4513em;
	transition: all 0.3s ease-in-out;
}

.heal {
	animation: healAnimation 1s ease-in-out;
}

.healthYolk {
	fill: orange;
}

#healthHp {
	transform: translateY(-2.75em);
	font-size: 1.5em;
}

.healthSvg {
	width: 100%; height: 100%;
}

#spatulaPlayer {
	display: none;
    position: absolute;
    width: 2.8em;
    left: 50%;
    bottom: 1.4em;
    transform: translateX(3.5em);
    transform-origin: center bottom;
}

#spatulaPlayer.capture {
	display: block;
	animation: spatulaPlayerCapture 0.5s ease-in-out;
}

#spatulaPlayer.drop {
	display: none;
}

@keyframes spatulaPlayerCapture {
	from {
		opacity: 0;
		transform: scale(6) translate(0, 0);
	}

	to {
		opacity: 1;
		transform: scale(1) translate(3.5em, 0);
	}
}

.teamScore {
	position: absolute;
	width: 12vh;
	height: 8vh;
	top: 0.5em;
	padding: 2vh;
	box-sizing: border-box;
	border: solid rgba(0, 0, 0, 0.5);
	text-shadow: none;
	text-align: center;
}

.teamScore.red {
	border-radius: 7vh 5vh 5vh 7vh / 4vh 4vh 4vh 4vh;
	border-right-width: 4vh;
	transform: translateX(-22vh);
}

.teamScore.blue {
	border-radius: 5vh 7vh 7vh 5vh / 4vh 4vh 4vh 4vh;
	border-left-width: 4vh;
	transform: translateX(10vh);
}

.teamScore.active {
	opacity: 1;
}

.teamScore.inactive {
	opacity: 0.5;
}

.teamScore.red.active {
	color: #fff;
	background: rgba(255, 0, 0, 0.7);
}

.teamScore.red.inactive {
	color: #f00;
	background: rgba(64, 0, 0, 0.7);
}

.teamScore.blue.active {
	color: #fff;
	background: rgba(0, 128, 255, 0.7);
}

.teamScore.blue.inactive {
	color: #0af;
	background: rgba(0, 32, 64, 0.7);
}

.teamScore .number {
	width: 100%;
	position: absolute;
	margin-left: -2vh;
	font-size: 3vh;
}

.teamLetter.red {
	position: absolute;
	font-size: 3vh;
	right: -0.9em;
}

.teamLetter.blue {
	position: absolute;
	font-size: 3vh;
	left: -0.9em;
}