/*
 * MU Amerika — reskin de paleta sobre el tema base "pulse".
 * Solo overrides: no se toca v1.css / pulsemucms.css. Cargar despues de ambos.
 */

:root{
	/* Paleta base: navy oscuro + dorado/ambar (antes: gris neutro + rojo ladrillo) */
	--dark-color: #030c14;
	--light-gray-color: #0f1526;
	--light-dark-color: #141c33;

	/* Acento principal (antes "186, 99, 86" rojizo) */
	--theme-color: 242, 184, 79;
	--theme-color2: 194, 90, 42;
	--theme-color3: 226, 87, 42;

	/* Gradientes de marca usados por .gradient-btn, hero, tags, etc. */
	--bs-gradient: linear-gradient(to right, #7a3a12 0%, #c2582a 100%);
	--bs-gradient-5: linear-gradient(135deg, #ffd685 0%, #f2b84f 45%, #e2572a 100%);

	--mu-gold-100: #ffe9b8;
	--mu-gold-300: #ffd685;
	--mu-gold-400: #f2b84f;
	--mu-ember-500: #e2572a;
	--mu-line: rgba(242, 184, 79, .16);
}

body{
	background-image:
		radial-gradient(1100px 550px at 15% -8%, rgba(226, 87, 42, .12), transparent 60%),
		radial-gradient(900px 450px at 88% 0%, rgba(242, 184, 79, .10), transparent 55%);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* ---------- Header / navbar (estilo copiado de mudream.online) ---------- */
.header-wrapper.header-layout4{
	background-color: var(--dark-color);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
	position: relative;
	z-index: 100;
	isolation: isolate;
}
.header-wrapper.header-layout4 .bg-light-gray{
	background-color: transparent !important;
}

/* Botones tipo pildora (Registration, login submit) */
.header-wrapper .vs-btn2.outline3,
.header-wrapper .form-login-button{
	border-radius: 999px !important;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .02em;
}
.header-wrapper .vs-btn2.outline3{
	background: linear-gradient(135deg, var(--mu-gold-300), var(--mu-ember-500));
	color: #1a0e02 !important;
	border-color: transparent !important;
	padding: 10px 24px;
	box-shadow: 0 8px 20px -6px rgba(226, 87, 42, .5);
}

/* Nav con icono arriba + texto abajo, como mudream.online */
.mu-icon-nav{
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mu-icon-nav .mu-nav-item{
	position: relative;
	vertical-align: top;
	z-index: 1;
	border-radius: 10px;
	transition: background .2s ease, box-shadow .2s ease;
}
/* El desplegable (190px) es mas ancho que su boton (~80px) y queda
   centrado, asi que invade el espacio de los items vecinos. Sin esto,
   esos vecinos (sin z-index propio) tapaban el menu justo en la zona
   donde se superponen y se robaban el click/hover -> parecia que el
   menu "se cerraba solo" al querer elegir una opcion. */
.mu-icon-nav .mu-nav-item:hover,
.mu-icon-nav .mu-nav-item.mu-nav-open{
	z-index: 60;
	background: linear-gradient(160deg, rgba(255, 214, 133, .30), rgba(226, 87, 42, .24));
	box-shadow: 0 0 20px rgba(242, 184, 79, .5), inset 0 0 0 1px rgba(255, 214, 133, .35);
}
.mu-icon-nav .mu-nav-link{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 80px;
	padding: 12px 16px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.mu-icon-nav .mu-nav-link i:first-child{
	font-size: 18px;
	color: var(--mu-gold-300);
}
.mu-icon-nav .mu-nav-link .mu-nav-caret{
	font-size: 8px;
	margin-left: 2px;
	color: rgba(255, 255, 255, .5);
}
.mu-icon-nav .mu-nav-item:hover .mu-nav-link{
	color: var(--mu-gold-300);
}
/* Desplegable por CLICK (controlado por JS, ver view.header.php),
   NO por :hover - el hover resulto muy inestable en PC (se abria y
   cerraba solo en loop) por como esta armado el menu de este tema.
   Un click normal es mucho mas confiable. */
.mu-icon-nav .mu-nav-dropdown{
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 50;
	list-style: none;
	margin: 0;
	padding: 6px;
	min-width: 190px;
	background: var(--light-dark-color);
	border: 1px solid var(--mu-line);
	border-radius: 10px;
	box-shadow: 0 16px 32px rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%);
	transition: opacity .15s ease, visibility .15s;
}
.mu-icon-nav .mu-nav-has-dropdown.mu-nav-open .mu-nav-dropdown{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
/* El tema tiene una regla generica ".main-menu ul li{ display:inline-block }"
   que tambien pisaba estos items del submenu, achicando/desalineando
   el area clickeable real. Forzamos bloque completo. */
.mu-icon-nav .mu-nav-dropdown li{
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}
.mu-icon-nav .mu-nav-dropdown li:not(:last-child){
	border-bottom: 1px solid var(--mu-line);
}
.mu-icon-nav .mu-nav-dropdown li a{
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	color: #fff;
	border-radius: 6px;
	padding: 11px 14px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
}
.mu-icon-nav .mu-nav-dropdown li a i{
	width: 14px;
	text-align: center;
	color: var(--mu-gold-300);
	font-size: 13px;
}
.mu-icon-nav .mu-nav-dropdown li a:hover{
	background: rgba(242, 184, 79, .12);
	color: var(--mu-gold-300);
}

/* Menu "About Game" de la barra sticky (aparece al hacer scroll): el
   tema lo trae con :hover puro (ver v1.css), el mismo problema que ya
   se resolvio arriba para el menu con icono - el mouse se sale del
   area chica del link al bajar hacia las opciones y el menu se cierra
   antes de poder hacer click. Se anula ese :hover y se controla por
   click (clase .mu-nav-open, ver view.header.php). */
.main-menu ul li.mega-menu-wrap:hover ul.mega-menu{
	visibility: hidden;
	opacity: 0;
	z-index: -1;
}
.main-menu ul li.mega-menu-wrap.mu-nav-open{
	z-index: 60;
}
.main-menu ul li.mega-menu-wrap.mu-nav-open ul.mega-menu{
	visibility: visible;
	opacity: 1;
	margin-top: 0;
	z-index: 9;
}

/* Selector de idioma (barra sticky y header principal): dependia del
   JS de dropdown de Bootstrap (data-bs-toggle), que en este tema tiene
   el mismo problema de fondo que los menus de arriba. Se paso al mismo
   sistema de click + clase .show manejada a mano (ver view.header.php),
   asi que hace falta re-declarar el posicionamiento que antes ponia
   Popper.js automaticamente. */
.header-list1 > li{
	position: relative;
}
.header-list1 .dropdown-menu{
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	left: auto;
}
.header-list1 .dropdown-menu.show{
	display: block;
}
.header-list1 > li.mu-nav-open{
	z-index: 70;
}

/* Caja "Welcome + moneda" del header (solo se ve logueado, en
   desktop): no tenia ancho maximo, asi que crecia libre segun el
   largo del nombre de usuario y los montos de moneda formateados -
   eso le quitaba espacio al menu de iconos de al lado, haciendo que
   "Rankings" (la ultima opcion) saltara a una segunda linea. Le
   ponemos un ancho fijo (medido para que las 6 opciones del menu
   sigan entrando en una sola linea desde 1280px de ancho para
   arriba - por debajo de 992px el tema ya cambia solo al menu
   hamburguesa) y recortamos el nombre de usuario si es muy largo. */
.col-auto.py-10.dh-sm-none.dh-md-block .header-info-box{
	max-width: 300px;
}
.col-auto.py-10.dh-sm-none.dh-md-block .header-info-box .has-border strong{
	display: inline-block;
	max-width: 110px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}
/* Las dos monedas (AMK Coin / EventPoint) van una al lado de la otra
   (mas lindo que apiladas), con letra un toque mas chica y menos
   espacio entre ellas para que entren las dos aun con montos de
   muchos digitos. */
.col-auto.py-10.dh-sm-none.dh-md-block .header-info-box p.fs-xs{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 4px 6px;
	align-items: baseline;
}
.col-auto.py-10.dh-sm-none.dh-md-block .header-info-box p.fs-xs strong{
	font-size: 10px;
	white-space: nowrap;
}

/* ---------- Tarjetas / paneles ---------- */
.bg-major-black{
	background-color: var(--light-dark-color);
	border: 1px solid var(--mu-line);
	border-radius: 14px;
}
.vs-sidebox,
.vs-sidebox-v2{
	border: 1px solid var(--mu-line);
	border-radius: 14px;
}
.blog-meta.has-border{
	border-radius: 14px 14px 0 0;
	border-bottom: 1px solid var(--mu-line) !important;
}
.blog-content.bg-major-black{
	border-radius: 0 0 14px 14px;
	border-top: none;
}

/* Titulo de las cajas de ranking del home (Top Players, Top Guilds,
   etc, dentro del carrusel #slideStrem): antes era un titulo suelto
   con una linea gris fina abajo, igual al de cualquier otro sidebox
   del sitio (Latest Items, etc). Le damos una franja de fondo propia
   (mismo tono navy de la tarjeta pero un poco mas clara, para que se
   note como cabecera) que ocupa todo el ancho de la tarjeta - por
   eso el margen negativo, para "salirse" del padding que ya trae
   .vs-sidebox y llegar hasta el borde. Acotado a #slideStrem para no
   afectar los sideboxes de otras paginas que reusan .sidebox-title. */
#slideStrem .sidebox-title{
	margin: -35px -40px 20px;
	padding: 13px 40px;
	background: #1f2a4d;
	border-bottom: 1px solid var(--mu-line);
	border-radius: 14px 14px 0 0;
}
#slideStrem .sidebox-title:before{
	content: none;
}
#slideStrem .sidebox-title i{
	color: var(--mu-gold-300);
	margin-right: 9px;
	font-size: 15px;
}
@media (max-width: 1199px){
	#slideStrem .sidebox-title{
		margin: -17px -20px 20px;
		padding: 13px 20px;
	}
}

/* Las cajas de ranking del home (Top Players/Duels/Castle Siege en
   una fila del carrusel, Top KD Ratio/Top Guilds en la otra) tenian
   cada una su propia altura segun cuanto contenido tenian adentro, y
   quedaban desparejas en la misma fila. El <div class="row"> de
   Bootstrap ya estira las columnas a la altura de la mas alta; solo
   faltaba que la caja visible de adentro (vs-sidebox) ocupe ese
   100% en vez de quedarse en su altura natural. Acotado al carrusel
   de rankings del home para no afectar vs-sidebox en otras paginas. */
#slideStrem .vs-sidebox{
	height: 100%;
}

/* ---------- Tablas de rankings ---------- */
.dmn-account-table tbody tr:hover td,
.dmn-rankings-table tbody tr:hover td{
	background-color: rgba(242, 184, 79, .05);
}
.dmn-account-table thead tr,
.dmn-rankings-table thead tr{
	border-bottom: 1px solid var(--mu-line) !important;
}

/* Encabezado de las cajas de ranking (Top Players/Guilds/Killers/KD
   Ratio en el home) - antes no tenian ninguna fila con el nombre de
   cada columna, solo se veian los datos sin saber que eran. */
.row-ranking.header{
	background-color: var(--light-gray-color) !important;
	border: 1px solid var(--mu-line);
	border-radius: 8px;
	margin-bottom: 8px !important;
}
.row-ranking.header .cell-ranking{
	background: transparent !important;
	color: var(--mu-gold-300) !important;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 10px 15px;
}

/* La caja "Top KD Ratio" es igual de angosta que las otras (1/3 del
   ancho) pero el nombre del personaje + "Kills / Deaths" no entraban
   y el texto saltaba de linea, rompiendo el alto de la fila. Achico
   la letra un toque y trunco el nombre con "..." si es muy largo,
   en vez de dejar que se corte a lo bruto. */
.ranking-kd .cell-ranking{
	font-size: 13px;
	padding-left: 8px !important;
	padding-right: 8px !important;
}
.ranking-kd .cell-ranking:nth-child(2){
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1.1;
}
.ranking-kd .cell-ranking:nth-child(3),
.ranking-kd .cell-ranking:nth-child(4){
	white-space: nowrap;
	font-size: 12px;
}

/* Caja "Top Guilds" del home: el logo del clan y el nombre estaban en
   el mismo renglon de texto (logo en linea + nombre), asi que un
   nombre largo se iba a una segunda linea que quedaba por debajo del
   logo en vez de al lado, bien feo. El nombre de clan tiene un
   maximo de 8 caracteres en este servidor, asi que con la letra un
   toque mas chica y el logo+nombre alineados en fila fija, siempre
   entra en un solo renglon. Acotado solo a esta caja del home
   (#top_guilds) para no tocar otras paginas de ranking que
   reutilizan la misma clase .ranking-4. */
#top_guilds .ranking-4 .cell-ranking:nth-child(2){
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	white-space: nowrap;
}
#top_guilds .ranking-4 .cell-ranking:nth-child(2) img{
	margin: 0 !important;
	flex-shrink: 0;
}

/* ---------- Formularios ---------- */
/* .form-control traia "border: 1px solid transparent" y su fondo
   (bg-light-dark) quedo del mismo tono que las tarjetas que lo
   contienen (bg-major-black) -> las cajas de texto se volvieron
   invisibles (registro, login, etc.). Les damos un borde visible. */
.form-control{
	border: 1px solid var(--mu-line) !important;
}
.form-control:focus{
	border-color: var(--mu-gold-400) !important;
	box-shadow: 0 0 0 2px rgba(242, 184, 79, .15) !important;
}

/* Los checkbox/radio (ej. "acepto las reglas" en registro) tenian el
   mismo problema: appearance:none + fondo del mismo tono que la
   tarjeta, sin borde -> invisibles. Al tildarlos, el tema los hacia
   volver al checkbox nativo negro sobre fondo oscuro (igual de dificil
   de ver). Les damos borde siempre visible + tilde dorada al marcar. */
input[type=checkbox],
input[type=radio]{
	border: 1px solid var(--mu-line) !important;
	margin-right: 8px;
	vertical-align: middle;
}
input[type=checkbox]:checked,
input[type=radio]:checked{
	appearance: none !important;
	background: linear-gradient(135deg, var(--mu-gold-300), var(--mu-ember-500)) !important;
	border-color: var(--mu-ember-500) !important;
}
input[type=checkbox]:checked::after{
	content: '\2713';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1a0e02;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
input[type=radio]:checked::after{
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: #1a0e02;
}

/* Las listas de paquetes de donacion (PayPal, LTC/NowPayments, etc.
   usan <ul class="list-group">) traen el fondo blanco por defecto de
   Bootstrap, con texto gris clarito -> quedaban practicamente
   ilegibles sobre el resto del sitio, que es oscuro. */
.list-group-item{
	background-color: var(--light-dark-color) !important;
	border-color: var(--mu-line) !important;
	color: #fff !important;
}
.list-group-item h3,
.list-group-item h4{
	color: #fff;
}
.list-group-item h3 span:first-child{
	color: var(--mu-gold-300);
}

/* ---------- Pestañas (nav-pills) ---------- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link{
	background: linear-gradient(135deg, var(--mu-gold-300), var(--mu-ember-500));
	color: #1a0e02 !important;
	font-weight: 700;
}

/* ---------- Chips de gremio (rankings, castle siege) ---------- */
.guild-chip{
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: var(--mu-gold-300);
	background: rgba(242, 184, 79, .1);
	border: 1px solid var(--mu-line);
	padding: 4px 11px;
	border-radius: 999px;
}
.guild-chip-muted{
	color: rgba(255, 255, 255, .45);
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .08);
}

/* ---------- Hero ---------- */
/* El slider de la portada (LayerSlider) arma sus capas internas con
   z-index bastante altos (hasta 35-40) y, al no tener el hero un
   z-index propio (quedaba en "auto"), esas capas terminan ganandole
   al header por como el navegador compara los z-index entre hermanos.
   Resultado: el menu se ve y se abre bien, pero los clicks en las
   opciones de adentro (Donar, VIP, etc.) los agarra el slider en vez
   del link real - pasa solo en la portada porque es la unica pagina
   con este slider. Con z-index + isolation, el hero queda encerrado
   en su propia "caja" de apilamiento y no puede volver a escaparse,
   sin importar que numero interno use el slider. */
.vs-hero-wrapper{
	position: relative;
	z-index: 1;
	isolation: isolate;
	overflow: hidden;
}
/* El tema trae una regla ".ls-bg video{ height:100%; ... }" pensada
   para un video ADENTRO de un contenedor con esa clase, pero en esta
   pagina la clase "ls-bg" esta puesta directo en el <video> (no en un
   div que lo contenga), asi que esa regla nunca se aplicaba. Sin
   height:100%, el video caia en el height:auto generico del tema y
   se dibujaba a su porcentaje real (1920x1080) en vez del tamaño del
   hero - se veia enorme y tapaba la tarjeta de abajo. Esto ya pasaba
   antes, solo que quedaba escondido detras del problema de z-index
   que arreglamos arriba; al arreglar ese, este quedo a la vista. */
video.ls-bg{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.vs-hero-wrapper:before{
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(900px 500px at 20% 10%, rgba(226, 87, 42, .18), transparent 60%),
		radial-gradient(700px 400px at 85% 0%, rgba(242, 184, 79, .14), transparent 55%);
}
/* El logo hero usa la clase Bootstrap w-100 (!important), que sin tope
   lo estira al ancho completo del slide y empuja/tapa el texto de abajo. */
.vs-hero-wrapper img[src*="logo-h2"]{
	max-width: 512px !important;
	width: 512px !important;
	height: auto !important;
}
/* El ancho fijo de arriba (512px) es para escritorio - en mobile
   (pantallas angostas, ej 375px) ese mismo ancho forzado se
   desborda y se ve gigante. Lo achicamos por debajo del breakpoint
   sm de Bootstrap (576px). */
@media (max-width: 576px){
	.vs-hero-wrapper img[src*="logo-h2"]{
		max-width: 300px !important;
		width: 300px !important;
	}
}
@media (min-width: 577px) and (max-width: 991px){
	.vs-hero-wrapper img[src*="logo-h2"]{
		max-width: 320px !important;
		width: 320px !important;
	}
}

/* Los botones "Registration"/"Discord" del hero (.vs-btn) no traian
   font-weight propio (heredaban el normal/400 del body), por eso se
   veian mucho mas finos y costaba leerlos al lado del cartelito
   "Season 6.20" (.vs-btn2), que se ve mas grueso. Los igualamos. */
.vs-hero-wrapper .vs-btn{
	font-weight: 700;
}

/* Logo del header (bg_bi_season19.png / logo-header.png): usan la
   clase Bootstrap w-75 (ancho = 75% del contenedor), que dependia
   de que el archivo de imagen ya fuera chico en pixeles para verse
   bien - funcionaba "de casualidad". Al reemplazar el archivo por
   uno mas grande en resolucion real, el w-75 ya no alcanza para
   contenerlo (el contenedor no tiene un ancho fijo propio) y el
   logo se desborda, estirando toda la barra del header. Le ponemos
   un tope de alto fijo en su lugar, igual que ya se hizo arriba
   para el logo del hero. */
.header-wrapper img[src*="bg_bi_season19"]{
	max-height: 105px !important;
	width: auto !important;
	/* La fila del logo + "Players Online" usa gx-0 (sin espacio entre
	   columnas de Bootstrap), asi que quedaban pegados uno al otro -
	   antes no se notaba porque el logo viejo era chico y dejaba
	   hueco de sobra a su derecha. Separamos con margen propio. */
	margin-right: 25px;
}
.mobile-logo img[src*="bg_bi_season19"]{
	max-height: 55px;
	width: auto !important;
}
img[src*="logo-header"]{
	max-height: 55px !important;
	width: auto !important;
}
/* El logo del header en mobile (clase w-50, d-lg-none) usa el mismo
   tope que el de escritorio (105px), pero en una barra mas angosta
   se ve desproporcionado/muy grande. Le bajamos el tope solo por
   debajo del breakpoint lg (991px, el mismo donde el tema cambia al
   menu hamburguesa), y todavia mas chico por debajo de 576px
   (celulares angostos). */
@media (max-width: 991px){
	.header-wrapper img[src*="bg_bi_season19"]{
		max-height: 60px !important;
		margin-right: 12px;
	}
	img[src*="logo-header"]{
		max-height: 44px !important;
	}
}
@media (max-width: 576px){
	.header-wrapper img[src*="bg_bi_season19"]{
		max-height: 48px !important;
		margin-right: 8px;
	}
	img[src*="logo-header"]{
		max-height: 38px !important;
	}
}

/* Caja "Players Online" en mobile: traia margin-left:-40px (clase
   ml-40-off del tema) para acercarla al logo cuando el logo era
   chico - con el logo nuevo le queda muy pegada/montada encima.
   La corremos hacia la derecha. */
.col-auto.dh-xs-block .header-info-box.ml-40-off{
	margin-left: 10px !important;
}

/* Logo del hero en mobile (dh-xs-block, el bloque simple sin
   LayerSlider): subimos el bloque completo (logo+texto+botones)
   bajando el "top" del contenedor, Y ADEMAS subimos el logo un
   poco mas todavia dentro de ese bloque (con position:relative,
   no afecta a los hermanos) para que quede separado de los
   botones. */
@media(max-width:767px){
	.dh-top-header{
		top: 190px !important;
	}
}
@media(max-width:540px){
	.dh-top-header{
		top: 200px !important;
	}
}
.dh-top-header .mt-50-off{
	position: relative;
	top: -35px;
	margin-bottom: 10px !important;
}

/* ---------- Bento grid de features (home) ---------- */
.mu-bento{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 120px;
	gap: 8px;
}
.mu-tile{
	position: relative;
	border-radius: 14px;
	background: linear-gradient(155deg, var(--light-dark-color), var(--light-gray-color));
	border: 1px solid var(--mu-line);
	padding: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.mu-tile:before{
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(220px 120px at 90% -10%, rgba(242, 184, 79, .14), transparent 70%);
	pointer-events: none;
}
.mu-tile h3{
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #fff;
	position: relative;
	margin: 0;
}
.mu-tile p{
	margin: 4px 0 0;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .5);
	position: relative;
}
.mu-tile .mu-tag{
	position: absolute;
	top: 16px;
	right: 16px;
	font: 800 10px/1 var(--theme-font4);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--dark-color);
	background: var(--mu-gold-400);
	padding: 5px 9px;
	border-radius: 999px;
}
.mu-tile .mu-icon{
	font-size: 22px;
	opacity: .9;
	position: relative;
}
.mu-tile.big{ grid-column: span 3; grid-row: span 3; }
.mu-tile.big h3{ font-size: 24px; }
.mu-tile .mu-icon-lg{ font-size: 36px; margin-bottom: 4px; color: var(--mu-gold-300); }
.mu-tile.wide{ grid-column: span 3; grid-row: span 1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; }
.mu-tile.med{ grid-column: span 2; grid-row: span 2; }
.mu-tile.tall{ grid-column: span 2; grid-row: span 3; }
.mu-tile.small{ grid-column: span 2; grid-row: span 1; }

/* Ranking In Game y la tarjeta slide fijas en las mismas 2 columnas,
   una debajo de la otra (en vez de dejar que el grid las acomode solas) */
.mu-tile.mu-tile-ranking{ grid-column: 4 / 6; }
.mu-tile.mu-tile-slide{ grid-column: 4 / 6; }

/* Fondos con capturas reales del juego (assets/amerikamu/images/ y assets/pulse/images/mu-tile-*), con degradado oscuro encima para que el texto se lea bien */
.mu-tile-dungeon{
	background:
		linear-gradient(180deg, rgba(5, 7, 13, .30) 0%, rgba(5, 7, 13, .55) 55%, rgba(5, 7, 13, .93) 100%),
		url('../images/mu-tile-dungeon-bg.jpg') center/cover no-repeat;
}
.mu-tile-soul{
	background:
		linear-gradient(180deg, rgba(5, 7, 13, .35) 0%, rgba(5, 7, 13, .60) 55%, rgba(5, 7, 13, .93) 100%),
		url('../images/mu-tile-soul-bg.jpg') center/cover no-repeat;
}
.mu-tile-ranking{
	background:
		linear-gradient(180deg, rgba(5, 7, 13, .35) 0%, rgba(5, 7, 13, .60) 55%, rgba(5, 7, 13, .93) 100%),
		url('../images/mu-tile-ranking-bg.jpg') center/cover no-repeat;
}
.mu-tile-quest{
	background:
		linear-gradient(90deg, rgba(5, 7, 13, .90) 0%, rgba(5, 7, 13, .55) 60%, rgba(5, 7, 13, .35) 100%),
		url('../images/mu-tile-quest-bg.jpg') center/cover no-repeat;
}
.mu-tile-classes{
	background:
		linear-gradient(180deg, rgba(5, 7, 13, .35) 0%, rgba(5, 7, 13, .60) 55%, rgba(5, 7, 13, .93) 100%),
		url('../images/mu-tile-classes-bg.jpg') center/cover no-repeat;
}
.mu-tile-interface{
	background:
		linear-gradient(180deg, rgba(5, 7, 13, .35) 0%, rgba(5, 7, 13, .60) 55%, rgba(5, 7, 13, .93) 100%),
		url('../images/mu-tile-interface-bg.jpg') center/cover no-repeat;
}

/* Tarjeta tipo slide: dos fondos que se van alternando solos con un crossfade */
.mu-tile-slide{ padding: 0; }
.mu-tile-slide .mu-slide{
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 20px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	animation: mu-slide-fade 10s infinite;
}
.mu-tile-slide .mu-slide-market{
	background-image:
		linear-gradient(180deg, rgba(5, 7, 13, .35) 0%, rgba(5, 7, 13, .60) 55%, rgba(5, 7, 13, .93) 100%),
		url('../images/mu-tile-market-bg.jpg');
	animation-delay: 0s;
}
.mu-tile-slide .mu-slide-raid{
	background-image:
		linear-gradient(180deg, rgba(5, 7, 13, .35) 0%, rgba(5, 7, 13, .60) 55%, rgba(5, 7, 13, .93) 100%),
		url('../images/mu-tile-raid-bg.jpg');
	animation-delay: -5s;
}
.mu-tile-slide .mu-slide-dots{
	position: absolute;
	z-index: 2;
	top: 16px;
	right: 16px;
	display: flex;
	gap: 6px;
}
.mu-tile-slide .mu-slide-dots span{
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .35);
}
@keyframes mu-slide-fade{
	0%, 45%{ opacity: 1; }
	55%, 95%{ opacity: 0; }
	100%{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
	.mu-tile-slide .mu-slide{ animation: none; }
	.mu-tile-slide .mu-slide-market{ opacity: 1; }
	.mu-tile-slide .mu-slide-raid{ opacity: 0; }
}

@media (max-width: 900px){
	.mu-bento{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(140px, auto); }
	.mu-tile.big, .mu-tile.wide, .mu-tile.med, .mu-tile.tall, .mu-tile.small{
		grid-column: span 2;
		grid-row: span 1;
		min-height: 140px;
	}
	/* La utilidad .mb-25-off del tema (margin-bottom:-25px) esta pensada
	   para compensarse con el margin-bottom:20px que .sec-title2 solo
	   trae en pantallas grandes (min-width:1199px). En celular ese
	   margen no existe, asi que el -25px queda "pelado" y mete el
	   titulo de la seccion encima de la primera tarjeta/carrusel. */
	.row.mb-25-off + .mu-bento,
	.row.mb-25-off + .position-relative.arrow-wrap{
		margin-top: 25px;
	}
}

/* ---------- Features (carrusel copiado de mudream.online) ---------- */
.mu-feature-slider .slick-slide{
	padding: 0 12px;
}
.mu-feature-slider .slick-slide > div{
	transition: opacity .3s ease, transform .3s ease;
	opacity: .4;
	transform: scale(.92);
}
.mu-feature-slider .slick-slide.slick-current > div{
	opacity: 1;
	transform: scale(1);
}
.mu-feature-slide{
	position: relative;
	height: 380px;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--mu-line);
}
.mu-feature-slide img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mu-feature-caption{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 22px 26px;
	background: linear-gradient(180deg, transparent 0%, rgba(5, 7, 13, .75) 55%, rgba(5, 7, 13, .96) 100%);
}
.mu-feature-caption h3{
	color: #fff;
	text-transform: uppercase;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: .02em;
	margin: 0 0 6px;
}
.mu-feature-caption p{
	color: rgba(255, 255, 255, .6);
	font-size: 13px;
	margin: 0;
	max-width: 420px;
}
@media (max-width: 991px){
	.mu-feature-slide{ height: 300px; }
}
/* El tema nunca traia estilos para .slick-dots (ningun otro carrusel
   del sitio los usaba, solo flechas) - sin esto quedaban como una
   lista vertical de numeros sin formato, ocupando un montón de alto. */
.mu-feature-slider .slick-dots{
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	list-style: none;
	position: static;
	width: auto;
	margin: 24px 0 0;
	padding: 0;
}
.mu-feature-slider .slick-dots li{
	position: static;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
}
.mu-feature-slider .slick-dots li button{
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, .25);
	font-size: 0;
	line-height: 0;
	color: transparent;
	text-indent: -9999px;
	cursor: pointer;
	transition: width .2s ease, background .2s ease;
}
.mu-feature-slider .slick-dots li.slick-active button{
	background: var(--mu-gold-300);
	width: 22px;
}

/* ---------- Noticias compactas + banner de Discord ---------- */
.mu-news-compact{
	padding: 6px 24px;
}
.mu-news-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--mu-line);
	color: #fff;
}
.mu-news-row:last-child{
	border-bottom: none;
}
.mu-news-row:hover .mu-news-title{
	color: var(--mu-gold-300);
}
.mu-news-title{
	font-size: 14px;
	font-weight: 600;
}
.mu-news-date{
	font-size: 12px;
	color: rgba(255, 255, 255, .4);
	white-space: nowrap;
}
.mu-discord-banner{
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
	padding: 18px 22px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(88, 101, 242, .16), rgba(88, 101, 242, .04));
	border: 1px solid rgba(88, 101, 242, .35);
	color: #fff;
	text-decoration: none;
}
.mu-discord-banner:hover{
	border-color: rgba(88, 101, 242, .6);
	color: #fff;
}
.mu-discord-banner > i:first-child{
	font-size: 28px;
	color: #5865f2;
	flex-shrink: 0;
}
.mu-discord-banner div{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.mu-discord-banner strong{
	font-size: 14px;
}
.mu-discord-banner span{
	font-size: 12.5px;
	color: rgba(255, 255, 255, .5);
}
.mu-discord-banner > i:last-child{
	color: rgba(255, 255, 255, .4);
}

/* ---------- Item Rank System (rango de opciones excelentes) ---------- */
/* Un color por rango, del mas bajo al mas alto:
   Normal=blanco, Uncommon=verde, Rare=azul, Epic=lila,
   Legendary=naranja, Mythic=rojo, Super=amarillo/dorado. */
.mu-rank-0{ color: #FFFFFF; }
.mu-rank-1{ color: #2ECC71; }
.mu-rank-2{ color: #3B82F6; }
.mu-rank-3{ color: #B266FF; }
.mu-rank-4{ color: #FF8C1A; }
.mu-rank-5{ color: #FF3B3B; }
.mu-rank-6{ color: #FADE09; }

/* El tooltip de items (#tooltip, plugin jquery.tooltip.js) traia
   letra de solo 10px y 5px de padding - se veia muy chico, sobre
   todo ahora que el Item Rank System agrega mas lineas de texto por
   item. Lo agrandamos sin tocar pulsemucms.css directamente. */
#tooltip{
	font-size: 13px !important;
	padding: 10px 12px !important;
	max-width: 320px;
}
#tooltip .item_size_12{
	font-size: 13px;
}


/* ---------- Menu inferior fijo en mobile (estilo app, inspirado en la
   barra inferior de mudream.online) - accesos directos a las mismas 6
   secciones del menu de arriba, pero clavado abajo de la pantalla: la
   pagina se desplaza, esta barra no se mueve. Solo aparece en mobile,
   en desktop el menu de arriba ya cumple esa funcion. ---------- */
.mu-bottom-nav{
	display: none;
}
@media (max-width: 767px){
	.mu-bottom-nav{
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 200;
		isolation: isolate;
		height: 64px;
		box-sizing: border-box;
		background: var(--dark-color);
		border-top: 1px solid var(--mu-line);
		box-shadow: 0 -8px 24px rgba(0, 0, 0, .45);
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
		justify-content: space-around;
		align-items: center;
	}
	.mu-bottom-nav a{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		flex: 1;
		min-width: 0;
		height: 100%;
		padding: 4px 2px 0;
		color: #fff;
		font-size: 9px;
		font-weight: 700;
		letter-spacing: 0;
		text-transform: uppercase;
		text-decoration: none;
		border-top: 2px solid transparent;
		box-sizing: border-box;
	}
	/* Los items son flex:1 en una barra de 6, asi que en pantallas
	   angostas (320-375px) el texto en mayusculas de las etiquetas mas
	   largas (RANKINGS, DOWNLOADS) podia ser mas ancho que su columna.
	   Un span de texto normal no se achica solo (min-width:auto por
	   defecto en flex items) y se desbordaba hasta pasarse del borde
	   derecho de la pantalla, donde quedaba cortado a lo bruto por el
	   overflow-x:hidden del body. Con min-width:0 en el item + esto en
	   el texto, si no entra corta prolijo con "..." en vez de salirse
	   de la pantalla. */
	.mu-bottom-nav a span{
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.mu-bottom-nav a i{
		font-size: 17px;
		color: var(--mu-gold-300);
	}
	/* Item activo (su panel esta abierto): se pone dorado + una rayita
	   naranja arriba, igual que la referencia que mandaste. */
	.mu-bottom-nav a.mu-bottom-active{
		color: var(--mu-gold-300);
		border-top-color: var(--mu-ember-500);
	}
	.mu-bottom-nav a.mu-bottom-active i{
		color: var(--mu-ember-500);
	}
	/* Deja lugar abajo de toda la pagina para que esta barra no tape el
	   pie de pagina ni el ultimo contenido. */
	body{
		padding-bottom: calc(64px + env(safe-area-inset-bottom));
	}
	/* El boton flotante de "volver arriba" quedaba tapado detras de esta
	   barra nueva - lo subo para que se vea completo por encima. */
	.scrollToTop.show{
		bottom: 82px !important;
	}

	/* Fondo transparente clickeable: aparece detras del panel para poder
	   cerrarlo tocando afuera, sin oscurecer el resto de la pagina. */
	.mu-bottom-overlay{
		position: fixed;
		inset: 0;
		z-index: 198;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
	.mu-bottom-overlay.mu-bottom-overlay-show{
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* Panel que se despliega hacia ARRIBA desde la barra inferior al
	   tocar Donate/Markets/Info/Rankings (igual que en la captura de
	   referencia): queda pegado justo encima de la barra (que se sigue
	   viendo abajo, con el icono tocado resaltado), con su propio
	   encabezado (icono + titulo + boton cerrar) y la lista de opciones
	   de ese menu, cada una con icono + titulo + descripcion corta. */
	.mu-bottom-panel{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 64px;
		z-index: 199;
		max-height: 60vh;
		overflow-y: auto;
		background: var(--dark-color);
		border-top: 1px solid var(--mu-line);
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -12px 32px rgba(0, 0, 0, .5);
		transform: translateY(12px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: transform .2s ease, opacity .2s ease, visibility .2s;
	}
	.mu-bottom-panel.mu-bottom-panel-open{
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	.mu-bottom-panel-header{
		position: sticky;
		top: 0;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 16px 18px;
		background: var(--light-dark-color);
		border-radius: 16px 16px 0 0;
		border-bottom: 1px solid var(--mu-line);
	}
	.mu-bottom-panel-header i:first-child{
		font-size: 18px;
		color: var(--mu-gold-300);
	}
	.mu-bottom-panel-header span{
		flex: 1;
		font-size: 14px;
		font-weight: 800;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: #fff;
	}
	.mu-bottom-panel-close{
		width: 28px;
		height: 28px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		border: none;
		background: rgba(255, 255, 255, .08);
		color: #fff;
		font-size: 13px;
		padding: 0;
	}
	.mu-bottom-panel-body{
		padding: 4px 8px;
	}
	.mu-bottom-panel-item{
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 12px 10px;
		border-bottom: 1px solid var(--mu-line);
		text-decoration: none;
	}
	.mu-bottom-panel-item:last-child{
		border-bottom: none;
	}
	.mu-bottom-panel-icon{
		flex-shrink: 0;
		width: 38px;
		height: 38px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: linear-gradient(135deg, rgba(255, 214, 133, .18), rgba(226, 87, 42, .12));
		border: 1px solid var(--mu-line);
		color: var(--mu-gold-300);
		font-size: 15px;
	}
	.mu-bottom-panel-text{
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.mu-bottom-panel-text strong{
		font-size: 13.5px;
		color: #fff;
		letter-spacing: .02em;
		text-transform: uppercase;
	}
	.mu-bottom-panel-text small{
		font-size: 11.5px;
		color: rgba(255, 255, 255, .5);
	}
}

/* ---------- Banner de fondo del hero en mobile (banner_mobile.jpg) ---------- */
/* El tema original define este fondo SIN "background-size", asi que la
   imagen se dibujaba a su tamaño real en pixeles (sin escalar) - con la
   imagen vieja (1920px de ancho) eso significaba que en un celular solo
   se veia una franja angosta del centro, recortada por el ancho de la
   pantalla. Le agregamos "cover" para que la imagen siempre se escale y
   llene el espacio disponible, se vea completa (sin franjas raras) y no
   dependa de que la proxima imagen que se use tenga el mismo tamaño en
   pixeles que esta. */
@media (max-width: 767px){
	.bg-header{
		background-size: cover !important;
		background-position: center center !important;
	}
}