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

/* ============================================================
   RUINMU 99B+ · REDISEÑO "OBSIDIANA & ORO FORJADO"
   ------------------------------------------------------------
   Capa visual profesional sobre WebEngine / template Momentum.
   · NO modifica lógica PHP, ni rutas, ni nombres de imágenes.
   · Se carga DESPUÉS de los demás CSS para unificar el look.
   · Estética: seria, sobria, con aire y efectos sutiles.
   · Paleta dorada apagada (premium) sobre carbón/obsidiana.
   ============================================================ */

:root{
	/* --- Superficies --- */
	--rm-night:      #0a0908;   /* base más profunda            */
	--rm-obsidian:   #14110d;   /* superficie de panel          */
	--rm-obsidian-2: #1b1711;   /* superficie elevada / fila par */
	--rm-stone:      #241e16;   /* borde realzado / hover        */

	/* --- Acentos --- */
	--rm-gold:       #e9c878;   /* dorado primario (apagado)     */
	--rm-gold-bri:   #f6e2af;   /* dorado claro / highlight      */
	--rm-bronze:     #b8893f;   /* bronce / acento profundo      */
	--rm-online:     #57e08a;   /* verde "en línea" refinado     */
	--rm-danger:     #e0594f;   /* rojo de acción/salir          */

	/* --- Texto --- */
	--rm-ink:        #d9cfba;   /* cuerpo (pergamino cálido)     */
	--rm-ink-dim:    #9b8f7b;   /* secundario                    */

	/* --- Líneas / filetes --- */
	--rm-line:       rgba(233,200,120,0.16);
	--rm-line-soft:  rgba(233,200,120,0.09);
	--rm-line-strong:rgba(233,200,120,0.34);

	/* --- Podio --- */
	--rm-rank-gold:  #f2c75a;
	--rm-rank-silver:#cdd4dd;
	--rm-rank-bronze:#cf8a4d;

	/* --- Radios / sombras --- */
	--rm-radius:     14px;
	--rm-radius-sm:  10px;
	--rm-shadow:     0 14px 40px rgba(0,0,0,0.55);
	--rm-shadow-sm:  0 6px 18px rgba(0,0,0,0.45);
	--rm-glow:       0 0 22px rgba(233,200,120,0.14);

	/* --- Tipografía --- */
	--rm-display: 'Cinzel', 'Lato', Georgia, 'Times New Roman', serif;
	--rm-body:    'Lato', 'Segoe UI', system-ui, sans-serif;
}

/* ===========================================================
   BASE · FONDO Y ATMÓSFERA
   =========================================================== */
body{
	background:
		linear-gradient(180deg, rgba(8,7,6,0.86) 0%, rgba(8,7,6,0.93) 50%, rgba(6,5,4,0.98) 100%),
		#000 url('../img/background.jpg') no-repeat top center fixed;
	background-size: auto, cover;
	color: var(--rm-ink);
	font-family: var(--rm-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Velo ambiental fijo, muy sutil, para dar profundidad sin "drama" */
body::before{
	content:""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(1100px 460px at 50% -140px, rgba(233,200,120,0.07), transparent 64%),
		radial-gradient(900px 520px at 50% 118%, rgba(120,80,30,0.07), transparent 70%);
}
#navbar, #header, .header-info-container, #container, .footer{ position: relative; z-index: 1; }

a{ color: var(--rm-gold); transition: color .2s ease; }
a:hover{ color: var(--rm-gold-bri); }

::selection{ background: rgba(233,200,120,0.28); color: #1a140a; }

/* Scrollbar acorde a la marca */
*{ scrollbar-color: rgba(233,200,120,0.45) rgba(255,255,255,0.04); 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(--rm-bronze), #6f4f22);
	border-radius: 20px; border: 2px solid rgba(0,0,0,0.45);
}
*::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg, var(--rm-gold), var(--rm-bronze)); }

/* ===========================================================
   CONTENEDOR · MÁS AIRE
   =========================================================== */
#content{ padding-top: 30px; padding-bottom: 40px; }
#container{ padding: 16px 0 26px 0; }

/* ===========================================================
   HEADER / LOGO  (se mantiene logo.png)
   =========================================================== */
#header{
	padding: 56px 0 44px 0;
	position: relative;
}
#header a img{
	max-width: 92%;
	filter: drop-shadow(0 8px 26px rgba(0,0,0,0.6)) drop-shadow(0 0 18px rgba(233,200,120,0.16));
	transition: transform .4s ease, filter .4s ease;
}
#header a img:hover{
	transform: translateY(-2px);
	filter: drop-shadow(0 12px 32px rgba(0,0,0,0.7)) drop-shadow(0 0 26px rgba(233,200,120,0.3)) brightness(106%);
}
/* Filete dorado bajo el logo */
#header::after{
	content:""; position:absolute; left:50%; bottom:24px; transform: translateX(-50%);
	width: 340px; max-width: 56%; height: 1px;
	background: linear-gradient(90deg, transparent, var(--rm-line-strong), var(--rm-gold), var(--rm-line-strong), transparent);
}

/* ===========================================================
   NAVBAR  (mantiene navbg.jpg como textura)
   =========================================================== */
#navbar{
	background:
		linear-gradient(180deg, rgba(22,17,11,0.90), rgba(10,8,6,0.95)),
		#15110b url('../img/navbg.jpg') no-repeat top center;
	background-size: cover;
	border: 1px solid var(--rm-line);
	border-radius: var(--rm-radius);
	box-shadow: var(--rm-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.04);
	overflow: hidden;
}
#navbar ul li{ font-family: var(--rm-body); font-size: 15px; }
#navbar ul li a{
	color: var(--rm-gold) !important;
	font-weight: 700;
	letter-spacing: .8px;
	text-transform: uppercase;
	font-size: 14px;
	padding: 19px 26px;
	position: relative;
	text-shadow: 0 1px 2px rgba(0,0,0,0.8);
	transition: color .22s ease, background .22s ease;
}
#navbar ul li a::before{
	content:""; position:absolute; left:22px; right:22px; bottom:11px; height:2px;
	background: linear-gradient(90deg, transparent, var(--rm-gold), transparent);
	transform: scaleX(0); transform-origin: center; transition: transform .28s ease;
	box-shadow: 0 0 8px rgba(233,200,120,0.4);
}
#navbar ul li a:hover,
#navbar ul li a:focus,
#navbar ul li a:active{
	background: linear-gradient(180deg, rgba(233,200,120,0.10), transparent) !important;
	color: var(--rm-gold-bri) !important;
}
#navbar ul li a:hover::before{ transform: scaleX(1); }

/* ===========================================================
   TARJETA DE INFO DEL SERVIDOR (server time / online)
   =========================================================== */
.header-info-container{ margin: 6px auto 26px auto; }
.header-info-container .header-info{
	background:
		linear-gradient(180deg, rgba(27,23,17,0.92), rgba(12,10,8,0.94)) !important;
	border: 1px solid var(--rm-line) !important;
	border-radius: var(--rm-radius) !important;
	box-shadow: var(--rm-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.04) !important;
	padding: 22px 24px !important;
	color: var(--rm-ink) !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(--rm-gold), transparent);
	box-shadow: 0 0 10px rgba(233,200,120,0.4);
}
.header-info-container .header-info i{ color: var(--rm-gold); }
.header-info-block .online-count{
	color: var(--rm-online) !important;
	font-weight: 800;
	text-shadow: 0 0 10px rgba(87,224,138,0.35);
}
#tServerTime, #tLocalTime{ color: var(--rm-gold-bri) !important; font-weight: 700; }

/* Barra "online" del header */
.webengine-online-bar{
	background: rgba(0,0,0,0.55) !important;
	border: 1px solid var(--rm-line) !important;
	border-radius: 30px !important;
	height: 14px !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, #2faf63, var(--rm-online), #8ff0b3) !important;
	box-shadow: 0 0 12px rgba(87,224,138,0.4);
	height: 100% !important;
}

/* ===========================================================
   MÓDULO CENTRAL · LA PIEZA ESTRELLA ("placa forjada")
   Reemplaza la caja blanca + borde azul.
   =========================================================== */
.module-contents{
	background:
		linear-gradient(180deg, rgba(22,18,13,0.97), rgba(12,10,8,0.98));
	border: 1px solid var(--rm-line);
	border-radius: var(--rm-radius);
	box-shadow: var(--rm-shadow), inset 0 1px 0 rgba(255,255,255,0.04);
	color: var(--rm-ink);
	padding: 34px 36px 46px 36px;
	position: relative;
	min-height: 800px;
	overflow: visible;
}
/* Filete superior grabado */
.module-contents::before{
	content:""; position:absolute; left:0; right:0; top:0; height:2px;
	border-radius: var(--rm-radius) var(--rm-radius) 0 0;
	background: linear-gradient(90deg, transparent, var(--rm-line-strong), var(--rm-gold), var(--rm-line-strong), transparent);
	box-shadow: 0 0 12px rgba(233,200,120,0.3);
}
/* Doble hairline interior (sensación de placa) */
.module-contents::after{
	content:""; position:absolute; inset: 7px; border: 1px solid var(--rm-line-soft);
	border-radius: calc(var(--rm-radius) - 5px); pointer-events: none;
}
.module-contents p, .module-contents li, .module-contents td{ color: var(--rm-ink); }
.module-contents strong, .module-contents b{ color: var(--rm-gold-bri); }

/* Esquinas ornamentales (firma del diseño, hechas en CSS) */
.module-contents > .page-title:first-child{ margin-top: 4px; }

/* ===========================================================
   TÍTULO DE PÁGINA · oro grabado + filete
   =========================================================== */
.page-title{
	font-family: var(--rm-display);
	font-weight: 700;
	font-size: 28px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	margin: 6px 0 30px 0;
	color: transparent;
	background: linear-gradient(180deg, var(--rm-gold-bri) 0%, var(--rm-gold) 50%, var(--rm-bronze) 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 2px 5px rgba(0,0,0,0.6));
	position: relative;
	padding-bottom: 18px;
}
.page-title::after{
	content:""; position:absolute; left:50%; bottom:0; transform: translateX(-50%);
	width: 84px; height: 3px; border-radius: 3px;
	background: linear-gradient(90deg, transparent, var(--rm-gold), transparent);
	box-shadow: 0 0 12px rgba(233,200,120,0.5);
}

/* Títulos genéricos dentro del contenido */
.module-contents h1:not([style*="color"]),
.module-contents h2:not([style*="color"]),
.module-contents h3:not([style*="color"]){
	color: var(--rm-gold-bri);
	font-family: var(--rm-display);
	letter-spacing: .4px;
}
.module-contents hr{
	border: 0; height: 1px; width: 72%; margin: 22px auto;
	background: linear-gradient(90deg, transparent, var(--rm-line-strong), transparent);
}

/* ===========================================================
   NOTICIAS
   =========================================================== */
.panel-news{
	margin-bottom: 30px !important;
	background: linear-gradient(180deg, rgba(22,18,13,0.96), rgba(12,10,8,0.97)) !important;
	border: 1px solid var(--rm-line) !important;
	border-radius: var(--rm-radius-sm) !important;
	box-shadow: var(--rm-shadow-sm) !important;
	color: var(--rm-ink) !important;
	overflow: hidden;
}
.panel-news .panel-heading{
	background: linear-gradient(180deg, rgba(233,200,120,0.12), rgba(233,200,120,0.02)) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--rm-line) !important;
	padding: 18px 20px !important;
}
.panel-news .panel-title,
.panel-news .panel-title a,
.home-news-block-header h2,
.home-news-block-header h2 a{
	color: var(--rm-gold) !important;
	font-family: var(--rm-display) !important;
	font-weight: 700 !important;
	letter-spacing: .6px;
	text-transform: uppercase;
}
.panel-news .panel-footer{
	background: rgba(0,0,0,0.25) !important;
	border-top: 1px solid var(--rm-line-soft) !important;
	color: var(--rm-ink-dim) !important;
	font-style: italic;
}

/* ===========================================================
   PANELES DE SIDEBAR · unificados
   =========================================================== */
.panel-sidebar,
.panel-general,
.panel-addstats,
.panel-downloads{
	background: linear-gradient(180deg, rgba(22,18,13,0.96), rgba(12,10,8,0.97)) !important;
	border: 1px solid var(--rm-line) !important;
	border-radius: var(--rm-radius-sm) !important;
	box-shadow: var(--rm-shadow-sm) !important;
	color: var(--rm-ink) !important;
	margin-bottom: 28px !important;
	overflow: hidden;
}
.panel-sidebar > .panel-heading,
.panel-general .panel-heading{
	background: linear-gradient(180deg, rgba(233,200,120,0.13), rgba(233,200,120,0.02)) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--rm-line) !important;
	color: var(--rm-gold) !important;
	padding: 15px 18px !important;
}
.panel-sidebar > .panel-heading > .panel-title,
.panel-general .panel-title,
.panel-body .panel-title{
	font-family: var(--rm-display) !important;
	font-weight: 700 !important;
	letter-spacing: .6px;
	text-transform: uppercase;
	font-size: 15px !important;
	color: var(--rm-gold) !important;
	border-bottom: 0 !important;
}
.panel-body{ color: var(--rm-ink); padding: 18px !important; }

/* Eventos (mantiene panel_events_bg.jpg, le ponemos velo legible) */
.panel-sidebar-events{
	background:
		linear-gradient(180deg, rgba(14,11,8,0.82), rgba(10,8,6,0.92)),
		#000 url('../img/panel_events_bg.jpg') no-repeat top center !important;
	background-size: cover !important;
	border: 1px solid var(--rm-line) !important;
	border-radius: var(--rm-radius-sm) !important;
	box-shadow: var(--rm-shadow-sm) !important;
	margin-bottom: 28px !important;
	overflow: hidden;
}
.panel-sidebar-events > .panel-heading{
	background: linear-gradient(180deg, rgba(233,200,120,0.13), rgba(0,0,0,0.25)) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--rm-line) !important;
	color: var(--rm-gold) !important;
}
.panel-sidebar-events > .panel-heading > .panel-title{
	font-family: var(--rm-display) !important; font-weight: 700 !important;
	letter-spacing: .6px; text-transform: uppercase; color: var(--rm-gold) !important;
}
.panel-sidebar-events > .panel-body{ color: var(--rm-ink) !important; }
.event-schedule-open{ color: var(--rm-online) !important; text-shadow: 0 0 8px rgba(87,224,138,0.4); font-weight: 700; }
.event-schedule-inprogress{ color: var(--rm-gold) !important; font-weight: 700; }

/* USERCP (mantiene usercp_bg.jpg con velo) · íconos alineados */
.panel-usercp{
	background:
		linear-gradient(180deg, rgba(20,16,12,0.88), rgba(10,8,6,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(--rm-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: 11px;
	color: var(--rm-ink) !important; font-weight: 700;
	padding: 11px 10px !important; border-radius: 9px;
	transition: background .16s ease, color .16s ease;
}
.panel-usercp ul li a:hover,
.panel-usercp ul li a:active{
	color: var(--rm-gold-bri) !important;
	background: rgba(233,200,120,0.10) !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(233,200,120,0.3));
	transition: transform .18s ease;
}
.panel-usercp ul li a:hover img{ transform: scale(1.12); }

/* Banners del sidebar (mantienen sus imágenes) */
.sidebar-banner{ margin: 22px 0 !important; }
.sidebar-banner img{
	border: 1px solid var(--rm-line) !important;
	border-radius: var(--rm-radius-sm) !important;
	box-shadow: var(--rm-shadow-sm);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sidebar-banner img:hover{
	transform: translateY(-3px);
	box-shadow: var(--rm-shadow-sm), var(--rm-glow);
	border-color: var(--rm-line-strong) !important;
}

/* ===========================================================
   TABLAS GENÉRICAS (.table de bootstrap dentro de paneles)
   =========================================================== */
.panel-body .table{ color: var(--rm-ink); margin-bottom: 0; }
.panel-body .table tr td,
.panel-body .table tr th{
	border-top: 1px solid var(--rm-line-soft) !important;
	padding: 9px 8px;
	vertical-align: middle;
}
.panel-body .table tr:first-child td,
.panel-body .table th{
	color: var(--rm-gold) !important;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .4px;
	border-top: 0 !important;
	border-bottom: 2px solid var(--rm-line) !important;
}
.panel-body .table tr td i{ color: var(--rm-bronze); margin-right: 4px; }
.panel-body .table tr{ transition: background .16s ease; }
.panel-body .table tr:hover td{ background: rgba(233,200,120,0.07); color: var(--rm-gold-bri); }

/* ===========================================================
   RANKINGS · pieza central (sobrio, sin animaciones invasivas)
   =========================================================== */
.rankings_menu{ width: 96%; margin: 0 auto 28px 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(--rm-line) !important;
	border-radius: 999px !important;
	background: rgba(255,255,255,0.03) !important;
	color: var(--rm-gold) !important;
	font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
	font-size: 13px !important;
	box-shadow: none !important;
	transition: all .18s ease;
}
.rankings_menu a:hover{
	background: rgba(233,200,120,0.10) !important;
	border-color: var(--rm-line-strong) !important;
	color: var(--rm-gold-bri) !important;
	transform: translateY(-1px);
}
.rankings_menu a.active{
	color: #2a1f0c !important;
	background: linear-gradient(180deg, var(--rm-gold-bri), var(--rm-gold)) !important;
	border-color: rgba(246,226,175,0.7) !important;
	box-shadow: 0 4px 14px rgba(233,200,120,0.3) !important;
}

.rankings-table{
	width: 96%; margin: 0 auto;
	border-collapse: separate; border-spacing: 0;
	background: rgba(0,0,0,0.24);
	border: 1px solid var(--rm-line);
	border-radius: var(--rm-radius-sm);
	overflow: hidden;
	box-shadow: var(--rm-shadow-sm);
}
.rankings-table tr td{
	border: 0;
	border-bottom: 1px solid var(--rm-line-soft);
	padding: 13px 12px;
	font-size: 16px;
	color: var(--rm-ink);
	vertical-align: middle !important;
	text-align: center;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.rankings-table tr:first-child td{
	font-family: var(--rm-display);
	font-size: 12px !important; letter-spacing: 1px; text-transform: uppercase;
	color: var(--rm-gold) !important;
	background: linear-gradient(180deg, rgba(233,200,120,0.12), rgba(233,200,120,0.03));
	border-bottom: 2px solid var(--rm-line-strong) !important;
	padding: 15px 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(233,200,120,0.09);
	color: var(--rm-gold-bri);
	box-shadow: inset 0 0 0 1px rgba(233,200,120,0.16);
}
.rankings-table tr:not(:first-child):hover td:first-child{
	box-shadow: inset 3px 0 0 var(--rm-gold), inset 0 0 0 1px rgba(233,200,120,0.16);
}
.rankings-table tr:last-child td{ border-bottom: 0; }

.rankings-table-place{
	font-family: var(--rm-display);
	font-weight: 700; font-size: 19px !important;
	color: var(--rm-ink-dim) !important;
}
.rankings-class-image{
	width: 40px !important; height: auto;
	border-radius: 8px;
	border: 1px solid var(--rm-line);
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	background: rgba(0,0,0,0.3);
	transition: transform .2s ease, box-shadow .2s ease;
}
.rankings-table tr:hover .rankings-class-image{ transform: scale(1.06); box-shadow: 0 0 12px rgba(233,200,120,0.35); }

/* Podio Top-3 (filas 2,3,4): acento lateral sobrio, sin parpadeo */
.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(--rm-rank-gold);
}
.rankings-table tr:nth-child(2) .rankings-table-place{
	color: var(--rm-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(--rm-rank-silver);
}
.rankings-table tr:nth-child(3) .rankings-table-place{
	color: var(--rm-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(--rm-rank-bronze);
}
.rankings-table tr:nth-child(4) .rankings-table-place{
	color: var(--rm-rank-bronze) !important; font-size: 20px !important;
}
.rankings-update-time{ text-align: right; color: var(--rm-ink-dim); font-size: 11px; padding: 12px 8px 0 8px; width: 96%; margin: 0 auto; }
.rankings-gens-img{ filter: drop-shadow(0 0 4px rgba(0,0,0,0.6)); }
.online-status-indicator{ filter: drop-shadow(0 0 4px rgba(87,224,138,0.6)); }

/* ===========================================================
   MY ACCOUNT / GENERAL TABLE UI
   =========================================================== */
.myaccount-table, .general-table-ui{
	width: 100%;
	background: rgba(0,0,0,0.24) !important;
	border: 1px solid var(--rm-line) !important;
	border-radius: var(--rm-radius-sm);
	overflow: hidden;
	color: var(--rm-ink);
}
.myaccount-table tr td, .general-table-ui tr td{
	border-bottom: 1px solid var(--rm-line-soft) !important;
	color: var(--rm-ink); padding: 14px !important;
}
.myaccount-table tr td:first-child{ color: var(--rm-gold) !important; font-weight: 700; }
.general-table-ui tr:first-child td{ color: var(--rm-gold) !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 · oro forjado (override del azul de WebEngine)
   =========================================================== */
.btn{
	border-radius: 9px;
	font-weight: 700; letter-spacing: .3px;
	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); }
/* Barrido de brillo sutil */
.btn::after{
	content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
	transform: skewX(-20deg); transition: left .55s ease; pointer-events:none;
}
.btn:hover::after{ left: 135%; }

.btn-primary{
	color: #2a1f0c !important;
	background: linear-gradient(180deg, var(--rm-gold-bri), var(--rm-gold)) !important;
	border: 1px solid rgba(246,226,175,0.6) !important;
	box-shadow: 0 4px 14px rgba(233,200,120,0.22), inset 0 1px 0 rgba(255,255,255,0.4) !important;
	text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{
	color: #1c1407 !important;
	background: linear-gradient(180deg, #fff0d2, var(--rm-gold-bri)) !important;
	border-color: rgba(246,226,175,0.85) !important;
	box-shadow: 0 6px 20px rgba(233,200,120,0.4), var(--rm-glow), inset 0 1px 0 rgba(255,255,255,0.5) !important;
	transform: translateY(-1px);
}

.btn-yellow{
	color: #2a1f0c !important;
	background: linear-gradient(180deg, var(--rm-gold-bri), var(--rm-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{
	color: #2a1f0c !important;
	background: linear-gradient(180deg, #fff4dd, var(--rm-gold-bri)) !important;
	border-color: rgba(246,226,175,0.85) !important;
}

.btn-default{
	color: var(--rm-gold) !important;
	background: rgba(255,255,255,0.04) !important;
	border: 1px solid var(--rm-line) !important;
}
.btn-default:hover{
	background: rgba(233,200,120,0.12) !important;
	border-color: var(--rm-line-strong) !important;
	color: var(--rm-gold-bri) !important;
}

.btn-danger{
	color: #fff !important;
	background: linear-gradient(180deg, #e0594f, #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, #ec6c5f, #c2342a) !important;
	color: #fff !important;
}

/* ===========================================================
   FORMULARIOS · inputs oscuros, foco oro (override del claro)
   =========================================================== */
.form-control,
input[type=text], input[type=password], input[type=number], input[type=email], textarea, select{
	background: rgba(0,0,0,0.4) !important;
	border: 1px solid var(--rm-line) !important;
	color: var(--rm-gold-bri) !important;
	border-radius: 9px !important;
	height: auto;
	padding: 11px 14px;
	box-shadow: inset 0 2px 6px rgba(0,0,0,0.45) !important;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-control::placeholder,
input::placeholder{ color: var(--rm-ink-dim); }
.form-control:focus,
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, input[type=email]:focus, textarea:focus, select:focus{
	border-color: var(--rm-line-strong) !important;
	box-shadow: inset 0 2px 6px rgba(0,0,0,0.45), 0 0 0 3px rgba(233,200,120,0.15), 0 0 14px rgba(233,200,120,0.16) !important;
	outline: none;
}
.control-label, label{ color: var(--rm-gold) !important; font-weight: 700; }
.help-block{ color: var(--rm-ink-dim); }
.help-block a{ color: var(--rm-gold); }
.form-horizontal .form-group{ margin-bottom: 16px; }

/* ===========================================================
   ALERTAS / BADGES
   =========================================================== */
.alert{
	border-radius: var(--rm-radius-sm);
	border: 1px solid var(--rm-line);
	background: rgba(0,0,0,0.3);
	color: var(--rm-ink);
}
.alert-danger{ border-color: rgba(224,89,79,0.45) !important; background: rgba(224,89,79,0.10) !important; color: #ffb3ad !important; }
.alert-success{ border-color: rgba(87,224,138,0.4) !important; background: rgba(87,224,138,0.08) !important; color: #a9f3c5 !important; }
.alert-info, .alert-warning{ border-color: var(--rm-line) !important; background: rgba(233,200,120,0.08) !important; color: var(--rm-gold) !important; }

.label{ font-weight: 700; letter-spacing: .3px; padding: .32em .7em; border-radius: 6px; }
.label-success{ background: rgba(87,224,138,0.16) !important; color: var(--rm-online) !important; border: 1px solid rgba(87,224,138,0.4); }
.label-danger{ background: rgba(224,89,79,0.16) !important; color: #ff948c !important; border: 1px solid rgba(224,89,79,0.4); }
.label-default{ background: rgba(255,255,255,0.08) !important; color: var(--rm-ink) !important; }

/* ===========================================================
   PERFILES / CASTLE SIEGE · realce suave (mantiene imágenes)
   =========================================================== */
.castle-siege-banner{
	border: 1px solid var(--rm-line);
	border-radius: var(--rm-radius-sm) var(--rm-radius-sm) 0 0;
	box-shadow: var(--rm-shadow-sm);
}
.castle-siege-banner-castleowner, .castle-siege-banner-castleowner a{ color: var(--rm-gold-bri); }
.csinfo_container{
	border: 1px solid var(--rm-line) !important;
	border-radius: var(--rm-radius-sm) !important;
	box-shadow: var(--rm-shadow-sm) !important;
}
.player-profile-header, .guild-profile-header{
	border: 1px solid var(--rm-line) !important;
	border-radius: var(--rm-radius-sm);
	background: linear-gradient(180deg, rgba(27,23,17,0.9), rgba(12,10,8,0.95)) !important;
}

/* VIP (mantiene sus imágenes de fondo, sólo pulimos marco) */
.panel-vip{
	border: 1px solid var(--rm-line) !important;
	border-radius: var(--rm-radius-sm) !important;
	box-shadow: var(--rm-shadow-sm) !important;
	overflow: hidden;
}
.btn-vip{
	color: var(--rm-gold) !important;
	background: rgba(255,255,255,0.05) !important;
	border: 1px solid var(--rm-line) !important;
}
.btn-vip:hover, .btn-vip:focus, .btn-vip:active{
	color: #1c1407 !important;
	background: linear-gradient(180deg, var(--rm-gold-bri), var(--rm-gold)) !important;
	border-color: rgba(246,226,175,0.8) !important;
}

/* ===========================================================
   FOOTER
   =========================================================== */
.footer{
	border-top: 1px solid var(--rm-line) !important;
	box-shadow: 0 -1px 0 var(--rm-gold), 0 -10px 30px rgba(0,0,0,0.5);
	color: var(--rm-ink-dim);
	background:
		linear-gradient(180deg, rgba(8,7,6,0.55), rgba(6,5,4,0.96)),
		#000 url('../img/footer_background.png') no-repeat bottom center;
	padding: 34px 0 !important;
}
.footer p{ color: var(--rm-ink-dim); line-height: 1.7; }
.footer a{ color: var(--rm-gold); }
.footer-time{
	color: var(--rm-gold) !important;
	text-shadow: 0 0 16px rgba(233,200,120,0.3);
}
.webengine-powered{ color: var(--rm-ink-dim) !important; }
.webengine-powered:hover{ color: var(--rm-gold) !important; }

/* ===========================================================
   EFECTOS · aparición suave + elevación (medidos, no invasivos)
   =========================================================== */
@keyframes rmFadeUp{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }
.module-contents{ animation: rmFadeUp .5s ease both; }
.panel-sidebar, .panel-general, .panel-news, .panel-usercp, .panel-sidebar-events{
	animation: rmFadeUp .5s ease both;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.panel-sidebar:hover, .panel-general:hover, .panel-news:hover, .panel-usercp:hover, .panel-sidebar-events:hover{
	transform: translateY(-3px);
	box-shadow: var(--rm-shadow-sm), var(--rm-glow);
	border-color: var(--rm-line-strong) !important;
}

/* ===========================================================
   RESPONSIVE · suavizado (la base es desktop fijo 1300px)
   =========================================================== */
@media screen and (max-width: 1340px){
	.rankings-table, .rankings_menu{ width: 100%; }
}
@media screen and (max-width: 768px){
	.page-title{ font-size: 23px; }
	.module-contents{ padding: 22px 16px 32px 16px; }
	.rankings-table tr td{ font-size: 14px; padding: 10px 8px; }
	#header{ padding: 40px 0 30px 0; }
}

/* Accesibilidad: respetar "reduce motion" */
@media (prefers-reduced-motion: reduce){
	*{ transition: none !important; animation: none !important; }
}