#round-score {
	font-size: 2rem;
	min-width: 4ch;
}
#question {
	text-align: center;
	background-color: rgb(44, 48, 49);
	padding: 1rem;
}

ul#answers > li {
	min-height: 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

article.answer {
	width: 100%;
	padding: 0.3rem 1rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	/* TODO any better way to hide answers? */
	opacity: 0;
	transition-duration: 1s;
	transition-property: opacity;
	transition-timing-function: ease-in;

	& > .points {
		border: solid white 2px;
		border-radius: 8px;
		background-color: rgb(62, 69, 76);
		padding: 1rem;
		align-content: center;
		min-width: 3ch;
	}
}

body[data-round-type="face-off"] {
	& #strikes,
	& #round-score {
		visibility: hidden;
	}
}

body[data-round-phase="ingame"] .answer.checked {
	opacity: 1;

	& > span {
		outline: solid yellow 2px;
	}
}

body[data-round-phase="end"] .answer.checked {
	opacity: 1;
	& > span {
		outline: double rgb(160, 189, 243) 4px;
	}
}

body[data-round-type="conclusion"] .answer {
	opacity: 1 !important;
	& > span {
		outline: double rgb(160, 243, 161) 4px;
	}
}

#teams {
	/* helps nested children act as if outside parent */
	display: contents;
}

.col--1-2-1 {
	& > #answers {
		grid-column: 2;
		grid-row: 1;
	}
	& #team-0 {
		grid-column: 1;
		grid-row: 1;
	}
	& #team-1 {
		grid-column: 3;
		grid-row: 1;
	}
}

@media screen and (width < 1200px) {
	.col--1-2-1 {
		& > #answers {
			grid-column: unset;
			grid-row: unset;
		}
		& #teams {
			display: flex;
		}
		& #team-0,
		& #team-1 {
			grid-column: unset;
			grid-row: unset;
		}
	}
}

.team {
	/* TODO prob should match moderater ui with popup */
	padding: 0 !important;
	margin-inline: auto;
	width: clamp(11rem, 18rem, 100%);
	background: #040154;
	background: linear-gradient(
		65deg,
		rgba(4, 1, 84, 1) 0%,
		rgb(14, 14, 80) 66%,
		rgb(13, 39, 79) 100%
	);

	& > h2 {
		border: double rgb(86, 86, 209) 1px;
		background-color: rgb(0, 0, 202);
		margin: 0;
		padding: 0.5rem;
	}

	& > .points {
		display: inline-block;
		padding: 2rem;
		/* background-color: darkblue; */
	}
}
.steal-badge,
.winner-badge {
	opacity: 0;
}
#strikes {
	display: flex;
	justify-content: center;
	gap: 2rem;
}

svg.strike[data-disabled="true"] {
	filter: drop-shadow(0 0 1px rgba(131, 131, 131, 0.334));

	& rect,
	& path {
		stroke: rgb(39, 39, 39);
	}
}
svg.strike[data-disabled="false"] {
	filter: drop-shadow(0 0 25px rgba(255, 0, 0, 0.797));

	& rect,
	& path {
		stroke: red;
	}
}