/* ===== MOBILE-FIRST 强制规则 ===== */
@media (max-width: 768px) {
    .container { display: flex !important; }
    .sidebar { order: 1 !important; overflow-x: auto !important; }
    .logo { margin: 0 !important; }
    .main-content { order: 2 !important; }
}

/* ========== 字体定义 ========== */

/* ========== CSS 变量系统 ========== */
:root {
    /* v7.31：标题统一用志莽行书毛笔字（与战斗特效 / 卷轴 / 印章同一种字）。原来写的 Ma Shan Zheng 网页从没加载过，实际一直是系统楷体，
       和新加的毛笔字混在一起很不协调。以数字为主的地方（顶栏数值、技能等级、收获飘字）改用 --font-num，楷体好认 */
    --font-title: 'ZhiMangXing', 'STXingkai', 'KaiTi', 'STKaiti', serif;
    --font-num: 'STKaiti', 'KaiTi', serif;
    --font-mono: 'Courier New', 'Consolas', monospace;

    /* 间距 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background: linear-gradient(135deg, #0a0c19 0%, #1a1e32 100%);
    color: var(--text-l3);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
}

.container {
    display: flex;
    height: 100vh;
}

/* --- */
.sidebar {
    display: flex;
    flex-direction: column;
}

.logo {
    width: 50px;
    height: 50px;
    margin-bottom: var(--spacing-md);
    cursor: pointer;
    position: relative;
}

.logo::before, .logo::after {
    content: '◆';
    position: absolute;
    color: var(--border-l1);
    font-size: 10px;
}
.logo::before { top: 2px; left: 2px; }
.logo::after { bottom: 2px; right: 2px; }

.nav-item {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s, opacity 0.3s;
    border: 2px solid transparent;
    position: relative;
}

.nav-item:hover {
    background: rgba(201,169,97,0.1);
    border-color: var(--border-l1);
    box-shadow: var(--glow-gold);
}

.nav-item.active {
    background: rgba(111,169,128,0.15);
    border-color: var(--border-l2);
    box-shadow: var(--glow-jade);
}

.nav-item .pulse {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-danger);
    border-radius: 50%;
    top: 2px;
    right: 2px;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.skill-tree {
    display: flex;
    flex-direction: column;
}

.skill-item {
    padding: var(--spacing-md);
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s, opacity 0.3s;
    text-align: center;
    font-size: 0.8em;
    position: relative;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.skill-item:hover {
    box-shadow: var(--glow-gold);
}

.skill-item .skill-name {
    color: var(--text-l2);
    margin-bottom: var(--spacing-xs);
    font-size: 0.9em;
    font-family: var(--font-title);
}

.skill-item .skill-level {
    color: var(--text-l2);
    font-size: 0.7em;
    margin-bottom: var(--spacing-xs);
}

.skill-item .exp-bar {
    width: 100%;
    height: 4px;
    background: var(--bg-l1);
    border-radius: var(--radius-xs);
    overflow: hidden;
    margin-top: var(--spacing-xs);
}

.skill-item .exp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--text-l2), var(--border-l1));
    transition: width 0.3s;
}

.coin-display {
    margin-top: auto;
    padding: var(--spacing-md);
    text-align: center;
    background: rgba(111,169,128,0.1);
    border: 1px solid var(--border-l2);
    border-radius: var(--radius-md);
    width: 60px;
}

.coin-display div {
    font-size: 12px;
    color: var(--text-l2);
    font-weight: bold;
}

/* ========== 主内容区 ========== */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-xl);
    overflow-y: auto;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
}

.header::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 80px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, var(--border-l1), transparent);
}

.player-info {
    display: flex;
    gap: var(--spacing-3xl);
    align-items: center;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.info-label {
    font-size: 0.85em;
}

.info-value {
    font-weight: bold;
    font-size: 1.1em;
}

.progress-bar {
    width: 200px;
    height: 24px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    transition: width 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    color: #000;
    font-weight: bold;
}

/* ========== 面板区域 ========== */
.panel-container {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--spacing-xl);
    flex: 1;
}

.main-panel {
    padding: var(--spacing-xl);
    overflow-y: auto;
    position: relative;
}

.main-panel::before, .main-panel::after {
    position: absolute;
}
.main-panel::before { top: 12px; left: 12px; }
.main-panel::after { bottom: 12px; right: 12px; }

.panel-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.skill-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.skill-tab {
    padding: var(--spacing-md);
    background: var(--bg-l3);
    border: 1px solid var(--border-l3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
    font-size: 0.9em;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s, opacity 0.3s;
}

.skill-tab:hover {
    border-color: var(--border-l2);
    background: rgba(111,169,128,0.15);
}

.skill-tab.active {
    background: rgba(111,169,128,0.2);
    border-color: var(--border-l2);
    color: var(--text-l2);
    box-shadow: var(--glow-jade);
}

.action-list {
    display: grid;
    gap: var(--spacing-md);
}

.action-item {
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s, opacity 0.3s;
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 100px;
    display: flex;
    flex-direction: column;
}

.action-item.action-locked {
    cursor: not-allowed;
    background: var(--bg-l3);
    border-color: var(--border-l4);
}

.action-item.action-locked:hover {
    border-color: var(--border-l4);
    background: var(--bg-l3);
    box-shadow: none;
}

.action-item.action-locked .action-name {
    color: var(--text-l4);
}

.action-item.action-locked .action-desc {
    color: var(--color-warning);
}

.action-row {
    padding: var(--spacing-lg);
    background: var(--bg-l3);
    border: 1px solid var(--border-l3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s, opacity 0.3s;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.action-row:hover {
    border-color: var(--border-l2);
    background: rgba(111,169,128,0.1);
}

.action-item.disabled {
    cursor: not-allowed;
}

.action-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-top: 1px solid var(--border-l2);
    display: none;
}

.action-progress-bar.active {
    display: block;
}

.action-progress-fill {
    height: 100%;
    transition: width 0.1s;
    width: 0%;
}

.action-name {
    color: var(--text-l2);
    margin-bottom: var(--spacing-sm);
    font-family: var(--font-title);
}

.action-desc {
    font-size: 0.8em;
    color: var(--text-l4);
}

/* ===== P2: 配方卡片新样式 ===== */

.recipe-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    justify-content: center;
}

.recipe-icon {
    font-size: 1.2em;
}

.recipe-name {
    color: var(--text-l1);
    font-family: var(--font-title);
    flex: 1;
}

.recipe-time {
    font-size: 0.85em;
    color: var(--text-l4);
    margin-bottom: var(--spacing-xs);
}

.recipe-output {
    font-size: 0.85em;
    color: var(--text-l2);
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
}

.recipe-materials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    font-size: 0.75em;
    justify-content: center;
}

.recipe-mat-enough {
    color: var(--color-hp);
    display: inline-block;
}

.recipe-mat-lack {
    color: var(--color-danger);
    display: inline-block;
}

.recipe-efficiency {
    font-size: 0.8em;
    color: var(--border-l2);
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
}

.recipe-lock-hint {
    font-size: 0.75em;
    margin-top: var(--spacing-xs);
    border-radius: var(--radius-xs);
    line-height: 1.2;
}

/* 技能面板顶部的技能头：等级 + 经验条 + 还差多少升级 */
.skill-exp-header {
    padding: 10px 12px;
    margin-bottom: 14px;
}
.skill-exp-top { display: flex; justify-content: space-between; align-items: baseline; }
.skill-exp-name { color: var(--text-l1); font-family: var(--font-title); }
.skill-exp-level { font-weight: bold; }
.skill-exp-track { overflow: hidden; }
.skill-exp-fill { height: 100%; transition: width 0.3s; }
.skill-exp-text { margin-top: 5px; font-size: 0.8em; color: var(--text-l4); }
.skill-exp-text b { color: var(--text-l2); }
.skill-exp-mini { font-size: 0.62em; color: var(--text-l4); margin-top: 2px; white-space: nowrap; }
.recipe-req { font-size: 0.75em; margin-bottom: var(--spacing-xs); }
.recipe-req.met { color: var(--color-hp); }
.recipe-req.unmet { color: var(--color-warning); }
.recipe-mastery { font-size: 0.72em; color: var(--text-l4); margin: 2px 0 6px; }
.recipe-mastery b { color: var(--border-l1); }
.mastery-track { height: 4px; overflow: hidden; margin: 3px auto 0; max-width: 140px; }
.skill-pool { font-size: 0.75em; color: var(--text-l4); margin-top: 4px; }
.pool-track { position: relative; overflow: visible; }
.pool-mark { position: absolute; top: -2px; width: 1px; height: 8px; background: var(--border-l1); opacity: 0.7; }
.infuse-btn { margin-top: 3px; font-size: 0.95em; padding: 1px 8px; border: 1px solid var(--border-l1); background: transparent; color: var(--border-l1); cursor: pointer; }
.infuse-btn:hover { background: var(--border-l1); color: var(--bg-l1); }
.mastery-fill { height: 100%; transition: width 0.3s; }

.action-item.disabled .recipe-header,
.action-item.disabled .recipe-name {
    color: var(--text-l4);
}

.action-detail {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--bg-l3);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--border-l1);
    display: none;
}

.action-detail.show {
    display: block;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    margin: var(--spacing-md) 0;
}

.btn {
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s, opacity 0.3s;
    margin-top: var(--spacing-md);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- */
.side-panel {
    padding: var(--spacing-lg);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.stat-panel {
    padding: var(--spacing-md);
    border-left: 3px solid var(--border-l1);
}

.stat-title {
    margin-bottom: var(--spacing-md);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    margin: var(--spacing-sm) 0;
    font-size: 0.85em;
}

.stat-label {
    color: var(--text-l4);
}

.stat-value {
    color: var(--text-l2);
    font-weight: bold;
    font-family: var(--font-mono);
}

.inventory-grid {
    display: grid;
}

.item-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s, opacity 0.3s;
}

#shopGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.shop-item:hover {
    border-color: var(--border-l1) !important;
    background: rgba(201,169,97,0.15) !important;
}

.item-name {
    color: var(--text-l2);
    font-weight: bold;
}

.item-qty {
    color: var(--text-l2);
}

/* ========== 模态框 ========== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.show {
    display: flex;
}

.modal-content {
    padding: var(--spacing-2xl);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-title {
    font-size: 1.5em;
    margin-bottom: var(--spacing-xl);
}

.modal-close {
    float: right;
    font-size: 1.5em;
    cursor: pointer;
    color: var(--text-l4);
}

.modal-close:hover {
    color: var(--text-l1);
}

/* ========== 角色创建 ========== */
.create-form {
    display: grid;
    gap: var(--spacing-lg);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

label {
    color: var(--text-l2);
    font-weight: bold;
    font-size: 0.9em;
}

input, select {
    width: 100%;
    max-width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-body);
}

input:focus, select:focus {
    outline: none;
}

/* ========== 其他 ========== */
.hidden {
    display: none !important;
}

.notification {
    position: fixed;
    top: var(--spacing-xl);
    right: var(--spacing-xl);
    z-index: 999;
    animation: slideIn 0.3s;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.no-data {
    text-align: center;
    color: var(--text-l4);
    padding: var(--spacing-xl);
}

/* ========== 响应式设计 ========== */
@media (max-width: 1024px) {
    .panel-container {
        grid-template-columns: 1fr;
    }

    .skill-list {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 768px) {
    .sidebar {
        width: 100% !important;
        height: 80px !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        padding: 0 var(--spacing-lg) !important;
        gap: var(--spacing-xl) !important;
        border-right: none !important;
        border-bottom: 2px solid var(--border-l1) !important;
        align-items: center !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }

    .skill-tree {
        display: none !important;
    }

    .logo {
        margin-bottom: 0 !important;
        margin-right: var(--spacing-md) !important;
        flex-shrink: 0;
    }

    .nav-item {
        flex-shrink: 0;
    }

    .coin-display {
        margin-top: 0 !important;
        margin-left: auto !important;
        flex-shrink: 0;
    }

    .main-content {
        min-height: calc(100vh - 100px);
    }

}

@media (max-width: 480px) {
    .main-content {
        padding: var(--spacing-md);
    }

    .player-info {
        gap: var(--spacing-md);
    }

    .progress-bar {
        width: 100%;
    }
}

/* ==================== P1-1 战斗UI系统 ==================== */

.battle-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--bg-l2);
    border: 2px solid var(--border-l1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), var(--glow-gold);
}
.battle-container.hidden {
    display: none;
}

/* 战斗独立界面（v6.73）：进入战斗时隐藏侧边栏 / 顶部信息栏 / 右侧属性栏，
   战斗容器占满可视空间，退出战斗（撤退 / 被击败）后恢复常规布局 */
body.in-battle .sidebar,
body.in-battle .header,
body.in-battle #questBanner,
body.in-battle .side-panel {
    display: none !important;
}
/* main-panel 里除了战斗容器本身，其余常驻内容（全局进度条、分身条等）战斗时也不需要看到 */
body.in-battle .main-panel > *:not(#battleContainer) {
    display: none !important;
}
body.in-battle .panel-container {
    grid-template-columns: 1fr;
}
body.in-battle .main-content {
    padding: var(--spacing-lg);
}
body.in-battle .battle-container {
    max-width: 640px;
    margin: 0 auto;
    min-height: calc(100vh - var(--spacing-lg) * 2 - 4px);
    justify-content: center;
}

.dungeon-progress {
    color: var(--text-l4);
    font-size: 0.8em;
    margin-top: 2px;
    letter-spacing: 1px;
    white-space: nowrap;
}
.dungeon-progress .pip {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 3px;
    background: var(--bg-l1);
    border: 1px solid var(--border-l3);
    vertical-align: middle;
}
.dungeon-progress .pip.done { background: var(--patina); border-color: var(--patina); }
.dungeon-progress .pip.current { background: var(--cinnabar-2); border-color: var(--cinnabar-2); }

/* 背包快满提示角标（v6.76）：容量占用≥90%时在导航「背包」按钮上常驻显示，不用等东西已经丢了才知道 */
.nav-mini, .mobile-tab-item { position: relative; }
.badge-dot {
    position: absolute;
    top: 4px;
    right: 10px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cinnabar-2);
    box-shadow: 0 0 4px rgba(196, 72, 58, 0.7);
    pointer-events: none;
}

/* 灵域选择卡片（v6.77） */
.domain-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.domain-card {
    background: var(--bg-l3);
    border: 1px solid var(--border-l3);
    border-radius: var(--radius-md);
    padding: 12px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.domain-card:hover {
    border-color: var(--bronze, var(--border-l1));
    box-shadow: 0 0 8px rgba(201, 169, 97, 0.25);
}
.domain-card.unaffordable {
    opacity: 0.55;
}
.domain-icon { font-size: 1.4em; margin-bottom: 4px; }
.domain-name { font-weight: bold; color: var(--text-l1); margin-bottom: 4px; }
.domain-desc { font-size: 0.78em; color: var(--text-l4); line-height: 1.4; }
/* 灵域个人数据：给唯一的高密度决策点加一层"经营感"反馈（正反馈诊断 C-3） */
.domain-stats { font-size: 0.72em; color: var(--bronze, #b3711f); margin-bottom: 4px; }
.domain-stats.domain-stats-new { color: var(--text-l4); font-style: italic; }
@media (max-width: 480px) {
    .domain-grid { grid-template-columns: 1fr; }
}

.battle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-l3);
    border: 1px solid var(--border-l2);
    border-radius: var(--radius-md);
}
.battle-title {
    color: var(--text-l1);
    font-family: var(--font-title);
}
.battle-controls {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.battle-status {
    display: grid;
    gap: var(--spacing-lg);
}


.combatant.monster {
    border-color: var(--color-danger);
}

.combatant-player-name { color: var(--text-l2); }
.combatant-monster-name { color: var(--color-danger); }
.hp-bar {
    width: 100%;
    height: 24px;
    background: var(--bg-l1);
    border: 1px solid var(--border-l3);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
    margin: var(--spacing-sm) 0;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.4);
}
.hp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--hp-full), var(--hp-high));
    transition: width 0.2s;
}
.hp-fill.low {
    background: linear-gradient(90deg, var(--hp-low), var(--color-danger));
}
.hp-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8em;
    font-weight: bold;
    font-family: var(--font-mono);
}
.atk-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-l1);
    border: 1px solid var(--border-l3);
    border-radius: var(--radius-xs);
    overflow: hidden;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.4);
}
.atk-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--bronze-dim), var(--bronze));
    transition: width 0.1s linear;
}
.atk-fill.ready {
    background: linear-gradient(90deg, var(--bronze), #fff4d8);
    box-shadow: 0 0 6px var(--bronze);
}

.combatant-stats {
    display: flex;
    font-size: 0.8em;
}
.combatant-stats span {
    background: var(--bg-l1);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-xs);
}

.battle-scene {
    height: 180px;
    background: var(--bg-l3);
    border: 1px solid var(--border-l3);
    border-radius: var(--radius-md);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.3);
}
.monster-sprite {
    font-size: 80px;
    user-select: none;
    text-shadow: 2px 2px 4px #000;
}
/* 精通升级 / 法则里程碑的轻量庆祝：屏幕中央短暂浮现，不挡手、不用点确认（正反馈诊断 C-5） */
.quick-celebration {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    z-index: 1200;
    pointer-events: none;
    background: var(--inkstone-2, rgba(20,17,10,0.92));
    border: 1px solid var(--bronze, #b3711f);
    color: var(--text-l1, #fff);
    font-weight: bold;
    padding: 10px 22px;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(179,113,31,0.4), var(--shadow-lg);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    white-space: nowrap;
}
.quick-celebration.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* 配方卡片「本次完成次数」角标：纯前端展示，每次配方完成重新渲染时播放一下弹出动画（正反馈诊断 C-4） */
.recipe-session-count {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.7em;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 10px;
    animation: sessionCountPop 0.3s ease-out;
    z-index: 1;
}
@keyframes sessionCountPop {
    0% { transform: scale(0.6); opacity: 0.4; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.damage-float-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
.damage-float {
    position: absolute;
    top: 50%;
    font-size: 1.5em;
    font-weight: bold;
    animation: floatUp 1.5s ease-out forwards;
}
@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-100px) scale(1); opacity: 0; }
}
/* 暴击飘字：字号放大、金色、多一下弹出缩放，跟普通伤害拉开视觉差异——不然只有战斗日志里一句
   「暴击！」文字能看出区别，很容易被忽略（正反馈诊断 C-1） */
.damage-float.crit {
    font-size: 2.1em;
    color: var(--float-crit);
    animation: critFloatUp 1.5s ease-out forwards;
}
@keyframes critFloatUp {
    0% { transform: translateY(0) scale(0.4); opacity: 1; }
    18% { transform: translateY(-10px) scale(1.3); opacity: 1; }
    32% { transform: translateY(-16px) scale(1); opacity: 1; }
    100% { transform: translateY(-110px) scale(1); opacity: 0; }
}

.battle-log {
    overflow-y: auto;
    font-size: 0.8em;
}
.log-entry {
    color: var(--text-l4);
    line-height: 1.4;
}
.log-info { color: var(--text-l4); }
.log-player-hit { color: var(--text-l2); }
.log-monster-hit { color: var(--color-danger); }
.log-heal { color: var(--color-hp); }
.log-death { color: var(--color-danger); font-weight: bold; }
.log-victory { color: var(--border-l2); font-weight: bold; }
.log-miss { color: var(--text-l4); font-style: italic; }

.food-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-l3);
    border: 1px solid var(--border-l3);
    border-radius: var(--radius-md);
}
.food-slot {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--bg-l2);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}
.food-icon { font-size: 1.3em; }
.food-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.food-name {
    color: var(--text-l2);
    font-weight: bold;
    font-size: 0.9em;
}
.food-count {
    color: var(--text-l4);
    font-size: 0.8em;
}
.food-recovery {
    color: var(--text-l4);
    font-size: 0.85em;
}
.auto-eat-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-l4);
    font-size: 0.9em;
    cursor: pointer;
    margin-left: auto;
}
.auto-eat-toggle input[type="checkbox"] {
    cursor: pointer;
}
.auto-eat-toggle input[type="checkbox"]:checked + span {
    color: var(--text-l2);
}

.battle-speed-control {
    display: flex;
    gap: var(--spacing-xs);
}
.speed-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-l3);
    border: 1px solid var(--border-l3);
    border-radius: var(--radius-sm);
    color: var(--text-l4);
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}
.speed-btn:hover {
    background: var(--bg-l2);
    border-color: var(--border-l2);
    color: var(--text-l2);
}
.speed-btn.active {
    background: rgba(111,169,128,0.2);
    border-color: var(--border-l2);
    color: var(--text-l2);
    box-shadow: var(--glow-jade);
}

.btn-retreat {
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(231,76,60,0.1);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-sm);
    color: var(--color-danger);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}
.btn-retreat:hover {
    background: rgba(231,76,60,0.2);
    border-color: var(--color-danger);
    box-shadow: 0 0 8px rgba(231,76,60,0.3);
}

@media (max-width: 768px) {
    /* 全局 */
    html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
    }
    * {
box-sizing: border-box !important;
max-width: 100% !important;
    }

    .container {
flex-direction: column !important;
height: 100vh !important;
width: 100vw !important;
    }

    /* 隐藏左侧 sidebar */
    .sidebar {
display: none !important;
    }

    /* 主内容区：全宽，底部留空间给 Tab */
    .main-content {
flex: 1 !important;
width: 100vw !important;
padding: 10px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
    }

    /* 头部信息：外层纵向（信息行 + 突破按钮），信息行内 姓名 / 境界 / 修为进度 三块水平排列 */
    .header {
flex-direction: column !important;
gap: 8px !important;
padding: 10px 0 !important;
margin-bottom: 10px !important;
    }

    .player-info {
flex-direction: row !important;
gap: 16px !important;
align-items: flex-start !important;
width: 100% !important;
    }

    .player-info .info-item {
flex: 0 0 auto !important;
min-width: 0 !important;
    }

    /* 名字过长时截断为省略号（最多占一行的 35%），境界不换行 */
    .player-info .info-item:first-child {
flex: 0 1 auto !important;
max-width: 35% !important;
    }

    .player-info .info-value {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
    }

    .player-info .progress-bar {
min-width: 80px !important;
    }

    /* 修为进度占满剩余宽度 */
    .player-info .info-item:last-child {
flex: 1 1 auto !important;
    }

    .player-info .progress-bar {
width: 100% !important;
    }

    /* 面板单列 */
    .panel-container {
grid-template-columns: 1fr !important;
gap: 10px !important;
    }

    .main-panel, .side-panel {
width: 100% !important;
max-width: 100% !important;
    }

    .skill-list, .action-list {
grid-template-columns: 1fr !important;
    }

    .action-item {
min-height: 50px !important;
padding: 12px !important;
    }
    .btn {
min-height: 44px !important;
font-size: 16px !important;
    }

    .action-list, .skill-list {
min-width: 0 !important;
    }
    .action-list > *, .skill-list > * {
min-width: 0 !important;
    }
}

@media (max-width: 768px) {
    .mobile-bottom-tabs {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
display: flex !important;
justify-content: space-around !important;
align-items: center !important;
z-index: 100 !important;
padding: 0 !important;
    }

    .mobile-tab-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 20% !important;
height: 100% !important;
cursor: pointer !important;
color: var(--text-l4) !important;
font-size: 12px !important;
gap: 4px !important;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s !important;
    }

    .mobile-tab-item:hover, .mobile-tab-item.active {
color: var(--text-l1) !important;
background: rgba(201,169,97,0.1) !important;
    }

    .mobile-tab-item .icon {
font-size: 24px !important;
    }
}

@media (min-width: 769px) {
    .mobile-bottom-tabs {
display: none !important;
    }
}

/* 手机端技能栏：补回被隐藏的左侧技能树 */
.mobile-skill-bar { display: none; }
@media (max-width: 768px) {
    .mobile-skill-bar {
scrollbar-width: none;
display: flex;
gap: 8px;
overflow-x: auto;
margin-bottom: 12px;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
    }
    .mobile-skill-btn {
flex: 0 0 auto;
max-width: none !important;
padding: 8px 14px;
background: var(--bg-l3);
border: 1px solid var(--border-l3);
color: var(--text-l3);
font-size: 14px;
cursor: pointer;
white-space: nowrap;
    }
    /* 非技能面板不需要属性/装备侧栏 */
    body[data-panel="shop"] .side-panel,
    body[data-panel="settings"] .side-panel,
    body[data-panel="inventory"] .side-panel,
    body[data-panel="battle"] .side-panel {
display: none !important;
    }
}

/* 自动战斗托管 */
.auto-battle-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 0.85em; color: var(--text-l4); }
.auto-battle-btn { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border-l4); background: transparent; color: var(--text-l3); cursor: pointer; font-weight: bold; }
.auto-battle-btn.on { border-color: var(--border-l2); color: var(--border-l2); background: rgba(111, 169, 128, 0.12); }
.auto-battle-status { margin-right: 10px; font-size: 0.85em; color: var(--border-l2); }

/* 新手引导 */
.tutorial-modal { max-width: 520px; }
.tutorial-title { color: var(--text-l1); margin-bottom: 14px; text-align: center; }
.tutorial-body { color: var(--text-l3); line-height: 1.85; font-size: 0.95em; min-height: 160px; }
.tutorial-body b { color: var(--border-l1); }
.tutorial-dots { display: flex; justify-content: center; gap: 8px; margin: 16px 0 12px; }
.tutorial-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-l4); }
.tutorial-dots i.on { background: var(--border-l1); }
.tutorial-actions { display: flex; justify-content: space-between; gap: 10px; }
.tutorial-actions .btn { flex: 1; }
.tutorial-skip { opacity: 0.6; }

/* 存档选择 */
.slot-select { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.slot-card { position: relative; padding: 14px 16px; cursor: pointer; text-align: left; transition: border-color 0.2s, transform 0.1s; }
.slot-card.empty { opacity: 0.85; }
.slot-title { font-size: 0.8em; color: var(--text-l4); margin-bottom: 4px; }
.slot-name { color: var(--text-l1); font-weight: bold; margin-bottom: 4px; }
.slot-info { color: var(--text-l3); font-size: 0.85em; }
.slot-delete { position: absolute; top: 8px; right: 10px; background: transparent; border: none; cursor: pointer; font-size: 1.1em; opacity: 0.6; }
.slot-delete:hover { opacity: 1; }

/* 分身 */
.clone-bar { margin-bottom: 15px; padding: 8px 12px; font-size: 0.9em; color: var(--text-l3); }
.clone-bar-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.clone-bar-top b { color: var(--border-l2); }
.clone-hint { color: var(--text-l4); font-size: 0.85em; }
.clone-stop { padding: 2px 10px; font-size: 0.85em; }
.clone-btn { margin: 3px 0 6px; font-size: 0.8em; padding: 2px 10px; border: 1px solid var(--border-l2); background: transparent; color: var(--border-l2); cursor: pointer; }
.clone-btn:hover, .clone-btn.on { background: rgba(111, 169, 128, 0.2); }
.action-item.clone-active { box-shadow: inset 0 0 0 1px var(--border-l2); }
.clone-row + .clone-row { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-l4); }

/* 悟道 */
.law-intro { font-size: 0.85em; color: var(--text-l4); margin: 6px 0 12px; line-height: 1.7; }
.law-level { font-size: 1.2em; font-weight: bold; color: var(--text-l1); margin: 4px 0; }
.law-level small { color: var(--text-l4); font-weight: normal; }
.law-exp { font-size: 0.75em; color: var(--text-l4); margin: 3px 0 6px; }
.law-effects { font-size: 0.8em; color: var(--border-l2); line-height: 1.6; min-height: 1.6em; }
.law-next { font-size: 0.72em; color: var(--text-l4); margin-top: 4px; line-height: 1.5; }
.law-resonant { font-size: 0.7em; margin-left: 6px; }
/* 化虚兑道则：单独给个带边框的小区块，不然一排小按钮混在卡片文字里太容易被完全忽略（用户反馈"化虚按钮我就没看见"） */
.law-huaxu-block { margin-top: 8px; padding: 6px 4px 4px; border: 1px dashed var(--border-l3); border-radius: 6px; }
.law-huaxu-title { font-size: 0.7em; color: var(--bronze, var(--text-l3)); margin-bottom: 4px; line-height: 1.4; }
.law-huaxu { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.law-huaxu-btn { padding: 3px 8px; font-size: 0.75em; }
.law-huaxu-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.law-capped { opacity: 0.85; }

/* 装备界面 */
.equip-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.equip-slot { padding: 10px; text-align: center; }
.equip-slot.empty, .equip-slot.locked { border-color: var(--border-l4); opacity: 0.85; }
.equip-slot-label { font-size: 0.75em; color: var(--text-l4); margin-bottom: 4px; }
.equip-slot-name { color: var(--text-l1); margin-bottom: 4px; }
.equip-slot-stats { font-size: 0.8em; color: var(--border-l2); line-height: 1.5; margin-bottom: 6px; }
.equip-slot-empty { color: var(--text-l4); padding: 8px 0; }
.equip-btn { padding: 2px 12px; font-size: 0.85em; }
.equip-summary { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 12px; margin-bottom: 14px; color: var(--text-l1); }
.equip-summary-sub { flex-basis: 100%; font-size: 0.8em; color: var(--text-l4); }
.equip-bag-title { font-size: 0.85em; color: var(--border-l1); margin: 10px 0 4px; }
.equip-bag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 8px; border-bottom: 1px solid var(--border-l4); }
.equip-bag-name { color: var(--text-l1); min-width: 110px; }
.equip-bag-stats { flex: 1 1 160px; font-size: 0.82em; color: var(--text-l3); }
.equip-empty-hint { color: var(--text-l4); font-size: 0.85em; padding: 10px 0; }
.item-stats { color: var(--border-l2); line-height: 1.3; }
.recipe-equip-stats { font-size: 0.78em; color: var(--border-l2); margin: 2px 0 4px; }
.inventory-hint { font-size: 0.82em; color: var(--text-l4); margin-bottom: 10px; }
.inventory-hint a { color: var(--border-l1); }
.sell-qty-row { flex: 1 1 100%; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sell-qty-row input { width: 64px; text-align: center; padding: 4px; background: rgba(0,0,0,0.3); border: 1px solid var(--border-l2); color: #fff; border-radius: 4px; }
.sell-qty-row .btn { padding: 2px 10px; }

/* ===== 可访问性与交互细节（网页界面规范审查后补充） ===== */

html { -webkit-tap-highlight-color: rgba(201, 169, 97, 0.18); }
body { font-variant-numeric: tabular-nums; }
button, [role="button"], a, input, select, .action-item, .slot-card, .law-card, .item-slot, .mobile-tab-item { touch-action: manipulation; }
/* 键盘焦点可见（不影响鼠标点击） */
button:focus-visible, [role="button"]:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
.action-item:focus-visible, .slot-card:focus-visible, .law-card:focus-visible, .item-slot:focus-visible, .mobile-tab-item:focus-visible {
    outline: 2px solid var(--border-l1);
    outline-offset: 2px;
}
button.modal-close { background: none; border: none; padding: 0 4px; line-height: 1; font-family: inherit; }
.modal, .modal-content { overscroll-behavior: contain; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 10000; padding: 8px 14px; background: var(--bg-l1); color: var(--text-l1); border: 1px solid var(--border-l1); border-radius: 6px; }
.skip-link:focus { top: 8px; }
/* 手机底部标签栏与刘海屏 / 手势条的安全区 */
@media (max-width: 768px) {
    .mobile-bottom-tabs { height: calc(70px + env(safe-area-inset-bottom)) !important; padding-bottom: env(safe-area-inset-bottom) !important; box-sizing: border-box !important; }
    .main-content { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
}
/* 尊重「减少动态效果」系统设置 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   美术主题：松烟墨案 · 铜器 · 朱印
   松烟 #15140f  砚台 #1f1e18  旧宣 #dcd1b6  旧铜 #a68a52  铜绿 #6f9c8a  朱砂 #a83a2e
   原则：低饱和颜料、不发光、不用渐变、方角；境界用朱砂印章做视觉重点，其余克制
   ========================================================================== */
:root {
    --hp-full: #6f9c8a;
    --hp-high: #8aa79a;
    --hp-low: #c4483a;
    --glow-gold: 0 0 0 transparent;
    --glow-jade: 0 0 0 transparent;
    --radius-xs: 1px;
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --font-body: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
}

/* 底：松烟 + 极淡纸纹 + 暗角 */
body {
    background-color: var(--ink);
    background-image: radial-gradient(ellipse at 50% 30%, var(--page-glow), transparent 70%);
    background-attachment: fixed;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    opacity: 0.05;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.86  0 0 0 0 0.8  0 0 0 0 0.68  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* 彩色 emoji → 褪色铜色单色 */
.emo { filter: grayscale(1) sepia(0.75) saturate(1.3) brightness(0.92); opacity: 0.95; }

/* 侧栏：暗铜细线，去掉内阴影 */
.sidebar { background: var(--ink); border-right: 1px solid var(--bronze-dim); box-shadow: none; }
.logo {
    background: var(--cinnabar);
    color: var(--paper);
    border: none;
    border-radius: 2px;
    box-shadow: inset 0 0 0 2px rgba(220, 209, 182, 0.28);
    font-family: var(--font-title);
    font-size: 1.5em;
    display: flex; align-items: center; justify-content: center;
}
.skill-item { background: var(--bg-l2); border: 1px solid var(--border-l4); border-radius: 2px; box-shadow: none; }
.skill-item:hover { border-color: var(--bronze-dim); background: var(--bg-l3); }
.skill-item.active { background: var(--bg-l3); border-color: var(--bronze-dim); box-shadow: inset 3px 0 0 var(--cinnabar); }
.exp-fill { background: var(--bronze); }
.nav-btn, .sidebar .nav-btn {
    background: var(--bg-l2) !important;
    border: 1px solid var(--border-l4) !important;
    border-radius: 2px !important;
    color: var(--text-l1) !important;
}
.nav-btn:hover { background: var(--bg-l3) !important; border-color: var(--bronze-dim) !important; }

/* 顶栏：名字用楷体，境界做成朱砂印章 */
.header { border-bottom: 1px solid var(--bronze-dim); }
.header::after { display: none; }
.info-label { color: var(--text-l4); letter-spacing: 0.08em; }
.info-value { font-family: var(--font-num); color: var(--text-l1); }
#realmDisplay {
    display: inline-block;
    transform: rotate(-1.5deg);
}
.progress-bar { background: var(--bg-sunken); border: 1px solid var(--bronze-dim); border-radius: 2px; box-shadow: none; }


/* 主面板：暗铜双线框，角上用小朱印点缀 */
.main-panel { background: var(--bg-l1); border: 1px solid var(--bronze-dim); border-radius: 2px; }
.main-panel::before, .main-panel::after { content: ''; width: 7px; height: 7px; background: var(--cinnabar); color: transparent; font-size: 0; transform: rotate(45deg); opacity: 0.9; }
.side-panel, .stat-panel { background: var(--bg-l2); border: 1px solid var(--border-l3); border-radius: 2px; box-shadow: none; }
.panel-title {
    font-family: var(--font-title);
    color: var(--text-l1);
    letter-spacing: 0.12em;
    border-bottom: 1px solid var(--bronze-dim);
    position: relative;
}
.panel-title::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 36px; height: 3px; }
.stat-title { font-family: var(--font-title); color: var(--text-l2); letter-spacing: 0.1em; border-bottom: 1px solid var(--border-l4); }
.stat-row { border-bottom: 1px solid rgba(92, 80, 57, 0.35); }

/* 卡片：扁平砚台色，无发光；悬停只变边线，选中用朱砂 */
.action-item, .slot-card, .law-card, .equip-slot, .item-slot {
    background: var(--bg-l2);
    background-image: none;
    border: 1px solid var(--border-l3);
    border-radius: 2px;
    box-shadow: none;
}
.action-item:hover, .slot-card:hover, .item-slot:hover { background: var(--bg-l3); border-color: var(--bronze); transform: none; box-shadow: none; }
.action-item.disabled, .action-item.action-locked { opacity: 0.55; }
.action-progress-fill, .skill-exp-fill, .mastery-fill, .pool-fill { background: var(--patina); background-image: none; }
.action-progress-bar, .skill-exp-track, .mastery-track { background: var(--bg-sunken); border-color: var(--border-l3); border-radius: 1px; }
.skill-exp-header { background: var(--bg-l2); border: 1px solid var(--border-l3); border-left: 3px solid var(--bronze); border-radius: 2px; box-shadow: none; }
.recipe-icon { filter: none; }

/* 按钮：朱印（主）/ 铜线（次），扁平无渐变 */
.btn {
    background: var(--cinnabar);
    background-image: none;
    color: var(--paper);
    border: 1px solid #7d2a21;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(220, 209, 182, 0.18);
    font-family: var(--font-title);
    letter-spacing: 0.1em;
}
.btn:hover { background: var(--cinnabar-2); box-shadow: inset 0 0 0 1px rgba(220, 209, 182, 0.28); transform: none; }
.btn-secondary { background: transparent; background-image: none; color: var(--text-l1); border: 1px solid var(--bronze-dim); box-shadow: none; }
.btn-secondary:hover { background: var(--bg-l3); border-color: var(--bronze); }
.infuse-btn, .clone-btn { border-radius: 2px; }

/* 弹窗与通知 */
.modal { background: var(--overlay); backdrop-filter: none; }
.modal-content { background: var(--inkstone); border: 1px solid var(--bronze-dim); border-radius: 2px; box-shadow: inset 0 0 0 4px var(--inkstone), inset 0 0 0 5px var(--border-l3), var(--shadow-lg); }
.modal-title { font-family: var(--font-title); color: var(--text-l1); letter-spacing: 0.15em; }
.notification {
    border-left: 4px solid var(--accent, var(--bronze));
    border-radius: 2px;
    font-weight: normal;
}
.notification button { background: transparent !important; border: 1px solid var(--border-l3) !important; border-radius: 2px !important; }
/* 稀有触发（产出翻倍/材料节省）：边框加粗 + 轻微脉冲发光，跟"材料不足"这类日常提示拉开层级（正反馈诊断 C-1） */
.notification.notification-rare {
    border-left-width: 6px;
    border-color: var(--accent, var(--bronze));
}
@keyframes noticeRarePulse {
    0%, 100% { box-shadow: var(--shadow-lg); }
    50% { box-shadow: var(--shadow-lg), 0 0 14px 2px var(--accent, var(--bronze)); }
}

/* 输入 */
input, select { background: var(--bg-sunken); border: 1px solid var(--border-l3); border-radius: 2px; color: var(--text-l1); }
input:focus, select:focus { border-color: var(--bronze); box-shadow: none; }

/* 存档 / 装备 / 悟道 等新界面 */
.slot-card.empty { border-style: dashed; }
.equip-slot.empty, .equip-slot.locked { border-style: dashed; }
.equip-summary { background: var(--bg-l2); border: 1px solid var(--border-l3); border-radius: 2px; }
.law-resonant { color: var(--cinnabar-2); }
.clone-bar, .auto-battle-bar { border-radius: 2px; }
.clone-bar { border-color: var(--border-l3); }
.mobile-bottom-tabs { background: var(--ink) !important; border-top: 1px solid var(--bronze-dim) !important; }
.mobile-skill-btn { border-radius: 2px; }

/* 滚动条：细、暗铜 */
* { scrollbar-width: thin; scrollbar-color: var(--bronze-dim) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--bronze-dim); border-radius: 0; }
::-webkit-scrollbar-track { background: transparent; }

/* 灵石显示兼作商城入口 */
.coin-display { cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.coin-display:hover { background: var(--bg-l3) !important; border-color: var(--bronze) !important; }
body[data-panel="shop"] .coin-display { border-color: var(--cinnabar-2) !important; box-shadow: inset 0 0 0 1px var(--cinnabar) !important; }

/* 背包物品格：更小、按宽度自动排列（原来固定 3 列 + 正方形，格子很大） */
.inventory-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.item-slot { aspect-ratio: auto; min-height: 70px; padding: 6px 4px; font-size: 0.72em; gap: 1px; }
.item-icon { font-size: 1.25em; margin-bottom: 2px; line-height: 1.2; }
.item-name { font-size: 0.95em; line-height: 1.25; }
.item-qty { font-size: 0.85em; }
.item-stats { font-size: 0.68em; }

/* 突破指引：缺丹药时的提示按钮与获取方式 */
#breakThroughBtn.btn-warn { border-color: var(--color-warning); color: var(--color-warning); background: rgba(201, 138, 62, 0.1); }
.bt-guide { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border-l3); font-size: 0.85em; line-height: 1.7; color: var(--text-l3); text-align: left; }
.bt-guide-title { color: var(--text-l2); margin-bottom: 4px; }
.bt-guide-line { padding-left: 4px; }

.settings-hint { font-size: 0.8em; color: var(--text-l4); padding: 6px 2px 2px; line-height: 1.6; }

#buyConfirmBtn:disabled { opacity: 0.45; cursor: not-allowed; }

/* 战斗日志：更高、可滚动、滚动不带动整页 */
.battle-log { height: 170px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.battle-log-hint { font-size: 0.75em; color: var(--text-l4); margin: 6px 0 4px; }
.log-entry { padding: 2px 0; }

/* 战斗区域 / 秘境卡片：敌人、奖励与掉落 */
.area-reward { font-size: 0.75em; color: var(--text-l3); line-height: 1.6; margin-top: 4px; text-align: left; }
.area-drops { color: var(--text-l2); }

/* 突破特效 */
.fx-overlay { position: fixed; inset: 0; z-index: 2000; pointer-events: none; overflow: hidden; }
.fx-major { pointer-events: auto; cursor: pointer; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-text { position: absolute; left: 0; right: 0; top: 34%; text-align: center; color: var(--paper); padding: 0 16px; }
.fx-title { font-family: var(--font-title); font-size: clamp(2.6rem, 10vw, 5.8rem); letter-spacing: 0.25em; text-indent: 0.25em; text-shadow: 0 0 22px rgba(200, 170, 90, 0.6), 0 2px 0 rgba(0, 0, 0, 0.6); animation: fxTitle 4s both; }
.fx-sub { margin-top: 10px; font-size: clamp(1rem, 3.2vw, 1.4rem); letter-spacing: 0.12em; color: var(--text-l2); animation: fxSub 4s both; }
.fx-skip { margin-top: 26px; font-size: 0.8rem; color: var(--text-l4); animation: fxSub 4s both; }
@keyframes fxTitle { 0% { opacity: 0; transform: scale(1.5); filter: blur(10px); } 10% { opacity: 1; transform: scale(1); filter: blur(0); } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fxSub { 0%, 14% { opacity: 0; transform: translateY(8px); } 26% { opacity: 1; transform: translateY(0); } 82% { opacity: 1; } 100% { opacity: 0; } }
.fx-minor .fx-text { top: 36%; }
.fx-minor .fx-title { font-size: clamp(1.8rem, 6vw, 2.8rem); animation: fxTitleMinor 1.6s both; }
.fx-minor .fx-sub { animation: fxTitleMinor 1.6s 0.05s both; }
@keyframes fxTitleMinor { 0% { opacity: 0; transform: translateY(10px); } 22% { opacity: 1; transform: translateY(0); } 75% { opacity: 1; } 100% { opacity: 0; } }
.fx-seal { display: inline-block; margin-top: 14px; padding: 2px 12px 4px; background: var(--cinnabar); color: var(--paper); font-family: var(--font-title); font-size: 1.6rem; border-radius: 2px; box-shadow: inset 0 0 0 2px rgba(220, 209, 182, 0.3); animation: fxSeal 1.6s both; }
@keyframes fxSeal { 0% { opacity: 0; transform: scale(2) rotate(-8deg); } 30% { opacity: 1; transform: scale(1) rotate(-3deg); } 78% { opacity: 1; } 100% { opacity: 0; } }
.fx-law .fx-title { text-shadow: 0 0 26px rgba(160, 160, 255, 0.7), 0 2px 0 rgba(0, 0, 0, 0.6); }
.fx-nascent .fx-title { text-shadow: 0 0 26px rgba(150, 240, 226, 0.7), 0 2px 0 rgba(0, 0, 0, 0.6); }

.fx-reduced { background: rgba(10, 9, 6, 0.75); }
body.fx-shake .container { animation: fxShake 0.12s linear infinite; }
@keyframes fxShake { 0% { transform: translate(0, 0); } 25% { transform: translate(-3px, 2px); } 50% { transform: translate(3px, -2px); } 75% { transform: translate(-2px, -3px); } 100% { transform: translate(2px, 3px); } }
.fx-major .fx-text { top: 54%; }
.fx-major .fx-title { text-shadow: 0 0 14px rgba(0, 0, 0, 0.85), 0 0 26px rgba(200, 170, 90, 0.55), 0 2px 0 rgba(0, 0, 0, 0.7); }
.fx-major .fx-sub { text-shadow: 0 0 10px rgba(0, 0, 0, 0.9); }

.fx-replay-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-replay-btn { margin-top: 0; padding: 6px 14px; display: inline-flex; flex-direction: column; align-items: center; line-height: 1.3; }
.fx-replay-btn small { font-size: 0.7em; color: var(--text-l4); font-family: var(--font-body); letter-spacing: 0; }
.fx-foundation .fx-text { top: 24%; }

/* 物品图标（手绘 SVG）：文字行内 1.2em，背包格与详情里更大 */
.ico { width: 1.2em; height: 1.2em; vertical-align: -0.22em; flex: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.item-icon .ico { width: 2.1em; height: 2.1em; }
#itemIcon .ico, #buyIcon .ico { width: 1.1em; height: 1.1em; }
.food-icon .ico { width: 1.3em; height: 1.3em; }

/* 怪物立绘：战斗界面里放大显示 */
.monster-sprite .ico { width: 1em; height: 1em; vertical-align: baseline; filter: drop-shadow(2px 3px 3px rgba(0,0,0,.6)); }

/* 配方卡片：名称 → 耗时 → 产出大图 → 产出 / 消耗 → 进度条 → 精通条（参考主流放置游戏的卡片层级） */
.action-list { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
.action-item { justify-content: flex-start; align-items: stretch; gap: 3px; padding: 12px 12px 10px; }
.rc-name { font-size: 1.02em; letter-spacing: .04em; }
.rc-meta { font-size: 0.78em; margin: 0; }
.rc-art { font-size: 40px; line-height: 1; height: 54px; display: flex; align-items: center; justify-content: center; margin: 6px 0 4px; }
.rc-art .ico { width: 1.25em; height: 1.25em; filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)); }
.rc-art.locked { font-size: 30px; }
.action-item .recipe-output { margin: 0; }
.action-item .action-progress-bar { margin-top: auto; }
.rc-mastery { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 0.72em; }
.rc-mastery .mastery-track { flex: 1; max-width: none; margin: 0; }
.rc-mlv { flex: none; padding: 0 5px; border: 1px solid var(--border-l2); border-radius: 2px; background: var(--bg-l1); white-space: nowrap; }
.rc-mlv b { margin-left: 2px; }
.rc-mtxt { flex: none; color: var(--text-l4); }
.rc-mastery .infuse-btn { margin: 0; flex: none; }

/* 修为 / 灵石图标占位（静态页面里的 data-ico） */
[data-ico] .ico { width: 1.15em; height: 1.15em; }
.coin-display [data-ico] .ico { width: 1.3em; height: 1.3em; }

/* 战斗面板顶部：生命值与战斗外进食 */
.hp-restore-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 8px 12px; font-size: 0.85em; }
.hp-restore-bar .hp-rest-text b { color: var(--text-l1); }
.hp-restore-bar .hp-rest-food { color: var(--text-l3); }
.hp-restore-bar .btn { padding: 2px 10px; font-size: 0.95em; }
.hp-restore-bar .btn:disabled { opacity: .45; cursor: not-allowed; }
.hp-restore-bar .hp-rest-hint { color: var(--text-l4); font-size: 0.9em; margin-left: auto; }

/* 手机端补齐：灵石显示、战斗食物栏换行（原先 4x 速度按钮被挤出屏幕、自动食用文字被挤成竖排） */
.mobile-coin { display: none; }
@media (max-width: 768px) {
    .mobile-coin { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 12px; border: 1px solid var(--border-l3); background: var(--bg-l3); color: var(--text-l2); font-size: 0.9em; cursor: pointer; }
    .mobile-coin b { color: var(--text-l1); }
    .food-bar { flex-wrap: wrap !important; gap: 8px 12px !important; }
    .food-bar .food-slot { flex: 1 1 100% !important; }
    .auto-eat-toggle { white-space: nowrap !important; flex: none !important; }
    .auto-eat-toggle input { width: 20px !important; height: 20px !important; }
    .food-bar > div[style*="margin-left"] { display: none !important; }
    .battle-speed-control { margin-left: auto !important; flex: none !important; }
    .speed-btn { min-height: 36px !important; min-width: 40px !important; }
}

/* 新手任务条 */
.quest-banner { margin: 0 0 14px; border-left: 4px solid var(--cinnabar-2); }
.quest-banner.complete { border-color: var(--patina); border-left-color: var(--patina); }
.quest-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 6px; }
.quest-tag { font-size: 0.8em; color: var(--text-l4); }
.quest-title { color: var(--text-l1); font-size: 1.05em; }
.quest-list-link { margin-left: auto; background: none; border: none; color: var(--text-l4); text-decoration: underline; cursor: pointer; font-size: 0.8em; }
.quest-desc { color: var(--text-l3); font-size: 0.9em; line-height: 1.7; }
.quest-desc b { color: var(--border-l1); }
.quest-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 0.85em; }
.quest-progress { color: var(--text-l2); }
.quest-banner.complete .quest-progress { color: var(--patina); }
.quest-reward { color: var(--text-l3); }
.quest-btn { margin-left: auto; padding: 4px 16px; }
.quest-list .quest-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--border-l3); }
.quest-list .quest-row small { color: var(--text-l4); white-space: nowrap; }
.quest-list .quest-row.current { color: var(--text-l1); background: rgba(184, 154, 91, 0.08); }
.quest-list .quest-row.final { border-bottom: none; margin-top: 6px; color: var(--text-l2); }
/* 当前任务要点的配方卡片：脉冲描边 */
.action-item.quest-target { box-shadow: 0 0 0 2px var(--cinnabar-2), 0 0 14px rgba(196, 72, 58, 0.45); animation: questPulse 1.8s ease-in-out infinite; }
@keyframes questPulse { 0%, 100% { box-shadow: 0 0 0 2px var(--cinnabar-2), 0 0 6px rgba(196, 72, 58, 0.25); } 50% { box-shadow: 0 0 0 2px var(--cinnabar-2), 0 0 18px rgba(196, 72, 58, 0.6); } }
@media (prefers-reduced-motion: reduce) { .action-item.quest-target { animation: none; } }
@media (max-width: 768px) { .quest-banner { margin: 0 0 10px; } .quest-btn { width: 100%; margin-left: 0; min-height: 40px; } }
.quest-skip-link { margin-left: 0; }
.quest-head .quest-list-link:first-of-type { margin-left: auto; }
.quest-skip-btn { opacity: 0.85; }

/* 丹火 / 神识：货币条与用途面板 */
.cur-display { margin-top: 6px; }
.mobile-cur { margin-left: 6px; }
.skill-uses { margin: 0 0 14px; }
.use-balance { padding: 8px 12px; border: 1px solid var(--border-l3); background: var(--bg-l3); margin-bottom: 10px; color: var(--text-l2); }
.use-balance b { color: var(--text-l1); font-size: 1.15em; margin: 0 6px 0 4px; }
.use-balance small { display: block; margin-top: 4px; color: var(--text-l4); font-size: 0.8em; line-height: 1.6; }
.use-card { border: 1px solid var(--border-l3); background: var(--bg-l3); margin-bottom: 10px; padding: 8px 12px; }
.use-title { color: var(--text-l1); margin-bottom: 6px; }
.use-title small { display: block; font-weight: normal; color: var(--text-l4); font-size: 0.8em; line-height: 1.6; margin-top: 2px; }
.use-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border-l3); }
.use-row:first-of-type { border-top: none; }
.use-main { flex: 1; min-width: 0; }
.use-lv { color: var(--text-l3); font-size: 0.85em; margin-left: 6px; }
.use-effect { color: var(--text-l4); font-size: 0.82em; line-height: 1.6; }
.use-btn { flex: none; padding: 4px 14px; white-space: nowrap; }
.use-max { flex: none; color: var(--patina); font-size: 0.85em; }
.boost-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--border-l3); background: var(--bg-l3); font-size: 0.85em; }
.boost-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-l1); font-weight: bold; }
.boost-desc { color: var(--text-l4); flex: 1 1 260px; }
.boost-bal { color: var(--text-l2); }
@media (max-width: 768px) { .use-row { flex-wrap: wrap; } .use-btn { width: 100%; min-height: 38px; } }

.mobile-coins { display: none; }
@media (max-width: 768px) { .mobile-coins { display: flex; flex-wrap: wrap; gap: 6px; } .mobile-coins .mobile-cur { margin-left: 0; } }

/* ===== 侧栏与货币条重排（v6.54）：货币移到顶部；技能分组单行；导航改成 2×2 小图标 ===== */
.sidebar { width: 136px; padding: 12px 0; gap: 10px; align-items: stretch; overflow-y: auto; scrollbar-width: none; }
.sidebar::-webkit-scrollbar { display: none; }
.sidebar .logo { align-self: center; flex: none; }
.skill-tree { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 8px; gap: 3px; scrollbar-width: none; }
.skill-tree::-webkit-scrollbar { display: none; }
.sidebar .skill-item { min-height: 0; padding: 6px 8px 7px; display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 5px; text-align: left; font-size: 0.85em; }
.sidebar .skill-item .skill-name { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .skill-item .skill-level { margin: 0; font-size: 0.75em; color: var(--text-l3); }
.skill-item .skill-bar { grid-column: 1 / -1; height: 3px; overflow: hidden; }
.skill-item .skill-bar i { display: block; height: 100%; transition: width 0.3s; }
.skill-sep { height: 1px; margin: 5px 6px; background: var(--border-l3); flex: none; }
.nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 8px; flex: none; }
.nav-mini { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 6px; background: var(--bg-l2); border: 1px solid var(--border-l4); border-radius: 2px; color: var(--text-l2); cursor: pointer; font-size: 0.75em; }
.nav-mini .nav-ico { font-size: 1.5em; line-height: 1.1; }
.nav-mini:hover { background: var(--bg-l3); border-color: var(--bronze-dim); }
body[data-panel="inventory"] .nav-mini[data-nav="inventory"],
body[data-panel="equipment"] .nav-mini[data-nav="equipment"],
body[data-panel="shop"] .nav-mini[data-nav="shop"],
body[data-panel="settings"] .nav-mini[data-nav="settings"] { background: var(--bg-l3); border-color: var(--cinnabar-2); box-shadow: inset 0 0 0 1px var(--cinnabar); color: var(--text-l1); }
.currency-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.cur-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--border-l3); background: var(--bg-l3); color: var(--text-l2); font-size: 0.9em; cursor: pointer; white-space: nowrap; transition: background-color 0.2s, border-color 0.2s; }
.cur-chip:hover { background: var(--bg-l2); border-color: var(--bronze); }
.cur-chip .ico { width: 1.3em; height: 1.3em; }
.cur-chip b { color: var(--text-l1); }
.cur-chip .cur-name { color: var(--text-l3); }
body[data-panel="shop"] .cur-chip:not([data-cur]) { border-color: var(--cinnabar-2); box-shadow: inset 0 0 0 1px var(--cinnabar); }
@media (max-width: 768px) { .currency-bar { width: 100%; justify-content: flex-start; margin-left: 0; }}

@media (max-width: 768px) { .cur-chip { padding: 6px 10px; gap: 5px; } .cur-chip .cur-name { display: none; } }

/* 商城标签（灵石 / 丹火 / 神识） */
.shop-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.shop-tab { padding: 6px 16px; background: var(--bg-l2); border: 1px solid var(--border-l4); color: var(--text-l3); cursor: pointer; }
.shop-tab:hover { background: var(--bg-l3); border-color: var(--bronze-dim); }
.shop-tab.active { background: var(--bg-l3); color: var(--text-l1); }
.shop-tab .ico { width: 1.2em; height: 1.2em; vertical-align: -0.2em; }
.shop-section-title { color: var(--patina, #6f9c8a); margin: 4px 0 8px; }

/* 手机：战斗双方卡片（玩家 / 怪物）不撑破一行——列可收缩、属性小块允许换行 */
.battle-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.combatant { min-width: 0; }
.combatant-stats { flex-wrap: wrap; }
@media (max-width: 768px) { .battle-status { gap: var(--spacing-sm); } .combatant { } .combatant-stats span { padding: 2px 6px; } }

/* ===== v7.10 列表折叠 / 手机端境界感悟 ===== */
/* 过时的配方 / 区域收进顶部「更早的…」，远期未解锁的收进底部「尚未解锁」 */
.list-fold { grid-column: 1 / -1; }
.list-fold > summary { cursor: pointer; list-style: none; padding: 8px 12px; border: 1px dashed var(--border-l3); border-radius: var(--radius-md); color: var(--text-l3); font-size: 0.9em; }
.list-fold > summary::-webkit-details-marker { display: none; }
.list-fold > summary::before { content: '▸ '; color: var(--text-l4); }
.list-fold[open] > summary::before { content: '▾ '; }
.list-fold-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-md); }
/* 未解锁卡片不再放大锁图占位 */


.realm-lore-mobile { display: none; }
@media (max-width: 768px) {
    .list-fold-body { grid-template-columns: 1fr; }
    .realm-lore-mobile { display: block; margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--bronze); border-radius: var(--radius-md); font-size: 0.88em; line-height: 1.7; }
    .realm-lore-mobile > summary { cursor: pointer; list-style: none; }
    .realm-lore-mobile > summary::-webkit-details-marker { display: none; }
    .realm-lore-mobile > summary::after { content: ' ▸'; color: var(--text-l4); font-weight: normal; }
    .realm-lore-mobile[open] > summary::after { content: ' ▾'; }
    .realm-lore-mobile #realmLoreMobileBox { margin-top: 6px; }
    .rl-badge { margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: var(--cinnabar-2); color: #fff; font-size: 0.82em; font-weight: normal; }
    body.in-battle .realm-lore-mobile { display: none; }
}

/* ===== v7.11 视觉统一（第一步：修炼页 + 全局底层） =====


/* 朱砂收回：进度条、选中卡片、标签选中、标题下划线改用玉青 / 古铜 */
.progress-fill { background: var(--jade); }
.action-item.active { background: var(--bg-l3); border-color: var(--bronze); box-shadow: inset 3px 0 0 var(--bronze); }
.mobile-skill-btn.active { border-color: var(--bronze); background: var(--bg-l3); box-shadow: none; color: var(--text-l1); }
.mobile-tab-item.active { box-shadow: inset 0 2px 0 var(--bronze); }
.panel-title::after { background: var(--bronze); }
#globalProgressFill { background: var(--jade); }

/* 主面板：单层框，去掉内衬双线和角上的朱砂菱形 */
.main-panel { box-shadow: none; }
.main-panel::before, .main-panel::after { display: none; }

/* 页面标题：缩小、去发光，和技能等级条合成一组 */
.panel-title { font-size: 1.35em; text-shadow: none; margin-bottom: 0; padding-bottom: 10px; }
.panel-content .skill-exp-header { background: transparent; border: none; border-radius: 0; padding: 10px 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border-l4); }
.panel-content .skill-exp-header .skill-exp-name { display: none; }
.skill-exp-top { margin-bottom: 4px; }
.skill-exp-level { font-family: var(--font-num); letter-spacing: 0.05em; color: var(--text-l2); }
.skill-exp-track { height: 4px; border: none; border-radius: 0; background: var(--bg-sunken); }
.skill-exp-fill { background: var(--jade); }

/* 分身条：去框，只留底色 */
.clone-bar { border: none; background: var(--bg-l2); }

/* 功法：一行，切换是描边次按钮 */
.art-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.art-card-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; }
.art-card-label { color: var(--text-l4); font-size: 0.85em; }
#currentArtDisplay { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.art-name { font-family: var(--font-title); color: var(--text-l1); font-size: 1.05em; letter-spacing: 0.05em; }
.art-speed { color: var(--jade); font-size: 0.85em; }
.btn.art-switch { flex: none; width: auto; padding: 6px 14px; font-size: 0.88em; min-height: 0; }

/* 配方卡片：去掉早期主题残留的藏青底，未解锁 = 降低透明度的墨色卡 */
.action-item.disabled, .action-item.disabled:hover { background: var(--bg-l2); border-color: var(--border-l4); box-shadow: none; }
.recipe-lock-hint { background: transparent; color: var(--text-l4); padding: 0; }

.recipe-card .recipe-output { color: var(--text-l3); }
.recipe-session-count { background: var(--bg-l1); color: var(--text-l3); border: 1px solid var(--border-l4); }

@media (max-width: 768px) {
    .btn.art-switch { min-height: 36px !important; font-size: 0.88em !important; }
    /* 手机上配方卡片改成横排：左边小图，右边名称 / 耗时 / 产出，进度条和精通条占满一行 */
    .action-item.recipe-card { display: grid; column-gap: 12px; row-gap: 1px; align-items: center; text-align: left; min-height: 0 !important; padding: 10px 12px !important; }
    .recipe-card .rc-art { grid-column: 1; grid-row: 1 / span 3; font-size: 24px; margin: 0; align-self: start; }
    .recipe-card > :not(.rc-art):not(.recipe-session-count) { grid-column: 2; }
    .recipe-card .rc-name { font-size: 1em; padding-right: 56px; }
    .recipe-card .recipe-materials { justify-content: flex-start; }
    .action-item.recipe-card > .action-progress-bar, .action-item.recipe-card > .rc-mastery, .action-item.recipe-card > .clone-btn { grid-column: 1 / -1; }
    /* 技能页的标题在手机上和上方标签（「修炼 Lv.46」）重复，收起；等级与经验条保留 */
    .panel-content:has(> .skill-exp-header) > .panel-title { display: none; }
    .panel-content .skill-exp-header { padding-top: 0; }
    .recipe-card .action-progress-bar { margin-top: 6px; }
    .action-item.disabled .rc-art.locked { font-size: 18px; }
}

/* ===== v7.12 界面小图标：emoji → 线描图标（UI_GLYPHS） ===== */
.glyph { display: inline-block; position: relative; width: 1.1em; height: 1.1em; vertical-align: -0.18em; color: var(--text-l2); line-height: 1; }
.glyph > svg { width: 100%; height: 100%; display: block; }
.glyph-color > svg, .glyph-color > .ico { width: 100%; height: 100%; }
.glyph-dim { color: var(--text-l4); }
.glyph-warn { color: var(--cinnabar-2); }
.glyph-ok { color: var(--jade); }
.glyph-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 境界感悟里的行内按钮（渡劫 / 渡衰 / 精元开关）：手机端不套用 44px 大按钮 */
@media (max-width: 768px) {
    #realmLoreBox .btn, #realmLoreMobileBox .btn { min-height: 0 !important; padding: 1px 10px !important; font-size: 0.92em !important; margin-left: 6px; vertical-align: baseline; }
}
/* 设置页：标签不折行，右侧说明文字自己换行；「查看」类按钮是次要操作 */
#panel-settings .stat-row > .stat-label { flex: none; white-space: nowrap; margin-right: 10px; }
#panel-settings .stat-row > label:not(.stat-label) { flex: 1; min-width: 0; }

/* ===== v7.13 视觉统一：其余页面 ===== */
/* 选中态一律古铜（商城分类标签原来是朱砂框） */
.shop-tab.active { border-color: var(--bronze); box-shadow: inset 0 -2px 0 var(--bronze); }

/* 生活技能卡：材料不足不再整圈描橙边（缺的材料本身已标红），只稍微压暗 */
.action-item.recipe-materials-lack, .action-item.recipe-materials-lack:hover { border-color: var(--border-l3); opacity: 0.85; box-shadow: none; }
/* 「交给分身」是次要操作：缩成靠右的小按钮 */
.action-item .clone-btn { align-self: flex-end; justify-self: end; width: auto; margin: 6px 0 0; padding: 2px 10px; border-color: var(--border-l4); color: var(--text-l3); font-size: 0.78em; }
.action-item .clone-btn.on { border-color: var(--jade); color: var(--jade); background: transparent; }

/* 战斗区域卡：统一左对齐；已满足的境界要求不再单列一行 */
#battleActions .action-item { text-align: left; align-items: stretch; }
#battleActions .action-name { font-family: var(--font-title); color: var(--text-l1); letter-spacing: 0.05em; }
#battleActions .action-desc { color: var(--text-l4); font-size: 0.85em; margin-bottom: 4px; }
#battleActions .recipe-req.met { display: none; }
#battleActions .recipe-mastery { text-align: left; }
#battleActions .recipe-mastery .mastery-track { margin-left: 0; max-width: none; }

/* 克制关系、生命条：去框，只留底色 */
#battleCounterPreview { background: var(--bg-l2) !important; border: none !important; border-left: 3px solid var(--jade-dim) !important; border-radius: 0 !important; }
.hp-restore-bar { border: none; background: var(--bg-l2); }

/* 悟道法则卡：名称与等级同一行，效果文字左对齐 */
.law-card { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; text-align: left; align-items: baseline; }
.law-card > * { grid-column: 1 / -1; }
.law-card > .recipe-header { grid-column: 1; grid-row: 1; justify-content: flex-start; margin: 0; }
.law-card > .law-level { grid-column: 2; grid-row: 1; margin: 0; font-size: 1em; }
.law-card .mastery-track { margin: 6px 0 0; max-width: none; }
.law-card .law-effects { color: var(--text-l3); }

@media (max-width: 768px) {
    /* 右侧栏里和别处重复的四块（修为、境界感悟、技能经验、装备）手机上不再显示；属性、灵根与功法特效、离线收益保留 */
    .side-panel > .stat-panel:has(#cultivationXP),
    .side-panel > .stat-panel:has(#realmLoreBox),
    .side-panel > .stat-panel:has(#skillExperienceList),
    .side-panel > .stat-panel:has(#weaponDisplay) { display: none; }

    /* 商城：手机上一件一行（左图标，中间名称和说明，右边价格），不再三列窄卡把价格折成两行 */
    #panel-shop .inventory-grid { grid-template-columns: 1fr; }
    #panel-shop .shop-item { display: grid !important; grid-template-columns: 34px 1fr auto; column-gap: 12px; align-items: center; text-align: left !important; padding: 10px 12px !important; }
    #panel-shop .shop-item > div { margin: 0 !important; }
    #panel-shop .shop-item > div:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; font-size: 26px !important; text-align: center; }
    #panel-shop .shop-item > div:nth-child(2) { grid-column: 2; grid-row: 1; }
    #panel-shop .shop-item > div:nth-child(3) { grid-column: 2; grid-row: 2; }
    #panel-shop .shop-item > div:nth-child(n+4) { grid-column: 3; grid-row: 1 / span 2; text-align: right; white-space: nowrap; font-size: 0.9em; }
    #panel-shop .shop-item > div:nth-child(5) { grid-row: 2; align-self: end; font-size: 0.75em; }
}
/* 商城卡片名称原来是玉青色（行内样式），玉青只用于进度和正向数值，名称改回正文色 */
#panel-shop .shop-item > div:nth-child(2) { color: var(--text-l1) !important; font-family: var(--font-title); letter-spacing: 0.04em; }
#panel-shop .shop-item > div:nth-child(3) { color: var(--text-l4) !important; }
#panel-shop .shop-item { background: var(--bg-l2) !important; border-color: var(--border-l3) !important; border-radius: 2px !important; }
#panel-shop .shop-item:hover { border-color: var(--bronze) !important; }

/* ===== v7.15 突破标题：对准画面高潮（--fx-peak）用笔锋从左到右扫出，副标题随后浮现，结尾一起淡出 ===== */
.fx-major .fx-title { animation: fxBrushIn 0.9s cubic-bezier(.2, .8, .2, 1) var(--fx-peak, 1.5s) both, fxFadeOut 0.6s ease-in calc(var(--fx-dur, 4s) - 0.6s) forwards; }
.fx-major .fx-sub { animation: fxRiseIn 0.6s ease-out calc(var(--fx-peak, 1.5s) + 0.5s) both, fxFadeOut 0.6s ease-in calc(var(--fx-dur, 4s) - 0.6s) forwards; }
.fx-major .fx-skip { animation: fxRiseIn 0.6s ease-out 0.6s both, fxFadeOut 0.6s ease-in calc(var(--fx-dur, 4s) - 0.6s) forwards; }
@keyframes fxBrushIn {
    0% { opacity: 0; clip-path: inset(-30% 100% -30% 0); filter: blur(6px); letter-spacing: 0.45em; }
    55% { opacity: 1; filter: blur(0); }
    100% { opacity: 1; clip-path: inset(-30% 0 -30% 0); filter: blur(0); letter-spacing: 0.25em; }
}
@keyframes fxRiseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fxFadeOut { to { opacity: 0; } }
/* 小境界：印章盖下来时带一点冲击 */
.fx-minor .fx-seal { animation: fxSealHit 1.6s both; }
@keyframes fxSealHit { 0% { opacity: 0; transform: scale(2.4) rotate(-10deg); } 22% { opacity: 1; transform: scale(0.92) rotate(-3deg); } 30% { transform: scale(1.04) rotate(-3deg); } 36%, 78% { opacity: 1; transform: scale(1) rotate(-3deg); } 100% { opacity: 0; transform: scale(1) rotate(-3deg); } }
.fx-reduced .fx-title, .fx-reduced .fx-sub, .fx-reduced .fx-skip, .fx-reduced .fx-seal { animation: none !important; opacity: 1; }
/* 标题后面垫一层柔和的墨色，光柱 / 光环从文字后面穿过时也看得清 */
.fx-text { isolation: isolate; }
.fx-text::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(640px, 110vw); height: 220px; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(8, 7, 5, 0.72) 0%, rgba(8, 7, 5, 0.45) 45%, rgba(8, 7, 5, 0) 72%); z-index: -1; pointer-events: none; }
.fx-reduced .fx-text::before { display: none; }
.fx-major .fx-text::before { animation: fxRiseIn 0.6s ease-out var(--fx-peak, 1.5s) both, fxFadeOut 0.6s ease-in calc(var(--fx-dur, 4s) - 0.6s) forwards; }
.fx-minor .fx-text::before { animation: fxTitleMinor 1.6s both; }

/* ===== v7.15 界面反馈动画 ===== */
/* 战斗：敌人呼吸待机 / 受击 / 暴击 / 出场 */
.monster-sprite { display: inline-block; transform-origin: 50% 85%; animation: spriteIdle 3.2s ease-in-out infinite; }
@keyframes spriteIdle { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.015); } }
.monster-sprite.hit { animation: spriteHit 0.28s ease-out, spriteIdle 3.2s ease-in-out 0.28s infinite; }
@keyframes spriteHit { 0% { transform: translateX(0); filter: brightness(1); } 25% { transform: translateX(7px) rotate(3deg); filter: brightness(2.2) saturate(0.4); } 60% { transform: translateX(-4px) rotate(-1.5deg); filter: brightness(1.3); } 100% { transform: none; filter: none; } }
.monster-sprite.hit-crit { animation: spriteCrit 0.45s ease-out, spriteIdle 3.2s ease-in-out 0.45s infinite; }
@keyframes spriteCrit { 0% { transform: scale(1); filter: brightness(1); } 15% { transform: translateX(10px) scale(1.12) rotate(5deg); filter: brightness(2.8) saturate(0.2); } 45% { transform: translateX(-7px) scale(0.96) rotate(-3deg); filter: brightness(1.4); } 100% { transform: none; filter: none; } }
.monster-sprite.spawn { animation: spriteSpawn 0.5s cubic-bezier(.2, .8, .2, 1.2), spriteIdle 3.2s ease-in-out 0.5s infinite; }
@keyframes spriteSpawn { 0% { opacity: 0; transform: translateY(26px) scale(0.7); filter: blur(4px) brightness(0.3); } 100% { opacity: 1; transform: none; filter: none; } }
/* 暴击剑光：受暴击时一道斜斩白光划过敌人 */
.battle-scene:has(.monster-sprite.hit-crit)::after { content: ''; position: absolute; left: 50%; top: 50%; width: 160px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff8e0 40%, #fff 50%, #fff8e0 60%, transparent); box-shadow: 0 0 12px 2px rgba(255, 236, 180, 0.8); transform: translate(-50%, -50%) rotate(-28deg) scaleX(0); animation: critSlash 0.32s ease-out forwards; pointer-events: none; }
@keyframes critSlash { 0% { transform: translate(-50%, -50%) rotate(-28deg) scaleX(0); opacity: 1; } 60% { transform: translate(-50%, -50%) rotate(-28deg) scaleX(1.1); opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(-28deg) scaleX(1.2); opacity: 0; } }
/* 自己挨打：状态栏泛红一闪 */
.combatant.player.hurt { animation: playerHurt 0.4s ease-out; }
@keyframes playerHurt { 0% { box-shadow: inset 0 0 0 1px rgba(196, 72, 58, 0), 0 0 0 rgba(196, 72, 58, 0); } 30% { box-shadow: inset 0 0 0 1px rgba(196, 72, 58, 0.9), 0 0 16px rgba(196, 72, 58, 0.45); transform: translateX(-2px); } 100% { box-shadow: none; transform: none; } }
/* 击杀：墨色光尘向外迸散 */
.defeat-burst { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(232, 212, 160, 0.55) 0%, rgba(232, 212, 160, 0.18) 35%, transparent 65%); animation: defeatBurst 0.8s ease-out forwards; }
.defeat-burst::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(232, 212, 160, 0.7); animation: defeatRing 0.8s ease-out forwards; }
@keyframes defeatBurst { 0% { transform: scale(0.3); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes defeatRing { 0% { transform: scale(0.4); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; border-width: 0.5px; } }
/* 天劫：雷光闪屏；心魔：血色；三衰：灰败 */
.trib-flash { position: absolute; inset: 0; pointer-events: none; animation: tribFlash 0.6s ease-out forwards; }
.trib-thunder { background: radial-gradient(ellipse at 50% 0%, rgba(230, 230, 255, 0.85), rgba(176, 168, 255, 0.35) 45%, transparent 75%); }
.trib-thunder::before { content: ''; position: absolute; left: 46%; top: 0; width: 26px; height: 62%; background: linear-gradient(180deg, #fff, rgba(200, 196, 255, 0.4)); clip-path: polygon(40% 0, 75% 0, 52% 38%, 80% 38%, 30% 100%, 44% 52%, 18% 52%); filter: drop-shadow(0 0 8px #c8c4ff); }
.trib-demon { background: radial-gradient(ellipse at center, rgba(196, 72, 58, 0.5), transparent 70%); }
.trib-shuai { background: radial-gradient(ellipse at center, rgba(120, 112, 96, 0.55), transparent 70%); }
@keyframes tribFlash { 0% { opacity: 0; } 12% { opacity: 1; } 30% { opacity: 0.4; } 42% { opacity: 0.9; } 100% { opacity: 0; } }
/* 元气化形 / 元婴离体 / 法则之击：带名字的飘字 */
.damage-float.strike { font-size: 1.25em; line-height: 1.1; text-align: center; animation: strikeFloat 1.6s ease-out forwards; }
.damage-float.strike small { display: block; font-size: 0.55em; letter-spacing: 0.1em; opacity: 0.9; }
.strike-qiForm { color: var(--float-qi); }
.strike-nascent { color: var(--float-nascent); }
.strike-lawStrike { color: var(--float-law); font-size: 1.5em; }
@keyframes strikeFloat { 0% { transform: translateY(8px) scale(0.7); opacity: 0; } 15% { transform: translateY(0) scale(1.1); opacity: 1; } 30% { transform: scale(1); } 100% { transform: translateY(-80px); opacity: 0; } }

/* 配方完成：卡片上飘出收获 */
.gain-float { position: fixed; z-index: 1500; transform: translate(-50%, 0); pointer-events: none; white-space: nowrap; font-family: var(--font-num); font-size: 1.08rem; font-weight: bold; letter-spacing: 0.03em; color: #bdeed8; padding: 1px 10px; border-radius: 12px; background: radial-gradient(ellipse at center, rgba(12, 20, 16, 0.75), rgba(12, 20, 16, 0) 75%); text-shadow: 0 0 10px rgba(111, 156, 138, 0.9), 0 1px 2px #000; animation: gainFloat 1.3s cubic-bezier(.2, .7, .3, 1) forwards; }
.gain-float.gain-item { color: var(--text-l1); text-shadow: 0 0 8px rgba(200, 170, 90, 0.55), 0 1px 2px #000; }
.gain-float .gain-ico { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.25em; margin-right: 3px; }
.gain-float .gain-ico .ico { width: 100%; height: 100%; }
@keyframes gainFloat { 0% { opacity: 0; transform: translate(-50%, 6px) scale(0.85); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 30% { transform: translate(-50%, -4px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -46px); } }

/* 顶栏修为条：修炼时流光扫过，修为满了泛光呼吸 */
#cultivationProgress.flowing { background-image: linear-gradient(90deg, transparent, rgba(255, 250, 230, 0.35), transparent); background-size: 80px 100%; background-repeat: no-repeat; animation: barFlow 3.2s ease-in-out infinite; }
@keyframes barFlow { 0% { background-position: -80px 0; } 60%, 100% { background-position: calc(100% + 80px) 0; } }
#cultivationProgress.full { animation: barFull 1.8s ease-in-out infinite; background-image: none; }
@keyframes barFull { 0%, 100% { box-shadow: 0 0 0 rgba(143, 207, 179, 0); filter: brightness(1); } 50% { box-shadow: 0 0 12px rgba(143, 207, 179, 0.75); filter: brightness(1.25); } }

/* 中央小庆祝（技能升级 / 精通 / 法则里程碑）：出现时一圈光环扩散 */
.quick-celebration.show::before { content: ''; position: absolute; inset: -2px; border-radius: 22px; border: 1px solid var(--bronze); animation: celebRing 0.8s ease-out forwards; pointer-events: none; }
@keyframes celebRing { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.35, 1.8); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .monster-sprite, .monster-sprite.hit, .monster-sprite.hit-crit, .monster-sprite.spawn, .combatant.player.hurt,
    #cultivationProgress.full, #cultivationProgress.flowing, .quick-celebration.show::before { animation: none !important; }
    .battle-scene:has(.monster-sprite.hit-crit)::after { display: none; }
}

/* v7.19 秘境久战狂暴：敌人头像泛血红光晕并缓慢脉动 */
.monster-sprite.enraged { filter: drop-shadow(0 0 10px rgba(196, 72, 58, 0.95)) saturate(1.6); }
.battle-scene:has(.monster-sprite.enraged) { box-shadow: inset 0 0 28px rgba(196, 72, 58, 0.35); animation: enragePulse 1.6s ease-in-out infinite; }
@keyframes enragePulse { 0%, 100% { box-shadow: inset 0 0 20px rgba(196, 72, 58, 0.25); } 50% { box-shadow: inset 0 0 36px rgba(196, 72, 58, 0.55); } }
@media (prefers-reduced-motion: reduce) { .battle-scene:has(.monster-sprite.enraged) { animation: none; } }


/* ==========================================================================
   v7.20 配色主题：松烟铜器（默认）/ 宣纸墨韵 / 青绿山水 / 玄夜星宿
   <html data-theme> 由页面头部的小脚本在样式表生效前写好；没有该属性时按松烟铜器。
   各主题只换这组变量，界面里的颜色一律引用变量（不要再写死颜色，否则浅色主题会出现深色块 / 看不见的白字）。
   语义：bg-l1 主面板底、bg-l2 卡片、bg-l3 抬起 / 选中、bg-sunken 进度条底槽与输入框；
        bronze 结构与选中、jade 进度与正向数值、cinnabar 境界印章 / 主按钮 / 待办；
        text-l1 正文、text-l2 强调（标题 / 数值）、text-l3 次要、text-l4 提示（对比度均 ≥ 4.5）；
        gold 金色强调字、azure 冷色信息字、on-accent 朱砂按钮上的字、overlay 弹窗遮罩、page-glow 页面顶部的一层光
   ========================================================================== */
:root[data-theme="xuanzhi"] {
    --float-crit: #b07a10; --float-qi: #2a7d62; --float-nascent: #1f7685; --float-law: #5e44b3; --float-shadow: 0 0 3px rgba(255, 252, 244, 0.95), 0 1px 2px rgba(60, 48, 30, 0.35); --float-crit-shadow: 0 0 4px rgba(255, 252, 244, 0.95), 0 1px 3px rgba(60, 48, 30, 0.4);
    color-scheme: light;
    --ink: #e9e2cf; --inkstone: #f3eddf; --inkstone-2: #e6dcc6; --paper: #fbf6ea;
    --bronze: #2f5566; --bronze-dim: #b9aa8a; --patina: #3f7f6a; --jade: #3f7f6a; --jade-dim: #a9c4b8;
    --cinnabar: #a83a2e; --cinnabar-2: #b8402f;
    --bg-l1: #efe8d6; --bg-l2: #f6f1e4; --bg-l3: #fbf8ef; --bg-sunken: #ddd3bd;
    --border-l1: #2f5566; --border-l2: #3f7f6a; --border-l3: #c9b994; --border-l4: #ddd0b3;
    --text-l1: #231f19; --text-l2: #7d4f22; --text-l3: #4a4438; --text-l4: #675f4e;
    --gold: #8a6420; --violet: #6a4fa3; --azure: #3d6f8f; --color-hp: #3f7f6a; --color-warning: #9c5f18; --color-danger: #b33a2c;
    --on-accent: #fbf6ea; --overlay: rgba(40, 34, 24, 0.45); --page-glow: rgba(255, 255, 255, 0.6);
    --shadow-lg: 0 4px 14px rgba(60, 48, 30, 0.18);
}
:root[data-theme="qinglv"] {
    --float-crit: #f3c34d; --float-qi: #8fcfb3; --float-nascent: #a8ecf0; --float-law: #d8c8ff; --float-shadow: 2px 2px 4px #000; --float-crit-shadow: 0 0 6px rgba(243, 195, 77, 0.7), 2px 2px 4px #000;
    color-scheme: dark;
    --ink: #0b1517; --inkstone: #10202a; --inkstone-2: #172c36; --paper: #ece7d3;
    --bronze: #c9a85c; --bronze-dim: #2f5560; --patina: #4fae96; --jade: #4fae96; --jade-dim: #2a5e55;
    --cinnabar: #b8402f; --cinnabar-2: #d0523d;
    --bg-l1: #0b1517; --bg-l2: #112128; --bg-l3: #16303a; --bg-sunken: #071012;
    --border-l1: #c9a85c; --border-l2: #4fae96; --border-l3: #2f5560; --border-l4: #1d3640;
    --text-l1: #eceadb; --text-l2: #d6b86e; --text-l3: #b9c9c4; --text-l4: #8ea7a3;
    --gold: #d6b86e; --violet: #b8a4f0; --azure: #7fb5d6; --color-hp: #4fae96; --color-warning: #d9a050; --color-danger: #e0604c;
    --on-accent: #f4efdc; --overlay: rgba(4, 10, 12, 0.78); --page-glow: rgba(61, 126, 166, 0.35);
    --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.6);
}
:root[data-theme="xuanye"] {
    --float-crit: #f3c34d; --float-qi: #8fcfb3; --float-nascent: #a8ecf0; --float-law: #d8c8ff; --float-shadow: 2px 2px 4px #000; --float-crit-shadow: 0 0 6px rgba(243, 195, 77, 0.7), 2px 2px 4px #000;
    color-scheme: dark;
    --ink: #0c0b17; --inkstone: #14122a; --inkstone-2: #1d1a38; --paper: #ece9f7;
    --bronze: #e0c27a; --bronze-dim: #3b3566; --patina: #7fa4e6; --jade: #7fa4e6; --jade-dim: #34406a;
    --cinnabar: #b8403a; --cinnabar-2: #d4524a;
    --bg-l1: #0c0b17; --bg-l2: #13122a; --bg-l3: #1b1936; --bg-sunken: #07060f;
    --border-l1: #e0c27a; --border-l2: #8b7bd8; --border-l3: #3e3870; --border-l4: #262248;
    --text-l1: #ece9f7; --text-l2: #e0c27a; --text-l3: #bdb8d6; --text-l4: #948fb6;
    --gold: #e0c27a; --violet: #c4b4ff; --azure: #9db8f0; --color-hp: #7fa4e6; --color-warning: #e0a85c; --color-danger: #e0645a;
    --on-accent: #f6f3ff; --overlay: rgba(5, 4, 12, 0.8); --page-glow: rgba(139, 123, 216, 0.32);
    --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.65);
}
:root, :root[data-theme="songyan"] {
    --float-crit: #f3c34d; --float-qi: #8fcfb3; --float-nascent: #a8ecf0; --float-law: #d8c8ff; --float-shadow: 2px 2px 4px #000; --float-crit-shadow: 0 0 6px rgba(243, 195, 77, 0.7), 2px 2px 4px #000;
    color-scheme: dark;
    --ink: #15140f; --inkstone: #1f1e18; --inkstone-2: #292720; --paper: #dcd1b6;
    --bronze: #a68a52; --bronze-dim: #6b5d3f; --patina: #6f9c8a; --jade: #6f9c8a; --jade-dim: #3f5a50;
    --cinnabar: #a83a2e; --cinnabar-2: #c4483a;
    --bg-l1: #15140f; --bg-l2: #1c1b15; --bg-l3: #24231b; --bg-sunken: #0e0d0a;
    --border-l1: #a68a52; --border-l2: #6f9c8a; --border-l3: #5c5039; --border-l4: #38352b;
    --text-l1: #e3d8bd; --text-l2: #b9a878; --text-l3: #b3aa93; --text-l4: #9a917c;
    --gold: #c2a25f; --violet: #b39ddb; --azure: #7d9bb5; --color-hp: #6f9c8a; --color-warning: #c98a3e; --color-danger: #c4483a;
    --on-accent: #dcd1b6; --overlay: rgba(10, 9, 6, 0.8); --page-glow: rgba(60, 52, 34, 0.35);
    --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.6);
}
/* 玄夜星宿：背景再撒一层稀疏星点 */
:root[data-theme="xuanye"] body {
    background-image: radial-gradient(ellipse at 50% -10%, var(--page-glow), transparent 60%),
        radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.55), transparent), radial-gradient(1px 1px at 70% 15%, rgba(255, 255, 255, 0.45), transparent),
        radial-gradient(1.5px 1.5px at 85% 60%, rgba(255, 255, 255, 0.4), transparent), radial-gradient(1px 1px at 35% 80%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 55% 45%, rgba(255, 255, 255, 0.3), transparent), radial-gradient(1px 1px at 10% 70%, rgba(255, 255, 255, 0.35), transparent);
}
/* 宣纸墨韵：纸纹压淡，滚动条改浅 */
:root[data-theme="xuanzhi"] body::before { opacity: 0.035; }

/* 飘字与血条数字：飘字颜色 / 光晕随主题；血条数字统一白字加深色描边，压在填充条或空底槽上都看得清 */
.damage-float, .damage-float.strike { text-shadow: var(--float-shadow); }
.damage-float.crit { text-shadow: var(--float-crit-shadow); }
.hp-text { color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8); }
.progress-fill span, #progressText { color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.7); }
/* 切换配色主题的那一帧不做过渡（setColorTheme 加上、两帧后移除） */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }

/* v7.23 太乙叠域：已选的第一个灵域 */
.domain-card.selected { border-color: var(--bronze); background: var(--bg-l3); box-shadow: inset 0 0 0 1px var(--bronze); }

/* ==========================================================================
   v7.25 战斗舞台（国漫风）：水墨山水背景 + 左右两张立绘 + 漫画式出手特效。美术在 art.js（BattleArt）
   ========================================================================== */
@font-face { font-family: 'ZhiMangXing'; src: url('fonts/zhimangxing-subset.woff2') format('woff2'); font-display: swap; }
:root { --font-brush: 'ZhiMangXing', 'STXingkai', 'KaiTi', 'STKaiti', serif; }
.battle-scene.bs-stage { position: relative; height: 250px; overflow: hidden; padding: 0; border: 1px solid #000; background: #0c0b09; border-radius: 4px; isolation: isolate; }
.bs-stage .bs-bg { position: absolute; inset: 0; z-index: 0; }
.bs-stage .bs-bg-svg { width: 100%; height: 100%; display: block; }
.bs-vignette { position: absolute; inset: 0; z-index: 4; pointer-events: none; box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.75); }
.battle-scene.bs-stage:has(.monster-sprite.hit-crit)::after { display: none; }   /* 旧版暴击剑光，新舞台用 BattleArt.slash */
.bs-fighter { position: absolute; bottom: 4px; z-index: 2; width: min(40%, 170px); line-height: 0; }
.bs-fighter .bs-art { width: 100%; height: auto; overflow: visible; }
.bs-player { left: 3%; }
.bs-stage .monster-sprite { position: absolute; right: 3%; left: auto; top: auto; bottom: 4px; transform: none; font-size: 0; width: min(40%, 170px); line-height: 0; z-index: 2; animation: none; }
.bs-stage .monster-sprite .bs-art { animation: bsIdle 3.4s ease-in-out infinite; transform-origin: 50% 90%; }
.bs-stage .monster-sprite .bs-boss { transform: scale(1.12); }
.bs-player .bs-art { animation: bsBreathe 4s ease-in-out infinite; transform-origin: 40% 95%; }
.bs-art.bs-mirror { transform: scaleX(-1); }
.bs-stage .monster-sprite .bs-art.bs-mirror { animation: none; }
.bs-fx-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.bs-stage .damage-float-layer { z-index: 6; }

@keyframes bsBreathe { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-1px) scaleY(1.012); } }
@keyframes bsIdle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.bs-art .bs-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: bsFlame 1.6s ease-in-out infinite; }
.bs-art .bs-flame.f2 { animation-duration: 2.1s; animation-delay: -0.7s; }
@keyframes bsFlame { 0%, 100% { transform: scale(1, 1); opacity: 0.85; } 50% { transform: scale(1.06, 1.14); opacity: 1; } }
.bs-art .bs-ribbon, .bs-art .bs-hair { transform-box: fill-box; transform-origin: 100% 30%; animation: bsWave 2.6s ease-in-out infinite; }
@keyframes bsWave { 0%, 100% { transform: rotate(0deg) skewY(0deg); } 50% { transform: rotate(-4deg) skewY(3deg); } }
.bs-art .bs-float { animation: bsIdle 3s ease-in-out infinite; }
.bs-art .bs-halo { transform-box: fill-box; transform-origin: center; animation: bsHalo 8s linear infinite; }
@keyframes bsHalo { to { transform: rotate(360deg); } }
.bs-art .bs-eye { animation: bsEye 2.4s ease-in-out infinite; }
@keyframes bsEye { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.bs-art .bs-sword { animation: bsSword 2.8s ease-in-out infinite; }
@keyframes bsSword { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }
.bs-art .bs-crackle { animation: bsCrackle 0.18s steps(2) infinite; }
@keyframes bsCrackle { 50% { opacity: 0.75; } }
.bs-art .bs-wings { transform-box: fill-box; transform-origin: center; animation: bsFlap 0.9s ease-in-out infinite; }
@keyframes bsFlap { 50% { transform: scaleX(0.86); } }
.bs-bg-svg .bs-mist { animation: bsDrift 14s ease-in-out infinite alternate; }
.bs-bg-svg .bs-mist2 { animation-duration: 19s; animation-direction: alternate-reverse; }
@keyframes bsDrift { to { transform: translateX(-36px); } }
.bs-bg-svg .bs-storm { animation: bsStorm 4s ease-in-out infinite; }
@keyframes bsStorm { 50% { opacity: 0.8; } }

.bs-stage .monster-sprite.hit .bs-art { animation: bsHit 0.3s ease-out, bsIdle 3.4s ease-in-out 0.3s infinite; }
.bs-stage .monster-sprite.hit-crit .bs-art { animation: bsHitCrit 0.45s ease-out, bsIdle 3.4s ease-in-out 0.45s infinite; }
@keyframes bsHit { 0% { transform: translateX(0); filter: brightness(1); } 25% { transform: translateX(8px); filter: brightness(2.4); } 100% { transform: translateX(0); filter: brightness(1); } }
@keyframes bsHitCrit { 0% { transform: translateX(0) scale(1); filter: brightness(1); } 20% { transform: translateX(14px) scale(0.94); filter: brightness(3) contrast(1.4); } 100% { transform: none; filter: none; } }
.bs-stage .monster-sprite.spawn .bs-art { animation: bsSpawn 0.6s cubic-bezier(.2, .8, .2, 1.2), bsIdle 3.4s ease-in-out 0.6s infinite; }
@keyframes bsSpawn { from { transform: translateY(30px) scale(0.9); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }
.bs-stage .monster-sprite.dying .bs-art { animation: bsDie 0.6s ease-in forwards; }
@keyframes bsDie { to { transform: translateY(10px) scale(1.06); opacity: 0; filter: blur(6px) brightness(0.3); } }
.bs-player.hurt .bs-art { animation: bsHurt 0.32s ease-out; }
@keyframes bsHurt { 25% { transform: translateX(-8px); filter: brightness(1.6) sepia(1) hue-rotate(-30deg) saturate(4); } }
.bs-stage.bs-shake { animation: bsShake 0.35s ease-out; }
@keyframes bsShake { 20% { transform: translate(-5px, 3px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -1px); } }
.bs-stage .monster-sprite.enraged .bs-art { filter: drop-shadow(0 0 12px rgba(255, 60, 40, 0.95)) saturate(1.6); }

.bs-fx-slash { position: absolute; width: 46%; max-width: 210px; transform: translate(-50%, -50%); overflow: visible; }
.bs-fx-slash.crit { width: 58%; max-width: 260px; }
.bs-slash-stroke { animation: bsSlash 0.42s ease-out forwards; }
@keyframes bsSlash { 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 45% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.bs-fx-lines { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; animation: bsLines 0.4s steps(3) forwards; }
@keyframes bsLines { 0% { opacity: 0.95; } 100% { opacity: 0; } }
.bs-stamp { position: absolute; transform: translate(-50%, -50%) rotate(var(--rot)); animation: bsStamp 0.9s cubic-bezier(.2, 1.4, .3, 1) forwards; white-space: nowrap; }
.bs-stamp-ink { position: absolute; left: 50%; top: 50%; width: 170%; height: 150%; transform: translate(-50%, -50%); opacity: 0.88; }
.bs-stamp span { position: relative; font-family: var(--font-brush); font-size: 46px; line-height: 1; color: var(--c); -webkit-text-stroke: 2px #0e0c09; paint-order: stroke fill; text-shadow: 0 0 10px var(--c), 3px 3px 0 #0e0c09; }
.bs-stamp.big span { font-size: 84px; }
@keyframes bsStamp { 0% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(2.4); opacity: 0; } 18% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(0.92); opacity: 1; } 30% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); } 78% { opacity: 1; } 100% { transform: translate(-50%, -60%) rotate(var(--rot)) scale(1.04); opacity: 0; } }
.bs-fx-claw { position: absolute; width: 22%; max-width: 100px; animation: bsClaw 0.45s ease-out forwards; }
@keyframes bsClaw { 0% { clip-path: inset(0 0 100% 0); opacity: 1; } 40% { clip-path: inset(0 0 0 0); } 100% { opacity: 0; } }
.bs-fx-bolt { position: absolute; top: 0; width: 28%; height: 78%; animation: bsBolt 0.5s steps(4) forwards; }
@keyframes bsBolt { 0%, 50% { opacity: 1; } 25%, 75% { opacity: 0.3; } 100% { opacity: 0; } }
.bs-fx-nascent { position: absolute; left: 18%; top: 42%; width: 36px; animation: bsNascent 0.65s cubic-bezier(.5, 0, .7, 1) forwards; }
@keyframes bsNascent { 0% { transform: translate(0, 0) scale(0.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(min(46vw, 230px), -10px) scale(1.2); opacity: 0.2; } }
.bs-fx-ink { position: absolute; width: 34%; max-width: 160px; transform: translate(-50%, -50%); overflow: visible; }
.bs-ink-dot { animation: bsInk 0.75s ease-out forwards; }
@keyframes bsInk { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.bs-ink-ring { transform-box: fill-box; transform-origin: center; animation: bsRing 0.6s ease-out forwards; }
@keyframes bsRing { from { transform: scale(0.3); opacity: 1; } to { transform: scale(2); opacity: 0; } }

.bs-stage .damage-float { font-family: var(--font-brush); font-size: 30px; font-weight: normal; -webkit-text-stroke: 1.5px #0e0c09; paint-order: stroke fill; text-shadow: 2px 2px 0 #0e0c09, 0 0 8px rgba(0, 0, 0, 0.6); letter-spacing: 0.02em; }
.bs-stage .damage-float.crit { font-size: 44px; color: #ffd86b !important; text-shadow: 3px 3px 0 #7a1a10, 0 0 14px rgba(255, 120, 40, 0.9); }
.bs-stage .damage-float.strike { font-size: 32px; }
.bs-stage .damage-float.strike small { font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
    .bs-art *, .bs-art, .bs-bg-svg * { animation: none !important; }
    .bs-fx-layer { display: none; }
}
@media (max-width: 480px) { .battle-scene.bs-stage { height: 220px; } .bs-stamp span { font-size: 38px; } .bs-stamp.big span { font-size: 64px; } }

/* v7.25 突破特效的漫画层：集中线在高潮时射出，打坐修士从下方升起；境界名换毛笔字、粗描边 */
.fx-manga { position: absolute; inset: 0; pointer-events: none; }
.fx-burst-lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: fxBurstLines 0.9s steps(4) var(--fx-peak, 1.5s) both; }
@keyframes fxBurstLines { 0% { opacity: 0; transform: scale(1.25); } 15% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(0.96); } }
.fx-figure { position: absolute; left: 50%; bottom: 6%; width: min(40vw, 220px); transform: translateX(-50%); opacity: 0; animation: fxFigureRise 1.4s cubic-bezier(.2, .8, .2, 1) 0.2s both, fxFadeOut 0.6s ease-in calc(var(--fx-dur, 4s) - 0.6s) forwards; }
.fx-figure .bs-art { width: 100%; height: auto; overflow: visible; }
.fx-figure .bs-flame { animation-duration: 1s; }
@keyframes fxFigureRise { from { opacity: 0; transform: translate(-50%, 40px); filter: brightness(0.3) blur(3px); } to { opacity: 1; transform: translate(-50%, 0); filter: none; } }
.fx-major .fx-title { font-family: var(--font-brush); letter-spacing: 0.12em; text-indent: 0.12em; font-size: clamp(3.6rem, 19vw, 8rem); line-height: 1.05; color: #fff3cf; -webkit-text-stroke: 3px #0e0c09; paint-order: stroke fill; }
.fx-major .fx-sub { font-family: var(--font-brush); font-size: clamp(1.2rem, 4.4vw, 1.9rem); color: #f3e2b8; -webkit-text-stroke: 1px #0e0c09; paint-order: stroke fill; }
@media (prefers-reduced-motion: reduce) { .fx-manga { display: none; } }

/* ==========================================================================
   v7.26 配方卡片漫画风：毛笔字配方名 + 毛笔笔触下划线；产出大图放进技能色光盘（圆相笔触环，进行中时旋转发光）；
   修炼配方是书法字；未解锁盖朱红「封」印；进度条是笔刷收尾。点缀色 --rc-c 按技能，四套配色主题都适用
   ========================================================================== */
.recipe-card { --rc-c: var(--jade); }
.rc-skill-cultivation { --rc-c: #5aa8ef; }
.rc-skill-alchemy { --rc-c: #36b383; }
.rc-skill-forging { --rc-c: #d99a3a; }
.rc-skill-farming { --rc-c: #79b84e; }
.rc-skill-mining { --rc-c: #8aa0b8; }
.rc-skill-danhuo { --rc-c: #f0703f; }
.rc-skill-shenshi { --rc-c: #a283f0; }
.rc-skill-wudao { --rc-c: #d8b445; }
.rc-skill-daoguo { --rc-c: #d877b6; }
.recipe-card .rc-name { font-family: var(--font-brush); font-size: 1.42em; letter-spacing: 0.06em; line-height: 1.15; color: var(--text-l1); }
.recipe-card .rc-name::after { content: ''; display: block; width: 72%; height: 6px; margin: 2px auto 0; background: var(--rc-c); opacity: 0.6;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; }
.recipe-card .rc-art { height: 72px; margin: 4px 0 2px; }
.rc-medal { position: relative; width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--rc-c) 36%, transparent) 0%, color-mix(in srgb, var(--rc-c) 12%, transparent) 52%, transparent 70%); }
.rc-medal::before { content: ''; position: absolute; inset: 1px; background: var(--rc-c); opacity: 0.7;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M52 6 C79 6 95 27 93 52 C91 77 70 95 47 94 C25 93 6 75 7 50 C8 32 19 16 34 10 L36 15 C23 21 13 34 13 50 C13 71 29 87 48 88 C68 89 85 73 87 52 C89 31 74 12 52 12 Z'/><circle cx='35' cy='12' r='3.2'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M52 6 C79 6 95 27 93 52 C91 77 70 95 47 94 C25 93 6 75 7 50 C8 32 19 16 34 10 L36 15 C23 21 13 34 13 50 C13 71 29 87 48 88 C68 89 85 73 87 52 C89 31 74 12 52 12 Z'/><circle cx='35' cy='12' r='3.2'/></svg>") center / contain no-repeat; }
.recipe-card.active .rc-medal::before { opacity: 1; animation: rcSpin 6s linear infinite; filter: drop-shadow(0 0 5px var(--rc-c)); }
.recipe-card.active .rc-medal { background: radial-gradient(circle, color-mix(in srgb, var(--rc-c) 55%, transparent) 0%, color-mix(in srgb, var(--rc-c) 18%, transparent) 55%, transparent 72%); }
@keyframes rcSpin { to { transform: rotate(360deg); } }
.rc-medal .ico { position: relative; width: 40px; height: 40px; }
.rc-art .rc-medal .ico { filter: none; }
.rc-glyph { position: relative; font-family: var(--font-brush); font-size: 38px; line-height: 1; color: var(--rc-c); -webkit-text-stroke: 1.6px #120e09; paint-order: stroke fill;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45), 0 0 12px color-mix(in srgb, var(--rc-c) 55%, transparent); }
.rc-art.locked { opacity: 1; filter: none; }
.rc-art.locked .rc-medal { --rc-c: #8a8478; opacity: 0.85; }
.rc-seal { position: relative; font-family: var(--font-brush); font-size: 26px; line-height: 1; color: #fff2e4; background: #a8322a; padding: 4px 6px 3px; border-radius: 3px; transform: rotate(-8deg);
    box-shadow: inset 0 0 0 2px rgba(255, 236, 214, 0.35), 2px 2px 0 rgba(0, 0, 0, 0.35); }
.action-item.disabled .rc-art.locked { height: 56px; font-size: inherit; margin: 2px 0; }
.recipe-card .action-progress-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--rc-c) 45%, #120e09), var(--rc-c)); box-shadow: 0 0 6px color-mix(in srgb, var(--rc-c) 50%, transparent);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0 0 L94 0 Q97 1 96 3 Q99 4 97 6 Q100 8 95 10 L0 10 Z'/></svg>") right / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0 0 L94 0 Q97 1 96 3 Q99 4 97 6 Q100 8 95 10 L0 10 Z'/></svg>") right / 100% 100% no-repeat; }
.recipe-card.active { box-shadow: 0 0 0 1px var(--rc-c), 0 0 14px color-mix(in srgb, var(--rc-c) 35%, transparent); }
@media (max-width: 768px) {
    .recipe-card .rc-name::after { margin-left: 0; width: 60%; }
    .recipe-card .rc-art { height: 48px; width: 48px; }
    .action-item.disabled .rc-art.locked { height: 48px; }
    .recipe-card .rc-medal { width: 48px; height: 48px; }
    .recipe-card .rc-medal .ico { width: 30px; height: 30px; }
    .recipe-card .rc-glyph { font-size: 28px; }
    .recipe-card .rc-seal { font-size: 20px; padding: 3px 4px 2px; }
    .action-item.recipe-card { grid-template-columns: 48px 1fr; }
}
@media (prefers-reduced-motion: reduce) { .recipe-card.active .rc-medal::before { animation: none; } }

/* ==========================================================================
   v7.27 漫画风：开始界面主视觉 / 玉简存档卡 / Boss 登场分镜 / 成就印章 / 悟道法则光盘 / 灵域属性纹样
   ========================================================================== */
/* 开始界面 */
#startScreen.has-hero .modal-title { display: none; }
.start-hero { position: relative; height: 210px; margin: 0 0 14px; border-radius: 6px; overflow: hidden; border: 1px solid #000; isolation: isolate; }
.start-hero .sh-bg, .start-hero .sh-bg .bs-bg-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.start-hero::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.7); }
.sh-figure { position: absolute; left: 6%; bottom: 2px; width: 34%; max-width: 150px; line-height: 0; z-index: 1; }
.sh-figure .bs-art { width: 100%; height: auto; overflow: visible; animation: bsBreathe 4s ease-in-out infinite; transform-origin: 40% 95%; }
.sh-text { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); text-align: right; z-index: 2; }
.sh-title { font-family: var(--font-brush); font-size: clamp(2.3rem, 10.5vw, 3.6rem); line-height: 1.08; color: #fff3cf; -webkit-text-stroke: 2px #0e0c09; paint-order: stroke fill;
    text-shadow: 3px 3px 0 #0e0c09, 0 0 18px rgba(255, 220, 150, 0.45); animation: shTitle 1.1s cubic-bezier(.2, 1.3, .3, 1) both; }
.sh-title small { display: block; font-size: 0.42em; color: #ff9478; letter-spacing: 0.2em; }
.sh-sub { margin-top: 6px; font-family: var(--font-brush); font-size: 1.1rem; letter-spacing: 0.18em; color: #f3e2b8; -webkit-text-stroke: 0.6px #0e0c09; paint-order: stroke fill; animation: shSub 0.8s ease-out 0.5s both; }
@keyframes shTitle { from { opacity: 0; transform: scale(1.5); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes shSub { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) { .start-hero { height: 180px; } }

/* 玉简存档卡 */
.slot-card { display: flex; gap: 12px; align-items: stretch; --c: var(--bronze); padding-left: 10px; }
.slot-slip { flex: none; width: 34px; border-radius: 3px; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-brush); font-size: 24px; color: var(--c); -webkit-text-stroke: 1px #0e0c09; paint-order: stroke fill;
    background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(0, 0, 0, 0.14) 10px 11px), linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, var(--bg-l3)), color-mix(in srgb, var(--c) 10%, var(--bg-l2)));
    border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.slot-body { flex: 1; min-width: 0; }
.slot-card .slot-name { font-family: var(--font-brush); font-size: 1.4em; line-height: 1.2; }
.slot-realm { margin-left: 8px; font-family: var(--font-title); font-size: 0.6em; color: #fff3e6; background: #a8322a; padding: 1px 6px; border-radius: 2px; vertical-align: 0.25em; }
.slot-new { font-family: var(--font-brush); font-size: 1.3em; color: var(--text-l3); }

/* Boss 登场分镜 */
#bossIntro { position: fixed; inset: 0; z-index: 2100; cursor: pointer; }
.vs-overlay { position: absolute; inset: 0; background: rgba(5, 4, 3, 0.8); overflow: hidden; animation: vsOut 0.3s ease-in 1.5s forwards; }
.vs-panel { position: absolute; top: 0; bottom: 0; width: 62%; overflow: hidden; }
.vs-left { left: 0; clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); background: radial-gradient(ellipse at 35% 62%, color-mix(in srgb, var(--c) 42%, #000) 0%, #0b0a08 72%); animation: vsInL 0.35s cubic-bezier(.2, .9, .3, 1) both; }
.vs-right { right: 0; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); background: radial-gradient(ellipse at 65% 48%, color-mix(in srgb, var(--c) 42%, #000) 0%, #0b0a08 72%); animation: vsInR 0.35s cubic-bezier(.2, .9, .3, 1) 0.08s both; }
.vs-art { position: absolute; bottom: 6%; width: min(48vw, 300px); line-height: 0; }
.vs-left .vs-art { left: 4%; }
.vs-right .vs-art { right: 4%; }
.vs-art .bs-art { width: 100%; height: auto; overflow: visible; }
.vs-name { position: absolute; font-family: var(--font-brush); font-size: clamp(2.2rem, 10vw, 4.4rem); line-height: 1; color: #fff3cf; -webkit-text-stroke: 2px #0e0c09; paint-order: stroke fill; text-shadow: 0 0 16px var(--c), 3px 3px 0 #0e0c09; }
.vs-left .vs-name { left: 6%; top: 12%; }
.vs-right .vs-name { right: 6%; top: 9%; text-align: right; }
.vs-bubble { position: absolute; right: 7%; top: calc(9% + clamp(2.6rem, 11.5vw, 5rem)); max-width: 58%; background: #fffaf0; color: #120e09; font-family: var(--font-brush); font-size: clamp(1rem, 4.2vw, 1.4rem); line-height: 1.35;
    padding: 8px 12px; border: 2px solid #120e09; border-radius: 14px; box-shadow: 3px 3px 0 #120e09; animation: vsBubble 0.3s ease-out 0.45s both; }
.vs-bubble::after { content: ''; position: absolute; right: 22%; bottom: -10px; border: 8px solid transparent; border-top-color: #120e09; border-bottom: 0; }
.vs-slash { position: absolute; left: 50%; top: -10%; width: 6px; height: 120%; background: #fff; transform: translateX(-50%) rotate(13deg); box-shadow: 0 0 20px #fff, 0 0 40px rgba(255, 255, 255, 0.6); animation: vsSlash 0.4s ease-out 0.25s both; }
.vs-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); font-family: var(--font-brush); font-size: clamp(3.4rem, 16vw, 6.4rem); color: #ffd86b;
    -webkit-text-stroke: 3px #0e0c09; paint-order: stroke fill; text-shadow: 4px 4px 0 #7a1a10, 0 0 24px rgba(255, 160, 60, 0.8); animation: vsMark 0.45s cubic-bezier(.2, 1.5, .3, 1) 0.3s both; }
.vs-skip { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); }
@keyframes vsInL { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes vsInR { from { transform: translateX(100%); } to { transform: none; } }
@keyframes vsSlash { 0% { opacity: 0; transform: translateX(-50%) rotate(13deg) scaleY(0); } 40% { opacity: 1; transform: translateX(-50%) rotate(13deg) scaleY(1); } 100% { opacity: 0.85; } }
@keyframes vsMark { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(2.6); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); } }
@keyframes vsBubble { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes vsOut { to { opacity: 0; } }

/* 成就印章 */
.ach-row { display: flex; gap: 10px; align-items: center; }
.ach-seal { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: #a8322a; color: #fff2e4; font-family: var(--font-brush); font-size: 22px; line-height: 1;
    border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(255, 236, 214, 0.4), 2px 2px 0 rgba(0, 0, 0, 0.35); transform: rotate(-4deg); }
.ach-seal.locked { background: #5b564c; color: #a9a294; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12); }

/* 悟道：法则光盘（外圈按等级画满） */
.law-card > .recipe-header { align-items: center; }
.law-medal { --c: var(--gold); --p: 0; position: relative; flex: none; width: 44px; height: 44px; margin-right: 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
    font-family: var(--font-brush); font-size: 26px; line-height: 1; color: var(--c); -webkit-text-stroke: 1.2px #120e09; paint-order: stroke fill;
    background: radial-gradient(circle, color-mix(in srgb, var(--c) 30%, transparent) 0 52%, transparent 70%); }
.law-medal::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), color-mix(in srgb, var(--c) 16%, transparent) 0);
    -webkit-mask: radial-gradient(circle, transparent 61%, #000 63%); mask: radial-gradient(circle, transparent 61%, #000 63%); }
.law-medal.silk { box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); animation: lawSilk 2.6s ease-in-out infinite; }
@keyframes lawSilk { 50% { box-shadow: 0 0 18px color-mix(in srgb, var(--c) 80%, transparent); } }
.law-card .recipe-name { font-family: var(--font-brush); font-size: 1.2em; white-space: nowrap; }

/* 灵域：属性纹样 + 书法字光盘 */
.domain-card { position: relative; overflow: hidden; --c: var(--gold); }
.domain-card::before { content: ''; position: absolute; inset: 0; background: var(--c); opacity: 0.11; pointer-events: none; -webkit-mask: var(--pat) 0 0 / 46px 46px repeat; mask: var(--pat) 0 0 / 46px 46px repeat; }
.domain-card > * { position: relative; }
.dom-glyph { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--font-brush); font-size: 28px; line-height: 1; color: var(--c);
    -webkit-text-stroke: 1.2px #120e09; paint-order: stroke fill; background: radial-gradient(circle, color-mix(in srgb, var(--c) 32%, transparent) 0 50%, transparent 70%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 60%, transparent); }
.domain-card .domain-name { font-family: var(--font-brush); font-size: 1.3em; font-weight: normal; }
.dom-fire { --pat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M12 42 Q4 30 12 20 Q12 28 18 30 Q14 18 24 6 Q24 20 30 24 Q34 16 32 10 Q42 26 36 42 Z'/></svg>"); }
.dom-water { --pat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M0 16 Q12 8 24 16 T48 16 L48 20 Q36 12 24 20 T0 20 Z M0 36 Q12 28 24 36 T48 36 L48 40 Q36 32 24 40 T0 40 Z'/></svg>"); }
.dom-wood { --pat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M6 40 Q8 20 26 14 Q24 32 6 40 Z M26 34 Q30 18 44 14 Q42 28 26 34 Z'/></svg>"); }
.dom-metal { --pat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M4 44 L40 4 L44 6 L8 46 Z M26 46 L46 24 L47 27 L29 47 Z'/></svg>"); }
.dom-earth { --pat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M0 10 L48 10 L48 14 L0 14 Z M0 26 L20 26 L24 22 L48 22 L48 26 L26 26 L22 30 L0 30 Z M0 40 L48 40 L48 43 L0 43 Z'/></svg>"); }
.dom-thunder { --pat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M26 2 L14 24 L22 24 L16 46 L34 18 L26 18 L32 2 Z'/></svg>"); }
.dom-ice { --pat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M23 4 h2 v40 h-2 Z M4 23 h40 v2 H4 Z M8.5 7 l1.4 -1.4 l32.5 32.5 l-1.4 1.4 Z M7 39.5 l32.5 -32.5 l1.4 1.4 l-32.5 32.5 Z'/></svg>"); }
.dom-wind { --pat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M6 18 Q18 6 30 14 Q38 20 30 24 Q24 26 24 20 Q26 16 30 18 Q26 10 16 14 Q10 17 8 20 Z M18 38 Q30 28 42 36 L40 38 Q30 32 20 40 Z'/></svg>"); }
@media (prefers-reduced-motion: reduce) { .vs-overlay *, .sh-title, .sh-sub, .law-medal.silk { animation: none !important; } }

/* ==========================================================================
   v7.28 漫画风续：功法卷轴 / 境界印章 / 装备页立绘 / 离线收益卷轴
   卷轴纸面固定用宣纸色，内部换成宣纸主题的文字颜色，四套主题下都看得清
   ========================================================================== */
/* 功法卡：横卷轴，左右两根木轴 */
.art-card { position: relative; --text-l1: #231f19; --text-l2: #7d4f22; --text-l3: #4a4438; --text-l4: #675f4e; --gold: #8a6420; --azure: #3d6f8f; --jade: #3f7f6a; --color-hp: #3f7f6a; --color-warning: #9c5f18; --color-danger: #b33a2c; --violet: #6a4fa3; --bronze: #2f5566; --bronze-dim: #b9aa8a; --bg-l1: #efe6cc; --bg-l2: #f4ecd6; --bg-l3: #faf4e2; --bg-sunken: #ddd0b0; --border-l3: #c9b994; --border-l4: #ddd0b3; color: var(--text-l1); background: linear-gradient(180deg, #f3e9cf 0%, #e7d8b4 100%); border: none; border-radius: 2px; margin-left: 10px; margin-right: 10px;
    box-shadow: inset 0 0 18px rgba(120, 90, 40, 0.28), 0 3px 8px rgba(0, 0, 0, 0.35); padding: 10px 16px; }
.art-card::before, .art-card::after { content: ''; position: absolute; top: -5px; bottom: -5px; width: 9px; border-radius: 5px;
    background: linear-gradient(90deg, #3a2412, #7a4c26 45%, #3a2412); box-shadow: 0 0 0 1px #1a1008, inset 0 6px 0 -3px #c9a24a, inset 0 -6px 0 -3px #c9a24a; }
.art-card::before { left: -9px; }
.art-card::after { right: -9px; }
.art-card .art-card-label { font-family: var(--font-brush); font-size: 1.05em; color: #8a2a20; }
.art-card .art-name { font-family: var(--font-brush); font-size: 1.45em; font-weight: normal; color: #1a140c; letter-spacing: 0.08em; }
.art-card .art-speed { color: #fff3e6; background: #a8322a; padding: 1px 6px; border-radius: 2px; font-size: 0.82em; }
.art-card .art-icon { display: inline-flex; width: 30px; height: 30px; align-self: center; }
.art-card .art-icon .ico { width: 30px; height: 30px; }
.art-card .art-switch { background: transparent; color: #8a2a20; border: 1.5px solid #8a2a20; font-family: var(--font-brush); font-size: 1.05em; }
.art-card .art-switch:hover { background: rgba(168, 50, 42, 0.1); }

/* 境界印章：毛笔字、双线边、磨损的印边；换境界时重新盖一下 */
#realmDisplay { font-family: var(--font-brush); font-size: 1.12em; letter-spacing: 0.08em; padding: 2px 10px 1px; background: #a8322a; color: #fff2e4; border-radius: 3px;
    box-shadow: inset 0 0 0 2px rgba(255, 236, 214, 0.5), inset 0 0 0 4px #a8322a, inset 0 0 0 5px rgba(255, 236, 214, 0.28);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'><path d='M2 3 L20 1 L40 2.5 L60 0.8 L80 2 L98 1 L99 18 L100 38 L80 39.2 L60 38 L40 39.5 L20 38.4 L1 39 L0.5 20 Z'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'><path d='M2 3 L20 1 L40 2.5 L60 0.8 L80 2 L98 1 L99 18 L100 38 L80 39.2 L60 38 L40 39.5 L20 38.4 L1 39 L0.5 20 Z'/></svg>") center / 100% 100% no-repeat; }
#realmDisplay.stamped { animation: realmStamp 0.55s cubic-bezier(.2, 1.4, .3, 1); }
@keyframes realmStamp { 0% { transform: rotate(-1.5deg) scale(1.9); opacity: 0; } 55% { transform: rotate(-1.5deg) scale(0.92); opacity: 1; } 100% { transform: rotate(-1.5deg) scale(1); } }

/* 装备页立绘 */
.equip-hero { margin-bottom: 14px; }
.pt-stage { position: relative; height: 230px; border-radius: 4px; overflow: hidden; border: 1px solid #000; isolation: isolate; }
.pt-stage::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.7); }
.pt-bg, .pt-bg .bs-bg-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pt-figure { position: absolute; left: 50%; bottom: 4px; width: 150px; transform: translateX(-50%); line-height: 0; z-index: 2; }
.pt-figure .bs-art { width: 100%; height: auto; overflow: visible; position: relative; z-index: 1; animation: bsBreathe 4s ease-in-out infinite; transform-origin: 40% 95%; }
.pt-aura-low .bs-aura { opacity: 0.35; }
.pt-aura-hi .bs-aura { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(1.15); }
.pt-core { position: absolute; left: 48%; top: 56%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; z-index: 2; background: radial-gradient(circle, #fff8d6, #ffd86b 55%, rgba(255, 200, 80, 0) 72%);
    box-shadow: 0 0 10px 3px rgba(255, 210, 100, 0.75); animation: ptCore 2.4s ease-in-out infinite; }
@keyframes ptCore { 50% { box-shadow: 0 0 16px 6px rgba(255, 210, 100, 0.9); } }
.pt-nascent { position: absolute; left: 6%; top: 6%; width: 26px; z-index: 2; animation: ptNascent 3.6s ease-in-out infinite; }
@keyframes ptNascent { 50% { transform: translate(-4px, -6px); } }
.pt-halo { position: absolute; left: 49%; top: 18%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; z-index: 0;
    border: 2px solid var(--c); box-shadow: 0 0 12px var(--c), inset 0 0 12px var(--c); opacity: 0.85; animation: bsHalo 9s linear infinite; }
.pt-laws { position: absolute; left: 50%; bottom: 40px; width: 210px; height: 210px; margin-left: -105px; z-index: 1; animation: bsHalo 24s linear infinite; }
.pt-laws span { position: absolute; left: 50%; top: 50%; font-family: var(--font-brush); font-size: 18px; line-height: 1; color: var(--c); -webkit-text-stroke: 1px #0e0c09; paint-order: stroke fill;
    text-shadow: 0 0 8px var(--c); transform: rotate(calc(var(--i) * 45deg)) translateY(-100px) rotate(calc(var(--i) * -45deg)); margin: -9px 0 0 -9px; }
.pt-caption { position: absolute; left: 0; right: 0; top: 10px; z-index: 6; text-align: center; font-family: var(--font-brush); font-size: 1.5em; color: #fff3cf;
    -webkit-text-stroke: 1.2px #0e0c09; paint-order: stroke fill; text-shadow: 2px 2px 0 #0e0c09, 0 0 12px rgba(255, 220, 150, 0.4); }

/* 离线收益：竖卷轴，上下两根木轴，打开时从中间展开 */
.modal-content.scroll-modal { position: relative; --text-l1: #231f19; --text-l2: #7d4f22; --text-l3: #4a4438; --text-l4: #675f4e; --gold: #8a6420; --azure: #3d6f8f; --jade: #3f7f6a; --color-hp: #3f7f6a; --color-warning: #9c5f18; --color-danger: #b33a2c; --violet: #6a4fa3; --bronze: #2f5566; --bronze-dim: #b9aa8a; --bg-l1: #efe6cc; --bg-l2: #f4ecd6; --bg-l3: #faf4e2; --bg-sunken: #ddd0b0; --border-l3: #c9b994; --border-l4: #ddd0b3; color: var(--text-l1); background: linear-gradient(90deg, #e9dcba, #f5ecd4 18%, #f5ecd4 82%, #e9dcba); border: none; border-radius: 2px;
    box-shadow: inset 0 0 26px rgba(120, 90, 40, 0.3), 0 10px 30px rgba(0, 0, 0, 0.55); margin-top: 18px; margin-bottom: 18px; overflow: visible; }
.modal-content.scroll-modal::before, .modal-content.scroll-modal::after { content: ''; position: absolute; left: -14px; right: -14px; height: 14px; border-radius: 7px;
    background: linear-gradient(180deg, #3a2412, #7a4c26 45%, #3a2412); box-shadow: 0 0 0 1px #1a1008, inset 8px 0 0 -4px #c9a24a, inset -8px 0 0 -4px #c9a24a; }
.modal-content.scroll-modal::before { top: -12px; }
.modal-content.scroll-modal::after { bottom: -12px; }
.modal.show .modal-content.scroll-modal { animation: scrollUnroll 0.6s cubic-bezier(.3, .9, .3, 1) both; }
@keyframes scrollUnroll { from { clip-path: inset(46% -20px 46% -20px); } to { clip-path: inset(-20px -20px -20px -20px); } }
.scroll-modal .modal-title { font-family: var(--font-brush); font-size: 2em; color: #1a140c; letter-spacing: 0.2em; text-shadow: none; }
.scroll-modal .btn { background: #a8322a; color: #fff3e6; border-color: #7a1f18; font-family: var(--font-brush); font-size: 1.15em; }
@media (prefers-reduced-motion: reduce) { .modal.show .modal-content.scroll-modal, #realmDisplay.stamped, .pt-laws, .pt-halo, .pt-core, .pt-nascent { animation: none !important; } }

/* ==========================================================================
   v7.29 漫画风第二批（一）：通知纸条 / 升级庆祝 / 任务竹简 / 侧栏墨痕 / 战报
   ========================================================================== */
/* 通知：一张宣纸条，左边一笔按通知颜色的竖墨，重要的右上角盖小印 */
.notification { --text-l1: #231f19; --text-l2: #7d4f22; --text-l3: #4a4438; --text-l4: #675f4e; --gold: #8a6420; --azure: #3d6f8f; --jade: #3f7f6a; --color-hp: #3f7f6a; --color-warning: #9c5f18; --color-danger: #b33a2c; --violet: #6a4fa3; --bronze: #2f5566; --bronze-dim: #b9aa8a; --bg-l1: #efe6cc; --bg-l2: #f4ecd6; --bg-l3: #faf4e2; --bg-sunken: #ddd0b0; --border-l3: #c9b994; --border-l4: #ddd0b3; --patina: #3f7f6a; --cinnabar: #a8322a; --cinnabar-2: #a8322a; --border-l1: #7d4f22; --border-l2: #8a6420; background: linear-gradient(100deg, #eee1c1, #f7efdc 35%, #f2e6cb) !important; color: #231f19 !important; border: none !important;
    padding: 12px 18px 12px 28px; box-shadow: inset 0 0 14px rgba(120, 90, 40, 0.22), 3px 4px 0 rgba(0, 0, 0, 0.38) !important; }
.notification::before { content: ''; position: absolute; left: 10px; top: 7px; bottom: 7px; width: 7px; background: var(--accent, #6f9c8a); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 100' preserveAspectRatio='none'><path d='M6 1 Q10 6 8.5 22 Q7 50 9.5 78 Q10 95 6 99 Q2.5 93 3.5 72 Q5 45 2.8 20 Q2.5 5 6 1 Z'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 100' preserveAspectRatio='none'><path d='M6 1 Q10 6 8.5 22 Q7 50 9.5 78 Q10 95 6 99 Q2.5 93 3.5 72 Q5 45 2.8 20 Q2.5 5 6 1 Z'/></svg>") center / 100% 100% no-repeat; }
.notification[data-seal]::after { content: attr(data-seal); position: absolute; top: -9px; right: -7px; width: 26px; height: 26px; line-height: 26px; text-align: center; font-size: 17px; transform: rotate(9deg); font-family: var(--font-brush); color: #fff2e4; background: #a8322a; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(255, 236, 214, 0.45), 2px 2px 0 rgba(0, 0, 0, 0.3); }
.notification[data-seal="喜"]::after { background: #b8862a; }
.notification button { color: #675f4e !important; border-color: #c9b994 !important; }
.notification.notification-rare { animation: slideIn 0.3s, noticeRarePulse 1.6s ease-in-out 0.3s 2; }

/* 中央庆祝（技能升级 / 精通 / 法则里程碑）：一道墨痕 + 毛笔大字 + 朱红印 */
.quick-celebration.qc-art { display: flex; align-items: center; gap: 12px; padding: 14px 44px 16px; background: none; border: none; border-radius: 0; box-shadow: none; isolation: isolate; }
.quick-celebration.qc-art.show::before { display: none; }
.qc-swash { position: absolute; inset: 0 -14px; z-index: -1; background: #0e0c09; opacity: 0.9; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50' preserveAspectRatio='none'><path d='M3 28 Q30 10 80 14 Q140 18 170 9 Q190 4 198 10 Q196 22 186 30 Q150 42 100 38 Q50 34 14 44 Q2 44 3 28 Z M150 44 Q170 40 190 43 L188 46 Q170 45 152 47 Z'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50' preserveAspectRatio='none'><path d='M3 28 Q30 10 80 14 Q140 18 170 9 Q190 4 198 10 Q196 22 186 30 Q150 42 100 38 Q50 34 14 44 Q2 44 3 28 Z M150 44 Q170 40 190 43 L188 46 Q170 45 152 47 Z'/></svg>") center / 100% 100% no-repeat; }
.qc-title { font-family: var(--font-brush); font-size: 2.5em; font-weight: normal; line-height: 1; color: #fff3cf; letter-spacing: 0.06em;
    -webkit-text-stroke: 1.2px #0e0c09; paint-order: stroke fill; text-shadow: 3px 3px 0 #0e0c09, 0 0 16px rgba(255, 210, 120, 0.55); }
.qc-sub { font-family: var(--font-brush); font-size: 1.3em; color: #e8c172; align-self: flex-end; margin-bottom: 2px; }
.qc-seal { writing-mode: vertical-rl; font-size: 1.15em; line-height: 1.05; padding: 6px 4px; transform: rotate(-6deg); font-family: var(--font-brush); color: #fff2e4; background: #a8322a; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(255, 236, 214, 0.45), 2px 2px 0 rgba(0, 0, 0, 0.3); }
.quick-celebration.qc-art.show .qc-swash { animation: qcSwash 0.32s ease-out both; }
.quick-celebration.qc-art.show .qc-title { animation: qcTitle 0.4s cubic-bezier(.2, 1.4, .3, 1) 0.08s both; }
.quick-celebration.qc-art.show .qc-seal { animation: qcSeal 0.42s cubic-bezier(.2, 1.4, .3, 1) 0.3s both; }
@keyframes qcSwash { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes qcTitle { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: scale(1); } }
@keyframes qcSeal { 0% { opacity: 0; transform: rotate(-6deg) scale(2); } 60% { opacity: 1; transform: rotate(-6deg) scale(0.9); } 100% { opacity: 1; transform: rotate(-6deg) scale(1); } }

/* 任务条：一卷竹简，左上一枚「令」印，完成后标题旁盖「成」 */
.quest-banner { position: relative; --text-l1: #231f19; --text-l2: #7d4f22; --text-l3: #4a4438; --text-l4: #675f4e; --gold: #8a6420; --azure: #3d6f8f; --jade: #3f7f6a; --color-hp: #3f7f6a; --color-warning: #9c5f18; --color-danger: #b33a2c; --violet: #6a4fa3; --bronze: #2f5566; --bronze-dim: #b9aa8a; --bg-l1: #efe6cc; --bg-l2: #f4ecd6; --bg-l3: #faf4e2; --bg-sunken: #ddd0b0; --border-l3: #c9b994; --border-l4: #ddd0b3; --patina: #3f7f6a; --cinnabar: #a8322a; --cinnabar-2: #a8322a; --border-l1: #7d4f22; --border-l2: #8a6420; color: #231f19; border: none; border-radius: 3px; padding: 12px 14px 12px 60px;
    background: repeating-linear-gradient(90deg, rgba(110, 80, 30, 0) 0 32px, rgba(110, 80, 30, 0.16) 32px 33px, rgba(255, 255, 255, 0.18) 33px 34px), linear-gradient(180deg, #efe2bf, #e2d0a6);
    box-shadow: inset 0 0 0 1px rgba(90, 60, 25, 0.35), inset 0 0 16px rgba(120, 90, 40, 0.25), 0 3px 8px rgba(0, 0, 0, 0.35); }
.quest-banner.complete { background: repeating-linear-gradient(90deg, rgba(110, 80, 30, 0) 0 32px, rgba(110, 80, 30, 0.16) 32px 33px, rgba(255, 255, 255, 0.18) 33px 34px), linear-gradient(180deg, #e8e6c4, #d6d8ac); }
.quest-seal { position: absolute; left: 13px; top: 13px; width: 34px; height: 34px; line-height: 34px; text-align: center; font-size: 23px; transform: rotate(-5deg); font-family: var(--font-brush); color: #fff2e4; background: #a8322a; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(255, 236, 214, 0.45), 2px 2px 0 rgba(0, 0, 0, 0.3); }
.quest-banner .quest-title { font-family: var(--font-brush); font-size: 1.4em; font-weight: normal; color: #1a140c; letter-spacing: 0.04em; }
.quest-banner .quest-desc b { color: #7d4f22; }
.quest-stamp { display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; font-family: var(--font-brush); font-size: 1.15em; color: #a8322a;
    border: 2px solid #a8322a; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(168, 50, 42, 0.25); transform: rotate(-14deg); align-self: center; animation: questStamp 0.45s cubic-bezier(.2, 1.4, .3, 1) both; }
@keyframes questStamp { from { opacity: 0; transform: rotate(-14deg) scale(2.2); } to { opacity: 0.9; transform: rotate(-14deg) scale(1); } }
.quest-banner .quest-btn { font-family: var(--font-brush); font-size: 1.1em; }
.quest-banner.complete .quest-btn { background: #a8322a; color: #fff3e6; border-color: #7a1f18; }
@media (max-width: 768px) { .quest-banner { padding-left: 50px; } .quest-seal { left: 10px; width: 30px; height: 30px; line-height: 30px; font-size: 20px; } }

/* 侧栏：技能名用毛笔字；选中时身后一笔技能色墨痕、左边一笔朱砂竖墨；经验条按技能着色、笔刷收尾 */
.skill-item { --sk: #b89a5b; }
.sk-cultivation { --sk: #5aa8ef; } .sk-battle { --sk: #e0574a; } .sk-alchemy { --sk: #36b383; } .sk-forging { --sk: #d99a3a; }
.sk-farming { --sk: #79b84e; } .sk-mining { --sk: #8aa0b8; } .sk-danhuo { --sk: #f0703f; } .sk-shenshi { --sk: #a283f0; }
.sk-wudao { --sk: #d8b445; } .sk-daoguo { --sk: #d877b6; }
.sidebar .skill-item { position: relative; isolation: isolate; }
.sidebar .skill-item .skill-name { font-family: var(--font-brush); font-size: 1.12em; letter-spacing: 0.04em; }
.sidebar .skill-item.active { background: transparent; border-color: transparent; box-shadow: none; }
.sidebar .skill-item.active::before { content: ''; position: absolute; inset: 1px -2px 7px -4px; z-index: -1; background: var(--sk); opacity: 0.32; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; }
.sidebar .skill-item.active::after { content: ''; position: absolute; left: -1px; top: 4px; bottom: 4px; width: 5px; background: var(--cinnabar, #a8322a); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 100' preserveAspectRatio='none'><path d='M6 1 Q10 6 8.5 22 Q7 50 9.5 78 Q10 95 6 99 Q2.5 93 3.5 72 Q5 45 2.8 20 Q2.5 5 6 1 Z'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 100' preserveAspectRatio='none'><path d='M6 1 Q10 6 8.5 22 Q7 50 9.5 78 Q10 95 6 99 Q2.5 93 3.5 72 Q5 45 2.8 20 Q2.5 5 6 1 Z'/></svg>") center / 100% 100% no-repeat; }
.sidebar .skill-item.active .skill-name { color: var(--text-l1); }
.sidebar .skill-item.active .skill-name .ico { color: var(--sk); }
.skill-item .skill-bar { background: transparent; box-shadow: inset 0 -1px 0 var(--border-l4); }
.skill-item .skill-bar i { background: var(--sk); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0 0 L94 0 Q97 1 96 3 Q99 4 97 6 Q100 8 95 10 L0 10 Z'/></svg>") right / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0 0 L94 0 Q97 1 96 3 Q99 4 97 6 Q100 8 95 10 L0 10 Z'/></svg>") right / 100% 100% no-repeat; }
.nav-mini { position: relative; isolation: isolate; }
body[data-panel="inventory"] .nav-mini[data-nav="inventory"]::before, body[data-panel="equipment"] .nav-mini[data-nav="equipment"]::before,
body[data-panel="shop"] .nav-mini[data-nav="shop"]::before, body[data-panel="settings"] .nav-mini[data-nav="settings"]::before {
    content: ''; position: absolute; inset: 20% -3px 8% -3px; z-index: -1; background: var(--cinnabar, #a8322a); opacity: 0.3; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; }
.mobile-skill-btn.active { position: relative; isolation: isolate; }
.mobile-skill-btn.active::before { content: ''; position: absolute; inset: 15% -4px 5% -4px; z-index: -1; background: var(--cinnabar, #a8322a); opacity: 0.3; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; }

/* 战报：宣纸 + 朱丝栏，时间单列；暴击朱红，胜 / 败两行用毛笔字并盖小印 */
.battle-log-hint { display: flex; align-items: baseline; gap: 8px; }
.blh-title { font-family: var(--font-brush); font-size: 2.1em; color: var(--text-l1); letter-spacing: 0.15em; }
.battle-log { --text-l1: #231f19; --text-l2: #7d4f22; --text-l3: #4a4438; --text-l4: #675f4e; --gold: #8a6420; --azure: #3d6f8f; --jade: #3f7f6a; --color-hp: #3f7f6a; --color-warning: #9c5f18; --color-danger: #b33a2c; --violet: #6a4fa3; --bronze: #2f5566; --bronze-dim: #b9aa8a; --bg-l1: #efe6cc; --bg-l2: #f4ecd6; --bg-l3: #faf4e2; --bg-sunken: #ddd0b0; --border-l3: #c9b994; --border-l4: #ddd0b3; --patina: #3f7f6a; --cinnabar: #a8322a; --cinnabar-2: #a8322a; --border-l1: #7d4f22; --border-l2: #8a6420; color: #231f19; background: linear-gradient(90deg, #ece0bf, #f5ecd5 10%, #f5ecd5 90%, #ece0bf); border: none; border-radius: 2px;
    box-shadow: inset 0 0 16px rgba(120, 90, 40, 0.28), inset 3px 0 0 #8a2a20, inset -3px 0 0 #8a2a20, 0 2px 6px rgba(0, 0, 0, 0.35); font-family: inherit; padding: 6px 12px; }
.battle-log .log-entry { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; border-bottom: 1px solid rgba(168, 50, 42, 0.16); line-height: 1.45; }
.battle-log .log-entry:last-child { border-bottom: none; }
.log-time { flex: none; font-family: var(--font-mono); font-size: 0.82em; }
.battle-log .log-info { color: #675f4e; }
.battle-log .log-player-hit { color: #2f3f52; }
.battle-log .log-monster-hit { color: #8f3a2c; }
.battle-log .log-heal { color: #3f7f6a; }
.battle-log .log-miss { color: #8a8270; }
.battle-log .log-crit { color: #a8322a; font-weight: bold; }
.battle-log .log-victory, .battle-log .log-death { font-family: var(--font-brush); font-weight: normal; font-size: 1.18em; letter-spacing: 0.03em; }
.battle-log .log-victory { color: #6b4a12; }
.battle-log .log-death { color: #a8322a; }
.battle-log .log-victory::after, .battle-log .log-death::after { content: '胜'; flex: none; margin-left: auto; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 14px; transform: rotate(-8deg); font-family: var(--font-brush); color: #fff2e4; background: #a8322a; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(255, 236, 214, 0.45), 2px 2px 0 rgba(0, 0, 0, 0.3); }
.battle-log .log-death::after { content: '败'; background: #3a3530; }
.battle-log .log-victory .log-time, .battle-log .log-death .log-time { font-size: 0.7em; }

@media (prefers-reduced-motion: reduce) {
    .quick-celebration.qc-art.show .qc-swash, .quick-celebration.qc-art.show .qc-title, .quick-celebration.qc-art.show .qc-seal, .quest-stamp { animation: none !important; }
}

/* ==========================================================================
   v7.29 漫画风第二批（二）：突破符纸 / 物品图鉴 / 多宝阁背包 / 第二块田与分身小画
   ========================================================================== */
/* 突破弹窗：一张黄纸朱砂的渡劫符，双线朱框，底下淡淡一个「敕」字；境界对照是两枚印，中间一笔箭头，成功率是一枚圆印 */
.modal-content.talisman-modal { position: relative; isolation: isolate; --text-l1: #231f19; --text-l2: #7d4f22; --text-l3: #4a4438; --text-l4: #675f4e; --gold: #8a6420; --azure: #3d6f8f; --jade: #3f7f6a; --color-hp: #3f7f6a; --color-warning: #9c5f18; --color-danger: #b33a2c; --violet: #6a4fa3; --bronze: #2f5566; --bronze-dim: #b9aa8a; --bg-l1: #efe6cc; --bg-l2: #f4ecd6; --bg-l3: #faf4e2; --bg-sunken: #ddd0b0; --border-l3: #c9b994; --border-l4: #ddd0b3; --patina: #3f7f6a; --cinnabar: #a8322a; --cinnabar-2: #a8322a; --border-l1: #7d4f22; --border-l2: #8a6420; color: #231f19; border: none; border-radius: 2px;
    background: radial-gradient(ellipse at 50% 35%, #f3dc92, #e8c66a 65%, #d9b052); box-shadow: inset 0 0 30px rgba(140, 90, 20, 0.35), 0 10px 30px rgba(0, 0, 0, 0.55); }
.modal-content.talisman-modal::before { content: ''; position: absolute; inset: 9px; z-index: -1; pointer-events: none; border: 2px solid #a8322a; box-shadow: inset 0 0 0 3px #ecd07a, inset 0 0 0 4px #a8322a; }
.modal-content.talisman-modal::after { content: '敕'; position: absolute; left: 50%; top: 52%; z-index: -1; transform: translate(-50%, -50%); pointer-events: none;
    font-family: var(--font-brush); font-size: 220px; line-height: 1; color: #a8322a; opacity: 0.08; }
.talisman-modal .modal-title { font-family: var(--font-brush); font-size: 2.1em; color: #8a1f18; letter-spacing: 0.2em; text-shadow: none; }
.talisman-modal .modal-close { color: #8a1f18; }
.talisman-modal .stat-panel { background: rgba(255, 248, 225, 0.4); border: 1px solid rgba(168, 50, 42, 0.3); }
.talisman-modal #btButton { background: #a8322a; color: #fff3e6; border-color: #7a1f18; font-family: var(--font-brush); font-size: 1.35em; letter-spacing: 0.15em; box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.3); }
.talisman-modal #btButton:hover { background: #b93a30; }
.bt-realms { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 16px; }
.bt-realm { font-family: var(--font-brush); font-size: 1.25em; color: #8a1f18; border: 2px solid #8a1f18; border-radius: 3px; padding: 2px 10px 1px; background: rgba(255, 248, 225, 0.35); }
.bt-realm.next { font-size: 1.55em; font-family: var(--font-brush); color: #fff2e4; background: #a8322a; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(255, 236, 214, 0.45), 2px 2px 0 rgba(0, 0, 0, 0.3); padding: 3px 12px 2px; transform: rotate(-2deg); }
.bt-arrow { width: 54px; height: 16px; background: #8a1f18; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18' preserveAspectRatio='none'><path d='M2 10 Q30 6 72 8 L70 2 L99 9.5 L70 16.5 L72 11.5 Q30 13 2 10 Z'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18' preserveAspectRatio='none'><path d='M2 10 Q30 6 72 8 L70 2 L99 9.5 L70 16.5 L72 11.5 Q30 13 2 10 Z'/></svg>") center / 100% 100% no-repeat; }
.bt-rate { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 66px; height: 66px; margin-left: 6px; border-radius: 50%; transform: rotate(-10deg);
    color: #a8322a; border: 3px solid #a8322a; box-shadow: inset 0 0 0 2px rgba(168, 50, 42, 0.3); line-height: 1; }
.bt-rate[hidden] { display: none; }
.bt-rate b { font-family: var(--font-brush); font-size: 1.45em; font-weight: normal; }
.bt-rate small { font-family: var(--font-brush); font-size: 0.8em; margin-top: 2px; }
.modal.show .bt-rate { animation: btRateStamp 0.5s cubic-bezier(.2, 1.4, .3, 1) 0.25s both; }
@keyframes btRateStamp { from { opacity: 0; transform: rotate(-10deg) scale(2); } to { opacity: 1; transform: rotate(-10deg) scale(1); } }

/* 物品详情 / 购买：一页图鉴——宣纸、细金框，图标放进按类型着色的圆相光盘，名字毛笔字，类型是一枚小印 */
.modal-content.codex-modal { --c: #b89a5b; --text-l1: #231f19; --text-l2: #7d4f22; --text-l3: #4a4438; --text-l4: #675f4e; --gold: #8a6420; --azure: #3d6f8f; --jade: #3f7f6a; --color-hp: #3f7f6a; --color-warning: #9c5f18; --color-danger: #b33a2c; --violet: #6a4fa3; --bronze: #2f5566; --bronze-dim: #b9aa8a; --bg-l1: #efe6cc; --bg-l2: #f4ecd6; --bg-l3: #faf4e2; --bg-sunken: #ddd0b0; --border-l3: #c9b994; --border-l4: #ddd0b3; --patina: #3f7f6a; --cinnabar: #a8322a; --cinnabar-2: #a8322a; --border-l1: #7d4f22; --border-l2: #8a6420; color: #231f19; border: none; background: linear-gradient(180deg, #f5ecd4, #e9dbb6);
    box-shadow: inset 0 0 0 1px rgba(90, 60, 25, 0.4), inset 0 0 0 6px #f3e9cf, inset 0 0 0 7px rgba(138, 100, 32, 0.55), inset 0 0 28px rgba(120, 90, 40, 0.28), 0 10px 30px rgba(0, 0, 0, 0.55); }
.codex-modal .modal-close { color: #675f4e; }
.codex-icon { position: relative; width: 96px; height: 96px; margin: 0 auto 8px !important; display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--c) 42%, transparent) 0%, color-mix(in srgb, var(--c) 12%, transparent) 55%, transparent 70%); }
.codex-icon::before { content: ''; position: absolute; inset: 2px; background: var(--c); opacity: 0.8; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M52 6 C79 6 95 27 93 52 C91 77 70 95 47 94 C25 93 6 75 7 50 C8 32 19 16 34 10 L36 15 C23 21 13 34 13 50 C13 71 29 87 48 88 C68 89 85 73 87 52 C89 31 74 12 52 12 Z'/><circle cx='35' cy='12' r='3.2'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M52 6 C79 6 95 27 93 52 C91 77 70 95 47 94 C25 93 6 75 7 50 C8 32 19 16 34 10 L36 15 C23 21 13 34 13 50 C13 71 29 87 48 88 C68 89 85 73 87 52 C89 31 74 12 52 12 Z'/><circle cx='35' cy='12' r='3.2'/></svg>") center / contain no-repeat; }
.codex-icon .ico { position: relative; width: 56px; height: 56px; }
.codex-name { font-family: var(--font-brush); font-size: 2em !important; font-weight: normal !important; color: #1a140c !important; letter-spacing: 0.06em; line-height: 1.2; }
.codex-name::after { content: ''; display: block; width: 60%; height: 6px; margin: 2px auto 0; background: var(--c); opacity: 0.65; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; }
.codex-type { display: inline-block; margin-top: 8px; font-size: 1em; padding: 2px 9px 1px; transform: rotate(-3deg); font-family: var(--font-brush); color: #fff2e4; background: #a8322a; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(255, 236, 214, 0.45), 2px 2px 0 rgba(0, 0, 0, 0.3); }
.codex-type:empty { display: none; }
.codex-modal .btn { font-family: var(--font-brush); font-size: 1.1em; }

/* 背包：多宝阁——每格一个木格子，底边按物品类型着色；分类标题毛笔字配同色笔触 */
.inv-type-label { font-family: var(--font-brush); font-size: 1.4em; font-weight: normal !important; color: var(--text-l1) !important; letter-spacing: 0.08em; margin-top: 14px !important; }
.inv-type-label::after { content: ''; display: block; width: 90px; height: 6px; margin-top: 1px; background: var(--c); opacity: 0.7; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; }
#inventoryGrid .item-slot { --c: #b89a5b; background: linear-gradient(180deg, #2c1e11, #1e150c); border: 2px solid #5a3a1e; border-top-color: #7a5230; border-bottom-color: #3a2412; border-radius: 2px;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.65), inset 0 -3px 0 var(--c); color: #e8dcc0; }
#inventoryGrid .item-slot:hover { border-color: var(--c); background: linear-gradient(180deg, #34240f, #22180c); }
#inventoryGrid .item-slot .item-name { color: #f0e2c0; font-weight: normal; }
#inventoryGrid .item-slot .item-qty { color: #c9b994; }
#inventoryGrid .item-slot .item-stats { color: #9fd0b8; }
#inventoryGrid .item-slot .item-icon .ico { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c) 60%, transparent)); }

/* 第二块田 / 分身：左边一幅小画 */
.clone-row.has-art { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; }
.cl-main { min-width: 0; }
.cl-art { width: 64px; height: 46px; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.pf-field svg { width: 64px; height: 46px; overflow: visible; }
.pf-grow { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.8s ease-out; }
.pf-field[data-stage="empty"] .pf-plant { display: none; }
.pf-field[data-stage="0"] .pf-grow { transform: scale(0.25); }
.pf-field[data-stage="1"] .pf-grow { transform: scale(0.55); }
.pf-field[data-stage="2"] .pf-grow { transform: scale(0.85); }
.pf-ear { fill: #8cc45a; opacity: 0; transition: opacity 0.6s, fill 0.6s; }
.pf-field[data-stage="2"] .pf-ear { opacity: 1; }
.pf-field[data-stage="3"] .pf-ear { opacity: 1; fill: #f0c24a; filter: drop-shadow(0 0 2px #ffd86b); }
.cl-ghost .bs-art { height: 52px; width: auto; overflow: visible; opacity: 0.6; filter: drop-shadow(0 0 4px var(--c)); animation: clFloat 3.2s ease-in-out infinite; }
.cl-ghost::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 34px; height: 5px; margin-left: -17px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 55%, transparent), transparent); }
.cl-ghost.idle .bs-art { height: 44px; opacity: 0.35; filter: grayscale(0.5); animation: none; }
@keyframes clFloat { 50% { transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) { .modal.show .bt-rate, .cl-ghost .bs-art { animation: none !important; } .pf-grow, .pf-ear { transition: none; } }
/* 在背包 / 装备 / 商城 / 设置页时，侧栏上一个技能的墨痕淡下去，免得和下面的入口同时高亮 */
body:is([data-panel="inventory"], [data-panel="equipment"], [data-panel="shop"], [data-panel="settings"]) .sidebar .skill-item.active::before { opacity: 0.1; }
body:is([data-panel="inventory"], [data-panel="equipment"], [data-panel="shop"], [data-panel="settings"]) .sidebar .skill-item.active::after { opacity: 0.35; }

/* ==========================================================================
   v7.29 漫画风第二批（三）：修行札记 / 引路老者 / 试玩结束 / 功法卷轴列表 / 灵根克制环
   ========================================================================== */
/* 修行札记：境界解锁、解锁一览、新手任务列表——古籍页：宣纸、朱丝栏、双线朱框，右边书口竖写「修行札记」 */
.modal-content[data-skin="journal"] { position: relative; isolation: isolate; --text-l1: #231f19; --text-l2: #7d4f22; --text-l3: #4a4438; --text-l4: #675f4e; --gold: #8a6420; --azure: #3d6f8f; --jade: #3f7f6a; --color-hp: #3f7f6a; --color-warning: #9c5f18; --color-danger: #b33a2c; --violet: #6a4fa3; --bronze: #2f5566; --bronze-dim: #b9aa8a; --bg-l1: #efe6cc; --bg-l2: #f4ecd6; --bg-l3: #faf4e2; --bg-sunken: #ddd0b0; --border-l3: #c9b994; --border-l4: #ddd0b3; --patina: #3f7f6a; --cinnabar: #a8322a; --cinnabar-2: #a8322a; --border-l1: #7d4f22; --border-l2: #8a6420; color: #231f19; border: none; border-radius: 2px;
    background: repeating-linear-gradient(90deg, rgba(168, 50, 42, 0) 0 30px, rgba(168, 50, 42, 0.13) 30px 31px), linear-gradient(180deg, #f4ead0, #e8d9b2);
    box-shadow: inset 0 0 0 7px #f1e6c8, inset 0 0 0 9px rgba(168, 50, 42, 0.55), inset 0 0 0 11px #f1e6c8, inset 0 0 0 12px rgba(168, 50, 42, 0.4), inset 0 0 30px rgba(120, 90, 40, 0.3), 0 10px 30px rgba(0, 0, 0, 0.55); }
.modal-content[data-skin="journal"] .tutorial-title::before { content: '修行札记'; display: block; margin-bottom: 2px; font-size: 0.42em; letter-spacing: 0.6em; color: #8a2a20; }
.modal-content[data-skin="journal"] .tutorial-title { font-family: var(--font-brush); font-weight: normal; font-size: 1.9em; color: #1a140c; letter-spacing: 0.1em; }
.modal-content[data-skin="journal"] .tutorial-title::after { content: ''; display: block; width: 46%; height: 7px; margin: 3px auto 0; background: #a8322a; opacity: 0.55; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; }
.modal-content[data-skin="journal"] .tutorial-body b { color: #7d4f22; }
.modal-content[data-skin="journal"] .modal-close { color: #675f4e; }
.modal-content[data-skin="journal"] .btn { font-family: var(--font-brush); font-size: 1.12em; }

/* 侧栏「境界感悟」同样是一页札记 */
.stat-panel.lore-journal { --text-l1: #231f19; --text-l2: #7d4f22; --text-l3: #4a4438; --text-l4: #675f4e; --gold: #8a6420; --azure: #3d6f8f; --jade: #3f7f6a; --color-hp: #3f7f6a; --color-warning: #9c5f18; --color-danger: #b33a2c; --violet: #6a4fa3; --bronze: #2f5566; --bronze-dim: #b9aa8a; --bg-l1: #efe6cc; --bg-l2: #f4ecd6; --bg-l3: #faf4e2; --bg-sunken: #ddd0b0; --border-l3: #c9b994; --border-l4: #ddd0b3; --patina: #3f7f6a; --cinnabar: #a8322a; --cinnabar-2: #a8322a; --border-l1: #7d4f22; --border-l2: #8a6420; color: #231f19; border: none; background: repeating-linear-gradient(90deg, rgba(168, 50, 42, 0) 0 30px, rgba(168, 50, 42, 0.13) 30px 31px), linear-gradient(180deg, #f2e7cb, #e6d6ae);
    box-shadow: inset 0 0 0 4px #f1e6c8, inset 0 0 0 5px rgba(168, 50, 42, 0.45), inset 0 0 18px rgba(120, 90, 40, 0.28), 0 2px 6px rgba(0, 0, 0, 0.35); }
.stat-panel.lore-journal .stat-title { font-family: var(--font-brush); font-size: 1.3em; font-weight: normal; color: #1a140c; letter-spacing: 0.1em; border-bottom-color: rgba(168, 50, 42, 0.35); }
.stat-panel.lore-journal #realmLoreBox { color: #4a4438 !important; }
@media (max-width: 768px) { .realm-lore-mobile { --text-l1: #231f19; --text-l2: #7d4f22; --text-l3: #4a4438; --text-l4: #675f4e; --gold: #8a6420; --azure: #3d6f8f; --jade: #3f7f6a; --color-hp: #3f7f6a; --color-warning: #9c5f18; --color-danger: #b33a2c; --violet: #6a4fa3; --bronze: #2f5566; --bronze-dim: #b9aa8a; --bg-l1: #efe6cc; --bg-l2: #f4ecd6; --bg-l3: #faf4e2; --bg-sunken: #ddd0b0; --border-l3: #c9b994; --border-l4: #ddd0b3; --patina: #3f7f6a; --cinnabar: #a8322a; --cinnabar-2: #a8322a; --border-l1: #7d4f22; --border-l2: #8a6420; color: #4a4438; background: repeating-linear-gradient(90deg, rgba(168, 50, 42, 0) 0 30px, rgba(168, 50, 42, 0.13) 30px 31px), linear-gradient(180deg, #f2e7cb, #e6d6ae); border: none; box-shadow: inset 0 0 0 1px rgba(168, 50, 42, 0.4), 0 2px 6px rgba(0, 0, 0, 0.35); }
    .realm-lore-mobile > summary { font-family: var(--font-brush); font-weight: normal; font-size: 1.15em; color: #1a140c; } }

/* 新手教程：左边引路老者，右边漫画对话气泡 */
.modal-content[data-skin="guide"] { max-width: 620px; }
.guide-wrap { display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: end; }
.guide-elder { position: relative; text-align: center; line-height: 0; }
.guide-elder .bs-art { width: 132px; height: auto; overflow: visible; animation: bsBreathe 4.5s ease-in-out infinite; transform-origin: 50% 95%; }
.guide-name { display: inline-block; margin-top: 4px; line-height: 1.2; font-size: 1.05em; padding: 3px 10px 2px; font-family: var(--font-brush); color: #fff2e4; background: #a8322a; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(255, 236, 214, 0.45), 2px 2px 0 rgba(0, 0, 0, 0.3); }
.guide-bubble { position: relative; --text-l1: #231f19; --text-l2: #7d4f22; --text-l3: #4a4438; --text-l4: #675f4e; --gold: #8a6420; --azure: #3d6f8f; --jade: #3f7f6a; --color-hp: #3f7f6a; --color-warning: #9c5f18; --color-danger: #b33a2c; --violet: #6a4fa3; --bronze: #2f5566; --bronze-dim: #b9aa8a; --bg-l1: #efe6cc; --bg-l2: #f4ecd6; --bg-l3: #faf4e2; --bg-sunken: #ddd0b0; --border-l3: #c9b994; --border-l4: #ddd0b3; --patina: #3f7f6a; --cinnabar: #a8322a; --cinnabar-2: #a8322a; --border-l1: #7d4f22; --border-l2: #8a6420; color: #231f19; background: #fbf6e8; border: 2.5px solid #120e09; border-radius: 18px 18px 18px 4px; padding: 14px 18px; margin-bottom: 40px;
    box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.45); }
.guide-bubble::before { content: ''; position: absolute; left: -16px; bottom: 14px; width: 18px; height: 18px; background: #fbf6e8; border-left: 2.5px solid #120e09; border-bottom: 2.5px solid #120e09;
    transform: skewY(-30deg); }
.guide-bubble .tutorial-title { font-family: var(--font-brush); font-weight: normal; font-size: 1.6em; color: #1a140c; text-align: left; margin-bottom: 8px; }
.guide-bubble .tutorial-body { min-height: 130px; color: #3a342a; }
.guide-bubble .tutorial-body b { color: #8a2a20; }
.modal-content[data-skin="guide"] .tutorial-dots i.on { background: #a8322a; }
.modal-content[data-skin="guide"] .btn { font-family: var(--font-brush); font-size: 1.1em; }
@media (max-width: 768px) {
    .guide-wrap { grid-template-columns: 1fr; gap: 6px; }
    .guide-elder { display: flex; align-items: flex-end; gap: 8px; }
    .guide-elder .bs-art { width: 64px; }
    .guide-bubble { margin-bottom: 0; border-radius: 4px 18px 18px 18px; }
    .guide-bubble::before { left: 22px; top: -16px; bottom: auto; transform: skewX(-30deg); border-bottom: none; border-top: 2.5px solid #120e09; }
}

/* 试玩结束：仙界远景主视觉「前路未完」，下面一排还没走到的境界印（灰） */
.modal-content[data-skin="demo-end"] { max-width: 560px; }
.demo-hero { margin: -4px 0 12px; }
.demo-hero .start-hero { margin: 0; }
.demo-seals { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 14px; }
.demo-seals span { font-family: var(--font-brush); font-size: 1.05em; padding: 3px 7px 2px; border: 1.5px solid var(--text-l4); color: var(--text-l3); border-radius: 3px; opacity: 0.75; transform: rotate(-2deg); }
.demo-seals span:nth-child(even) { transform: rotate(2deg); }
.demo-seals span:last-child { font-family: var(--font-brush); color: #fff2e4; background: #a8322a; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(255, 236, 214, 0.45), 2px 2px 0 rgba(0, 0, 0, 0.3); border-color: transparent; opacity: 1; }
.modal-content[data-skin="demo-end"] .tutorial-title { font-family: var(--font-brush); font-weight: normal; font-size: 1.6em; }

/* 功法切换：每部功法一卷宣纸，左右两根木轴，正在修习的盖朱红印 */
.art-switch-modal .modal-title { font-family: var(--font-brush); font-size: 1.9em; letter-spacing: 0.15em; }
#artSwitchList { padding: 6px 14px; }
.art-scroll { position: relative; --text-l1: #231f19; --text-l2: #7d4f22; --text-l3: #4a4438; --text-l4: #675f4e; --gold: #8a6420; --azure: #3d6f8f; --jade: #3f7f6a; --color-hp: #3f7f6a; --color-warning: #9c5f18; --color-danger: #b33a2c; --violet: #6a4fa3; --bronze: #2f5566; --bronze-dim: #b9aa8a; --bg-l1: #efe6cc; --bg-l2: #f4ecd6; --bg-l3: #faf4e2; --bg-sunken: #ddd0b0; --border-l3: #c9b994; --border-l4: #ddd0b3; --patina: #3f7f6a; --cinnabar: #a8322a; --cinnabar-2: #a8322a; --border-l1: #7d4f22; --border-l2: #8a6420; color: #231f19; background: linear-gradient(180deg, #f3e9cf, #e7d8b4); border-radius: 2px; padding: 10px 14px; margin: 0 0 14px; cursor: pointer;
    box-shadow: inset 0 0 16px rgba(120, 90, 40, 0.28), 0 3px 8px rgba(0, 0, 0, 0.35); transition: transform 0.15s; }
.art-scroll::before, .art-scroll::after { content: ''; position: absolute; top: -5px; bottom: -5px; width: 9px; border-radius: 5px; background: linear-gradient(90deg, #3a2412, #7a4c26 45%, #3a2412); box-shadow: 0 0 0 1px #1a1008, inset 0 6px 0 -3px #c9a24a, inset 0 -6px 0 -3px #c9a24a; }
.art-scroll::before { left: -9px; }
.art-scroll::after { right: -9px; }
.art-scroll:hover { transform: translateY(-2px); }
.art-scroll.current { cursor: default; box-shadow: inset 0 0 16px rgba(120, 90, 40, 0.28), 0 0 0 2px #a8322a, 0 3px 8px rgba(0, 0, 0, 0.35); }
.art-scroll.current:hover { transform: none; }
.as-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.as-head .art-icon { display: inline-flex; width: 28px; height: 28px; }
.as-head .art-icon .ico { width: 28px; height: 28px; }
.as-name { font-family: var(--font-brush); font-weight: normal; font-size: 1.45em; color: #1a140c; letter-spacing: 0.06em; }
.as-speed { font-size: 0.8em; color: #fff3e6; background: #3d6f8f; padding: 1px 6px; border-radius: 2px; }
.as-seal { margin-left: auto; font-size: 1em; padding: 3px 8px 2px; transform: rotate(-6deg); font-family: var(--font-brush); color: #fff2e4; background: #a8322a; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(255, 236, 214, 0.45), 2px 2px 0 rgba(0, 0, 0, 0.3); }
.as-hint { margin-left: auto; font-size: 0.85em; color: #8a2a20; }
.as-desc { font-size: 0.86em; color: #4a4438; margin-top: 5px; line-height: 1.6; }
.as-effects { font-size: 0.82em; color: #3f7f6a; margin-top: 4px; }

/* 灵根克制环 */
.counter-modal .modal-title { font-family: var(--font-brush); font-size: 1.9em; letter-spacing: 0.15em; }
.counter-ring { max-width: 340px; margin: 0 auto 14px; }
.counter-ring svg { display: block; width: 100%; height: auto; overflow: visible; }
.cr-arrow { stroke: var(--text-l3); stroke-width: 2; fill: none; opacity: 0.8; }
.cr-tip { fill: var(--text-l3); }
.cr-ke { font-family: var(--font-brush); font-size: 13px; fill: #c4483a; text-anchor: middle; }
.cr-disc { fill: color-mix(in srgb, var(--c) 18%, #14110c); stroke: var(--c); stroke-width: 2.5; }
.cr-disc.free { stroke-dasharray: 4 3; }
.cr-glyph { font-family: var(--font-brush); font-size: 21px; fill: var(--c); text-anchor: middle; paint-order: stroke fill; stroke: #0e0c09; stroke-width: 2.5px; }
.cr-mine { fill: none; stroke: var(--c); stroke-width: 1.5; opacity: 0.8; filter: drop-shadow(0 0 4px var(--c)); }
.cr-you { font-family: var(--font-brush); font-size: 13px; fill: #fff2e4; paint-order: stroke fill; stroke: #a8322a; stroke-width: 5px; }

@media (prefers-reduced-motion: reduce) { .guide-elder .bs-art { animation: none !important; } .art-scroll:hover { transform: none; } }

/* ==========================================================================
   v7.31 标题字体统一为毛笔字：毛笔字本身笔画粗细有变化，再加粗会糊成一团，凡是用 --font-title 的地方都取消加粗、略放大一点
   ========================================================================== */
.skill-item .skill-name, .action-name, .recipe-name, .skill-exp-name, .battle-title, .panel-title, .stat-title, .modal-title, .btn,
.art-name, #battleActions .action-name, #panel-shop .shop-item > div:nth-child(2), .slot-realm, .fx-title, .fx-seal, .tutorial-title { font-weight: normal; }
.tutorial-title { font-family: var(--font-title); font-size: 1.55em; }
.stat-title { font-size: 1.12em; }
.battle-title { font-size: 1.25em; }
#battleActions .action-name, #panel-shop .shop-item > div:nth-child(2) { font-size: 1.15em; }
.law-card > .law-level { font-family: var(--font-num); }

/* 其余标题类文字也统一成毛笔字：克制预览、战斗区域 / 秘境标签、商城分类、丹火 / 神识等用途条目名、装备栏物品名 */
.sec-title, .shop-cat-label, .shop-section-title, .use-title, .use-main > b:first-child, .equip-slot-name, .panel-tab { font-family: var(--font-title); font-weight: normal !important; letter-spacing: 0.04em; }
.sec-title { font-size: 1.2em; }
.panel-tab { font-size: 1.2em; }
.use-main > b:first-child, .use-title { font-size: 1.14em; }
.equip-slot-name { font-size: 1.15em; }
.shop-cat-label { font-size: 1.4em; color: var(--text-l1) !important; margin-top: 14px !important; }
.shop-cat-label::after { content: ''; display: block; width: 90px; height: 6px; margin-top: 1px; background: var(--jade); opacity: 0.7; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; }
.shop-section-title { font-size: 1.3em; }
.shop-tab { font-family: var(--font-title); font-weight: normal !important; font-size: 1.12em; letter-spacing: 0.04em; }
/* 标题里附带的小字说明仍用正文字体，毛笔字太小看不清 */
.use-title small, .use-main > b:first-child small { font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif; letter-spacing: 0; }

/* ==========================================================================
   v7.32 游戏内确认 / 提示框（替代浏览器自带对话框）：宣纸卷轴，危险操作的确认键朱红
   ========================================================================== */
.ui-dialog { z-index: 3000; }
.ui-dialog-box { max-width: 440px; width: calc(100% - 48px); text-align: left; }
.ui-dialog-box .modal-title { font-size: 1.6em; margin-bottom: 10px; text-align: center; }
.ui-dialog-msg { color: #3a342a; line-height: 1.85; font-size: 0.95em; max-height: 50vh; overflow-y: auto; }
.ui-dialog-actions { display: flex; gap: 10px; margin-top: 18px; }
.ui-dialog-actions .btn { flex: 1; font-family: var(--font-title); font-size: 1.15em; }
.ui-dialog-box .btn.ui-cancel { background: transparent; color: #4a4438; border: 1.5px solid #8a7e66; }
.ui-dialog-box .btn.ui-cancel:hover { background: rgba(120, 90, 40, 0.1); }
.ui-dialog-box .btn.ui-ok { background: #3f7f6a; color: #f5ecd4; border-color: #2c5e4e; }
.ui-dialog-box .btn.ui-ok.danger { background: #a8322a; border-color: #7a1f18; color: #fff3e6; }

/* ==========================================================================
   v7.33 战斗名牌 / 区域与秘境卡片小画 / 顶栏修为笔刷条
   ========================================================================== */
/* 双方名牌：墨色斜切牌子，玩家在左（灵根色），敌人在右（朱红，镜像排列）；名字毛笔字，血条是一笔墨，属性是三枚小印 */
.combatant { --c: #6fbf9a; position: relative; background: linear-gradient(180deg, #1c1813, #100d0a); border: none; border-radius: 0; padding: 10px 18px 10px 14px; color: #e8dcc0;
    border-left: 4px solid var(--c); clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.combatant.player { border-color: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 30px 0 40px -30px var(--c); }
.combatant.monster { --c: #d0473a; border-left: none; border-right: 4px solid var(--c); padding: 10px 14px 10px 18px; text-align: right;
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset -30px 0 40px -30px var(--c); }
.combatant-name { font-family: var(--font-title); font-weight: normal; font-size: 1.45em; letter-spacing: 0.06em; color: #f6ead0 !important; margin-bottom: 2px;
    -webkit-text-stroke: 0.6px #0e0c09; paint-order: stroke fill; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); }
.combatant-name::after { content: ''; display: block; width: 70%; height: 6px; margin-top: 1px; background: var(--c); opacity: 0.75; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; }
.combatant.monster .combatant-name::after { margin-left: auto; transform: scaleX(-1); }
.combatant .hp-bar { height: 18px; margin: 6px 0 4px; background: #2a231a; border: none; border-radius: 0; box-shadow: none; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'><path d='M3 6 Q6 2 14 3 L60 2.5 Q110 1.5 160 3 L190 2 Q198 3 197 8 Q199 12 196 15 Q192 18.5 180 17.5 L120 18.5 Q70 19 30 17.8 L10 18 Q2 17 2.5 12 Q1 9 3 6 Z'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'><path d='M3 6 Q6 2 14 3 L60 2.5 Q110 1.5 160 3 L190 2 Q198 3 197 8 Q199 12 196 15 Q192 18.5 180 17.5 L120 18.5 Q70 19 30 17.8 L10 18 Q2 17 2.5 12 Q1 9 3 6 Z'/></svg>") center / 100% 100% no-repeat; }
.combatant.monster .hp-bar, .combatant.monster .atk-bar { transform: scaleX(-1); }
.combatant.monster .hp-text { transform: translate(-50%, -50%) scaleX(-1); }
.combatant.player .hp-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, #0e0c09), var(--c)); }
.combatant.monster .hp-fill, .combatant .hp-fill.low { background: linear-gradient(90deg, #6e1a14, #d0473a); }
.combatant .hp-text { font-family: var(--font-num); font-size: 0.82em; color: #fff8ea; text-shadow: 0 0 3px #000, 1px 1px 0 #000; }
.combatant .atk-bar { height: 3px; background: rgba(255, 255, 255, 0.08); border: none; border-radius: 0; box-shadow: none; }
.combatant .atk-fill { background: color-mix(in srgb, var(--c) 70%, #fff); }
.combatant .atk-fill.ready { background: #fff4d8; box-shadow: 0 0 6px var(--c); }
.combatant-stats { gap: 6px; margin-top: 8px; color: #e8dcc0; }
.combatant.monster .combatant-stats { justify-content: flex-end; }
.combatant-stats .cs-stat { display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, 0.05); padding: 1px 7px 1px 1px; border-radius: 2px; font-family: var(--font-num); font-size: 1.05em; }
.cs-stat i { font-style: normal; font-size: 0.95em; line-height: 1; padding: 3px 4px 2px; font-family: var(--font-brush); color: #fff2e4; background: #a8322a; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(255, 236, 214, 0.45), 2px 2px 0 rgba(0, 0, 0, 0.3); background: color-mix(in srgb, var(--c) 70%, #2a1810); box-shadow: none; }

/* 区域 / 秘境卡片顶部小画 */
.area-art { position: relative; height: 76px; margin: 0 0 8px; border-radius: 3px; overflow: hidden; isolation: isolate; border: 1px solid #000; box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.6); }
.area-art .bs-bg-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.area-art::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.75); }
.aa-foes { position: absolute; right: 6px; bottom: 0; z-index: 1; display: flex; align-items: flex-end; gap: 0; height: 100%; }
.aa-foe { display: block; height: 82%; margin-left: -10px; line-height: 0; }
.aa-foe:nth-child(2) { height: 70%; } .aa-foe:nth-child(3) { height: 60%; }
.aa-foe .bs-art { height: 100%; width: auto; overflow: visible; }
.action-item.disabled .area-art, .dungeon-row.locked .area-art { filter: grayscale(0.85) brightness(0.6); }
.area-card.active .area-art { box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--gold); }
.dungeon-row { position: relative; display: block; cursor: pointer; }
.dungeon-row .area-art { height: 84px; }
.dungeon-row.locked { opacity: 0.6; }
.dg-name { font-family: var(--font-title); font-size: 1.35em; color: var(--text-l1); letter-spacing: 0.05em; }
.dg-desc { font-size: 0.85em; color: var(--text-l4); margin-top: 2px; }
.dg-status { font-size: 0.78em; margin-top: 4px; }
.dg-seal { position: absolute; top: 8px; right: 10px; font-size: 0.95em; padding: 3px 7px 2px; transform: rotate(8deg); font-family: var(--font-brush); color: #fff2e4; background: #a8322a; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(255, 236, 214, 0.45), 2px 2px 0 rgba(0, 0, 0, 0.3); }
@media (max-width: 768px) {
    .dungeon-row .area-art { height: 66px; }
    .area-art { height: 60px; }
}

/* 顶栏修为条：一笔墨，填充是玉青墨色、笔刷收尾 */
.info-item .progress-bar { height: 22px; border: none; border-radius: 0; box-shadow: none; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'><path d='M3 6 Q6 2 14 3 L60 2.5 Q110 1.5 160 3 L190 2 Q198 3 197 8 Q199 12 196 15 Q192 18.5 180 17.5 L120 18.5 Q70 19 30 17.8 L10 18 Q2 17 2.5 12 Q1 9 3 6 Z'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'><path d='M3 6 Q6 2 14 3 L60 2.5 Q110 1.5 160 3 L190 2 Q198 3 197 8 Q199 12 196 15 Q192 18.5 180 17.5 L120 18.5 Q70 19 30 17.8 L10 18 Q2 17 2.5 12 Q1 9 3 6 Z'/></svg>") center / 100% 100% no-repeat; }
#cultivationProgress { background-color: #4f9e82; box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.25), inset 0 3px 4px rgba(255, 255, 255, 0.12); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0 0 L94 0 Q97 1 96 3 Q99 4 97 6 Q100 8 95 10 L0 10 Z'/></svg>") right / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0 0 L94 0 Q97 1 96 3 Q99 4 97 6 Q100 8 95 10 L0 10 Z'/></svg>") right / 100% 100% no-repeat; }
#cultivationProgress.full { background-color: #d8a838; }
#progressText { font-family: var(--font-num); }

/* ==========================================================================
   v7.34 右侧栏竹简 / 商城货架
   ========================================================================== */
/* 右侧栏各块（境界感悟除外，它是札记）：一片竹简——细竖纹 + 双线框，标题毛笔字下面一笔墨，每行用点线连到数值。颜色都走主题变量，四套主题都适用 */
.side-panel > .stat-panel:not(.lore-journal) { position: relative; border: 1px solid var(--border-l3); border-radius: 2px;
    background: repeating-linear-gradient(90deg, transparent 0 28px, rgba(127, 110, 80, 0.07) 28px 29px), var(--bg-l2);
    box-shadow: inset 0 0 0 3px var(--bg-l2), inset 0 0 0 4px color-mix(in srgb, var(--bronze-dim) 55%, transparent); }
.side-panel > .stat-panel:not(.lore-journal) .stat-title { border-bottom: none; padding-bottom: 2px; margin-bottom: 8px; }
.side-panel > .stat-panel:not(.lore-journal) .stat-title::after { content: ''; display: block; width: 64px; height: 5px; margin-top: 3px; background: var(--cinnabar, #a8322a); opacity: 0.55; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; }
.side-panel > .stat-panel .stat-row { position: relative; border-bottom: 1px dotted color-mix(in srgb, var(--bronze-dim) 45%, transparent); }
.side-panel > .stat-panel .stat-row:last-child { border-bottom: none; }

/* 商城：每件商品是货架上的一格 */
#panel-shop .shop-item { --c: #b89a5b; position: relative; padding: 14px 12px 12px; text-align: center; cursor: pointer; border-radius: 2px;
    background: linear-gradient(180deg, var(--bg-l3), var(--bg-l2)); border: 1px solid var(--border-l3);
    box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--c) 55%, transparent), 0 2px 5px rgba(0, 0, 0, 0.25); transition: transform 0.15s, border-color 0.15s; }
#panel-shop .shop-item:hover { border-color: var(--c); transform: translateY(-2px); }
#panel-shop .shop-item.sh-bought, #panel-shop .shop-item.sh-locked { cursor: not-allowed; transform: none; }
#panel-shop .shop-item.sh-bought { opacity: 0.6; }
#panel-shop .shop-item.sh-locked { opacity: 0.6; border-style: dashed; }
#panel-shop .shop-item.sh-locked .sh-icon { filter: grayscale(0.8); }
.sh-icon { position: relative; width: 58px; height: 58px; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; font-size: 26px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--c) 34%, transparent) 0%, color-mix(in srgb, var(--c) 10%, transparent) 55%, transparent 70%); }
.sh-icon::before { content: ''; position: absolute; inset: 1px; background: var(--c); opacity: 0.65; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M52 6 C79 6 95 27 93 52 C91 77 70 95 47 94 C25 93 6 75 7 50 C8 32 19 16 34 10 L36 15 C23 21 13 34 13 50 C13 71 29 87 48 88 C68 89 85 73 87 52 C89 31 74 12 52 12 Z'/><circle cx='35' cy='12' r='3.2'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M52 6 C79 6 95 27 93 52 C91 77 70 95 47 94 C25 93 6 75 7 50 C8 32 19 16 34 10 L36 15 C23 21 13 34 13 50 C13 71 29 87 48 88 C68 89 85 73 87 52 C89 31 74 12 52 12 Z'/><circle cx='35' cy='12' r='3.2'/></svg>") center / contain no-repeat; }
.sh-icon .ico { position: relative; width: 34px; height: 34px; }
.sh-name { font-family: var(--font-title); font-size: 1.25em; color: var(--text-l1); letter-spacing: 0.04em; margin-bottom: 3px; }
.sh-desc { font-size: 0.8em; color: var(--text-l4); margin-bottom: 9px; line-height: 1.55; }
.sh-price { display: inline-block; font-family: var(--font-num); font-weight: bold; padding: 2px 12px; border: 1px solid currentColor; border-radius: 2px; background: color-mix(in srgb, currentColor 8%, transparent); }
#panel-shop .shop-item.sh-bought .sh-price { font-family: var(--font-title); font-weight: normal; }

/* 设置页：每组设置同右侧栏的竹简框；勾选框做成一枚小印（勾上是朱红底白勾），下拉框和数字框换成同色系 */
#panel-settings .stat-panel { position: relative; border: 1px solid var(--border-l3); border-radius: 2px;
    background: repeating-linear-gradient(90deg, transparent 0 28px, rgba(127, 110, 80, 0.07) 28px 29px), var(--bg-l2);
    box-shadow: inset 0 0 0 3px var(--bg-l2), inset 0 0 0 4px color-mix(in srgb, var(--bronze-dim) 55%, transparent); }
#panel-settings .stat-panel .stat-row { border-bottom: 1px dotted color-mix(in srgb, var(--bronze-dim) 45%, transparent); }
#panel-settings .stat-panel .stat-row:last-child { border-bottom: none; }
#panel-settings input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 20px !important; height: 20px !important; margin: 0; flex: none; cursor: pointer;
    border: 1.5px solid var(--bronze-dim); border-radius: 3px; background: var(--bg-l1); transition: background-color 0.15s, border-color 0.15s; }
#panel-settings input[type="checkbox"]:checked { border-color: #7a1f18; background: #a8322a url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M4 10.5 Q6 12 8.5 15 Q11 9 16.5 4.5' stroke='%23fff3e6' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 80% no-repeat;
    box-shadow: inset 0 0 0 1.5px rgba(255, 236, 214, 0.4); }
#panel-settings input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#panel-settings select, #panel-settings input[type="number"] { background: var(--bg-l1); color: var(--text-l1); border: 1px solid var(--bronze-dim); border-radius: 2px; padding: 4px 8px; font-family: inherit; }

/* ==========================================================================
   v7.35 手机版补齐：顶部技能条、底部标签栏毛笔字；战斗名牌的属性印压成一行；突破符的「突破方式」不再一字一行
   ========================================================================== */
.msb-name { font-family: var(--font-title); font-weight: normal; font-size: 1.15em; letter-spacing: 0.03em; }
.msb-lv { margin-left: 5px; font-family: var(--font-num); font-size: 0.8em; color: var(--text-l4); }
.mobile-skill-btn.active .msb-lv { color: var(--text-l3); }
#breakthroughModal .stat-row > .stat-label { white-space: nowrap; flex: none; margin-right: 8px; }
@media (max-width: 768px) {
    .mobile-tab-item > div:not(.icon) { font-family: var(--font-title); font-size: 1.05em; letter-spacing: 0.06em; }
    .mobile-tab-item.active { box-shadow: none; isolation: isolate; }
    .mobile-tab-item.active::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 6px; height: 7px; z-index: -1; background: var(--cinnabar, #a8322a); opacity: 0.55;
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q30 1 70 5 Q120 9 160 3 Q185 1 198 6 L196 9 Q160 8 120 11 Q70 12 30 9 Q12 10 2 8 Z'/></svg>") center / 100% 100% no-repeat; }
    .combatant { padding: 8px 14px 8px 10px; }
    .combatant.monster { padding: 8px 10px 8px 14px; }
    .combatant-name { font-size: 1.25em; }
    .combatant-stats { flex-wrap: wrap; gap: 3px; }
    .combatant-stats .cs-stat { font-size: 0.9em; padding: 0 4px 0 0; gap: 2px; }
    .cs-stat i { padding: 2px 3px 1px; font-size: 0.85em; }
}

/* ==========================================================================
   v7.36 配色对比度修正（四套主题逐页检查）
   ========================================================================== */
/* 战斗名牌的数值：旧规则 .combatant-stats span 给里面的数字套了一层 var(--bg-l1) 底色，浅色主题下是浅底配浅字，几乎看不见 */
.combatant-stats .cs-stat > span { background: transparent; padding: 0; color: #f0e4c6; }
/* 顶栏修为条的底槽跟主题走（以前写死深墨色，浅色主题下是一大块黑） */
.info-item .progress-bar { background: var(--bg-sunken); }
/* 战报时间戳：宣纸上太淡 */
.log-time { color: #7a6f5c; }
/* 撤退按钮：深色主题下朱红字压在深底上偏暗，提亮并改毛笔字 */
.btn-retreat { font-family: var(--font-title); font-weight: normal; font-size: 1.1em; }
:root:not([data-theme="xuanzhi"]) .btn-retreat { color: #ef7262; border-color: #ef7262; }
/* 浅色主题：法则圆章与修炼书法字的颜色压暗一些（亮金 / 亮蓝在宣纸色上发虚） */
:root[data-theme="xuanzhi"] .law-medal { color: color-mix(in srgb, var(--c) 62%, #1a120a); }
:root[data-theme="xuanzhi"] .rc-glyph { color: color-mix(in srgb, var(--rc-c) 72%, #0e0c09); }
/* 悟道卡片：「灵根相合」以前和法则名、等级挤一行，被压成竖排还把等级挤出卡片；改成名字下面单独一行 */
.law-card .recipe-header { position: relative; }
.law-card .recipe-header:has(.law-resonant) { padding-bottom: 12px; }
.law-card .law-resonant { position: absolute; left: 52px; bottom: -2px; margin: 0; white-space: nowrap; font-size: 0.75em; }

/* ==========================================================================
   v7.37 本命法宝改版：装备页的本命栏
   ========================================================================== */
.life-sword-card { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; margin: 4px 0 14px; padding: 12px 14px;
    border: 1px solid color-mix(in srgb, #5aa8ef 45%, var(--border-l3)); border-radius: 2px;
    background: radial-gradient(ellipse at 15% 50%, rgba(90, 168, 239, 0.16), transparent 60%), var(--bg-l2); box-shadow: inset 0 0 0 3px var(--bg-l2), inset 0 0 0 4px rgba(90, 168, 239, 0.25); }
.life-sword-card.empty { border-style: dashed; background: var(--bg-l2); }
.ls-art svg { display: block; width: 96px; height: 92px; overflow: visible; filter: drop-shadow(0 0 4px rgba(120, 190, 255, 0.45)); }
.life-sword-card.empty .ls-art svg { filter: none; opacity: 0.6; }
.ls-art svg.ls-lit { filter: drop-shadow(0 0 6px #9fd8ff) drop-shadow(0 0 12px rgba(255, 230, 120, 0.55)); }
.ls-title { font-family: var(--font-title); font-size: 1.35em; color: var(--text-l1); letter-spacing: 0.06em; }
.ls-count { margin: 2px 0 4px; font-family: var(--font-num); color: var(--text-l2); }
.ls-count b { font-size: 1.5em; color: var(--text-l1); }
.ls-form { margin-left: 10px; font-family: var(--font-title); font-size: 1.05em; padding: 2px 8px 1px; color: #fff2e4; background: #3d6f8f; border-radius: 3px; }
.ls-line { font-size: 0.86em; color: var(--text-l3); line-height: 1.7; }
.strike-lifeSword { color: #9fd8ff; }
@media (max-width: 768px) { .life-sword-card { grid-template-columns: 70px 1fr; } .ls-art svg { width: 70px; height: 68px; } }

/* ===== 奇遇（v7.45）===== */
.qiyu-seal { position: fixed; right: 20px; bottom: 20px; z-index: 950; width: 54px; height: 54px; padding: 0; border: 2px solid #7a2219; border-radius: 6px; background: #a8322a; color: #fff2e4; cursor: pointer; transform: rotate(-6deg); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255, 230, 200, 0.25); display: flex; align-items: center; justify-content: center; }
.qiyu-seal[hidden] { display: none; }
.qiyu-seal:hover { background: #b8402f; }
.qiyu-seal-char { font-family: var(--font-brush); font-size: 32px; line-height: 1; }
.qiyu-seal-count { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--jade); color: #fff; font-size: 12px; line-height: 20px; font-weight: bold; transform: rotate(6deg); box-sizing: border-box; }
.qiyu-seal-count[hidden] { display: none; }
.qiyu-seal.has-new { animation: qiyuPulse 2.4s ease-in-out infinite; }
@keyframes qiyuPulse { 0%, 100% { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(196, 72, 58, 0.55); } 50% { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), 0 0 0 10px rgba(196, 72, 58, 0); } }
@media (prefers-reduced-motion: reduce) { .qiyu-seal.has-new { animation: none; } }
@media (max-width: 768px) { .qiyu-seal { right: 12px; bottom: calc(82px + env(safe-area-inset-bottom)); width: 46px; height: 46px; } .qiyu-seal-char { font-size: 27px; } }
.qiyu-modal { max-width: 560px; width: calc(100% - 32px); box-sizing: border-box; }
.qiyu-sub { margin: 4px 0 8px; font-size: 0.9em; color: var(--text-l2); letter-spacing: 0.04em; }
.qiyu-card { border: 1px solid var(--border-l3); background: var(--bg-l2); border-radius: 3px; padding: 10px 12px; margin-bottom: 10px; }
.qiyu-head { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.qiyu-ico { font-size: 1.3em; }
.qiyu-name { color: var(--text-l1); }
.qiyu-where { font-size: 0.8em; color: var(--text-l4); }
.qiyu-opts { display: flex; flex-direction: column; gap: 6px; }
.qiyu-opt { display: flex; gap: 10px; align-items: baseline; text-align: left; width: 100%; padding: 8px 10px; border: 1px solid var(--border-l4); border-radius: 2px; background: var(--bg-l3); color: var(--text-l3); cursor: pointer; font: inherit; font-size: 0.88em; line-height: 1.5; }
.qiyu-opt:hover { border-color: var(--cinnabar-2); color: var(--text-l1); }
.qiyu-opt-label { flex: none; min-width: 4.5em; font-weight: bold; color: var(--text-l1); }
.qiyu-leave { opacity: 0.75; }
.qiyu-empty { padding: 12px; text-align: center; color: var(--text-l4); font-size: 0.9em; }
.qiyu-buffs { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.qiyu-buff { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-left: 3px solid var(--jade); background: var(--bg-l2); font-size: 0.88em; color: var(--text-l2); }
.qiyu-buff.neg { border-left-color: var(--cinnabar-2); }
.qiyu-buff-left { color: var(--text-l4); white-space: nowrap; }
.qiyu-note { margin-top: 8px; font-size: 0.8em; color: var(--text-l4); line-height: 1.6; }
.offline-qiyu { margin-bottom: 14px; padding-bottom: 6px; border-bottom: 1px dashed var(--border-l3); }
/* v7.46 奇物匣 / 本次亮点 */
.qiyu-foot { margin-top: 8px; font-size: 0.78em; color: var(--text-l4); }
.relic-cat { margin-bottom: 10px; }
.relic-cat-head { display: flex; justify-content: space-between; font-size: 0.85em; color: var(--text-l2); margin-bottom: 4px; }
.relic-cat-head span { color: var(--text-l4); }
.relic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.relic { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px dashed var(--border-l4); border-radius: 2px; background: var(--bg-l2); text-align: center; min-width: 0; }
.relic.owned { border-style: solid; border-color: var(--bronze-dim); background: var(--bg-l3); }
.relic-ico { line-height: 1.2; color: var(--text-l4); }
.relic-name { font-size: 0.8em; color: var(--text-l1); }
.relic:not(.owned) .relic-name { color: var(--text-l4); }
.relic-eff { font-size: 0.7em; color: var(--text-l4); line-height: 1.35; word-break: break-all; }
.relic.owned .relic-eff { color: var(--jade); }
@media (max-width: 480px) { .relic-grid { grid-template-columns: repeat(2, 1fr); } }
.offline-hl { margin-bottom: 12px; }
.offline-hl-row { padding: 6px 10px; margin-bottom: 4px; border-left: 3px solid var(--bronze-dim); background: var(--bg-l2); font-size: 0.9em; color: var(--text-l3); line-height: 1.6; }
.offline-bill summary { cursor: pointer; color: var(--text-l2); font-size: 0.9em; padding: 4px 0; }
/* v7.47 词缀 / 地气 / 伤势 */
.affix-tag { display: inline-block; margin-left: 6px; padding: 0 5px; font-size: 0.72em; line-height: 1.6; border: 1px solid var(--cinnabar-2); color: var(--cinnabar-2); border-radius: 2px; vertical-align: middle; white-space: nowrap; }
.affix-shield { display: inline-block; margin-left: 6px; font-size: 0.72em; color: var(--jade); vertical-align: middle; }
.diqi-line { margin: 4px 0; font-size: 0.8em; color: var(--text-l2); line-height: 1.5; }
.diqi-counter { color: var(--text-l4); }
.injury-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--cinnabar-2); background: var(--bg-l2); font-size: 0.88em; color: var(--text-l2); }
/* v7.49 宗门 */
.skill-item.sk-sect { --sk: var(--cinnabar-2); }
.sect-found { padding: 16px; border: 1px solid var(--border-l3); background: var(--bg-l2); border-radius: 3px; }
.sect-found-title { font-family: var(--font-brush); font-size: 1.8em; color: var(--text-l1); margin-bottom: 8px; }
.sect-found-text { font-size: 0.9em; color: var(--text-l3); line-height: 1.7; }
.sect-found-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.sect-name-input { flex: 1; min-width: 140px; padding: 8px 10px; background: var(--bg-l1); border: 1px solid var(--border-l3); color: var(--text-l1); font: inherit; border-radius: 2px; }
.sect-head { padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--border-l3); background: var(--bg-l2); border-radius: 3px; }
.sect-name { font-family: var(--font-brush); font-size: 2em; color: var(--text-l1); letter-spacing: 0.08em; line-height: 1.2; }
.sect-meta { font-size: 0.88em; color: var(--text-l2); margin: 4px 0 8px; }
.sect-meta b { color: var(--text-l1); }
.sect-xp { height: 6px; background: var(--bg-l1); border-radius: 3px; overflow: hidden; }
.sect-xp i { display: block; height: 100%; background: var(--cinnabar-2); }
.sect-xp-text { margin-top: 6px; font-size: 0.8em; color: var(--text-l4); }
.sect-task { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border-l4); background: var(--bg-l2); border-radius: 2px; }
.sect-task.active { border-color: var(--bronze-dim); background: var(--bg-l3); }
.sect-task-title { font-size: 0.95em; color: var(--text-l1); font-weight: bold; }
.sect-task-hint { margin: 4px 0; font-size: 0.8em; color: var(--text-l4); line-height: 1.5; }
.sect-task-bar { position: relative; height: 16px; margin: 6px 0; background: var(--bg-l1); border-radius: 2px; overflow: hidden; }
.sect-task-bar i { display: block; height: 100%; background: var(--jade); opacity: 0.7; }
.sect-task-bar span { position: absolute; inset: 0; text-align: center; font-size: 0.75em; line-height: 16px; color: var(--text-l1); }
.sect-task-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.8em; color: var(--text-l2); }
.sect-task-btns { display: flex; gap: 6px; flex-wrap: wrap; }
/* v7.50 殿阁 */
.hall { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border-l4); background: var(--bg-l2); border-radius: 2px; }
.hall.locked { opacity: 0.6; }
.hall-head { display: flex; justify-content: space-between; gap: 8px; font-size: 0.95em; color: var(--text-l1); font-weight: bold; }
.hall-head span { font-weight: normal; font-size: 0.8em; color: var(--text-l4); }
.hall-forms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.hall-forms.many { grid-template-columns: repeat(4, 1fr); }
.hall-form { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 7px 8px; border: 1px solid var(--border-l4); border-radius: 2px; background: var(--bg-l3); color: var(--text-l3); cursor: pointer; font: inherit; font-size: 0.8em; line-height: 1.45; min-width: 0; }
.hall-form b { color: var(--text-l1); font-size: 1.05em; }
.hall-form:hover { border-color: var(--bronze-dim); }
.hall-form.on { border-color: var(--cinnabar-2); box-shadow: inset 0 0 0 1px var(--cinnabar); }
.hall-good { color: var(--jade); }
.hall-bad { color: var(--cinnabar-2); }
@media (max-width: 600px) { .hall-forms, .hall-forms.many { grid-template-columns: 1fr 1fr; } }
/* v7.51 外敌来犯 / 宗门商店 */
.invade-foe { font-size: 0.88em; color: var(--text-l2); line-height: 1.7; }
.invade-dom { margin-top: 8px; font-size: 0.85em; color: var(--text-l3); }
.invade-dom select { max-width: 100%; margin-left: 4px; padding: 3px 6px; background: var(--bg-l1); color: var(--text-l1); border: 1px solid var(--border-l3); font: inherit; }
.invade-down { margin-top: 6px; font-size: 0.85em; color: var(--cinnabar-2); }
.invade-last { margin-top: 6px; font-size: 0.82em; color: var(--text-l4); }
/* v7.52 道途 */
.dao-kind { margin-left: 6px; font-weight: normal; font-size: 0.8em; color: var(--text-l4); }
.dao-sub { margin-top: 14px; }
/* v7.54 弟子 */
.dis-talent { display: inline-block; margin-left: 4px; padding: 0 5px; font-size: 0.75em; font-weight: normal; line-height: 1.6; border: 1px solid var(--bronze-dim); color: var(--text-l2); border-radius: 2px; }
.sect-task-foot select { max-width: 100%; padding: 2px 4px; background: var(--bg-l1); color: var(--text-l1); border: 1px solid var(--border-l3); font: inherit; }
/* v7.56 结局 */
.ending-modal { max-width: 520px; width: calc(100% - 32px); box-sizing: border-box; text-align: center; }
.ending-title { font-family: var(--font-brush); font-size: 3em; letter-spacing: 0.2em; text-indent: 0.2em; color: var(--text-l1); line-height: 1.2; margin-top: 6px; }
.ending-sub { margin: 8px 0 12px; font-size: 0.92em; color: var(--text-l3); line-height: 1.7; }
.ending-seal { display: inline-block; font-family: var(--font-brush); font-size: 1.6em; color: #fff2e4; background: #a8322a; padding: 4px 12px 3px; border-radius: 4px; transform: rotate(-6deg); margin-bottom: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.ending-stats { text-align: left; border-top: 1px dashed var(--border-l3); border-bottom: 1px dashed var(--border-l3); padding: 8px 0; }
.ending-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 2px; font-size: 0.88em; color: var(--text-l3); }
.ending-row b { color: var(--text-l1); font-weight: normal; text-align: right; }
.ending-after { margin-top: 12px; text-align: left; font-size: 0.85em; color: var(--text-l3); line-height: 1.7; }
/* v7.58 阶段重点 */
.stage-focus { margin: 10px 0; padding: 10px 12px; border-left: 3px solid var(--cinnabar-2); background: rgba(168, 50, 42, 0.07); text-align: left; font-size: 0.9em; line-height: 1.7; }
.stage-focus b { display: block; margin-bottom: 2px; }
.stage-focus small { display: block; margin-top: 4px; opacity: 0.75; }
.unlock-more { margin-top: 8px; }
.unlock-more summary { cursor: pointer; opacity: 0.8; }
.stage-row { margin-bottom: 6px; padding: 6px 10px; border: 1px solid rgba(0,0,0,0.12); border-radius: 3px; text-align: left; font-size: 0.88em; line-height: 1.6; }
.stage-row.cur { border-color: var(--cinnabar-2); }
.stage-row summary { cursor: pointer; }
.stage-row summary small { margin-left: 8px; opacity: 0.6; }
.stage-cur { margin-left: 6px; padding: 0 5px; font-size: 0.8em; color: #fff2e4; background: #a8322a; border-radius: 2px; }
.stage-first { margin-top: 6px; }
.stage-more { margin-top: 4px; opacity: 0.8; }

/* ==================== v7.61 宗门页美术：山门横幅、分节标题、宣纸任务令、匾额殿阁 ==================== */
.sect-banner { position: relative; height: 190px; margin: 0 0 10px; border-radius: 4px; overflow: hidden; border: 1px solid #000; isolation: isolate; }
.sect-banner .sb-bg, .sect-banner .sb-bg .bs-bg-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sect-banner .sb-gate { position: absolute; left: 0; right: 0; bottom: 0; top: 34px; z-index: 1; }
.sect-banner .sb-gate svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sect-banner::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.7); }
.sb-plaque { position: absolute; left: 50%; top: 12px; z-index: 2; transform: translateX(-50%); max-width: calc(100% - 110px); box-sizing: border-box; padding: 3px 18px 2px; font-family: var(--font-brush); font-size: 1.8em; line-height: 1.25; letter-spacing: 0.18em; text-indent: 0.18em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #f0d58c; background: linear-gradient(180deg, #2c2116, #140f0a); border: 2px solid #8a6a32; box-shadow: 0 0 0 2px #120d08, 0 4px 10px rgba(0, 0, 0, 0.6); animation: sbPlaque 0.7s cubic-bezier(.3, .9, .3, 1) both; }
.sb-seal { position: absolute; right: 12px; top: 12px; z-index: 2; writing-mode: vertical-rl; padding: 6px 3px; font-family: var(--font-brush); font-size: 1.05em; letter-spacing: 0.1em; color: #fff2e4; background: #a8322a; border-radius: 3px; transform: rotate(4deg); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); }
@keyframes sbPlaque { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 480px) { .sect-banner { height: 160px; } .sb-plaque { font-size: 1.45em; padding: 2px 12px 1px; } }
@media (prefers-reduced-motion: reduce) { .sb-plaque { animation: none; } }

.sect-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 2px 2px 8px; font-size: 0.86em; color: var(--text-l3); }
.sect-stats b { color: var(--gold); font-weight: normal; }
#sectContent .sect-xp { height: 8px; background: var(--bg-sunken, var(--bg-l1)); border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }
#sectContent .sect-xp i { background: linear-gradient(90deg, var(--cinnabar), var(--gold)); border-radius: 4px; }

/* 分节标题：毛笔字 + 一道淡金的笔触 */
.sect-sec { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 20px 0 10px; padding-bottom: 6px; }
.sect-sec::after { content: ''; position: absolute; left: 0; bottom: 0; width: min(100%, 320px); height: 6px; background: var(--gold); opacity: 0.55;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6' preserveAspectRatio='none'><path d='M0 3.4 Q8 1 40 1.8 Q120 2.6 200 2.4 L200 3 Q130 5.6 40 4.6 Q10 4.4 0 3.4 Z'/></svg>") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6' preserveAspectRatio='none'><path d='M0 3.4 Q8 1 40 1.8 Q120 2.6 200 2.4 L200 3 Q130 5.6 40 4.6 Q10 4.4 0 3.4 Z'/></svg>") center / 100% 100% no-repeat; }
.ss-title { font-family: var(--font-brush); font-size: 1.5em; line-height: 1.1; letter-spacing: 0.1em; color: var(--text-l1); }
.ss-aside { font-size: 0.8em; color: var(--text-l4); }
.sect-warn { margin: -2px 0 10px; padding: 6px 10px; font-size: 0.82em; color: var(--color-danger); border-left: 3px solid var(--color-danger); background: rgba(196, 72, 58, 0.08); }

/* 细则：折起来，需要时再看 */
.sect-rules { margin: 4px 0 6px; }
.sect-rules summary { display: inline-block; cursor: pointer; padding: 1px 10px; font-size: 0.8em; color: var(--text-l4); border: 1px solid var(--border-l4); border-radius: 10px; list-style: none; user-select: none; }
.sect-rules summary::-webkit-details-marker { display: none; }
.sect-rules summary::before { content: '＋ '; }
.sect-rules[open] summary::before { content: '－ '; }
.sect-rules summary:hover { color: var(--text-l2); border-color: var(--bronze-dim); }
.sect-rules .qiyu-note { margin-top: 6px; padding: 8px 10px; border-left: 2px solid var(--border-l3); }

/* 任务 / 弟子 / 商店：宣纸任务令，左上角一方印 */
#sectContent .sect-task { position: relative; --text-l1: #231f19; --text-l2: #7d4f22; --text-l3: #4a4438; --text-l4: #675f4e; --gold: #8a6420; --azure: #3d6f8f; --jade: #3f7f6a; --color-hp: #3f7f6a; --color-warning: #9c5f18; --color-danger: #b33a2c; --violet: #6a4fa3; --bronze: #2f5566; --bronze-dim: #b9aa8a; --bg-l1: #efe6cc; --bg-l2: #f4ecd6; --bg-l3: #faf4e2; --bg-sunken: #ddd0b0; --border-l3: #c9b994; --border-l4: #ddd0b3; --patina: #3f7f6a; --cinnabar: #a8322a; --cinnabar-2: #a8322a; --border-l1: #7d4f22; --border-l2: #8a6420;
    color: #231f19; background: linear-gradient(180deg, #f3e9cf, #e8d9b6); border: none; border-radius: 2px; padding: 10px 12px 10px 58px; margin-bottom: 10px; min-height: 40px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(125, 79, 34, 0.18); }
#sectContent .sect-task.active { background: linear-gradient(180deg, #f7eed6, #ecdfbf); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(168, 50, 42, 0.45); }
.st-seal { position: absolute; left: 12px; top: 11px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; font-family: var(--font-brush); font-size: 1.35em; line-height: 1; color: #a8322a; border: 2px solid #a8322a; border-radius: 3px; transform: rotate(-5deg); }
.sect-task.active .st-seal { color: #fff2e4; background: #a8322a; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.st-seal.dis-seal { border-radius: 50%; transform: none; }
#sectContent .sect-task-bar { background: #ddd0b0; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18); }
#sectContent .sect-task-bar i { background: linear-gradient(90deg, #3f7f6a, #5f9a7e); opacity: 0.85; }
#sectContent .sect-task-foot select { background: #faf4e2; color: #231f19; border-color: #c9b994; }
#sectContent .dis-talent { border-color: #b9aa8a; color: #7d4f22; }

/* 殿阁：深色漆木匾额 + 宣纸形制卡，选定的盖「定」字朱印 */
#sectContent .hall { padding: 0; margin-bottom: 14px; background: none; border: none; }
#sectContent .hall-head { align-items: center; padding: 6px 12px; background: linear-gradient(180deg, #2c2116, #17110b); border: 1px solid #6b5228; box-shadow: inset 0 0 0 1px #0e0a06; border-radius: 2px; }
#sectContent .hall-head .hh-name { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-brush); font-weight: normal; font-size: 1.45em; letter-spacing: 0.12em; color: #f0d58c; }
#sectContent .hh-name .glyph, #sectContent .hh-name .emo { color: #d9b866; font-size: 0.8em; }
#sectContent .hall-head .hh-note { font-size: 0.78em; color: #bca778; }
#sectContent .hall.locked { opacity: 0.55; }
#sectContent .hall.locked .hall-head { filter: grayscale(0.7); }
#sectContent .hall.down .hh-name::after { content: '停用'; margin-left: 4px; padding: 0 6px; font-family: inherit; font-size: 0.65em; letter-spacing: 0.05em; color: #fff2e4; background: #a8322a; border-radius: 2px; }
#sectContent .hall-forms { margin-top: 6px; gap: 8px; }
#sectContent .hall-form { position: relative; gap: 4px; padding: 8px 10px; color: #4a4438; background: linear-gradient(180deg, #f1e6ca, #e6d6b0); border: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(125, 79, 34, 0.18); transition: transform 0.15s, box-shadow 0.15s; }
#sectContent .hall-form b { font-family: var(--font-brush); font-weight: normal; font-size: 1.25em; letter-spacing: 0.06em; color: #231f19; }
#sectContent .hall-form:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(125, 79, 34, 0.4); }
#sectContent .hall-form.on { background: linear-gradient(180deg, #f8efd8, #efe2c2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 0 0 2px #a8322a; }
#sectContent .hall-form.on::after { content: '定'; position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-family: var(--font-brush); font-size: 0.95em; color: #fff2e4; background: #a8322a; border-radius: 3px; transform: rotate(8deg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
#sectContent .hall-form.on.fresh::after { animation: hallStamp 0.35s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes hallStamp { from { opacity: 0; transform: rotate(8deg) scale(1.8); } to { opacity: 1; transform: rotate(8deg) scale(1); } }
.hf-good { color: #2f6b56; }
.hf-bad { color: #9a3226; }
.hf-bad i { font-style: normal; margin-right: 4px; padding: 0 4px; font-size: 0.85em; color: #9a3226; border: 1px solid rgba(154, 50, 38, 0.5); border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { #sectContent .hall-form.on::after { animation: none; } }

/* 外敌来犯：左边烽火台（预告期点燃）或来犯者剪影，预告期边框转红 */
.invade-card { display: flex; gap: 12px; align-items: center; padding: 10px 12px; margin-bottom: 8px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 70%), var(--bg-l2); border: 1px solid var(--border-l4); border-radius: 3px; }
.invade-card.soon { border-color: var(--color-danger); box-shadow: inset 0 0 0 1px rgba(196, 72, 58, 0.35), 0 0 12px rgba(196, 72, 58, 0.25); }
.invade-art { flex: none; width: 74px; height: 74px; display: flex; align-items: flex-end; justify-content: center; }
.invade-art .bs-art { width: 100%; height: 100%; overflow: visible; }
.invade-body { flex: 1; min-width: 0; }
.bs-beacon-fire { transform-origin: 40px 34px; animation: beaconFlicker 0.9s ease-in-out infinite alternate; }
@keyframes beaconFlicker { from { transform: scale(0.9, 0.95); } to { transform: scale(1.06, 1.1); } }
@media (prefers-reduced-motion: reduce) { .bs-beacon-fire { animation: none; } }

/* 浅色主题：宣纸卡片放在宣纸底上，加一道细边区分 */
:root[data-theme="xuanzhi"] #sectContent .sect-task, :root[data-theme="xuanzhi"] #sectContent .hall-form { box-shadow: 0 1px 3px rgba(60, 40, 20, 0.18), inset 0 0 0 1px #c9b994; }
:root[data-theme="xuanzhi"] #sectContent .sect-task.active { box-shadow: 0 1px 4px rgba(60, 40, 20, 0.22), inset 0 0 0 1px #a8322a; }

/* ==================== v7.61 问道塔美术：左塔右守关者 ==================== */
.tower-stage { display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: stretch; }
.tower-col { position: relative; min-height: 330px; border-radius: 4px; overflow: hidden; border: 1px solid #000; isolation: isolate; }
.tower-col .tc-bg, .tower-col .tc-bg .bs-bg-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tower-col .tc-tower { position: absolute; inset: 6px 0 0; z-index: 1; }
.tower-col .tc-tower svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tower-col::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.7); }
.bs-tower-num text { font-family: var(--font-brush); paint-order: stroke; stroke: #0e0c09; stroke-width: 2.5px; }
.bs-tower-flag { transform-box: fill-box; transform-origin: left center; animation: towerFlag 2.2s ease-in-out infinite alternate; }
@keyframes towerFlag { from { transform: skewY(-4deg) scaleX(0.92); } to { transform: skewY(3deg) scaleX(1.04); } }
.tower-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; background: var(--bg-l2); border: 1px solid var(--border-l4); border-radius: 3px; }
.tw-title { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding-bottom: 6px; border-bottom: 1px dashed var(--border-l3); }
.tw-floor { font-family: var(--font-brush); font-size: 2.2em; line-height: 1.1; letter-spacing: 0.08em; color: var(--text-l1); }
.tw-best { font-size: 0.85em; color: var(--text-l4); }
.tw-best b { color: var(--gold); font-weight: normal; }
.tw-guard { display: flex; align-items: center; gap: 12px; }
.tw-guard-art { flex: none; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 50% 60%, rgba(196, 72, 58, 0.28), transparent 68%); }
.tw-guard-art .bs-art { width: 100%; height: 100%; overflow: visible; }
.tw-guard-info { min-width: 0; }
.tw-guard-name { font-family: var(--font-brush); font-size: 1.35em; letter-spacing: 0.06em; color: var(--text-l1); }
.tw-guard-stats { margin: 2px 0 4px; font-size: 0.85em; color: var(--text-l3); }
.tw-guard-stats b { color: var(--text-l1); font-weight: normal; }
.tw-guard-tags .affix-tag:first-child { margin-left: 0; }
.tw-counter { font-size: 0.84em; line-height: 1.65; color: var(--text-l2); }
.tw-counter i { font-style: normal; margin-right: 6px; padding: 0 5px; font-size: 0.85em; color: var(--jade); border: 1px solid var(--jade); border-radius: 2px; }
#towerContent .invade-dom { margin-top: 0; }
.tw-reward { font-size: 0.84em; color: var(--text-l3); }
.tw-reward b { color: var(--gold); font-weight: normal; }
.btn.tw-go { width: 100%; margin-top: auto; font-family: var(--font-brush); font-size: 1.2em; letter-spacing: 0.12em; }
/* 后面几层：一层一道檐 */
.tw-next { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0 0 6px 10px; padding: 6px 10px 6px 14px; background: var(--bg-l2); border: 1px solid var(--border-l4); border-left: none; border-radius: 0 3px 3px 0; }
.tw-next::before { content: ''; position: absolute; left: -10px; top: -1px; bottom: -1px; width: 10px; background: linear-gradient(180deg, #2c2116, #17110b); border: 1px solid #6b5228; border-right: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.tw-next-f { margin-right: 6px; font-family: var(--font-brush); font-size: 1.15em; color: var(--text-l1); }
.tw-next + .tw-next { margin-left: 18px; }
.tw-next + .tw-next + .tw-next { margin-left: 26px; }
@media (max-width: 600px) {
    .tower-stage { grid-template-columns: 1fr; gap: 10px; }
    .tower-col { min-height: 240px; }
    .tower-main { padding: 10px; }
    .tw-floor { font-size: 1.8em; }
    .tw-guard-art { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) { .bs-tower-flag { animation: none; } }

/* ==================== v7.61 道途美术：路线图 + 竖令牌 + 「立」字朱印 ==================== */
/* 路线图：八个节点一字排开，墨线相连；已立的是道心首字的实心印（战斗朱红 / 生存玉青 / 生活古金），到了没选的是虚线问号，没到的灰 */
.dao-map { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; margin: 4px 0 14px; padding: 10px 6px 8px; }
.dao-map::before { content: ''; position: absolute; left: 6%; right: 6%; top: 27px; height: 3px; background: var(--border-l3); opacity: 0.8;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6' preserveAspectRatio='none'><path d='M0 3.4 Q8 1 40 1.8 Q120 2.6 200 2.4 L200 3 Q130 5.6 40 4.6 Q10 4.4 0 3.4 Z'/></svg>") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6' preserveAspectRatio='none'><path d='M0 3.4 Q8 1 40 1.8 Q120 2.6 200 2.4 L200 3 Q130 5.6 40 4.6 Q10 4.4 0 3.4 Z'/></svg>") center / 100% 100% no-repeat; }
.dm-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.dm-seal { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; font-family: var(--font-brush); font-size: 1.25em; line-height: 1; border-radius: 4px; background: var(--bg-l1); border: 2px solid var(--border-l3); color: var(--text-l4); }
.dm-realm { font-size: 0.75em; color: var(--text-l4); white-space: nowrap; }
.dm-node.picked .dm-seal { color: #fff2e4; border-color: transparent; transform: rotate(-4deg); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
.dm-node.picked.k-zhan .dm-seal { background: #a8322a; }
.dm-node.picked.k-sheng .dm-seal { background: #3f7f6a; }
.dm-node.picked.k-huo .dm-seal { background: #8a6420; }
.dm-node.picked .dm-realm { color: var(--text-l2); }
.dm-node.pending .dm-seal { color: var(--color-danger); border: 2px dashed var(--color-danger); animation: dmPulse 1.6s ease-in-out infinite; }
.dm-node.pending .dm-realm { color: var(--color-danger); }
.dm-node.locked { opacity: 0.45; }
@keyframes dmPulse { 50% { box-shadow: 0 0 0 4px rgba(196, 72, 58, 0.18); } }

/* 节点：漆木匾额标题 + 三枚竖令牌 */
.dao-node { margin-bottom: 14px; }
.dao-node-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; padding: 6px 12px; background: linear-gradient(180deg, #2c2116, #17110b); border: 1px solid #6b5228; box-shadow: inset 0 0 0 1px #0e0a06; border-radius: 2px; }
.dnh-name { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-brush); font-size: 1.35em; letter-spacing: 0.12em; color: #f0d58c; }
.dnh-name .glyph, .dnh-name .emo { color: #d9b866; font-size: 0.8em; }
.dnh-note { font-size: 0.78em; color: #bca778; }
.dao-node.pending .dnh-note { color: #f0a08c; }
.dao-tokens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.dao-token { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 22px 10px 40px; font: inherit; text-align: center; cursor: pointer; color: #4a4438; background: linear-gradient(180deg, #f5ecd4, #e6d6b0); border: none; border-radius: 48px 48px 4px 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(125, 79, 34, 0.25), inset 0 0 0 5px rgba(255, 255, 255, 0.25), inset 0 0 0 6px rgba(125, 79, 34, 0.15); transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s; }
.dao-token::before { content: ''; position: absolute; left: 50%; top: 8px; width: 8px; height: 8px; transform: translateX(-50%); border-radius: 50%; background: #1d1913; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); }
.dao-token:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(125, 79, 34, 0.45), inset 0 0 0 5px rgba(255, 255, 255, 0.25), inset 0 0 0 6px rgba(125, 79, 34, 0.2); }
.dao-token.off { opacity: 0.72; }
.dao-token.off:hover { opacity: 1; }
.dt-kind { padding: 0 8px; font-size: 0.72em; line-height: 1.7; color: #fff2e4; border-radius: 9px; background: #6b5f4e; }
.dao-token.k-zhan .dt-kind { background: #a8322a; }
.dao-token.k-sheng .dt-kind { background: #3f7f6a; }
.dao-token.k-huo .dt-kind { background: #8a6420; }
.dt-name { font-family: var(--font-brush); font-size: 1.75em; line-height: 1.15; letter-spacing: 0.1em; text-indent: 0.1em; color: #231f19; }
.dt-desc { font-size: 0.8em; line-height: 1.55; color: #4a4438; }
.dao-token.on { background: linear-gradient(180deg, #faf2dc, #eee0bc); }
.dao-token.on.k-zhan { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 2px #a8322a; }
.dao-token.on.k-sheng { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 2px #3f7f6a; }
.dao-token.on.k-huo { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 2px #8a6420; }
.dao-token.on::after { content: '立'; position: absolute; left: calc(50% - 13px); bottom: 8px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-family: var(--font-brush); font-size: 1.05em; color: #fff2e4; background: #a8322a; border-radius: 3px; transform: rotate(-8deg); opacity: 0.92; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.dao-token.on.fresh::after { animation: daoStamp 0.4s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes daoStamp { from { opacity: 0; transform: rotate(-8deg) scale(2); } to { opacity: 0.92; transform: rotate(-8deg) scale(1); } }
.qiyu-modal .sect-rules summary { color: var(--text-l4); border-color: var(--border-l3); }
@media (max-width: 600px) {
    .dao-tokens { grid-template-columns: 1fr; gap: 8px; }
    .dao-token { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; text-align: left; gap: 4px 8px; padding: 10px 40px 10px 22px; border-radius: 4px 24px 24px 4px; }
    .dao-token::before { left: 9px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; }
    .dt-name { font-size: 1.4em; text-indent: 0; }
    .dt-desc { flex-basis: 100%; }
    .dao-token.on::after { left: auto; right: 10px; top: 50%; bottom: auto; margin-top: -13px; }
    .dm-seal { width: 28px; height: 28px; font-size: 1.05em; }
    .dao-map::before { top: 24px; }
    .dm-realm { font-size: 0.68em; }
}
@media (prefers-reduced-motion: reduce) { .dm-node.pending .dm-seal, .dao-token.on::after { animation: none; } }

/* ==================== v7.61 奇遇统一：类别印、「险」字选项、玉璧奇物 ==================== */
.qiyu-card { position: relative; box-shadow: 0 1px 4px rgba(60, 40, 20, 0.15); }
.qiyu-head { align-items: center; }
.qiyu-catseal { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-brush); font-size: 0.95em; line-height: 1; color: #fff2e4; background: #a8322a; border-radius: 3px; transform: rotate(-5deg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.qiyu-name { font-family: var(--font-brush); font-size: 1.3em; letter-spacing: 0.06em; }
.qiyu-opt.risk { position: relative; padding-right: 34px; }
.qiyu-opt.risk::after { content: '险'; position: absolute; right: 8px; top: 50%; margin-top: -10px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-family: var(--font-brush); font-size: 0.85em; color: #a8322a; border: 1.5px solid #a8322a; border-radius: 50%; }
.qiyu-opt.qiyu-leave .qiyu-opt-label { font-weight: normal; color: var(--text-l4); }
/* 奇物匣：已得是一枚玉璧（内圈古金），未得是虚线圆 */
.relic { padding: 8px 4px 6px; }
.relic-ico { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px dashed var(--border-l3); font-size: 1.15em; }
.relic.owned .relic-ico { color: #231f19; border: none; background: radial-gradient(circle, #f3ecd8 0 30%, #b8d4c4 31%, #8fb8a2 62%, #6f9c86 100%); box-shadow: inset 0 0 0 2px rgba(138, 100, 32, 0.55), 0 1px 3px rgba(0, 0, 0, 0.25); }
.relic.owned .relic-name { font-family: var(--font-brush); font-size: 1em; letter-spacing: 0.04em; }
.relic-cat-head b { font-family: var(--font-brush); font-weight: normal; font-size: 1.15em; color: var(--text-l1); }

/* ==================== v7.62 位图主视觉：开始界面 / 试玩结束页 / 结局卷轴 ==================== */
.start-hero .sh-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; }
.start-hero.sh-photo .sh-text { right: auto; left: 6%; text-align: left; }
.start-hero.sh-photo::after { box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.55); }
.ending-art { margin: -6px -6px 2px; line-height: 0; }
.ending-art img { width: 100%; height: auto; mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 50%, #000 62%, transparent 100%);
            mask-image: radial-gradient(ellipse 72% 78% at 50% 50%, #000 62%, transparent 100%); }

/* ==================== v7.63 试做：位图突破插画（目前只有筑基） ==================== */
/* 位图垫在 canvas 下面：先从墨色里浮现，整段缓慢推近，最后和文字一起淡出；人物画在画里，标题挪到上方天空 */
.fx-art { position: absolute; inset: 0; z-index: 0; background: #07060a; overflow: hidden; }
.fx-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: 0; transform: scale(1);
    animation: fxArtIn 1.1s ease-out 0.05s forwards, fxArtPush var(--fx-dur, 4s) linear forwards, fxFadeOut 0.6s ease-in calc(var(--fx-dur, 4s) - 0.6s) forwards; }
.fx-has-art .fx-canvas { z-index: 1; }
.fx-has-art .fx-text { z-index: 2; top: var(--fx-text-top, 10%); }
.fx-text-small .fx-title { font-size: clamp(2.6rem, 12vw, 5.6rem); }
@keyframes fxArtIn { from { opacity: 0; filter: brightness(0.3) blur(6px); } to { opacity: 1; filter: none; } }
@keyframes fxArtPush { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .fx-art img { animation: none; opacity: 1; transform: none; } }
.fx-text-low .fx-skip { bottom: auto !important; top: 4%; }
.fx-has-art .fx-skip { position: fixed; left: 0; right: 0; bottom: 5%; margin: 0; color: rgba(243, 226, 184, 0.65); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }

/* ==================== v7.63 D 套：引路老者、闭关归来（开宗立派走突破特效的 override.art） ==================== */
/* 引路老者：位图立在深色弹窗上，四周渐隐融进底色，保留原来的呼吸起伏 */
.guide-elder-img { display: block; width: 150px; height: auto; margin: 0 auto;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
            mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
    mix-blend-mode: lighten;   /* 图的底色比弹窗更黑：变亮叠加让底色直接融进弹窗，只留人物 */
    animation: bsBreathe 4.5s ease-in-out infinite; transform-origin: 50% 95%; }
@media (min-width: 601px) { .modal-content[data-skin="guide"] .guide-wrap { grid-template-columns: 150px 1fr; } }
.guide-elder-img + .guide-name { margin-top: -6px; position: relative; }
@media (max-width: 600px) { .guide-elder-img { width: 84px; } }
@media (prefers-reduced-motion: reduce) { .guide-elder-img { animation: none; } }
/* 闭关归来：卷轴顶部的宣纸小插画，压低高度，正片叠底融进卷轴 */
.offline-art { margin: -4px -6px 0; }
.offline-art img { max-height: 190px; object-fit: cover;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 66%, transparent 100%);
            mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 66%, transparent 100%); }

/* ==================== v7.63 E 套：渡劫登场画面改整幅插画 ==================== */
/* 画里已有修士（左）和对手（右）：只叠名字和台词；从黑里浮现、缓慢推近，2.6 秒后淡出 */
.vs-overlay.vs-photo { background: #050403; animation: vsOut 0.3s ease-in 2.3s forwards; }
.vs-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: vsPhotoIn 0.45s ease-out both, vsPhotoPush 2.6s linear both; }
.vs-photo .vs-name-l { left: 6%; top: 9%; animation: vsNameL 0.4s cubic-bezier(.2, .9, .3, 1) 0.15s both; }
.vs-photo .vs-name-r { right: 6%; top: 9%; text-align: right; animation: vsNameR 0.4s cubic-bezier(.2, .9, .3, 1) 0.25s both; }
.vs-photo .vs-bubble { animation-delay: 0.6s; }
@keyframes vsPhotoIn { from { opacity: 0; filter: brightness(0.3); } to { opacity: 1; filter: none; } }
@keyframes vsPhotoPush { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes vsNameL { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes vsNameR { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
/* 手机竖屏：裁中间会把左右两人都裁掉，改为整张图居中显示（上下留黑），名字压在图上方 */
@media (max-aspect-ratio: 1/1) { .vs-img { object-fit: contain; top: 18%; height: 64%; } }
@media (prefers-reduced-motion: reduce) { .vs-img, .vs-photo .vs-name-l, .vs-photo .vs-name-r { animation: none; } }

/* ==================== v7.64 装备器型：炼器卡上的器型切换 ==================== */

/* ==================== v7.65 装备页插画立绘：人物插画 + 悬浮法宝 + 绕身道基 ==================== */
.ep-stage { position: relative; height: 340px; border-radius: 4px; overflow: hidden; border: 1px solid #000; isolation: isolate;
    background: radial-gradient(ellipse 55% 75% at 50% 60%, #1b2230 0%, #0c0f15 60%, #07080b 100%); }
.ep-aura { position: absolute; left: 50%; bottom: -10%; width: 70%; height: 95%; transform: translateX(-50%); z-index: 0;
    background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--root) 30%, transparent) 0%, transparent 65%); animation: epAura 5s ease-in-out infinite alternate; }
.ep-halo { position: absolute; left: 50%; top: 6%; width: 150px; height: 150px; transform: translateX(-50%); z-index: 1; border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 228, 160, 0.55), 0 0 30px 6px rgba(255, 220, 140, 0.35), inset 0 0 24px rgba(255, 220, 140, 0.3); }
.ep-figure { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; transform: translateX(-50%); z-index: 2;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%); }
/* 悬浮法宝：武器在左、饰品在右，轻轻上下浮动 */
.ep-fabao { position: absolute; z-index: 4; animation: epBob 3.6s ease-in-out infinite; }
.ep-fabao img { display: block; height: 100%; width: auto; }
.ep-weapon { left: calc(50% - 250px); top: 8%; height: 84%; transform: rotate(-12deg); }
.ep-jewel { right: max(10px, calc(50% - 235px)); height: 24%; animation-duration: 4.2s; }
.ep-jewel0 { top: 12%; }
.ep-jewel1 { top: 50%; right: max(40px, calc(50% - 205px)); animation-delay: -1.6s; }
.ep-fabao-dot { width: 26px; height: 26px; }
.ep-fabao-dot i { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff 0 18%, var(--fb-glow) 40%, transparent 72%); box-shadow: 0 0 16px var(--fb-glow); }
.ep-weapon.ep-fabao-dot { width: 34px; height: 34px; top: 40%; }
/* 道基：沿椭圆绕身旋转的晶石（转到人物背后时变暗变小） */
.ep-orbit { position: absolute; left: 50%; top: 56%; width: 0; height: 0; z-index: 3; }
.ep-gem { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); transform: rotate(45deg);
    background: linear-gradient(135deg, #fff 0%, var(--c) 45%, color-mix(in srgb, var(--c) 60%, #000) 100%); box-shadow: 0 0 10px var(--c), 0 0 3px #fff;
    animation: epOrbit 14s linear infinite; animation-delay: var(--d); }
@keyframes epOrbit {
    0%    { transform: translate(-150px, 0) rotate(45deg) scale(1);   opacity: 1;   z-index: 5; }
    25%   { transform: translate(0, 34px) rotate(45deg) scale(1.15);  opacity: 1; }
    50%   { transform: translate(150px, 0) rotate(45deg) scale(1);    opacity: 1; }
    62%   { transform: translate(110px, -22px) rotate(45deg) scale(.8); opacity: .45; }
    75%   { transform: translate(0, -34px) rotate(45deg) scale(.7);   opacity: .3; }
    88%   { transform: translate(-110px, -22px) rotate(45deg) scale(.8); opacity: .45; }
    100%  { transform: translate(-150px, 0) rotate(45deg) scale(1);   opacity: 1; }
}
@keyframes epBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes epAura { from { opacity: .7; } to { opacity: 1; } }
@media (max-width: 600px) {
    .ep-stage { height: 300px; }
    .ep-weapon { left: 4%; height: 70%; top: 12%; }
    .ep-jewel { right: 4%; }
    .ep-jewel1 { right: 10%; }
}
@media (prefers-reduced-motion: reduce) { .ep-fabao, .ep-gem, .ep-aura { animation: none; } }
.ep-stage .pt-caption { top: auto; bottom: 0; padding: 18px 0 8px; background: linear-gradient(transparent, rgba(5, 6, 9, 0.75)); }

/* ==================== v7.66 炼器页：部位页签 + 器型筛选 ==================== */
#forgeToolbar { margin: 4px 0 12px; }
.forge-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-l3); overflow-x: auto; scrollbar-width: none; }
.forge-tab { font: inherit; font-size: 0.95em; padding: 7px 14px; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; background: none; color: var(--text-l3); cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.forge-tab:hover { color: var(--text-l1); }
.forge-tab.on { color: var(--text-l1); background: var(--bg-l1); border-color: var(--border-l3); border-bottom: 1px solid var(--bg-l1); box-shadow: inset 0 2px 0 var(--cinnabar); }
.forge-chips, .equip-bag-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.forge-chip { font: inherit; font-size: 0.82em; line-height: 1.6; padding: 1px 12px; border: 1px solid var(--border-l4); border-radius: 12px; background: var(--bg-l1); color: var(--text-l3); cursor: pointer; }
.forge-chip:hover { border-color: var(--bronze-dim); color: var(--text-l1); }
.forge-chip.on { background: var(--cinnabar); border-color: transparent; color: #fff2e4; }
.equip-bag-sep { width: 1px; align-self: stretch; background: var(--border-l3); margin: 0 4px; }
.forge-tier-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; margin: 6px 0 -2px; padding-bottom: 4px; border-bottom: 1px solid var(--border-l3); color: var(--text-l1); font-size: 1.02em; letter-spacing: 1px; }
.forge-tier-head small { font-size: 0.78em; color: var(--text-l4); letter-spacing: 0; }
.list-fold-body .forge-tier-head:not(:first-child) { margin-top: 10px; }
.forge-more { grid-column: 1 / -1; text-align: center; color: var(--text-l4); font-size: 0.85em; padding: 4px 0 8px; }
.forge-own { font-size: 0.8em; color: var(--text-l3); text-align: center; margin: 2px 0; line-height: 1.5; }
.forge-own b { color: var(--gold, #d8b860); font-weight: normal; }
.forge-own .up { color: var(--jade); }
.forge-own .down { color: var(--color-danger); }
.recipe-card .rc-art:has(.rc-fabao) { height: 96px; }
.rc-art .rc-fabao { display: block; margin: 0 auto; height: 96px; width: auto; max-width: 100%; object-fit: contain; }
.rc-art .rc-fabao-jewelry { height: 62px; }
@media (max-width: 768px) {
    .recipe-card .rc-art:has(.rc-fabao) { height: 56px; width: 36px; grid-row: 1 / span 4; }
    .rc-art .rc-fabao { height: 56px; }
    .rc-art .rc-fabao-jewelry { height: 34px; }
    .forge-own { text-align: left; }
    .forge-tab { padding: 7px 10px; }
}
.forge-tab.busy::after, .forge-tab.quest::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-left: 5px; vertical-align: 2px; background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.forge-tab.quest::after { background: var(--cinnabar); box-shadow: 0 0 6px var(--cinnabar); }
.forge-lack { font-size: 0.78em; color: var(--color-warning); text-align: center; margin: 2px 0; line-height: 1.5; }
@media (max-width: 768px) { .forge-lack { text-align: left; } }
/* v7.66 炼器品质：下品灰、中品原色、上品青、极品金 */
.gq0 { color: var(--text-l4); }
.gq2 { color: var(--azure); }
.gq3 { color: var(--gold); text-shadow: 0 0 6px color-mix(in srgb, var(--gold) 45%, transparent); }
.forge-quality { display: flex; justify-content: center; gap: 8px; font-size: 0.76em; margin: 2px 0; font-family: var(--font-num, inherit); }
.forge-quality .gq1 { color: var(--text-l3); }
.equip-bag-btns { display: flex; gap: 4px; flex-shrink: 0; }
.salvage-btn { opacity: .85; }
@media (max-width: 768px) { .forge-quality { justify-content: flex-start; } }
/* ==================== v7.67 装备页：点栏位换装、背包上移、道途折叠 ==================== */
.equip-slot.clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.equip-slot.clickable:hover { border-color: var(--bronze-dim); }
.equip-slot.picking { border-color: var(--cinnabar); box-shadow: 0 0 0 1px var(--cinnabar) inset; }
.equip-slot-pick { font-size: 0.74em; color: var(--text-l4); margin: -2px 0 6px; }
.equip-slot.picking .equip-slot-pick { color: var(--cinnabar); }
.equip-picker { border: 1px solid var(--cinnabar); border-radius: var(--radius-md); background: var(--bg-l1); padding: 8px 10px; margin: -4px 0 14px; }
.ep-head { display: flex; justify-content: space-between; align-items: center; color: var(--text-l2); font-size: 0.9em; padding-bottom: 6px; border-bottom: 1px solid var(--border-l3); margin-bottom: 4px; }
.ep-close { font: inherit; background: none; border: none; color: var(--text-l3); cursor: pointer; padding: 2px 6px; }
.ep-close:hover { color: var(--text-l1); }
.ep-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border-l4); }
.ep-row:last-child { border-bottom: none; }
.ep-name { flex: 0 0 auto; min-width: 8em; color: var(--text-l1); }
.ep-stats { flex: 1; font-size: 0.82em; color: var(--text-l3); line-height: 1.5; }
.ep-diff .up { color: var(--jade); }
.ep-diff .down { color: var(--color-danger); }
.ep-block { display: block; color: var(--color-warning); }
.ep-empty { color: var(--text-l4); font-size: 0.88em; padding: 8px 0; }
.equip-picker .equip-btn[disabled] { opacity: .45; cursor: not-allowed; }
.dao-fold > summary { list-style: none; cursor: pointer; }
.dao-fold > summary::-webkit-details-marker { display: none; }
.dao-fold > summary .ss-title::after { content: ' ▸'; color: var(--text-l4); font-size: 0.8em; }
.dao-fold[open] > summary .ss-title::after { content: ' ▾'; }
.dao-fold[open] > summary .dao-map { display: none; }
.dao-left { color: var(--cinnabar); font-weight: normal; }
@media (max-width: 768px) {
    .ep-row { flex-wrap: wrap; gap: 4px 10px; }
    .ep-name { min-width: 0; }
    .ep-stats { flex-basis: 100%; order: 3; }
}
.equip-slots { grid-auto-flow: row dense; }
.equip-slots .equip-picker { grid-column: 1 / -1; margin: 0; }
@media (max-width: 768px) {
    .equip-slot { padding: 8px 6px; }
    .equip-slot-stats { font-size: 0.76em; margin-bottom: 4px; }
    .equip-slot .equip-btn { min-height: 28px !important; font-size: 0.8em !important; padding: 2px 12px !important; }
}
@media (max-width: 768px) { .equip-picker .equip-btn { min-height: 30px !important; font-size: 0.82em !important; padding: 2px 14px !important; margin-left: auto; } }
.equip-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 2px; font-size: 0.85em; color: var(--text-l3); }
.equip-bulk small { color: var(--text-l4); }
/* ==================== v7.68 突破对比卡 ==================== */
.bt-delta { margin: 8px auto 12px; padding: 10px 14px; border: 1px solid var(--gold); border-radius: var(--radius-md); background: color-mix(in srgb, var(--gold) 8%, transparent); max-width: 360px; }
.bt-title { text-align: center; font-family: var(--font-title); color: var(--gold); font-size: 1.15em; letter-spacing: 4px; margin-bottom: 6px; }
.bt-row { display: grid; grid-template-columns: 3em 1fr auto 1fr 4em; align-items: baseline; gap: 6px; padding: 2px 0; font-family: var(--font-num, inherit); }
.bt-k { color: var(--text-l3); }
.bt-a { text-align: right; color: var(--text-l4); }
.bt-arrow { color: var(--text-l4); }
.bt-b { color: var(--text-l1); font-weight: bold; }
.bt-pct { text-align: right; }
.bt-pct.up { color: var(--jade); }
.bt-pct.down { color: var(--color-danger); }
.bt-surge { margin-top: 6px; font-size: 0.85em; color: var(--gold); text-align: center; }
.rc-art .rc-fabao-armor { height: 88px; }
@media (max-width: 768px) { .rc-art .rc-fabao-armor { height: 46px; } }
/* ==================== v7.69 丹药：服药中 ==================== */
.pill-bar { border: 1px solid var(--border-l3); border-radius: var(--radius-md); background: var(--bg-l1); padding: 8px 10px; margin-bottom: 10px; }
.pb-title { color: var(--text-l2); font-size: 0.92em; margin-bottom: 6px; }
.pb-title small { color: var(--text-l4); margin-left: 6px; }
.pb-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pb-slot { border: 1px dashed var(--border-l4); border-radius: var(--radius-md); padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pb-slot.picking { border-color: var(--cinnabar); border-style: solid; }
.pb-cat { font-size: 0.78em; color: var(--text-l4); letter-spacing: 2px; }
.pb-body { color: var(--text-l1); font-size: 0.9em; line-height: 1.4; min-height: 2.6em; }
.pb-body small { display: block; color: var(--text-l3); font-size: 0.82em; }
.pb-empty { color: var(--text-l4); }
.pb-ops { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.82em; }
.pb-auto { display: inline-flex; align-items: center; gap: 3px; color: var(--text-l3); cursor: pointer; }
.pb-ops .forge-chip[disabled] { opacity: .5; cursor: not-allowed; }
.pb-picker { margin: 8px 0 0; }
.pill-take { margin-top: 4px; }
@media (max-width: 768px) { .pb-slots { grid-template-columns: 1fr; } .pb-body { min-height: 0; } }
.pb-auto { white-space: nowrap; }
/* v7.70 敌人出手：立绘朝玩家扑出半个身位再弹回（35% 处「打中」，和 ENEMY_LUNGE_HIT_MS 对齐） */
.bs-stage .monster-sprite.attack .bs-art { animation: bsLunge 0.38s cubic-bezier(.3, .7, .4, 1), bsIdle 3.4s ease-in-out 0.38s infinite; }
@keyframes bsLunge {
    0% { transform: none; }
    18% { transform: translateX(8%) scale(0.97); }
    35% { transform: translateX(var(--lunge, -60%)) scale(1.06); }
    55% { transform: translateX(calc(var(--lunge, -60%) * 0.9)) scale(1.03); }
    100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .bs-stage .monster-sprite.attack .bs-art { animation: none; } }
/* v7.70 玩家出手：朝敌人冲出半个间距再收回（30% 处「打中」，和 PLAYER_LUNGE_HIT_MS 对齐） */
.bs-player.attack .bs-art { animation: bsPlayerLunge 0.34s cubic-bezier(.3, .7, .4, 1), bsBreathe 4s ease-in-out 0.34s infinite; }
@keyframes bsPlayerLunge {
    0% { transform: none; }
    15% { transform: translateX(-4%); }
    32% { transform: translateX(var(--plunge, 30%)) skewX(-4deg); }
    55% { transform: translateX(calc(var(--plunge, 30%) * 0.85)); }
    100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .bs-player.attack .bs-art { animation: none; } }
/* ==================== v7.72 打击感：血条残影、卡帧 ==================== */
.hp-bar .hp-ghost { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: rgba(255, 244, 222, 0.75); transition: width 0.45s ease-in 0.35s; pointer-events: none; }
.hp-bar .hp-fill { position: relative; z-index: 1; }
.hp-bar .hp-text { z-index: 2; }
.bs-stage.hitstop .bs-art, .bs-stage.hitstop .bs-fx-layer, .bs-stage.hitstop .bs-fx-layer * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .hp-bar .hp-ghost { transition: none; } }
/* v7.72 御器：悬浮在玩家身前的法宝（出手动画由 JS 的 Web Animations 驱动） */
.bs-fabao { position: absolute; z-index: 3; left: calc(min(40%, 170px) * 0.78 + 2%); bottom: 22%; height: 46%; transform: rotate(20deg); pointer-events: none; animation: bsFabaoBob 3s ease-in-out infinite; }
.bs-fabao img { height: 100%; width: auto; display: block; }
@keyframes bsFabaoBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.bs-fabao[data-type="hammer"], .bs-fabao[data-type="greatsword"] { height: 50%; }
.bs-fabao[data-type="spear"] { height: 56%; bottom: 16%; }
@media (prefers-reduced-motion: reduce) { .bs-fabao { animation: none; } }
/* v7.72 战斗插画立绘：按舞台高度定尺寸（兽横着、人和傀儡竖着），宽度跟着图走 */
.bs-stage .bs-player.bm { width: auto; height: var(--ph, 88%); }
.bs-stage .monster-sprite.bm { width: auto; height: var(--bh, 86%); }
.bs-stage .bm .bs-art.bs-bitmap { height: 100%; width: auto; display: block; }
.bs-stage .bs-player.bm .bs-art { transform-origin: 45% 95%; }
.bs-stage .monster-sprite.bm .bs-boss { filter: drop-shadow(0 0 10px rgba(255, 210, 120, .55)); }
@media (max-width: 600px) { .bs-stage .monster-sprite.bm { height: calc(var(--bh, 86%) * 0.72); } .bs-stage .bs-player.bm { height: calc(var(--ph, 88%) * 0.91); } }
/* 用插画立绘时背景压暗、降饱和，让角色是画面主体 */
.bs-stage:has(.bm) .bs-bg { filter: brightness(.68) saturate(.75); }
/* v7.72 插画立绘在各处的尺寸：区域封面、Boss 登场、问道塔、外敌、分身、镜像对手 */
.bs-flipwrap { display: block; line-height: 0; }
.bs-flipwrap img { display: block; height: 100%; width: auto; transform: scaleX(-1); }
.bm .bs-art.bs-flipwrap { height: 100%; width: auto; }
.aa-foe img.bs-art, .aa-foe .bs-flipwrap { height: 100%; width: auto; }
.vs-art img.bs-art, .vs-art .bs-flipwrap { width: 100%; height: min(46vh, 340px); object-fit: contain; object-position: 50% 100%; }
.vs-art .bs-flipwrap img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.tw-guard-art img.bs-art, .invade-art img.bs-art { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.cl-art img.bs-art { height: 100%; width: auto; }
/* ==================== v7.73 本次战利品 ==================== */
.battle-loot { margin: 10px 0 6px; padding: 8px 10px; border: 1px solid var(--border-l3); border-radius: var(--radius-md); background: var(--bg-l1); }
.bl-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.bl-title { font-family: var(--font-title); color: var(--gold); font-size: 1.05em; letter-spacing: 2px; }
.bl-span { color: var(--text-l4); font-size: 0.8em; }
.bl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.bl-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--border-l4); border-radius: 4px; min-width: 0; }
.bl-item.fresh { animation: blFresh 0.9s ease-out; }
@keyframes blFresh { 0% { border-color: var(--gold); box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 60%, transparent); } 100% { border-color: var(--border-l4); box-shadow: none; } }
.bl-ico { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.bl-ico .ico { width: 24px; height: 24px; }
.bl-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.bl-main b { font-weight: normal; color: var(--text-l1); font-size: 0.88em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-main small { color: var(--text-l4); font-size: 0.74em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-empty { color: var(--text-l4); font-size: 0.85em; }
@media (prefers-reduced-motion: reduce) { .bl-item.fresh { animation: none; } }
@media (max-width: 480px) { .bl-list { grid-template-columns: repeat(2, 1fr); } .bl-main small { white-space: normal; } }
/* ==================== v7.74 器韵：法宝图周围的分阶光效 ==================== */
.ep-fabao, .bs-fabao, .rc-fabao-wrap { isolation: isolate; }
.rc-fabao-wrap { position: relative; display: inline-block; height: 100%; }
.qy { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: -1; pointer-events: none; color: var(--qc); }
.qy > * { position: absolute; display: block; }
/* 灵纹：一圈流转的虚线光环（正圆，按法宝高度定大小） */
.qy-ring { width: var(--qy-r, 64px); height: var(--qy-r, 64px); left: calc(var(--qy-r, 64px) / -2); top: calc(var(--qy-r, 64px) / -2); border-radius: 50%;
    border: 1.5px dashed var(--qc); box-shadow: 0 0 10px color-mix(in srgb, var(--qc) 55%, transparent), inset 0 0 10px color-mix(in srgb, var(--qc) 35%, transparent);
    opacity: .7; animation: qySpin 9s linear infinite; }
.qy-ring2 { --qy-r2: calc(var(--qy-r, 64px) * 1.35); width: var(--qy-r2); height: var(--qy-r2); left: calc(var(--qy-r2) / -2); top: calc(var(--qy-r2) / -2); border-style: dotted; opacity: .5; animation-duration: 14s; animation-direction: reverse; }
/* 流萤：绕身飞旋的光点 */
.qy-motes { left: 0; top: 0; width: 0; height: 0; animation: qySpin 5s linear infinite; }
.qy-motes b { position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px var(--qc);
    transform: rotate(calc(var(--i, 0) * 90deg)) translateX(calc(var(--qy-r, 64px) * .62)); }
.qy-motes b:nth-child(1) { --i: 0; } .qy-motes b:nth-child(2) { --i: 1; } .qy-motes b:nth-child(3) { --i: 2; } .qy-motes b:nth-child(4) { --i: 3; }
.qy-motes b:nth-child(5) { --i: .5; } .qy-motes b:nth-child(6) { --i: 2.5; }
/* 器燃：器身裹着跳动的火 / 电光（大乘） */
.qy-flame { width: calc(var(--qy-r, 64px) * .7); height: calc(var(--qy-r, 64px) * 1.7); left: calc(var(--qy-r, 64px) * -.35); top: calc(var(--qy-r, 64px) * -.85);
    border-radius: 50% 50% 45% 45%; background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--qc) 75%, #fff) 0%, color-mix(in srgb, var(--qc) 55%, transparent) 35%, transparent 70%);
    filter: blur(3px); mix-blend-mode: screen; animation: qyFlame 0.9s ease-in-out infinite alternate; }
.qy-flame2 { animation-duration: 1.3s; animation-delay: -.4s; opacity: .7; transform: scaleX(.7); }
/* 法阵：身后一圈篆文法阵（真仙起） */
.qy-seal { width: calc(var(--qy-r, 64px) * 1.6); height: calc(var(--qy-r, 64px) * 1.6); left: calc(var(--qy-r, 64px) * -.8); top: calc(var(--qy-r, 64px) * -.8);
    opacity: .55; filter: drop-shadow(0 0 4px var(--qc)); animation: qySpin 24s linear infinite; font-family: var(--font-title, serif); }
/* 星辉：星芒闪烁（大罗、道祖） */
.qy-stars { left: 0; top: 0; width: 0; height: 0; }
.qy-stars b { position: absolute; width: 10px; height: 10px; margin: -5px; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    filter: drop-shadow(0 0 4px var(--qc)); animation: qyTwinkle 2.4s ease-in-out infinite; }
.qy-stars b:nth-child(1) { left: calc(var(--qy-r, 64px) * -.7); top: calc(var(--qy-r, 64px) * -.5); }
.qy-stars b:nth-child(2) { left: calc(var(--qy-r, 64px) * .6); top: calc(var(--qy-r, 64px) * -.7); animation-delay: -.6s; }
.qy-stars b:nth-child(3) { left: calc(var(--qy-r, 64px) * .75); top: calc(var(--qy-r, 64px) * .4); animation-delay: -1.2s; width: 7px; height: 7px; }
.qy-stars b:nth-child(4) { left: calc(var(--qy-r, 64px) * -.6); top: calc(var(--qy-r, 64px) * .6); animation-delay: -1.8s; width: 8px; height: 8px; }
.qy-stars b:nth-child(5) { left: 0; top: calc(var(--qy-r, 64px) * -.95); animation-delay: -.3s; width: 6px; height: 6px; }
@keyframes qySpin { to { rotate: 360deg; } }
@keyframes qyFlame { from { transform: scale(1, .92) translateY(2px); opacity: .75; } to { transform: scale(1.12, 1.08) translateY(-3px); opacity: 1; } }
@keyframes qyTwinkle { 0%, 100% { transform: scale(.4); opacity: .3; } 50% { transform: scale(1.1); opacity: 1; } }
/* 各处的器韵大小 */
.ep-weapon .qy { --qy-r: 120px; }
.ep-jewel .qy { --qy-r: 64px; }
.bs-fabao .qy { --qy-r: 70px; }
.rc-fabao-wrap .qy { --qy-r: 62px; }
.rc-fabao-wrap .qy-s3 .qy-flame { filter: blur(2px); }
/* 出手：残影、命中法阵、舞台闪 */
.bs-fabao-ghost { animation: none !important; pointer-events: none; z-index: 2; }
.qy-hitseal { position: absolute; width: 22%; max-width: 110px; aspect-ratio: 1; transform: translate(-50%, -50%); color: var(--qc); pointer-events: none;
    filter: drop-shadow(0 0 8px var(--qc)); animation: qyHitSeal .5s ease-out forwards; }
.qy-hitseal.big { width: 32%; max-width: 160px; }
.qy-hitseal svg { width: 100%; height: 100%; }
@keyframes qyHitSeal { 0% { transform: translate(-50%, -50%) scale(.3) rotate(-30deg); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.25) rotate(20deg); opacity: 0; } }
.bs-stage.qy-flash::before { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(circle at 70% 50%, rgba(255, 250, 230, .55), transparent 70%); animation: qyFlash .35s ease-out forwards; }
@keyframes qyFlash { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .qy *, .qy-hitseal, .bs-stage.qy-flash::before { animation: none !important; } }

/* ==================== v7.75 图鉴 ==================== */
.nav-mini.nav-wide { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 6px; padding: 5px 0; }
.nav-mini.nav-wide .nav-ico { font-size: 1.25em; }
body[data-panel="codex"] .nav-mini[data-nav="codex"] { background: var(--bg-l3); border-color: var(--cinnabar-2); box-shadow: inset 0 0 0 1px var(--cinnabar); color: var(--text-l1); }
.mobile-skill-btn.sk-codex { position: relative; }
.mobile-skill-btn.sk-codex.fresh::after { content: ''; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--cinnabar-2); }

.cx-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-l3); overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; }
.cx-tab { font: inherit; font-size: 0.95em; padding: 7px 14px; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; background: none; color: var(--text-l3); cursor: pointer; white-space: nowrap; margin-bottom: -1px; position: relative; }
.cx-tab small { margin-left: 6px; font-family: var(--font-num); font-size: 0.8em; color: var(--text-l4); }
.cx-tab:hover { color: var(--text-l1); }
.cx-tab.on { color: var(--text-l1); background: var(--bg-l1); border-color: var(--border-l3); border-bottom: 1px solid var(--bg-l1); box-shadow: inset 0 2px 0 var(--cinnabar); }
.cx-tab.fresh::after { content: ''; position: absolute; top: 5px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--cinnabar-2); }

.cx-progress { padding: 10px 12px; margin-bottom: 12px; background: var(--bg-l2); border: 1px solid var(--border-l4); border-radius: var(--radius-sm); }
.cx-prog-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.cx-prog-top b { font-family: var(--font-brush, var(--font-title)); font-size: 1.15em; color: var(--text-l1); font-weight: normal; }
.cx-prog-top span { color: var(--text-l2); font-size: 0.9em; }
.cx-bar { position: relative; height: 8px; border-radius: 4px; background: var(--bg-sunken); border: 1px solid var(--border-l4); margin: 0 4px 8px; }
.cx-bar.thin { height: 5px; margin: 6px 0 0; }
.cx-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--bronze-dim), var(--gold)); transition: width 0.4s; }
.cx-mark { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; transform: rotate(45deg); background: var(--bg-l3); border: 1px solid var(--border-l2); }
.cx-mark.on { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 6px var(--gold); }
.cx-reward { font-size: 0.88em; color: var(--text-l2); line-height: 1.6; }
.cx-reward b { color: var(--jade); }
.cx-note { font-size: 0.8em; color: var(--text-l3); line-height: 1.55; margin-top: 4px; }

.cx-group { margin-bottom: 14px; }
.cx-group-title { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-brush, var(--font-title)); font-size: 1.05em; color: var(--text-l1); padding-bottom: 4px; margin-bottom: 8px; border-bottom: 1px dashed var(--border-l3); }
.cx-group-title small { font-family: var(--font-num); font-size: 0.75em; color: var(--text-l3); }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.cx-grid-gal { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.cx-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; min-width: 0; font: inherit; color: var(--text-l1); background: var(--bg-l2); border: 1px solid var(--border-l4); border-radius: var(--radius-sm); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.cx-card:hover { border-color: var(--bronze-dim); background: var(--bg-l3); }
.cx-card b { font-weight: normal; font-size: 0.85em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-card small { font-size: 0.72em; color: var(--text-l3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-card.new::before { content: "新"; position: absolute; top: -6px; left: -4px; z-index: 2; padding: 0 4px; font-size: 0.7em; line-height: 1.5; color: #fff; background: var(--cinnabar-2); border-radius: 2px; }
.cx-art { display: flex; align-items: flex-end; justify-content: center; width: 72px; height: 72px; line-height: 0; }
.cx-art .bs-art { height: 100%; width: auto; max-width: 100%; overflow: visible; object-fit: contain; }
.cx-art .bs-art *, .cx-d-art .bs-art * { animation: none !important; }
.cx-ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 30px; line-height: 1; }
.cx-ico svg, .cx-ico img { width: 100%; height: 100%; }
.cx-card.locked .cx-art, .cx-card.locked .cx-ico { filter: brightness(0) opacity(0.35); }
.cx-card.locked b { color: var(--text-l3); }
.cx-card.q2 { border-color: color-mix(in srgb, var(--azure) 60%, transparent); }
.cx-card.q3 { border-color: var(--gold); box-shadow: inset 0 0 8px color-mix(in srgb, var(--gold) 30%, transparent); }
.cx-q0 { color: var(--text-l3); }
.cx-q1 { color: var(--text-l1); }
.cx-q2 { color: var(--azure); }
.cx-q3 { color: var(--gold); }
.cx-thumb { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: var(--bg-sunken); }
.cx-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cx-thumb i { font-style: normal; font-size: 1.6em; opacity: 0.4; }
.cx-gal small { white-space: normal; text-align: center; }

.cx-know-tag { display: inline-block; margin-left: 4px; padding: 0 4px; font-size: 0.72em; line-height: 1.5; border-radius: 2px; vertical-align: 1px; color: var(--jade); border: 1px solid color-mix(in srgb, var(--jade) 50%, transparent); }
.cx-know-tag.lv2 { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 60%, transparent); }
.cx-card .cx-know-tag { position: absolute; top: 4px; right: 4px; margin: 0; }

.cx-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--overlay, rgba(0, 0, 0, 0.6)); animation: cxFade 0.15s ease-out; }
@keyframes cxFade { from { opacity: 0; } }
.cx-sheet { position: relative; width: min(420px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px 20px 18px; background: var(--bg-l1); border: 1px solid var(--border-l2); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.cx-ov-gal .cx-sheet { width: min(1000px, 100%); padding: 14px; }
.cx-detail { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.cx-d-art { width: 150px; height: 150px; display: flex; align-items: flex-end; justify-content: center; line-height: 0; }
.cx-d-art .bs-art { height: 100%; width: auto; max-width: 100%; overflow: visible; object-fit: contain; }
.cx-d-ico { width: 64px; height: 64px; font-size: 48px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.cx-d-ico svg, .cx-d-ico img { width: 100%; height: 100%; }
.cx-detail.locked .cx-d-art, .cx-detail.locked .cx-d-ico { filter: brightness(0) opacity(0.35); }
.cx-d-name { font-family: var(--font-brush, var(--font-title)); font-size: 1.4em; color: var(--text-l1); }
.cx-d-desc { font-size: 0.88em; color: var(--text-l3); line-height: 1.55; }
.cx-d-rows { width: 100%; display: flex; flex-direction: column; gap: 4px; text-align: left; font-size: 0.88em; }
.cx-d-rows > div { display: flex; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--border-l4); }
.cx-d-rows span { flex: none; width: 7.5em; color: var(--text-l3); }
.cx-d-rows b { flex: 1; min-width: 0; font-weight: normal; color: var(--text-l1); word-break: break-all; }
.cx-d-know { width: 100%; font-size: 0.86em; color: var(--text-l2); line-height: 1.6; }
.cx-d-gal img { width: 100%; height: auto; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 2px; }
.cx-gal-lock { width: 100%; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; font-size: 3em; opacity: 0.35; background: var(--bg-sunken); }
@media (max-width: 600px) {
    .cx-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
    .cx-grid-gal { grid-template-columns: repeat(2, 1fr); }
    .cx-art { width: 60px; height: 60px; }
    .cx-tab { padding: 7px 10px; }
}

/* ==================== v7.79 支持作者 ==================== */
.support-text { font-size: 0.88em; color: var(--text-l2); line-height: 1.7; margin-bottom: 10px; }
.support-btn { display: block; text-align: center; text-decoration: none; }
.support-nudge { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; padding: 10px 36px 10px 14px; background: var(--bg-l2); border: 1px solid var(--bronze-dim); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); font-size: 0.9em; color: var(--text-l2); line-height: 1.6; }
.support-nudge[hidden] { display: none; }
.support-nudge .sn-text { flex: 1 1 260px; min-width: 0; }
.support-nudge .sn-actions { display: flex; gap: 8px; flex: none; }
.support-nudge .btn { padding: 4px 14px; font-size: 0.92em; text-decoration: none; }
.support-nudge .sn-close { position: absolute; top: 4px; right: 6px; width: 26px; height: 26px; border: none; background: none; color: var(--text-l3); font-size: 1.3em; line-height: 1; cursor: pointer; }
.support-nudge .sn-close:hover { color: var(--text-l1); }
.tutorial-actions a.btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }   /* v7.80 网页版到元婴的弹窗里「去爱发电」是链接 */

/* ==================== v7.81 问道塔重做 ==================== */
.tw-band { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 2px; font-size: 0.86em; color: var(--text-l2); }
.tw-band span { margin-left: auto; color: var(--text-l4); font-size: 0.95em; }
.tw-boss { padding: 0 6px; font-weight: normal; font-size: 0.9em; color: #fff; background: var(--cinnabar-2); border-radius: 2px; }
.tw-reward .ico { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }
.tw-next-relic { font-size: 0.82em; color: var(--text-l4); }
.tw-reset { margin-bottom: 10px; padding: 8px 12px; font-size: 0.86em; line-height: 1.6; color: var(--text-l2); background: var(--bg-l2); border: 1px solid var(--bronze-dim); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); }

/* ==================== v7.82 问道塔排行榜 ==================== */
.tower-board { margin-bottom: 14px; }
.tb-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tb-tab { font: inherit; font-size: 0.85em; padding: 3px 12px; border: 1px solid var(--border-l3); border-radius: 2px; background: var(--bg-l2); color: var(--text-l3); cursor: pointer; }
.tb-tab.on { color: var(--text-l1); border-color: var(--cinnabar-2); box-shadow: inset 0 -2px 0 var(--cinnabar); }
.tb-list { display: flex; flex-direction: column; border: 1px solid var(--border-l4); border-radius: var(--radius-sm); overflow: hidden; }
.tb-row { display: flex; align-items: center; gap: 10px; padding: 6px 12px; font-size: 0.9em; background: var(--bg-l2); }
.tb-row:nth-child(even) { background: var(--bg-l1); }
.tb-row.me { background: color-mix(in srgb, var(--gold) 14%, var(--bg-l2)); box-shadow: inset 3px 0 0 var(--gold); }
.tb-rank { flex: none; width: 2.2em; text-align: center; font-family: var(--font-num); color: var(--text-l3); }
.tb-rank.top1 { color: var(--gold); font-weight: bold; }
.tb-rank.top2 { color: #c9ced6; font-weight: bold; }
.tb-rank.top3 { color: #c98a5a; font-weight: bold; }
.tb-name { flex: 1; min-width: 0; color: var(--text-l1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-realm { flex: none; font-size: 0.85em; color: var(--text-l4); }
.tb-floor { flex: none; min-width: 4em; text-align: right; font-weight: normal; color: var(--gold); }
.tb-empty { padding: 14px; text-align: center; font-size: 0.88em; color: var(--text-l3); background: var(--bg-l2); border: 1px dashed var(--border-l3); border-radius: var(--radius-sm); }
.tb-mine { margin-top: 6px; font-size: 0.86em; color: var(--text-l2); }
.tb-opt { display: block; margin-top: 6px; font-size: 0.82em; color: var(--text-l4); cursor: pointer; }
.tb-opt { display: flex; align-items: center; gap: 6px; }
.tb-opt input[type="checkbox"] { width: auto; height: auto; margin: 0; flex: none; display: inline-block; }

/* ==================== v7.83 排行榜面板 ==================== */
body[data-panel="rank"] .nav-mini[data-nav="rank"] { background: var(--bg-l3); border-color: var(--cinnabar-2); box-shadow: inset 0 0 0 1px var(--cinnabar); color: var(--text-l1); }
.rank-tower-btn { display: block; width: 100%; margin-top: 8px; }

/* v7.84 匿名统计说明 */
.support-text.stats-note { margin: 10px 0 0; font-size: 0.78em; color: var(--text-l4); }

/* v7.85 排行榜独立成页 */
.rank-desc { margin: 0 0 10px; }

/* v7.87 榜上名字 */
.tb-namerow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; font-size: 0.88em; color: var(--text-l2); }
.tb-namerow b { color: var(--text-l1); font-weight: normal; }
.tb-namerow.taken { color: var(--cinnabar-2); }
.tb-namerow input { width: 12em; padding: 3px 6px; font: inherit; }
.tb-namemsg { font-size: 0.92em; color: var(--cinnabar-2); }
.name-hint { margin-top: 4px; font-size: 0.82em; color: var(--cinnabar-2); min-height: 1em; }

/* v7.88 排行榜时间（精确到分钟） */
.tb-realm { text-align: right; line-height: 1.35; }
.tb-time { display: block; font-style: normal; font-family: var(--font-num); font-size: 1.05em; color: var(--text-l4); white-space: nowrap; }

/* v7.89 窄屏（≤1024px，单栏布局）不再显示右侧栏：原来它排在每个界面最下面，内容和别处重复（属性在装备页、修为在顶部、技能经验在技能栏）；
   境界感悟（渡劫等入口、已有的加成、灵根与功法特效）改由顶部的折叠栏显示，手机（≤768px）的纸笺样式不变 */
@media (max-width: 1024px) {
    .side-panel { display: none !important; }
    .realm-lore-mobile { display: block; }
    body.in-battle .realm-lore-mobile { display: none; }
    .realm-lore-mobile .rl-sub { margin-top: 6px; }
    .realm-lore-mobile .rl-sub > summary { cursor: pointer; color: var(--jade); }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .realm-lore-mobile { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--bronze); border-radius: var(--radius-md); background: var(--bg-l2); font-size: 0.88em; line-height: 1.7; }
    .realm-lore-mobile > summary { cursor: pointer; list-style: none; }
    .realm-lore-mobile > summary::-webkit-details-marker { display: none; }
    .realm-lore-mobile > summary::after { content: ' ▸'; color: var(--text-l4); font-weight: normal; }
    .realm-lore-mobile[open] > summary::after { content: ' ▾'; }
}

/* v7.89 问道塔：自己的数值、回放开关 */
.tw-me-stats { margin-top: 2px; font-size: 0.85em; color: var(--text-l3); }
.tw-me-stats b { color: var(--jade); font-weight: normal; }
.tw-replay-opt { display: block; margin-top: 8px; font-size: 0.85em; }

/* v7.90 装备页的奇物一栏 */
.relic-fold .relic-grid { margin-top: 8px; }
.relic-fold .relic-open { margin-top: 10px; }

/* v7.91 引路人介绍：「上一步 / 下一步 / 开始修仙」粘在弹窗可视区域底部，小屏手机不用先往下滑才找得到 */
.tutorial-modal .tutorial-actions { position: sticky; bottom: calc(-1 * var(--spacing-2xl)); z-index: 2; margin: 0 calc(-1 * var(--spacing-2xl)) calc(-1 * var(--spacing-2xl)); padding: 18px var(--spacing-2xl) var(--spacing-2xl); background: linear-gradient(180deg, transparent, var(--inkstone) 40%); }

/* v7.93 账号与云存档 */
.account-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--border-l3); font-size: 0.88em; color: var(--text-l3); line-height: 1.6; }
.account-bar[hidden] { display: none; }
.account-bar .ac-sum { flex: 1 1 200px; }
.account-bar b { color: var(--gold); font-weight: normal; }
.account-bar.in-panel { margin-top: 0; }
#accountModal { z-index: 1200; }
.account-modal { max-width: 420px; }
.account-modal .form-group { margin-bottom: 12px; }
.account-modal .form-group input { width: 100%; box-sizing: border-box; }
.account-modal .ac-main { width: 100%; margin-top: 4px; }
.ac-note { margin-bottom: 14px; font-size: 0.88em; line-height: 1.75; color: var(--text-l3); }
.ac-note b { color: var(--gold); font-weight: normal; }
.ac-msg { min-height: 1.5em; margin: 4px 0 8px; font-size: 0.88em; color: var(--cinnabar-2); }
.ac-msg.ok { color: var(--jade); }
.ac-links { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }
.ac-link { background: none; border: none; padding: 4px 0; color: var(--text-l3); font: inherit; font-size: 0.88em; text-decoration: underline; cursor: pointer; }
.ac-btns { display: flex; flex-direction: column; gap: 10px; }
.ac-code { margin: 6px 0 12px; padding: 14px 8px; border: 1px solid var(--gold); text-align: center; font-family: var(--font-num), monospace; font-size: 1.5em; letter-spacing: 2px; color: var(--gold); user-select: all; }
.slot-cloud { margin-top: 2px; font-size: 0.78em; color: var(--text-l4); }
.slot-cloud.warn { color: var(--cinnabar-2); }
.cc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.cc-col { padding: 10px; border: 1px solid var(--border-l3); font-size: 0.86em; line-height: 1.7; color: var(--text-l2); }
.cc-col.newer { border-color: var(--jade); }
.cc-col b { color: var(--text-l1); font-weight: normal; }
.cc-time { font-size: 0.92em; color: var(--text-l4); }
.ac-danger { align-self: center; color: var(--cinnabar-2); }

/* v7.96 材料从哪来 */
.mat-src { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.mat-src:hover { filter: brightness(1.25); }
#sourceModal { z-index: 1150; }
.source-modal { max-width: 440px; }
.src-have { margin: -6px 0 12px; font-size: 0.9em; color: var(--text-l3); }
.src-have b { color: var(--gold); font-weight: normal; }
.src-have b.lack { color: var(--cinnabar-2); }
.src-title { margin-bottom: 6px; font-size: 0.85em; color: var(--text-l4); }
.src-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--border-l3); font-size: 0.9em; color: var(--text-l2); }
.src-row.locked { color: var(--text-l4); }
.src-text small { display: block; margin-top: 2px; font-size: 0.85em; color: var(--text-l4); }
.src-row .btn { flex: none; }
.src-flash { animation: srcFlash 1.4s ease-out; }
@keyframes srcFlash { 0%, 40% { box-shadow: 0 0 0 3px var(--gold); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* v7.97 画卷弹窗：外框不裁切（上下卷轴要伸出纸边），内容放进 .scroll-body 在纸里滚动；
   原来外框 overflow: visible，内容超过 80vh 时直接画到下面那根卷轴外面、也滚不到。底部按钮在卷心外面，始终看得到 */
.modal-content.scroll-modal { display: flex; flex-direction: column; }
.scroll-modal > .scroll-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b9a27a transparent; }
.scroll-modal > .scroll-body::-webkit-scrollbar { width: 6px; }
.scroll-modal > .scroll-body::-webkit-scrollbar-thumb { background: #b9a27a; border-radius: 3px; }
.scroll-modal > .btn, .scroll-modal > .ui-dialog-actions { flex: none; }
.scroll-body .ui-dialog-msg { max-height: none; overflow: visible; }   /* v7.97 外层卷心已经负责滚动，正文不再单独滚 */