/* ==========================================================================
   TIANCE: Great Yong World Engine - VISUAL CORE v31.4 [玄墨古卷·移动端终极版]
   Theme: 半透明深墨底 + 宣纸骨白字 + 移动端呼吸感边距重塑
   ========================================================================== */

/* ==========================================================================
   1. 📜 全局字体、背景与排版重置
   ========================================================================== */
@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-lite-webfont@1.1.0/style.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Ma+Shan+Zheng&display=swap');

.markdown-body {
    /* --- 1. 结构与容器边界 --- */
    box-sizing: border-box !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: visible !important;
    
    /* PC端边距 */
    padding: 30px !important; 
    margin: 15px 0 !important;

    /* --- 2. 字体与全局呼吸感 --- */
    font-family: "LXGW WenKai Lite", "Noto Serif SC", "Songti SC", "SimSun", serif !important;
    font-size: 16.5px !important;
    line-height: 1.85 !important;
    letter-spacing: 1.2px !important; /* 稍微再拉开一点字间距，更透气 */
    text-align: justify !important;
    text-justify: inter-ideograph !important; 

    /* 🌟🌟🌟 3. 核心护眼重塑：玄墨半透底 + 宣纸骨白字 🌟🌟🌟 */
    /* 使用带有极微弱暖调的深墨色，并加入 92% 的透明度，让网页的水墨背景能隐约透出来 */
    background-color: rgba(28, 26, 24, 0.92) !important; 
    /* 柔和的宣纸骨白，去除了贼亮的高光，长时间阅读极度舒适 */
    color: #d6cfc4 !important; 

    /* --- 4. 环境纹理：错金角花 (略微提亮，确保在深色底上清晰) --- */
    background-image: 
        linear-gradient(to right, rgba(197, 160, 101, 0.5) 2px, transparent 2px), linear-gradient(to bottom, rgba(197, 160, 101, 0.5) 2px, transparent 2px),
        linear-gradient(to left, rgba(197, 160, 101, 0.5) 2px, transparent 2px), linear-gradient(to bottom, rgba(197, 160, 101, 0.5) 2px, transparent 2px),
        linear-gradient(to right, rgba(197, 160, 101, 0.5) 2px, transparent 2px), linear-gradient(to top, rgba(197, 160, 101, 0.5) 2px, transparent 2px),
        linear-gradient(to left, rgba(197, 160, 101, 0.5) 2px, transparent 2px), linear-gradient(to top, rgba(197, 160, 101, 0.5) 2px, transparent 2px) !important;
    background-position: 
        10px 10px, 10px 10px, calc(100% - 10px) 10px, calc(100% - 10px) 10px, 
        10px calc(100% - 10px), 10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) calc(100% - 10px) !important;
    background-size: 16px 16px, 16px 16px, 16px 16px, 16px 16px, 16px 16px, 16px 16px, 16px 16px, 16px 16px !important;
    background-repeat: no-repeat !important;

    /* --- 5. 画框边框与柔和阴影 --- */
    border-radius: 8px !important;
    border: 1px solid rgba(197, 160, 101, 0.3) !important; /* 加粗一点点金边 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================================================
   2. 🧱 终极排版净化 (彻底解决缩进失效与标点断行)
   ========================================================================== */

/* 1. 彻底清空父级容器的乱七八糟缩进，防止继承污染 */
.markdown-body { text-indent: 0 !important; }
.markdown-body * { text-indent: 0 !important; } 

/* 2. 精准定位正文段落，强制应用 2em 首行缩进 */
/* 放宽选择器（去掉 >），防止平台偷偷嵌套 div/span 导致缩进失效 */
.markdown-body p, 
.markdown-body div.text-base, 
.markdown-body div:not([class]) {
    text-indent: 2em !important;
    margin: 0.85em 0 !important;
    line-height: 1.85 !important;
    
    /* 🌟 核心修复：恢复中文标点避头尾规则，解决孤字换行 */
    white-space: pre-wrap !important; 
    word-break: normal !important; 
    overflow-wrap: break-word !important; 
    text-justify: inter-ideograph !important; 

    /* 同步应用骨白护眼色 */
    color: #d6cfc4 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

/* 3. 针对平台把回车解析为 <br> 的终极黑魔法 */
/* 强制把 br 撑开成块级元素，强行切断上下文，产生类似段落的间距 */
.markdown-body p br, 
.markdown-body div:not([class]) br {
    display: block !important;
    content: "" !important;
    margin-bottom: 0.8em !important; 
}

/* 4. 豁免清单：这些元素绝对不能缩进！ */
.os-say, .os-key, strong, b, .os-tip,
.markdown-body h1, .markdown-body h2, .markdown-body h3, 
.markdown-body blockquote, .markdown-body img, 
.markdown-body pre, .markdown-body details, .markdown-body .os-stack, 
.markdown-body .os-banner, .os-tip b, .os-tip em, .tl-text {
    text-indent: 0 !important;
    text-shadow: none !important;
}

/* 5. 🛠️ 铲除平台偷塞的空段落与换行刺客 (终极缩进保护) */
.markdown-body p:empty, 
.markdown-body br:only-child { 
    display: none !important; 
    margin: 0 !important; 
    padding: 0 !important; 
}
/* 核心：如果段落开头有隐藏的 <br> 偷走了缩进，直接抹杀它！ */
.markdown-body p > br:first-child,
.markdown-body div > br:first-child {
    display: none !important;
}

/* 确保天机推演面板顶部不要有任何外边距撑开空间 */
details.os-oracle { 
    margin-top: 0 !important; 
    margin-bottom: 15px !important; 
}

/* ==========================================================================
   📱 移动端呼吸感补丁 (拯救贴边与丢失的边框) 
   请确保这段代码生效，它解决了截图里的核心痛点！
   ========================================================================== */
@media (max-width: 600px) {
    .markdown-body { 
        /* 强制让容器宽度缩小一点，不要顶着手机屏幕边缘 */
        width: calc(100% - 16px) !important; 
        margin: 10px 8px !important; 
        
        /* 加大内部的左右留白，让文字不要贴着金边 */
        padding: 24px 20px !important; 
    }
}

/* ==========================================================================
   3. 🖥️ 平台容器劫持清除 (将AI气泡彻底融入环境)
   ========================================================================== */
div#ai-chat-answer { overflow: visible !important; }
.chat-answer-container .relative.inline-block,
div#ai-chat-answer .chat-answer-container .bg-gray-100\/90,
div#ai-chat-answer .chat-answer-container .relative.inline-block {
    max-width: 100% !important; width: 100% !important; padding: 0 !important; 
    background: transparent !important; border: none !important; box-shadow: none !important;
}
.MuiAvatar-root, .rounded-full.shrink-0, .flex-shrink-0 > img.rounded-full { display: none !important; }
.flex.gap-4, .space-x-4 > :not([hidden]) ~ :not([hidden]) { gap: 0 !important; margin: 0 !important; }

/* 玩家发言气泡 (色调同步向黑曜石靠拢，辅以错金边框) */
.relative.inline-block.px-4.py-3.max-w-full.text-gray-900.bg-gray-100\/90 {
    background: linear-gradient(135deg, #1A1A1A 0%, #0F0F0F 100%) !important;
    border: 1px solid rgba(197, 160, 101, 0.4) !important; 
    color: #c5a065 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8) !important;
}

/* 剑痕分割线 */
.os-div, .markdown-body hr {
    height: 2px !important; border: none !important; margin: 20px 0 !important;
    background: radial-gradient(ellipse at center, rgba(197, 160, 101, 0.6) 0%, transparent 80%) !important;
    box-shadow: 0 0 5px rgba(197, 160, 101, 0.2) !important;
}

/* ==========================================================================
   4. 📱 移动端呼吸感补丁 (防止手机端四周留白过大)
   ========================================================================== */
@media (max-width: 600px) {
    .markdown-body { 
        padding: 18px 14px !important; 
    }
}

/* ==========================================================================
   2. 🏮 顶部导航栏 (流金溢彩·水墨墨竹版)
   ========================================================================== */
div.sticky.top-0.w-full, .sticky.w-full.top-0 {
    background: linear-gradient(90deg, #1a1408 0%, #3d2f14 25%, #5c461a 50%, #3d2f14 75%, #1a1408 100%) !important;
    border-bottom: 2px solid #c5a065 !important; 
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.9), 0 0 10px rgba(197, 160, 101, 0.4) !important;
    backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
    z-index: 10 !important; /* 压住正文，让出弹窗 */
}
.sticky.w-full.top-0 > div, .sticky.w-full.top-0 > header { position: relative !important; z-index: 10 !important; }

/* 远景墨竹 */
.sticky.w-full.top-0::before {
    content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 0 !important; pointer-events: none !important; clip-path: inset(0 0 0 0) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50'><g fill='%23000000' opacity='0.4'><path d='M30,50 Q31,30 29,10' fill='none' stroke='%23000000' stroke-width='1'/><path d='M29,25 Q40,15 50,20 Q40,22 29,26'/><path d='M29,15 Q15,10 10,20 Q20,18 29,16'/><path d='M110,50 Q108,30 111,5' fill='none' stroke='%23000000' stroke-width='1.5'/><path d='M110,30 Q125,20 135,25 Q120,28 110,31'/><path d='M170,50 Q172,25 169,0' fill='none' stroke='%23000000' stroke-width='1'/><path d='M170,20 Q180,10 190,15 Q180,18 170,21'/></g></svg>") !important;
    background-repeat: repeat-x !important; background-size: 200px 50px !important; background-position: bottom right !important;
    filter: blur(1.5px) !important; transform-origin: bottom center !important; animation: bamboo-sway-back 8s ease-in-out infinite alternate !important;
}
/* 近景墨竹 */
.sticky.w-full.top-0::after {
    content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 1 !important; pointer-events: none !important; clip-path: inset(0 0 0 0) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50'><g fill='%23050505'><path d='M50,50 Q48,25 51,0' fill='none' stroke='%23050505' stroke-width='2'/><path d='M50,35 Q65,25 75,30 Q60,33 50,37'/><path d='M50,20 Q35,10 25,18 Q40,22 50,22'/><path d='M140,50 Q142,20 139,0' fill='none' stroke='%23050505' stroke-width='2.5'/><path d='M140,40 Q155,30 165,35 Q150,38 140,42'/><path d='M140,25 Q125,15 115,22 Q130,26 140,27'/></g></svg>") !important;
    background-repeat: repeat-x !important; background-size: 280px 50px !important; background-position: bottom left !important;
    filter: drop-shadow(0 0 1px rgba(255,255,255,0.2)) !important; transform-origin: bottom center !important; animation: bamboo-sway-front 5s ease-in-out infinite alternate !important;
}
@keyframes bamboo-sway-back { 0% { transform: scale(0.9) skewX(-2deg); } 100% { transform: scale(0.9) skewX(2deg); } }
@keyframes bamboo-sway-front { 0% { transform: skewX(-4deg); } 100% { transform: skewX(4deg); } }

/* 导航栏内部组件 */
.sticky.w-full.top-0 div, .sticky.w-full.top-0 span, .sticky.w-full.top-0 button, .sticky.w-full.top-0 select { background-color: transparent !important; border-color: #5d4037 !important; color: #c5a065 !important; font-family: "KaiTi", "Noto Serif SC", serif !important; }
.sticky.w-full.top-0 div[class*="bg-"], .sticky.w-full.top-0 button, .sticky.w-full.top-0 select, .sticky.w-full.top-0 div[role="button"] { background: rgba(0, 0, 0, 0.7) !important; border: 1px solid #c5a065 !important; color: #ffd700 !important; border-radius: 4px !important; box-shadow: inset 0 0 5px rgba(0,0,0,0.8) !important; padding: 0 8px !important; transition: all 0.2s ease !important; }
.sticky.w-full.top-0 svg { color: #ffd700 !important; }
.sticky.w-full.top-0 svg:hover, .sticky.w-full.top-0 button:hover { color: #ff5252 !important; filter: drop-shadow(0 0 5px #ff5252) !important; }

/* ==========================================================================
   3. 🎋 UI 基础组件 (卷首、面板、标签)
   ========================================================================== */
.os-banner {
    position: relative !important; overflow: hidden !important; text-align: center !important;
    background: linear-gradient(180deg, rgba(30, 20, 15, 0.8) 0%, rgba(10, 5, 5, 0.9) 100%) !important;
    padding: 15px 0 !important; display: block !important;
}
.os-banner::before {
    content: "" !important; position: absolute !important; top: 2px !important; bottom: 2px !important; left: 0 !important; right: 0 !important;
    border-top: 1px dashed rgba(197, 160, 101, 0.4) !important; border-bottom: 1px dashed rgba(197, 160, 101, 0.4) !important; pointer-events: none !important;
}
.os-title { font-family: "Ma Shan Zheng", "KaiTi", serif !important; font-size: 26px !important; color: #c5a065 !important; letter-spacing: 4px !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important; margin-bottom: 8px !important; line-height: 1.4 !important; }
.os-time { font-size: 12px !important; font-family: "Songti SC", serif !important; color: #8d6e63 !important; text-transform: uppercase !important; display: flex !important; justify-content: center !important; gap: 10px !important; align-items: center !important; }
.os-time::before { content: "📅 " attr(data-date) "  ⏳ " attr(data-clock); color: #a1887f !important; }
.os-zone { color: #b71c1c !important; font-weight: bold !important; padding: 0 5px !important; border: 1px solid #b71c1c !important; border-radius: 3px !important; animation: pulse-red 2s infinite; }
@keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(183,28,28,0.4); } 70% { box-shadow: 0 0 0 6px rgba(183,28,28,0); } 100% { box-shadow: 0 0 0 0 rgba(183,28,28,0); } }

/* 竹简面板 */
.os-dr {
    background-color: #111 !important;
    background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.5) 2px, rgba(0,0,0,0.5) 3px), linear-gradient(180deg, rgba(25, 25, 25, 0.95), rgba(10, 10, 10, 0.98)) !important;
    border: 1px solid #3e2723 !important; border-radius: 2px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6), inset 0 0 10px rgba(0,0,0,0.8) !important;
    margin-top: 15px !important; overflow: visible !important;
}
.os-dr summary {
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.9) 0%, rgba(15, 15, 15, 0.95) 100%) !important;
    color: #c5a065 !important; font-family: "KaiTi", serif !important; font-size: 15px !important;
    border-bottom: 1px solid rgba(0,0,0,0.8) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 6px rgba(0,0,0,0.4) !important;
    padding: 10px 12px !important; display: flex !important; justify-content: space-between !important; align-items: center !important;
    list-style: none !important; cursor: pointer !important; transition: background 0.2s !important; position: relative !important; overflow: hidden !important; z-index: 1 !important;
}
.os-dr summary::-webkit-details-marker { display: none !important; }
.os-dr summary span:first-child { text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important; letter-spacing: 1px !important; }
.os-dr[data-id="P1"] summary::after { content:""; position:absolute; top:0; left:0; width:40%; height:100%; background: linear-gradient(90deg, rgba(197, 160, 101, 0.15), transparent); pointer-events:none; }
.os-dr.mission summary::after { content:""; position:absolute; top:0; left:0; width:40%; height:100%; background: linear-gradient(90deg, rgba(126, 87, 194, 0.15), transparent); pointer-events:none; }
.os-dr.social summary::after { content:""; position:absolute; top:0; left:0; width:40%; height:100%; background: linear-gradient(90deg, rgba(244, 143, 177, 0.15), transparent); pointer-events:none; }
.os-dr.enemy summary::after { content:""; position:absolute; top:0; left:0; width:40%; height:100%; background: linear-gradient(90deg, rgba(211, 47, 47, 0.15), transparent); pointer-events:none; }
.os-dr[data-id="P1"] { border-left: 3px solid #c5a065 !important; } 
.os-dr.mission { border-left: 3px solid #7e57c2 !important; } 
.os-dr.social { border-left: 3px solid #f48fb1 !important; } 
.os-dr.enemy { border-left: 3px solid #d32f2f !important; } 
.os-dr.log { border-left: 3px solid #9e9e9e !important; }
.os-body { padding: 15px !important; font-size: 13px !important; color: #bdbdbd !important; position: relative !important; overflow: visible !important; }

/* 标签系统 */
.os-tags { display: flex !important; gap: 5px !important; align-items: center !important; }
.tag { display: inline-block !important; padding: 1px 6px !important; border-radius: 2px !important; border: 1px solid rgba(255,255,255,0.1) !important; font-size: 10px !important; background: linear-gradient(180deg, rgba(40,40,40,0.9) 0%, rgba(20,20,20,0.9) 100%) !important; white-space: nowrap !important; line-height: 1.2 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.5) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important; }
.m-tag { display: inline-flex !important; align-items: center !important; padding: 2px 8px !important; border-radius: 4px !important; font-size: 11px !important; font-family: "KaiTi" !important; background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important; }
.m-tag.男 { color: #90caf9 !important; border-color: rgba(33, 150, 243, 0.3) !important; }
.m-tag.女 { color: #f48fb1 !important; border-color: rgba(233, 30, 99, 0.3) !important; }
.m-tag.beauty { color: #ff5252 !important; border-color: #ff5252 !important; background: rgba(255, 82, 82, 0.05) !important; }
.pill { padding: 3px 10px !important; border: 1px solid #5d4037 !important; border-radius: 12px !important; font-size: 11px !important; background: rgba(93, 64, 55, 0.15) !important; cursor: help !important; color: #d7ccc8 !important; transition: all 0.2s !important; display: inline-flex !important; align-items: center !important; position: relative !important; outline: none !important; -webkit-tap-highlight-color: transparent !important; }
.pill:hover { border-color: #c5a065 !important; background: rgba(197, 160, 101, 0.25) !important; color: #fff !important; }
.pill .lv { margin-left: 4px !important; font-size: 9px !important; color: #a1887f !important; }

/* ==========================================================================
   4. ⚔️ 角色交互系统 (属性、包裹、状态栏、Target)
   ========================================================================== */
.os-hero { display: flex !important; flex-direction: column !important; gap: 8px !important; margin-bottom: 12px !important; }
.os-hero::before { content: attr(data-name) " · " attr(data-age) "岁"; font-family: "Ma Shan Zheng", serif !important; font-size: 24px !important; color: #e0e0e0 !important; border-bottom: 1px dashed rgba(197, 160, 101, 0.3) !important; padding-bottom: 6px !important; text-shadow: 0 0 10px rgba(0,0,0,0.5) !important; }
.os-look { background: rgba(0, 0, 0, 0.3) !important; border-left: 3px solid #5d4037 !important; padding: 8px !important; border-radius: 0 4px 4px 0 !important; margin-top: 8px !important; display: flex !important; flex-direction: column !important; gap: 5px !important; }
.os-look::before { content: "🔹 容貌: " attr(data-face); color: #bcaaa4 !important; font-size: 12px !important; }
.os-look::after { content: "🔹 衣冠: " attr(data-cloth) "\A🔹 心性: " attr(data-soul); white-space: pre-wrap !important; color: #a1887f !important; font-size: 12px !important; line-height: 1.5 !important; }
.os-sub-h { font-size: 12px !important; color: #a1887f !important; font-family: "KaiTi", serif !important; font-weight: bold !important; letter-spacing: 2px !important; margin: 8px 0 6px 0 !important; padding: 2px 8px !important; width: 100% !important; box-sizing: border-box !important; border-left: 3px solid #c5a065 !important; background: linear-gradient(90deg, rgba(197, 160, 101, 0.1), transparent) !important; border-radius: 0 2px 2px 0 !important; }

/* Target 听雨密卷 */
.os-meta { display: flex !important; gap: 8px !important; margin-bottom: 10px !important; align-items: center !important; flex-wrap: wrap !important;}
.m-tag.threat { border-color: rgba(255, 82, 82, 0.5) !important; background: rgba(183, 28, 28, 0.15) !important; color: #ff5252 !important; font-weight: bold !important; box-shadow: 0 0 5px rgba(255, 82, 82, 0.2) !important; animation: threat-pulse 2s infinite alternate !important; }
@keyframes threat-pulse { 0% { box-shadow: 0 0 2px rgba(255, 82, 82, 0.1); } 100% { box-shadow: 0 0 8px rgba(255, 82, 82, 0.4); } }
.os-dossier { background: linear-gradient(135deg, rgba(30, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0.95) 100%) !important; border-left: 3px solid #b71c1c !important; border-right: 1px solid rgba(183, 28, 28, 0.2) !important; border-radius: 2px 6px 6px 2px !important; padding: 12px 15px !important; margin: 12px 0 !important; position: relative !important; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9), 0 4px 10px rgba(0,0,0,0.5) !important; color: #bdbdbd !important; }
.os-dossier::before { content: "影" !important; font-family: "Ma Shan Zheng", "KaiTi", serif !important; font-size: 80px !important; color: rgba(183, 28, 28, 0.06) !important; position: absolute !important; top: 50% !important; right: 5% !important; transform: translateY(-50%) !important; pointer-events: none !important; z-index: 0 !important; }
.os-dossier::after { content: "「 观相 」\A" attr(data-look) "\A\A「 洞察 」\A" attr(data-state) !important; display: block !important; white-space: pre-wrap !important; position: relative !important; z-index: 1 !important; font-size: 13px !important; line-height: 1.6 !important; text-shadow: 0 1px 2px rgba(0,0,0,0.9) !important; color: #e0e0e0 !important; }
.os-body .os-row[data-t="底牌"], .os-body .os-row[data-t="暴露"] { background: rgba(0, 0, 0, 0.3) !important; border: 1px dashed rgba(197, 160, 101, 0.4) !important; padding: 8px 12px !important; border-radius: 4px !important; display: flex !important; align-items: center !important; color: #c5a065 !important; font-family: "KaiTi", serif !important; }
.os-body .os-row[data-t="底牌"]::before, .os-body .os-row[data-t="暴露"]::before { background: #5d4037 !important; color: #d7ccc8 !important; padding: 2px 6px !important; border-radius: 2px !important; font-size: 11px !important; margin-right: 10px !important; border: 1px solid #3e2723 !important; box-shadow: 0 0 5px rgba(0,0,0,0.8) !important; }

/* 状态栏 Bars */
.os-bars { display: flex !important; flex-direction: column !important; gap: 8px !important; margin: 10px 0 15px 0 !important; }
.bar { height: 20px !important; background-color: #0a0a0a !important; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 2px, transparent 2px, transparent 4px) !important; border: 1px solid #3e2723 !important; border-radius: 3px !important; position: relative !important; overflow: hidden !important; box-shadow: inset 0 2px 6px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.05) !important; }
.bar::before { content: attr(data-l); position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 28px !important; text-align: center !important; font-family: "KaiTi", serif !important; font-size: 12px !important; font-weight: bold !important; line-height: 20px !important; z-index: 5 !important; color: #d7ccc8 !important; background: linear-gradient(135deg, #4e342e 0%, #261712 100%) !important; border-right: 2px solid #1a100c !important; box-shadow: 2px 0 5px rgba(0,0,0,0.8), inset 1px 1px 0 rgba(255,255,255,0.08) !important; text-shadow: 0 -1px 1px rgba(0,0,0,0.9) !important; }
.bar::after { content: ""; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; z-index: 1 !important; display: block !important; width: 0% !important; transition: width 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; border-radius: 0 2px 2px 0 !important; box-shadow: inset 0 2px 4px rgba(255,255,255,0.25), inset 0 -2px 4px rgba(0,0,0,0.4) !important; }
.bar[data-p="0"]::after, .bar[data-p="0%"]::after { width: 0% !important; } .bar[data-p="10"]::after, .bar[data-p="10%"]::after { width: 10% !important; } .bar[data-p="20"]::after, .bar[data-p="20%"]::after { width: 20% !important; } .bar[data-p="30"]::after, .bar[data-p="30%"]::after { width: 30% !important; } .bar[data-p="40"]::after, .bar[data-p="40%"]::after { width: 40% !important; } .bar[data-p="50"]::after, .bar[data-p="50%"]::after { width: 50% !important; } .bar[data-p="60"]::after, .bar[data-p="60%"]::after { width: 60% !important; } .bar[data-p="70"]::after, .bar[data-p="70%"]::after { width: 70% !important; } .bar[data-p="80"]::after, .bar[data-p="80%"]::after { width: 80% !important; } .bar[data-p="90"]::after, .bar[data-p="90%"]::after { width: 90% !important; } .bar[data-p="100"]::after, .bar[data-p="100%"]::after, .bar[data-p="满"]::after { width: 100% !important; }
.bar[data-p="5"]::after, .bar[data-p="5%"]::after { width: 5% !important; } .bar[data-p="15"]::after, .bar[data-p="15%"]::after { width: 15% !important; } .bar[data-p="25"]::after, .bar[data-p="25%"]::after { width: 25% !important; } .bar[data-p="35"]::after, .bar[data-p="35%"]::after { width: 35% !important; } .bar[data-p="45"]::after, .bar[data-p="45%"]::after { width: 45% !important; } .bar[data-p="55"]::after, .bar[data-p="55%"]::after { width: 55% !important; } .bar[data-p="65"]::after, .bar[data-p="65%"]::after { width: 65% !important; } .bar[data-p="75"]::after, .bar[data-p="75%"]::after { width: 75% !important; } .bar[data-p="85"]::after, .bar[data-p="85%"]::after { width: 85% !important; } .bar[data-p="95"]::after, .bar[data-p="95%"]::after { width: 95% !important; }
.bar.red::after { background: linear-gradient(90deg, #8b0000 0%, #ff1744 100%) !important; background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%), linear-gradient(90deg, #8b0000 0%, #ff1744 100%) !important; background-size: 200% 100%, 100% 100% !important; animation: bar-flow 2s linear infinite !important; }
.bar.blue::after { background: linear-gradient(90deg, #004d40 0%, #00e5ff 100%) !important; background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%), linear-gradient(90deg, #004d40 0%, #00e5ff 100%) !important; background-size: 200% 100%, 100% 100% !important; animation: bar-flow 2.5s linear infinite !important; }
.bar.gold::after { background: linear-gradient(90deg, #b26a00 0%, #ffc400 100%) !important; background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%), linear-gradient(90deg, #b26a00 0%, #ffc400 100%) !important; background-size: 200% 100%, 100% 100% !important; animation: bar-flow 1.5s linear infinite !important; }

@keyframes bar-flow {
    0% { background-position: 200% 0, 0 0; }
    100% { background-position: -200% 0, 0 0; }
}

/* 属性与装备网格 */
.os-panel { display: flex !important; gap: 8px !important; margin-bottom: 10px !important; flex-wrap: wrap !important; width: 100% !important; box-sizing: border-box !important; }
.os-attrs { flex: 1 1 120px !important; min-width: 120px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 5px !important; background: rgba(0, 0, 0, 0.2) !important; padding: 5px !important; border-radius: 4px !important; border: 1px solid #3e2723 !important; }
.attr { background: linear-gradient(180deg, rgba(30, 30, 30, 0.6) 0%, rgba(10, 10, 10, 0.8) 100%) !important; border: 1px solid #332723 !important; border-top: 1px solid rgba(197, 160, 101, 0.2) !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3) !important; border-radius: 3px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; height: 50px !important; position: relative !important; cursor: help !important; outline: none !important; -webkit-tap-highlight-color: transparent !important;}
.attr.hl { background: rgba(3, 169, 244, 0.08) !important; border-color: rgba(3, 169, 244, 0.3) !important; }
.attr::before { content: attr(data-l); font-size: 10px !important; color: #9e9e9e !important; margin-bottom: 2px !important; }
.attr::after { content: attr(data-v); font-family: "Georgia", serif !important; font-size: 16px !important; font-weight: bold !important; color: #fff !important; }
.os-eq-box { flex: 999 1 220px !important; display: grid !important; gap: 6px !important; padding: 6px !important; background: rgba(0, 0, 0, 0.2) !important; border: 1px solid #333 !important; box-sizing: border-box !important; width: 100% !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; overflow: visible !important; }
.os-eq-box .slot:nth-child(n+5) { display: none !important; }

/* 物品卡槽共用逻辑 */
.slot, .item {
    aspect-ratio: 1 / 1 !important; width: 100% !important; min-width: 0 !important; position: relative !important; overflow: visible !important;
    display: flex !important; align-items: center !important; justify-content: center !important; z-index: 1 !important;
    background: rgba(0, 0, 0, 0.4) !important; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(0,0,0,0.8) !important; border-radius: 3px !important;
    transition: all 0.2s ease !important; cursor: help !important; outline: none !important; -webkit-tap-highlight-color: transparent !important;
    word-break: break-all !important; white-space: pre-wrap !important; text-align: center !important; padding: 2px !important; font-size: 18px !important; line-height: 1.1 !important;
}
.slot:not(.empty), .item { border-color: rgba(197, 160, 101, 0.4) !important; }
.slot:hover, .item:hover { box-shadow: inset 0 0 15px rgba(197, 160, 101, 0.1), 0 2px 5px rgba(0,0,0,0.6) !important; border-color: #c5a065 !important; }
.slot.empty::before { content: attr(data-s); position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; font-size: 13px !important; color: #8d6e63 !important; font-family: "KaiTi" !important; white-space: nowrap !important; }

.os-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important; gap: 6px !important; padding: 10px !important; min-height: 80px !important; }
.item::after { content: attr(data-n); position: absolute !important; bottom: 1px !important; right: 2px !important; font-size: 10px !important; color: #fff !important; text-shadow: 1px 1px 1px #000 !important; background: rgba(0,0,0,0.5); padding: 0 3px; border-radius: 2px; }
.empty-msg { grid-column: 1 / -1 !important; width: 100% !important; text-align: center !important; color: #8d6e63 !important; padding: 30px 0 !important; font-family: "KaiTi" !important; font-style: italic !important; font-size: 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: url('https://www.transparenttextures.com/patterns/dark-wash-wall.png') !important; opacity: 0.6 !important; }

/* ==========================================================================
   ✨ 悬浮窗 (Tooltip) 核心逻辑：强制柔顺换行
   ========================================================================== */
.os-tip {
    visibility: hidden !important; opacity: 0 !important;
    position: absolute !important; bottom: 125% !important; left: 50% !important; transform: translateX(-50%) !important;
    
    /* 🌟 核心修改：fit-content 让它根据文字宽度自动收缩 */
    width: fit-content !important; 
    /* 给定一个舒适的最大宽度，超过则换行 */
    min-width: 50px !important;
    max-width: 260px !important; 
    
    white-space: pre-wrap !important; 
    word-break: break-word !important; 
    text-align: justify !important; 
    
    z-index: 999999 !important; pointer-events: none !important; transition: opacity 0.15s !important;
    background: rgba(18, 18, 18, 0.98) !important; 
    border: 1px solid rgba(197, 160, 101, 0.5) !important; border-top: 1px solid rgba(197, 160, 101, 0.9) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 15px rgba(197, 160, 101, 0.1) !important; border-radius: 6px !important;
    padding: 12px 14px !important; color: #bdbdbd !important; font-size: 13px !important; line-height: 1.6 !important; text-indent: 0 !important;
}
.os-tip b { display: block !important; color: #c5a065 !important; border-bottom: 1px dashed rgba(197, 160, 101, 0.8) !important; padding-bottom: 6px !important; margin-bottom: 6px !important; font-size: 13px !important; text-indent: 0 !important; position: relative !important;}
.os-tip em { font-style: normal !important; color: #9e9e9e !important; text-indent: 0 !important;}

/* 层级穿透触发 */
.attr:hover, .slot:hover, .item:hover, .pill:hover, .os-key:hover, .rel.npc:hover,
.attr:focus, .slot:focus, .item:focus, .pill:focus, .os-key:focus, .rel.npc:focus { z-index: 99999 !important; }

/* PC端 Hover 显示 */
@media (min-width: 601px) {
    .attr:hover .os-tip, .slot:hover .os-tip, .item:hover .os-tip, .pill:hover .os-tip, .os-key:hover .os-tip, .rel.npc:hover .os-tip { visibility: visible !important; opacity: 1 !important; }
}

/* 移动端 Focus 显示防闪烁逻辑 */
@media (max-width: 600px) {
    /* 抹杀长按Hover */
    .slot:hover:not(:focus) > .os-tip, .item:hover:not(:focus) > .os-tip, .attr:hover:not(:focus) > .os-tip, .pill:hover:not(:focus) > .os-tip, .os-key:hover:not(:focus) > .os-tip, .rel.npc:hover:not(:focus) > .os-tip { visibility: hidden !important; opacity: 0 !important; }
    
    /* 点击触发 */
    *:focus > .os-tip, .slot:focus > .os-tip, .item:focus > .os-tip, .pill:focus > .os-tip, .attr:focus > .os-tip, .os-key:focus > .os-tip, .rel.npc:focus > .os-tip { 
        visibility: visible !important; opacity: 1 !important; 
        width: fit-content !important; 
        max-width: 80vw !important; 
        white-space: pre-wrap !important; 
        word-break: break-word !important; 
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    /* 边缘防裁切 */
    .os-eq-box .slot:nth-child(odd):focus > .os-tip, 
    .os-grid .item:nth-child(odd):focus > .os-tip,
    .os-eq-box .slot:nth-child(2n+1):focus > .os-tip, 
    .os-grid .item:nth-child(4n+1):focus > .os-tip,
    .os-grid .item:nth-child(4n+2):focus > .os-tip { 
        left: 0 !important; transform: translateX(0) !important; 
    }
    
    .os-eq-box .slot:nth-child(even):focus > .os-tip, 
    .os-grid .item:nth-child(even):focus > .os-tip,
    .os-eq-box .slot:nth-child(2n):focus > .os-tip, 
    .os-grid .item:nth-child(4n):focus > .os-tip,
    .os-grid .item:nth-child(4n+3):focus > .os-tip { 
        left: auto !important; right: 0 !important; transform: translateX(0) !important; 
    }
}

/* ==========================================================================
   6. 💥 绝技卡与环境动画 (Ultimates & Environment)
   ========================================================================== */
.os-ult { margin: 25px 0 !important; border: 1px solid #3e2723 !important; background: linear-gradient(180deg, #111111 0%, #050505 100%) !important; border-radius: 8px !important; position: relative !important; overflow: hidden !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 15px 35px rgba(0,0,0,0.9), 0 0 20px rgba(183, 28, 28, 0.15) !important; animation: blood-breath 4s infinite ease-in-out !important; }
.os-ult::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 3px !important; background: linear-gradient(90deg, transparent, #ff5252, transparent) !important; box-shadow: 0 0 15px #ff5252 !important; }
.os-ult-h { background: radial-gradient(circle at 50% -20%, rgba(183, 28, 28, 0.3) 0%, transparent 70%) !important; padding: 25px 20px 15px 20px !important; border-bottom: 1px solid rgba(183, 28, 28, 0.2) !important; text-align: center !important; }
.os-ult-m { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; font-size: 12px !important; letter-spacing: 2px !important; margin-bottom: 12px !important; padding: 3px 15px !important; border: 1px solid rgba(197, 160, 101, 0.4) !important; border-radius: 20px !important; background: rgba(0,0,0,0.6) !important; box-shadow: inset 0 0 10px rgba(0,0,0,0.8) !important; }
.os-ult-t { font-family: "Ma Shan Zheng", serif !important; font-size: 36px !important; color: #ffffff !important; letter-spacing: 6px !important; text-shadow: 0 0 15px rgba(183, 28, 28, 0.9), 0 0 30px rgba(183, 28, 28, 0.5) !important; margin: 5px 0 10px 0 !important; }
.os-ult-c { font-family: "KaiTi", serif !important; font-size: 14px !important; color: #c5a065 !important; font-style: italic !important; opacity: 0.9 !important; text-shadow: 0 0 5px rgba(197, 160, 101, 0.3) !important; }
.os-ult-b { margin-top: 25px !important; padding-top: 20px !important; border-top: 1px solid rgba(197, 160, 101, 0.2) !important; position: relative; background: rgba(0,0,0,0.4) !important; padding: 15px 20px !important; }
.os-ult-b p { position: relative !important; padding-left: 24px !important; margin-bottom: 16px !important; font-size: 15px !important; line-height: 1.8 !important; color: rgba(255, 255, 255, 0.85) !important; letter-spacing: 1px !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important; font-family: "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif !important; }
.os-ult-b p b { font-size: 18px !important; margin-right: 12px !important; margin-top: -2px !important; text-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important; }
.os-ult-b p::before { content: "" !important; position: absolute !important; left: 4px !important; top: 10px !important; width: 6px !important; height: 6px !important; transform: rotate(45deg) !important; background: rgba(197, 160, 101, 1) !important; box-shadow: 0 0 8px rgba(197, 160, 101, 0.6), inset 0 0 3px rgba(255, 255, 255, 0.4) !important; animation: os-rune-pulse 3s infinite ease-in-out !important; }

@keyframes blood-breath { 0% { box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 10px rgba(183, 28, 28, 0.1); } 50% { box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 25px rgba(183, 28, 28, 0.5); } 100% { box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 10px rgba(183, 28, 28, 0.1); } }
@keyframes os-rune-pulse { 0%, 100% { opacity: 0.7; box-shadow: 0 0 5px rgba(197, 160, 101, 0.4); } 50% { opacity: 1; box-shadow: 0 0 12px rgba(197, 160, 101, 0.9), inset 0 0 5px rgba(255, 255, 255, 0.6); } }

/* 荒野芦苇荡动画 */
body::before { content: "" !important; position: fixed !important; top: 0 !important; left: -50vw !important; width: 200vw !important; height: 100vh !important; background: radial-gradient(ellipse at 30% 60%, rgba(50, 10, 10, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 70% 40%, rgba(20, 20, 20, 0.4) 0%, transparent 50%) !important; background-size: 100vw 100vh !important; z-index: -3 !important; pointer-events: none !important; animation: fog-drift 40s linear infinite alternate !important; }
.markdown-body::before { content: "" !important; position: fixed !important; bottom: -5vh !important; left: -10vw !important; right: -10vw !important; height: 40vh !important; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'><g fill='%231a100c'><path d='M40,100 Q45,50 35,0 Q50,40 45,100'/><path d='M42,70 Q60,50 65,60 Q50,70 44,80'/><ellipse cx='38' cy='20' rx='2.5' ry='12' transform='rotate(-15 38 20)'/><path d='M110,100 Q100,40 115,0 Q125,50 115,100'/><path d='M112,60 Q90,40 85,50 Q105,65 113,75'/><ellipse cx='111' cy='15' rx='2.5' ry='10' transform='rotate(20 111 15)'/><path d='M180,100 Q190,50 175,10 Q200,50 185,100'/><path d='M182,55 Q205,35 210,45 Q190,60 183,70'/><ellipse cx='178' cy='25' rx='2.5' ry='11' transform='rotate(-10 178 25)'/></g></svg>") !important; background-repeat: repeat-x !important; background-size: 300px 100% !important; background-position: bottom right !important; filter: blur(2px) drop-shadow(0 -5px 15px rgba(0,0,0,0.9)) !important; transform-origin: bottom center !important; animation: reed-sway-back 8s ease-in-out infinite alternate !important; z-index: -2 !important; pointer-events: none !important; }
.markdown-body::after { content: "" !important; position: fixed !important; bottom: -2vh !important; left: -5vw !important; right: -5vw !important; height: 30vh !important; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'><g fill='%23050505'><path d='M20,100 Q25,50 15,0 Q30,40 25,100'/><path d='M22,70 Q40,50 45,60 Q30,70 24,80'/><path d='M23,40 Q5,20 0,30 Q15,40 21,50'/><ellipse cx='18' cy='20' rx='3' ry='15' transform='rotate(-10 18 20)'/><path d='M80,100 Q70,40 85,0 Q95,50 85,100'/><path d='M82,60 Q60,40 55,50 Q75,65 83,75'/><ellipse cx='81' cy='15' rx='3' ry='12' transform='rotate(15 81 15)'/><path d='M150,100 Q160,50 145,10 Q170,50 155,100'/><path d='M152,55 Q175,35 180,45 Q160,60 153,70'/><ellipse cx='148' cy='25' rx='3' ry='14' transform='rotate(-8 148 25)'/></g></svg>") !important; background-repeat: repeat-x !important; background-size: 250px 100% !important; background-position: bottom left !important; transform-origin: bottom center !important; animation: reed-sway-front 5s ease-in-out infinite alternate !important; z-index: -1 !important; pointer-events: none !important; }
body::after { content: "" !important; position: fixed !important; bottom: -10px !important; left: 0 !important; width: 3px !important; height: 3px !important; background: transparent !important; border-radius: 50% !important; box-shadow: 15vw 80vh 2px #ff5252, 25vw 60vh 1px #c5a065, 35vw 90vh 2px #ff1744, 45vw 50vh 3px #c5a065, 55vw 70vh 1px #ff5252, 65vw 85vh 2px #ff8a80, 75vw 55vh 2px #c5a065, 85vw 95vh 1px #ff5252, 95vw 65vh 2px #ff1744 !important; animation: embers-float 12s linear infinite !important; z-index: 9999 !important; pointer-events: none !important; }
@keyframes fog-drift { 0% { transform: translateX(0); } 100% { transform: translateX(15vw); } }
@keyframes reed-sway-back { 0% { transform: skewX(-1deg) rotate(-0.5deg); } 100% { transform: skewX(2deg) rotate(1deg); } }
@keyframes reed-sway-front { 0% { transform: skewX(-3deg) rotate(-1.5deg); } 100% { transform: skewX(5deg) rotate(2.5deg); } }
@keyframes embers-float { 0% { transform: translateY(0) scale(1); opacity: 0; } 15% { opacity: 0.8; } 85% { opacity: 0.8; } 100% { transform: translateY(-100vh) scale(1.5); opacity: 0; } }

/* ==========================================================================
   🎬 加载动画 (双语高速轮换版 - 修复文字卡死)
   ========================================================================== */
.relative.inline-block .flex.items-center.justify-center.w-6.h-5 { display: block !important; width: 100% !important; max-width: none !important; height: 130px !important; position: relative !important; overflow: visible !important; margin: 10px auto !important; box-sizing: border-box !important; background: linear-gradient(135deg, #1e1e1e 0%, #0a0a0a 100%) !important; border: 1px solid rgba(197, 160, 101, 0.4) !important; border-radius: 8px !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(197, 160, 101, 0.1) !important; }
.relative.inline-block .flex.items-center.justify-center.w-6.h-5 > * { display: none !important; }

/* 旋转太极环 */
.relative.inline-block .flex.items-center.justify-center.w-6.h-5::before { content: "" !important; position: absolute !important; top: 30px !important; left: 50% !important; margin-left: -20px !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; border: 2px solid rgba(197, 160, 101, 0.1) !important; border-top: 4px solid #c5a065 !important; border-bottom: 4px solid #b71c1c !important; background-color: transparent !important; box-shadow: 0 0 15px rgba(197, 160, 101, 0.5), inset 0 0 10px rgba(183, 28, 28, 0.5) !important; animation: ring-spin 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite, ring-pulse 1.8s ease-out infinite !important; z-index: 10 !important; }

/* 🌟 文字轮播核心：绝对不能给 content 加 !important */
.relative.inline-block .flex.items-center.justify-center.w-6.h-5::after { 
    content: "武学招式推演中..."; /* 👈 修复点：去掉了 !important，解除了动画封印 */
    position: absolute !important; bottom: 20px !important; width: 100% !important; left: 0 !important; 
    text-align: center !important; color: #c5a065 !important; 
    font-family: "KaiTi", "Noto Serif SC", serif !important; 
    font-size: 12px !important; 
    letter-spacing: 1px !important; 
    white-space: nowrap !important; /* 防止长句子换行导致排版崩坏 */
    /* 1s呼吸(2s一明暗) + 4s一换词 */
    animation: text-breathe 1s infinite alternate, text-swap 4s infinite !important; 
}

@keyframes ring-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes ring-pulse { 0% { box-shadow: 0 0 0 0 rgba(197, 160, 101, 0.5); } 100% { box-shadow: 0 0 0 35px rgba(197, 160, 101, 0); } }

/* 呼吸灯：在最暗的时候降到 0，完美掩盖文字切换的瞬间 */
@keyframes text-breathe { 
    0% { opacity: 0; text-shadow: none; } 
    100% { opacity: 1; text-shadow: 0 0 12px rgba(197, 160, 101, 0.8); } 
}

/* 轮播文字：前2秒A，后2秒B */
@keyframes text-swap {
    0%, 49.9% { content: "武学招式推演中..."; }
    50%, 100% { content: "推荐使用 Gemini 开局后切换 DeepSeek V4 游玩"; }
}
/* ==========================================================================
   7. 📖 文本交互组件 (记忆、对话、日志、选项卡)
   ========================================================================== */
.os-stack { display: block !important; margin: 0 !important; padding: 0 !important; }
.os-mem-lbl { font-size: 12px !important; color: #c5a065 !important; font-weight: bold !important; margin-bottom: 6px !important; font-family: "KaiTi", serif !important; }
.os-ltm { font-size: 13px !important; color: #bcaaa4 !important; line-height: 1.6 !important; padding: 6px 10px !important; background: rgba(0, 0, 0, 0.3) !important; border-left: 2px solid #5d4037 !important; text-indent: 2em !important; }
.os-stm { list-style: none !important; padding: 0 !important; margin: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.05) !important; }
.os-stm li { display: flex !important; padding: 6px 0 !important; border-bottom: 1px dashed rgba(255, 255, 255, 0.1) !important; font-size: 13px !important; color: #e0e0e0 !important; line-height: 1.5 !important; text-indent: 0 !important; }
.os-stm li:last-child { border-bottom: none !important; }
.os-stm li::before { content: attr(data-t) !important; flex: 0 0 45px !important; color: #8d6e63 !important; font-size: 11px !important; font-family: "Arial", sans-serif !important; text-align: right !important; padding-right: 8px !important; margin-right: 8px !important; border-right: 1px solid rgba(197, 160, 101, 0.3) !important; white-space: nowrap !important; }

/* 交互台与选项障眼法 */
.os-hud { border: 1px solid #004d40 !important; margin-top: 15px !important; border-radius: 4px !important; background: rgba(0, 20, 15, 0.9) !important;}
.os-hud summary { color: #4db6ac !important; background: #00251a !important; }
.markdown-body pre { background: linear-gradient(135deg, #1e1e1e 0%, #0a0a0a 100%) !important; border: 1px solid #5d4037 !important; border-left: 4px solid #b71c1c !important; padding: 12px 15px !important; border-radius: 6px !important; position: relative !important; margin: 15px 0 !important; box-shadow: 0 4px 15px rgba(0,0,0,0.6) !important; transition: all 0.15s ease !important; cursor: pointer !important; overflow: hidden !important; white-space: pre-wrap !important; color: transparent !important; }
.markdown-body pre * { background: transparent !important; border: none !important; box-shadow: none !important; }
.markdown-body pre > div:first-child:not(code) { font-size: 0 !important; line-height: 0 !important; margin: 0 !important; padding: 0 !important; }
.markdown-body pre code, .markdown-body pre code * { color: #e0e0e0 !important; font-size: 14px !important; font-family: "KaiTi", "Noto Serif SC", serif !important; line-height: 1.6 !important; white-space: pre-wrap !important; word-break: break-all !important; display: block !important; pointer-events: none !important; text-shadow: none !important; }
.markdown-body pre button, .markdown-body pre [data-tooltip-id*="copy"], .markdown-body pre .copy-btn, .markdown-body pre svg { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 9999 !important; opacity: 0 !important; cursor: pointer !important; display: block !important; margin: 0 !important; padding: 0 !important; }
.markdown-body pre:hover { border-color: #c5a065 !important; box-shadow: 0 0 15px rgba(197, 160, 101, 0.2), inset 0 0 10px rgba(0,0,0,0.8) !important; transform: translateX(4px) !important; }
.markdown-body pre:active { transform: scale(0.98) !important; background: rgba(197, 160, 101, 0.2) !important; }

/* 天机推演日志 */
details.os-oracle { border: 1px solid #333 !important; background: #0f0f0f !important; margin-bottom: 10px !important; border-radius: 4px !important; }
details.os-oracle summary { background: #1a1a1a !important; color: #666 !important; font-family: monospace !important; font-size: 12px !important; padding: 5px 10px !important; border-bottom: 1px solid #222 !important; list-style: none !important; }
details.os-oracle summary::-webkit-details-marker { display: none !important; }
.os-style-trigger { float: right !important; background: rgba(76, 175, 80, 0.15) !important; color: #4caf50 !important; border: 1px solid #2e7d32 !important; padding: 0 6px !important; border-radius: 10px !important; font-size: 10px !important; line-height: 14px !important; margin-top: 1px !important; letter-spacing: 0.5px !important; }
details.os-oracle pre { color: #4caf50 !important; font-family: "Consolas", monospace !important; font-size: 11px !important; padding: 10px !important; background: #000 !important; overflow-x: auto !important; margin: 0 !important; }

/* 武学卡片与系统杂项 */
.os-art { display: flex !important; flex-direction: column !important; padding: 10px !important; margin-bottom: 8px !important; border-bottom: 1px dashed #444 !important; width: 100% !important; box-sizing: border-box !important; }
.os-art-h { display: flex !important; flex-wrap: wrap !important; align-items: center !important; position: relative !important; width: 100% !important; }
.os-art-h::before { content: attr(data-icon); display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; height: 26px !important; min-width: 26px !important; border: 1px solid #666; color: #c5a065; margin-right: 12px !important; font-size: 14px; background: rgba(0,0,0,0.4); font-family: "KaiTi"; flex-shrink: 0 !important; }
.os-art-h .t { flex: 1 1 auto !important; font-weight: bold !important; color: #e0e0e0 !important; font-size: 15px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; margin-right: 10px !important; }
.os-art-h .t .tag { font-weight: normal !important; font-size: 10px !important; transform: scale(0.9); opacity: 0.9; vertical-align: middle !important; margin-left: 4px !important;}
.os-art-h .m { font-size: 11px !important; color: #888 !important; white-space: nowrap !important; flex-shrink: 0 !important; }
.os-art-h .p { width: 100% !important; flex-basis: 100% !important; margin-top: 6px !important; font-size: 12px !important; color: #ffd700 !important; font-style: italic !important; opacity: 0.8 !important; display: block !important; padding-left: 38px !important; box-sizing: border-box !important; }
.os-pills { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 6px !important; padding-left: 38px !important; }
.os-foot { display: flex !important; justify-content: space-between !important; font-size: 11px !important; padding-top: 8px !important; border-top: 1px dashed #333 !important; margin-top: 5px !important; }
.os-foot::before { content: "📍 " attr(data-loc); color: #9e9e9e !important; }
.os-foot::after { content: "💰 " attr(data-money) "两  📢 " attr(data-rep); color: #ffd700 !important; }
.r-Tier0 { color: transparent !important; background-clip: text !important; -webkit-background-clip: text !important; background-image: linear-gradient(90deg, #ff00cc, #00ffff) !important; text-shadow: 0 0 5px rgba(255,255,255,0.5) !important; animation: shine-flow 2s infinite !important; font-weight: bold !important; }
.r-Tier1 { color: #ffd700 !important; border-color: #ff8f00 !important; } .r-Tier2 { color: #e040fb !important; border-color: #7b1fa2 !important; } .r-Tier3 { color: #40c4ff !important; border-color: #0288d1 !important; } .r-Tier4 { color: #69f0ae !important; border-color: #2e7d32 !important; } .r-Tier5 { color: #a1887f !important; border-color: #5d4037 !important; }
@keyframes shine-flow { to { background-position: 200% center; } }

/* ==========================================================================
   8. ⌨️ 底部输入与平台系统UI黑化 (MUI/Tailwind Override)
   ========================================================================== */
.p-\[5\.5px\].max-h-\[150px\].bg-white, .relative.flex.w-full.flex-col > .bg-white, .border-gray-200 { background-color: #0a0a0a !important; border-color: #3e2723 !important; box-shadow: none !important; }
#ai-chat-input { background: #141414 !important; border: 1px solid #5d4037 !important; color: #e0e0e0 !important; font-family: "KaiTi", "Noto Serif SC", serif !important; font-size: 16px !important; border-radius: 6px !important; }
#ai-chat-input::placeholder { color: #9e9e9e !important; opacity: 0.8 !important; font-style: italic !important; }
#ai-send-button { background: linear-gradient(135deg, #1e1e1e 0%, #0a0a0a 100%) !important; border: 1px solid #c5a065 !important; color: #c5a065 !important; border-radius: 6px !important; }
#ai-send-button:hover { background: #b71c1c !important; border-color: #ff5252 !important; color: #fff !important; box-shadow: 0 0 15px rgba(183, 28, 28, 0.8) !important; }
.absolute.right-0.bottom-0.bg-gradient-to-l, .from-white { background: transparent !important; }
.chat-container::before { display: none !important; }
::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
::-webkit-scrollbar-track { background: #0a0a0a !important; border-left: 1px solid #3e2723 !important; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #3e2723 0%, #8d6e63 100%) !important; border: 1px solid #c5a065 !important; border-radius: 3px !important; }

/* 按钮与分页器净化 */
.MuiButton-outlined, .bg-white button, button.border-gray-200, .flex.flex-wrap.gap-2 button, .gap-2 > button, .gap-2 > button.border { background: rgba(15, 15, 15, 0.9) !important; border: 1px solid rgba(197, 160, 101, 0.6) !important; color: #e0e0e0 !important; font-family: "KaiTi", "Noto Serif SC", serif !important; font-size: 13px !important; font-weight: bold !important; border-radius: 6px !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8) !important; transition: all 0.2s ease !important; }
.MuiButton-outlined:hover, .bg-white button:hover, .flex.flex-wrap.gap-2 button:hover, .gap-2 > button:hover, .gap-2 > button.border:hover { background: rgba(197, 160, 101, 0.15) !important; border-color: #ffd700 !important; color: #ffd700 !important; text-shadow: 0 0 8px rgba(197, 160, 101, 0.8) !important; }
[class*="text-blue-"] { color: #8d6e63 !important; font-family: "KaiTi", serif !important; }
[class*="text-orange-"] { color: #b71c1c !important; font-family: "KaiTi", serif !important; }
button.MuiButton-textPrimary, button.MuiButton-text, .flex.items-center.gap-4.text-sm.text-gray-500, .cursor-pointer { color: #9e9e9e !important; font-family: "KaiTi", serif !important; transition: all 0.2s !important; }
button.MuiButton-textPrimary:hover, button.MuiButton-text:hover, .cursor-pointer:hover { background-color: transparent !important; color: #c5a065 !important; text-shadow: 0 0 5px rgba(197, 160, 101, 0.4) !important; }
.MuiPaginationItem-root, button.MuiPaginationItem-root, button.bg-white.border, .bg-white.border-gray-300 { background-color: #0a0a0a !important; border: 1px solid #3e2723 !important; color: #a1887f !important; font-family: "KaiTi", serif !important; transition: all 0.2s ease !important; }
.MuiPaginationItem-root:hover, button.MuiPaginationItem-root:hover, button.bg-white.border:hover { background-color: rgba(197, 160, 101, 0.15) !important; border-color: #c5a065 !important; color: #c5a065 !important; }
.MuiPaginationItem-root.Mui-selected, button.MuiPaginationItem-root.Mui-selected, .border-blue-500, .text-blue-600, .bg-blue-50 { background-color: rgba(183, 28, 28, 0.15) !important; border: 1px solid #b71c1c !important; color: #ff5252 !important; box-shadow: 0 0 10px rgba(183, 28, 28, 0.5) !important;}
.MuiInputBase-input, input[type="number"], input.border-gray-300 { background-color: #141414 !important; border: 1px solid #5d4037 !important; color: #c5a065 !important; text-align: center !important; border-radius: 4px !important; }
.MuiInputBase-input:focus, input[type="number"]:focus { outline: none !important; border-color: #ffd700 !important; box-shadow: 0 0 8px rgba(197, 160, 101, 0.4) !important; }
.flex.items-center.gap-2.text-gray-600, .text-gray-600 { color: #a1887f !important; }

/* ==========================================================================
   9. 📱 移动端终极自适应 (Mobile First)
   ========================================================================== */
@media (max-width: 600px) {
    .markdown-body { padding: 18px 14px !important; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8), inset 0 0 0 1px #0a0a0a, inset 0 0 0 2px rgba(197, 160, 101, 0.1) !important; }
    .os-eq-box { grid-template-columns: repeat(2, 1fr) !important; }
    .os-attrs { flex: 1 1 100% !important; grid-template-columns: repeat(4, 1fr) !important; }
    .os-banner { margin: 5px -12px 15px -12px !important; }
    .os-art-h .t { font-size: 14px !important; }
}

/* ==========================================================================
   🧲 终极磁吸与天机匣融合补丁 (修复标签重叠与断层Bug)
   ========================================================================== */

/* 1. 剥夺【本相】底部属性，准备对接 */
.os-dr[data-id="P1"] {
    margin-bottom: 0 !important; 
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    z-index: 11 !important; /* 🌟 提升本相的层级，稳压下方一头 */
}
/* 确保本相在闭合状态下，底角也是直角，无缝拼接 */
.os-dr[data-id="P1"] summary {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* 2. 外壳底座：一件套错觉与精准拼接 */
.os-tianji-box {
    position: relative !important;
    padding-top: 65px !important; 
    
    background-color: #111 !important;
    background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.5) 2px, rgba(0,0,0,0.5) 3px), linear-gradient(180deg, rgba(20, 20, 20, 0.95), rgba(10, 10, 10, 0.98)) !important;
    
    border: 1px solid #3e2723 !important;
    border-top: none !important; 
    border-left: 3px solid #c5a065 !important;
    border-radius: 0 0 4px 4px !important;
    
    /* 🌟 核心修复：把 -16px 的暴力拉扯改成 -1px，刚好让边框完美融合，不再“吃”掉标题！ */
    margin: -1px 0 15px 0 !important; 
    
    box-shadow: 0 8px 20px rgba(0,0,0,0.8), inset 0 0 15px rgba(197, 160, 101, 0.05) !important;
    z-index: 10 !important;
}

/* 3. 确保 details 容器不捣乱 */
.tj-tab {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. 导航按钮基础样式 (改为4等分) */
.tj-tab > summary {
    position: absolute !important;
    top: 0 !important;
    height: 65px !important; 
    width: 25% !important; /* 🌟 核心修改：从 33.333% 改成 25%，平分四份 */
    
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 6px !important; 
    
    color: #8d6e63 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-bottom: 1px solid rgba(197, 160, 101, 0.15) !important;
    border-right: 1px solid rgba(197, 160, 101, 0.1) !important;
    box-sizing: border-box !important;
    
    cursor: pointer !important;
    list-style: none !important;
    user-select: none !important;
    transition: all 0.2s ease !important;
}

/* 🌟🌟🌟 5. 四分天下：重新排布 4 个标签的位置 🌟🌟🌟 */
.tj-tab.t-1 > summary { left: 0 !important; }
.tj-tab.t-2 > summary { left: 25% !important; }
.tj-tab.t-3 > summary { left: 50% !important; border-right: 1px solid rgba(197, 160, 101, 0.1) !important; } /* 恢复第三个的右边框 */
.tj-tab.t-4 > summary { left: 75% !important; border-right: none !important; } /* 第四个去掉右边框 */

/* 注入卷宗专属 SVG Mask (一个经典的古代公文卷宗图标) */
.ic-mission { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6m1.5 14H8v-2h7.5v2m0-4H8v-2h7.5v2m-3-5.5V3.5L18.5 9h-5.5Z'/%3E%3C/svg%3E") !important; }

/* 6. 图标与文字 */
.tj-tab > summary .ic {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background-color: #8d6e63 !important;
    -webkit-mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    transition: all 0.2s ease !important;
}
.tj-tab > summary .txt {
    font-family: "KaiTi", "Noto Serif SC", serif !important;
    font-size: 12px !important;
    font-weight: bold !important;
    letter-spacing: 2px !important;
    margin-top: 4px !important;
}

/* 注入武侠风 SVG Masks */
.ic-sword { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.92 19L5 21l-2-2 2-1.92L14.07 8H17V5.93L20.93 2h2v2.07L19 8v2.93h-2.07L8.85 19H6.92z'/%3E%3C/svg%3E") !important; }
.ic-jade { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c-3.31 0-6-2.69-6-6 0-2.5 1.5-4.66 3.65-5.59A3.99 3.99 0 0 1 8 7c0-2.21 1.79-4 4-4s4 1.79 4 4c0 1.64-1 3.05-2.45 3.61C15.93 11.69 17.5 13.92 17.5 16.5c0 3.31-2.69 6-6 6M12 5c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") !important; }
.ic-scroll { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 2a8 8 0 0 1 8 8 8 8 0 0 1-8 8 8 8 0 0 1-8-8 8 8 0 0 1 8-8m-2.5 3a2.5 2.5 0 0 0-2.5 2.5A2.5 2.5 0 0 0 9.5 12a2.5 2.5 0 0 0 2.5-2.5A2.5 2.5 0 0 0 9.5 7m5 5a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5A2.5 2.5 0 0 0 14.5 12Z'/%3E%3C/svg%3E") !important; }

/* 7. 选中态流光与金底线 */
.tj-tab[open] > summary {
    background: linear-gradient(180deg, rgba(197, 160, 101, 0.15) 0%, rgba(0,0,0,0) 100%) !important;
    color: #ffd700 !important;
    border-bottom: 2px solid #c5a065 !important;
    z-index: 20 !important;
}
.tj-tab[open] > summary .ic {
    background-color: #ffd700 !important;
    transform: scale(1.1) !important;
    filter: drop-shadow(0 0 4px rgba(197, 160, 101, 0.6)) !important;
}

/* 8. 展开内容区的过渡动画 (注意闭合括号) */
.tj-body {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 15px !important;
    background: transparent !important;
    animation: tj-reveal 0.2s ease-out forwards !important;
    transform-origin: top center !important;
}
@keyframes tj-reveal {
    0% { opacity: 0; transform: translateY(-5px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   🚨 排序补丁：强制锁定 UI 堆栈的视觉从上到下顺序 (终极版)
   ========================================================================== */
details.os-oracle { order: 1 !important; }    
.os-banner { order: 2 !important; }           
.markdown-body > * { order: 3; }              
.os-dr[data-id="P1"] { order: 4 !important; } 
.os-tianji-box { order: 5 !important; }       
.os-dr.enemy { order: 6 !important; }         
.os-dr.mission { order: 7 !important; }       
.os-dr.log { order: 8 !important; }           
details.os-hud { order: 9 !important; }
/* ==========================================================================
   🎨 沉底面板层 (Target / Mission / Log / HUD) 视觉与间距统合补丁
   ========================================================================== */

/* 1. 统一间距：让底部的面板紧密堆叠，消除松散感 */
.os-dr.enemy, 
.os-dr.mission, 
.os-dr.log {
    margin-top: 8px !important; /* 🌟 核心：从 15px 缩小到 8px，紧密咬合 */
    margin-bottom: 0 !important;
    
    /* 统一材质：与顶部的本相/天机匣完全一致的竹简底纹 */
    background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.5) 2px, rgba(0,0,0,0.5) 3px), linear-gradient(180deg, rgba(20, 20, 20, 0.95), rgba(10, 10, 10, 0.98)) !important;
    border: 1px solid #3e2723 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6), inset 0 0 10px rgba(0,0,0,0.8) !important;
}

/* 2. 统一标题栏材质：更深邃，去除了原来的廉价感 */
.os-dr.enemy summary, 
.os-dr.mission summary, 
.os-dr.log summary {
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.8) 0%, rgba(10, 10, 10, 0.9) 100%) !important;
    border-bottom: 1px solid rgba(197, 160, 101, 0.15) !important; /* 极暗的金线分割 */
}

/* 3. 颜色降噪与高级化 (干掉违和的紫色和灰色，换成武侠材质色) */
.os-dr.enemy { border-left: 3px solid #b71c1c !important; }   /* 听雨密卷：保持暗血红 (杀气) */
.os-dr.mission { border-left: 3px solid #8d6e63 !important; } /* 卷宗任务：青铜/枯木色 (历史感) */
.os-dr.log { border-left: 3px solid #546e7a !important; }     /* 天机密卷：冷铁色 (客观记录) */

/* 4. 彻底重做【决断】操作台 (干掉违和的绿色！换成终极指挥台风格) */
details.os-hud { 
    border: 1px solid #3e2723 !important; 
    border-left: 4px solid #c5a065 !important; /* 错金主色调贯穿到底 */
    margin-top: 12px !important; /* 和上方稍微拉开一点点，表示这是操作区 */
    border-radius: 4px !important; 
    
    /* 极黑的底座 */
    background: linear-gradient(180deg, #111 0%, #050505 100%) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.8), inset 0 0 15px rgba(197, 160, 101, 0.05) !important;
}

/* 决断台标题栏：流光错金 */
details.os-hud summary { 
    color: #ffd700 !important; 
    background: linear-gradient(90deg, rgba(197, 160, 101, 0.15) 0%, transparent 80%) !important; 
    border-bottom: 1px dashed rgba(197, 160, 101, 0.3) !important;
    text-shadow: 0 0 5px rgba(197, 160, 101, 0.5) !important;
    padding: 12px 15px !important;
}

/* 决断台右侧的 CMD 提示小标签同步变色 */
details.os-hud summary .tag.blink {
    background: rgba(197, 160, 101, 0.2) !important;
    border: 1px solid rgba(197, 160, 101, 0.6) !important;
    color: #fff !important;
    text-shadow: none !important;
}
/* ==========================================================================
   🎯 卷宗 (任务) & 羁绊 (社交) 专属UI重铸补丁 (找回丢失的代码)
   ========================================================================== */

/* ==================== 1. 📜 卷宗任务卡片 (.os-q) ==================== */
.os-q { 
    padding: 10px 12px !important; 
    margin-bottom: 10px !important; 
    /* 暗黑玉牌底色，带微弱内发光 */
    background: linear-gradient(90deg, rgba(20,20,20,0.8), rgba(10,10,10,0.9)) !important; 
    border: 1px solid rgba(255,255,255,0.05) !important; 
    border-left-width: 3px !important; /* 左侧警戒线 */
    border-radius: 2px 6px 6px 2px !important;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3) !important;
    color: #bdbdbd !important;
    line-height: 1.5 !important;
}
/* 主线与支线颜色区分 */
.os-q.main { border-left-color: #ffb74d !important; } /* 主线：明金/橙色 */
.os-q.side { border-left-color: #80cbc4 !important; } /* 支线：幽碧/青色 */

/* 任务标题栏 */
.os-q .t { 
    font-weight: bold !important; 
    color: #e0e0e0 !important; 
    font-size: 14px !important; 
    display: flex !important; 
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 6px !important; 
    border-bottom: 1px dashed rgba(255,255,255,0.1) !important;
    padding-bottom: 4px !important;
}
/* 任务奖励/提示标签 */
.os-q .r { 
    color: #ffd700 !important; 
    font-size: 11px !important; 
    background: rgba(255,215,0,0.08) !important; 
    padding: 2px 6px !important; 
    border-radius: 2px !important;
    border: 1px solid rgba(255,215,0,0.2) !important;
    font-family: "KaiTi", serif !important;
}

/* ==================== 2. 🤝 羁绊与势力网络 (.rel) ==================== */

/* 势力条目 (.rel.fac) - 类似情报名录的虚线框 */
.rel.fac { 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important;
    padding: 6px 10px !important; 
    margin-bottom: 6px !important; 
    background: rgba(0,0,0,0.4) !important; 
    border: 1px dashed rgba(197, 160, 101, 0.3) !important; 
    font-size: 13px !important; 
    color: #bcaaa4 !important; 
    border-radius: 4px !important;
}

/* NPC 结交胶囊 (.rel.npc) - 玉石质感铭牌 */
.rel.npc { 
    display: inline-flex !important; 
    align-items: center !important; 
    border: 1px solid #5d4037 !important; 
    border-radius: 20px !important; 
    padding: 3px 10px 3px 4px !important; /* 左侧留出头像空间 */
    margin: 0 6px 6px 0 !important; 
    background: linear-gradient(135deg, rgba(30,30,30,0.8), rgba(10,10,10,0.9)) !important; 
    color: #dcdcdc !important; 
    font-size: 12px !important; 
    cursor: help !important; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
    transition: all 0.2s ease !important;
}
/* NPC铭牌悬停发光 */
.rel.npc:hover { 
    border-color: #c5a065 !important; 
    background: rgba(197, 160, 101, 0.15) !important; 
    transform: translateY(-1px) !important;
    color: #fff !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.8), 0 0 8px rgba(197, 160, 101, 0.2) !important;
}

/* NPC 头像小圆圈 (.av) */
.rel.npc .av { 
    width: 20px !important; 
    height: 20px !important; 
    background: #8d6e63 !important; 
    border-radius: 50% !important; 
    text-align: center !important; 
    line-height: 20px !important; 
    font-size: 11px !important; 
    margin-right: 6px !important; 
    color: #fff !important;
    font-family: "KaiTi", serif !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.5) !important;
}

/* 分类标题 */
.os-rel-g {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
}
.os-rel-g::before {
    content: attr(data-t) !important;
    display: block !important;
    width: 100% !important;
    font-size: 12px !important;
    color: #c5a065 !important;
    border-bottom: 1px dashed rgba(197, 160, 101, 0.3) !important;
    margin-bottom: 8px !important;
    padding-bottom: 4px !important;
    font-family: "KaiTi", serif !important;
    letter-spacing: 1px !important;
}
/* ==========================================================================
   🎨 决断台 (HUD) 终极修复：干掉原生三角、缩放字号、恢复排版
   ========================================================================== */

/* 1. 彻底干掉平台强行塞入的所有原生折叠三角 (无论它用什么黑魔法) */
.os-dr summary, .os-hud summary { list-style: none !important; }
.os-dr summary::-webkit-details-marker, .os-hud summary::-webkit-details-marker,
.os-dr summary::marker, .os-hud summary::marker { display: none !important; content: "" !important; }
/* 抹杀平台可能偷塞的 SVG 箭头，只保留我们自己的 .ic 图标 */
.os-dr summary > svg:not(.ic), .os-hud summary > svg:not(.ic) { display: none !important; }

/* 2. 彻底重做【决断】操作台 */
details.os-hud { 
    border: 1px solid #3e2723 !important; 
    border-left: 4px solid #c5a065 !important; 
    margin-top: 12px !important; 
    border-radius: 4px !important; 
    background: linear-gradient(180deg, #111 0%, #050505 100%) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.8), inset 0 0 15px rgba(197, 160, 101, 0.05) !important;
}

/* 🌟 核心修复：缩小字号，恢复 Flex 布局，把标签推到右边 */
details.os-hud summary { 
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* 左右两端对齐 */
    
    font-family: "KaiTi", serif !important;
    font-size: 15px !important; /* 🌟 强制缩小字号，和上面面板保持一致！ */
    
    color: #ffd700 !important; 
    background: linear-gradient(90deg, rgba(197, 160, 101, 0.15) 0%, transparent 80%) !important; 
    border-bottom: 1px dashed rgba(197, 160, 101, 0.3) !important;
    text-shadow: 0 0 5px rgba(197, 160, 101, 0.5) !important;
    padding: 10px 15px !important; /* 稍微减小一点内边距，更精致 */
}

/* 让决断台内部的文字也使用 Flex，以便和图标对齐 */
details.os-hud summary span:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

details.os-hud summary .tag.blink {
    background: rgba(197, 160, 101, 0.2) !important;
    border: 1px solid rgba(197, 160, 101, 0.6) !important;
    color: #fff !important;
    text-shadow: none !important;
    font-size: 11px !important;
    margin: 0 !important; /* 防止被意外边距挤下去 */
}

/* ==========================================================================
   🛡️ 主面板标题图标 SVG 终极防屏蔽版 
   ========================================================================== */

/* 基础图标伪元素设定 */
.os-dr[data-id="P1"] summary > span:first-child::before,
.os-dr.enemy summary > span:first-child::before,
.os-dr.log summary > span:first-child::before,
.os-hud summary > span:first-child::before {
    content: "" !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    -webkit-mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    background-color: #c5a065 !important; 
    flex-shrink: 0 !important;
}

/* 👤 本相 (侠客剪影) */
.os-dr[data-id="P1"] summary > span:first-child::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z'/%3E%3C/svg%3E") !important;
}

/* 👁️ 观察对象 (杀气红眼) */
.os-dr.enemy summary > span:first-child::before {
    background-color: #ff5252 !important;
    filter: drop-shadow(0 0 4px rgba(255,82,82,0.5)) !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z'/%3E%3C/svg%3E") !important;
}

/* 📜 天机密卷 (全息幽碧卷宗) */
.os-dr.log summary > span:first-child::before {
    background-color: #80cbc4 !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18,22H6C4.89,22 4,21.1 4,20V4C4,2.9 4.89,2 6,2H7V9L9.5,7.5L12,9V2H18A2,2 0 0,1 20,4V20A2,2 0 0,1 18,22Z'/%3E%3C/svg%3E") !important;
}

/* 🎲 决断台 (🌟 替换为精致的命运骰子 SVG) */
.os-hud summary > span:first-child::before {
    background-color: #ffd700 !important;
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.6)) !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5M17,15A2,2 0 0,0 15,17A2,2 0 0,0 17,19A2,2 0 0,0 19,17A2,2 0 0,0 17,15M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10Z'/%3E%3C/svg%3E") !important;
}
/* ==========================================================================
   🎯 修复主面板标题图标“飘移/未对齐”问题 (双重中轴线锁定)
   ========================================================================== */

/* 1. 强制内联弹性盒子，强行锁定垂直居中 */
.os-dr summary > span:first-child,
.os-hud summary > span:first-child {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important; /* 抹平原生行高带来的文字下沉差异 */
    gap: 6px !important;
}

/* 2. 给图标追加基线偏移 (防止 Flex 被平台强行干掉时的兜底方案) */
.os-dr[data-id="P1"] summary > span:first-child::before,
.os-dr.enemy summary > span:first-child::before,
.os-dr.log summary > span:first-child::before,
.os-hud summary > span:first-child::before {
    vertical-align: -3px !important; /* 强制向下偏移 3px，完美对齐汉字的视觉中心 */
    margin-top: -2px !important; /* 抵消上面导致的上浮 */
}
/* ==========================================================================
   🧲 终极缝隙抽干补丁 (强制收紧天机匣底部间距)
   ========================================================================== */
.os-tianji-box {
    /* 直接覆盖原有的 margin，把底部的 15px 强行抹零 */
    margin: -1px 0 0 !important; 
}
/* ==========================================================================
   🎨 沉底面板层 (Target / Log / HUD) 终极视觉统合与色彩降噪
   ========================================================================== */

/* 1. 统一所有底部面板的外壳材质与暗铜边框 (消除花花绿绿) */
.os-dr.enemy, 
.os-dr.log, 
details.os-hud {
    /* 统一使用极暗的竹简底纹 */
    background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.5) 2px, rgba(0,0,0,0.5) 3px), linear-gradient(180deg, rgba(20, 20, 20, 0.95), rgba(10, 10, 10, 0.98)) !important;
    border: 1px solid #3e2723 !important;
    
    /* 🌟 核心：左侧边框全部统一为沉稳的“古铜色”，彻底抹杀红绿灯配色 */
    border-left: 3px solid #5d4037 !important; 
    
    box-shadow: 0 4px 15px rgba(0,0,0,0.6), inset 0 0 10px rgba(0,0,0,0.8) !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    border-radius: 4px !important;
}

/* 2. 统一标题栏底色：极具压迫感的玄墨色 */
.os-dr.enemy summary, 
.os-dr.log summary, 
details.os-hud summary {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.9) 0%, rgba(10, 10, 10, 0.95) 100%) !important;
    border-bottom: 1px solid rgba(197, 160, 101, 0.1) !important; /* 极暗的金线 */
    color: #c5a065 !important; /* 标题文字统一使用错金色 */
}

/* 3. 图标色彩降级 (武侠传统色，告别现代霓虹灯) */

/* 👁️ 观察对象：从亮红降为“暗血色 (Blood Red)” */
.os-dr.enemy summary > span:first-child::before {
    background-color: #b71c1c !important; 
    filter: drop-shadow(0 0 3px rgba(183, 28, 28, 0.4)) !important; /* 微弱血光 */
}

/* 📜 天机密卷：从亮青降为“冷铁色/墨青色 (Slate Blue)” */
.os-dr.log summary > span:first-child::before {
    background-color: #607d8b !important; 
    filter: none !important; /* 历史记录不需要发光，显得厚重 */
}

/* 🎲 决断台：从亮黄降为主题统一的“错金色 (Antique Gold)” */
details.os-hud summary > span:first-child::before {
    background-color: #c5a065 !important; 
    filter: drop-shadow(0 0 3px rgba(197, 160, 101, 0.4)) !important;
}

/* 决断台内部标签 (CMD) 同步降噪 */
details.os-hud summary .tag.blink {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(197, 160, 101, 0.4) !important;
    color: #a1887f !important;
}
/* 1. 隐藏顶部标题栏（语言标签所在行） */
.markdown-body pre > div > div.flex.justify-between.h-8.items-center {
    height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border-bottom: none !important;
}

/* 2. 隐藏语言标签文字 */
.markdown-body pre > div > div.flex.justify-between .text-\[13px\] {
    display: none !important;
}
/* ==========================================================================
   🩹 悬浮窗 (Tooltip) 终极防崩溃修复补丁 (彻底解决垂直面条Bug)
   ========================================================================== */

/* 1. 桌面端与全局基础重置 */
.os-tip {
    visibility: hidden !important; 
    opacity: 0 !important;
    position: absolute !important; 
    bottom: 125% !important; 
    left: 50% !important; 
    transform: translateX(-50%) !important;
    
    /* 🌟 核心救命代码：强制框体尺寸，打死不许缩成一条线！ */
    width: max-content !important; /* 尽量根据内容撑开 */
    min-width: 160px !important;   /* 保底宽度！就算内容只有一个字，框子也有这么宽 */
    max-width: 250px !important;   /* 上限宽度，超长文本在这里强制换行 */
    
    white-space: normal !important; /* 恢复正常文字排版 */
    word-break: break-all !important; 
    text-align: justify !important; 
    
    z-index: 999999 !important; 
    pointer-events: none !important; 
    transition: opacity 0.15s !important;
    
    /* 材质复原 */
    background: rgba(18, 18, 18, 0.98) !important; 
    border: 1px solid rgba(197, 160, 101, 0.5) !important; 
    border-top: 1px solid rgba(197, 160, 101, 0.9) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 15px rgba(197, 160, 101, 0.1) !important; 
    border-radius: 6px !important;
    padding: 12px 14px !important; 
    color: #bdbdbd !important; 
    font-size: 13px !important; 
    line-height: 1.6 !important; 
    text-indent: 0 !important;
}

/* 2. 内部标题与描述复原 */
.os-tip b { 
    display: block !important; 
    color: #c5a065 !important; 
    border-bottom: 1px dashed rgba(197, 160, 101, 0.8) !important; 
    padding-bottom: 6px !important; 
    margin-bottom: 6px !important; 
    font-size: 13px !important; 
    text-indent: 0 !important; 
}
.os-tip em { 
    font-style: normal !important; 
    color: #9e9e9e !important; 
    text-indent: 0 !important;
}

/* 3. 移动端防溢出锁定 */
@media (max-width: 600px) {
    *:focus > .os-tip, 
    .slot:focus > .os-tip, .item:focus > .os-tip, 
    .pill:focus > .os-tip, .attr:focus > .os-tip, 
    .os-key:focus > .os-tip, .rel.npc:focus > .os-tip {
        visibility: visible !important; 
        opacity: 1 !important; 
        
        /* 🌟 移动端再次上锁尺寸 */
        width: max-content !important; 
        min-width: 150px !important; /* 手机端也绝对不许缩成面条 */
        max-width: 80vw !important;  /* 最多占屏幕宽度的 80% */
        
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    /* 边缘防裁切（靠左的弹窗向右展，靠右的弹窗向左展） */
    .os-eq-box .slot:nth-child(odd):focus > .os-tip, 
    .os-grid .item:nth-child(odd):focus > .os-tip { 
        left: 0 !important; transform: translateX(0) !important; 
    }
    .os-eq-box .slot:nth-child(even):focus > .os-tip, 
    .os-grid .item:nth-child(even):focus > .os-tip { 
        left: auto !important; right: 0 !important; transform: translateX(0) !important; 
    }
}
/* ==========================================================================
   🛡️ 悬浮窗层级穿透终极修复 (解决天机匣 Tabs 遮挡 Tooltip)
   ========================================================================== */

/* 1. 静态提权：让展开的内容区默认层级达到 30，稳稳压过导航栏的 20 */
.tj-body {
    position: relative !important;
    z-index: 30 !important; 
}

/* 2. 动态提权：当鼠标悬停或点击胶囊时，把所在的整个 Tab 模块直接拉到屏幕最顶层 */
.tj-tab:hover, 
.tj-tab:focus-within,
.tj-body:hover, 
.tj-body:focus-within {
    z-index: 99999 !important;
}

/* 3. 同步修复：确保内部组件的层级不会被截断 */
.tj-body .os-pills,
.tj-body .os-grid,
.tj-body .os-row {
    position: relative !important;
    z-index: 35 !important;
}
/* ==========================================================================
   🗣️ 卷宗扩展：江湖传闻 (Rumors) 专属 UI 补丁
   ========================================================================== */

/* 1. 传闻纸条底座：暗色、做旧感 */
.os-rumor {
    background: linear-gradient(135deg, rgba(30, 20, 20, 0.6) 0%, rgba(10, 10, 10, 0.8) 100%) !important;
    border-left: 2px solid #8d6e63 !important; /* 枯木色封边，区别于任务的亮色 */
    border-radius: 0 4px 4px 0 !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5) !important;
    position: relative !important;
}

/* 2. 传闻来源栏：像情报档案一样的抬头 */
.os-rumor .r-t {
    font-size: 11px !important;
    color: #a1887f !important;
    margin-bottom: 6px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px dashed rgba(141, 110, 99, 0.3) !important;
    padding-bottom: 4px !important;
}

/* 情报热度/状态（比如：沸沸扬扬、真假参半、绝密） */
.os-rumor .r-t .hot {
    color: #ff5252 !important; /* 危险/高热度预警色 */
    font-family: "KaiTi", serif !important;
    background: rgba(255, 82, 82, 0.1) !important;
    padding: 1px 6px !important;
    border-radius: 2px !important;
    border: 1px solid rgba(255, 82, 82, 0.2) !important;
}

/* 3. 传闻内容：倾斜的楷体，代表这是别人的原话或私语 */
.os-rumor .r-c {
    font-size: 13px !important;
    color: #dcdcdc !important;
    font-family: "KaiTi", serif !important;
    line-height: 1.6 !important;
    font-style: italic !important; /* 核心：用斜体表现非官方的私语感 */
    text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
}
/* ==========================================================================
   10. 🧠 开局记忆接驳协议 (Memory Sync Timeline) - 完整回归补丁
   ========================================================================== */
.os-memory-sync { background: linear-gradient(180deg, #0a0a0a 0%, #141414 100%) !important; border: 1px solid #3e2723 !important; border-radius: 4px !important; padding: 20px !important; margin-bottom: 20px !important; box-shadow: 0 0 20px rgba(197, 160, 101, 0.1) !important; position: relative !important; overflow: hidden !important; }

/* 扫描线扫过特效 (模拟神经接驳) */
.os-memory-sync::after { content: ""; position: absolute !important; top: -50% !important; left: -50% !important; width: 200% !important; height: 10px !important; background: rgba(197, 160, 101, 0.2) !important; box-shadow: 0 0 15px rgba(197, 160, 101, 0.5) !important; transform: rotate(30deg) !important; animation: scan-line 4s ease-in-out infinite !important; pointer-events: none !important; }
@keyframes scan-line { 0% { transform: translateY(-100px) rotate(30deg); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(600px) rotate(30deg); opacity: 0; } }

/* 接驳抬头 */
.sync-header { color: #4db6ac !important; font-family: "Consolas", monospace !important; font-size: 13px !important; text-align: center !important; border-bottom: 1px dashed #004d40 !important; padding-bottom: 10px !important; margin-bottom: 20px !important; text-shadow: 0 0 5px rgba(77, 182, 172, 0.5) !important; }

/* 时间轴主容器 */
.tl-box { position: relative !important; padding-left: 30px !important; }
.tl-box::before { content: "" !important; position: absolute !important; top: 5px !important; bottom: 5px !important; left: 10px !important; width: 2px !important; background: linear-gradient(180deg, transparent, #c5a065, #3e2723, transparent) !important; }

/* 记忆节点行 */
.tl-row { position: relative !important; margin-bottom: 15px !important; padding: 10px 15px !important; background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 4px !important; display: flex !important; flex-direction: column !important; transition: all 0.3s !important; }
.tl-row:hover { background: rgba(255, 255, 255, 0.05) !important; }
.tl-row::before { content: "" !important; position: absolute !important; left: -25.5px !important; top: 15px !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #0a0a0a !important; border: 2px solid #8d6e63 !important; z-index: 2 !important; }

/* 文本与岁月痕迹 */
.tl-age { font-family: "Ma Shan Zheng", serif !important; font-size: 18px !important; color: #a1887f !important; margin-bottom: 4px !important; }
.tl-text { font-size: 13px !important; color: #bdbdbd !important; line-height: 1.6 !important; text-indent: 0 !important; }

/* 🌟 核心记忆高亮美化 */
.tl-row.key-node { background: rgba(197, 160, 101, 0.08) !important; border-color: rgba(197, 160, 101, 0.3) !important; border-left: 3px solid #c5a065 !important; }
.tl-row.key-node::before { border-color: #ffd700 !important; box-shadow: 0 0 8px #ffd700 !important; background: #c5a065 !important; }
.tl-row.key-node .tl-age { color: #c5a065 !important; text-shadow: 0 0 5px rgba(197, 160, 101, 0.5) !important; }
.tl-row.key-node .tl-text { color: #e0e0e0 !important; }
.tl-row.key-node b { color: #ffd700 !important; font-weight: bold !important; margin-right: 5px !important; }

/* 接驳页脚 */
.sync-footer { text-align: center !important; font-family: "KaiTi", serif !important; color: #8d6e63 !important; font-size: 12px !important; margin-top: 20px !important; font-style: italic !important; border-top: 1px dashed #3e2723 !important; padding-top: 10px !important; }
/* ==========================================================================
   🗣️ 传音入密：对话重构 V2 (紧凑排版 + 名字名牌)
   ========================================================================= */

/* 让 AI 生成的 blockquote (>) 或 .os-say 彻底改头换面 */
.markdown-body blockquote, 
.os-say {
    display: block !important;
    position: relative !important;
    
    /* 🌟 核心修复1：大幅缩小上下边距，防止断层感 */
    margin: 4px 0 6px 0 !important; 
    
    /* 左侧留出空间给名字名牌和边框 */
    padding: 12px 18px 12px 30px !important; 
    
    /* 精致的错金边线，抹杀灰色 */
    border: none !important;
    border-left: 3px solid rgba(197, 160, 101, 0.7) !important; 
    
    /* 幽暗的渐变底色，仿佛烛光侧光 */
    background: linear-gradient(90deg, rgba(197, 160, 101, 0.1) 0%, transparent 85%) !important;
    border-radius: 0 4px 4px 0 !important;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.4) !important;
    
    /* 🌟 字体色调与排版 (戏感拉满) */
    color: #e6dfd1 !important; /* 比正文稍微亮一点的骨白色，凸显台词 */
    font-family: "KaiTi", "Kaiti SC", "STKaiti", serif !important; /* 强制使用楷体，自带说书感 */
    font-size: 17px !important;
    font-style: normal !important;
    text-indent: 0 !important; /* 台词绝对不缩进 */
    overflow: visible !important; /* 🌟 核心修复2：允许名字名牌溢出显示 */
}

/* 🌟 核心美化：把突兀的引号，替换为古风名牌，显示说话人的名字 */
/* 注意：需要配合提示词微调，AI必须吐出 data-name 属性 */
.markdown-body blockquote::before,
.os-say::before {
    /* 利用 HTML 的 data-name 属性显示名字 */
    content: attr(data-name) !important;
    
    display: block !important;
    position: absolute !important;
    top: -8px !important; /* 向上偏移，压在对话框边缘上 */
    left: 8px !important; /* 向左偏移，制造错落感 */
    
    font-family: "KaiTi", "Kaiti SC", serif !important; /* 强制楷体 */
    font-size: 11px !important;
    font-weight: normal !important;
    color: rgba(197, 160, 101, 0.9) !important; /* 错金色 */
    letter-spacing: 1.5px !important;
    text-indent: 0 !important;
    
    /* 名牌背景，强制使用 markdown-body 的底色遮挡 */
    background-color: rgba(28, 26, 24, 1) !important; 
    padding: 0 5px !important;
    
    /* 简单的古风装饰线（增强仪式感） */
    border-bottom: 1px solid rgba(197, 160, 101, 0.3) !important;
    border-radius: 2px !important;
    z-index: 5 !important; /* 强制置顶显示 */
}

/* 移除旧的引号水印设置（这里通过 before 覆盖了水印，确保 after 也没捣乱） */
.markdown-body blockquote::after,
.os-say::after { display: none !important; }

/* 保证内部文字没有多余的缩进污染 */
.markdown-body blockquote p,
.os-say p {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
    color: inherit !important;
    line-height: 1.8 !important;
}
/* ==========================================================================
   🗣️ 卷宗扩展 V2：动态情报网分栏标签
   ========================================================================== */
.os-rumor .r-t .r-tags {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* 情报分类底座：古风木牌质感 */
.os-rumor .r-cat {
    font-family: "KaiTi", "Kaiti SC", serif !important;
    font-size: 11px !important;
    padding: 1px 6px !important;
    border-radius: 2px !important;
    letter-spacing: 1px !important;
    border: 1px solid transparent !important;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.5) !important;
    font-weight: bold !important;
}

/* 🏛️ 庙堂情报：明黄/赤红色（皇权、战争、朝廷） */
.os-rumor .r-cat.庙堂 { 
    color: #ffd54f !important; 
    border-color: rgba(255, 213, 79, 0.4) !important; 
    background: linear-gradient(135deg, rgba(183, 28, 28, 0.6) 0%, rgba(130, 20, 20, 0.8) 100%) !important; 
}

/* ⚔️ 武林情报：幽青/冷银色（门派、绝学、杀戮） */
.os-rumor .r-cat.武林 { 
    color: #e0f7fa !important; 
    border-color: rgba(77, 208, 225, 0.4) !important; 
    background: linear-gradient(135deg, rgba(0, 77, 64, 0.6) 0%, rgba(0, 37, 26, 0.8) 100%) !important; 
}

/* 🏮 市井/诡道情报：枯木/暗褐色（怪谈、物价、坊间八卦） */
.os-rumor .r-cat.市井 { 
    color: #d7ccc8 !important; 
    border-color: rgba(141, 110, 99, 0.4) !important; 
    background: linear-gradient(135deg, rgba(62, 39, 35, 0.6) 0%, rgba(30, 20, 15, 0.8) 100%) !important; 
}
/* ==========================================================================
   📜 卷宗扩展 V3：天命与悬赏（任务面板终极重铸）
   ========================================================================== */

/* 任务卡片底座：幽暗的羊皮纸/丝帛质感 */
.os-q {
    position: relative !important;
    padding: 12px 15px !important;
    margin-bottom: 12px !important;
    border-radius: 4px !important;
    background: linear-gradient(135deg, rgba(30, 25, 20, 0.8) 0%, rgba(15, 12, 10, 0.95) 100%) !important;
    border: 1px solid #3e2723 !important;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.6), 0 4px 6px rgba(0,0,0,0.3) !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}

/* 交互反馈：鼠标悬停时微微浮起 */
.os-q:hover {
    transform: translateX(3px) !important;
    border-color: #c5a065 !important;
}

/* 左侧能量束带：区分天命(主线)与悬赏(支线) */
.os-q::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important; top: 0 !important; bottom: 0 !important;
    width: 4px !important;
}
.os-q.main::before { background: linear-gradient(180deg, #b71c1c, #ffb74d) !important; box-shadow: 0 0 8px rgba(255, 183, 77, 0.6) !important; }
.os-q.side::before { background: linear-gradient(180deg, #004d40, #80cbc4) !important; }

/* 头部排版 */
.os-q .q-h {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    border-bottom: 1px dashed rgba(197, 160, 101, 0.2) !important;
    padding-bottom: 6px !important;
}

/* 任务分类小签 */
.os-q .q-tag {
    font-family: "KaiTi", "Noto Serif SC", serif !important;
    font-size: 11px !important;
    padding: 2px 6px !important;
    border-radius: 2px !important;
    margin-right: 8px !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
}
.os-q.main .q-tag { background: rgba(183, 28, 28, 0.2) !important; color: #ffb74d !important; border: 1px solid rgba(255, 183, 77, 0.4) !important; }
.os-q.side .q-tag { background: rgba(0, 77, 64, 0.2) !important; color: #80cbc4 !important; border: 1px solid rgba(128, 203, 196, 0.4) !important; }

/* 任务标题 */
.os-q .q-title {
    flex: 1 !important;
    font-size: 15px !important;
    font-weight: bold !important;
    color: #e6dfd1 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 🌟 核心美化：任务状态变为“古代朱砂印章” */
.os-q .q-status {
    font-family: "Ma Shan Zheng", "KaiTi", serif !important; /* 强制书法字体 */
    font-size: 13px !important;
    color: #ff5252 !important; /* 朱砂红 */
    border: 2px solid #ff5252 !important;
    border-radius: 4px !important;
    padding: 0 4px !important;
    transform: rotate(-5deg) !important; /* 歪斜的印章感 */
    opacity: 0.8 !important;
    text-shadow: none !important;
    box-shadow: inset 0 0 2px rgba(255,82,82,0.5) !important;
    margin-left: 8px !important;
}
/* 结案/完成状态的印章变绿 */
.os-q .q-status.结案, 
.os-q .q-status.完成 { 
    color: #4caf50 !important; 
    border-color: #4caf50 !important; 
    box-shadow: inset 0 0 2px rgba(76,175,80,0.5) !important; 
    transform: rotate(4deg) !important; /* 反向歪斜 */
}

/* 任务描述 */
.os-q .q-desc {
    font-size: 13px !important;
    color: #bcaaa4 !important;
    line-height: 1.6 !important;
    margin-bottom: 8px !important;
    text-align: justify !important;
}
.os-q.main .q-desc { font-style: italic !important; color: #d7ccc8 !important; }

/* 底部信息栏 (期限与报酬) */
.os-q .q-foot {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 11px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    padding: 4px 8px !important;
    border-radius: 2px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    font-family: "KaiTi", serif !important;
}
.os-q .q-time { color: #ff8a65 !important; }
.os-q .q-reward { color: #ffd700 !important; font-weight: bold !important; letter-spacing: 0.5px !important; }
/* ==========================================================================
   🧹 容器顶部幽灵空行抹杀补丁
   ========================================================================== */
/* 抹杀输出容器最顶部的空段落或孤立换行 */
p:first-child:empty,
br:first-child {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 确保 oracle 面板本身绝不产生向上的推力 */
details.os-oracle {
    margin-top: 0 !important;
}
/* ==========================================================================
   🩹 Header 抬头移动端排版修复补丁 (防止标签被挤压变形)
   ========================================================================== */

/* 1. 赋予区域标签（如“京畿道”）绝对的“硬度” */
.os-zone {
    white-space: nowrap !important;  /* 绝对不许内部文字换行 */
    flex-shrink: 0 !important;       /* 绝对不许被挤压变窄 */
    display: inline-block !important; 
}

/* 2. 移动端强制开启“优雅双行”布局 */
@media (max-width: 600px) {
    .os-time {
        flex-wrap: wrap !important;  /* 解除单行封印，允许换行 */
        row-gap: 8px !important;     /* 上下行的间距 */
        column-gap: 6px !important;  /* 左右元素的间距 */
        padding: 0 5px !important;
    }
    
    /* 🌟 核心魔法：让【日期】和【时辰】强行霸占第一行 */
    .os-time::before {
        flex: 1 1 100% !important;   /* 强制它撑满 100% 宽度 */
        text-align: center !important;
        
        /* 加一条极细的错金虚线分割上下部分，武侠卷宗感拉满 */
        border-bottom: 1px dashed rgba(197, 160, 101, 0.2) !important;
        padding-bottom: 6px !important;
        margin-bottom: 2px !important;
    }
}
/* ==========================================================================
   🚨 状态条兜底防御协议 (Fallback)
   ========================================================================== */
/* 1. 基础兜底：即使匹配失败，也保留最低 5% 的宽度，防止彻底变成黑洞 */
.bar::after {
    min-width: 5% !important; 
}

/* 2. 模糊匹配 (野生写法补救)：如果 AI 真的输出了带 % 的数值，利用属性模糊选择器强行生效 */
.bar[data-p*="10%"]::after { width: 10% !important; }
.bar[data-p*="20%"]::after { width: 20% !important; }
.bar[data-p*="30%"]::after { width: 30% !important; }
.bar[data-p*="40%"]::after { width: 40% !important; }
.bar[data-p*="50%"]::after { width: 50% !important; }
.bar[data-p*="60%"]::after { width: 60% !important; }
.bar[data-p*="70%"]::after { width: 70% !important; }
.bar[data-p*="80%"]::after { width: 80% !important; }
.bar[data-p*="90%"]::after { width: 90% !important; }
.bar[data-p*="100%"]::after { width: 100% !important; }
/* 如果 AI 写了“满”，强行拉满 */
.bar[data-p*="满"]::after { width: 100% !important; }
/* ==========================================================================
   🍃 环境感知补丁 (Header“在场人员”标签专属美化)
   ========================================================================== */
.os-env {
    /* 布局：内联居中，和上方的时间行拉开合理的呼吸间距 */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 10px !important;
    padding: 3px 12px 3px 10px !important;
    
    /* 材质：极暗的半透明墨底，配上幽暗的错金虚线边框，像是一块小木牌 */
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px dashed rgba(197, 160, 101, 0.25) !important;
    border-radius: 20px !important;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 2px 4px rgba(0,0,0,0.5) !important;
    
    /* 字体：缩小字号，使用枯叶/香灰色的极其低调的色彩 */
    font-family: "KaiTi", "Noto Serif SC", serif !important;
    font-size: 11px !important;
    color: #9e9e9e !important; 
    letter-spacing: 1px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9) !important;
    
    /* 防爆框设计：如果人数太多，限制最大宽度并允许优雅换行 */
    max-width: 90% !important;
    white-space: normal !important;
    word-break: break-all !important;
    line-height: 1.5 !important;
    
    /* 增加平滑过渡动画 */
    transition: all 0.3s ease !important;
}

/* 悬停交互：鼠标滑过时，签条微微亮起，浮现金色幽光 */
.os-env:hover {
    border-color: rgba(197, 160, 101, 0.6) !important;
    color: #c5a065 !important;
    background: rgba(20, 15, 10, 0.6) !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.8), inset 0 0 8px rgba(197,160,101,0.15) !important;
}

/* 针对 emoji 图标的微调 (让那个紫色的双人头像不再刺眼) */
.os-env {
    /* 强制滤镜：降低饱和度，提高对比度，让 emoji 融入水墨环境 */
    filter: grayscale(40%) contrast(1.2) brightness(0.9) !important;
}

/* 📱 移动端微调：防止在极窄屏幕下贴边 */
@media (max-width: 600px) {
    .os-env {
        max-width: 95% !important;
        margin-top: 8px !important;
    }
}