@charset "utf-8";

:root {
	--gold: #b79349;
	--gold-light: #f0d790;
	--gold-dark: #5d4825;
	--stone: #1b1a17;
	--stone-light: #292721;
	--black: #090a09;
	--text: #c9c1b2;
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
	min-height: 100vh;
	margin: 0;
	padding: 14px 0 35px;
	color: var(--text);
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	background-color: #100d08;
	background-image: linear-gradient(rgba(5,5,4,.08), rgba(5,5,4,.36)), url('https://i.imgur.com/9Wte07C.png');
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	background-size: cover;
}

a { color: #d9d0bd; font-weight: bold; text-decoration: none; }
a:hover { color: #ffe99c; }

#page {
	width: 1000px;
	margin: 0 auto;
	position: relative;
	background: rgba(8,9,8,.94);
	border: 1px solid #725a2e;
	box-shadow: 0 0 0 3px #11110f, 0 0 0 4px #94743b, 0 8px 35px rgba(0,0,0,.88), inset 0 0 35px rgba(0,0,0,.82);
}

#page:before, #page:after {
	content: "";
	position: absolute;
	left: 5px;
	right: 5px;
	height: 3px;
	z-index: 5;
	background: linear-gradient(90deg, transparent, #a27e3c 15%, #2a2418 50%, #a27e3c 85%, transparent);
}
#page:before { top: 3px; }
#page:after { bottom: 3px; }

/* Górna belka */
#panel {
	width: 984px;
	height: 52px;
	margin: 8px auto 0;
	position: relative;
	display: flex;
	align-items: center;
	background: linear-gradient(#24231f, #11120f 55%, #0a0b09);
	border: 1px solid #6e582f;
	box-shadow: inset 0 1px rgba(239,211,138,.12), inset 0 -1px #000, 0 3px 7px rgba(0,0,0,.75);
}

#panel-padding-left, #panel-padding-right {
	height: 50px;
	display: flex;
	align-items: center;
	padding: 0;
	float: none;
}
#panel-padding-left { width: 55%; padding-left: 58px; }
#panel-padding-right { width: 45%; justify-content: flex-end; padding-right: 55px; }

.search_character, .server_status, .uptime strong {
	color: #d3bd7a;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	white-space: nowrap;
}
.search_character { margin-right: 10px; }
#panel form { display: flex; margin: 0; }

.search_char_input {
	width: 190px;
	height: 29px;
	padding: 0 12px;
	color: #bbb6aa;
	font-size: 10px;
	font-weight: normal;
	background: #111210;
	border: 1px solid #45423a;
	border-radius: 3px 0 0 3px;
	box-shadow: inset 0 2px 5px rgba(0,0,0,.8);
	outline: none;
}
.search_char_input:focus { border-color: #9b7535; }
.search_char_button {
	width: 35px;
	height: 29px;
	padding: 0;
	color: #f5cf63;
	font-size: 18px;
	line-height: 27px;
	background: linear-gradient(#5c2414, #2d120c);
	border: 1px solid #834020;
	border-left: 0;
	border-radius: 0 3px 3px 0;
	cursor: pointer;
}
.search_char_button:hover { background: linear-gradient(#84331a, #40180e); }

.server_status { margin-right: 12px; }
.status-online, .status-offline {
	height: 24px;
	padding: 6px 9px;
	font-size: 10px;
	font-weight: bold;
	border-radius: 3px;
}
.status-online { color: #9bd14a; background: #152510; border: 1px solid #31561e; }
.status-offline { color: #e16b55; background: #2b1210; border: 1px solid #63281f; }
.status-online span, .status-offline span { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; }
.status-online span { background: #7bd223; box-shadow: 0 0 5px #72d51c; }
.status-offline span { background: #d43e26; box-shadow: 0 0 5px #d43e26; }
.uptime { width: auto; height: auto; margin-left: 12px; padding: 0; color: #aaa397; background: none; text-align: left; }
.uptime strong { margin-right: 8px; }

/* Logo */
#header {
	width: 984px;
	height: 205px;
	margin: 0 auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(ellipse at center, #28241a 0%, #11110e 58%, #090a08 100%);
	border-left: 1px solid #5e4a28;
	border-right: 1px solid #5e4a28;
	border-bottom: 1px solid #786035;
	box-shadow: inset 0 -5px 12px rgba(0,0,0,.85);
}
.site-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 620px;
	height: 90px;
	text-decoration: none;
}

.site-logo img {
	display: block;
	max-width: 100%;
	max-height: 550px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter:
		drop-shadow(0 3px 2px rgba(0, 0, 0, 0.95))
		drop-shadow(0 0 7px rgba(205, 155, 54, 0.35));
	transition:
		filter 0.2s ease,
		transform 0.2s ease;
}

.site-logo:hover img {
	transform: scale(1.02);
	filter:
		drop-shadow(0 3px 2px rgba(0, 0, 0, 0.95))
		drop-shadow(0 0 10px rgba(238, 189, 77, 0.55));
}

/* Usuwa stare ozdobniki tekstowego logo */
.site-logo::before,
.site-logo::after {
	display: none;
	content: none;
}

.lampa-left, .lampa-right {
	width: 54px;
	height: 112px;
	top: -54px;
	position: absolute;
	z-index: 8;
	background: url('images/lampa.png') center top / contain no-repeat;
	filter: drop-shadow(0 0 8px rgba(255,151,28,.5));
}
.lampa-left { left: -6px; }
.lampa-right { right: -6px; transform: scaleX(-1); }

/* Trzy kolumny */
#container-main {
	width: 964px;
	margin: 10px auto 22px;
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
#menu { width: 193px; flex: 0 0 193px; position: relative; float: none; }
#content { width: 561px; flex: 0 0 561px; position: relative; float: none; }
#panels { width: 190px; flex: 0 0 190px; position: relative; float: none; }

/* Menu */
#menu > div { margin-bottom: 7px; border: 1px solid #5c4a2b; box-shadow: 0 3px 8px rgba(0,0,0,.55); }
#menu .button {
	width: 191px;
	height: 34px;
	position: relative;
	cursor: pointer;
	background: linear-gradient(#2a2924, #171713 52%, #10110e);
	border-bottom: 1px solid #66512a;
	box-shadow: inset 0 1px rgba(255,228,159,.08);
}
#menu .button .status { width: 16px; height: 32px; float: left; background-position: center; background-repeat: no-repeat; opacity: .8; }
#menu .button .icon { width: 37px; height: 32px; float: left; background-position: center; background-repeat: no-repeat; filter: sepia(.35) saturate(1.2); }
#menu .button .name { width: 136px; height: 32px; float: left; background-position: left center; background-repeat: no-repeat; }
#menu .submenu { width: 191px; position: relative; background: rgba(13,14,12,.97); }
#menu .submenu ul { margin: 0; padding: 0; list-style: none; }
#menu .submenu .menu-item, #menu .submenu .menu-item-active, #menu .submenu .menu-item-last, #menu .submenu .menu-item-last-active {
	display: block;
	width: 191px;
	height: 27px;
	padding: 7px 9px 0 28px;
	background: linear-gradient(90deg, rgba(92,73,38,.12), transparent 60%);
	border-bottom: 1px solid #2f2d27;
}
#menu .submenu li:hover { background: linear-gradient(90deg, rgba(141,107,39,.28), rgba(45,38,22,.12)); }
#menu .submenu li:after { content: "›"; float: right; color: #a77e2a; font-size: 15px; line-height: 10px; opacity: 0; }
#menu .submenu li:hover:after { opacity: 1; }
#menu .submenu a { color: #bdb6aa; font-size: 10px; font-weight: normal; }
#menu .submenu li:hover a, #menu .submenu .menu-item-active a, #menu .submenu .menu-item-last-active a { color: #f0d46f; }

/* Główna treść */
.content-box-top {
	width: 561px;
	height: 48px;
	padding-top: 17px;
	position: relative;
	color: #e2c878;
	font: bold 12px Georgia, "Times New Roman", serif;
	letter-spacing: 2px;
	text-align: center;
	text-transform: uppercase;
	background: linear-gradient(#292821, #151612 57%, #0d0e0c);
	border: 1px solid #70592f;
	border-radius: 3px 3px 0 0;
	box-shadow: inset 0 1px rgba(255,226,151,.1), 0 3px 9px rgba(0,0,0,.7);
}
.content-box-top:before, .content-box-top:after { content: "☠"; position: absolute; top: 12px; color: #8d7441; font-size: 19px; }
.content-box-top:before { left: 20px; }
.content-box-top:after { right: 20px; transform: scaleX(-1); }
.content-box-top img { max-height: 22px; }
.content-box-mid {
	width: 561px;
	min-height: 330px;
	position: relative;
	color: #bdb6aa;
	background: linear-gradient(rgba(18,19,17,.97), rgba(10,11,10,.98));
	border-left: 1px solid #70592f;
	border-right: 1px solid #70592f;
	box-shadow: inset 0 0 22px rgba(0,0,0,.8);
}
.content-box-mid .padding { width: auto; padding: 16px; }
.content-box-mid .separator-big { width: 100%; height: 9px; border-bottom: 1px solid #5e4a29; background: none; }
.content-box-mid .header { width: 100%; padding: 10px; border-bottom: 1px solid #5e4a29; background: linear-gradient(90deg, transparent, rgba(141,111,51,.16), transparent); }
.content-box-mid .header h2 { margin: 0; padding: 0; color: #d8c28b; }
.content-box-bot { width: 561px; height: 12px; background: linear-gradient(#12130f, #080907); border: 1px solid #70592f; border-top: 0; border-radius: 0 0 3px 3px; }
.content-box-footer { width: 561px; padding: 14px; color: #766f62; text-align: center; }

/* Panele prawe */
.newcomer, .premium, .polls {
	width: 190px;
	height: 142px;
	position: relative;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid #775f32;
	border-radius: 3px;
	box-shadow: inset 0 0 8px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.68);
}
.newcomer { background-image: url('images/newcomer-box.jpg'); }
.premium { margin-top: 10px; background-image: url('images/premium-box.jpg'); }
.polls { margin-top: 10px; background-image: url('images/poll-box.jpg'); }

.BigButton { position: relative; width: 135px; height: 25px; z-index: 10; }
.template-change { margin-top: 10px; padding: 8px; color: #cbb978; text-align: center; background: rgba(14,14,12,.92); border: 1px solid #6b552d; }

/* Ranking */
.highscores { width: 190px; margin-top: 10px; position: relative; color: #d7ccb4; }
.highscores-title {
	width: 190px;
	height: 36px;
	padding-top: 10px;
	color: #edce72;
	font: bold 12px Georgia, "Times New Roman", serif;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .7px;
	text-shadow: 0 1px 2px #000;
	background: linear-gradient(#2c2a24, #151612 58%, #0e0f0c);
	border: 1px solid #806638;
	border-radius: 3px 3px 0 0;
	box-shadow: inset 0 1px rgba(255,232,166,.1), 0 3px 8px rgba(0,0,0,.7);
}
.highscores-title:before { content: "♜"; margin-right: 6px; color: #d8af3e; }
.highscores-content { width: 190px; padding: 7px; background: rgba(12,13,11,.97); border: 1px solid #70592f; border-top: 0; border-radius: 0 0 3px 3px; }
.highscores-player { display: flex; align-items: center; width: 100%; height: 34px; margin-bottom: 4px; padding: 0 5px; background: linear-gradient(#262620, #171814); border-bottom: 1px solid #3e3829; transition: .15s ease; }
.highscores-player:hover { background: linear-gradient(#3b3524, #211e16); }
.highscores-position { flex: 0 0 23px; height: 22px; line-height: 20px; color: #cab776; font-weight: bold; text-align: center; background: #151612; border: 1px solid #665633; border-radius: 50%; }
.highscores-name { flex: 1; min-width: 0; margin-left: 6px; overflow: hidden; color: #d7d0c2; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.highscores-level { color: #c4b98f; font-size: 8px; white-space: nowrap; }
.highscores-level small { color: #756e5f; font-size: 7px; }
.highscores-place-1 .highscores-position { color: #241b06; background: linear-gradient(#ffe68b, #c99620); border-color: #ffe08a; }
.highscores-place-2 .highscores-position { color: #202020; background: linear-gradient(#eee, #939393); border-color: #ddd; }
.highscores-place-3 .highscores-position { color: #26150c; background: linear-gradient(#dca16e, #8d4f28); border-color: #d19460; }
.highscores-empty { padding: 20px 5px; color: #8e8677; line-height: 15px; text-align: center; }
.highscores-button { display: block; height: 29px; margin-top: 7px; padding-top: 8px; color: #dfc472; font-size: 9px; text-align: center; text-transform: uppercase; background: linear-gradient(#554526, #251f14); border: 1px solid #8b6d34; border-radius: 2px; }
.highscores-button:hover { color: #fff0b3; background: linear-gradient(#755d2f, #342916); }

/* Formularze i podstawowe elementy */
input[type=submit] { padding: 6px; color: #e8d28d; font-weight: bold; background: #302817; border: 1px solid #806635; cursor: pointer; }
input[type=submit]:hover { background: #493a1d; }

@media (max-width: 1020px) {
	body { background-attachment: scroll; }
	#page { width: 980px; }
	#panel, #header { width: 964px; }
	#container-main { width: 944px; gap: 8px; }
	#content, .content-box-top, .content-box-mid, .content-box-bot, .content-box-footer { width: 543px; }
}

.castle-owner {
	width:190px;
	margin-top:10px;
	position:relative;

	background:
		linear-gradient(
			to bottom,
			#252018,
			#11100d
		);

	border:1px solid #8c6b32;

	box-shadow:
		inset 0 0 10px rgba(0,0,0,.8),
		0 2px 5px #000;

	color:#c9b36a;
}


.castle-owner-title {
	height:30px;
	line-height:30px;

	text-align:center;

	font-family:Georgia,serif;
	font-size:11px;
	font-weight:bold;

	color:#e1c879;

	background:
		linear-gradient(
			to bottom,
			#453820,
			#21190d
		);

	border-bottom:1px solid #6d5327;

	text-shadow:
		1px 1px #000;
}


.castle-owner-content {

	padding:10px;

	text-align:center;

}


.castle-crown {

	font-size:32px;

	margin-bottom:5px;

	text-shadow:
		0 0 8px #d4af37;

}


.castle-guild-name {

	color:#f1d77d;

	font-size:13px;

	font-weight:bold;

	margin-bottom:8px;

	word-wrap:break-word;

}


.castle-status {

	color:#9d9274;

	font-size:9px;

}


.castle-empty {

	color:#777;

	padding:10px;

	font-size:11px;

}
.banner-slider {

	width:190px;
	height:142px;

	margin-top:10px;

	position:relative;

	background:
		linear-gradient(
			#252017,
			#0d0d0b
		);

	border:1px solid #8c6b32;


	box-shadow:

		inset 0 0 10px rgba(0,0,0,.8),
		0 2px 6px #000;

	overflow:hidden;

}



.banner-container {

	width:100%;
	height:115px;

	position:relative;

}



.banner-slide {

	position:absolute;

	width:100%;
	height:100%;

	left:0;
	top:0;

	opacity:0;

	transition:
		opacity .6s ease;

	pointer-events:none;

}



.banner-slide.active {

	opacity:1;

	pointer-events:auto;

}



.banner-slide img {

	width:100%;
	height:100%;

	object-fit:cover;

	cursor:pointer;

}




.banner-controls {

	position:absolute;

	bottom:7px;

	width:100%;

	text-align:center;

}



.banner-dot {

	display:inline-block;

	width:9px;
	height:9px;

	margin:0 4px;

	cursor:pointer;


	background:#3e3521;

	border:1px solid #8c6b32;

	border-radius:50%;


	box-shadow:
		0 0 4px #000;

}



.banner-dot.active {


	background:#d6b65f;

	box-shadow:

		0 0 8px #d6b65f;

}