.root {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-4);
	background-color: var(--color-bg-higher);
	border-radius: 0 0 var(--radius-box) var(--radius-box);
	padding: var(--s-4);
	margin: var(--s-4) calc(-1 * var(--s-4)) calc(-1 * var(--s-6));
	container-type: inline-size;
}

.pastRow {
	display: flex;
	align-items: center;
	gap: var(--s-2);
}

.mapRow {
	display: flex;
	align-items: center;
	gap: var(--s-4);

	@container (max-width: 479px) {
		flex-direction: column;
	}
}

.mapInfo {
	display: flex;
	flex-direction: column;
	align-self: flex-end;
	gap: var(--s-2);

	@container (max-width: 479px) {
		align-self: center;
	}
}

.mapLabel {
	display: flex;
	align-items: center;
	gap: var(--s-1);
	font-size: var(--font-3xs);
	font-weight: var(--weight-semi);
	color: var(--color-text-high);
}

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

.inputRow {
	display: flex;
	align-items: flex-end;
	gap: var(--s-4);

	@container (max-width: 479px) {
		width: 100%;
	}
}

.weaponSelectContainer {
	min-width: 200px;

	& button {
		border: var(--border-style-high);
	}

	@container (max-width: 479px) {
		flex: 1;
	}
}

.unreportedRow {
	display: flex;
	gap: var(--s-1);
}

.rootCollapsed {
	display: flex;
	justify-content: center;
	background-color: var(--color-bg-higher);
	border-radius: 0 0 var(--radius-box) var(--radius-box);
	padding: var(--s-2);
	margin: var(--s-4) calc(-1 * var(--s-4)) calc(-1 * var(--s-6));
}

.rootExpanded {
	position: relative;
}

.rootStandalone {
	margin-block-start: calc(-1 * var(--s-6));
	min-height: 200px;
	justify-content: center;
}

.collapseButton {
	position: absolute;
	top: var(--s-2);
	right: var(--s-3);

	& svg {
		min-width: 22px;
		max-width: 22px;
	}
}