.server-status {
	position: absolute;
	right: 3rem;
	top: 57vh;
	width: 17vw;
	height: 40vh;
	background: #0f0f1a;
	border-radius: 9px;
	padding: 1rem;
	border: 5px outset #1E1E29;
	transform: translateY(40%);
	opacity: 0;
	transition: transform 0.8s cubic-bezier(.16,1,.3,1), opacity 0.5s ease;
}

.server-status.show {
	transform: translateY(0);
	opacity: 1;
}

.server-status-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.server-status-header button {
	position: relative;
	overflow: hidden;
	background: linear-gradient(120deg, rgba(196, 31, 100, 1) 0%, rgba(75, 0, 125, 1) 100%);
	border: none;
	padding: 0.5rem 1.5rem;
	color: #b2b2b2;
	border-radius: 10px;
	cursor: pointer;
	transition: color 0.3s ease, transform 0.15s ease, box-shadow 0.3s ease, background-position 0.5s ease;
	background-size: 200% 200%;
	background-position: left center;
	box-shadow: 0 0 0 rgba(196, 31, 100, 0);
}

.server-status-header button:hover {
	color: white;
	background-position: right center;
	box-shadow: 0 8px 20px rgba(196, 31, 100, 0.35), 0 0 15px rgba(143, 19, 209, 0.5);
}

.server-status-header button:active {
	transform: translateY(1px) scale(0.94);
	box-shadow: 0 3px 8px rgba(196, 31, 100, 0.4), inset 0 3px 8px rgba(0, 0, 0, 0.3);
}

.server-status-header button::before {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 80%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
	transform: skewX(-25deg);
	transition: left 0.6s ease;
}

.server-status-header button:hover::before {
	left: 140%;
}

.server-status .online {
	color: #0f0;
}

.server-status .offline {
	color: #f00;
}

.server-status hr {
	margin-top: 1rem;
	margin-bottom: 1rem;
	color: #2a2a2a;
}

.server-status .status-info-title {
	display: inline-block;
	margin-bottom: 1.2rem;
}

.server-status .status-info-content {
	display: inline-block;
	float: right;
}

.playercount-number  {
	margin-top: 0.5rem;
	margin-bottom: 1rem;
	font-size: 1.3rem;
}

.playercount-bar-container {
	width: 100%;
	height: 12px;
	background: #21242E;
	border-radius: 6px;
	overflow: hidden;
}

.playercount-bar {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg,rgba(219, 153, 255, 1) 0%, rgba(143, 19, 209, 1) 100%);
	border-radius: 6px;
	transition: width 10s linear;
}

.playercount-bar.reset {
	width: 0% !important;
	transition: none;
}

.player-modal {
	position:fixed;
	inset:0;
	background:rgba(0, 0, 0, 0.65);
	display:flex;
	justify-content:center;
	align-items:center;
	opacity:0;
	visibility:hidden;
	transition:.3s;
	z-index: 100;
}

.player-modal.show {
	opacity:1;
	visibility:visible;
}

.player-modal-content {
	width:350px;
	max-height:500px;
	background:#141421;
	border-radius:12px;
	padding:25px;
	border:3px solid #8f13d1;
	overflow-y:auto;
}

.player-modal-content button {
	z-index: 1000;
}

.player-name {
	display: flex;
	align-items: center;
	padding: 10px;
	margin: 8px 0;
	background: #1e1e2d;
	border-radius: 8px;
	gap: 15px;
}

.player-modal-content {
	text-align: center;
}

.player-modal-content p {
	padding: 10px;
}

.player-modal-content h2 {
	padding-bottom: 10px;
}

.player-modal-content button {
	padding: 0.5rem 1.5rem;
	border-radius: 10px;
	border: none;
	color: #b2b2b2;
	background: linear-gradient(120deg, rgba(196, 31, 100, 1) 0%, rgba(75, 0, 125, 1) 100%);
	transition: color 0.3s ease, transform 0.15s ease, box-shadow 0.3s ease;
}

.player-modal-content button:hover {
	color: white;
	box-shadow: 0 8px 20px rgba(196, 31, 100, 0.35), 0 0 15px rgba(143, 19, 209, 0.5);
}

.player-modal-content button:active {
	transform: translateY(1px) scale(0.94);
	box-shadow: 0 3px 8px rgba(196, 31, 100, 0.4), inset 0 3px 8px rgba(0, 0, 0, 0.3);
}