/*! CSS Used from: /style.css */
*,
:after,
:before {
	/* border-color: var(--un-default-border-color, #e5e7eb); */
	/* border-style: solid; */
	border-width: 0;
	box-sizing: border-box;
}

:after,
:before {
	--un-content: "";
}

html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	font-feature-settings: normal;
	font-variation-settings: normal;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	-webkit-tap-highlight-color: transparent;
}

body {
	line-height: inherit;
	margin: 0;
}

h2 {
	font-size: inherit;
	font-weight: inherit;
}

a {
	color: inherit;
	text-decoration: inherit;
}

button {
	color: inherit;
	font-family: inherit;
	font-feature-settings: inherit;
	font-size: 100%;
	font-variation-settings: inherit;
	font-weight: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
}

button {
	text-transform: none;
}

[type=button],
button {
	-webkit-appearance: button;
	background-color: transparent;
	background-image: none;
}

h2,
p {
	margin: 0;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

button {
	cursor: pointer;
}

:disabled {
	cursor: default;
}

img {
	display: block;
	vertical-align: middle;
}

img {
	height: auto;
	max-width: 100%;
}

:root {
	--color-white: 0, 0%, 100%;
	--color-base-100: 245, 1%, 20%;
	--color-base-200: 245, 1%, 18%;
	--color-base-300: 245, 1%, 16%;
	--color-base-400: 245, 1%, 14%;
	--color-base-500: 245, 2%, 12%;
	--color-base-600: 245, 2%, 10%;
	--color-base-700: 245, 3%, 08%;
	--color-base-800: 245, 4%, 06%;
	--color-base-900: 245, 4%, 04%;
	--color-primary-600: 37, 52%, 49%;
	--color-primary-700: 37, 52%, 45%;
	--color-primary-800: 37, 52%, 41%;
	--color-primary-900: 37, 52%, 37%;
	--color-contrast-100: 0, 0%, 95%;
	--color-contrast-200: 0, 0%, 90%;
	--color-contrast-300: 0, 0%, 85%;
	--color-contrast-400: 0, 0%, 80%;
	--color-contrast-500: 0, 0%, 75%;
	--color-contrast-600: 0, 0%, 70%;
	--color-contrast-700: 0, 0%, 65%;
	--color-contrast-800: 0, 0%, 60%;
	--color-contrast-900: 0, 0%, 55%;
}

body {
	font-family: Burbank, sans-serif;
	height: 100vh;
	overflow-x: hidden;
	overflow-y: scroll;
	--un-bg-opacity: 1;
	background-color: hsla(var(--color-base-600), var(--un-bg-opacity));
	font-size: .875rem;
	line-height: 1.25rem;
	--un-text-opacity: 1;
	color: hsla(var(--color-white), var(--un-text-opacity));
}

/* @media (min-width: 640px) {
	body {
		font-size: 1rem;
		line-height: 1.5rem;
	}
}

#__nuxt {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
} */

button {
	outline: 2px solid transparent;
	outline-offset: 2px;
}

button:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
}

::-webkit-scrollbar {
	width: 8px;
}

/* @media (min-width: 768px) {
	::-webkit-scrollbar {
		width: 10px;
	}
} */

::-webkit-scrollbar-track {
	--un-bg-opacity: 1;
	background-color: hsla(var(--color-base-500), var(--un-bg-opacity));
}

::-webkit-scrollbar-thumb {
	background-color: hsla(var(--color-primary-100), .6);
}

::-webkit-scrollbar-thumb:hover {
	background-color: hsla(var(--color-primary-100), .9);
}

* {
	-webkit-tap-highlight-color: #4c4c4c11;
	letter-spacing: .001em;
	touch-action: manipulation;
}

.small-header {
	background-position: 50% 15%;
}

*,
:after,
:before {
	--un-rotate: 0;
	--un-rotate-x: 0;
	--un-rotate-y: 0;
	--un-rotate-z: 0;
	--un-scale-x: 1;
	--un-scale-y: 1;
	--un-scale-z: 1;
	--un-skew-x: 0;
	--un-skew-y: 0;
	--un-translate-x: 0;
	--un-translate-y: 0;
	--un-translate-z: 0;
	--un-scroll-snap-strictness: proximity;
	--un-border-spacing-x: 0;
	--un-border-spacing-y: 0;
	--un-ring-offset-shadow: 0 0 transparent;
	--un-ring-shadow: 0 0 transparent;
	--un-shadow: 0 0 transparent;
	--un-ring-offset-width: 0px;
	--un-ring-offset-color: #fff;
	--un-ring-width: 0px;
	--un-ring-color: rgba(147, 197, 253, .5);
}

.pointer-events-auto {
	pointer-events: auto;
}

.absolute {
	position: absolute;
}

.relative {
	position: relative;
}

.inset-2 {
	top: .5rem;
	right: .5rem;
	bottom: .5rem;
	left: .5rem;
}

.bottom-14 {
	bottom: 3.5rem;
}

.left-0 {
	left: 0;
}

.top-0 {
	top: 0;
}

.z-0 {
	z-index: 0;
}

.grid {
	display: grid;
}

.grid-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mx-1\.5 {
	margin-left: .375rem;
	margin-right: .375rem;
}

.mb-8 {
	margin-bottom: 2rem;
}

.mt-4 {
	margin-top: 1rem;
}

.header-top {
	margin-top: 3.7rem;
}

.hidden {
	display: none;
}

.size-20 {
	height: 5rem;
	width: 5rem;
}

.size-full {
	height: 100%;
	width: 100%;
}

.h-12 {
	height: 3rem;
}

.h-7 {
	height: 1.75rem;
}

.h-full {
	height: 100%;
}

.max-w-7xl {
	max-width: 80rem;
}

.min-w-0 {
	min-width: 0;
}

.min-w-20 {
	min-width: 5rem;
}

.w-\[300px\] {
	width: 300px;
}

.w-12 {
	width: 3rem;
}

.w-full {
	width: 100%;
}

.flex {
	display: flex;
}

.flex-auto {
	flex: 1 1 auto;
}

.flex-col {
	flex-direction: column;
}

.flex-wrap {
	flex-wrap: wrap;
}

.disabled\:cursor-not-allowed:disabled {
	cursor: not-allowed;
}

.select-none {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.items-start {
	align-items: flex-start;
}

.items-center {
	align-items: center;
}

.justify-end {
	justify-content: flex-end;
}

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

.justify-between {
	justify-content: space-between;
}

.gap-0\.5 {
	gap: .125rem;
}

.gap-1 {
	gap: .25rem;
}

.gap-2 {
	gap: .5rem;
}

.gap-4 {
	gap: 1rem;
}

.overflow-y-clip {
	overflow-y: clip;
}

.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.border {
	border-width: 1px;
}

.border-2 {
	border-width: 2px;
}

.border-b {
	border-bottom-width: 1px;
}

.border-base-200 {
	--un-border-opacity: 1;
	border-color: hsla(var(--color-base-200), var(--un-border-opacity));
}

.border-base-300 {
	--un-border-opacity: 1;
	border-color: hsla(var(--color-base-300), var(--un-border-opacity));
}

.border-base-700 {
	--un-border-opacity: 1;
	border-color: hsla(var(--color-base-700), var(--un-border-opacity));
}

.border-contrast-900\/40 {
	border-color: hsla(var(--color-contrast-900), .4);
}

.border-primary-100\/30 {
	border-color: hsla(var(--color-primary-100), .3);
}

/* .hover\:border-primary-100:hover {
	--un-border-opacity: 1;
	border-color: hsla(var(--color-primary-100), var(--un-border-opacity));
} */

.disabled\:border-primary-100\/15:disabled {
	border-color: hsla(var(--color-primary-100), .15);
}

.rounded-lg {
	border-radius: 10rem;
}

.rounded-md {
	border-radius: .375rem;
}

.rounded-sm {
	border-radius: .125rem;
}

.bg-base-400 {
	--un-bg-opacity: 1;
	background-color: hsla(var(--color-base-400), var(--un-bg-opacity));
}

.bg-base-600 {
	--un-bg-opacity: 1;
	background-color: hsla(var(--color-base-600), var(--un-bg-opacity));
}

.bg-base-800 {
	--un-bg-opacity: 1;
	background-color: hsla(var(--color-base-800), var(--un-bg-opacity));
	aspect-ratio: 1 / 1;
}

.bg-primary-500\/15 {
	background-color: hsla(var(--color-primary-500), .15);
}

.disabled\:bg-primary-500\/10:disabled {
	background-color: hsla(var(--color-primary-500), .1);
}

.from-contrast-900\/8 {
	--un-gradient-from-position: 0%;
	/* --un-gradient-from: hsla(var(--color-contrast-900), .08) var(--un-gradient-from-position); */
	--un-gradient-to-position: 100%;
	/* --un-gradient-to: hsla(var(--color-contrast-900), 0) var(--un-gradient-to-position); */
	--un-gradient-stops: var(--un-gradient-from), var(--un-gradient-to);
}

.hover\:from-base-300:hover {
	--un-gradient-from-position: 0%;
	--un-gradient-from: hsla(var(--color-base-300), var(--un-from-opacity, 1)) var(--un-gradient-from-position);
	--un-gradient-to-position: 100%;
	--un-gradient-to: hsla(var(--color-base-300), 0) var(--un-gradient-to-position);
	--un-gradient-stops: var(--un-gradient-from), var(--un-gradient-to);
}

.hover\:via-base-300:hover {
	--un-gradient-via-position: 50%;
	--un-gradient-to: hsla(var(--color-base-300), 0);
	--un-gradient-stops: var(--un-gradient-from), hsla(var(--color-base-300), var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);
}

.to-contrast-900\/0 {
	--un-gradient-to-position: 100%;
	--un-gradient-to: hsla(var(--color-contrast-900), 0) var(--un-gradient-to-position);
}

.hover\:to-base-400:hover {
	--un-gradient-to-position: 100%;
	--un-gradient-to: hsla(var(--color-base-400), var(--un-to-opacity, 1)) var(--un-gradient-to-position);
}

.bg-gradient-to-t {
	--un-gradient-shape: to top in oklch;
	--un-gradient: var(--un-gradient-shape), var(--un-gradient-stops);
	background-image: linear-gradient(var(--un-gradient));
}

.p-1 {
	padding: .25rem;
}

.px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}

.px-2 {
	padding-left: .5rem;
	padding-right: .5rem;
}

.py-2 {
	padding-bottom: .5rem;
	padding-top: .5rem;
}

.py-3 {
	padding-bottom: .75rem;
	padding-top: .75rem;
}

.pb-1 {
	padding-bottom: .25rem;
}

.pb-2 {
	padding-bottom: .5rem;
}

.pl-4 {
	padding-left: 1rem;
}

.pr-2 {
	padding-right: .5rem;
}

.text-2xl {
	font-size: 1.5rem;
	line-height: 2rem;
}

.text-base {
	font-size: 1rem;
	line-height: 1.5rem;
}

.text-sm {
	font-size: .875rem;
	line-height: 1.25rem;
}

.text-xl {
	font-size: 1.25rem;
	line-height: 1.75rem;
}

.text-contrast-500 {
	--un-text-opacity: 1;
	color: hsla(var(--color-contrast-500), var(--un-text-opacity));
}

.text-primary-100 {
	--un-text-opacity: 1;
	color: hsla(var(--color-primary-100), var(--un-text-opacity));
}

.text-contrast-700 {
	--un-text-opacity: 1;
	color: hsla(var(--color-contrast-700), var(--un-text-opacity));
}

.hover\:text-primary-100:hover {
	--un-text-opacity: 1;
	/* color: hsla(var(--color-primary-100), var(--un-text-opacity)); */
	color: #88d3fe;
}

.disabled\:text-primary-100\/60:disabled {
	color: hsla(var(--color-primary-100), .6);
}

.tracking-tight {
	letter-spacing: -.025em;
}

.capitalize {
	text-transform: capitalize;
}

.shadow-lg {
	--un-shadow: var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgba(0, 0, 0, .1)), var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgba(0, 0, 0, .1));
	box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
}

.shadow-md {
	--un-shadow: var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgba(0, 0, 0, .1)), var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgba(0, 0, 0, .1));
	box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
}

.shadow-sm {
	--un-shadow: var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgba(0, 0, 0, .05));
	box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
}

.transition-all {
	transition-duration: .15s;
	transition-property: all;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.transition-colors {
	transition-duration: .15s;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

@media (min-width:1585px) {
	.min-\[1585px\]\:block {
		display: block;
	}

	.min-\[1585px\]\:pl-4 {
		padding-left: 1rem;
	}
}

@media (min-width:1895px) {
	.min-\[1895px\]\:pr-4 {
		padding-right: 1rem;
	}
}

@media (min-width:640px) {
	[sm~=bottom-4] {
		bottom: 1rem;
	}

	[sm~=mx-2] {
		margin-left: .5rem;
		margin-right: .5rem;
	}

	[sm~=mx-4] {
		margin-left: 1rem;
		margin-right: 1rem;
	}

	[sm~=size-26] {
		height: 5.75rem;
		width: 6.5rem;
	}

	[sm~=h-14] {
		height: 3.5rem;
	}

	[sm~=min-h-14] {
		min-height: 3.5rem;
	}

	[sm~=min-w-26] {
		min-width: 6.5rem;
	}

	[sm~=items-start] {
		align-items: flex-start;
	}

	[sm~=gap-4] {
		gap: 1rem;
	}

	[dir=ltr] [sm~="ltr:pl-28"] {
		padding-left: 7rem;
	}
}

@media (min-width:768px) {
	[md~=grid-cols-6] {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	[md~=inline] {
		display: inline;
	}

	[md~=hidden] {
		display: none;
	}

	[md~=flex-col] {
		flex-direction: column;
	}

	[md~=gap-4] {
		gap: 1rem;
	}

	.md\:rounded-md {
		border-radius: .375rem;
	}

	.md\:px-6 {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.md\:text-base {
		font-size: 1rem;
		line-height: 1.5rem;
	}

	[md~=text-sm] {
		font-size: .875rem;
		line-height: 1.25rem;
	}
}

@media (min-width:1024px) {
	.lg\:h-\[300px\] {
		height: 150px;
	}

	.lg\:max-w-\[calc\(100\%-300px-1rem\)\] {
		max-width: calc(100% - 300px - 1rem);
	}

	[lg~=w-auto] {
		width: auto;
	}

	[lg~=flex-row] {
		flex-direction: row;
	}

	[lg~=gap-4] {
		gap: 1rem;
	}
}

@media (min-width:1280px) {
	[xl~=w-34] {
		width: 8.5rem;
	}

	[xl~=w-full] {
		width: 100%;
	}

	[xl~=flex-row] {
		flex-direction: row;
	}
}

@font-face {
	font-display: swap;
	font-family: Burbank;
	font-stretch: 100%;
	font-style: normal;
	font-weight: 100;
	src: url(/burbank.woff) format("woff2");
	unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd;
}

@font-face {
	font-display: swap;
	font-family: Burbank;
	font-stretch: 100%;
	font-style: normal;
	font-weight: 300;
	src: url(/burbank.woff) format("woff2");
	unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd;
}

@font-face {
	font-display: swap;
	font-family: Burbank;
	font-stretch: 100%;
	font-style: normal;
	font-weight: 400;
	src: url(/burbank.woff) format("woff2");
	unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd;
}

@font-face {
	font-display: swap;
	font-family: Burbank;
	font-stretch: 100%;
	font-style: normal;
	font-weight: 500;
	src: url(/burbank.woff) format("woff2");
	unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd;
}

@font-face {
	font-display: swap;
	font-family: Burbank;
	font-stretch: 100%;
	font-style: normal;
	font-weight: 700;
	src: url(/burbank.woff) format("woff2");
	unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd;
}

@font-face {
	font-display: swap;
	font-family: Burbank;
	font-stretch: 100%;
	font-style: normal;
	font-weight: 900;
	src: url(/burbank.woff) format("woff2");
	unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd;
}

.search-bar {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	box-sizing: border-box;
}

.search-bar * {
	box-sizing: border-box;
}

.search-bar .search-container {
	display: flex;
	gap: 8px;
	width: 100%;
	max-width: 500px;
	align-items: center;
}

.search-bar .search-input-container {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1;
	transition: transform 0.2s ease;
}

.search-bar .search-input {
	width: 100%;
	height: 48px;
	background: #4a4a4a;
	border: 2px solid #6a6a6a;
	border-radius: 24px;
	padding: 0 50px 0 100px;
	font-family: inherit;
	font-size: 14px;
	color: #ffffff;
	letter-spacing: 0.5px;
	text-transform: none;
	outline: none;
	transition: all 0.2s ease;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.search-bar .search-input::placeholder {
	color: #aaaaaa;
	font-weight: bold;
	letter-spacing: 0.8px;
	text-transform: none;
}

.search-bar .search-input:focus {
	border-color: #0078f2;
	background: #5a5a5a;
}

.search-bar .search-icon {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	opacity: 0.7;
}

.search-bar .platform-icons {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	gap: 8px;
	align-items: center;
}

.search-bar .platform-icon {
	width: 20px;
	height: 20px;
	opacity: 0.6;
	transition: all 0.2s ease;
	cursor: pointer;
}

.search-bar .platform-icon:hover {
	opacity: 1;
}

.search-bar .platform-icon.active {
	opacity: 1;
}

.search-bar .platform-icon.inactive {
	opacity: 0.4;
}

.search-bar .search-button {
	width: 48px;
	height: 48px;
	background: linear-gradient(135deg, #52c3fe 0%, #1d8aff 100%);
	border: none;
	border-radius: 24px;
	cursor: pointer;
	transition: all 0.2s ease;
	/* box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3); */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.search-bar .search-button:hover {
	background: linear-gradient(135deg, #6fd0ff 0%, #4aa1ff 100%);
	/* transform: translateY(-1px); */
	/* box-shadow: 0 6px 16px rgba(255, 215, 0, 0.4); */
}

.search-bar .search-button:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.leaderboard {
	font-family: inherit;
	color: #ffffff;
	width: 90%;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
}

.leaderboard-table {
	background: #2a2a2a;
	width: 100%;
	border-collapse: collapse;
	/* background: #1a1a1a; */
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.leaderboard-table-header {
	background: #333333;
	border-bottom: 2px solid #444444;
}

.leaderboard-table-header-cell {
	padding: 10px 20px;
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	color: #cccccc;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	height: 3.15rem;
}

.leaderboard-table-header-cell.leaderboard-rank-header {
	text-align: center;
	width: 60px;
}

.leaderboard-table-header-cell.leaderboard-wins-header {
	text-align: right;
	width: 100px;
}

.leaderboard-table-header-cell.leaderboard-matches-header {
	text-align: right;
	width: 100px;
}

.leaderboard-table-header-cell.leaderboard-winrate-header {
	text-align: right;
	width: 100px;
}

.leaderboard-player-row {
	border-bottom: 1px solid #333333;
	transition: background-color 0.2s ease;
}

.leaderboard-player-row:hover {
	background: #333333;
}

.leaderboard-player-row:last-child {
	border-bottom: none;
}

.leaderboard-player-cell {
	padding: 15px 20px;
	vertical-align: middle;
}

.leaderboard-rank-cell {
	text-align: center;
	font-weight: bold;
	color: #ffffff;
	width: 60px;
}

@media (min-width: 640px) {
	.leaderboard-rank-cell {
		font-size: 20px;
	}
}

.leaderboard-player-info {
	display: flex;
	align-items: center;
	gap: 0;
}

.leaderboard-player-name {
	font-size: 1rem;
	color: #ffffff;
	margin: 0;
}

.leaderboard-player-name.leaderboard-top-player {
	color: #cccccc;
}

.leaderboard-wins-cell {
	color: #ffffff;
	width: 100px;
}

@media (min-width: 440px) {
	.leaderboard-wins-cell {
		text-align: right;
		font-size: 1.1rem;
	}
}

.leaderboard-matches-cell {
	text-align: right;
	font-size: 16px;
	color: #ffffff;
	width: 100px;
}

.leaderboard-winrate-cell {
	text-align: right;
	font-size: 16px;
	color: #ffffff;
	width: 100px;
}

.tab-picker-container {
    display: inline-flex;
    background-color: #2a2a2a;
    border-radius: 6px;
    padding: 4px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	margin-bottom: 1rem;
}

.tab-picker-container2 {
    display: inline-flex;
    background-color: #2a2a2a;
    border-radius: 6px;
    padding: 1x;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	margin-bottom: 1rem;
}

.tab-picker-option {
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #888;
    background-color: transparent;
    border: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    min-width: 80px;
    text-align: center;
}

.tab-picker-option:hover {
    /* color: #ccc; */
	color: #88d3fe;
    background-color: rgba(255, 255, 255, 0.05);
}

.tab-picker-option.active {
    /* color: #ffffff; */
	color: #52c3fe;
    background-color: #404040;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.tab-picker-option.active:hover {
    /* color: #ffffff; */
	color: #2bbafc;
    background-color: #404040;
}

.dropdown-picker-container {
    position: relative;
    display: inline-block;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
	margin-bottom: 0.5rem;
}

.dropdown-picker-selected {
    background-color: #2a2a2a;
    color: #ffffff;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 200px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    transition: background-color 0.2s ease;
}

.dropdown-picker-selected:hover {
    background-color: #333;
}

.dropdown-picker-arrow {
    margin-left: 12px;
    border: solid #888;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.dropdown-picker-container.open .dropdown-picker-arrow {
    transform: rotate(-135deg);
}

.dropdown-picker-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #2a2a2a;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.dropdown-picker-container.open .dropdown-picker-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-picker-option {
    padding: 10px 16px;
    color: #ccc;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.dropdown-picker-option:hover {
    background-color: #404040;
    color: #ffffff;
}

.dropdown-picker-option:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.dropdown-picker-option:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.dropdown-picker-options::-webkit-scrollbar {
    width: 8px;
}

.dropdown-picker-options::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 4px;
}

.dropdown-picker-options::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

.dropdown-picker-options::-webkit-scrollbar-thumb:hover {
    background: #666;
}

.fortnite-blue {
	color: #52c3fe;
}

.gold-gradient {
	background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.silver-gradient {
	background: linear-gradient(135deg, #c0c0c0 0%, #a9a9a9 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.bronze-gradient {
	background: linear-gradient(135deg, #cd7f32 0%, #b87333 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}