/* ===== 首页 ===== */
/* 设计理念：古卷丹青 —— 宣纸为底，浓墨为骨，朱砂为魂，泥金为韵 */

#page-home {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

/* ⚠️ 统一用户信息条样式已迁移到 components.css
   包含：.status-bar / .status-* / .exp-* / .user-bar-*
   迁移时间：2026-08-22 */

/* 属性面板 */
.stats-grid-new {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    flex-shrink: 0;
}
.stat-card-new {
    background: var(--ink-surface);
    border-radius: var(--radius);
    padding: 6px 4px;
    text-align: center;
    border: 1px solid var(--ink-border);
    position: relative;
    overflow: hidden;
}
.stat-card-new::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    opacity: 0.7;
}
.stat-card-new .stat-card-icon { font-size: 15px; display: block; }
.stat-card-new .stat-card-label {
    font-size: 10px;
    color: var(--paper-muted);
    letter-spacing: 0.5px;
    margin-top: 1px;
}
.stat-card-new .stat-card-value {
    font-size: 14px;
    font-weight: 600;
    margin-top: 1px;
}
.stat-hp::before { background: linear-gradient(90deg, #ff6b6b, #ee5a24); }
.stat-attack::before { background: linear-gradient(90deg, #ffa94d, #e67e22); }
.stat-defense::before { background: linear-gradient(90deg, #74c0fc, #2d7fb9); }
.stat-gold::before { background: linear-gradient(90deg, #ffd93d, #f9a825); }
.stat-spirit::before { background: linear-gradient(90deg, var(--jade), var(--jade)); }
.stat-heart::before { background: linear-gradient(90deg, #da77f2, #8e44ad); }
.stat-hp .stat-card-value { color: #ff6b6b; }
.stat-attack .stat-card-value { color: #ffa94d; }
.stat-defense .stat-card-value { color: #74c0fc; }
.stat-gold .stat-card-value { color: #ffd93d; }
.stat-spirit .stat-card-value { color: var(--jade); }
.stat-heart .stat-card-value { color: #da77f2; }

/* 任务卡片 */
.task-card {
    background: var(--ink-surface);
    border-radius: var(--radius-lg);
    padding: 10px 14px;
    border: 1px solid var(--gold-foil-dim);
    box-shadow: var(--shadow);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.task-card.empty {
    background: var(--ink-surface);
    border-color: var(--ink-border);
    box-shadow: none;
}
.task-icon { font-size: 22px; }
.task-body { flex: 1; }
.task-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--gold-foil-light);
}
.task-card.empty .task-title { color: var(--paper-muted); }
.task-progress {
    font-size: 13px;
    color: var(--paper-secondary);
}
.task-reward {
    font-size: 12px;
    color: var(--paper-muted);
}
.task-actions {
    display: flex;
    gap: 6px;
    width: 100%;
    margin-top: 2px;
}
.btn-task {
    flex: 1;
    padding: 6px 0;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--gold-foil);
    color: var(--ink);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: 0.15s;
}
.btn-task:active { transform: scale(0.95); }
.btn-task-secondary {
    background: transparent;
    border: 1px solid var(--gold-foil);
    color: var(--gold-foil);
}
.btn-task-claim {
    background: linear-gradient(135deg, var(--gold-foil-light), var(--gold-foil));
    color: var(--ink);
    font-weight: 700;
    box-shadow: 0 0 12px var(--gold-foil-glow);
    animation: pulse-gold 2s infinite;
}
@keyframes pulse-gold {
    0%, 100% { box-shadow: 0 0 8px var(--gold-foil-glow); }
    50% {
        /* 兜底：旧内核浏览器 */
        box-shadow: 0 0 18px var(--gold-foil-glow);
        /* 增强：现代浏览器 */
        box-shadow: 0 0 18px color-mix(in srgb, var(--gold-foil) 40%, transparent);
    }
}
.task-card.empty .btn-task {
    background: var(--ink-elevated);
    color: var(--paper-secondary);
    border: none;
}

/* 聊天面板 */
.chat-panel {
    flex: 1;
    min-height: 0;
    background: var(--ink-surface);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--ink-border);
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
}
.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    flex-shrink: 0;
}
.chat-title { font-size: 12px; color: var(--paper-muted); letter-spacing: 1px; }
.chat-badge {
    font-size: 11px;
    color: var(--jade);
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.6;
    color: var(--paper-secondary);
    padding-right: 2px;
}
.chat-messages .msg-system-permanent {
    color: var(--gold-foil-light);
    font-weight: bold;
    font-size: 15px;
    padding: 4px 0;
    border-bottom: 1px solid var(--gold-foil-dim);
}
.chat-messages .msg-system-temp {
    color: var(--gold-foil);
    font-size: 14px;
}
.chat-messages .msg-system { color: var(--gold-foil); font-size: 14px; }
.chat-messages .msg-player { color: #c8d0d8; font-size: 14px; }
.msg-username {
    color: #88ccff;
    cursor: pointer;
    text-decoration: underline dotted;
    transition: 0.15s;
    font-weight: 600;
}
.msg-username:hover { color: #aaddff; text-decoration: underline; }
.msg-name-self {
    color: var(--jade);
    font-weight: 600;
}
.chat-messages .msg-self { color: var(--jade); font-size: 14px; }
.chat-messages .msg-time {
    color: var(--paper-muted);
    font-size: 11px;
    margin-right: 4px;
}
.chat-input {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    flex-shrink: 0;
}
.chat-input input {
    flex: 1;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid var(--ink-border);
    background: color-mix(in srgb, var(--ink) 60%, transparent);
    color: var(--paper);
    font-size: 13px;
    outline: none;
}
.chat-input input:focus { border-color: var(--gold-foil); }
.btn-chat-send {
    padding: 5px 12px;
    border: none;
    border-radius: 20px;
    background: var(--gold-foil);
    color: var(--ink);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}
.btn-chat-send:active { transform: scale(0.95); }

/* 底部导航 */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: space-around;
    background: var(--ink);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ink-border);
    z-index: 100;
    box-sizing: border-box;
}
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2px 6px;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.2s;
    border: none;
    background: transparent;
    color: var(--paper-secondary);
    min-width: 40px;
}
.nav-item.active { opacity: 1; }
.nav-item .nav-icon { font-size: 20px; }
.nav-item .nav-label { font-size: 10px; margin-top: 1px; }

/* ===== SVG 图标样式（仙侠线性风格） ===== */
.nav-svg-icon {
    width: 22px;
    height: 22px;
    display: block;
    line-height: 1;
}
.nav-svg-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    transition: all 0.25s ease;
}
/* 激活态：金色渐变 + 发光 */
.nav-item.active .nav-svg-icon svg {
    stroke: var(--gold-foil);
    filter: drop-shadow(0 0 4px var(--gold-foil-glow));
}

/* ===== 底部导航升级样式 ===== */
.bottom-nav {
    /* 顶部渐变光效 */
    background:
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--gold-foil) 8%, transparent) 0%, transparent 60%),
        var(--ink);
}
/* 激活态上移动画 */
.nav-item.active {
    opacity: 1;
    transform: translateY(-2px);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
}
/* Hover 态缩放效果 */
.nav-item:hover {
    opacity: 0.85;
    transform: scale(1.06);
    transition: transform 0.2s ease, opacity 0.2s;
}
.nav-item.active:hover {
    transform: translateY(-2px) scale(1.06);
}
/* 激活态文字金色 */
.nav-item.active .nav-label {
    color: var(--gold-foil-light);
    font-weight: 500;
}

/* ===== 系统邮件通知 ===== */
.mail-bell {
    position: relative;
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 12px;
    transition: 0.2s;
    flex-shrink: 0;
    margin-left: 8px;
}
.mail-bell:hover { background: var(--gold-foil-dim); }
.mail-bell.has-mail { animation: bell-shake 0.5s ease; }
@keyframes bell-shake {
    0%,100% { transform: rotate(0); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}
.mail-badge {
    position: absolute;
    top: -2px;
    right: 0;
    background: var(--vermillion);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    padding: 0 4px;
}
.mail-panel {
    background: var(--ink-surface);
    border: 1px solid var(--ink-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 10px;
    box-shadow: var(--shadow);
}
.mail-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--gold-foil);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ink-border);
}
.mail-close {
    cursor: pointer;
    color: var(--paper-muted);
    font-size: 20px;
    padding: 2px 8px;
    border-radius: var(--radius);
    transition: 0.15s;
}
.mail-close:hover { color: var(--vermillion); background: var(--vermillion-glow); }
.mail-list {
    max-height: 40vh;
    overflow-y: auto;
    margin-bottom: 8px;
}
.mail-card {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ink) 60%, transparent), color-mix(in srgb, var(--ink) 70%, transparent));
    border: 1px solid var(--ink-border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    margin-bottom: 8px;
    transition: 0.15s;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 20%, transparent);
}
.mail-card:hover { border-color: var(--gold-foil-glow); }
.mail-claimed { opacity: 0.55; }
.mail-claimed:hover { opacity: 0.7; }
.mail-card-title {
    color: var(--gold-foil-light);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}
.mail-card-content {
    color: var(--paper-secondary);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 8px;
}
.mail-card-reward {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.mail-reward-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    background: var(--gold-foil-dim);
    color: var(--gold-foil-light);
}
.mail-card-time {
    color: var(--paper-muted);
    font-size: 11px;
    margin-bottom: 8px;
}
.mail-claim-btn {
    background: linear-gradient(135deg, var(--gold-foil), var(--gold-foil));
    color: var(--ink);
    border: none;
    padding: 6px 18px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s;
    box-shadow: 0 0 10px var(--gold-foil-glow);
}
.mail-claim-btn:hover { opacity: 0.88; box-shadow: 0 0 16px var(--gold-foil-dim); }
.mail-claim-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mail-refresh-btn {
    background: color-mix(in srgb, var(--gold-foil) 4%, transparent);
    border: 1px solid var(--ink-border);
    color: var(--paper-muted);
    padding: 6px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    transition: 0.15s;
}
.mail-refresh-btn:hover { background: color-mix(in srgb, var(--gold-foil) 8%, transparent); color: var(--paper-secondary); }
.mail-empty {
    text-align: center;
    color: var(--paper-muted);
    font-size: 14px;
    padding: 20px;
}

/* ===== 传音页面 ===== */
#page-chuanyin {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--ink);
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 0;
    max-width: 100%;
}
#page-chuanyin.active { display: flex !important; }
.cy-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--ink) 85%, transparent);
    border-bottom: 1px solid var(--ink-border);
    flex-shrink: 0;
}
.cy-back {
    color: var(--gold-foil);
    cursor: pointer;
    font-size: 16px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}
.cy-back:hover { background: var(--gold-foil-dim); color: var(--gold-foil-light); }
.cy-back:active { transform: scale(0.95); }
.cy-title {
    color: var(--gold-foil-light);
    font-size: 18px;
    font-weight: 700;
}
.cy-tabs {
    display: flex;
    border-bottom: 1px solid var(--ink-border);
    flex-shrink: 0;
    background: color-mix(in srgb, var(--ink) 90%, transparent);
}
.cy-tab {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    cursor: pointer;
    color: var(--paper-muted);
    font-size: 14px;
    position: relative;
    transition: 0.2s;
    border-bottom: 2px solid transparent;
}
.cy-tab.active { color: var(--gold-foil); border-bottom-color: var(--gold-foil); font-weight: 600; }
.cy-tab-badge {
    display: inline-block;
    background: var(--vermillion);
    color: #fff;
    font-size: 11px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    padding: 0 4px;
    margin-left: 3px;
    vertical-align: top;
}
.cy-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
}
.cy-conv-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: 0.15s;
    border: 1px solid transparent;
    margin-bottom: 4px;
}
.cy-conv-card:hover { background: var(--gold-foil-dim); border-color: var(--gold-foil-dim); }
.cy-conv-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--gold-foil-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.cy-conv-info { flex: 1; min-width: 0; }
.cy-conv-name { color: var(--gold-foil-light); font-size: 15px; font-weight: 600; }
.cy-conv-realm { color: var(--paper-muted); font-size: 11px; }
.cy-conv-badge {
    background: var(--vermillion);
    color: #fff;
    font-size: 11px;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 10px;
    padding: 0 6px;
    flex-shrink: 0;
}
.cy-search-box {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    border: 2px solid var(--ink-border);
    background: color-mix(in srgb, var(--ink) 90%, transparent);
    color: var(--gold-foil-light);
    font-size: 14px;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.cy-search-box:focus { border-color: var(--gold-foil); outline: none; }
.cy-search-results { flex: 1; overflow-y: auto; }
.cy-search-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: 0.15s;
}
.cy-search-user:hover { background: var(--gold-foil-dim); }
.cy-chat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ink-border);
    margin-bottom: 8px;
    color: var(--gold-foil-light);
    font-size: 15px;
    flex-shrink: 0;
}
.cy-chat-back {
    color: var(--gold-foil);
    cursor: pointer;
    font-size: 15px;
    padding: 4px 10px;
    border-radius: 6px;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}
.cy-chat-back:hover { background: var(--gold-foil-dim); color: var(--gold-foil-light); }
.cy-chat-msgs {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}
.cy-msg-row { display: flex; }
.cy-msg-row.me { justify-content: flex-end; }
.cy-msg-bubble {
    max-width: 75%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
}
.cy-msg-row.other .cy-msg-bubble {
    background: color-mix(in srgb, var(--gold-foil) 6%, transparent);
    color: var(--paper-secondary);
    border-bottom-left-radius: 4px;
}
.cy-msg-row.me .cy-msg-bubble {
    background: var(--gold-foil-dim);
    color: var(--gold-foil-light);
    border-bottom-right-radius: 4px;
}
.cy-chat-input {
    display: flex;
    gap: 8px;
    padding: 8px 0 0;
    border-top: 1px solid var(--ink-border);
    flex-shrink: 0;
}
.cy-chat-input input {
    flex: 1;
    padding: 9px 12px;
    border-radius: 20px;
    border: 1px solid var(--ink-border);
    background: color-mix(in srgb, var(--ink) 80%, transparent);
    color: var(--paper);
    font-size: 14px;
}
.cy-chat-input button {
    padding: 9px 18px;
    border-radius: 20px;
    border: none;
    background: linear-gradient(135deg, var(--gold-foil), var(--gold-foil));
    color: var(--ink);
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}
.cy-content .mail-list { flex: 1; overflow-y: auto; }
.cy-content .mail-refresh-btn { flex-shrink: 0; }
.cy-content .chat-messages { flex: 1; overflow-y: auto; }
.cy-content .chat-input { flex-shrink: 0; }

/* 首页聊天摘要框 */
.chat-summary {
    background: var(--ink-surface);
    border: 1px solid var(--ink-border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: 0.15s;
}
.chat-summary:hover { border-color: var(--gold-foil-dim); }
.chat-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    color: var(--gold-foil);
    font-size: 15px;
    font-weight: 600;
}
.chat-summary-hint { color: var(--paper-muted); font-size: 12px; font-weight: 400; }
.chat-summary-list { font-size: 13px; }
.cs-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 0;
    border-bottom: 1px solid var(--ink-border);
    line-height: 1.4;
}
.cs-item:last-child { border-bottom: none; }
.cs-icon { flex-shrink: 0; font-size: 14px; }
.cs-name { color: #88ccff; flex-shrink: 0; font-weight: 600; }
.cs-msg { color: var(--paper-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-time { color: var(--paper-muted); font-size: 11px; flex-shrink: 0; }
.cs-sys-icon { flex-shrink: 0; font-size: 14px; }
.cs-sys-title { color: var(--gold-foil); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-sys-permanent {
    color: var(--gold-foil-light);
    font-weight: bold;
    font-size: 13px;
}

/* ============================================================
   V5 首页重设计样式（宣纸主题适配）
   设计理念：古卷丹青 · 简约大气 · 层次分明
   ============================================================ */

/* ===== V5 首页整体布局 ===== */
#page-home {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* ===== 首页背景氛围：远山剪影 ===== */
#page-home::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    pointer-events: none;
    background: var(--gold-foil);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120'%3E%3Cpath d='M0,90 L30,70 L60,80 L100,55 L140,75 L180,50 L220,70 L260,45 L300,65 L340,55 L380,75 L400,65 L400,120 L0,120Z' fill='rgba(0,0,0,0.25)'/%3E%3Cpath d='M0,100 L40,80 L80,90 L120,65 L160,85 L200,60 L240,80 L280,55 L320,75 L360,70 L400,85 L400,120 L0,120Z' fill='rgba(0,0,0,0.55)'/%3E%3Cpath d='M0,110 L50,90 L100,100 L150,75 L200,95 L250,70 L300,90 L350,80 L400,95 L400,120 L0,120Z' fill='rgba(0,0,0,0.9)'/%3E%3C/svg%3E") bottom center / 100% auto no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120'%3E%3Cpath d='M0,90 L30,70 L60,80 L100,55 L140,75 L180,50 L220,70 L260,45 L300,65 L340,55 L380,75 L400,65 L400,120 L0,120Z' fill='rgba(0,0,0,0.25)'/%3E%3Cpath d='M0,100 L40,80 L80,90 L120,65 L160,85 L200,60 L240,80 L280,55 L320,75 L360,70 L400,85 L400,120 L0,120Z' fill='rgba(0,0,0,0.55)'/%3E%3Cpath d='M0,110 L50,90 L100,100 L150,75 L200,95 L250,70 L300,90 L350,80 L400,95 L400,120 L0,120Z' fill='rgba(0,0,0,0.9)'/%3E%3C/svg%3E") bottom center / 100% auto no-repeat;
    opacity: 0.07;
    z-index: 0;
}

/* ===== 首页背景氛围：云雾飘动 + 微光粒子 ===== */
#page-home::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    pointer-events: none;
    /* 两层云雾（上下错落） + 8个微光粒子 */
    /* 兜底：旧内核浏览器（不支持 color-mix）用主题变量近似 */
    background:
        radial-gradient(1.5px 1.5px at 15% 20%, var(--gold-foil-glow), transparent 70%),
        radial-gradient(2px 2px at 28% 45%, var(--gold-foil-glow), transparent 70%),
        radial-gradient(1.5px 1.5px at 42% 15%, var(--gold-foil-glow), transparent 70%),
        radial-gradient(2.5px 2.5px at 55% 60%, var(--gold-foil-glow), transparent 70%),
        radial-gradient(1.5px 1.5px at 68% 30%, var(--gold-foil-glow), transparent 70%),
        radial-gradient(2px 2px at 78% 70%, var(--gold-foil-glow), transparent 70%),
        radial-gradient(1.5px 1.5px at 85% 25%, var(--gold-foil-glow), transparent 70%),
        radial-gradient(2px 2px at 92% 50%, var(--gold-foil-glow), transparent 70%),
        radial-gradient(ellipse 200px 35px at 25% 25%, var(--gold-foil-dim), transparent 70%),
        radial-gradient(ellipse 250px 45px at 75% 75%, var(--gold-foil-dim), transparent 70%);
    /* 增强：支持 color-mix 的浏览器精细透明度分层 */
    background:
        /* 粒子1 */
        radial-gradient(1.5px 1.5px at 15% 20%, color-mix(in srgb, var(--gold-foil) 50%, transparent), transparent 70%),
        /* 粒子2 */
        radial-gradient(2px 2px at 28% 45%, color-mix(in srgb, var(--gold-foil) 45%, transparent), transparent 70%),
        /* 粒子3 */
        radial-gradient(1.5px 1.5px at 42% 15%, color-mix(in srgb, var(--gold-foil) 55%, transparent), transparent 70%),
        /* 粒子4 */
        radial-gradient(2.5px 2.5px at 55% 60%, color-mix(in srgb, var(--gold-foil) 40%, transparent), transparent 70%),
        /* 粒子5 */
        radial-gradient(1.5px 1.5px at 68% 30%, color-mix(in srgb, var(--gold-foil) 50%, transparent), transparent 70%),
        /* 粒子6 */
        radial-gradient(2px 2px at 78% 70%, color-mix(in srgb, var(--gold-foil) 45%, transparent), transparent 70%),
        /* 粒子7 */
        radial-gradient(1.5px 1.5px at 85% 25%, color-mix(in srgb, var(--gold-foil) 55%, transparent), transparent 70%),
        /* 粒子8 */
        radial-gradient(2px 2px at 92% 50%, color-mix(in srgb, var(--gold-foil) 40%, transparent), transparent 70%),
        /* 云雾上层 */
        radial-gradient(ellipse 200px 35px at 25% 25%, color-mix(in srgb, var(--gold-foil) 6%, transparent), transparent 70%),
        /* 云雾下层 */
        radial-gradient(ellipse 250px 45px at 75% 75%, color-mix(in srgb, var(--gold-foil) 5%, transparent), transparent 70%);
    background-repeat: no-repeat;
    opacity: 0.8;
    z-index: 0;
    animation:
        v5-bg-cloud-drift 75s linear infinite,
        v5-bg-particle-float 6s ease-in-out infinite;
}

@keyframes v5-bg-cloud-drift {
    0% {
        background-position-x: 0%, 0%, 0%, 0%, 0%, 0%, 0%, 0%, 0%, 0%;
    }
    100% {
        background-position-x: 30%, 20%, 40%, 25%, 35%, 20%, 45%, 30%, 50%, -40%;
    }
}

@keyframes v5-bg-particle-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

/* ===== 确保内容在氛围层之上 ===== */
#page-home > * {
    position: relative;
    z-index: 1;
}

/* ===== V5 Hero 区 ===== */
.v5-hero {
    position: relative;
    padding: 12px 14px 10px;
    position: relative;
    flex-shrink: 0;
    background:
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--gold-foil) 8%, transparent) 0%, transparent 60%),
        transparent;
}

.v5-hero-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.v5-hero-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    /* 兜底：旧内核浏览器头像默认边框 */
    border: 2px solid var(--gold-foil-glow);
    /* 增强：现代浏览器 */
    border: 2px solid color-mix(in srgb, var(--gold-foil) 40%, transparent);
    box-shadow: 0 4px 12px var(--gold-foil-glow);
    background: linear-gradient(135deg, var(--gold-foil), var(--gold-foil-light));
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
}

.v5-hero-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
}

.v5-hero-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.v5-hero-name {
    font-size: 17px;
    font-weight: 700;
    font-family: var(--font-title);
    letter-spacing: 0.08em;
    color: var(--paper);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.v5-hero-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v5-hero-realm {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--gold-foil);
    font-family: var(--font-title);
    letter-spacing: 0.1em;
    text-shadow: 0 0 6px var(--gold-foil-glow);
    font-weight: 600;
}

.v5-hero-realm-dot {
    width: 5px;
    height: 5px;
    background: var(--gold-foil);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--gold-foil-glow);
    animation: v5-pulse 2s infinite;
}

@keyframes v5-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.v5-hero-exp-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.v5-hero-exp-track-sm {
    flex: 1;
    height: 4px;
    background: var(--ink-border);
    border-radius: 2px;
    overflow: hidden;
}

.v5-hero-exp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-foil), var(--gold-foil-light));
    border-radius: 2px;
    box-shadow: 0 0 3px var(--gold-foil-glow);
    transition: width 0.6s ease;
}

.v5-hero-exp-val {
    font-size: 9px;
    color: var(--paper-muted);
    font-family: var(--font-title);
    letter-spacing: 0.02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.v5-hero-currency {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    align-items: flex-end;
}

.v5-currency-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-title);
}

.v5-currency-icon {
    font-size: 14px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG 图标尺寸与货币配色（灵石=鎏金 / 仙晶=青碧） */
.v5-currency-icon svg {
    width: 15px;
    height: 15px;
}
.v5-currency-item.stone .v5-currency-icon {
    color: var(--gold-foil-light, #e8c56a);
}
.v5-currency-item.crystal .v5-currency-icon {
    color: #7ec8c2;
}

.v5-currency-val {
    font-size: 12px;
    font-weight: 600;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Hero 底部图标栏 */
.v5-hero-bottom-icons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ink-border);
}

.v5-hero-bottom-left,
.v5-hero-bottom-right {
    display: flex;
    gap: 8px;
}

.v5-hero-mini-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--paper-muted);
    transition: all 0.2s;
    position: relative;
    padding: 0;
}

.v5-hero-mini-btn:hover {
    color: var(--gold-foil);
    background: var(--gold-foil-dim);
}

.v5-mini-icon {
    font-size: 16px;
    line-height: 1;
}

/* SVG 功能钮图标尺寸 */
.v5-mini-icon svg {
    width: 18px;
    height: 18px;
}

.v5-badge-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    background: var(--vermillion);
    border-radius: 50%;
    box-shadow: 0 0 4px var(--vermillion-glow);
}

/* ===== V5 内容滚动区 ===== */
.v5-home-content {
    flex: 1;
    padding: 0 8px 80px;
    overflow-y: auto;
    min-height: 0;
}

/* ===== V5 修炼卡（C位） ===== */
.v5-cultivate-card {
    padding: 18px 14px 14px;
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--gold-foil) 10%, transparent) 0%, transparent 60%),
        color-mix(in srgb, var(--ink-elevated) 70%, transparent);
    border: 1px solid var(--ink-border);
    border-radius: 10px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}

.v5-cultivate-card:hover {
    border-color: color-mix(in srgb, var(--gold-foil) 30%, transparent);
    transform: translateY(-1px);
}

/* 山水装饰 */
.v5-cultivate-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60'%3E%3Cpath d='M0,60 L20,45 L40,55 L70,35 L100,50 L130,30 L160,45 L190,25 L220,40 L250,35 L280,50 L300,40 L300,60 Z' fill='rgba(200,168,112,0.03)'/%3E%3C/svg%3E") bottom center / 100% auto no-repeat;
    pointer-events: none;
    opacity: 0.6;
}

/* ===== 修炼法阵 V2 — 四层结构 ===== */
.v5-cultivate-core {
    width: 130px;
    height: 130px;
    margin: 0 auto 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* —— 第4层（最外）：光晕扩散环 —— */
.v5-cultivate-core::before {
    content: '';
    position: absolute;
    width: 130px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    /* 兜底：旧内核浏览器（不支持 color-mix）光晕背景 */
    background: radial-gradient(circle,
        transparent 52%,
        var(--gold-foil-dim) 60%,
        var(--gold-foil-glow) 65%,
        var(--gold-foil-dim) 72%,
        transparent 80%
    );
    /* 增强：支持 color-mix 的浏览器精细分层光晕 */
    background: radial-gradient(circle,
        transparent 52%,
        color-mix(in srgb, var(--gold-foil) 12%, transparent) 58%,
        color-mix(in srgb, var(--gold-foil) 25%, transparent) 62%,
        color-mix(in srgb, var(--gold-foil) 35%, transparent) 65%,
        color-mix(in srgb, var(--gold-foil) 25%, transparent) 68%,
        color-mix(in srgb, var(--gold-foil) 12%, transparent) 72%,
        transparent 80%
    );
    animation: v5-halo-pulse 4s ease-in-out infinite;
    pointer-events: none;
}

/* —— 第3层：符文/刻度环（逆时针） —— */
.v5-cultivate-core::after {
    content: '';
    position: absolute;
    width: 108px;
    height: 108px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    border-radius: 50%;
    /* 兜底：旧内核浏览器虚线描边 */
    border: 1px dashed var(--gold-foil-glow);
    /* 增强：现代浏览器精细透明度描边 */
    border: 1px dashed color-mix(in srgb, var(--gold-foil) 30%, transparent);
    background: repeating-conic-gradient(
        from 0deg,
        var(--gold-foil) 0deg 1.2deg,
        transparent 1.2deg 15deg
    );
    -webkit-mask: radial-gradient(circle, transparent 50px, #000 50px, #000 53px, transparent 53px);
    mask: radial-gradient(circle, transparent 50px, #000 50px, #000 53px, transparent 53px);
    animation: v5-rune-spin 20s linear infinite reverse;
    pointer-events: none;
}

/* —— 第2层：八卦符号环（顺时针） —— */
.v5-cultivate-inner {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v5-cultivate-inner::before {
    content: '';
    position: absolute;
    width: 84px;
    height: 84px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    border-radius: 50%;
    /* 兜底：旧内核浏览器（conic-gradient 需 69+）虚线刻度环，旋转呈现八卦刻度感 */
    border: 1.5px dashed var(--gold-foil-glow);
    -webkit-mask: radial-gradient(circle, transparent 37px, #000 37px, #000 41px, transparent 41px);
    mask: radial-gradient(circle, transparent 37px, #000 37px, #000 41px, transparent 41px);
    animation: v5-bagua-spin 12s linear infinite;
    pointer-events: none;
}

/* 增强：支持 conic-gradient 的浏览器（69+）精细八卦刻度环 */
@supports (background: conic-gradient(red, blue)) {
    .v5-cultivate-inner::before {
        border: none;
        background: conic-gradient(
            var(--gold-foil) 0deg 3deg, transparent 3deg 42deg,
            var(--gold-foil) 45deg 48deg, transparent 48deg 87deg,
            var(--gold-foil) 90deg 93deg, transparent 93deg 132deg,
            var(--gold-foil) 135deg 138deg, transparent 138deg 177deg,
            var(--gold-foil) 180deg 183deg, transparent 183deg 222deg,
            var(--gold-foil) 225deg 228deg, transparent 228deg 267deg,
            var(--gold-foil) 270deg 273deg, transparent 273deg 312deg,
            var(--gold-foil) 315deg 318deg, transparent 318deg 357deg
        );
    }
}

/* —— 第1层（最内）：太极阴阳鱼 —— */
.v5-cultivate-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(to right, var(--paper) 50%, var(--ink) 50%);
    position: relative;
    font-size: 0;
    animation: v5-taiji-breathe 4s ease-in-out infinite;
    /* 兜底：旧内核浏览器太极光晕 */
    box-shadow: 0 0 12px var(--gold-foil-glow);
    /* 增强：现代浏览器双层光晕 */
    box-shadow:
        0 0 12px var(--gold-foil-glow),
        0 0 24px color-mix(in srgb, var(--gold-foil) 15%, transparent);
    z-index: 1;
    flex-shrink: 0;
}

.v5-cultivate-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--paper);
    box-shadow: 0 30px 0 var(--ink);
}

.v5-cultivate-icon::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ink);
    box-shadow: 0 30px 0 var(--paper);
}

/* ===== 法阵 V2 动画 ===== */
@keyframes v5-halo-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.06);
        opacity: 1;
    }
}

@keyframes v5-rune-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes v5-bagua-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes v5-taiji-breathe {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.08);
        filter: brightness(1.15);
    }
}

/* ===== 法阵粒子上升效果 ===== */
.v5-cultivate-card::after {
    content: '';
    position: absolute;
    bottom: 90px;
    left: 0;
    right: 0;
    height: 60px;
    pointer-events: none;
    background:
        radial-gradient(2px 2px at 35% 100%, var(--gold-foil), transparent),
        radial-gradient(3px 3px at 45% 100%, var(--gold-foil), transparent),
        radial-gradient(2px 2px at 50% 100%, var(--gold-foil), transparent),
        radial-gradient(2.5px 2.5px at 58% 100%, var(--gold-foil), transparent),
        radial-gradient(2px 2px at 68% 100%, var(--gold-foil), transparent);
    background-repeat: no-repeat;
    animation: v5-particle-rise 5s ease-out infinite;
    opacity: 0;
}

@keyframes v5-particle-rise {
    0% {
        background-position:
            0 100%, 0 100%, 0 100%, 0 100%, 0 100%;
        opacity: 0;
    }
    15% {
        opacity: 0.8;
    }
    100% {
        background-position:
            0 -20%, 0 -40%, 0 -30%, 0 -50%, 0 -25%;
        opacity: 0;
    }
}

.v5-cultivate-state {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-title);
    letter-spacing: 0.2em;
    background: linear-gradient(180deg, var(--gold-foil-light) 0%, var(--gold-foil) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 12px var(--gold-foil-glow);
    filter: drop-shadow(0 0 4px var(--gold-foil-glow));
    animation: v5-state-glow 3s ease-in-out infinite;
}

@keyframes v5-state-glow {
    0%, 100% {
        filter: drop-shadow(0 0 4px var(--gold-foil-glow));
    }
    50% {
        /* 兜底：旧内核浏览器（帧内声明级联，不支持 color-mix 时丢弃增强行） */
        filter: drop-shadow(0 0 8px var(--gold-foil-glow));
        /* 增强：现代浏览器双层辉光 */
        filter: drop-shadow(0 0 8px var(--gold-foil-glow)) drop-shadow(0 0 12px color-mix(in srgb, var(--gold-foil) 30%, transparent));
    }
}

.v5-cultivate-speed {
    font-size: 11px;
    color: var(--paper-muted);
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.v5-cultivate-speed strong {
    color: var(--gold-foil-light);
    font-weight: 600;
}

/* 修炼卡进度条 */
.v5-cultivate-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.v5-cultivate-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.v5-cultivate-bar-label {
    width: 32px;
    font-size: 11px;
    color: var(--paper-muted);
    font-family: "KaiTi", "楷体", "STKaiti", serif;
    font-weight: 600;
    text-align: center;
    flex-shrink: 0;
    letter-spacing: 1px;
}

/* 气血：朱红 */
.v5-cultivate-bar-row:first-child .v5-cultivate-bar-label {
    color: #e07060;
    text-shadow: 0 0 6px rgba(224,112,96,0.3);
}
/* 真元：金色 */
.v5-cultivate-bar-row.qi .v5-cultivate-bar-label {
    color: var(--gold-foil);
    text-shadow: 0 0 6px var(--gold-foil-glow);
}
/* 灵气：青碧 */
.v5-cultivate-bar-row.lingqi .v5-cultivate-bar-label {
    color: #6fd0d8;
    text-shadow: 0 0 6px rgba(111,208,216,0.35);
}
/* 修为：浅金 */
.v5-cultivate-bar-row:last-child .v5-cultivate-bar-label {
    color: var(--gold-foil-light);
    text-shadow: 0 0 6px var(--gold-foil-glow);
}

.v5-cultivate-bar-track {
    flex: 1;
    height: 18px;
    background: var(--ink-border);
    border-radius: 9px;
    overflow: hidden;
    position: relative;
}

.v5-cultivate-bar-fill {
    height: 100%;
    border-radius: 9px;
    transition: width 0.6s ease;
    position: relative;
}

.v5-cultivate-bar-fill.qi {
    background: linear-gradient(90deg, var(--gold-foil), var(--gold-foil-light));
    box-shadow: 0 0 4px var(--gold-foil-glow);
}

.v5-cultivate-bar-fill.exp {
    background: linear-gradient(90deg, #b89860, var(--gold-foil-light));
}

.v5-cultivate-bar-fill.hp {
    background: linear-gradient(90deg, var(--hp-color, #d45040), #e07060);
}

.v5-cultivate-bar-fill.lingqi {
    background: linear-gradient(90deg, #3e9fa8, #6fd0d8);
    box-shadow: 0 0 4px rgba(111, 208, 216, 0.45);
}

.v5-cultivate-bar-val {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #fff;
    text-shadow:
        0 1px 2px rgba(0,0,0,0.7),
        0 0 1px rgba(0,0,0,0.5);
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 600;
    pointer-events: none;
    z-index: 2;
    line-height: 1;
}

/* 修炼模式切换 */
.v5-cultivate-mode {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    background: var(--gold-foil-dim);
    border-radius: 6px;
    padding: 3px;
    position: relative;
    z-index: 1;
}

.v5-mode-btn {
    flex: 1;
    padding: 6px 4px;
    font-size: 11px;
    color: var(--paper-muted);
    border-radius: 4px;
    font-family: var(--font-title);
    letter-spacing: 0.05em;
    text-align: center;
}

.v5-mode-btn.active {
    background: linear-gradient(135deg, var(--gold-foil), var(--gold-foil-light));
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 2px 6px var(--gold-foil-glow);
}

.v5-cultivate-btn-hint {
    font-size: 11px;
    color: var(--gold-foil);
    opacity: 0.7;
    position: relative;
    z-index: 1;
    letter-spacing: 0.05em;
    font-family: var(--font-title);
}

/* ===== V5 灵兽卡片 ===== */
.v5-pet-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--ink-elevated) 70%, transparent);
    border: 1px solid var(--ink-border);
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.v5-pet-card:hover {
    border-color: color-mix(in srgb, var(--gold-foil) 25%, transparent);
    transform: translateY(-1px);
}

.v5-pet-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--gold-foil) 30%, transparent),
        color-mix(in srgb, var(--gold-foil) 10%, transparent));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid color-mix(in srgb, var(--gold-foil) 25%, transparent);
    position: relative;
}

.v5-pet-icon {
    font-size: 22px;
}

/* ===== 灵兽 SVG 图标样式 ===== */
.v5-pet-icon-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--gold-foil);
    font-size: 0;
}

.v5-pet-svg {
    width: 32px;
    height: 32px;
    display: block;
    filter: drop-shadow(0 0 4px var(--gold-foil-glow));
    animation: v5-pet-svg-glow 3s ease-in-out infinite;
}

@keyframes v5-pet-svg-glow {
    0%, 100% {
        filter: drop-shadow(0 0 3px var(--gold-foil-glow));
    }
    50% {
        /* 兜底：旧内核浏览器 */
        filter: drop-shadow(0 0 8px var(--gold-foil-glow));
        /* 增强：现代浏览器双层辉光 */
        filter: drop-shadow(0 0 8px var(--gold-foil-glow)) drop-shadow(0 0 12px color-mix(in srgb, var(--gold-foil) 30%, transparent));
    }
}

/* ===== 灵兽卡片空态样式 ===== */
.v5-pet-card.pet-empty {
    /* 空态时的视觉调整 */
}

.v5-pet-card.pet-empty .v5-pet-avatar {
    opacity: 0.35;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--paper-muted) 20%, transparent),
        color-mix(in srgb, var(--paper-muted) 8%, transparent));
    border-color: color-mix(in srgb, var(--paper-muted) 20%, transparent);
}

.v5-pet-card.pet-empty .v5-pet-icon-svg {
    color: var(--paper-muted);
}

.v5-pet-card.pet-empty .v5-pet-svg {
    animation: none;
    filter: none;
    width: 28px;
    height: 28px;
}

.v5-pet-card.pet-empty .v5-pet-name {
    color: var(--paper-muted);
}

.v5-pet-card.pet-empty .v5-pet-stage {
    display: none;
}

.v5-pet-empty-action {
    margin-top: 6px;
}

.v5-pet-empty-btn {
    display: inline-block;
    padding: 3px 10px;
    background: linear-gradient(135deg, var(--gold-foil), var(--gold-foil-light));
    color: var(--ink);
    font-size: 10px;
    font-weight: 600;
    font-family: var(--font-title);
    letter-spacing: 0.05em;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 2px 6px var(--gold-foil-glow);
    transition: all 0.2s;
    border: none;
}

.v5-pet-empty-btn:active {
    transform: scale(0.95);
}

/* ===== 灵兽卡片出战状态 ===== */
.v5-pet-status-tag {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    font-family: var(--font-title);
    letter-spacing: 0.05em;
    margin-left: auto;
}

.v5-pet-status-tag.active {
    background: color-mix(in srgb, var(--jade) 20%, transparent);
    color: var(--jade);
    border: 1px solid color-mix(in srgb, var(--jade) 40%, transparent);
}

.v5-pet-status-tag.rest {
    background: color-mix(in srgb, var(--paper-muted) 15%, transparent);
    color: var(--paper-muted);
    border: 1px solid var(--ink-border);
}

/* ===== 灵兽属性简要展示 ===== */
.v5-pet-stats-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-size: 10px;
    color: var(--paper-muted);
}

.v5-pet-stat-item {
    display: flex;
    align-items: center;
    gap: 2px;
}

.v5-pet-stat-item .pet-stat-val {
    color: var(--paper-secondary);
    font-weight: 500;
    font-family: var(--font-num);
}

.v5-pet-stat-item .pet-stat-label {
    opacity: 0.7;
}

.v5-pet-avatar::after {
    content: '';
    position: absolute;
    /* 兜底：旧内核浏览器（inset 需 87+）四向定位 */
    top: -3px; right: -3px; bottom: -3px; left: -3px;
    inset: -3px;
    border-radius: 50%;
    /* 兜底：旧内核浏览器 */
    border: 1px solid var(--gold-foil-glow);
    /* 增强：现代浏览器 */
    border: 1px solid color-mix(in srgb, var(--gold-foil) 15%, transparent);
    animation: v5-petPulse 3s ease-in-out infinite;
}

@keyframes v5-petPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 1; }
}

.v5-pet-info {
    flex: 1;
    min-width: 0;
}

.v5-pet-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.v5-pet-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--paper);
    font-family: var(--font-title);
    letter-spacing: 0.05em;
}

.v5-pet-stage {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--gold-foil) 12%, transparent);
    color: var(--gold-foil);
    font-family: var(--font-title);
}

.v5-pet-level {
    font-size: 10px;
    color: var(--paper-muted);
    margin-bottom: 4px;
}

.v5-pet-exp-track {
    height: 4px;
    background: var(--ink-border);
    border-radius: 2px;
    overflow: hidden;
}

.v5-pet-exp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--jade), var(--jade-light));
    border-radius: 2px;
    transition: width 0.6s ease;
}

.v5-pet-arrow {
    color: var(--paper-muted);
    font-size: 14px;
    flex-shrink: 0;
}

/* ===== V5 数据+快捷 合并卡 ===== */
.v5-combo-card {
    background: color-mix(in srgb, var(--ink-elevated) 70%, transparent);
    border: 1px solid var(--ink-border);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.v5-combo-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 10px 4px;
    border-bottom: 1px solid var(--ink-border);
}

.v5-stat-item {
    text-align: center;
    position: relative;
}

.v5-stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--ink-border);
}

.v5-stat-value {
    font-size: 17px;
    font-weight: 700;
    color: var(--paper);
    font-family: var(--font-title);
    margin-bottom: 1px;
    font-variant-numeric: tabular-nums;
}

.v5-stat-label {
    font-size: 10px;
    color: var(--paper-muted);
    font-family: var(--font-title);
    letter-spacing: 0.08em;
}

.v5-combo-quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px 4px;
}

.v5-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 2px;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 6px;
}

.v5-quick-item:hover {
    background: var(--gold-foil-dim);
}

.v5-quick-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gold-foil-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-foil);
    transition: all 0.2s;
    font-size: 15px;
}

.v5-quick-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.v5-quick-item:hover .v5-quick-icon {
    background: linear-gradient(135deg, var(--gold-foil), var(--gold-foil-light));
    color: var(--ink);
}

.v5-quick-label {
    font-size: 10px;
    color: var(--paper-secondary);
    font-family: var(--font-title);
}

.v5-quick-item:hover .v5-quick-label {
    color: var(--gold-foil);
}

/* ===== V5 任务卡片 ===== */
.v5-task-card {
    background: color-mix(in srgb, var(--ink-elevated) 70%, transparent);
    border: 1px solid var(--ink-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.v5-task-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ink-border);
}

.v5-task-header::before {
    content: '';
    width: 3px;
    height: 12px;
    background: linear-gradient(180deg, var(--gold-foil-light), var(--gold-foil));
    border-radius: 1px;
}

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

.v5-task-count {
    font-size: 10px;
    color: var(--paper-muted);
    margin-left: auto;
}

.v5-task-count strong {
    color: var(--gold-foil);
    font-weight: 600;
}

.v5-task-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ===== 任务页面（page-task） ===== */
.task-page-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 80px;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.task-page-list .v5-task-item {
    padding: 10px 12px;
}

.task-page-list .v5-task-group-title {
    font-size: 13px;
    margin: 6px 0 2px;
}

/* 任务页右侧面板标题 */
.task-side-title {
    font-size: 11px;
    color: var(--paper-muted);
    padding: 4px 8px 2px;
    letter-spacing: 1px;
}

.pill-realm-item.locked {
    opacity: .45;
    cursor: not-allowed;
}

/* 境界门槛标签 */
.task-realm-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    font-size: 10px;
    line-height: 16px;
    border: 1px solid var(--gold-foil);
    color: var(--gold-foil);
    border-radius: 3px;
    vertical-align: 1px;
}

/* 活跃点面板 */
.task-activity-panel {
    border: 1px dashed var(--gold-foil);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 4px 0 8px;
    background: rgba(212, 175, 55, 0.06);
}

.task-activity-title {
    font-size: 12px;
    color: var(--gold-foil);
    margin-bottom: 6px;
}

.task-activity-title strong {
    font-size: 15px;
}

.task-activity-tiers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.task-activity-tiers .v5-task-claim-btn {
    font-size: 11px;
    padding: 3px 8px;
}

.v5-task-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    background: var(--gold-foil-dim);
    border-radius: 5px;
}

.v5-task-item.done .v5-task-name {
    text-decoration: line-through;
    color: var(--paper-muted);
}

.v5-task-status {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v5-task-status.done {
    background: var(--jade);
    border-radius: 50%;
    color: var(--ink);
    font-size: 9px;
    font-weight: bold;
}

.v5-task-status.progress {
    border: 2px solid var(--gold-foil);
    border-radius: 50%;
    background: transparent;
}

.v5-task-info {
    flex: 1;
    min-width: 0;
}

.v5-task-name {
    font-size: 12px;
    color: var(--paper);
}

.v5-task-progress-text {
    font-size: 10px;
    color: var(--paper-muted);
}

.v5-task-claim-btn {
    padding: 3px 10px;
    font-size: 11px;
    background: linear-gradient(135deg, var(--jade), var(--jade-light));
    color: var(--ink);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    flex-shrink: 0;
    box-shadow: 0 2px 5px var(--jade-glow);
}

.v5-task-progress-bar {
    width: 40px;
    height: 4px;
    background: var(--ink-border);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

.v5-task-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-foil), var(--gold-foil-light));
    border-radius: 2px;
}

.v5-task-more {
    text-align: center;
    padding-top: 6px;
    font-size: 11px;
    color: var(--gold-foil);
    opacity: 0.7;
    cursor: pointer;
    border-top: 1px solid var(--ink-border);
    margin-top: 6px;
}

.v5-task-more:hover {
    opacity: 1;
}

/* ===== V5 活动横幅 ===== */
.v5-activity-banner {
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 10px;
}

.v5-activity-banner::-webkit-scrollbar {
    display: none;
}

.v5-activity-track {
    display: flex;
    gap: 8px;
    width: max-content;
}

.v5-activity-card {
    flex-shrink: 0;
    width: 130px;
    height: 56px;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--ink-border);
    background: color-mix(in srgb, var(--ink-elevated) 70%, transparent);
}

.v5-activity-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--gold-foil) 25%, transparent);
}

.v5-activity-card.type-sign {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--vermillion) 15%, transparent),
        color-mix(in srgb, var(--gold-foil) 10%, transparent));
    border-color: color-mix(in srgb, var(--vermillion) 30%, transparent);
}

.v5-activity-card.type-event {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--jade) 15%, transparent),
        color-mix(in srgb, var(--gold-foil) 10%, transparent));
    border-color: color-mix(in srgb, var(--jade) 30%, transparent);
}

.v5-activity-card.type-gift {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--gold-foil) 15%, transparent),
        color-mix(in srgb, var(--jade) 8%, transparent));
    border-color: color-mix(in srgb, var(--gold-foil) 25%, transparent);
}

.v5-activity-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    background: var(--vermillion);
    transform: rotate(45deg) translate(8px, -8px);
}

.v5-activity-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--paper);
    font-family: var(--font-title);
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.v5-activity-desc {
    font-size: 10px;
    color: var(--paper-muted);
}

/* ===== 响应式：桌面端适配 ===== */
@media (min-width: 768px) {
    #page-home .v5-home-content {
        padding-bottom: 80px;
    }
}

/* ===== 每日签到弹窗样式 ===== */

/* 签到进度弹窗主体 */
.signin-modal-body {
    padding: 0 !important;
}

.signin-modal-wrap {
    padding: 4px 0;
}

.signin-modal-tip {
    text-align: center;
    font-size: 12px;
    color: var(--paper-muted);
    margin-bottom: 12px;
    font-family: var(--font-title);
    letter-spacing: 0.05em;
}

.signin-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.signin-day-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 2px;
    border-radius: 6px;
    background: var(--gold-foil-dim);
    border: 1px solid var(--ink-border);
    transition: all 0.2s;
    position: relative;
}

.signin-day-item.claimed {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--gold-foil) 20%, transparent),
        color-mix(in srgb, var(--gold-foil) 8%, transparent));
    border-color: color-mix(in srgb, var(--gold-foil) 40%, transparent);
}

.signin-day-item.today {
    border-color: var(--gold-foil);
    box-shadow: 0 0 8px var(--gold-foil-glow);
}

.signin-day-num {
    font-size: 10px;
    color: var(--paper-muted);
    font-family: var(--font-title);
}

.signin-day-item.claimed .signin-day-num {
    color: var(--gold-foil);
}

.signin-day-reward {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    min-height: 32px;
    justify-content: center;
}

.signin-reward-gold {
    color: var(--gold-foil-light);
    font-weight: 600;
    font-size: 11px;
}

.signin-day-item.claimed .signin-reward-gold {
    color: var(--gold-foil);
}

.signin-reward-pill {
    font-size: 16px;
}

.signin-day-check {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ink-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: transparent;
    font-weight: bold;
}

.signin-day-item.claimed .signin-day-check {
    background: var(--jade);
    color: var(--ink);
}

/* 签到奖励弹窗主体 */
.signin-reward-body {
    padding: 0 !important;
    text-align: center;
}

.signin-reward-modal {
    position: relative;
    padding: 8px 0 4px;
}

.signin-reward-glow {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    /* 兜底：旧内核浏览器签到光晕 */
    background: radial-gradient(circle, var(--gold-foil-glow) 0%, transparent 70%);
    /* 增强：现代浏览器精细光晕 */
    background: radial-gradient(circle,
        color-mix(in srgb, var(--gold-foil) 25%, transparent) 0%,
        transparent 70%);
    pointer-events: none;
    animation: signin-glow-pulse 3s ease-in-out infinite;
}

@keyframes signin-glow-pulse {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

.signin-reward-title {
    position: relative;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.signin-reward-day {
    font-size: 14px;
    color: var(--gold-foil);
    font-family: var(--font-title);
    letter-spacing: 0.1em;
    font-weight: 600;
}

.signin-reward-label {
    font-size: 18px;
    color: var(--paper);
    font-family: var(--font-title);
    letter-spacing: 0.15em;
    font-weight: 700;
    background: linear-gradient(180deg, var(--gold-foil-light) 0%, var(--gold-foil) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.signin-reward-items {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.signin-reward-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.signin-reward-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    /* 兜底：旧内核浏览器奖励图标底色与描边 */
    background: linear-gradient(135deg, var(--gold-foil-glow), var(--gold-foil-dim));
    border: 2px solid var(--gold-foil-glow);
    /* 增强：现代浏览器精细透明度 */
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--gold-foil) 25%, transparent),
        color-mix(in srgb, var(--gold-foil) 10%, transparent));
    border: 2px solid color-mix(in srgb, var(--gold-foil) 40%, transparent);
    box-shadow: 0 0 16px var(--gold-foil-glow);
    animation: signin-icon-bounce 1.5s ease-in-out infinite;
}

.signin-reward-icon.gold {
    box-shadow: 0 0 16px var(--gold-foil-glow);
}

.signin-reward-icon.low-pill {
    /* 兜底：旧内核浏览器（低阶丹药蓝色系） */
    border-color: rgba(100, 181, 246, 0.5);
    box-shadow: 0 0 16px rgba(100, 181, 246, 0.4);
    /* 增强：现代浏览器 */
    border-color: color-mix(in srgb, #64b5f6 50%, transparent);
    box-shadow: 0 0 16px color-mix(in srgb, #64b5f6 40%, transparent);
}

.signin-reward-icon.mid-pill {
    /* 兜底：旧内核浏览器（中阶丹药紫色系） */
    border-color: rgba(186, 104, 200, 0.5);
    box-shadow: 0 0 16px rgba(186, 104, 200, 0.4);
    /* 增强：现代浏览器 */
    border-color: color-mix(in srgb, #ba68c8 50%, transparent);
    box-shadow: 0 0 16px color-mix(in srgb, #ba68c8 40%, transparent);
}

@keyframes signin-icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.signin-reward-name {
    font-size: 12px;
    color: var(--paper);
    font-family: var(--font-title);
    letter-spacing: 0.05em;
}

.signin-reward-progress {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--ink-border);
    border-bottom: 1px solid var(--ink-border);
}

.signin-progress-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ink-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--paper-muted);
    font-weight: 600;
    font-family: var(--font-num);
    transition: all 0.3s;
}

.signin-progress-dot.claimed {
    background: linear-gradient(135deg, var(--gold-foil), var(--gold-foil-light));
    color: var(--ink);
    box-shadow: 0 0 8px var(--gold-foil-glow);
}

.signin-progress-dot.today {
    transform: scale(1.15);
    box-shadow: 0 0 12px var(--gold-foil-glow);
}

.signin-reward-tip {
    font-size: 11px;
    color: var(--paper-muted);
    margin-top: 8px;
    font-family: var(--font-title);
    letter-spacing: 0.05em;
}

/* ============================================================
   统一红点系统样式（.rd- 前缀）
   设计理念：朱砂为魂 · 醒目而不刺眼
   ============================================================ */

/* 红点容器定位基类 */
.rd-dot-wrap {
    position: absolute;
    pointer-events: none;
    z-index: 10;
}

/* 位置变体 */
.rd-pos-top-right {
    top: -2px;
    right: -2px;
    transform: translate(30%, -30%);
}
.rd-pos-top-left {
    top: -2px;
    left: -2px;
    transform: translate(-30%, -30%);
}
.rd-pos-bottom-right {
    bottom: -2px;
    right: -2px;
    transform: translate(30%, 30%);
}

/* —— 小圆点红点 —— */
.rd-dot-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vermillion-light), var(--vermillion));
    box-shadow:
        0 0 4px var(--vermillion-glow),
        0 0 8px color-mix(in srgb, var(--vermillion) 40%, transparent);
    animation: rd-dot-pulse 2s ease-in-out infinite;
}

@keyframes rd-dot-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.85;
    }
}

/* —— 数字角标红点 —— */
.rd-dot-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--vermillion-light), var(--vermillion));
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    font-family: var(--font-num);
    box-shadow:
        0 0 4px var(--vermillion-glow),
        0 0 8px color-mix(in srgb, var(--vermillion) 30%, transparent);
    white-space: nowrap;
}

/* —— 底部导航红点（尺寸微调） —— */
.nav-item .rd-dot-wrap {
    top: -1px;
    right: -4px;
}
.nav-item .rd-dot-dot {
    width: 7px;
    height: 7px;
}
.nav-item .rd-dot-num {
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: 9px;
    border-radius: 7px;
}

/* —— 任务卡片标题红点 —— */
.v5-task-header {
    position: relative;
}
.v5-task-header .rd-dot-wrap {
    position: static;
    transform: none;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: auto;
}
.v5-task-claimable-text {
    font-size: 10px;
    color: var(--vermillion);
    font-family: var(--font-title);
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* —— 活动横幅角标 V2（动态文字） —— */
.v5-activity-badge-v2 {
    position: absolute;
    top: 4px;
    right: -16px;
    width: 56px;
    padding: 2px 0;
    background: linear-gradient(135deg, var(--vermillion), var(--vermillion-light));
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    font-family: var(--font-title);
    text-align: center;
    letter-spacing: 0.08em;
    transform: rotate(45deg);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--vermillion) 40%, transparent);
    animation: rd-badge-float 3s ease-in-out infinite;
}

@keyframes rd-badge-float {
    0%, 100% { transform: rotate(45deg) translateY(0); }
    50% { transform: rotate(45deg) translateY(-2px); }
}

/* 活动角标 - 新活动 */
.v5-activity-badge-v2.badge-new {
    background: linear-gradient(135deg, var(--vermillion), var(--vermillion-light));
}
/* 活动角标 - 限时 */
.v5-activity-badge-v2.badge-limited {
    background: linear-gradient(135deg, var(--badge-limited-color), color-mix(in srgb, var(--badge-limited-color) 65%, #fff));
    box-shadow: 0 2px 6px color-mix(in srgb, var(--badge-limited-color) 40%, transparent);
}
/* 活动角标 - 热门 */
.v5-activity-badge-v2.badge-hot {
    background: linear-gradient(135deg, var(--badge-hot-color), color-mix(in srgb, var(--badge-hot-color) 60%, #fff));
}

/* —— 灵兽卡片红点 —— */
.v5-pet-card .rd-dot-wrap {
    top: 4px;
    right: 4px;
}

/* ============================================================
   Hero 区三项升级：战斗力视觉 / 头像框境界 / 境界仪式感
   ============================================================ */

/* 数据合并卡战力升级样式 */
.v5-stat-item.power-item .v5-stat-value {
    background: linear-gradient(180deg, var(--gold-foil-light) 0%, var(--gold-foil) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 19px;
    font-weight: 700;
    filter: drop-shadow(0 0 3px var(--gold-foil-glow));
    position: relative;
    display: inline-block;
}

.v5-stat-item.power-item .v5-stat-label {
    color: var(--gold-foil);
    font-weight: 600;
    letter-spacing: 0.1em;
}

.v5-stat-item.power-item .v5-stat-label::before {
    content: '⚔ ';
    font-size: 9px;
}

/* ===== 优化2：头像框境界系统 ===== */

/* 头像容器相对定位（为了角饰等伪元素） */
.v5-hero-avatar {
    position: relative;
    transition: all 0.3s ease;
}

/* —— 第1档：炼气期（单圈金边，简洁） —— */
.avatar-frame-refine {
    /* 兜底：旧内核浏览器 */
    border: 2px solid var(--gold-foil-glow);
    /* 增强：现代浏览器 */
    border: 2px solid color-mix(in srgb, var(--gold-foil) 50%, transparent);
    box-shadow: 0 2px 10px var(--gold-foil-glow);
}

/* 所有带外圈特效的头像框：取消裁剪，让外圈光环正常显示 */
.avatar-frame-foundation,
.avatar-frame-golden,
.avatar-frame-nascent,
.avatar-frame-spirit {
    overflow: visible;
}

/* —— 第2档：筑基期（双圈金边 + 四角微光） —— */
.avatar-frame-foundation {
    /* 兜底：旧内核浏览器 */
    border: 2px solid var(--gold-foil-glow);
    box-shadow:
        0 0 0 1px var(--gold-foil-dim),
        0 2px 12px var(--gold-foil-glow);
    /* 增强：现代浏览器 */
    border: 2px solid color-mix(in srgb, var(--gold-foil) 65%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--gold-foil) 25%, transparent),
        0 2px 12px var(--gold-foil-glow);
}

.avatar-frame-foundation::before {
    content: '';
    position: absolute;
    /* 兜底：旧内核浏览器（inset 需 87+）四向定位 */
    top: -3px; right: -3px; bottom: -3px; left: -3px;
    inset: -3px;
    border-radius: 50%;
    /* 兜底：旧内核浏览器 */
    border: 1px dashed var(--gold-foil-glow);
    /* 增强：现代浏览器 */
    border: 1px dashed color-mix(in srgb, var(--gold-foil) 30%, transparent);
    pointer-events: none;
    animation: v5-frame-spin-slow 30s linear infinite;
}

/* 筑基四角饰点 */
.avatar-frame-foundation::after {
    content: '';
    position: absolute;
    /* 兜底：旧内核浏览器（inset 需 87+）四向定位 */
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(2px 2px at 50% 0%, var(--gold-foil), transparent 70%),
        radial-gradient(2px 2px at 100% 50%, var(--gold-foil), transparent 70%),
        radial-gradient(2px 2px at 50% 100%, var(--gold-foil), transparent 70%),
        radial-gradient(2px 2px at 0% 50%, var(--gold-foil), transparent 70%);
    filter: drop-shadow(0 0 3px var(--gold-foil-glow));
}

/* —— 第3档：金丹期（三层边框 + 祥云角饰 + 呼吸光效） —— */
.avatar-frame-golden {
    /* 兜底：旧内核浏览器 */
    border: 2px solid var(--gold-foil-glow);
    box-shadow:
        0 0 0 1px var(--gold-foil-glow),
        0 0 0 4px var(--gold-foil-dim),
        0 2px 16px var(--gold-foil-glow);
    /* 增强：现代浏览器 */
    border: 2px solid color-mix(in srgb, var(--gold-foil) 80%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--gold-foil) 35%, transparent),
        0 0 0 4px color-mix(in srgb, var(--gold-foil) 12%, transparent),
        0 2px 16px var(--gold-foil-glow);
    animation: v5-frame-breathe 4s ease-in-out infinite;
}

/* 金丹期内层符文环 */
.avatar-frame-golden::before {
    content: '';
    position: absolute;
    /* 兜底：旧内核浏览器（inset 需 87+）四向定位 */
    top: -5px; right: -5px; bottom: -5px; left: -5px;
    inset: -5px;
    border-radius: 50%;
    /* 兜底：旧内核浏览器 */
    border: 1px dashed var(--gold-foil-glow);
    /* 增强：现代浏览器 */
    border: 1px dashed color-mix(in srgb, var(--gold-foil) 40%, transparent);
    pointer-events: none;
    animation: v5-frame-spin-slow 25s linear infinite reverse;
}

/* 金丹期祥云角饰 */
.avatar-frame-golden::after {
    content: '';
    position: absolute;
    /* 兜底：旧内核浏览器（inset 需 87+）四向定位 */
    top: -7px; right: -7px; bottom: -7px; left: -7px;
    inset: -7px;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(3px 3px at 50% 0%, var(--gold-foil-light), transparent 70%),
        radial-gradient(3px 3px at 100% 50%, var(--gold-foil-light), transparent 70%),
        radial-gradient(3px 3px at 50% 100%, var(--gold-foil-light), transparent 70%),
        radial-gradient(3px 3px at 0% 50%, var(--gold-foil-light), transparent 70%);
    filter: drop-shadow(0 0 5px var(--gold-foil-glow));
    animation: v5-frame-glow 3s ease-in-out infinite;
}

/* —— 第4档：元婴期（华丽多层 + 流光动画 + 符文装饰） —— */
.avatar-frame-nascent {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--ink-surface), var(--ink-surface)) padding-box,
        linear-gradient(135deg, var(--gold-foil-light), var(--gold-foil), var(--gold-foil-light)) border-box;
    /* 兜底：旧内核浏览器 */
    box-shadow:
        0 0 0 2px var(--gold-foil-dim),
        0 0 0 5px var(--gold-foil-dim),
        0 2px 20px var(--gold-foil-glow);
    /* 增强：现代浏览器 */
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--gold-foil) 20%, transparent),
        0 0 0 5px color-mix(in srgb, var(--gold-foil) 10%, transparent),
        0 2px 20px var(--gold-foil-glow);
    animation: v5-frame-breathe 3.5s ease-in-out infinite;
}

/* 元婴期流光外层 */
.avatar-frame-nascent::before {
    content: '';
    position: absolute;
    /* 兜底：旧内核浏览器（inset 需 87+）四向定位 */
    top: -6px; right: -6px; bottom: -6px; left: -6px;
    inset: -6px;
    border-radius: 50%;
    pointer-events: none;
    /* 兜底：旧内核浏览器（conic-gradient 需 69+）弧光旋转 —— 单侧亮弧绕圈 */
    border: 2px solid transparent;
    border-top-color: var(--gold-foil-light);
    border-right-color: var(--gold-foil);
    -webkit-mask: radial-gradient(circle, transparent 55%, #000 56%, #000 62%, transparent 63%);
    mask: radial-gradient(circle, transparent 55%, #000 56%, #000 62%, transparent 63%);
    animation: v5-frame-flow 6s linear infinite;
}

/* 增强：支持 conic-gradient 的浏览器（69+）平滑渐隐流光 */
@supports (background: conic-gradient(red, blue)) {
    .avatar-frame-nascent::before {
        border-color: transparent;
        /* conic 流光（纯主题变量版） */
        background: conic-gradient(
            from 0deg,
            transparent 0deg,
            var(--gold-foil-light) 40deg,
            var(--gold-foil) 60deg,
            var(--gold-foil-light) 80deg,
            transparent 120deg,
            transparent 360deg
        );
        /* 增强：支持 color-mix 的浏览器（111+）精细渐隐流光 */
        background: conic-gradient(
            from 0deg,
            transparent 0deg,
            color-mix(in srgb, var(--gold-foil) 50%, transparent) 40deg,
            var(--gold-foil-light) 60deg,
            color-mix(in srgb, var(--gold-foil) 50%, transparent) 80deg,
            transparent 120deg,
            transparent 360deg
        );
    }
}

/* 元婴期符文点装饰 */
.avatar-frame-nascent::after {
    content: '';
    position: absolute;
    /* 兜底：旧内核浏览器（inset 需 87+）四向定位 */
    top: -8px; right: -8px; bottom: -8px; left: -8px;
    inset: -8px;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(3px 3px at 50% 0%, var(--gold-foil-light), transparent 70%),
        radial-gradient(3px 3px at 85.35% 14.65%, var(--gold-foil-light), transparent 70%),
        radial-gradient(3px 3px at 100% 50%, var(--gold-foil-light), transparent 70%),
        radial-gradient(3px 3px at 85.35% 85.35%, var(--gold-foil-light), transparent 70%),
        radial-gradient(3px 3px at 50% 100%, var(--gold-foil-light), transparent 70%),
        radial-gradient(3px 3px at 14.65% 85.35%, var(--gold-foil-light), transparent 70%),
        radial-gradient(3px 3px at 0% 50%, var(--gold-foil-light), transparent 70%),
        radial-gradient(3px 3px at 14.65% 14.65%, var(--gold-foil-light), transparent 70%);
    filter: drop-shadow(0 0 5px var(--gold-foil-glow));
    animation: v5-frame-glow 2.5s ease-in-out infinite;
}

/* —— 第5档：化神期及以上（至尊级 + 金色粒子环绕 + 动态光晕） —— */
.avatar-frame-spirit {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--ink-surface), var(--ink-surface)) padding-box,
        linear-gradient(135deg, var(--gold-foil-light), var(--gold-foil), var(--gold-foil-light), var(--gold-foil)) border-box;
    /* 兜底：旧内核浏览器 */
    box-shadow:
        0 0 0 2px var(--gold-foil-glow),
        0 0 0 6px var(--gold-foil-dim),
        0 0 25px var(--gold-foil-glow),
        0 0 40px var(--gold-foil-glow);
    /* 增强：现代浏览器 */
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--gold-foil) 30%, transparent),
        0 0 0 6px color-mix(in srgb, var(--gold-foil) 12%, transparent),
        0 0 25px var(--gold-foil-glow),
        0 0 40px color-mix(in srgb, var(--gold-foil) 20%, transparent);
    animation: v5-frame-breathe 3s ease-in-out infinite;
}

/* 化神期内层光环 */
.avatar-frame-spirit::before {
    content: '';
    position: absolute;
    /* 兜底：旧内核浏览器（inset 需 87+）四向定位 */
    top: -8px; right: -8px; bottom: -8px; left: -8px;
    inset: -8px;
    border-radius: 50%;
    pointer-events: none;
    /* 兜底：旧内核浏览器（conic-gradient 需 69+）双弧旋转 —— 上下两段亮弧绕圈 */
    border: 2px solid transparent;
    border-top-color: var(--gold-foil-light);
    border-bottom-color: var(--gold-foil);
    -webkit-mask: radial-gradient(circle, transparent 55%, #000 56%, #000 65%, transparent 66%);
    mask: radial-gradient(circle, transparent 55%, #000 56%, #000 65%, transparent 66%);
    animation: v5-frame-flow 5s linear infinite;
}

/* 增强：支持 conic-gradient 的浏览器（69+）双段平滑流光 */
@supports (background: conic-gradient(red, blue)) {
    .avatar-frame-spirit::before {
        border-color: transparent;
        /* conic 双段流光（纯主题变量版） */
        background: conic-gradient(
            from 0deg,
            transparent 0deg,
            var(--gold-foil-light) 30deg,
            var(--gold-foil) 50deg,
            var(--gold-foil-light) 70deg,
            transparent 100deg,
            transparent 180deg,
            var(--gold-foil) 210deg,
            var(--gold-foil-light) 230deg,
            var(--gold-foil) 250deg,
            transparent 280deg,
            transparent 360deg
        );
        /* 增强：支持 color-mix 的浏览器（111+）精细渐隐双段流光 */
        background: conic-gradient(
            from 0deg,
            transparent 0deg,
            color-mix(in srgb, var(--gold-foil) 40%, transparent) 30deg,
            var(--gold-foil-light) 50deg,
            color-mix(in srgb, var(--gold-foil) 40%, transparent) 70deg,
            transparent 100deg,
            transparent 180deg,
            color-mix(in srgb, var(--gold-foil) 30%, transparent) 210deg,
            var(--gold-foil) 230deg,
            color-mix(in srgb, var(--gold-foil) 30%, transparent) 250deg,
            transparent 280deg,
            transparent 360deg
        );
    }
}

/* 化神期外层粒子光晕 */
.avatar-frame-spirit::after {
    content: '';
    position: absolute;
    /* 兜底：旧内核浏览器（inset 需 87+）四向定位 */
    top: -12px; right: -12px; bottom: -12px; left: -12px;
    inset: -12px;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(2px 2px at 50% 0%, var(--gold-foil-light), transparent 70%),
        radial-gradient(2.5px 2.5px at 90% 20%, var(--gold-foil), transparent 70%),
        radial-gradient(2px 2px at 100% 50%, var(--gold-foil-light), transparent 70%),
        radial-gradient(2.5px 2.5px at 85% 80%, var(--gold-foil), transparent 70%),
        radial-gradient(2px 2px at 50% 100%, var(--gold-foil-light), transparent 70%),
        radial-gradient(2.5px 2.5px at 15% 85%, var(--gold-foil), transparent 70%),
        radial-gradient(2px 2px at 0% 50%, var(--gold-foil-light), transparent 70%),
        radial-gradient(2.5px 2.5px at 20% 15%, var(--gold-foil), transparent 70%);
    filter: drop-shadow(0 0 6px var(--gold-foil-glow));
    animation: v5-spirit-particle 4s ease-in-out infinite;
}

/* 头像轻微呼吸动画（所有境界） */
.v5-hero-avatar-img {
    animation: v5-avatar-breathe 4s ease-in-out infinite;
}

/* ===== 头像框动画关键帧 ===== */
@keyframes v5-frame-breathe {
    0%, 100% {
        /* 兜底：旧内核浏览器（帧内声明级联，color-mix 失败时保留本行） */
        box-shadow:
            0 0 0 1px var(--gold-foil-glow),
            0 0 0 4px var(--gold-foil-dim),
            0 2px 16px var(--gold-foil-glow);
        /* 增强：现代浏览器 */
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--gold-foil) 35%, transparent),
            0 0 0 4px color-mix(in srgb, var(--gold-foil) 12%, transparent),
            0 2px 16px var(--gold-foil-glow);
    }
    50% {
        /* 兜底：旧内核浏览器 */
        box-shadow:
            0 0 0 1px var(--gold-foil-glow),
            0 0 0 5px var(--gold-foil-dim),
            0 2px 22px var(--gold-foil-glow);
        /* 增强：现代浏览器 */
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--gold-foil) 50%, transparent),
            0 0 0 5px color-mix(in srgb, var(--gold-foil) 18%, transparent),
            0 2px 22px color-mix(in srgb, var(--gold-foil) 50%, transparent);
    }
}

@keyframes v5-frame-spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes v5-frame-glow {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

@keyframes v5-frame-flow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes v5-spirit-particle {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.08) rotate(180deg);
    }
}

@keyframes v5-avatar-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

/* ===== 突破在即：头像框特殊脉动光效 ===== */
.avatar-frame-breakthrough {
    animation: v5-breakthrough-pulse 1.2s ease-in-out infinite !important;
}

@keyframes v5-breakthrough-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 2px color-mix(in srgb, var(--gold-foil) 30%, transparent),
            0 0 0 6px color-mix(in srgb, var(--gold-foil) 10%, transparent),
            0 0 20px var(--gold-foil-glow);
    }
    50% {
        box-shadow:
            0 0 0 3px color-mix(in srgb, var(--gold-foil) 60%, transparent),
            0 0 0 10px color-mix(in srgb, var(--gold-foil) 15%, transparent),
            0 0 35px color-mix(in srgb, var(--gold-foil) 60%, transparent),
            0 0 50px color-mix(in srgb, var(--vermillion) 30%, transparent);
    }
}

/* ===== 优化3：境界仪式感升级 ===== */

/* 境界文字升级 */
.v5-hero-realm-text {
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-title);
    letter-spacing: 0.1em;
    background: linear-gradient(180deg, var(--gold-foil-light) 0%, var(--gold-foil) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 8px var(--gold-foil-glow);
    filter: drop-shadow(0 0 3px var(--gold-foil-glow));
}

/* 突破在即：进度条强化流光效果 */
.v5-hero-exp-fill.breakthrough-near {
    background: linear-gradient(90deg,
        var(--gold-foil) 0%,
        var(--gold-foil-light) 40%,
        #fff 50%,
        var(--gold-foil-light) 60%,
        var(--gold-foil) 100%);
    background-size: 200% 100%;
    animation: v5-progress-shine 1.5s linear infinite;
    /* 兜底：旧内核浏览器 */
    box-shadow: 0 0 6px var(--gold-foil-glow);
    /* 增强：现代浏览器双层流光 */
    box-shadow:
        0 0 6px var(--gold-foil-glow),
        0 0 12px color-mix(in srgb, var(--gold-foil) 40%, transparent);
}

@keyframes v5-progress-shine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 境界行整体间距调整 */
.v5-hero-realm {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 1px;
}

/* ===== 动画偏好说明 =====
   已移除 prefers-reduced-motion 全局禁用块：
   该媒体查询会在 Windows「动画效果」关闭 / Edge·360 跟随系统报告 reduce 时
   把法阵/头像框/流光等全部动画禁掉，造成"所有浏览器都没动画"的现象。
   本站为游戏应用，动画是核心体验，一律展示动画。 */

/* ============================================================
   游戏化组件系统 V1 —— 进度条 / 卡片 / 按钮
   设计理念：仙侠游戏化 UI · 金箔为韵 · 流光为魂 · 角饰为骨
   ============================================================ */

/* ========== 一、游戏化进度条 ========== */

/* --- 通用进度条刻度层 --- */
.game-progress-track {
    position: relative;
    background: color-mix(in srgb, var(--ink) 60%, transparent);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--gold-foil) 15%, transparent);
}

/* 每 10% 一道刻度线 */
.game-progress-track::before {
    content: '';
    position: absolute;
    /* 兜底：旧内核浏览器（inset 需 87+）四向定位 */
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    /* 兜底：旧内核浏览器刻度线 */
    background-image: linear-gradient(90deg, var(--gold-foil-glow) 1px, transparent 1px);
    /* 增强：现代浏览器 */
    background-image: linear-gradient(
        90deg,
        color-mix(in srgb, var(--gold-foil) 20%, transparent) 1px,
        transparent 1px
    );
    background-size: 10% 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.4;
}

/* 填充层基类 */
.game-progress-fill {
    position: relative;
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--gold-foil), var(--gold-foil-light));
    box-shadow: 0 0 8px var(--gold-foil-glow);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* 流光扫描 */
.game-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    /* 兜底：旧内核浏览器流光 */
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    /* 增强：现代浏览器流光 */
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, #fff 40%, transparent) 50%,
        transparent 100%
    );
    animation: game-shimmer 2.5s linear infinite;
    pointer-events: none;
}

@keyframes game-shimmer {
    0% { left: -40%; }
    100% { left: 120%; }
}

/* 进度为 0 时隐藏流光 */
.game-progress-fill[data-pct="0"]::after { display: none; }

/* 即将突破态（≥80%） */
.game-progress-fill.near-break {
    animation: game-prog-pulse 1.5s ease-in-out infinite;
}

.game-progress-fill.near-break::after {
    animation-duration: 1.2s;
    /* 兜底：旧内核浏览器强化流光 */
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
    /* 增强：现代浏览器 */
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, #fff 60%, transparent) 50%,
        transparent 100%
    );
}

@keyframes game-prog-pulse {
    0%, 100% {
        box-shadow: 0 0 8px var(--gold-foil-glow);
        filter: brightness(1);
    }
    50% {
        /* 兜底：旧内核浏览器 */
        box-shadow: 0 0 16px var(--gold-foil-glow);
        /* 增强：现代浏览器 */
        box-shadow: 0 0 16px var(--gold-foil-glow), 0 0 24px color-mix(in srgb, var(--gold-foil) 30%, transparent);
        filter: brightness(1.15);
    }
}

/* --- 修炼卡进度条游戏化 --- */
.v5-cultivate-bar-track {
    position: relative;
    overflow: hidden;
    /* 兜底：旧内核浏览器轨道底色与描边 */
    background: var(--ink);
    border: 1px solid var(--gold-foil-dim);
    /* 增强：现代浏览器半透明轨道 */
    background: color-mix(in srgb, var(--ink) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold-foil) 12%, transparent);
}

/* 刻度 */
.v5-cultivate-bar-track::before {
    content: '';
    position: absolute;
    /* 兜底：旧内核浏览器（inset 需 87+）四向定位 */
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    /* 兜底：旧内核浏览器刻度线 */
    background-image: linear-gradient(90deg, var(--gold-foil-glow) 1px, transparent 1px);
    /* 增强：现代浏览器 */
    background-image: linear-gradient(
        90deg,
        color-mix(in srgb, var(--gold-foil) 18%, transparent) 1px,
        transparent 1px
    );
    background-size: 10% 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.35;
}

/* 填充流光 */
.v5-cultivate-bar-fill {
    position: relative;
    overflow: hidden;
}

.v5-cultivate-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    /* 兜底：旧内核浏览器流光 */
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
    /* 增强：现代浏览器流光 */
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, #fff 35%, transparent) 50%,
        transparent 100%
    );
    animation: game-shimmer 2.5s linear infinite;
    pointer-events: none;
}

/* 修为进度条增强 */
.v5-cultivate-bar-fill.exp {
    box-shadow: 0 0 6px var(--gold-foil-glow);
}

/* 即将突破：修炼卡修为条 */
.v5-cultivate-bar-fill.exp.near-break {
    animation: game-prog-pulse 1.5s ease-in-out infinite;
}
.v5-cultivate-bar-fill.exp.near-break::after {
    animation-duration: 1.2s;
}

/* --- Hero 区小进度条游戏化 --- */
.v5-hero-exp-track-sm {
    position: relative;
    overflow: hidden;
}

.v5-hero-exp-fill {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 4px var(--gold-foil-glow);
}

.v5-hero-exp-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 60%;
    height: 100%;
    /* 兜底：旧内核浏览器流光 */
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    /* 增强：现代浏览器流光 */
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, #fff 40%, transparent) 50%,
        transparent 100%
    );
    animation: game-shimmer 2s linear infinite;
    pointer-events: none;
}

/* --- 灵兽经验条游戏化 --- */
.v5-pet-exp-track {
    position: relative;
    overflow: hidden;
}

.v5-pet-exp-fill {
    position: relative;
    overflow: hidden;
}

.v5-pet-exp-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 60%;
    height: 100%;
    /* 兜底：旧内核浏览器流光 */
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    /* 增强：现代浏览器流光 */
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, #fff 30%, transparent) 50%,
        transparent 100%
    );
    animation: game-shimmer 3s linear infinite;
    pointer-events: none;
}

/* --- 任务进度条加粗 + 游戏化 --- */
.v5-task-progress-bar {
    height: 8px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    /* 兜底：旧内核浏览器 */
    border: 1px solid var(--gold-foil-dim);
    background: var(--ink);
    /* 增强：现代浏览器 */
    border: 1px solid color-mix(in srgb, var(--gold-foil) 15%, transparent);
    background: color-mix(in srgb, var(--ink) 50%, transparent);
    width: 50px;
}

.v5-task-progress-fill {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 0 4px var(--gold-foil-glow);
}

.v5-task-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 60%;
    height: 100%;
    /* 兜底：旧内核浏览器流光 */
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    /* 增强：现代浏览器流光 */
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, #fff 40%, transparent) 50%,
        transparent 100%
    );
    animation: game-shimmer 2s linear infinite;
    pointer-events: none;
}

/* 任务完成态：勾选缩放动画 */
.v5-task-status.done {
    animation: game-check-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes game-check-pop {
    0% { transform: scale(0); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* 已完成任务文字：删除线 + 变淡 */
.v5-task-item.done .v5-task-name {
    text-decoration: line-through;
    color: var(--paper-muted);
    opacity: 0.7;
}

/* --- 境界预览提示 --- */
.game-realm-preview {
    font-size: 10px;
    color: var(--gold-foil);
    font-family: var(--font-title);
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 4px;
}

.game-realm-preview.near-break {
    color: var(--gold-foil-light);
    text-shadow: 0 0 6px var(--gold-foil-glow);
    animation: game-text-glow 1.5s ease-in-out infinite;
}

@keyframes game-text-glow {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* ========== 二、游戏化卡片 ========== */

/* --- 卡片基类：渐变边框 + 内发光 + 微纹理 + 角饰 + hover光扫 --- */

/* 渐变边框（mask 技术） */
.game-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-card::before {
    content: '';
    position: absolute;
    /* 兜底：旧内核浏览器（inset 需 87+）四向定位 */
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    padding: 1.5px;
    /* 兜底：旧内核浏览器渐变边框 */
    background: linear-gradient(135deg,
        var(--gold-foil-glow) 0%,
        var(--gold-foil-dim) 40%,
        var(--gold-foil-dim) 70%,
        var(--gold-foil-glow) 100%);
    /* 增强：现代浏览器精细透明度边框 */
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--gold-foil-light) 30%, transparent) 0%,
        color-mix(in srgb, var(--gold-foil) 18%, transparent) 40%,
        color-mix(in srgb, var(--gold-foil) 8%, transparent) 70%,
        color-mix(in srgb, var(--gold-foil-light) 25%, transparent) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    /* 标准 mask（Firefox/新版 Chrome 必需，缺失会导致整块覆盖层） */
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 10;
    border-radius: inherit;
}

/* 内发光 */
.game-card {
    /* 兜底：旧内核浏览器 */
    box-shadow: var(--shadow);
    /* 增强：现代浏览器内发光 */
    box-shadow:
        var(--shadow),
        inset 0 0 30px color-mix(in srgb, var(--gold-foil) 3%, transparent);
}

/* 微纹理背景 */
.game-card {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
    background-blend-mode: overlay;
    /* 兜底：旧内核浏览器底色 */
    background-color: var(--ink-elevated);
    /* 增强：现代浏览器半透明底色 */
    background-color: color-mix(in srgb, var(--ink-elevated) 70%, transparent);
}

/* 四角装饰 */
.game-card .card-corner {
    position: absolute;
    width: 10px;
    height: 10px;
    pointer-events: none;
    z-index: 11;
    opacity: 0.25;
}

.game-card .card-corner.tl {
    top: 4px; left: 4px;
    border-top: 1.5px solid var(--gold-foil);
    border-left: 1.5px solid var(--gold-foil);
    border-top-left-radius: 2px;
}
.game-card .card-corner.tr {
    top: 4px; right: 4px;
    border-top: 1.5px solid var(--gold-foil);
    border-right: 1.5px solid var(--gold-foil);
    border-top-right-radius: 2px;
}
.game-card .card-corner.bl {
    bottom: 4px; left: 4px;
    border-bottom: 1.5px solid var(--gold-foil);
    border-left: 1.5px solid var(--gold-foil);
    border-bottom-left-radius: 2px;
}
.game-card .card-corner.br {
    bottom: 4px; right: 4px;
    border-bottom: 1.5px solid var(--gold-foil);
    border-right: 1.5px solid var(--gold-foil);
    border-bottom-right-radius: 2px;
}

/* Hover 光扫层 */
.game-card .card-hover-sweep {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    /* 兜底：旧内核浏览器光扫 */
    background: linear-gradient(120deg, transparent 0%, var(--gold-foil-dim) 50%, transparent 100%);
    /* 增强：现代浏览器光扫 */
    background: linear-gradient(
        120deg,
        transparent 0%,
        color-mix(in srgb, var(--gold-foil-light) 6%, transparent) 50%,
        transparent 100%
    );
    transform: skewX(-15deg);
    pointer-events: none;
    z-index: 5;
    transition: left 0.4s ease-out;
}

.game-card:hover .card-hover-sweep {
    left: 130%;
}

/* --- 修炼卡特色（暖色调 + 法阵光晕） --- */
.game-card-cultivate {
    /* 兜底：旧内核浏览器 */
    background-color: var(--ink-elevated);
    /* 增强：现代浏览器 */
    background-color: color-mix(in srgb, var(--ink-elevated) 70%, transparent);
}

.game-card-cultivate {
    /* 兜底：旧内核浏览器 */
    box-shadow: var(--shadow);
    /* 增强：现代浏览器暖色内发光 */
    box-shadow:
        var(--shadow),
        inset 0 0 40px color-mix(in srgb, var(--gold-foil) 4%, transparent),
        inset 0 -20px 60px color-mix(in srgb, var(--vermillion) 2.5%, transparent);
}

/* --- 灵兽卡特色（翠绿色调） --- */
.game-card-pet::before {
    /* 兜底：旧内核浏览器 */
    background: linear-gradient(135deg, var(--jade-glow) 0%, var(--gold-foil-dim) 50%, var(--jade-glow) 100%);
    /* 增强：现代浏览器 */
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--jade) 20%, transparent) 0%,
        color-mix(in srgb, var(--gold-foil) 12%, transparent) 50%,
        color-mix(in srgb, var(--jade) 18%, transparent) 100%
    );
}

.game-card-pet {
    /* 兜底：旧内核浏览器 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    /* 增强：现代浏览器 */
    box-shadow:
        0 2px 8px rgba(0,0,0,0.3),
        inset 0 0 25px color-mix(in srgb, var(--jade) 2.5%, transparent);
}

.game-card-pet .card-corner {
    border-color: var(--jade);
    opacity: 0.25;
}

.game-card-pet .card-hover-sweep {
    /* 兜底：旧内核浏览器 */
    background: linear-gradient(120deg, transparent 0%, var(--jade-glow) 50%, transparent 100%);
    /* 增强：现代浏览器 */
    background: linear-gradient(
        120deg,
        transparent 0%,
        color-mix(in srgb, var(--jade) 5%, transparent) 50%,
        transparent 100%
    );
}

/* --- 任务卡特色（卷轴感 + 上下渐变） --- */
.game-card-task::before {
    /* 兜底：旧内核浏览器 */
    background: linear-gradient(180deg,
        var(--gold-foil-glow) 0%,
        var(--gold-foil-dim) 30%,
        var(--gold-foil-dim) 70%,
        var(--gold-foil-glow) 100%);
    /* 增强：现代浏览器 */
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--gold-foil-light) 25%, transparent) 0%,
        color-mix(in srgb, var(--gold-foil) 12%, transparent) 30%,
        color-mix(in srgb, var(--gold-foil) 12%, transparent) 70%,
        color-mix(in srgb, var(--gold-foil-light) 25%, transparent) 100%
    );
}

.game-card-task {
    /* 兜底：旧内核浏览器 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    /* 增强：现代浏览器 */
    box-shadow:
        0 2px 8px rgba(0,0,0,0.3),
        inset 0 0 25px color-mix(in srgb, var(--gold-foil) 2.5%, transparent);
}

/* --- 数据+快捷卡特色（冷色调 + 科技感） --- */
.game-card-combo::before {
    /* 兜底：旧内核浏览器 */
    background: linear-gradient(135deg,
        var(--gold-foil-glow) 0%,
        var(--gold-foil-dim) 50%,
        var(--gold-foil-glow) 100%);
    /* 增强：现代浏览器冷色科技感 */
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--card-combo-accent) 15%, transparent) 0%,
        color-mix(in srgb, var(--gold-foil) 10%, transparent) 50%,
        color-mix(in srgb, var(--card-combo-accent) 12%, transparent) 100%
    );
}

.game-card-combo {
    /* 兜底：旧内核浏览器 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    /* 增强：现代浏览器 */
    box-shadow:
        0 2px 8px rgba(0,0,0,0.3),
        inset 0 0 20px color-mix(in srgb, var(--card-combo-accent) 2%, transparent);
}

.game-card-combo .card-corner {
    border-color: var(--card-combo-accent);
    opacity: 0.25;
}

/* ========== 三、游戏化按钮系统 ========== */

/* --- 按钮基类 --- */
.game-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-family: var(--font-title);
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    user-select: none;
    white-space: nowrap;
    text-decoration: none;
    outline: none;
}

.game-btn:focus-visible {
    outline: 2px solid var(--gold-foil);
    outline-offset: 2px;
}

/* 尺寸规范 */
.game-btn-lg { height: 44px; padding: 0 24px; font-size: 16px; }
.game-btn-md { height: 36px; padding: 0 16px; font-size: 14px; }
.game-btn-sm { height: 30px; padding: 0 12px; font-size: 12px; }

/* 主按钮（金色渐变） */
.game-btn-primary {
    background: linear-gradient(135deg, var(--gold-foil-light), var(--gold-foil));
    color: var(--ink);
    box-shadow: 0 2px 8px var(--gold-foil-glow);
    /* 兜底：旧内核浏览器 */
    border: 1px solid var(--gold-foil-glow);
    /* 增强：现代浏览器 */
    border: 1px solid color-mix(in srgb, var(--gold-foil-light) 50%, transparent);
}
.game-btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--gold-foil-glow);
}
.game-btn-primary:active {
    filter: brightness(0.9);
    transform: translateY(1px);
    box-shadow: 0 1px 4px var(--gold-foil-glow);
}

/* 次按钮（线框） */
.game-btn-secondary {
    background: transparent;
    color: var(--gold-foil);
    border: 1px solid var(--gold-foil);
}
.game-btn-secondary:hover {
    background: var(--gold-foil-dim);
    color: var(--gold-foil-light);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--gold-foil) 15%, transparent);
}
.game-btn-secondary:active {
    background: color-mix(in srgb, var(--gold-foil) 12%, transparent);
    transform: translateY(1px);
}

/* 文字按钮 */
.game-btn-text {
    background: transparent;
    color: var(--gold-foil);
    border: none;
    padding: 4px 8px;
    height: auto;
    text-decoration: none;
}
.game-btn-text:hover {
    color: var(--gold-foil-light);
    text-decoration: underline;
}
.game-btn-text:active { opacity: 0.8; }

/* 禁用态 */
.game-btn:disabled,
.game-btn[disabled] {
    background: var(--ink-elevated) !important;
    color: var(--paper-muted) !important;
    border-color: var(--ink-border) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 0.7 !important;
}

/* 波纹效果 */
.game-btn-ripple {
    position: absolute;
    border-radius: 50%;
    /* 兜底：旧内核浏览器波纹 */
    background: rgba(255, 255, 255, 0.4);
    /* 增强：现代浏览器 */
    background: color-mix(in srgb, #fff 40%, transparent);
    transform: scale(0);
    animation: game-ripple 0.6s ease-out;
    pointer-events: none;
}

@keyframes game-ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* --- 现有按钮的游戏化适配 --- */

/* 任务按钮三态增强 */
.btn-task {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-task:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px var(--gold-foil-glow);
}
.btn-task:active {
    filter: brightness(0.92);
    transform: translateY(1px) scale(0.98);
}
.btn-task-secondary:hover {
    background: var(--gold-foil-dim);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--gold-foil) 15%, transparent);
}

/* 签到入口已收敛至活动横幅（Hero 昵称旁按钮已移除） */
/* —— 活动横幅签到卡已签态 —— */
.v5-activity-card.type-sign.signed {
    opacity: 0.68;
    filter: saturate(0.6);
}
.v5-activity-card.type-sign.signed .v5-activity-badge-v2 {
    background: var(--gold-foil-dim);
    color: var(--paper-muted);
    animation: none;
}
.v5-activity-card.type-sign.signed .v5-activity-desc {
    color: var(--paper-muted);
}

/* —— 任务快捷入口滚动定位高亮（1.4 秒流光后移除） —— */
@keyframes task-card-flash-anim {
    0%, 100% { box-shadow: 0 0 0 1px var(--ink-border); }
    20%, 60% { box-shadow: 0 0 14px 2px var(--gold-foil-glow), 0 0 0 1px var(--gold-foil); }
}
.task-card-flash {
    animation: task-card-flash-anim 1.4s ease-in-out;
}

/* 聊天发送按钮 */
.btn-chat-send {
    position: relative;
    overflow: hidden;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-chat-send:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--gold-foil-glow);
}
.btn-chat-send:active {
    filter: brightness(0.92);
    transform: translateY(1px) scale(0.95);
}

/* 邮件领取按钮 */
.mail-claim-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.mail-claim-btn:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 3px 12px var(--gold-foil-glow);
}
.mail-claim-btn:active:not(:disabled) {
    filter: brightness(0.92);
    transform: translateY(1px);
}

/* 任务领取按钮 */
.v5-task-claim-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.v5-task-claim-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px var(--jade-glow);
}
.v5-task-claim-btn:active {
    filter: brightness(0.92);
    transform: translateY(1px);
}


/* 修炼模式按钮 */
.v5-mode-btn {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}
.v5-mode-btn:not(.active):hover {
    background: color-mix(in srgb, var(--gold-foil) 8%, transparent);
    color: var(--gold-foil-light);
}

/* 全局 .btn 主按钮增强 */
.btn {
    position: relative;
    overflow: hidden;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px var(--gold-foil-glow);
}
.btn:active:not(:disabled) {
    filter: brightness(0.92);
    transform: translateY(2px) scale(0.98);
    box-shadow: 0 3px 10px var(--gold-foil-dim);
}

/* 次按钮增强 */
.btn-secondary:hover {
    border-color: var(--gold-foil);
    color: var(--gold-foil);
    background: var(--gold-foil-dim);
}

/* 邮件刷新按钮 */
.mail-refresh-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.15s ease;
}
.mail-refresh-btn:hover {
    border-color: color-mix(in srgb, var(--gold-foil) 30%, transparent);
    background: color-mix(in srgb, var(--gold-foil) 10%, transparent);
}