@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Manrope:wght@400;600;700;800&display=swap');

/* ============================================================
   RUINMU 99B+ · TEMA "GRANA Y ACERO" (Crimson & Steel)
   ------------------------------------------------------------
   Capa visual sobre WebEngine / template Momentum.
   · No modifica logica PHP, ni rutas, ni nombres de imagenes.
   · Se carga en lugar de ruinmu-pro.css (ese archivo queda
     intacto en el disco por si quieren volver atras).
   · Identidad: acero oscuro + grana (rojo del logo) + un
     dorado reservado solo para VIP / podio de rankings.
   · Firma visual: placas con esquina cortada (corte de acero),
     reservada para el hero y el panel principal (no se abusa
     en toda la pagina).
   ============================================================ */

:root{
	/* --- Superficies (acero frio, no marron) --- */
	--cx-void:        #0a0c10;
	--cx-void-2:      #06070a;
	--cx-panel:       #12151c;
	--cx-panel-2:     #171c26;
	--cx-stone:       #1e2430;

	/* --- Acentos --- */
	--cx-crimson:      #e2263d;
	--cx-crimson-bri:  #ff4d61;
	--cx-crimson-deep: #7d0f1e;
	--cx-steel:        #93a6c9;
	--cx-steel-bri:    #d3ddef;
	--cx-gold:         #e3b23c;
	--cx-gold-bri:     #f6d27a;
	--cx-online:       #2fe0a6;
	--cx-danger:       #ff4d4d;

	/* --- Texto --- */
	--cx-ink:      #ccd3e0;
	--cx-ink-dim:  #7c869c;

	/* --- Lineas --- */
	--cx-line:        rgba(147,166,201,0.18);
	--cx-line-soft:   rgba(147,166,201,0.09);
	--cx-line-strong: rgba(147,166,201,0.38);
	--cx-line-crimson:rgba(226,38,61,0.45);

	/* --- Podio --- */
	--cx-rank-gold:   #f2c75a;
	--cx-rank-silver: #cfd6df;
	--cx-rank-bronze: #cf8a4d;

	/* --- Radios / sombras --- */
	--cx-radius:    12px;
	--cx-radius-sm: 9px;
	--cx-cut:       16px; /* tamano del corte de esquina */
	--cx-shadow:    0 16px 42px rgba(0,0,0,0.6);
	--cx-shadow-sm: 0 8px 20px rgba(0,0,0,0.5);
	--cx-glow-crimson: 0 0 22px rgba(226,38,61,0.25);
	--cx-glow-steel:   0 0 20px rgba(147,166,201,0.16);

	/* --- Tipografia --- */
	--cx-display: 'Rajdhani', 'Manrope', 'Segoe UI', sans-serif;
	--cx-body:    'Manrope', 'Segoe UI', system-ui, sans-serif;
}

/* ===========================================================
   BASE / ATMOSFERA
   =========================================================== */
html{ min-width: 0 !important; }
body{
	background:
		radial-gradient(1200px 520px at 50% -160px, rgba(226,38,61,0.10), transparent 62%),
		radial-gradient(1000px 560px at 50% 120%, rgba(90,110,150,0.10), transparent 68%),
		linear-gradient(180deg, rgba(6,7,10,0.90) 0%, rgba(6,7,10,0.95) 50%, rgba(5,6,8,0.98) 100%),
		var(--cx-void) url('../img/background.jpg') no-repeat top center fixed !important;
	background-size: auto, auto, auto, cover !important;
	color: var(--cx-ink) !important;
	font-family: var(--cx-body) !important;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
/* veta metalica muy sutil, apenas perceptible */
body::before{
	content:""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
	background: repeating-linear-gradient(115deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 5px);
	mix-blend-mode: overlay;
}
#navbar, #header, .header-info-container, #container, .footer, #ruinmu-navwrap{ position: relative; z-index: 1; }

a{ color: var(--cx-steel-bri); transition: color .2s ease; }
a:hover{ color: var(--cx-crimson-bri); }

::selection{ background: rgba(226,38,61,0.35); color: #fff; }

*{ scrollbar-color: rgba(226,38,61,0.5) rgba(255,255,255,0.05); scrollbar-width: thin; }
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: rgba(255,255,255,0.03); }
*::-webkit-scrollbar-thumb{
	background: linear-gradient(180deg, var(--cx-crimson), var(--cx-crimson-deep));
	border-radius: 20px; border: 2px solid rgba(0,0,0,0.5);
}
*::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg, var(--cx-crimson-bri), var(--cx-crimson)); }

#content{ padding-top: 26px; padding-bottom: 40px; }
#container{ padding: 14px 0 26px 0; }

/* ===========================================================
   ENCABEZADO / LOGO
   =========================================================== */
#header{
	padding: 50px 0 30px 0 !important;
	min-width: 0 !important;
	position: relative;
}
#header a img{
	max-width: 92%;
	filter: drop-shadow(0 10px 28px rgba(0,0,0,0.65)) drop-shadow(0 0 20px rgba(226,38,61,0.22));
	transition: transform .35s ease, filter .35s ease;
}
#header a img:hover{
	transform: translateY(-2px);
	filter: drop-shadow(0 14px 34px rgba(0,0,0,0.7)) drop-shadow(0 0 28px rgba(226,38,61,0.4)) brightness(107%);
}
.rm-tagline{
	font-family: var(--cx-display);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: .6px;
	text-align: center;
	color: var(--cx-steel-bri);
	text-shadow: 0 2px 6px rgba(0,0,0,0.7);
	margin: -6px 0 4px 0;
}

/* ===========================================================
   BANDA DE RATES · pieza destacada del hero
   (usa las clases nuevas insertadas en index.php)
   =========================================================== */
.rm-rates-band{
	display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
	max-width: 1120px; margin: 0 auto 18px auto; padding: 0 16px;
	position: relative; z-index: 1;
}
.rm-rate-card{
	flex: 1 1 190px; max-width: 230px; min-width: 160px;
	background: linear-gradient(165deg, rgba(23,28,38,0.95), rgba(10,11,15,0.97));
	border: 1px solid var(--cx-line);
	clip-path: polygon(var(--cx-cut) 0, 100% 0, 100% calc(100% - var(--cx-cut)), calc(100% - var(--cx-cut)) 100%, 0 100%, 0 var(--cx-cut));
	filter: drop-shadow(0 10px 22px rgba(0,0,0,0.5));
	padding: 18px 14px 16px 14px;
	text-align: center;
	transition: transform .2s ease, filter .2s ease;
}
.rm-rate-card:hover{
	transform: translateY(-4px);
	filter: drop-shadow(0 14px 28px rgba(0,0,0,0.55)) drop-shadow(0 0 16px rgba(226,38,61,0.3));
}
.rm-rate-card .rm-rate-icon{
	font-size: 20px; color: var(--cx-crimson-bri); margin-bottom: 6px; display: block;
}
.rm-rate-card .rm-rate-value{
	font-family: var(--cx-display); font-weight: 700; font-size: 32px; line-height: 1.05;
	color: var(--cx-steel-bri);
	letter-spacing: .5px;
}
.rm-rate-card .rm-rate-value small{
	font-size: 15px; font-weight: 600; color: var(--cx-ink-dim); margin: 0 2px;
}
.rm-rate-card.rm-rate-vip{ border-color: rgba(227,178,60,0.4); animation: rmPulseGold 2.6s ease-in-out infinite; }
.rm-rate-card.rm-rate-vip .rm-rate-icon{ color: var(--cx-gold-bri); }
.rm-rate-card.rm-rate-vip .rm-rate-value{ color: var(--cx-gold-bri); }
.rm-rate-card .rm-rate-label{
	font-family: var(--cx-display); font-weight: 600; font-size: 12px;
	letter-spacing: 1.6px; text-transform: uppercase; color: var(--cx-ink-dim);
	margin-top: 4px;
}
.rm-rate-card::after{
	content:""; display:block; width: 40px; height: 2px; margin: 10px auto 0 auto;
	background: linear-gradient(90deg, transparent, var(--cx-crimson), transparent);
}
.rm-rate-card.rm-rate-vip::after{ background: linear-gradient(90deg, transparent, var(--cx-gold), transparent); }

@keyframes rmPulseGold{
	0%, 100%{ filter: drop-shadow(0 10px 22px rgba(0,0,0,0.5)); }
	50%{ filter: drop-shadow(0 10px 22px rgba(0,0,0,0.5)) drop-shadow(0 0 14px rgba(227,178,60,0.45)); }
}

/* ===========================================================
   GRILLA DE CARACTERISTICAS (reset / items / eventos)
   =========================================================== */
.rm-features-grid{
	display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
	max-width: 1120px; margin: 0 auto 32px auto; padding: 0 16px;
	position: relative; z-index: 1;
}
.rm-feature-card{
	flex: 1 1 240px; max-width: 270px;
	background: linear-gradient(180deg, rgba(18,21,28,0.92), rgba(9,10,14,0.95));
	border: 1px solid var(--cx-line);
	border-top: 2px solid var(--cx-steel);
	border-radius: var(--cx-radius-sm);
	box-shadow: var(--cx-shadow-sm);
	padding: 20px 18px;
	text-align: left;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.rm-feature-card:hover{
	transform: translateY(-3px);
	box-shadow: var(--cx-shadow-sm), var(--cx-glow-crimson);
	border-top-color: var(--cx-crimson);
}
.rm-feature-icon{ font-size: 22px; color: var(--cx-crimson-bri); margin-bottom: 10px; display: block; }
.rm-feature-title{
	font-family: var(--cx-display); font-weight: 700; font-size: 16px;
	letter-spacing: .4px; text-transform: uppercase; color: #fff; margin-bottom: 8px;
}
.rm-feature-text{ font-size: 13.5px; line-height: 1.55; color: var(--cx-ink-dim); margin: 0; }
.rm-feature-text strong{ color: var(--cx-steel-bri); }

/* ===========================================================
   NAVBAR
   =========================================================== */
#navbar{
	background:
		linear-gradient(180deg, rgba(20,24,32,0.94), rgba(8,9,12,0.97)),
		#0d0f14 url('../img/navbg.jpg') no-repeat top center !important;
	background-size: cover !important;
	width: 100% !important;
	max-width: 1275px;
	border: 1px solid var(--cx-line) !important;
	border-top: 2px solid var(--cx-crimson) !important;
	border-radius: var(--cx-radius) !important;
	box-shadow: var(--cx-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.04) !important;
	overflow: hidden;
}
#navbar ul li{ font-family: var(--cx-display); }
#navbar ul li a{
	color: var(--cx-steel-bri) !important;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 15px;
	padding: 18px 24px !important;
	position: relative;
	text-shadow: 0 1px 2px rgba(0,0,0,0.8);
	transition: color .2s ease, background .2s ease;
}
#navbar ul li a::before{
	content:""; position:absolute; left:20px; right:20px; bottom:10px; height:2px;
	background: linear-gradient(90deg, transparent, var(--cx-crimson-bri), transparent);
	transform: scaleX(0); transition: transform .25s ease;
	box-shadow: 0 0 8px rgba(226,38,61,0.5);
}
#navbar ul li a:hover, #navbar ul li a:focus, #navbar ul li a:active{
	background: linear-gradient(180deg, rgba(226,38,61,0.10), transparent) !important;
	color: #fff !important;
}
#navbar ul li a:hover::before{ transform: scaleX(1); }

/* ===========================================================
   TARJETA DE SERVIDOR (hora / online)
   =========================================================== */
.header-info-container{ margin: 4px auto 26px auto !important; width: auto !important; max-width: 100%; }
.header-info-container .header-info{
	background: linear-gradient(180deg, rgba(23,28,38,0.94), rgba(10,11,15,0.96)) !important;
	border: 1px solid var(--cx-line) !important;
	border-radius: var(--cx-radius-sm) !important;
	box-shadow: var(--cx-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.04) !important;
	padding: 20px 22px !important;
	color: var(--cx-ink) !important;
	width: 350px !important;
	position: relative; overflow: hidden;
}
.header-info-container .header-info::before{
	content:""; position:absolute; left:0; right:0; top:0; height:2px;
	background: linear-gradient(90deg, transparent, var(--cx-crimson), transparent);
}
.header-info-container .header-info i{ color: var(--cx-crimson-bri); }
.header-info-block .online-count{
	color: var(--cx-online) !important; font-weight: 800;
	text-shadow: 0 0 10px rgba(47,224,166,0.35);
}
#tServerTime, #tLocalTime{ color: var(--cx-steel-bri) !important; font-weight: 700; }

.webengine-online-bar{
	background: rgba(0,0,0,0.6) !important;
	border: 1px solid var(--cx-line) !important;
	border-radius: 30px !important;
	height: 13px !important;
	box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
	overflow: hidden;
}
.webengine-online-bar .webengine-online-bar-progress{
	background: linear-gradient(90deg, var(--cx-crimson-deep), var(--cx-crimson), var(--cx-online)) !important;
	box-shadow: 0 0 12px rgba(226,38,61,0.4);
	height: 100% !important;
}

/* ===========================================================
   PANEL PRINCIPAL · "placa de acero" (pieza destacada nro. 2)
   =========================================================== */
.module-contents{
	background: linear-gradient(180deg, rgba(18,21,28,0.97), rgba(9,10,14,0.98)) !important;
	border: 1px solid var(--cx-line) !important;
	border-radius: var(--cx-radius) !important;
	box-shadow: var(--cx-shadow), inset 0 1px 0 rgba(255,255,255,0.04) !important;
	color: var(--cx-ink) !important;
	padding: 32px 34px 44px 34px !important;
	position: relative;
	min-height: 800px;
	overflow: visible;
}
.module-contents::before{
	content:""; position:absolute; left:0; right:0; top:0; height:2px;
	border-radius: var(--cx-radius) var(--cx-radius) 0 0;
	background: linear-gradient(90deg, transparent, var(--cx-crimson), var(--cx-steel), var(--cx-crimson), transparent);
}
.module-contents p, .module-contents li, .module-contents td{ color: var(--cx-ink); }
.module-contents strong, .module-contents b{ color: var(--cx-steel-bri); }
.module-contents h1:not([style*="color"]),
.module-contents h2:not([style*="color"]),
.module-contents h3:not([style*="color"]){
	color: var(--cx-steel-bri);
	font-family: var(--cx-display);
	letter-spacing: .4px;
}
.module-contents hr{
	border: 0; height: 1px; width: 72%; margin: 22px auto;
	background: linear-gradient(90deg, transparent, var(--cx-line-strong), transparent);
}

.page-title{
	font-family: var(--cx-display) !important;
	font-weight: 700 !important;
	font-size: 30px !important;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-align: center;
	margin: 4px 0 28px 0 !important;
	color: #fff !important;
	position: relative;
	padding-bottom: 16px;
}
.page-title::after{
	content:""; position:absolute; left:50%; bottom:0; transform: translateX(-50%);
	width: 90px; height: 3px; border-radius: 3px;
	background: linear-gradient(90deg, transparent, var(--cx-crimson), transparent);
	box-shadow: 0 0 12px rgba(226,38,61,0.6);
}

/* ===========================================================
   NOTICIAS
   =========================================================== */
.panel-news{
	margin-bottom: 26px !important;
	background: linear-gradient(180deg, rgba(18,21,28,0.96), rgba(9,10,14,0.97)) !important;
	border: 1px solid var(--cx-line) !important;
	border-radius: var(--cx-radius-sm) !important;
	box-shadow: var(--cx-shadow-sm) !important;
	color: var(--cx-ink) !important;
	overflow: hidden;
}
.panel-news .panel-heading{
	background: linear-gradient(180deg, rgba(226,38,61,0.14), rgba(226,38,61,0.02)) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--cx-line) !important;
	padding: 16px 18px !important;
}
.panel-news .panel-title, .panel-news .panel-title a,
.home-news-block-header h2, .home-news-block-header h2 a{
	color: #fff !important;
	font-family: var(--cx-display) !important;
	font-weight: 700 !important;
	letter-spacing: .6px;
	text-transform: uppercase;
}
.panel-news .panel-footer{
	background: rgba(0,0,0,0.3) !important;
	border-top: 1px solid var(--cx-line-soft) !important;
	color: var(--cx-ink-dim) !important;
	font-style: italic;
}

/* ===========================================================
   PANELES DE SIDEBAR (mas quietos: la firma vive en el hero
   y en el panel principal, aca solo tarjetas limpias)
   =========================================================== */
.panel-sidebar, .panel-general, .panel-addstats, .panel-downloads{
	background: linear-gradient(180deg, rgba(18,21,28,0.96), rgba(9,10,14,0.97)) !important;
	border: 1px solid var(--cx-line) !important;
	border-radius: var(--cx-radius-sm) !important;
	box-shadow: var(--cx-shadow-sm) !important;
	color: var(--cx-ink) !important;
	margin-bottom: 24px !important;
	overflow: hidden;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.panel-sidebar:hover, .panel-general:hover{
	transform: translateY(-2px);
	box-shadow: var(--cx-shadow-sm), var(--cx-glow-crimson);
	border-color: var(--cx-line-crimson) !important;
}
.panel-sidebar > .panel-heading, .panel-general .panel-heading{
	background: linear-gradient(180deg, rgba(147,166,201,0.10), rgba(147,166,201,0.015)) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--cx-line) !important;
	border-left: 3px solid var(--cx-crimson) !important;
	color: var(--cx-steel-bri) !important;
	padding: 14px 16px !important;
}
.panel-sidebar > .panel-heading > .panel-title, .panel-general .panel-title, .panel-body .panel-title{
	font-family: var(--cx-display) !important;
	font-weight: 700 !important;
	letter-spacing: .6px;
	text-transform: uppercase;
	font-size: 15px !important;
	color: var(--cx-steel-bri) !important;
	border-bottom: 0 !important;
}
.panel-body{ color: var(--cx-ink); padding: 16px !important; }

.panel-sidebar-events{
	background:
		linear-gradient(180deg, rgba(12,14,19,0.85), rgba(8,9,12,0.93)),
		#000 url('../img/panel_events_bg.jpg') no-repeat top center !important;
	background-size: cover !important;
	border: 1px solid var(--cx-line) !important;
	border-radius: var(--cx-radius-sm) !important;
	box-shadow: var(--cx-shadow-sm) !important;
	margin-bottom: 24px !important;
	overflow: hidden;
}
.panel-sidebar-events > .panel-heading{
	background: linear-gradient(180deg, rgba(226,38,61,0.16), rgba(0,0,0,0.3)) !important;
	border: 0 !important; border-bottom: 1px solid var(--cx-line) !important;
	color: #fff !important;
}
.panel-sidebar-events > .panel-heading > .panel-title{
	font-family: var(--cx-display) !important; font-weight: 700 !important;
	letter-spacing: .6px; text-transform: uppercase; color: #fff !important;
}
.panel-sidebar-events > .panel-body{ color: var(--cx-ink) !important; }
.event-schedule-open{ color: var(--cx-online) !important; text-shadow: 0 0 8px rgba(47,224,166,0.4); font-weight: 700; }
.event-schedule-inprogress{ color: var(--cx-gold) !important; font-weight: 700; }

.panel-usercp{
	background:
		linear-gradient(180deg, rgba(16,19,25,0.88), rgba(8,9,12,0.94)),
		#000 url('../img/usercp_bg.jpg') no-repeat top center !important;
	background-size: cover !important;
}
.panel-usercp ul li{
	display: block !important; width: 100%;
	border-bottom: 1px solid var(--cx-line-soft);
	line-height: normal;
}
.panel-usercp ul li:last-child{ border-bottom: 0; }
.panel-usercp ul li a{
	display: flex !important; align-items: center; gap: 10px;
	color: var(--cx-ink) !important; font-weight: 700;
	padding: 10px 10px !important; border-radius: 8px;
	transition: background .16s ease, color .16s ease;
}
.panel-usercp ul li a:hover, .panel-usercp ul li a:active{
	color: #fff !important;
	background: rgba(226,38,61,0.14) !important;
}
.panel-usercp ul li img{
	width: 24px !important; height: 24px !important;
	margin: 0 !important; padding: 0 !important; top: 0 !important;
	position: static !important; flex: 0 0 auto; object-fit: contain;
	filter: drop-shadow(0 0 5px rgba(147,166,201,0.3));
	transition: transform .18s ease;
}
.panel-usercp ul li a:hover img{ transform: scale(1.1); }

.sidebar-banner{ margin: 20px 0 !important; }
.sidebar-banner img{
	border: 1px solid var(--cx-line) !important;
	border-radius: var(--cx-radius-sm) !important;
	box-shadow: var(--cx-shadow-sm);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.sidebar-banner img:hover{
	transform: translateY(-3px);
	box-shadow: var(--cx-shadow-sm), var(--cx-glow-crimson);
	border-color: var(--cx-line-crimson) !important;
}

/* Tablas dentro de paneles */
.panel-body .table{ color: var(--cx-ink); margin-bottom: 0; }
.panel-body .table tr td, .panel-body .table tr th{
	border-top: 1px solid var(--cx-line-soft) !important;
	padding: 9px 8px;
	vertical-align: middle;
}
.panel-body .table tr:first-child td, .panel-body .table th{
	color: var(--cx-steel-bri) !important;
	font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .4px;
	border-top: 0 !important;
	border-bottom: 2px solid var(--cx-line) !important;
}
.panel-body .table tr td i{ color: var(--cx-crimson-bri); margin-right: 4px; }
.panel-body .table tr{ transition: background .16s ease; }
.panel-body .table tr:hover td{ background: rgba(147,166,201,0.08); color: var(--cx-steel-bri); }

/* ===========================================================
   RANKINGS
   =========================================================== */
.rankings_menu{ width: 96%; margin: 0 auto 26px auto; }
.rankings_menu span{ display: none; }
.rankings_menu a{
	display: inline-block;
	width: auto !important; height: auto !important; line-height: normal !important;
	padding: 10px 20px !important; margin: 5px !important;
	border: 1px solid var(--cx-line) !important;
	border-radius: 999px !important;
	background: rgba(255,255,255,0.03) !important;
	color: var(--cx-steel-bri) !important;
	font-family: var(--cx-display) !important;
	font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
	font-size: 13px !important;
	box-shadow: none !important;
	transition: all .18s ease;
}
.rankings_menu a:hover{
	background: rgba(226,38,61,0.12) !important;
	border-color: var(--cx-line-crimson) !important;
	color: #fff !important;
}
.rankings_menu a.active{
	color: #fff !important;
	background: linear-gradient(180deg, var(--cx-crimson-bri), var(--cx-crimson-deep)) !important;
	border-color: rgba(255,120,130,0.6) !important;
	box-shadow: 0 4px 14px rgba(226,38,61,0.35) !important;
}

.rankings-table{
	width: 96%; margin: 0 auto;
	border-collapse: separate; border-spacing: 0;
	background: rgba(0,0,0,0.28);
	border: 1px solid var(--cx-line);
	border-radius: var(--cx-radius-sm);
	overflow: hidden;
	box-shadow: var(--cx-shadow-sm);
}
.rankings-table tr td{
	border: 0; border-bottom: 1px solid var(--cx-line-soft);
	padding: 13px 12px; font-size: 16px; color: var(--cx-ink);
	vertical-align: middle !important; text-align: center;
	transition: background .18s ease, color .18s ease;
}
.rankings-table tr:first-child td{
	font-family: var(--cx-display);
	font-size: 12px !important; letter-spacing: 1px; text-transform: uppercase;
	color: var(--cx-steel-bri) !important;
	background: linear-gradient(180deg, rgba(147,166,201,0.12), rgba(147,166,201,0.02));
	border-bottom: 2px solid var(--cx-line-strong) !important;
	padding: 14px 12px;
}
.rankings-table tr:nth-child(2n+1) td{ background: rgba(255,255,255,0.015); }
.rankings-table tr:not(:first-child):hover td{
	background: rgba(226,38,61,0.08); color: #fff;
	box-shadow: inset 0 0 0 1px rgba(226,38,61,0.18);
}
.rankings-table tr:not(:first-child):hover td:first-child{
	box-shadow: inset 3px 0 0 var(--cx-crimson), inset 0 0 0 1px rgba(226,38,61,0.18);
}
.rankings-table tr:last-child td{ border-bottom: 0; }
.rankings-table-place{ font-family: var(--cx-display); font-weight: 700; font-size: 19px !important; color: var(--cx-ink-dim) !important; }
.rankings-class-image{
	width: 40px !important; height: auto; border-radius: 7px;
	border: 1px solid var(--cx-line); box-shadow: 0 0 10px rgba(0,0,0,0.5);
	background: rgba(0,0,0,0.3);
	transition: transform .2s ease;
}
.rankings-table tr:hover .rankings-class-image{ transform: scale(1.06); }

.rankings-table tr:nth-child(2) td{
	background: linear-gradient(90deg, rgba(242,199,90,0.14), rgba(242,199,90,0.03));
	box-shadow: inset 3px 0 0 var(--cx-rank-gold);
}
.rankings-table tr:nth-child(2) .rankings-table-place{ color: var(--cx-rank-gold) !important; font-size: 22px !important; text-shadow: 0 0 10px rgba(242,199,90,0.45); }
.rankings-table tr:nth-child(3) td{
	background: linear-gradient(90deg, rgba(205,212,221,0.10), rgba(205,212,221,0.02));
	box-shadow: inset 3px 0 0 var(--cx-rank-silver);
}
.rankings-table tr:nth-child(3) .rankings-table-place{ color: var(--cx-rank-silver) !important; font-size: 21px !important; }
.rankings-table tr:nth-child(4) td{
	background: linear-gradient(90deg, rgba(207,138,77,0.11), rgba(207,138,77,0.02));
	box-shadow: inset 3px 0 0 var(--cx-rank-bronze);
}
.rankings-table tr:nth-child(4) .rankings-table-place{ color: var(--cx-rank-bronze) !important; font-size: 20px !important; }
.rankings-update-time{ text-align: right; color: var(--cx-ink-dim); font-size: 11px; padding: 12px 8px 0 8px; width: 96%; margin: 0 auto; }

/* ===========================================================
   MY ACCOUNT / TABLAS GENERALES
   =========================================================== */
.myaccount-table, .general-table-ui{
	width: 100%;
	background: rgba(0,0,0,0.26) !important;
	border: 1px solid var(--cx-line) !important;
	border-radius: var(--cx-radius-sm);
	overflow: hidden;
	color: var(--cx-ink);
}
.myaccount-table tr td, .general-table-ui tr td{
	border-bottom: 1px solid var(--cx-line-soft) !important;
	color: var(--cx-ink); padding: 14px !important;
}
.myaccount-table tr td:first-child{ color: var(--cx-steel-bri) !important; font-weight: 700; }
.general-table-ui tr:first-child td{ color: var(--cx-steel-bri) !important; font-weight: 700; }
.general-table-ui tr:nth-child(2n+2) td{ background: rgba(255,255,255,0.02) !important; }
.myaccount-table tr:last-child td{ border-bottom: 0 !important; }

/* ===========================================================
   BOTONES
   =========================================================== */
.btn{
	border-radius: 8px;
	font-family: var(--cx-display);
	font-weight: 700; letter-spacing: .4px;
	position: relative; overflow: hidden;
	transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn::after{
	content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,0.3), transparent);
	transform: skewX(-20deg); transition: left .55s ease; pointer-events:none;
}
.btn:hover::after{ left: 135%; }

.btn-primary{
	color: #fff !important;
	background: linear-gradient(180deg, var(--cx-crimson-bri), var(--cx-crimson-deep)) !important;
	border: 1px solid rgba(255,120,130,0.5) !important;
	box-shadow: 0 4px 14px rgba(226,38,61,0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{
	background: linear-gradient(180deg, #ff6070, var(--cx-crimson)) !important;
	box-shadow: 0 6px 20px rgba(226,38,61,0.45), var(--cx-glow-crimson) !important;
	transform: translateY(-1px);
}

.btn-yellow{
	color: #1a1200 !important;
	background: linear-gradient(180deg, var(--cx-gold-bri), var(--cx-gold)) !important;
	border: 1px solid rgba(246,226,175,0.55) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-yellow:hover, .btn-yellow:focus, .btn-yellow:active{
	background: linear-gradient(180deg, #fff0c0, var(--cx-gold-bri)) !important;
}

.btn-default{
	color: var(--cx-steel-bri) !important;
	background: rgba(255,255,255,0.04) !important;
	border: 1px solid var(--cx-line) !important;
}
.btn-default:hover{
	background: rgba(147,166,201,0.12) !important;
	border-color: var(--cx-line-strong) !important;
	color: #fff !important;
}

.btn-danger{
	color: #fff !important;
	background: linear-gradient(180deg, #ff5a5a, #a8281f) !important;
	border: 1px solid rgba(255,150,150,0.4) !important;
	box-shadow: 0 3px 12px rgba(168,40,31,0.4) !important;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active{
	background: linear-gradient(180deg, #ff7c6f, #c2342a) !important;
}

/* ===========================================================
   FORMULARIOS
   =========================================================== */
.form-control, input[type=text], input[type=password], input[type=number], input[type=email], textarea, select{
	background: rgba(0,0,0,0.42) !important;
	border: 1px solid var(--cx-line) !important;
	color: var(--cx-steel-bri) !important;
	border-radius: 8px !important;
	height: auto; padding: 11px 14px;
	box-shadow: inset 0 2px 6px rgba(0,0,0,0.5) !important;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control::placeholder, input::placeholder{ color: var(--cx-ink-dim); }
.form-control:focus, input:focus, textarea:focus, select:focus{
	border-color: var(--cx-line-crimson) !important;
	box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 0 0 3px rgba(226,38,61,0.15) !important;
	outline: none;
}
.control-label, label{ color: var(--cx-steel-bri) !important; font-weight: 700; }
.help-block{ color: var(--cx-ink-dim); }
.help-block a{ color: var(--cx-crimson-bri); }

/* ===========================================================
   ALERTAS / BADGES
   =========================================================== */
.alert{ border-radius: var(--cx-radius-sm); border: 1px solid var(--cx-line); background: rgba(0,0,0,0.32); color: var(--cx-ink); }
.alert-danger{ border-color: rgba(255,77,77,0.45) !important; background: rgba(255,77,77,0.1) !important; color: #ffb3b3 !important; }
.alert-success{ border-color: rgba(47,224,166,0.4) !important; background: rgba(47,224,166,0.08) !important; color: #a9f3d9 !important; }
.alert-info, .alert-warning{ border-color: var(--cx-line) !important; background: rgba(147,166,201,0.08) !important; color: var(--cx-steel-bri) !important; }

.label{ font-weight: 700; letter-spacing: .3px; padding: .32em .7em; border-radius: 6px; }
.label-success{ background: rgba(47,224,166,0.16) !important; color: var(--cx-online) !important; border: 1px solid rgba(47,224,166,0.4); }
.label-danger{ background: rgba(255,77,77,0.16) !important; color: #ff9c9c !important; border: 1px solid rgba(255,77,77,0.4); }
.label-default{ background: rgba(255,255,255,0.08) !important; color: var(--cx-ink) !important; }

/* ===========================================================
   PERFILES / CASTLE SIEGE / VIP
   =========================================================== */
.castle-siege-banner{ border: 1px solid var(--cx-line); border-radius: var(--cx-radius-sm) var(--cx-radius-sm) 0 0; box-shadow: var(--cx-shadow-sm); }
.castle-siege-banner-castleowner, .castle-siege-banner-castleowner a{ color: #fff; }
.csinfo_container{ border: 1px solid var(--cx-line) !important; border-radius: var(--cx-radius-sm) !important; box-shadow: var(--cx-shadow-sm) !important; }
.player-profile-header, .guild-profile-header{
	border: 1px solid var(--cx-line) !important;
	border-radius: var(--cx-radius-sm);
	background: linear-gradient(180deg, rgba(18,21,28,0.9), rgba(9,10,14,0.95)) !important;
}
.panel-vip{ border: 1px solid var(--cx-line) !important; border-radius: var(--cx-radius-sm) !important; box-shadow: var(--cx-shadow-sm) !important; overflow: hidden; }
.btn-vip{ color: var(--cx-gold) !important; background: rgba(255,255,255,0.05) !important; border: 1px solid var(--cx-line) !important; }
.btn-vip:hover, .btn-vip:focus, .btn-vip:active{
	color: #1a1200 !important;
	background: linear-gradient(180deg, var(--cx-gold-bri), var(--cx-gold)) !important;
	border-color: rgba(246,226,175,0.8) !important;
}

/* ===========================================================
   FOOTER
   =========================================================== */
.footer{
	border-top: 1px solid var(--cx-line) !important;
	box-shadow: 0 -1px 0 var(--cx-crimson), 0 -10px 30px rgba(0,0,0,0.55);
	color: var(--cx-ink-dim);
	background:
		linear-gradient(180deg, rgba(6,7,10,0.6), rgba(5,6,8,0.97)),
		#000 url('../img/footer_background.png') no-repeat bottom center !important;
	padding: 32px 0 !important;
}
.footer p{ color: var(--cx-ink-dim); line-height: 1.7; }
.footer a{ color: var(--cx-steel-bri); }
.footer-time{ color: var(--cx-crimson-bri) !important; text-shadow: 0 0 16px rgba(226,38,61,0.3); }
.webengine-powered{ color: var(--cx-ink-dim) !important; }
.webengine-powered:hover{ color: var(--cx-crimson-bri) !important; }

/* ===========================================================
   BARRA SOCIAL SUPERIOR (recoloreada al nuevo tema;
   se mantienen los colores de marca de WhatsApp / Facebook)
   =========================================================== */
#ruinmu-socialbar{
	background:
		linear-gradient(90deg, rgba(6,7,10,0.97) 0%, rgba(20,10,12,0.97) 25%, rgba(45,14,18,0.98) 50%, rgba(20,10,12,0.97) 75%, rgba(6,7,10,0.97) 100%) !important;
	border-top: 1px solid rgba(226,38,61,0.30) !important;
	border-bottom: 1px solid rgba(226,38,61,0.30) !important;
	box-shadow: 0 0 16px rgba(226,38,61,0.16), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.5) !important;
}
.rs-label{ color: var(--cx-steel-bri) !important; }
.rs-sep{ color: rgba(147,166,201,0.45) !important; }
.rs-trade{
	background: linear-gradient(180deg, var(--cx-gold-bri), var(--cx-gold)) !important;
	box-shadow: 0 0 12px rgba(227,178,60,0.4) !important;
}

/* ===========================================================
   ANIMACIONES DE ENTRADA (una sola vez, medidas)
   =========================================================== */
@keyframes rmFadeUp{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }
.module-contents{ animation: rmFadeUp .5s ease both; }
.rm-rates-band{ animation: rmFadeUp .45s ease both; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media screen and (max-width: 1340px){
	.rankings-table, .rankings_menu{ width: 100%; }
	#navbar{ width: 96% !important; }
}
@media screen and (max-width: 900px){
	#container{ width: 100% !important; padding: 10px 12px 26px 12px; }
	#container .col-xs-3, #container .col-xs-6, #container .col-xs-9{
		width: 100% !important; float: none !important;
	}
	.header-info-container{ text-align: center !important; }
	.header-info-container .header-info{ width: 100% !important; max-width: 380px; margin: 0 auto; }
	.rm-rate-card{ min-width: 140px; }
	.rm-feature-card{ flex: 1 1 100%; max-width: 420px; text-align: center; }
	.rm-feature-icon{ margin-left: auto; margin-right: auto; }
}
@media screen and (max-width: 768px){
	.page-title{ font-size: 22px !important; }
	.module-contents{ padding: 22px 16px 32px 16px !important; min-height: 0; }
	.rankings-table tr td{ font-size: 14px; padding: 10px 8px; }
	#header{ padding: 34px 0 22px 0 !important; }
	.rm-rate-card .rm-rate-value{ font-size: 25px; }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
	*{ transition: none !important; animation: none !important; }
}
:focus-visible{ outline: 2px solid var(--cx-crimson-bri); outline-offset: 2px; }