/* ===== 全局重置 & 基础布局 ===== */
/* 设计理念：古卷丹青 —— 宣纸为底，浓墨为骨，朱砂为魂，泥金为韵 */
:root {
    --ink: #1a1410;
    --ink-surface: #1e1812;
    --ink-elevated: #241c14;
    --ink-border: rgba(180, 150, 120, 0.12);
    --paper: #e8dcc8;
    --paper-secondary: #c8b898;
    --paper-muted: #a09078;
    --vermillion: #c04040;
    --vermillion-light: #d46060;
    --vermillion-glow: rgba(192, 64, 64, 0.2);
    --gold-foil: #c8a870;
    --gold-foil-light: #dcc090;
    --gold-foil-glow: rgba(200, 168, 112, 0.25);
    --gold-foil-dim: rgba(200, 168, 112, 0.08);
    --jade: #6a9a80;
    --jade-glow: rgba(106, 154, 128, 0.2);
    /* 数据卡冷色调强调色 */
    --card-combo-accent: #74c0fc;
    /* 活动角标颜色 */
    --badge-limited-color: #ff9800;
    --badge-hot-color: #e91e63;
    --mist-warm: rgba(200, 170, 130, 0.04);
    --mist-cool: rgba(160, 180, 170, 0.03);
    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 10px;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

* {
    touch-action: manipulation;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    overflow: hidden;
}
body {
    background:
        /* 宣纸纹理覆盖层 */
        url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
        /* 云雾层：左上暖光 — 烛火微光 */
        radial-gradient(ellipse at 20% 8%, var(--mist-warm) 0%, transparent 50%),
        /* 云雾层：右下冷光 — 月光余韵 */
        radial-gradient(ellipse at 80% 85%, var(--mist-cool) 0%, transparent 50%),
        /* 底色：暖墨渐变 — 古卷经年浸润之色 */
        linear-gradient(175deg, var(--ink) 0%, var(--ink-surface) 100%);
    color: var(--paper);
    font-family: var(--font-main);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.container {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    background: var(--ink-surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* ===== 页面切换 ===== */
.page {
    display: none !important;
    flex-direction: column;
    height: 100%;
    padding-bottom: 70px;
    animation: fadeIn 0.12s ease-out;
    overflow-x: hidden;
    width: 100%;
}
.page.active {
    display: flex !important;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== 通用工具类 ===== */
.flex-center {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.hidden { display: none; }

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb {
    background: var(--ink-border);
    border-radius: 10px;
}
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
 *  文字系统 —— 修仙质感·古卷丹青
 *  设计理念：宋体为骨（标题），楷意为韵（正文），等宽为用（数字）
 * ============================================================ */

/* ===== 字体变量 ===== */
:root {
    /* 标题字体：宋体 → 古风端庄 */
    --font-title: 'STSong', 'SimSun', 'Songti SC', 'Noto Serif CJK SC', 'WenQuanYi Bitmap Song', serif;
    /* 正文字体：楷体 → 飘逸灵动 */
    --font-body: 'STKaiti', 'KaiTi', 'Kaiti SC', 'Noto Serif CJK SC', 'PingFang SC', 'Microsoft YaHei', serif;
    /* 数字字体：等宽 → 数据对齐精准 */
    --font-num: 'SF Mono', 'Cascadia Code', 'Consolas', 'Menlo', 'PingFang SC', monospace;
    /* 主字体（正文默认） */
    --font-main: var(--font-body);
}

/* ===== 文字渲染优化 ===== */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
}

/* 防止 backdrop-filter 导致的文字模糊 —— 给有模糊背景的容器内文字加层 */
.container, .card, .panel {
    -webkit-font-smoothing: antialiased;
}

/* ===== 三级文字对比度保障 ===== */
/* 一级文字（主要内容）：对比度 ≥ 7:1 */
.text-primary,
.paper-primary {
    color: var(--paper);
    font-weight: 500;
}

/* 二级文字（辅助信息）：对比度 ≥ 4.5:1 */
.text-secondary,
.paper-secondary {
    color: var(--paper-secondary);
    font-weight: 400;
}

/* 三级文字（弱化提示）：对比度 ≥ 3:1 */
.text-muted,
.paper-muted {
    color: var(--paper-muted);
    font-weight: 400;
}

/* ===== 标题系统 ===== */
.title-lg {
    font-family: var(--font-title);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--paper);
}

.title-md {
    font-family: var(--font-title);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--paper);
}

.title-sm {
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--paper);
}

/* ===== 金箔质感标题（修仙核心强调） ===== */
.gold-text {
    font-family: var(--font-title);
    color: var(--gold-foil-light);
    font-weight: 700;
    text-shadow:
        0 0 6px var(--gold-foil-glow),
        0 1px 2px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.08em;
}

/* 大字金箔效果 —— 用于重要数值、境界名 */
.gold-text-glow {
    font-family: var(--font-title);
    color: var(--gold-foil-light);
    font-weight: 700;
    background: linear-gradient(180deg, var(--gold-foil-light) 0%, var(--gold-foil) 50%, #a88850 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
    letter-spacing: 0.06em;
}

/* ===== 数字样式 ===== */
.num {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.num-gold {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--gold-foil-light);
    text-shadow: 0 0 4px var(--gold-foil-glow);
}

/* ===== 进度条内嵌文字（白字+黑边，任何背景都清晰） ===== */
.bar-text {
    color: #fff;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.7),
        0 0 1px rgba(0, 0, 0, 0.5);
    font-weight: 600;
}

/* ===== 小字号可读性增强 ===== */
small, .text-xs {
    font-size: 11px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ===== 按钮文字 ===== */
.btn-text {
    font-family: var(--font-title);
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* ===== 头像图片全局优化 ===== */
img.avatar,
.avatar img,
.hero-avatar img,
.v5-hero-avatar-img,
.bag-avatar-img,
.status-avatar-img,
#home-avatar,
#bag-avatar,
#cave-avatar {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

/* ===== 页面初始化加载反馈（app.js _runPageInit 统一调度 · 分级显示）===== */
/* 分级显示机制：页面固定框架（标题/导航/按钮/信息条）切页立即稳定显示，
   仅带 data-loading-scope 标记的动态数据区做透明度呼吸动画提示"加载中"；
   数据就绪后 JS 移除 .page-loading，数据区恢复稳定。
   兼容：opacity/animation 为 Chromium 57+ 安全特性，无前沿语法，无 prefers-reduced-motion（游戏禁用）。 */
.page.page-loading [data-loading-scope] {
    animation: page-loading-breathe 0.9s ease-in-out infinite;
}
@keyframes page-loading-breathe {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}