我的道侣必须背叛我才能渡劫突破【NTR·绿帽值·反差·调教】

/* ═══════════════════════════════════════════════════════════════════
   古风修仙 UI底座 (builtInCss) v2.0 · 绿帽天劫「天劫·青霆」版
   夜墨 · 天劫·青霆 器物学 —— 完全推翻 Apple/iOS 模板
   视觉身份：青霆绿雷光 #3FAE8C × 雷光金 #E8CE8F × 玄青暗底 #0A1210
   装饰母题：云雷纹 / 闪电裂纹 / 玉诏卷轴 · 气质=天罚肃杀+青绿邪光
   组件专属造型（绝非换色底座）：
     状态栏=八卦雷纹罗盘 | 绿帽罗盘=玉诏质感 | 行动选项=雷令木牌
     自身栏=玉诏名册 | 思维链=雷符丹书 | 总结=渡劫录卷轴
   纯CSS无JS · 只用 details/summary + :has() + 兄弟选择器
   零内联事件 / 零锚点链接 / 零表单控件 / 零内联JS
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   0. 设计令牌（CSS变量 · 天劫·青霆 全套 · 照 v4 结构）
   ═══════════════════════════════════════════════════════════════════ */
.status-bar,
.dl-self,
.dl-npc-bar,
.dl-rel-card,
.dl-quest-bar,
.dl-actions,
.dl-summary,
.dl-chain,
.dl-gm-panel,
.dl-loop-panel,
.dl-blood-panel{
  --dl-bg:#050A08;                          /* 玄青暗底·至深 */
  --dl-card:#0A1210;                        /* 玄青暗底 */
  --dl-card-hover:#102019;
  --dl-elevated:#143227;
  --dl-separator:rgba(63,174,140,.32);      /* 青霆绿·细线 */
  --dl-separator-soft:rgba(63,174,140,.12); /* 青霆绿·淡线 */
  --dl-label:#EAF4ED;                       /* 玉青白 */
  --dl-label-2:#B9CBC1;
  --dl-label-3:#71847B;
  --dl-label-4:#3D4B45;
  --dl-accent:#3FAE8C;                      /* 青霆绿·主色 */
  --dl-accent-2:#E8CE8F;                    /* 雷光金·次色 */
  --dl-green:#2F9E83;                       /* 青玉 */
  --dl-red:#C23A2F;                         /* 雷血红 */
  --dl-orange:#C8842C;                      /* 琥珀 */
  --dl-yellow:#E0B85C;                      /* 杏黄 */
  --dl-purple:#7D6B9E;                      /* 黛紫 */
  --dl-pink:#C96A8A;                        /* 胭脂 */
  --dl-cap:#3FAE8C;                         /* 绿帽·青霆绿（题材主色） */
  --dl-thunder:#8FE8C4;                     /* 雷光·青白 */
  --dl-spark:#E8CE8F;                       /* 雷光·金 */
  --dl-abyss:#0A1210;                       /* 玄青暗底 */
  --dl-radius-sm:4px;
  --dl-radius-md:8px;
  --dl-radius-lg:12px;
  --dl-radius-xl:18px;
  --dl-font:'KaiTi','STKaiti','STSong','SimSun','Songti SC','Noto Serif SC','Microsoft YaHei',serif;
  --dl-font-seal:'STKaiti','KaiTi','STSong','SimSun','Noto Serif SC',serif;
  --dl-shadow-card:0 1px 2px rgba(0,0,0,.5),0 1px 1px rgba(0,0,0,.4);
  --dl-shadow-raised:0 4px 14px rgba(0,0,0,.55),0 0 0 1px rgba(63,174,140,.16);
  --dl-shadow-float:0 14px 44px rgba(0,0,0,.7);
  /* 专属造型底料：闪电裂 / 天罚锯齿 / 云雷纹 */
  --dl-bolt:polygon(50% 0%,57% 34%,47% 34%,34% 100%,64% 26%,52% 26%,58% 0%);
  --dl-crack:polygon(0 100%,4% 15%,9% 85%,15% 0%,22% 70%,29% 10%,36% 90%,44% 0%,51% 75%,59% 5%,66% 95%,74% 15%,82% 85%,90% 0%,96% 80%,100% 20%,100% 100%);
  --dl-lattice:
    repeating-linear-gradient(45deg,rgba(63,174,140,.045) 0 1px,transparent 1px 13px),
    repeating-linear-gradient(-45deg,rgba(63,174,140,.045) 0 1px,transparent 1px 13px),
    radial-gradient(rgba(232,206,143,.06) 1px,transparent 1.5px);
}

/* ═══════════════════════════════════════════════════════════════════
   1. 场景状态栏 .status-bar —— 青霆雷纹罗盘（2×2 四格 · 每格两行）
   时辰=具体时刻+时段 / 位置=区域+建筑 / 灵石=数字+来源 / 灵力=百分比+档位
   罗盘环 + 四象卦符 + 闪电裂纹角 + 双行值(st-value主/st-sub次)
   ═══════════════════════════════════════════════════════════════════ */
.status-bar{
  --c-day:#E8CE8F;                          /* 昼·雷光金 */
  --c-night:#8FE8C4;                        /* 夜·雷光青 */
  --c-late:#7D6B9E;                         /* 深·黛紫 */
  --c-money:#E8CE8F;                        /* 灵石·雷光金 */
  --c-hp:#3FAE8C;                           /* 灵力·青霆 */
  --c-warn:#C23A2F;                         /* 雷血红 */
  --c-mood:#E8CE8F;                         /* 机缘·雷光金 */

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  width:100%;max-width:none;margin:10px auto 0;box-sizing:border-box;
  background:var(--dl-separator-soft);
  border:1px solid var(--dl-separator);
  border-radius:var(--dl-radius-md);
  overflow:hidden;
  font-family:var(--dl-font);
  font-size:15px;line-height:1.5;color:var(--dl-label);
  box-shadow:var(--dl-shadow-card);
  position:relative;
  transition:border-color .25s,box-shadow .25s;
}
/* 罗盘环：同心雷纹圈 + 天罚青绿邪光 */
.status-bar::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at center,rgba(63,174,140,.06) 0,transparent 52%),
    repeating-radial-gradient(circle at center,transparent 0 30px,rgba(143,232,196,.10) 31px 32px,transparent 33px 46px);
}
.status-bar::after{
  content:'☰';position:absolute;top:3px;left:50%;transform:translateX(-50%);
  font-size:8px;color:rgba(143,232,196,.28);letter-spacing:0;z-index:0;pointer-events:none;
}
.status-bar:hover{
  border-color:rgba(63,174,140,.55);
  box-shadow:var(--dl-shadow-raised);
}

/* 网格单元 —— 每格一枚雷纹卦符 */
.st-item{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  background:linear-gradient(180deg,rgba(10,18,16,.94),rgba(10,18,16,.82));
  white-space:nowrap;overflow:hidden;
  position:relative;z-index:1;
}
/* 四象卦符（每格一角） */
.st-item::before{
  content:'☷';position:absolute;right:9px;bottom:5px;z-index:0;
  font-size:11px;line-height:1;color:rgba(63,174,140,.20);pointer-events:none;
}
.st-item:nth-child(1)::before{content:'☳';}
.st-item:nth-child(2)::before{content:'☱';}
.st-item:nth-child(3)::before{content:'☶';}
.st-item:nth-child(4)::before{content:'☷';}
/* 闪电裂纹角（右上角青霆闪） */
.st-item::after{
  content:'';position:absolute;right:6px;top:6px;width:13px;height:13px;pointer-events:none;
  background:linear-gradient(160deg,rgba(232,206,143,.55),rgba(63,174,140,.30));
  clip-path:var(--dl-bolt);
  opacity:.55;
}
.st-ico{
  width:30px;height:30px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:17px;
  background:linear-gradient(160deg,#13251D,#0A1611);
  clip-path:polygon(50% 0%,93% 21%,93% 79%,50% 100%,7% 79%,7% 21%);
  box-shadow:inset 0 0 0 1px rgba(63,174,140,.4);
}
.st-value{color:var(--dl-label);font-weight:600;font-size:16px;overflow:hidden;text-overflow:ellipsis;letter-spacing:.3px;}
.st-tag{
  display:inline-block;padding:3px 9px;font-size:12px;font-weight:600;
  border:none;border-radius:20px;flex-shrink:0;font-family:var(--dl-font-seal);
}
.st-bar{
  display:inline-block;width:36px;height:4px;
  background:rgba(255,255,255,.08);border-radius:2px;
  overflow:hidden;flex-shrink:0;
}
.st-bar > i{display:block;height:100%;border-radius:2px;transition:width .3s;}
/* 双行值：主值 + 次行（时段/来源/档位等罗盘细格） */
.st-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;align-items:flex-start;}
.st-c .st-value{max-width:100%;}
.st-sub{
  font-size:13px;color:var(--dl-label-4);line-height:1.35;letter-spacing:.3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.st-c:hover .st-sub{color:var(--dl-label-3);}

/* 时辰格（昼/夜/深 三色） */
.st-time .st-ico{box-shadow:inset 0 0 0 1px rgba(143,232,196,.3);}
.st-time.is-day .st-ico{background:linear-gradient(160deg,#3A2E12,#241D0A);box-shadow:inset 0 0 0 1px rgba(232,206,143,.4);}
.st-time.is-day .st-tag{color:var(--c-day);background:rgba(232,206,143,.12);}
.st-time.is-night .st-ico{background:linear-gradient(160deg,#12241D,#0B1712);box-shadow:inset 0 0 0 1px rgba(143,232,196,.42);}
.st-time.is-night .st-tag{color:var(--c-night);background:rgba(143,232,196,.12);}
.st-time.is-late .st-ico{background:linear-gradient(160deg,#1D1B2A,#131120);box-shadow:inset 0 0 0 1px rgba(125,107,158,.42);}
.st-time.is-late .st-tag{color:var(--c-late);background:rgba(125,107,158,.14);}

/* 位置格 */
.st-loc .st-ico{box-shadow:inset 0 0 0 1px rgba(63,174,140,.42);}
.st-loc .st-value{color:var(--dl-accent-2);}

/* 灵石格 */
.st-money .st-ico{background:linear-gradient(160deg,#3A2E12,#241D0A);box-shadow:inset 0 0 0 1px rgba(232,206,143,.4);}
.st-money .st-value{color:var(--c-money);font-variant-numeric:tabular-nums;}

/* 灵力格 */
.st-hp .st-ico{box-shadow:inset 0 0 0 1px rgba(63,174,140,.42);}
.st-hp .st-value{color:var(--c-hp);}
.st-hp .st-bar > i{background:linear-gradient(90deg,#2F9E83,#8FE8C4);}
.st-hp.is-low .st-value{color:var(--c-warn);animation:hp-pulse 1.2s ease-in-out infinite;}
.st-hp.is-low .st-bar > i{background:var(--c-warn);}
.st-mood .st-value{color:var(--c-mood);}

/* 警告态 */
.st-warn .st-value{color:var(--c-warn);font-weight:700;}
.st-warn .st-ico{animation:warn-blink 1s ease-in-out infinite;}
.status-bar.alert{border-color:rgba(194,58,47,.45) !important;animation:warn-glow 2s ease-in-out infinite;}

/* 涨跌动画（雷光金闪=升 / 雷血红闪=降） */
.st-up .st-value{animation:flash-up 1.2s ease;}
.st-down .st-value{animation:flash-down 1.2s ease;}

@keyframes hp-pulse{0%,100%{opacity:1;text-shadow:none}50%{opacity:.6;text-shadow:0 0 8px rgba(63,174,140,.7)}}
@keyframes warn-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes warn-glow{0%,100%{box-shadow:0 0 0 1px rgba(194,58,47,.2),0 0 12px rgba(194,58,47,.1)}50%{box-shadow:0 0 0 1px rgba(194,58,47,.4),0 0 20px rgba(194,58,47,.25)}}
@keyframes flash-up{0%{text-shadow:0 0 10px rgba(232,206,143,.8);transform:scale(1.06)}100%{text-shadow:none;transform:scale(1)}}
@keyframes flash-down{0%{text-shadow:0 0 10px rgba(194,58,47,.8);transform:scale(1.06)}100%{text-shadow:none;transform:scale(1)}}
@keyframes bolt-flicker{0%,86%,100%{opacity:.45}90%{opacity:.9}94%{opacity:.3}}

/* ═══════════════════════════════════════════════════════════════════
   2. 自身状态栏 .dl-self —— 玉诏名册（完整人物卡·固定十二行 · 防AI遗忘）
   本卡十二行：身份/体型/面容/性格/背景/境界/穿着/随身/身心/伤势/名声/关系
   玉诏体：青玉卷轴底 + 云雷暗纹 + 闪电裂纹行隔
   ═══════════════════════════════════════════════════════════════════ */
.dl-self{
  width:100%;max-width:none;margin:6px auto 0;box-sizing:border-box;
  font-family:var(--dl-font);
  background:linear-gradient(180deg,#0D1915 0%,#08110E 100%);
  border:1px solid var(--dl-separator);
  border-top:2px solid rgba(63,174,140,.7);   /* 青霆顶缘 */
  border-radius:var(--dl-radius-md);
  overflow:hidden;
  box-shadow:var(--dl-shadow-card);
  color:var(--dl-label);
  position:relative;
  transition:border-color .25s,box-shadow .25s;
}
/* 玉诏底纹：云雷暗纹 */
.dl-self::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--dl-lattice);
  opacity:.55;
}
.dl-self:hover{
  border-color:rgba(63,174,140,.55);
  box-shadow:var(--dl-shadow-raised);
}
/* 折叠头 summary —— 玉诏题首 */
.dl-self>summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  font-size:15px;font-weight:600;color:var(--dl-label);letter-spacing:1px;
  background:rgba(63,174,140,.07);
  border-bottom:1px solid var(--dl-separator-soft);
  user-select:none;position:relative;z-index:1;
}
.dl-self>summary::-webkit-details-marker{display:none;}
.dl-self>summary::-moz-list-marker{display:none;}
.dl-self>summary .dl-self-ic{font-size:17px;}
.dl-self>summary .dl-self-arrow{font-size:12px;color:var(--dl-label-3);transition:transform .2s;}
.dl-self[open]>summary .dl-self-arrow{transform:rotate(180deg);}
.dl-self:not([open])>summary{border-bottom:none;}

/* 行容器 —— 玉诏名册一行一签 */
.dl-self-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px 8px 12px;
  border-bottom:1px dashed rgba(63,174,140,.14);
  font-size:14px;line-height:1.5;
  position:relative;z-index:1;
  background:rgba(10,18,16,.35);
}
.dl-self-row:last-child{border-bottom:none;}
/* 左缘雷光签 · 按十二行分色（延续青霆色板） */
.dl-self-row::before{
  content:'';position:absolute;left:0;top:6px;bottom:6px;
  width:3px;border-radius:0 2px 2px 0;
}
.dl-self-row:nth-child(2)::before{background:#E8CE8F;}   /* 身份·雷光金 */
.dl-self-row:nth-child(3)::before{background:#3FAE8C;}   /* 体型·青霆 */
.dl-self-row:nth-child(4)::before{background:#8FE8C4;}   /* 面容·雷光青 */
.dl-self-row:nth-child(5)::before{background:#C96A8A;}   /* 性格·胭脂 */
.dl-self-row:nth-child(6)::before{background:#7D6B9E;}   /* 背景·黛紫 */
.dl-self-row:nth-child(7)::before{background:#C23A2F;}   /* 境界·雷血红 */
.dl-self-row:nth-child(8)::before{background:#E0B85C;}   /* 穿着·杏黄 */
.dl-self-row:nth-child(9)::before{background:#C8842C;}   /* 随身·琥珀 */
.dl-self-row:nth-child(10)::before{background:#2F9E83;}  /* 身心·青玉 */
.dl-self-row:nth-child(11)::before{background:#C23A2F;}  /* 伤势·雷血红 

/* 预览已截断；下载 CSS 可查看完整内容。 */

本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。