/* ============================================
   赛博朋克电竞风 - 底部区域样式
   
   设计理念：
   暗黑底栏 + 顶部流光装饰线 + 霓虹链接发光
   
   本文件包含：
   1. 底部区域主容器
   2. 顶部流光装饰线（::before）
   3. 底部内容区
   4. 底部导航链接
   5. 底部提示/信息文字
   6. 认证图片区域
   ============================================ */


/* =====================================================================
   第1部分：底部区域主容器
   
   全宽容器，最小高度280px。
   背景从页面主背景色渐变到极深蓝黑色（bg-footer-end），
   营造底部收束的暗黑氛围。
   顶部1px霓虹蓝半透明边框线，margin-top:60px与列表区间距。
   flex居中布局，padding:40px上下留白。
   ===================================================================== */
.底部区域 {
    height: auto; min-height: 280px;
    background: linear-gradient(180deg, var(--bg-primary), var(--bg-footer-end));  /* 主背景→极深蓝黑渐变 */
    display: flex; justify-content: center; align-items: center;
    margin-top: 60px; position: relative;
    border-top: 1px solid var(--border-dim); padding: 40px 0;  /* 顶部霓虹蓝边框线 */
}


/* =====================================================================
   第2部分：顶部流光装饰线（::before伪元素）
   
   覆盖在顶部边框线之上的一道1px蓝紫渐变线，
   配合borderFlow动画实现流光效果（4秒循环）。
   opacity:0.4 半透明，不喧宾夺主。
   ===================================================================== */
.底部区域::before {
    content: ''; position: absolute; top: -1px; left: 0;
    width: 100%; height: 1px;
    background: var(--gradient-main);                             /* 主蓝紫渐变流光线 */
    background-size: 200% 100%;
    animation: borderFlow 4s linear infinite;
    opacity: 0.4;
}


/* =====================================================================
   第3部分：底部内容区
   
   居中限宽1200px，文字居中，弱化文字色，13px字号。
   ===================================================================== */
.底部内容 { text-align: center; color: var(--text-muted); font-size: 13px; max-width: 1200px; padding: 0 20px; }


/* =====================================================================
   第4部分：底部导航链接
   
   次要文字色链接，0.3s过渡动画。
   链接间用竖线分隔符（由JS生成<span>|</span>）。
   悬浮时：霓虹蓝色+发光文字阴影。
   ===================================================================== */
.底部导航 { margin-bottom: 24px; }

.底部导航 a {
    color: var(--text-secondary); text-decoration: none;         /* 次要文字色 */
    margin: 0 10px; transition: all 0.3s ease; font-size: 13px;
}

.底部导航 a:hover { color: var(--neon-blue); text-shadow: var(--footer-link-shadow); }  /* 悬浮：霓虹蓝+发光 */

.底部导航 span { color: var(--text-muted); opacity: 0.3; }     /* 竖线分隔符：弱化文字色+30%透明度 */


/* =====================================================================
   第5部分：底部提示/信息文字
   
   两行弱化文字，行高1.8便于阅读。
   提示信息在上，备案信息在下。
   ===================================================================== */
.底部提示 { margin-bottom: 16px; line-height: 1.8; font-size: 12px; color: var(--text-muted); }
.底部信息 { line-height: 1.8; font-size: 12px; color: var(--text-muted); }


/* =====================================================================
   第6部分：认证图片区域
   
   Flex居中排列，20px间距。
   图片高度40px，宽度自适应，object-fit:contain保持比例。
   默认opacity:1（不灰化，清晰可见），无滤镜。
   悬浮时微增亮度（brightness:1.1）。
   ===================================================================== */
.认证图片区域 { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 30px 0 10px; }

.认证图片 { height: 40px; width: auto; object-fit: contain; opacity: 1; transition: all 0.3s ease; filter: none; }
.认证图片:hover { opacity: 1; filter: brightness(1.1); }      /* 悬浮微增亮度 */