/*!
 =========================================================
 * LEGION MU — Velocity Theme (rediseño)
 * Base: WebEngine CMS by Lautaro Angelico (MIT License)
 * Tema: Obsidian Gold — consolidado y limpio, responsive.
 =========================================================
*/

:root {
	--obg-bg: #0c0c10;
	--obg-panel: rgba(24,24,30,.96);
	--obg-panel-solid: #15151b;
	--obg-border: rgba(200,164,90,.35);
	--obg-gold: #d8b56a;
	--obg-gold-bright: #fff2c7;
	--obg-gold-deep: #8b6b2e;
	--obg-text: #ece6d6;
	--obg-text-dim: #b8b0a0;
	--obg-container-max: 1180px;
}

* { box-sizing: border-box; }

html {
	height: 100%;
	background: var(--obg-bg);
}

body {
	background: #0000000f;
	color: var(--obg-text);
	font-family: 'PT Sans', sans-serif;
	font-size: 14px;
	margin: 0;
	min-height: 100%;
	overflow-x: hidden;
}

img { border: 0; max-width: 100%; height: auto; }

h1, h2, h3, h4 { font-family: 'Cinzel', serif; }

a {
	color: var(--obg-gold);
	text-decoration: none;
	transition: color .2s ease-in, text-shadow .2s ease-in;
}
a:hover, a:focus {
	color: var(--obg-gold-bright);
	text-decoration: none;
	text-shadow: 0 0 10px rgba(216,181,106,.8);
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--obg-bg); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--obg-gold), var(--obg-gold-deep)); border-radius: 10px; }

/* =========================================================
   VIDEO BACKGROUND
   ========================================================= */
.video-background {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: -2;
	overflow: hidden;
}
.video-background video {
	width: 100%; height: 100%;
	object-fit: cover;
}
.video-overlay{
    display:none;
}

/* Canvas de partículas mágicas */
.legion-particles-canvas {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	pointer-events: none;
	z-index: -1;
}

/* =========================================================
   FORM ELEMENTS
   ========================================================= */
input[type=text], input[type=password], input[type=number], textarea, select, .form-control {
	background: #15171c;
	border: 1px solid #6e5930;
	color: #f5f1e8;
	border-radius: 4px;
}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, textarea:focus, .form-control:focus {
	border-color: var(--obg-gold);
	outline: none;
	box-shadow: 0 0 8px rgba(216,181,106,.45);
}
.help-block { color: var(--obg-text-dim); }
.form-horizontal .control-label { text-align: left !important; }

.btn-primary {
	background: linear-gradient(90deg, var(--obg-gold-deep), var(--obg-gold)) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 6px !important;
	font-weight: bold;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	transition: all .25s ease !important;
	box-shadow: 0 0 12px rgba(216,181,106,.25);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
	transform: translateY(-2px);
	box-shadow: 0 0 20px rgba(216,181,106,.7);
	filter: brightness(1.08);
	color: #fff !important;
}

/* =========================================================
   LAYOUT BASE
   ========================================================= */
#header {
	width: 100%;
	margin: 0 auto;
	padding: 40px 0 10px 0;
	text-align: center;
	color: #fff;
}

.webengine-mu-logo {
	max-height: 120px;
	transition: filter .3s ease;
	filter: drop-shadow(0 0 16px rgba(216,181,106,.35));
}
.webengine-mu-logo:hover { filter: drop-shadow(0 0 22px rgba(255,242,199,.55)); }

#container {
    background: transparent;
}

#content {
	width: 100%;
	overflow: auto;
	min-height: 500px;
	padding: 10px 20px 0 20px;
	color: var(--obg-text);
}
#content, .panel-body, td, th, p, span, li { color: var(--obg-text); }

.footer {
	background: #111217;
	color: #d8cdb7;
	border-top: 1px solid var(--obg-gold);
	width: 100%;
	max-width: var(--obg-container-max);
	font-family: 'Segoe UI', 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', 'Arial', sans-serif;
	font-size: 12px;
	padding: 40px;
	overflow: auto;
	margin: 0 auto 60px auto;
	border-radius: 0 0 8px 8px;
}
.footer > .footer-container { width: 100%; margin: 0 auto; }
.footer > .footer-container a:hover { text-decoration: underline !important; }
.footer hr { border-top: 1px solid var(--obg-gold); opacity: .4; }
.footer .footer-social-link { filter: grayscale(60%) brightness(1.3); transition: filter .3s ease; }
.footer .footer-social-link:hover { filter: grayscale(0%) brightness(1); }

/* =========================================================
   NAVBAR (con menú hamburguesa real para móvil)
   ========================================================= */
#navbar {
	width: 100%;
	background: rgba(12,12,16,.85);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--obg-gold);
	position: relative;
}
#navbar .navbar-inner {
	max-width: var(--obg-container-max);
	margin: 0 auto;
	position: relative;
}
#navbar ul {
	text-align: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
#navbar ul li {
	list-style-type: none;
	display: inline-block;
	font-size: 15px;
}
#navbar ul li a {
	display: inline-block;
	color: #ece6d6 !important;
	text-decoration: none;
	padding: 18px 26px;
	transition: background .3s ease, color .3s ease;
	text-transform: uppercase;
	letter-spacing: .03em;
	position: relative;
}
#navbar ul li a:hover, #navbar ul li a:focus, #navbar ul li a:active {
	color: #fff !important;
	background: rgba(216,181,106,.12);
}
#menu-toggle {
	display: none;
	position: absolute;
	right: 16px;
	top: 8px;
	background: none;
	border: none;
	font-size: 26px;
	color: var(--obg-gold);
	cursor: pointer;
	z-index: 20;
}

.admincp-button {
	position: absolute;
	top: 10px;
	right: 10px;
	background: var(--obg-gold) !important;
	border: 2px solid var(--obg-gold-bright) !important;
	color: #1a0f0a !important;
	font-weight: bold !important;
}

.page-title {
	color: var(--obg-gold);
	text-shadow: 0 0 10px rgba(216,181,106,.35);
	font-family: 'Cinzel', serif;
	font-size: 30px;
	margin-bottom: 14px;
	font-weight: 700;
	text-align: center;
}

/* =========================================================
   GLOBAL TOP BAR
   ========================================================= */
.global-top-bar {
	width: 100%;
	background: #050309;
	color: #8d82ab;
	padding: 7px 0 2px 0;
	text-transform: uppercase;
	font-size: 12px;
	border-bottom: 1px solid rgba(216,181,106,.2);
}
.global-top-bar .global-top-bar-content {
	width: 100%;
	max-width: var(--obg-container-max);
	margin: 0 auto;
	padding: 0 20px;
}
.global-top-bar .global-top-bar-content .row { margin: 0; padding: 0; }
.global-top-bar a.logout { color: #e8475a !important; }
.global-top-bar a { color: #999 !important; }
.global-top-bar a:hover { color: #fff !important; }
.global-top-bar-nopadding { padding: 0 !important; }
.global-top-bar-separator { padding: 0 5px; }

/* LANGUAGE PICKER */
.webengine-language-switcher {
	display: inline-block;
	list-style: none;
	padding: 0 !important;
	margin: 0 !important;
	width: 46px;
	height: 19px;
	overflow: hidden;
	transition: width .3s ease;
}
.webengine-language-switcher:hover { width: 400px; }
.webengine-language-switcher li {
	display: inline-block;
	list-style-type: none;
	background: #1d1233;
	padding: 0 5px 2px 5px;
	border-radius: 3px;
	transition: filter .3s ease;
}
.webengine-language-switcher li:hover { filter: brightness(120%); }
.webengine-language-switcher li a { color: #999; }
.webengine-language-switcher li a:hover { color: #fff !important; }

/* =========================================================
   HEADER INFO (online count, server time)
   ========================================================= */
.header-info-container {
	width: 100%;
	max-width: var(--obg-container-max);
	margin: 0 auto;
	text-align: right;
	padding: 0 20px;
}
.header-info-container .header-info {
	display: inline-block;
	width: 350px;
	max-width: 100%;
	background: rgba(0,0,0,.45);
	backdrop-filter: blur(6px);
	margin: 0;
	padding: 18px 20px;
	overflow: auto;
	box-shadow: 0 0 15px rgba(0,0,0,.7);
	border-radius: 6px;
	text-shadow: 1px 1px 3px #000;
	color: #fff;
	border: 1px solid rgba(216,181,106,.3);
	font-size: 12px;
}
.header-info-container .header-info .header-info-block { padding: 0; color: #aaa; }
.header-info-container .header-info .header-info-block #tServerTime,
.header-info-container .header-info .header-info-block #tLocalTime { color: #fff; }
.header-info-container .header-info .header-info-block #tServerDate,
.header-info-container .header-info .header-info-block #tLocalDate { color: #ccc; }
.header-info-container .header-info .header-info-block .online-count { color: #7fe0a0; }

.webengine-online-bar {
	width: 100%;
	background: #000;
	border: 1px solid #555;
	height: 8px;
	margin: 10px 0;
	padding: 0;
	border-radius: 4px;
	overflow: hidden;
}
.webengine-online-bar .webengine-online-bar-progress {
	height: 8px;
	background: linear-gradient(90deg, var(--obg-gold-deep), var(--obg-gold-bright));
	border-radius: 0 1px 1px 0;
}
.webengine-online-bar:hover { filter: brightness(120%); }

/* =========================================================
   PANELS / SIDEBAR
   ========================================================= */
.panel-sidebar, .panel-general, .promo-card, .home-box {
	background: var(--obg-panel) !important;
	border: 1px solid var(--obg-border) !important;
	border-radius: 6px;
	margin-bottom: 20px;
	overflow: hidden;
}
.panel-sidebar > .panel-heading {
	background: linear-gradient(90deg, var(--obg-gold-deep), var(--obg-gold)) !important;
	color: #fff !important;
	font-family: 'Cinzel', serif;
	border: 0;
	border-radius: 0;
}
.panel-sidebar .panel-title, .panel-sidebar .panel-title a {
	color: #fff !important;
	text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.panel-sidebar .panel-body { background: transparent; color: var(--obg-text); }
.panel-body .panel-title {
	color: var(--obg-gold);
	font-family: 'Cinzel', serif;
	font-size: 14px;
	border-bottom: 1px solid var(--obg-border);
	margin-bottom: 20px !important;
	font-weight: bold;
}

.panel-usercp { background: linear-gradient(160deg, #1d1233, #15151b); }
.panel-usercp ul { list-style: none; padding: 0; margin: 0; }
.panel-usercp ul li { display: table; width: 100%; line-height: 30px; }
.panel-usercp ul li a { color: var(--obg-text-dim) !important; font-weight: bold; }
.panel-usercp ul li a:hover, .panel-usercp ul li a:active { color: var(--obg-gold-bright) !important; }
.panel-usercp ul li img { position: relative; top: -2px; width: 25px; height: 25px; margin-right: 5px; }

.sidebar-banner {
	margin-bottom: 14px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--obg-border);
	box-shadow: 0 4px 14px rgba(0,0,0,.4);
	transition: transform .2s ease, box-shadow .2s ease;
}
.sidebar-banner:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 22px rgba(216,181,106,.4);
	border-color: var(--obg-gold);
}
.sidebar-banner img { width: 100%; display: block; }

.panel-addstats, .panel-downloads {
	margin-bottom: 30px;
	background: var(--obg-panel);
	border: 1px solid var(--obg-border);
	border-radius: 6px;
	color: var(--obg-text);
}
.panel-addstats .character-avatar img { width: 100px; height: auto; box-shadow: 0 0 5px #666; }
.panel-addstats .character-name {
	color: var(--obg-gold);
	font-family: 'Cinzel', serif;
	font-size: 18px;
	border-bottom: 1px solid var(--obg-border);
	padding: 20px 0;
	margin-bottom: 20px !important;
	font-weight: bold;
}
.download-description { font-size: 11px; position: relative; top: -7px; color: var(--obg-text-dim); }
.online-status-indicator { margin-left: 5px; }

.webengine-powered { color: var(--obg-text-dim) !important; }
.webengine-powered:hover { color: var(--obg-gold-bright) !important; }

/* =========================================================
   NEWS MODULE
   ========================================================= */
.panel-news {
	margin-bottom: 30px;
	color: var(--obg-text);
	background: var(--obg-panel);
	border: 1px solid var(--obg-border);
	border-radius: 6px;
}
.panel-news .panel-heading { padding: 12px 16px; background: rgba(0,0,0,.3); }
.panel-news .panel-title { color: var(--obg-gold); font-size: 22px; font-weight: bold; font-family: 'Cinzel', serif; }
.panel-news .panel-body { padding: 14px; }
.panel-news .panel-footer {
	border-top: 1px solid var(--obg-border);
	background: transparent;
	font-style: italic;
	font-size: 11px;
	height: 40px;
	color: var(--obg-text-dim);
}

.home-news-block .home-news-block-header h2 {
	padding: 0 !important;
	margin: 0 0 16px 0 !important;
	color: var(--obg-gold);
	font-size: 22px;
}
.home-news-block .home-news-block-header a {
	display: inline-block;
	padding-top: 5px;
	font-style: italic;
	font-size: 14px;
}
.home-news-block-article { margin-top: 10px; }
.home-news-block-article .home-news-block-article-type {
	display: block;
	border: 1px solid var(--obg-gold);
	padding: 5px;
	text-align: center;
	color: var(--obg-gold);
	border-radius: 3px;
	font-size: 10.5px;
	text-transform: uppercase;
}
.home-news-block-article .home-news-block-article-title-container { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-news-block-article .home-news-block-article-title, .home-news-block-article .home-news-block-article-date { line-height: 30px; }

/* Modern news cards grid (used by inc/home.php) */
.we-news-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.we-news-card {
	background: var(--obg-panel);
	border: 1px solid var(--obg-border);
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .25s ease, border-color .25s ease;
}
.we-news-card:hover { transform: translateY(-3px); border-color: var(--obg-gold); }
.we-news-card-thumb {
	display: block;
	height: 110px;
	background-size: cover;
	background-position: center;
	background-color: #1a1a20;
	filter: brightness(.75);
}
.we-news-card-body { padding: 14px; }
.we-news-card-tag { display: inline-block; width: auto; padding: 3px 10px; margin-bottom: 8px; }
.we-news-card-title { font-size: 15px; margin: 0 0 6px 0; line-height: 1.3; }
.we-news-card-title a { color: var(--obg-text); }
.we-news-card-title a:hover { color: var(--obg-gold-bright); }
.we-news-card-date { font-size: 11px; color: var(--obg-text-dim); display: block; }

/* =========================================================
   RANKINGS MODULE (páginas internas /rankings/*)
   ========================================================= */
.rankings-table { width: 100%; border-spacing: 0; border-collapse: collapse; }
.rankings-class-image { width: 30px; height: auto; box-shadow: 0 0 5px #000; border-radius: 50%; }
.rankings-table tr td {
	border-bottom: 1px solid var(--obg-border);
	padding: 10px;
	font-size: 16px;
	vertical-align: middle !important;
	text-align: center;
	color: var(--obg-text);
}
.rankings-table-place { color: var(--obg-gold); font-weight: bold; font-size: 22px; }
.rankings-table tr:first-child td { color: var(--obg-gold); border-bottom: 2px solid var(--obg-gold); }
.rankings-update-time { text-align: right; font-size: 11px; color: var(--obg-text-dim); padding: 10px 0; }

.rankings_menu { width: 100%; overflow: auto; text-align: center; margin-bottom: 10px; }
.rankings_menu span { width: 100%; display: inline-block; padding: 10px 0; font-size: 22px; color: var(--obg-gold); font-family: 'Cinzel', serif; }
.rankings_menu a {
	display: inline-block;
	width: 150px;
	border: 1px solid var(--obg-border);
	text-align: center;
	padding: 6px 0;
	margin: 3px;
	background: rgba(0,0,0,.3);
	border-radius: 4px;
	color: var(--obg-text-dim);
	transition: all .2s ease;
}
.rankings_menu a:hover { border-color: var(--obg-gold); color: var(--obg-gold-bright); }
.rankings_menu a.active { color: var(--obg-gold); border-color: var(--obg-gold); background: rgba(216,181,106,.08); }
.rankings_guild_logo tr td { border: 0 !important; padding: 0 !important; margin: 0 !important; }
.rankings-gens-img { width: auto !important; height: 30px !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }

.rankings-class-filter { display: inline-block; list-style: none; margin: 20px auto; padding: 10px 20px; border-radius: 10px; }
.rankings-class-filter li { display: inline-block; transition: filter .3s ease; margin-bottom: 10px; }
.rankings-class-filter li:hover { filter: grayscale(0%); }
.rankings-class-filter-selection { display: inline-block; width: 75px; text-align: center; color: var(--obg-text); font-size: 11px; cursor: pointer; }
.rankings-class-filter-selection:hover { color: var(--obg-text) !important; }
.rankings-class-filter-selection:hover img { filter: brightness(120%); }
.rankings-class-filter-selection img { width: 40px; height: auto; border-radius: 50%; margin-bottom: 5px; transition: filter .3s ease; box-shadow: 0 0 10px rgba(216,181,106,.3); }
.rankings-class-filter-grayscale { filter: grayscale(100%); }

/* Modern ranking widgets (used by inc/home.php) */
.we-ranking-panel .panel-heading, .we-events-panel .panel-heading { display: flex; align-items: center; justify-content: space-between; }
.we-btn-more { width: 24px; text-align: center; padding: 2px 0 !important; }
.we-ranking-table th { color: var(--obg-gold); font-size: 11px; text-transform: uppercase; border-bottom: 1px solid var(--obg-border); padding-bottom: 8px; }
.we-ranking-table td { padding: 7px 4px; font-size: 13px; border-bottom: 1px solid rgba(216,181,106,.12); }
.we-rank-medal { display: inline-block; width: 18px; height: 18px; line-height: 18px; border-radius: 50%; font-size: 10px; font-weight: bold; color: #1a0f0a; }
.we-rank-gold { background: #f0cb74; }
.we-rank-silver { background: #d6d6d6; }
.we-rank-bronze { background: #c98a4a; }
.we-rank-level { color: var(--obg-gold); font-weight: bold; }

/* Event timers (used by inc/home.php) */
.we-events-list { display: flex; flex-direction: column; gap: 10px; }
.we-event-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 10px;
	background: rgba(0,0,0,.25);
	border-radius: 4px;
	border: 1px solid rgba(216,181,106,.12);
}
.we-event-name { font-weight: bold; color: var(--obg-text); font-size: 13px; }
.we-event-countdown { color: var(--obg-gold); font-weight: bold; font-size: 13px; }
.event-schedule-open { color: #7fe0a0; }
.event-schedule-inprogress { color: var(--obg-gold); }
.panel-sidebar-events .smalltext { font-size: 11px; }

/* =========================================================
   GENERAL TABLES
   ========================================================= */
.myaccount-table { width: 100%; background: rgba(0,0,0,.25); border: 1px solid var(--obg-border); }
.myaccount-table tr td:first-child { color: var(--obg-text-dim); font-weight: bold; }
.myaccount-table tr td { border-bottom: 1px solid var(--obg-border); padding: 15px !important; }
.myaccount-table tr:last-child td { border: 0; }

.general-table-ui { width: 100%; table-layout: fixed; background: rgba(0,0,0,.25); border: 1px solid var(--obg-border); padding: 10px; margin: 10px 0; }
.general-table-ui tr td { padding: 5px; vertical-align: middle !important; text-align: center; }
.general-table-ui tr:first-child td { color: var(--obg-gold); }
.general-table-ui tr:nth-child(2n+2) td { background: rgba(255,255,255,.03); }
.general-table-ui img { width: 50px; height: auto; box-shadow: 0 0 5px #000; }

.tos_list li { color: #e8475a; font-weight: bold; font-size: 18px; margin-bottom: 40px; }
.tos_list li p { color: var(--obg-text-dim); text-align: justify; padding-right: 35px; font-size: 14px; font-weight: normal; text-transform: none; }

.table, .table-striped, .table-hover { color: var(--obg-text); }
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th { border-top: none !important; border-color: var(--obg-border); }
.table > thead > tr > th { vertical-align: bottom; border-bottom: 2px solid var(--obg-border); color: var(--obg-gold); }
.table-bordered { border: 1px solid var(--obg-border); }
.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th { border: 1px solid var(--obg-border); }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255,255,255,.03); }
.table-hover > tbody > tr:hover { background-color: rgba(216,181,106,.08) !important; }
.thumbnail { background-color: rgba(0,0,0,.3); border: 1px solid var(--obg-border); }
a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active { border-color: var(--obg-gold); }
.alert-danger { color: #ffe2e2; background-color: #502c2c; border-color: #724a4a; }
.alert-success { color: #d5ffd6; background-color: #406830; border-color: #82af70; }
.nopadding { padding: 0 !important; margin: 0 !important; }
.vcenter { display: inline-block; vertical-align: middle; float: none; }

/* =========================================================
   MY ACCOUNT CHARACTER LIST
   ========================================================= */
.myaccount-character-block { background: rgba(0,0,0,.3); border: 1px solid var(--obg-border); padding: 5px; border-radius: 4px; display: inline-block; margin: 0 auto; }
.myaccount-character-block img { width: 100px; height: auto; border-radius: 3px; transition: filter .3s ease; }
.myaccount-character-block img:hover { filter: brightness(120%); }
.myaccount-character-block-location { font-size: 12px; color: var(--obg-text-dim); margin-bottom: 20px; margin-top: 2px; line-height: 1.2; }
.myaccount-character-block-level { position: relative; top: -77px; display: inline-block; background: rgba(0,0,0,.6); padding: 0 5px; border-radius: 3px; color: var(--obg-gold); font-size: 10px; }
.myaccount-character-name a { font-weight: bold; color: var(--obg-gold); font-size: 16px; }

/* =========================================================
   PAYPAL
   ========================================================= */
.paypal-gateway-container { width: 100%; }
.paypal-gateway-content { background: #2a1f0e; border: 3px solid var(--obg-gold); padding: 15px; overflow: auto; border-radius: 6px; font-weight: bold; }
.paypal-gateway-logo { width: 100%; height: 100px; background: #221a0c url('../img/paypal-logo-200-68.png') no-repeat center; background-size: contain; margin-bottom: 15px; border-radius: 6px; }
.paypal-gateway-conversion-rate { margin: 0 auto; text-align: center; color: var(--obg-text); font-size: 18px; padding: 10px 0; }
.paypal-gateway-form { width: 100%; margin: 20px auto; text-align: center; }
.paypal-gateway-form div { display: inline-block; padding: 0 10px; color: var(--obg-text); font-size: 24px; }
.paypal-gateway-form input[type=text] { width: 60px; font-size: 24px; border: 3px solid var(--obg-gold); border-radius: 6px; color: var(--obg-gold); }
.paypal-gateway-continue { margin: 0 auto; text-align: center; }
.paypal-gateway-continue input[type=submit] { background: url('../img/paypal-submit.jpg') no-repeat; width: 200px; height: 40px; border: 0; }
.module-requirements { font-size: 12px; margin-top: 20px; }

/* =========================================================
   HOME — RESEÑA DEL SERVIDOR
   ========================================================= */
.legion-review {
	background: linear-gradient(135deg, rgba(139,107,46,.25), rgba(0,0,0,.45));
	border: 1px solid var(--obg-gold);
	border-radius: 8px;
	padding: 30px 34px;
	margin-bottom: 26px;
	box-shadow: 0 0 30px rgba(200,164,90,.15);
}
.legion-review h1 {
	color: var(--obg-gold-bright);
	font-size: 28px;
	margin: 0 0 12px 0;
	text-shadow: 0 0 14px rgba(216,181,106,.4);
}
.legion-review p { color: var(--obg-text); font-size: 14.5px; line-height: 1.7; max-width: 900px; margin: 0 0 16px 0; }
.legion-review-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.legion-review-tags span {
	display: inline-block;
	padding: 5px 14px;
	border: 1px solid var(--obg-gold);
	border-radius: 20px;
	font-size: 11.5px;
	color: var(--obg-gold);
	text-transform: uppercase;
	letter-spacing: .03em;
}

/* =========================================================
   HOME — SECTION TITLES
   ========================================================= */
.home-section-title {
	font-family: 'Cinzel', serif;
	font-size: 21px;
	color: var(--obg-gold);
	margin: 38px 0 18px 0;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--obg-border);
	display: flex;
	align-items: center;
	gap: 10px;
	text-shadow: 0 0 10px rgba(216,181,106,.3);
}

/* =========================================================
   HERO SLIDER (debajo de noticias)
   ========================================================= */
.legion-slider {
	position: relative;
	width: 100%;
	height: 320px;
	overflow: hidden;
	border-radius: 6px;
	margin-top: 20px;
	border: 1px solid var(--obg-border);
	box-shadow: 0 10px 30px -14px rgba(0,0,0,.7);
	background: #000;
}
.legion-slider-track { position: relative; width: 100%; height: 100%; }
.legion-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .8s ease;
	background-size: cover;
	background-position: center;
	background-color: #1a1a20;
	display: flex;
	align-items: center;
}
.legion-slide.is-active { opacity: 1; visibility: visible; }
.legion-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.88) 15%, rgba(0,0,0,.4) 60%, rgba(0,0,0,.1) 100%);
}
.legion-slide-content { position: relative; z-index: 2; padding: 0 40px; max-width: 560px; color: #fff; }
.legion-slide-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--obg-gold); margin-bottom: 8px; display: block; }
.legion-slide-title { font-family: 'Cinzel', serif; font-size: 30px; font-weight: 700; margin: 0 0 10px 0; line-height: 1.1; color: var(--obg-gold-bright); text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.legion-slide-text { font-size: 14px; color: #ddd; margin-bottom: 16px; line-height: 1.5; }
.legion-slide-btn {
	display: inline-block;
	padding: 9px 22px;
	background: linear-gradient(90deg, var(--obg-gold-deep), var(--obg-gold));
	color: #1a0f0a !important;
	font-weight: bold;
	border-radius: 4px;
	text-transform: uppercase;
	font-size: 12px;
	transition: transform .25s ease;
}
.legion-slide-btn:hover { transform: translateY(-2px); color: #1a0f0a !important; text-shadow: none; }
.legion-slider-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 7px; }
.legion-slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); cursor: pointer; border: 1px solid rgba(255,255,255,.4); transition: all .25s ease; }
.legion-slider-dot.is-active { background: var(--obg-gold); border-color: var(--obg-gold); width: 22px; border-radius: 5px; }
.legion-slider-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(0,0,0,.5); border: 1px solid var(--obg-border); color: #fff;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	font-size: 15px; transition: background .25s ease, color .25s ease;
}
.legion-slider-arrow:hover { background: var(--obg-gold); color: #1a0f0a; }
.legion-slider-arrow.prev { left: 14px; }
.legion-slider-arrow.next { right: 14px; }

/* =========================================================
   HOME — BOSSES + DROPS
   ========================================================= */
.legion-boss-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.legion-boss-card {
	background: var(--obg-panel);
	border: 1px solid var(--obg-border);
	border-radius: 6px;
	overflow: hidden;
	transition: transform .25s ease, border-color .25s ease;
}
.legion-boss-card:hover { transform: translateY(-5px); border-color: var(--obg-gold); }
.legion-boss-image {
	height: 150px;
	background-size: cover;
	background-position: center;
	background-color: #1a1a20;
}
.legion-boss-info { padding: 14px 16px 18px; }
.legion-boss-info h3 { font-size: 17px; color: var(--obg-gold-bright); margin: 0 0 4px 0; }
.legion-boss-map { font-size: 11px; color: var(--obg-text-dim); text-transform: uppercase; letter-spacing: .03em; }
.legion-boss-drops { margin-top: 12px; border-top: 1px dashed var(--obg-border); padding-top: 10px; }
.legion-boss-drops-title { font-size: 10.5px; text-transform: uppercase; color: var(--obg-gold); letter-spacing: .04em; }
.legion-boss-drops ul { list-style: none; padding: 0; margin: 8px 0 0 0; }
.legion-boss-drops li { font-size: 12.5px; color: var(--obg-text); padding: 3px 0; }
.legion-boss-drops li::before { content: "• "; color: var(--obg-gold); }

/* =========================================================
   HOME — RAZAS / CLASES
   ========================================================= */
.legion-class-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 14px;
}
.legion-class-card {
	background: var(--obg-panel);
	border: 1px solid var(--obg-border);
	border-radius: 6px;
	padding: 14px 10px;
	text-align: center;
	transition: transform .25s ease, border-color .25s ease;
}
.legion-class-card:hover { transform: translateY(-4px); border-color: var(--obg-gold); }
.legion-class-avatar {
	width: 64px;
	height: 64px;
	margin: 0 auto 10px auto;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--obg-gold);
}
.legion-class-avatar img { width: 100%; height: 100%; object-fit: cover; }
.legion-class-card h4 { font-size: 13px; color: var(--obg-gold-bright); margin: 0 0 6px 0; }
.legion-class-card p { font-size: 11.5px; color: var(--obg-text-dim); line-height: 1.4; }

/* =========================================================
   HOME — GALERÍA / CUADROS / PROMO
   ========================================================= */
.home-boxes { width: 100%; display: flex; justify-content: center; gap: 22px; padding: 30px 0 0; flex-wrap: wrap; }
.home-box { width: 300px; overflow: hidden; text-align: center; transition: transform .3s ease, box-shadow .3s ease; }
.home-box:hover { transform: translateY(-5px); box-shadow: 0 0 20px rgba(216,181,106,.3); }
.home-box img { width: 100%; height: auto; display: block; }
.home-box h3 { margin: 14px 0 8px; color: var(--obg-gold); font-weight: bold; font-size: 16px; }
.home-box p { padding: 0 14px 14px; color: var(--obg-text-dim); font-size: 13px; }

.promo-container { width: 100%; margin: 20px auto; }
.promo-card { overflow: hidden; margin-bottom: 24px; }
.promo-card img { width: 100%; display: block; }
.promo-content { padding: 18px; }
.promo-content h2 { margin: 0 0 8px; color: var(--obg-gold); font-size: 22px; }
.promo-content p { color: var(--obg-text-dim); margin-bottom: 16px; line-height: 1.6; }
.promo-btn {
	display: inline-block;
	background: linear-gradient(90deg, var(--obg-gold-deep), var(--obg-gold));
	color: #1a0f0a !important;
	padding: 9px 22px;
	border-radius: 5px;
	font-weight: bold;
}
.promo-btn:hover { filter: brightness(1.1); text-shadow: none; }

.galeria-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: var(--obg-container-max); margin: 30px auto; padding: 0 20px; }
.item-galeria { background: #1b1b1b; border-radius: 10px; overflow: hidden; text-align: center; box-shadow: 0 0 15px rgba(0,0,0,.4); transition: transform .3s ease; }
.item-galeria:hover { transform: translateY(-5px); }
.item-galeria img { width: 100%; height: 220px; object-fit: cover; cursor: pointer; transition: transform .4s ease, filter .4s ease; }
.item-galeria img:hover { transform: scale(1.06); filter: brightness(1.12); }
.item-galeria p { padding: 14px; color: var(--obg-text); font-size: 14px; }

.visor { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.95); justify-content: center; align-items: center; z-index: 9999; }
.visor img { max-width: 90%; max-height: 90%; border-radius: 10px; box-shadow: 0 0 40px rgba(255,255,255,.2); }

/* =========================================================
   HOME — FILA STAFF + REDES SOCIALES
   ========================================================= */
.legion-bottom-row {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 30px;
	align-items: start;
	margin-bottom: 30px;
}

/* Staff section */
.legion-staff-section .home-section-title { margin-top: 0; }
.legion-staff-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.legion-staff-card {
	background: var(--obg-panel);
	border: 1px solid var(--obg-border);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.legion-staff-card:hover {
	transform: translateY(-5px);
	border-color: var(--obg-gold);
	box-shadow: 0 8px 28px -10px rgba(216,181,106,.35);
}
.legion-staff-avatar {
	width: 100%;
	height: 160px;
	overflow: hidden;
	background: #1a1a20;
	position: relative;
}
.legion-staff-avatar::after {
	content: "";
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 50px;
	background: linear-gradient(transparent, rgba(0,0,0,.65));
}
.legion-staff-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	filter: brightness(.9);
	transition: filter .3s ease;
}
.legion-staff-card:hover .legion-staff-avatar img { filter: brightness(1.05); }

.legion-staff-info {
	padding: 12px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1;
}
.legion-staff-name {
	font-family: 'Cinzel', serif;
	font-size: 15px;
	color: var(--obg-text);
	margin: 0;
	letter-spacing: .01em;
}
.legion-staff-role {
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .1em;
	display: inline-block;
}
.legion-staff-role--gold   { color: var(--obg-gold-bright); }
.legion-staff-role--silver { color: #c8c8d8; }
.legion-staff-role--blue   { color: #7ab8f5; }

.legion-staff-desc {
	font-size: 11.5px;
	color: var(--obg-text-dim);
	line-height: 1.45;
	margin: 4px 0 0 0;
	flex: 1;
}
.legion-staff-socials {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--obg-border);
}
.legion-staff-social-icon {
	display: inline-flex;
	width: 22px;
	height: 22px;
	border-radius: 4px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: .7;
	transition: opacity .2s ease, transform .2s ease;
	cursor: pointer;
}
.legion-staff-social-icon:hover { opacity: 1; transform: scale(1.15); }
/* Colores por red social (fondo) */
.legion-sicon--discord   { background-color: #5865f2; border-radius: 5px; }
.legion-sicon--facebook  { background-color: #1877f2; border-radius: 5px; }
.legion-sicon--youtube   { background-color: #ff0000; border-radius: 5px; }
.legion-sicon--whatsapp  { background-color: #25d366; border-radius: 5px; }
.legion-sicon--instagram { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-radius: 5px; }
/* SVG incrustado como data-uri para cada ícono */
.legion-sicon--discord   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20.32 4.37A19.79 19.79 0 0015.43 2.86a.07.07 0 00-.08.04 13.8 13.8 0 00-.61 1.25 18.27 18.27 0 00-5.49 0 12.64 12.64 0 00-.62-1.25.07.07 0 00-.07-.04 19.74 19.74 0 00-4.88 1.51.07.07 0 00-.03.03C.53 9.05-.32 13.58.1 18.06a.08.08 0 00.03.05 19.9 19.9 0 005.99 3.03.08.08 0 00.08-.03 14.2 14.2 0 001.23-1.99.08.08 0 00-.04-.11 13.1 13.1 0 01-1.87-.89.07.07 0 010-.13c.13-.1.25-.2.37-.29a.07.07 0 01.08-.01c3.93 1.79 8.18 1.79 12.06 0a.07.07 0 01.08.01c.12.1.24.2.37.29a.07.07 0 010 .13 12.3 12.3 0 01-1.87.89.08.08 0 00-.04.11c.36.7.77 1.36 1.23 1.99a.08.08 0 00.08.03 19.84 19.84 0 006-3.03.08.08 0 00.03-.05c.5-5.18-.84-9.67-3.55-13.66a.06.06 0 00-.03-.03zM8.02 15.33c-1.18 0-2.16-1.09-2.16-2.42s.96-2.42 2.16-2.42c1.21 0 2.17 1.1 2.16 2.42 0 1.33-.96 2.42-2.16 2.42zm7.97 0c-1.18 0-2.16-1.09-2.16-2.42s.96-2.42 2.16-2.42c1.21 0 2.17 1.1 2.16 2.42 0 1.33-.95 2.42-2.16 2.42z'/%3E%3C/svg%3E"); }
.legion-sicon--facebook  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M24 12.07C24 5.41 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.04V9.41c0-3.02 1.8-4.7 4.54-4.7 1.31 0 2.68.24 2.68.24v2.97h-1.5c-1.5 0-1.96.93-1.96 1.89v2.26h3.32l-.53 3.5h-2.8V24C19.62 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E"); }
.legion-sicon--youtube   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M23.5 6.19a3.02 3.02 0 00-2.12-2.14C19.53 3.5 12 3.5 12 3.5s-7.53 0-9.38.55A3.02 3.02 0 00.5 6.19C0 8.05 0 12 0 12s0 3.95.5 5.81a3.02 3.02 0 002.12 2.14C4.47 20.5 12 20.5 12 20.5s7.53 0 9.38-.55a3.02 3.02 0 002.12-2.14C24 15.95 24 12 24 12s0-3.95-.5-5.81zM9.6 15.6V8.4l6.26 3.6-6.26 3.6z'/%3E%3C/svg%3E"); }
.legion-sicon--whatsapp  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15s-.77.97-.94 1.17c-.17.2-.35.22-.64.07a8.1 8.1 0 01-2.38-1.47 8.93 8.93 0 01-1.65-2.05c-.17-.3-.02-.46.13-.61.13-.13.3-.35.44-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.61-.91-2.2-.24-.58-.48-.5-.67-.51h-.57c-.2 0-.52.07-.79.37C7.8 7.05 7 7.8 7 9.3c0 1.5 1.07 2.95 1.22 3.15.15.2 2.12 3.24 5.14 4.54.72.31 1.28.5 1.72.63.72.23 1.38.2 1.9.12.58-.09 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.1-.27-.17-.57-.3zM12.05 21.8h-.01a9.87 9.87 0 01-5.03-1.37l-.36-.21-3.73.98 1-3.65-.23-.37a9.86 9.86 0 01-1.51-5.27c0-5.45 4.44-9.88 9.9-9.88a9.82 9.82 0 016.99 2.9 9.82 9.82 0 012.9 6.98c0 5.45-4.44 9.89-9.9 9.89zm8.42-18.3A11.82 11.82 0 0012.04 0C5.38 0 0 5.37 0 12.02c0 2.12.55 4.19 1.6 6.02L0 24l6.12-1.6a12.04 12.04 0 005.91 1.51h.01C18.7 23.91 24 18.55 24 11.9a11.9 11.9 0 00-3.53-8.4z'/%3E%3C/svg%3E"); }
.legion-sicon--instagram { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 3.25.15 4.77 1.69 4.92 4.92.06 1.27.07 1.65.07 4.85 0 3.2-.01 3.58-.07 4.85-.15 3.23-1.66 4.77-4.92 4.92-1.27.06-1.64.07-4.85.07-3.2 0-3.58-.01-4.85-.07-3.26-.15-4.77-1.7-4.92-4.92C2.17 15.58 2.16 15.2 2.16 12c0-3.2.01-3.58.07-4.85C2.38 3.86 3.9 2.31 7.15 2.23 8.42 2.17 8.8 2.16 12 2.16zm0-2.16C8.74 0 8.33.01 7.05.07 2.7.27.27 2.7.07 7.05.01 8.33 0 8.74 0 12c0 3.26.01 3.67.07 4.95.2 4.36 2.62 6.78 6.98 6.98C8.33 23.99 8.74 24 12 24c3.26 0 3.67-.01 4.95-.07 4.35-.2 6.78-2.62 6.98-6.98.06-1.28.07-1.69.07-4.95 0-3.26-.01-3.67-.07-4.95-.2-4.35-2.62-6.78-6.98-6.98C15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 100 12.32A6.16 6.16 0 0012 5.84zM12 16a4 4 0 110-8 4 4 0 010 8zm6.4-11.85a1.44 1.44 0 100 2.88 1.44 1.44 0 000-2.88z'/%3E%3C/svg%3E"); }

/* Redes Sociales section — barra horizontal compacta */
.legion-social-section .home-section-title { margin-top: 0; }

/* Contenedor de la barra de redes sociales (fuera del legion-bottom-row) */
.legion-socials-bar {
	margin-bottom: 16px;
}
.legion-social-list {
	display: flex;
	flex-direction: row;   /* HORIZONTAL */
	flex-wrap: wrap;
	gap: 12px;
}
.legion-social-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	background: var(--obg-panel);
	border: 1px solid var(--obg-border);
	border-radius: 40px;   /* píldora */
	text-decoration: none;
	transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
	flex: 0 0 auto;        /* no estira, tamaño natural */
}
.legion-social-item:hover {
	transform: translateY(-3px);
	border-color: var(--obg-gold);
	background: rgba(216,181,106,.08);
	box-shadow: 0 6px 20px -8px rgba(216,181,106,.4);
}
.legion-social-item-icon {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.legion-social-item-icon svg { width: 16px; height: 16px; }

/* Colores de fondo de íconos por red */
.legion-social-item--facebook  .legion-social-item-icon { background: #1877f2; }
.legion-social-item--instagram .legion-social-item-icon { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.legion-social-item--youtube   .legion-social-item-icon { background: #ff0000; }
.legion-social-item--discord   .legion-social-item-icon { background: #5865f2; }
.legion-social-item--whatsapp  .legion-social-item-icon { background: #25d366; }
.legion-social-item--twitter   .legion-social-item-icon { background: #000; }

.legion-social-item-label {
	font-family: 'Cinzel', serif;
	font-size: 12px;
	font-weight: bold;
	color: var(--obg-text);
	letter-spacing: .04em;
	white-space: nowrap;
}

/* =========================================================
   EFECTOS GLOBALES DE LUZ Y ANIMACIONES
   ========================================================= */
@keyframes glowPulse {
	0%,100% { box-shadow: 0 0 8px rgba(216,181,106,.25), 0 0 20px rgba(216,181,106,.1); }
	50%      { box-shadow: 0 0 16px rgba(216,181,106,.5), 0 0 40px rgba(216,181,106,.2); }
}
@keyframes shimmerText {
	0%   { background-position: -200% center; }
	100% { background-position: 200% center; }
}
@keyframes floatUp {
	0%   { transform: translateY(0) rotate(0deg); opacity: .6; }
	100% { transform: translateY(-120px) rotate(20deg); opacity: 0; }
}
@keyframes countUp {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes orbPulse {
	0%,100% { transform: scale(1); opacity: .8; }
	50%      { transform: scale(1.4); opacity: 1; }
}
@keyframes scanline {
	0%   { background-position: 0 0; }
	100% { background-position: 0 4px; }
}
@keyframes borderGlow {
	0%,100% { border-color: rgba(216,181,106,.3); }
	50%      { border-color: rgba(216,181,106,.8); }
}

/* Títulos de sección con shimmer dorado */
.legion-glow-title {
	position: relative;
	overflow: hidden;
}
.legion-glow-title::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	height: 2px;
	width: 100%;
	background: linear-gradient(90deg, transparent, var(--obg-gold), transparent);
	background-size: 200% 100%;
	animation: shimmerText 3s linear infinite;
}

/* Scanlines sutiles sobre paneles (efecto CRT gaming) */
.panel-sidebar::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		rgba(0,0,0,.04) 2px,
		rgba(0,0,0,.04) 4px
	);
	pointer-events: none;
	border-radius: 6px;
	animation: scanline 0.5s linear infinite;
	z-index: 0;
}
.panel-sidebar { position: relative; }

/* Paneles con glow animado al hover */
.panel-sidebar:hover,
.legion-boss-card:hover,
.legion-admin-card:hover,
.legion-evt-card:hover {
	animation: glowPulse 2s ease infinite;
}

/* =========================================================
   RANKINGS — Flexbox horizontal, alineados siempre
   (Flexbox maneja celdas vacías sin crear huecos, a diferencia
    de CSS Grid que deja espacios cuando un panel no tiene datos)
   ========================================================= */
/* Neutralizar Bootstrap en todos los contenedores */
.legion-rankings-grid,
.legion-boss-grid,
.legion-admin-grid,
.legion-class-grid,
.legion-events-special-grid,
.legion-live-grid,
.legion-socials-bar,
.legion-bottom-row {
	float: none !important;
	clear: both;
	width: 100%;
	box-sizing: border-box;
}

/*=========================================
  RANKINGS HORIZONTALES — solución final
=========================================*/
.legion-rankings-grid {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-start;
	margin-bottom: 30px;
	width: 100%;
}

/* Cada celda ocupa exactamente 1/3 del ancho menos el gap */
.legion-rank-cell {
	flex: 0 0 calc(33.333% - 11px);
	max-width: calc(33.333% - 11px);
	min-width: 0;
	box-sizing: border-box;
	float: none !important;
}

/* Si una celda está vacía (sin panel adentro), no ocupa espacio */
.legion-rank-cell:empty {
	display: none !important;
}

/* Los paneles dentro de cada celda llenan todo el alto */
.legion-rank-cell .panel-sidebar,
.legion-rank-cell .panel {
	height: 100%;
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
}

.legion-rank-cell .we-ranking-body,
.legion-rank-cell .we-events-body {
	flex: 1;
}


/* =========================================================
   BOSSES — Tooltip interactivo al hover sobre la imagen
   ========================================================= */
.legion-boss-image-wrap {
	position: relative;
	overflow: visible;
	cursor: pointer;
}
.legion-boss-image {
	height: 300px;
	background-size: cover;
	background-position: center;
	background-color: #1a1a20;
	transition: filter .35s ease, transform .35s ease;
}
.legion-boss-card:hover .legion-boss-image {
	filter: brightness(1.15) saturate(1.2);
	transform: scale(1.02);
}
/* Shimmer de luz que cruza la imagen al hover */
.legion-boss-shimmer {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%);
	background-size: 200% 100%;
	background-position: -200% 0;
	transition: background-position .6s ease;
	pointer-events: none;
}
.legion-boss-card:hover .legion-boss-shimmer {
	background-position: 200% 0;
}

/* Tooltip */
.legion-boss-tooltip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	width: 240px;
	background: rgba(10,6,18,.97);
	border: 1px solid var(--obg-gold);
	border-radius: 8px;
	padding: 14px 16px 12px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
	z-index: 200;
	box-shadow: 0 8px 32px rgba(0,0,0,.7), 0 0 20px rgba(216,181,106,.25);
}
.legion-boss-image-wrap:hover .legion-boss-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.legion-boss-tooltip-head {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(216,181,106,.25);
}
.legion-boss-tooltip-name {
	font-family: 'Cinzel', serif;
	font-size: 15px;
	color: var(--obg-gold-bright);
	font-weight: bold;
}
.legion-boss-tooltip-map { font-size: 11px; color: var(--obg-text-dim); }
.legion-boss-tooltip-label {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--obg-gold);
	display: block;
	margin-bottom: 8px;
}
.legion-boss-tooltip ul { list-style: none; padding: 0; margin: 0; }
.legion-boss-tooltip li {
	font-size: 12.5px;
	color: var(--obg-text);
	padding: 4px 0;
	border-bottom: 1px dashed rgba(255,255,255,.06);
	display: flex;
	align-items: center;
	gap: 6px;
}
.legion-boss-tooltip li::before { content: "◆"; color: var(--obg-gold); font-size: 8px; }
.legion-boss-tooltip-arrow {
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 14px; height: 8px;
	overflow: hidden;
}
.legion-boss-tooltip-arrow::before {
	content: "";
	display: block;
	width: 10px; height: 10px;
	background: rgba(10,6,18,.97);
	border: 1px solid var(--obg-gold);
	transform: rotate(45deg) translate(-4px, -4px);
}

/* =========================================================
   ADMINISTRADORES — bloque horizontal tipo referencia
   ========================================================= */
.legion-admin-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 8px;
	width: 100%;
}
.legion-admin-card {
	background: var(--obg-panel);
	border: 1px solid var(--obg-border);
	border-radius: 8px;
	overflow: hidden;
	/* Layout: imagen arriba, texto abajo — tarjeta vertical */
	display: flex;
	flex-direction: column;
	transition: transform .3s ease, border-color .3s ease;
	position: relative;
}
.legion-admin-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(216,181,106,.04) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}
.legion-admin-card:hover {
	transform: translateY(-6px);
	border-color: var(--obg-gold);
}
.legion-admin-img-wrap {
	position: relative;
	width: 100%;
	height: 180px;
	overflow: hidden;
	flex-shrink: 0;
	/* Placeholder visual elegante mientras carga / si no hay imagen */
	background: linear-gradient(160deg, #1d1233 0%, #2a1a48 50%, #1a1030 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Icono placeholder cuando no hay foto */
.legion-admin-img-wrap::before {
	content: "⚔";
	position: absolute;
	font-size: 48px;
	opacity: .15;
	z-index: 0;
	pointer-events: none;
}
.legion-admin-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform .4s ease, filter .4s ease;
	display: block;
	position: relative;
	z-index: 1;
	/* Si la imagen carga correctamente, tapa el placeholder */
}
.legion-admin-card:hover .legion-admin-img-wrap img {
	transform: scale(1.06);
	filter: brightness(1.08);
}
/* Borde dorado superior que indica estado del GM */
.legion-admin-card::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--obg-gold), transparent);
	opacity: .5;
	transition: opacity .3s ease;
}
.legion-admin-card:hover::after { opacity: 1; }

.legion-admin-img-glow {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 60px;
	background: linear-gradient(transparent, rgba(10,6,18,.85));
	z-index: 2;
}
.legion-admin-body {
	padding: 14px 16px 18px;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	flex: 1;
	width: 100%;
}
.legion-admin-name {
	font-family: 'Cinzel', serif;
	font-size: 15px;
	color: var(--obg-text);
	margin: 0;
}
.legion-admin-role {
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .1em;
}
.legion-admin-desc {
	font-size: 12px;
	color: var(--obg-text-dim);
	line-height: 1.5;
	margin: 4px 0 0 0;
	flex: 1;
}
.legion-admin-socials {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--obg-border);
	width: 100%;
}

/* =========================================================
   EVENTOS ESPECIALES — 4 tarjetas en fila horizontal
   Cada tarjeta: imagen a la izquierda, info a la derecha
   ========================================================= */
.legion-events-special-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-bottom: 8px;
	width: 100%;
}
.legion-evt-card {
	position: relative;
	background: var(--obg-panel);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 10px;
	overflow: hidden;
	transition: transform .3s ease, box-shadow .3s ease;
	display: flex;
	flex-direction: column; /* imagen arriba, info abajo dentro de la tarjeta */
}
.legion-evt-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 36px -12px var(--evt-color, #d8b56a);
	border-color: var(--evt-color, #d8b56a);
}
.legion-evt-glow-border {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--evt-color, #d8b56a);
	box-shadow: 0 0 14px var(--evt-color, #d8b56a);
	z-index: 2;
}
/* Imagen del evento */
.legion-evt-img-wrap {
	position: relative;
	width: 100%;
	height: 140px;
	overflow: hidden;
	flex-shrink: 0;
}
.legion-evt-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .4s ease;
	display: block;
}
.legion-evt-card:hover .legion-evt-img-wrap img {
	transform: scale(1.07);
}
.legion-evt-img-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,.2) 0%, rgba(10,6,18,.6) 100%);
}
.legion-evt-big-icon {
	position: absolute;
	bottom: 8px;
	right: 12px;
	font-size: 28px;
	filter: drop-shadow(0 0 8px rgba(0,0,0,.6));
	z-index: 1;
}
/* Texto del evento */
.legion-evt-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}
.legion-evt-name {
	font-family: 'Cinzel', serif;
	font-size: 15px;
	color: var(--obg-gold-bright);
	margin: 0;
}
.legion-evt-horario {
	font-family: monospace;
	font-size: 11px;
	color: var(--obg-gold);
	letter-spacing: .02em;
}
.legion-evt-desc {
	font-size: 12px;
	color: var(--obg-text-dim);
	line-height: 1.5;
	margin: 0;
	flex: 1;
}
.legion-evt-reward {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-top: 10px;
	border-top: 1px dashed rgba(255,255,255,.08);
}
.legion-evt-reward-label {
	font-size: 9.5px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--obg-gold);
}
.legion-evt-reward-val {
	font-size: 11px;
	color: var(--obg-text);
	line-height: 1.4;
}

/* =========================================================
   SERVIDOR EN VIVO — contadores animados
   ========================================================= */
.legion-live-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	background: var(--obg-border);
	border: 1px solid var(--obg-border);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 8px;
}
.legion-live-card {
	background: rgba(15,8,28,.85);
	padding: 22px 14px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	transition: background .3s ease;
}
.legion-live-card:hover { background: rgba(30,18,50,.95); }
.legion-live-orb {
	width: 10px; height: 10px;
	border-radius: 50%;
	animation: orbPulse 2s ease infinite;
}
.legion-live-orb--green  { background: #7fe0a0; box-shadow: 0 0 8px #7fe0a0; }
.legion-live-orb--gold   { background: var(--obg-gold); box-shadow: 0 0 8px var(--obg-gold); }
.legion-live-orb--blue   { background: #7ab8f5; box-shadow: 0 0 8px #7ab8f5; }
.legion-live-orb--violet { background: #b56bf0; box-shadow: 0 0 8px #b56bf0; }
.legion-live-orb--red    { background: #e8475a; box-shadow: 0 0 8px #e8475a; }
.legion-live-num {
	font-family: 'Cinzel', serif;
	font-size: 26px;
	font-weight: bold;
	color: var(--obg-gold-bright);
	animation: countUp .6s ease both;
	display: block;
	min-height: 34px;
}
.legion-live-label {
	font-size: 11px;
	color: var(--obg-text-dim);
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1200px) {
	:root { --obg-container-max: 96vw; }
}

@media (max-width: 991px) {
	.we-news-grid { grid-template-columns: 1fr; }
	.legion-boss-grid { grid-template-columns: repeat(2, 1fr); }
	.legion-class-grid { grid-template-columns: repeat(4, 1fr); }
	.header-info-container .header-info { width: 100%; }
	.legion-slider { height: 280px; }
	.legion-bottom-row { grid-template-columns: 1fr; }
	.legion-staff-grid { grid-template-columns: repeat(2, 1fr); }
	/* Rankings: 2 por fila en tablet */
	.legion-rankings-grid .legion-rank-cell { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); }
	.legion-admin-grid { grid-template-columns: repeat(2, 1fr); }
	.legion-events-special-grid { grid-template-columns: repeat(2, 1fr); }
	.legion-live-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
	#header { padding: 22px 0 10px 0; }
	.webengine-mu-logo { max-height: 72px; }

	#menu-toggle { display: block; }
	#navbar ul { display: none; width: 100%; flex-direction: column; }
	#navbar.active ul { display: flex; }
	#navbar ul li { display: block; width: 100%; }
	#navbar ul li a { display: block; padding: 12px 16px; }

	.global-top-bar-content .row > div { width: 100%; text-align: center !important; margin-bottom: 4px; }
	.header-info-container { text-align: center; }
	#content { padding: 10px 12px 0 12px; }

	.legion-review { padding: 20px; }
	.legion-review h1 { font-size: 22px; }

	.legion-slider { height: 240px; }
	.legion-slide-content { padding: 0 20px; max-width: 100%; }
	.legion-slide-title { font-size: 20px; }
	.legion-slide-text { font-size: 12.5px; margin-bottom: 10px; }
	.legion-slider-arrow { width: 28px; height: 28px; font-size: 12px; }

	.legion-boss-grid { grid-template-columns: 1fr 1fr; }
	.legion-class-grid { grid-template-columns: repeat(3, 1fr); }
	.legion-staff-grid { grid-template-columns: repeat(2, 1fr); }
	/* Rankings: 1 por fila en móvil */
	.legion-rankings-grid .legion-rank-cell { flex: 0 0 100%; max-width: 100%; }
	.legion-admin-grid { grid-template-columns: 1fr 1fr; }
	.legion-events-special-grid { grid-template-columns: 1fr 1fr; }
	.legion-live-grid { grid-template-columns: repeat(2, 1fr); }

	.home-boxes { gap: 16px; }
	.home-box { width: 100%; }

	.galeria-container { grid-template-columns: repeat(2, 1fr); }
	.rankings-table tr td { font-size: 13px; padding: 7px; }
	.rankings_menu a { width: 46%; }
	.page-title { font-size: 22px; }
	.footer { padding: 24px; }
}

@media (max-width: 480px) {
	.legion-boss-grid { grid-template-columns: 1fr; }
	.legion-class-grid { grid-template-columns: repeat(2, 1fr); }
	.legion-staff-grid { grid-template-columns: 1fr 1fr; }
	.legion-admin-grid { grid-template-columns: 1fr; }
	.legion-events-special-grid { grid-template-columns: 1fr; }
	.legion-live-grid { grid-template-columns: repeat(2, 1fr); }
	.galeria-container { grid-template-columns: 1fr; }
	.legion-slide-title { font-size: 18px; }
	.legion-slider { height: 300px; }
}
/* Alinear los módulos de Rankings */
.legion-rank-cell{
    display: flex;
    align-items: flex-start;
}

.legion-rank-cell .panel{
    width: 100%;
    margin-top: 0 !important;
}