:root {
	--lab-control-radius: 10px;
	--lab-panel-radius: 14px;
	--lab-control-inset: calc(var(--lab-control-radius) - 1px);
	--lab-pop-paper: #f8f6ef;
	--lab-pop-ink: #20243d;
	--lab-pop-blue: #2845ca;
	--lab-pop-blue-deep: #202d76;
	--lab-pop-blue-soft: #e5ebff;
	--lab-pop-link: var(--lab-pop-blue);
	--lab-pop-sun: #ffe471;
	--lab-pop-line: #dcd9cf;
}
/* Use these images on single-sided divider borders to leave the corners clear. */
:where(:root, .lab-format-sheet, .lab-format-picker, .arena-hall-nav, .arena-dock) {
	--lab-divider-color: var(--rule-line, var(--lab-line, var(--lab-pop-line)));
	--lab-divider-inset: var(--lab-panel-radius);
	--lab-divider-horizontal: linear-gradient(90deg,
		transparent var(--lab-divider-inset),
		var(--lab-divider-color) var(--lab-divider-inset) calc(100% - var(--lab-divider-inset)),
		transparent calc(100% - var(--lab-divider-inset)));
}
:root {
	--lab-divider-vertical: linear-gradient(180deg,
		transparent var(--lab-control-inset),
		var(--lab-divider-color) var(--lab-control-inset) calc(100% - var(--lab-control-inset)),
		transparent calc(100% - var(--lab-control-inset)));
}
.lab-nav-arrow,
.friendlab :is(.fa-arrow-left, .fa-arrow-right, .fa-chevron-left, .fa-chevron-right) {
	display: inline-grid;
	place-items: center;
	inline-size: 1em;
	block-size: 1em;
	flex: none;
	font-size: 16px;
	vertical-align: middle;
	pointer-events: none;

	&::before {
		content: "";
		inline-size: 10px;
		block-size: 8px;
		background-color: currentColor;
		clip-path: polygon(0 37.5%, 62% 37.5%, 41% 14%, 55% 0, 100% 50%,
			55% 100%, 41% 86%, 62% 62.5%, 0 62.5%);
	}
}
.lab-nav-arrow.is-chevron::before, .friendlab :is(.fa-chevron-left, .fa-chevron-right)::before {
	inline-size: 7px;
	block-size: 10px;
	clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}
.lab-nav-arrow.points-left, .friendlab :is(.fa-arrow-left, .fa-chevron-left) { transform: scaleX(-1); }
:root[data-lab-theme] {
	--lab-pop-paper: color-mix(in srgb, var(--lab-type-color) 9%, #f7f8fa);
	--lab-pop-ink: color-mix(in srgb, var(--lab-type-color) 32%, #14202e);
	--lab-pop-blue: var(--lab-type-color);
	--lab-pop-blue-deep: color-mix(in srgb, var(--lab-type-color) 75%, #131a26);
	--lab-pop-blue-soft: color-mix(in srgb, var(--lab-type-color) 13%, #fff);
	--lab-pop-line: color-mix(in srgb, var(--lab-type-color) 23%, #fcfcfd);
}
:is(html.friendlab, body.lab-account, body.lab-guide), :is(html.friendlab, body.lab-account, body.lab-guide) * {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}
html.friendlab .lab-team-transfer textarea {
	-webkit-touch-callout: default;
	-webkit-user-select: text;
	user-select: text;
}
.friendlab[data-lab-theme] .lab-arena {
	--lab-stage-control-hover: var(--lab-pop-blue-soft);
	--lab-stage-control-line: var(--lab-pop-line);
	--lab-stage-ink: var(--lab-pop-ink);
	--lab-stage-muted: color-mix(in srgb, var(--lab-type-color) 34%, #535d6b);
}
:is(.arena-wide, .lab-match) {
	--arena-ink: var(--lab-ink, var(--lab-pop-ink));
	--arena-muted: var(--lab-muted, #575b6c);
	--arena-accent: var(--lab-blue, var(--lab-pop-blue));
	--arena-rule: var(--lab-line, var(--lab-pop-line));
}
.lab-account :is(button, select, .action, .quiet, .arena-glass, .arena-badge),
.lab-pop-shell :is(.account, .play, .box-link, button),
.lab-standalone-audio { border-radius: var(--lab-control-radius); }
.lab-guide section {
	padding-inline: calc(var(--lab-panel-radius) - 1px);
	border-radius: var(--lab-panel-radius);
}
.lab-guide section a {
	display: inline;
	text-decoration: none;
}
.lab-guide nav a {
	padding-inline: var(--lab-control-radius);
	border-radius: var(--lab-control-radius);
	text-decoration: none;
}
.lab-guide nav a:is(:hover, :focus-visible) { background: var(--lab-pop-blue-soft); }
.lab-standalone-audio {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	padding: 0;
	margin-inline-start: auto;
	color: var(--lab-pop-ink);
	cursor: pointer;
}
.lab-standalone-audio[aria-pressed="true"] {
	background: var(--arena-selected, var(--lab-pop-blue-soft));
	color: var(--arena-accent, var(--lab-pop-link));
}
.arena-glass {
	position: relative;
	border: 1px solid var(--arena-rule, var(--lab-pop-line));
	background: var(--arena-surface, var(--lab-surface, #fff));
	color: var(--arena-ink, var(--lab-pop-ink));
	-webkit-tap-highlight-color: transparent;
}
:is(button, a, summary).arena-glass {
	transition: border-color .12s ease, background-color .12s ease;
}
:is(button, a, summary).arena-glass:active { border-color: var(--arena-accent, var(--lab-pop-blue)); }
:is(button, a, input, select, summary).arena-glass:focus-visible,
.arena-glass :is(button, a, input, select, summary):focus-visible {
	outline: 2px solid var(--arena-accent, var(--lab-pop-blue));
	outline-offset: -2px;
}
:is(.arena-segments a[aria-current="page"], .lab-match .lab-arena-start) {
	background: var(--lab-action, var(--lab-pop-blue));
	color: #fff;
}
.arena-segments a[aria-current="page"] { border-color: transparent; }
.lab-match .lab-arena-start { border-color: var(--lab-blue-deep, var(--lab-pop-blue-deep)); }
.friendlab.dark .lab-match .arena-glass:not([aria-pressed="true"], .lab-arena-start) {
	border-color: var(--lab-line);
	background: var(--lab-soft);
	color: var(--lab-ink);
}
.lab-arena-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.arena-segments {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
}
.arena-segments a {
	display: grid;
	place-items: center;
	min-height: 43px;
	padding: 4px 8px;
	border-radius: var(--lab-control-radius);
	color: var(--arena-ink);
	font: inherit;
	font-weight: 720;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.lab-arena-options { display: grid; gap: 9px; }
.lab-arena-group { min-inline-size: 0; margin: 0; border: 0; padding: 0; }
.lab-arena-group legend { padding: 0 0 6px; color: var(--arena-ink); font-size: 13px; font-weight: 690; }
.lab-arena-tiers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3px;
	padding: var(--lab-panel-control-gap);
	border-radius: var(--lab-panel-radius);
}
.lab-arena-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lab-arena-tiers label { position: relative; min-width: 0; }
.lab-arena-tiers input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lab-arena-tiers span {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 3px;
	min-height: 36px;
	border-radius: var(--lab-control-radius);
	color: var(--arena-ink);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
.lab-arena-tiers :checked + span {
	background: var(--lab-blue-soft, var(--lab-pop-blue-soft));
	color: var(--arena-accent);
}
.friendlab .lab-arena-tiers .lab-arena-boss input:checked + span {
	color: #774109 !important;
	background: var(--lab-pop-sun) !important;
}
.lab-arena-tiers :disabled + span { cursor: default; opacity: .65; }
.lab-arena-tiers :focus-visible + span { outline: 2px solid var(--arena-accent); outline-offset: 2px; }
.lab-arena-note { margin: 0; color: var(--arena-muted); font-size: 12px; }
.lab-arena-reward {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0 1px;
	border-top: 1px solid var(--arena-rule);
	border-image: var(--lab-divider-horizontal) 1;
	color: var(--arena-ink);
}
.lab-arena-reward img { width: 75px; height: 75px; flex: 0 0 75px; image-rendering: pixelated; }
.lab-arena-reward small { display: block; margin-top: 2px; color: var(--arena-muted); font-size: 12px; }
.lab-arena-stakes { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.lab-arena-stakes b { color: #12604b; font-weight: 700; }
.lab-arena-stakes span { color: #9a4150; }
.lab-lobby-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}
.lab-lobby-actions :is(button, a) { white-space: nowrap; }
.lab-lobby-actions a { display: inline-flex; align-items: center; min-height: 44px; color: var(--arena-accent); font-size: 12px; }
.lab-match .lab-arena-start { min-height: 48px; border-radius: var(--lab-control-radius); }
.lab-match .lab-arena-start:disabled {
	border-color: #e7eaf0;
	background: #eef1f6;
	box-shadow: none;
	color: #687287;
	opacity: 1;
}

body.arena-body {
	--arena-page: #f1f3fb;
	--arena-surface: #fff;
	--arena-field: color-mix(in srgb, var(--arena-page) 42%, var(--arena-surface));
	--arena-page-accent: var(--lab-pop-blue);
	--lab-pop-link: var(--arena-page-accent);
	--arena-page-ink: #17264a;
	--arena-page-muted: #53627f;
	--arena-page-rule: color-mix(in srgb, var(--lab-pop-blue) 16%, #fff);
	--arena-selected: color-mix(in srgb, var(--lab-pop-blue) 11%, var(--arena-surface));
	color-scheme: light;
	display: block;
	padding: 0;
	background: var(--arena-page);
	color: var(--arena-page-ink);
}
:root[data-lab-theme] body.arena-body {
	--arena-page: color-mix(in srgb, var(--lab-type-color) 9%, #f6f8fc);
}
:root.dark body.arena-body {
	--arena-page: color-mix(in srgb, var(--lab-pop-blue) 11%, #131a28);
	--arena-surface: color-mix(in srgb, var(--lab-pop-blue) 14%, #1c2434);
	--arena-page-ink: #f1f5fc;
	--arena-page-muted: #b0bfd8;
	--arena-page-rule: color-mix(in srgb, var(--arena-page-muted) 23%, var(--arena-surface));
	--arena-page-accent: var(--lab-type-light, #a4b5ff);
	--arena-selected: color-mix(in srgb, var(--arena-page-accent) 17%, var(--arena-surface));
	color-scheme: dark;
}

main.arena-wide {
	--arena-ink: var(--arena-page-ink);
	--arena-muted: var(--arena-page-muted);
	--arena-rule: var(--arena-page-rule);
	--arena-accent: var(--arena-page-accent);
	width: min(100%, 900px);
	margin: 0 auto;
	padding: 0 max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left));
	border: 0;
	background: transparent;
	box-shadow: none;
}
:where(.arena-wide a:any-link) { color: var(--arena-accent); }
.arena-wide > header, .arena-wide #signed-in, .arena-wide #back { display: none; }
:is(.arena-hall-nav, .arena-dock) { --lab-divider-color: var(--arena-rule); }
.arena-hall-nav {
	position: sticky;
	top: 0;
	z-index: 3;
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) 46px;
	align-items: center;
	gap: 10px;
	padding: calc(10px + env(safe-area-inset-top)) 1px 12px;
	border-bottom: 1px solid var(--arena-rule);
	border-image: var(--lab-divider-horizontal) 1;
	background: var(--arena-page);
}
.arena-back {
	display: grid;
	width: 46px;
	height: 46px;
	place-items: center;
	border-radius: var(--lab-control-radius);
	color: var(--arena-ink);
	background: var(--arena-surface);
}
.arena-hall-nav .lab-standalone-audio { width: 46px; height: 46px; }
.arena-hall.is-player .arena-segments { display: none; }
.arena-hall-nav h1 {
	margin: 0;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.025em;
	text-align: center;
}
.arena-segments {
	grid-column: 1 / -1;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--arena-rule);
	border-radius: var(--lab-panel-radius);
	background: var(--arena-surface);
}
.arena-segments a { min-height: 40px; border-color: transparent; background: transparent; font-size: 14px; }
.arena-segments a[aria-current="page"] { background: var(--arena-selected); color: var(--arena-ink); }
@media (prefers-reduced-motion: no-preference) {
	.arena-hall-nav, .arena-rank-top, .arena-player-heading { animation: arena-content-enter .18s ease-out both; }
	@keyframes arena-content-enter {
		from { opacity: .55; transform: translateY(3px); }
		to { opacity: 1; transform: translateY(0); }
	}
}
.arena-rank {
	padding: 11px 0 12px;
	margin: 0 1px;
	border-bottom: 1px solid var(--arena-rule);
	border-image: var(--lab-divider-horizontal) 1;
}
.arena-rank-top { display: flex; align-items: center; gap: 9px; }
.arena-rank-icon {
	display: grid;
	flex: 0 0 37px;
	height: 37px;
	place-items: center;
	border-radius: var(--lab-control-radius);
	background: #f6eee6;
	color: #885c3d;
}
.arena-rank[data-rank="1"] .arena-rank-icon { background: #eef2f7; color: #52687e; }
.arena-rank:is([data-rank="2"], [data-rank="8"], [data-rank="9"], [data-rank="10"], [data-rank="11"]) .arena-rank-icon { background: #fff3d5; color: #9b6214; }
.arena-rank:is([data-rank="3"], [data-rank="4"]) .arena-rank-icon { background: #e6f4fd; color: #17678d; }
.arena-rank:is([data-rank="5"], [data-rank="6"], [data-rank="7"]) .arena-rank-icon { background: #f3edff; color: #7541ac; }
.arena-rank-name { display: grid; gap: 2px; min-width: 0; }
.arena-rank-name strong { color: var(--arena-ink); font-size: 16px; line-height: 1.18; }
.arena-rank-name small, .arena-rank-goal, .arena-board-name small { color: var(--arena-muted); font-size: 12px; }
.arena-rank-points {
	margin-left: auto;
	color: var(--arena-ink);
	font-size: 20px;
	font-weight: 780;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.arena-rank-points small { color: var(--arena-muted); font-size: 12px; font-weight: 540; }
.arena-stars { color: #a5600a; font-size: 13px; letter-spacing: .065em; white-space: nowrap; }
.arena-rank-goal {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 3px 7px;
	margin: 7px 0 0 46px;
}
.arena-rank-goal b { color: var(--arena-ink); font-weight: 660; }
.arena-rank-gate { flex-basis: 100%; }
.arena-groups { padding-bottom: calc(74px + var(--lab-viewport-bottom, 0px)); scroll-margin-top: 116px; }
.arena-generation { padding: 12px 1px 10px; }
.arena-generation h3 {
	margin: 0 0 15px;
	color: var(--arena-ink);
	font-size: clamp(21px, 5vw, 28px);
	font-weight: 830;
	line-height: 1.16;
	letter-spacing: -.04em;
}
.arena-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 11px 6px;
}
.arena-badge {
	position: relative;
	display: grid;
	align-content: start;
	justify-items: center;
	gap: 2px;
	min-width: 0;
	padding: 8px 4px;
	border: 1px solid var(--arena-rule);
	border-radius: var(--lab-control-radius);
	background: var(--arena-surface);
	transition: background-color .14s ease, border-color .14s ease;
	color: var(--arena-ink);
	text-align: center;
	text-decoration: none;
}
.arena-badge:is(:focus-visible, :active) { background: var(--arena-selected); border-color: var(--arena-accent); }
@media (hover: hover) {
	.arena-badge:hover { background: var(--arena-selected); }
}
.arena-badge-date { color: var(--arena-muted); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.arena-badge-art {
	display: grid;
	position: relative;
	width: min(100%, 76px);
	height: 77px;
	place-items: center;
}
.arena-badge img {
	width: 75px;
	height: 75px;
	max-width: 100%;
	object-fit: contain;
	image-rendering: pixelated;
}
.arena-badge:not(.is-earned) img { filter: grayscale(1); opacity: .68; }
.arena-collection { padding-block: 14px; }
.arena-collection + .arena-collection {
	border-top: 1px solid var(--arena-rule);
	border-image: var(--lab-divider-horizontal) 1;
}
.arena-collection h2 { margin: 0 0 10px; font-size: 20px; }
.arena-collection .arena-generation h3 { margin: 0 0 9px; font-size: 15px; color: var(--arena-muted); }
.arena-badge.is-earned .arena-badge-art { border-radius: var(--lab-control-radius); background: var(--arena-selected); }
.arena-badge-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12px;
	line-height: 1.26;
	font-weight: 690;
}
.arena-badge-state {
	position: absolute;
	top: 0;
	right: -1px;
	display: grid;
	width: 17px;
	height: 17px;
	place-items: center;
	border: 1px solid #fff;
	border-radius: 5px;
	background: #f3f5f9;
	color: #647187;
}
.is-earned .arena-badge-state { background: var(--arena-selected); color: var(--arena-ink); border-color: var(--arena-surface); }
.arena-dock {
	--lab-dock-safe-bottom: env(safe-area-inset-bottom);
	position: fixed;
	z-index: 4;
	right: 0;
	bottom: var(--lab-viewport-bottom, 0px);
	left: 0;
	display: flex;
	align-items: center;
	gap: 9px;
	width: min(100%, 900px);
	margin: 0 auto;
	padding: 10px max(16px, env(safe-area-inset-right)) calc(11px + var(--lab-dock-safe-bottom)) max(16px, env(safe-area-inset-left));
	border-top: 1px solid var(--arena-rule);
	border-image: var(--lab-divider-horizontal) 1;
	background: var(--arena-page);
	pointer-events: none;
}
[data-lab-keyboard] .arena-dock { --lab-dock-safe-bottom: 0px; }
.arena-search {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 8px;
	min-width: 0;
	min-height: 48px;
	margin: 0;
	padding: 4px var(--lab-control-inset);
	border-radius: var(--lab-control-radius);
	color: var(--arena-muted);
	pointer-events: auto;
}
.arena-search:focus-within {
	border-color: var(--arena-accent);
	outline: 2px solid var(--arena-accent);
	outline-offset: -2px;
}
.arena-search input[type="search"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 1;
	min-width: 0;
	width: auto;
	min-height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--arena-ink);
	font-size: 16px;
	font-weight: 540;
}
.arena-search input::placeholder { color: var(--arena-muted); opacity: 1; }
.arena-search input:focus-visible { outline: none; }
.arena-filter { flex: 0 0 48px; pointer-events: auto; }
.arena-filter summary {
	display: grid;
	width: 48px;
	height: 48px;
	list-style: none;
	place-items: center;
	border-radius: var(--lab-control-radius);
	color: var(--arena-ink);
	cursor: pointer;
}
.arena-filter summary::-webkit-details-marker { display: none; }
.arena-filter[open] summary { color: var(--arena-accent); background: var(--arena-selected); }
.arena-filter summary.has-filter::after {
	content: "";
	position: absolute;
	top: 7px;
	right: 7px;
	width: 8px;
	height: 8px;
	border: 1px solid var(--arena-surface);
	border-radius: 2px;
	background: var(--arena-accent);
}
.arena-filter-popover {
	position: absolute;
	right: 16px;
	bottom: calc(66px + var(--lab-dock-safe-bottom));
	display: grid;
	gap: 8px;
	width: min(230px, calc(100% - 32px));
	max-height: max(0px, calc(var(--lab-viewport-height, 100dvh) - 76px));
	padding: 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--arena-rule);
	border-radius: var(--lab-control-radius);
	background: var(--arena-surface);
	color: var(--arena-ink);
}
.arena-filter-popover select {
	min-width: 0;
	min-height: 42px;
	border: 1px solid var(--arena-rule);
	border-radius: var(--lab-control-radius);
	background: var(--arena-field);
	color: var(--arena-ink);
	font: inherit;
	padding: 5px 8px;
}
.arena-filter-popover select:focus-visible { outline: 2px solid var(--arena-accent); outline-offset: -2px; }
.arena-empty { margin: 16px 2px; color: var(--arena-muted); font-size: 14px; }
.arena-retry { padding: 6px 14px; border-radius: var(--lab-control-radius); color: var(--arena-accent); }
.arena-board {
	list-style: none;
	margin: 11px 0 0;
	padding: 0;
	border: 1px solid #e9edf3;
	border-radius: 20px;
	overflow: hidden;
	background: var(--arena-surface);
}
.arena-board-link {
	display: grid;
	grid-template-columns: 26px 34px minmax(0, 1fr) max-content;
	align-items: center;
	gap: 9px;
	min-height: 61px;
	padding-inline: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--arena-ink);
	text-decoration: none;
}
.arena-board li:first-child > .arena-board-link { border-start-start-radius: 19px; border-start-end-radius: 19px; }
.arena-board li:last-child > .arena-board-link { border-end-start-radius: 19px; border-end-end-radius: 19px; }
.arena-board-link:active { background: var(--arena-selected); }
@media (hover: hover) { .arena-board-link:hover { background: var(--arena-selected); } }
.arena-board-link:focus-visible { outline: 2px solid var(--arena-accent); outline-offset: -2px; }
.arena-board li + li {
	border-top: 1px solid var(--arena-rule);
	border-image: var(--lab-divider-horizontal) 1;
}
.arena-board-place { color: #617083; font-size: 13px; text-align: center; }
.arena-board-avatar {
	position: relative;
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	border-radius: var(--lab-control-radius);
	background: var(--lab-pop-blue-soft, #eaf4ff);
	color: var(--lab-pop-link, #195cb1);
	font-weight: 780;
}
.arena-board-avatar img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	image-rendering: pixelated;
	opacity: 0;
}
.arena-board-avatar img[data-ready] { opacity: 1; }
.arena-player-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.arena-player-heading .arena-board-avatar { flex: none; width: 44px; height: 44px; }
.arena-player-heading h2 { margin: 0; }
.arena-board-name, .arena-board-score { display: grid; gap: 2px; line-height: 1.2; }
.arena-board-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-board-score { text-align: right; }
.arena-board-score small { color: var(--arena-muted); font-size: 12px; }
.arena-board .arena-you :is(.arena-board-name strong, .arena-board-place) { color: var(--arena-accent); }
.arena-player-stats {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 5px;
	margin: 0 0 12px;
}
.arena-player-stats > div { padding: 7px 2px; text-align: center; background: var(--arena-surface); border: 1px solid var(--arena-rule); border-radius: 8px; }
.arena-player-stats dt { color: var(--arena-muted); font-size: 11px; }
.arena-player-stats dd { margin: 3px 0 0; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.arena-records { margin-top: 10px; padding: 0 10px; border: 1px solid var(--arena-rule); border-radius: var(--lab-control-radius); background: var(--arena-surface); }
.arena-records summary { min-height: 44px; line-height: 44px; font-size: 14px; font-weight: 720; cursor: pointer; }
.arena-record-list { padding: 0; margin: 0; list-style: none; }
.arena-record-list li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid var(--arena-rule);
	border-image: var(--lab-divider-horizontal) 1;
	font-size: 13px;
}
.arena-record-list span { flex: none; color: var(--arena-muted); }
.arena-public-teams { display: grid; gap: 7px; }
.arena-team-card { padding: 10px; border: 1px solid var(--arena-rule); border-radius: var(--lab-control-radius); background: var(--arena-surface); }
.arena-team-card h3 { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.arena-team-card small { color: var(--arena-muted); }
.arena-team-roster { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; padding: 0; list-style: none; }
.arena-team-roster li { padding: 2px 6px; border-radius: 5px; background: #eef1fa; font-size: 12px; overflow-wrap: anywhere; min-width: 0; }
.arena-team-sharing { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.arena-team-sharing :is(select, button) { min-width: 0; min-height: 44px; padding: 4px 8px; color: var(--arena-ink); font: inherit; font-size: 13px; }
.arena-team-sharing button:disabled { opacity: .55; cursor: default; }
@media (max-width: 500px) {
	.arena-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 350px) {
	.arena-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
	:is(button, a, summary).arena-glass { transition: none; }
}