/* ========== 日晕阵眼：天道自然流转 ========== */

/* 1. 确保欢迎页维持你原本的宣纸质感底色 */
#welcome-screen {
    background-color: var(--bg-paper) !important; /* 回归你定义的宣纸原色 */
    background-image: none !important; 
    position: relative;
    overflow: hidden;
}

/* 2. 太极容器：彻底解封，无框无底 */
#magic-effects-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    cursor: pointer;
    /* 保持原有的点击特效不被砍掉，确保 pointer-events 正常 */
    pointer-events: auto; 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 3. 日晕效果：垫在太极下方的灵力扩散 */
#magic-effects-container::before {
    content: '';
    position: absolute;
    /* 大小略大于太极，形成自然的日晕外圈 */
    width: 180px; 
    height: 180px;
    /* 核心：日晕渐变。从中心的温暖金辉向四周彻底透明扩散 */
    background: radial-gradient(
        circle, 
        rgba(189, 160, 104, 0.25) 0%,   /* 中心灵气点 */
        rgba(189, 160, 104, 0.1) 40%,   /* 中间晕染层 */
        transparent 75%                 /* 边缘消失在宣纸中 */
    );
    filter: blur(8px); /* 增加边缘朦胧感，模拟日晕 */
    z-index: -1;
    animation: sun-halo-pulse 6s infinite alternate ease-in-out;
}

/* 4. 日晕的呼吸动效 */
@keyframes sun-halo-pulse {
    0% { transform: scale(0.9); opacity: 0.5; }
    100% { transform: scale(1.1); opacity: 0.9; }
}

/* 5. 鼠标交互：轻微的悬浮感 */
#magic-effects-container:hover {
    transform: scale(1.05);
}

/* 保留你原来的所有点击特效样式（如 .click-particle 等） */
/* 请确保 index.html 中的太极点击 JS 函数没有被改动 */
        :root {
            --bg-paper: #f8f6f0;
            --ink-main: #333333;
            --ink-light: #666666;
            --ink-lighter: #999999;
            --accent-red: #9e3d3f;
            --border-tea: #e0dcd3;
            --panel-bg: rgba(248, 246, 240, 0.95);
            --text-light: #999999;
            --accent-green: #52c41a;
            --accent-gold: #bda068;
            --accent-blue: #4a7fa5;
            --border-color: #e0dcd3;
            --bg-pc-outer: #d1c7b7; /* 默认的仿古背景色 */
            --bg-pc-gradient: radial-gradient(circle at center, #e0d8c8 0%, #bcae96 100%);
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
            body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: var(--bg-paper); color: var(--ink-main); padding: 0; overflow: hidden;
            display: flex; justify-content: center; align-items: center; min-height: 100vh;
        }
        #welcome-screen {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            z-index: 500; background-color: var(--bg-paper); animation: fadeIn 1s ease;
        }
        .game-logo { font-family: "Noto Serif CJK SC", "Songti SC", serif; font-size: 3.5em; letter-spacing: 12px; color: var(--ink-main); margin-bottom: 20px; margin-left: 12px; }
        .game-subtitle { font-size: 1.1em; color: var(--ink-light); margin-bottom: 80px; letter-spacing: 6px; margin-left: 6px; }
        .welcome-buttons { display: flex; flex-direction: row; justify-content: center; gap: 30px; flex-wrap: wrap; }
        .welcome-btn {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            width: 160px; padding: 25px 15px; font-size: 1.2em; background: #ffffff;
            border: 1px solid var(--border-tea); border-radius: 8px; color: var(--ink-main);
            cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.03);
        }
        .welcome-btn:hover { transform: translateY(-3px); border-color: var(--accent-red); box-shadow: 0 8px 24px rgba(158, 61, 63, 0.08); }
.welcome-btn .btn-icon {
            display: inline-flex; align-items: center; justify-content: center;
            width: 46px; height: 46px; font-size: 24px; font-family: "STKaiti", "楷体", serif;
            color: var(--accent-red); border: 2px solid var(--accent-red); border-radius: 6px;
            margin-bottom: 15px; opacity: 0.85; transition: all 0.3s ease;
            transform: rotate(-5deg); font-weight: bold;
        }
        .welcome-btn:hover .btn-icon {
            opacity: 1; transform: scale(1.1) rotate(0deg);
            background: var(--accent-red); color: var(--bg-paper);
        }
        .welcome-btn .btn-subtitle { font-size: 0.65em; color: var(--ink-lighter); margin-top: 10px; letter-spacing: 2px; }
        #game-container { width: 100vw; height: 100vh; display: none; flex-direction: column; background: var(--bg-paper); position: fixed; top: 0; left: 0; }
        #top-bar {
            background: var(--panel-bg); padding: 10px 20px;
            display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
            border-bottom: 1px solid var(--border-tea); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1000;
        }
        .top-bar-left { display: flex; justify-content: flex-start; }
        .top-bar-right { display: flex; justify-content: flex-end; }
        .top-bar-center { display: flex; flex-direction: column; align-items: center; color: var(--ink-main); min-width: 150px; }
        #header-location { font-size: 16px; font-weight: 500; letter-spacing: 1px; }
        #header-turn { font-size: 12px; color: var(--ink-light); margin-top: 2px; }
        .icon-btn { width: 36px; height: 36px; background: transparent; border: none; color: var(--ink-light); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; border-radius: 6px; transition: all 0.2s ease; }
        .icon-btn:hover { background: rgba(0,0,0,0.05); color: var(--ink-main); }
        .more-menu { position: relative; }
        .more-dropdown { display: none; position: absolute; top: 45px; right: 0; background: #ffffff; border: 1px solid var(--border-tea); border-radius: 8px; min-width: 160px; z-index: 1000; box-shadow: 0 8px 24px rgba(0,0,0,0.08); overflow: hidden; }
        .more-dropdown.show { display: block; }
        .dropdown-item { padding: 12px 20px; cursor: pointer; color: var(--ink-main); border-bottom: 1px solid var(--bg-paper); font-size: 14px; }
        .dropdown-item:last-child { border-bottom: none; }
        .dropdown-item:hover { background: var(--bg-paper); color: var(--accent-red); }
        .section-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease; opacity: 0; padding: 0 20px; }
        .section-content.open { max-height: 400px; opacity: 1; padding: 15px 20px; overflow-y: auto; }
        .status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
        .status-item { background: var(--bg-paper); padding: 8px 10px; border-radius: 6px; }
        .status-label { font-size: 11px; color: var(--ink-light); margin-bottom: 3px; white-space: nowrap; }
        .status-value { font-size: 13px; font-weight: 500; color: var(--ink-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #stat-cultivation { color: var(--accent-red); }
        .inventory-box { background: var(--bg-paper); padding: 10px 12px; border-radius: 6px; font-size: 12px; margin-top: 5px; line-height: 1.5; }
        .character-card { background: var(--bg-paper); border-radius: 8px; padding: 15px; margin-bottom: 10px; }
        .character-name { font-weight: 500; color: var(--ink-main); font-size: 15px; margin-bottom: 8px; }
        .character-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-size: 13px; margin-top: 8px; color: var(--ink-light); }
        .character-progress { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-tea); font-size: 12px; color: var(--ink-light); }
        #story-area { flex: 1; padding: 30px max(6vw, calc(50vw - 400px)); overflow-y: auto; line-height: 1.9; font-size: 16px; letter-spacing: 0.5px; scroll-behavior: smooth; }
        #story-area::-webkit-scrollbar { width: 6px; }
        #story-area::-webkit-scrollbar-thumb { background-color: #d1ccc0; border-radius: 10px; }
        @keyframes fadeIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
        .fade-in-anim { animation: fadeIn 0.6s ease forwards; }
        .ai-message { margin-bottom: 30px; color: var(--ink-main); opacity: 0; clear: both; padding-top: 15px; }
        .user-message { margin-top: 15px; margin-bottom: 30px; text-align: right; color: var(--ink-light); font-size: 1.05em; opacity: 0; background: #ffffff; float: right; clear: both; padding: 10px 16px; border-radius: 16px 16px 4px 16px; border: 1px solid var(--border-tea); max-width: 85%; line-height: 1.6; }
        .interactive-form { display: flex; flex-direction: column; gap: 16px; margin-top: 15px; background: #ffffff; padding: 20px; border-radius: 8px; border: 1px solid var(--border-tea); }
        .form-row { display: flex; align-items: center; gap: 15px; }
        .form-row label { width: 80px; color: var(--ink-light); font-size: 14px; }
        input, select, textarea { padding: 10px 12px; border: 1px solid var(--border-tea); border-radius: 6px; background-color: var(--bg-paper); color: var(--ink-main); font-family: inherit; font-size: 14px; flex: 1; outline: none; transition: all 0.2s ease; }
        input:focus, select:focus, textarea:focus { border-color: var(--accent-red); background-color: #ffffff; }
        button { padding: 10px 24px; background: var(--bg-paper); color: var(--ink-main); border: 1px solid var(--border-tea); border-radius: 6px; cursor: pointer; font-size: 15px; transition: all 0.2s ease; align-self: flex-start; }
        button:hover { border-color: var(--accent-red); color: var(--accent-red); background: #ffffff; }
        button:disabled { opacity: 0.5; cursor: not-allowed; }
        .small-btn { padding: 6px 12px; font-size: 13px; margin: 0; }
        .choice-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; clear: both; }
        .choice-btn { padding: 14px 20px; background: #ffffff; color: var(--ink-main); border: 1px solid var(--border-tea); border-radius: 8px; text-align: left; width: 100%; font-size: 15px; box-shadow: 0 2px 6px rgba(0,0,0,0.02); }
        .choice-btn:hover { border-color: var(--accent-red); color: var(--accent-red); transform: translateX(3px); }
        .loading { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border-tea); border-top-color: var(--ink-main); border-radius: 50%; animation: spin 0.8s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .file-upload-area { border: 1px dashed var(--ink-lighter); padding: 20px; text-align: center; border-radius: 6px; background: var(--bg-paper); cursor: pointer; transition: all 0.2s ease; font-size: 14px; }
        .file-upload-area:hover { border-color: var(--accent-red); color: var(--accent-red); }
        .save-slot { background: var(--bg-paper); border: 1px solid var(--border-tea); border-radius: 8px; padding: 15px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s ease; }
        .save-slot:hover { border-color: var(--ink-light); background: #ffffff; }
        .save-slot.active { border: 1px solid var(--accent-red); background: #ffffff; }
        .save-slot.empty { opacity: 0.6; }
        .save-info { display: flex; justify-content: space-between; align-items: center; }
        .save-name { font-weight: 500; color: var(--ink-main); }
        .save-time { font-size: 12px; color: var(--ink-light); }
        .save-actions { margin-top: 10px; display: flex; gap: 8px; }
        .slider-container { display: flex; align-items: center; gap: 15px; }
       .slider { flex: 1; height: 4px; background: var(--border-tea); border-radius: 2px; outline: none; -webkit-appearance: none; appearance: none; border: none; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: var(--ink-main); cursor: pointer; border-radius: 50%; }
        .slider::-moz-range-thumb { width: 16px; height: 16px; background: var(--ink-main); cursor: pointer; border: none; border-radius: 50%; }
        .slider-value { min-width: 30px; text-align: center; color: var(--ink-main); font-size: 14px; }
        .status-indicator { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; }
        .status-success { background: #52c41a; }
        .status-error { background: #ff4d4f; }
        .status-warning { background: #faad14; }




        #input-area { position: fixed; bottom: 30px; left: 0; width: 280px; background: rgba(248, 246, 240, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border-tea); border-left: none; border-radius: 0 16px 16px 0; padding: 10px 14px 10px 20px; display: flex; align-items: flex-end; gap: 10px; z-index: 2000; box-shadow: 4px 4px 20px rgba(0,0,0,0.06); transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
        #input-area.active { transform: translateX(0); }
        #input-toggle { position: absolute; right: -36px; bottom: -1px; width: 36px; height: 42px; background: rgba(248, 246, 240, 0.95); border: 1px solid var(--border-tea); border-left: none; border-radius: 0 12px 12px 0; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 4px 2px 10px rgba(0,0,0,0.03); color: var(--ink-light); font-size: 15px; transition: all 0.3s ease; pointer-events: auto; }
        #input-toggle:hover { color: var(--accent-red); background: #ffffff; }
        #input-toggle::after { content: '💬'; }
        #input-area.active #input-toggle::after { content: '◀'; }
        #user-input { 
            border: none; background: transparent; flex: 1; font-size: 14px; padding: 0;
            color: var(--ink-main); outline: none; resize: none; overflow-y: auto; 
            height: 26px; min-height: 26px; max-height: 120px; line-height: 26px; display: block;
            transition: none; 
        }
        #user-input::placeholder { color: var(--ink-lighter); }
        #send-btn { border: none; background: transparent; color: var(--ink-light); padding: 0 5px; font-size: 14px; font-weight: 500; cursor: pointer; transition: color 0.3s ease; height: 26px; line-height: 26px; }
        #send-btn:hover { color: var(--accent-red); }
        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); }
        .modal-content { background: #ffffff; margin: 10vh auto; padding: 30px; border-radius: 12px; width: 90%; max-width: 450px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); border: none; }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--bg-paper); }
        .modal-title { color: var(--ink-main); font-size: 1.2em; font-weight: 500; }
        .close { color: var(--ink-lighter); font-size: 24px; cursor: pointer; }
        .close:hover { color: var(--ink-main); }
        .ai-message p { text-indent: 2em; margin-bottom: 1.2em; line-height: 1.9; text-align: justify; }
        .ai-message h1, .ai-message h2, .ai-message h3 { color: var(--ink-main); margin: 24px 0 16px 0; font-weight: 500; font-size: 1.1em; }
        .ai-message strong { color: var(--ink-main); font-weight: 600; }
        .ai-message em { color: var(--ink-light); font-style: normal; background: var(--bg-paper); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
        .ai-message blockquote { border-left: 3px solid var(--border-tea); background: var(--bg-paper); padding: 12px 16px; margin: 16px 0; border-radius: 0 6px 6px 0; color: var(--ink-light); font-size: 0.95em; }
        .ai-message table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
        .ai-message th, .ai-message td { border-bottom: 1px solid var(--border-tea); padding: 12px 10px; text-align: left; }
        .ai-message th { color: var(--ink-light); font-weight: 500; }
/* API面板美化(极简压缩版) */
.api-section-box{background:#fff;border:1px solid var(--border-tea);border-radius:8px;padding:16px;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,.02)}
.api-section-title{font-size:14px;font-weight:bold;margin-bottom:15px;border-bottom:1px dashed var(--border-tea);padding-bottom:8px;display:flex;align-items:center;color:var(--ink-main)}
.api-btn-outline{border:1px solid var(--border-tea);background:var(--bg-paper);color:var(--ink-main)}
.api-btn-danger{border:1px solid #ff4d4f;background:rgba(255,77,79,.05);color:#ff4d4f}
@media(max-width:768px){
.api-section-box{padding:12px;margin-bottom:12px}
.api-layout-grid .api-section-box:first-child>div{flex-wrap:wrap;gap:10px!important}
#api-profile-select{flex:0 0 100%!important;height:38px}
.api-btn-outline,.api-btn-danger{flex:1;text-align:center;padding:8px 0}
#apiModal .form-grid-3>div{flex-direction:row;justify-content:space-between;background:rgba(255,255,255,.5);padding:8px 10px;border-radius:6px;border:1px solid rgba(74,127,165,.1)}
#apiModal .form-grid-3 label{margin-bottom:0!important;width:auto!important;font-weight:500}
#apiModal .form-grid-3 select{width:60%;background:#fff}
#apiModal .modal-content>div[style*="margin-top: 25px"]{flex-direction:column;gap:12px!important;margin-top:20px!important}
#apiModal .modal-content>div[style*="margin-top: 25px"] button{width:100%;padding:14px 0;font-size:15px!important;border-radius:8px}
}
/* ========== 表单响应式网格法则 ========== */
        .form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
        .form-grid-2-uneven { display: grid; grid-template-columns: 2fr 1fr; gap: 15px; }
        .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

        /* ========== 手机端适配法则 (Mobile Responsive) 合并版 ========== */
        @media (max-width: 768px) {
            .form-grid-3, .form-grid-2-uneven, .form-grid-2 { grid-template-columns: 1fr !important; gap: 12px !important; }
            .status-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
            .status-item { padding: 8px; overflow: hidden; }
            .status-label { font-size: 11px; white-space: normal; line-height: 1.2; }
            .status-value { font-size: 12px; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; overflow: visible; text-overflow: clip; }
            .section-content.open { max-height: 60vh; overflow-y: auto; padding-bottom: 20px; } 
            .form-row { flex-direction: column; align-items: flex-start; gap: 8px; }
            .form-row label { width: 100%; margin-bottom: -4px; text-align: left; }
            input, select, textarea { width: 100%; font-size: 14px; }
            .modal-content { width: 95%; padding: 20px 15px; margin: 5vh auto; max-height: 85vh; overflow-y: auto; }
            .more-dropdown { z-index: 3000 !important; right: -10px; } 
            .modal { z-index: 4000 !important; }
            #story-area { padding: 20px 24px; font-size: 15px; }
        }

        /* ========== 新增：角色创建表单复用类 ========== */
        .creation-input { background: rgba(255,255,255,0.8); padding: 12px; border-radius: 8px; border: 1px solid var(--border-tea); font-size: 14px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.01); outline: none; width: 100%; }
        .creation-label { color: var(--ink-main); font-size: 12px; font-weight: bold; letter-spacing: 1px; }
        /* ========== 新增：状态条可视化增强 ========== */
        .bar-container { width: 100%; background: var(--border-tea); border-radius: 4px; height: 6px; margin-top: 4px; overflow: hidden; position: relative; }
        .bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
        .hp-fill { background: linear-gradient(90deg, #ff4d4f, #ff7875); box-shadow: inset 0 -1px 2px rgba(0,0,0,0.1); }
        .mp-fill { background: linear-gradient(90deg, #4a7fa5, #69c0ff); box-shadow: inset 0 -1px 2px rgba(0,0,0,0.1); }
        .hpmp-text { font-size: 11px; margin-bottom: 2px; display: flex; justify-content: space-between; font-weight: 500; }
        
        /* 濒死/重伤 红色呼吸灯警报 */
        @keyframes pulse-danger { 
            0% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.4); border-color: rgba(255, 77, 79, 0.5); background: rgba(255, 77, 79, 0.05); } 
            70% { box-shadow: 0 0 0 6px rgba(255, 77, 79, 0); border-color: transparent; background: var(--bg-paper); } 
            100% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0); border-color: transparent; background: var(--bg-paper); } 
        }
        .danger-state { animation: pulse-danger 1.5s infinite; border: 1px solid transparent; }
        /* 传音卷轴样式 */
        .transmission-record {
            background: linear-gradient(to right, transparent, rgba(189,160,104,0.03), transparent);
            position: relative;
            transition: all 0.5s ease;
        }
        .transmission-record::before, .transmission-record::after {
            content: "◈";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            color: var(--border-tea);
            font-size: 10px;
            opacity: 0.5;
        }
        .transmission-record::before { top: -6px; }
        .transmission-record::after { bottom: -6px; }
/* ========== PC端(网页端)专属适配法则 ========== */
        @media (min-width: 769px) {
            body {
                /* 桌面端替换为更深邃的仿古底色，衬托中央的游戏画卷 */
                background-color: #d1c7b7; 
                background-image: radial-gradient(circle at center, #e0d8c8 0%, #bcae96 100%);
            }
            
            #welcome-screen, #game-container {
                /* 取消全屏铺满，改为限制宽度的居中画卷 */
                position: relative !important; 
                width: 100% !important;
                max-width: 1100px !important; /* 画卷最大宽度 */
                height: 100vh !important;
                box-shadow: 0 0 60px rgba(0,0,0,0.1), 0 0 20px rgba(189,160,104,0.15);
                border-left: 1px solid var(--border-tea);
                border-right: 1px solid var(--border-tea);
                background-color: var(--bg-paper);
            }

            #input-area {
                /* 输入框锁定在画卷左侧边缘，不再贴着显示器死角 */
                position: absolute !important;
                bottom: 50px !important;
                width: 360px !important;
                box-shadow: 4px 4px 25px rgba(0,0,0,0.06) !important;
            }

            /* 拓宽阅读区域，让古风排版在电脑上更加舒展大气 */
            #story-area {
                padding: 40px 10vw !important; 
                font-size: 17px;
                line-height: 2.1;
            }

            /* 顶部选项栏间距拉开 */
            #top-bar {
                padding: 15px 50px;
            }

            /* PC 端弹窗比例调优 */
            .modal-content {
                max-width: 580px;
                padding: 35px 45px;
            }
            
            /* 命盘面板数据在 PC 端横向展开，不拥挤 */
            .status-grid {
                gap: 15px;
                padding: 15px 50px 5px 50px !important;
            }
            .inventory-box {
                margin: 0 50px 20px 50px !important;
            }
            #characters-list {
                padding: 15px 50px 20px 50px !important;
                display: grid;
                grid-template-columns: 1fr 1fr; /* 人物志改为双列并排 */
                gap: 15px;
            }
        }
        .btn-locked {
            filter: grayscale(1) opacity(0.6);
            cursor: not-allowed !important;
            position: relative;
            background: #555 !important; /* 灰暗色调 */
            color: #aaa !important;
        }

        .btn-tip {
            font-size: 10px;
            display: block;
            opacity: 0.8;
        }
/* ========== 幻境底色 (主题切换) V3.1 完美同步版 ========== */

/* 幽冥 (深渊玄铁 - 极高质感的深色模式) */
[data-theme="dark"] {
    --bg-pc-outer: #0b0c0d; 
    --bg-pc-gradient: none;
    --bg-paper: #1c1e21;
    --ink-main: #aeb5c0;
    --ink-light: #7b8390;
    --ink-lighter: #545b66;
    --border-tea: #2d3138;
    --panel-bg: rgba(28, 30, 33, 0.95);
    --accent-red: #b3595b;
    --accent-gold: #b08d55;
}

/* 皓月 (极简纯白 - 彻底回归纯净，与默认色区分) */
[data-theme="white"] {
    --bg-pc-outer: #f0f0f0; 
    --bg-pc-gradient: none;
    --bg-paper: #ffffff;
    --ink-main: #222222;
    --ink-light: #555555;
    --border-tea: #f0f0f0;
    --panel-bg: rgba(255, 255, 255, 0.95);
}

/* 竹韵 (凝灰护眼绿 - 莫兰迪低饱和绿，极致护眼) */
[data-theme="green"] {
    --bg-pc-outer: #ccd4c7; 
    --bg-pc-gradient: none;
    --bg-paper: #dce3d6;
    --ink-main: #344034;
    --ink-light: #5a6b5a;
    --border-tea: #c2cdbc;
    --panel-bg: rgba(220, 227, 214, 0.95);
}

/* 落花 (烟粉海棠 - 灰调烟粉，儒雅大方) */
[data-theme="pink"] {
    --bg-pc-outer: #e8dadd; 
    --bg-pc-gradient: none;
    --bg-paper: #f5e9ea;
    --ink-main: #543e41;
    --ink-light: #82666a;
    --border-tea: #e0ced0;
    --panel-bg: rgba(245, 233, 234, 0.95);
}

/* 秋水 (远山黛蓝 - 沉静的雾霾蓝，减少蓝光刺激) */
[data-theme="blue"] {
    --bg-pc-outer: #d3dae0; 
    --bg-pc-gradient: none;
    --bg-paper: #e6ebf0;
    --ink-main: #36424f;
    --ink-light: #607080;
    --border-tea: #ccd5df;
    --panel-bg: rgba(230, 235, 240, 0.95);
}
/* 🌟 打字机光标特效 */
.typing-cursor {
    display: inline-block;
    width: 6px;
    height: 15px;
    background-color: var(--accent-red);
    vertical-align: middle;
    margin-left: 4px;
    animation: cursor-blink 1s step-end infinite;
}
@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
/* ========== 手机端弹窗滑动提示 ========== */
.mobile-scroll-hint {
    display: none; /* PC端默认隐藏 */
}

@media (max-width: 768px) {
    .mobile-scroll-hint {
        display: block;
        position: sticky;
        bottom: -20px; /* 抵消弹窗的 bottom padding */
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 11px;
        color: var(--accent-gold); /* 淡淡的修仙金色 */
        /* 底部增加渐变遮罩，让文字看起来像悬浮在内容上方 */
        background: linear-gradient(transparent, rgba(255,252,248, 0.9) 45%, #fffcf8);
        padding: 30px 0 10px 0;
        margin-top: -10px;
        pointer-events: none; /* 关键：允许玩家隔着提示文字点击底下的按钮 */
        z-index: 100;
        letter-spacing: 2px;
        animation: hint-bounce 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    [data-theme="dark"] .mobile-scroll-hint {
        background: linear-gradient(transparent, rgba(28, 30, 33, 0.9) 45%, var(--bg-paper));
    }
}

@keyframes hint-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(-4px); opacity: 1; }
}
/* ========== 天道逆转：隐形按钮 ========== */
.stealth-btn-container {
    text-align: right;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed rgba(189, 160, 104, 0.06); /* ✨ 进一步弱化分割线 */
    opacity: 0; /* 电脑端默认完全隐形 */
    transition: opacity 0.4s ease;
}

/* 鼠标悬浮在 AI 消息区域时，幽灵按钮浮现 */
.ai-message:hover .stealth-btn-container {
    opacity: 1;
}

.stealth-btn {
    font-size: 11px;
    color: var(--ink-lighter);
    cursor: pointer;
    margin-left: 20px;
    letter-spacing: 1px;
    transition: color 0.3s ease;
    user-select: none;
}

.stealth-btn:hover {
    color: var(--accent-red);
}

/* 手机端无法 hover，保持幽灵般的半透明可见状态 */
@media (max-width: 768px) {
    .stealth-btn-container { opacity: 0.4; } 
}
/* ========== 仙途纪事 (更新公告) 悬梁木牌与抽屉 ========== */
.update-tag {
    position: absolute;
    top: 0;
    right: 45px; /* 避开角落，悬挂在偏右侧 */
    width: 36px;
    
    /* 改动 1：保留木质感，但颜色从深咖啡色调成了温润的浅檀木色 */
    background: linear-gradient(to bottom, #9c7a53, #755938); 
    
    /* 改动 2：文字颜色调亮一点点，配合浅色木牌 */
    color: #f8f6f0; 
    
    /* 改动 3：用 flex 强行把竖排文字完美居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    padding: 15px 0 20px 0;
    writing-mode: vertical-rl;
    font-family: "STKaiti", "楷体", serif;
    font-size: 14px;
    letter-spacing: 4px;
    cursor: pointer;
    border-radius: 0 0 4px 4px;
    
    /* 阴影稍微调淡一点点，适应浅色木牌 */
    box-shadow: 2px 4px 10px rgba(0,0,0,0.2);
    border: 1px solid #826242;
    border-top: none;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 502;
    transform-origin: top center;
}

.update-tag:hover {
    transform: rotate(-3deg) translateY(5px);
    color: #ffffff;
    box-shadow: 3px 6px 15px rgba(0,0,0,0.3);
}

/* 模拟悬挂的绳线 */
.update-tag::after {
    content: '';
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    width: 2px; height: 10px;
    background: #2d241e;
}

/* 灵气呼吸红点 */
.update-tag .pulse-dot {
    position: absolute;
    bottom: 6px; left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    background: #d9534f;
    border-radius: 50%;
    box-shadow: 0 0 6px #d9534f;
    animation: pulse-danger 2s infinite;
}

/* 抽屉面板 */
.update-drawer {
    position: fixed;
    top: 0; right: -360px;
    width: 320px; height: 100vh;
    background: var(--bg-paper);
    border-left: 2px solid var(--accent-gold);
    box-shadow: -5px 0 25px rgba(0,0,0,0.1);
    z-index: 505;
    transition: right 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    display: flex; flex-direction: column;
}
.update-drawer.open { right: 0; }
.update-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.3); backdrop-filter: blur(2px);
    z-index: 504; opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
.update-overlay.show { opacity: 1; pointer-events: auto; }
.drawer-header {
    padding: 25px 20px 15px;
    border-bottom: 1px dashed var(--border-tea);
    display: flex; justify-content: space-between; align-items: center;
}
.drawer-title { font-size: 18px; color: var(--accent-gold); font-weight: bold; letter-spacing: 2px; }
.drawer-close { font-size: 24px; color: var(--ink-light); cursor: pointer; transition: 0.3s; }
.drawer-close:hover { color: var(--accent-red); transform: rotate(90deg); }
.drawer-content { padding: 20px; overflow-y: auto; flex: 1; font-size: 13px; line-height: 1.8; color: var(--ink-main); }
.changelog-item { margin-bottom: 25px; }
.changelog-ver { display: inline-block; background: rgba(189,160,104,0.1); color: var(--accent-gold); padding: 2px 8px; border-radius: 4px; font-weight: bold; margin-bottom: 8px; border: 1px solid rgba(189,160,104,0.3); }
.changelog-date { font-size: 11px; color: var(--ink-lighter); margin-left: 8px; }
/* ========== 仙途纪事 (更新公告) 手机端自适应缩小 ========== */
@media (max-width: 768px) {
    .update-tag {
        width: 26px;             /* 木牌变窄 */
        font-size: 11px;         /* 字号调小 */
        padding: 10px 0 12px 0;  /* 上下边距缩短 */
        right: 15px;             /* 在手机上稍微靠右，防止挡住太极图案 */
        letter-spacing: 2px;     /* 字间距收紧 */
    }
    
    /* 缩小悬挂的绳线 */
    .update-tag::after {
        height: 6px; 
        top: -6px;
    }

    /* 缩小底部呼吸红点 */
    .update-tag .pulse-dot {
        width: 3px; 
        height: 3px;
        bottom: 4px;
        box-shadow: 0 0 4px #d9534f;
    }
}