/* GLOBAL STYLES */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');



@media (max-width: 1300px) {
    .main-container {
        max-width: 100%;
        margin: 0;
        border-left: none;
        border-right: none;
    }
}

/* Crear una zona de transición para el borde inferior del pergamino */
.content-area::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, transparent 0%, rgba(15, 7, 5, 1) 100%);
    z-index: 2;
    pointer-events: none;
    box-sizing: border-box;
}



.nav-bottom {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 15px 0;
    border-top: 1px solid #462108;
    margin-top: 20px;
    position: relative;
}

.nav-bottom ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.nav-bottom a {
    color: #e8c88a;
    font-size: 14px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    transition: color 0.3s ease;
}

.nav-bottom a:hover {
    color: #ff6600;
}

.left-column,
.center-column,
.right-column {
    gap: 2px; /* Reducido a casi 0 para espaciado mínimo */
    margin-top: 0;
    position: relative;
    z-index: 3;
}
@media (max-width: 768px) {
    .game-news-image {
        max-height: 150px;
    }
    
    .game-news-content h1 {
        font-size: 18px;
    }
    
    .game-news-content p {
        font-size: 14px;
    }
}.btn-discord:hover {
    background-color: #4752c4;
    color: #fff;
}

.server-info-box {
    display: flex;
    gap: 10px;
}/* GLOBAL STYLES */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
    --primary-color: #d35400;
    --secondary-color: #8e44ad;
    --bg-dark: #1a0e07;
    --bg-darker: #14090a;
    --bg-light: #251208;
    --text-light: #f9f9f9;
    --text-gold: #f39c12;
    --border-color: #3d2216;
    --btn-color: #c0392b;
    --btn-hover: #e74c3c;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #0a0302;
    color: var(--text-light);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    background: rgb(10,3,2);
    background: linear-gradient(0deg, rgba(10,3,2,1) 0%, rgba(20,8,5,1) 100%);
}

a {
    text-decoration: none;
    color: var(--text-light);
}

ul {
    list-style: none;
}

.main-container {
    max-width: 1300px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    padding-bottom: 0;
    box-shadow: 0 0 50px rgba(0,0,0,0.9);
    background-color: rgba(15, 7, 5, 0.95);
    border-left: 1px solid rgba(51, 27, 12, 0.3);
    border-right: 1px solid rgba(51, 27, 12, 0.3);
    background-image: url('../images/fondo.png');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.main-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    width: 10px;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.8), transparent);
    z-index: -1;
}

.main-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    width: 10px;
    height: 100%;
    background: linear-gradient(to left, rgba(0,0,0,0.8), transparent);
    z-index: -1;
}



.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: rgba(0, 0, 0, 0.7);
    position: relative;
    z-index: 100;
    border-bottom: 1px solid #462108;
    width: 100%;
}

/* NUEVA REGLA: Degradado debajo del header */


.main-nav ul {
    display: flex;
    gap: 15px;
}

.main-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 10px;
    transition: all 0.3s ease;
    color: #ddd;
}

.main-nav a.active,
.main-nav a:hover {
    color: #ff6600;
}

.main-nav .icon {
    font-size: 24px;
    margin-bottom: 5px;
}

.auth-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-register {
    background-color: var(--btn-color);
    padding: 8px 15px;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}

.btn-register:hover {
    background-color: var(--btn-hover);
}

/* HERO BANNER */
.hero-banner {
    height: 380px; /* Mayor altura para mostrar completa la imagen */
    background-image: url('../images/header.png');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: none;
    margin-bottom: 0;
    z-index: 1;
    text-align: center;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    overflow: visible;
}

.hero-banner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px; /* Mayor altura para compensar el banner más alto */
    background: linear-gradient(to bottom, transparent, rgba(20, 8, 7, 0.95));
    z-index: 1;
}

.hero-character {
    position: absolute;
    left: 15%; /* Movido un poco a la derecha */
    bottom: 0; /* Posicionado en la parte inferior del banner */
    width: 260px; /* Personaje más grande */
    height: auto;
    z-index: 900;
    transform: translateX(-50%); /* Centrado sobre su punto de anclaje */
}

.hero-character img {
    width: 100%;
    height: auto;
    filter: none;
}

.hero-logo {
    position: absolute;
    left: 50%;
    top: 32%; /* Movido aún más hacia arriba */
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-logo video,
.hero-logo img {
    max-width: 500px;
    width: 500px;
    max-width: 90%;
    height: auto;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.hero-download {
    position: absolute;
    right: 5%;
    top: 50%; /* Centrado verticalmente */
    transform: translateY(-50%); /* Centrado vertical */
    z-index: 2;
    width: 220px; /* Ajustado para coincidir con el botón */
    text-align: center;
}

.btn-download {
    display: block;
    width: 220px; /* Ligeramente más grande */
    height: 90px; /* Ligeramente más grande */
    transition: transform 0.3s ease;
}

.btn-download img {
    width: 100%;
    height: auto;
    filter: none;
    transition: transform 0.3s ease;
    text-align: center;
    vertical-align: middle;
}

.btn-download:hover {
    transform: scale(1.05);
}

/* SERVER STATS STYLES - Pure CSS version - Definición movida al grupo de estilos combinados */

.stat-box {
    position: relative;
    width: 33.33%;
    height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    overflow: hidden;
    margin: 0 2px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 50% 100%, 0% 85%);
    border: 1px solid #674220;
}

.stat-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
}

.stat-box.purple {
    background-color: #3a1c78;
    border-top: 1px solid #8c70d4;
    border-left: 1px solid #6c50b4;
    border-right: 1px solid #6c50b4;
}

.stat-box.red {
    background-color: #7d1a1a;
    border-top: 1px solid #d47070;
    border-left: 1px solid #b45050;
    border-right: 1px solid #b45050;
}

.stat-box.gold {
    background-color: #7d4a1a;
    border-top: 1px solid #d4b470;
    border-left: 1px solid #b48450;
    border-right: 1px solid #b48450;
}

.stat-box h3 {
    font-size: 42px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(0,0,0,0.7);
    margin: 5px 0;
    position: relative;
    z-index: 2;
}

.stat-box p {
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    margin: 0;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    position: relative;
    z-index: 2;
    text-align: center;
}

.small-text {
    font-size: 10px;
    color: rgba(255,255,255,0.8);
    display: block;
    text-align: center;
    margin-top: -2px;
}

.crown-decoration {
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 215, 0, 0.6);
    z-index: 1;
    opacity: 0.7;
}

.crown-decoration::before, .crown-decoration::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid rgba(255, 215, 0, 0.6);
    top: -12px;
}

.crown-decoration::before {
    left: 15px;
}

.crown-decoration::after {
    right: 15px;
}

.stat-box.purple .crown-decoration {
    border-color: rgba(140, 112, 212, 0.6);
}

.stat-box.purple .crown-decoration::before,
.stat-box.purple .crown-decoration::after {
    border-color: rgba(140, 112, 212, 0.6);
}

.stat-box.red .crown-decoration {
    border-color: rgba(212, 112, 112, 0.6);
}

.stat-box.red .crown-decoration::before,
.stat-box.red .crown-decoration::after {
    border-color: rgba(212, 112, 112, 0.6);
}

.stat-box.gold .crown-decoration {
    border-color: rgba(212, 180, 112, 0.6);
}

.stat-box.gold .crown-decoration::before,
.stat-box.gold .crown-decoration::after {
    border-color: rgba(212, 180, 112, 0.6);
}

.content-area {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    gap: 20px; /* Cambiado de 8px a 20px para espaciado uniforme */
    padding: 20px;
    background-image: url('../images/pergamino.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    z-index: 2;
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 20px;
    padding-bottom: 20px; /* Reducido de 90px a 20px */
    min-height: 600px;
    box-sizing: border-box;
    grid-template-rows: auto auto 1fr auto; /* Añadido para el footer */
}

.content-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 80%, rgba(15, 7, 5, 0.9) 100%);
    pointer-events: none;
    z-index: -1;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.3);
}


/* LEFT COLUMN */
.left-column {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Igualado a la separación horizontal entre columnas */
    margin-top: 0;
    position: relative;
    z-index: 2;
    width: 100%; /* Asegurar ancho completo */
}

/* .login-box ya está incluido en el grupo de estilos combinados */

.login-box h2 {
    text-align: center;
    margin-bottom: 15px;
    color: #ff6600;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
}

.form-group {
    margin-bottom: 6px; /* Reducido para consistencia */
    display: flex;
    align-items: center;
    background-color: #000;
    border: 1px solid #333;
}

.form-group label {
    width: 30px;
    text-align: center;
}

.form-group input {
    flex: 1;
    padding: 8px;
    background-color: transparent;
    border: none;
    color: var(--text-light);
    outline: none;
}

.btn-login {
    display: block;
    width: 100%;
    padding: 8px;
    background-color: #90300a;
    color: var(--text-light);
    border: 1px solid #c74b1e;
    cursor: pointer;
    text-align: center;
    margin-top: 10px; /* Ajustado para mantener proporción con el nuevo gap */
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    font-weight: bold;
}

.btn-login:hover {
    background-color: #c13c0d;
}

.login-footer {
    margin-top: 15px; /* Ajustado para mantener proporción con el nuevo gap */
    text-align: center;
    font-size: 12px;
}

.login-footer a {
    color: var(--primary-color);
}

.discord-box {
    padding: 10px;
    background-color: rgba(20, 10, 5, 0.9);
    border: 1px solid #492b1a;
}

.discord-box img {
    width: 100%;
    border-radius: 3px;
}

.ranking-box {
    background-color: rgba(20, 10, 5, 0.9);
    border: 1px solid #492b1a;
    border-radius: 0;
    padding: 15px;
    position: relative;
    /* margin-top: 20px; */ /* Eliminado para consistencia */
}

/* Triángulo/estandarte en la parte inferior de los ranking-box */
.ranking-box::after {
    content: '';
    position: absolute;
    bottom: -70px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 140px solid transparent;
    border-right: 140px solid transparent;
    border-top: 70px solid rgba(20, 10, 5, 0.9);
    z-index: 1;
}

/* Borde del triángulo para que coincida con el contenedor */
.ranking-box::before {
    content: '';
    position: absolute;
    bottom: -71px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 141px solid transparent;
    border-right: 141px solid transparent;
    border-top: 71px solid #492b1a;
    z-index: 0;
}

.ranking-box h2 {
    text-align: center;
    margin-bottom: 15px;
    color: #ff6600;
    font-size: 18px;
    text-transform: uppercase;
    border-bottom: 1px solid #4a4a4a;
    padding-bottom: 5px;
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
}

.ranking-table th,
.ranking-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    color: #e8c88a;
}

.ranking-table th {
    background-color: var(--bg-darker);
    color: var(--text-gold);
}

.ranking-table td img {
    width: 16px;
    height: 16px;
}

.more-link {
    display: block;
    text-align: right;
    margin-top: 6px; /* Reducido para consistencia */
    color: var(--primary-color);
    font-size: 12px;
}

/* CENTER COLUMN */
.center-column {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Igualado a la separación horizontal entre columnas */
    margin-top: 0;
    position: relative;
    z-index: 2;
    width: 100%; /* Asegurar ancho completo */
}

/* .ranking-players ya no necesita margin-top adicional con el gap de 20px */

/* Asegurar que .game-description y .server-info-box usen los bordes correctos */
.game-description,
.server-info-box {
    background-color: rgba(20, 10, 5, 0.95) !important;
    border: 1px solid #674220 !important;
    border-radius: 0 !important;
    /* box-shadow eliminado para permitir efectos de fuego */
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* Propiedades específicas adicionales para .game-description */
.game-description {
    margin-top: 0;
    position: relative;
    z-index: 2;
    color: #e8c88a;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.game-news-image {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    overflow: hidden;
    max-height: 200px;
    border: 1px solid rgba(255, 102, 0, 0.3);
    border-radius: 5px;
}

.game-news-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.game-news-content h1 {
    font-size: 22px;
    color: #ff6600;
    margin-bottom: 6px; /* Reducido para consistencia */
    font-weight: bold;
    text-align: center;
}

.game-news-content p {
    margin-bottom: 6px; /* Reducido para consistencia */
    font-size: 15px;
    line-height: 1.5;
}

.game-news-content p strong {
    color: #ff6600;
    font-weight: bold;
}

/* .server-info-box ya no necesita margin-top adicional con el gap de 20px */

.server-icon {
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    border-radius: 50%;
    background-image: url('../images/server-icon.svg');
    background-size: cover;
    flex-shrink: 0; /* Evita que el icono se encoja */
}

.server-details h3 {
    font-size: 18px;
    color: #ff6600;
    margin-bottom: 10px;
    font-weight: bold;
}

.server-details p {
    margin-bottom: 6px; /* Reducido para consistencia */
    font-size: 14px;
    line-height: 1.5;
    color: #e8c88a;
}

.post-info {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: #aaa;
    border-top: 1px solid #4a4a4a;
    padding-top: 5px;
    margin-top: 6px; /* Reducido para consistencia */
}

.post-info a {
    color: #ff6600;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: 0;
}

.pagination a {
    display: inline-block;
    padding: 5px 10px;
    background-color: #1c0d08;
    border: 1px solid #333;
    color: #fff;
}

.pagination a.active,
.pagination a:hover {
    background-color: #ff6600;
}

/* RIGHT COLUMN */
.right-column {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Igualado a la separación horizontal entre columnas */
    margin-top: 0;
    position: relative;
    z-index: 2;
    width: 100%; /* Asegurar ancho completo */
}

/* Ajustes para el módulo de comunidades y descripción */
.game-description,
.communities-box {
    margin-top: -50px; /* Aumentado para igualar con el stats-container */
    position: relative;
    z-index: 2;
}

.server-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Reducido aun más para botones */
    margin-top: 0;
}

.btn-discord,
.btn-whatsapp {
    display: block;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.btn-discord {
    background-color: #5865F2;
    color: #fff;
    border: 1px solid #4752c4;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    position: relative;
    padding-left: 40px;
}

.btn-discord:before {
    content: '';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url('../images/discord-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Estilos para el botón de WhatsApp */
.btn-whatsapp {
    display: block;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    background-color: #25d366;
    color: #fff;
    border: 1px solid #128c7e;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    position: relative;
    padding-left: 40px;
    margin-top: 6px; /* Reducido para consistencia */
}

.btn-whatsapp:before {
    content: '';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url('../images/whatsapp-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.btn-whatsapp:hover {
    background-color: #128c7e;
    color: #fff;
}

/* Combinando estilos similares para simplificar */
.itemshop-box,
.presentation-box,
.create-account-box,
.ranking-box,
.discord-box,
.game-description,
.server-info-box,
.register-form-box,
.communities-box,
.login-box,
.server-stats-container {
    background-color: rgba(20, 10, 5, 0.95);
    border: 1px solid #674220;
    border-radius: 0;
    padding: 15px;
    /* box-shadow eliminado para permitir efectos de fuego */
    width: 100%; /* Ancho uniforme para todos los contenedores */
    box-sizing: border-box; /* Incluir padding y border en el ancho total */
}

/* Estilos específicos que difieren del grupo anterior */
.discord-box {
    padding: 10px; /* Menos padding para la imagen */
}

/* Sobrescribir estilos específicos para estadísticas */
.server-stats-container {
    display: flex !important;
    justify-content: center !important;
    margin: -50px 0 0 0 !important; /* Solo margin-top negativo, sin margin-bottom extra */
    position: relative !important;
    z-index: 3 !important;
    background-color: rgba(15, 5, 3, 0.95) !important; /* Fondo más oscuro para estadísticas */
    padding: 5px !important; /* Padding reducido para las estadísticas */
    border: 1px solid #674220 !important; /* Mismo borde que las demás cajas */
    border-radius: 0 !important;
    /* box-shadow eliminado para permitir efectos de fuego */
    width: 100% !important;
    box-sizing: border-box !important;
}

.discord-box img {
    display: block; /* Evita espacio extra debajo de la imagen */
    width: 100%;
    /* border-radius: 3px; */ /* Quitado para consistencia con bordes rectos */
}

.server-info-box {
    display: flex;
    gap: 10px;
}

/* Quitar estilos de useful-links que ya no existe */
/* Estilos para el formulario de registro rápido */
.register-quick-form {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Reducido para consistencia */
}

.communities-box h2,
.register-form-box h2,
.ranking-box h2, /* Reutilizando estilo */
.login-box h2 {   /* Reutilizando estilo */
    text-align: center;
    margin-bottom: 15px;
    color: #ff6600;
    font-size: 18px;
    text-transform: uppercase;
    border-bottom: 1px solid #4a4a4a;
    padding-bottom: 5px;
}

/* Estilos adicionales para el formulario de registro */
.terms-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 5px 0;
    font-size: 12px;
}

.terms-check a {
    color: var(--primary-color);
    text-decoration: underline;
}

.btn-register-form {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #90300a;
    color: var(--text-light);
    border: 1px solid #c74b1e;
    cursor: pointer;
    text-align: center;
    margin-top: 10px; /* Ajustado para mantener proporción con el nuevo gap */
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    font-weight: bold;
}

.btn-register-form:hover {
    background-color: #c13c0d;
}

/* MEDIA QUERIES */
@media (max-width: 1200px) {
    .content-area {
        grid-template-columns: 1fr 1fr; /* Dos columnas en pantallas medianas */
    }
    /* Mueve la columna derecha a la siguiente fila */
    .right-column {
        grid-column: span 2; /* Ocupa todo el ancho */
    }
}

@media (max-width: 992px) { /* Punto de quiebre adicional */
    .content-area {
        grid-template-columns: 300px 1fr; /* Ajusta columnas si es necesario */
    }
    .right-column {
        grid-column: span 2;
    }
     .hero-character {
        width: 220px; /* Personaje más grande en pantallas medianas */
        left: 5%;
    }
    .hero-download {
        right: 5%;
        width: 180px; /* Ajusta tamaño descarga */
    }
}


@media (max-width: 768px) {
    .main-header {
        flex-direction: column; /* Apila logo/nav y auth */
        gap: 15px;
    }

    .main-nav ul {
        justify-content: center; /* Centra los items del nav */
        flex-wrap: wrap; /* Permite que pasen a la siguiente línea */
    }

    .main-nav .text {
        display: none; /* Oculta texto en móvil, solo iconos */
    }
    .main-nav .icon {
        font-size: 28px; /* Iconos un poco más grandes */
        margin-bottom: 0;
    }
     .main-nav a {
        padding: 5px;
    }


    .content-area {
        grid-template-columns: 1fr; /* Una sola columna */
        padding: 15px; /* Menos padding */
    }
    /* Todas las columnas ocupan el ancho completo */
    .left-column, .center-column, .right-column {
        grid-column: span 1;
    }

    .hero-banner {
        height: 400px; /* Altura adaptada para móviles */
    }

    .hero-character {
        width: 280px; /* Personaje más grande que antes */
        left: 50%;
        transform: translateX(-50%); /* Centrarlo */
        bottom: 0; /* Alineado con el borde inferior */
        z-index: 3; /* Por encima del logo si se solapan */
    }

    .hero-logo img {
        max-width: 300px; /* Logo más grande */
    }

     .hero-download {
        position: static; /* Quita posicionamiento absoluto */
        transform: none;
        margin: 15px auto 0; /* Espacio arriba, centrado */
        width: 160px; /* Botón más pequeño */
        z-index: 2;
    }
    .btn-download {
         width: 160px;
         height: auto; /* Altura automática */
    }

    .server-stats {
        flex-wrap: wrap; /* Permite que los stats pasen a la siguiente línea */
        justify-content: space-around;
        max-width: none; /* Ocupa el ancho disponible */
    }

    .stat-box {
        margin-bottom: 10px; /* Espacio entre stats si se apilan */
        width: 90px; /* Un poco más pequeños */
        height: 90px;
    }
    .stat-box h3 {
        font-size: 28px;
    }

    .server-info-box {
        flex-direction: column; /* Apila icono y detalles */
        align-items: center; /* Centra el icono */
        text-align: center; /* Centra texto */
    }

    .post-info {
       justify-content: center; /* Centra los elementos */
       flex-wrap: wrap; /* Permite que pasen a la siguiente línea */
    }
    
    .game-news-image {
        max-height: 150px;
    }
    
    .game-news-content h1 {
        font-size: 18px;
    }
    
    .game-news-content p {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .auth-nav {
        margin-top: 10px; /* Espacio extra cuando el header se apila */
    }

    .hero-character {
        width: 220px; /* Personaje más grande */
    }
    .hero-logo img {
        max-width: 250px;
    }

    .content-area {
        gap: 15px; /* Menos espacio entre secciones */
    }

    /* Reduce padding general de las cajas */
    .ranking-box,
    .login-box,
    .discord-box,
    .game-description,
    .server-info-box,
    .useful-links {
        padding: 10px;
    }

    .ranking-table th,
    .ranking-table td {
        padding: 6px; /* Menos padding en tablas */
        font-size: 12px; /* Texto más pequeño en tablas */
    }

     .form-group input, .btn-login {
        padding: 6px;
        font-size: 14px;
    }

     .useful-links a {
        padding: 6px;
        padding-left: 25px; /* Ajusta padding izquierdo por el icono */
        font-size: 14px;
    }
     .link-ranking:before,
     .link-register:before,
     .link-download:before,
     .link-rules:before,
     .link-support:before {
        left: 8px; /* Acerca el icono */
    }


    .footer-nav ul {
        gap: 10px; /* Menos espacio entre links del footer */
    }
     .footer-nav a {
        font-size: 12px; /* Links del footer más pequeños */
    }
     .footer-logo {
        width: 120px; /* Logo del footer más pequeño */
     }

     .footer-info {
        font-size: 11px;
     }
}