/* ============================================================================
   EpicMU — WebEngine 1.2.7 Template
   Palette: deep space blue background, cyan glow accents, gold CTAs.
   ============================================================================ */

:root {
	--bg: #070910;
	--bg-radial: radial-gradient(ellipse at 50% -10%, #1c2c46 0%, #0b0e16 45%, #070910 100%);
	--panel: #111620;
	--panel-2: #0c1017;
	--panel-head: linear-gradient(180deg, #243a52, #15263a);
	--border: #263145;
	--border-2: #354c62;
	--gold: #d9ad58;
	--gold-light: #f1d38a;
	--cyan: #4fd6e8;
	--cyan-glow: #38c6ff;
	--pink: #d8649e;
	--green: #69d69a;
	--text: #d9dce4;
	--muted: #8892a3;
	--muted-2: #616c80;
	--radius: 0px;
	--font: Arial, Helvetica, sans-serif;
	--font-head: Georgia, 'Times New Roman', serif;
	--font-mono: 'Consolas', 'Courier New', monospace;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
	margin: 0; background: var(--bg-radial); color: var(--text);
	font-family: var(--font); font-size: 13px; line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { max-width: 100%; display: block; }

/* ── topbar / nav ─────────────────────────────────────────────────────── */
.topbar {
	position: sticky; top: 0; z-index: 30;
	display: flex; align-items: center; justify-content: center; gap: 34px;
	height: 46px; padding: 0 4%;
	background: rgba(3,7,13,.95); border-bottom: 1px solid #0e1c2d;
	backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 9px; margin-right: auto; color: #fff; font-size: 18px; font-weight: 800; letter-spacing: 3px; }
.brand span { color: var(--gold); }
.brand-mark { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--gold); color: var(--gold); font: 700 16px Georgia, serif; transform: skew(-8deg); }
.brand-logo { height: 38px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { position: relative; color: #c7cedb; font-size: 10px; font-weight: 700; letter-spacing: 1.3px; padding: 4px 0; white-space: nowrap; }
.nav a:hover { color: #fff; }
.nav a.active { color: var(--cyan); }
.nav a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -15px; height: 2px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.nav small { position: relative; top: -6px; margin-left: 3px; color: var(--pink); font-size: 7px; }
.top-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.top-actions a { font-size: 10px; font-weight: 700; letter-spacing: 1.3px; color: #c7cedb; }
.top-actions a:hover { color: #fff; }
.download-btn-sm { border: 1px solid #75623b; padding: 8px 14px; color: var(--gold) !important; }
.menu-toggle { display: none; background: none; color: var(--gold); border: 1px solid #75623b; padding: 7px 12px; cursor: pointer; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero {
	position: relative; height: min(46vw, 560px); min-height: 380px; overflow: hidden;
	background: linear-gradient(90deg, #050a1299 0%, #0d1f3055 40%, transparent 65%), url('../img/hero-bg.png');
	background-position: center 20%; background-size: cover;
}
.hero::after { content: ''; position: absolute; inset: auto 0 0; height: 90px; background: linear-gradient(transparent, var(--bg)); }
.hero-copy { position: relative; z-index: 2; text-align: left; padding: 110px 0 0 6%; } /* ✏️ EDITA AQUÍ: sube/baja el logo cambiando este primer valor (110px) */
.hero-logo-img { max-width: min(520px, 55%); width: 100%; height: auto; filter: drop-shadow(0 0 24px rgba(56,198,255,.35)); margin-bottom: 24px; }
.hero-copy .eyebrow { color: var(--cyan); font: 700 10px var(--font-mono); letter-spacing: 4px; margin-bottom: 6px; }
.hero-copy h1 {
	margin: 6px 0 0; font: 700 74px var(--font-head); letter-spacing: 1px; color: #eaf3fb;
	text-shadow: 0 0 3px #fff, 0 0 22px var(--cyan-glow), 0 0 55px rgba(56,198,255,.5);
}
.hero-copy h1 span { color: var(--cyan); }
.hero-copy .season-tag { display: block; font: 700 22px var(--font-head); letter-spacing: 4px; color: #e8edf5; text-shadow: 0 0 10px var(--cyan-glow); margin-bottom: -8px; }
.hero-copy p { margin: 14px 0 22px; color: #a6b2c6; letter-spacing: 3px; font-size: 11px; }
.hero-cta {
	display: inline-flex; align-items: center; gap: 14px;
	background: linear-gradient(#e7c474, #b58636); border: 1px solid var(--gold-light);
	color: #16120a; font-weight: 800; letter-spacing: 1px; padding: 13px 26px;
	transition: filter .25s ease, transform .2s ease;
}
.hero-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hero-cta b { font-size: 18px; }

.server-clock {
	position: absolute; z-index: 4; left: 6%; bottom: 14%;
	background: rgba(2,8,14,.72); border: 1px solid #163049; padding: 12px 16px;
	display: flex; flex-direction: column; gap: 5px; color: var(--cyan); font: 11px var(--font-mono);
	backdrop-filter: blur(3px);
}
.server-clock span b { color: #fff; margin-left: 6px; }

.server-strip {
	position: absolute; z-index: 3; bottom: 20px; left: 6%; right: 6%;
	display: flex; justify-content: space-between; color: #aab0be; font: 11px var(--font-mono);
}
.server-strip strong { color: #fff; }
.server-strip em { color: var(--gold); font-style: normal; }
.green-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); margin-right: 7px; }

/* ── layout ───────────────────────────────────────────────────────────── */
.content-grid {
	display: grid; grid-template-columns: 250px minmax(0,1fr) 260px; gap: 18px;
	max-width: 1280px; margin: -1px auto 0; padding: 26px 4% 50px; align-items: start;
}
.col { display: flex; flex-direction: column; gap: 18px; }

.panel { background: var(--panel); border: 1px solid var(--border); box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.panel-title {
	display: flex; align-items: center; gap: 10px; padding: 13px 15px;
	background: var(--panel-head); border-bottom: 1px solid var(--border-2);
	color: #dfeaf5; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
}
.panel-title i { height: 1px; flex: 1; background: linear-gradient(90deg, #4a5772, transparent); }

/* ── flama animada decorativa (junto al título de PLAYER LOGIN) ────────── */
.flame-icon {
	display: inline-block; width: 26px; height: 34px; margin: -6px 2px -6px 0; vertical-align: middle;
	background-image: url('../img/flame/fire_1.png'); background-size: contain; background-repeat: no-repeat; background-position: center;
	animation: flameFlicker .6s steps(1) infinite;
	filter: drop-shadow(0 0 6px rgba(79,214,232,.8)) brightness(1.6) saturate(1.4);
}
@keyframes flameFlicker {
	0%   { background-image: url('../img/flame/fire_1.png'); }
	25%  { background-image: url('../img/flame/fire_2.png'); }
	50%  { background-image: url('../img/flame/fire_3.png'); }
	75%  { background-image: url('../img/flame/fire_4.png'); }
	100% { background-image: url('../img/flame/fire_1.png'); }
}
.panel-body { padding: 16px; background: linear-gradient(180deg, #14202f, #0c1622); }

/* ── login panel ──────────────────────────────────────────────────────── */
.login-panel input:not([type=checkbox]) {
	display: block; width: 100%; background: #090d14; border: 1px solid #283142; color: #fff;
	padding: 11px 12px; margin-bottom: 9px; outline: none; transition: border-color .2s ease;
}
.login-panel input:focus { border-color: var(--gold); }
.remember { display: flex; align-items: center; gap: 7px; color: #778194; font-size: 11px; margin: 12px 0; }
.remember input { accent-color: var(--gold); }
.gold-button {
	width: 100%; border: 0; cursor: pointer; padding: 11px;
	background: linear-gradient(#e7c474, #b58636); border: 1px solid var(--gold-light);
	color: #16120a; font-weight: 800; letter-spacing: 1px; text-align: center;
	transition: filter .2s ease;
}
.gold-button:hover { filter: brightness(1.06); }
.form-error { color: #e58091; font-size: 11px; margin: 10px 0 0; }
.muted-link { display: block; color: #727d90; text-align: center; font-size: 11px; margin-top: 13px; }
.or { display: flex; align-items: center; gap: 8px; color: #566072; font-size: 9px; margin: 13px 0; }
.or::before, .or::after { content: ''; height: 1px; background: #293142; flex: 1; }
.outline-button { display: block; text-align: center; border: 1px solid #42506a; color: #aeb7c9; padding: 10px; font-size: 10px; font-weight: 700; letter-spacing: 1px; transition: all .2s ease; }
.outline-button:hover { border-color: var(--cyan); color: var(--cyan); }

/* ── download panel ───────────────────────────────────────────────────── */
.download-card { text-align: center; background: #0b0f17; border: 1px solid #283344; padding: 17px 10px; }
.download-badge { width: 70px; height: 70px; margin: 0 auto 10px; filter: drop-shadow(0 0 12px rgba(56,198,255,.35)); }
.download-card b { display: block; color: #e0e4ec; letter-spacing: 1px; }
.download-card span, .download-card small { display: block; color: #747f91; font-size: 10px; margin: 5px 0 13px; }
.download-card .gold-button { margin: 0 0 10px; }

/* ── top players ──────────────────────────────────────────────────────── */
.rank-tabs { display: flex; gap: 17px; border-bottom: 1px solid #2b3342; padding-bottom: 9px; margin-bottom: 4px; font-size: 9px; color: #6c7688; letter-spacing: 1px; }
.rank-tabs b { color: var(--gold); }
.rank { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #202837; }
.rank:last-child { border-bottom: 0; }
.rank i { color: var(--gold); font-style: normal; font-size: 11px; width: 14px; }
.rank img.avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid #384156; flex-shrink: 0; }
.rank span { flex: 1; color: #d1d6df; font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank small { display: block; color: #687386; font-size: 9px; margin-top: 2px; }
.rank > b { color: var(--cyan); font-size: 9px; flex-shrink: 0; }

/* ── feature / hero carousel block ────────────────────────────────────── */
.feature {
	position: relative; height: 320px; overflow: hidden; border: 1px solid var(--border-2);
	background: linear-gradient(90deg, #0a111bd9, #14263655), url('../img/hero-bg.png');
	background-position: center 25%; background-size: cover;
}
.feature-label { position: absolute; top: 24px; left: 30px; color: var(--cyan); font: 700 10px var(--font-mono); letter-spacing: 3px; z-index: 2; }
.feature-copy { position: absolute; z-index: 2; left: 30px; top: 64px; width: 46%; }
.feature-copy h2 { margin: 0; color: #f0f2f7; font: 700 40px var(--font-head); }
.feature-copy h3 { margin: 0 0 14px; color: var(--gold); font-size: 16px; letter-spacing: 3px; }
.feature-copy p { color: #9aa5b8; line-height: 1.7; margin-bottom: 18px; }
.feature-copy a { color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: 2px; }
.feature-copy a b { font-size: 15px; margin-left: 8px; }
.feature-nav { position: absolute; bottom: 16px; left: 30px; right: 30px; z-index: 2; display: flex; gap: 8px; overflow-x: auto; }
.feature-thumb { width: 42px; height: 42px; flex-shrink: 0; border: 2px solid transparent; opacity: .55; cursor: pointer; background-size: cover; background-position: center; transition: all .2s ease; }
.feature-thumb:hover { opacity: .85; }
.feature-thumb.active { border-color: var(--gold); opacity: 1; box-shadow: 0 0 12px rgba(217,173,88,.5); }

/* ── guides ───────────────────────────────────────────────────────────── */
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.guide-card { display: flex; flex-direction: column; background: #0c1119; border: 1px solid #242e3d; transition: border-color .25s ease, transform .25s ease; }
.guide-card:hover { border-color: var(--cyan); transform: translateY(-2px); }
.guide-thumb { height: 74px; display: grid; place-items: center; background: linear-gradient(135deg, #1a3541, #0b1827); }
.guide-thumb.t1 { background: linear-gradient(135deg, #3c2a25, #121624); }
.guide-thumb.t2 { background: linear-gradient(135deg, #273250, #12121f); }
.guide-thumb span { font-size: 32px; color: #8fdbe4; text-shadow: 0 0 16px #68c4ff; }
.guide-card .body { padding: 10px; }
.guide-card h4 { font-size: 10px; color: #d7dce6; line-height: 1.4; margin: 0 0 6px; }
.guide-card p { color: #778296; font-size: 10px; margin: 0 0 9px; }
.guide-card small { font-size: 8px; color: var(--gold); letter-spacing: 1px; }

/* ── news ─────────────────────────────────────────────────────────────── */
.news-banner { width: 100%; margin-bottom: 14px; border: 1px solid var(--border-2); }
.news-article { padding: 14px 0; border-bottom: 1px solid #1e2735; }
.news-article:last-child { border-bottom: 0; padding-bottom: 0; }
.news-article:first-child { padding-top: 0; }
.news-article time { color: var(--cyan); font: 10px var(--font-mono); }
.news-article h3 { color: #edf0f6; font-size: 14px; margin: 7px 0 5px; }
.news-article h3 a:hover { color: var(--gold); }
.news-article p { color: #7b8597; margin: 0; font-size: 11px; line-height: 1.6; }

/* ── server status (rediseñado: número grande + tasa X + canales) ────── */
.status-hero { text-align: center; padding: 4px 0 14px; }
.status-count { font: 700 40px var(--font-head); color: var(--cyan); text-shadow: 0 0 18px rgba(56,198,255,.45); line-height: 1; }
.status-caption { margin-top: 8px; color: #8a94a8; font-size: 10px; letter-spacing: 2px; }
.status-divider { height: 1px; background: linear-gradient(90deg, transparent, #2a3547, transparent); margin: 0 0 16px; }
.status-rate-row { display: flex; align-items: center; gap: 12px; }
.rate-badge-img { flex-shrink: 0; width: 50px; height: 50px; filter: drop-shadow(0 0 10px rgba(216,100,158,.45)); }
.rate-badge { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
	background: radial-gradient(circle at 35% 30%, #ea6fb0, #8a2f63 70%); border: 2px solid #c85a96;
	color: #fff; font: 700 9px var(--font-mono); box-shadow: 0 0 14px rgba(216,100,158,.4);
}
.rate-bar-wrap { flex: 1; min-width: 0; }
.rate-bar { display: block; height: 6px; background: #202939; overflow: hidden; border-radius: 4px; }
.rate-bar i { display: block; height: 100%; background: linear-gradient(90deg, #d8649e, #ea6fb0); box-shadow: 0 0 8px rgba(216,100,158,.6); }
.rate-bar-wrap span { display: block; margin-top: 7px; color: #8892a3; font-size: 10px; }
.rate-bar-wrap span b { color: var(--cyan); font-family: var(--font-mono); }
.status-realms { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 15px; padding-top: 14px; border-top: 1px solid #202939; }
.status-realms span { display: flex; align-items: center; gap: 5px; color: #9aa5b8; font: 10px var(--font-mono); }

/* ── events ───────────────────────────────────────────────────────────── */
.event-row { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #222a38; padding: 10px 0; }
.event-row:first-child { border-top: 0; }
.event-row b { color: #d8dce5; font-size: 11px; display: block; }
.event-row small { display: block; color: #687386; font-size: 9px; margin-top: 2px; }
.event-row strong { color: var(--gold); font: 12px var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.event-row strong.is-open { color: var(--green); }

/* ── guild ranking ────────────────────────────────────────────────────── */
.guild-row { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid #232b39; }
.guild-row:last-child { border-bottom: 0; }
.guild-row img { width: 34px; height: 34px; flex-shrink: 0; border: 1px solid #2c3a4d; background: #131a26; }
.guild-badge { display: grid; place-items: center; width: 30px; height: 30px; background: #a58642; color: #fff; font-weight: 800; font-size: 12px; flex-shrink: 0; }
.guild-badge.n2 { background: #3f6f92; }
.guild-badge.n3 { background: #874b58; }
.guild-row > div { flex: 1; min-width: 0; }
.guild-row b { display: block; color: #d6dae3; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guild-row small { color: #687386; font-size: 9px; }
.guild-row strong { color: var(--gold); font: 16px var(--font-head); flex-shrink: 0; }

/* ── banners de redes sociales (entre Guild Ranking y Arca War) ───────── */
.social-banners { display: flex; flex-direction: column; gap: 10px; }
.social-banners a { display: block; border: 1px solid var(--border-2); overflow: hidden; transition: border-color .25s ease, transform .25s ease; }
.social-banners a:hover { border-color: var(--cyan); transform: translateY(-2px); }
.social-banners img { width: 100%; height: auto; display: block; }

/* ── gens ─────────────────────────────────────────────────────────────── */
.gens-row { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid #232b39; }
.gens-row:last-child { border-bottom: 0; }
.gens-row img.gens-icon { width: 22px; height: 22px; flex-shrink: 0; }
.gens-row > div { flex: 1; min-width: 0; }
.gens-row b { display: block; color: #d6dae3; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gens-row small { color: #687386; font-size: 9px; }
.gens-row strong { color: var(--cyan); font: 12px var(--font-mono); flex-shrink: 0; }
.gens-empty { color: #687386; font-size: 11px; padding: 6px 0; }

/* ── banner de la tienda (imagen clickeable, columna izquierda) ────────── */
.shop-banner { display: block; border: 1px solid var(--border-2); overflow: hidden; transition: border-color .25s ease, transform .25s ease; }
.shop-banner:hover { border-color: var(--cyan); transform: translateY(-2px); }
.shop-banner img { width: 100%; height: auto; display: block; }

/* ── TOP GENS ancho (2 columnas: Duprian / Vanert) ─────────────────────── */
.gens-wide-panel .panel-title { justify-content: space-between; }
.gens-wide-panel { overflow: hidden; }
.gens-wide-more {
	width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
	background: rgba(255,255,255,.06); border: 1px solid #3a4863; color: #cdd6e3; font-size: 15px; font-weight: 700;
	transition: all .2s ease;
}
.gens-wide-more:hover { background: var(--cyan); border-color: var(--cyan); color: #071018; }
.gens-wide-body { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 16px; }
.gens-wide-col { border: 1px solid var(--border-2); background: var(--panel-2); }
.gens-wide-col-head {
	display: flex; align-items: center; gap: 8px; padding: 11px 14px;
	background: linear-gradient(90deg, #2a1f3a, #171225); border-bottom: 2px solid #6a3fa0;
	color: #f0eaf8; font-size: 12px; font-weight: 700; letter-spacing: .5px;
}
.gens-wide-col:nth-child(2) .gens-wide-col-head { background: linear-gradient(90deg, #1f2a3a, #121722); border-bottom-color: #3f7aa0; }
.gens-wide-col-head img { width: 18px; height: 18px; }
.gens-wide-scroll { max-height: 330px; overflow-y: auto; }
.gens-wide-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.gens-wide-table tr:first-child { position: sticky; top: 0; background: var(--panel-2); z-index: 1; }
.gens-wide-table tr:first-child th { color: #6c7688; font-size: 9px; text-transform: uppercase; letter-spacing: .8px; text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border-2); font-weight: 700; }
.gens-wide-table td { padding: 9px 12px; border-bottom: 1px solid #1c2331; vertical-align: middle; }
.gens-wide-table tr:last-child td { border-bottom: 0; }
.gens-wide-table tr:hover:not(:first-child) td { background: rgba(79,214,232,.035); }
.gens-wide-rank-title { color: #8892a3; font-size: 10px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.gens-wide-rank-title-top { color: var(--gold); }
.gens-wide-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid #2c3a4d; }
.gens-wide-pos-badge {
	display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
	border-radius: 50%; background: #2a3547; color: #cdd6e3; font-size: 9px; font-weight: 700; margin-right: 7px;
}
.gens-wide-pos-1 { background: var(--gold); color: #16120a; }
.gens-wide-pos-2 { background: #b8c4d6; color: #16120a; }
.gens-wide-pos-3 { background: #b5804d; color: #16120a; }
.gens-wide-points { color: var(--gold); font-weight: 700; font-family: var(--font-mono); text-align: right; }
.gens-wide-empty { color: #687386; text-align: center; padding: 20px 0 !important; }

.gens-wide-scroll::-webkit-scrollbar { width: 6px; }
.gens-wide-scroll::-webkit-scrollbar-track { background: transparent; }
.gens-wide-scroll::-webkit-scrollbar-thumb { background: #2a3547; border-radius: 3px; }

/* ── castle siege / arca war ──────────────────────────────────────────── */
.cs-owner { display: flex; align-items: center; gap: 10px; padding: 6px 0 14px; border-bottom: 1px solid #232b39; margin-bottom: 12px; }
.cs-owner-icon { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; font-size: 18px; background: #1a2432; border: 1px solid #2c3a4d; }
.cs-owner img.mark { width: 34px; height: 34px; flex-shrink: 0; }
.cs-owner b { display: block; color: #eef1f7; font-size: 13px; }
.cs-owner small { color: var(--gold); font-size: 9px; letter-spacing: 1px; }
.cs-stat-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 10px; color: #92a0b5; border-bottom: 1px solid #1e2735; }
.cs-stat-row:last-child { border-bottom: 0; }
.cs-stat-row strong { color: var(--cyan); font-family: var(--font-mono); }
.cs-empty { color: #687386; font-size: 11px; }

/* ── community ────────────────────────────────────────────────────────── */
.community-copy { color: #788397; font-size: 11px; margin: 0 0 12px; }
.socials { display: flex; gap: 7px; }
.socials a { flex: 1; text-align: center; border: 1px solid #334055; padding: 9px 3px; color: #9ba7ba; font-size: 9px; letter-spacing: 1px; transition: all .2s ease; }
.socials a:hover { border-color: var(--cyan); color: var(--cyan); }

/* ── footer ───────────────────────────────────────────────────────────── */
footer {
	display: flex; align-items: center; gap: 25px; flex-wrap: wrap;
	max-width: 1280px; margin: 10px auto 0; padding: 25px 4%;
	border-top: 1px solid #1a2130; color: #687386; font-size: 10px;
}
.footer-brand { display: flex; align-items: center; gap: 8px; color: #d9dde6; font-size: 14px; letter-spacing: 2px; }
.footer-brand img { height: 30px; width: auto; }
.footer-brand .brand-mark { width: 23px; height: 23px; font-size: 15px; }
.footer-brand b span { color: var(--gold); }
footer p { flex: 1; min-width: 240px; }
.footer-links { display: flex; gap: 16px; }
footer small.copyright { color: #485264; font-size: 9px; flex-basis: 100%; }

/* ── scrollbar ────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0a0d13; }
::-webkit-scrollbar-thumb { background: #263449; }
::-webkit-scrollbar-thumb:hover { background: #34495f; }

/* ── partículas de escarcha/ceniza de hielo (efecto ambiental) ─────────── */
.frost-field { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; }
.frost-particle {
	position: absolute; top: -12px; border-radius: 50%;
	background: radial-gradient(circle, #eafcff, #7fd9ea 55%, transparent 75%);
	box-shadow: 0 0 6px rgba(127,217,234,.65);
	opacity: 0; animation: frostFall linear infinite;
}
@keyframes frostFall {
	0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
	8%   { opacity: var(--frost-op, .55); }
	92%  { opacity: var(--frost-op, .55); }
	100% { transform: translateY(110vh) translateX(var(--drift-x, 40px)) rotate(180deg); opacity: 0; }
}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1060px) {
	.content-grid { grid-template-columns: 220px minmax(0,1fr); }
	.col-right { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
	.col-right .panel { flex: 1 1 230px; }
	.nav { gap: 18px; }
	.topbar { gap: 18px; }
}
@media (max-width: 760px) {
	.topbar { height: 58px; }
	.brand { font-size: 15px; }
	.menu-toggle { display: block; margin-left: auto; }
	.nav { position: absolute; display: none; top: 58px; left: 0; right: 0; height: auto; padding: 10px 15px; background: #0e131d; border: 1px solid #293344; flex-direction: column; align-items: stretch; gap: 0; z-index: 40; }
	.nav.open { display: flex; }
	.nav a { padding: 12px 5px; border-bottom: 1px solid #222a38; }
	.nav a.active::after { display: none; }
	.top-actions { display: none; }
	.hero { height: 68vw; min-height: 300px; }
	.hero-copy { padding-left: 5%; padding-top: 60px; }
	.hero-logo-img { max-width: 78%; margin-bottom: 16px; }
	.hero-copy h1 { font-size: 42px; }
	.server-clock { left: 5%; bottom: 8%; }
	.content-grid { display: flex; flex-direction: column; padding-top: 18px; }
	.col-right { display: flex; flex-direction: column; }
	.col-right .panel { flex: none; }
	.feature-copy { width: 62%; }
	.feature-copy h2 { font-size: 30px; }
	.guide-grid { grid-template-columns: 1fr; }
	.guide-card { flex-direction: row; }
	.guide-thumb { height: auto; width: 90px; flex-shrink: 0; }
	.gens-wide-body { grid-template-columns: 1fr; }
}
/* ============================================================================
   PÁGINAS DEL CORE DE WEBENGINE (rankings, noticias, registro, etc.)
   Estas páginas NO pasan por inc/home.php — las genera WebEngine directamente
   (modules/*.php) y dependen de Bootstrap 3, que cargamos en el <head>.
   Todo lo de acá abajo son overrides oscuros para que combinen con el resto
   del sitio, sin tocar ningún archivo del core.
   ============================================================================ */

/* ── contenedor general de página (todo lo que no es la home) ─────────── */
.page-wrap { max-width: 1280px; margin: 0 auto; padding: 30px 4% 60px; }
.page-wrap-inner { background: var(--panel); border: 1px solid var(--border); padding: 24px; box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.page-title { font: 700 18px var(--font-head); letter-spacing: 1px; color: #eaf0f8; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border-2); }

/* ── menú de rankings (Top Level / Top Resets / Top Guilds / etc.) ────── */
.rankings_menu { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.rankings_menu a {
	padding: 9px 16px; border: 1px solid #2a3547; color: #9aa5b8; font-size: 10px;
	font-weight: 700; letter-spacing: .5px; text-transform: uppercase; transition: all .2s ease;
}
.rankings_menu a:hover { border-color: var(--cyan); color: var(--cyan); }
.rankings_menu a.active { background: linear-gradient(#e7c474, #b58636); border-color: var(--gold-light); color: #16120a; }

/* ── filtro por clase (íconos) ─────────────────────────────────────────── */
.rankings-class-filter { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 20px; }
.rankings-class-filter-selection {
	display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px;
	border: 1px solid #232b39; cursor: pointer; color: #8892a3; font-size: 8px; letter-spacing: .5px;
	text-transform: uppercase; transition: all .2s ease;
}
.rankings-class-filter-selection:hover { border-color: var(--cyan); color: var(--cyan); }
.rankings-class-filter-image { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; }
.rankings-class-filter-grayscale .rankings-class-filter-image { filter: grayscale(1) brightness(.8); transition: filter .2s ease; }
.rankings-class-filter-grayscale:hover .rankings-class-filter-image { filter: none; }

/* ── tabla de rankings ────────────────────────────────────────────────── */
.rankings-table { width: 100%; border-collapse: collapse; color: #c9d0dc; font-size: 12px; }
.rankings-table tr { border-bottom: 1px solid #1e2735; }
.rankings-table tr:first-child { border-bottom: 1px solid var(--border-2); }
.rankings-table tr:first-child td { color: #8892a3; font-size: 10px; text-transform: uppercase; letter-spacing: .8px; padding-bottom: 12px; }
.rankings-table tr:hover:not(:first-child) { background: rgba(79,214,232,.04); }
.rankings-table td { padding: 10px 12px; vertical-align: middle; }
.rankings-table-place { color: var(--gold); font-weight: 700; width: 36px; }
.rankings-class-image { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid #2c3a4d; }
.online-status-indicator { width: 8px; height: 8px; margin-left: 6px; display: inline-block; vertical-align: middle; }
.rankings-update-time { margin-top: 14px; color: #616c80; font-size: 10px; }
.rankings-table a { color: #d6dae3; }
.rankings-table a:hover { color: var(--cyan); }

/* ── overrides genéricos de Bootstrap (alerts, tablas, forms, botones) ─── */
.page-wrap .alert { border-radius: 0; border: 1px solid; padding: 13px 16px; margin-bottom: 18px; font-size: 12px; }
.page-wrap .alert-danger { background: rgba(224,122,122,.08); border-color: #e07a7a; color: #f0a3a3; }
.page-wrap .alert-success { background: rgba(105,214,154,.08); border-color: var(--green); color: #9be6bc; }
.page-wrap .alert-warning { background: rgba(217,173,88,.08); border-color: var(--gold); color: var(--gold-light); }
.page-wrap .alert-info { background: rgba(79,214,232,.08); border-color: var(--cyan); color: #a8e9f1; }

.page-wrap table:not(.rankings-table) { width: 100%; color: #c9d0dc; border-collapse: collapse; font-size: 12px; }
.page-wrap table:not(.rankings-table) th { text-align: left; color: #8892a3; font-size: 10px; text-transform: uppercase; letter-spacing: .8px; padding: 10px 12px; border-bottom: 1px solid var(--border-2); }
.page-wrap table:not(.rankings-table) td { padding: 10px 12px; border-bottom: 1px solid #1e2735; }
.page-wrap table:not(.rankings-table) a { color: #d6dae3; }
.page-wrap table:not(.rankings-table) a:hover { color: var(--cyan); }

.page-wrap .form-control {
	background: #090d14; border: 1px solid #283142; color: #fff; box-shadow: none;
	border-radius: 0; padding: 10px 12px; height: auto; font-size: 12px;
}
.page-wrap .form-control:focus { border-color: var(--gold); box-shadow: none; }
.page-wrap label { color: #9aa5b8; font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.page-wrap .btn { border-radius: 0; font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.page-wrap .btn-primary, .page-wrap .btn-success {
	background: linear-gradient(#e7c474, #b58636); border: 1px solid var(--gold-light); color: #16120a;
}
.page-wrap .btn-primary:hover, .page-wrap .btn-success:hover { filter: brightness(1.06); }
.page-wrap .btn-danger { background: #7a2e2e; border-color: #a53f3f; color: #fff; }
.page-wrap .panel { background: var(--panel-2); border: 1px solid var(--border); border-radius: 0; }
.page-wrap .panel-heading { background: var(--panel-head); border-bottom: 1px solid var(--border-2); color: #dfeaf5; }
.page-wrap .panel-body { color: #c9d0dc; }
.page-wrap a { color: var(--cyan); }
.page-wrap a:hover { color: var(--cyan-glow); }
.page-wrap .pagination > li > a, .page-wrap .pagination > li > span {
	background: #0c1119; border-color: #232b39; color: #9aa5b8;
}
.page-wrap .pagination > .active > a { background: var(--gold); border-color: var(--gold); color: #16120a; }
.page-wrap h1, .page-wrap h2, .page-wrap h3, .page-wrap h4, .page-wrap h5 { color: #eaf0f8; font-family: var(--font-head); }
.page-wrap hr { border-color: var(--border-2); }

@media (max-width: 700px) {
	.page-wrap { padding: 18px 4% 40px; }
	.page-wrap-inner { padding: 16px; }
	.rankings-table { font-size: 10px; }
	.rankings-table td { padding: 8px 6px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.frost-field { display: none; }
}

/* ============================================================================
   PREMIUM MMORPG TYPOGRAPHY + INTERACTIVE GLOW
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Rajdhani:wght@500;600;700&display=swap');

:root {
  --font: 'Rajdhani', Arial, Helvetica, sans-serif;
  --font-head: 'Cinzel', Georgia, 'Times New Roman', serif;
}

body {
  letter-spacing: .15px;
}

/* Navegación: brillo elegante al pasar el mouse */
.nav a,
.top-actions a {
  transition: color .25s ease, text-shadow .25s ease, transform .25s ease;
}
.nav a::before,
.top-actions a::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 8px var(--cyan);
  transform: translateX(-50%);
  transition: width .3s ease;
}
.nav a:hover,
.top-actions a:hover {
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 12px rgba(79,214,232,.9), 0 0 24px rgba(79,214,232,.45);
  transform: translateY(-1px);
}
.nav a:hover::before,
.top-actions a:hover::before { width: 100%; }

/* Títulos principales */
.hero-copy h1,
.feature-copy h2,
.panel-title,
.panel-title span,
.news-article h3,
.guide-card h4,
.status-count {
  font-family: var(--font-head);
}

.hero-copy h1 {
  animation: titleBreath 3.5s ease-in-out infinite;
}

@keyframes titleBreath {
  0%,100% { text-shadow: 0 0 3px #fff, 0 0 16px var(--cyan-glow), 0 0 36px rgba(56,198,255,.35); }
  50% { text-shadow: 0 0 5px #fff, 0 0 24px var(--cyan-glow), 0 0 60px rgba(56,198,255,.58); }
}

/* Todos los links: pequeño brillo sin afectar el layout */
a {
  transition: color .25s ease, text-shadow .25s ease;
}
a:hover {
  text-shadow: 0 0 7px currentColor, 0 0 16px rgba(79,214,232,.35);
}

/* Títulos de panel con línea luminosa */
.panel-title {
  position: relative;
  text-shadow: 0 0 5px rgba(220,235,255,.18);
  transition: color .3s ease, text-shadow .3s ease;
}
.panel:hover .panel-title {
  color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 16px rgba(79,214,232,.5);
}
.panel-title i {
  transition: box-shadow .3s ease, background .3s ease;
}
.panel:hover .panel-title i {
  background: linear-gradient(90deg, var(--cyan), transparent);
  box-shadow: 0 0 8px rgba(79,214,232,.5);
}

/* Filas de ranking: iluminación al pasar el mouse */
.rank {
  position: relative;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.rank:hover {
  background: linear-gradient(90deg, rgba(79,214,232,.09), rgba(79,214,232,.015));
  transform: translateX(4px);
  box-shadow: inset 2px 0 0 var(--cyan), 0 0 14px rgba(79,214,232,.08);
}
.rank span,
.rank > b {
  transition: color .25s ease, text-shadow .25s ease;
}
.rank:hover span {
  color: #fff;
  text-shadow: 0 0 7px rgba(255,255,255,.6), 0 0 14px rgba(79,214,232,.55);
}
.rank:hover > b {
  color: #fff;
  text-shadow: 0 0 9px var(--cyan);
}

/* Eventos */
.event-row {
  position: relative;
  transition: padding-left .25s ease, background .25s ease, box-shadow .25s ease;
}
.event-row:hover {
  padding-left: 8px;
  background: linear-gradient(90deg, rgba(79,214,232,.08), transparent);
  box-shadow: inset 2px 0 0 var(--cyan);
}
.event-row b,
.event-row span {
  transition: color .25s ease, text-shadow .25s ease;
}
.event-row:hover b {
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,.55);
}

/* Botones premium */
.gold-button,
.hero-cta,
.outline-button,
.download-btn-sm {
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease, color .25s ease;
}
.gold-button::after,
.hero-cta::after,
.outline-button::after,
.download-btn-sm::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -80%;
  width: 45%;
  height: 220%;
  transform: rotate(25deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transition: left .55s ease;
  pointer-events: none;
}
.gold-button:hover::after,
.hero-cta:hover::after,
.outline-button:hover::after,
.download-btn-sm:hover::after { left: 135%; }
.gold-button:hover,
.hero-cta:hover,
.download-btn-sm:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
  box-shadow: 0 0 10px rgba(217,173,88,.35), 0 0 24px rgba(217,173,88,.18);
}
.outline-button:hover {
  color: #fff;
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(79,214,232,.35), inset 0 0 12px rgba(79,214,232,.08);
}

/* Tarjetas: efecto de profundidad */
.panel,
.guide-card,
.download-card,
.feature {
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.panel:hover {
  border-color: rgba(79,214,232,.35);
  box-shadow: 0 18px 38px rgba(0,0,0,.45), 0 0 22px rgba(79,214,232,.055);
}

/* Noticias y títulos secundarios */
.news-article h3 a,
.guide-card h4,
.download-card b,
.feature-copy h2,
.feature-copy h3 {
  transition: color .25s ease, text-shadow .25s ease;
}
.news-article h3 a:hover,
.guide-card:hover h4,
.download-card:hover b {
  color: #fff;
  text-shadow: 0 0 7px rgba(255,255,255,.55), 0 0 18px rgba(79,214,232,.42);
}

/* Etiquetas pequeñas */
.rank-tabs,
.status-caption,
.feature-label,
.news-article time,
.panel-title,
.nav a,
.top-actions a {
  text-rendering: geometricPrecision;
}

/* Estado online */
.green-dot {
  animation: onlinePulse 1.8s ease-in-out infinite;
}
@keyframes onlinePulse {
  0%,100% { box-shadow: 0 0 5px var(--green); }
  50% { box-shadow: 0 0 5px var(--green), 0 0 14px rgba(105,214,154,.7); }
}

/* Avatar del ranking */
.rank img.avatar {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.rank:hover img.avatar {
  transform: scale(1.12);
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(79,214,232,.55);
}

/* Selector de clase / miniaturas */
.feature-thumb {
  transition: transform .25s ease, opacity .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.feature-thumb:hover {
  transform: translateY(-3px) scale(1.04);
  opacity: 1;
  border-color: var(--cyan);
  box-shadow: 0 0 14px rgba(79,214,232,.45);
}

/* Inputs con brillo de MMORPG */
.login-panel input:not([type=checkbox]) {
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.login-panel input:not([type=checkbox]):focus {
  border-color: var(--cyan);
  background: #0b121c;
  box-shadow: 0 0 0 1px rgba(79,214,232,.12), 0 0 16px rgba(79,214,232,.14);
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}