/**
 * Rule the words! KKuTu Online
 * Copyright (C) 2017 JJoriping(op@jjo.kr)
 * 
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */

:root{
	--glass-bg: rgba(30, 30, 30, 0.35);
	--glass-bg-soft: rgba(255, 255, 255, 0.06);
	--glass-border: rgba(255, 255, 255, 0.12);
	--glass-blur: blur(12px);
	--accent: #bb86fc;
	--accent-soft: rgba(187, 134, 252, 0.35);
}

#holder{
	width: 200px;
	text-align: center;
	text-shadow: 0px 0px 4px #333;
	font-weight: bold;
}
#logo{
	margin-top: -20px;
	filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.4));
}

/* 공지사항 iframe을 감싸는 유리 프레임 */
.bulletin-frame{
	float: left;
	width: calc(100% - 4px);
	margin-top: 10px;
	padding: 6px;
	border-radius: 16px;
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}
	.bulletin-frame > iframe{
		display: block;
		width: 100%;
		border: none;
		border-radius: 12px;
		background: transparent;
	}

#menu-bar a{
	display: block;
	float: left;
	padding: 10px 5px;
	border-radius: 10px;
	margin: 0px 3px;
	width: 120px;
	font-size: 15px;
	text-align: center;
	background: var(--glass-bg-soft);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
	transition: 0.25s ease;
}
	#menu-bar a:hover{
		background: rgba(187, 134, 252, 0.18);
		border-color: var(--accent);
		box-shadow: 0 0 12px var(--accent-soft);
		transform: translateY(-2px);
	}

#game-start{
	float: left;
	width: 517px;
	height: 93px;
	font-size: 25px;
	font-weight: bold;
	border: none;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
	background: rgba(91, 81, 81, 0.36);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	color: #e6e6e6;
	transition: 0.3s ease-in-out;
}
	#game-start:hover{
		font-size: 35px;
		background-color: rgba(187, 134, 252, 0.35);
		box-shadow: 0 0 20px var(--accent-soft);
	}

/* 서버 리스트 전체 박스 */
.server-list-box{
	float: right;
	width: 336px;
	background: rgba(0, 0, 0, 0.25) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 14px;
	border: 1px solid var(--glass-border);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	margin-bottom: 10px;
}

/* 상단 타이틀 바 */
.server-list-title{
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	width: 100%;
	background: rgba(0, 0, 0, 0.3) !important;
	font-weight: bold;
	font-size: 14px;
	box-sizing: border-box;
}
	.server-list-title a#server-refresh{
		margin: 0px 5px;
		cursor: pointer;
		color: var(--accent);
		transition: transform 0.4s ease;
	}
	.server-list-title a#server-refresh:hover{
		transform: rotate(180deg);
	}
	#server-total{ margin-left: auto; }

/* 서버 개별 항목 */
.server{
	float: left;
	margin: 1px 0;
	padding: 6px 10px;
	width: 100%;
	height: auto;
	font-size: 13px;
	cursor: pointer;
	box-sizing: border-box;
	transition: background 0.2s ease;
}
	.server>div{ float: left; }
	.server:hover{ background-color: rgba(255, 255, 255, 0.08) !important; }

/* 서버 상태 표시 점 */
.server-status{
	border-radius: 50%;
	margin: 3px 8px;
	width: 10px;
	height: 10px;
	box-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
}
	.ss-o{ background-color: #3E3; box-shadow: 0 0 8px #3E3; }
	.ss-p{ background-color: #EE3; box-shadow: 0 0 8px #EE3; }
	.ss-q{ background-color: #F55; box-shadow: 0 0 8px #F55; }
	.ss-x{ background-color: #777; }

/* 서버 이름 */
.server-name{
	width: 70px;
	font-weight: 500;
}

/* 인원 표시 그래프 (게이지) */
.server-people{
	width: 170px;
	height: 14px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 7px;
	overflow: hidden;
	margin-top: 2px;
}
	.server-people>.graph-bar{
		background: linear-gradient(90deg, #7CC4F8, #9933ff) !important;
		height: 100%;
		border-radius: 7px;
		transition: width 0.4s ease;
	}
	.server-people>label{
		position: relative;
		display: block;
		top: -14px;
		width: 100%;
		text-align: center;
		font-size: 10px;
		color: #fff;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	}

.server-enter{
	width: 50px;
	text-align: center;
	border-radius: 10px;
	padding: 2px 0;
	transition: 0.2s ease;
}
	.server:hover .server-enter{
		background: rgba(187, 134, 252, 0.25);
		box-shadow: 0 0 8px var(--accent-soft);
	}

#Background{
	animation: BGScroll 4s linear infinite;
}
@keyframes BGScroll{
	from{ background-position: 0px 0px; }
	to{ background-position: -200px -200px; }
}