/* =========================================================
   移动端底部导航栏 - 全站唯一样式来源（标准高度基准）
   标准高度：56px + env(safe-area-inset-bottom)
   所有页面（首页/文章/关于我/在线游戏/在线聊天室）
   必须引用本文件，禁止在各页面内另行定义导航栏高度，
   以确保任何设备上导航栏高度完全一致。
   ========================================================= */

/* ========= 移动端底部固定导航栏（桌面端隐藏） ========= */
.mobile-bottom-nav,
.mobile-footer-info {
    display: none;
}

@media (max-width: 768px) {
    /* 手机端：隐藏左侧（桌面端）导航栏，内容占满全宽。
       使用 !important 是刻意的：本文件可能通过 @import 或 <link> 在各页面
       基础样式（nav { display: flex }、body { padding-left: 200px }）之前加载，
       若不加 !important 会被后加载的同优先级规则覆盖，导致手机端出现左侧导航栏。 */
    nav {
        display: none !important;
    }
    body {
        padding-left: 0 !important;
    }

    /* 固定在屏幕底部的导航栏（五选项）——全站统一标准高度 */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2000;
        height: 56px;
        height: calc(56px + env(safe-area-inset-bottom));
        padding-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom);
        background: rgba(10, 14, 39, 0.94);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid rgba(100, 200, 255, 0.35);
        box-shadow: 0 -4px 20px rgba(0, 150, 255, 0.15);
    }

    .mobile-bottom-nav a {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        text-decoration: none;
        color: rgba(200, 220, 255, 0.75);
        font-size: 0.65rem;
        letter-spacing: 0.5px;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.25s ease;
    }

    .mobile-bottom-nav a .icon {
        width: 22px;
        height: 22px;
        display: block;
        flex-shrink: 0;
    }

    .mobile-bottom-nav a.active {
        color: #00d4ff;
        text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
    }

    /* 手机端备案信息：在页面内容末尾正常显示，且不被底部导航遮挡 */
    .mobile-footer-info {
        display: block;
        text-align: center;
        color: rgba(150, 180, 220, 0.65);
        font-size: 0.72rem;
        line-height: 1.9;
        padding: 1.2rem 1rem 80px;
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    .mobile-footer-info a {
        color: rgba(150, 200, 255, 0.7);
        text-decoration: none;
    }
}