/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

/*
 * Custom Style Sheet - Use this file to style your content
 */

/* Frontpage Demo Content */
.frontpage-intro-demo h1 { margin-bottom: 0; }
.frontpage-intro-demo h2 { margin-top: 0; }
.frontpage-intro-demo p {
	margin: 40px 0;
	line-height: 24px;
	font-size: 16px;
	text-shadow: 0 1px 3px rgba(0,0,0,1.0);
}
.frontpage-intro-demo p strong {
	color: #c2c2c4;
	text-transform: uppercase;
}
.frontpage-demobox {
	max-width: 310px;
	margin: 0 10px 24px 0;
	float: left;
	line-height: 18px;
}
.frontpage-demobox img { margin-right: 10px; }
.frontpage-demobox h4 { margin: 5px 0 4px 0; }

/* Widgetkit Slideset */
.frontpage-slideset { width: 270px; }

/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

/*
 * Custom Style Sheet -  Use this file to style your content
 */

/* Logo */
#logo .custom-logo {
	width: 250px;
	height: 60px;
}

label.error { 
	float: none;
	color: #ff3333;
	vertical-align: center;
}

.l2-error, .l2-offline, .l2-dead {
	color: red;
}

.l2-success, .l2-online, .l2-alive {
	color: green;
	font-weight: bold;
}

.l2-center {
	text-align: center;
}

.l2-top-right {
	width: 340px;
	float: right;
}

.l2-top-left {
	width: 340px;
	float: left;
}

fieldset {
	margin-top: 0;
}

fieldset, .l2-top, .box-warning, .box-info {
	margin-top: 0;
}

.l2-img {
	border: 1px solid #161616;
	margin-bottom: 5px;
}

.l2-territory {
}

.l2-territory-info {
	text-align: center;
}

.l2-territory-name {
	text-align: center;
	background: rgba(0,0,0,0.3);
	color: #ffffff;
}

.l2-castle, .l2-fortress {
	height: 100px;
}

.l2-castle-pic, .l2-fortress-pic {
	width: 149px;
	height: 99px;
	border: 1px solid #666666;
	margin-right: 10px;
	float: left;
}

.l2-castle-info, .l2-fortress-info {
	width: 630px;
	float: left;
}

.l2-castle-name, .l2-fortress-name {
	text-align: center;
	background: rgba(0,0,0,0.3);
	color: #ffffff;
}

/* Zebra List and Table */
table.zebra thead th,
table.zebra tbody td { border-top: 1px solid #282828; }

table.zebra thead th {
	border-top: 1px solid #6f6f6f;
	background: rgba(110,110,110,0.6);
	background: -moz-linear-gradient(
					50% 0%,
					rgba(120,120,120,0.6) 0%,
					rgba(98,98,98,0.6) 100%
				);
	background: -webkit-gradient( 
					linear,
					50% 0%,
					50% 100%,
					color-stop(0%, rgba(120,120,120,0.6)),
					color-stop(100%, rgba(98,98,98,0.6))
				);
	color: #999;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
}


table.zebra tfoot tr {
	border-top: 1px solid #262626;
	background: rgba(0,0,0,0.15);
	-moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
	box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
	color: #666;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
}

table.zebra tbody tr {
	background: rgba(0,0,0,0.08);
	-moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.15);
	-webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.15);
	box-shadow: inset 0 2px 1px rgba(0,0,0,0.15);
}
table.zebra tbody tr.odd,
table.zebra tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.05); }

table.zebra caption { color: #888; }

#l2-logo {
	width: 45px;
	height: 80px;
	margin-top: 7px;
	margin-left: 9px;
	float: left;
}

/* =========================================================
   VOTE MENU (TOP200/HOPZONE/TOPZONE/TOP100) - PRO SIN IMAGEN
   - 1 fila SIEMPRE + centrado
   - scroll horizontal si no cabe (móvil / ventanas pequeñas)
   ========================================================= */

/* Headerbar del tema: lo convertimos a flex para centrar el bloque */
#headerbar.grid-block{
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* El tema usa .left con floats/anchos -> los neutralizamos */
#headerbar.grid-block > .left{
	float: none !important;
	width: auto !important;
}

/* Primera columna (donde vive #l2-vote): ocupa el espacio y centra */
#headerbar.grid-block > .left:first-child{
	flex: 1 1 auto !important;
	display: flex !important;
	justify-content: center !important;
}

/* Segunda columna (social icons): si hay algo, que se quede a la derecha */
#headerbar.grid-block > .left:nth-child(2){
	flex: 0 0 auto !important;
	margin-left: auto !important;
}

/* Contenedor vote */
#l2-vote{
	float: none !important;
	width: 100% !important;
	height: auto !important;
	overflow: hidden !important;
}

/* UL: 1 fila SIEMPRE + scroll si no entra */
ul#l2-vote-menu{
	list-style: none !important;

	width: 100% !important;
	margin: 0 !important;
	padding: 10px 0 0 0 !important;

	display: flex !important;
	align-items: center !important;

	justify-content: center !important;   /* centrado en desktop */
	gap: 12px !important;

	flex-wrap: nowrap !important;         /* 1 fila SIEMPRE */
	overflow-x: auto !important;          /* scroll si no cabe */
	overflow-y: hidden !important;
	-webkit-overflow-scrolling: touch !important;
}

/* En pantallas estrechas, mejor que empiece desde la izquierda (más usable con scroll) */
@media (max-width: 700px){
	ul#l2-vote-menu{ justify-content: flex-start !important; padding-left: 10px !important; padding-right: 10px !important; }
}

/* Ocultar/estilizar scrollbar (Chrome/Edge) */
ul#l2-vote-menu::-webkit-scrollbar{ height: 6px; }
ul#l2-vote-menu::-webkit-scrollbar-thumb{
	background: rgba(255,122,41,.35);
	border-radius: 999px;
}
ul#l2-vote-menu::-webkit-scrollbar-track{
	background: rgba(0,0,0,.20);
}

/* LI: sin floats, no encoge */
ul#l2-vote-menu li{
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 auto !important;
}

/* A: botón pro (sin imágenes) */
ul#l2-vote-menu li a{
	position: relative;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	/* mata el sprite antiguo sí o sí */
	background-image: none !important;
	background-position: 0 0 !important;
	background-repeat: no-repeat !important;

	/* antes se ocultaba el texto */
	text-indent: 0 !important;
	white-space: nowrap !important;
	overflow: visible !important;

	/* tamaño */
	min-height: 38px !important;
	padding: 9px 14px !important;
	flex: 0 0 auto !important;

	border-radius: 14px !important;
	border: 1px solid rgba(255, 122, 41, .55) !important;

	background:
		radial-gradient(120% 160% at 20% 20%, rgba(255,122,41,.18), rgba(0,0,0,0) 55%),
		linear-gradient(180deg, rgba(45,8,7,.82), rgba(12,3,3,.78)) !important;

	box-shadow:
		0 14px 28px rgba(0,0,0,.45),
		inset 0 0 18px rgba(255, 122, 41, .12),
		inset 0 1px 0 rgba(255,255,255,.07);

	color: #ff7a29 !important;
	text-decoration: none !important;

	font-family: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif !important;
	font-weight: 900 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	font-size: 18px !important;
	line-height: 1 !important;

	text-shadow:
		0 2px 0 rgba(0,0,0,.55),
		0 0 12px rgba(255, 122, 41, .18);

	transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease, background .12s ease, filter .12s ease !important;
	user-select: none !important;
	-webkit-user-select: none !important;
}

/* brillo superior */
ul#l2-vote-menu li a:before{
	content:"";
	position:absolute;
	left: 8px;
	right: 8px;
	top: 6px;
	height: 40%;
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
	opacity: .65;
	pointer-events:none;
	transition: opacity .12s ease;
}

/* halo exterior */
ul#l2-vote-menu li a:after{
	content:"";
	position:absolute;
	inset: -2px;
	border-radius: 16px;
	opacity: 0;
	box-shadow: 0 0 20px rgba(255, 122, 41, .22);
	pointer-events:none;
	transition: opacity .12s ease, box-shadow .12s ease;
}

/* hover / focus */
ul#l2-vote-menu li a:hover,
ul#l2-vote-menu li a:focus{
	color: #35ff35 !important;
	border-color: rgba(53, 255, 53, .60) !important;

	background:
		radial-gradient(120% 160% at 20% 20%, rgba(53,255,53,.18), rgba(0,0,0,0) 55%),
		linear-gradient(180deg, rgba(35,7,6,.82), rgba(10,2,2,.78)) !important;

	box-shadow:
		0 16px 34px rgba(0,0,0,.55),
		0 0 20px rgba(53,255,53,.18),
		inset 0 0 18px rgba(53, 255, 53, .10),
		inset 0 1px 0 rgba(255,255,255,.07);

	text-shadow:
		0 2px 0 rgba(0,0,0,.55),
		0 0 14px rgba(53, 255, 53, .25);

	transform: translateY(-1px);
	outline: none !important;
}

ul#l2-vote-menu li a:hover:before,
ul#l2-vote-menu li a:focus:before{ opacity: .75; }

ul#l2-vote-menu li a:hover:after,
ul#l2-vote-menu li a:focus:after{
	opacity: 1;
	box-shadow: 0 0 22px rgba(53,255,53,.22);
}

/* click (pressed) */
ul#l2-vote-menu li a:active{
	transform: translateY(0) scale(.98);
	filter: brightness(.98);
	box-shadow:
		0 10px 22px rgba(0,0,0,.55),
		inset 0 0 22px rgba(0,0,0,.35),
		inset 0 0 18px rgba(255, 122, 41, .10);
}

/* Anchitos parecidos al sprite original (opcional, queda más “equilibrado”) */
ul#l2-vote-menu li a.l2-top200 { min-width: 120px !important; }
ul#l2-vote-menu li a.l2-hopzone { min-width: 140px !important; }
ul#l2-vote-menu li a.l2-topzone { min-width: 140px !important; }
ul#l2-vote-menu li a.l2-top100 { min-width: 120px !important; }

/* Ajuste fino móvil */
@media (max-width: 600px){
	ul#l2-vote-menu li a{
		font-size: 16px !important;
		padding: 9px 12px !important;
		border-radius: 12px !important;
	}
}