/*
	SELECT SERVER
*/
body.select-servers  {
	overflow: hidden!important;
}

.select-server-preload {
	opacity: 0;
	background-image: url(/assets/img/select_server/master/bg.webp),
		url(/assets/img/select_server/season1/bg.webp),
		url(/assets/img/select_server/master/logo.webp),
		url(/assets/img/select_server/season1/logo.webp),
		url(/assets/img/select_server/btn-0.png),
		url(/assets/img/select_server/btn-1.png),
		url(/assets/img/select_server/btn-2.png);
}

.select-server {
	position: fixed; inset: 0; z-index: 99;
}

.select-server,
.select-server .background,
.select-server .content {
	width: 100%;
	height: 100%;
}

.select-server .gradient,
.select-server .background,
.select-server .logo,
.select-server .logo::before,
.select-server .logo::after  {
    -webkit-transition: all .3s ease-in;
       -moz-transition: all .3s ease-in;
         -o-transition: all .3s ease-in;
			transition: all .3s ease-in;
}

.select-server .content {
	position: relative;
	z-index: 2;
	padding: 2rem;
	text-align: center;
}

.select-server .background {
	position: absolute;
	inset: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 0;
	background-image: url(/assets/img/select_server/master/bg.webp); 
}

.select-server:has(.btn-select.master:hover) .background { background-image: url(/assets/img/select_server/master/bg.webp);  }
.select-server:has(.btn-select.season1:hover) .background { background-image: url(/assets/img/select_server/season1/bg.webp); }


.select-server .gradient {
	position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.313;
}

.select-server .gradient.master  { background: linear-gradient(90deg, rgb(0 186 255) 		0%,		rgb(0 186 255 / 0%)	100%); }
.select-server .gradient.season1 { background: linear-gradient(90deg, rgb(255 174 0 / 0%) 	0%,		rgb(255 174 0)		100%); }

.select-server:has(.btn-select.master:hover)  .gradient.master  { opacity: .5; }
.select-server:has(.btn-select.season1:hover) .gradient.season1 { opacity: .5; }


.select-server .logo {
	position: relative;
	width: 506px;
	height: 257px;
}

.select-server .logo::before,
.select-server .logo::after {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.select-server.master  .logo::before { background-image: url(/assets/img/select_server/master/logo.webp);  opacity: 1; }
.select-server.master  .logo::after  { background-image: url(/assets/img/select_server/season1/logo.webp); opacity: 0; }

.select-server.season1 .logo::before { background-image: url(/assets/img/select_server/season1/logo.webp); opacity: 1; }
.select-server.season1 .logo::after  { background-image: url(/assets/img/select_server/master/logo.webp);  opacity: 0; }

.select-server:has(.btn-select.season1:hover) .logo::before { opacity: 0; }
.select-server:has(.btn-select.season1:hover) .logo::after  { opacity: 1; }
.select-server:has(.btn-select.master:hover)  .logo::before { opacity: 1; }
.select-server:has(.btn-select.master:hover)  .logo::after  { opacity: 0; }

.select-server p {
	font-size: 40px; margin: 0;
	text-shadow: 1px 1px 0 rgba(0,0,0,.9);
	font-family: "Roboto", sans-serif;
}

.btn.btn-select {
	position: relative;
	overflow: hidden;
	width: 193px; height: 40px; line-height: 40px;
	border: none !important; border-radius: 16px;
	font-family: Tahoma; font-size: 20px;
	text-shadow: 1px 1px 0 rgb(0 0 0 / 60%);
	padding: 0; display: inline-block;
	background-image: url(/assets/img/select_server/btn-0.png),
					  url(/assets/img/select_server/btn-1.png),
					  url(/assets/img/select_server/btn-2.png);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: 0 0, -9999px -9999px, -9999px -9999px;
	background-size: cover;
	background-blend-mode: multiply;
}

.btn.btn-select.master  { background-color: rgb(0 186 255) !important; }
.btn.btn-select.season1 { background-color: rgb(146 113 192) !important; }

.btn.btn-select.season1::before {
	content: ""; position: absolute; inset: 0;
	background: url(/assets/img/select_server/season1/btn_login_overlay.png) center / cover no-repeat;
	opacity: .9; border-radius: inherit; pointer-events: none;
}

.btn.btn-select:hover  { background-position: -9999px -9999px, 0 0, -9999px -9999px; }
.btn.btn-select:active { background-position: -9999px -9999px, -9999px -9999px, 0 0; }

@media (max-width: 576px) {
	.select-server p { font-size: 28px; }
	.select-server .buttons { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
	.select-server .background,
	.select-server .gradient,
	.select-server .logo,
	.select-server .logo::before,
	.select-server .logo::after,
	.btn.btn-select {
		transition: none !important;
	}
}