/* ========================================= */
/* 大楚乱世 - 全局暗黑江湖风格 UI v1.0 */
/* 核心材质：沉木、宣纸、朱砂、青石碑 */
/* ========================================= */
/* ========================================= */
/* 思维链：水墨画卷 · 米莱娜观戏私语 (优化版) */
/* ========================================= */
/* 画卷外壳：泛黄宣纸 + 水墨晕染 */
.think-chain {
position: relative;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.96, 0 0 0 0 0.93, 0 0 0 0 0.84, 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23paper)'/%3E%3C/svg%3E"),
radial-gradient(ellipse at 5% 20%, rgba(80, 60, 40, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 95% 80%, rgba(60, 50, 40, 0.08) 0%, transparent 50%),
linear-gradient(160deg, #f5eed6 0%, #e8dcc5 50%, #ede3cc 100%);
border: 1px solid #c9b896;
border-top: 2px solid #d4c0a0;
border-bottom: 2px solid #b5a182;
border-radius: 8px;
margin-bottom: 18px;
box-shadow:
0 6px 20px rgba(80, 60, 40, 0.2),
inset 0 0 30px rgba(200, 180, 140, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
overflow: hidden;
transition: box-shadow 0.35s ease;
}
.think-chain[open] {
box-shadow:
0 8px 28px rgba(80, 60, 40, 0.3),
inset 0 0 40px rgba(200, 180, 140, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 0 0 1px rgba(180, 150, 100, 0.3);
}
/* 卷轴压痕：竹木横条 */
.think-chain > summary {
position: relative;
padding: 14px 50px 14px 46px;
font-family: 'Noto Serif SC', 'STKaiti', 'Kaiti', serif;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 2.5px;
color: #5a4830;
background:
repeating-linear-gradient(
90deg,
transparent 0px, transparent 16px,
rgba(80, 60, 40, 0.03) 16px, rgba(80, 60, 40, 0.03) 17px
),
linear-gradient(180deg, rgba(200, 180, 140, 0.4) 0%, rgba(180, 160, 120, 0.2) 100%);
border-bottom: 1px solid rgba(139, 115, 80, 0.25);
cursor: pointer;
list-style: none;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
}
.think-chain > summary::-webkit-details-marker { display: none; }
/* 左侧玉石轴头 */
.think-chain > summary::before {
content: '';
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(220, 200, 160, 0.9), rgba(160, 140, 100, 0.7) 60%, rgba(120, 100, 70, 0.8));
border: 2px solid rgba(140, 120, 85, 0.4);
box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(80, 60, 40, 0.3), 0 2px 4px rgba(80, 60, 40, 0.2);
}
/* 右侧展开箭头 */
.think-chain > summary::after {
content: '▾';
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
color: rgba(90, 72, 48, 0.6);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
}
.think-chain[open] > summary::after {
transform: translateY(-50%) rotate(180deg);
color: #8b6914;
}
.think-chain > summary:hover {
background:
repeating-linear-gradient(90deg, transparent 0px, transparent 16px, rgba(80, 60, 40, 0.05) 16px, rgba(80, 60, 40, 0.05) 17px),
linear-gradient(180deg, rgba(220, 200, 150, 0.5) 0%, rgba(200, 180, 130, 0.3) 100%);
color: #3a2e1f;
}
@keyframes scrollUnfurl {
from { opacity: 0; transform: translateY(-10px) scaleY(0.92); }
to { opacity: 1; transform: translateY(0) scaleY(1); }
}
.think-chain[open] > summary + * {
animation: scrollUnfurl 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
transform-origin: top;
}
/* ===== 米莱娜私语（朱砂眉批） ===== */
.think-chain .tk-vibe {
position: relative;
margin: 0;
padding: 14px 18px;
font-family: 'STKaiti', 'Kaiti', 'Noto Serif SC', serif;
font-size: 13.5px;
font-style: italic;
line-height: 1.9;
letter-spacing: 0.5px;
color: #4a1018;
background:
radial-gradient(ellipse at 20% 50%, rgba(200, 50, 60, 0.18) 0%, transparent 75%),
linear-gradient(90deg, rgba(210, 100, 110, 0.1) 0%, transparent 80%);
border-bottom: 1px dashed rgba(139, 115, 80, 0.2);
}
@keyframes name-glow {
0%, 100% {
border-color: rgba(180, 70, 70, 0.35);
box-shadow: none;
}
50% {
border-color: rgba(200, 80, 80, 0.55);
box-shadow: 0 0 5px rgba(200, 80, 80, 0.15);
}
}
.think-chain .vibe-name {
display: inline-block;
font-style: normal;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 1.5px;
color: #8b3040;
border: 1.5px solid rgba(160, 60, 60, 0.4);
border-radius: 3px;
padding: 3px 10px 3px 7px;
margin-right: 10px;
vertical-align: middle;
background: rgba(200, 140, 110, 0.18);
text-shadow: none !important;
animation: name-glow 3.5s ease-in-out infinite;
}
.think-chain .vibe-name::before {
content: '❦';
display: inline-block;
margin-right: 4px;
font-size: 13px;
color: rgba(160, 50, 60, 0.85);
vertical-align: middle;
filter: none !important;
text-shadow: none !important;
}
/* ===== 推演步骤：浓墨与淡墨 ===== */
.think-chain .tk {
position: relative;
margin: 0;
padding: 7px 18px;
font-family: 'Courier New', 'Consolas', monospace;
font-size: 11.5px;
line-height: 1.65;
color: rgba(90, 72, 56, 0.75);
border-bottom: 1px dotted rgba(139, 115, 80, 0.12);
transition: color 0.25s ease, background 0.25s ease, padding-left 0.25s ease;
}
.think-chain .tk:last-child { border-bottom: none; }
.think-chain .tk:hover { color: rgba(58, 46, 33, 0.95); background: rgba(200, 180, 140, 0.08); padding-left: 24px; }
/* 大项：浓墨 */
.think-chain .tk-major {
color: rgba(58, 46, 33, 1);
font-weight: 700;
padding-top: 10px;
margin-top: 4px;
border-top: 1px solid rgba(139, 115, 80, 0.2);
}
.think-chain .tk-major:first-of-type { border-top: none; padding-top: 7px; margin-top: 0; }
/* 小项：淡墨 70% */
.think-chain .tk-sub { padding-left: 32px; font-size: 11px; color: rgba(107, 94, 79, 0.7); }
.think-chain .tk-sub::before { content: '↳'; position: absolute; left: 20px; color: rgba(139, 115, 80, 0.45); font-size: 12px; }
.think-chain .tk-sub:hover { color: rgba(58, 46, 33, 0.9); background: rgba(200, 180, 140, 0.1); padding-left: 36px; }
/* ========================================= */
/* 差异化高亮 (必须与 tk-major 连用才生效) */
/* ========================================= */
/* ⑤ 特殊标记：青墨门控 (绿) - 对应 tk-gate */
.think-chain .tk.tk-gate {
color: #154529; /* 深墨绿，不刺眼 */
border-left: 4px solid #2e7a4b;
background: linear-gradient(90deg, rgba(46, 122, 75, 0.12) 0%, transparent 80%);
}
/* ⑦ 特殊标记：主线枢纽 (紫) - 对应 tk-story */
.think-chain .tk.tk-story {
color: #2b1d42; /* 深紫黑 */
border-left: 4px solid #5a3c85;
background: linear-gradient(90deg, rgba(90, 60, 133, 0.12) 0%, transparent 80%);
}
/* ⑫ 特殊标记：朱砂警示 (红) - 对应 tk-critical */
.think-chain .tk.tk-critical {
color: #5c1818; /* 压迫感的深红 */
border-left: 4px solid #9e2a2a;
background: linear-gradient(90deg, rgba(158, 42, 42, 0.12) 0%, transparent 80%);
}
/* 统一的高亮项 Hover 效果 */
.think-chain .tk.tk-gate:hover { background: linear-gradient(90deg, rgba(46, 122, 75, 0.18) 0%, transparent 90%); }
.think-chain .tk.tk-story:hover { background: linear-gradient(90deg, rgba(90, 60, 133, 0.18) 0%, transparent 90%); }
.think-chain .tk.tk-critical:hover { background: linear-gradient(90deg, rgba(158, 42, 42, 0.18) 0%, transparent 90%); }
/* ===== 移动端适配 ===== */
@media (max-width: 480px) {
.think-chain > summary { font-size: 11.5px; padding: 12px 40px 12px 40px; letter-spacing: 2px; }
.think-chain > summary::before { width: 16px; height: 16px; left: 12px; }
.think-chain .tk-vibe { font-size: 12.5px; padding: 12px 14px; }
.think-chain .tk { font-size: 11px; padding: 6px 14px; }
.think-chain .tk-sub { padding-left: 28px; font-size: 10.5px; }
.think-chain .tk-sub::before { left: 16px; }
}
/* ========================================= */
/* 2. 惊堂木：血檀木拍案 */
/* ========================================= */
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
/* 血檀木纹理 + 朱漆光泽 */
background:
/* 木纹走向 */
repeating-linear-gradient(
92deg,
transparent 0px, transparent 2px,
rgba(0, 0, 0, 0.08) 2px, rgba(0, 0, 0, 0.08) 3px
),
repeating-linear-gradient(
88deg,
transparent 0px, transparent 5px,
rgba(139, 0, 0, 0.05) 5px, rgba(139, 0, 0, 0.05) 6px
),
/* 木材底色：深红到暗红渐变 */
linear-gradient(165deg, #4a1010 0%, #2d0808 30%, #3d0c0c 60%, #1f0505 100%);
/* 金属镶边 */
border: 1.5px solid #8b4513;
border-top: 3px solid #cd853f;
border-bottom: 3px solid #3d1f0f;
border-radius: 4px;
padding: 12px 16px;
margin-bottom: 18px;
/* 立体厚度：多层阴影堆叠 */
box-shadow:
/* 顶部高光（漆面反光） */
inset 0 1px 0 rgba(205, 133, 63, 0.3),
inset 0 2px 4px rgba(255, 255, 255, 0.08),
/* 底部凹槽 */
inset 0 -1px 0 rgba(0, 0, 0, 0.8),
/* 木块厚度 */
0 3px 0 #1a0404,
0 5px 0 #120303,
0 7px 0 #0d0202,
/* 桌面投影 */
0 10px 15px rgba(0, 0, 0, 0.6),
0 15px 30px rgba(0, 0, 0, 0.4);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* 拍案动效：hover 时木块下沉 */
.top-bar:hover {
transform: translateY(2px);
box-shadow:
inset 0 1px 0 rgba(205, 133, 63, 0.4),
inset 0 2px 4px rgba(255, 255, 255, 0.1),
inset 0 -1px 0 rgba(0, 0, 0, 0.8),
/* 厚度减少（拍下去） */
0 2px 0 #1a0404,
0 3px 0 #120303,
0 4px 0 #0d0202,
/* 投影变近 */
0 6px 10px rgba(0, 0, 0, 0.7),
0 10px 20px rgba(0, 0, 0, 0.5);
}
/* 顶部铜钉装饰 */
.top-bar::before {
content: '';
position: absolute;
top: -6px;
left: 16px;
width: 8px;
height: 8px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #f4a460, #cd853f 50%, #8b5a2b);
border: 1px solid rgba(139, 69, 19, 0.6);
box-shadow:
inset 0 1px 2px rgba(255, 220, 180, 0.6),
inset 0 -1px 1px rgba(60, 30, 10, 0.5),
0 2px 3px rgba(0, 0, 0, 0.4);
}
.top-bar::after {
content: '';
position: absolute;
top: -6px;
right: 16px;
width: 8px;
height: 8px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #f4a460, #cd853f 50%, #8b5a2b);
border: 1px solid rgba(139, 69, 19, 0.6);
box-shadow:
inset 0 1px 2px rgba(255, 220, 180, 0.6),
inset 0 -1px 1px rgba(60, 30, 10, 0.5),
0 2px 3px rgba(0, 0, 0, 0.4);
}
/* ===== 时间文字：金粉刻字 ===== */
.top-bar .t-date {
color: #e8c895;
font-size: 13px;
font-family: 'Noto Serif SC', 'STKaiti', serif;
font-weight: 500;
letter-spacing: 1.5px;
text-shadow:
0 1px 0 rgba(0, 0, 0, 0.8),
0 0 8px rgba(232, 200, 149, 0.3);
}
/* ===== 季节标签：朱漆印章 ===== */
.top-bar .t-season {
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
color: #fff5e6;
background:
radial-gradient(circle at 40% 40%, rgba(255, 50, 50, 0.9), rgba(139, 0, 0, 0.95) 70%);
border: 1.5px solid rgba(139, 0, 0, 0.6);
padding: 3px 10px;
border-radius: 3px;
box-shadow:
inset 0 1px 2px rgba(255, 100, 100, 0.4),
inset 0 -1px 1px rgba(80, 0, 0, 0.6),
0 2px 4px rgba(139, 0, 0, 0.5);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
/* ===== 地点文字：深刻凹槽 ===== */
.top-bar .t-loc {
color: #ffe4b3;
font-weight: 700;
font-size: 13.5px;
font-family: 'Noto Serif SC', serif;
letter-spacing: 2px;
text-shadow:
0 2px 0 rgba(0, 0, 0, 0.9),
0 0 10px rgba(255, 228, 179, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
/* ===== 移动端适配 ===== */
@media (max-width: 480px) {
.top-bar {
flex-direction: column;
gap: 8px;
align-items: flex-start;
padding: 10px 14px;
}
.top-bar .t-date {
font-size: 12px;
}
.top-bar .t-season {
font-size: 10px;
padding: 2px 8px;
}
.top-bar .t-loc {
font-size: 12.5px;
align-self: flex-end;
}
}
/* ========================================= */
/* 3. 古籍质感：江湖话本正文区 (高性能重构版) */
/* ========================================= */
novel {
display: block;
position: relative;
/* [性能优化] 开启独立 GPU 渲染层，阻断重绘扩散 */
transform: translateZ(0);
will-change: transform, box-shadow;
/* [性能优化] 移除极度耗能的 SVG 噪点，改用 CSS 交叉线模拟纸张纤维与基础晕染 */
background:
/* 右斜向细微纸纤维 */
repeating-linear-gradient(45deg, transparent 0px, transparent 2px, rgba(140, 100, 70, 0.015) 2px, rgba(140, 100, 70, 0.015) 3px),
/* 左斜向细微纸纤维 */
repeating-linear-gradient(-45deg, transparent 0px, transparent 2px, rgba(140, 100, 70, 0.015) 2px, rgba(140, 100, 70, 0.015) 3px),
/* 左上暗角斑驳 */
radial-gradient(ellipse at top left, rgba(80, 55, 30, 0.06) 0%, transparent 60%),
/* 右下暗角斑驳 */
radial-gradient(ellipse at bottom right, rgba(80, 60, 30, 0.06) 0%, transparent 60%),
/* 宣纸主体渐变底色 */
linear-gradient(158deg, #f5ecd8 0%, #ede0c4 30%, #f0e5ca 60%, #e9dbb8 100%);
color: #120c04;
padding: 32px 28px 28px 38px;
margin-bottom: 22px;
border: 1.5px solid #c9b896;
border-right-color: #d4c4a8;
border-bottom-color: #b5a182;
border-radius: 2px 6px 6px 2px;
/* [性能优化] 将 9 层阴影精简为 5 层，保留书页厚度与内凹感 */
box-shadow:
inset 0 0 45px rgba(110, 80, 45, 0.1), /* 内部四周压暗 */
inset 3px 0 6px rgba(160, 130, 90, 0.06), /* 左侧书脊折痕高光 */
3px 0 0 #e8dcca, /* 纸张切面厚度1 */
6px 0 0 #d2c6b0, /* 纸张切面厚度2 */
8px 6px 20px rgba(80, 60, 40, 0.22); /* 整体环境投影 */
font-family: 'Noto Serif SC', 'STKaiti', 'Kaiti', '华文楷体', serif;
font-size: 16.5px;
font-weight: 600;
line-height: 2.3;
text-align: justify;
overflow: visible;
}
/* ===== hover 动画仅在桌面端启用 ===== */
@media (hover: hover) and (pointer: fine) {
novel {
/* 只过渡关键属性，避免触发背景重绘 */
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}
novel:hover {
transform: translateX(2px) rotateY(1deg) translateZ(0);
box-shadow:
inset 0 0 45px rgba(110, 80, 45, 0.12),
inset 3px 0 6px rgba(160, 130, 90, 0.08),
3px 0 0 #e8dcca,
6px 0 0 #d2c6b0,
12px 10px 30px rgba(70, 50, 30, 0.25);
}
}
/* ===== 左侧线装书脊——贯穿全高 ===== */
novel::before {
content: '';
position: absolute;
left: 12px;
top: 6px;
bottom: 6px;
width: 2px;
background:
repeating-linear-gradient(
0deg,
transparent 0px,
transparent 30px,
rgba(139, 0, 0, 0.48) 30px,
rgba(139, 0, 0, 0.48) 34px,
transparent 34px,
transparent 40px
);
border-radius: 1px;
box-shadow:
-1px 0 1px rgba(139, 0, 0, 0.16),
1px 0 1px rgba(139, 0, 0, 0.16);
}
/* ===== 朱砂印章——左上角，首段缩进留白处 ===== */
novel::after {
content: '大楚\A秘録';
white-space: pre;
position: absolute;
left: 16px;
top: 14px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
z-index: 0;
font-family: 'STKaiti', 'Kaiti', 'Noto Serif SC', serif;
font-size: 10px;
font-weight: 900;
line-height: 1.4;
letter-spacing: 1px;
text-align: center;
color: rgba(165, 15, 15, 0.92);
/* [性能优化] 移除 SVG 噪点。用虚线边框+双层径向渐变模拟朱砂印泥的斑驳感 */
background:
radial-gradient(circle at 30% 30%, rgba(215, 48, 48, 0.1) 0%, transparent 40%),
radial-gradient(circle at 60% 60%, rgba(215, 48, 48, 0.8) 0%, rgba(155, 28, 28, 0.85) 60%, rgba(115, 18, 18, 0.9) 100%);
/* 利用 dashed 制造边缘的不规则吃墨感 */
border: 1.5px dashed rgba(132, 0, 0, 0.65);
outline: 1px solid rgba(175, 28, 28, 0.4);
outline-offset: 1px;
border-radius: 2px;
box-shadow:
inset 0 0 8px rgba(72, 6, 6, 0.38),
inset -1px -1px 2px rgba(240, 95, 95, 0.28),
inset 1px 1px 2px rgba(52, 6, 6, 0.48),
0 2px 5px rgba(132, 0, 0, 0.25);
text-shadow:
0 1px 1px rgba(0, 0, 0, 0.4),
0 0 2px rgba(175, 28, 28, 0.4);
transform: rotate(-7deg);
opacity: 0.86;
}
/* ===== 虫蛀痕迹 ===== */
novel p:nth-of-type(3)::before,
novel p:nth-of-type(7)::before {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: radial-gradient(circle, rgba(100, 80, 60, 0.22), transparent 70%);
border-radius: 50%;
opacity: 0.55;
}
novel p:nth-of-type(3)::before { left: 15%; margin-top: -8px; }
novel p:nth-of-type(7)::before { right: 20%; margin-top: -12px; }
/* ===== 正文段落——力透纸背：墨渗纸纤维 ===== */
novel p {
text-indent: 2em;
margin-bottom: 1.3em;
letter-spacing: 0.8px;
position: relative;
z-index: 1;
color: #1a0f04;
/*
[性能优化] 去除 blur 半径 (即原来的 1px 改为 0)。
纯偏移的文字阴影（Solid Offset）由 GPU 直接复制层，成本极低；
带模糊的阴影（Blur）在滚动时会导致海量的实时的重绘。
此处 0.6px 垂直偏移依然能完美营造墨汁下渗感。
*/
text-shadow: 0 0.6px 0 rgba(12, 6, 0, 0.15);
-webkit-text-stroke: 0.2px rgba(26, 15, 4, 0.12);
paint-order: stroke fill;
}
novel p:first-of-type { margin-top: 0; }
novel p:last-of-type { margin-bottom: 0; }
/* ===== 移动端适配 (缩减参数，保性能与屏占比) ===== */
@media (max-width: 640px) {
novel {
padding: 24px 20px 22px 30px;
font-size: 16.5px;
line-height: 2.15;
border-radius: 2px 4px 4px 2px;
/* 移动端进一步压缩阴影层级 */
box-shadow:
inset 0 0 30px rgba(110, 80, 45, 0.08),
2px 0 0 #e8dcca,
4px 0 0 #ddd1bc,
5px 4px 15px rgba(80, 60, 40, 0.18);
}
novel::before { left: 10px; width: 1.5px; }
novel::after { width: 40px; height: 40px; font-size: 9.5px; left: 12px; top: 10px; }
}
@media (max-width: 480px) {
novel {
padding: 20px 16px 18px 26px;
font-size: 16px;
line-height: 2.1;
}
novel::after { width: 35px; height: 35px; font-size: 8.5px; left: 10px; top: 8px; }
}
/* ========================================= */
/* 5. 玩家/NPC 状态：铜钱锦盒铭牌（双栏版） */
/* ========================================= */
/* ===== 外壳：深木锦盒 + 四角铜钱纹 ===== */
.hud-player,
.hud-npc {
position: relative;
background:
repeating-linear-gradient(
92deg,
transparent 0px, transparent 3px,
rgba(80, 60, 40, 0.04) 3px, rgba(80, 60, 40, 0.04) 4px
),
linear-gradient(150deg, #2b2018 0%, #1d150f 60%, #15100b 100%);
border-left: 4px solid #8b0000 !important;
border: 1.5px solid rgba(139, 100, 60, 0.3);
border-radius: 5px;
box-shadow:
inset 0 1px 0 rgba(180, 140, 90, 0.1),
inset -1px 0 0 rgba(139, 0, 0, 0.3),
0 4px 12px rgba(0, 0, 0, 0.6),
0 6px 25px rgba(0, 0, 0, 0.4);
overflow: visible;
}
.hud-player::before,
.hud-npc::before {
content: '⿰';
position: absolute;
right: 6px;
top: 6px;
font-size: 16px;
color: rgba(210, 170, 110, 0.4);
text-shadow: 0 0 4px rgba(210, 170, 110, 0.3);
pointer-events: none;
}
.hud-player::after,
.hud-npc::after {
content: '⿱';
position: absolute;
left: 6px;
bottom: 6px;
font-size: 16px;
color: rgba(210, 170, 110, 0.4);
text-shadow: 0 0 4px rgba(210, 170, 110, 0.3);
pointer-events: none;
}
/* ===== 标题栏：金线框 + 铜钱吊坠 ===== */
.hud-player > summary,
.hud-npc > summary {
position: relative;
font-family: 'Noto Serif SC', 'STKaiti', serif;
font-size: 14px;
font-weight: 700;
color: #f4e4c8;
padding: 14px 50px 14px 56px;
background:
linear-gradient(90deg,
transparent 0%,
rgba(210, 170, 110, 0.3) 20%,
rgba(210, 170, 110, 0.5) 50%,
rgba(210, 170, 110, 0.3) 80%,
transparent 100%
) top / 100% 1px no-repeat,
linear-gradient(90deg,
transparent 0%,
rgba(210, 170, 110, 0.3) 20%,
rgba(210, 170, 110, 0.5) 50%,
rgba(210, 170, 110, 0.3) 80%,
transparent 100%
) bottom / 100% 1px no-repeat,
linear-gradient(90deg, rgba(50, 38, 28, 0.6) 0%, rgba(35, 26, 19, 0.4) 100%);
border-bottom: 1px solid rgba(139, 100, 60, 0.25);
letter-spacing: 2px;
text-shadow:
0 1px 0 rgba(0, 0, 0, 0.8),
0 0 10px rgba(244, 228, 200, 0.3);
cursor: pointer;
list-style: none;
transition: all 0.3s ease;
}
.hud-player > summary::-webkit-details-marker,
.hud-npc > summary::-webkit-details-marker {
display: none;
}
/* 左侧铜钱吊坠 */
.hud-player > summary::before,
.hud-npc > summary::before {
content: '';
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
background:
linear-gradient(rgba(20, 15, 10, 0.9), rgba(20, 15, 10, 0.9)) center / 8px 8px no-repeat,
radial-gradient(circle at 35% 35%,
rgba(220, 180, 120, 0.95),
rgba(180, 140, 90, 0.9) 50%,
rgba(120, 90, 60, 0.95) 80%,
rgba(80, 60, 40, 0.98));
border: 2px solid rgba(100, 70, 40, 0.7);
border-radius: 50%;
box-shadow:
inset 0 2px 4px rgba(255, 230, 180, 0.4),
inset 0 -2px 3px rgba(60, 40, 20, 0.7),
0 0 8px rgba(220, 180, 120, 0.3),
0 3px 8px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}
/* 铜钱上的文字刻痕 */
.hud-player > summary::after,
.hud-npc > summary::after {
content: '録';
position: absolute;
left: 23px;
top: 50%;
transform: translateY(-50%);
font-size: 11px;
font-weight: 900;
color: rgba(80, 60, 40, 0.6);
text-shadow: 0 1px 0 rgba(220, 180, 120, 0.3);
pointer-events: none;
}
/* hover 时金光闪耀 */
.hud-player > summary:hover,
.hud-npc > summary:hover {
background:
linear-gradient(90deg,
transparent 0%,
rgba(240, 200, 130, 0.4) 20%,
rgba(240, 200, 130, 0.6) 50%,
rgba(240, 200, 130, 0.4) 80%,
transparent 100%
) top / 100% 1px no-repeat,
linear-gradient(90deg,
transparent 0%,
rgba(240, 200, 130, 0.4) 20%,
rgba(240, 200, 130, 0.6) 50%,
rgba(240, 200, 130, 0.4) 80%,
transparent 100%
) bottom / 100% 1px no-repeat,
linear-gradient(90deg, rgba(60, 45, 33, 0.7) 0%, rgba(45, 34, 25, 0.5) 100%);
color: #ffedd5;
text-shadow:
0 1px 0 rgba(0, 0, 0, 0.9),
0 0 15px rgba(255, 237, 213, 0.5);
}
.hud-player > summary:hover::before,
.hud-npc > summary:hover::before {
box-shadow:
inset 0 2px 4px rgba(255, 230, 180, 0.6),
inset 0 -2px 3px rgba(60, 40, 20, 0.7),
0 0 15px rgba(240, 200, 130, 0.6),
0 3px 10px rgba(0, 0, 0, 0.6);
}
/* ===== 主角面板：Grid 双栏/三栏布局 ===== */
.hud-player[open] {
padding-bottom: 12px;
}
.hud-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 10px;
padding: 12px 10px 0;
}
/* ===== 属性卡片：木质铭牌 + 铜钉固定 ===== */
.hud-row {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 16px 12px 26px;
background:
repeating-linear-gradient(
88deg,
transparent 0px, transparent 8px,
rgba(100, 80, 60, 0.04) 8px, rgba(100, 80, 60, 0.04) 9px
),
linear-gradient(160deg, #3d3228 0%, #2d241b 70%, #241b13 100%);
border: 1px solid rgba(139, 100, 60, 0.25);
border-radius: 4px;
box-shadow:
inset 0 1px 0 rgba(200, 160, 100, 0.08),
inset 0 -1px 0 rgba(0, 0, 0, 0.5),
0 2px 6px rgba(0, 0, 0, 0.4);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hud-row::before {
content: '';
position: absolute;
left: 10px;
top: 14px;
width: 6px;
height: 6px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%,
rgba(210, 170, 110, 0.9),
rgba(150, 110, 70, 0.85) 60%,
rgba(90, 65, 45, 0.9));
border: 1px solid rgba(80, 60, 40, 0.6);
box-shadow:
inset 0 1px 1px rgba(255, 220, 160, 0.5),
inset 0 -1px 1px rgba(40, 30, 20, 0.7),
0 1px 3px rgba(0, 0, 0, 0.5);
}
.hud-row:hover {
background:
repeating-linear-gradient(
88deg,
transparent 0px, transparent 8px,
rgba(100, 80, 60, 0.06) 8px, rgba(100, 80, 60, 0.06) 9px
),
linear-gradient(160deg, #4a3d30 0%, #3a2d22 70%, #2d231a 100%);
border-color: rgba(180, 140, 90, 0.35);
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(200, 160, 100, 0.12),
inset 0 -1px 0 rgba(0, 0, 0, 0.5),
0 4px 12px rgba(0, 0, 0, 0.5);
}
/* ===== 标签：金箔刻字 ===== */
.hud-lbl {
color: #b09878;
font-size: 11px;
font-weight: 600;
font-family: 'Noto Serif SC', serif;
letter-spacing: 3px;
text-transform: uppercase;
text-shadow:
0 1px 0 rgba(0, 0, 0, 0.7),
0 0 6px rgba(176, 152, 120, 0.2);
opacity: 0.9;
}
/* ===== 数值：金箔填充 ===== */
.hud-val {
color: #f4e4c8;
font-size: 13.5px;
font-weight: 500;
line-height: 1.6;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.9),
0 0 8px rgba(244, 228, 200, 0.25);
}
/* ===== 经济档位：彩色印泥标记 ===== */
/*
档位对照：
- 贫：赤贫/负债累累/衣不蔽体
- 温：温饱/小康/有固定收入
- 康：殷实/有余财/小富
- 富：富裕/产业/豪宅
- 巨：巨富/商贾大亨/封疆财力
*/
.hud-row[data-type="economy"] .hud-val::before {
content: attr(data-level);
display: inline-block;
padding: 3px 10px;
margin-right: 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
border-radius: 2px;
vertical-align: middle;
}
/* 贫 - 灰墨印 */
.hud-val[data-level="贫"]::before {
content: '贫';
background: radial-gradient(circle at 35% 35%, rgba(120, 120, 120, 0.7), rgba(80, 80, 80, 0.8));
color: rgba(200, 200, 200, 0.9);
border: 1px solid rgba(100, 100, 100, 0.6);
box-shadow: inset 0 0 8px rgba(60, 60, 60, 0.5);
}
/* 温 - 青铜印 */
.hud-val[data-level="温"]::before {
content: '温';
background: radial-gradient(circle at 35% 35%, rgba(180, 140, 90, 0.75), rgba(120, 90, 60, 0.85));
color: rgba(240, 220, 180, 0.95);
border: 1px solid rgba(100, 70, 40, 0.7);
box-shadow: inset 0 0 8px rgba(210, 170, 110, 0.4);
}
/* 康 - 黄铜印 */
.hud-val[data-level="康"]::before {
content: '康';
background: radial-gradient(circle at 35% 35%, rgba(200, 160, 100, 0.8), rgba(160, 120, 70, 0.9));
color: rgba(250, 230, 190, 0.95);
border: 1px solid rgba(140, 100, 60, 0.75);
box-shadow:
inset 0 0 10px rgba(220, 180, 120, 0.5),
0 0 6px rgba(200, 160, 100, 0.3);
}
/* 富 - 金箔印 */
.hud-val[data-level="富"]::before {
content: '富';
background: radial-gradient(circle at 35% 35%, rgba(240, 200, 100, 0.8), rgba(200, 160, 60, 0.9));
color: rgba(80, 60, 30, 0.95);
border: 1px solid rgba(180, 140, 60, 0.8);
box-shadow:
inset 0 0 10px rgba(255, 230, 150, 0.6),
0 0 8px rgba(240, 200, 100, 0.4);
}
/* 巨 - 紫金印 */
.hud-val[data-level="巨"]::before {
content: '巨';
background: radial-gradient(circle at 35% 35%, rgba(180, 120, 200, 0.8), rgba(120, 60, 140, 0.9));
color: rgba(255, 230, 255, 0.95);
border: 1px solid rgba(140, 80, 160, 0.8);
box-shadow:
inset 0 0 12px rgba(200, 150, 220, 0.6),
0 0 10px rgba(180, 120, 200, 0.5);
}
/* ===== 名望：动态配色印泥 ===== */
.hud-row[data-type="fame"] .hud-val::before {
content: attr(data-align);
display: inline-block;
padding: 3px 10px;
margin-right: 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
border-radius: 2px;
vertical-align: middle;
}
/* 正面名望 - 翡翠绿印 */
.hud-val[data-align="正"]::before {
content: '誉';
background: radial-gradient(circle at 35% 35%, rgba(100, 180, 140, 0.8), rgba(60, 130, 100, 0.9));
color: rgba(230, 255, 240, 0.95);
border: 1px solid rgba(70, 140, 110, 0.8);
box-shadow:
inset 0 0 10px rgba(150, 220, 180, 0.5),
0 0 8px rgba(100, 180, 140, 0.4);
}
/* 负面名望 - 朱砂红印 */
.hud-val[data-align="负"]::before {
content: '煞';
background: radial-gradient(circle at 35% 35%, rgba(200, 50, 50, 0.8), rgba(140, 20, 20, 0.9));
color: rgba(255, 200, 200, 0.95);
border: 1px solid rgba(160, 30, 30, 0.8);
box-shadow:
inset 0 0 10px rgba(220, 80, 80, 0.5),
0 0 8px rgba(200, 50, 50, 0.4);
}
/* 中性名望 - 灰墨印 */
.hud-val[data-align="中"]::before {
content: '平';
background: radial-gradient(circle at 35% 35%, rgba(140, 140, 140, 0.7), rgba(100, 100, 100, 0.8));
color: rgba(220, 220, 220, 0.9);
border: 1px solid rgba(110, 110, 110, 0.7);
box-shadow: inset 0 0 8px rgba(80, 80, 80, 0.5);
}
/* ===== NPC 卡片：翡翠边框 ===== */
.npc-card {
position: relative;
margin: 10px;
padding: 16px 14px 14px 18px;
background:
repeating-linear-gradient(
90deg,
transparent 0px, transparent 4px,
rgba(79, 111, 102, 0.03) 4px, rgba(79, 111, 102, 0.03) 5px
),
linear-gradient(135deg, rgba(30, 25, 22, 0.9) 0%, rgba(18, 14, 12, 0.95) 100%);
border: 1.5px solid rgba(79, 111, 102, 0.35);
border-radius: 4px;
box-shadow:
inset 0 0 20px rgba(79, 111, 102, 0.08),
0 3px 10px rgba(0, 0, 0, 0.5),
0 6px 20px rgba(0, 0, 0, 0.3);
}
.npc-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg,
rgba(79, 111, 102, 0.8),
rgba(95, 135, 125, 0.9) 50%,
rgba(79, 111, 102, 0.8));
border-radius: 4px 0 0 4px;
box-shadow:
inset 0 1px 0 rgba(150, 200, 180, 0.3),
1px 0 4px rgba(79, 111, 102, 0.4);
}
.npc-card::after {
content: '✧';
position: absolute;
right: 8px;
top: 8px;
font-size: 14px;
color: rgba(79, 111, 102, 0.5);
text-shadow: 0 0 6px rgba(79, 111, 102, 0.4);
}
.npc-name {
font-size: 15.5px;
font-weight: 700;
color: #f0eadd;
font-family: 'Noto Serif SC', serif;
letter-spacing: 1.5px;
margin-bottom: 6px;
text-shadow:
0 1px 0 rgba(0, 0, 0, 0.8),
0 0 10px rgba(240, 234, 221, 0.3);
}
.npc-tag {
font-size: 11px;
color: #a39581;
letter-spacing: 1px;
margin-bottom: 10px;
opacity: 0.85;
}
/* ===== 泛黄信纸：心理侧写 ===== */
.npc-mind {
position: relative;
padding: 14px 16px 12px;
margin: 12px 0 10px;
font-size: 12.5px;
color: #4a3f32;
line-height: 1.8;
/* 泛黄纸张底 + 纤维纹理 */
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.98, 0 0 0 0 0.94, 0 0 0 0 0.84, 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23paper)'/%3E%3C/svg%3E"),
linear-gradient(165deg, #f5ead2 0%, #ede1c5 50%, #e8d9bb 100%);
border: 1px solid rgba(180, 150, 110, 0.4);
border-radius: 3px;
box-shadow:
inset 0 0 20px rgba(180, 150, 110, 0.15),
2px 3px 8px rgba(0, 0, 0, 0.3),
3px 5px 15px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 右上角折角 */
.npc-mind::before {
content: '';
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 18px 18px 0;
border-color: transparent #d4c4a8 transparent transparent;
box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.25);
transition: all 0.4s ease;
}
/* 折角背面 */
.npc-mind::after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 18px;
height: 18px;
background: linear-gradient(135deg, rgba(200, 180, 150, 0.6) 0%, rgba(220, 200, 170, 0.4) 100%);
border-bottom-left-radius: 2px;
opacity: 0;
transition: opacity 0.4s ease;
}
/* hover 时展开信纸 */
.npc-mind:hover {
transform: translateY(-3px) scale(1.02);
box-shadow:
inset 0 0 25px rgba(180, 150, 110, 0.2),
3px 5px 15px rgba(0, 0, 0, 0.35),
4px 8px 25px rgba(0, 0, 0, 0.25);
}
.npc-mind:hover::before {
border-width: 0 22px 22px 0;
}
.npc-mind:hover::after {
opacity: 1;
}
/* ===== 泛黄信纸：微表情 ===== */
.npc-tell {
position: relative;
padding: 14px 16px 12px;
margin: 10px 0 12px;
font-size: 12.5px;
color: #4a3f32;
line-height: 1.8;
/* 稍深的泛黄纸张（和心理侧写做区分） */
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='paper2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.96, 0 0 0 0 0.90, 0 0 0 0 0.78, 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23paper2)'/%3E%3C/svg%3E"),
linear-gradient(155deg, #ede1c5 0%, #e5d4b0 50%, #ddc9a5 100%);
border: 1px solid rgba(170, 140, 100, 0.45);
border-radius: 3px;
box-shadow:
inset 0 0 20px rgba(170, 140, 100, 0.18),
2px 3px 8px rgba(0, 0, 0, 0.3),
3px 5px 15px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 左上角折角（和 mind 区分方向） */
.npc-tell::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 18px 0 0 18px;
border-color: transparent transparent transparent #cbbea6;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
transition: all 0.4s ease;
}
.npc-tell::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
background: linear-gradient(225deg, rgba(190, 170, 140, 0.6) 0%, rgba(210, 190, 160, 0.4) 100%);
border-bottom-right-radius: 2px;
opacity: 0;
transition: opacity 0.4s ease;
}
.npc-tell:hover {
transform: translateY(-3px) scale(1.02);
box-shadow:
inset 0 0 25px rgba(170, 140, 100, 0.22),
3px 5px 15px rgba(0, 0, 0, 0.35),
4px 8px 25px rgba(0, 0, 0, 0.25);
}
.npc-tell:hover::before {
border-width: 22px 0 0 22px;
}
.npc-tell:hover::after {
opacity: 1;
}
/* 墨迹浮现效果 */
@keyframes inkAppear {
from {
opacity: 0;
filter: blur(1px);
}
to {
opacity: 1;
filter: blur(0);
}
}
.npc-mind:hover,
.npc-tell:hover {
animation: inkAppear 0.6s ease forwards;
}
.npc-val {
margin-top: 10px;
padding-top: 8px;
font-size: 11.5px;
color: #ff8a80;
border-top: 1px solid rgba(255, 138, 128, 0.25);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
/* ===== 移动端适配（进一步压缩间隔） ===== */
@media (max-width: 768px) {
.hud-grid {
grid-template-columns: repeat(2, 1fr);
gap: 4px; /* 从 6px 降到 4px */
padding: 8px 8px 0;
}
.hud-row {
padding: 6px 10px 6px 18px; /* 上下从 7px 降到 6px */
}
.hud-row::before {
left: 6px;
top: 8px;
width: 4px;
height: 4px;
}
.hud-lbl {
font-size: 10px;
letter-spacing: 1.5px;
}
.hud-val {
font-size: 11.5px;
}
.hud-row[data-type="economy"] .hud-val::before,
.hud-row[data-type="fame"] .hud-val::before {
padding: 2px 7px;
font-size: 9px;
margin-right: 5px;
}
}
@media (max-width: 640px) {
.hud-player > summary,
.hud-npc > summary {
font-size: 12.5px;
padding: 11px 40px 11px 46px;
letter-spacing: 1.5px;
}
.hud-player > summary::before,
.hud-npc > summary::before {
width: 22px;
height: 22px;
left: 14px;
}
.hud-player > summary::after,
.hud-npc > summary::after {
left: 19px;
font-size: 9.5px;
}
.hud-grid {
gap: 3px; /* 再压到 3px */
}
.hud-row {
padding: 5px 9px 5px 17px; /* 继续压缩 */
}
.npc-card {
padding: 11px 10px 9px 13px;
margin: 6px;
}
.npc-mind,
.npc-tell {
padding: 10px 12px 8px;
font-size: 11.5px;
}
.npc-mind::before {
border-width: 0 13px 13px 0;
}
.npc-tell::before {
border-width: 13px 0 0 13px;
}
}
@media (max-width: 480px) {
.hud-player > summary,
.hud-npc > summary {
font-size: 12px;
padding: 10px 36px 10px 42px;
}
.hud-player > summary::before,
.hud-npc > summary::before {
width: 20px;
height: 20px;
left: 12px;
}
.hud-player > summary::after,
.hud-npc > summary::after {
left: 17px;
font-size: 9px;
}
.hud-grid {
gap: 3px; /* 保持 3px */
}
.hud-row {
padding: 5px 8px 5px 16px;
}
.hud-lbl {
font-size: 9.5px;
letter-spacing: 1px;
}
.hud-val {
font-size: 11px;
}
.hud-row[data-type="economy"] .hud-val::before,
.hud-row[data-type="fame"] .hud-val::before {
padding: 2px 6px;
font-size: 8.5px;
}
}
/* ========================================= */
/* 人脉册：桌面版放大+手机版紧凑 */
/* ========================================= */
/* 红木书案 */
.ct-sys {
background:
repeating-linear-gradient(92deg, transparent 0px, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px),
repeating-linear-gradient(180deg, transparent 0px, transparent 8px, rgba(0,0,0,0.03) 8px, rgba(0,0,0,0.03) 9px),
radial-gradient(ellipse 700px 350px at 25% 35%, rgba(80,50,30,0.12) 0%, transparent 70%),
radial-gradient(ellipse 600px 300px at 75% 65%, rgba(60,40,20,0.1) 0%, transparent 65%),
linear-gradient(160deg, #2a1410 0%, #1e0e0a 35%, #2c1208 65%, #1a0c08 100%);
border: 2px solid rgba(90,42,24,0.6);
border-top-color: rgba(122,58,34,0.7);
border-radius: 12px;
margin: 14px 0;
padding: 0;
overflow: visible;
box-shadow:
inset 0 2px 0 rgba(180,100,60,0.15),
inset 0 -4px 10px rgba(0,0,0,0.6),
0 10px 35px rgba(0,0,0,0.8),
0 4px 8px rgba(0,0,0,0.6);
position: relative;
}
.ct-sys::before {
content: "";
position: absolute;
inset: -60%;
background:
radial-gradient(ellipse 900px 450px at 20% 30%, rgba(160,100,60,0.08) 0%, transparent 60%),
radial-gradient(ellipse 800px 400px at 80% 70%, rgba(120,80,40,0.06) 0%, transparent 55%);
animation: wood-gleam 30s ease-in-out infinite;
pointer-events: none;
opacity: 0.7;
}
@keyframes wood-gleam {
0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.7; }
33% { transform: translate(12%, -10%) rotate(120deg); opacity: 0.9; }
66% { transform: translate(-10%, 12%) rotate(240deg); opacity: 0.6; }
}
.ct-sys summary {
background:
linear-gradient(90deg, rgba(200,140,80,0.15) 0%, rgba(160,100,60,0.08) 20%, transparent 50%, rgba(160,100,60,0.08) 80%, rgba(200,140,80,0.15) 100%),
linear-gradient(90deg, #1a0c08 0%, #251008 50%, #1a0c08 100%);
color: #e8caa8;
padding: 12px 18px;
font-size: 13px;
font-weight: 900;
font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
letter-spacing: 2.5px;
cursor: pointer;
border-bottom: 2px solid rgba(90,42,24,0.7);
border-radius: 10px 10px 0 0;
position: relative;
z-index: 1;
transition: all 0.4s ease;
text-shadow:
0 2px 0 rgba(50,30,20,0.9),
0 3px 6px rgba(0,0,0,1),
0 0 16px rgba(232,202,168,0.3);
transform: scaleY(1.08);
}
.ct-sys summary:hover {
color: #f8e0c8;
text-shadow:
0 2px 0 rgba(70,40,25,1),
0 3px 8px rgba(0,0,0,1),
0 0 24px rgba(248,224,200,0.5);
}
.ct-sys summary::-webkit-details-marker { display: none; }
/* ========================================= */
/* 分区标签（桌面版放大） */
/* ========================================= */
.ct-zone {
margin: 0;
padding: 16px 14px;
position: relative;
background: transparent;
}
.ct-zone:not(:last-child)::after {
content: "";
position: absolute;
bottom: 0;
left: 8%;
right: 8%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(90,42,24,0.3) 20%, rgba(90,42,24,0.4) 50%, rgba(90,42,24,0.3) 80%, transparent 100%);
}
.ct-zone-lbl {
color: #9a8070;
font-size: 11px;
font-weight: 900;
font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
letter-spacing: 3px;
text-transform: uppercase;
padding: 0 0 8px 0;
margin-bottom: 14px;
border: 0;
border-bottom: 2px double rgba(90,42,24,0.3);
position: relative;
text-shadow:
0 1px 0 rgba(40,30,20,0.6),
0 2px 3px rgba(0,0,0,0.8),
0 0 10px currentColor;
transform: scaleY(1.1);
}
.ct-zone-lbl::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 32px;
height: 3px;
background: currentColor;
border-radius: 2px;
box-shadow: 0 0 10px currentColor;
opacity: 0.6;
}
/* ========================================= */
/* 婚姻册 */
/* ========================================= */
.ct-marriage {
background: transparent;
position: relative;
}
.ct-marriage::before {
content: "囍";
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%) rotate(-10deg);
font-size: 180px;
font-weight: 900;
font-family: 'Noto Serif SC', serif;
color: rgba(139,0,0,0.03);
pointer-events: none;
z-index: 0;
animation: xi-float 20s ease-in-out infinite;
}
@keyframes xi-float {
0%, 100% { transform: translateY(-50%) rotate(-10deg); opacity: 0.03; }
50% { transform: translateY(-52%) rotate(-8deg); opacity: 0.05; }
}
.ct-marriage .ct-zone-lbl {
color: #d8a878;
border-bottom-color: rgba(216,168,120,0.35);
}
.ct-marriage .ct-zone-lbl::after {
background: linear-gradient(90deg, #d8a878 0%, rgba(216,168,120,0.5) 70%, transparent 100%);
box-shadow: 0 0 12px rgba(216,168,120,0.5);
width: 38px;
}
.ct-marriage .ct-entry {
background:
url('data:image/svg+xml,'),
repeating-linear-gradient(52deg, transparent 0px, transparent 2px, rgba(139,0,0,0.025) 2px, rgba(139,0,0,0.025) 3px),
repeating-linear-gradient(-52deg, transparent 0px, transparent 2px, rgba(139,0,0,0.025) 2px, rgba(139,0,0,0.025) 3px),
linear-gradient(158deg, #3d1a1a 0%, #2d1212 35%, #3a1515 70%, #301010 100%);
border: 0;
border-left: 4px solid transparent;
border-image: linear-gradient(180deg, #c85050 0%, #a03030 30%, #8b0000 60%, #601010 100%) 1;
border-radius: 0 8px 8px 0;
padding: 12px 14px;
margin-bottom: 12px;
position: relative;
box-shadow:
inset 2px 2px 0 rgba(220,150,150,0.08),
inset -2px -2px 0 rgba(0,0,0,0.5),
3px 5px 14px rgba(0,0,0,0.75),
6px 10px 28px rgba(0,0,0,0.55),
-2px 0 12px rgba(139,0,0,0.15);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
clip-path: polygon(
0% 3%, 1% 1%, 2% 2.5%, 4% 0.5%, 6% 2%, 8% 0.8%, 10% 2.2%,
97% 0%, 98.5% 1.5%, 99.5% 1%, 100% 2.5%, 100% 97%,
99% 98.5%, 98.5% 97.8%, 97% 99.5%, 95% 98.2%,
4% 100%, 2.5% 98.8%, 1.5% 99.5%, 0.5% 98%, 0% 96%
);
}
.ct-marriage .ct-entry::before {
content: "囍";
position: absolute;
right: 14px;
top: 14px;
font-size: 30px;
font-weight: 900;
font-family: 'Noto Serif SC', serif;
color: rgba(200,50,50,0.28);
transform: rotate(-15deg);
pointer-events: none;
z-index: 0;
}
.ct-marriage .ct-entry:hover {
transform: translateY(-4px) rotate(-0.8deg) scale(1.01);
box-shadow:
inset 2px 2px 0 rgba(240,170,170,0.12),
inset -2px -2px 0 rgba(0,0,0,0.5),
5px 8px 18px rgba(0,0,0,0.8),
10px 14px 35px rgba(0,0,0,0.6),
-2px 0 16px rgba(180,40,40,0.25);
}
/* ========================================= */
/* 头部（桌面版放大） */
/* ========================================= */
.ct-head {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 10px;
}
.ct-marriage .ct-rank {
color: #f0d0a8;
font-size: 10px;
font-weight: 900;
font-family: 'ZCOOL QingKe HuangYou', 'Noto Serif SC', serif;
letter-spacing: 1.2px;
padding: 3px 10px;
background:
radial-gradient(ellipse at 50% 50%, rgba(200,60,60,0.15) 0%, transparent 70%),
linear-gradient(138deg, rgba(200,60,60,0.35) 0%, rgba(160,30,30,0.25) 100%);
border: 1.5px solid rgba(200,60,60,0.5);
border-radius: 12px;
text-shadow:
0 1px 0 rgba(80,20,20,0.9),
0 2px 4px rgba(0,0,0,1),
0 0 8px rgba(240,208,168,0.3);
box-shadow:
inset 0 1px 0 rgba(255,210,180,0.15),
0 2px 6px rgba(0,0,0,0.6);
transform: scaleY(1.1) rotate(-2deg);
}
.ct-name {
color: #f8ead8;
font-weight: 900;
font-size: 15px;
font-family: 'Long Cang', 'Noto Serif SC', serif;
letter-spacing: 2px;
text-shadow:
0 -1px 0 rgba(140,100,80,0.6),
0 1px 0 rgba(0,0,0,0.95),
0 2px 0 rgba(0,0,0,0.8),
0 4px 10px rgba(0,0,0,1),
0 0 20px rgba(248,234,216,0.25);
transform: scaleY(1.15) rotate(-1deg);
display: inline-block;
}
.ct-meta {
color: #b09080;
font-size: 11px;
font-family: 'ZCOOL XiaoWei', serif;
letter-spacing: 0.8px;
opacity: 0.92;
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.ct-sleep {
font-size: 11px;
margin-left: auto;
opacity: 0.6;
}
/* ========================================= */
/* 描述（桌面版放大） */
/* ========================================= */
.ct-desc {
color: #d8c8b8;
font-size: 11.5px;
font-style: italic;
font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
padding: 0 0 0 14px;
margin: 10px 0;
border: 0;
line-height: 1.7;
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
position: relative;
}
.ct-desc::before {
content: "◆";
position: absolute;
left: 0;
top: 0;
color: rgba(200,120,100,0.4);
font-size: 10px;
font-style: normal;
}
/* ========================================= */
/* 标签组：桌面版放大 */
/* ========================================= */
.ct-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0;
}
.ct-tag {
padding: 2px 10px;
font-size: 10px;
font-weight: 700;
font-family: 'ZCOOL QingKe HuangYou', 'Noto Serif SC', serif;
letter-spacing: 0.8px;
border-radius: 12px;
border: 1.5px solid;
text-shadow:
0 1px 0 rgba(0,0,0,0.9),
0 2px 3px rgba(0,0,0,0.8);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
0 2px 5px rgba(0,0,0,0.5);
transition: all 0.3s ease;
transform: scaleY(1.08);
}
.ct-tag:hover {
transform: scaleY(1.1) scale(1.02);
}
.ct-tag-power {
background: linear-gradient(135deg, rgba(130,130,140,0.3) 0%, rgba(100,100,110,0.22) 100%);
color: #b8c0c8;
border-color: rgba(150,150,160,0.6);
}
.ct-trust-nemesis {
background: linear-gradient(135deg, rgba(220,50,50,0.35) 0%, rgba(180,30,30,0.28) 100%);
color: #ff7070;
border-color: rgba(220,60,60,0.7);
}
.ct-trust-hostile {
background: linear-gradient(135deg, rgba(200,120,60,0.18) 0%, rgba(160,90,40,0.12) 100%);
color: #d8a070;
border-color: rgba(200,120,60,0.5);
}
.ct-trust-neutral {
background: linear-gradient(135deg, rgba(170,162,146,0.15) 0%, rgba(130,122,110,0.1) 100%);
color: #c0b8a8;
border-color: rgba(170,162,146,0.45);
}
.ct-trust-warm {
background: linear-gradient(135deg, rgba(110,150,190,0.3) 0%, rgba(90,130,170,0.22) 100%);
color: #a8c8e8;
border-color: rgba(120,160,200,0.6);
}
.ct-trust-deep {
background: linear-gradient(135deg, rgba(230,180,110,0.35) 0%, rgba(190,140,80,0.28) 100%);
color: #ffd8a0;
border-color: rgba(240,200,140,0.7);
}
.ct-stat-love {
background: linear-gradient(135deg, rgba(240,90,160,0.22) 0%, rgba(210,70,140,0.16) 100%);
color: #ff98c0;
border-color: rgba(240,110,170,0.55);
}
/* ========================================= */
/* 信息行（桌面版放大） */
/* ========================================= */
.ct-line {
color: #c8b8a8;
font-size: 11px;
font-family: 'Noto Serif SC', serif;
padding: 0 0 0 12px;
margin: 7px 0;
border: 0;
line-height: 1.6;
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
position: relative;
}
.ct-line::before {
content: "·";
position: absolute;
left: 0;
top: 0;
color: rgba(180,140,120,0.5);
font-size: 14px;
}
/* ========================================= */
/* 印象（桌面版放大） */
/* ========================================= */
.ct-quote {
color: #d8c8b8;
font-size: 11.5px;
font-style: italic;
font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
padding: 10px 14px 10px 28px;
margin: 10px 0;
background: rgba(0,0,0,0.25);
border: 0;
border-left: 3px solid rgba(220,150,130,0.4);
border-radius: 0 6px 6px 0;
line-height: 1.7;
position: relative;
box-shadow: 2px 3px 10px rgba(0,0,0,0.4);
text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.ct-quote::before {
content: "❝";
position: absolute;
left: 8px;
top: 8px;
color: rgba(220,150,130,0.35);
font-size: 20px;
font-style: normal;
}
/* ========================================= */
/* 底部（桌面版放大） */
/* ========================================= */
.ct-footer {
color: #9a8a7a;
font-size: 10px;
font-family: 'JetBrains Mono', 'Fira Code', monospace;
padding: 8px 0 0 0;
margin-top: 10px;
border: 0;
border-top: 1px dashed rgba(90,80,70,0.25);
letter-spacing: 0.5px;
line-height: 1.6;
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
/* ========================================= */
/* 核心区 */
/* ========================================= */
.ct-core {
background: transparent;
position: relative;
}
.ct-core .ct-zone-lbl {
color: #f0d090;
border-bottom-color: rgba(240,208,144,0.4);
border-bottom-style: double;
border-bottom-width: 3px;
}
.ct-core .ct-zone-lbl::after {
background: linear-gradient(90deg, #f0d090 0%, rgba(240,208,144,0.6) 60%, transparent 100%);
box-shadow: 0 0 14px rgba(240,208,144,0.6);
width: 42px;
}
.ct-core .ct-entry {
background:
url('data:image/svg+xml,'),
repeating-linear-gradient(90deg, transparent 0px, transparent 1px, rgba(240,208,144,0.04) 1px, rgba(240,208,144,0.04) 2px),
linear-gradient(158deg, #3a2f1a 0%, #2d2415 35%, #352818 70%, #2a2012 100%);
border: 0;
border-top: 5px solid transparent;
border-image: linear-gradient(90deg, #e8c070 0%, #d0a850 30%, #b89040 70%, #a08030 100%) 1;
border-radius: 0 0 8px 8px;
padding: 14px 16px;
margin-bottom: 12px;
position: relative;
box-shadow:
inset 0 3px 0 rgba(240,220,180,0.28),
inset 0 -3px 8px rgba(0,0,0,0.65),
4px 6px 16px rgba(0,0,0,0.8),
8px 12px 32px rgba(0,0,0,0.6);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
clip-path: polygon(
0% 0%, 100% 0%, 100% 96%, 99% 98%, 97.5% 97.5%, 96% 99.5%, 94% 98%,
5% 100%, 3% 98.5%, 1.5% 99.5%, 0% 97%
);
}
.ct-core .ct-entry::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, transparent 0%, rgba(240,208,144,0.6) 15%, rgba(255,240,190,0.8) 50%, rgba(240,208,144,0.6) 85%, transparent 100%);
box-shadow: 0 2px 12px rgba(232,192,112,0.6);
}
.ct-core .ct-entry::after {
content: "核";
position: absolute;
right: 16px;
top: 14px;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 900;
font-family: 'Noto Serif SC', serif;
color: #f8e0a8;
background:
radial-gradient(circle at 35% 35%, rgba(255,250,220,0.18) 0%, transparent 70%),
radial-gradient(circle, #3a2f1a 0%, #2d2415 100%);
border: 3px solid #d0a850;
border-radius: 50%;
text-shadow: 0 1px 0 rgba(0,0,0,0.95), 0 0 12px rgba(248,224,168,0.6);
box-shadow:
inset 0 2px 0 rgba(255,250,220,0.25),
inset 0 -2px 6px rgba(0,0,0,0.7),
0 3px 12px rgba(0,0,0,0.7);
pointer-events: none;
z-index: 1;
}
.ct-core .ct-entry:hover {
transform: translateY(-4px) scale(1.01);
box-shadow:
inset 0 3px 0 rgba(255,240,200,0.38),
inset 0 -3px 8px rgba(0,0,0,0.65),
6px 10px 22px rgba(0,0,0,0.85),
12px 18px 42px rgba(0,0,0,0.65),
0 0 35px rgba(240,208,144,0.3);
}
/* ========================================= */
/* 活跃区 */
/* ========================================= */
.ct-active {
background: transparent;
}
.ct-active .ct-zone-lbl {
color: #b8d0a8;
border-bottom-color: rgba(184,208,168,0.35);
}
.ct-active .ct-zone-lbl::after {
background: linear-gradient(90deg, #b8d0a8 0%, rgba(184,208,168,0.5) 65%, transparent 100%);
box-shadow: 0 0 10px rgba(184,208,168,0.4);
width: 36px;
}
.ct-active .ct-entry {
background:
repeating-linear-gradient(90deg, transparent 0px, transparent 32px, rgba(130,120,90,0.25) 32px, rgba(130,120,90,0.25) 34px, transparent 34px, transparent 66px),
repeating-linear-gradient(0deg, transparent 0px, transparent 1px, rgba(110,100,70,0.04) 1px, rgba(110,100,70,0.04) 2px),
linear-gradient(158deg, #4a4430 0%, #3d3828 35%, #42382a 70%, #38301a 100%);
border: 0;
border-left: 5px solid transparent;
border-image: linear-gradient(180deg, #9ab088 0%, #7a9068 30%, #5a7048 70%, #4a6038 100%) 1;
border-radius: 0 8px 8px 0;
padding: 12px 14px;
margin-bottom: 12px;
position: relative;
box-shadow:
inset 3px 0 0 rgba(184,208,168,0.15),
3px 5px 14px rgba(0,0,0,0.7),
6px 10px 28px rgba(0,0,0,0.5);
transition: all 0.4s ease;
clip-path: polygon(0% 2%, 1% 0.5%, 100% 0%, 100% 98%, 99% 99.5%, 98% 98.5%, 2% 100%, 0.5% 99%, 0% 97%);
}
.ct-active .ct-entry::after {
content: "活";
position: absolute;
right: 14px;
top: 12px;
padding: 2px 10px;
font-size: 10px;
font-weight: 900;
font-family: 'Noto Serif SC', serif;
color: #8a7a58;
background: linear-gradient(138deg, rgba(184,208,168,0.25) 0%, rgba(160,184,144,0.15) 100%);
border: 1.5px solid rgba(154,176,136,0.5);
border-radius: 4px;
text-shadow: 0 1px 0 rgba(40,30,20,0.8), 0 2px 3px rgba(0,0,0,0.8);
box-shadow: inset 0 1px 0 rgba(220,240,200,0.15), 2px 2px 6px rgba(0,0,0,0.5);
pointer-events: none;
transform: rotate(-3deg);
}
.ct-active .ct-entry:hover {
transform: translateY(-3px);
box-shadow:
inset 3px 0 0 rgba(184,208,168,0.22),
5px 8px 18px rgba(0,0,0,0.75),
10px 14px 35px rgba(0,0,0,0.55),
0 0 25px rgba(184,208,168,0.15);
}
/* ========================================= */
/* 休眠区 */
/* ========================================= */
.ct-dormant {
background: transparent;
}
.ct-dormant .ct-zone-lbl {
color: #8a7a6a;
border-bottom-color: rgba(138,122,106,0.28);
border-bottom-style: dotted;
border-bottom-width: 2px;
opacity: 0.8;
}
.ct-dormant .ct-zone-lbl::after {
background: linear-gradient(90deg, rgba(138,122,106,0.5) 0%, transparent 100%);
opacity: 0.5;
width: 30px;
}
.ct-dormant .ct-entry {
background:
repeating-linear-gradient(90deg, transparent 0px, transparent 2px, rgba(90,80,70,0.12) 2px, rgba(90,80,70,0.12) 3px),
repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(90,80,70,0.1) 2px, rgba(90,80,70,0.1) 3px),
linear-gradient(158deg, #2d2520 0%, #251f1a 35%, #2a2218 70%, #1f1810 100%);
border: 2px solid rgba(90,80,70,0.35);
border-left: 3px solid rgba(106,90,74,0.3);
border-radius: 6px;
padding: 12px 14px;
margin-bottom: 12px;
position: relative;
opacity: 0.5;
filter: grayscale(0.75) brightness(0.88);
box-shadow: 2px 4px 12px rgba(0,0,0,0.6), 5px 8px 24px rgba(0,0,0,0.4);
transition: all 0.4s ease;
}
.ct-dormant .ct-entry::after {
content: "眠";
position: absolute;
right: 14px;
top: 12px;
padding: 2px 10px;
font-size: 10px;
font-weight: 900;
font-family: 'Noto Serif SC', serif;
color: rgba(106,90,74,0.6);
background: rgba(0,0,0,0.4);
border: 1.5px solid rgba(90,80,70,0.3);
border-radius: 4px;
text-shadow: 0 1px 2px rgba(0,0,0,0.7);
pointer-events: none;
}
.ct-dormant .ct-entry:hover {
opacity: 0.75;
filter: grayscale(0.45) brightness(0.93);
transform: translateY(-2px);
box-shadow: 3px 6px 16px rgba(0,0,0,0.65), 7px 12px 32px rgba(0,0,0,0.45);
}
.ct-dormant .ct-name {
text-decoration: line-through;
text-decoration-color: rgba(106,90,74,0.5);
text-decoration-thickness: 2px;
text-decoration-style: wavy;
}
/* ========================================= */
/* 安息区：灵位牌（桌面版放大） */
/* ========================================= */
.ct-grave {
background: transparent;
position: relative;
}
.ct-grave::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 500px 250px at 50% 50%, rgba(50,40,30,0.18) 0%, transparent 70%);
pointer-events: none;
border-radius: 10px;
}
.ct-grave .ct-zone-lbl {
color: #a89888;
border-bottom-color: rgba(168,152,136,0.28);
border-bottom-style: double;
border-bottom-width: 3px;
}
.ct-grave .ct-zone-lbl::after {
background: linear-gradient(90deg, rgba(168,152,136,0.5) 0%, transparent 100%);
opacity: 0.7;
width: 34px;
}
.grave-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 16px;
justify-items: center;
}
.grave-entry {
width: 130px;
background:
repeating-linear-gradient(90deg, transparent 0px, transparent 2px, rgba(110,70,50,0.05) 2px, rgba(110,70,50,0.05) 3px),
linear-gradient(165deg, #3d1210 0%, #2d0e0c 40%, #3a1008 75%, #2a0c06 100%);
border: 0;
border-top: 5px solid transparent;
border-image: linear-gradient(90deg, #9a6a48 0%, #7a4a28 30%, #6a3a18 70%, #5a2a08 100%) 1;
border-radius: 0 0 8px 8px;
padding: 16px 12px 12px;
position: relative;
box-shadow:
inset 0 3px 0 rgba(220,170,140,0.15),
inset 0 -3px 8px rgba(0,0,0,0.65),
6px 10px 24px rgba(0,0,0,0.85),
12px 16px 42px rgba(0,0,0,0.65);
transition: all 0.4s ease;
clip-path: polygon(6% 0%, 94% 0%, 100% 6%, 100% 94%, 98% 97%, 96% 99%, 94% 100%, 6% 100%, 4% 99%, 2% 97%, 0% 94%, 0% 6%);
}
.grave-entry::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, transparent 0%, rgba(240,208,144,0.4) 20%, rgba(255,240,200,0.6) 50%, rgba(240,208,144,0.4) 80%, transparent 100%);
box-shadow: 0 2px 10px rgba(232,192,112,0.5);
}
.grave-entry::after {
content: "";
position: absolute;
bottom: -6px;
left: 10px;
right: 10px;
height: 6px;
background: rgba(0,0,0,0.75);
border-radius: 50%;
filter: blur(5px);
}
.grave-entry:hover {
transform: translateY(-4px);
box-shadow:
inset 0 3px 0 rgba(240,190,160,0.22),
inset 0 -3px 8px rgba(0,0,0,0.65),
8px 14px 28px rgba(0,0,0,0.9),
14px 20px 50px rgba(0,0,0,0.7),
0 0 26px rgba(240,208,144,0.15);
}
.grave-name {
color: #f0d090;
font-size: 14px;
font-weight: 900;
font-family: 'Long Cang', 'Noto Serif SC', serif;
letter-spacing: 2px;
text-align: center;
text-shadow:
0 -1px 0 rgba(100,70,40,0.7),
0 1px 0 rgba(0,0,0,0.95),
0 2px 0 rgba(0,0,0,0.8),
0 4px 10px rgba(0,0,0,1),
0 0 16px rgba(240,208,144,0.4);
margin-bottom: 8px;
transform: scaleY(1.14);
}
.grave-info {
color: #a89888;
font-size: 9.5px;
font-family: 'Noto Serif SC', serif;
text-align: center;
letter-spacing: 0.6px;
margin-bottom: 10px;
opacity: 0.92;
text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
/* 安息区标签 */
.grave-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
margin: 8px 0;
}
.grave-tags .ct-tag {
padding: 0;
font-size: 9px;
font-weight: 700;
font-family: 'ZCOOL QingKe HuangYou', 'Noto Serif SC', serif;
letter-spacing: 0.6px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
opacity: 0.6;
text-shadow:
0 -1px 0 rgba(80,60,40,0.5),
0 1px 0 rgba(0,0,0,0.9),
0 2px 3px rgba(0,0,0,1);
transform: scaleY(1.05);
transition: opacity 0.3s ease;
}
.grave-tags .ct-tag:hover {
opacity: 0.8;
transform: scaleY(1.05);
}
.grave-tags .ct-tag-power-grave { color: #888890; }
.grave-tags .ct-trust-nemesis { color: rgba(255,112,112,0.6); }
.grave-tags .ct-trust-hostile { color: rgba(216,160,112,0.6); }
.grave-tags .ct-trust-neutral { color: rgba(192,184,168,0.6); }
.grave-tags .ct-trust-warm { color: rgba(168,200,232,0.6); }
.grave-tags .ct-trust-deep { color: rgba(255,216,160,0.6); }
.grave-tags .ct-stat-love { color: rgba(255,152,192,0.5); }
.grave-cause {
color: #9a8a7a;
font-size: 10px;
font-family: 'ZCOOL XiaoWei', serif;
text-align: center;
font-style: italic;
letter-spacing: 0.5px;
padding: 8px 10px;
margin: 8px 0;
background: rgba(0,0,0,0.4);
border-radius: 5px;
line-height: 1.6;
text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.grave-rel {
color: #b09888;
font-size: 9.5px;
font-family: 'Noto Serif SC', serif;
text-align: center;
letter-spacing: 0.5px;
padding: 6px 8px;
margin: 7px 0;
line-height: 1.5;
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.grave-loyal {
color: #a89888;
font-size: 9.5px;
font-family: 'Noto Serif SC', serif;
text-align: center;
letter-spacing: 0.5px;
padding: 5px 8px;
opacity: 0.88;
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.grave-mem {
color: #e8c890;
font-size: 11px;
font-weight: 700;
font-family: 'Noto Serif SC', serif;
text-align: center;
margin-top: 10px;
letter-spacing: 1.2px;
text-shadow: 0 0 8px rgba(232,200,144,0.5);
animation: incense-spiral 6s ease-in-out infinite;
}
@keyframes incense-spiral {
0%, 100% { opacity: 0.7; text-shadow: 0 0 8px rgba(232,200,144,0.5); transform: translateY(0); }
20% { opacity: 0.92; text-shadow: 0 0 16px rgba(232,200,144,0.7), 0 0 28px rgba(200,160,100,0.35); transform: translateY(-2px); }
40% { opacity: 0.6; text-shadow: 0 0 6px rgba(232,200,144,0.4); transform: translateY(-3px); }
60% { opacity: 0.88; text-shadow: 0 0 14px rgba(232,200,144,0.65), 0 0 24px rgba(200,160,100,0.3); transform: translateY(-2px); }
80% { opacity: 0.65; text-shadow: 0 0 5px rgba(232,200,144,0.35); transform: translateY(-1px); }
}
/* ========================================= */
/* 势力录：桌面版放大（折叠优化 & 战旗版） */
/* ========================================= */
.ct-faction {
background:
radial-gradient(ellipse 600px 200px at 50% 0%, rgba(220,80,60,0.12) 0%, transparent 70%),
radial-gradient(ellipse 400px 150px at 80% 30%, rgba(180,120,80,0.08) 0%, transparent 65%),
repeating-linear-gradient(135deg, transparent 0px, transparent 2px, rgba(80,50,40,0.05) 2px, rgba(80,50,40,0.05) 3px),
linear-gradient(160deg, #3a1a10 0%, #2e1410 35%, #3c1808 65%, #2a1008 100%);
border: 2px solid rgba(140,80,60,0.5);
border-radius: 8px;
padding: 0;
margin-top: 16px;
box-shadow:
inset 0 2px 0 rgba(220,160,120,0.1),
0 5px 18px rgba(0,0,0,0.7);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.ct-faction[open] {
padding-bottom: 14px;
box-shadow:
inset 0 2px 0 rgba(220,160,120,0.1),
inset 0 -2px 8px rgba(0,0,0,0.6),
0 8px 24px rgba(0,0,0,0.8),
0 10px 32px rgba(220,80,60,0.2);
}
.ct-faction::before {
content: "";
position: absolute;
inset: -50%;
background:
radial-gradient(circle at 30% 40%, rgba(220,100,80,0.15) 0%, transparent 35%),
radial-gradient(circle at 70% 70%, rgba(180,120,90,0.12) 0%, transparent 30%);
animation: ember-drift 20s ease-in-out infinite;
pointer-events: none;
opacity: 0.7;
}
@keyframes ember-drift {
0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.7; }
33% { transform: translate(15%, -10%) rotate(120deg); opacity: 0.85; }
66% { transform: translate(-10%, 12%) rotate(240deg); opacity: 0.6; }
}
.ct-faction::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent 0%, rgba(220,120,100,0.5) 15%, rgba(255,160,120,0.7) 50%, rgba(220,120,100,0.5) 85%, transparent 100%);
box-shadow: 0 2px 10px rgba(220,100,80,0.5);
z-index: 2;
pointer-events: none;
}
.ct-faction summary {
background:
linear-gradient(90deg, rgba(220,100,80,0.18) 0%, rgba(180,80,60,0.1) 20%, transparent 50%, rgba(180,80,60,0.1) 80%, rgba(220,100,80,0.18) 100%),
linear-gradient(90deg, #2a1008 0%, #3a1810 50%, #2a1008 100%);
color: #e8b8a8;
padding: 12px 16px;
font-size: 13px;
font-weight: 700;
font-family: 'Noto Serif SC', serif;
letter-spacing: 2px;
cursor: pointer;
position: relative;
transition: all 0.35s ease;
text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 14px rgba(232,184,168,0.3);
box-shadow: inset 0 1px 0 rgba(220,160,140,0.12);
border-bottom: none;
border-radius: 6px;
margin-bottom: 0;
}
.ct-faction[open] summary {
border-bottom: 2px solid rgba(180,80,60,0.6);
border-radius: 6px 6px 0 0;
margin-bottom: 14px;
box-shadow: inset 0 1px 0 rgba(220,160,140,0.12), inset 0 -1px 3px rgba(0,0,0,0.5);
}
.ct-faction summary:hover {
color: #ffd0c0;
background:
linear-gradient(90deg, rgba(240,120,100,0.25) 0%, rgba(200,100,80,0.15) 20%, transparent 50%, rgba(200,100,80,0.15) 80%, rgba(240,120,100,0.25) 100%),
linear-gradient(90deg, #2e1410 0%, #3e1a12 50%, #2e1410 100%);
text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 18px rgba(255,208,192,0.4);
}
.ct-faction summary::-webkit-details-marker { display: none; }
.ct-faction summary::before {
content: "🏴";
margin-right: 8px;
font-size: 14px;
display: inline-block;
text-shadow: 0 0 10px rgba(216,160,144,0.6);
animation: flag-shimmer 4s ease-in-out infinite;
}
@keyframes flag-shimmer {
0%, 100% { opacity: 1; text-shadow: 0 0 10px rgba(216,160,144,0.6); transform: scale(1); }
50% { opacity: 0.85; text-shadow: 0 0 16px rgba(240,180,160,0.8); transform: scale(1.05); }
}
.faction-entry {
background:
repeating-linear-gradient(90deg, transparent 0px, transparent 1px, rgba(220,180,160,0.04) 1px, rgba(220,180,160,0.04) 2px),
linear-gradient(125deg, transparent 0%, transparent 48%, rgba(200,160,140,0.1) 48.5%, rgba(200,160,140,0.1) 49%, transparent 49.5%, transparent 100%),
linear-gradient(155deg, #4d3828 0%, #453428 40%, #4a382a 75%, #3e3022 100%);
border: 2px solid rgba(180,140,120,0.5);
border-left: 4px solid #c8a088;
border-radius: 6px;
padding: 10px 12px;
margin: 0 12px 14px 12px;
position: relative;
overflow: hidden;
box-shadow:
inset 0 2px 0 rgba(240,200,180,0.18),
inset -2px 0 0 rgba(200,160,140,0.4),
inset 0 -2px 5px rgba(0,0,0,0.5),
0 3px 10px rgba(0,0,0,0.6),
0 6px 20px rgba(0,0,0,0.4);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
animation: faction-breathe 8s ease-in-out infinite;
}
.faction-entry:last-child { margin-bottom: 0; }
@keyframes faction-breathe {
0%, 100% { box-shadow: inset 0 2px 0 rgba(240,200,180,0.18), inset -2px 0 0 rgba(200,160,140,0.4), inset 0 -2px 5px rgba(0,0,0,0.5), 0 3px 10px rgba(0,0,0,0.6), 0 6px 20px rgba(0,0,0,0.4); }
50% { box-shadow: inset 0 2px 0 rgba(240,200,180,0.25), inset -2px 0 0 rgba(220,180,160,0.5), inset 0 -2px 5px rgba(0,0,0,0.5), 0 4px 13px rgba(0,0,0,0.65), 0 8px 26px rgba(0,0,0,0.45), 0 0 18px rgba(200,160,140,0.1); }
}
.faction-entry::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #d8b8a0 0%, #c8a088 25%, #a88a70 50%, #886a50 75%, #705a40 100%); border-radius: 6px 0 0 6px; box-shadow: inset -2px 0 3px rgba(0,0,0,0.5), 2px 0 8px rgba(200,160,140,0.4); animation: flag-gleam 6s ease-in-out infinite;
}
@keyframes flag-gleam {
0%, 100% { opacity: 1; }
50% { opacity: 0.85; box-shadow: inset -2px 0 3px rgba(0,0,0,0.5), 2px 0 12px rgba(220,180,160,0.6); }
}
.faction-entry::after {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(240,200,180,0.35) 20%, rgba(255,220,200,0.55) 50%, rgba(240,200,180,0.35) 80%, transparent 100%); border-radius: 6px 6px 0 0; animation: gleam-flow 5s linear infinite;
}
@keyframes gleam-flow {
0% { opacity: 0.6; transform: translateX(-100%); }
50% { opacity: 0.9; }
100% { opacity: 0.6; transform: translateX(100%); }
}
.faction-entry:hover {
border-left-color: #e8c8b0; transform: translateY(-3px) scale(1.01); box-shadow: inset 0 2px 0 rgba(255,220,200,0.3), inset -2px 0 0 rgba(240,200,180,0.6), inset 0 -2px 5px rgba(0,0,0,0.5), 0 5px 16px rgba(0,0,0,0.7), 0 10px 32px rgba(0,0,0,0.5), 0 0 28px rgba(200,160,140,0.25); animation: none;
}
.faction-name {
color: #ffead8; font-size: 13px; font-weight: 800; font-family: 'Noto Serif SC', serif; letter-spacing: 1.8px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(180,160,140,0.4); text-shadow: 0 2px 5px rgba(0,0,0,1), 0 1px 0 rgba(120,100,80,0.6), 0 0 16px rgba(255,234,216,0.3); position: relative; animation: name-glow 6s ease-in-out infinite;
}
@keyframes name-glow {
0%, 100% { text-shadow: 0 2px 5px rgba(0,0,0,1), 0 1px 0 rgba(120,100,80,0.6), 0 0 16px rgba(255,234,216,0.3); }
50% { text-shadow: 0 2px 5px rgba(0,0,0,1), 0 1px 0 rgba(140,120,100,0.7), 0 0 24px rgba(255,234,216,0.45), 0 0 36px rgba(220,200,180,0.2); }
}
.faction-name::before {
content: "▌"; color: rgba(240,200,180,0.7); margin-right: 8px; font-size: 12px; text-shadow: 0 0 10px rgba(240,200,180,0.5); animation: marker-pulse 3s ease-in-out infinite;
}
@keyframes marker-pulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; color: rgba(255,220,200,0.9); }
}
.faction-leader {
color: #e8d8c8; font-size: 11px; padding: 8px 10px; margin: 8px 0; background: linear-gradient(90deg, rgba(220,100,80,0.12) 0%, transparent 100%), rgba(0,0,0,0.35); border-left: 3px solid rgba(220,120,100,0.6); border-radius: 4px; line-height: 1.7; box-shadow: inset 1px 0 0 rgba(240,140,120,0.25), 0 2px 6px rgba(0,0,0,0.4); position: relative; overflow: hidden;
}
.faction-leader::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, rgba(240,120,100,0.7) 0%, rgba(200,80,60,0.5) 100%); animation: leader-mark 4s ease-in-out infinite;
}
@keyframes leader-mark {
0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(220,100,80,0.5); }
50% { opacity: 0.75; box-shadow: 0 0 14px rgba(240,120,100,0.7); }
}
.faction-stance {
display: inline-block; padding: 4px 12px; margin: 10px 0; font-size: 11px; font-weight: 800; font-family: 'Noto Serif SC', serif; letter-spacing: 1.4px; border-radius: 4px; border: 2px solid; position: relative; text-shadow: 0 2px 4px rgba(0,0,0,1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 3px 8px rgba(0,0,0,0.6); transition: all 0.35s ease; background: linear-gradient(135deg, rgba(140,140,140,0.3) 0%, rgba(110,110,110,0.2) 100%); color: #d8d8d8; border-color: rgba(170,170,170,0.7);
}
.faction-stance[data-stance="敌对"] {
background: radial-gradient(ellipse at 50% 50%, rgba(255,80,80,0.2) 0%, transparent 70%), linear-gradient(135deg, rgba(240,60,60,0.45) 0%, rgba(200,40,40,0.35) 100%); color: #ff8888; border-color: rgba(255,80,80,0.85); animation: hostile-rage 3s ease-in-out infinite;
}
@keyframes hostile-rage {
0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 3px 8px rgba(0,0,0,0.6), 0 0 14px rgba(240,60,60,0.6); }
50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 3px 8px rgba(0,0,0,0.6), 0 0 28px rgba(255,100,100,1), 0 0 45px rgba(240,60,60,0.7); transform: scale(1.03); }
}
.faction-stance[data-stance="中立"] {
background: linear-gradient(135deg, rgba(150,150,150,0.35) 0%, rgba(120,120,120,0.25) 100%); color: #d8d8d8; border-color: rgba(170,170,170,0.7);
}
.faction-stance[data-stance="友善"] {
background: radial-gradient(ellipse at 50% 50%, rgba(140,180,220,0.18) 0%, transparent 70%), linear-gradient(135deg, rgba(120,160,200,0.45) 0%, rgba(100,140,180,0.35) 100%); color: #b8d8f8; border-color: rgba(140,180,220,0.8); animation: friendly-shimmer 5s ease-in-out infinite;
}
@keyframes friendly-shimmer {
0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 3px 8px rgba(0,0,0,0.6), 0 0 12px rgba(120,160,200,0.3); }
50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 3px 8px rgba(0,0,0,0.6), 0 0 22px rgba(140,180,220,0.5); }
}
.faction-stance[data-stance="盟友"] {
background: radial-gradient(ellipse at 50% 50%, rgba(255,220,160,0.2) 0%, transparent 70%), linear-gradient(135deg, rgba(240,190,120,0.5) 0%, rgba(200,150,90,0.4) 100%); color: #ffe0b0; border-color: rgba(255,220,160,0.85); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 3px 8px rgba(0,0,0,0.6), 0 0 16px rgba(240,190,120,0.4); animation: ally-radiance 4s ease-in-out infinite;
}
@keyframes ally-radiance {
0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 3px 8px rgba(0,0,0,0.6), 0 0 16px rgba(240,190,120,0.4); }
50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 3px 8px rgba(0,0,0,0.6), 0 0 28px rgba(255,220,160,0.55), 0 0 42px rgba(240,190,120,0.3); }
}
.faction-stance[data-stance="已效忠"] {
background: radial-gradient(ellipse at 50% 50%, rgba(180,140,220,0.2) 0%, transparent 70%), linear-gradient(135deg, rgba(160,120,200,0.5) 0%, rgba(130,90,170,0.4) 100%); color: #e8c8ff; border-color: rgba(180,140,220,0.85); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 3px 8px rgba(0,0,0,0.6), 0 0 18px rgba(160,120,200,0.4); animation: loyalty-oath 5s ease-in-out infinite;
}
@keyframes loyalty-oath {
0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 3px 8px rgba(0,0,0,0.6), 0 0 18px rgba(160,120,200,0.4); }
50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 3px 8px rgba(0,0,0,0.6), 0 0 30px rgba(180,140,220,0.6), 0 0 45px rgba(160,120,200,0.35); }
}
.faction-power {
color: #d8c8b8; font-size: 11px; padding: 9px 10px; margin: 9px 0; background: linear-gradient(90deg, rgba(80,70,60,0.35) 0%, transparent 50%, rgba(80,70,60,0.35) 100%), rgba(0,0,0,0.3); border-radius: 4px; line-height: 1.7; box-shadow: inset 0 1px 0 rgba(120,100,80,0.18), 0 2px 6px rgba(0,0,0,0.5); position: relative; overflow: hidden;
}
.faction-power::before {
content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 0%, transparent 40%, rgba(120,100,80,0.15) 50%, transparent 60%, transparent 100%); animation: power-surge 6s linear infinite;
}
@keyframes power-surge {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.faction-contact {
color: #b8a898; font-size: 10px; padding: 6px 9px; margin: 8px 0; background: rgba(0,0,0,0.25); border-radius: 4px; font-family: SFMono-Regular, Consolas, monospace; letter-spacing: 0.4px; line-height: 1.6; box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.faction-note {
color: #e0d0c0; font-size: 11px; font-style: italic; padding: 9px 10px 9px 28px; margin: 9px 0 0; background: linear-gradient(90deg, rgba(240,180,140,0.1) 0%, transparent 100%), rgba(0,0,0,0.35); border-left: 3px solid rgba(240,200,160,0.7); border-radius: 4px; line-height: 1.7; position: relative; box-shadow: inset 1px 0 0 rgba(255,220,180,0.25), 0 2px 6px rgba(0,0,0,0.4);
}
.faction-note::before {
content: "⚠"; position: absolute; left: 8px; top: 9px; color: rgba(255,220,180,0.8); font-size: 13px; font-style: normal; text-shadow: 0 0 10px rgba(240,200,160,0.6); animation: warning-flash 3s ease-in-out infinite;
}
@keyframes warning-flash {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; color: rgba(255,240,200,1); }
}
/* ========================================= */
/* 移动端适配（完整保留你原版的所有规则） */
/* ========================================= */
@media (max-width: 768px) {
.ct-sys { margin: 10px 0; border-radius: 10px; }
.ct-sys summary { padding: 8px 14px; font-size: 11px; letter-spacing: 2px; }
.ct-zone { padding: 10px 8px; }
.ct-zone-lbl { font-size: 9px; letter-spacing: 2px; padding-bottom: 6px; margin-bottom: 10px; }
.ct-zone-lbl::after { width: 24px; height: 2px; }
.ct-marriage::before { font-size: 140px; }
.ct-marriage .ct-zone-lbl::after { width: 30px; }
.ct-marriage .ct-entry { padding: 7px 9px; margin-bottom: 8px; border-radius: 0 6px 6px 0; }
.ct-marriage .ct-entry::before { font-size: 24px; right: 10px; top: 10px; }
.ct-head { gap: 6px; margin-bottom: 8px; }
.ct-marriage .ct-rank { font-size: 8.5px; padding: 2px 7px; border-radius: 10px; }
.ct-name { font-size: 12px; letter-spacing: 1.5px; }
.ct-meta { font-size: 9px; }
.ct-sleep { font-size: 9px; }
.ct-desc { font-size: 10px; padding-left: 10px; margin: 8px 0; line-height: 1.6; }
.ct-desc::before { font-size: 8px; }
.ct-tags { gap: 5px; margin: 8px 0; }
.ct-tag { font-size: 8.5px; padding: 1px 7px; border-radius: 10px; }
.ct-line { font-size: 9.5px; padding-left: 8px; margin: 5px 0; line-height: 1.5; }
.ct-quote { font-size: 10px; padding: 7px 10px 7px 22px; margin: 8px 0; border-radius: 0 5px 5px 0; line-height: 1.6; }
.ct-quote::before { font-size: 16px; left: 6px; top: 6px; }
.ct-footer { font-size: 8.5px; padding-top: 6px; margin-top: 8px; }
.ct-core .ct-zone-lbl::after { width: 35px; }
.ct-core .ct-entry { padding: 10px 12px; margin-bottom: 8px; border-radius: 0 0 6px 6px; }
.ct-core .ct-entry::after { width: 28px; height: 28px; font-size: 11px; right: 12px; top: 10px; border-width: 2.5px; }
.ct-active .ct-zone-lbl::after { width: 30px; }
.ct-active .ct-entry { padding: 8px 10px; margin-bottom: 8px; border-radius: 0 6px 6px 0; }
.ct-active .ct-entry::after { font-size: 8.5px; padding: 1px 7px; right: 10px; top: 8px; }
.ct-dormant .ct-zone-lbl::after { width: 26px; }
.ct-dormant .ct-entry { padding: 8px 10px; margin-bottom: 8px; border-radius: 5px; }
.ct-dormant .ct-entry::after { font-size: 8.5px; padding: 1px 7px; right: 10px; top: 8px; }
.ct-grave .ct-zone-lbl::after { width: 28px; }
.grave-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }
.grave-entry { width: 90px; padding: 10px 7px 7px; border-radius: 0 0 6px 6px; }
.grave-entry::before { height: 4px; }
.grave-entry::after { height: 5px; bottom: -5px; left: 8px; right: 8px; }
.grave-name { font-size: 10.5px; margin-bottom: 6px; }
.grave-info { font-size: 8px; margin-bottom: 8px; }
.grave-tags { gap: 5px; margin: 6px 0; }
.grave-tags .ct-tag { font-size: 7px; }
.grave-cause { font-size: 8.5px; padding: 6px 7px; margin: 6px 0; }
.grave-rel { font-size: 8px; padding: 4px 6px; margin: 5px 0; }
.grave-loyal { font-size: 8px; padding: 3px 6px; }
.grave-mem { font-size: 9px; margin-top: 8px; }
/* 势力录移动端 */
.ct-faction { padding: 0; margin-top: 12px; border-radius: 6px; }
.ct-faction[open] { padding-bottom: 10px; }
.ct-faction summary { padding: 10px 12px; font-size: 11.5px; letter-spacing: 1.5px; border-radius: 4px; }
.ct-faction[open] summary { border-radius: 4px 4px 0 0; margin-bottom: 10px; }
.ct-faction summary::before { font-size: 12px; margin-right: 6px; }
.faction-entry { padding: 7px 8px; margin: 0 8px 10px 8px; border-radius: 5px; border-left-width: 3px; }
.faction-entry::before { width: 3px; }
.faction-name { font-size: 10.5px; letter-spacing: 1.2px; margin-bottom: 6px; padding-bottom: 5px; }
.faction-name::before { font-size: 10px; margin-right: 6px; }
.faction-leader { font-size: 9.5px; padding: 6px 9px; margin: 6px 0; border-left-width: 2px; }
.faction-leader::before { width: 2px; }
.faction-stance { font-size: 9.5px; padding: 2px 8px; margin: 8px 0; letter-spacing: 1px; }
.faction-power { font-size: 9.5px; padding: 7px 9px; margin: 7px 0; }
.faction-contact { font-size: 8.5px; padding: 5px 8px; margin: 6px 0; }
.faction-note { font-size: 9.5px; padding: 7px 9px 7px 24px; margin: 7px 0 0; border-left-width: 2px; }
.faction-note::before { font-size: 11px; left: 6px; top: 7px; }
}
@media (max-width: 480px) {
.ct-sys { margin: 8px 0; }
.ct-sys summary { padding: 6px 12px; font-size: 10px; letter-spacing: 1.5px; }
.ct-zone { padding: 8px 7px; }
.ct-marriage .ct-entry, .ct-core .ct-entry, .ct-active .ct-entry { padding: 6px 8px; margin-bottom: 7px; }
.ct-marriage .ct-rank { font-size: 8px; padding: 1px 6px; }
.ct-name { font-size: 10.5px; }
.ct-meta { font-size: 8.5px; }
.ct-desc { font-size: 9px; }
.ct-tag { font-size: 7.5px; padding: 1px 5px; }
.ct-line { font-size: 9px; }
.ct-quote { font-size: 9px; padding: 6px 8px 6px 20px; }
.ct-footer { font-size: 8px; }
.grave-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.grave-entry { width: 100%; max-width: 100px; }
/* 势力录最小屏 */
.ct-faction { padding: 0; margin-top: 10px; }
.ct-faction[open] { padding-bottom: 8px; }
.ct-faction summary { padding: 8px 10px; font-size: 10.5px; }
.faction-entry { padding: 6px 7px; margin: 0 6px 8px 6px; }
.faction-name { font-size: 10px; }
.faction-leader, .faction-power, .faction-note { font-size: 8.5px; }
.faction-stance { font-size: 8.5px; padding: 2px 7px; }
}
/* ========================================= */
/* 字体引入 */
/* ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Long+Cang&family=Liu+Jian+Mao+Cao&family=Ma+Shan+Zheng&family=ZCOOL+QingKe+HuangYou&family=ZCOOL+XiaoWei&family=Noto+Serif+SC:wght@400;600;700;900&family=JetBrains+Mono:wght@400;600&family=Fira+Code:wght@400;600&display=swap');
.ct-sys, .ct-sys * {
font-feature-settings: "liga" 1, "calt" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ========================================= */
/* 风声系统：江湖告示栏 [折叠优化版] */
/* ========================================= */
.rumor-sys {
background:
/* 木板纹理 */
repeating-linear-gradient(0deg, transparent 0px, transparent 4px, rgba(80,60,40,0.04) 4px, rgba(80,60,40,0.04) 5px),
repeating-linear-gradient(90deg, transparent 0px, transparent 120px, rgba(60,40,20,0.06) 120px, rgba(60,40,20,0.06) 122px),
/* 木板底色 */
linear-gradient(165deg, #3a2f20 0%, #2d2418 50%, #342820 100%);
border: 3px solid #5a4a35;
border-radius: 8px; /* 稍微调小一点圆角，更显精致 */
margin: 12px 0;
padding: 0;
position: relative;
/* 折叠时的轻量阴影：显得扁平、不累赘 */
box-shadow:
inset 0 2px 0 rgba(100,80,60,0.15),
0 3px 8px rgba(0,0,0,0.4);
transition: box-shadow 0.3s ease, padding 0.3s;
}
/* 木板顶部磨损 */
.rumor-sys::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, rgba(100,80,60,0.3), rgba(120,100,80,0.2) 30%, rgba(100,80,60,0.15) 50%, rgba(120,100,80,0.2) 70%, rgba(100,80,60,0.3));
border-radius: 5px 5px 0 0;
z-index: 2;
pointer-events: none;
}
/* 告示栏展开时：加深阴影和底部内边距 */
.rumor-sys[open] {
padding-bottom: 14px;
box-shadow:
inset 0 2px 0 rgba(100,80,60,0.15),
inset 0 -3px 8px rgba(0,0,0,0.5),
0 6px 20px rgba(0,0,0,0.6),
0 10px 40px rgba(0,0,0,0.4);
}
/* 标题栏（折叠时的本体） */
.rumor-sys summary {
background: linear-gradient(90deg, #2d2418 0%, #342820 50%, #2d2418 100%);
color: #c8a87a;
padding: 11px 16px; /* 折叠时压扁一点 */
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
cursor: pointer;
position: relative;
transition: all 0.3s;
/* 关键修复：去掉固定下边距，圆角闭合时全部变圆 */
margin-bottom: 0;
border-bottom: none;
border-radius: 5px;
}
/* 只有展开时：才显示木板分隔线、才把下半部撑开！ */
.rumor-sys[open] summary {
border-bottom: 2px solid #5a4a35;
border-radius: 5px 5px 0 0; /* 展开时底边变直，接壤纸张 */
margin-bottom: 14px;
padding: 14px 16px; /* 展开时撑高一点，霸气 */
}
.rumor-sys summary:hover {
color: #e8c89a;
background: linear-gradient(90deg, #342820 0%, #3a2f20 50%, #342820 100%);
}
.rumor-sys summary::-webkit-details-marker { display: none; }
.rumor-sys summary::before {
content: "🌬 ";
margin-right: 6px;
filter: grayscale(0.2) brightness(1.1);
}
/* 钉子装饰移入 summary 内部，确保对齐完美 */
.rumor-sys summary::after {
content: "● \00A0 ● \00A0 ● \00A0 ●"; /* 用不换行空格分隔，比超大letter-spacing更稳定 */
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
color: rgba(30,20,10,0.6);
font-size: 7px;
letter-spacing: 2px;
text-shadow:
0 1px 1px rgba(255,255,255,0.1),
inset 0 1px 1px rgba(0,0,0,0.8);
pointer-events: none;
}
/* ========================================= */
/* 单条告示（保留你的原版精美纸张设计） */
/* ========================================= */
.rumor-entry {
background:
repeating-linear-gradient(0deg, transparent 0px, transparent 1px, rgba(100,80,60,0.02) 1px, rgba(100,80,60,0.02) 2px),
linear-gradient(160deg, #f5ead0 0%, #ebe0c8 50%, #f0e5cd 100%);
color: #3a3020;
font-size: 12px;
line-height: 1.75;
padding: 14px 18px 14px 16px;
margin: 0 14px 12px 14px;
border: 1px solid #d4c4a8;
border-radius: 4px;
position: relative;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.6),
0 3px 8px rgba(0,0,0,0.35),
0 6px 16px rgba(0,0,0,0.25),
0 -2px 3px rgba(0,0,0,0.15) inset;
transition: all 0.3s ease;
}
.rumor-entry::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: repeating-linear-gradient(90deg, transparent 0px, transparent 2px, rgba(180,160,130,0.4) 2px, rgba(180,160,130,0.4) 3px, transparent 3px, transparent 8px);
}
.rumor-entry::after {
content: "●";
position: absolute;
top: 8px; right: 12px;
width: 10px; height: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 8px;
color: #5a4a35;
background: radial-gradient(circle, #3a3020 0%, #2a2018 60%, #1a1008 100%);
border-radius: 50%;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
pointer-events: none;
}
.rumor-entry:hover {
transform: translateY(-2px) rotate(0.5deg);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 12px rgba(0,0,0,0.4), 0 8px 22px rgba(0,0,0,0.3);
}
/* ========================================= */
/* 来源印章（保留你的原版） */
/* ========================================= */
.rumor-src {
display: inline-block;
color: #a03030;
font-size: 11px;
font-weight: 700;
font-family: 'STKaiti', 'Noto Serif SC', serif;
letter-spacing: 0.8px;
padding: 2px 10px;
margin-right: 8px;
background: radial-gradient(ellipse at center, rgba(160,48,48,0.15) 0%, rgba(139,0,0,0.08) 70%, transparent 100%);
border: 1.5px solid rgba(160,48,48,0.4);
border-radius: 3px;
position: relative;
text-shadow: 0 1px 2px rgba(139,0,0,0.3);
box-shadow: inset 0 0 4px rgba(139,0,0,0.15), 0 1px 2px rgba(0,0,0,0.2);
}
.rumor-src::before {
content: ""; position: absolute; inset: -1px; border: 1px solid rgba(160,48,48,0.15); border-radius: 3px; pointer-events: none;
}
.rumor-src::after {
content: ""; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); width: 80%; height: 2px; background: radial-gradient(ellipse at center, rgba(139,0,0,0.08) 0%, transparent 70%); filter: blur(1px);
}
.rumor-src[data-type="官府"] { color: #8b4513; border-color: rgba(139,69,19,0.5); background: radial-gradient(ellipse at center, rgba(139,69,19,0.12) 0%, rgba(120,60,20,0.06) 70%, transparent 100%); }
.rumor-src[data-type="江湖"] { color: #2f4f4f; border-color: rgba(47,79,79,0.5); background: radial-gradient(ellipse at center, rgba(47,79,79,0.12) 0%, rgba(30,60,60,0.06) 70%, transparent 100%); }
.rumor-src[data-type="暗巷"] { color: #483d8b; border-color: rgba(72,61,139,0.5); background: radial-gradient(ellipse at center, rgba(72,61,139,0.12) 0%, rgba(50,40,100,0.06) 70%, transparent 100%); }
.rumor-src[data-type="商会"] { color: #b8860b; border-color: rgba(184,134,11,0.5); background: radial-gradient(ellipse at center, rgba(184,134,11,0.12) 0%, rgba(150,110,10,0.06) 70%, transparent 100%); }
.rumor-entry:nth-child(odd) { transform: rotate(-0.5deg); }
.rumor-entry:nth-child(even) { transform: rotate(0.3deg); }
.rumor-entry:last-child { margin-bottom: 0; }
@media (max-width: 480px) {
.rumor-sys { margin: 10px 0; }
.rumor-sys summary { padding: 10px 14px; font-size: 12.5px; }
.rumor-entry { margin: 0 10px 10px 10px; padding: 12px 14px 12px 12px; font-size: 11.5px; }
.rumor-src { font-size: 10.5px; padding: 2px 8px; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚔ 麾下·私兵 - 玄铁兵符版 (重塑战争质感)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* --- 1. 外层装甲：玄铁重铸 --- */
.power-sys {
margin: 16px 0;
border: none;
/* 刷漆拉丝玄铁底色 */
background:
repeating-linear-gradient(
-45deg,
rgba(0,0,0,0.1) 0px,
rgba(0,0,0,0.1) 2px,
transparent 2px,
transparent 4px
),
linear-gradient(160deg, #2b2724 0%, #1c1917 40%, #151311 100%);
border-radius: 4px;
position: relative;
overflow: hidden;
/* 厚重的金属阴影与外发光 */
box-shadow:
0 8px 24px rgba(0,0,0,0.8),
inset 0 2px 1px rgba(120,105,90,0.2),
inset 0 -2px 6px rgba(0,0,0,0.9),
0 0 0 1px #0a0908,
0 0 0 3px #2a2522;
transition: all 0.3s ease;
}
/* 顶部血槽/青铜沿 */
.power-sys::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg,
#151311 0%,
#8b2020 15%, /* 凝血红 */
#c85a17 50%, /* 淬火铜 */
#8b2020 85%,
#151311 100%
);
box-shadow: 0 1px 5px rgba(200,90,23,0.4);
z-index: 2;
}
/* --- 2. 标题虎符：青铜铭文 --- */
.power-sys > summary {
padding: 14px 18px;
font-size: 14px;
font-weight: 900;
font-family: 'STKaiti', 'KaiTi', 'Noto Serif SC', serif;
color: #d8c2a7;
letter-spacing: 3px;
cursor: pointer;
user-select: none;
background:
linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 40%, rgba(0,0,0,0.4) 100%);
border-bottom: 2px solid #110f0e;
position: relative;
list-style: none;
text-shadow:
0 2px 4px rgba(0,0,0,0.9),
0 0 10px rgba(216,194,167,0.2);
box-shadow: inset 0 -1px 0 rgba(80,70,60,0.3);
transition: all 0.3s ease;
}
.power-sys > summary::-webkit-details-marker { display: none; }
/* 标题图标（用交叉的剑替换你原本的文字前缀，如果没有可以保留这个） */
.power-sys > summary::before {
content: '⚔';
margin-right: 10px;
color: #a33b24;
font-size: 15px;
text-shadow: 0 0 8px rgba(163,59,36,0.6);
}
/* 右侧折叠箭头改造成青铜挂环感 */
.power-sys > summary::after {
content: '▼';
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
font-size: 10px;
color: #7a6552;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-shadow: 0 1px 1px black;
}
.power-sys[open] > summary::after { transform: translateY(-50%) rotate(-180deg); color: #c85a17; }
.power-sys > summary:hover {
background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 50%, rgba(0,0,0,0.5) 100%);
color: #ffebd2;
text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 15px rgba(255,235,210,0.4);
}
/* --- 3. 内容兵营：内嵌暗格 --- */
.power-sys .power-grid {
padding: 16px 16px 12px;
background:
/* 兵营粗糙地面纹理 */
repeating-linear-gradient(45deg, rgba(0,0,0,0.2) 0px, rgba(0,0,0,0.2) 2px, transparent 2px, transparent 6px),
linear-gradient(to bottom, #0f0d0c 0%, #181513 100%);
box-shadow: inset 0 8px 12px rgba(0,0,0,0.8);
}
.power-sys[open] .power-grid {
animation: heavy-drop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes heavy-drop {
0% { opacity: 0; transform: translateY(-15px) scale(0.98); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* --- 4. 军队令牌（单条信息） --- */
.power-sys .power-item {
margin: 0 0 12px 0;
padding: 12px 14px;
background: linear-gradient(160deg, #2e2a26 0%, #221e1b 100%);
border: 1px solid #3a342f;
border-left: 4px solid #5c4d40;
border-radius: 2px;
font-size: 13px;
line-height: 1.6;
color: #bfaea0;
font-family: 'STSong', 'Songti SC', serif;
box-shadow:
0 4px 6px rgba(0,0,0,0.4),
inset 0 1px 0 rgba(255,255,255,0.05);
position: relative;
transition: all 0.3s ease;
}
.power-sys .power-item:last-child { margin-bottom: 0; }
/* 令牌悬浮效果：暗血杀气 */
.power-sys .power-item:hover {
background: linear-gradient(160deg, #382c28 0%, #261b18 100%);
border-color: #5a3c35;
border-left-color: #a33b24; /* 杀气红 */
color: #e8d6c8;
transform: translateX(4px);
box-shadow:
0 6px 12px rgba(0,0,0,0.6),
inset 0 1px 0 rgba(255,100,100,0.1),
-4px 0 10px rgba(163,59,36,0.2);
}
/* 兵符钉子装饰 */
.power-sys .power-item::before,
.power-sys .power-item::after {
content: '';
position: absolute;
right: 8px;
width: 4px; height: 4px;
border-radius: 50%;
background: #111;
box-shadow: 0 1px 1px rgba(255,255,255,0.2), inset 0 1px 2px black;
}
.power-sys .power-item::before { top: 8px; }
.power-sys .power-item::after { bottom: 8px; }
/* 首条（主将/主力）特殊样式：青铜泛金 */
.power-sys .power-item:first-child {
border-left-color: #c88a44;
background: linear-gradient(160deg, #332d24 0%, #241e17 100%);
font-weight: 900;
color: #d8c2a7;
}
.power-sys .power-item:first-child:hover {
border-left-color: #e6b36a;
box-shadow: 0 6px 12px rgba(0,0,0,0.6), -4px 0 12px rgba(200,138,68,0.25);
}
/* --- 5. 空营状态：残垣断壁感 --- */
.power-sys .power-empty {
margin: 0;
padding: 30px 16px;
text-align: center;
font-size: 13px;
color: #5c4d40;
font-family: 'STKaiti', 'KaiTi', serif;
letter-spacing: 2px;
background:
radial-gradient(ellipse at center, rgba(163,59,36,0.05) 0%, transparent 60%);
border: 1px dashed rgba(92,77,64,0.3);
border-radius: 2px;
}
/* --- 移动端适配 --- */
@media (max-width: 480px) {
.power-sys { margin: 12px 0; border-radius: 3px; }
.power-sys > summary { padding: 12px 14px; font-size: 13px; }
.power-sys .power-grid { padding: 14px 12px 10px; }
.power-sys .power-item { padding: 10px 12px; font-size: 12px; margin-bottom: 10px; }
.power-sys .power-item::before, .power-sys .power-item::after { right: 6px; width: 3px; height: 3px; }
}
/* ========================================= */
/* 行动推演：战术沙盘风格（厚重质感版） */
/* ========================================= */
.act-sys {
background:
/* 羊皮纸纹理 */
repeating-linear-gradient(
45deg,
transparent 0px,
transparent 2px,
rgba(100,80,60,0.02) 2px,
rgba(100,80,60,0.02) 3px
),
/* 羊皮纸底色 */
linear-gradient(160deg, #f5ead8 0%, #ebe0ca 50%, #f0e5d0 100%);
border: 3px solid #c8b49a;
border-radius: 8px;
margin: 16px 0;
/* 厚度质感：多层阴影 */
box-shadow:
/* 纸张内侧高光 */
inset 0 2px 0 rgba(255,255,255,0.6),
/* 纸张内侧底部暗纹 */
inset 0 -3px 8px rgba(80,60,40,0.15),
/* 第一层厚度 */
0 2px 0 rgba(200,180,154,0.4),
0 3px 0 rgba(180,160,134,0.3),
/* 第二层厚度 */
0 4px 0 rgba(160,140,114,0.2),
/* 外部阴影 */
0 8px 20px rgba(0,0,0,0.35),
0 14px 35px rgba(0,0,0,0.25);
position: relative;
}
.act-sys summary {
background:
/* 金属底纹 */
repeating-linear-gradient(
90deg,
transparent 0px,
transparent 1px,
rgba(100,80,60,0.03) 1px,
rgba(100,80,60,0.03) 2px
),
linear-gradient(90deg, #d4c4a8 0%, #c8b49a 50%, #d4c4a8 100%);
color: #3a2f20;
padding: 14px 18px;
font-size: 14px;
font-weight: 900;
font-family: 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
letter-spacing: 2.5px;
cursor: pointer;
border-bottom: 2px solid #b4a490;
transition: all 0.3s ease;
border-radius: 8px 8px 0 0;
text-shadow:
0 1px 0 rgba(255,255,255,0.6),
0 2px 4px rgba(80,60,40,0.3);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
inset 0 -1px 2px rgba(100,80,60,0.2);
transform: scaleY(1.05);
}
.act-sys summary:hover {
background:
repeating-linear-gradient(
90deg,
transparent 0px,
transparent 1px,
rgba(100,80,60,0.04) 1px,
rgba(100,80,60,0.04) 2px
),
linear-gradient(90deg, #c8b49a 0%, #d4c4a8 50%, #c8b49a 100%);
text-shadow:
0 1px 0 rgba(255,255,255,0.7),
0 2px 5px rgba(80,60,40,0.4),
0 0 12px rgba(212,196,168,0.3);
}
.act-sys summary::-webkit-details-marker { display: none; }
.act-sys summary::before {
content: "⚔ ";
color: #8a6a4a;
margin-right: 8px;
font-size: 15px;
filter: drop-shadow(0 1px 2px rgba(138,106,74,0.4));
}
.act-sys[open] {
padding: 0 0 16px 0;
}
/* ========================================= */
/* 行动选项卡片：厚重纸质卡片 */
/* ========================================= */
.act-item {
background:
/* 纸张纹理 */
repeating-linear-gradient(
0deg,
transparent 0px,
transparent 1px,
rgba(60,50,40,0.02) 1px,
rgba(60,50,40,0.02) 2px
),
linear-gradient(155deg, #faf5e8 0%, #f5f0e3 50%, #f8f3e6 100%);
border: 2px solid #d4c8b0;
border-left: 4px solid;
border-radius: 6px;
margin: 12px 14px;
padding: 0;
display: flex;
align-items: stretch;
position: relative;
overflow: hidden;
/* 厚重质感：多层阴影 */
box-shadow:
/* 纸张内侧高光 */
inset 0 1px 0 rgba(255,255,255,0.7),
inset 1px 0 0 rgba(255,255,255,0.3),
/* 纸张内侧暗部 */
inset 0 -1px 3px rgba(80,60,40,0.08),
/* 第一层厚度 */
0 1px 0 rgba(212,200,176,0.3),
0 2px 0 rgba(192,180,156,0.2),
/* 外部阴影 */
0 4px 12px rgba(0,0,0,0.2),
0 8px 24px rgba(0,0,0,0.15);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
/* hover：轻微抬起 */
.act-item:hover {
transform: translateY(-3px) scale(1.005);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.8),
inset 1px 0 0 rgba(255,255,255,0.4),
inset 0 -1px 3px rgba(80,60,40,0.1),
/* 抬起后厚度增加 */
0 2px 0 rgba(212,200,176,0.4),
0 3px 0 rgba(192,180,156,0.3),
0 4px 0 rgba(172,160,136,0.2),
/* 更强阴影 */
0 6px 16px rgba(0,0,0,0.25),
0 12px 32px rgba(0,0,0,0.2),
/* 色彩光晕 */
0 0 25px rgba(200,180,140,0.15);
border-left-width: 5px;
}
/* active：按压下沉 */
.act-item:active {
transform: translateY(1px) scale(0.998);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.6),
inset 0 3px 8px rgba(80,60,40,0.15),
0 2px 8px rgba(0,0,0,0.25);
transition: all 0.1s ease;
}
/* ========================================= */
/* 行动标签：竖排印章 */
/* ========================================= */
.act-tag {
flex-shrink: 0;
width: 64px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 900;
font-family: 'ZCOOL QingKe HuangYou', 'Noto Serif SC', serif;
letter-spacing: 1.5px;
text-shadow:
0 -1px 0 rgba(0,0,0,0.3),
0 1px 0 rgba(255,255,255,0.1),
0 2px 4px rgba(0,0,0,0.5);
position: relative;
writing-mode: vertical-rl;
text-orientation: upright;
transition: all 0.3s ease;
/* 标签立体感 */
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.15),
inset 0 -2px 4px rgba(0,0,0,0.2);
}
/* 标签右侧装饰线 */
.act-tag::after {
content: "";
position: absolute;
right: 0;
top: 8px;
bottom: 8px;
width: 2px;
background: rgba(0,0,0,0.2);
border-radius: 1px;
box-shadow: 1px 0 0 rgba(255,255,255,0.1);
}
.act-item:hover .act-tag {
letter-spacing: 2px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.2),
inset 0 -2px 4px rgba(0,0,0,0.25),
0 0 12px rgba(255,255,255,0.1);
}
/* 常规（墨青） */
.tag-normal {
background: linear-gradient(180deg, #5a7a8a 0%, #4a6a7a 50%, #5a7a8a 100%);
color: #e8f0f5;
border-left-color: #5a7a8a;
}
/* 退避（铁灰） */
.tag-retreat {
background: linear-gradient(180deg, #6a6a6a 0%, #5a5a5a 50%, #6a6a6a 100%);
color: #e8e8e8;
border-left-color: #6a6a6a;
}
/* 破格（血红） */
.tag-risk {
background: linear-gradient(180deg, #a03030 0%, #902020 50%, #a03030 100%);
color: #ffe8e8;
border-left-color: #a03030;
}
/* 承转（金铜） */
.tag-skip {
background: linear-gradient(180deg, #c8a050 0%, #b89040 50%, #c8a050 100%);
color: #fff8e8;
border-left-color: #c8a050;
}
/* ========================================= */
/* 行动文本：优化可读性 */
/* ========================================= */
.act-text {
flex: 1;
color: #2a2418;
font-size: 13.5px;
font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
line-height: 2;
padding: 16px 20px;
margin: 0;
position: relative;
letter-spacing: 0.5px;
text-shadow: 0 1px 1px rgba(255,255,255,0.5);
transition: all 0.3s ease;
}
/* 去掉右箭头 */
.act-text::after {
display: none;
}
/* hover时文字微亮 */
.act-item:hover .act-text {
color: #1a140c;
text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}
/* 强调文本：加粗 */
.act-text strong {
font-weight: 900;
color: #1a140c;
}
/* 提示文本：斜体 */
.act-text em {
font-style: italic;
color: #6a5a4a;
font-size: 12.5px;
}
/* ========================================= */
/* 互动反馈：左侧色彩扩散 */
/* ========================================= */
.act-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
pointer-events: none;
z-index: 0;
}
.act-item:hover::before {
width: 8px;
opacity: 0.2;
}
/* 各类型色彩 */
.act-item:has(.tag-normal):hover::before {
background: linear-gradient(90deg, #5a7a8a 0%, transparent 100%);
}
.act-item:has(.tag-retreat):hover::before {
background: linear-gradient(90deg, #6a6a6a 0%, transparent 100%);
}
.act-item:has(.tag-risk):hover::before {
background: linear-gradient(90deg, #a03030 0%, transparent 100%);
}
.act-item:has(.tag-skip):hover::before {
background: linear-gradient(90deg, #c8a050 0%, transparent 100%);
}
/* ========================================= */
/* 字体引入 */
/* ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+QingKe+HuangYou&family=ZCOOL+XiaoWei&family=Noto+Serif+SC:wght@400;600;700;900&display=swap');
.act-sys, .act-sys * {
font-feature-settings: "liga" 1, "calt" 1;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* 移动端适配 */
@media (max-width: 480px) {
.act-item { margin: 10px 12px; }
.act-tag { width: 58px; font-size: 13px; }
.act-text { font-size: 13px; padding: 14px 18px; }
}
/* ========================================= */
/* 记忆库：江湖话本风格 */
/* ========================================= */
.mem-sys {
background:
/* 旧书页纤维 */
url('data:image/svg+xml,'),
/* 横纹书页 */
repeating-linear-gradient(
0deg,
transparent 0px,
transparent 24px,
rgba(120,90,60,0.08) 24px,
rgba(120,90,60,0.08) 25px
),
/* 书页泛黄晕染 */
radial-gradient(ellipse 70% 60% at 30% 40%, rgba(240,220,180,0.4) 0%, transparent 70%),
radial-gradient(ellipse 60% 70% at 75% 65%, rgba(230,205,160,0.3) 0%, transparent 65%),
/* 旧纸底色 */
linear-gradient(160deg, #e8d5b0 0%, #ddc8a0 35%, #e2cfa8 65%, #d8c59a 100%);
border: 4px solid #b89868;
border-top-width: 6px;
border-bottom-width: 6px;
border-radius: 2px;
margin: 16px 0;
position: relative;
/* 厚重质感 */
box-shadow:
/* 书页内侧高光 */
inset 0 3px 0 rgba(255,250,235,0.6),
inset 0 -3px 0 rgba(255,250,235,0.4),
/* 书页厚度 */
0 2px 0 rgba(184,152,104,0.4),
0 3px 0 rgba(164,132,84,0.3),
0 4px 0 rgba(144,112,64,0.2),
/* 外部阴影 */
0 8px 20px rgba(0,0,0,0.4),
0 14px 35px rgba(0,0,0,0.3);
}
/* 左侧竹简装订线 */
.mem-sys::before {
content: "";
position: absolute;
left: 18px;
top: 20px;
bottom: 20px;
width: 3px;
background:
repeating-linear-gradient(
180deg,
transparent 0px,
transparent 14px,
rgba(140,90,50,0.5) 14px,
rgba(140,90,50,0.5) 16px,
transparent 16px,
transparent 30px
),
linear-gradient(180deg, rgba(140,90,50,0.3) 0%, rgba(120,80,40,0.4) 50%, rgba(140,90,50,0.3) 100%);
border-radius: 2px;
box-shadow:
1px 0 2px rgba(0,0,0,0.3),
-1px 0 1px rgba(255,240,200,0.2);
pointer-events: none;
}
/* 右上角折角 */
.mem-sys::after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 22px 22px 0;
border-color: transparent #c8ac7c transparent transparent;
filter: drop-shadow(-1px 1px 2px rgba(0,0,0,0.3));
}
/* 话本标题：章回体 */
.mem-sys summary {
background:
/* 横纹装饰 */
repeating-linear-gradient(
0deg,
transparent 0px,
transparent 1px,
rgba(120,90,60,0.04) 1px,
rgba(120,90,60,0.04) 2px
),
linear-gradient(90deg, #c8a878 0%, #b89868 20%, #c4a472 50%, #b89868 80%, #c8a878 100%);
color: #3a2410;
padding: 14px 20px 14px 36px;
font-size: 14px;
font-weight: 900;
font-family: 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
letter-spacing: 3px;
cursor: pointer;
border-bottom: 3px double rgba(100,70,40,0.35);
transition: all 0.35s ease;
border-radius: 0;
position: relative;
text-shadow:
0 1px 0 rgba(255,245,220,0.6),
0 2px 4px rgba(80,50,20,0.3);
box-shadow:
inset 0 2px 0 rgba(255,250,235,0.5),
inset 0 -1px 3px rgba(100,70,40,0.2);
transform: scaleY(1.05);
}
.mem-sys summary:hover {
background:
repeating-linear-gradient(
0deg,
transparent 0px,
transparent 1px,
rgba(120,90,60,0.05) 1px,
rgba(120,90,60,0.05) 2px
),
linear-gradient(90deg, #b89868 0%, #c8a878 20%, #b89868 50%, #c4a472 80%, #b89868 100%);
color: #2a1808;
text-shadow:
0 1px 0 rgba(255,250,230,0.7),
0 2px 5px rgba(80,50,20,0.4),
0 0 12px rgba(200,168,120,0.3);
}
.mem-sys summary::-webkit-details-marker { display: none; }
/* 竹简卷轴图标 */
.mem-sys summary::before {
content: "📜";
margin-right: 10px;
font-size: 16px;
filter:
sepia(0.6)
saturate(0.8)
brightness(0.9)
drop-shadow(0 2px 3px rgba(100,70,40,0.4));
}
/* 右侧"第X回"标记 */
.mem-sys summary::after {
content: "·回忆录·";
float: right;
font-size: 11px;
font-weight: 900;
font-family: 'ZCOOL QingKe HuangYou', serif;
color: rgba(100,60,30,0.6);
letter-spacing: 1.5px;
padding: 2px 10px;
border: 1.5px solid rgba(100,60,30,0.25);
border-radius: 3px;
transform: rotate(-2deg) translateY(1px);
text-shadow: 0 1px 2px rgba(100,60,30,0.2);
box-shadow: inset 0 1px 0 rgba(255,245,220,0.3);
margin-top: 1px;
}
.mem-sys[open] {
padding: 0 0 18px 0;
}
/* ========================================= */
/* 记忆分块：话本章节 */
/* ========================================= */
.mem-block {
margin: 16px 16px 0 38px;
background:
/* 纸张纹理 */
url('data:image/svg+xml,'),
/* 横格线 */
repeating-linear-gradient(
0deg,
transparent 0px,
transparent 28px,
rgba(140,100,60,0.1) 28px,
rgba(140,100,60,0.1) 29px
),
linear-gradient(158deg, #f5ecd8 0%, #ede4cc 40%, #f2e9d5 70%, #e8dfca 100%);
border: 0;
border-left: 4px solid;
border-radius: 0 6px 6px 0;
padding: 16px 18px;
position: relative;
/* 厚重纸张质感 */
box-shadow:
inset 2px 2px 0 rgba(255,250,240,0.5),
inset 0 -2px 6px rgba(120,90,60,0.1),
3px 5px 12px rgba(0,0,0,0.25),
6px 10px 24px rgba(0,0,0,0.15);
transition: all 0.3s ease;
/* 手撕边缘 */
clip-path: polygon(
0% 2%, 1% 0.5%, 2% 1.8%,
98% 0%, 99.5% 1.2%, 100% 2%,
100% 98%, 99% 99.5%, 98% 98.2%,
2% 100%, 0.5% 98.8%, 0% 97%
);
}
.mem-block:hover {
transform: translateX(3px);
box-shadow:
inset 2px 2px 0 rgba(255,250,240,0.6),
inset 0 -2px 6px rgba(120,90,60,0.12),
4px 7px 16px rgba(0,0,0,0.28),
8px 14px 30px rgba(0,0,0,0.18);
}
/* ========================================= */
/* 记忆标题：章回标题 */
/* ========================================= */
.mem-title {
color: #3a2410;
font-size: 13px;
font-weight: 900;
font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
letter-spacing: 2px;
margin: 0 0 14px 0;
padding-bottom: 10px;
border-bottom: 2px solid rgba(120,90,60,0.25);
text-shadow:
0 1px 0 rgba(255,250,235,0.6),
0 2px 4px rgba(100,70,40,0.3);
position: relative;
transform: scaleY(1.08);
}
/* 标题前置装饰：章回符号 */
.mem-title::before {
content: "◈";
position: absolute;
left: -20px;
top: -1px;
color: rgba(140,100,60,0.4);
font-size: 14px;
text-shadow: 0 0 6px rgba(140,100,60,0.3);
}
/* 容量标记 */
.mem-cap {
float: right;
color: #8a6a4a;
font-size: 10.5px;
font-weight: 700;
font-family: 'JetBrains Mono', 'Fira Code', monospace;
letter-spacing: 0.8px;
opacity: 0.75;
padding: 2px 8px;
background: rgba(0,0,0,0.08);
border-radius: 3px;
text-shadow: 0 1px 1px rgba(255,250,235,0.5);
transform: translateY(-2px);
}
/* ========================================= */
/* 记忆条目：说书人批注 */
/* ========================================= */
.mem-entry {
color: #3a2a1a;
font-size: 12.5px;
font-family: 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
line-height: 2;
margin: 10px 0;
padding: 12px 16px 12px 20px;
background: rgba(0,0,0,0.04);
border: 0;
border-left: 3px solid;
border-radius: 0 6px 6px 0;
box-shadow:
inset 1px 1px 0 rgba(255,250,240,0.4),
2px 3px 8px rgba(0,0,0,0.12);
position: relative;
letter-spacing: 0.3px;
text-shadow: 0 1px 1px rgba(255,250,235,0.6);
}
.mem-entry:last-child {
margin-bottom: 0;
}
/* 批注前缀小圆点 */
.mem-entry::before {
content: "•";
position: absolute;
left: 8px;
top: 12px;
font-size: 10px;
opacity: 0.5;
}
/* ========================================= */
/* 短期记忆（金黄笔记） */
/* ========================================= */
.mem-short {
border-left-color: #d4a850;
background:
repeating-linear-gradient(
0deg,
transparent 0px,
transparent 28px,
rgba(212,168,80,0.08) 28px,
rgba(212,168,80,0.08) 29px
),
linear-gradient(158deg, #faf4e0 0%, #f5efd8 40%, #f8f2de 70%, #f0ead5 100%);
}
.mem-short .mem-title {
color: #5a3a10;
border-bottom-color: rgba(212,168,80,0.3);
}
.mem-short .mem-title::before {
color: rgba(212,168,80,0.5);
text-shadow: 0 0 8px rgba(212,168,80,0.4);
}
.mem-short .mem-entry {
border-left-color: #d4a850;
background: rgba(212,168,80,0.06);
color: #4a2a08;
}
.mem-short .mem-entry::before {
color: rgba(212,168,80,0.6);
}
/* ========================================= */
/* 古早回忆（褪色墨迹） */
/* ========================================= */
.mem-ancient {
border-left-color: #9a7a5a;
background:
repeating-linear-gradient(
0deg,
transparent 0px,
transparent 28px,
rgba(154,122,90,0.08) 28px,
rgba(154,122,90,0.08) 29px
),
linear-gradient(158deg, #ebe0d0 0%, #e2d8c5 40%, #e7dccb 70%, #ddd2c0 100%);
opacity: 0.92;
filter: sepia(0.15);
}
.mem-ancient .mem-title {
color: #4a3a28;
border-bottom-color: rgba(154,122,90,0.25);
}
.mem-ancient .mem-title::before {
color: rgba(154,122,90,0.4);
}
.mem-ancient .mem-entry {
border-left-color: #9a7a5a;
background: rgba(154,122,90,0.05);
color: #4a3a28;
font-style: italic;
opacity: 0.88;
}
.mem-ancient .mem-entry::before {
color: rgba(154,122,90,0.5);
}
/* ========================================= */
/* 长期档案（墨青笔记） */
/* ========================================= */
.mem-long {
border-left-color: #6a8a9a;
background:
repeating-linear-gradient(
0deg,
transparent 0px,
transparent 28px,
rgba(106,138,154,0.08) 28px,
rgba(106,138,154,0.08) 29px
),
linear-gradient(158deg, #e8f0f5 0%, #dfe8ee 40%, #e5edf3 70%, #dae5eb 100%);
}
.mem-long .mem-title {
color: #2a3a48;
border-bottom-color: rgba(106,138,154,0.3);
}
.mem-long .mem-title::before {
color: rgba(106,138,154,0.5);
text-shadow: 0 0 8px rgba(106,138,154,0.4);
}
.mem-long .mem-entry {
border-left-color: #6a8a9a;
background: rgba(106,138,154,0.06);
color: #2a3a48;
}
.mem-long .mem-entry::before {
color: rgba(106,138,154,0.6);
}
/* ========================================= */
/* 字体引入 */
/* ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&family=ZCOOL+QingKe+HuangYou&family=Noto+Serif+SC:wght@400;600;700;900&family=JetBrains+Mono:wght@400;600&family=Fira+Code:wght@400;600&display=swap');
.mem-sys, .mem-sys * {
font-feature-settings: "liga" 1, "calt" 1;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ========================================= */
/* 移动端适配 */
/* ========================================= */
@media (max-width: 768px) {
.mem-sys { margin: 12px 0; }
.mem-sys summary { padding: 13px 18px 13px 32px; font-size: 13px; }
.mem-block { margin: 14px 14px 0 34px; padding: 14px 16px; }
.mem-title { font-size: 12.5px; margin-bottom: 12px; }
.mem-entry { font-size: 12px; padding: 11px 14px 11px 18px; }
}
@media (max-width: 480px) {
.mem-sys summary { padding: 12px 16px 12px 30px; font-size: 12.5px; letter-spacing: 2.5px; }
.mem-sys summary::after { font-size: 10px; padding: 1px 8px; }
.mem-block { margin: 12px 12px 0 32px; padding: 13px 14px; }
.mem-title { font-size: 12px; }
.mem-cap { font-size: 10px; padding: 1px 6px; }
.mem-entry { font-size: 11.5px; padding: 10px 12px 10px 16px; }
}
/* ========================================= */
/* 顶部导航栏：武侠风格美化 */
/* ========================================= */
header {
background:
/* 木纹纹理 */
repeating-linear-gradient(
0deg,
transparent 0px,
transparent 2px,
rgba(100,80,60,0.03) 2px,
rgba(100,80,60,0.03) 3px
),
/* 深木底色 */
linear-gradient(180deg, #2d2518 0%, #252018 50%, #2d2518 100%) !important;
border-bottom: 2px solid rgba(140,120,100,0.4) !important;
box-shadow:
inset 0 1px 0 rgba(100,80,60,0.15),
0 4px 12px rgba(0,0,0,0.5) !important;
backdrop-filter: blur(8px);
}
/* 侧边栏切换按钮 */
header button[data-sidebar="trigger"] {
background: rgba(100,80,60,0.12);
border: 1px solid rgba(140,120,100,0.3);
border-radius: 6px;
transition: all 0.3s ease;
}
header button[data-sidebar="trigger"]:hover {
background: rgba(120,100,80,0.2);
border-color: rgba(160,140,120,0.5);
box-shadow:
0 2px 8px rgba(0,0,0,0.3),
0 0 12px rgba(140,120,100,0.15);
transform: translateY(-1px);
}
header button[data-sidebar="trigger"] svg {
color: #c8b49a;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
/* 右侧工具按钮组 */
#nav-right button {
background: rgba(100,80,60,0.1);
border: 1px solid rgba(140,120,100,0.25);
border-radius: 6px;
transition: all 0.3s ease;
position: relative;
}
#nav-right button::before {
content: "";
position: absolute;
inset: -1px;
background: linear-gradient(135deg, rgba(200,180,140,0) 0%, rgba(200,180,140,0.15) 50%, rgba(200,180,140,0) 100%);
border-radius: 6px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
#nav-right button:hover::before {
opacity: 1;
}
#nav-right button:hover {
background: rgba(120,100,80,0.18);
border-color: rgba(160,140,120,0.45);
box-shadow:
0 2px 8px rgba(0,0,0,0.35),
0 0 16px rgba(200,180,140,0.2),
inset 0 1px 0 rgba(255,255,255,0.1);
transform: translateY(-1px);
}
/* 按钮图标 */
#nav-right button svg {
color: #c8b49a;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
transition: all 0.3s ease;
}
#nav-right button:hover svg {
color: #e8d8c8;
filter:
drop-shadow(0 1px 3px rgba(0,0,0,0.7))
drop-shadow(0 0 8px rgba(200,180,140,0.4));
}
/* 系统公告按钮（喇叭图标）- 特殊强调 */
#nav-right button[aria-label="系统公告"] {
background: rgba(120,90,50,0.15);
border-color: rgba(180,140,100,0.35);
}
#nav-right button[aria-label="系统公告"]:hover {
background: rgba(140,110,70,0.25);
border-color: rgba(200,160,120,0.5);
box-shadow:
0 2px 8px rgba(0,0,0,0.4),
0 0 18px rgba(200,160,100,0.3),
inset 0 1px 0 rgba(255,255,255,0.12);
}
#nav-right button[aria-label="系统公告"] svg {
color: #d4c4a8;
}
#nav-right button[aria-label="系统公告"]:hover svg {
color: #e8d8c0;
filter:
drop-shadow(0 1px 3px rgba(0,0,0,0.8))
drop-shadow(0 0 10px rgba(212,196,168,0.5));
}
/* 通知按钮（铃铛图标）- 有新消息时可添加 .has-notification 类 */
#nav-right button[aria-label="通知"].has-notification::after {
content: "";
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
background:
radial-gradient(circle, #ff4444 0%, #cc0000 100%);
border: 2px solid #2d2518;
border-radius: 50%;
box-shadow:
0 0 8px rgba(255,68,68,0.8),
0 0 16px rgba(255,68,68,0.4);
animation: notification-pulse 2s ease-in-out infinite;
}
@keyframes notification-pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.15);
opacity: 0.8;
}
}
/* 主题切换按钮（显示器图标） */
#nav-right button[aria-label="theme scheme"] svg {
color: #b4a490;
}
#nav-right button[aria-label="theme scheme"]:hover svg {
color: #d4c4b0;
}
/* 按钮点击激活状态 */
#nav-right button:active {
transform: translateY(0);
box-shadow:
0 1px 4px rgba(0,0,0,0.4),
inset 0 2px 4px rgba(0,0,0,0.3);
}
/* 导航栏间距调整 */
#nav-left,
#nav-right {
gap: 8px;
}
/* 移动端适配 */
@media (max-width: 768px) {
header {
height: 48px !important;
}
#nav-right {
gap: 4px;
}
#nav-right button {
height: 36px;
width: 36px;
}
#nav-right button svg {
width: 18px;
height: 18px;
}
}
/* 高对比度模式 */
@media (prefers-contrast: high) {
header {
border-bottom-width: 3px !important;
}
#nav-right button {
border-width: 2px;
}
#nav-right button svg {
filter: drop-shadow(0 2px 3px rgba(0,0,0,0.9));
}
}
/* ========================================= */
/* 底部输入栏：羊皮纸卷轴风格 */
/* ========================================= */
/* 输入栏外层容器 */
.absolute.inset-x-0.bottom-0 {
background:
linear-gradient(0deg, rgba(29,25,18,0.95) 0%, rgba(29,25,18,0.85) 60%, transparent 100%);
backdrop-filter: blur(12px);
}
/* 输入框主体 */
#prompt-input {
background:
/* 羊皮纸纹理 */
repeating-linear-gradient(
45deg,
transparent 0px,
transparent 2px,
rgba(100,80,60,0.02) 2px,
rgba(100,80,60,0.02) 3px
),
linear-gradient(160deg, #f5ead8 0%, #ebe0ca 50%, #f0e5d0 100%) !important;
border: 2px solid #c8b49a !important;
border-radius: 10px !important;
box-shadow:
inset 0 2px 0 rgba(255,255,255,0.5),
inset 0 -2px 6px rgba(0,0,0,0.15),
0 6px 20px rgba(0,0,0,0.5) !important;
}
/* 输入框组容器 */
[data-slot="input-group"] {
border: none !important;
box-shadow: none !important;
}
/* 顶部工具栏（模组/评论等按钮区域） */
#prompt-input-header {
background: linear-gradient(180deg, rgba(100,80,60,0.08) 0%, transparent 100%);
border-bottom: 1px solid rgba(140,120,100,0.25);
padding-top: 12px !important;
}
/* 快捷回复按钮（令牌风格） */
#prompt-input-header button {
background:
linear-gradient(155deg, #3d3528 0%, #35302a 50%, #3a332a 100%);
color: #d4c4b0 !important;
border: 2px solid rgba(140,120,100,0.4) !important;
border-radius: 6px !important;
box-shadow:
inset 0 1px 0 rgba(180,160,140,0.12),
0 2px 6px rgba(0,0,0,0.4) !important;
transition: all 0.3s ease;
position: relative;
}
#prompt-input-header button::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(200,180,140,0) 0%, rgba(200,180,140,0.08) 50%, rgba(200,180,140,0) 100%);
border-radius: 4px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
#prompt-input-header button:hover {
background: linear-gradient(155deg, #4a4230 0%, #3d3628 50%, #42392b 100%);
border-color: rgba(160,140,120,0.6) !important;
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(180,160,140,0.18),
0 3px 10px rgba(0,0,0,0.5),
0 0 12px rgba(140,120,100,0.15) !important;
}
#prompt-input-header button:hover::before {
opacity: 1;
}
#prompt-input-header button svg {
color: #c8b49a !important;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
/* 模组按钮特殊强调 */
#prompt-input-header button:has(svg.lucide-package) {
background: linear-gradient(155deg, #4a3d28 0%, #3d3520 50%, #42392b 100%);
border-color: rgba(180,140,100,0.5) !important;
}
#prompt-input-header button:has(svg.lucide-package):hover {
background: linear-gradient(155deg, #5a4d38 0%, #4d4530 50%, #52493b 100%);
border-color: rgba(200,160,120,0.7) !important;
}
/* 分隔线 */
.w-px.shrink-0.bg-border {
background: rgba(140,120,100,0.3) !important;
}
/* 快捷回复令牌（带emoji的按钮） */
button:has(span.truncate) {
background:
linear-gradient(155deg, #4a4230 0%, #3d3628 50%, #42392b 100%) !important;
color: #d4c4b0 !important;
border: 2px solid rgba(140,120,100,0.45) !important;
box-shadow:
inset 0 1px 0 rgba(180,160,140,0.15),
0 2px 6px rgba(0,0,0,0.4) !important;
}
button:has(span.truncate):hover {
background:
linear-gradient(155deg, #5a5240 0%, #4d4638 50%, #52493b 100%) !important;
border-color: rgba(160,140,120,0.65) !important;
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(180,160,140,0.2),
0 3px 10px rgba(0,0,0,0.5),
0 0 12px rgba(140,120,100,0.2) !important;
}
/* 输入文本域 */
textarea[name="message"] {
background: transparent !important;
color: #3a3020 !important;
font-size: 13px !important;
line-height: 1.6 !important;
}
textarea[name="message"]::placeholder {
color: rgba(60,50,40,0.4) !important;
font-style: italic;
}
textarea[name="message"]:focus {
outline: none !important;
box-shadow: none !important;
}
/* 底部工具栏 */
#prompt-input-footer {
background: linear-gradient(0deg, rgba(100,80,60,0.08) 0%, transparent 100%);
border-top: 1px solid rgba(140,120,100,0.25);
}
/* 底部按钮（设置/信息） */
#prompt-input-footer button {
background: rgba(100,80,60,0.1) !important;
border: 1.5px solid rgba(140,120,100,0.3) !important;
border-radius: 6px !important;
transition: all 0.3s ease;
}
#prompt-input-footer button:hover {
background: rgba(120,100,80,0.18) !important;
border-color: rgba(160,140,120,0.5) !important;
transform: translateY(-1px);
box-shadow:
0 2px 8px rgba(0,0,0,0.3),
0 0 12px rgba(140,120,100,0.15) !important;
}
#prompt-input-footer button svg {
color: #a89888 !important;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
#prompt-input-footer button:hover svg {
color: #c8b49a !important;
}
/* 模型选择按钮 */
button:has(img[alt="google logo"]) {
background:
linear-gradient(155deg, #3d3528 0%, #35302a 50%, #3a332a 100%) !important;
border: 1.5px solid rgba(140,120,100,0.4) !important;
color: #c8b49a !important;
box-shadow:
inset 0 1px 0 rgba(180,160,140,0.1),
0 2px 6px rgba(0,0,0,0.35) !important;
}
button:has(img[alt="google logo"]):hover {
background:
linear-gradient(155deg, #4a4230 0%, #3d3628 50%, #42392b 100%) !important;
border-color: rgba(160,140,120,0.6) !important;
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(180,160,140,0.15),
0 3px 10px rgba(0,0,0,0.45),
0 0 12px rgba(140,120,100,0.15) !important;
}
/* 回复模式按钮 */
button[aria-label="回复模式"] {
background: rgba(100,80,60,0.12) !important;
border: 1.5px solid rgba(140,120,100,0.35) !important;
}
button[aria-label="回复模式"]:hover {
background: rgba(120,100,80,0.2) !important;
border-color: rgba(160,140,120,0.55) !important;
}
button[aria-label="回复模式"] svg {
color: #a89888 !important;
}
button[aria-label="回复模式"]:hover svg {
color: #c8b49a !important;
}
/* 发送按钮（金色印章风格） */
button[type="submit"][aria-label="发送"] {
background:
radial-gradient(ellipse at center, #d4a850 0%, #c89840 50%, #b88830 100%) !important;
border: 2px solid rgba(180,130,70,0.8) !important;
border-radius: 6px !important;
box-shadow:
inset 0 1px 0 rgba(255,220,160,0.4),
inset 0 -1px 2px rgba(100,70,30,0.5),
0 2px 8px rgba(0,0,0,0.4),
0 0 16px rgba(212,168,80,0.3) !important;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
button[type="submit"][aria-label="发送"]::before {
content: "";
position: absolute;
inset: -50%;
background: linear-gradient(
135deg,
transparent 0%,
rgba(255,255,255,0.2) 45%,
rgba(255,255,255,0.4) 50%,
rgba(255,255,255,0.2) 55%,
transparent 100%
);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
button[type="submit"][aria-label="发送"]:hover::before {
transform: translateX(100%);
}
button[type="submit"][aria-label="发送"]:hover {
background:
radial-gradient(ellipse at center, #e4b860 0%, #d8a850 50%, #c89840 100%) !important;
border-color: rgba(200,150,90,0.9) !important;
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,230,180,0.5),
inset 0 -1px 2px rgba(110,80,40,0.6),
0 4px 12px rgba(0,0,0,0.5),
0 0 24px rgba(212,168,80,0.5),
0 0 36px rgba(200,152,64,0.3) !important;
}
button[type="submit"][aria-label="发送"]:active {
transform: translateY(0);
box-shadow:
inset 0 2px 4px rgba(100,70,30,0.6),
0 1px 4px rgba(0,0,0,0.4) !important;
}
button[type="submit"][aria-label="发送"] svg {
color: #fff8e8 !important;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
/* 移动端适配 */
@media (max-width: 768px) {
#prompt-input {
border-width: 1.5px !important;
}
#prompt-input-header button,
#prompt-input-footer button {
height: 28px !important;
font-size: 10px !important;
padding: 0 8px !important;
}
textarea[name="message"] {
font-size: 12px !important;
}
button[type="submit"][aria-label="发送"] {
width: 32px !important;
height: 32px !important;
}
}
/* 高对比度模式 */
@media (prefers-contrast: high) {
#prompt-input {
border-width: 3px !important;
}
#prompt-input-header button,
#prompt-input-footer button {
border-width: 2px !important;
}
button[type="submit"][aria-label="发送"] {
border-width: 3px !important;
}
}
/* ========================================= */
/* 对话区域：水墨山水风格 (高性能重构版) */
/* ========================================= */
/* 对话容器背景（水墨山水） */
#conversation {
/* [性能优化] 强制开启硬件加速，将背景剥离为独立图层 */
transform: translateZ(0);
will-change: transform;
background:
/* 远山剪影 (将原本的 6 层径向渐变精简为 2 层大面积渐变，极大降低 GPU 填充率压力) */
radial-gradient(ellipse 100% 25% at 50% 100%, rgba(40,35,30,0.1) 0%, transparent 60%),
radial-gradient(ellipse 80% 20% at 20% 90%, rgba(45,40,35,0.08) 0%, transparent 60%),
/* 细微水墨纹理 (仅保留一层) */
repeating-linear-gradient(45deg, transparent 0px, transparent 3px, rgba(40,35,25,0.008) 3px, rgba(40,35,25,0.008) 4px),
/* 宣纸底色 */
linear-gradient(180deg, #f5ead8 0%, #ebe0ca 30%, #e8dcc8 60%, #ebe0ca 100%);
}
/* 对话容器水墨点缀（飞白效果） */
#conversation::before {
content: "";
position: absolute;
inset: 0;
background:
/* 墨点飞溅 (将原本的 5 层精简为 2 层核心点缀) */
radial-gradient(circle at 25% 40%, rgba(40,35,30,0.04) 0%, transparent 8px),
radial-gradient(circle at 75% 55%, rgba(35,30,25,0.035) 0%, transparent 6px);
pointer-events: none;
opacity: 0.6;
}
/* 消息气泡容器 */
.w-full.max-w-2xl.mx-auto.my-3 {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* 用户消息气泡（淡色竹简） */
.group.is-user > div {
background:
/* [性能优化] 移除 repeating-linear-gradient，仅保留线性渐变 */
linear-gradient(155deg, #f8f0e0 0%, #f0e8d8 50%, #f5ead8 100%) !important;
border: 1.5px solid rgba(140,120,100,0.35) !important;
border-radius: 10px !important;
/* [性能优化] 4层阴影精简为2层，移除大范围模糊扩散 */
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.6),
0 4px 12px rgba(0,0,0,0.15) !important;
color: #3a3020 !important;
position: relative;
overflow: visible;
/* [致命卡顿元凶已移除] 绝对禁止在滚动列表元素上使用 backdrop-filter */
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* 用户消息气泡装饰线 */
.group.is-user > div::before {
content: "";
position: absolute;
left: 12px;
top: 12px;
bottom: 12px;
width: 2px;
background: linear-gradient(180deg, rgba(140,120,100,0.3) 0%, rgba(140,120,100,0.1) 50%, rgba(140,120,100,0.3) 100%);
border-radius: 1px;
}
.group.is-user .rili-markdown-renderer {
padding-left: 12px;
}
/* AI消息气泡（深色古籍书页） */
.group.is-assistant > div {
background:
/* [性能优化] 同样移除横纹叠加，仅保留底色渐变 */
linear-gradient(155deg, #3a3020 0%, #322b1d 50%, #362e20 100%) !important;
border: 1.5px solid rgba(100,80,60,0.5) !important;
border-radius: 10px !important;
/* [性能优化] 简化阴影 */
box-shadow:
inset 0 1px 0 rgba(140,120,100,0.15),
0 4px 16px rgba(0,0,0,0.3) !important;
color: #d4c4b0 !important;
/* [致命卡顿元凶已移除] */
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* ========================================= */
/* 移动端极限性能降级策略 */
/* ========================================= */
@media (max-width: 768px) {
/* 1. 全局背景剥离所有径向运算，化简为纯线性宣纸色 */
#conversation {
background: linear-gradient(180deg, #f5ead8 0%, #e8dcc8 100%) !important;
}
/* 2. 隐藏飞白墨点伪元素，杜绝无意义渲染 */
#conversation::before {
display: none !important;
}
/* 3. 气泡阴影与边框压缩至极限 */
.group.is-user > div,
.group.is-assistant > div {
box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
border-width: 1px !important;
}
.w-full.max-w-2xl.mx-auto.my-3 {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* ========================================= */
/* 操作按钮：去掉托盘，直接悬浮 */
/* ========================================= */
/* 操作按钮组容器 - 完全透明无背景 */
.bg-muted.rounded.flex {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 2px !important;
box-shadow: none !important;
gap: 4px;
}
/* 操作按钮 - 独立的圆形按钮 */
.bg-muted.rounded.flex button {
background: rgba(245,234,216,0.9) !important;
border: 1.5px solid rgba(140,120,100,0.3) !important;
border-radius: 50% !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.25s ease;
backdrop-filter: blur(8px);
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.bg-muted.rounded.flex button:hover {
background: rgba(255,248,235,0.95) !important;
border-color: rgba(160,140,120,0.5) !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.bg-muted.rounded.flex button svg {
color: #6a5a4a !important;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
transition: all 0.25s;
}
.bg-muted.rounded.flex button:hover svg {
color: #3a3020 !important;
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}
/* 单独的操作按钮（语音按钮等） */
button[aria-label="语音"],
button.size-7.hover\:bg-card\/80 {
background: rgba(245,234,216,0.9) !important;
border: 1.5px solid rgba(140,120,100,0.3) !important;
border-radius: 50% !important;
transition: all 0.3s;
backdrop-filter: blur(8px);
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
button[aria-label="语音"]:hover,
button.size-7.hover\:bg-card\/80:hover {
background: rgba(255,248,235,0.95) !important;
border-color: rgba(160,140,120,0.5) !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
/* 移动端适配 */
@media (max-width: 768px) {
.w-full.max-w-2xl.mx-auto.my-3 {
padding-left: 12px !important;
padding-right: 12px !important;
}
.group.is-user > div,
.group.is-assistant > div {
border-width: 1.5px !important;
}
novel p {
font-size: 12.5px !important;
line-height: 1.8 !important;
}
.top-bar {
font-size: 10.5px;
padding: 6px 10px;
}
.bg-muted.rounded.flex {
gap: 2px;
}
.bg-muted.rounded.flex button {
width: 28px !important;
height: 28px !important;
}
}
/* 高对比度模式 */
@media (prefers-contrast: high) {
.group.is-user > div,
.group.is-assistant > div {
border-width: 3px !important;
}
.bg-muted.rounded.flex button {
border-width: 2px !important;
}
.bg-muted.rounded.flex button svg {
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
}
/* ========================================= */
/* 彻底消灭按钮组外层容器的背景 */
/* ========================================= */
/* 按钮组最外层容器 - 完全透明 */
.flex.w-full.items-center.justify-between.gap-2.px-2 {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
/* 内层容器也透明 */
.flex.items-center.gap-1.ml-auto {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* 桌面端默认完全隐藏 */
@media (min-width: 768px) {
.flex.items-center.gap-1.ml-auto.md\:opacity-0 {
display: none;
}
.group:hover .flex.items-center.gap-1.ml-auto.md\:opacity-0 {
display: flex;
}
}
/* =========================================
【大楚风云】底栏背景专属美化
========================================= */
/* 最外层底栏容器背景 */
.relative.z-50.w-full.shrink-0.justify-items-center.pt-px.pb-\[2px\].md\:pb-4 {
background: linear-gradient(to bottom,
rgba(12, 8, 8, 0.85) 0%,
rgba(18, 10, 10, 0.92) 100%) !important;
backdrop-filter: blur(12px) !important;
border-top: 1px solid #4a1515 !important;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.8) !important;
}
/* 输入表单容器背景 */
#prompt-input {
background: rgba(20, 12, 12, 0.7) !important;
border: 1px solid #3a1515 !important;
border-radius: 8px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6),
inset 0 1px 3px rgba(74, 21, 21, 0.2) !important;
}
/* 输入框组背景透明化 */
.group\/input-group.border-input.dark\:bg-input\/30.shadow-xs {
background: transparent !important;
border-color: #3a1515 !important;
}
/* 文本输入区域 */
textarea[name="message"] {
background: rgba(10, 6, 6, 0.4) !important;
color: #d4c4a8 !important;
font-family: "STKaiti", "楷体", "KaiTi", serif !important;
}
textarea[name="message"]::placeholder {
color: #4a3f35 !important;
}
/* 输入区上下addon区域背景透明 */
div[data-slot="input-group-addon"] {
background: transparent !important;
}
/* ========================================= */
/* 终极性能优化补丁 v2.0 (针对动态重绘与残余SVG) */
/* ========================================= */
/* -----------------------------------------
1. 势力录 & 人脉册：强制终止所有“无限阴影动画”
（保留了 hover 时的过渡，干掉了耗性能的无限循环）
----------------------------------------- */
.faction-entry,
.faction-entry::before,
.faction-entry::after,
.faction-name,
.faction-name::before,
.faction-leader::before,
.faction-stance,
.faction-power::before,
.faction-note::before,
.ct-sys::before,
.grave-mem,
.ct-marriage::before,
.power-sys::before,
.vibe-name {
animation: none !important;
}
/* 如果一定要呼吸感，只允许使用 opacity 动画！(GPU零负担) */
@keyframes cheap-pulse {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
.faction-name::before {
animation: cheap-pulse 3s ease-in-out infinite !important;
}
/* -----------------------------------------
2. 精准剔除剩余板块的 SVG feTurbulence 噪点
（只删 SVG，完美保留你原有的多层线性/径向渐变底色）
----------------------------------------- */
/* 思维链卷轴 */
.think-chain {
background:
radial-gradient(ellipse at 5% 20%, rgba(80, 60, 40, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 95% 80%, rgba(60, 50, 40, 0.08) 0%, transparent 50%),
linear-gradient(160deg, #f5eed6 0%, #e8dcc5 50%, #ede3cc 100%) !important;
}
/* NPC 心理侧写 (泛黄信纸) */
.npc-mind {
background: linear-gradient(165deg, #f5ead2 0%, #ede1c5 50%, #e8d9bb 100%) !important;
}
/* NPC 微表情 (深黄信纸) */
.npc-tell {
background: linear-gradient(155deg, #ede1c5 0%, #e5d4b0 50%, #ddc9a5 100%) !important;
}
/* 婚姻册卡片 */
.ct-marriage .ct-entry {
background:
repeating-linear-gradient(52deg, transparent 0px, transparent 2px, rgba(139,0,0,0.025) 2px, rgba(139,0,0,0.025) 3px),
repeating-linear-gradient(-52deg, transparent 0px, transparent 2px, rgba(139,0,0,0.025) 2px, rgba(139,0,0,0.025) 3px),
linear-gradient(158deg, #3d1a1a 0%, #2d1212 35%, #3a1515 70%, #301010 100%) !important;
}
/* 核心人脉卡片 */
.ct-core .ct-entry {
background:
repeating-linear-gradient(90deg, transparent 0px, transparent 1px, rgba(240,208,144,0.04) 1px, rgba(240,208,144,0.04) 2px),
linear-gradient(158deg, #3a2f1a 0%, #2d2415 35%, #352818 70%, #2a2012 100%) !important;
}
/* 记忆库外壳 */
.mem-sys {
background:
repeating-linear-gradient(0deg, transparent 0px, transparent 24px, rgba(120,90,60,0.08) 24px, rgba(120,90,60,0.08) 25px),
radial-gradient(ellipse 70% 60% at 30% 40%, rgba(240,220,180,0.4) 0%, transparent 70%),
radial-gradient(ellipse 60% 70% at 75% 65%, rgba(230,205,160,0.3) 0%, transparent 65%),
linear-gradient(160deg, #e8d5b0 0%, #ddc8a0 35%, #e2cfa8 65%, #d8c59a 100%) !important;
}
/* 记忆库章节纸张 */
.mem-block {
background:
repeating-linear-gradient(0deg, transparent 0px, transparent 28px, rgba(140,100,60,0.1) 28px, rgba(140,100,60,0.1) 29px),
linear-gradient(158deg, #f5ecd8 0%, #ede4cc 40%, #f2e9d5 70%, #e8dfca 100%) !important;
}
/* -----------------------------------------
3. 全局高危渲染属性降级
----------------------------------------- */
/* 强制独立图层，防止任何内部变动污染全局 */
.act-sys, .ct-faction, .npc-card, .hud-player, .rumor-sys {
transform: translateZ(0);
will-change: transform;
}
/* 简化水墨山水背景（砍掉6个高开销的径向渐变，用线性渐变替代远山效果） */
#conversation {
background:
repeating-linear-gradient(45deg, transparent 0px, transparent 3px, rgba(40,35,25,0.008) 3px, rgba(40,35,25,0.008) 4px),
linear-gradient(180deg, #f5ead8 0%, #e3d2b7 40%, #d8c2a3 100%) !important;
}
/* 若你觉得底栏毛玻璃也会导致打字卡顿，解开下方注释 */
.relative.z-50.w-full.shrink-0.justify-items-center.pt-px.pb-\[2px\].md\:pb-4 {
backdrop-filter: none !important;
background: rgba(15, 9, 9, 0.98) !important;
}
/* ========================================= */
/* 强制纠偏：情意标签绝对桃红渲染锁 */
/* ========================================= */
span[data-tag="love"] {
background: linear-gradient(135deg, rgba(255,152,192,0.15) 0%, rgba(220,110,150,0.1) 100%) !important;
color: #ff98c0 !important;
border-color: rgba(255,152,192,0.4) !important;
}