.root {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas:
		"header header header"
		"actions actions actions"
		"alpha stage bravo"
		"points-alpha ko points-bravo"
		". submit .";
	justify-items: center;
	align-items: center;
	gap: var(--s-4);

	@media screen and (max-width: 599px) {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"header header"
			"actions actions"
			"stage alpha"
			"stage bravo"
			"points points"
			"submit submit";
	}
}

.title {
	grid-area: header;
	font-size: var(--font-md);
	font-weight: var(--weight-semi);
	text-align: center;
}

.actionButtons {
	grid-area: actions;
	display: flex;
	gap: var(--s-6);
	margin-block-start: calc(-1 * var(--s-4));

	@media screen and (max-width: 599px) {
		margin-block-start: calc(-1 * var(--s-3));
		margin-block-end: calc(-1 * var(--s-0-5));
	}
}

.selectionRow {
	display: contents;
}

.teamRadioContainer {
	--label-margin: 0;
	width: 100%;
	height: 100%;
	max-width: 250px;

	@media screen and (max-width: 599px) {
		max-width: unset;
	}
}

.alpha {
	grid-area: alpha;
	justify-self: end;

	@media screen and (max-width: 599px) {
		justify-self: stretch;
		align-self: end;
	}
}

.bravo {
	grid-area: bravo;
	justify-self: start;

	@media screen and (max-width: 599px) {
		justify-self: stretch;
		align-self: start;
	}
}

/** xxx: migrate to container queries (everywhere on this file too) */
.stageImageContainer {
	grid-area: stage;

	@media screen and (max-width: 599px) {
		align-self: stretch;
		overflow: hidden;
		border-radius: var(--radius-box);
		width: 90px;
		position: relative;
	}
}

.stageImage {
	border-radius: var(--radius-box);

	@media screen and (max-width: 599px) {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
	}
}

.pointsRow {
	display: contents;

	@media screen and (max-width: 599px) {
		display: flex;
		grid-area: points;
		justify-content: center;
		align-items: flex-end;
		gap: var(--s-4);
	}
}

.pointsAlpha {
	grid-area: points-alpha;
	justify-self: end;
}

.ko {
	grid-area: ko;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-1);
	align-self: flex-end;
}

.pointsBravo {
	grid-area: points-bravo;
	justify-self: start;
}

.submit {
	grid-area: submit;
	margin-block-start: var(--s-2);
}

.checkCircle {
	width: 24px;
	height: 24px;
	border-radius: 100%;
	border: 2px solid var(--color-border-high);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.teamRadio {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-1-5) var(--s-3);
	border-radius: var(--radius-field);
	border: 2px solid var(--color-border);
	cursor: pointer;
	background-color: var(--color-bg-high);
	min-width: 160px;
	transition: background-color 0.15s;
	height: 100%;

	&:hover .checkCircle {
		border-color: var(--color-accent-high);
	}

	@media screen and (max-width: 599px) {
		min-width: unset;
	}
}

.selected {
	background-color: var(--color-bg-higher);
}

.focusVisible {
	outline: var(--focus-ring);
}

.teamAvatarInfo {
	display: flex;
	align-items: center;
	gap: var(--s-1-5);
}

.checkCircleSelected {
	background-color: var(--color-accent-high);
	border-color: var(--color-accent-high);
	color: var(--color-text-inverse);

	& svg {
		stroke-width: 3px;
	}
}

.teamInfo {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.teamName {
	font-weight: var(--weight-semi);
	font-size: var(--font-sm);
}

.teamLabel {
	font-size: var(--font-3xs);
	font-weight: var(--weight-semi);
}

.myTeamLabel {
	color: var(--color-success-high);
}

.opponentLabel {
	color: var(--color-error-high);
}

.pointsInput {
	width: 60px;
}

.koLabel {
	display: flex;
	align-items: center;
	gap: var(--s-1-5);
	font-weight: var(--weight-semi);
	cursor: pointer;
}

.koHelp {
	font-size: var(--font-3xs);
	color: var(--color-text-high);
	height: auto;
	padding: 0;
	font-weight: normal;
	text-decoration: underline;
}

.confirmationRoot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-4);
}

.confirmationMessage {
	font-weight: var(--weight-semi);
	text-align: center;
}

.confirmationButtons {
	display: flex;
	gap: var(--s-3);
}