/*
 * 手机端统一皮肤层（mobile-ui.css）
 *
 * 目标：
 *   1. 只在 ≤960px 生效，桌面端零影响（所有规则包在媒体查询里）。
 *   2. 统一触摸目标尺寸（≥44px）、字号与间距，消除各页硬编码差异。
 *   3. 个人中心侧边栏在手机上显示为「顶部横滑胶囊 Tab」。
 *   4. 汉堡下拉面板加滑入动画与毛玻璃，与整体视觉统一。
 *
 * 加载方式：紧跟 site-chrome.css 之后引入（同 7 个页面）。
 * 断点 960px 与 site-shell-nav.js / site-chrome.css 保持一致。
 */

@media (max-width: 960px) {
    :root {
        /* 触屏最小触摸目标 */
        --mb-tap: 44px;
        --mb-radius: 12px;
        --mb-gap: 12px;
        --mb-page-pad: 16px;
    }

    /* ===== 汉堡面板：滑入动画 + 毛玻璃 ===== */
    .site-header .container-game > ul.site-nav {
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.22s ease, opacity 0.22s ease;
        background: rgba(8, 24, 46, 0.92);
        -webkit-backdrop-filter: blur(14px) saturate(1.1);
        backdrop-filter: blur(14px) saturate(1.1);
    }

    .site-header.site-nav-open .container-game > ul.site-nav {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .site-header .container-game > ul.site-nav > li > a {
        min-height: var(--mb-tap);
        line-height: var(--mb-tap);
    }

    /* 汉堡按钮加大到 44px 触摸目标 */
    .site-header .container-game > .site-nav-toggle {
        width: var(--mb-tap);
        height: var(--mb-tap);
    }

    /* ===== 个人中心：侧边栏 → 顶部横滑胶囊 Tab ===== */
    /* 侧边栏默认被隐藏（userinfo.html 里 display:none），手机上恢复为块级，
       并去掉卡片边框与阴影，改造成横向滚动条。 */
    .userinfo-sidebar {
        display: block;
        position: static;
        margin-bottom: var(--mb-gap);
        border: 0;
        background: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .userinfo-sidebar .profile-card {
        /* 手机上把个人资料卡收进一个更紧凑的头部，或直接保留精简版 */
        padding: 14px 16px;
    }

    .userinfo-sidebar .side-nav {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding: 4px 2px 8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .userinfo-sidebar .side-nav::-webkit-scrollbar {
        display: none;
    }

    .userinfo-sidebar .side-nav-title {
        display: none;
    }

    .userinfo-sidebar .side-nav a {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 0 16px;
        border: 1px solid rgba(164, 208, 255, 0.2);
        border-radius: 99px;
        white-space: nowrap;
        font-size: 13px;
        background: rgba(16, 50, 78, 0.32);
        justify-content: center;
    }

    .userinfo-sidebar .side-nav a.is-active {
        border-color: rgba(92, 174, 255, 0.6);
        color: #fff;
        background: linear-gradient(90deg, rgba(92, 174, 255, 0.34), rgba(92, 174, 255, 0.12));
        box-shadow: none;
    }

    .userinfo-sidebar .side-nav .nav-icon {
        width: 18px;
        height: 18px;
        font-size: 12px;
    }

    /* ===== 通用触摸目标兜底：小按钮/链接在触屏上更容易点中 ===== */
    .hello-submit,
    .hello-action-button,
    .hello-sms,
    .password-submit,
    .security-card .password-submit {
        min-height: var(--mb-tap);
    }
}