/** biome-ignore-all lint/style/noDescendingSpecificity: Biome v2 migration */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	width: 100%;
	background-color: var(--bg);
	color: var(--text);
	font-family: lexend, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	line-height: 1.5;
	overflow-x: hidden;
	-webkit-tap-highlight-color: transparent;
}

*:focus:not(:focus-visible):not([data-focus-visible]) {
	outline: none !important;
}

a {
	color: var(--theme);
	font-weight: var(--semi-bold);
	text-decoration: none;
}

/* :not([name="text"]) workaround not to select textarea on map planner  */
textarea:not(.plain, [name="text"]) {
	width: 18rem;
	max-width: 100%;
	height: 8rem;
	padding: var(--s-2-5) var(--s-3);
	border: 2px solid var(--border);
	border-radius: var(--rounded-sm);
	accent-color: var(--theme-secondary);
	background-color: var(--bg-input);
	color: var(--text);
	outline: none;
	overflow-wrap: normal;
	overflow-x: auto;
}

progress {
	accent-color: var(--theme);
}

textarea:not(.plain, [name="text"]):focus-within {
	border-color: transparent;
	outline: 2px solid var(--theme);
}

input:not(.plain, [type="radio"]) {
	width: var(--input-width, 12rem);
}

input:not(.plain) {
	height: 1rem;
	padding: var(--s-4) var(--s-3);
	border: 2px solid var(--border);
	border-radius: var(--rounded-sm);
	accent-color: var(--theme-secondary);
	background-color: var(--bg-input);
	color: var(--text);
	outline: none;
}

input:user-invalid {
	border-color: transparent;
	outline: 2px solid var(--theme-error);
}

.input__read-only {
	cursor: not-allowed;
	opacity: 0.5;
}

.input__extra-small {
	min-width: var(--input-width-extra-small);
	max-width: var(--input-width-extra-small);
}

.input__small {
	min-width: var(--input-width-small);
	max-width: var(--input-width-small);
}

.input__medium {
	min-width: var(--input-width-medium);
	max-width: var(--input-width-medium);
}

input:not(.plain, .combobox-input):focus-within {
	border-color: transparent;
	outline: 2px solid var(--theme);
}

input:not(.plain)::placeholder {
	color: var(--text-lighter);
	font-size: var(--fonts-xxs);
	font-weight: var(--semi-bold);
	letter-spacing: 0.5px;
}

input:not(.plain).error {
	border-color: transparent;
	outline: 2px solid var(--theme-error);
}

input[type="checkbox"] {
	width: 16px;
	height: 16px;
}

[list]::-webkit-calendar-picker-indicator {
	display: none !important;
}

input[type="time"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: 0.55;
	cursor: pointer;
}

label {
	display: block;
	font-size: var(--fonts-xs);
	font-weight: var(--bold);
	margin-block-end: var(--label-margin);
}

details summary {
	cursor: pointer;
	user-select: none;
}

.text-only-button {
	cursor: pointer;
	border: 0;
	background-color: inherit;
	color: inherit;
	margin: 0;
	padding: 0;
}

.dotted {
	text-decoration-style: dotted;
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
}

.summary {
	border-radius: var(--rounded);
	background-color: var(--bg-darker-transparent);
	font-size: var(--fonts-xs);
	font-weight: var(--semi-bold);
	padding-block: var(--s-1);
	padding-inline: var(--s-2);
}

fieldset {
	border: none;
	border-radius: var(--rounded);
	background-color: var(--bg-lighter);
	font-size: var(--fonts-sm);
	padding-block-end: var(--s-3);
	padding-inline: var(--s-3);
}

legend {
	border-radius: var(--rounded-sm);
	background-color: transparent;
	font-size: var(--fonts-xs);
	font-weight: var(--bold);
}

article {
	white-space: pre-wrap;
}

select {
	all: unset;
	width: 100%;
	box-sizing: border-box;
	border: 2px solid var(--border);
	border-radius: var(--rounded-sm);
	background: var(--select-background, var(--bg-input));
	background-image: url('data:image/svg+xml;utf8,<svg width="17px" color="rgb(255 255 255 / 55%)" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7" /></svg>');
	background-position: center right var(--s-3);
	background-repeat: no-repeat;
	cursor: pointer;
	font-weight: 500;
	padding-block: 3.5px;
	padding-inline: var(--s-3) var(--s-9);
}

select:disabled {
	cursor: not-allowed;
	opacity: 0.5;
	transform: initial;
}

.light select {
	background-image: url('data:image/svg+xml;utf8,<svg width="17px" color="rgb(0 0 0 / 55%)" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>');
}

.light input[type="time"]::-webkit-calendar-picker-indicator {
	filter: invert(0);
	opacity: 0.55;
}

select::selection {
	overflow: hidden;
	font-weight: bold;
}

select:focus {
	outline: 2px solid var(--theme);
}

.my-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--fonts-xs);
	text-align: left;
	border-color: var(--border);
}

.my-table__container {
	position: relative;
	width: 100%;
	overflow: auto;
}

.my-table > thead {
	font-size: var(--fonts-xxs);
}

.my-table tbody tr:hover {
	background-color: var(--bg-lighter);
}

.my-table > thead > tr > th {
	padding: var(--s-2);
}

.my-table > tbody > tr > td {
	padding: var(--s-2) var(--s-2-5);
}

.my-table tr:first-child td {
	border-top: 1px solid var(--border);
}

.my-table td {
	border-bottom: 1px solid var(--border);
}

td > input[type="checkbox"] {
	vertical-align: middle;
}

hr {
	border-color: var(--theme-transparent);
}

abbr:not([title]) {
	text-decoration: none;
}

abbr[title] {
	cursor: help;
}

.button-text-paragraph {
	display: flex;
	gap: var(--s-1);
	align-items: flex-end;
}

.button-text-paragraph > button {
	font-size: var(--fonts-sm);
	font-weight: var(--semi-bold);
	margin-block-end: 0.125rem;
}

.input-container {
	display: flex;
	border: 2px solid var(--border);
	border-radius: var(--rounded-sm);
	accent-color: var(--theme-secondary);
	background-color: var(--bg-input);
	color: var(--text);
	font-size: var(--fonts-sm);
	outline: none;
}

.input-container:focus-within {
	border-color: transparent;
	outline: 2px solid var(--theme);
}

.input-container > input {
	width: 100%;
	border: none;
	margin: auto 0;
}

.input-container > input:focus-within {
	outline: none;
}

.input-addon {
	display: grid;
	border-radius: var(--rounded-xs) 0 0 var(--rounded-xs);
	background-color: var(--bg-lighter);
	color: var(--text-lighter);
	font-size: var(--fonts-xs);
	font-weight: var(--semi-bold);
	padding-inline: var(--s-2);
	place-items: center;
	white-space: nowrap;
}

.sub-nav__container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-4);
	margin-block-end: var(--s-8);
}

.sub-nav__container__secondary {
	margin-block-end: var(--s-2);
}

.sub-nav__link__container {
	display: flex;
	max-width: 110px;
	flex: 1;
	flex-direction: column;
	align-items: center;
	color: var(--text);
	gap: var(--s-1-5);
}

.sub-nav__link__container.active {
	color: var(--theme-secondary);
}

.sub-nav__link {
	width: 100%;
	padding: var(--s-1) var(--s-4);
	border-radius: var(--rounded);
	background-color: var(--bg-lightest);
	cursor: pointer;
	font-size: var(--fonts-xs);
	text-align: center;
	white-space: nowrap;
}

.sub-nav__link__secondary {
	font-size: var(--fonts-xxs);
	padding: var(--s-0-5) var(--s-2);
	background-color: var(--bg-lighter-solid);
}

.sub-nav__container.compact .sub-nav__link {
	padding: var(--s-1) var(--s-2);
}

.sub-nav__border-guy {
	width: 78%;
	height: 3px;
	border-radius: var(--rounded);
	background-color: var(--bg-lightest);
	visibility: hidden;
}

.sub-nav__border-guy__secondary {
	height: 2.5px;
	background-color: var(--bg-lighter-solid);
}

.sub-nav__link__container.active > .sub-nav__border-guy {
	visibility: initial;
}

.react-aria-Button.info-popover__trigger {
	border: 2px solid var(--bg-lightest);
	border-radius: 100%;
	background-color: transparent;
	color: var(--text);
	font-size: var(--fonts-md);
	padding: var(--s-0-5);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.react-aria-Button.info-popover__trigger__tiny {
	width: 20px;
	height: 20px;
	font-size: var(--fonts-xs);
}

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

.articles-list__title {
	color: var(--theme);
	font-size: var(--fonts-md);
}

.article > p {
	padding-block: var(--s-2-5);
}

.article img {
	height: auto;
}

.calendar__event__tags {
	display: flex;
	max-width: var(--tags-max-width, 18rem);
	flex-wrap: wrap;
	padding: 0;
	font-size: var(--fonts-xxs);
	font-weight: var(--semi-bold);
	gap: var(--s-1);
	list-style: none;
}

.calendar__event__tags.small {
	font-size: var(--fonts-xxxs);
}

.calendar__event__tags.centered {
	justify-content: center;
}

.calendar__event__tags.small > li {
	padding: 0 var(--s-1);
}

.calendar__event__tags > li {
	display: flex;
	align-items: center;
	border-radius: var(--rounded);
	padding-inline: var(--s-1-5);
	min-height: 20px;
}

.calendar__event__tag {
	color: var(--black-text);
}

.calendar__event__tag-delete-button {
	margin-left: auto;
}

.calendar__event__tag-badges {
	display: flex;
	margin-inline-start: var(--s-1);
}

.calendar__event__tag-delete-button > svg {
	width: 0.85rem !important;
	color: var(--black-text);
	margin-inline: var(--s-1) 0 !important;
}

.alert {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	border-radius: var(--rounded);
	background-color: var(--theme-info-transparent);
	color: var(--text);
	font-size: var(--fonts-sm);
	font-weight: var(--semi-bold);
	gap: var(--s-2);
	margin-inline: auto;
	padding-block: var(--s-1-5);
	padding-inline: var(--s-3) var(--s-4);
	text-align: center;
}

.alert.tiny {
	font-size: var(--fonts-xs);
}

.alert.warning {
	background-color: var(--theme-warning-transparent);
}

.alert.error {
	background-color: var(--theme-error-transparent);
}

.alert.success {
	background-color: var(--theme-success-transparent);
}

.avatar {
	border-radius: 50%;
	background-color: var(--bg-lightest);
}

/* Hack to deal with Safari bug when the image is loading. See: https://stackoverflow.com/a/73466877 */
@media not all and (min-resolution: 0.001dpcm) {
	img[loading="lazy"] {
		clip-path: inset(0.5px);
	}
}

.alert > svg {
	height: 1.75rem;
	fill: var(--theme-info);
}

.alert.tiny > svg {
	height: 1.25rem;
}

.alert.warning > svg {
	fill: var(--theme-warning);
}

.alert.error > svg {
	fill: var(--theme-error);
}

.alert.success > svg {
	fill: var(--theme-success);
}

.form-errors {
	font-size: var(--fonts-sm);
}

.form-errors > h4 {
	color: var(--theme-error);
}

.section > div {
	padding: var(--s-2);
	border-radius: var(--rounded);
	background-color: var(--bg-darker);
}

.section > h2 {
	color: var(--text-lighter);
	font-size: var(--fonts-md);
}

.stack {
	display: flex;
	flex-direction: column;
}

.stack.xxxs {
	gap: var(--s-0-5);
}

.stack.xxs {
	gap: var(--s-1);
}

.stack.xs {
	gap: var(--s-1-5);
}

.stack.sm {
	gap: var(--s-2);
}

.stack.sm-column {
	column-gap: var(--s-2);
}

.stack.sm-plus {
	gap: var(--s-3);
}

.stack.md {
	gap: var(--s-4);
}

.stack.md-plus {
	gap: var(--s-6);
}

.stack.lg {
	gap: var(--s-8);
}

.stack.xs-row {
	row-gap: var(--s-1-5);
}

.stack.lg-row {
	row-gap: var(--s-8);
}

.stack.xl {
	gap: var(--s-12);
}

.stack.xxl {
	gap: var(--s-16);
}

.stack.horizontal {
	flex-direction: row;
}

.flex-same-size {
	flex: 1 1 0px;
}

.lock-scroll {
	overflow: hidden;
	height: unset;
}

.small-icon {
	width: 1.2rem;
	height: 1.2rem;
}

/* https://stackoverflow.com/questions/50917016/make-a-hidden-field-required/50917245#comment117565184_50917245 */
.hidden-input-with-validation {
	position: absolute;
	width: 0;
	height: 0;
	border: none;
	opacity: 0;
	pointer-events: none;
}

.label__container {
	display: flex;
	align-items: flex-end;
	gap: var(--s-2);
	margin-block-end: var(--label-margin);
}

.label__container > label {
	margin: 0;
}

.label__value {
	color: var(--text-lighter);
	font-size: var(--fonts-xxs);
	margin-block-start: -5px;
}

.label__value.warning {
	color: var(--theme-warning);
}

.label__value.error {
	color: var(--theme-error);
}

.error-message {
	display: block;
	color: var(--theme-error);
	font-size: var(--fonts-xs);
	margin-block-start: var(--label-margin);
}

.info-message {
	display: block;
	color: var(--text-lighter);
	font-size: var(--fonts-xs);
	margin-block-start: var(--label-margin);
}

.small-icon {
	width: 1.2rem;
	height: 1.2rem;
}

.small-text {
	font-size: var(--fonts-xxs) !important;
}

.colors__summary {
	padding: var(--s-2) var(--s-3);
	border: 2px solid var(--border);
	border-radius: var(--rounded-sm);
	background-color: var(--bg-input);
	font-weight: var(--bold);
	font-size: var(--fonts-xs);

	& div {
		display: inline-flex;
	}

	& svg {
		width: 24px;
		color: var(--theme);
		position: absolute;
		right: 20px;
		top: 14px;
	}

	& + div {
		margin-block-start: var(--s-4);
	}
}

.colors__container {
	width: 100%;
	font-size: var(--fonts-sm);
	font-weight: var(--bold);
	padding: var(--s-3);
	border: 2px solid var(--border);
	border-radius: var(--rounded-sm);
	background-color: var(--bg-input);
	margin-bottom: var(--s-3);
	overflow-x: auto;
}

.colors__grid {
	display: grid;
	justify-content: space-between;
	grid-template-columns: repeat(3, max-content);
	gap: var(--s-3);
}

.colors__table {
	width: 100%;
	border-spacing: 0;
	text-indent: 0;
	text-align: left;
	font-size: var(--fonts-xs);

	& svg {
		width: 1rem;
		height: 1rem;
		display: inline;
		vertical-align: sub;
		margin-right: 2px;
	}

	& td {
		padding-block: var(--s-2);
	}

	& tr:last-child td {
		border-bottom: none;
		padding-bottom: 0;
	}
}

.colors__contrast {
	text-wrap-mode: nowrap;

	&.fail {
		color: var(--theme-error);
	}

	&.success {
		color: var(--theme-success);
	}
}

.playwire__img {
	display: block;
	width: 200px;
	margin-right: auto;
	margin-left: auto;
}

.playwire__text {
	font-size: var(--fonts-sm);
	text-align: center;
}

.top-leaderboard {
	min-height: 130px;
	margin: 10px 0;
}

@media screen and (min-width: 601px) {
	.top-leaderboard {
		min-height: 120px;
	}
}

.youtube__container {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}

.youtube__container--api {
	width: fit-content;
}

.youtube__iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.divider {
	display: flex;
	width: 100%;
	align-items: center;
	color: var(--theme);
	font-size: var(--fonts-lg);
	text-align: center;
}

.divider::before,
.divider::after {
	flex: 1;
	border-bottom: 2px solid var(--theme-transparent);
	content: "";
}

.divider:not(:empty)::before {
	margin-right: 0.25em;
}

.divider:not(:empty)::after {
	margin-left: 0.25em;
}

.menu-container {
	position: relative;
}

.menu__items-container {
	position: absolute;
	top: 32px;
	border-radius: var(--rounded);
	background-color: var(--bg-darker);
	border: var(--border-style);
	z-index: 10;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	align-items: flex-start;
}

.menu__items-container__opens-left {
	right: 0;
}

.menu-container__scrolling {
	max-height: 300px;
	overflow-y: auto;
	scrollbar-color: rgb(83 65 91) transparent;
	scrollbar-width: thin;
	scrollbar-gutter: stable;
}

.menu__item {
	display: flex;
	font-size: var(--fonts-xs);
	color: var(--text);
	white-space: nowrap;
	gap: var(--s-2);
	border-radius: var(--rounded-xs);
	padding: var(--s-1-5) var(--s-2-5);
	background-color: var(--bg-darker);
	width: 100%;
	border: 0;
	justify-content: flex-start;
}

.menu__item:first-child {
	border-radius: 14.5px 14.5px var(--rounded-xs) var(--rounded-xs);
}

.menu__item:last-child {
	border-radius: var(--rounded-xs) var(--rounded-xs) 14.5px 14.5px;
}

.menu__item__active {
	background-color: var(--theme-very-transparent);
}

.menu__item__disabled {
	color: var(--text-lighter);
	cursor: not-allowed;
}

.menu__item__selected {
	background-color: var(--theme-transparent);
	font-weight: var(--extra-bold);
}

.menu__item__icon {
	width: 18px;
}

.menu__item__img {
	min-width: 24px;
	min-height: 24px;
}

.discord-icon {
	width: 1rem;
	display: inline;
	fill: #7289da;
}

.youtube-icon {
	width: 1rem;
	display: inline;
	fill: #f00;
}

.art__dialog__image-container {
	width: 100vw;
	height: 90vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	padding: 0;
	overflow: visible;
	flex-direction: column;
}

.art__thumbnail {
	cursor: pointer;
	transition: all 0.2s ease;
}

.art__thumbnail:hover {
	scale: 1.025;
}

.art__dialog__image-container:focus-visible {
	outline: none;
}

.art__dialog__tag {
	background-color: #fff;
	border-radius: var(--rounded);
	color: #000;
	font-size: var(--fonts-xxs);
	padding-inline: var(--s-1);
	margin-block: var(--s-1) var(--s-0-5);
}

.art__dialog__tag__user {
	background-color: var(--theme);
}

.art__dialog__description {
	font-size: var(--fonts-sm);
	text-align: center;
	color: #fff;
}

.art__dialog__img {
	max-width: 100%;
	max-height: 75vh;
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}

.art__dialog__image-container img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.art__comms-header {
	font-weight: var(--bold);
	color: var(--theme-secondary);
	font-size: var(--fonts-sm);
}

.art__delete-tag-button {
	margin-block-start: -5px;
	margin-inline-start: 1px;
}

.art__creation-mode-switcher-container {
	height: 20px;
}

.art__tags-container {
	display: flex;
	gap: var(--s-0-5) var(--s-2);
	justify-content: center;
	flex-wrap: wrap;
	margin-block-start: var(--s-0-5);
}

html[dir="rtl"] .fix-rtl {
	transform: rotate(180deg);
}

.pagination__container {
	display: grid;
	grid-template-columns: auto auto auto;
	gap: var(--s-2);
	align-items: center;
	justify-items: center;
	justify-content: center;
}

.pagination__dots {
	display: none;
	align-items: center;
	justify-content: center;
	gap: var(--s-1);
	flex-wrap: wrap;
}

.pagination__dot {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background-color: var(--theme-transparent);
	transition: all 0.2s ease;
}

.pagination__dot__active {
	background-color: var(--theme);
}

.pagination__page-count {
	font-size: var(--fonts-sm);
	font-weight: var(--bold);
	color: var(--theme);
}

@media screen and (min-width: 640px) {
	.pagination__dots {
		display: flex;
	}

	.pagination__page-count {
		display: none;
	}
}

.tier__container {
	display: grid;
}

.tier__img {
	grid-column: 1;
	grid-row: 1;
}

.chart__container {
	height: var(--chart-height, 175px);
	width: var(--chart-width);
	background-color: var(--chart-bg, var(--bg-lighter));
	border-radius: var(--rounded);
}

.chart__tooltip {
	border: 1.75px solid var(--border);
	border-radius: var(--rounded);
	background-color: var(--bg-darker);
	padding: var(--s-1) var(--s-2);
	font-weight: var(--semi-bold);
	font-size: var(--fonts-sm);
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.chart__tooltip__value {
	margin-inline-start: auto;
	min-width: 40px;
}

.chart__dot {
	background-color: var(--dot-color);
	border-radius: 100%;
	width: 12px;
	height: 12px;
}

.chart__dot__focused {
	outline: 3px solid var(--dot-color-outline);
}

.chat__container {
	display: flex;
	flex-direction: column;
}

.chat__messages {
	padding: var(--s-2-5) 0 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	height: 310px;
	overflow-y: auto;
}

.chat__message {
	list-style: none;
	display: flex;
	gap: var(--s-2-5);
}

.chat__message__info {
	display: flex;
	flex-direction: row;
	gap: 0 var(--s-1-5);
	align-items: center;
	flex-wrap: wrap;
}

.chat__avatar-wrapper {
	position: relative;
	flex-shrink: 0;
}

.chat__avatar-wrapper--staff .avatar {
	border: 2px solid var(--theme-secondary);
	border-radius: 50%;
}

.chat__avatar-badge {
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--theme-secondary);
	color: var(--black-text);
	font-size: var(--fonts-xxxxs);
	font-weight: var(--bold);
	padding: 1px 4px;
	border-radius: var(--rounded-full);
	white-space: nowrap;
	line-height: 1.2;
}

.chat__pronouns-tag {
	background-color: var(--bg-lightest);
	color: var(--text-lighter);
	font-size: var(--fonts-xxxs);
	font-weight: var(--semi-bold);
	padding: 1px 5px;
	border-radius: var(--rounded-full);
	white-space: nowrap;
}

.chat__message__user {
	font-weight: var(--semi-bold);
	font-size: var(--fonts-sm);
	color: var(--chat-user-color);
	max-width: 110px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chat__message__time {
	font-size: var(--fonts-xxxs);
	color: var(--text-lighter);
}

.chat__input-container {
	margin-top: auto;
	position: relative;

	--input-width: 100%;
}

.chat__message__contents {
	font-size: var(--fonts-sm);
	word-break: break-word;
}

.chat__message__contents.pending {
	opacity: 0.7;
}

.chat__room-button {
	background-color: transparent;
	color: var(--text-lighter);
	border-radius: var(--rounded) var(--rounded) 0 0;
	padding: var(--s-1) var(--s-1);
	border-color: var(--bg-light-variation);
	font-size: var(--fonts-xs);
	padding-block: var(--s-1);
	padding-inline: var(--s-2);
	display: flex;
	width: auto;
	align-items: center;
	justify-content: center;
	font-weight: var(--bold);
	flex: 1 1 0px;
}

.chat__room-button.current {
	background-color: var(--bg-lighter);
	color: var(--text);
}

.chat__room-button__unseen {
	color: var(--theme-secondary);
	text-shadow: var(--fonts-xxxs);
	margin-inline-start: var(--s-1);
	width: 25px;
	text-align: left;
}

.chat__bottom-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-block-start: var(--s-2);
	height: 20px;
}

.chat__unseen-messages {
	position: absolute;
	font-size: var(--fonts-xxs);
	font-weight: var(--bold);
	border-radius: var(--rounded-sm);
	background-color: var(--bg-lightest-solid);
	border: none;
	color: var(--text);
	bottom: 60px;
	right: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 25px;
	width: max-content;
}

.chat__unseen-messages:active {
	transform: translate(-50%, -50%);
}

.winner__container {
	height: 125px;
	width: 125px;
	border-radius: 100%;
	background-color: var(--bg-lighter);
	overflow: hidden;
	position: relative;
}

.winner__container.small {
	height: 41.6667px;
	width: 41.6667px;
}

.winner__img-container {
	position: absolute;
	top: var(--winner-top, 5px);
	left: var(--winner-left, 25px);
}

.winner__img {
	overflow: visible;
	max-width: initial;
}

.map-pool-picker {
	--map-width: 90px;
	--map-height: 50px;
}

.map-pool-picker__slot {
	font-size: var(--fonts-xs);
	display: grid;
	place-items: center;
	color: var(--text-lighter);
	border-radius: var(--rounded-sm);
	font-weight: var(--bold);
	width: 24px;
	height: 24px;
	border: 2px dotted var(--bg-lightest);
}

.map-pool-picker__slot__icon {
	color: var(--theme-success);
	width: 16px;
}

.map-pool-picker__slot__picked {
	border-style: solid;
}

.map-pool-picker__map-img {
	border-radius: var(--rounded-sm);
}

.map-pool-picker__map-button {
	background-image: var(--map-image-url);
	background-size: contain;
	height: var(--map-height);
	width: var(--map-width);
	border: none;
	background-color: transparent;
	transition:
		filter,
		opacity 0.2s;
	border-radius: var(--rounded);
}

@keyframes wiggle {
	0% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(5deg);
	}

	75% {
		transform: rotate(-5deg);
	}

	100% {
		transform: rotate(0deg);
	}
}

.map-pool-picker__map-button__wiggle {
	animation: wiggle 0.25s infinite;
	animation-iteration-count: 1;
}

.map-pool-picker__map-button:active {
	transform: none;
}

.map-pool-picker__map-button__greyed-out {
	filter: grayscale(100%) !important;
	opacity: 0.4 !important;
}

.map-pool-picker__map-button__icon {
	position: absolute;
	top: 2px;
	fill: var(--theme-success);
	width: 48px;
	cursor: pointer;
}

.map-pool-picker__map-button__icon__error {
	fill: var(--theme-error);
}

.map-pool-picker__map-button__text {
	position: absolute;
	top: 14px;
	text-transform: uppercase;
	font-weight: var(--bold);
	cursor: not-allowed;
}

.map-pool-picker__map-button__label {
	font-size: var(--fonts-xxxxs);
	color: var(--text-lighter);
	font-weight: var(--semi-bold);
}

.map-pool-picker__map-button__number {
	position: absolute;
	background-color: var(--theme);
	border-radius: 100%;
	width: 18px;
	height: 18px;
	display: grid;
	place-items: center;
	color: var(--button-text);
	font-size: var(--fonts-xxsm);
	font-weight: var(--semi-bold);
	top: -5px;
	left: 0;
}

.map-pool-picker__map-button__from {
	position: absolute;
	bottom: -15px;
	font-size: var(--fonts-xxs);
	font-weight: var(--bold);
}

.map-pool-picker__divider::before,
.map-pool-picker__divider::after {
	border-bottom: 2px dotted var(--bg-lightest);
}

.map-pool-picker__divider {
	font-size: var(--fonts-xs);
	font-weight: var(--semi-bold);
	text-transform: uppercase;
	display: flex;
	gap: var(--s-2);
}

#nprogress .bar {
	background: var(--theme) !important;
}

#nprogress .spinner {
	display: none !important;
}

#nprogress .peg {
	display: none !important;
}

.format-selector__count {
	color: var(--theme);
	font-size: var(--fonts-sm);
	white-space: nowrap;
}

.format-selector__divider {
	background-color: var(--theme-transparent);
	width: 2px;
	align-self: stretch;
}