/* =========================================
   ui-components.css - 问道仙途 核心 UI 组件库，主要是设置面板，聊天界面，结契，创建角色
   ========================================= */

/* --- 设置面板：万象盘引擎块 --- */
.engine-box {
    border: 1px solid var(--border-tea);
    padding: 12px 15px;
    border-radius: 8px;
}

/* 引擎块主题修饰类 (控制背景和左侧高亮边框) */
.engine-theme-green  { background: rgba(89, 139, 100, 0.04); border-left: 3px solid #598b64; }
.engine-theme-gold   { background: rgba(106, 93, 123, 0.04); border-left: 3px solid #e9c37c; }
.engine-theme-red    { background: rgba(158, 61, 63, 0.03);  border-left: 3px solid var(--accent-red); }
.engine-theme-blue   { background: rgba(74, 127, 165, 0.04); border-left: 3px solid var(--accent-blue); }
.engine-theme-gold2  { background: rgba(189, 160, 104, 0.04); border-left: 3px solid var(--accent-gold); }
.engine-theme-purple { background: rgba(92, 122, 107, 0.04); border-left: 3px solid #b3749a; }

/* 引擎块标题文本 */
.engine-title {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1px;
}

/* 标题颜色修饰类 */
.text-green  { color: #598b64; }
.text-gold   { color: #d3a157; }
.text-red    { color: var(--accent-red); }
.text-blue   { color: var(--accent-blue); }
.text-gold2  { color: var(--accent-gold); }
.text-purple { color: #74425f; }

/* 毛玻璃质感下拉框 */
.glass-select {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--border-tea);
    color: var(--ink-main);
}
/* --- 传音界面 (琉璃幻境风) --- */

/* 遮罩层 */
.sandbox-overlay {
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.4); 
    z-index: 3000; 
    justify-content: center; 
    align-items: center; 
    backdrop-filter: blur(5px); /* 加深背景的模糊度 */
}

/* 主窗口容器 */
.sandbox-window {
    background: rgba(255, 255, 255, 0.65); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4); /* 高光边缘 */
    width: 90%; 
    max-width: 600px; 
    height: 80vh; 
    border-radius: 16px; 
    display: flex; 
    flex-direction: column; 
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); 
    overflow: hidden; 
}

/* 顶部标题栏 */
.sandbox-header {
    padding: 20px; 
    background: transparent; 
    border-bottom: 1px solid rgba(0,0,0,0.08); 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

.sandbox-header-title {
    font-size: 16px; 
    font-weight: bold; 
    color: var(--ink-main, #333); 
    letter-spacing: 1px;
}

/* 结束交互按钮 */
.sandbox-exit-btn {
    background: rgba(0,0,0,0.05);
    color: var(--ink-main, #333);
    border: none;
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    box-shadow: none;
    transition: all 0.3s;
}

.sandbox-exit-btn:hover {
    background: rgba(0,0,0,0.1);
}

/* 聊天内容区域 */
.sandbox-chat-area {
    flex: 1; 
    padding: 20px; 
    overflow-y: auto; 
    background: transparent;
}

/* 底部输入区域 */
.sandbox-footer {
    padding: 15px 20px; 
    background: transparent; 
    border-top: 1px solid rgba(0,0,0,0.08); 
    display: flex; 
    gap: 10px; 
    position: relative;
}

/* 输入框包装器 */
.sandbox-input-wrapper {
    flex: 1; 
    display: flex; 
    position: relative;
}

.sandbox-input-field {
    flex: 1; 
    border: 1px solid rgba(255,255,255,0.8); 
    padding: 10px; 
    padding-right: 50px; 
    border-radius: 8px; 
    background: rgba(255, 255, 255, 0.5); 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    outline: none;
    transition: all 0.3s;
}

.sandbox-input-field:focus {
    background: rgba(255, 255, 255, 0.8);
}

/* 字数统计 */
.sandbox-input-counter {
    position: absolute; 
    right: 12px; 
    top: 50%; 
    transform: translateY(-50%); 
    font-size: 11px; 
    color: #666; 
    pointer-events: none;
}

/* 发送按钮 */
.sandbox-send-button {
    background: rgba(255, 255, 255, 0.6); 
    border: 1px solid rgba(255, 255, 255, 0.9); 
    color: var(--ink-main, #333); 
    padding: 0 20px; 
    border-radius: 8px; 
    cursor: pointer;
    transition: all 0.3s;
}

.sandbox-send-button:hover {
    background: rgba(255, 255, 255, 0.9); 
}
/* --- 结契界面 (Jieqi Modal) - 仙家红完整重构版 --- */

/* 结契遮罩层 (保持原有的高级模糊感) */
.jieqi-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 4000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

/* 结契窗口：宣纸古籍质感 */
.jieqi-window {
    max-width: 450px;
    width: 90%;
    background: #fdfaf5; /* 宣纸背景 */
    border: 2px solid #a63d40; /* 朱砂红边框 */
    border-radius: 6px;
    box-shadow: 0 0 40px rgba(166, 61, 64, 0.2), inset 0 0 20px rgba(212, 196, 168, 0.1);
    position: relative;
    overflow: hidden;
    padding: 25px;
    box-sizing: border-box;
}

/* 喜字背景装饰：半透明灵力水印，固定在右下角不遮挡文字 */
.jieqi-decoration-bg {
    position: absolute;
    bottom: -15px;
    right: -15px;
    font-size: 130px;
    opacity: 0.08; /* 极低不透明度 */
    color: #a63d40;
    pointer-events: none;
    user-select: none;
    font-family: 'STKaiti', '楷体', serif;
    z-index: 1;
}

/* 结契标题 */
.jieqi-header {
    position: relative;
    z-index: 2;
    text-align: center;
    border-bottom: 1px dashed rgba(166, 61, 64, 0.3);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.jieqi-title {
    color: #a63d40;
    letter-spacing: 6px;
    font-family: 'STKaiti', '楷体', serif;
    font-size: 24px;
    font-weight: bold;
}

/* 誓言输入框 (保留了你原版的聚焦动效) */
.jieqi-vow-textarea {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 130px;
    padding: 15px;
    border: 1px solid rgba(166, 61, 64, 0.3);
    border-radius: 8px;
    background: rgba(166, 61, 64, 0.03);
    color: var(--ink-main);
    font-size: 16px;
    line-height: 1.8;
    resize: none;
    outline: none;
    font-family: 'STKaiti', '楷体', serif;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.jieqi-vow-textarea:focus {
    border-color: #a63d40;
    background: rgba(166, 61, 64, 0.06);
    box-shadow: inset 0 0 10px rgba(166, 61, 64, 0.08);
}

/* 按钮组容器 */
.jieqi-btn-group {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    gap: 15px;
}

/* 随机誓词按钮 (保留了你原版的 hover 动效) */
.jieqi-btn-shuffle {
    flex: 1;
    background: #fdfaf5;
    border: 1px solid #a63d40;
    color: #a63d40;
    padding: 12px 0;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.jieqi-btn-shuffle:hover {
    background: rgba(166, 61, 64, 0.1);
}

/* 确认结契按钮 (保留了你原版的微弹跳和发光阴影) */
.jieqi-btn-submit {
    flex: 1.5;
    background: #a63d40;
    color: white;
    border: none;
    padding: 12px 0;
    border-radius: 6px;
    font-size: 15px;
    letter-spacing: 2px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(166, 61, 64, 0.3);
    cursor: pointer;
    transition: all 0.3s;
}

.jieqi-btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(166, 61, 64, 0.45);
}

/* 静默提示：落子无悔 (新加的元素) */
.jieqi-silent-hint {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    color: #999;
    letter-spacing: 1px;
    font-style: italic;
    opacity: 0.7;
    pointer-events: none;
}
/* --- 创角面板 (Character Creation) --- */

/* 顶部标题区 */
.creation-title-area {
    text-align: center;
    margin-bottom: 30px;
}

.creation-main-title {
    font-size: 2.2em;
    font-family: 'STKaiti', '楷体', serif;
    color: var(--ink-main);
    letter-spacing: 8px;
    text-shadow: 0 2px 10px rgba(189, 160, 104, 0.15);
}

.creation-sub-title {
    font-size: 12px;
    color: var(--ink-light);
    margin-top: 10px;
    margin-bottom: 18px;
    letter-spacing: 4px;
}

/* 随机投胎按钮 */
.btn-random-reincarnation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(189, 160, 104, 0.05), rgba(189, 160, 104, 0.15));
    border: 1px solid var(--accent-gold);
    color: var(--accent-gold);
    padding: 8px 24px;
    font-size: 13px;
    border-radius: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(189, 160, 104, 0.1);
    letter-spacing: 1px;
}

.btn-random-reincarnation:hover:not(:disabled) {
    background: var(--accent-gold);
    color: #fff;
}

/* 创角表单主容器 (毛玻璃效果) */
.creation-form-wrapper {
    background: rgba(255, 255, 255, 0.45);
    padding: 30px;
    border-radius: 16px;
    border: 1px solid rgba(189, 160, 104, 0.25);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* 响应式网格布局 */
.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.input-group-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 自定义执念文本域 */
.custom-pref-textarea {
    width: 100%;
    height: 46px;
    font-size: 13px;
    color: var(--ink-main);
    background: rgba(255, 255, 255, 0.5);
    border: 1px dashed var(--border-tea);
    border-radius: 6px;
    padding: 10px 12px;
    resize: vertical;
    outline: none;
    transition: all 0.3s ease;
    line-height: 1.5;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.01);
    box-sizing: border-box;
}

.custom-pref-textarea:focus {
    background: rgba(255, 255, 255, 0.8);
    border-color: var(--accent-gold);
}

/* 底部世界观设置区 */
.worldview-bottom-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    padding-top: 20px;
    border-top: 1px dashed rgba(189, 160, 104, 0.3);
}

.worldview-select-box {
    width: 100%;
    background: rgba(189, 160, 104, 0.05);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--accent-gold);
    color: var(--accent-gold);
    font-size: 13px;
    outline: none;
}

/* 自定义卷轴上传区 */
.custom-worldview-area {
    margin-top: -10px;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    border: 1px dashed var(--accent-gold);
}

.upload-box-gold {
    padding: 20px;
    background: transparent;
    border: 1px dashed rgba(189, 160, 104, 0.5);
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: background 0.3s;
}

.upload-box-gold:hover {
    background: rgba(189, 160, 104, 0.05);
}

/* 踏入红尘 终极提交按钮 */
.btn-submit-hero {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #a23a3c, #7a2a2c);
    border: 1px solid #6b2325;
    color: #f8f6f0;
    font-family: 'STKaiti', '楷体', serif;
    font-size: 20px;
    letter-spacing: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(158, 61, 63, 0.25);
}

.btn-submit-hero:hover:not(:disabled) {
    box-shadow: 0 8px 25px rgba(158, 61, 63, 0.45);
    transform: translateY(-2px);
}
/* --- 灵根测算区域专属适配 --- */
.linggen-container {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.linggen-result-box {
    flex: 1;
    background: rgba(255, 255, 255, 0.5);
    border: 1px dashed var(--border-tea);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--ink-light);
    display: flex;
    align-items: center;
    min-height: 42px;
    box-sizing: border-box;
    letter-spacing: 1px;
    /* 防止超长灵根文本撑爆容器 */
    word-break: break-all; 
    line-height: 1.4;
}

.btn-roll-linggen {
    white-space: nowrap;
    padding: 0 16px;
    background: var(--bg-paper);
    border: 1px solid var(--accent-gold);
    color: var(--accent-gold);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(189,160,104,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-roll-linggen:hover {
    background: var(--accent-gold);
    color: #fff;
}

/* 📱 手机端核心响应式代码 */
@media screen and (max-width: 600px) {
    .linggen-container {
        flex-direction: column; /* 手机端改为上下排列 */
        gap: 8px;
    }
    
    .linggen-result-box {
        justify-content: center; /* 手机端文本居中，看起来更和谐 */
        text-align: center;
        min-height: 50px; /* 稍微增加高度，防止拥挤 */
    }
    
    .btn-roll-linggen {
        width: 100%;
        padding: 12px 0; /* 增加手机端点击区域的高度 */
        font-size: 14px;
    }
}
/* =========================================
   修为特效：微型灵珠 & 按键生莲 (性能与视觉精修版)
   ========================================= */

/* --- 1. 命盘：微型灵珠 (增加 3D 琉璃质感) --- */
.spirit-pearl {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    /* 翠玉边框保留，但稍微减弱，让内部质感透出来 */
    border: 1px solid rgba(89, 139, 100, 0.8); 
    background: rgba(89, 139, 100, 0.1);
    position: relative;
    overflow: hidden;
    vertical-align: text-bottom; 
    margin-right: 6px;
    /* ✨ 核心优化：外发光 + 内部顶部的暗色内阴影，塑造立体凹槽感 */
    box-shadow: 0 0 6px rgba(89, 139, 100, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.15); 
}

/* ✨ 核心优化：注入灵魂的高光点（模拟圆润的光泽反射） */
.spirit-pearl::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 2px;
    width: 5px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6); /* 纯白高光 */
    transform: rotate(-30deg); /* 微微倾斜，符合自然光照 */
    pointer-events: none;
    z-index: 2; /* 确保高光永远在液体上面 */
}

/* 灵珠内部的水位（代表进度） */
.spirit-pearl-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* 颜色保持你的设定，原汁原味 */
    background: linear-gradient(to top, #598b64, #88b192);

    transition: height 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); 
    z-index: 1;
}

/* --- 2. 交互：按键生莲 (漂浮文字 - 移除卡顿，增强灵气) --- */
.floating-epiphany {
    position: fixed;
    color: var(--accent-green, #598b64);
    font-size: 14px;
    font-weight: bold;
    font-family: 'STKaiti', '楷体', serif;
    pointer-events: none;
    z-index: 9999;
    text-shadow: 0 0 4px rgba(255, 255, 255, 1), 0 1px 2px rgba(255, 255, 255, 0.8);
    animation: floatUpFade 1.6s forwards cubic-bezier(0.2, 0.8, 0.2, 1); 
}

@keyframes floatUpFade {
    0% { 
        opacity: 0; 
        transform: translateY(0) scale(0.8); 
    }
    15% { 
        opacity: 1; 
        transform: translateY(-8px) scale(1.1);
    }
    100% { 
        opacity: 0; 
        transform: translateY(-45px) scale(1.3); 
    }
}

/* --- 灵贴系统 (Spirit Chips) --- */
.spirit-chip-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.spirit-chip {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(189, 160, 104, 0.05); /* 淡淡的宣纸金 */
    border: 1px solid rgba(189, 160, 104, 0.2);
    color: var(--ink-light);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.spirit-chip:hover {
    background: var(--accent-gold);
    color: #fff !important;
    border-color: var(--accent-gold);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(189, 160, 104, 0.2);
}

/* 物品类：侧边幽蓝 */
.chip-type-item { border-left: 3px solid #4a7fa5; } 
/* 功法类：侧边绛红 */
.chip-type-skill { border-left: 3px solid #e04345; }

/* =========================================
   ✨ 优雅的灵力流转滚动条 (全局复用版)
   ========================================= */

/* 去掉了 .modal-content 前缀，现在全局生效 */
::-webkit-scrollbar {
    width: 5px;  /* 极致纤细 */
    height: 5px; /* 横向滚动条也保持纤细 */
}

/* 滚动条的滑轨 (背景) —— 设置为全透明，干净清爽 */
::-webkit-scrollbar-track {
    background: transparent; 
}

/* 滚动条的滑块 (游标) —— 默认状态为极淡的半透明金色/茶色 */
::-webkit-scrollbar-thumb {
    background: rgba(189, 160, 104, 0.25); 
    border-radius: 10px; /* 极致圆润的胶囊状 */
    transition: background 0.3s ease; /* 增加呼吸感过渡 */
}

/* 鼠标悬浮在滑块上时 —— 颜色微微加深，增强交互反馈 */
::-webkit-scrollbar-thumb:hover {
    background: rgba(189, 160, 104, 0.6); 
}
/* --- 五行斗法卡牌样式 --- */
.wx-card-slot { width: 50px; height: 70px; border: 2px dashed var(--border-tea); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 18pt; background: var(--bg-paper); }
.wx-card { width: 45px; height: 60px; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; border: 1px solid rgba(0,0,0,0.1); position: relative; }
.wx-card.used { opacity: 0.3; cursor: not-allowed; transform: none; }
.card-name { font-size: 14pt; font-weight: bold; }
.card-type { font-size: 7pt; margin-top: 2px; }

/* 五行配色 */
.wx-gold { background: #fdf5e6; color: #b8860b; border-color: #ffd700; }
.wx-wood { background: #f0fff0; color: #2e8b57; border-color: #32cd32; }
.wx-water { background: #f0f8ff; color: #1e90ff; border-color: #00bfff; }
.wx-fire { background: #fff5ee; color: #cd5c5c; border-color: #ff4500; }
.wx-earth { background: #f5f5dc; color: #8b4513; border-color: #d2b48c; }

/* --- 灵阵对弈（九宫格）专属特效样式 --- */
.lz-cell { background: #fffcf8; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 32px; cursor: pointer; border-radius: 4px; user-select: none; transition: all 0.2s ease; font-family: 'STKaiti', '楷体', serif; }
.lz-cell:hover { background: rgba(189,160,104,0.15); }
.lz-x { color: var(--accent-blue); font-weight: bold; text-shadow: 0 2px 6px rgba(74,127,165,0.3); }
.lz-o { color: var(--accent-red); font-weight: bold; text-shadow: 0 2px 6px rgba(224,67,69,0.3); }