/* 友链区域占位，避免填充时推移 */
#friend-links-list { min-height: 48px; }

#friend-links {
    margin-top: 20px;
    text-align: center; /* 修改为居中显示 */
}

#friend-links h3 {
    font-size: 1.5em;
    color: #333;
}

#friend-links ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#friend-links ul li {
    margin: 5px 15px;
}

#friend-links ul li a {
    text-decoration: none;
    color: #333;
    font-size: 1em;
    transition: color 0.3s ease;
}

#friend-links ul li a:hover {
    color: #4CAF50;
}

/* 响应式优化：平板与手机上缩小间距、字体，并在小屏上改为垂直排列居中 */
@media (max-width: 900px) {
    #friend-links ul {
        padding: 8px;
        border-radius: 10px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    }
    #friend-links ul li {
        margin: 6px 12px;
    }
    #friend-links ul li a {
        font-size: 0.95rem; /* 稍微缩小文字 */
        padding: 6px 8px;
    }
}

/* 手机端：强制一行显示、缩小间距并启用横向滚动 */
@media (max-width: 480px) {
    #friend-links {
        padding-left: 6px;
        padding-right: 6px;
    }
    #friend-links ul {
        /* 改为可换行，取消横向滚动 */
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;                 /* 缩小间距 */
        padding: 6px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.05);
        overflow-x: visible;      /* 取消横向滚动 */
        -webkit-overflow-scrolling: auto;
        scroll-behavior: auto;
        white-space: normal;      /* 允许换行 */
        justify-content: center;
    }
    #friend-links ul li {
        margin: 4px 4px;          /* 缩小左右间距 */
        width: auto;
        display: inline-flex;
        justify-content: center;
        flex: 0 1 auto;           /* 允许压缩并换行 */
    }
    #friend-links ul li a {
        font-size: 0.65rem;       /* 更小的字体，防止换行过长 */
        display: inline-block;
        padding: 4px 6px;
        width: auto;
        text-align: center;
        white-space: normal;
    }
}

/* 极小屏微调，避免文字溢出或过大间距 */
@media (max-width: 360px) {
    #friend-links h3 { font-size: 1.3em; }
    #friend-links ul li a { font-size: 0.65rem; padding: 5px 8px; }
}