@font-face {
    font-family: Futura-Bold;
    src: url(../img/FuturaLT-Bold_0.ttf);
    font-weight: 400;
    font-style: normal;
}

body {
    background: #FFF;
    font-family: Arial;
    color: #5f5855;
    padding: 0;
    margin: 0;
}

p {
    padding: 0;
    margin: 0;
}

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#wrapper {
    width: 100%;
    background: url(../img/bg.jpg) center top no-repeat;
    position: absolute;
    top: 0;
}

#main {
    width: 1022px;
    margin: 0 auto;
    position: relative;
    background: url(../img/Logo.png) center top no-repeat;
}

#navigation {
    width: 942px;
    height: 130px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    top: 25px;
}

#navigation ul li {
    width: 90px;
    height: 102px;
    float: left;
    overflow: hidden;
}

#navigation ul li img {
    position: relative;
}

#navigation ul li:nth-child(2) img {
    left: -100px;
}

#navigation ul li:nth-child(3) {
    width: 140px;
}

#navigation ul li:nth-child(3) img {
    left: -195px;
}

#navigation ul li:nth-child(4) {
    width: 265px;
}

#navigation ul li:nth-child(5) {
    width: 140px;
}

#navigation ul li:nth-child(5) img {
    left: -600px;
}

#navigation ul li:nth-child(6) {
    width: 80px;
}

#navigation ul li:nth-child(6) img {
    left: -740px;
}

#navigation ul li:nth-child(7) {
    width: 130px;
}

#navigation ul li:nth-child(7) img {
    left: -825px;
}

#navigation ul li img {
    transition: opacity 0.3s ease, filter 0.3s ease;
}

#navigation ul li img:hover {
    opacity: 0.85;
    filter: brightness(1.1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}


#header {
    width: 100%;
    height: 380px;
    background: url(../img/containerBgTop.png) center bottom no-repeat;
    float: left;
    position: relative;
}

#container {
    width: 100%;
    min-height: 550px;
    background: url(../img/containerBgInner.png) center top repeat-y;
    float: left;
    padding: 0 13px;
    box-sizing: border-box;
}

.containerLeft {
    width: 250px;
    float: left;
}

.containerRight {
    width: 740px;
    float: left;
}

#containerBottom {
    width: 100%;
    height: 17px;
    background: url(../img/containerBgBottom.png) center top no-repeat;
    float: left;
}

.containerMain {
    position: relative;
    margin-top: -50px;
}

.footerNav {
    height: 60px;
}

.indexPage {
    width: 100%;
}

.newsArea {
    width: 436px;
    height: 284px;
    background: url(../img/newsBg.jpg) center top no-repeat;
    float: left;
    margin-top: 5px;
}




.sliderArea {
    width: 553px;
    height: 289px;
    float: left;
    background: url(../img/sliderBg.jpg) center top no-repeat;
    margin-left: 5px;
    position: relative; /* Contexto de posicionamiento */
    overflow: hidden; /* Oculta cualquier contenido que se desborde */
    
    /* Mejora de los bordes */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave para transformaciones y sombras */
}

.sliderArea:hover {
    transform: scale(1.4); /* Ligero escalado en hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada en hover */
}

.sliderArea::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3); /* Sombra interna para profundidad */
    pointer-events: none; /* Permite que los clics pasen a través del pseudo-elemento */
}

.sliderArea > div {
    width: 539px;
    height: 277px; /* Ajuste de la altura para evitar desbordamiento */
    margin: 5px 0 0 7px; /* Ajuste del margen superior para corregir el deslizamiento */
    position: relative; /* Contexto de posicionamiento para el video */
    overflow: hidden; /* Importante si el video todavía se desborda */
    
    /* Asegura que los bordes redondeados y la sombra apliquen correctamente */
    border-radius: 6px; /* Ajusta ligeramente el radio para el contenido interno */
}



#sliderShow > div {
    position: relative;
    width: 100%;
    height: 278px;
}

#sliderShow div p {
    position: absolute;
    display: block;
    background: rgba(255,255,255,.8);
    z-index: 10;
    bottom: 20px;
    padding: 8px 10px;
    box-sizing: border-box;
    font-family: Arial;
    font-weight: 700;
}

#sliderShow div p span {
    display: block;
    font-size: 14pt;
    line-height: 15pt;
    font-family: Futura-Bold;
    color: #7e8a3d;
    font-weight: 700;
    text-shadow: 0 3px 0 rgba(255,255,255,1);
}




.indexBottom {
    margin-top: 8px;
}



/* Contenedor flexible para alinear video y tabla */
.contenedor-flex {
    justify-content: space-around; /* Distribuir las secciones */
    align-items: stretch; /* Alinea las secciones para que tengan la misma altura */
    margin: 10px 0;
    border: 3px solid #C5D479; /* Borde de 4px de ancho con color #BBCA6A */
    border-radius: 10px; /* Esquinas redondeadas de 10px */
    padding: 3px; /* Espacio entre el borde y el contenido */
}




.videoArea {
    width: 450px;
    height: 260px;
    float: left;
    background: #bbca6a; /* Marco verde */
    border-radius: 5px; /* Bordes redondeados para el contenedor */
    padding: 4px;
    box-sizing: border-box;
    overflow: hidden; /* Asegura que el contenido no se salga */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
}

/* Efecto hover para el contenedor y el video */
.videoArea:hover {
    transform: scale(1.2); /* Agranda el contenedor (y el video con el marco) en hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada en hover */
}

.rounded-video {
    width: 100%;
    height: 100%;
    border-radius: 5px; /* Bordes redondeados para el video */
    overflow: hidden; /* Asegura que el contenido del iframe también sea redondeado */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para el video */
}



.woeSchdArea {
    width: 450px;
    height: 240px; /* Altura total del contenedor */
    max-width: 900px;
    margin: 5px auto;
    padding: 5px;
    background-color: transparent;
    border-radius: 2px;
    box-shadow: none;
    display: flex; /* Asegura que el contenido de la tabla se expanda */
    flex-direction: column;
}

.woeSchd h1 {
    text-align: center;
    font-family: 'Arial', sans-serif;
    font-size: 20px;
    color: #333;
    margin-bottom: 5px;
    flex-shrink: 0; /* Asegura que el título no colapse */
}

.woeSchd table {
    width: 100%;
    flex-grow: 1; /* Hace que la tabla ocupe el espacio restante en el contenedor */
    border-collapse: collapse;
    font-family: 'Arial', sans-serif;
    font-size: 15px;
    text-align: center;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
}

.woeSchd table th, 
.woeSchd table td {
    padding: 5px;
    border-bottom: 1px solid #ddd;
    text-align: center;
    vertical-align: middle; /* Alinea el contenido verticalmente */
    background-color: #fff;
    transition: background-color 0.3s ease;
	font-size: 16px;
	font-weight: bold;
}

.woeSchd table th {
    background-color: #BBCA6A;
    color: white;
    font-size: 16px;
	font-weight: bold;
}

.woeSchd table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.woeSchd table tr:hover {
    background-color: #f1f1f1;
    transform: scale(1.05);
}

.woeSchd .status-active {
    color: green;
}

.woeSchd .status-inactive {
    color: red;
}

.woe-commands {
    text-align: center; /* Centra el texto */
    font-family: 'Poppins', sans-serif; /* O cualquier fuente que estés usando */
    font-size: 14px; /* Tamaño de letra */
    color: #333; /* Color de texto */
    margin-top: 10px; /* Espacio superior para separar del contenido anterior */
}






.social-support {
    position: fixed;
    top: 50%; /* Centrado verticalmente */
    right: 10px; /* Posicionado a la derecha */
    transform: translateY(-50%); /* Centra los botones */
    z-index: 9999;
    display: flex;
    flex-direction: column; /* Alinea los botones uno debajo del otro */
    gap: 15px; /* Espacio entre los botones */
}

/* Estilo para el botón de Facebook (ya existente) */
.faceBook {
    width: 80px;
    height: 80px;
    background-color: #1877F2;
    border-radius: 50%;
    background-image: url('https://pt.orozaro.com/themes/default/img/fb.png'); /* Añade el icono personalizado aquí */
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: width 0.3s ease, height 0.3s ease, box-shadow 0.3s ease, background-size 0.3s ease;
    overflow: hidden;
}

.faceBook:hover {
    width: 500px;
    height: 500px;
    border-radius: 5px;
    background-color: transparent;
    background-size: 0%;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.faceBook iframe {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.faceBook:hover iframe {
    opacity: 1;
}

/* Estilo para el botón de Discord */
.discord {
    width: 80px;
    height: 80px;
    background-color: #5865F2; /* Color azul de Discord */
    border-radius: 50%;
    background-image: url('https://pt.orozaro.com/themes/default/img/dc.png'); /* Añade el icono personalizado aquí */
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: width 0.3s ease, height 0.3s ease, box-shadow 0.3s ease, background-size 0.3s ease;
    overflow: hidden;
}

.discord:hover {
    width: 500px;
    height: 500px;
    border-radius: 5px;
    background-color: transparent;
    background-size: 0%;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.discord iframe {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.discord:hover iframe {
    opacity: 1;
}


/* Estilo para el botón del Panel de Votos */
.votePanel {
    width: 80px;
    height: 80px;
    background-image: url('https://pt.orozaro.com/themes/default/img/votar.png'); /* Añade el icono personalizado aquí */
    background-size: 100%; /* Asegura que la imagen cubra todo el contenedor */
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: width 0.3s ease, height 0.3s ease, box-shadow 0.3s ease, background-size 0.3s ease;
    overflow: hidden;
    position: relative; /* Necesario para posicionar el iframe dentro del contenedor */
    border-radius: 0; /* Elimina el borde redondeado */
}

/* Estilo del iframe en hover */
.votePanel:hover {
    width: 700px;
    height: 500px;
    background-size: 0%; /* Reduce la imagen de fondo a 0 cuando se hace hover */
	border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8);
}

/* Estilo del iframe oculto por defecto */
.votePanel iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.votePanel:hover iframe {
    opacity: 1;
}

/* Estilo para el botón de abrir en nueva pestaña, oculto por defecto */
.openInNewTab {
    display: none; /* Oculto por defecto */
    position: absolute;
    bottom: 20px; /* Distancia desde el borde inferior */
    left: 20px; /* Distancia desde el borde izquierdo */
    background-color: #FF5733; /* Color de fondo llamativo */
    border: none;
    border-radius: 10px; /* Esquinas redondeadas más grandes */
    padding: 10px 20px; /* Tamaño del botón */
    cursor: pointer;
    font-size: 17px; /* Tamaño de fuente más grande */
    color: #ffffff; /* Color del texto */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 10; /* Asegura que el botón esté encima del iframe */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Transiciones suaves */
}

/* Mostrar el botón cuando el panel se expande */
.votePanel:hover .openInNewTab {
    display: block;
}

/* Estilo del botón al pasar el cursor sobre él */
.openInNewTab:hover {
    background-color: #C70039; /* Color de fondo en hover */
    transform: scale(1.05); /* Aumento ligero en tamaño al pasar el cursor */
}




/*===============================================*/

/* Contenedor para los nuevos botones del lado izquierdo */
.social-support-left {
    position: fixed;
    top: 57%; /* Centrado verticalmente */
    left: 10px; /* Posicionado a la izquierda */
    transform: translateY(-50%); /* Centra los botones verticalmente */
    z-index: 9999;
    display: flex;
    flex-direction: column; /* Alinea los botones uno debajo del otro */
    gap: 13px; /* Espacio entre los botones */
}


/* Botón de WoE Status */
.woeStatus {
    width: 85px;
    height: 85px;
    background-image: url('https://pt.orozaro.com/themes/default/img/woe_status.gif'); /* Reemplaza con el GIF de WoE */
    background-size: contain; /* Asegura que el GIF se ajuste dentro del contenedor */
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    transition: width 0.2s ease, height 0.2s ease;
    overflow: hidden; /* Oculta cualquier parte del GIF que se salga del contenedor */
    cursor: pointer;
}

.woeStatus:hover {
    width: 110px;
    height: 110px;
    animation: pulse 1s infinite;
}

/* Estado del texto WoE */
.woe-status-icon {
    position: absolute;
    bottom: 0px; /* Ajusta según la posición deseada */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: #FF0000; /* Rojo cuando WoE está inactiva */
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap; /* Evita que el texto salte de línea */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Cambiar color cuando WoE está activa */
.woe-active {
    color: #00FF00; /* Verde cuando WoE está activa */
}

/* Tooltip para mostrar información adicional al pasar el cursor */
.woeStatus::after {
    content: attr(title); /* Utiliza el atributo 'title' como contenido */
    position: absolute;
    top: 120%; /* Colocar el tooltip debajo del botón */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 9999;
}

.woeStatus:hover::after {
    opacity: 1; /* Mostrar el tooltip en hover */
}

/* Animación de pulso */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}


/* Estilo común para los botones de Cartas MVP y Mini Boss */
.mvpCards, .miniBossCards, .vendingItems, .preciosItems, .mvpAsesinados {
    width: 85px;
    height: 85px;
    border-radius: 0; /* Elimina el borde circular */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    position: relative; /* Necesario para posicionar el contenido dentro del contenedor */
    transition: width 0.2s ease, height 0.2s ease;
    overflow: hidden;
    background-color: transparent; /* Fondo transparente */
    border: none; /* Sin borde visible */
}

.mvpAsesinados {
    background-image: url('https://pt.orozaro.com/themes/default/img/mvps_asesinados.gif'); /* Icono personalizado */
}

.preciosItems {
    background-image: url('https://pt.orozaro.com/themes/default/img/zeny_coin.png'); /* Icono personalizado */
}


.vendingItems {
    background-image: url('https://pt.orozaro.com/themes/default/img/items_vending.png'); /* Icono personalizado */
}

/* Estilo para el botón de Cartas MVP */
.mvpCards {
    background-image: url('https://pt.orozaro.com/themes/default/img/card_mvp.png'); /* Icono personalizado */
}

/* Estilo para el botón de Cartas Mini Boss */
.miniBossCards {
    background-image: url('https://pt.orozaro.com/themes/default/img/mini_boss_card.png'); /* Icono personalizado */
}

.mvpAsesinados:hover,
.preciosItems:hover,
.vendingItems:hover,
.mvpCards:hover,
.miniBossCards:hover {
    width: 110px; /* Tamaño expandido del botón */
    height: 110px; /* Tamaño expandido del botón */
    animation: pulse 1s infinite; /* Añade animación de parpadeo */
}

/* Definición de la animación de parpadeo */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}


/* Contador de cartas */
.mvp-stats {
    position: absolute;
    top: 1px; /* Ajusta la distancia desde la parte superior */
    right: 1px; /* Ajusta la distancia desde la parte derecha */
    background-color: rgba(0, 0, 0, 0.6); /* Fondo oscuro y semi-transparente */
    color: #fff; /* Texto blanco */
    padding: 3px 6px; /* Ajusta el padding para un tamaño adecuado */
    border-radius: 3px;
    font-size: 9px; /* Ajusta el tamaño de la fuente si es necesario */
	font-weight: bold;
    z-index: 1; /* Asegura que el contador esté por encima del contenido del botón */
	text-align: right; /* Alinea el texto a la izquierda */
}

/* Estilo para los valores estadísticos */
.stat-value {
    color: #00FF00; /* Color verde */
}


/* Contador de cartas */
.item-count {
    position: absolute;
    top: 1px; /* Ajusta la distancia desde la parte superior */
    right: 1px; /* Ajusta la distancia desde la parte derecha */
    background-color: rgba(0, 0, 0, 0.6); /* Fondo oscuro y semi-transparente */
    color: #fff; /* Texto blanco */
    padding: 3px 6px; /* Ajusta el padding para un tamaño adecuado */
    border-radius: 3px;
    font-size: 17px; /* Ajusta el tamaño de la fuente si es necesario */
	font-weight: bold;
    z-index: 1; /* Asegura que el contador esté por encima del contenido del botón */
}


/* Contador de cartas */
.card-count {
    position: absolute;
    top: 1px; /* Ajusta la distancia desde la parte superior */
    right: 1px; /* Ajusta la distancia desde la parte derecha */
    background-color: rgba(0, 0, 0, 0.6); /* Fondo oscuro y semi-transparente */
    color: #fff; /* Texto blanco */
    padding: 3px 6px; /* Ajusta el padding para un tamaño adecuado */
    border-radius: 3px;
    font-size: 17px; /* Ajusta el tamaño de la fuente si es necesario */
	font-weight: bold;
    z-index: 1; /* Asegura que el contador esté por encima del contenido del botón */
}











/* Contenedor para ambos botones */
.social-support-top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    top: 1%;
    left: 1%;
    z-index: 9999;
    gap: 15px;
}

/* Botón de Jugadores Online */
.playersOnline {
    width: 100px;
    height: 100px;
    background-image: url('https://pt.orozaro.com/themes/default/img/jugadores_online.gif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    transition: width 0.2s ease, height 0.2s ease;
    /* Eliminar cursor: move para evitar la cruz de arrastre */
}

.playersOnline:hover {
    width: 130px;
    height: 130px;
}

.online-count {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: #00FF00;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}

.small-text {
    font-size: 11px;
    color: #fff;
    text-align: center;
}







.language-widget {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 9999;
}

/* Botón redondo individual */
.lang-bubble {
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    cursor: pointer;
}

/* Bandera más grande y sin espacio extra */
.lang-bubble img {
    width: 85%;  /* Antes 65% */
    height: 85%;
    object-fit: contain;
    border: none;
    border-radius: 0; /* Asume que tus imágenes ya son redondas */
    display: block;
}

/* Hover */
.lang-bubble:hover {
    transform: scale(1.15);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
}

/* Tooltip hacia arriba */
.lang-bubble::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.lang-bubble:hover::after {
    opacity: 1;
}


.lang-bubble.active-lang::before {
    content: '✔';
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: #00bcd4;
    color: white;
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 50%;
    font-weight: bold;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
}







.worldBossCounter {
    width: 150px;
    height: 150px;
/*    background-image: url('https://pt.orozaro.com/themes/default/img/3174.gif');  Tu GIF */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: fixed;
    top: 2%;
    right: 1%; /* <-- Este es el cambio clave */
    z-index: 9999;
    cursor: default;
    transition: width 0.2s ease, height 0.2s ease;
}

.worldBossCounter:hover {
    width: 220px;
    height: 220px;
}

.counter-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.counter-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}



.counter-text {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: #FFD700;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}
















.newsArea h2, .woeSchd h2, .database h2 {
    color: #5b5451;
    text-align: center;
    padding: 2px 0;
    margin: 0;
    font-size: 160%;
    text-shadow: 1px 1px 0 #FFF;
}

.database h2 {
    padding: 0;
}

.newsArea h2 {
    padding: 10px 0;
}

.newsArea table {
    width: 380px;
    display: block;
    margin: 0 auto;
}

.newsArea table tr {
    width: 100%;
}

.newsArea table tr td {
    padding: 10px 0;
    border-bottom: 1px solid #a6a6a6;
}

.newsArea table tr td.title {
    width: 300px;
}

.newsArea table tr td a {
    color: #ff7361;
    text-transform: uppercase;
}

.newsArea table tr td a:hover {
    color: #ff4129;
    text-decoration: underline;
}

.container_paypal_other {
    display: flex;
    align-items: center; /* Esto alinea verticalmente los elementos en el centro. */
}

.paypal {
    margin: 0 5px; /* Esto añade un poco de espacio entre los elementos. */
}

.paypal img {
    max-width: 175px; /* Ajusta al ancho máximo deseado */
    max-height: 255px; /* Ajusta a la altura máxima deseada */
    display: block; /* Esto centra la imagen en el contenedor si tiene menos ancho */
    margin: auto;
    transition: transform 0.5s ease-in-out;
    transform: scale(1); /* Tamaño normal */
}

.paypal img:hover {
    transform: scale(1.1); /* Aumenta el tamaño de la imagen al pasar el cursor */
}


.imagen-descarga {
    width: 60%;
    transition: transform 0.3s ease, filter 0.3s ease;
    display: inline-block;
}

.imagen-descarga:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 1px gold); /* Resplandor dorado alrededor de las figuras visibles */
}


.guia-instalacion {
    color: blue; /* Color para el texto de la guía de instalación */
	font-size: 18px !important;
	padding-top: 5px !important;
}

.guia-instalacion {
    font-weight: bold;
    text-decoration: underline !important;
}



.databaseRadio {
    width: 100%;
    height: 26px;
    position: relative;
    top: 6px;
}

.databaseRadio table td {
    padding: 5px 0;
    color: #86a000;
    text-indent: 5px;
}

.databaseRadio input[type=radio] {
    display: none;
    font-family: Arial;
    font-size: 9pt;
}

.databaseRadio input[type=radio] + label span {
    display: inline-block;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    background: url(check_radio_sheet.png) left top no-repeat;
    cursor: pointer;
}

.databaseRadio input[type=radio]:checked + label span {
    color: red;
}

input[type=submit].searchButton {
    background: url(../img/go.png) center top no-repeat;
    width: 37px;
    height: 23px;
    border: 0;
    font-size: 0;
    cursor: pointer;
    float: left;
}

.inputBoxes {
    width: 100%;
    height: 23px;
    position: relative;
    top: 7px;
}

.inputBoxes input[type=text] {
    width: 184px;
    height: 23px;
    padding: 0 5px;
    background: 0;
    border: 0;
    box-sizing: border-box;
    float: left;
}

td.forgotPassword a {
    color: #2f9cc0;
    font-family: Arial;
    font-weight: 700;
    text-decoration: underline;
    display: block;
    padding: 5px;
}

.serverStatus {
    width: 704px;
    min-height: 50px;
    float: left;
    position: absolute;
    bottom: 24px;
    left: 0;
}

.loginPanel {
    width: 315px;
    height: 90px;
    float: left;
    position: absolute;
    right: 0;
    bottom: 18px;
}

.loginRow, .loggedIn {
    width: 280px;
    margin: 0 auto;
}

.loggedIn {
    font-family: Arial;
    font-size: 9pt;
}

.accountButtons a, input[type=submit], button {
    background: #6da858;
    padding: 5px 10px;
    border-radius: 3px;
    color: #FFF;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,.5);
    border: 1px solid #57984d;
    font-weight: 700;
    cursor: pointer;
}

.accountButtons a:hover, input[type=submit]:hover, button:hover {
    box-shadow: inset 0 3px 6px rgba(0,0,0,.1);
}

#navigation ul li img, .accountButtons a, input[type=submit], button {
    transition: all 200ms ease-in-out;
}

.loginLeft {
    width: 177px;
    float: left;
}

.loginRight {
    width: 90px;
    float: left;
}

.status {
    width: 410px;
    margin-left: 130px;
}

.status > div {
    width: 90px;
    float: left;
}

.status > div img {
    position: relative;
    top: 13px;
    left: 50px;
}

.status .time {
    width: 120px;
}

.status .time iframe {
    position: relative;
    top: 15px;
    left: 50px;
}

input.inputClass {
    width: 167px;
    height: 25px;
    background: url(../img/inputBg.png) center top no-repeat;
    outline: 0;
    border: 0;
    padding: 0 10px;
    box-sizing: border-box;
    margin-top: 7px;
}

input.loginBtn {
    width: 82px;
    height: 75px;
    overflow: hidden;
    border: 0;
    cursor: pointer;
    background: url(../img/loginBtn.png) center top no-repeat;
}

input.loginBtn:hover {
    background-position: 0 -82px;
}

.credits {
    height: 130px;
}

.footerNav {
    margin-top: 5px;
}

.credits a:nth-child(1) img {
    width: 80px;
    float: left;
}

.credits a:nth-child(2) img {
    width: 80px;
    float: left;
    margin-top: 10px;
    margin-left: 5px;
}

.footerNav ul {
    width: 800px;
    float: left;
}

.footerNav ul li {
    padding: 0 8px;
    float: left;
}

.footerNav ul li a {
    color: #6d8100;
    font-family: Arial;
    font-size: 9pt;
}

.footerNav ul li a:hover {
    opacity: .7;
}

.copyrights {
    background: #bbca6a;
    width: 50%;
    display: block;
    margin: 0 auto;
    padding: 20px 10px;
    border-radius: 5px;
    color: #FFF;
    font-size: 8pt;
    text-align: center;
    margin-top: 20px;
}

#footer {
    width: 100%;
    height: 190px;
}

.sidebar table {
    width: 95%;
    text-align: center;
}

.sidebar table tr th {
    padding: 5px 0;
    background: #c0d06d;
}

.sidebar table tr td {
    padding: 5px 0;
    background: #eee;
}

.sidebar table tr td a {
    color: #333;
    font-family: Arial;
}

#adminmenu, #submenu {
    background: #eee;
    padding: 5px 10px;
    margin-bottom: 5px;
    border-radius: 5px;
    color: #333;
}

#adminmenu a, #submenu a {
    color: #333;
    font-family: Arial;
}

.clear {
    clear: both;
}

.adjust {
    width: 740px;
    overflow: auto;
}




/* Estilos generales para centrar el formulario y darle un aspecto moderno y limpio */
.register-container {
    width: 98%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 10px;
}

.register-form {
    background: #ffffff; /* Fondo blanco para el formulario */
    padding: 25px;
    border-radius: 5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    width: 100%;
    max-width: 750px; /* Máximo ancho */
    box-sizing: border-box;
}

.register-heading {
    font-family: Arial, sans-serif;
    font-size: 20px;
    text-align: center;
    color: #4caf50; /* Color verde */
    margin-bottom: 20px;
    text-transform: uppercase; /* Todo en mayúsculas */
}

.register-form p {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

.register-form .form-group {
    display: flex;
    align-items: center; /* Alinea los labels y los campos de entrada en el centro verticalmente */
    margin-bottom: 15px;
}

.register-form label {
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #333;
    font-weight: bold; /* Negrita */
    margin-right: 10px; /* Espacio entre el label y el campo de entrada */
    width: 150px; /* Ancho fijo para todos los labels */
    text-align: right; /* Alinea el texto del label a la derecha */
}

.register-form input[type="text"],
.register-form input[type="password"],
.register-form select {
    flex: 1; /* Los campos de entrada ocupan el espacio restante */
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
}



.register-form input[type="text"]:focus,
.register-form input[type="password"]:focus,
.register-form select:focus {
    border-color: #4caf50; /* Color verde en foco */
    outline: none;
}

.gender-options {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.gender-options label {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.gender-options img {
    margin-right: 8px; /* Espacio entre la imagen y el botón de radio */
    width: auto; /* Ajusta el tamaño de la imagen */
    height: auto; /* Mantén la proporción de la imagen */
}

.gender-options input[type="radio"] {
    margin-right: 5px;
}

.birthday-group {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.birthday-group select {
    flex: 1 1 0;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    min-width: 0; /* Evita que se rompa la línea */
    width: 100px; /* Ancho fijo para asegurar que todos los campos quepan en una línea */
}

.register-form .buttons {
    text-align: center;
    margin-top: 20px;
}

.register-form .form-info {
    font-size: 14px; /* Aumenta el tamaño de la letra */
    color: #333; /* Color del texto */
    text-align: center; /* Centra el texto */
    margin-bottom: 10px; /* Espacio inferior */
}

.register-form .form-info a {
    margin-left: 4px; /* Espacio entre el texto y el enlace de TOS */
    font-weight: bold; /* Hace que el enlace esté en negrita */
    color: #007bff; /* Cambia el color del enlace (puedes usar un verde si lo prefieres) */
    transition: color 0.3s ease; /* Añade una transición suave al color */
}

.register-form .form-info a:hover {
    color: #0056b3; /* Cambia el color del enlace al pasar el cursor (hover) */
}

.register-form .buttons button {
    background: #4caf50; /* Fondo verde para el botón */
    padding: 10px 20px;
    border-radius: 5px;
    color: #FFF;
    border: none;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s ease;
    width: 50%; /* Reducir el ancho al 50% */
    margin: 0 auto; /* Centrar el botón horizontalmente */
    display: block; /* Asegura que el margen automático funcione */
}

.register-form .buttons button:hover {
    background: #388e3c; /* Verde más oscuro al pasar el cursor */
}

.red {
    color: red; /* Solo el texto será rojo */
    background-color: transparent; /* Asegúrate de que el fondo sea transparente */
    padding: 10px; /* Espacio alrededor del texto */
    border: 1px solid red; /* Añade un borde rojo para destacar el mensaje de error */
    border-radius: 5px; /* Bordes redondeados para un mejor aspecto */
    text-align: center; /* Centrar el texto */
    font-weight: bold; /* Negrita para resaltar el mensaje */
    margin-bottom: 20px; /* Espacio inferior para separar de otros elementos */
}


.login-container {
    width: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
}

.login-form {
    background: #ffffff; /* Fondo blanco para el formulario */
    padding: 25px;
    border-radius: 5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    width: 100%;
    max-width: 750px; /* Máximo ancho */
    box-sizing: border-box;
}

.login-form h2 {
    font-family: Arial, sans-serif;
    font-size: 20px;
    text-align: center;
    color: #4caf50; /* Color verde */
    margin-bottom: 20px;
    text-transform: uppercase; /* Todo en mayúsculas */
}

.login-form p.red {
    color: red; /* Solo el texto será rojo */
    background-color: transparent; /* Asegúrate de que el fondo sea transparente */
    padding: 10px; /* Espacio alrededor del texto */
    border: 1px solid red; /* Añade un borde rojo para destacar el mensaje de error */
    border-radius: 5px; /* Bordes redondeados para un mejor aspecto */
    text-align: center; /* Centrar el texto */
    font-weight: bold; /* Negrita para resaltar el mensaje */
    margin-bottom: 20px; /* Espacio inferior para separar de otros elementos */
}

.login-form .form-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.login-form label {
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #333;
    font-weight: bold; /* Negrita */
    margin-right: 10px; /* Espacio entre el label y el campo de entrada */
    width: 150px; /* Ancho fijo para todos los labels */
    text-align: right; /* Alinea el texto del label a la derecha */
}

.login-form input[type="text"],
.login-form input[type="password"],
.login-form select {
    flex: 1; /* Los campos de entrada ocupan el espacio restante */
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
}

.login-form .buttons {
    text-align: center;
    margin-top: 20px;
}

.login-form .buttons input[type="submit"] {
    background: #4caf50; /* Fondo verde para el botón */
    padding: 10px 20px;
    border-radius: 5px;
    color: #FFF;
    border: none;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s ease;
    width: 50%; /* Reducir el ancho al 50% */
    margin: 0 auto; /* Centrar el botón horizontalmente */
    display: block; /* Asegura que el margen automático funcione */
}

.login-form .buttons input[type="submit"]:hover {
    background: #388e3c; /* Verde más oscuro al pasar el cursor */
}





.reset-pass-container {
    width: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
}

.reset-pass-form {
    background: #ffffff; /* Fondo blanco para el formulario */
    padding: 25px;
    border-radius: 5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    width: 100%;
    max-width: 750px; /* Máximo ancho */
    box-sizing: border-box;
}

.reset-pass-form h2 {
    font-family: Arial, sans-serif;
    font-size: 20px;
    text-align: center;
    color: #4caf50; /* Color verde */
    margin-bottom: 20px;
    text-transform: uppercase; /* Todo en mayúsculas */
}

.reset-pass-form p.red {
    color: red; /* Solo el texto será rojo */
    background-color: transparent; /* Asegúrate de que el fondo sea transparente */
    padding: 10px; /* Espacio alrededor del texto */
    border: 1px solid red; /* Añade un borde rojo para destacar el mensaje de error */
    border-radius: 5px; /* Bordes redondeados para un mejor aspecto */
    text-align: center; /* Centrar el texto */
    font-weight: bold; /* Negrita para resaltar el mensaje */
    margin-bottom: 20px; /* Espacio inferior para separar de otros elementos */
}

.reset-pass-form .form-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.reset-pass-form .form-group p {
    font-size: 13px;
    color: #666;
    margin-left: 10px; /* Espacio entre el campo y la explicación */
    margin-top: 5px; /* Espacio adicional encima del texto de información */
}

.reset-pass-form label {
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #333;
    font-weight: bold; /* Negrita */
    margin-right: 10px; /* Espacio entre el label y el campo de entrada */
    width: 150px; /* Ancho fijo para todos los labels */
    text-align: right; /* Alinea el texto del label a la derecha */
}

.reset-pass-form input[type="text"],
.reset-pass-form select {
    flex: 1; /* Los campos de entrada ocupan el espacio restante */
    padding: 8px; /* Reducir el padding para un tamaño más pequeño */
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    max-width: 200px; /* Ancho máximo reducido */
}

.reset-pass-form .buttons {
    text-align: center;
    margin-top: 20px;
}

.reset-pass-form .buttons input[type="submit"] {
    background: #4caf50; /* Fondo verde para el botón */
    padding: 10px 20px;
    border-radius: 5px;
    color: #FFF;
    border: none;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s ease;
    width: 50%; /* Reducir el ancho al 50% */
    margin: 0 auto; /* Centrar el botón horizontalmente */
    display: block; /* Asegura que el margen automático funcione */
}

.reset-pass-form .buttons input[type="submit"]:hover {
    background: #388e3c; /* Verde más oscuro al pasar el cursor */
}

.reset-pass-form td p {
    font-size: 13px;
    color: #666;
    margin-left: 10px; /* Espacio entre el campo y la explicación */
}



.guides-container {
    text-align: center;
    border-radius: 10px;
    margin: 10px auto;
}

.guides-title {
    font-size: 1.8em;
    margin-bottom: 25px;
    color: #333;
}

#toggleGuidesBtn {
    padding: 12px 25px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#toggleGuidesBtn:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}





.pre-register-promo {
    padding: 10px;
    border-radius: 16px;
    margin: 10px auto 0; /* reduce espacio inferior */
    color: #064e3b;
    text-align: center;
    max-width: auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    animation: floatIn 0.4s ease-out;
}

/* Animación de entrada suave desde abajo */
@keyframes floatIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Título principal de la promoción */
.pre-register-promo strong {
    font-size: 24px;
    display: block;
    margin-bottom: 7px;
    color: #4CAF50; /* verde */
}

/* Descripción de la promo con fondo gris y borde naranja */
.pre-register-promo .promo-desc {
    font-size: 18px;
    font-weight: 500;
    margin: 12px 0 18px;
    color: #0277bd; /* azul oscuro */
    background: #FFFFFF; /* blanco */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* sombra suave */
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 3px solid #FFC107; /* borde izquierdo naranja */
    display: inline-block;
    text-align: left;
}

.promo-desc .promo-date {
    color: #FFA000; /* naranja oscuro */
    font-weight: bold;
}


/* Emoji antes del texto */
.pre-register-promo .promo-desc::before {
    content: "📅 ";
}

/* Tabla de recompensas con borde gris y sombra */
.pre-register-promo table {
    margin: 0 auto;
    border-collapse: collapse;
    width: 100%;
    max-width: 500px;
    background: #fafafa; /* fondo gris claro */
    border: 2px solid #BDBDBD;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* sombra suave */
}

/* Celdas con texto centrado */
.pre-register-promo th,
.pre-register-promo td {
    padding: 10px 12px;
    text-align: center;
    vertical-align: middle; /* <--- Esto es lo que alinea verticalmente */
    font-size: 14px;
}


/* Encabezado de tabla con fondo naranja */
.pre-register-promo th {
    background: #FFC107;
    color: #064e3b; /* verde oscuro */
    font-weight: bold;
}

/* Emojis para cada encabezado */
.pre-register-promo th:nth-child(1)::before { content: "🎁 "; }
.pre-register-promo th:nth-child(2)::before { content: "📦 "; }
.pre-register-promo th:nth-child(3)::before { content: "🔢 "; }

/* Efecto hover para resaltar fila */
.pre-register-promo tr:hover {
    background: #FFD65C; /* naranja claro */
    transition: background 0.3s ease-in-out;
}

/* Icono de ítem */
.pre-register-promo td img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}



.promo-note-box {
    background-color: #f0f8ff; /* Fondo azul claro para una apariencia informativa */
    border: 1px solid #4aa3df; /* Borde azul medio para resaltar la caja */
    padding: 12px;             /* Espaciado interno para que el texto no quede pegado */
    margin: 10px auto 10px;    /* Margen superior de 15px, centrado con 'auto', e inferior de 30px */
    border-radius: 8px;        /* Bordes redondeados para un look más suave */
    font-size: 0.9em;         /* Tamaño de texto ligeramente más pequeño que el normal */
    color: #333;               /* Color de texto gris oscuro para buena legibilidad */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Sombra sutil para elevar la caja visualmente */
    text-align: center;        /* Centra todo el contenido de la caja */
    max-width: 600px;          /* Limita el ancho para que no se expanda demasiado */
}

.promo-note-box strong {
    color: #256ca1; /* Color azul más oscuro para títulos o énfasis dentro de la caja */
}








.initialClass {
    display: flex;
    flex-direction: column;
    align-items: center; /* Alinea el contenido horizontalmente al centro */
    margin-bottom: 20px; /* Espacio debajo de la clase inicial */
}

.initialClass h2 {
    margin-bottom: 10px;
    font-size: 1.5em;
    color: #333;
}

.jobGuides {
    margin-top: 20px;
    padding: 15px;
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    text-align: center; /* Centra el contenido */
}

.jobGuides h1 {
    font-size: 2em;
    margin-bottom: 20px;
}

.jobGuides h2 {
    font-size: 1.5em;
    margin: 20px 0;
    color: #333;
}

.guideGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espacio entre cuadritos */
    justify-content: center; /* Centra los cuadritos */
}

.guideItem {
    width: 160px;
    padding: 10px;
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
    text-decoration: none; /* Sin subrayado */
    color: #333; /* Color de texto */
    overflow: hidden; /* Oculta cualquier desbordamiento */
    border: 2px solid #e0e0e0; /* Borde sutil */
    display: flex;
    flex-direction: column; /* Alinea el contenido verticalmente */
    justify-content: space-between; /* Asegura que el nombre esté siempre abajo */
}

.guideItem:hover {
    transform: scale(1.15); /* Escala al pasar el cursor */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra más profunda en hover */
    border-color: #007bff; /* Cambia el color del borde al pasar el cursor */
}

.guideImage {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
    height: 100px; /* Altura fija para el contenedor de la imagen */
}

.guideImage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ajusta la imagen dentro del contenedor sin cortar */
    border-radius: 5px; /* Opcional: Bordes redondeados para las imágenes */
}

.guideItem span {
    display: block;
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 10px;
    color: #007bff; /* Color del nombre del job */
}

/* ==================================================================================== */
/* Contenedor flex para alinear ambas secciones */
.ranking-container {
    display: flex;
    justify-content: space-around; /* Distribuir las secciones */
    align-items: stretch; /* Alinea las secciones para que tengan la misma altura */
    margin: 5px 0;
    border: 3px solid #C5D479; /* Borde de 4px de ancho con color #BBCA6A */
    border-radius: 10px; /* Esquinas redondeadas de 10px */
    padding: 10px; /* Espacio entre el borde y el contenido */
}

/* Estilo compartido para las secciones de MvP, Asesinatos y Guilds */
.mvpTopPlayer, .killTopPlayer, .guildTopPlayer {
    flex: 1; /* Hace que todas las secciones crezcan igualmente */
    text-align: center;
    padding: 5px;
    background-color: transparent;
    border-left: 1px solid #C5D479; /* Borde izquierdo para dividir */
    box-sizing: border-box; /* Incluye padding y border en el ancho y alto total */
}

/* Elimina el borde izquierdo de la primera sección para que no tenga una división inicial */
.mvpTopPlayer:first-child {
    border-left: none;
}


/* Encabezados del ranking */
.mvpTopPlayer h2, .killTopPlayer h2, .guildTopPlayer h2 {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    color: #FFD700; /* Color dorado */
    text-align: center;
    text-shadow: 0.5px 0.5px 0.5px black;
}

/* Contenedor de la imagen y el globo de mensaje */
.mvp-container, .kill-container, .guild-container {
    position: relative;
    display: inline-block;
    margin: 0 auto; /* Centra el contenedor de la imagen y el mensaje */
}

/* Imagen del jugador/guild - Mantiene el tamaño original del GIF sin borde redondeado */
.mvp-image, .kill-image, .guild-image {
    width: 130px;
    height: 130px;
    object-fit: contain;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    z-index: 1;
    padding: 0;
    margin-top: 10px;
    margin-bottom: 8px;
    transform: scale(1); /* Inicialmente sin escala */
    filter: brightness(1); /* Iluminación inicial */
}

.mvp-image:hover, .kill-image:hover, .guild-image:hover {
    transform: scale(1.2); /* Escala moderada en hover */
    filter: brightness(1.2); /* Aumenta el brillo para un efecto de iluminación */
}

/* Contenedor de la bandera con el emblema centrado */
.guild-flag {
    position: relative;
    width: 140px; /* Ajusta el ancho total del contenedor de la bandera */
    height: 180px; /* Ajusta la altura total del contenedor de la bandera */
    margin: 0 auto;
    transition: transform 0.2s ease; /* Suaviza la transición del escalado */
}

/* Ajustar el tamaño de la imagen de la bandera */
.guild-flag-image {
    width: 100%; /* Usa el ancho completo del contenedor */
    height: 100%; /* Usa la altura completa del contenedor */
    object-fit: contain; /* Asegura que la imagen se ajuste sin deformarse */
    display: block;
    margin: 0 auto; /* Centra la imagen dentro del contenedor */
}

/* Ajustar el contenedor del emblema */
.guild-emblem-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -5%); /* Centra la imagen del emblema */
    width: 35px; /* Ajusta el tamaño del emblema */
    height: 35px; /* Ajusta el tamaño del emblema */
}

/* Ajustar el tamaño de la imagen del emblema */
.guild-emblem-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efecto hover en el contenedor de la bandera y el emblema */
.guild-flag:hover {
    transform: scale(1.1); /* Escala el contenedor y todos los elementos dentro de él */
	filter: brightness(1.4); /* Aumenta el brillo para un efecto de iluminación */
}


/* Mensajes de felicitación generales */
.mvp-message, .pvp-message, .kill-message {
    display: none;
    position: absolute;
    top: -30px;
    padding: 10px;
    box-shadow: none;
    width: 150px;
    z-index: 2;
    animation: fadeIn 0.2s ease-in-out;
    font-family: 'Comic Sans MS', cursive, sans-serif;
    font-size: 8px;
    color: #333;
}

/* Mensaje de guild específico */
.guild-message {
    display: none; /* Asegúrate de que esté oculto por defecto */
    position: absolute;
    top: -30px;
    left: 0; /* Ajusta a la izquierda del contenedor */
    transform: translateX(-42%); /* Mueve el mensaje completamente hacia la izquierda */
    padding: 10px;
    box-shadow: none;
    width: 150px;
    z-index: 2;
    animation: fadeIn 0.2s ease-in-out;
    font-family: 'Comic Sans MS', cursive, sans-serif;
    font-size: 8px;
    color: #333;
}

/* Opcional: Asegúrate de que otros mensajes no se solapen */
.mvp-message, .pvp-message, .kill-message {
    left: 100px; /* Posición predeterminada para otros mensajes */
}

.mvp-message img, .pvp-message img, .kill-message img, .guild-message img {
    width: 120px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.mvp-message h3, .pvp-message h3, .kill-message h3, .guild-message h3 {
    text-shadow: 0.5px 0.5px 0.5px black;
    color: #BBCA6A;
    font-size: 15px;
    margin: 0;
    text-align: center;
    text-transform: none;
}

/* Mostrar el mensaje cuando se pasa el cursor */
.mvp-container:hover .mvp-message, .kill-container:hover .kill-message, .guild-container:hover .guild-message {
    display: block;
}

/* Detalles del jugador/guild */
.player-details, .guild-details {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    justify-content: center;
    text-shadow: 0.5px 0.5px 0.5px black;
}

/* Títulos y valores en líneas separadas */
.player-details .title, .guild-details .title {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #FFD700;
    text-align: center;
}

.player-details .value, .guild-details .value {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #333;
    text-align: center;
}

/* Efecto hover en los valores */
.player-details .value:hover, .guild-details .value:hover {
    color: #067906;
    transition: color 0.3s ease;
    transform: scale(1.6); /* Escala moderada en hover */
}

/* Efecto de fade-in */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}








/* Sección Principal */
.staff-section {
    width: 100%;
    text-align: center;
    background: transparent;
}

/* Título */
.staff-title {
    color: #FEB402;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 2rem;
    font-family: 'Segoe UI', sans-serif;
    text-shadow: 0 0 3px rgba(212, 156, 0, 0.2);
}

/* Contenido centrado */
.staff-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

/* Imagen circular */
.staff-avatar-container {
    width: 250px;
    height: 250px;
    margin-bottom: 0.6rem;
}

.staff-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #4A78FF;
    box-shadow: 0 0 18px rgba(132, 39, 245, 0.8);
    transition: transform 0.3s ease;
}

.staff-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 0 40px rgba(132, 39, 245, 0.8);
}


.staff-name {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0.2rem 0;
    background: linear-gradient(90deg, #ff00ff, #00aaff); /* Ajusta los colores del degradado */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.staff-location {
    color: #555;
    font-size: 1.1rem;
    margin: 0;
}

/* Biografía */
.staff-bio {
    color: #404040;
    font-size: 0.8rem;
    max-width: 500px;
    line-height: 1.5;
    text-align: center;
    transition: text-shadow 0.3s ease-in-out;
}

.staff-bio:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 1px #D8BAFC) brightness(1);
	transition: transform 0.3s ease;
}





/* Íconos de contacto */
.staff-contact {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.staff-contact a {
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.staff-contact a img {
    width: 40px;
    height: 40px;
    filter: brightness(0.9) contrast(1.2);
    transition: transform 0.3s ease, filter 0.3s ease;
}

.staff-contact a:hover img {
    transform: scale(1.3);
    filter: drop-shadow(0 0 6px #ffd700) brightness(1.3);
}