/* Ajuste para que los botones del menú se adapten */
@media (min-width: 768px) {
    main .fake-header .wrapper .main-nav {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    main .fake-header .wrapper .main-nav li a {
        padding: 5px 8px 10px 8px;
        margin: 0 3px;
        font-size: 0.9rem;
    }
    
    main .fake-header .wrapper .main-nav li a .font-button {
        font-size: 0.95rem;
    }
}

@media (min-width: 1024px) {
    main .fake-header .wrapper .main-nav {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    main .fake-header .wrapper .main-nav li a {
        padding: 8px 12px 10px 12px;
        margin: 0 4px;
    }
    
    main .fake-header .wrapper .main-nav li a .font-button {
        font-size: 1rem;
    }
    
    /* Layout de 3 columnas:
       - Columna 1 (izquierda): Estado del servidor + Eventos (juntos)
       - Columna 2 (centro): Welcome (más ancho)
       - Columna 3 (derecha): Castillos + Bosses
    */
    main .real-main .wrapper {
        display: grid !important;
        grid-template-columns: 1fr 3.5fr 1fr;
        gap: 20px;
        align-items: start;
    }

    /* server-panels usa contents para que sus hijos (left-column, right-column) participen en el grid */
    main .real-main .wrapper .server-panels {
        display: contents !important;
    }

    /* Columna izquierda: contenedor con Estado del servidor + Eventos apilados */
    main .real-main .wrapper .left-column {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        gap: 20px; /* Espacio entre estado y eventos */
    }

    /* Eliminar margenes de los paneles dentro de left-column */
    main .real-main .wrapper .left-column .server-status-panel,
    main .real-main .wrapper .left-column .events-panel {
        margin: 0 !important;
    }

    /* Columna central: Welcome */
    main .real-main .wrapper .welcome {
        grid-column: 2;
        grid-row: 1;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    /* Columna derecha: contenedor con Castillos + Bosses apilados */
    main .real-main .wrapper .right-column {
        grid-column: 3;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        gap: 20px; /* Espacio entre castillos y bosses */
    }

    /* Eliminar margenes de los paneles dentro de right-column */
    main .real-main .wrapper .right-column .castles-panel,
    main .real-main .wrapper .right-column .bosses-panel {
        margin: 0 !important;
    }
}