/* ===============================
   Estilo Oriental Clásico Modernizado - Metin2 Viral
   =============================== */

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

body {
    font-family: 'Cinzel', serif;
    background: url('/httpdocs/theme1/img/header.png') center top fixed no-repeat;
    background-size: cover;
    color: #fbe3a1;
    font-size: 14px;
    margin: 0;
    padding: 0;
}

#mt2cms {
    background-color: rgba(0, 0, 0, 0.85);
    max-width: 1220px;
    margin: 0 auto;
    padding: 15px;
    box-shadow: 0 0 10px #000;
}

/* Menú */
.mt2cms_menu {
    background: rgba(0, 0, 0, 0.75);
    border-bottom: 3px solid #ffcc00;
    box-shadow: 0 0 12px #ffcc00;
    z-index: 100;
    position: relative;

    /* Nuevo: centrado y tamaño máximo */
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 15px;
    border-radius: 0 0 10px 10px;
}

.mt2cms_menu_content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 15px 0;
}

.mt2cms_menu_content li a {
    color: #fbe3a1;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.mt2cms_menu_content li a:hover {
    color: #fff;
    border-color: #ffcc00;
    text-shadow: 0 0 5px #ffcc00;
    transform: scale(1.05);
}

.mt2cms_menu_content li.btn-download a {
    background: #ffcc00;
    color: #000;
    border-radius: 20px;
    padding: 10px 25px;
    font-weight: bold;
}

.mt2cms_menu_content li.btn-download a:hover {
    background: #fff2a0;
    box-shadow: 0 0 10px #ffcc00;
}

/* Logo */
.mt2cms_logo_bg {
    text-align: center;
    margin: 25px 0;
}

.mt2cms_logo_bg img {
    max-width: 400px;
    height: auto;
}

/* Paneles principales */
.panel {
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #ffcc00;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    color: #fff8d3;
}

.panel-heading {
    background: #ffcc00;
    color: #2a1e13;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border-radius: 8px 8px 0 0;
}

/* Noticias */
.mt2cms_main_box_middle .panel {
    min-height: 100px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Ranking y botones */
.mt2cms_rank_content {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid #ffcc00;
    padding: 10px;
}

.mt2cms_main_content_button, .btn {
    background: linear-gradient(to bottom, #ffcc00, #c99700);
    color: #000;
    font-weight: bold;
    border: none;
    border-radius: 20px;
    padding: 10px 15px;
    transition: 0.3s ease-in-out;
}

.mt2cms_main_content_button:hover, .btn:hover {
    background: #ffe066;
    box-shadow: 0 0 10px #ffcc00;
}

/* Footer más compacto */
#footer {
    background: #1a1208; /* sigue tu tono pero más discreto */
    color: #ffcc00;
    padding: 6px 0; /* MENOS alto */
    font-size: 11px; /* más compacto */
    text-align: center;
    line-height: 1.3;
    border-top: 1px solid rgba(255, 204, 0, 0.2); /* línea sutil para separar */
}

/* Redes sociales centradas, sin tanto espacio */
#social_networks {
    margin: 5px 0;
}

#social_networks .social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* menos separación */
}

/* Iconos más sutiles y sin fondo amarillo opaco */
#social_networks .social a {
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent; /* SIN fondo sólido para no tapar */
    border-radius: 50%;
    color: #ffcc00; /* color dorado base */
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

/* Iconos con tamaño un poco mayor */
#social_networks .social a i {
    font-size: 20px;
}

/* Hover más limpio: sólo efecto de luz, sin pintar todo el icono */
#social_networks .social a:hover {
    transform: scale(1.15);
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.4); /* brillo sutil */
    background: rgba(255, 204, 0, 0.1); /* toque suave, NO tapa el logo */
}

/* Mantener el icono visible al pasar el ratón */
#social_networks .social a:hover i {
    filter: brightness(1.2) contrast(1.1);
}

/* Texto del footer más compacto */
#footer_other_infos p {
    margin: 2px 0;
    font-size: 11px;
}

/* Links en el footer */
#footer a {
    color: #fff3b0;
    text-decoration: none;
}

#footer a:hover {
    text-decoration: underline;
}


/* Responsive */
@media screen and (max-width: 768px) {
    .mt2cms_menu_content {
        flex-direction: column;
        gap: 10px;
    }

    .mt2cms_main_left,
    .mt2cms_main_middle,
    .mt2cms_main_right {
        width: 100% !important;
        padding: 10px 0;
    }

    .mt2cms_logo_bg img {
        max-width: 250px;
    }
    .mt2cms_main_right {
	float: left;
	padding: 0 0 0 25px;
}

.ranking-icon {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	height: 6
    0px;
	width: 60px;
}

.ranking-icon.pos-1 { background-image: url('theme1/img/top1icon.png') !important; }
.ranking-icon.pos-2 { background-image: url('theme1/img/top2icon.png') !important; }
.ranking-icon.pos-3 { background-image: url('theme1/img/top3icon.png') !important; }
.ranking-icon.pos-4 { background-image: url('theme1/img/top4icon.png') !important; }
.ranking-icon.pos-5 { background-image: url('theme1/img/top5icon.png') !important; }


}
.page-header {
    background-size: cover;
    background-position: center;
    padding: 50px 15px;
    text-align: center;
    color: #f5e7c3;
    box-shadow: 0 0 10px #000;
}

.page-header .section-title {
    font-size: 36px;
    font-weight: bold;
    margin: 0;
}

.page-header .section-subtitle {
    font-size: 20px;
    margin-top: 10px;
}

.news-wrapper {
    padding: 30px 20px;
}

@media screen and (max-width: 768px) {
    .page-header {
        padding: 30px 10px;
    }

    .page-header .section-title {
        font-size: 28px;
    }

    .page-header .section-subtitle {
        font-size: 16px;
    }
}
.page-header {
    background-size: cover;
    background-position: center;
    padding: 40px 20px;
    color: #fff8d3;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 0 15px #caa04d;
}

.section-title {
    font-size: 32px;
    font-weight: bold;
    text-shadow: 1px 1px 5px #000;
    margin: 0;
}

/* Botón de descarga corregido */
.btn-download-link {
	background-color: #f2d675; /* Amarillo suave */
	color: #2a2a2a;
	border: none;
	padding: 10px 16px;
	font-weight: bold;
	border-radius: 6px;
	display: inline-block;
	text-decoration: none;
	transition: background 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.btn-download-link:hover {
	background-color: #f7e18a;
	color: #1a1a1a;
	box-shadow: 0 0 10px rgba(255, 228, 100, 0.3);
}
/* Tamaños jerárquicos para las coronas del ranking */
.ranking-icon img {
    width: 20px;
    height: 20px;
}

.ranking-icon.pos-1 img {
    width: 34px;
    height: 34px;
    filter: drop-shadow(0 0 5px gold);
}

.ranking-icon.pos-2 img {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 3px silver);
}

.ranking-icon.pos-3 img {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 2px #cd7f32); /* bronce */
}