/* mobile.css — 手机版适配（） + 窄屏 @media 兜底 */
/* ============================================================
手机版适配
- 由 触发（个人设置里可强制开关 / 跟随屏幕）
- 目标：文字不竖排、不溢出、卡片铺满、控件可点
============================================================ */
html[data-mobile="1"] #app-view { height: 100dvh; }
html[data-mobile="1"] .app-shell { height: 100dvh; }
/* 侧边栏改为浮层抽屉 + 半透明遮罩 */
html[data-mobile="1"] .sidebar {
position: fixed; top: 0; left: 0; bottom: 0; z-index: 300;
width: 250px; max-width: 82vw; box-shadow: var(--shadow-3);
transform: translateX(0);
}
html[data-mobile="1"] .app-shell.sidebar-collapsed .sidebar { transform: translateX(-105%); }
/* 抽屉打开时的半透明遮罩 */
html[data-mobile="1"] .app-shell:not(.sidebar-collapsed) .content::before {
content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 290;
}
html[data-mobile="1"] .content { width: 100%; }
html[data-mobile="1"] .main { padding: 16px 12px 64px; }
html[data-mobile="1"] .page { max-width: 100%; }
html[data-mobile="1"] .topbar { padding: 0 10px; gap: 8px; }
/* 手机端顶栏要「有内容」：原先把 .title 直接 display:none，导致除了汉堡按钮，
顶栏看起来是空的（用户报「手机版无法显示顶端栏目内容」）。
现在改为显示当前页标题，并压缩字号/宽度；搜索框只在浏览页出现（由 JS 控制）。 */
html[data-mobile="1"] .topbar .title {
display: block; font-size: 14px; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 顶栏搜索框铺满 */
html[data-mobile="1"] .search-wrap { flex: 1; min-width: 0; }
html[data-mobile="1"] .search-wrap input { width: 100%; }
/* 手机上顶栏右侧的按钮缩小，给标题与搜索留空间 */
html[data-mobile="1"] .topbar .right { gap: 6px; }
html[data-mobile="1"] .topbar .theme-toggle { padding: 0 8px; height: 32px; font-size: 12px; }
html[data-mobile="1"] .topbar .theme-toggle span { display: none; }
/* 通用：flex 行一律允许换行；文本强制换行，杜绝竖排与横向溢出 */
html[data-mobile="1"] .page-head h2,
html[data-mobile="1"] .post-title,
html[data-mobile="1"] .detail-title,
html[data-mobile="1"] .profile-hero .meta .n,
html[data-mobile="1"] .rank-name { flex-wrap: wrap; white-space: normal; overflow: visible; text-overflow: clip; }
html[data-mobile="1"] .setting-row { flex-direction: column; align-items: stretch; gap: 12px; }
html[data-mobile="1"] .setting-row .btn-primary,
html[data-mobile="1"] .setting-row .btn-xs,
html[data-mobile="1"] .setting-row .lang-select { width: 100%; }
html[data-mobile="1"] .color-swatches { max-width: 100%; }
html[data-mobile="1"] .space-mode-opts { gap: 12px 18px; }
/* 档案卡纵向：头像在上，信息在下 */
html[data-mobile="1"] .profile-hero { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; }
html[data-mobile="1"] .profile-hero .meta { width: 100%; }
html[data-mobile="1"] .profile-hero .hero-ops { width: 100%; }
html[data-mobile="1"] .profile-hero .hero-ops .btn,
html[data-mobile="1"] .profile-hero .hero-ops .btn-primary { width: 100%; }
/* 签到条纵向，按钮铺满 */
html[data-mobile="1"] .sign-bar { gap: 12px; padding: 14px 16px; }
html[data-mobile="1"] .sign-bar .grow { display: none; }
html[data-mobile="1"] .sign-btn { width: 100%; justify-content: center; }
/* 统计行：标签与数值可换行，数值不挤压 */
html[data-mobile="1"] .stat-row { gap: 10px; }
html[data-mobile="1"] .stat-row .lbl { flex-wrap: wrap; min-width: 0; }
html[data-mobile="1"] .stat-row .val { text-align: right; white-space: normal; word-break: break-word; }
/* 帖子卡片 */
html[data-mobile="1"] .post { padding: 14px; }
html[data-mobile="1"] .post .post-head { flex-wrap: wrap; }
html[data-mobile="1"] .post .post-foot { flex-wrap: wrap; gap: 10px; }
html[data-mobile="1"] .post .post-foot .ops { margin-left: auto; }
html[data-mobile="1"] .msg-revoke { opacity: .8; }
/* 好友 / 玩家行：信息换行，操作按钮不挤 */
html[data-mobile="1"] .friend-item { flex-wrap: wrap; gap: 10px; }
html[data-mobile="1"] .friend-item .fi-main { flex: 1 1 100%; }
html[data-mobile="1"] .friend-item .fi-ops { margin-left: auto; }
html[data-mobile="1"] .friend-item .fi-sub { white-space: normal; }
/* 排行榜 */
html[data-mobile="1"] .rank-row { gap: 8px; padding: 10px 12px; }
html[data-mobile="1"] .rank-row .rank-name { white-space: normal; }
/* 资源共享 */
html[data-mobile="1"] .res-item { flex-wrap: wrap; gap: 10px; padding: 14px; }
html[data-mobile="1"] .res-item .res-main { flex: 1 1 100%; }
html[data-mobile="1"] .res-item .res-ops { margin-left: auto; }
/* 服务器文档 */
html[data-mobile="1"] .docs-search { min-width: 0; width: 100%; }
html[data-mobile="1"] .docs-toolbar { gap: 8px; }
html[data-mobile="1"] .cmd-top { gap: 8px; }
/* 官网设置 */
html[data-mobile="1"] .ld-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-mobile="1"] .ld-gallery .ld-label,
html[data-mobile="1"] .ld-gallery .ld-file { width: 100%; }
html[data-mobile="1"] .reward-grid { grid-template-columns: 1fr; }
/* 聊天：尽量占满宽度 */
html[data-mobile="1"] .chat-wrap { border-radius: var(--radius-m); }
html[data-mobile="1"] .chat-head { flex-wrap: wrap; gap: 8px; }
html[data-mobile="1"] .chat-head .ch-ops { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
html[data-mobile="1"] .msg-bubble { max-width: 78%; }
/* 分页：换行居中，跳转框自适应 */
html[data-mobile="1"] .pager { gap: 8px; }
html[data-mobile="1"] .pager .btn { flex: 1 1 40%; }
html[data-mobile="1"] .pager-info { flex: 1 1 100%; text-align: center; }
/* 表格型/长文本统一防溢出 */
html[data-mobile="1"] .server-raw,
html[data-mobile="1"] .docs-meta,
html[data-mobile="1"] .sv-msg .sv-body,
html[data-mobile="1"] .res-item .res-desc,
html[data-mobile="1"] .detail-body,
html[data-mobile="1"] .comment .c-body,
html[data-mobile="1"] .mail-body,
html[data-mobile="1"] .announce-card .ann-body { overflow-wrap: anywhere; word-break: break-word; }
html[data-mobile="1"] .code-item, html[data-mobile="1"] .code-line { flex-wrap: wrap; }
/* 官网设置 */
html[data-mobile="1"] .ld-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-mobile="1"] .ld-gallery .ld-label,
html[data-mobile="1"] .ld-gallery .ld-file { width: 100%; }
html[data-mobile="1"] .reward-grid { grid-template-columns: 1fr; }
html[data-mobile="1"] .skin-picker { grid-template-columns: 1fr; }
/* 管理设置：弹性重启 */
html[data-mobile="1"] .restart-count b { font-size: 22px; }
html[data-mobile="1"] .rs-input { width: 100%; }
html[data-mobile="1"] .restart-set .btn-primary,
html[data-mobile="1"] .restart-set .btn { flex: 1 1 auto; }
/* 模态框：小屏铺满 */
html[data-mobile="1"] .modal { width: calc(100% - 24px); max-width: 100%; max-height: 86dvh; overflow-y: auto; }
html[data-mobile="1"] .modal h3 { font-size: 16px; }
html[data-mobile="1"] .login-card { width: calc(100% - 32px); padding: 22px 18px; }
/* 市场/商城网格：手机至少两列 */
html[data-mobile="1"] .avatar-grid,
html[data-mobile="1"] .shop-grid,
html[data-mobile="1"] .avatar-picker .ap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 窄屏兜底（即使未开启强制手机版也生效） */
@media (max-width: 820px) {
.main { padding: 18px 16px 50px; }
.topbar { padding: 0 14px; gap: 8px; }
.topbar .title { display: none; }
.replies { margin-left: 14px; }
.setting-row { flex-direction: column; align-items: stretch; gap: 12px; }
.setting-row .btn-primary { width: 100%; }
}