.container {
	--graphic-row-bg: var(--color-bg-high);
	--graphic-row-border: color-mix(in oklch, var(--color-text) 8%, transparent);
	--graphic-text-dim: var(--color-text-high);
	--graphic-accent: var(--color-fg-accent);
	--graphic-first: oklch(87% 0.13 85);
	--graphic-second: oklch(83% 0.015 268);
	--graphic-third: oklch(74% 0.09 55);
	--graphic-win: var(--color-success-high);
	--graphic-loss: var(--color-error-high);

	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	width: 720px;
	padding: var(--s-6);
	background:
		radial-gradient(
			ellipse 90% 45% at 50% -5%,
			color-mix(in oklch, var(--color-fg-accent) 25%, transparent),
			transparent 70%
		),
		var(--color-bg);
	color: var(--color-text);
	/* the exported image resolves fonts slightly differently, so any text allowed to wrap eventually does */
	white-space: nowrap;
	border: 1.5px solid var(--color-border-high);
	border-radius: var(--radius-box);
}

/* zero specificity so a forced [data-theme] wrapper always beats the html class */
:global(:where(html.light)) .container,
:global(:where([data-theme="light"])) .container {
	--graphic-first: oklch(58% 0.12 85);
	--graphic-second: oklch(48% 0.02 268);
	--graphic-third: oklch(50% 0.1 55);
}

:global(:where([data-theme="dark"])) .container {
	--graphic-first: oklch(87% 0.13 85);
	--graphic-second: oklch(83% 0.015 268);
	--graphic-third: oklch(74% 0.09 55);
}

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

/* the export freezes widths, so both header sides grow into the free space instead of shrink-to-fit */
.headerText {
	flex: 1 1 auto;
	min-width: 0;
}

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

	& > :not(.headerTitle) {
		flex-shrink: 0;
	}
}

.headerTitle {
	/* claims the row's free space or a glyph the raster measures wider gets ellipsised;
	auto basis so the title still contributes to the row's intrinsic width */
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-size: var(--font-lg);
	font-weight: var(--weight-extra);
	line-height: 1.15;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.headerSubtitle {
	font-size: var(--font-xs);
	font-weight: var(--weight-semi);
	color: var(--graphic-text-dim);
}

.headerTrailing {
	display: flex;
	flex-grow: 1;
	flex-shrink: 0;
	align-items: center;
	justify-content: flex-end;
	gap: var(--s-2);
}

.boxLabel {
	font-size: var(--font-2xs);
	font-weight: var(--weight-semi);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--graphic-text-dim);
}

.teamsList {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.teamRow) {
	display: grid;
	grid-template-columns: 3rem 2.75rem 1fr auto;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-2) var(--s-3);
	background-color: var(--graphic-row-bg);
	border: 1.5px solid var(--graphic-row-border);
	border-radius: var(--radius-box);

	&.teamRowFirst {
		background:
			linear-gradient(
				to right,
				color-mix(in oklch, var(--graphic-first) 18%, transparent),
				transparent 40%
			),
			var(--graphic-row-bg);
		border-color: color-mix(in oklch, var(--graphic-first) 40%, transparent);
	}
}

.placement {
	font-size: var(--font-lg);
	font-weight: var(--weight-extra);
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--graphic-text-dim);

	& sup {
		font-size: var(--font-2xs);
		font-weight: var(--weight-extra);
	}
}

.placementFirst {
	color: var(--graphic-first);
}

.placementSecond {
	color: var(--graphic-second);
}

.placementThird {
	color: var(--graphic-third);
}

.teamInfo {
	min-width: 0;
	overflow: hidden;
}

.teamName {
	overflow: hidden;
	font-size: var(--font-sm);
	font-weight: var(--weight-extra);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.avatarCell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-0-5);
}

.teamSeed {
	font-size: var(--font-2xs);
	font-weight: var(--weight-semi);
	white-space: nowrap;
	color: var(--graphic-text-dim);
}

.playersList {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-0-5) var(--s-3);
	margin-top: var(--s-1);
}

.player {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--s-1-5);
	min-width: 0;
	overflow: hidden;
	font-size: var(--font-xs);
	font-weight: var(--weight-semi);
	color: var(--graphic-text-dim);
}

/* no ellipsis: chips wrap and usernames are capped, so truncation only fired on frozen-width rounding */
.playerName {
	white-space: nowrap;
}

.weapons {
	display: flex;
	gap: var(--s-1);
	padding: var(--s-1-5);
	background-color: oklch(0% 0 0 / 0.3);
	border-radius: var(--radius-field);
}

.weaponKit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-0-5);
}

.statsRow {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--s-2);
}

.stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-0-5);
	min-width: 0;
	padding: var(--s-1-5) var(--s-3);
	background-color: var(--graphic-row-bg);
	border: 1.5px solid var(--graphic-row-border);
	border-radius: var(--radius-box);
}

.statValue {
	/* full width rather than shrink-to-fit so the image export cannot clip the value */
	width: 100%;
	font-size: var(--font-lg);
	text-align: center;
	font-weight: var(--weight-extra);
	font-variant-numeric: tabular-nums;
}

.statSeparator {
	color: var(--graphic-text-dim);
}

.statWin {
	color: var(--graphic-win);
}

.statLoss {
	color: var(--graphic-loss);
}

.score {
	font-size: var(--font-md);
	font-weight: var(--weight-extra);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.scoreWin {
	color: var(--graphic-win);
}

.scoreLoss {
	color: var(--graphic-loss);
}

.sectionDivider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-1-5);
	font-size: var(--font-xs);
	font-weight: var(--weight-extra);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--graphic-accent);

	&::before,
	&::after {
		content: "";
		flex: 1;
		height: 1px;
		background-color: var(--graphic-row-border);
	}
}

.footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--font-xs);
	font-weight: var(--weight-extra);
	color: var(--graphic-text-dim);
}

.footerAccent {
	color: var(--graphic-accent);
}

.qrCodeRow {
	display: flex;
	justify-content: center;
}

.qrCode {
	padding: var(--s-1-5);
	background-color: #fff;
	border-radius: var(--radius-field);

	& svg {
		display: block;
	}
}