/* ============================================ */
/* 暗黑文字修仙 - 暗黑奇幻风格样式 */
/* ============================================ */

/* 头像设置弹窗 */
.avatar-section {
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(20, 15, 10, 0.6);
    border: 1px solid rgba(139, 60, 30, 0.2);
    border-radius: 8px;
}
.avatar-section:last-child {
    margin-bottom: 0;
}
.avatar-section-title {
    font-size: 13px;
    color: #e8c547;
    margin-bottom: 10px;
    font-weight: bold;
}

/* 头像设置 - 主弹窗菜单按钮 */
.avatar-menu-btn {
    display: block;
    width: 100%;
    padding: 14px 16px;
    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 1px solid #444;
    border-radius: 8px;
    color: #ccc;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}
.avatar-menu-btn:hover {
    background: linear-gradient(180deg, #333 0%, #222 100%);
    border-color: #555;
    color: #ddd;
    transform: translateY(-1px);
}
.avatar-menu-btn:active {
    transform: scale(0.98);
}

/* 头像设置 - emoji 网格（自适应宽度，不超出弹窗） */
.avatar-emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
}
.avatar-emoji-grid::-webkit-scrollbar {
    width: 4px;
}
.avatar-emoji-grid::-webkit-scrollbar-thumb {
    background: rgba(139, 60, 30, 0.4);
    border-radius: 2px;
}

/* 头像设置子弹窗 body 可滚动 */
#avatar-sub-modal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}
#avatar-sub-modal .modal-body::-webkit-scrollbar {
    width: 4px;
}
#avatar-sub-modal .modal-body::-webkit-scrollbar-thumb {
    background: rgba(139, 60, 30, 0.4);
    border-radius: 2px;
}

.avatar-emoji-item {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: rgba(40, 30, 20, 0.8);
    border: 1px solid rgba(139, 60, 30, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.avatar-emoji-item:hover {
    background: rgba(60, 45, 30, 0.9);
    border-color: rgba(200, 160, 60, 0.6);
    transform: scale(1.1);
}
.avatar-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(139, 60, 30, 0.3);
    border-radius: 6px;
    background: rgba(20, 15, 10, 0.8);
    color: #d4c5b0;
    font-size: 13px;
    box-sizing: border-box;
    outline: none;
}
.avatar-input:focus {
    border-color: rgba(200, 160, 60, 0.5);
    box-shadow: 0 0 8px rgba(200, 160, 60, 0.15);
}

/* 字体 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&display=swap');

:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-card: #1a1a1a;
    --bg-card-hover: #222222;
    --bg-overlay: rgba(0, 0, 0, 0.85);
    --text-primary: #c8b89d;
    --text-secondary: #8a7a6a;
    --text-muted: #5a4a3a;
    --text-blood: #ff2020;
    --text-blood-glow: #ff4444;
    --text-gold: #d4a843;
    --text-gold-glow: #f0c860;
    --border-color: #2a1a1a;
    --border-glow: #3a2020;
    --accent-red: #8b0000;
    --accent-red-bright: #cc0000;
    --accent-purple: #4a0e4e;
    --accent-dark-gold: #6b4c1e;
    --shadow-color: rgba(139, 0, 0, 0.3);
    --shadow-glow: rgba(200, 0, 0, 0.15);
    --rune-color: rgba(180, 50, 50, 0.15);
    
    /* 品质色 */
    --q-common: #9d9d9d;
    --q-uncommon: #4eff4e;
    --q-rare: #4e9eff;
    --q-epic: #c44eff;
    --q-legendary: #ff8c00;
    --q-mythic: #ff3030;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Noto Serif SC', 'SimSun', 'STSong', serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    overflow-x: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-font-smoothing: antialiased;
}

/* 黑曜石纹理背景 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 480px;
    margin: 0 auto;
    background:
        /* 黑曜石纹理 */
        radial-gradient(ellipse at 20% 50%, rgba(30, 10, 10, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(20, 5, 15, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(10, 5, 20, 0.4) 0%, transparent 50%),
        /* 纹理线条 */
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 0, 0, 0.02) 2px, rgba(255, 0, 0, 0.02) 3px),
        repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(200, 0, 0, 0.01) 1px, rgba(200, 0, 0, 0.01) 2px),
        /* 古老符文 */
        radial-gradient(circle at 10% 15%, var(--rune-color) 0%, transparent 15%),
        radial-gradient(circle at 85% 25%, var(--rune-color) 0%, transparent 12%),
        radial-gradient(circle at 50% 50%, var(--rune-color) 0%, transparent 20%),
        radial-gradient(circle at 15% 75%, var(--rune-color) 0%, transparent 10%),
        radial-gradient(circle at 90% 80%, var(--rune-color) 0%, transparent 14%),
        /* 底纹 */
        repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(50, 0, 0, 0.03) 40px, rgba(50, 0, 0, 0.03) 41px),
        linear-gradient(180deg, #0a0505 0%, #0a0a0a 30%, #0d0a0a 70%, #080505 100%);
    z-index: -1;
    pointer-events: none;
}

/* 漂浮的魔气粒子 */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 480px;
    margin: 0 auto;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(200, 30, 30, 0.3), transparent),
        radial-gradient(2px 2px at 60% 15%, rgba(200, 30, 30, 0.2), transparent),
        radial-gradient(1px 1px at 40% 45%, rgba(200, 50, 50, 0.25), transparent),
        radial-gradient(2px 2px at 75% 60%, rgba(180, 20, 20, 0.2), transparent),
        radial-gradient(1px 1px at 25% 70%, rgba(220, 40, 40, 0.3), transparent),
        radial-gradient(1px 1px at 80% 35%, rgba(200, 30, 30, 0.15), transparent),
        radial-gradient(2px 2px at 55% 80%, rgba(180, 25, 25, 0.2), transparent),
        radial-gradient(1px 1px at 15% 50%, rgba(220, 35, 35, 0.25), transparent),
        radial-gradient(1px 1px at 70% 85%, rgba(200, 30, 30, 0.15), transparent),
        radial-gradient(2px 2px at 45% 10%, rgba(210, 40, 40, 0.2), transparent);
    z-index: 0;
    pointer-events: none;
    animation: floatParticles 8s ease-in-out infinite;
}

@keyframes floatParticles {
    0%, 100% { opacity: 0.5; transform: translateY(0); }
    25% { opacity: 0.8; transform: translateY(-5px); }
    50% { opacity: 0.4; transform: translateY(-3px); }
    75% { opacity: 0.7; transform: translateY(-7px); }
}

/* 页面容器 */
.page {
    display: none;
    position: relative;
    z-index: 1;
    padding: 10px 12px;
    padding-bottom: 80px;
    min-height: 100vh;
}

/* ========== 顶部状态栏 ========== */
.top-bar {
    background: linear-gradient(180deg, rgba(20, 5, 5, 0.95) 0%, rgba(10, 5, 5, 0.9) 100%);
    border-bottom: 1px solid var(--border-color);
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.top-bar .title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-blood);
    text-shadow: 0 0 10px rgba(255, 32, 32, 0.4), 0 0 20px rgba(255, 32, 32, 0.2);
    letter-spacing: 2px;
}

.top-bar .back-btn {
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
}

/* ========== 底部导航 ========== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 480px;
    width: 100%;
    background: linear-gradient(0deg, rgba(10, 3, 3, 0.98) 0%, rgba(15, 5, 5, 0.95) 100%);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-around;
    padding: 6px 0;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    z-index: 200;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.3s;
    font-size: 10px;
    gap: 2px;
}

.nav-item.active {
    color: var(--text-blood);
    text-shadow: 0 0 8px rgba(255, 32, 32, 0.4);
}

.nav-item .nav-icon {
    font-size: 20px;
    line-height: 1;
}

.nav-item .nav-label {
    font-size: 10px;
}

/* ========== 卡片样式 ========== */
.card {
    background: linear-gradient(135deg, rgba(20, 10, 10, 0.9) 0%, rgba(15, 8, 8, 0.95) 100%);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 50, 50, 0.05);
    transition: all 0.3s;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 30, 30, 0.3), transparent);
}

.card:active {
    transform: scale(0.98);
    border-color: var(--border-glow);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(50, 15, 15, 0.5);
}

.card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-gold);
}

.card-subtitle {
    font-size: 11px;
    color: var(--text-secondary);
}

/* ========== 按钮 ========== */
.btn {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.btn:active {
    transform: scale(0.95);
}

.btn-primary {
    background: linear-gradient(180deg, #8b0000 0%, #5a0000 100%);
    border-color: #aa0000;
    color: #ffcccc;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 8px rgba(139, 0, 0, 0.4);
}

.btn-primary:active {
    background: linear-gradient(180deg, #aa0000 0%, #6a0000 100%);
    box-shadow: 0 0 15px rgba(200, 0, 0, 0.6);
}

.btn-secondary {
    background: rgba(30, 15, 15, 0.8);
    border-color: #4a2a2a;
    color: var(--text-secondary);
}

.btn-gold {
    background: linear-gradient(180deg, #8b6914 0%, #5a3e08 100%);
    border-color: #aa7a14;
    color: #ffd700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 8px rgba(139, 105, 20, 0.4);
}

.btn-sm {
    padding: 5px 12px;
    font-size: 12px;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-danger {
    background: linear-gradient(180deg, #660000 0%, #330000 100%);
    border-color: #880000;
    color: #ff8888;
}

/* ========== 表单 ========== */
.input-group {
    margin-bottom: 14px;
}

.input-group label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.input-group input, .input-group select, .input-group textarea {
    width: 100%;
    padding: 10px 12px;
    background: rgba(15, 8, 8, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    transition: all 0.3s;
    outline: none;
}

.input-group input:focus, .input-group select:focus, .input-group textarea:focus {
    border-color: var(--accent-red);
    box-shadow: 0 0 8px rgba(139, 0, 0, 0.3);
}

.input-group textarea {
    resize: vertical;
    min-height: 60px;
}

/* ========== Toast ========== */
.toast {
    display: none;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    max-width: 80%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.toast.success {
    background: rgba(20, 60, 20, 0.95);
    border: 1px solid #2a6a2a;
    color: #4eff4e;
}

.toast.error {
    background: rgba(60, 10, 10, 0.95);
    border: 1px solid #6a2020;
    color: #ff4444;
}

.toast.info {
    background: rgba(20, 20, 50, 0.95);
    border: 1px solid #2a2a6a;
    color: #4e9eff;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes slideOut {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

/* ========== 模态框 ========== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

/* 确认弹窗层级需要高于VIP弹窗 */
#confirm-modal {
    z-index: 2000;
}

.modal {
    background: linear-gradient(135deg, #1a0a0a 0%, #0d0505 100%);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
    max-width: 320px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(139, 0, 0, 0.2);
}

.modal h3 {
    color: var(--text-blood);
    font-size: 16px;
    margin-bottom: 12px;
    text-align: center;
}

.modal p {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 16px;
    text-align: center;
    line-height: 1.6;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ========== 游戏风格确认弹窗 ========== */
.game-modal-overlay {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}
.game-modal {
    width: 88%; max-width: 340px;
    background:
        linear-gradient(180deg, rgba(20, 8, 8, 0.97) 0%, rgba(12, 4, 6, 0.99) 100%);
    border: 1px solid rgba(180, 60, 40, 0.5);
    box-shadow:
        0 0 1px rgba(255, 120, 50, 0.15) inset,
        0 20px 60px rgba(0, 0, 0, 0.85),
        0 0 80px rgba(160, 30, 20, 0.08),
        0 -2px 6px rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    animation: gmIn 0.25s ease-out;
    overflow: hidden;
}
@keyframes gmIn {
    from { opacity: 0; transform: translateZ(0) scale(0.92); }
    to   { opacity: 1; transform: translateZ(0) scale(1); }
}
/* 装饰边角 */
.game-modal-decor { position: relative; }
.gm-corner {
    position: absolute; width: 14px; height: 14px;
    pointer-events: none;
}
.gm-tl { top: -1px; left: -1px;
         border-top: 2px solid rgba(220, 140, 60, 0.7); border-left: 2px solid rgba(220, 140, 60, 0.7); }
.gm-tr { top: -1px; right: -1px;
         border-top: 2px solid rgba(220, 140, 60, 0.7); border-right: 2px solid rgba(220, 140, 60, 0.7); }
.gm-bl { bottom: -1px; left: -1px;
         border-bottom: 2px solid rgba(220, 140, 60, 0.7); border-left: 2px solid rgba(220, 140, 60, 0.7); }
.gm-br { bottom: -1px; right: -1px;
         border-bottom: 2px solid rgba(220, 140, 60, 0.7); border-right: 2px solid rgba(220, 140, 60, 0.7); }
/* 标题栏 */
.gm-title-bar {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(180, 60, 40, 0.25);
    background: linear-gradient(180deg, rgba(100, 30, 20, 0.15), transparent);
}
.gm-title-icon {
    font-size: 17px;
    filter: drop-shadow(0 0 6px rgba(255, 150, 50, 0.6));
}
#confirm-title-text {
    color: #e0b070;
    font-size: 16px; font-weight: 800;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(200, 130, 50, 0.35);
}
/* 内容区 */
.game-modal-body {
    padding: 22px 24px 18px;
    min-height: 48px;
    display: flex; align-items: center; justify-content: center;
}
#confirm-message {
    color: #c8b89d;
    font-size: 14px; line-height: 1.9;
    white-space: pre-line; text-align: center;
}
/* 按钮区 */
.game-modal-footer {
    display: flex; gap: 14px; justify-content: center;
    padding: 0 24px 18px;
}
/* 按钮 */
.gm-btn {
    flex: 1; max-width: 110px; height: 36px;
    cursor: pointer;
    outline: none; border-radius: 2px;
    transition: all 0.15s ease;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.gm-btn-inner {
    position: relative; z-index: 1;
    font-size: 14px; font-weight: 700; letter-spacing: 2px;
}
/* 取消按钮 */
.gm-btn-cancel {
    border: 1px solid rgba(120, 90, 60, 0.45);
    background: linear-gradient(180deg, rgba(28, 18, 14, 0.95), rgba(18, 10, 8, 0.98));
    color: #9a8568;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.gm-btn-cancel:hover {
    border-color: rgba(160, 120, 70, 0.65);
    color: #bba078;
    box-shadow: 0 0 12px rgba(180, 130, 60, 0.12), inset 0 0 8px rgba(180, 130, 60, 0.06);
}
.gm-btn-cancel:active {
    transform: translateY(1px);
    background: linear-gradient(180deg, rgba(18, 10, 8, 0.98), rgba(14, 6, 4, 1));
}
/* 确认按钮 */
.gm-btn-confirm {
    border: 1px solid rgba(200, 80, 40, 0.55);
    background: linear-gradient(180deg, rgba(140, 45, 20, 0.95), rgba(100, 25, 12, 0.98));
    color: #f0c890;
    box-shadow: 0 2px 10px rgba(160, 50, 20, 0.3), 0 0 16px rgba(200, 80, 40, 0.08);
}
.gm-btn-confirm:hover {
    border-color: rgba(230, 120, 60, 0.7);
    color: #ffe0a8;
    box-shadow: 0 0 18px rgba(220, 100, 50, 0.25), inset 0 0 10px rgba(240, 150, 60, 0.1);
}
.gm-btn-confirm:active {
    transform: translateY(1px);
    background: linear-gradient(180deg, rgba(100, 25, 12, 0.98), rgba(70, 15, 8, 1));
}

/* ========== 加载动画 ========== */
.loading {
    text-align: center;
    padding: 30px;
    color: var(--text-muted);
}

.loading::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-red);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========== 标签 ========== */
.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
}

.tag-realm {
    background: rgba(139, 0, 0, 0.3);
    color: var(--text-blood);
    border: 1px solid rgba(139, 0, 0, 0.4);
}

.tag-level {
    background: rgba(200, 150, 0, 0.2);
    color: var(--text-gold);
    border: 1px solid rgba(200, 150, 0, 0.3);
}

.tag-vip {
    background: linear-gradient(135deg, rgba(200, 150, 0, 0.3), rgba(255, 215, 0, 0.1));
    color: var(--text-gold-glow);
    border: 1px solid rgba(200, 150, 0, 0.4);
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

/* ========== 进度条 ========== */
.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(20, 5, 5, 0.8);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s;
}

.progress-fill.exp {
    background: linear-gradient(90deg, #4a0e4e, #8b008b, #4a0e4e);
    box-shadow: 0 0 8px rgba(139, 0, 139, 0.4);
}

.progress-fill.hp {
    background: linear-gradient(90deg, #8b0000, #cc0000, #8b0000);
    box-shadow: 0 0 8px rgba(200, 0, 0, 0.4);
}

.progress-fill.mp {
    background: linear-gradient(90deg, #00008b, #0000cc, #00008b);
    box-shadow: 0 0 8px rgba(0, 0, 200, 0.4);
}

.progress-fill.energy {
    background: linear-gradient(90deg, #8b6914, #d4a843, #8b6914);
    box-shadow: 0 0 8px rgba(212, 168, 67, 0.4);
}

/* ========== 滚动条 ========== */
::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-track {
    background: rgba(10, 5, 5, 0.5);
}

::-webkit-scrollbar-thumb {
    background: rgba(139, 0, 0, 0.3);
    border-radius: 2px;
}

/* ========== 特殊效果 ========== */
.text-blood {
    color: var(--text-blood);
    text-shadow: 0 0 8px rgba(255, 32, 32, 0.4);
}

.text-gold {
    color: var(--text-gold);
    text-shadow: 0 0 8px rgba(212, 168, 67, 0.3);
}

.text-glow {
    animation: textGlow 2s ease-in-out infinite;
}

@keyframes textGlow {
    0%, 100% { text-shadow: 0 0 5px rgba(255, 32, 32, 0.4); }
    50% { text-shadow: 0 0 15px rgba(255, 32, 32, 0.8), 0 0 30px rgba(255, 32, 32, 0.4); }
}

.border-glow {
    border-color: var(--accent-red-bright) !important;
    box-shadow: 0 0 10px rgba(200, 0, 0, 0.3), inset 0 0 10px rgba(200, 0, 0, 0.1);
}

/* 符咒装饰 */
.rune-decoration {
    position: absolute;
    color: rgba(200, 30, 30, 0.1);
    font-size: 40px;
    pointer-events: none;
    z-index: 0;
}

/* 隐藏 number input 的上下箭头 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    display: none !important;
}
input[type="number"] {
    -moz-appearance: textfield !important;
}

/* 玻璃效果覆盖层 */
.glass-overlay {
    background: linear-gradient(135deg, 
        rgba(255, 50, 50, 0.03) 0%, 
        rgba(255, 50, 50, 0.01) 25%,
        transparent 50%,
        rgba(255, 50, 50, 0.01) 75%,
        rgba(255, 50, 50, 0.03) 100%);
}

/* ========== 响应式 ========== */
@media (max-width: 360px) {
    .page { padding: 8px 10px; padding-bottom: 70px; }
    .card { padding: 10px; }
    .btn { padding: 6px 16px; font-size: 13px; }
}

/* ========== 挂机弹窗 ========== */
.hang-up-rewards {
    background: rgba(15, 5, 5, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0;
}

.reward-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(30, 10, 10, 0.3);
    font-size: 12px;
    color: var(--text-secondary);
}

.reward-row:last-child {
    border-bottom: none;
}

/* ========== 挂机收益页 ========== */
.hang-up-card {
    background: linear-gradient(135deg, rgba(20, 10, 10, 0.95), rgba(10, 5, 5, 0.95));
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.hang-up-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(139, 0, 0, 0.2);
}

.hang-up-icon {
    font-size: 36px;
    flex-shrink: 0;
}

.hang-up-dungeon-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-gold);
}

.hang-up-time {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.hang-up-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.hang-up-stat {
    background: rgba(15, 8, 8, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 8px;
    text-align: center;
}

.hang-up-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.hang-up-stat-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-gold);
}

.hang-up-rewards-preview {
    background: rgba(15, 5, 5, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.reward-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.reward-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    background: rgba(30, 10, 10, 0.4);
    border-radius: 6px;
    border: 1px solid rgba(60, 20, 20, 0.3);
}

.reward-cell-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.reward-cell-value {
    font-size: 16px;
    font-weight: 700;
}

.reward-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(30, 10, 10, 0.3);
}

.reward-item:last-child {
    border-bottom: none;
}

.reward-icon {
    font-size: 24px;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
}

.reward-info {
    flex: 1;
}

.reward-label {
    font-size: 11px;
    color: var(--text-muted);
}

.reward-value {
    font-size: 16px;
    font-weight: 700;
    margin-top: 2px;
}

.hang-up-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-warning {
    background: linear-gradient(135deg, #ff8c00, #e67e00);
    color: #fff;
    border: 1px solid #ff8c00;
    font-weight: 700;
}

.btn-warning:active {
    background: linear-gradient(135deg, #e67e00, #cc7000);
}

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

/* ========== 属性加点弹窗 ========== */
.attr-modal {
    max-width: 400px !important;
    width: 92% !important;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 !important;
}

.attr-modal-header {
    padding: 18px 20px 14px 20px;
    border-bottom: 2px solid rgba(139, 0, 0, 0.5);
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(139, 0, 0, 0.15) 0%, transparent 100%);
}

.attr-modal-header h3 {
    margin: 0 0 10px 0;
    text-align: center;
    font-size: 17px;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.attr-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    min-height: 0;
}

.attr-modal-footer {
    padding: 10px 16px 16px 16px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* 属性行 - 参考暗黑风格 */
.attr-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    background: linear-gradient(135deg, rgba(15, 5, 5, 0.9) 0%, rgba(25, 10, 10, 0.85) 100%);
    border: 1px solid rgba(139, 69, 19, 0.35);
    border-radius: 6px;
    margin-bottom: 7px;
    gap: 12px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
}

.attr-row:hover {
    border-color: rgba(139, 69, 19, 0.6);
    background: linear-gradient(135deg, rgba(20, 8, 8, 0.95) 0%, rgba(30, 12, 12, 0.9) 100%);
}

.attr-row-left {
    flex: 1;
    min-width: 0;
}

.attr-name-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 3px;
}

.attr-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.attr-hint {
    font-size: 10px;
    color: #666;
    font-weight: 400;
}

.attr-desc {
    font-size: 12px;
    color: #888;
    line-height: 1.4;
}

.attr-value {
    color: #64c8ff;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(100, 200, 255, 0.3);
}

.attr-row-right {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.btn-attr-plus {
    width: 34px;
    height: 30px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.12s ease;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
}

/* 减号按钮 - 暗红血色风格 */
.btn-attr-minus {
    background: linear-gradient(180deg, #6b1a1a 0%, #3d0e0e 100%);
    color: #d44;
    border: 1px solid rgba(180, 60, 60, 0.35);
    box-shadow: 0 2px 5px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,80,80,0.08), inset 0 -1px 2px rgba(0,0,0,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.btn-attr-minus:hover:not(:disabled) {
    background: linear-gradient(180deg, #8b2222 0%, #501212 100%);
    border-color: rgba(200, 70, 70, 0.5);
    box-shadow: 0 3px 8px rgba(139,34,34,0.35), inset 0 1px 0 rgba(255,100,100,0.12);
    transform: translateY(-1px);
}

.btn-attr-minus:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.5), inset 0 2px 4px rgba(0,0,0,0.3);
    background: linear-gradient(180deg, #501212 0%, #300a0a 100%);
}

/* 加号按钮 - 暗金符文风格 */
.btn-attr-add {
    background: linear-gradient(180deg, #9a7328 0%, #6b5019 100%);
    color: #ffe066;
    border: 1px solid rgba(200, 160, 60, 0.45);
    box-shadow: 0 2px 5px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,220,100,0.15), inset 0 -1px 2px rgba(0,0,0,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

.btn-attr-add:hover:not(:disabled) {
    background: linear-gradient(180deg, #b88a30 0%, #7d5c20 100%);
    border-color: rgba(220, 180, 80, 0.55);
    box-shadow: 0 3px 10px rgba(184,138,48,0.35), inset 0 1px 0 rgba(255,235,130,0.2);
    transform: translateY(-1px);
}

.btn-attr-add:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.5), inset 0 2px 4px rgba(0,0,0,0.25);
    background: linear-gradient(180deg, #6b5019 0%, #4a380f 100%);
}

.btn-attr-plus:disabled {
    opacity: 0.22;
    cursor: not-allowed;
    filter: grayscale(0.6) brightness(0.7);
}

/* 分配按钮 - 深蓝 */
.btn-attr-allocate {
    width: 48px;
    height: 30px;
    background: linear-gradient(180deg, #2a5588 0%, #17355a 100%);
    color: #7ec8ff;
    border: 1px solid rgba(80, 160, 220, 0.4);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.btn-attr-allocate:hover {
    background: linear-gradient(180deg, #3468a0 0%, #1d4470 100%);
    border-color: rgba(100, 180, 240, 0.55);
    box-shadow: 0 3px 10px rgba(50, 120, 200, 0.3);
    transform: translateY(-1px);
}

.btn-attr-allocate:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    background: linear-gradient(180deg, #17355a 0%, #0f2440 100%);
}

/* ========== 属性分配弹窗 ========== */
.attr-distribute-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.75);
    z-index: 3000;
    justify-content: center;
    align-items: center;
}

.attr-distribute-dialog {
    background: linear-gradient(135deg, #1a0a0a 0%, #0d0505 100%);
    border: 1px solid rgba(139, 69, 19, 0.5);
    border-radius: 10px;
    padding: 20px;
    max-width: 300px;
    width: 88%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 30px rgba(139, 0, 0, 0.2);
    text-align: center;
}

.attr-distribute-dialog h3 {
    color: #ffd700;
    font-size: 15px;
    margin-bottom: 6px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.attr-distribute-dialog .attr-subtitle {
    font-size: 11px;
    color: #888;
    margin-bottom: 12px;
}

.attr-distribute-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}

.attr-distribute-btn {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    border: none;
    font-size: 22px;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    line-height: 1;
    flex-shrink: 0;
}

.attr-distribute-minus {
    background: linear-gradient(180deg, #6b1a1a, #3d0e0e);
    color: #ff5555;
    border: 1px solid rgba(180, 60, 60, 0.4);
}

.attr-distribute-minus:hover:not(:disabled) {
    background: linear-gradient(180deg, #8b2222, #501212);
    border-color: rgba(220, 80, 80, 0.55);
}

.attr-distribute-plus {
    background: linear-gradient(180deg, #9a7328, #6b5019);
    color: #ffe066;
    border: 1px solid rgba(200, 160, 60, 0.45);
}

.attr-distribute-plus:hover:not(:disabled) {
    background: linear-gradient(180deg, #b88a30, #7d5c20);
    border-color: rgba(220, 180, 80, 0.55);
}

.attr-distribute-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    filter: grayscale(0.5) brightness(0.6);
}

.attr-distribute-input {
    width: 70px;
    height: 42px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(139, 69, 19, 0.4);
    border-radius: 6px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    outline: none;
}

.attr-distribute-input:focus {
    border-color: rgba(200, 120, 60, 0.6);
    box-shadow: 0 0 8px rgba(200, 120, 40, 0.2);
}

.attr-distribute-info {
    font-size: 10px;
    color: #888;
    margin-bottom: 12px;
}

.attr-distribute-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.attr-distribute-actions .btn {
    flex: 1;
    max-width: 120px;
    font-size: 12px;
    padding: 8px 14px;
}

/* ========== 玩家详情弹窗 ========== */
.player-info-modal {
    max-width: 420px !important;
    width: 94% !important;
    padding: 0 !important;
    background: linear-gradient(180deg, rgba(18, 6, 6, 0.98) 0%, rgba(12, 3, 3, 0.99) 100%) !important;
    border: 1px solid rgba(139, 60, 30, 0.4) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 60px rgba(139, 30, 10, 0.1) !important;
}

.player-info-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px 18px;
    border-bottom: 1px solid rgba(139, 60, 30, 0.25);
    background: linear-gradient(180deg, rgba(139, 0, 0, 0.1) 0%, transparent 100%);
}

.player-info-modal-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #ffe0a0;
    text-shadow: 0 0 10px rgba(255, 200, 100, 0.3);
    letter-spacing: 2px;
}

.modal-close-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(139, 0, 0, 0.3);
    color: #aaa;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.modal-close-btn:hover {
    background: rgba(200, 40, 40, 0.5);
    color: #fff;
    border-color: rgba(200, 60, 60, 0.4);
}

.player-info-modal-body {
    padding: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.player-info-modal-footer {
    padding: 10px 18px 14px 18px;
    border-top: 1px solid rgba(139, 60, 30, 0.2);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 顶部 Hero 区域 */
.pim-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 14px 18px;
    background: linear-gradient(180deg, rgba(139, 0, 0, 0.12) 0%, rgba(139, 0, 0, 0.02) 100%);
    border-bottom: 1px solid rgba(139, 60, 30, 0.2);
}

.pim-avatar-glow {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(200, 50, 40, 0.3);
    transition: box-shadow 0.3s;
    cursor: pointer;
    position: relative;
}
.pim-avatar-glow::after {
    content: '点击设置';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: #888;
    background: rgba(0,0,0,0.6);
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.pim-avatar-glow:hover::after {
    opacity: 1;
}
.pim-avatar-glow:hover {
    border-color: rgba(200, 160, 60, 0.6);
}

.pim-avatar-lg {
    font-size: 32px;
    line-height: 1;
}

.pim-hero-info {
    flex: 1;
    min-width: 0;
}

.pim-hero-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.pim-hero-name {
    font-size: 20px;
    font-weight: 900;
    color: #ffe0a0;
    text-shadow: 0 0 12px rgba(255, 200, 80, 0.35);
    letter-spacing: 2px;
}

.pim-hero-realm {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

.pim-hero-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pim-hero-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s;
}
.pim-hero-tag.lv {
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.25);
    color: #ffd700;
    cursor: default;
}
.pim-hero-tag.vip {
    background: linear-gradient(135deg, rgba(200, 150, 0, 0.2), rgba(180, 120, 0, 0.1));
    border: 1px solid rgba(200, 150, 0, 0.35);
    color: #e6b800;
}
.pim-hero-tag.vip:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 8px rgba(255, 200, 50, 0.15);
}

/* 分区 */
.pim-section {
    padding: 12px 18px;
    border-bottom: 1px solid rgba(139, 60, 30, 0.12);
}
.pim-section:last-of-type {
    border-bottom: none;
}

.pim-section-title {
    font-size: 12px;
    font-weight: 800;
    color: #cc9944;
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 0 6px rgba(200, 150, 60, 0.2);
}

/* 通用进度条 */
.pim-vital-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden;
}

/* 血量/法力并排 */
.pim-hp-mp-row {
    display: flex;
    gap: 12px;
}

.pim-hp-mp-card {
    flex: 1;
}

.pim-hp-mp-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
}

.pim-hp-mp-card.hp-card .pim-hp-mp-top { color: #ff6b6b; }
.pim-hp-mp-card.mp-card .pim-hp-mp-top { color: #66aaff; }

.pim-hp-mp-val {
    font-weight: 700;
}

/* 装备信息 - 一行五个框 */
.pim-equip-grid {
    display: flex;
    gap: 2px;
}

.pim-equip-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    padding: 8px 4px;
    border: 1px solid rgba(212, 168, 67, 0.25);
    border-radius: 6px;
    background: rgba(26, 22, 16, 0.7);
    font-size: 11px;
    text-align: center;
}

.pim-equip-label {
    color: #999;
}

.pim-equip-name {
    color: #d4a843;
    font-weight: 600;
}

/* 装备卡片可点击 */
.pim-equip-card { cursor: pointer; transition: border-color 0.2s; }
.pim-equip-card:active { transform: scale(0.97); }

/* ==================== 装备详情弹窗 ==================== */
.equip-detail-modal {
    width: 90%;
    max-width: 360px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 0;
    background: linear-gradient(180deg, rgba(30,18,14,0.98) 0%, rgba(16,10,10,0.99) 100%);
    border: 1px solid rgba(212,168,67,0.3);
    border-radius: 12px;
}

.edm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(212,168,67,0.15);
}

.edm-title {
    font-size: 17px;
    font-weight: 700;
}

.edm-body {
    padding: 12px 16px 16px;
}

/* 顶部：图标 + 基本信息网格 */
.edm-top {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.edm-icon-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.edm-icon-box {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    border: 2px solid rgba(212,168,67,0.35);
    border-radius: 8px;
    background: rgba(20,15,10,0.7);
}

.edm-icon-name {
    font-size: 11px;
    color: var(--text-secondary);
}

.edm-info-grid {
    flex: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    gap-x: 10px;
    gap-y: 4px;
    align-items: center;
}

.edm-info-item {
    font-size: 12px;
    display: contents;
}

.edm-il {
    color: #999;
}

.edm-iv {
    color: #ddd;
    font-weight: 600;
}

.edm-power {
    grid-column: span 2;
    padding-top: 4px;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.edm-power span {
    color: #d4a843;
    font-size: 13px;
    font-weight: 700;
}

/* 分区标题 */
.edm-section {
    margin-bottom: 10px;
}

.edm-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #b8a078;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

/* 基础属性列表 */
.edm-base-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.edm-base-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.edm-bl { color: #aaa; }
.edm-bv { color: #eee; font-weight: 600; }

/* 附加属性列表 */
.edm-extra-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.edm-extra-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.edm-el { color: #c44eff; }
.edm-ev { color: #ff6b9d; font-weight: 600; }

/* 描述 */
.edm-desc {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 11px;
    color: #888;
    line-height: 1.5;
}
.pim-text-attrs-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.pim-text-attr-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    flex: 1;
    min-width: 0;
}

.pim-text-attr-label {
    color: #999;
    white-space: nowrap;
}

.pim-text-attr-val {
    color: #eee;
    font-weight: 700;
}

.pim-vital-card-top {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 5px;
}

.pim-vital-icon {
    font-size: 13px;
}

.pim-vital-card-label {
    font-size: 12px;
    font-weight: 600;
    color: #bbb;
}

.pim-vital-card-val {
    font-size: 13px;
    font-weight: 700;
    color: #eee;
}

.pim-vital-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden;
}

.pim-vital-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}
.pim-vital-bar-fill.hp     { background: linear-gradient(90deg, #8b2020, #cc3333); }
.pim-vital-bar-fill.mp     { background: linear-gradient(90deg, #1a4a8b, #3377cc); }
.pim-vital-bar-fill.energy { background: linear-gradient(90deg, #2e6b2e, #4ecc4e); }
.pim-vital-bar-fill.exp    { background: linear-gradient(90deg, #8b008b, #c44eff); }

/* 货币卡片 */
.pim-currency-row {
    display: flex;
    gap: 8px;
}

.pim-currency-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(10, 3, 3, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(60, 25, 15, 0.2);
}

.pim-cur-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.pim-currency-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pim-cur-val {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}
.pim-cur-val.spirit { color: #ffd700; }
.pim-cur-val.jade   { color: #4e9eff; }
.pim-cur-val.diamond { color: #c44eff; }

.pim-cur-label {
    font-size: 9px;
    color: #666;
    font-weight: 500;
}

/* ========== 挂机收益弹窗 ========== */
.hang-up-reward-modal {
    max-width: 380px !important;
    width: 92% !important;
}

.hang-up-reward-modal .hang-up-card {
    margin-bottom: 0;
}

/* ========== 主页挂机横幅 ========== */
.hang-up-banner {
    background: linear-gradient(180deg, rgba(139, 0, 0, 0.4) 0%, rgba(50, 0, 0, 0.3) 100%);
    border: 1px solid rgba(200, 50, 50, 0.4);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    animation: bannerPulse 3s ease-in-out infinite;
}

@keyframes bannerPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(200, 50, 50, 0.3); }
    50% { box-shadow: 0 0 18px rgba(255, 80, 80, 0.5); }
}

.hang-up-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: #ffcccc;
    flex-wrap: wrap;
}

.hang-up-banner-inner strong {
    color: #ffd700;
}

/* 领取奖励按钮 - 暗黑血红色 */
.btn-blood {
    background: linear-gradient(180deg, #8b0000 0%, #5a0000 100%);
    border: 1px solid #aa0000;
    color: #ffcccc;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    box-shadow: 0 2px 10px rgba(139, 0, 0, 0.5), 0 0 20px rgba(200, 0, 0, 0.2);
    letter-spacing: 2px;
    transition: all 0.3s;
}

.btn-blood:active {
    background: linear-gradient(180deg, #aa0000 0%, #6a0000 100%);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.6), 0 0 40px rgba(200, 0, 0, 0.3);
    transform: scale(0.96);
}

.btn-blood:disabled {
    background: linear-gradient(180deg, #4a0000 0%, #2a0000 100%);
    border-color: #5a0000;
    color: #664444;
    box-shadow: none;
}

/* 双倍领取按钮 - 暗金风格 */
.btn-gold-block {
    background: linear-gradient(180deg, #8b6914 0%, #5a3e08 100%);
    border: 1px solid #aa7a14;
    color: #ffd700;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    box-shadow: 0 2px 10px rgba(139, 105, 20, 0.5), 0 0 20px rgba(200, 150, 0, 0.2);
    letter-spacing: 2px;
    transition: all 0.3s;
}

.btn-gold-block:active {
    background: linear-gradient(180deg, #aa7a14 0%, #6a4e08 100%);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(200, 150, 0, 0.3);
    transform: scale(0.96);
}

.btn-gold-block:disabled {
    background: linear-gradient(180deg, #4a3a10 0%, #2a1e08 100%);
    border-color: #5a4a14;
    color: #665522;
    box-shadow: none;
}

/* ========== VIP信息弹窗 ========== */
.vip-info-modal {
    max-width: 450px !important;
    width: 94% !important;
    padding: 0 !important;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vip-info-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px 16px;
    border-bottom: 1px solid rgba(50, 30, 10, 0.4);
}

.vip-info-modal-header h3 {
    margin: 0;
    font-size: 15px;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.vip-info-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px 14px 14px;
    min-height: 0;
}

.vip-info-modal-footer {
    padding: 10px 14px 14px 14px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* ========== 无尽之塔弹窗（固定标题 + 滚动内容） ========== */
.tower-modal {
    max-width: 380px !important;
    width: 92% !important;
    max-height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.tower-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px 18px;
    border-bottom: 1px solid rgba(139, 0, 139, 0.25);
    background: linear-gradient(180deg, rgba(139, 0, 139, 0.12), transparent);
    flex-shrink: 0;
}

.tower-modal-header .modal-title {
    font-size: 15px;
    font-weight: 800;
    color: #e0b0ff;
    text-shadow: 0 0 10px rgba(180, 100, 255, 0.3);
    letter-spacing: 2px;
}

.tower-modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 16px 18px 16px;
    min-height: 0;
}

/* ========== 无尽之塔专属按钮（古塔/修仙风格） ========== */
.tower-btn {
    display: inline-block;
    width: 95px;
    padding: 9px 0;
    border: 1px solid rgba(255,215,0,0.35);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #ffd700;
    text-align: center;
    transition: all 0.2s ease;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(40,30,15,0.85) 0%, rgba(25,18,8,0.92) 100%);
    box-shadow: 0 1px 6px rgba(255,180,50,0.12), inset 0 1px 0 rgba(255,220,100,0.08);
}

.tower-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,200,80,0.4), transparent);
}

.tower-btn:hover {
    border-color: rgba(255,215,0,0.55);
    color: #ffe066;
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(255,180,50,0.22), inset 0 1px 0 rgba(255,220,100,0.14);
}

.tower-btn:active {
    transform: scale(0.96) translateY(0);
}

/* 挑战按钮 - 暗黑风格 */
.tower-btn-battle {
    background: linear-gradient(180deg, #362a2a 0%, #750606 100%);
    border-color: #444;
    color: #ccc;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}

.tower-btn-battle:hover {
    background: linear-gradient(180deg, #362a2a 0%, #750606 100%);
    border-color: #555;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255,255,255,0.08);
    color: #ddd;
    transform: translateY(-2px);
}

.tower-btn-battle:active {
    background: linear-gradient(180deg, #1a1a1a 0%, #111 100%);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* 自动挑战按钮 - 暗黑风格 */
.tower-btn-auto {
    background: linear-gradient(180deg, #362a2a 0%, #750606 100%);
    border-color: #444;
    color: #ccc;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}

.tower-btn-auto:hover {
    background: linear-gradient(180deg, #362a2a 0%, #750606 100%);
    border-color: #555;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255,255,255,0.08);
    color: #ddd;
    transform: translateY(-2px);
}

.tower-btn-auto:active {
    background: linear-gradient(180deg, #1a1a1a 0%, #111 100%);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* 扫荡按钮 - 暗黑风格 */
.tower-btn-sweep {
    background: linear-gradient(180deg, #362a2a 0%, #750606 100%);
    border-color: #444;
    color: #ccc;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}

.tower-btn-sweep:hover {
    background: linear-gradient(180deg, #362a2a 0%, #750606 100%);
    border-color: #555;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255,255,255,0.08);
    color: #ddd;
    transform: translateY(-2px);
}

.tower-btn-sweep:active {
    background: linear-gradient(180deg, #1a1a1a 0%, #111 100%);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* 核心/排行榜/奖励预览 - 暗黑风格 */
.tower-btn-rune {
    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
    border-color: #444;
    color: #ccc;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}

.tower-btn-rune:hover {
    background: linear-gradient(180deg, #333 0%, #222 100%);
    border-color: #555;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255,255,255,0.08);
    color: #ddd;
    transform: translateY(-2px);
}

.tower-btn-rune:active {
    background: linear-gradient(180deg, #1a1a1a 0%, #111 100%);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* 按钮禁用状态 */
.tower-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(0.5) brightness(0.6);
    transform: none !important;
}

/* 无尽之塔页面：自适应高度，背景在底部导航上方停止 */
#endless-tower-page {
    display: flex;
    flex-direction: column;
    min-height: 0 !important;
    height: calc(100vh - 60px);
    padding: 0 0 0 0 !important;
    overflow: hidden;
}
#endless-tower-page .top-bar {
    flex-shrink: 0;
}
/* 内容区域：占满剩余空间，内部滚动，背景图限制在导航上方 */
#endless-tower-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(180deg, rgba(10,5,0,0.85), rgba(5,2,0,0.92)), url('../image/Tower of Endless.jpeg') center/cover no-repeat;
    background-attachment: local;
}
/* 当内容不足以填满时，tower-container 不需要强制撑满 */
#endless-tower-content .tower-container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.vip-header {
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.vip-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vip-header-crown {
    font-size: 36px;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
    flex-shrink: 0;
}

.vip-header-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vip-header-title {
    font-size: 18px;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    letter-spacing: 1px;
}

.vip-header-badges {
    display: flex;
    gap: 6px;
}

.vip-badge-active {
    font-size: 10px;
    font-weight: 700;
    color: #4eff4e;
    background: rgba(78, 255, 78, 0.12);
    border: 1px solid rgba(78, 255, 78, 0.3);
    border-radius: 4px;
    padding: 1px 8px;
}

.vip-badge-inactive {
    font-size: 10px;
    font-weight: 700;
    color: #888;
    background: rgba(136, 136, 136, 0.12);
    border: 1px solid rgba(136, 136, 136, 0.2);
    border-radius: 4px;
    padding: 1px 8px;
}

.vip-badge-type {
    font-size: 10px;
    font-weight: 600;
    color: #d4a017;
    background: rgba(212, 160, 23, 0.12);
    border: 1px solid rgba(212, 160, 23, 0.25);
    border-radius: 4px;
    padding: 1px 8px;
}

.vip-header-right {
    flex-shrink: 0;
}

.vip-max-badge {
    font-size: 10px;
    font-weight: 700;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 6px;
    padding: 2px 10px;
    white-space: nowrap;
}

/* ── 成长值区域 ── */
.vip-growth-section {
    background: rgba(20, 10, 5, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
}

.vip-growth-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.vip-growth-label {
    font-size: 12px;
    color: #aaa;
    font-weight: 600;
}

.vip-growth-value {
    font-size: 12px;
    color: #ffe0a0;
    font-weight: 700;
}

.vip-growth-bar-wrap {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(100, 80, 20, 0.25);
    margin-bottom: 6px;
}

.vip-growth-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #b8860b, #ffd700, #ffed4e);
    border-radius: 4px;
    transition: width 0.5s;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
}

.vip-growth-next {
    font-size: 11px;
    color: #999;
    text-align: right;
}

.vip-growth-next strong {
    color: #ffd700;
}

.vip-max-text {
    font-size: 12px;
    color: #ffd700;
    text-align: center;
    padding: 6px 0;
    font-weight: 600;
}

/* ── 区块小标题 ── */
.vip-section-title-sm {
    font-size: 13px;
    font-weight: 700;
    color: #ffd700;
    margin: 8px 0 8px 0;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.2);
}

/* ── 属性加成卡片 ── */
.vip-attr-cards {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.vip-attr-card {
    flex: 1;
    min-width: 0;
    background: linear-gradient(180deg, rgba(40, 20, 10, 0.8), rgba(20, 10, 5, 0.9));
    border: 1px solid rgba(200, 150, 0, 0.2);
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.vip-attr-card-label {
    font-size: 10px;
    color: #aaa;
    margin-bottom: 2px;
}

.vip-attr-card-val {
    font-size: 14px;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

/* ── 每日奖励 ── */
.vip-daily-rewards {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.vip-daily-item {
    flex: 1;
    min-width: 0;
    background: rgba(30, 15, 5, 0.7);
    border: 1px solid rgba(200, 150, 0, 0.2);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vip-daily-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.vip-daily-num {
    font-size: 13px;
    font-weight: 800;
    color: #ffd700;
}

.vip-daily-label {
    font-size: 10px;
    color: #888;
}

/* ── 每日福利领取按钮 ── */
.vip-daily-claim-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid rgba(255, 215, 0, 0.4);
    background: linear-gradient(135deg, #2a1a00, #3d2000);
    color: #ffd700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
}
.vip-daily-claim-btn:hover {
    background: linear-gradient(135deg, #3d2800, #5a3000);
    border-color: rgba(255, 215, 0, 0.7);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

.vip-daily-claimed {
    text-align: center;
    padding: 8px;
    margin-top: 8px;
    font-size: 12px;
    color: #666;
    background: rgba(20, 20, 20, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
}

/* ── 空状态提示 ── */
.vip-empty-tip {
    font-size: 12px;
    color: #555;
    text-align: center;
    padding: 10px;
    margin-bottom: 8px;
}

/* ── 等级列表 ── */
.vip-level-list {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid rgba(80, 50, 20, 0.35);
    border-radius: 8px;
}

.vip-level-list::-webkit-scrollbar {
    width: 4px;
}

.vip-level-list::-webkit-scrollbar-track {
    background: rgba(10, 5, 5, 0.5);
}

.vip-level-list::-webkit-scrollbar-thumb {
    background: rgba(200, 150, 0, 0.3);
    border-radius: 2px;
}

.vip-level-row {
    display: flex;
    align-items: center;
    padding: 7px 12px;
    border-bottom: 1px solid rgba(50, 30, 10, 0.25);
    gap: 8px;
    font-size: 12px;
    transition: background 0.2s;
}

.vip-level-row:last-child {
    border-bottom: none;
}

.vip-level-row.vip-current {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.18) 0%, rgba(255, 215, 0, 0.04) 100%);
    border-left: 3px solid #ffd700;
}

.vip-level-row.vip-locked {
    opacity: 0.5;
}

.vip-level-list-header {
    display: flex;
    padding: 7px 12px;
    font-size: 11px;
    color: #777;
    font-weight: 600;
    border-bottom: 1px solid rgba(80, 50, 20, 0.4);
    background: rgba(20, 10, 5, 0.5);
}

.vip-col-header-level { flex: 1; min-width: 0; }
.vip-col-header-exp { flex: 1; min-width: 0; text-align: center; }
.vip-col-header-boost { flex: 1; min-width: 0; text-align: right; }

.vip-col-level {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.vip-col-exp {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 11px;
}

.vip-col-boost {
    flex: 1;
    min-width: 0;
    text-align: right;
    font-size: 11px;
}

.vip-level-icon {
    font-size: 13px;
    flex-shrink: 0;
}

.vip-level-num {
    font-weight: 800;
    color: #ffd700;
    font-size: 12px;
    white-space: nowrap;
}

.vip-level-row.vip-locked .vip-level-num {
    color: #888;
}

.vip-level-name {
    font-size: 11px;
    color: #aaa;
    font-weight: 500;
    white-space: nowrap;
}

.vip-level-row.vip-current .vip-level-name {
    color: #ffd700;
}

.vip-exp-val {
    color: #aaa;
    font-size: 11px;
}

.vip-level-row.vip-current .vip-exp-val {
    color: #ffe0a0;
}

.vip-level-row.vip-locked .vip-exp-val {
    color: #555;
}

.vip-boost-val {
    color: #6e6;
    font-size: 11px;
    font-weight: 600;
}

.vip-level-row.vip-current .vip-boost-val {
    color: #ffd700;
}

.vip-level-row.vip-locked .vip-boost-val {
    color: #444;
}

/* ── VIP购买卡片 ── */
.vip-purchase-cards {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.vip-purchase-card {
    flex: 1;
    min-width: 0;
    background: linear-gradient(180deg, rgba(30, 15, 5, 0.8), rgba(15, 8, 3, 0.95));
    border: 1px solid rgba(200, 150, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.vip-card-best-tag {
    position: absolute;
    top: -1px;
    right: -1px;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #ff8c00, #ff3030);
    padding: 2px 8px;
    border-radius: 0 8px 0 6px;
    z-index: 1;
}

.vip-card-header {
    padding: 8px 6px 4px;
}

.vip-card-tag-month {
    font-size: 12px;
    font-weight: 800;
    color: #4e9eff;
}

.vip-card-tag-season {
    font-size: 12px;
    font-weight: 800;
    color: #c44eff;
}

.vip-card-tag-year {
    font-size: 12px;
    font-weight: 800;
    color: #ff8c00;
}

.vip-card-body {
    padding: 0 6px 8px;
}

.vip-card-days {
    font-size: 26px;
    font-weight: 900;
    color: #ffd700;
    line-height: 1;
    margin: 4px 0;
}

.vip-card-days-unit {
    font-size: 13px;
    font-weight: 600;
    margin-left: 2px;
}

.vip-card-growth {
    font-size: 10px;
    color: #aaa;
    margin-bottom: 4px;
}
.vip-card-daily-growth {
    font-size: 9.5px;
    color: #6ecf8e;
    margin-bottom: 4px;
    letter-spacing: .3px;
}

.vip-card-desc {
    font-size: 9px;
    color: #777;
    margin-bottom: 6px;
    line-height: 1.3;
}

.vip-card-bonus {
    font-size: 10px;
    color: #ffa500;
    margin-bottom: 4px;
    font-weight: 600;
}

.vip-card-daily-reward {
    font-size: 10px;
    color: #ffd700;
    margin-bottom: 4px;
}

.vip-card-prices {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vip-price-opt {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #ffe066;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vip-price-opt:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
}

.vip-price-icon {
    font-size: 13px;
    margin-right: 1px;
}

/* ========== 装备副本系统 ========== */

/* 装备副本列表卡片 */
.ed-card {
    background: linear-gradient(135deg, rgba(25, 12, 8, 0.9), rgba(15, 6, 4, 0.95));
    border: 1px solid rgba(180, 80, 40, 0.3);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

.ed-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, transparent 60%, rgba(255, 140, 0, 0.05) 100%);
    pointer-events: none;
}

.ed-card.locked {
    opacity: 0.45;
    filter: grayscale(0.5);
}

.ed-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ed-card-name {
    font-size: 15px;
    font-weight: 800;
    color: #ff9944;
    text-shadow: 0 0 8px rgba(255, 150, 50, 0.3);
}

.ed-card-level {
    font-size: 11px;
    color: #888;
    background: rgba(0,0,0,0.3);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
}

.ed-card-info {
    font-size: 11px;
    color: #999;
    line-height: 1.5;
}

/* 装备副本战斗区域 */
.ed-battle-area {
    min-height: 100vh;
    max-width: 480px;
    margin: 0 auto;
    background: #0a0505;
    position: relative;
    overflow: hidden;
}

/* 战斗顶部信息栏 */
.ed-battle-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    gap: 6px;
    background: linear-gradient(180deg, rgba(20, 8, 5, 0.95) 0%, transparent 100%);
    position: relative;
    z-index: 5;
}

/* 战斗单位信息 */
.ed-unit-info {
    flex: 1;
    min-width: 0;
}

.ed-unit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 4px;
}

.ed-unit-name {
    font-size: 15px;
    font-weight: 900;
    color: #ffe0a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 1px;
}

.ed-unit-name.enemy {
    color: #ff6666;
}

.ed-unit-level {
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    white-space: nowrap;
}

/* HP条 */
.ed-hp-bar {
    height: 22px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(200, 30, 30, 0.4);
    position: relative;
    margin-bottom: 3px;
}

.ed-hp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b0000, #cc2222, #ee3333);
    transition: width 0.3s ease;
    border-radius: 3px;
    position: relative;
}

.ed-hp-bar-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.15), transparent);
    border-radius: 3px 3px 0 0;
}

.ed-hp-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
}

/* MP/蓝条 */
.ed-mp-bar {
    height: 22px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(30, 80, 160, 0.4);
    position: relative;
}

.ed-mp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #1a4488, #2266bb, #3388dd);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.ed-mp-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 700;
    color: #cce8ff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
}

/* 战斗 VS 显示 */
.ed-vs-display {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 32px;
    padding: 0 2px;
    font-size: 20px;
    font-weight: 900;
    color: #ffcc00;
    letter-spacing: 2px;
    text-shadow:
        0 0 8px rgba(255,200,0,0.9),
        0 0 16px rgba(255,160,0,0.6),
        0 0 24px rgba(255,100,0,0.3);
}

/* 副本名称栏 */
.ed-dungeon-name-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: linear-gradient(90deg, rgba(20, 10, 5, 0.95), rgba(30, 15, 8, 0.9));
    border-top: 1px solid rgba(139, 60, 20, 0.3);
    border-bottom: 1px solid rgba(139, 60, 20, 0.3);
}

.ed-dungeon-name-label {
    font-size: 15px;
    font-weight: 900;
    color: #4effaa;
    text-shadow: 0 0 8px rgba(78, 255, 170, 0.25);
}

.ed-round-info {
    font-size: 12px;
    color: #ccc;
    font-weight: 600;
}

/* 操作按钮行 */
.ed-action-row {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    flex-wrap: wrap;
    background: linear-gradient(180deg, rgba(20, 10, 5, 0.8), transparent);
}

.ed-btn-sm {
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 0, 0.25);
    background: linear-gradient(180deg, rgba(40, 25, 5, 0.9), rgba(25, 15, 3, 0.95));
    color: #d4a843;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.ed-btn-sm:hover {
    background: linear-gradient(180deg, rgba(60, 35, 8, 0.9), rgba(35, 20, 5, 0.95));
    box-shadow: 0 0 8px rgba(212, 168, 67, 0.2);
}

.ed-btn-sm.active-toggle {
    border-color: #cc0000;
    color: #ff6666;
    background: linear-gradient(180deg, rgba(80, 15, 5, 0.9), rgba(50, 8, 3, 0.95));
}

/* 战斗日志区域 */
.ed-battle-log {
    background: linear-gradient(180deg, rgba(5, 3, 2, 0.98), rgba(8, 4, 2, 0.95));
    border: 1px solid rgba(60, 25, 15, 0.3);
    border-radius: 8px;
    margin: 8px 12px;
    padding: 10px 12px;
    height: 180px;
    overflow-y: auto;
    scroll-behavior: smooth;
    font-family: 'Noto Serif SC', monospace;
}

.ed-battle-log::-webkit-scrollbar { width: 4px; }
.ed-battle-log::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
.ed-battle-log::-webkit-scrollbar-thumb { background: rgba(180, 80, 40, 0.3); border-radius: 2px; }

.ed-log-line {
    font-size: 13px;
    line-height: 1.8;
    padding: 1px 0;
    animation: logFadeIn 0.2s ease;
}

@keyframes logFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.ed-log-player { color: #4effaa; }
.ed-log-enemy { color: #ff8866; }
.ed-log-skill { color: #ffcc44; font-weight: 700; }
.ed-log-crit { color: #ff3030; font-weight: 900; text-shadow: 0 0 6px rgba(255, 48, 48, 0.4); }
.ed-log-heal { color: #44ffaa; font-weight: 700; }
.ed-log-system { color: #d4a843; font-weight: 600; }
.ed-log-dmg-num { color: #fff; font-weight: 800; }
.ed-log-dmg { color: #ffcc66; font-weight: 700; }
.ed-log-round {
    display: inline-block;
    background: rgba(139, 90, 43, 0.25);
    border: 1px solid rgba(180, 120, 50, 0.3);
    color: #cc9944;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 4px;
    font-family: monospace;
    vertical-align: middle;
}

/* 怪物展示区 */
.ed-monster-list {
    padding: 8px 12px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ed-monster-card {
    background: linear-gradient(135deg, rgba(25, 10, 5, 0.85), rgba(15, 6, 3, 0.92));
    border: 1px solid rgba(150, 50, 20, 0.3);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ed-mc-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.ed-mc-info {
    flex: 1;
    min-width: 0;
}

.ed-mc-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.ed-mc-name {
    font-size: 13px;
    font-weight: 800;
    color: #ff9966;
}

.ed-mc-drop-tag {
    font-size: 9px;
    font-weight: 700;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 8px;
    padding: 1px 5px;
}

.ed-mc-stats {
    font-size: 10px;
    color: #888;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ed-mc-stat { color: #aaa; }
.ed-mc-stat-val { color: #ddd; font-weight: 700; }

/* 怪物属性弹窗 */
.ed-monster-detail-modal .modal-body {
    max-height: 55vh;
    overflow-y: auto;
}

.ed-md-section-title {
    font-size: 12px;
    font-weight: 800;
    color: #cc9944;
    margin: 10px 0 8px 0;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(200, 150, 60, 0.15);
    padding-bottom: 4px;
}

.ed-md-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.ed-md-stat-item {
    background: rgba(10, 3, 3, 0.5);
    border-radius: 6px;
    padding: 8px 10px;
    border: 1px solid rgba(60, 25, 15, 0.2);
}

.ed-md-stat-label { font-size: 10px; color: #888; }
.ed-md-stat-value { font-size: 15px; font-weight: 900; color: #ffd700; }

.ed-md-skills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ed-md-skill-tag {
    font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px;
    background: rgba(255, 200, 50, 0.08); border: 1px solid rgba(255, 200, 50, 0.2);
    color: #e6b800;
}

/* 掉落预览 */
.ed-drop-preview {
    padding: 8px 12px;
    background: linear-gradient(180deg, rgba(20, 12, 5, 0.6), transparent);
}

.ed-dp-title {
    font-size: 12px; font-weight: 800; color: #d4a843; margin-bottom: 6px;
}

.ed-dp-items { display: flex; flex-direction: column; gap: 4px; }

.ed-dp-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; padding: 4px 8px; border-radius: 4px;
    background: rgba(10, 5, 3, 0.5); border: 1px solid rgba(60, 25, 15, 0.15);
}

.ed-dp-item-icon { font-size: 16px; }
.ed-dp-item-name { font-weight: 700; }
.ed-dp-item-rate { margin-left: auto; color: #888; font-size: 10px; }

/* 结算面板 */
.ed-result-panel {
    text-align: center;
    padding: 24px 16px;
    background: radial-gradient(ellipse at center, rgba(40, 15, 5, 0.5), transparent);
}

.ed-result-icon { font-size: 56px; margin-bottom: 10px; }
.ed-result-title {
    font-size: 22px; font-weight: 900;
    margin-bottom: 6px;
}
.ed-result-title.win { color: #ffd700; text-shadow: 0 0 20px rgba(255, 215, 0, 0.4); }
.ed-result-title.lose { color: #cc3333; text-shadow: 0 0 20px rgba(204, 51, 51, 0.3); }

.ed-result-sub { font-size: 12px; color: #999; margin-bottom: 16px; }

/* 掉落物品列表 */
.ed-result-drops {
    display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; max-height: 220px; overflow-y: auto;
}

.ed-drop-item {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: 8px;
    background: linear-gradient(135deg, rgba(25, 12, 8, 0.8), rgba(15, 6, 4, 0.9));
    border: 1px solid rgba(120, 60, 30, 0.3);
}

.ed-di-icon { font-size: 26px; }
.ed-di-info { flex: 1; text-align: left; }
.ed-di-name { font-size: 13px; font-weight: 800; }
.ed-di-quality { font-size: 10px; font-weight: 600; }
.ed-di-affixes { font-size: 10px; color: #4effaa; margin-top: 2px; }
.ed-di-affix { margin-right: 6px; }

/* 返回按钮 */
.ed-back-btn {
    display: block; width: 100%; padding: 12px;
    font-size: 14px; font-weight: 800; border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    background: linear-gradient(180deg, #2a1a00, #3d2000);
    color: #ffd700; cursor: pointer;
    transition: all 0.2s; letter-spacing: 2px;
}
.ed-back-btn:hover {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
    background: linear-gradient(180deg, #3d2800, #5a3000);
}

/* ========== 锻造系统 ========== */
.forge-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    min-height: 60vh;
}

/* 装备选择弹窗 */
.forge-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.forge-select-box {
    width: 350px;
    height: 355px;
    background: linear-gradient(180deg, #1a1008, #0e0804);
    border: 2px solid rgba(200,150,50,0.35);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 20px rgba(180,120,40,0.08);
}

.forge-select-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 800;
    color: #d4a843;
    border-bottom: 1px solid rgba(160,110,30,0.2);
    letter-spacing: 2px;
}

.forge-close-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: #888;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.forge-close-btn:hover {
    color: #ff6666;
    border-color: rgba(255,80,80,0.3);
    background: rgba(255,50,50,0.1);
}

/* 分类标签栏 */
.forge-tabs {
    display: flex;
    padding: 8px 10px 0;
    gap: 6px;
    border-bottom: 1px solid rgba(120,80,30,0.18);
    flex-shrink: 0;
}

.forge-tab {
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    color: #998;
    border-radius: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    border: 1px solid transparent;
}
.forge-tab:hover { color: #ccc; }
.forge-tab-on {
    color: #d4a843 !important;
    background: linear-gradient(180deg, rgba(212,168,67,0.18), rgba(212,168,67,0.06));
    border-color: rgba(212,168,67,0.35);
}

/* 装备列表 */
.forge-sel-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.forge-sel-list::-webkit-scrollbar { width: 3px; }
.forge-sel-list::-webkit-scrollbar-thumb { background: rgba(180,80,40,0.3); border-radius: 2px; }

.forge-sel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    background: linear-gradient(135deg, rgba(22,12,6,0.85), rgba(14,7,3,0.92));
    border: 1px solid rgba(100,55,20,0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.forge-sel-item:hover {
    border-color: rgba(200,155,50,0.4);
    background: linear-gradient(135deg, rgba(28,16,8,0.92), rgba(18,9,4,0.96));
    transform: translateX(3px);
}
.forge-sel-active {
    border-color: #d4a843 !important;
    background: linear-gradient(135deg, rgba(35,18,8,0.95), rgba(22,10,5,0.98)) !important;
    box-shadow: 0 0 10px rgba(212,168,67,0.15), inset 0 0 12px rgba(212,168,67,0.05);
}

.forge-sel-icon {
    font-size: 26px;
    flex-shrink: 0;
    line-height: 1;
}

.forge-sel-info {
    flex: 1;
    min-width: 0;
}

.forge-sel-name {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forge-sel-meta {
    font-size: 10px;
    color: #777;
    margin-top: 2px;
}

.forge-sel-eq {
    font-size: 9px;
    font-weight: 700;
    color: #4effaa;
    background: rgba(78,255,170,0.1);
    border: 1px solid rgba(78,255,170,0.25);
    padding: 0 4px;
    border-radius: 8px;
    margin-left: 5px;
    vertical-align: middle;
    display: inline-block;
    line-height: 14px;
}

.forge-sel-empty {
    text-align: center;
    padding: 24px;
    color: #555;
    font-size: 12px;
}

/* 锻造类型选择弹窗（装备/法宝） */
.forge-type-box {
    width: 300px;
    background: linear-gradient(180deg, #1a1008, #0e0804);
    border: 2px solid rgba(200,150,50,0.35);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 20px rgba(180,120,40,0.08);
}

.forge-type-list {
    display: flex;
    gap: 10px;
    padding: 14px;
}

.forge-type-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 8px;
    background: linear-gradient(135deg, rgba(22,12,6,0.85), rgba(14,7,3,0.92));
    border: 1px solid rgba(100,55,20,0.25);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.forge-type-item:hover {
    border-color: rgba(212,168,67,0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(212,168,67,0.12);
}

.forge-type-icon {
    font-size: 32px;
    line-height: 1;
}

.forge-type-name {
    font-size: 14px;
    font-weight: 800;
    color: #d4a843;
    letter-spacing: 2px;
}

.forge-type-desc {
    font-size: 9px;
    color: #777;
    text-align: center;
}

.fg-left-panel {
    width: 130px;
    flex-shrink: 0;
}

.fg-section-title {
    font-size: 12px;
    font-weight: 800;
    color: #cc9944;
    margin-bottom: 8px;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(200,150,60,0.15);
    padding-bottom: 4px;
}

.fg-item-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 2px;
}
.fg-item-list::-webkit-scrollbar { width: 3px; }
.fg-item-list::-webkit-scrollbar-thumb { background: rgba(180,80,40,0.3); border-radius: 2px; }

.fg-item-card {
    background: linear-gradient(135deg, rgba(25,12,8,0.85), rgba(15,6,3,0.92));
    border: 1px solid rgba(120,50,20,0.25);
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fg-item-card:hover {
    border-color: rgba(212,168,67,0.5);
    transform: translateY(-1px);
}

.fg-item-card.fg-item-selected {
    border-color: #d4a843;
    box-shadow: 0 0 10px rgba(212,168,67,0.2), inset 0 0 12px rgba(212,168,67,0.06);
    background: linear-gradient(135deg, rgba(35,18,8,0.92), rgba(22,10,5,0.96));
}

.fg-item-icon {
    font-size: 28px;
    margin-bottom: 4px;
}

.fg-item-name {
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fg-item-lvl {
    font-size: 9px;
    color: #888;
    margin-top: 2px;
}

/* 右侧详情面板 */
.fg-right-panel {
    flex: 1;
    min-width: 0;
}

.fg-detail-card {
    background: linear-gradient(135deg, rgba(20,10,5,0.95), rgba(12,5,2,0.98));
    border: 2px solid rgba(180,120,50,0.35);
    border-radius: 14px;
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
}

/* 角落装饰 - 类似参考图的边框角标风格 */
.fg-detail-card::before,
.fg-detail-card::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: rgba(180,140,60,0.5);
    border-style: solid;
    pointer-events: none;
}
.fg-detail-card::before {
    top: 6px; left: 6px;
    border-width: 2px 0 0 2px;
    border-radius: 4px 0 0 0;
}
.fg-detail-card::after {
    bottom: 6px; right: 6px;
    border-width: 0 2px 2px 0;
    border-radius: 0 0 4px 0;
}

/* 头部：装备大图 + 名称 + 更换按钮 */
.fg-detail-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(100,70,30,0.25);
}

.fg-weapon-icon {
    width: 90px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(30,15,8,0.7), transparent);
    border-radius: 8px;
    flex-shrink: 0;
    border: 1px solid rgba(100,60,25,0.2);
}

.fg-weapon-icon-inner {
    font-size: 52px;
    line-height: 1;
}

.fg-header-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fg-current-select {
    font-size: 14px;
    font-weight: 700;
    color: #ddd;
}

.fg-change-btn {
    align-self: flex-start;
    padding: 4px 14px;
    font-size: 11px;
    font-weight: 800;
    color: #d4a843;
    background: linear-gradient(180deg, rgba(60,40,10,0.9), rgba(40,25,5,0.95));
    border: 1px solid rgba(200,160,60,0.35);
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.15s;
}
.fg-change-btn:hover {
    background: linear-gradient(180deg, rgba(80,50,15,0.95), rgba(55,32,8,0.98));
    box-shadow: 0 0 8px rgba(212,168,67,0.15);
}

/* 属性列表 */
.fg-attr-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.fg-attr-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(5,2,2,0.45);
    border-radius: 6px;
    border-left: 2px solid rgba(180,120,50,0.2);
}

.fg-attr-label {
    font-size: 13px;
    font-weight: 600;
    color: #bbb;
}

.fg-attr-value {
    font-size: 14px;
    font-weight: 800;
    color: #e8e8e8;
}

.fg-val-highlight {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255,215,0,0.25);
}

/* 按钮行 */
.fg-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.fg-enhance-btn {
    flex: 1;
    padding: 11px 0;
    font-size: 14px;
    font-weight: 900;
    color: #e8c878;
    background: linear-gradient(180deg, #4a2800, #3a1e00);
    border: 2px solid rgba(200,160,60,0.45);
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 3px;
    transition: all 0.2s;
}
.fg-enhance-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #5e3400, #482600);
    box-shadow: 0 0 16px rgba(212,168,67,0.25), inset 0 0 20px rgba(232,200,120,0.05);
    border-color: rgba(220,175,70,0.6);
}
.fg-enhance-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.fg-refine-btn {
    flex: 1;
    padding: 11px 0;
    font-size: 14px;
    font-weight: 900;
    color: #999;
    background: linear-gradient(180deg, #1a1410, #12100c);
    border: 1px solid rgba(100,80,50,0.2);
    border-radius: 8px;
    cursor: not-allowed;
    letter-spacing: 3px;
}

.fg-max-hint {
    text-align: center;
    font-size: 12px;
    color: #888;
    margin-top: 8px;
}

.fg-empty-hint {
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-size: 13px;
}

/* ========== 锻造模式选择栏（Tab切换按钮-背包风格） ========== */
.forge-top-bar {
    display: flex;
    justify-content: center;
    padding: 8px 0 16px;
    width: 100%;
}

.forge-mode-tabs {
    display: flex;
    gap: 6px;
}

.forge-tab-btn {
    display: inline-block;
    padding: 7px 18px !important;
    background: rgba(20, 10, 10, 0.8) !important;
    border: 1px solid rgba(180,120,50,0.25) !important;
    border-radius: 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #998866 !important;
    cursor: pointer;
    transition: all 0.3s;
    outline: none;
    white-space: nowrap;
    line-height: 1.4;
}
.forge-tab-btn:hover {
    border-color: rgba(212,168,67,0.5) !important;
    color: #d4a843 !important;
}
.forge-tab-btn.active {
    background: rgba(180, 100, 20, 0.25) !important;
    border-color: #d4a843 !important;
    color: #e8c878 !important;
}

/* ========== 合成装备 ========== */
.combine-container {
    max-width:420px;
    margin:0 auto;
    width:100%;
}

.combine-info-bar {
    text-align:center;
    font-size:11px;
    color:#999;
    padding:8px 0 12px;
}

.combine-area {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:10px 0;
}

.combine-inputs {
    display:flex;
    gap:16px;
    width:100%;
    justify-content:center;
}

/* 合成槽位方框 */
.combine-slot {
    width:90px;
    height:90px;
    background:linear-gradient(135deg,rgba(25,12,8,0.85),rgba(15,6,3,0.92));
    border:2px dashed rgba(120,50,20,0.35);
    border-radius:10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.2s;
    position:relative;
}
.combine-slot:hover {
    border-color:rgba(212,168,67,0.5);
    background:linear-gradient(135deg,rgba(30,15,9,0.92),rgba(18,8,5,0.96));
}
.combine-slot-filled {
    border-style:solid !important;
    border-color:rgba(212,168,67,0.45) !important;
    box-shadow:0 0 12px rgba(212,168,67,0.1),inset 0 0 15px rgba(212,168,67,0.05);
}

.combine-slot-plus {
    font-size:32px;
    color:#666;
    line-height:1;
}
.combine-slot-hint {
    font-size:10px;
    color:#555;
    margin-top:4px;
}

.combine-slot-icon {
    font-size:36px;
    line-height:1;
}
.combine-slot-name {
    font-size:12px;
    font-weight:800;
    margin-top:4px;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding:0 6px;
}
.combine-slot-q {
    font-size:10px;
    opacity:0.7;
}
.combine-slot-remove {
    position:absolute;
    top:4px;right:4px;
    width:18px;height:18px;
    border-radius:50%;
    background:rgba(255,60,60,0.2);
    color:#ff4444;
    font-size:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.15s;
}
.combine-slot-remove:hover {
    background:rgba(255,60,60,0.5);
    color:#fff;
}

/* 红色虚线连接（树形：两竖 → 一横 → 一竖） */
.combine-connector {
    position: relative;
    width: 256px;
    height: 34px;
}

.conn-line {
    position: absolute;
    top: 0;
    width: 2px;
    height: 20px;
    border-left: 2px dashed rgba(160,60,40,0.25);
}
.conn-line.active {
    border-left-color: rgba(255,80,60,0.7);
}
.conn-left { left: 64px; }
.conn-right { left: 190px; }

.conn-h-line {
    position: absolute;
    top: 18px;
    left: 64px;
    width: 128px;
    height: 2px;
    border-top: 2px dashed rgba(160,60,40,0.25);
}
.conn-h-line.active {
    border-top-color: rgba(255,80,60,0.7);
}

.conn-v-line {
    position: absolute;
    top: 18px;
    left: 126px;
    width: 2px;
    height: 16px;
    border-left: 2px dashed rgba(160,60,40,0.25);
}
.conn-v-line.active {
    border-left-color: rgba(255,80,60,0.7);
}



.combine-result {
    width:90px;
    height:90px;
    background:linear-gradient(135deg,rgba(30,16,10,0.92),rgba(18,8,4,0.98));
    border:2px solid rgba(150,90,40,0.3);
    border-radius:12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
}
.combine-result-error {
    border-color:rgba(255,80,80,0.2) !important;
}
.combine-result-success {
    border-color: rgba(212,168,67,0.6) !important;
    background: linear-gradient(135deg, rgba(40,22,10,0.95), rgba(25,12,5,0.98)) !important;
    box-shadow: 0 0 20px rgba(212,168,67,0.2), 0 0 60px rgba(212,168,67,0.06);
    animation: resultGlow 2s ease-in-out infinite alternate;
}

@keyframes resultGlow {
    from { box-shadow: 0 0 15px rgba(212,168,67,0.15), 0 0 40px rgba(212,168,67,0.04); }
    to { box-shadow: 0 0 25px rgba(212,168,67,0.3), 0 0 60px rgba(212,168,67,0.1); }
}

.combine-result-icon {
    font-size:38px;
    color:#d4a843;
    line-height:1;
}
.combine-result-placeholder {
    font-size:28px;
    color:#444;
    line-height:1;
}
.combine-result-name {
    font-size:12px;
    font-weight:800;
    text-align:center;
}

/* 合成详情 */
.combine-detail {
    background:rgba(25,12,8,0.6);
    border:1px solid rgba(100,50,20,0.2);
    border-radius:8px;
    padding:10px 14px;
    margin:10px 0 8px;
}
.combine-detail-row {
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:#bbb;
    padding:3px 0;
}
.combine-detail-row span:first-child {
    color:#888;
}

/* 合成按钮 - 底部栏（跟随文档流，固定在内容下方） */
.forge-container {
    position: static;
}
.combine-btn-bar {
    position: relative;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    z-index: 100;
    background: linear-gradient(180deg, rgba(18,10,6,0.97), rgba(10,5,2,0.99));
    border-top: 1px solid rgba(120,60,20,0.3);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
}

.combine-btn {
    width:100%;
    padding:12px 0;
    font-size:15px;
    font-weight:900;
    color:#e8c878;
    background:linear-gradient(180deg,#4a2800,#3a1e00);
    border:2px solid rgba(200,160,60,0.45);
    border-radius:8px;
    cursor:pointer;
    letter-spacing:3px;
    transition:all 0.2s;
    margin:0;
}
.combine-btn:hover:not(:disabled) {
    background:linear-gradient(180deg,#5e3400,#482600);
    box-shadow:0 0 16px rgba(212,168,67,0.25);
    border-color:rgba(220,175,70,0.6);
}
.combine-btn:disabled {
    opacity:0.4;
    cursor:not-allowed;
}

.combine-empty-hint {
    text-align:center;
    font-size:12px;
    color:#666;
    padding:16px 0;
}

/* 一键合成按钮 */
.auto-combine-btn {
    width:100%;
    padding:10px 0;
    font-size:13px;
    font-weight:800;
    color:#a0d8ef;
    background:linear-gradient(180deg,#1a2e3a,#12242f);
    border:2px solid rgba(80,160,200,0.35);
    border-radius:8px;
    cursor:pointer;
    letter-spacing:2px;
    transition:all 0.2s;
}
.auto-combine-btn:hover {
    background:linear-gradient(180deg,#223a48,#183242);
    box-shadow:0 0 12px rgba(80,160,200,0.2);
    border-color:rgba(80,160,200,0.55);
}
/* 运行中状态 */
.auto-combine-running {
    color:#ffaa40 !important;
    border-color: rgba(255,150,50,0.5) !important;
    background: linear-gradient(180deg, #3a2500, #2e1d00) !important;
    animation: autoCombinePulse 1s ease-in-out infinite alternate;
}
@keyframes autoCombinePulse {
    from { box-shadow: 0 0 8px rgba(255,170,64,0.15); }
    to { box-shadow: 0 0 18px rgba(255,170,64,0.35); }
}

/* 一键合成结果弹窗 */
.ac-result-summary {
    padding: 12px;
}
.ac-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(100,50,20,0.15);
}
.ac-summary-label {
    font-size: 14px;
    color: #ccc;
    font-weight: 700;
}
.ac-summary-val {
    font-size: 16px;
    font-weight: 900;
}
.ac-success {
    color: #4eff4e;
    text-shadow: 0 0 8px rgba(78,255,78,0.3);
}
.ac-result-title {
    font-size: 13px;
    color: #999;
    font-weight: 700;
    padding: 12px;
    border-top: 1px solid rgba(100,50,20,0.1);
    margin-top: 4px;
}
.ac-result-list {
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 1; /* 允许压缩，为底部按钮留空间 */
}
.ac-result-footer {
    margin-top: auto; /* 将按钮推到弹窗底部 */
    padding: 10px 12px 14px;
    flex-shrink: 0;
}
.ac-result-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(25,12,8,0.4);
    border-radius: 6px;
    border: 1px solid rgba(100,50,20,0.12);
}
.ac-result-icon {
    font-size: 20px;
    flex-shrink: 0;
}
.ac-result-name {
    font-size: 12px;
    font-weight: 700;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ac-result-q {
    font-size: 10px;
    flex-shrink: 0;
}
.ac-result-more {
    text-align: center;
    font-size: 11px;
    color: #777;
    padding: 4px 0;
}
.ac-result-empty {
    text-align: center;
    font-size: 13px;
    color: #666;
    padding: 20px 0;
}

/* ============================================ */
/*  社交系统样式 */
/* ============================================ */

/* Tab 切换 */
/* 社交页面：全屏flex布局（覆盖.page默认样式） */
#social-page {
    height: 100vh;
    padding: 0 !important;
    min-height: auto !important;
    overflow: hidden;
    flex-direction: column;
}
#social-page > .top-bar {
    flex-shrink: 0;
}
#social-page > #social-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    overflow: hidden;
}

.social-tabs {
    display: flex;
    background: linear-gradient(180deg, rgba(20,5,5,0.95), rgba(10,5,5,0.9));
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    order: -1;
}
.social-tab {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.social-tab.active {
    color: var(--text-blood);
    border-bottom-color: var(--accent-red-bright);
}
.social-tab:hover {
    color: var(--text-primary);
}

/* 面板：占满剩余空间 */
.social-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* 聊天区域 */
.social-chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.social-chat-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
}
.social-chat-msgs::-webkit-scrollbar {
    width: 3px;
}
.social-chat-msgs::-webkit-scrollbar-thumb {
    background: rgba(139,0,0,0.3);
    border-radius: 2px;
}

/* ======== 聊天气泡（原神风格） ======== */

/* 消息行 */
.social-msg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    padding: 0 10px;
}
/* 自己消息：不用row-reverse，HTML里气泡在前头像在后 */
/* 自己的消息行整体靠右 */
.social-msg-me {
    justify-content: flex-end;
}

/* 头像（圆形，取用户名首字） */
.social-msg-avatar {
    width: 40px; height: 40px; min-width: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700;
    flex-shrink: 0;
    background: linear-gradient(135deg, #4a3a2a, #2a1a0a);
    color: #d4a843;
    border: 2px solid rgba(180,140,60,0.35);
}
.social-avatar-me {
    background: linear-gradient(135deg, #6b2020, #3a1010);
    color: #ff9999;
    border-color: rgba(200,80,80,0.4);
}

/* 右侧内容区（对方） / 左侧内容区（自己，气泡靠右） */
.social-msg-right    { display: flex; flex-direction: column; align-items: flex-start; max-width: 68%; }
.social-msg-right-me { display: flex; flex-direction: column; align-items: flex-end;   max-width: 68%; }

/* 名字行 */
.social-msg-name-row {
    display: flex; align-items: center; gap: 5px;
    margin-bottom: 4px; font-size: 12px;
}
.social-msg-name { font-weight: 700; color: #e8d89a; cursor: pointer; }
.social-msg-name:hover { color: #ffe066; text-decoration: underline; }
.social-msg-realm-tag { color: #888; font-size: 10.5px; }

/* ========== 对方消息气泡：深色底 + 白边 ========== */
.social-msg-bubble {
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(50, 50, 50, 0.95);
    color: #eee;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    position: relative;
    border: 1.5px solid rgba(100, 100, 100, 0.4);
}

/* ========== 自己消息气泡：深色底 + 边框 ========== */
.social-msg-bubble-me {
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(45, 42, 35, 0.95);
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    position: relative;
    border: 1.5px solid rgba(160, 140, 90, 0.4);
}

/* @提及 */
.social-at,
.social-at-mention {
    color: #ff69b4;
    font-size: 11px;
    font-weight: 600;
}

/* @提及下拉列表 */
.at-mention-list {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 14px; /* 与输入框左边距对齐 */
    right: 90px; /* 避开+和发送按钮 */
    max-height: 200px;
    overflow-y: auto;
    background: rgba(25,15,20,0.98);
    border: 1px solid rgba(200,140,60,0.3);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
    z-index: 50;
    padding: 6px 0;
}
.at-mention-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.at-mention-item:hover,
.at-mention-item.active {
    background: rgba(200,160,80,0.12);
}
.at-mention-item.active {
    background: rgba(200,160,80,0.2);
}
.at-mention-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg,#c0392b,#8b0000);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.at-mention-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.at-mention-name {
    color: #e8c87a;
    font-size: 13px;
    font-weight: 600;
}
.at-mention-realm {
    color: #888;
    font-size: 10px;
}

/* 输入行 — 类似原神风格 */
.social-chat-input-row {
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(20,12,10,0.98), rgba(15,8,6,0.98));
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}
.social-chat-reply-hint {
    font-size: 11px;
    color: #ff69b4;
    padding: 4px 0;
    background: rgba(255,105,180,0.08);
    border-radius: 4px;
    padding: 4px 8px;
    margin-bottom: 6px;
}
.social-chat-input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}
.social-chat-input {
    flex: 1;
    padding: 11px 16px;
    background: rgba(60,50,45,0.7);
    border: 1px solid rgba(100,80,60,0.35);
    border-radius: 22px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.social-chat-input:focus {
    border-color: rgba(200,160,90,0.5);
    box-shadow: 0 0 0 2px rgba(200,160,90,0.1);
}
.social-chat-input::placeholder {
    color: rgba(140,120,100,0.6);
}

/* 发送按钮 — 原神风格圆角按钮 */
.social-send-btn {
    padding: 8px 22px;
    background: linear-gradient(135deg, #d4a843, #b8912e);
    color: #1a1408;
    border: none;
    border-radius: 22px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s, box-shadow 0.15s;
}
.social-send-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 2px 10px rgba(212,168,67,0.35);
}
.social-send-btn:active {
    transform: scale(0.97);
}

/* ========== 加号按钮（展开表情/图片面板） ========== */
.social-plus-btn {
    width: 36px; height: 36px; min-width: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: none;
    background: rgba(60,50,45,0.7);
    color: var(--text-secondary);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.social-plus-btn:hover {
    background: rgba(80,70,55,0.85);
    color: var(--text-primary);
}
.social-plus-btn:active {
    transform: scale(0.9);
}
/* 展开状态变为 X 字 */
.social-plus-btn.active {
    color: var(--text-blood);
    background: rgba(139,0,0,0.25);
}

/* ========== 表情/图片选择面板 ========== */
/* 相对于输入行绝对定位，悬浮在输入框上方，不挤压布局 */
.social-emoji-panel {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(25,15,12,0.98), rgba(18,10,8,0.98));
    border: 1px solid rgba(139,69,19,0.3);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    z-index: 20;
    animation: panelSlideDown 0.2s ease;
}
.social-emoji-panel.show { display: block; }
@keyframes panelSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.social-emoji-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(100,70,40,0.3);
    padding-bottom: 6px;
}
.social-emoji-tab {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}
.social-emoji-tab.active {
    color: var(--text-gold);
    border-bottom-color: var(--text-gold);
}
.social-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    max-height: 160px;
    overflow-y: auto;
}
.social-emoji-grid::-webkit-scrollbar { width: 3px; }
.social-emoji-grid::-webkit-scrollbar-thumb { background: rgba(139,0,0,0.3); border-radius: 2px; }
.social-emoji-item {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.12s;
    background: transparent;
}
.social-emoji-item:hover {
    background: rgba(200,160,90,0.15);
    transform: scale(1.15);
}

/* 加载 */
.social-loading {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    padding: 30px 0;
}

/* 好友搜索 */
.social-friend-search {
    display: flex;
    gap: 8px;
    padding: 12px;
}
.social-search-input {
    flex: 1;
    padding: 8px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
}
.social-search-input:focus {
    border-color: var(--accent-red-bright);
}
.social-search-input::placeholder {
    color: var(--text-muted);
}

/* 分类标题 */
.social-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-gold);
    padding: 8px 12px 4px;
    letter-spacing: 1px;
}

/* 好友列表 */
.social-friend-list {
    padding: 0 8px;
}
.social-friend-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(255,255,255,0.02);
    border-radius: 6px;
    margin-bottom: 4px;
    transition: background 0.15s;
}
.social-friend-card:hover {
    background: rgba(255,255,255,0.05);
}
.social-friend-info {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.social-friend-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.social-friend-lv {
    font-size: 10px;
    color: var(--text-muted);
}
.social-friend-actions {
    display: flex;
    gap: 6px;
}
.social-pending-tag {
    font-size: 10px;
    color: #666;
    font-style: italic;
}

/* 在线标记 */
.social-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4eff4e;
    box-shadow: 0 0 6px rgba(78,255,78,0.5);
    display: inline-block;
}

/* 私聊 */
.social-whisper-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(20,5,5,0.95), rgba(10,5,5,0.9));
    border-bottom: 1px solid var(--border-color);
}
.social-whisper-back {
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
}
.social-whisper-back:hover {
    color: var(--text-blood);
}
.social-whisper-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-gold);
}

/* 用户操作菜单 */
.social-user-menu {
    position: fixed;
    background: linear-gradient(135deg, #1a0a0a 0%, #0d0505 100%);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.8), 0 0 20px rgba(139,0,0,0.2);
    z-index: 3000;
    min-width: 130px;
    overflow: hidden;
}
.social-user-menu-item {
    padding: 10px 16px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.social-user-menu-item:last-child {
    border-bottom: none;
}
.social-user-menu-item:hover {
    background: rgba(139,0,0,0.15);
    color: var(--text-gold);
}

/* 搜索结果区域 */
#social-search-results {
    padding: 0 8px;
}

/* 按钮小尺寸 */
.btn-xs {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 4px;
}

/* ========== 玩家信息属性弹窗 ========== */
.player-info-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 5000; animation: fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.player-info-modal {
    width: 88%; max-width: 380px; max-height: 85vh; overflow-y: auto;
    background: linear-gradient(180deg, #1a100c 0%, #0f0906 100%);
    border: 1px solid rgba(139,69,19,0.4);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 30px rgba(139,0,0,0.15);
}
.player-info-modal::-webkit-scrollbar { width: 3px; }
.player-info-modal::-webkit-scrollbar-thumb { background: rgba(139,0,0,0.3); border-radius: 2px; }
.player-info-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(139,69,19,0.25);
    background: linear-gradient(180deg, rgba(212,168,67,0.08), transparent);
    border-radius: 14px 14px 0 0;
}
.player-info-title {
    font-size: 16px; font-weight: 900; color: var(--text-gold);
    text-shadow: 0 0 10px rgba(212,168,67,0.2);
}
.player-info-close {
    font-size: 18px; cursor: pointer; color: var(--text-muted);
    transition: all 0.15s; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.player-info-close:hover {
    color: var(--text-blood); background: rgba(200,0,0,0.15);
}
.player-info-body { padding: 0; display: flex; flex-direction: column; max-height: 70vh; }

/* 固定顶部（头像+血条不滚动） */
.player-info-fixed-top {
    padding: 14px 18px 10px;
    flex-shrink: 0; border-bottom: 1px solid rgba(100,70,40,0.2);
}
.player-info-scroll-area {
    flex: 1; overflow-y: auto;
    padding: 10px 18px 14px;
}

/* 头像+昵称行 */
.player-info-name-row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px; padding-bottom: 14px;
    border-bottom: 1px solid rgba(100,70,40,0.2);
}
.player-info-avatar {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-dark-gold), var(--accent-red));
    font-size: 20px; font-weight: 900; color: var(--text-gold);
    flex-shrink: 0;
}
.pi-avatar-clickable { cursor: pointer; }
.pi-avatar-clickable:hover { box-shadow: 0 0 12px rgba(212,168,67,0.4); }
.player-info-basic { display: flex; flex-direction: column; gap: 4px; }
.player-info-displayname {
    font-size: 16px; font-weight: 800; color: var(--text-primary);
}
.player-info-realm {
    font-size: 12px; color: var(--text-gold); font-weight: 600;
}

/* 分区 */
.player-info-section { margin-bottom: 14px; }
.player-info-section-title {
    font-size: 13px; font-weight: 700; color: var(--text-secondary);
    margin-bottom: 8px; padding-left: 6px;
    border-left: 3px solid var(--accent-red-bright);
}

/* 属性网格 */
.player-info-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
}
.player-info-item {
    display: flex; flex-direction: column; gap: 2px;
    padding: 5px 8px;
    background: rgba(255,255,255,0.02);
    border-radius: 6px; border: 1px solid rgba(139,69,19,0.1);
}
.pi-label {
    font-size: 11px; color: var(--text-muted);
}
.pi-value {
    font-size: 14px; font-weight: 700; color: var(--text-primary);
}
.pi-atk { color: #e74c3c; }
.pi-def { color: #3498db; }
.pi-gold { color: var(--text-gold); }
.pi-jade { color: #9b59b6; }
/* 经验条 */
.pi-exp-bar-wrap {
    position: relative; height: 18px;
    background: rgba(0,0,0,0.4);
    border-radius: 4px; overflow: hidden;
    margin-top: 4px;
}
.pi-exp-bar {
    position: absolute; left: 0; top: 0; height: 100%;
    background: linear-gradient(90deg, var(--accent-purple), var(--text-gold));
    border-radius: 4px; transition: width 0.3s ease;
}
.pi-exp-text {
    position: absolute; width: 100%; text-align: center;
    line-height: 18px; font-size: 10px; color: #ccc; font-weight: 700;
}

/* 血量/法力条行 */
.pi-bars-row {
    display: flex; gap: 16px; margin-bottom: 14px;
}
.pi-bar-group {
    flex: 1; display: flex; flex-direction: column; gap: 3px;
}
.pi-bar-label {
    font-size: 12px; font-weight: 700;
}
.pi-hp-group .pi-bar-label { color: var(--text-blood); }
.pi-mp-group .pi-bar-label { color: #4a9eff; }
.pi-bar-value {
    font-size: 13px; font-weight: 700; color: var(--text-primary);
    align-self: flex-start;
}
.pi-hp-group .pi-bar-value { color: var(--text-blood-glow); }
.pi-mp-group .pi-bar-value { color: #6bb3ff; }
.pi-bar-track {
    height: 8px; background: rgba(0,0,0,0.5);
    border-radius: 4px; overflow: hidden;
}
.pi-bar-fill {
    height: 100%; border-radius: 4px; transition: width 0.3s ease;
}
.pi-hp-bar { background: linear-gradient(90deg, #cc0000, #ff4444); }
.pi-mp-bar { background: linear-gradient(90deg, #2266aa, #4a9eff); }

/* 装备栏 */
.pi-equip-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
.pi-equip-slot {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px;
    background: rgba(255,255,255,0.02);
    border-radius: 6px; border: 1px solid rgba(139,69,19,0.15);
}
.pi-equip-label {
    font-size: 10px; color: var(--text-muted); white-space: nowrap;
}
.pi-equip-name {
    font-size: 11px; font-weight: 700; color: var(--text-gold);
    text-align: center; word-break: break-all;
}

/* ========== 世界BOSS系统 ========== */
.wb-tab {
    flex: 1; padding: 10px 0; font-size: 13px; font-weight: 700;
    color: #888; background: transparent; border: none; cursor: pointer; transition: all 0.2s; letter-spacing: 1px;
}
.wb-tab.active { color: #ffd700; background: rgba(212,168,67,0.12); }
.wb-tab:hover { color: #ccc; }

.wb-main-card {
    margin: 10px 15px;
    background: linear-gradient(135deg, rgba(40,10,10,0.95), rgba(20,5,5,0.98));
    border: 2px solid rgba(200,50,50,0.4); border-radius: 14px; overflow: hidden; position: relative;
}
.wb-main-card::before {
    content:''; position:absolute; top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,#ff0000,#ff6600,#ff0000);
    animation:wbGlow 2s ease-in-out infinite alternate;
}
@keyframes wbGlow{ from{opacity:.6} to{opacity:1} }

.wb-header { display:flex; align-items:center; gap:14px; padding:16px 16px 12px; position:relative; }
.wb-icon{ font-size:56px; line-height:1; filter:drop-shadow(0 0 12px rgba(255,50,50,0.5)); animation:wbIconPulse 3s ease-in-out infinite; }
@keyframes wbIconPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.wb-info{ flex:1; min-width:0; }
.wb-name-row{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.wb-name{ font-size:18px; font-weight:900; color:#ff4444; text-shadow:0 0 12px rgba(255,50,50,0.5); letter-spacing:2px; }
.wb-level-badge{ font-size:11px; font-weight:700; color:#ff9944; background:rgba(255,100,30,0.15); border:1px solid rgba(255,100,30,0.35); padding:2px 8px; border-radius:10px; }
.wb-desc{ font-size:11px; color:#999; line-height:1.5; margin-bottom:6px; }

.wb-status-tag{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:3px 10px; border-radius:10px; letter-spacing:1px; }
.wb-status-active{ color:#4eff4e; background:rgba(78,255,78,0.1); border:1px solid rgba(78,255,78,0.3); animation:statusBlink 1.5s ease-in-out infinite; }
.wb-status-defeated{ color:#ffd700; background:rgba(255,215,0,0.1); border:1px solid rgba(255,215,0,0.3); }
.wb-status-escaped{ color:#888; background:rgba(136,136,136,0.1); border:1px solid rgba(136,136,136,0.25); }
.wb-status-cooldown{ color:#4a9eff; background:rgba(74,158,255,0.1); border:1px solid rgba(74,158,255,0.25); }
@keyframes statusBlink{ 0%,100%{opacity:1} 50%{opacity:.6} }

.wb-hp-section{ padding:0 16px 12px; }
.wb-hp-bar-wrap{
    position:relative; height:28px; background:rgba(0,0,0,0.7); border-radius:6px; overflow:hidden;
    border:1px solid rgba(200,30,30,0.5);
}
.wb-hp-bar-fill{
    height:100%; background:linear-gradient(90deg,#8b0000,#cc2222,#ff3333,#cc2222);
    background-size:200% 100%; transition:width .5s ease; border-radius:5px; animation:hpShine 3s linear infinite; position:relative;
}
.wb-hp-bar-fill::after{ content:''; position:absolute; top:0;left:0;right:0;height:45%; background:linear-gradient(180deg,rgba(255,255,255,.18),transparent); border-radius:5px 5px 0 0; }
@keyframes hpShine{ from{background-position:200% 0} to{background-position:0 0} }
.wb-hp-text{ position:absolute; top:50%;left:50%; transform:translate(-50%,-50%); font-size:12px; font-weight:800; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.9); white-space:nowrap; z-index:2; pointer-events:none; }
.wb-hp-sub{ display:flex; justify-content:space-between; margin-top:4px; font-size:10px; color:#777; }

.wb-phase-section{ padding:0 16px 10px; }
.wb-phase-label{ font-size:11px; color:#aaa; margin-bottom:6px; font-weight:600; }
.wb-phase-bars{ display:flex; gap:4px; }
.wb-phase-seg{ flex:1; height:6px; border-radius:3px; background:rgba(60,30,20,.5); border:1px solid rgba(100,50,30,.2); transition:all .3s; position:relative; overflow:hidden; }
.wb-phase-seg.active{ border-color:rgba(255,150,50,.6); }
.wb-phase-seg.phase-1{ background:linear-gradient(90deg,#2a7a2a,#4ecc4e); }
.wb-phase-seg.phase-2{ background:linear-gradient(90deg,#7a6a1a,#cccc44); }
.wb-phase-seg.phase-3{ background:linear-gradient(90deg,#7a4a1a,#ee8833); }
.wb-phase-seg.phase-4{ background:linear-gradient(90deg,#7a1a1a,#ee3333); }
.wb-phase-seg.passed{ opacity:.3; }

.wb-stats-row{ display:flex; gap:6px; padding:10px 16px; border-top:1px solid rgba(100,40,20,.25); }
.wb-stat-item{ flex:1; text-align:center; padding:6px 4px; background:rgba(0,0,0,.3); border-radius:6px; }
.wb-stat-val{ font-size:14px; font-weight:900; color:#eee; }
.wb-stat-label{ font-size:9px; color:#666; margin-top:2px; }

.wb-my-panel{ margin:10px 15px; background:linear-gradient(135deg,rgba(20,15,10,.9),rgba(15,10,5,.95)); border:1px solid rgba(180,120,50,.25); border-radius:10px; padding:12px 14px; }
.wb-my-title{ font-size:13px; font-weight:800; color:#d4a843; margin-bottom:10px; letter-spacing:1px; }
.wb-my-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.wb-my-item{ text-align:center; padding:8px 4px; background:rgba(0,0,0,.3); border-radius:6px; }
.wb-my-item-val{ font-size:16px; font-weight:900; color:#ffd700; }
.wb-my-item-label{ font-size:9px; color:#888; margin-top:2px; }

.wb-fight-btn{
    display:block; width:100%; padding:13px 0; font-size:15px; font-weight:900; color:#fff;
    background:linear-gradient(135deg,#aa0000,#660000); border:2px solid #cc3333; border-radius:10px;
    cursor:pointer; letter-spacing:4px; transition:all .25s; position:relative; overflow:hidden; text-shadow:0 2px 4px rgba(0,0,0,.5);
}
.wb-fight-btn::before{ content:''; position:absolute; top:0;left:-100%;width:100%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent); transition:left .5s; }
.wb-fight-btn:hover::before{ left:100%; }
.wb-fight-btn:hover{ background:linear-gradient(135deg,#cc1111,#880000); box-shadow:0 0 25px rgba(255,50,50,.4); transform:translateY(-1px); }
.wb-fight-btn:active{ transform:scale(.97); }
.wb-fight-btn:disabled{ background:linear-gradient(135deg,#333,#222); border-color:#555; color:#666; cursor:not-allowed; text-shadow:none; }
.wb-fight-btn:disabled::before{ display:none; }

.wb-sub-tabs{ display:flex; gap:0; margin:10px 15px 0; background:rgba(0,0,0,.3); border-radius:8px; overflow:hidden; }
.wb-sub-tab{ flex:1; padding:8px 0; font-size:12px; font-weight:700; color:#888; background:transparent; border:none; cursor:pointer; transition:all .2s; }
.wb-sub-tab.active{ color:#d4a843; background:rgba(212,168,67,.12); }

.wb-rank-panel{ padding:10px 15px; max-height:320px; overflow-y:auto; }
.wb-rank-panel::-webkit-scrollbar{ width:4px; }
.wb-rank-panel::-webkit-scrollbar-track{ background:rgba(0,0,0,.2); }
.wb-rank-panel::-webkit-scrollbar-thumb{ background:rgba(180,120,50,.2); border-radius:2px; }
.wb-rank-empty{ text-align:center; padding:30px 10px; color:#555; font-size:13px; }
.wb-rank-item{
    display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:6px;
    background:linear-gradient(135deg,rgba(25,12,8,.85),rgba(15,6,3,.92));
    border:1px solid rgba(100,50,20,.2); border-radius:8px; transition:all .15s;
}
.wb-rank-item:hover{ border-color:rgba(200,150,50,.3); }
.wb-rank-item.me{ border-color:rgba(78,255,170,.4); background:linear-gradient(135deg,rgba(20,35,20,.9),rgba(12,22,12,.95)); }
.wb-rank-num{ width:26px; font-size:14px; font-weight:900; text-align:center; flex-shrink:0; }
.wb-rank-num.top1{ color:#ffd700; font-size:16px; text-shadow:0 0 8px rgba(255,215,0,.4); }
.wb-rank-num.top2{ color:#c0c0c0; }
.wb-rank-num.top3{ color:#cd7f32; }
.wb-rank-avatar{
    width:34px;height:34px; border-radius:50%; display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:800; background:linear-gradient(135deg,#3a2a1a,#1a0a0a); color:#d4a843; border:1.5px solid rgba(180,140,60,.35); flex-shrink:0;
}
.wb-rank-info{ flex:1; min-width:0; }
.wb-rank-name{ font-size:13px; font-weight:700; color:#ddd; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wb-rank-dmg{ font-size:12px; color:#ff6644; font-weight:700; }
.wb-rank-times{ font-size:10px; color:#777; }

/* 世界BOSS战斗信息面板 */
.wb-info-panel{ padding:10px 15px; max-height:320px; overflow-y:auto; }
.wb-info-panel::-webkit-scrollbar{ width:4px; }
.wb-info-panel::-webkit-scrollbar-track{ background:rgba(0,0,0,.2); }
.wb-info-panel::-webkit-scrollbar-thumb{ background:rgba(180,120,50,.2); border-radius:2px; }
.wb-info-empty{ text-align:center; padding:30px 10px; color:#555; font-size:13px; }
.wb-log-item{
    display:block; padding:12px 14px; margin-bottom:8px;
    background:linear-gradient(135deg,rgba(20,12,6,.85),rgba(12,6,3,.92));
    border:1px solid rgba(80,40,15,.2); border-radius:10px;
}
.wb-log-item.kill{ border-color:rgba(255,180,50,.4); background:linear-gradient(135deg,rgba(40,25,8,.9),rgba(22,12,4,.95)); }
.wb-log-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.wb-log-time{ font-size:11px; color:#888; font-weight:600; letter-spacing:.3px; }
.wb-log-tag{ font-size:11px; font-weight:700; color:#d4a843; }

/* 战斗信息卡片主体 */
.wb-log-body-row{
    display:flex; align-items:flex-end; gap:0;
    padding-top:6px;
}
.wb-log-dmg{
    display:inline-flex; flex-direction:column; gap:2px;
    padding-right:16px; border-right:1px solid rgba(140,90,30,.2);
}
.wb-log-dmg-label{ font-size:10px; color:#777; text-transform:uppercase; letter-spacing:1px; }
.wb-log-dmg-val{ font-size:18px; font-weight:900; color:#ff5533; line-height:1.1; }

.wb-log-hp-info{
    display:inline-flex; flex-direction:column; gap:2px;
    padding-left:14px;
}
.wb-log-hp-label{ font-size:10px; color:#777; text-transform:uppercase; letter-spacing:1px; }
.wb-log-hp-val{ font-size:13px; color:#aaa; line-height:1.3; white-space:nowrap; }
.wb-log-hp-val b{ color:#ccc; font-weight:700; }
.wb-log-arrow{ color:#666; margin:0 3px; }

/* 世界BOSS战斗结果弹窗 */
.wb-result-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:9999;
    display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); animation:fadeIn .2s ease;
}
.wb-result-box{
    width:90%; max-width:380px; background:linear-gradient(180deg,#1a0a0a,#0d0505);
    border:2px solid rgba(200,50,50,.4); border-radius:16px; overflow:hidden; animation:resultSlideUp .3s ease;
}
@keyframes resultSlideUp{ from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }
.wb-result-header{ padding:16px; text-align:center; border-bottom:1px solid rgba(100,30,20,.3); }
.wb-result-icon{ font-size:48px; margin-bottom:8px; }
.wb-result-title{ font-size:20px; font-weight:900; }
.wb-result-title.kill{ color:#ffd700; text-shadow:0 0 20px rgba(255,215,0,.4); }
.wb-result-title.fight{ color:#ff8844; }
.wb-result-body{ padding:14px 16px; }
.wb-result-row{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(60,25,15,.15); font-size:13px; }
.wb-result-row:last-child{ border-bottom:none; }
.wb-result-label{ color:#999; }
.wb-result-value{ font-weight:800; color:#eee; }
.wb-result-value.dmg{ color:#ff6644; }
.wb-result-value.diamond{ color:#c44eff; }
.wb-result-value.spirit{ color:#ffd700; }
.wb-result-rewards{ margin-top:10px; padding:10px; background:rgba(255,215,0,.05); border:1px solid rgba(255,215,0,.15); border-radius:8px; }
.wb-result-rewards-title{ font-size:12px; font-weight:700; color:#d4a843; margin-bottom:8px; }
.wb-reward-item{ display:flex; align-items:center; gap:8px; padding:5px 0; font-size:12px; }
.wb-reward-icon{ font-size:18px; }
.wb-reward-text{ color:#ccc; }
.wb-reward-text strong{ color:#ffd700; }
.wb-result-footer{ padding:12px 16px 16px; }
.wb-result-close-btn{
    display:block; width:100%; padding:12px 0; font-size:14px; font-weight:800; color:#fff;
    background:linear-gradient(135deg,#aa0000,#660000); border:1px solid #cc3333; border-radius:8px;
    cursor:pointer; letter-spacing:2px; transition:all .2s;
}
.wb-result-close-btn:hover{ box-shadow:0 0 15px rgba(255,50,50,.4); }

/* ========== 世界BOSS VS对比布局 ========== */
.wb-vs-section{ display:flex; align-items:center; justify-content:center; gap:8px; padding:16px 14px 10px; background:linear-gradient(180deg,rgba(80,20,10,.3),transparent); border-bottom:1px solid rgba(100,30,20,.25); }
.wb-vs-player,.wb-vs-boss{ flex:1; min-width:0; }
.wb-vs-player{text-align:right;}
.wb-vs-boss{text-align:left;}
.wb-vs-name{ font-size:15px; font-weight:800; color:#eee; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wb-vs-name .wb-vs-level{ font-size:11px; color:#888; font-weight:400; margin-left:4px; }
.wb-vs-divider{ font-size:22px; font-weight:900; color:#ffd700; text-shadow:0 0 12px rgba(255,215,0,.5); flex-shrink:0; padding:0 2px; }
/* HP条 */
.wb-vs-hp-bar{ position:relative; height:22px; background:rgba(40,15,10,.9); border-radius:4px; overflow:hidden; margin-top:6px; border:1px solid rgba(60,30,20,.4); }
.wb-vs-hp-fill{ position:absolute;left:0;top:0;height:100%; width:var(--hp-pct,0%); transition:width .5s ease; }
.wb-vs-hp-red .wb-vs-hp-fill{ background:linear-gradient(90deg,#cc2222,#881111); }
.wb-vs-hp-orange .wb-vs-hp-fill{ background:linear-gradient(90deg,#cc6622,#884411); }
.wb-vs-hp-text{ position:relative;display:block;text-align:center;font-size:10px;color:#ddd;line-height:22px;font-weight:600;z-index:1;text-shadow:0 1px 2px #000; }
/* MP条 */
.wb-vs-mp-bar{ position:relative;height:16px;background:rgba(15,20,45,.9);border-radius:3px;overflow:hidden;margin-top:3px;border:1px solid rgba(30,50,90,.35); }
.wb-vs-mp-fill{ position:absolute;left:0;top:0;height:100%;width:100%;background:linear-gradient(90deg,#2255aa,#113366); }
.wb-vs-mp-text{ position:relative;display:block;text-align:center;font-size:9px;color:#aaa;line-height:16px;z-index:1; }
/* 战斗记录区 */
.wb-log-section{ padding:8px 14px; max-height:220px; overflow-y:auto; }
.wb-log-section::-webkit-scrollbar{ width:4px; }
.wb-log-section::-webkit-scrollbar-thumb{ background:rgba(200,50,50,.3); border-radius:2px; }
/* 结果框 */
.wb-result-summary{ margin:10px 14px; padding:14px; border-radius:10px; text-align:center; border:1px solid transparent; animation:resultSlideUp .3s ease; }
.wb-result-summary.win{ background:linear-gradient(180deg,rgba(120,70,0,.2),rgba(50,30,0,.15)); border-color:rgba(255,215,0,.25); }
.wb-result-summary.lose{ background:linear-gradient(180deg,rgba(80,20,20,.2),rgba(30,10,10,.15)); border-color:rgba(200,50,50,.2); }
.wb-result-icon-lg{ font-size:32px; margin-bottom:4px; }
.wb-result-summary .wb-result-title.kill{ color:#ffd700; font-size:18px; text-shadow:0 0 15px rgba(255,215,0,.4); }
.wb-result-summary .wb-result-title.fight{ color:#ff6644; font-size:18px; }
.wb-result-summary .wb-result-rewards{ margin-top:10px; background:rgba(255,215,0,.04); }

/* 世界BOSS挑战记录弹窗 */
.wb-log-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9999;
    display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); animation:fadeIn .25s ease;
}
.wb-log-box{
    width:92%; max-width:400px; max-height:80vh;
    background:linear-gradient(180deg,#1a0e08,#0d0604);
    border:2px solid rgba(180,120,50,.35); border-radius:16px; overflow:hidden;
    display:flex; flex-direction:column; animation:resultSlideUp .3s ease; box-shadow:0 8px 40px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,215,100,.06);
}
.wb-log-header{
    display:flex; justify-content:space-between; align-items:center; padding:14px 18px;
    border-bottom:1px solid rgba(140,90,30,.2); background:rgba(40,22,10,.5);
}
.wb-log-title{ font-size:17px; font-weight:900; color:#d4a843; letter-spacing:2px; }
.wb-log-close{
    width:28px; height:28px; line-height:28px; text-align:center; border-radius:50%;
    font-size:14px; color:#888; cursor:pointer; transition:all .2s;
    background:transparent; border:1px solid transparent;
}
.wb-log-close:hover{ color:#ff6644; border-color:rgba(255,102,68,.3); background:rgba(255,102,68,.1); }

.wb-log-body{
    flex:1; overflow-y:auto; padding:12px 15px; min-height:0;
    scrollbar-width:thin; scrollbar-color:rgba(180,120,50,.2) transparent;
}
.wb-log-body::-webkit-scrollbar{ width:4px; }
.wb-log-body::-webkit-scrollbar-thumb{ background:rgba(180,120,50,.25); border-radius:2px; }
.wb-log-loading{ text-align:center; padding:30px; color:#777; font-size:13px; }

.wb-log-empty-state{
    text-align:center; padding:36px 16px; color:#666; font-size:13px; line-height:1.8;
}

.wb-log-footer{ padding:12px 15px 15px; border-top:1px solid rgba(140,90,30,.15); background:rgba(20,10,5,.4); }
.wb-log-challenge-btn{
    display:block; width:100%; padding:11px 0; margin-top:8px; font-size:14px; font-weight:800; color:#fff;
    background:linear-gradient(135deg,#aa0000,#660000); border:2px solid #cc3333; border-radius:8px;
    cursor:pointer; letter-spacing:3px; transition:all .25s; position:relative; overflow:hidden;
    text-shadow:0 2px 4px rgba(0,0,0,.5);
}
.wb-log-challenge-btn::before{ content:''; position:absolute; top:0;left:-100%;width:100%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent); transition:left .5s; }
.wb-log-challenge-btn:hover{ background:linear-gradient(135deg,#cc1111,#880000); box-shadow:0 0 20px rgba(255,50,50,.4); transform:translateY(-1px); }
.wb-log-challenge-btn:hover::before{ left:100%; }
.wb-log-challenge-btn:active{ transform:scale(.97); }
.wb-log-challenge-btn[hidden]{ display:none; }

/* 分页控件 */
.wb-pager{
    display:flex; align-items:center; justify-content:center; gap:3px; padding:4px 0; flex-wrap:wrap;
}
.wb-page-btn,.wb-page-num{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:28px; height:28px; padding:0 6px; margin:1px;
    font-size:11px; font-weight:700; color:#aaa; background:rgba(255,255,255,.04);
    border:1px solid rgba(150,100,40,.15); border-radius:6px; cursor:pointer; transition:all .15s;
}
.wb-page-btn:hover:not(:disabled),.wb-page-num:hover:not(.active){
    color:#d4a843; border-color:rgba(212,168,67,.35); background:rgba(212,168,67,.08);
}
.wb-page-btn:disabled{ opacity:.3; cursor:default; }
.wb-page-num.active{
    color:#fff; background:linear-gradient(135deg,#c49a2a,#9a7618);
    border-color:rgba(200,160,42,.6); box-shadow:0 0 8px rgba(196,154,42,.2);
}
.wb-page-dot{ color:#555; font-size:12px; padding:0 2px; user-select:none; }
.wb-page-total{ font-size:10px; color:#555; margin-left:6px; white-space:nowrap; }

/* 战斗记录详情弹窗 */
.wb-detail-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:10000;
    display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); animation:fadeIn .25s ease;
}
.wb-detail-box{
    width:92%; max-width:420px; max-height:75vh;
    background:linear-gradient(180deg,#1a0e08,#0d0604);
    border:2px solid rgba(180,120,50,.35); border-radius:16px; overflow:hidden;
    display:flex; flex-direction:column; animation:resultSlideUp .3s ease; box-shadow:0 8px 40px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,215,100,.06);
}
.wb-detail-header{
    display:flex; justify-content:space-between; align-items:center; padding:13px 18px;
    border-bottom:1px solid rgba(140,90,30,.25); background:rgba(40,22,10,.5);
}
.wb-detail-title{ font-size:16px; font-weight:900; color:#d4a843; letter-spacing:2px; }
.wb-detail-title.kill{ color:#ffd700; text-shadow:0 0 16px rgba(255,215,0,.35); }
.wb-detail-close{
    width:28px; height:28px; line-height:28px; text-align:center; border-radius:50%;
    font-size:14px; color:#888; cursor:pointer; transition:all .2s;
    background:transparent; border:1px solid transparent;
}
.wb-detail-close:hover{ color:#ff6644; border-color:rgba(255,102,68,.3); background:rgba(255,102,68,.1); }
.wb-detail-body{
    flex:1; overflow-y:auto; padding:12px 15px; min-height:0; max-height:45vh;
    scrollbar-width:thin; scrollbar-color:rgba(180,120,50,.2) transparent;
}
.wb-detail-body::-webkit-scrollbar{ width:4px; }
.wb-detail-body::-webkit-scrollbar-thumb{ background:rgba(180,120,50,.25); border-radius:2px; }
.wb-detail-empty{ text-align:center; padding:30px; color:#555; font-size:12px; }
.wb-detail-row{
    padding:7px 10px; margin-bottom:4px; font-size:12px; line-height:1.65; color:#bbb;
    background:rgba(20,12,6,.5); border-radius:6px; border-left:3px solid rgba(200,140,40,.2);
}
.wb-detail-row:nth-child(even){ background:rgba(15,8,4,.6); }
.wb-detail-round{ margin-bottom:10px; }
.wb-detail-round-title{
    padding:5px 10px; margin-bottom:4px; font-size:13px; font-weight:700;
    color:#e8c060; background:linear-gradient(90deg,rgba(180,130,50,.15),transparent);
    border-left:3px solid rgba(212,168,67,.5); border-radius:4px;
}
.wb-detail-row.dmg{ color:#ff7777; border-left-color:rgba(255,100,80,.3); }
.wb-detail-row.dmg b{ color:#ff5555; }
.wb-detail-row.kill{ color:#ffd700; border-left-color:rgba(255,215,0,.4); }
.wb-detail-row.kill b{ color:#ffd700; }
.wb-detail-footer{ padding:10px 15px 14px; border-top:1px solid rgba(140,90,30,.12); background:rgba(20,10,5,.4); }

/* 挑战记录按钮（替换原标签） */
.wb-log-tag-btn{
    padding:2px 9px; font-size:10px; font-weight:800; color:#d4a843;
    background:linear-gradient(135deg,rgba(212,168,67,.12),rgba(180,130,40,.06));
    border:1px solid rgba(212,168,67,.3); border-radius:5px; cursor:pointer;
    letter-spacing:1px; transition:all .2s; white-space:nowrap;
}
.wb-log-tag-btn:hover{
    color:#fff; background:linear-gradient(135deg,rgba(212,168,67,.25),rgba(180,130,40,.15));
    border-color:rgba(212,168,67,.55); box-shadow:0 0 10px rgba(212,168,67,.15);
}

/* ============================================ */
/*  灵兽系统样式 */
/* ============================================ */

/* 宠物页面容器 */
.pet-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
}

/* 出战宠物展示区 */
.pet-equipped-area {
    background: linear-gradient(135deg, rgba(25,10,5,0.95), rgba(15,5,2,0.98));
    border: 2px solid rgba(200,150,60,0.35);
    border-radius: 14px;
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
}

.pet-equipped-area::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212,168,67,0.5), transparent);
}

.pet-equipped-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.pet-equipped-label {
    font-size: 13px;
    font-weight: 800;
    color: #d4a843;
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(212,168,67,0.3);
}

.pet-equipped-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pet-equipped-icon {
    width: 72px;
    height: 72px;
    background: radial-gradient(ellipse at center, rgba(30,15,8,0.8), transparent);
    border: 1px solid rgba(180,120,50,0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pet-equipped-icon-text {
    font-size: 40px;
    line-height: 1;
}

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

.pet-equipped-name {
    font-size: 17px;
    font-weight: 900;
    color: #ffe0a0;
    text-shadow: 0 0 6px rgba(255,200,100,0.2);
    margin-bottom: 4px;
}

.pet-equipped-stage {
    font-size: 11px;
    color: #999;
    margin-bottom: 6px;
}

.pet-equipped-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.pet-equipped-stat {
    font-size: 11px;
    color: #aaa;
}

.pet-equipped-stat span {
    color: #ddd;
    font-weight: 700;
}

.pet-equipped-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.pet-btn {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 800;
    border-radius: 6px;
    border: 1px solid rgba(200,160,60,0.35);
    background: linear-gradient(180deg, rgba(60,40,10,0.9), rgba(40,25,5,0.95));
    color: #d4a843;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.15s;
}

.pet-btn:hover {
    background: linear-gradient(180deg, rgba(80,50,15,0.95), rgba(55,32,8,0.98));
    box-shadow: 0 0 8px rgba(212,168,67,0.15);
}

.pet-btn.primary {
    color: #ffe0a0;
    border-color: rgba(255,180,60,0.5);
    background: linear-gradient(180deg, #4a2800, #3a1e00);
}

.pet-btn.primary:hover {
    background: linear-gradient(180deg, #5e3400, #482600);
    box-shadow: 0 0 12px rgba(255,180,60,0.2);
}

.pet-btn.danger {
    color: #ff7777;
    border-color: rgba(200,80,60,0.4);
    background: linear-gradient(180deg, rgba(80,20,10,0.9), rgba(50,12,5,0.95));
}

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

/* 宠物列表 */
.pet-list-title {
    font-size: 13px;
    font-weight: 800;
    color: #cc9944;
    letter-spacing: 2px;
    margin-bottom: 2px;
    padding: 0 4px;
}

.pet-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 宠物卡片 */
.pet-card {
    background: linear-gradient(135deg, rgba(20,8,5,0.9), rgba(12,4,2,0.95));
    border: 1px solid rgba(120,50,20,0.3);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.pet-card:hover {
    border-color: rgba(212,168,67,0.4);
    background: linear-gradient(135deg, rgba(25,10,6,0.92), rgba(15,5,3,0.97));
}

.pet-card.equipped {
    border-color: rgba(212,168,67,0.55);
    box-shadow: 0 0 12px rgba(212,168,67,0.1);
}

.pet-card.equipped::after {
    content: '出战中';
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 9px;
    font-weight: 800;
    color: #d4a843;
    background: rgba(212,168,67,0.15);
    border: 1px solid rgba(212,168,67,0.3);
    border-radius: 4px;
    padding: 1px 6px;
}

.pet-card-icon {
    width: 56px;
    height: 56px;
    background: radial-gradient(ellipse at center, rgba(25,12,6,0.7), transparent);
    border: 1px solid rgba(100,60,25,0.25);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pet-card-icon-text {
    font-size: 32px;
    line-height: 1;
}

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

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

.pet-card-name {
    font-size: 14px;
    font-weight: 800;
    color: #e0d0b0;
}

.pet-card-quality {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
}

.pet-card-stage {
    font-size: 10px;
    color: #888;
    margin-bottom: 4px;
}

.pet-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: 10px;
    color: #999;
}

.pet-card-stat {
    color: #aaa;
}

.pet-card-stat-val {
    color: #ddd;
    font-weight: 600;
}

.pet-card-level {
    text-align: right;
    flex-shrink: 0;
}

.pet-card-lv {
    font-size: 13px;
    font-weight: 900;
    color: #ffd700;
}

.pet-card-lv-label {
    font-size: 9px;
    color: #777;
}

/* 经验条 */
.pet-exp-bar-wrap {
    margin-top: 6px;
    height: 6px;
    background: rgba(0,0,0,0.4);
    border-radius: 3px;
    overflow: hidden;
}

.pet-exp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4a90d9, #6ab0ff);
    border-radius: 3px;
    transition: width 0.3s;
}

/* 宠物空状态 */
.pet-empty {
    text-align: center;
    padding: 40px 20px;
}

.pet-empty-icon {
    font-size: 56px;
    margin-bottom: 12px;
}

.pet-empty-text {
    font-size: 14px;
    color: #666;
}

.pet-empty-hint {
    font-size: 11px;
    color: #555;
    margin-top: 6px;
}

/* ========== 宠物进化弹窗 ========== */
.pet-evolve-modal {
    max-width: 380px;
    width: 90%;
}

.pet-evolve-body {
    padding: 16px;
}

/* 进化链条 */
.pet-evolve-chain {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
}

.pet-evolve-current,
.pet-evolve-target {
    text-align: center;
    padding: 8px;
    background: rgba(25,10,5,0.8);
    border: 1px solid rgba(100,50,20,0.3);
    border-radius: 10px;
    width: 90px;
}

.pet-evolve-current {
    border-color: rgba(200,100,50,0.5);
}

.pet-evolve-target {
    border-color: rgba(212,168,67,0.5);
    box-shadow: 0 0 10px rgba(212,168,67,0.1);
}

.pet-evolve-icon {
    font-size: 36px;
    line-height: 1;
}

.pet-evolve-name {
    font-size: 11px;
    font-weight: 800;
    color: #ddd;
    margin-top: 4px;
}

.pet-evolve-stage {
    font-size: 9px;
    color: #888;
}

.pet-evolve-arrow {
    font-size: 24px;
    color: #d4a843;
    flex-shrink: 0;
}

/* 进化信息 */
.pet-evolve-section {
    margin-bottom: 12px;
}

.pet-evolve-section-title {
    font-size: 12px;
    font-weight: 800;
    color: #cc9944;
    margin-bottom: 6px;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(200,150,60,0.15);
    padding-bottom: 4px;
}

.pet-evolve-stat-compare {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pet-evolve-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: rgba(5,2,2,0.4);
    border-radius: 4px;
    font-size: 11px;
}

.pet-evolve-stat-label {
    color: #888;
}

.pet-evolve-stat-val {
    font-weight: 700;
    color: #ddd;
}

.pet-evolve-stat-new {
    color: #4eff4e;
    font-weight: 700;
    margin-left: 6px;
}

/* 材料列表 */
.pet-evolve-materials {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pet-evolve-material {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(25,12,8,0.5);
    border: 1px solid rgba(100,50,20,0.2);
    border-radius: 6px;
}

.pet-evolve-material-name {
    font-size: 12px;
    color: #ddd;
    font-weight: 600;
}

.pet-evolve-material-count {
    font-size: 12px;
    font-weight: 800;
}

.pet-evolve-material-count.enough {
    color: #4eff4e;
}

.pet-evolve-material-count.lacking {
    color: #ff6666;
}

/* 成功率 */
.pet-evolve-rate {
    text-align: center;
    padding: 10px;
    background: rgba(20,10,5,0.6);
    border: 1px solid rgba(200,150,60,0.2);
    border-radius: 8px;
    margin-bottom: 12px;
}

.pet-evolve-rate-label {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}

.pet-evolve-rate-val {
    font-size: 24px;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255,215,0,0.3);
}

.pet-evolve-rate-bonus {
    font-size: 10px;
    color: #4eff4e;
    margin-top: 2px;
}

.pet-evolve-warning {
    font-size: 10px;
    color: #ff8866;
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(200,60,30,0.08);
    border: 1px solid rgba(200,60,30,0.2);
    border-radius: 4px;
    text-align: center;
}

/* 进化按钮 */
.pet-evolve-btn {
    width: 100%;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 900;
    color: #e8c878;
    background: linear-gradient(180deg, #4a2800, #3a1e00);
    border: 2px solid rgba(200,160,60,0.45);
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 3px;
    transition: all 0.2s;
}

.pet-evolve-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #5e3400, #482600);
    box-shadow: 0 0 16px rgba(212,168,67,0.25);
}

.pet-evolve-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* 进化结果弹窗 */
.pet-evolve-result {
    text-align: center;
    padding: 20px;
}

.pet-evolve-result-icon {
    font-size: 56px;
    margin-bottom: 10px;
}

.pet-evolve-result-title {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 6px;
}

.pet-evolve-result-title.success {
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255,215,0,0.3);
}

.pet-evolve-result-title.fail {
    color: #ff6666;
}

.pet-evolve-result-sub {
    font-size: 12px;
    color: #999;
    margin-bottom: 14px;
}

.pet-evolve-result-btn {
    padding: 8px 28px;
    font-size: 13px;
    font-weight: 800;
    color: #d4a843;
    background: linear-gradient(180deg, rgba(60,40,10,0.9), rgba(40,25,5,0.95));
    border: 1px solid rgba(200,160,60,0.35);
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.15s;
}

/* 灵兽培养按钮区 */
.pet-train-bar {
    display: flex;
    gap: 8px;
    padding: 8px 0;
}

.pet-train-bar .pet-btn {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 13px;
}

/* ========== 宠物副本系统 ========== */
.pet-dungeon-rooms {
    padding: 12px;
}
.pd-room-card {
    background: linear-gradient(135deg, rgba(30,25,15,0.95), rgba(40,30,20,0.9));
    border: 1px solid rgba(200,160,60,0.3);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}
.pd-room-card:hover {
    border-color: rgba(200,160,60,0.7);
    box-shadow: 0 0 12px rgba(200,160,60,0.15);
}
.pd-room-card.full {
    opacity: 0.5;
    cursor: not-allowed;
}
.pd-room-name {
    font-size: 16px;
    color: #d4a843;
    font-weight: bold;
    margin-bottom: 6px;
}
.pd-room-info {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #888;
}
.pd-room-full-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,48,48,0.2);
    color: #ff3030;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}
.pd-room-enter {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #d4a843;
    font-size: 13px;
}

/* 地图容器 */
.pd-map-wrapper {
    padding: 0;
}
.pd-map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(20,15,10,0.8);
    border-bottom: 1px solid rgba(200,160,60,0.2);
}
.pd-map-stats {
    padding: 8px 12px;
    font-size: 12px;
    color: #888;
    background: rgba(15,10,5,0.6);
    border-bottom: 1px solid rgba(200,160,60,0.1);
}
.pd-map-stats .pd-stat-num {
    color: #e8c547;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(232, 197, 71, 0.4);
    margin: 0 2px;
}

/* 小地图按钮 */
.pd-minimap-btn {
    position: absolute;
    right: 12px;
    top: 125px;
    padding: 5px 12px;
    font-size: 12px;
    background: rgba(30,25,15,0.9);
    border: 1px solid rgba(200,160,60,0.4);
    border-radius: 6px;
    color: #d4a843;
    cursor: pointer;
    z-index: 10;
    line-height: 1.4;
}

/* 小地图弹窗 */
.pd-minimap-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.pd-minimap-box {
    width: 40%;
    max-width: 460px;
    background: #1a1410;
    border: 2px solid rgba(200,160,60,0.5);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.pd-minimap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: rgba(30,25,15,0.9);
    border-bottom: 1px solid rgba(200,160,60,0.2);
    color: #e8c547;
    font-weight: bold;
}
.pd-minimap-close {
    cursor: pointer;
    font-size: 16px;
    color: #888;
}
.pd-minimap-body {
    padding: 0;
    overflow: auto;
}
.pd-minimap-row {
    display: flex;
    justify-content: center;
}
.pd-minimap-dot {
    flex: 1;
    min-width: 0;
    height: auto;
    aspect-ratio: 1;
    margin: 0;
    border-radius: 0;
    background: rgba(30, 25, 20, 0.8);
    border: 1px solid rgba(100, 90, 80, 0.2);
    box-sizing: border-box;
}
.pd-minimap-row::after {
    content: '';
    flex: 0 0 0;
}
.pd-minimap-me {
    background: #00d2ff;
    box-shadow: 0 0 6px #00d2ff, inset 0 0 6px rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,0.3);
    z-index: 2;
    border-radius: 10px
}
.pd-minimap-player {
    background: rgba(255, 80, 80, 0.9);
    border: 1px solid rgba(255, 80, 80, 0.5);
    border-radius: 10px
}
.pd-minimap-pet {
    background: rgba(255, 200, 0, 0.9);
    border: 1px solid rgba(255, 200, 0, 0.5);
    border-radius: 10px
}
.pd-minimap-legend {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 10px;
    font-size: 11px;
    color: #888;
    border-top: 1px solid rgba(200,160,60,0.1);
}
.pd-minimap-legend-dot {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
    width: 8px;
    height: 8px;
}

/* 地图滚动容器 - 显示7x7视野 */
.pd-map-scroll {
    width: 100%;
    max-width: 100%;
    height: 360px;
    overflow: hidden;
    background: #0a0806;
    border-bottom: 1px solid rgba(200,160,60,0.2);
}

/* 地图网格 - 自适应填满容器，7x7 */
.pd-map-grid {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.pd-map-row {
    display: flex;
    flex: 1;
    width: 100%;
}
.pd-cell {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 1px solid rgba(255,255,255,0.04);
    transition: all 0.1s;
    cursor: default;
    box-sizing: border-box;
}
.pd-cell-empty {
    background: rgba(20,18,14,0.6);
}
.pd-cell-me {
    background: rgba(0,150,255,0.25);
    border: 1px solid rgba(0,150,255,0.5);
    box-shadow: inset 0 0 6px rgba(0,150,255,0.3);
    z-index: 2;
    font-size: 18px;
}
.pd-cell-other {
    background: rgba(255,80,80,0.15);
    border: 1px solid rgba(255,80,80,0.3);
}
.pd-cell-pet {
    background: rgba(255,200,0,0.12);
    border: 1px solid rgba(255,200,0,0.2);
    cursor: pointer;
    font-size: 18px;
}
.pd-cell-pet:hover {
    background: rgba(255,200,0,0.25);
    border-color: rgba(255,200,0,0.5);
}

/* 玩家周围可点击移动的格子 */
.pd-cell-adjacent {
    cursor: pointer;
    border: 1px solid rgba(0,200,100,0.5);
    background: rgba(0,200,100,0.12);
    transition: all 0.1s;
}
.pd-cell-adjacent:hover {
    background: rgba(0,200,100,0.3);
    border-color: rgba(0,200,100,0.8);
    box-shadow: inset 0 0 8px rgba(0,200,100,0.3);
}

/* 方向控制 */
.pd-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px;
    background: rgba(15,10,5,0.5);
}
.pd-controls-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.pd-dir-btn {
    width: 56px;
    height: 42px;
    background: rgba(30,25,15,0.9);
    border: 1px solid rgba(200,160,60,0.3);
    border-radius: 6px;
    color: #d4a843;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pd-dir-btn:active {
    background: rgba(200,160,60,0.3);
    border-color: rgba(200,160,60,0.6);
}
.pd-dir-center {
    color: #666;
    font-size: 11px;
    width: 40px;
    text-align: center;
}
.pd-legend {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 8px;
    font-size: 11px;
    color: #666;
}

/* 战斗弹窗 */
.pd-battle-pet {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(20,15,10,0.6);
    border-radius: 8px;
    margin-bottom: 10px;
}
.pd-battle-pet-icon {
    font-size: 40px;
}
.pd-battle-pet-name {
    font-size: 18px;
    color: #d4a843;
    font-weight: bold;
}
.pd-battle-stats {
    margin-bottom: 10px;
}
.pd-battle-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 13px;
    color: #aaa;
}
.pd-battle-stat-row span:last-child {
    color: #d4a843;
}
.pd-battle-log {
    padding: 10px;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    font-size: 13px;
    color: #ccc;
    text-align: center;
    margin-bottom: 10px;
}
.pd-battle-capture {
    background: linear-gradient(135deg, rgba(255,200,0,0.1), rgba(255,140,0,0.1));
    border: 1px solid rgba(255,200,0,0.3);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    margin-bottom: 10px;
}
.pd-battle-capture-icon {
    font-size: 32px;
    margin-bottom: 6px;
}
.pd-battle-capture-text {
    font-size: 14px;
    color: #ffcc00;
}

/* ========== 宠物副本回合制战斗样式 ========== */
#pet-dungeon-battle-modal .modal {
    max-width: 420px;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    padding: 0;
    overflow: hidden;
}
#pet-dungeon-battle-modal .modal-header {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(139, 60, 30, 0.3);
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#pet-dungeon-battle-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    min-height: 0;
}
.pd-battle-scene {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
    margin-bottom: 10px;
    gap: 4px;
}
.pd-battle-side {
    flex: 1;
    text-align: center;
    position: relative;
}
.pd-battle-avatar {
    font-size: 36px;
    margin-bottom: 4px;
}
.pd-battle-name {
    font-size: 13px;
    color: #ccc;
    margin-bottom: 6px;
    font-weight: bold;
}
.pd-battle-vs {
    font-size: 20px;
    color: #d4a843;
    font-weight: bold;
    padding: 0 6px;
    flex-shrink: 0;
}
.pd-battle-hp-bar {
    position: relative;
    width: 100%;
    height: 16px;
    background: #333;
    border-radius: 8px;
    overflow: hidden;
}
.pd-battle-hp-fill {
    height: 100%;
    border-radius: 8px;
    transition: width 0.4s ease;
}
.pd-battle-hp-fill.player {
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
}
.pd-battle-hp-fill.pet {
    background: linear-gradient(90deg, #E53935, #FF7043);
}
.pd-battle-hp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    white-space: nowrap;
}
.pd-battle-dmg-display {
    position: absolute;
    top: -10px;
    right: 0;
    pointer-events: none;
}
.pd-float-dmg {
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: #ff6666;
    animation: pdFloatUp 0.8s ease-out forwards;
}
.pd-float-dmg.big {
    font-size: 18px;
    color: #ff3333;
}
@keyframes pdFloatUp {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-24px); }
}

/* 战斗日志 */
.pd-turn-log {
    max-height: 200px;
    overflow-y: auto;
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.8;
}
.pd-log-round {
    text-align: center;
    color: #888;
    font-size: 11px;
    margin: 6px 0;
    border-bottom: 1px dashed #444;
    padding-bottom: 2px;
}
.pd-log-player { color: #8BC34A; }
.pd-log-pet { color: #FF7043; }
.pd-log-system { color: #FFD54F; text-align: center; font-weight: bold; }
.pd-log-crit { font-weight: bold; }
.pd-log-skill { color: #E040FB; }
.pd-dmg-normal { color: #fff; font-weight: bold; }
.pd-dmg-high { color: #ff4444; font-weight: bold; font-size: 14px; }

/* 结算 */
.pd-battle-summary {
    margin-bottom: 10px;
}
.pd-summary-win, .pd-summary-lose {
    padding: 12px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 8px;
}
.pd-summary-win {
    background: rgba(76,175,80,0.15);
    border: 1px solid rgba(76,175,80,0.3);
}
.pd-summary-lose {
    background: rgba(244,67,54,0.15);
    border: 1px solid rgba(244,67,54,0.3);
}
.pd-summary-icon { font-size: 36px; margin-bottom: 6px; }
.pd-summary-text { font-size: 14px; color: #ddd; line-height: 1.6; }
.pd-summary-stats {
    margin-top: 10px;
    text-align: left;
}
.pd-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    font-size: 13px;
    color: #aaa;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pd-summary-row span:last-child {
    color: #d4a843;
    font-weight: bold;
}